/* CostDrip v4.6 — rcc-styles.css
   Scoped to #rcc-app. No 'all:unset' on buttons (breaks pointer-events).
   Uses explicit property overrides at high specificity to beat WP/Astra themes.

   ── Visual identity ──────────────────────────────────────────────────────
   "The Bucket Therapy" identity: a deep aubergine-plum paired with warm
   caramel — the colour of a cookie fresh out of the oven, edges just
   browned. Fraunces (a warm, ink-trap serif) carries numbers and headers so
   the dashboard feels like a considered product rather than a generic admin
   panel; Inter handles body copy and controls. Cards read as warm, baked
   surfaces, not flat white tiles.

   ── v4.6 mobile-first pass ───────────────────────────────────────────────
   - Receipts / Customers / Ingredients / P&L tables now collapse into
     labeled card rows on phones instead of forcing horizontal scroll
     (uses :has() + data-label attributes set in rcc-app.js; degrades to
     the old scrollable table on browsers without :has() support).
   - Buttons, tabs, form fields and the modal close button sized for thumbs
     (~40-46px tap targets) on small screens.
   - :active press states added throughout — :hover alone doesn't fire on
     touch, so taps previously gave no visual feedback.
   - Safe-area-inset padding on the bottom bar, toast and modal footers so
     content clears the iPhone home-indicator.
   - Recipe Builder's add-ingredient row and the template editor's toggle
     grid reworked for narrow screens.
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700;800&display=swap');

/* ── ROOT TOKENS ──────────────────────────────────────────────────────────── */
:root{
  --cd-plum:#241129;--cd-plum-mid:#3a1f42;--cd-plum-dp:#160a1a;--cd-cream:#f7eee0;
  --cd-caramel:#c2752c;--cd-caramel-lt:#e89a4a;--cd-caramel-dp:#8f521b;--cd-chalk:#fffaf3;
  --cd-muted:rgba(247,238,224,.55);
  --bg:#f8f1e6;--surface:#fffcf6;--surface-2:#fbf3e7;--border:#e9dcc6;--border-hv:#d8c5a3;
  --text:#241a14;--text-2:#7a6552;--text-3:#a8957e;
  --accent:#c2752c;--accent-dk:#955a20;--accent-lt:#f7e6cd;
  --danger:#b8412f;--danger-lt:#fbe9e5;
  --success:#1f7a45;--success-lt:#e3f3e8;
  --warn:#a8631a;--warn-lt:#fbedd9;
  --r:9px;--r-lg:16px;
  --sh:0 1px 2px rgba(36,17,28,.06),0 1px 1px rgba(36,17,28,.04);
  --sh-lg:0 16px 40px -8px rgba(36,17,28,.22),0 4px 12px rgba(36,17,28,.08);
  --f:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-display:'Fraunces','Iowan Old Style',Georgia,serif;
  --mono:"SF Mono",ui-monospace,"Cascadia Code",monospace;
  --t:.16s cubic-bezier(.4,0,.2,1);
}

/* ── BOX SIZING ───────────────────────────────────────────────────────────── */
#rcc-app,#rcc-app *,#rcc-app *::before,#rcc-app *::after,
.rcc-login-wrap,.rcc-login-wrap *,
.rcc-modal,.rcc-modal *{box-sizing:border-box}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON RESET — explicit, never 'all:unset' (that kills pointer-events)
   Target every possible WP/theme selector that could override our buttons
═══════════════════════════════════════════════════════════════════════════ */
#rcc-app button,
#rcc-app button:link,
#rcc-app button:visited,
#rcc-app button:hover,
#rcc-app button:focus,
#rcc-app button:active{
  /* typography */
  font-family:var(--f) !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  text-decoration:none !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-shadow:none !important;
  /* box */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:none !important;
  background-image:none !important;
  /* interaction */
  cursor:pointer !important;
  pointer-events:auto !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  /* border */
  border-style:solid !important;
  border-width:1px !important;
  border-radius:var(--r) !important;
  /* padding */
  padding:8px 14px !important;
  /* outline — keep accessible but not ugly */
  outline:none !important;
  transition:background-color var(--t),border-color var(--t),color var(--t),box-shadow var(--t),transform var(--t) !important;
}
#rcc-app button:focus-visible{outline:2px solid var(--accent) !important;outline-offset:2px !important;}
#rcc-app button:disabled,#rcc-app button[disabled]{opacity:.45 !important;cursor:not-allowed !important;pointer-events:none !important;}

/* ── Button variants ──────────────────────────────────────────────────────── */
#rcc-app .rcc-btn--primary,
.rcc-modal .rcc-btn--primary{
  background-color:var(--accent) !important;background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0)) !important;
  color:#fff !important;border-color:var(--accent-dk) !important;
  white-space:nowrap !important;gap:5px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 2px 6px rgba(140,82,27,.28) !important;
}
#rcc-app .rcc-btn--primary:hover:not(:disabled),
.rcc-modal .rcc-btn--primary:hover:not(:disabled){
  background-color:var(--cd-caramel-lt) !important;border-color:var(--cd-caramel-lt) !important;color:var(--cd-plum-dp) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 4px 10px rgba(140,82,27,.32) !important;
  transform:translateY(-1px);
}
#rcc-app .rcc-btn--primary:active:not(:disabled),
.rcc-modal .rcc-btn--primary:active:not(:disabled){
  background-color:var(--accent-dk) !important;border-color:var(--accent-dk) !important;color:#fff !important;
  box-shadow:0 1px 4px rgba(140,82,27,.3) inset !important;transform:translateY(0) scale(.98);
}
#rcc-app .rcc-btn--ghost,
.rcc-modal .rcc-btn--ghost{
  background-color:transparent !important;color:var(--text-2) !important;border-color:var(--border) !important;
  white-space:nowrap !important;gap:5px !important;
}
#rcc-app .rcc-btn--ghost:hover:not(:disabled),
.rcc-modal .rcc-btn--ghost:hover:not(:disabled){
  background-color:var(--surface-2) !important;border-color:var(--border-hv) !important;color:var(--text) !important;
}
#rcc-app .rcc-btn--ghost:active:not(:disabled),
.rcc-modal .rcc-btn--ghost:active:not(:disabled){
  background-color:var(--border) !important;border-color:var(--border-hv) !important;color:var(--text) !important;
  transform:scale(.98);
}
#rcc-app .rcc-btn--danger,
.rcc-modal .rcc-btn--danger{background-color:var(--danger) !important;color:#fff !important;border-color:var(--danger) !important;}
#rcc-app .rcc-btn--danger:hover:not(:disabled),
.rcc-modal .rcc-btn--danger:hover:not(:disabled){background-color:#963322 !important;}
#rcc-app .rcc-btn--danger:active:not(:disabled),
.rcc-modal .rcc-btn--danger:active:not(:disabled){background-color:#7a2a1c !important;transform:scale(.98);}

/* ghost in dark header */
#rcc-app .rcc-header .rcc-btn--ghost{
  color:rgba(247,238,224,.75) !important;border-color:rgba(247,238,224,.25) !important;background-color:transparent !important;
}
#rcc-app .rcc-header .rcc-btn--ghost:hover:not(:disabled){
  background-color:rgba(247,238,224,.12) !important;color:var(--cd-chalk) !important;border-color:rgba(247,238,224,.45) !important;
}
#rcc-app .rcc-header .rcc-btn--ghost:active:not(:disabled),
#rcc-app .rcc-bottom-bar .rcc-btn--ghost:active:not(:disabled){
  background-color:rgba(247,238,224,.2) !important;transform:scale(.98);
}

/* size variants */
#rcc-app .rcc-btn--sm,.rcc-modal .rcc-btn--sm{padding:5px 10px !important;font-size:12px !important;}
#rcc-app .rcc-btn--icon,.rcc-modal .rcc-btn--icon{padding:5px 8px !important;font-size:12px !important;}


/* spinner inside button */
.rcc-loading{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:rcc-spin .7s linear infinite;vertical-align:middle;}
@keyframes rcc-spin{to{transform:rotate(360deg)}}

/* ── TABS — beat WP nav/link/button styles ───────────────────────────────── */
#rcc-app .rcc-tabs{
  display:flex;border-bottom:1px solid var(--border);
  padding:0 16px;gap:2px;overflow-x:auto;
  background:transparent !important;
}
#rcc-app .rcc-tab{
  /* explicit reset — no all:unset */
  background-color:transparent !important;background-image:none !important;
  color:var(--text-2) !important;
  border-top:none !important;border-left:none !important;border-right:none !important;
  border-bottom:2.5px solid transparent !important;
  border-radius:6px 6px 0 0 !important;
  padding:10px 16px !important;
  font-family:var(--f) !important;font-size:14px !important;font-weight:600 !important;
  cursor:pointer !important;pointer-events:auto !important;
  white-space:nowrap;margin-bottom:-1px;
  text-transform:none !important;text-decoration:none !important;letter-spacing:normal !important;
  box-shadow:none !important;outline:none !important;
  transition:color var(--t),border-color var(--t),background-color var(--t);
}
#rcc-app .rcc-tab:hover{color:var(--text) !important;background-color:var(--surface-2) !important;}
#rcc-app .rcc-tab:active{background-color:var(--accent-lt) !important;}
#rcc-app .rcc-tab.rcc-tab--active{color:var(--accent-dk) !important;border-bottom-color:var(--accent) !important;background-color:var(--accent-lt) !important;}
#rcc-app .rcc-tab:focus-visible{outline:2px solid var(--accent) !important;outline-offset:2px !important;}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN
   Mobile-first: the brand panel never fully disappears on phones — it
   collapses into a compact gradient header (logo + one-line tagline) so
   small screens still feel like "The Bucket Therapy" and not a bare HTML form.
   From 700px up it expands into the full split-screen story panel.
═══════════════════════════════════════════════════════════════════════════ */
.rcc-login-wrap{
  display:flex;flex-direction:column;min-height:100vh;font-family:var(--f);
  /* Full-bleed breakout — escapes Astra's (or any theme's) .entry-content
     max-width and padding, which otherwise pinches this into a narrow
     column and leaves the theme's own padding showing as a gap between
     the brand panel and the form panel below it. */
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  position:relative;overflow-x:hidden;
}
.rcc-login-left{
  position:relative;overflow:hidden;flex:0 0 auto;
  background:var(--cd-plum-dp);
  padding:28px 20px 24px;
}
.rcc-login-left::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 22% 20%,rgba(194,117,44,.22) 0%,transparent 58%),radial-gradient(ellipse at 80% 78%,rgba(58,31,66,.85) 0%,transparent 65%)}
/* Drip signature — a soft pour of caramel light bleeding down from the top edge,
   echoing a milkshake drizzle without literally drawing one */
.rcc-login-left::after{
  content:'';position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none;
  background:
    radial-gradient(110px 30px at 18% 0%, rgba(232,154,74,.5) 0%, transparent 70%),
    radial-gradient(70px 140px at 18% 0%, rgba(232,154,74,.28) 0%, transparent 75%),
    radial-gradient(90px 22px at 78% 0%, rgba(232,154,74,.32) 0%, transparent 70%),
    radial-gradient(50px 90px at 78% 0%, rgba(232,154,74,.18) 0%, transparent 75%);
  filter:blur(1px);
}
.rcc-login-left__inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-start;gap:14px}
.rcc-login-brand{display:flex;align-items:center;gap:9px}
.rcc-login-brand__dot{width:8px;height:8px;border-radius:50%;background:var(--cd-caramel-lt);flex-shrink:0;box-shadow:0 0 0 3px rgba(232,154,74,.2)}
.rcc-login-brand__name{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cd-chalk)}
.rcc-login-tagline{display:flex;flex-direction:column}
.rcc-login-tagline__line--1{font-family:var(--f-display);font-size:clamp(22px,6vw,30px);font-weight:600;font-style:italic;line-height:1.1;color:var(--cd-muted);letter-spacing:-.01em;margin:0}
.rcc-login-tagline__line--2{font-family:var(--f-display);font-size:clamp(22px,6vw,30px);font-weight:700;line-height:1.1;color:var(--cd-chalk);letter-spacing:-.01em;margin:0}
/* Feature list — concrete "what this does" bullets instead of a stats wall */
.rcc-login-feature-stack{display:none}
.rcc-login-feature{display:flex;align-items:center;gap:10px}
.rcc-login-feature__icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(232,154,74,.16);color:var(--cd-caramel-lt);flex-shrink:0}
.rcc-login-feature__text{font-size:13.5px;color:var(--cd-muted);font-weight:500}

.rcc-login-right{flex:1;background:var(--cd-cream);display:flex;align-items:center;justify-content:center;padding:28px 18px 36px}
.rcc-login-form-wrap{width:100%;max-width:400px}
.rcc-login-logo{display:flex;align-items:center;gap:9px;margin-bottom:22px;color:var(--cd-caramel)}
.rcc-login-logo__text{font-family:var(--f-display);font-size:18px;font-weight:700;color:var(--cd-plum);letter-spacing:-.01em}
.rcc-login-title{font-family:var(--f-display);font-size:clamp(24px,5vw,32px);font-weight:700;color:var(--cd-plum);letter-spacing:-.01em;margin-bottom:6px}
.rcc-login-subtitle{font-size:14px;color:var(--text-2);margin-bottom:26px;line-height:1.5}
.rcc-login-error{display:flex;align-items:flex-start;gap:8px;background:var(--danger-lt);border:1px solid #e3b6ac;color:var(--danger);border-radius:var(--r);padding:10px 14px;font-size:13px;font-weight:500;line-height:1.45;margin-bottom:12px}
.rcc-login-error[hidden]{display:none !important}
.rcc-login-form{display:flex;flex-direction:column;gap:16px}
#rcc-login-form{display:flex;flex-direction:column;gap:16px}
.rcc-lf-field{display:flex;flex-direction:column;gap:6px}
.rcc-lf-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.rcc-lf-input-wrap{position:relative}
.rcc-lf-input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-3);display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1}
.rcc-lf-input{display:block;width:100%;padding:14px 14px;border:1.5px solid var(--border);border-radius:var(--r-lg);font-family:var(--f);font-size:16px;color:var(--text);background:var(--surface);-webkit-appearance:none;appearance:none;transition:border-color var(--t),box-shadow var(--t);outline:none;position:relative;z-index:0}
.rcc-lf-input.rcc-lf-input--icon{padding-left:44px;padding-right:42px}
.rcc-lf-input:focus{border-color:var(--cd-caramel);box-shadow:0 0 0 3px rgba(194,117,44,.14)}
.rcc-lf-input:focus ~ .rcc-lf-input-icon{color:var(--cd-caramel)}
.rcc-lf-input::placeholder{color:var(--text-3)}
.rcc-lf-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none !important;border:none !important;color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;pointer-events:auto !important}
.rcc-lf-toggle:hover{color:var(--text);background:var(--surface-2) !important}
.rcc-lf-toggle:active{transform:translateY(-50%) scale(.92)}
/* Login submit button — separate from #rcc-app scope; 50px tall for thumbs */
.rcc-lf-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:50px;padding:13px 8px 13px 20px;background:var(--cd-plum-dp);color:var(--cd-chalk);border:none;border-radius:var(--r-lg);font-family:var(--f);font-size:15.5px;font-weight:700;cursor:pointer;pointer-events:auto;transition:background var(--t),transform var(--t);box-shadow:0 4px 14px rgba(36,17,28,.22);margin-top:4px}
.rcc-lf-btn:hover{background:var(--cd-plum-mid);transform:translateY(-1px)}
.rcc-lf-btn:active{transform:translateY(0) scale(.99)}
.rcc-lf-btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none;transform:none}
.rcc-lf-btn__arrow{background:var(--cd-caramel);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--t)}
.rcc-lf-btn:hover .rcc-lf-btn__arrow{background:var(--cd-caramel-lt)}
.rcc-login-hint{display:flex;align-items:flex-start;margin-top:18px;font-size:12.5px;color:var(--text-3);line-height:1.55}
@keyframes rcc-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.rcc-lf-input--error{border-color:var(--danger) !important;animation:rcc-shake .3s ease}

/* ── ≥460px: brand header gets a touch more breathing room ────────────── */
@media(min-width:460px){
  .rcc-login-left{padding:34px 28px 28px}
  .rcc-login-feature-stack{display:flex;flex-direction:column;gap:10px;margin-top:4px}
}

/* ── ≥700px: full split-screen story panel ───────────────────────────── */
@media(min-width:700px){
  .rcc-login-wrap{flex-direction:row}
  .rcc-login-left{flex:1 1 44%;padding:48px 40px;display:flex;align-items:stretch}
  .rcc-login-left::after{height:55%}
  .rcc-login-left__inner{justify-content:center;gap:0}
  .rcc-login-tagline{padding:28px 0 36px}
  .rcc-login-tagline__line--1,.rcc-login-tagline__line--2{font-size:clamp(30px,3.6vw,48px)}
  .rcc-login-feature-stack{margin-top:0;gap:14px}
  .rcc-login-feature__text{font-size:14px}
  .rcc-login-right{flex:1 1 56%;padding:32px 20px;min-height:100vh}
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD SHELL
═══════════════════════════════════════════════════════════════════════════ */
#rcc-app{
  font-family:var(--f);font-size:15px;line-height:1.5;color:var(--text);background:var(--bg);min-height:100vh;
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  position:relative;overflow-x:hidden;
}

/* ── BOTTOM BAR — replaces top header ────────────────────────────────────── */
#rcc-app .rcc-bottom-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:8500;
  background:var(--cd-plum-dp);
  background-image:linear-gradient(180deg,var(--cd-plum-mid) 0%,var(--cd-plum-dp) 70%);
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 14px;
  padding-bottom:calc(7px + env(safe-area-inset-bottom,0px));
  gap:10px;
  box-shadow:0 -2px 16px rgba(22,10,26,.3);
  /* keep above WP admin bar on mobile which is at bottom on some themes */
}
#rcc-app .rcc-bottom-bar__brand{
  display:flex;align-items:center;gap:6px;
  font-family:var(--f-display);
  color:var(--cd-caramel-lt);font-size:13px;font-weight:700;
  letter-spacing:.01em;flex-shrink:0;
}
#rcc-app .rcc-bottom-bar__brand svg{color:var(--cd-caramel-lt)}
#rcc-app .rcc-bottom-bar__actions{display:flex;gap:5px;align-items:center;flex-wrap:nowrap}
/* Ghost buttons inside dark bottom bar */
#rcc-app .rcc-bottom-bar .rcc-btn--ghost{
  color:rgba(247,238,224,.75) !important;
  border-color:rgba(247,238,224,.2) !important;
  background-color:transparent !important;
  padding:5px 9px !important;font-size:12px !important;
}
#rcc-app .rcc-bottom-bar .rcc-btn--ghost:hover{
  background-color:rgba(247,238,224,.1) !important;
  color:var(--cd-chalk) !important;
  border-color:rgba(247,238,224,.4) !important;
}
/* Dropdown menus open UPWARD from bottom bar */
.rcc-dropdown__menu--up{
  bottom:calc(100% + 4px);top:auto;
}

/* Toast */
#rcc-toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(60px);background:var(--cd-plum-dp);color:var(--cd-chalk);padding:10px 18px;border-radius:var(--r);font-size:13px;font-weight:500;z-index:9999;pointer-events:none;opacity:0;transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .22s ease;max-width:90vw;white-space:nowrap;box-shadow:var(--sh-lg)}
#rcc-toast.rcc-toast--visible{opacity:1;transform:translateX(-50%) translateY(0)}
#rcc-toast.rcc-toast--success{background:var(--success)}
#rcc-toast.rcc-toast--error{background:var(--danger)}
#rcc-toast.rcc-toast--warn{background:var(--warn)}

/* KPI — strict 4-col grid, 12 cards flow as 3 even rows.
   Signature element: cards read as "poured" surfaces (soft top sheen, warm
   shadow tuned to the plum hue) rather than flat generic admin tiles, and
   values are set in Fraunces so the numbers carry the brand's personality. */
#rcc-app .rcc-kpi{
  display:grid;
  grid-template-columns:1fr 1fr;  /* 2-col default (mobile) */
  gap:9px;padding:14px 16px;
}
#rcc-app .rcc-kpi__card{
  position:relative;overflow:hidden;
  background:var(--surface);
  background-image:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 40%);
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:14px 16px;display:flex;flex-direction:column;gap:5px;
  transition:box-shadow var(--t),border-color var(--t),transform var(--t);
  min-width:0; /* prevent overflow in grid */
}
#rcc-app .rcc-kpi__card:hover{border-color:var(--border-hv);box-shadow:var(--sh-lg);transform:translateY(-2px)}
/* Accent — warm caramel gradient for Today cards */
#rcc-app .rcc-kpi__card--accent{
  background:linear-gradient(150deg,var(--cd-caramel) 0%,var(--cd-caramel-lt) 100%) !important;
  background-image:linear-gradient(150deg,var(--cd-caramel) 0%,var(--cd-caramel-lt) 100%),radial-gradient(120px 60px at 100% 0%,rgba(255,255,255,.3),transparent 70%) !important;
  border-color:var(--cd-caramel) !important;
  box-shadow:0 3px 10px rgba(140,82,27,.3);
}
#rcc-app .rcc-kpi__card--accent .rcc-kpi__label{color:rgba(255,250,243,.82) !important}
#rcc-app .rcc-kpi__card--accent .rcc-kpi__value{color:#fff !important;text-shadow:0 1px 3px rgba(80,40,10,.2)}
#rcc-app .rcc-kpi__card--accent:hover{box-shadow:0 8px 22px rgba(140,82,27,.38);transform:translateY(-2px)}
/* Label + value */
#rcc-app .rcc-kpi__label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2)}
#rcc-app .rcc-kpi__value{
  font-family:var(--f-display);font-size:19px;font-weight:600;color:var(--text);line-height:1.2;letter-spacing:-.01em;
  /* Allow wrapping for Best Selling name — clip other values */
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
/* Alert state */
#rcc-app .rcc-kpi__card--alert.rcc-kpi--alert-on{background:var(--warn-lt) !important;border-color:#e0ab5e}
#rcc-app .rcc-kpi__card--alert.rcc-kpi--alert-on .rcc-kpi__label{color:var(--warn)}
#rcc-app .rcc-kpi__card--alert.rcc-kpi--alert-on .rcc-kpi__value{color:var(--warn)}

/* Panels */
#rcc-app .rcc-panel{display:none;padding:12px 16px}
#rcc-app .rcc-panel--active{display:block}
#rcc-app .rcc-panel[hidden]{display:none !important}

/* Toolbar */
#rcc-app .rcc-panel__toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;flex-wrap:wrap}
#rcc-app .rcc-search-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-width:0}
#rcc-app .rcc-search{flex:1 1 160px;min-width:0}

/* Input/select/textarea reset — explicit, not all:unset */
#rcc-app .rcc-input,
#rcc-app .rcc-select,
#rcc-app .rcc-search{
  display:block;width:100%;padding:8px 10px;
  border:1px solid var(--border) !important;border-radius:var(--r) !important;
  font-family:var(--f);font-size:14px;color:var(--text) !important;
  background:var(--surface) !important;
  -webkit-appearance:none;appearance:none;
  box-shadow:none !important;outline:none;
  transition:border-color var(--t),box-shadow var(--t);
}
#rcc-app .rcc-input:focus,#rcc-app .rcc-select:focus,#rcc-app .rcc-search:focus{
  border-color:var(--accent) !important;box-shadow:0 0 0 3px rgba(194,117,44,.13) !important;
}
#rcc-app .rcc-input::placeholder,#rcc-app .rcc-search::placeholder{color:var(--text-3)}
#rcc-app .rcc-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a6552' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right 9px center !important;padding-right:28px !important;cursor:pointer;
}
#rcc-app .rcc-textarea{resize:vertical;min-height:60px}
#rcc-app .rcc-input--date{flex:0 0 auto;width:auto !important;min-width:130px}
#rcc-app .rcc-label{font-size:11px;font-weight:600;color:var(--text-2);letter-spacing:.02em;display:block;margin-bottom:3px}

/* Tables */
#rcc-app .rcc-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
#rcc-app .rcc-table{width:100%;border-collapse:collapse;font-size:13px}
#rcc-app .rcc-table th,#rcc-app .rcc-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border)}
#rcc-app .rcc-table th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--accent-dk);background:var(--surface-2);white-space:nowrap}
#rcc-app .rcc-table tbody tr:last-child td{border-bottom:none}
#rcc-app .rcc-table tbody tr{transition:background-color var(--t)}
#rcc-app .rcc-table tbody tr:hover{background:var(--accent-lt)}
#rcc-app .rcc-table--compact td,#rcc-app .rcc-table--compact th{padding:7px 10px}
#rcc-app .rcc-empty-row td{text-align:center;color:var(--text-2);padding:32px 12px;font-size:13px}
#rcc-app .rcc-col-actions{width:120px;text-align:right !important}
#rcc-app .rcc-actions{display:flex;gap:4px;justify-content:flex-end}
#rcc-app .rcc-editable{cursor:pointer;border-bottom:1px dashed var(--border-hv);transition:border-color var(--t)}
#rcc-app .rcc-editable:hover{border-bottom-color:var(--accent)}
#rcc-app .rcc-inline-input{display:inline-block;border:1px solid var(--accent) !important;border-radius:4px !important;padding:2px 6px !important;font-family:var(--f);font-size:13px;width:84px;box-shadow:0 0 0 3px rgba(194,117,44,.1) !important;background:var(--surface) !important;color:var(--text) !important;outline:none}
#rcc-app .rcc-tag{display:inline-block;padding:3px 9px;background:var(--accent-lt);color:var(--accent-dk);border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
#rcc-app .rcc-tag--empty{background:var(--surface-2);color:var(--text-3)}
#rcc-app .rcc-mono{font-family:var(--mono);font-size:12.5px;color:var(--text-2)}
#rcc-app .rcc-stock{display:inline-flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap}
#rcc-app .rcc-stock__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
#rcc-app .rcc-stock--ok  .rcc-stock__dot{background:#22c55e}
#rcc-app .rcc-stock--low .rcc-stock__dot{background:#f59e0b}
#rcc-app .rcc-stock--out .rcc-stock__dot{background:#ef4444}

/* Recipe cards */
#rcc-app .rcc-recipe-grid{display:grid;gap:11px}
#rcc-app .rcc-recipe-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:15px;transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
#rcc-app .rcc-recipe-card:hover{border-color:var(--border-hv);box-shadow:var(--sh-lg);transform:translateY(-2px)}
#rcc-app .rcc-recipe-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
#rcc-app .rcc-recipe-card__title{font-family:var(--f-display);font-size:15.5px;font-weight:600;color:var(--text)}
#rcc-app .rcc-recipe-card__pricing{text-align:right;flex-shrink:0}
#rcc-app .rcc-recipe-card__cost{font-family:var(--mono);font-size:13px;color:var(--text-2);display:block}
#rcc-app .rcc-recipe-card__sell{font-family:var(--f-display);font-size:17px;font-weight:700;color:var(--text);display:block}
#rcc-app .rcc-recipe-card__margin{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;margin-top:3px}
#rcc-app .margin--good{background:#dceee0;color:#1f6b3d}
#rcc-app .margin--ok{background:#faf0d0;color:#8a5d10}
#rcc-app .margin--bad{background:#f7ddd6;color:#a13e29}
#rcc-app .rcc-recipe-card__meta{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--text-2);margin-bottom:8px;align-items:center}
#rcc-app .rcc-recipe-card__desc{font-size:12px;color:var(--text-2);margin-bottom:10px;line-height:1.5}
#rcc-app .rcc-recipe-card__footer{display:flex;gap:6px;flex-wrap:wrap}
#rcc-app .rcc-state-empty{text-align:center;color:var(--text-2);font-size:13px;padding:32px 16px}

/* Team tab — roster + activity feed */
#rcc-app .rcc-team-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:start}
#rcc-app .rcc-team-roster__list,#rcc-app .rcc-team-feed__list{display:flex;flex-direction:column;gap:8px}
#rcc-app .rcc-team-card{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:11px 13px}
#rcc-app .rcc-team-card__avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-lt);color:var(--accent-dk);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:700;font-size:14px;flex-shrink:0}
#rcc-app .rcc-team-card__body{flex:1;min-width:0}
#rcc-app .rcc-team-card__name{font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
#rcc-app .rcc-team-card__meta{font-size:11.5px;color:var(--text-2);margin-top:2px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#rcc-app .rcc-team-card__online{width:7px;height:7px;border-radius:50%;background:#22c55e;flex-shrink:0}
#rcc-app .rcc-level-pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:700;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em}
#rcc-app .rcc-level-pill--admin{background:var(--cd-plum);color:#fff}
#rcc-app .rcc-level-pill--full{background:#dceee0;color:#1f6b3d}
#rcc-app .rcc-level-pill--view{background:var(--surface-2);color:var(--text-2)}
#rcc-app .rcc-level-pill--receipts{background:var(--accent-lt);color:var(--accent-dk)}
#rcc-app .rcc-team-card__count{font-family:var(--mono);font-size:12px;color:var(--text-2);flex-shrink:0;text-align:right;white-space:nowrap}
#rcc-app .rcc-team-card__count b{color:var(--text);font-size:14px;display:block;font-weight:700}
#rcc-app .rcc-activity-row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
#rcc-app .rcc-activity-row:last-child{border-bottom:none}
#rcc-app .rcc-activity-row__icon{width:26px;height:26px;border-radius:50%;background:var(--surface-2);color:var(--text-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
#rcc-app .rcc-activity-row__icon--create{background:#dceee0;color:#1f6b3d}
#rcc-app .rcc-activity-row__icon--delete{background:#f7ddd6;color:#a13e29}
#rcc-app .rcc-activity-row__icon--update,#rcc-app .rcc-activity-row__icon--restock{background:#faf0d0;color:#8a5d10}
#rcc-app .rcc-activity-row__icon--login,#rcc-app .rcc-activity-row__icon--logout{background:var(--accent-lt);color:var(--accent-dk)}
#rcc-app .rcc-activity-row__body{flex:1;min-width:0;font-size:12.5px;color:var(--text);line-height:1.5}
#rcc-app .rcc-activity-row__body b{font-weight:600}
#rcc-app .rcc-activity-row__time{font-size:11px;color:var(--text-3);flex-shrink:0;white-space:nowrap}
#rcc-app .rcc-team-level-options{display:flex;flex-direction:column;gap:8px;margin-top:4px}
#rcc-app .rcc-team-level-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-lg);cursor:pointer;transition:border-color var(--t),background var(--t)}
#rcc-app .rcc-team-level-option:hover{background:var(--surface-2)}
#rcc-app .rcc-team-level-option input{flex-shrink:0;margin:0}
#rcc-app .rcc-team-level-option:has(input:checked){border-color:var(--cd-caramel);background:var(--accent-lt)}
#rcc-app .rcc-team-level-option div{display:flex;flex-direction:column;gap:1px}
#rcc-app .rcc-team-level-option b{font-size:13.5px;font-weight:600;color:var(--text)}
#rcc-app .rcc-team-level-option span{font-size:12px;color:var(--text-2)}
#rcc-app .rcc-team-card__level-select{font-size:11.5px;padding:3px 6px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);flex-shrink:0;max-width:120px}

@media(max-width:760px){
  #rcc-app .rcc-team-grid{grid-template-columns:1fr}
}

/* Restricted-tier styling — visually mute the controls a tier can't use;
   the actual block happens in JS (capturing listener) and is enforced
   again server-side, this is just the visual cue. .rcc-view-only dims
   everything including receipts; .rcc-receipts-only dims everything
   EXCEPT the receipt entry points, which stay fully active. */
#rcc-app.rcc-view-only #btn-add-recipe,
#rcc-app.rcc-receipts-only #btn-add-recipe,
#rcc-app.rcc-view-only #btn-add-ingredient,
#rcc-app.rcc-receipts-only #btn-add-ingredient,
#rcc-app.rcc-view-only #btn-add-expense,
#rcc-app.rcc-receipts-only #btn-add-expense,
#rcc-app.rcc-view-only #btn-recalculate,
#rcc-app.rcc-receipts-only #btn-recalculate,
#rcc-app.rcc-view-only [data-action="del-rcpt"],
#rcc-app.rcc-receipts-only [data-action="del-rcpt"],
#rcc-app.rcc-view-only [data-action="del-cust"],
#rcc-app.rcc-receipts-only [data-action="del-cust"],
#rcc-app.rcc-view-only [data-action="del-rec"],
#rcc-app.rcc-receipts-only [data-action="del-rec"],
#rcc-app.rcc-view-only [data-action="del-ing"],
#rcc-app.rcc-receipts-only [data-action="del-ing"],
#rcc-app.rcc-view-only [data-action="restock-ing"],
#rcc-app.rcc-receipts-only [data-action="restock-ing"],
#rcc-app.rcc-view-only [data-action="del-expense"],
#rcc-app.rcc-receipts-only [data-action="del-expense"],
#rcc-app.rcc-view-only [data-action="del-item"],
#rcc-app.rcc-receipts-only [data-action="del-item"],
#rcc-app.rcc-view-only #tpl-submit-btn,
#rcc-app.rcc-receipts-only #tpl-submit-btn,
#rcc-app.rcc-view-only #cust-submit-btn,
#rcc-app.rcc-receipts-only #cust-submit-btn,
#rcc-app.rcc-view-only #expense-submit-btn,
#rcc-app.rcc-receipts-only #expense-submit-btn,
#rcc-app.rcc-view-only #ing-submit-btn,
#rcc-app.rcc-receipts-only #ing-submit-btn,
#rcc-app.rcc-view-only #rec-submit-btn,
#rcc-app.rcc-receipts-only #rec-submit-btn,
#rcc-app.rcc-view-only #restock-submit-btn,
#rcc-app.rcc-receipts-only #restock-submit-btn{
  opacity:.45;cursor:not-allowed
}
/* Receipt entry points: dimmed only under full view-only; left active
   (no rule needed) under .rcc-receipts-only */
#rcc-app.rcc-view-only #rcpt-submit-btn{
  opacity:.45;cursor:not-allowed
}

/* CPU preview */
#rcc-app .rcc-cpu-preview{background:var(--success-lt);border:1px solid #a8d9b6;border-radius:var(--r);padding:9px 12px;display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
#rcc-app .rcc-cpu-preview__label{font-size:12px;font-weight:600;color:var(--success)}
#rcc-app .rcc-cpu-preview__value{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--success)}
#rcc-app .rcc-unit-echo{display:block;padding:8px 0;font-size:14px;font-family:var(--mono);color:var(--text-2)}

/* Dropdown */
.rcc-dropdown{position:relative;display:inline-block}
.rcc-dropdown__menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-lg);min-width:160px;z-index:8000;list-style:none;padding:4px 0}
.rcc-dropdown__menu[hidden]{display:none !important}
/* Dropdown items are also buttons — need explicit safe overrides */
.rcc-dropdown__item{
  display:block !important;width:100% !important;
  padding:8px 14px !important;font-size:13px !important;
  color:var(--text) !important;background:transparent !important;
  border:none !important;border-radius:0 !important;
  text-align:left;cursor:pointer !important;pointer-events:auto !important;
  transition:background var(--t);
}
.rcc-dropdown__item:hover{background:var(--surface-2) !important;color:var(--text) !important}
.rcc-dropdown__item--danger{color:var(--danger) !important}
.rcc-dropdown__item--danger:hover{background:var(--danger-lt) !important}

/* Receipts toolbar actions */
#rcc-app .rcc-receipts-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
#rcc-app .rcc-date-sep{align-self:center;color:var(--text-3);font-size:12px;padding:0 2px;white-space:nowrap}
#rcc-app .rcc-rcpt-search{flex:1 1 160px;min-width:120px}

/* P&L */
#rcc-app .rcc-pnl__toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px;margin-bottom:12px}
#rcc-app .rcc-date-range{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#rcc-app .rcc-date-range .rcc-label{font-size:11px;font-weight:600;color:var(--text-2);white-space:nowrap}
#rcc-app .rcc-pnl__add-btns{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#rcc-app .rcc-pnl-summary{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
#rcc-app .rcc-pnl-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:13px 15px;display:flex;flex-direction:column;gap:4px;transition:box-shadow var(--t),border-color var(--t)}
#rcc-app .rcc-pnl-card:hover{border-color:var(--border-hv);box-shadow:var(--sh)}
#rcc-app .rcc-pnl-card__label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2)}
#rcc-app .rcc-pnl-card__val{font-family:var(--f-display);font-size:19px;font-weight:600;color:var(--text);letter-spacing:-.01em}
#rcc-app .rcc-pnl-card--revenue .rcc-pnl-card__val{color:var(--success)}
#rcc-app .rcc-pnl-card--cogs    .rcc-pnl-card__val{color:var(--warn)}
#rcc-app .rcc-pnl-card--expense .rcc-pnl-card__val{color:var(--danger)}
#rcc-app .rcc-pnl-card--net.profit .rcc-pnl-card__val{color:var(--success)}
#rcc-app .rcc-pnl-card--net.loss   .rcc-pnl-card__val{color:var(--danger)}
#rcc-app .rcc-pnl-alert{border-radius:var(--r);padding:11px 14px;font-size:13px;font-weight:600;margin-bottom:14px}
#rcc-app .rcc-pnl-alert--danger{background:var(--danger-lt);border:1px solid #e3b6ac;color:var(--danger)}
#rcc-app .rcc-pnl-alert--warn{background:var(--warn-lt);border:1px solid #ecc285;color:var(--warn)}
#rcc-app .rcc-pnl-alert--good{background:var(--success-lt);border:1px solid #a8d9b6;color:var(--success)}
#rcc-app .rcc-pnl-cols{display:grid;gap:14px}
#rcc-app .rcc-pnl-col__title{font-family:var(--f-display);font-size:15px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:7px;color:var(--text)}
#rcc-app .rcc-badge{background:var(--accent-lt);color:var(--accent-dk);border-radius:20px;padding:1px 8px;font-size:11px;font-weight:700}
#rcc-app .rcc-expense-breakdown{margin-top:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px}
#rcc-app .rcc-breakdown-title{font-size:12px;font-weight:700;color:var(--text-2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}
#rcc-app .rcc-breakdown-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text)}
#rcc-app .rcc-breakdown-row:last-child{border-bottom:none}
#rcc-app .rcc-breakdown-row__amt{font-family:var(--mono);font-weight:600}

/* ── MODALS ───────────────────────────────────────────────────────────────── */
.rcc-modal{
  position:fixed;
  /* Account for WP admin bar (32px desktop, 46px mobile) */
  top:var(--wp-admin-bar-height,0px);
  left:0;right:0;bottom:0;
  z-index:9000;display:flex;align-items:flex-end;justify-content:center;
}
.rcc-modal[hidden]{display:none !important}
.rcc-modal__overlay{position:absolute;inset:0;background:rgba(22,10,26,.52);backdrop-filter:blur(2px);cursor:pointer}
.rcc-modal__overlay--dark{background:rgba(0,0,0,.65);backdrop-filter:none}
.rcc-modal__box{
  position:relative;z-index:1;background:var(--surface);width:100%;
  /* Max height relative to remaining space below admin bar */
  max-height:calc(100vh - var(--wp-admin-bar-height,0px) - 8px);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  overflow:hidden;display:flex;flex-direction:column;
  animation:rcc-up .22s cubic-bezier(.16,1,.3,1);
  box-shadow:var(--sh-lg);
}
@keyframes rcc-up{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
/* Wide modals centre vertically — add top margin so they don't go under admin bar */
.rcc-modal--wide .rcc-modal__box{max-width:760px;margin:auto 0 56px;border-radius:var(--r-lg)}
/* When logged into WP, --wp-admin-bar-height is set by WP itself via inline style on <body> */
/* Fallback: set it explicitly for common cases */
/* Admin bar is hidden on CostDrip page — modals use full viewport */
/* If admin bar is somehow still showing, keep these as safe fallbacks */
body.admin-bar .rcc-modal{top:0}
body.admin-bar .rcc-modal .rcc-modal__box{max-height:calc(100vh - 56px)}
.rcc-modal--confirm{z-index:9500}
.rcc-modal--confirm .rcc-modal__box{max-width:380px;margin:auto;border-radius:var(--r-lg)}
.rcc-modal__header{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--border);flex-shrink:0}
.rcc-modal__title{font-family:var(--f-display);font-size:16.5px;font-weight:600;color:var(--text)}
.rcc-modal__close{
  font-size:20px !important;line-height:1;color:var(--text-2) !important;cursor:pointer !important;
  padding:0 4px !important;background:transparent !important;border:none !important;
  border-radius:0 !important;pointer-events:auto !important;
  transition:color var(--t);
}
.rcc-modal__close:hover{color:var(--text) !important}
.rcc-modal__body{padding:18px;overflow-y:auto;flex:1;font-family:var(--f);font-size:14px;color:var(--text)}
.rcc-modal__footer{display:flex;gap:7px;justify-content:flex-end;padding-top:14px;border-top:1px solid var(--border);margin-top:16px}
.rcc-confirm-msg{font-size:14px;color:var(--text);line-height:1.6;padding:4px 0 8px}

/* Modal form fields */
.rcc-modal .rcc-field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.rcc-modal .rcc-field:last-of-type{margin-bottom:0}
.rcc-modal .rcc-field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.rcc-modal .rcc-field-row .rcc-field{margin-bottom:0}
.rcc-modal .rcc-field--unit{max-width:80px}
.rcc-modal .rcc-field--sm{max-width:120px}
.rcc-modal .rcc-label{font-size:11px;font-weight:600;color:var(--text-2);letter-spacing:.02em;display:block;margin-bottom:3px}
.rcc-modal .rcc-input,.rcc-modal .rcc-select,.rcc-modal .rcc-textarea{
  display:block;width:100%;padding:8px 10px;
  border:1px solid var(--border);border-radius:var(--r);
  font-family:var(--f);font-size:14px;color:var(--text);background:var(--surface);
  -webkit-appearance:none;appearance:none;outline:none;box-shadow:none;
  transition:border-color var(--t),box-shadow var(--t);
}
.rcc-modal .rcc-input:focus,.rcc-modal .rcc-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(194,117,44,.12)}
.rcc-modal .rcc-input::placeholder{color:var(--text-3)}
.rcc-modal .rcc-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a6552' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:28px}
.rcc-modal .rcc-textarea{resize:vertical;min-height:60px}
.rcc-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid var(--border);display:block}
.rcc-optional-badge{font-size:10px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-3);background:var(--surface-2);padding:2px 6px;border-radius:10px;margin-left:6px}
.rcc-modal .rcc-cpu-preview{background:var(--success-lt);border:1px solid #a8d9b6;border-radius:var(--r);padding:9px 12px;display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.rcc-modal .rcc-cpu-preview__label{font-size:12px;font-weight:600;color:var(--success)}
.rcc-modal .rcc-cpu-preview__value{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--success)}
.rcc-unit-echo{display:block;padding:8px 0;font-size:14px;font-family:var(--mono);color:var(--text-2)}

/* ── RECEIPT MODAL — compact layout so nothing requires scrolling ────────── */
.rcc-modal--receipt .rcc-modal__box{max-width:680px}
.rcc-modal--receipt .rcc-modal__header{padding:10px 14px}
.rcc-modal--receipt .rcc-modal__title{font-size:14px}
.rcc-modal--receipt .rcc-modal__body{padding:10px 14px}
.rcc-modal--receipt .rcc-modal__footer{margin-top:8px;padding-top:8px}

/* Tighter fields — every pixel counts */
.rcc-modal--receipt .rcc-field{margin-bottom:6px}
.rcc-modal--receipt .rcc-field-row{gap:6px;margin-bottom:6px}
.rcc-modal--receipt .rcc-label{font-size:10px;margin-bottom:1px;letter-spacing:0}
.rcc-modal--receipt .rcc-input,
.rcc-modal--receipt .rcc-select{padding:5px 8px;font-size:13px}

/* Section labels: minimal */
.rcc-modal--receipt .rcc-section-label{
  font-size:10px;margin-bottom:4px;padding-bottom:3px;margin-top:6px;
}
.rcc-modal--receipt .rcc-section-label:first-child{margin-top:0}

/* 4-column master row: Name, Phone, Date, Channel — all in one line */
.rcc-modal--receipt .rcc-field-row--4{
  grid-template-columns:1.4fr 1fr 1fr 1fr;gap:6px;margin-bottom:6px;
  display:grid;
}
/* 3-column row */
.rcc-modal--receipt .rcc-field-row--3{grid-template-columns:1fr 1fr 1fr}

/* Recipe add row */
.rcc-rcpt-add-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.rcc-rcpt-add-row .rcc-select{flex:1}

/* Item rows compact */
.rcc-modal--receipt .rcc-rcpt-items{gap:3px}
.rcc-modal--receipt .rcc-rcpt-item-row{
  padding:4px 7px;
  grid-template-columns:1fr 48px 68px 58px 20px;gap:4px;
}
.rcc-modal--receipt .rcc-rcpt-item-name{font-size:12px}
.rcc-modal--receipt .rcc-rcpt-item-line{font-size:12px}
.rcc-modal--receipt #rcpt-recipe-select{padding:5px 8px;font-size:13px}

/* Totals strip */
.rcc-modal--receipt .rcc-rcpt-totals{padding:6px 10px;margin-top:6px}
.rcc-modal--receipt .rcc-rcpt-total-row{font-size:12px;padding:1px 0}
.rcc-modal--receipt .rcc-rcpt-total-row--total{font-size:14px;padding-top:4px;margin-top:2px}

/* Mobile receipt modal — 2-col grids, tiny inputs */
@media(max-width:599px){
  /* 4-col → 2-col: Name+Phone on row1, Date+Channel on row2 */
  .rcc-modal--receipt .rcc-field-row--4{grid-template-columns:1fr 1fr !important}
  /* 3-col → 1+2: ExtID full, Discount+Notes side by side */
  .rcc-modal--receipt .rcc-field-row--3{grid-template-columns:1fr 1fr !important}
  .rcc-modal--receipt .rcc-modal__body{padding:8px 10px}
  .rcc-modal--receipt .rcc-modal__header{padding:8px 10px}
  /* Inputs sized for touch — see the shared touch-target rule below, which
     applies a slightly larger receipt-modal-specific override */
  .rcc-modal--receipt .rcc-label{font-size:10px}
  .rcc-modal--receipt .rcc-field{margin-bottom:5px}
  .rcc-modal--receipt .rcc-field-row--4,
  .rcc-modal--receipt .rcc-field-row--3{gap:5px;margin-bottom:5px}
  .rcc-modal--receipt .rcc-rcpt-item-row{grid-template-columns:1fr 44px 62px 20px;gap:3px}
  .rcc-modal--receipt .rcc-rcpt-item-row .rcc-rcpt-item-line{display:none}
  .rcc-modal--receipt .rcc-section-label{margin-top:5px;margin-bottom:3px}
}

/* Builder */
.rcc-modal .rcc-builder__summary{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;margin-bottom:16px;font-size:13px;color:var(--text-2)}
.rcc-modal .rcc-builder__summary strong{font-family:var(--f-display);font-size:17px;font-weight:700;color:var(--text)}
.rcc-modal .rcc-builder__add-row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:14px}
.rcc-modal .rcc-builder__table-wrap{max-height:260px;overflow-y:auto}
.rcc-unit-display,.rcc-linecost-display{display:block;padding:8px 0;font-size:13px;font-family:var(--mono);color:var(--text-2);white-space:nowrap}
.rcc-linecost-display{font-weight:700;color:var(--text)}

/* Autocomplete */
.rcc-autocomplete{position:relative}
.rcc-autocomplete__list{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r) var(--r);box-shadow:var(--sh-lg);list-style:none;max-height:180px;overflow-y:auto;z-index:200}
.rcc-autocomplete__list[hidden]{display:none}
.rcc-autocomplete__list li{padding:8px 11px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--border);transition:background var(--t)}
.rcc-autocomplete__list li:last-child{border-bottom:none}
.rcc-autocomplete__list li:hover{background:var(--accent-lt);color:var(--accent-dk)}
.rcc-autocomplete__list li small{display:block;font-size:11px;color:var(--text-3);font-family:var(--mono);margin-top:1px}

/* Receipt items in modal */
.rcc-rcpt-items{display:flex;flex-direction:column;gap:5px;min-height:32px}
.rcc-rcpt-item-row{display:grid;grid-template-columns:1fr 60px 80px 70px 24px;gap:6px;align-items:center;background:var(--surface-2);border-radius:var(--r);padding:6px 8px}
.rcc-rcpt-item-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.rcc-rcpt-item-line{font-family:var(--mono);font-size:12px;font-weight:700;text-align:right;white-space:nowrap;color:var(--text)}
.rcc-rcpt-item-del{font-size:18px !important;line-height:1;color:var(--text-3) !important;cursor:pointer !important;padding:0 2px !important;background:transparent !important;border:none !important;border-radius:0 !important;pointer-events:auto !important;transition:color var(--t)}
.rcc-rcpt-item-del:hover{color:var(--danger) !important}
.rcc-rcpt-item-qty,.rcc-rcpt-item-price{display:block;width:100%;padding:4px 6px;border:1px solid var(--border);border-radius:var(--r);font-family:var(--f);font-size:13px;color:var(--text);background:var(--surface);outline:none}
.rcc-rcpt-totals{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:var(--accent-lt);border-radius:var(--r);margin-top:10px}
.rcc-rcpt-total-row{display:flex;justify-content:space-between;font-size:13px;color:var(--text-2)}
.rcc-rcpt-total-row--total{font-family:var(--f-display);font-size:16px;font-weight:700;color:var(--accent-dk);padding-top:6px;border-top:1px solid var(--border-hv);margin-top:3px}

/* Template toggle grid */
.rcc-toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.rcc-toggle{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px;color:var(--text)}
.rcc-toggle:nth-child(odd){border-right:1px solid var(--border)}
.rcc-toggle input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);flex-shrink:0;cursor:pointer}
.rcc-toggle__label{font-size:12px;color:var(--text)}

/* 58mm receipt preview */
/* ── 58mm receipt on-screen preview ──────────────────────────── */
.rcc-receipt-58mm{
  width:220px;min-height:80px;
  background:#fff;border:1px dashed var(--border-hv);border-radius:6px;
  padding:10px 12px;   /* mirrors 4mm side padding in print popup */
  font-family:"Courier New",Courier,monospace;
  font-size:10.5px;line-height:1.5;color:#000;
  word-break:break-word;overflow-wrap:break-word;margin:0 auto;
  box-shadow:var(--sh);
}
.rcp-header{font-size:1.18em;font-weight:700;text-align:center;display:block;margin-bottom:4px;letter-spacing:.2px}
.rcp-div{color:#aaa;font-size:0.82em;text-align:center;margin:4px 0;display:block;white-space:nowrap;overflow:hidden}
.rcp-meta{font-size:0.86em;line-height:1.6;margin-bottom:3px;display:block}
.rcp-items{display:block;width:100%}
/* table-cell layout — name expands, price pinned right, never wraps */
.rcp-item{display:table;width:100%;font-size:0.91em;line-height:1.5;margin-bottom:2px}
.rcp-item-name{display:table-cell;width:100%;word-break:break-word;padding-right:4px}
.rcp-item-price{display:table-cell;font-weight:700;text-align:right;white-space:nowrap;vertical-align:top;width:5.4em;min-width:5.4em}
.rcp-total{display:flex;justify-content:space-between;font-size:1.09em;font-weight:700;padding-top:4px;margin-top:4px;border-top:1.5px solid #000}
.rcp-footer{font-size:0.82em;text-align:center;color:#666;margin-top:5px;display:block}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media(min-width:600px){
  #rcc-app .rcc-kpi{grid-template-columns:repeat(4,1fr);padding:16px 20px;gap:10px}
  #rcc-app .rcc-panel{padding:16px 20px}
  #rcc-app .rcc-tabs{padding-left:20px}
  .rcc-modal{align-items:center}
  .rcc-modal__box{border-radius:var(--r-lg);max-width:520px}
  #rcc-app .rcc-recipe-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  #rcc-app .rcc-pnl-summary{grid-template-columns:repeat(3,1fr)}
  #rcc-app .rcc-pnl-cols{grid-template-columns:1fr 1fr}
  .rcc-modal .rcc-field-row{grid-template-columns:1fr 1fr auto}
}
@media(min-width:900px){
  #rcc-app .rcc-kpi{padding:20px 32px}
  #rcc-app .rcc-panel{padding:20px 32px}
  #rcc-app .rcc-tabs{padding-left:32px}
  #rcc-app .rcc-header{padding:12px 32px}
  #rcc-app .rcc-pnl-summary{grid-template-columns:repeat(7,1fr)}
  #rcc-app .rcc-pnl-cols{grid-template-columns:1fr 1fr}  /* side-by-side only on wide desktop */
}
@media(prefers-reduced-motion:reduce){.rcc-modal__box{animation:none}}

/* ── PRINT — fallback for popup-blocked browsers ─────────────────────────── */
/* Primary print path uses a popup window (see printReceipt in rcc-app.js).   */
/* This @media print only fires when the popup is blocked and we fall back     */
/* to printing from the main window via #rcc-print-frame.                      */
@media print{
  @page{size:58mm auto;margin:1mm 0mm 2mm 0mm}
  html body > *{display:none !important;visibility:hidden !important}
  html body #rcc-print-frame{display:block !important;visibility:visible !important}
  #rcc-print-frame{
    width:54mm;max-width:54mm;
    font-family:"Courier New",Courier,monospace;
    font-size:9pt;line-height:1.4;color:#000;background:#fff;
    word-break:break-word;
  }
  #rcc-print-frame .rcp-header{font-size:11pt;font-weight:700;text-align:center;display:block;margin-bottom:1.5mm}
  #rcc-print-frame .rcp-div{display:block;text-align:center;font-size:8pt;color:#444;margin:1mm 0}
  #rcc-print-frame .rcp-meta{display:block;font-size:8pt;line-height:1.5;margin-bottom:1mm}
  #rcc-print-frame .rcp-items{display:block}
  #rcc-print-frame .rcp-item{display:flex;justify-content:space-between;gap:2mm;font-size:8.5pt;line-height:1.5}
  #rcc-print-frame .rcp-item-name{flex:1;word-break:break-word;white-space:normal}
  #rcc-print-frame .rcp-item-price{flex-shrink:0;font-weight:600;text-align:right;white-space:nowrap}
  #rcc-print-frame .rcp-total{display:flex;justify-content:space-between;font-size:10pt;font-weight:700;margin-top:1.5mm;padding-top:1mm;border-top:1px solid #000}
  #rcc-print-frame .rcp-footer{display:block;text-align:center;font-size:7.5pt;color:#555;margin-top:2mm}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE FIRST — overrides for small screens (< 600px)
   All tables scroll horizontally. Modals full-screen. Toolbars stack.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Header on mobile ─────────────────────────────────────────────────────── */
@media(max-width:599px){
  /* Bottom bar on mobile — keep comfortable tap height, just tighten side padding */
  #rcc-app .rcc-bottom-bar{padding-left:10px;padding-right:10px}
  #rcc-app .rcc-bottom-bar__brand span{display:none} /* hide text, keep icon on very small */
  #rcc-app .rcc-bottom-bar .rcc-btn--ghost{padding:9px 11px !important;font-size:12px !important;min-height:38px}

  /* ── KPI: 2 columns on mobile, 4 on desktop (already set above) ─────────── */
  #rcc-app .rcc-kpi{grid-template-columns:1fr 1fr;gap:6px;padding:10px 12px}
  #rcc-app .rcc-kpi__value{font-size:14px}
  #rcc-app .rcc-kpi__label{font-size:9px}

  /* ── Tabs: scrollable row, no wrapping — sized for thumbs ────────────────── */
  #rcc-app .rcc-tabs{padding:0 12px;gap:0;-webkit-overflow-scrolling:touch}
  #rcc-app .rcc-tab{padding:13px 14px !important;font-size:13.5px !important;min-height:44px}


  /* ── Panels ──────────────────────────────────────────────────────────────── */
  #rcc-app .rcc-panel{padding:10px 12px}

  /* ── Toolbar: stack vertically, buttons full-width ───────────────────────── */
  #rcc-app .rcc-panel__toolbar{flex-direction:column;align-items:stretch}
  #rcc-app .rcc-search-wrap{flex-direction:column}
  #rcc-app .rcc-search-wrap .rcc-search,
  #rcc-app .rcc-search-wrap .rcc-select,
  #rcc-app .rcc-search-wrap .rcc-input--date{width:100% !important;flex:none;padding:11px 12px;font-size:15px}
  #rcc-app .rcc-panel__toolbar > .rcc-btn{width:100%;justify-content:center;padding:11px 16px !important;font-size:14.5px !important}
  #rcc-app .rcc-panel__toolbar > div:last-child{display:flex;gap:6px;flex-wrap:wrap}
  #rcc-app .rcc-panel__toolbar > div:last-child .rcc-btn{flex:1;justify-content:center;min-height:42px}

  /* ── Receipts toolbar: New Receipt button on top, search row compact ──────── */
  #rcc-app .rcc-receipts-toolbar{flex-direction:column;gap:8px}

  /* New Receipt button: full-width, prominent, at the TOP */
  #rcc-app .rcc-receipts-actions{order:-1;width:100%}
  #rcc-app .rcc-receipts-actions .rcc-btn--primary{flex:1;justify-content:center;padding:12px 14px !important;font-size:14.5px !important;min-height:46px}
  #rcc-app .rcc-receipts-actions .rcc-btn--ghost{padding:10px 12px !important;min-height:42px}

  /* Search row: all filters on one compact line, don't stack */
  #rcc-app .rcc-receipts-toolbar .rcc-search-wrap{
    flex-direction:row;flex-wrap:wrap;gap:5px;
  }
  #rcc-app .rcc-rcpt-search{flex:1 1 100%;min-width:0;order:-1} /* search full-width first */
  #rcc-app .rcc-receipts-toolbar .rcc-input--date{flex:1 1 110px;min-width:100px;width:auto !important}
  #rcc-app .rcc-date-sep{display:none} /* hide "to" text — dates are self-explanatory */
  #rcc-app .rcc-rcpt-channel{flex:1 1 90px;min-width:90px;width:auto !important}
  #rcc-app #btn-rcpt-filter{flex-shrink:0;padding:7px 10px !important}

  /* ── Tables → stacked cards on mobile (no sideways scrolling) ────────────── */
  /* Generic tables (e.g. inside modals/builder) still get horizontal scroll —
     only the four main data tables (Receipts, Customers, Ingredients, P&L)
     convert to cards, since those are read most often on a phone. */
  #rcc-app .rcc-table-wrap{border-radius:var(--r-lg);border-color:var(--border)}
  #rcc-app .rcc-table-wrap:has(#receipts-tbody),
  #rcc-app .rcc-table-wrap:has(#cust-tbody),
  #rcc-app .rcc-table-wrap:has(#ing-tbody),
  #rcc-app .rcc-pnl-cols .rcc-table-wrap{
    overflow-x:visible;border:none;background:transparent;
  }
  #rcc-app .rcc-table-wrap:has(#receipts-tbody) .rcc-table,
  #rcc-app .rcc-table-wrap:has(#cust-tbody) .rcc-table,
  #rcc-app .rcc-table-wrap:has(#ing-tbody) .rcc-table,
  #rcc-app .rcc-pnl-cols .rcc-table{
    min-width:0;font-size:13px;
  }
  /* Hide table head — labels move inline via data-label */
  #rcc-app .rcc-table-wrap:has(#receipts-tbody) thead,
  #rcc-app .rcc-table-wrap:has(#cust-tbody) thead,
  #rcc-app .rcc-table-wrap:has(#ing-tbody) thead,
  #rcc-app .rcc-pnl-cols thead{display:none}
  /* Each row becomes a card */
  #rcc-app .rcc-table-wrap:has(#receipts-tbody) tbody tr,
  #rcc-app .rcc-table-wrap:has(#cust-tbody) tbody tr,
  #rcc-app .rcc-table-wrap:has(#ing-tbody) tbody tr,
  #rcc-app .rcc-pnl-cols tbody tr{
    display:block;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r-lg);margin-bottom:9px;padding:4px 13px;
  }
  #rcc-app .rcc-table-wrap:has(#receipts-tbody) tbody tr.rcc-empty-row,
  #rcc-app .rcc-table-wrap:has(#cust-tbody) tbody tr.rcc-empty-row,
  #rcc-app .rcc-table-wrap:has(#ing-tbody) tbody tr.rcc-empty-row,
  #rcc-app .rcc-pnl-cols tbody tr.rcc-empty-row{
    background:transparent;border:1px dashed var(--border);
  }
  /* Each cell becomes a labeled row inside the card */
  #rcc-app .rcc-table-wrap:has(#receipts-tbody) tbody td,
  #rcc-app .rcc-table-wrap:has(#cust-tbody) tbody td,
  #rcc-app .rcc-table-wrap:has(#ing-tbody) tbody td,
  #rcc-app .rcc-pnl-cols tbody td{
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    text-align:right;white-space:normal;
    padding:9px 0;position:relative;
  }
  /* Divider as a short, centered, faint rule instead of a full-width
     border — a hairline spanning the whole card edge-to-edge read as a
     leftover table border slicing through the box; a shorter, lighter
     rule reads as a gentle row separator that belongs inside a card. */
  #rcc-app .rcc-table-wrap:has(#receipts-tbody) tbody td:not(:last-child)::after,
  #rcc-app .rcc-table-wrap:has(#cust-tbody) tbody td:not(:last-child)::after,
  #rcc-app .rcc-table-wrap:has(#ing-tbody) tbody td:not(:last-child)::after,
  #rcc-app .rcc-pnl-cols tbody td:not(:last-child)::after{
    content:'';position:absolute;left:8%;right:8%;bottom:0;
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  #rcc-app .rcc-table-wrap:has(#receipts-tbody) tbody td:last-child,
  #rcc-app .rcc-table-wrap:has(#cust-tbody) tbody td:last-child,
  #rcc-app .rcc-table-wrap:has(#ing-tbody) tbody td:last-child,
  #rcc-app .rcc-pnl-cols tbody td:last-child{border-bottom:none}
  /* Label, printed via data-label, pinned left */
  #rcc-app .rcc-table-wrap:has(#receipts-tbody) tbody td[data-label]:not([data-label=""])::before,
  #rcc-app .rcc-table-wrap:has(#cust-tbody) tbody td[data-label]:not([data-label=""])::before,
  #rcc-app .rcc-table-wrap:has(#ing-tbody) tbody td[data-label]:not([data-label=""])::before,
  #rcc-app .rcc-pnl-cols tbody td[data-label]:not([data-label=""])::before{
    content:attr(data-label);
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    color:var(--text-3);text-align:left;flex-shrink:0;padding-top:1px;
  }
  /* Cells with no label (the actions cell) span full width, content right-aligned */
  #rcc-app .rcc-table-wrap:has(#receipts-tbody) tbody td[data-label=""],
  #rcc-app .rcc-table-wrap:has(#cust-tbody) tbody td[data-label=""],
  #rcc-app .rcc-table-wrap:has(#ing-tbody) tbody td[data-label=""],
  #rcc-app .rcc-pnl-cols tbody td[data-label=""]{
    justify-content:flex-end;padding-top:10px;
  }
  #rcc-app .rcc-table-wrap:has(#receipts-tbody) .rcc-actions,
  #rcc-app .rcc-table-wrap:has(#cust-tbody) .rcc-actions,
  #rcc-app .rcc-table-wrap:has(#ing-tbody) .rcc-actions,
  #rcc-app .rcc-pnl-cols .rcc-actions{width:100%;justify-content:flex-end;flex-wrap:wrap}
  /* Colspan empty-state rows: undo the flex/label treatment */
  #rcc-app .rcc-table-wrap:has(#receipts-tbody) tbody tr.rcc-empty-row td,
  #rcc-app .rcc-table-wrap:has(#cust-tbody) tbody tr.rcc-empty-row td,
  #rcc-app .rcc-table-wrap:has(#ing-tbody) tbody tr.rcc-empty-row td,
  #rcc-app .rcc-pnl-cols tbody tr.rcc-empty-row td{
    display:block;text-align:center;padding:20px 8px;border-bottom:none;
  }
  #rcc-app .rcc-table-wrap:has(#receipts-tbody) tbody tr.rcc-empty-row td::before,
  #rcc-app .rcc-table-wrap:has(#cust-tbody) tbody tr.rcc-empty-row td::before,
  #rcc-app .rcc-table-wrap:has(#ing-tbody) tbody tr.rcc-empty-row td::before,
  #rcc-app .rcc-pnl-cols tbody tr.rcc-empty-row td::before{content:none}
  /* Cells whose value itself has two lines (name + note, name + phone) read
     better stacked — label on its own line, content below, left-aligned —
     rather than squeezed onto one flex row with space-between */
  #rcc-app .rcc-table-wrap:has(#ing-tbody) tbody td[data-label="Name"],
  #rcc-app .rcc-table-wrap:has(#receipts-tbody) tbody td[data-label="Customer"]{
    flex-direction:column;align-items:flex-start;gap:3px;text-align:left;
  }
  #rcc-app .rcc-table-wrap:has(#ing-tbody) tbody td[data-label="Name"]::before,
  #rcc-app .rcc-table-wrap:has(#receipts-tbody) tbody td[data-label="Customer"]::before{
    padding-top:0;
  }

  /* Fallback for browsers without :has() support — keep old horizontal-scroll
     behaviour rather than breaking layout entirely. */
  @supports not selector(:has(a)){
    #rcc-app .rcc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);background:var(--surface)}
    #rcc-app .rcc-table{min-width:480px}
  }

  /* ── Recipe cards: single column ─────────────────────────────────────────── */
  #rcc-app .rcc-actions{gap:5px}
  #rcc-app .rcc-btn--icon{padding:7px 10px !important;font-size:12px !important}
  #rcc-app .rcc-recipe-grid{grid-template-columns:1fr}
  #rcc-app .rcc-recipe-card{padding:12px}
  #rcc-app .rcc-recipe-card__footer{flex-wrap:wrap;gap:4px}
  #rcc-app .rcc-recipe-card__footer .rcc-btn{flex:1;min-width:100px;justify-content:center}

  /* ── P&L: mobile layout ────────────────────────────────────────────────── */
  /* Toolbar: stack date range and add expense button */
  #rcc-app .rcc-pnl__toolbar{flex-direction:column;align-items:stretch;gap:8px}
  #rcc-app .rcc-date-range{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}
  #rcc-app .rcc-date-range .rcc-label{font-size:11px;white-space:nowrap}
  #rcc-app .rcc-date-range .rcc-input--date{flex:1 1 110px;min-width:110px;width:auto !important}
  #rcc-app .rcc-date-range .rcc-btn{flex-shrink:0}
  #rcc-app .rcc-pnl__add-btns{flex-wrap:wrap;gap:6px}
  #rcc-app .rcc-pnl__add-btns .rcc-btn{flex:1;justify-content:center}
  #rcc-app .rcc-pnl__add-btns small{display:none} /* hide "Revenue auto-synced" note on mobile */

  /* Summary cards: 2-col grid on mobile */
  #rcc-app .rcc-pnl-summary{grid-template-columns:1fr 1fr;gap:6px}
  #rcc-app .rcc-pnl-card{padding:10px 12px}
  #rcc-app .rcc-pnl-card__val{font-size:15px}
  #rcc-app .rcc-pnl-card__label{font-size:9px}

  /* Cols: single column, tables replace with card-list style */
  #rcc-app .rcc-pnl-cols{grid-template-columns:1fr;gap:16px}
  #rcc-app .rcc-pnl-col__title{font-size:13px;margin-bottom:6px}
  /* (P&L tables convert to stacked cards — see the shared card-table rules above) */

  /* ── Modals: full screen on mobile ───────────────────────────────────────── */
  .rcc-modal{align-items:flex-end}
  .rcc-modal__box{
    width:100% !important;
    max-width:100% !important;
    max-height:95vh;
    border-radius:16px 16px 0 0 !important;
    margin:0 !important;
  }
  /* Wide modals (receipt/builder) also full screen */
  .rcc-modal--wide .rcc-modal__box{
    max-width:100% !important;
    border-radius:16px 16px 0 0 !important;
    margin:0 !important;
  }
  .rcc-modal__body{padding:14px}
  .rcc-modal__header{padding:12px 14px}
  /* Clear the iPhone home-indicator so the Save/Confirm button is never
     flush against the bottom edge */
  .rcc-modal__footer{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));margin-bottom:0}

  /* Touch targets: form controls and the modal close button get more
     breathing room so they're comfortable to tap with a thumb */
  .rcc-modal .rcc-input,.rcc-modal .rcc-select,.rcc-modal .rcc-textarea,
  #rcc-app .rcc-input,#rcc-app .rcc-select,#rcc-app .rcc-search{
    padding:11px 12px;font-size:15px;
  }
  .rcc-modal--receipt .rcc-input,.rcc-modal--receipt .rcc-select{padding:8px 9px;font-size:13px}
  .rcc-modal__close{
    font-size:24px !important;padding:6px 10px !important;
    min-width:40px;min-height:40px;display:flex !important;
    align-items:center;justify-content:center;
  }
  /* Footer buttons stretch to fill width and stand at a comfortable tap height */
  .rcc-modal__footer .rcc-btn{flex:1;justify-content:center;padding:12px 16px !important;font-size:14.5px !important}
  .rcc-modal--confirm .rcc-modal__footer .rcc-btn{flex:1}

  /* Modal field rows: stack to 1-col on mobile (but NOT --4 or --3 in receipt modal) */
  .rcc-modal .rcc-field-row:not(.rcc-field-row--4):not(.rcc-field-row--3){grid-template-columns:1fr !important}
  .rcc-modal .rcc-field--unit,.rcc-modal .rcc-field--sm{max-width:100%}

  /* Receipt modal items: tighter layout */
  .rcc-rcpt-item-row{grid-template-columns:1fr 50px 70px 60px 24px;gap:4px;padding:5px 6px}
  .rcc-rcpt-item-name{font-size:12px}

  /* Toggle grid: single column on small screens, larger tap targets */
  .rcc-toggle-grid{grid-template-columns:1fr}
  .rcc-toggle{padding:11px 4px}
  .rcc-toggle:nth-child(odd){border-right:none}
  .rcc-toggle input[type=checkbox]{width:19px;height:19px}

  /* Builder table */
  .rcc-modal .rcc-builder__table-wrap{max-height:180px}
  /* Builder add-row: search ingredient gets its own full row, then
     qty/unit/cost/add share a second row — avoids the cramped 5-way wrap */
  .rcc-modal .rcc-builder__add-row{gap:8px}
  .rcc-modal .rcc-builder__add-row > .rcc-field:first-child{flex:1 1 100% !important;order:-1}
  .rcc-modal .rcc-builder__add-row > .rcc-field{flex:1 1 auto !important;min-width:0 !important}
  .rcc-modal .rcc-builder__add-row #builder-qty{min-width:64px}
  .rcc-modal .rcc-builder__add-row #builder-add-btn{flex:0 0 auto !important;padding:10px 16px !important;min-height:42px}

  /* Dropdown menus */
  .rcc-dropdown__menu{min-width:140px}

  /* Receipt preview in modal */
  .rcc-receipt-58mm{width:100%;max-width:216px}
}

/* ── Mid-size tablets 600–899px ────────────────────────────────────────────── */
@media(min-width:600px) and (max-width:899px){
  #rcc-app .rcc-kpi{grid-template-columns:repeat(3,1fr)}
  #rcc-app .rcc-pnl-summary{grid-template-columns:repeat(3,1fr)}
  #rcc-app .rcc-pnl-cols{grid-template-columns:1fr}  /* stacked on tablet too */
  #rcc-app .rcc-recipe-grid{grid-template-columns:repeat(2,1fr)}
  #rcc-app .rcc-pnl__toolbar{flex-direction:row;flex-wrap:wrap}
  #rcc-app .rcc-date-range{flex-direction:row;flex-wrap:wrap}
}

/* ── RESTOCK MODAL ────────────────────────────────────────────────────────── */
.rcc-restock-current{
  background:var(--surface-2);border-radius:var(--r);padding:10px 14px;
  margin-bottom:14px;display:flex;flex-direction:column;gap:4px;
}
.rcc-restock-current__row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--text-2);
}
.rcc-restock-current__row strong{color:var(--text);font-family:var(--mono)}

.rcc-restock-preview{
  background:var(--success-lt);border:1px solid #a8d9b6;
  border-radius:var(--r);padding:10px 14px;margin-top:12px;
  display:flex;flex-direction:column;gap:5px;
}
.rcc-restock-preview__row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--text);
}
.rcc-restock-preview__row small{font-size:10px;color:var(--text-3)}

/* ── TEMPLATE EDITOR LAYOUT ──────────────────────────────────────────────── */
.rcc-tpl-layout{display:flex;gap:16px;align-items:flex-start}
.rcc-tpl-form{flex:1;min-width:0}
.rcc-tpl-preview-pane{
  flex-shrink:0;width:200px;
  position:sticky;top:8px;
}
.rcc-tpl-preview-label{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-2);
  text-align:center;margin-bottom:6px;
}
.rcc-tpl-preview-receipt{
  width:180px !important;
  min-height:200px;
  font-size:9.5px;
  padding:8px 10px;
}
/* QR code in receipt */
.rcp-tagline{font-size:0.82em;text-align:center;color:#555;display:block;margin-bottom:1mm}
.rcp-qr{text-align:center;margin:2mm 0;display:block}

/* QR Caption — sits above the QR code with deliberate spacing, separate
   from the general footer/thank-you message. Solves the "no space between
   footer and QR" issue by giving the QR its own breathing room regardless
   of whether a footer message is also present above it. */
.rcp-qr-caption{
  font-size:0.86em;font-weight:600;text-align:center;color:#444;
  display:block;margin-top:4mm;margin-bottom:1mm;
}
.rcp-qr canvas{display:inline-block;max-width:100%}
/* Defensive cap: even if a future canvas library sets a larger native buffer,
   this guarantees it can never visually exceed the receipt's content width,
   preventing any single oversized child from inflating the captured image. */
.rcp-qr{max-width:100%;overflow:hidden}

/* On mobile: stack preview below form */
@media(max-width:599px){
  .rcc-tpl-layout{flex-direction:column}
  .rcc-tpl-preview-pane{width:100%;position:static}
  .rcc-tpl-preview-receipt{width:100% !important;max-width:220px;margin:0 auto}
}

/* ── Print/Save Image modal header — wrap buttons on tiny screens ───────── */
#modal-print-receipt .rcc-modal__header{flex-wrap:wrap;gap:6px}
#modal-print-receipt .rcc-modal__title{flex:1 1 100%;margin-bottom:2px}
@media(min-width:380px){
  #modal-print-receipt .rcc-modal__title{flex:0 0 auto;margin-bottom:0}
}