/* Fonts: the same three as the hotel websites, kept in /fonts (SIL Open Font License). */
@font-face { font-family: "Playfair Display"; src: url("fonts/PlayfairDisplay-Variable.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("fonts/PlayfairDisplay-Italic-Variable.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("fonts/Raleway-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* Hotel-site design language (same fonts, greens and sharp corners as the Hotel Delite website).
     Old variable names are kept so every screen picks the new look up automatically. */
  --forest: #0D3A2B; --forest-2: #145239; --forest-3: #082A1F;
  --leaf: #1E8F55; --leaf-d: #17713F;
  --lime: #A6D63C; --lime-2: #BDE45E; --ivory: #F6F8F1; --mist: #E7F0E4;
  --green: #0D3A2B;
  --green-dark: #082A1F;
  --green-light: #E7F0E4;
  --gold: #A6D63C;
  --amber: #A6D63C;
  --amber-light: #FBF2DD;
  --amber-ink: #6B4A04;   /* warning text on --amber-light */
  --red: #A3411A;
  --red-light: #F9E8DF;
  /* Design rule (app-wide): no gray text. Visual hierarchy comes from size, weight and
     letter-spacing, never from a lighter text colour. */
  --ink: #13231B;
  --ink-soft: #13231B;
  --paper: #F6F8F1;
  --card: #FFFFFF;
  --line: #D3DFD0;
  --radius: 6px;
  --radius-sm: 3px;
  --radius-lg: 6px;
  --r-sm: 3px; --r-md: 4px; --r-lg: 6px;
  --shadow-sm: 0 1px 2px rgba(13,58,43,0.06);
  --shadow-md: 0 8px 22px rgba(13,58,43,0.10);
  --shadow-lg: 0 12px 32px rgba(13,58,43,0.16);
  --sidebar-w: 216px;
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --label: "Raleway", "Segoe UI", system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family: var(--text);

  /* Dashboard data colors — validated for colorblind-safety with the
     dataviz skill's palette checker (lightness band, chroma floor, CVD
     separation, contrast). Distinct from the brand chrome colors above
     (--green/--amber/--red), which stay reserved for nav/buttons/badges
     everywhere else in the app and never carry chart/data meaning. */
  --d-sales: #008300;       --d-sales-light: #E3F3E3;
  --d-blue: #4D7AB3;        --d-blue-light: #E7EEF6;   /* Top sellers bars */
  --d-violet: #6F5FA0;      --d-violet-light: #ECE8F7;  /* Rush hours bars */
  --d-orange: #eb6834;      --d-orange-light: #FDEBE3;  /* Stock value */
  --d-magenta: #e87ba4;     --d-magenta-light: #FCEAF1; /* Supplier debt */
  --d-critical: #d03b3b;    --d-serious: #ec835a;    --d-warning: #fab219;    --d-good: #0ca30c;
  --d-ctx-warm: #BE8F87;    /* de-emphasis "cost of goods" segment, closer to red per feedback */
  --d-gridline: #E7E2DC;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); }
body { -webkit-font-smoothing: antialiased; padding-bottom: env(safe-area-inset-bottom); }
#app { min-height: 100vh; display: flex; flex-direction: column; }

button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

/* A small reusable badge: the "H" mark on a rounded green square, matching
   the app icon (icons/icon-512.png). Used on the topbar, the sidebar, the
   loading screen and every auth screen so the brand has one consistent
   mark instead of plain unstyled text. */
.brand-badge {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--green), var(--green-dark));
  color: #fff; border-radius: 3px; box-shadow: var(--shadow-sm);
  font-weight: 800; line-height: 1;
}
.ic-svg { display: block; }

/* ---------------------------------------------------------------------- */
/* TOPBAR — on a phone this is the brand bar (green, holds the identity).  */
/* On desktop the brand moves into the sidebar instead (see below), so     */
/* the topbar becomes a slim, quiet utility strip: just the current        */
/* pharmacy name and account controls, not a second copy of the logo.      */
/* ---------------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--green); color: #fff;
  position: sticky; top: 0; z-index: 10; box-shadow: var(--shadow-sm);
  /* In the Android app the page runs edge-to-edge, so the phone's clock and
     battery sit on top of the page. This padding keeps the green bar's
     content below them (and the green behind them). 0 in a normal browser. */
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.topbar-id { display: flex; align-items: center; gap: 10px; }
.topbar-id .brand-badge { background: rgba(255,255,255,0.14); box-shadow: none; }
.topbar .brand { font-weight: 700; font-size: 17px; letter-spacing: 0.2px; line-height: 1.2; }
.topbar .sub { font-size: 12px; opacity: 0.85; margin-top: 1px; }
.topbar button { background: rgba(255,255,255,0.15); color: #fff; border: none; border-radius: 4px; padding: 8px 12px; transition: background 0.15s; }
.topbar button:hover { background: rgba(255,255,255,0.25); }

.content { flex: 1; padding: 16px; padding-bottom: 90px; max-width: 720px; margin: 0 auto; width: 100%; }

/* ---------------------------------------------------------------------- */
/* NAV — a bottom tab bar on a phone, the same element becomes the full   */
/* left sidebar on desktop (see the min-width:860px block below). Brand   */
/* and account blocks are written into it too, but stay hidden until      */
/* the desktop layout has room for them.                                  */
/* ---------------------------------------------------------------------- */
.navbar {
  position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(165deg, var(--green) 0%, var(--green-dark) 100%);
  display: flex; z-index: 10;
  padding-bottom: env(safe-area-inset-bottom);
}
.navbar-brand, .navbar-foot { display: none; }
.navbar button {
  flex: 1; background: none; border: none; padding: 9px 4px 8px; color: rgba(255,255,255,0.62);
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600;
}
.navbar button .ic {
  display: flex; padding: 4px 14px; border-radius: 3px; transition: background 0.15s, color 0.15s;
}
.navbar button.active { color: #fff; }
.navbar button.active .ic { background: var(--amber); color: #241A03; }

/* Item 31: the left/right colored-accent border pattern, ported over from
   ShuleTop's .stat/.hub-tile tiles (src/styles/main.css) — a thin 1px
   border all around plus a thicker 4px accent specifically on the left and
   right edges, colored to match the tile's own hue. The base rule reserves
   transparent 4px left/right borders so nothing shifts in width when a
   .t-* (or dash-pill/dash-*) color class later recolors them. */
.card {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-radius: var(--radius); padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow-sm);
}
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm);
}
.kpi .label { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.kpi .value { font-size: 23px; font-weight: 800; margin-top: 5px; font-variant-numeric: tabular-nums; letter-spacing: -0.2px; }

/* Expiry Reports drill-down: the summary KPI tiles are now real <button>
   elements (clicking one opens that category's full list), so they need
   the same text-align/width/cursor reset .report-tile below already uses
   to undo default button centering and auto-width, plus a matching hover
   lift so it's visually obvious they're clickable. */

/* Item 30 (tile color sketch, approved): every summary tile across the app
   (drug detail, Reports, Suppliers, Expenses) now uses a light tint from
   the same palette as the Dashboard's Sales/Stock value/Profit pills,
   instead of plain white or the old bold solid-color "good/bad/warn"
   treatment. Color is chosen by what the number means, not per-screen:
   sales/green = money in or a healthy state, orange = stock & goods
   movement, violet = a neutral count, red = money out/owed, amber =
   needs attention, neutral gray = zero/not applicable. Item 31 adds the
   matching accent border color on top (border-color recolors all four
   sides at once, so the 1px top/bottom and the 4px left/right both pick up
   the same hue in one declaration — same trick ShuleTop's CSS uses). */
.kpi.t-orange  { background: var(--d-orange-light); border-color: var(--d-orange); }
.kpi.t-orange .label { color: var(--d-orange); }
.kpi.t-green   { background: var(--green-light); border-color: var(--green); }
.kpi.t-green .label { color: var(--green); }
.kpi.t-amber   { background: var(--amber-light); border-color: var(--amber); }
.kpi.t-amber .label { color: #8a6408; }
.kpi.t-red     { background: var(--red-light); border-color: var(--red); }
.kpi.t-red .label { color: var(--red); }
.kpi.t-red .value { color: var(--red); }
.kpi.t-neutral { background: #F1EEEA; border-color: var(--line); }
.kpi.t-neutral .label { color: var(--ink-soft); }

/* Item 32: the Reports hub — a grid of tinted, accent-bordered tiles (same
   .t-* tint tokens and border-accent trick as .kpi, items 30/31) instead of
   a flat list, one per report sub-module. */

h1, h2, h3 { margin: 0 0 10px; }
h2 { font-size: 16px; }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-soft); margin: 18px 0 8px; font-weight: 600; }

.list-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--line); gap: 10px;
}
.list-row:last-child { border-bottom: none; }
.list-row .name { font-weight: 600; }
.list-row .meta { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.list-row .right { text-align: right; white-space: nowrap; }

/* A small round initial badge, colour-coded by status (good/warn/bad),
   used in front of a list row's name (drug rows, first on the Stock tab)
   instead of leaving every row as plain text with nothing to scan by eye. */

.badge { display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 3px; font-weight: 700; }
.badge.bad { background: var(--red-light); color: var(--red); }
.badge.warn { background: var(--amber-light); color: var(--amber-ink); }
.badge.good { background: var(--green-light); color: var(--green); }
.badge.muted { background: #EFEDEA; color: var(--ink-soft); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 4px; padding: 12px 16px; font-weight: 600; width: 100%;
  transition: filter 0.12s, transform 0.05s, background 0.12s;
}
.btn.primary { background: var(--green); color: #fff; box-shadow: 0 3px 10px rgba(15,81,50,0.28); }
.btn.secondary { background: var(--green-light); color: var(--green); }
.btn.ghost { background: #EFEDEA; color: var(--ink); }
.btn.danger { background: var(--red-light); color: var(--red); }
.btn.small { width: auto; padding: 8px 12px; font-size: 13px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:not(:disabled):hover { filter: brightness(1.06); }
.btn:not(:disabled):active { transform: scale(0.98); }

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-light);
}
.field .hint { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
/* Password box with a show/hide eye (js/core.js pwEye, admin.js wirePwEyes) */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-eye { position: absolute; top: 0; right: 0; bottom: 0; width: 42px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--green); border-radius: 0 10px 10px 0; }
.pw-eye:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.row-2 > * { min-width: 0; }
.field input, .field select, .field textarea { min-width: 0; }

/* Same border color every card/kpi/tile in the app already uses, plus their
   shadow — the 1px var(--line) border alone barely reads on this input's
   near-white background (especially inside a white sheet), so on its own it
   looked like the filter bar had no border at all next to the tiles around
   it. */

.mask { position: fixed; inset: 0; background: rgba(20,18,16,0.5); display: flex; align-items: flex-end; z-index: 50; }
.sheet { background: #fff; width: 100%; max-height: 88vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 18px 16px 24px; }
@media (min-width: 640px) {
  .mask { align-items: center; justify-content: center; }
  .sheet { max-width: 480px; border-radius: 6px; box-shadow: var(--shadow-lg); }
}
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sheet-head h2 { margin: 0; }
.sheet-head button { background: none; border: none; color: var(--ink-soft); display: flex; padding: 4px; border-radius: 4px; }
.sheet-head button:hover { background: #F1EFEC; }

.cart-line { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); }

.empty { text-align: center; padding: 40px 16px; color: var(--ink-soft); }
.toast { position: fixed; left: 50%; top: calc(18px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 4px; font-size: 14px; z-index: 100; opacity: 0.97; box-shadow: var(--shadow-md); }
.toast.bad { background: var(--red); }
.toast.good { background: var(--green); }

.error-text { color: var(--red); font-size: 13px; margin-top: 6px; }
.tiny { font-size: 12px; color: var(--ink-soft); }
.spacer { height: 8px; }

/* Simple one-off screens (startup error, password recovery): centered card,
   no split panel — there's nothing to browse, just one thing to do. */
.auth-wrap-simple { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-wrap-simple .auth-card { text-align: center; }
.auth-wrap-simple .brand-badge { margin: 0 auto 10px; }
.auth-wrap-simple .mark { font-size: 22px; font-weight: 800; color: var(--green); }
.auth-wrap-simple .tag { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.auth-wrap-simple .card { text-align: left; }

/* A row of auxiliary action buttons (Sync/Import/Excel/Print — secondary
   to the page's one primary action) as a single bordered, dividered strip
   instead of separate boxes that wrap unevenly when a label runs long. */
.toolbar-segment {
  display: flex; align-items: stretch; background: #fff; border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden; flex-wrap: wrap;
}
.toolbar-segment .btn {
  width: auto; flex: 1 1 auto; white-space: nowrap; background: transparent; color: var(--ink);
  border-radius: 0; border-right: 1px solid var(--line);
}
.toolbar-segment .btn:last-child { border-right: none; }
.toolbar-segment .btn:hover { background: #F5F2EA; }
/* Pushes the Excel/Print segment (or any trailing toolbar item) to the
   right edge of its .toolbar-row, leaving any primary/left-hand actions
   in place — an auto left-margin absorbs all remaining row width, so it
   works whether it's the only child or has siblings before/after it. */

/* ---------------------------------------------------------------------- */
/* DESKTOP LAYOUT — the bottom tab bar becomes a full-height branded       */
/* sidebar (dark green, gold active state), and the topbar becomes a      */
/* slim white utility strip beside it rather than a second brand bar.     */
/* ---------------------------------------------------------------------- */
@media (min-width: 860px) {
  .topbar {
    margin-left: var(--sidebar-w); padding-left: 28px; padding-right: 28px;
    background: #fff; color: var(--ink); box-shadow: none; border-bottom: 1px solid var(--line);
  }
  .topbar-id .brand-badge, .topbar .brand { display: none; }
  .topbar .sub { color: var(--ink); font-size: 14px; font-weight: 700; opacity: 1; }
  .topbar button { background: var(--green-light); color: var(--green); font-weight: 600; }
  .topbar button:hover { background: #DCEEE2; }

  .navbar {
    top: 0; bottom: 0; left: 0; right: auto; width: var(--sidebar-w);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 18px 10px; gap: 2px; box-shadow: 4px 0 20px rgba(10,59,36,0.12);
  }
  .navbar-brand {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 4px; margin-bottom: 22px; text-align: center;
  }
  .navbar-brand .brand-badge { width: 32px; height: 32px; font-size: 15px; background: #fff; color: var(--green); }
  .navbar-brand .word { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: 0.2px; }
  /* A narrower column (halved from 264px per feedback) has no room for an
     icon beside a full-width label without wrapping or overflow — icon
     stacked above a small label reads cleanly at this width and still shows
     the full word, just vertically instead of side by side. */
  .navbar button {
    flex: none; flex-direction: column; justify-content: center; gap: 4px;
    padding: 9px 4px; font-size: 10.5px; font-weight: 700; border-radius: 4px;
    line-height: 1.15; text-align: center;
  }
  .navbar button .ic { padding: 0; background: none !important; color: inherit !important; }
  .navbar button .ic-svg { width: 18px; height: 18px; }
  .navbar button.active { background: var(--amber); color: #241A03; box-shadow: 0 4px 12px rgba(184,134,11,0.35); }
  .navbar-spacer { flex-grow: 1; }
  .navbar-foot {
    display: flex; flex-direction: column; gap: 2px; background: rgba(255,255,255,0.09);
    border-radius: 6px; padding: 14px 16px; margin-top: 10px;
  }
  .navbar-foot .who { font-size: 13.5px; font-weight: 700; color: #fff; }
  .navbar-foot .role { font-size: 12px; color: rgba(255,255,255,0.62); }

  /* FIX (PROJECT_STATUS.md item 29 — desktop right-margin bug): the base .content rule below is written
     for mobile, where "width:100%; margin:0 auto" is correct (no sidebar,
     just center a capped column). On desktop, only margin-left got
     overridden here (to clear the fixed sidebar) while width stayed a
     literal 100% of the FULL #app width and margin-right stayed the base
     rule's inherited "auto" — so the box was 100%-of-full-width-wide,
     shifted right by the sidebar, and every last pixel of the resulting
     overflow got absorbed into margin-right as one large empty gap on the
     right instead of the content actually using that space. Fixed by
     sizing width explicitly against the space actually left after the
     sidebar (calc, not 100%) and zeroing margin-right instead of
     inheriting auto. max-width raised from 900 to 1200 so wide desktop
     monitors show more (inventory rows, dashboard cards) instead of
     capping unnecessarily narrow. */
  .content { margin-left: var(--sidebar-w); margin-right: 0; width: calc(100% - var(--sidebar-w)); max-width: 1200px; padding: 24px 32px 60px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* ---------------------------------------------------------------------- */
/* DASHBOARD — redesigned dashboard: real date-range filter, an axis'd    */
/* sales trend + rush-hours chart, capped/click-through lists, and fixed  */
/* card sizes so a brand-new pharmacy with zero data sees clean           */
/* placeholders instead of a layout that jumps once real data arrives.    */
/* ---------------------------------------------------------------------- */
/* Item 33 (mobile dashboard redesign, approved via sketch): the urgent
   alerts strip from the first sketch — out-of-stock/soonest-expiry, tap
   through to Inventory. */

/* Item 27/33: Sell + Restock side by side, then the live "is this drug in
   stock?" search below (was Sell + search sharing one row). */
/* Colored to match the tinted-tile treatment below (Sales/Stock
   value/Debt owed) rather than a neutral gray border — violet since this
   search is a neutral lookup, not tied to money in/out or stock value, the
   same meaning --d-violet already carries for Rush hours' bars. */

/* Item 33: was plain underlined text tabs with a redundant period label —
   now a rounded segmented pill control (also reused as-is by Expenses'
   own date filter, so that gets the same polish for free), plus a
   calendar button opening a real custom-range picker. .dash-period-label
   stays defined for Expenses, which still uses it; the dashboard itself
   no longer renders it. */
/* .dash-row's align-items:stretch already gives Top sellers/Expiring soon's
   .dash-col wrappers equal height on desktop (row layout) — but a wrapper
   being taller doesn't make the .card living inside it any taller, since
   .card is only ever as tall as its own content. Making .dash-col a column
   flex box and letting its one .card child grow (flex:1) is what actually
   carries that equal height down to the visible bordered box, so the two
   cards' borders line up bottom-to-bottom instead of whichever has fewer
   rows/no "View all" link stopping short. No effect on mobile's stacked
   layout, where each .dash-col's height is only ever its own content's. */

/* Item 33: the Sales graph card is solo now (Rush hours dropped from this
   layout), so it's no longer height-matched to a sibling — content decides
   its height instead of a fixed 300px that used to leave a lot of empty
   space under a short chart. Card header is now .dash-card-head (compact,
   shared with Stock health/Top sellers/Expiring soon below) instead of
   the old centered section-title + big headline + centered chip row. */
/* Item 30/31's tinted-tile + accent-border treatment (light tint fill,
   solid-colored border — same mechanism as .kpi.t-*, .dash-stat), now
   reused on the plain white cards too so every card on the dashboard reads
   as one consistent, clearly-bordered family instead of some tiles being
   colorful and others fading into the page. Colors follow the app's
   existing meaning convention: green = sales/money in, orange = stock,
   blue = a neutral ranking (matches the Top sellers bars' own blue),
   red = needs urgent attention. */
/* Item 30: a chip that filled with the card's own light tint would
   disappear into it — chips are a solid white pill with a hairline ring
   instead, which stays legible on any card color (and on the plain white
   cards item 33 introduced). */

/* Item 33: a compact label/value header row shared by the sales graph card,
   Stock health, Top sellers and Expiring soon — replaces the old centered
   .section-title used on each, which took up more vertical space than the
   number it introduced needed. */

/* Item 33: replaces the old single-file dash-pill-row — a 2-up grid on
   phone (Sales+Profit, then Stock value+Debt owed), 4-up on desktop. Same
   item-30/31 tinted-tile + accent-border treatment as before, just no
   colored dot, and grid instead of flex so pairing is exact regardless of
   content width. */

/* Item 33: no more fixed min-height — the old 268px was tuned for a
   two-column desktop pairing and, once cards mostly run 3-4 rows deep on
   phone, just left a lot of dead space below "View all". Cards now hug
   their own content at any width. */

/* Item 33: was a wrapping flex row (three items could drop to a second
   line at phone width); a fixed 3-column grid keeps Out/Low/Healthy on
   one row always, and shorter labels ("Out 18" not "Out of stock (18)")
   are what make that fit comfortably. */

/* ---------------------------------------------------------------------- */
/* PRINT — reports and receipts print on their own, with a business       */
/* letterhead, independent of whatever screen is currently open.          */
/* ---------------------------------------------------------------------- */
.print-only { display: none; }
@media print {
  body * { visibility: hidden; }
  #printArea, #printArea * { visibility: visible; }
  #printArea {
    display: block; position: absolute; top: 0; left: 0; width: 100%;
    padding: 0; color: #000; background: #fff;
  }
}

/* ---------------------------------------------------------------------- */
/* UI polish pass (Oct 2026)                                               */
/* ---------------------------------------------------------------------- */
/* Cart lines: price line was rendering at full body size, same as the name */
.cart-line .name { font-weight: 600; }
.cart-line .meta { font-size: 12px; margin-top: 2px; }

/* Sell: checkout bar (replaces the round floating cart button) */
.cart-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 11;
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: none; border-radius: 6px;
  background: var(--green); color: #fff; box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 700; text-align: left;
}
.cart-bar .cb-ic { position: relative; display: flex; }
.cart-bar .cb-n {
  position: absolute; top: -8px; right: -11px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 3px;
  background: var(--amber); color: #241A03; font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.cart-bar .cb-txt { flex: 1; margin-left: 6px; font-variant-numeric: tabular-nums; }
.cart-bar .cb-go { background: rgba(255,255,255,0.16); border-radius: 4px; padding: 6px 10px; white-space: nowrap; }
.content.has-cart-bar { padding-bottom: 160px; }

/* Reports: date range + Excel/Print on one header row */
.report-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.report-head .toolbar-segment { margin-left: auto; }
.report-head .toolbar-segment .btn { padding: 9px 14px; font-size: 13.5px; }

/* Drug detail: batch rows — title + stock badge on one line, actions in an even grid */

/* Dashboard "Expiring soon" status words in readable ink, not the light bar fill colours */

/* Status dropdowns inside list rows (insurance claims) — match the app's inputs instead of the browser default */
.list-row select {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; box-shadow: var(--shadow-sm);
}

/* "Forgot password?" was the browser's default blue underline */
.auth-form-col .tiny a, .auth-card .tiny a { color: var(--green); font-weight: 700; text-decoration: none; }
.auth-form-col .tiny a:hover, .auth-card .tiny a:hover { text-decoration: underline; }
@media (min-width: 860px) {
  .cart-bar { left: auto; right: 32px; bottom: 24px; width: 380px; }
  .content.has-cart-bar { padding-bottom: 110px; }
}

/* ---------------------------------------------------------------------- */
/* PHONE MENU DRAWER — ported from Kodi (app/style.css, "Top-left menu     */
/* drawer"), which is David's own project; the geometry, timing curve and  */
/* drawn scrollbar are copied as-is, repainted in Pharma's green/gold.     */
/*                                                                         */
/* Why it exists: the phone bottom bar can only carry about five thumb-    */
/* sized targets, and Pharma has seven destinations plus five report sub-  */
/* screens. Kodi solved exactly this — a short bottom bar for the hot      */
/* paths, and a hamburger drawer holding every module.                     */
/*                                                                         */
/* Phone only. Pharma's desktop sidebar (the min-width:860px block above)  */
/* already shows every destination, so the hamburger, the scrim and the    */
/* drawer are all hidden there. 860px — not Kodi's 900px — because that is */
/* where Pharma's sidebar already appears; using 900 would leave 860-899px */
/* showing the sidebar AND the phone bars at the same time.                */
/*                                                                         */
/* The panel is inset from the top bar and the tab bar rather than running */
/* the full height: on a phone both bars stay visible and tappable while   */
/* the menu is open, so there is always a way out that is not the scrim.   */
/* --ph-topbar-h/--ph-tabbar-h are the two measurements the insets are     */
/* built from — change those, not the calc()s.                             */
/* ---------------------------------------------------------------------- */
:root { --ph-topbar-h: 60px; --ph-tabbar-h: 62px; --ph-safe-top: env(safe-area-inset-top, 0px); }

/* Below .mask (z-index 50) on purpose: opening a sheet from a drawer row  */
/* must cover the drawer, not slide under it.                              */
.navscrim {
  position: fixed; inset: 0; background: rgba(14,22,19,0.45);
  opacity: 0; visibility: hidden; transition: opacity 0.25s; z-index: 44;
}
body.nav-open .navscrim { opacity: 1; visibility: visible; }

.navdrawer {
  position: fixed; left: 0; z-index: 45;
  top: calc(var(--ph-topbar-h) + 5px + var(--ph-safe-top));
  bottom: calc(var(--ph-tabbar-h) + 6px + env(safe-area-inset-bottom));
  width: 172px; max-width: 70%; overflow: hidden;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
  color: #DCEBE8; display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.24s cubic-bezier(0.4, 0.01, 0.2, 1);
  box-shadow: 0 14px 38px -10px rgba(0,0,0,0.55);
}
body.nav-open .navdrawer { transform: none; }

/* The scrollbar is DRAWN (.nd-sb), not the browser's own. On a phone the
   native one is an overlay — it fades in while a finger is moving and is
   invisible the rest of the time, so there is nothing on screen to say the
   list continues, which is the one thing this menu most needs to show. */
.nd-navwrap { position: relative; flex: 1 1 0; min-height: 0; display: flex; }
/* Every row is only as wide as the widest label, so the active-row pill is a
   short pill rather than a band across the whole drawer. */
.nd-nav {
  display: grid; grid-template-columns: max-content; grid-auto-rows: max-content;
  justify-content: start; align-content: start;
  flex: 1 1 0; min-width: 0; overflow-y: auto; padding: 8px 17px 8px 6px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
}
.nd-nav::-webkit-scrollbar { display: none; }
.nd-sb {
  position: absolute; top: 34px; bottom: 34px; right: 4px; width: 9px; border-radius: 3px;
  background: rgba(255,255,255,0.12); opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.nd-sb.on { opacity: 1; }
/* Arrow caps drawn with borders rather than glyphs, so they stay crisp at any
   pixel density. Decorative: the list is scrolled by swiping it. */
.nd-sb::before, .nd-sb::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
}
.nd-sb::before { bottom: 100%; margin-bottom: 5px; border-bottom: 6px solid #FFFFFF; }
.nd-sb::after { top: 100%; margin-top: 5px; border-top: 6px solid #FFFFFF; }
.nd-sb-th {
  position: absolute; left: 0; right: 0; top: 0; height: 30px; min-height: 24px;
  border-radius: 3px; background: #FFFFFF;
}
/* Mouse/trackpad: the drawn bar can be dragged and the track clicked, so it
   gets a little more width and reacts to hover. Not applied on touch. */
@media (hover: hover) and (pointer: fine) {
  .nd-sb { pointer-events: auto; cursor: pointer; width: 10px; transition: opacity 0.2s, background 0.15s; }
  .nd-sb:hover { background: rgba(255,255,255,0.2); }
  .nd-sb-th { cursor: grab; transition: background 0.15s; }
  .nd-sb-th:hover { background: var(--green-light); }
  .nd-sb-th.drag { cursor: grabbing; background: #CFEBDD; }
}
/* No-gray-text rule: these two are the drawer's quietest text, and they are
   still a readable light green rather than a gray. */
.nd-grp {
  font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase;
  color: #A8C9B8; padding: 10px 9px 4px; font-weight: 700;
}
.nd-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 4px;
  color: #DCEBE8; font-size: 12.5px; font-weight: 600; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit;
}
.nd-row:active { background: rgba(255,255,255,0.08); }
.nd-chip {
  width: 26px; height: 26px; border-radius: 3px; display: grid; place-items: center;
  font-size: 14px; line-height: 1; flex: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.32), rgba(255,255,255,0.04));
  box-shadow: 0 2px 4px rgba(0,0,0,0.35), inset 0 1px rgba(255,255,255,0.45), inset 0 -1px 2px rgba(0,0,0,0.3);
}
.nd-lab { flex: 1; min-width: 0; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
/* Gold, matching the active tab in the bottom bar and the desktop sidebar,
   rather than Kodi's green-on-green. */
.nd-row.active {
  background: var(--amber); color: #241A03;
  outline: 2px dashed rgba(255,255,255,0.75); outline-offset: -2px;
}
.nd-head {
  flex: 0 0 auto; padding: 11px 13px; border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 10px; color: #CFE3D7; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
.nd-foot {
  flex: 0 0 auto; padding: 11px 13px; border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 10px; color: #CFE3D7;
}
/* The hamburger gets its own solid colour rather than the topbar's shared
   translucent white wash, which reads as a gray smudge on the green bar —
   the same reasoning (and the same fix) as Kodi's #btnNavMenu. */
.topbar .burgerbtn {
  background: var(--green-dark); color: #fff; border-radius: 50%;
  width: 34px; height: 34px; padding: 0; display: grid; place-items: center; flex: none;
}
.topbar .burgerbtn:hover { background: #072C1B; }
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Destinations that stay on the desktop sidebar but move into the drawer on a
   phone, so the bottom bar keeps five thumb-sized targets. Declared here as
   the mobile-first base rule and switched back on inside the 860px block
   below — scoped as ".navbar button.nav-desktop-extra" (not the bare class)
   so it reliably beats ".navbar button" on specificity. */
.navbar button.nav-desktop-extra { display: none; }

/* Desktop-only parts of the menu: hidden on a phone. */
.nd-brand, .nd-who { display: none; }

/* ---------------------------------------------------------------------- */
/* DESKTOP MENU (860px+) — the phone's menu drawer, docked open down the  */
/* left edge (Kodi style): logo and pharmacy name, small CAPITAL group    */
/* headings, an emoji tile then the name on every row. The old icon bar   */
/* (.navbar) is no longer shown here.                                     */
/* ---------------------------------------------------------------------- */
@media (min-width: 860px) {
  .navscrim, .navbar, .topbar .burgerbtn { display: none; }
  .navdrawer {
    top: 0; bottom: 0; left: 0; width: var(--sidebar-w); max-width: none; z-index: 40;
    transform: none; visibility: visible; border-radius: 0; transition: none;
    background: var(--green-dark); box-shadow: 4px 0 20px rgba(10,59,36,0.14);
  }
  .nd-brand {
    display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
    padding: 14px 12px 12px; border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .nd-bname {
    font-size: 13.5px; font-weight: 800; color: #fff; line-height: 1.2; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .nd-head { border-bottom: 0; padding: 12px 14px 0; font-size: 10px; color: #A8C9B8; }
  .nd-nav { grid-template-columns: 1fr; padding: 2px 16px 8px 8px; }
  .nd-grp { padding: 12px 8px 4px; font-size: 10px; }
  .nd-row {
    gap: 10px; padding: 5px 8px; font-size: 13px; border-radius: 4px;
    border-left: 3px solid transparent; transition: background 0.12s;
  }
  .nd-row:hover { background: rgba(255,255,255,0.08); }
  .nd-chip { width: 28px; height: 28px; font-size: 15px; border-radius: 4px; }
  /* Selected: a soft lighter panel, a gold bar on its edge and a gold tile —
     the same marking Kodi uses, in Pharma's gold. */
  .nd-row.active {
    background: rgba(255,255,255,0.12); color: #fff; outline: 0; border-left-color: #E8A317;
  }
  .nd-row.active .nd-chip {
    background: linear-gradient(160deg, #F6C95A, #D4920F);
    box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px rgba(255,255,255,0.6), inset 0 -1px 2px rgba(80,50,0,0.4);
  }
  .nd-foot { padding: 9px 14px; line-height: 1.5; }
  .nd-who { display: block; color: #fff; font-weight: 700; font-size: 11.5px; }
}

/* critical:start - the few rules the loading screen needs. index.html carries an identical copy inline so the screen draws before this file arrives; tests/critical-css.test.js fails if the two drift apart. */
html,body{margin:0}
.loadscreen{box-sizing:border-box;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;color:#fff;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:radial-gradient(circle at 18% 0%,#145239 0%,transparent 55%),linear-gradient(180deg,#0D3A2B 0%,#082A1F 100%)}
.loadscreen-mark{width:76px;height:76px;border-radius: 6px;background:#145239;display:grid;place-items:center;box-shadow:0 0 0 3px #A6D63C,0 12px 26px rgba(0,0,0,.35)}
.loadscreen-mark svg{width:46px;height:46px}
.loadscreen-word{margin:0;font-family:'Playfair Display',Georgia,serif;font-size:38px;font-weight:600;line-height:1}
.loadscreen-dots{display:flex;gap:8px;height:10px}
.loadscreen-dots i{width:8px;height:8px;border-radius:50%;background:#A6D63C;animation:lsDot 1.2s ease-in-out infinite}
.loadscreen-dots i:nth-child(2){animation-delay:.15s}.loadscreen-dots i:nth-child(3){animation-delay:.3s}
.loadscreen-tag{margin:0;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;color:#BDE45E}
@keyframes lsDot{0%,80%,100%{opacity:.25;transform:scale(.7)}40%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.loadscreen-dots i{animation:none;opacity:1}}
/* critical:end */

/* ---------------------------------------------------------------------- */
/* PHONE BOTTOM BAR — glass 3D chips, the same look as the menu drawer's  */
/* (.nd-chip). The flat line icon (.ic) stays for the desktop sidebar;    */
/* the chip (.ic3d) is for phones only. The active tab's chip turns gold  */
/* and lifts a little.                                                    */
/* ---------------------------------------------------------------------- */
.navbar button .ic3d { display: none; }
@media (max-width: 859px) {
  .navbar button { padding: 8px 4px 7px; gap: 3px; color: #DCEBE8; }
  .navbar button.active { color: #fff; }
  .navbar button .ic { display: none; }
  .navbar button .ic3d {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 4px;
    font-size: 16px; line-height: 1;
    background: linear-gradient(160deg, rgba(255,255,255,0.34), rgba(255,255,255,0.04));
    box-shadow: 0 3px 6px rgba(0,0,0,0.4), inset 0 1px rgba(255,255,255,0.5), inset 0 -2px 3px rgba(0,0,0,0.3);
    transition: transform 0.15s, background 0.15s;
  }
  .navbar button.active .ic3d {
    background: linear-gradient(160deg, #F0CF78, #B8860B);
    box-shadow: 0 4px 9px rgba(0,0,0,0.45), inset 0 1px rgba(255,255,255,0.7), inset 0 -2px 3px rgba(80,50,0,0.45);
    transform: translateY(-2px);
  }
}

/* ---------------------------------------------------------------------- */
/* LOADING PLACEHOLDERS — shapes (no text) that shimmer while the         */
/* dashboard numbers arrive, instead of a "Loading…" line.                */
/* ---------------------------------------------------------------------- */
@keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Thin bar across the top of the dashboard while older numbers are on screen
   and fresh ones are loading. */
@keyframes updSlide { 0% { left: -35%; } 100% { left: 100%; } }

/* ---------------------------------------------------------------------- */
/* 2026-10-29: customers & credit, refills, SMS, controlled drugs,         */
/* stock take. Reuses the existing cards, KPI tiles, badges and sheets;    */
/* only what those did not already cover is here.                          */
/* ---------------------------------------------------------------------- */
.list-row > div:first-child { min-width: 0; }
.field textarea { resize: vertical; line-height: 1.4; }
.list-row .meta.wrap { white-space: normal; }
.kpi-grid > .kpi { min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------- */
/* In-app pop-ups (replace the browser's own "<site> says" boxes) and the */
/* "Please wait, loading…" cover shown while a screen opens.               */
/* ---------------------------------------------------------------------- */
.dlg-mask {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(20,18,16,0.55);
  padding-top: calc(20px + env(safe-area-inset-top, 0px)); padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.dlg {
  width: 100%; max-width: 380px; background: #FBF7EC; border: 2px solid var(--green); border-radius: 6px;
  padding: 20px 18px 16px; box-shadow: var(--shadow-lg); animation: dlgIn 0.14s ease-out;
}
@keyframes dlgIn { from { transform: scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.dlg-title { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.dlg-msg { margin: 0 0 14px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.dlg-input {
  width: 100%; margin: 0 0 14px; padding: 11px 12px; font: inherit; font-size: 15px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--green); border-radius: 4px;
}
.dlg-input:focus { outline: none; box-shadow: 0 0 0 3px var(--green-light); }
.dlg-actions { display: flex; gap: 10px; }
.dlg-actions .btn { flex: 1 1 0; min-width: 0; }
.dlg-actions .btn.danger { background: var(--red); color: #fff; }

.loadveil { position: fixed; inset: 0; z-index: 90; background: transparent; cursor: progress; }
.loadveil-pill {
  position: absolute; left: 50%; top: calc(76px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  display: none; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 3px; white-space: nowrap;
  background: var(--green); color: #fff; font-size: 14px; font-weight: 700; box-shadow: var(--shadow-lg);
}
.loadveil.show .loadveil-pill { display: flex; }
.loadveil-spin {
  width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: loadSpin 0.8s linear infinite;
}
@keyframes loadSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loadveil-spin { animation-duration: 2.4s; } .dlg { animation: none; } }

/* Sell: search box + checkout bar */
/* The cart bar is the one thing on Sell that must be noticed, so it is blue
   with white text instead of the green used by everything else. */
.cart-bar {
  background: linear-gradient(160deg, #2F72D6 0%, #1B4FA3 100%); color: #fff;
  border: 2px solid #12397D; box-shadow: 0 10px 26px rgba(18,57,125,0.45);
}
.cart-bar .cb-n { background: #fff; color: #12397D; }
.cart-bar .cb-go { background: #fff; color: #12397D; }

/* Every pop-up floats in the middle of the screen: it keeps a gap from the
   screen edges (all four sides) instead of sitting flat against the bottom, and
   has rounded corners all the way round. (The slide-out menu is unchanged.) */
.mask {
  align-items: center; justify-content: center;
  padding: 12px; padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px));
}
.sheet {
  border-radius: 6px; border: 1.5px solid var(--green); box-shadow: var(--shadow-lg);
  max-height: 100%; min-height: 0;
}

/* Stock Valuation: each drug is a name + value line and a quantity / cost / price line that
   stays on ONE line (it takes the whole row width and shrinks a little on narrow phones). */

/* ---------------------------------------------------------------------- */
/* SELL, MENU, RECEIPTS (Hotel)                                           */
/* ---------------------------------------------------------------------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; -webkit-overflow-scrolling: touch; }
.chipbtn { flex: 0 0 auto; border: 1.5px solid var(--line); background: #fff; border-radius: 3px; padding: 8px 14px; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--ink); }
.chipbtn.active { background: var(--green); color: #fff; border-color: var(--green); }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.pos-tile { position: relative; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 12px 10px; min-height: 84px;
  display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-sm); font: inherit; color: var(--ink); }
.pos-tile:active { transform: scale(0.97); }
.pos-tile .pn { font-weight: 700; font-size: 14px; line-height: 1.25; }
.pos-tile .pp { font-size: 13px; font-weight: 700; color: var(--green); margin-top: 6px; }
.pos-tile .qty-badge { position: absolute; top: -7px; right: -7px; min-width: 24px; height: 24px; border-radius: 3px; background: var(--amber); color: #241A03;
  font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.pos-tile.sold { opacity: 0.6; background: #F1EEEA; }
.pos-tile.sold .pp { color: var(--red); }
.pos-tile.selected { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-light); }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button { width: 34px; height: 34px; border-radius: 4px; border: 1px solid var(--line); background: #fff; font-size: 18px; font-weight: 800; color: var(--ink); }
.stepper span { min-width: 24px; text-align: center; font-weight: 800; }
.seg3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.seg3 button { padding: 12px 8px; border-radius: 4px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-weight: 700; color: var(--ink); font-size: 14px; }
.seg3 button.active { border-color: var(--green); background: var(--green-light); color: var(--green); }
.quick-cash { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.quick-cash button { padding: 7px 12px; border-radius: 3px; border: 1px solid var(--line); background: #fff; font: inherit; font-weight: 700; font-size: 13px; color: var(--ink); }
.change-box { margin-top: 8px; padding: 10px 12px; border-radius: 4px; background: var(--green-light); font-weight: 800; color: var(--green); }
@media (min-width: 860px) { .cart-bar { left: calc(var(--sidebar-w, 216px) + 24px); right: 24px; bottom: 20px; max-width: 520px; } }

/* The receipt slip: used on screen (preview) and on paper (printArea). */
.rcpt { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; color: #000; background: #fff; font-size: 12.5px; line-height: 1.4; }
.rcpt-view { border: 1px dashed #999; border-radius: 4px; padding: 14px 12px; max-width: 340px; margin: 0 auto; }
.rc-center { text-align: center; }
.rc-name { font-size: 16px; font-weight: 800; margin-bottom: 2px; }
.rc-stamp { font-weight: 800; font-size: 15px; border: 2px solid #000; display: inline-block; padding: 1px 8px; margin-bottom: 6px; letter-spacing: 1px; }
.rc-line { border-top: 1px dashed #000; margin: 7px 0; }
.rc-row { display: flex; justify-content: space-between; gap: 8px; }
.rc-b { font-weight: 800; font-size: 14px; }
.rc-item { margin-top: 3px; }
.rc-small { font-size: 10px; margin-top: 4px; }
@media print {
  #printArea.rcpt-print { padding: 2mm 3mm; font-size: 12px; }
  #printArea.rcpt-58 { width: 58mm; }
  #printArea.rcpt-80 { width: 80mm; }
}

/* ---------------------------------------------------------------------- */
/* ORDERS BOARD, KITCHEN, DELIVERIES (Hotel)                              */
/* ---------------------------------------------------------------------- */
.nbadge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 3px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; align-items: center; justify-content: center; line-height: 1; }
.navbar button { position: relative; }
.navbar button .nbadge { position: absolute; top: 4px; left: calc(50% + 6px); }
.nd-row .nbadge { margin-left: auto; }
@media (min-width: 860px) { .navbar button .nbadge { top: 50%; left: auto; right: 12px; transform: translateY(-50%); } }
.board { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .board { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; } }
.bcol-empty { padding: 8px 2px; color: var(--ink); }
.ocard { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.ocard.st-pending { border-left-color: var(--red); background: #FFF8F6; }
.ocard.st-confirmed, .ocard.st-preparing { border-left-color: var(--amber); }
.ocard.st-ready { border-left-color: var(--green); }
.ocard.st-out_for_delivery { border-left-color: #1F5FA8; }
.oc-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: pointer; }
.oc-body { margin: 6px 0; font-size: 14px; cursor: pointer; }
.oc-items { margin: 3px 0; font-weight: 600; }
.oc-note { margin-top: 4px; padding: 5px 8px; border-radius: 4px; background: var(--amber-light); color: var(--amber-ink); font-weight: 600; font-size: 13px; }
.oc-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.oc-actions select { padding: 7px 8px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 13px; background: #fff; color: var(--ink); max-width: 150px; }
.kgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.kcard { background: #fff; border: 2px solid var(--line); border-radius: 6px; padding: 14px; display: grid; gap: 8px; }
.kcard.cooking { border-color: var(--amber); background: #FFFAEB; }
.kc-top { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.kc-items { font-size: 19px; line-height: 1.45; }
.kcard .btn { min-height: 50px; font-size: 17px; }

/* ---------------------------------------------------------------------- */
/* MONEY OUT, STOCK, WHO OWES ME (Hotel)                                  */
/* ---------------------------------------------------------------------- */
.bar { height: 8px; border-radius: 3px; background: #EFEDEA; margin-top: 4px; overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 3px; background: var(--amber); }

/* ====================================================================== */
/* HOTEL-SITE SKIN (v0.5.0)                                                */
/* Same fonts and look as the Hotel Delite / Legacy Star websites:         */
/* Playfair Display headings, Raleway capital labels and buttons, Inter    */
/* text; forest green, leaf green and lime; sharp 2-6px corners; 4px lime  */
/* top border on cards. This block comes last on purpose: it re-skins the  */
/* components above without touching their structure.                      */
/* ====================================================================== */
body { font-family: var(--text); font-size: 15px; line-height: 1.5; background: var(--ivory); }
h1, h2, h3, .auth-title, .dlg-title { font-family: var(--display); font-weight: 600; color: var(--ink); letter-spacing: 0; }
h2 { font-size: 22px; line-height: 1.2; }
h3 { font-size: 18px; }.section-title,
.kpi .label,
.badge,
.chipbtn,
.btn,
.nd-grp,
.nd-head,
.seg3 button,
.field label,
.nbadge,
.quick-cash button,
.mi-btn,
.page-sub,
.menu-count,
.sp-title { font-family: var(--label); }
.section-title { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--ink); margin: 22px 0 10px; }
.tiny, .hint, .meta { font-family: var(--text); }

/* ---- Page header used by Menu and Sell ---- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.page-title { margin: 0; font-size: 28px; line-height: 1.1; }
.page-sub { margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.report-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.report-head h2 { font-size: 26px; line-height: 1.1; }

/* ---- Buttons: Raleway capitals, 2px corners, lime primary ---- */
.btn {
  min-height: 46px; padding: 0 18px; border-radius: 2px; border: 1.5px solid transparent;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
}
.btn.primary { background: var(--lime); color: var(--forest); box-shadow: none; border-color: var(--lime); }
.btn.primary:not(:disabled):hover { background: var(--lime-2); border-color: var(--lime-2); filter: none; }
.btn.secondary { background: var(--mist); color: var(--forest); border-color: var(--mist); }
.btn.ghost { background: #fff; color: var(--forest); border-color: #9DB0A1; }
.btn.danger { background: var(--red-light); color: var(--red); border-color: #E7C3B1; }
.btn.small { min-height: 38px; padding: 0 14px; font-size: 11.5px; }
.btn:not(:disabled):hover { filter: none; }
.btn.ghost:not(:disabled):hover, .btn.secondary:not(:disabled):hover { border-color: var(--leaf); }
.btn:focus-visible, .chipbtn:focus-visible, .pos-tile:focus-visible, .mi-btn:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }
.btn svg { flex: none; }

/* ---- Fields ---- */
.field label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  min-height: 46px; padding: 10px 12px; border: 1.5px solid #9DB0A1; border-radius: 3px; background: #fff;
  font-family: var(--text); font-size: 15px; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--leaf); outline-offset: 0; border-color: var(--leaf); box-shadow: none; }
.field input::placeholder { color: var(--ink); opacity: .55; }

/* ---- Cards ---- */
.card { border: 1px solid var(--line); border-top: 4px solid var(--lime); border-radius: 6px; padding: 16px; margin-bottom: 14px; box-shadow: none; }
.card.empty { border-top-color: var(--line); }
.list-row { padding: 12px 0; }
.list-row .name { font-weight: 600; }
.list-row .meta { font-size: 12.5px; }
.badge { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 3px; }
.badge.muted { background: var(--mist); color: var(--forest); }

/* ---- Summary tiles: coloured top edge, no side bars ---- */
.kpi { border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: 6px; padding: 14px 16px; box-shadow: none; }
.kpi .label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.kpi .value { font-family: var(--display); font-size: 28px; font-weight: 600; letter-spacing: 0; margin-top: 6px; }
.kpi.t-green   { background: var(--mist); border-color: #BCD3BF; border-top-color: var(--leaf); }
.kpi.t-orange  { background: #FBEFE8; border-color: #EBCDBB; border-top-color: var(--red); }
.kpi.t-red     { background: #FBEFE8; border-color: #EBCDBB; border-top-color: var(--red); }
.kpi.t-amber   { background: var(--amber-light); border-color: #E8D49A; border-top-color: #C99A0B; }
.kpi.t-neutral { background: #fff; border-color: var(--line); border-top-color: var(--forest); }.kpi.t-green .label { color: var(--leaf-d); }
.kpi.t-orange .label, .kpi.t-red .label { color: var(--red); }
.kpi.t-amber .label { color: var(--amber-ink); }
.kpi.t-neutral .label { color: var(--ink); }
.kpi.t-orange .value, .kpi.t-red .value { color: var(--red); }
.kpi.t-amber .value { color: var(--amber-ink); }

/* ---- Home: cards that carry inline tints get the same edge ---- */
.card[style*="FFF6DD"] { border-top-color: #C99A0B !important; border-color: #E8D49A !important; }
.card[style*="var(--green-light)"] { background: var(--forest) !important; border-color: var(--forest) !important; border-top-color: var(--lime) !important; color: #fff; }
.card[style*="var(--green-light)"] h2, .card[style*="var(--green-light)"] b, .card[style*="var(--green-light)"] .tiny { color: #fff !important; }
.card[style*="var(--green-light)"] h2 { font-size: 24px; }

/* ---- Top bar ---- */
.topbar { background: var(--forest); border-bottom: 3px solid var(--lime); box-shadow: none; }
.topbar .brand { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: 0; }
.topbar .sub { font-family: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.topbar button { border-radius: 2px; font-family: var(--label); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; background: transparent; border: 1.5px solid rgba(255,255,255,.35); }
.topbar button:hover { background: rgba(255,255,255,.12); }
.topbar .burgerbtn { border-radius: 2px; background: var(--forest-2); border: 0; width: 38px; height: 38px; }
.brand-badge { background: var(--forest-2); color: var(--lime); border-radius: 2px; box-shadow: none; }
.topbar-id .brand-badge { background: var(--forest-2); }

/* ---- Phone bottom bar & drawer ---- */
.navbar { background: var(--forest); border-top: 3px solid var(--lime); }
.navbar button { font-family: var(--label); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
@media (max-width: 859px) {
  .navbar button .ic3d { border-radius: 3px; box-shadow: none; background: rgba(255,255,255,.1); transform: none !important; }
  .navbar button.active .ic3d { background: var(--lime); box-shadow: none; }
  .navbar button.active { color: var(--lime); }
}
.navdrawer { background: var(--forest); border-radius: 0 6px 6px 0; }
.nd-chip { border-radius: 3px; box-shadow: none; background: rgba(255,255,255,.1); }
.nd-row { border-radius: 3px; font-size: 13px; font-weight: 600; color: #fff; }
.nd-row.active { background: rgba(166,214,60,.16); color: #fff; outline: 0; border-left: 3px solid var(--lime); }
.nd-row.active .nd-chip { background: var(--lime); box-shadow: none; }
.nd-grp { font-size: 10px; letter-spacing: .16em; color: var(--lime); }
.nbadge { background: var(--lime); color: var(--forest); border-radius: 3px; }

/* ---- Desktop sidebar & top strip ---- */
@media (min-width: 860px) {
  .navdrawer { background: var(--forest); box-shadow: none; border-radius: 0; }
  .nd-brand { padding: 18px 16px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .nd-bname { font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.2; }
  .nd-head { color: var(--lime); }
  .nd-row { padding: 7px 8px; border-left: 3px solid transparent; font-size: 13.5px; }
  .nd-row:hover { background: rgba(255,255,255,.08); }
  .nd-row.active { background: rgba(166,214,60,.16); border-left-color: var(--lime); }
  .nd-row.active .nd-chip { background: var(--lime); box-shadow: none; }
  .nd-chip { width: 30px; height: 30px; font-size: 15px; }
  .topbar { background: #fff; border-bottom: 1px solid var(--line); box-shadow: none; padding-top: 10px; padding-bottom: 10px; }
  .topbar .sub { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
  .topbar button { background: #fff; color: var(--forest); border: 1.5px solid #9DB0A1; }
  .topbar button:hover { border-color: var(--leaf); background: var(--mist); }
  .content { max-width: 1240px; padding: 24px 32px 56px; }
}

/* ---- Chips (filters) ---- */
.chips { gap: 6px; padding: 2px 0 12px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chipbtn { border: 1.5px solid var(--line); border-radius: 3px; background: #fff; padding: 0 14px; min-height: 38px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--forest); }
.chipbtn.active { background: var(--forest); color: #fff; border-color: var(--forest); box-shadow: inset 0 -3px 0 var(--lime); }

/* ---- Sheets & dialogs ---- */
.sheet { border: 0; border-top: 4px solid var(--lime); border-radius: 6px; box-shadow: var(--shadow-lg); padding: 20px 18px 22px; }
.sheet-head h2 { font-size: 22px; }
.dlg { border-radius: 6px; border-top: 4px solid var(--lime); }
.seg3 button { border-radius: 3px; min-height: 46px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.seg3 button.active { background: var(--forest); color: #fff; border-color: var(--forest); }
.stepper button { border-radius: 3px; width: 40px; height: 40px; background: var(--mist); border: 1px solid #BCD3BF; color: var(--forest); }
.quick-cash button { border-radius: 3px; min-height: 38px; letter-spacing: .06em; }
.change-box { border-radius: 3px; background: var(--mist); color: var(--forest); }

/* ====================================================================== */
/* MENU: every item stands on its own card, as many as will fit            */
/* ====================================================================== */
.menu-tools { display: grid; gap: 4px; margin-bottom: 4px; }
.menu-tools .field { margin: 0; max-width: 460px; }
.menu-group { margin: 6px 0 22px; }
.menu-group-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--forest); }
.menu-group-head h3 { margin: 0; font-size: 21px; line-height: 1.2; }
.menu-count { min-width: 26px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--lime); color: var(--forest); font-size: 11.5px; font-weight: 800; }
.menu-rename { margin-left: auto; font-family: var(--label); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--leaf-d); text-decoration: underline; text-underline-offset: 3px; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px) { .menu-grid { grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 12px; } }
.mi { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--leaf); border-radius: 4px; padding: 10px 10px 10px 12px; min-width: 0; }
.mi-top { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mi-name { font-weight: 600; font-size: 14.5px; line-height: 1.25; overflow-wrap: anywhere; }
.mi-price { font-family: var(--label); font-weight: 800; font-size: 14px; color: var(--leaf-d); letter-spacing: .02em; }
.mi-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.mi-foot { display: flex; gap: 6px; margin-top: auto; }
.mi-btn { flex: 1; min-height: 34px; padding: 0 6px; border: 1.5px solid #9DB0A1; border-radius: 2px; background: #fff; color: var(--forest); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.mi-btn:hover { border-color: var(--leaf); background: var(--mist); }
.mi-btn.on { background: var(--lime); border-color: var(--lime); }
.mi.is-sold { border-left-color: var(--red); background: #FDF6F1; }
.mi.is-hidden { border-left-color: #9DB0A1; border-style: dashed; border-left-style: solid; }
.mi.is-hidden .mi-name { text-decoration: line-through; }

/* ====================================================================== */
/* SELL: denser tiles, and the order panel beside them on wide screens     */
/* ====================================================================== */
.sell-tools { display: flex; gap: 8px; margin-bottom: 10px; }
.sell-tools .field { flex: 1; margin: 0; min-width: 0; }
.pos-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pos-tile { min-height: 76px; padding: 10px 10px 9px 12px; border: 1px solid var(--line); border-left: 4px solid var(--leaf); border-radius: 4px; box-shadow: none; background: #fff; }
.pos-tile .pn { font-size: 14px; font-weight: 600; line-height: 1.25; }
.pos-tile .pp { font-family: var(--label); font-size: 13px; font-weight: 800; color: var(--leaf-d); margin-top: 4px; }
.pos-tile:hover { border-color: var(--leaf); }
.pos-tile.selected { background: var(--mist); border-color: var(--forest); border-left-color: var(--lime); box-shadow: inset 0 0 0 1px var(--forest); }
.pos-tile .qty-badge { top: -8px; right: -6px; min-width: 24px; height: 24px; border-radius: 3px; background: var(--lime); color: var(--forest); font-family: var(--label); font-weight: 800; box-shadow: 0 0 0 2px #fff; }
.pos-tile.sold { background: #FDF6F1; opacity: 1; border-left-color: var(--red); }
.pos-tile.sold .pn { text-decoration: line-through; }
.pos-tile.sold .pp { color: var(--red); }
.sell-panel { display: none; }
.cart-bar { background: var(--forest); border: 0; border-top: 3px solid var(--lime); border-radius: 4px; box-shadow: var(--shadow-lg); }
.cart-bar .cb-n { background: var(--lime); color: var(--forest); border-radius: 3px; }
.cart-bar .cb-txt { font-family: var(--display); font-size: 20px; font-weight: 600; }
.cart-bar .cb-go { background: var(--lime); color: var(--forest); border-radius: 2px; font-family: var(--label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; padding: 9px 14px; }
@media (min-width: 1000px) {
  .sell-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
  .sell-panel { display: block; position: sticky; top: 84px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--lime); border-radius: 6px; padding: 16px; max-height: calc(100vh - 110px); overflow-y: auto; }
  .cart-bar { display: none; }
  .content.has-cart-bar { padding-bottom: 56px; }
  .pos-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
.sp-title { margin: 0 0 10px; font-family: var(--display); font-size: 21px; font-weight: 600; display: flex; align-items: center; gap: 8px; letter-spacing: 0; }
.sp-n { font-family: var(--label); font-size: 12px; font-weight: 800; background: var(--lime); color: var(--forest); border-radius: 3px; padding: 2px 8px; }
.sp-empty { padding: 28px 8px; text-align: center; font-weight: 600; border: 1.5px dashed #9DB0A1; border-radius: 4px; }
.sp-lines { margin-bottom: 8px; }
.sp-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 74px; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sp-name { font-weight: 600; font-size: 14px; line-height: 1.25; }
.sp-each { font-size: 12px; font-weight: 400; margin-top: 2px; }
.sp-sum { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.sp-line .stepper { gap: 4px; }
.sp-line .stepper button { width: 32px; height: 32px; font-size: 16px; }
.sp-total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 14px; }
.sp-total span { font-family: var(--label); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sp-total b { font-family: var(--display); font-size: 28px; font-weight: 600; }

/* ====================================================================== */
/* ORDERS BOARD, KITCHEN, DELIVERIES                                       */
/* ====================================================================== */.ocard,
.kcard { border-radius: 6px; box-shadow: none; }.ocard h3 { font-family: var(--display); font-weight: 600; }

/* ---- Toasts, progress, misc ---- */
.toast { border-radius: 3px; font-family: var(--text); }
.toast.good { background: var(--forest); border-left: 4px solid var(--lime); }
.empty { color: var(--ink); font-weight: 500; }

/* ====================================================================== */
/* DESKTOP LAYOUTS: lists and cards use the width instead of stretching    */
/* ====================================================================== */
.home-top { display: grid; gap: 0 14px; }
.home-cols { display: grid; gap: 0 20px; align-items: start; }
.home-cols > div:empty { display: none; }
@media (min-width: 860px) { .home-top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .home-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
#owesRows { display: grid; gap: 0 16px; }
@media (min-width: 900px) { #owesRows { grid-template-columns: 1fr 1fr; } }
#owesRows > .card { margin-bottom: 14px; }
@media (min-width: 1000px) {
  #content .card:has(> .list-row) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  #content .card:has(> .list-row) > .list-row:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  #content .card:has(> .list-row) > .tiny, #content .card:has(> .list-row) > .section-title { grid-column: 1 / -1; }
}
#content[data-tab="settings"] { max-width: 860px; margin-right: auto; }
@media (min-width: 860px) { #content[data-tab="settings"] { margin-left: var(--sidebar-w); } }


/* ---- Milestone 5: Reports and Close the day ---- */
.rp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rp-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.ch-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 8px; }
.ch-key.in, .ch-in { background: var(--leaf); }
.ch-key.out, .ch-out { background: var(--lime); }
.ch { display: flex; align-items: stretch; gap: 3px; height: 150px; }
.ch-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.ch-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 1px; border-bottom: 1px solid var(--line); }
.ch-bars span { flex: 1 1 0; max-width: 14px; min-height: 0; border-radius: 2px 2px 0 0; }
.ch-hr { background: var(--forest); }
.ch-lab { height: 16px; font-size: 10.5px; text-align: center; overflow: hidden; white-space: nowrap; }
.ch-hours { height: 110px; }
.ch-hours .ch-bars span { max-width: 22px; }
.rp-more { margin-top: 10px; }
.rp-more summary { cursor: pointer; font-weight: 700; font-size: 13px; padding: 6px 0; }
.rp-table { font-size: 13.5px; }
.rp-row { display: grid; grid-template-columns: 1.4fr .6fr 1fr 1fr; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.rp-row span:nth-child(n+2) { text-align: right; }
.rp-row-h { font-family: 'Raleway', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.rp-bar { margin-top: 12px; }
.rp-bar-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.rp-bar-top span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rp-facts b { display: block; font-family: 'Playfair Display', serif; font-size: 20px; }
.rp-facts span { font-size: 13px; }
.rp-custom { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.rp-custom .field { margin: 0; }
.rp-dl { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-cols { display: block; }
@media (min-width: 1000px) {
  .rp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start; }
  .ch { height: 190px; }
}
.cd-fig { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cd-fig small { display: block; font-size: 12px; }
.cd-fig b { white-space: nowrap; }
.cd-total { font-weight: 700; }
.cd-total b { font-family: 'Playfair Display', serif; font-size: 20px; }
.cd-diff { margin: 6px 0 12px; font-weight: 800; font-size: 16px; }
.cd-diff.good { color: var(--leaf-d); }
.cd-diff.bad { color: var(--red); }
.cd-diff.warn { color: var(--amber-ink); }
.cd-done-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
#content[data-tab="closeday"], #content[data-tab="reports"] { max-width: 980px; }
#content[data-tab="reports"] .kpi .value { font-size: clamp(20px, 6.2vw, 30px); white-space: nowrap; }
.zone-row { flex-wrap: wrap; }
.zone-row > div:first-child { flex: 1 1 100%; }
.zone-row > input { flex: 0 0 90px; }
@media (min-width: 560px) { .zone-row { flex-wrap: nowrap; } .zone-row > div:first-child { flex: 1 1 0; } }
#content a:not(.btn):not(.chipbtn) { color: var(--leaf-d); }

/* ====================================================================== */
/* AUTH: the "menu board" sign-in. A forest header (a left panel on       */
/* desktop) with the wordmark and a little menu card with dotted price    */
/* lines; the form is a plain white card with the lime top edge.          */
/* ====================================================================== */
.auth-wrap { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--ivory); }
.auth-bg-fill { display: none; }
.auth-brand {
  position: relative; overflow: hidden; color: #fff; text-align: left;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 20px 22px; border-bottom: 4px solid var(--lime);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 16px), linear-gradient(170deg, var(--forest-2) 0%, var(--forest) 60%, var(--forest-3) 100%);
}
.auth-brand-top { max-width: 440px; margin: 0 auto; }
.auth-hero-id { display: flex; align-items: center; gap: 14px; }
.auth-hero-mark { flex: none; width: 54px; height: 54px; display: grid; place-items: center; border: 2px solid var(--lime); border-radius: 3px; }
.auth-hero-mark .brand-badge { background: transparent; color: var(--lime); box-shadow: none; }
.auth-hero-word { margin: 0; font-family: var(--display); font-weight: 600; font-size: 40px; line-height: 1; color: #fff; letter-spacing: 0; }
.auth-hero-tag { margin: 5px 0 0; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 16px; color: var(--lime-2); }
.auth-menu { display: none; position: relative; margin-top: 22px; padding: 20px 22px 16px; border-radius: 3px; background: var(--ivory); color: var(--ink); box-shadow: 0 18px 34px -14px rgba(0,0,0,.6); }
.auth-menu::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--line); border-radius: 2px; pointer-events: none; }
.auth-menu h3 { margin: 0 0 8px; text-align: center; font-family: var(--label); font-size: 11px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--forest); }
.auth-menu ul { list-style: none; margin: 0; padding: 0; }
.auth-menu li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 15.5px; }
.auth-menu li i { flex: 1; border-bottom: 2px dotted #9DB0A1; transform: translateY(-3px); }
.auth-menu li b { font-family: var(--display); font-weight: 600; font-size: 17px; }
.auth-menu p { margin: 8px 0 0; text-align: center; font-family: var(--display); font-style: italic; font-size: 13.5px; }
/* On a phone the menu card only shows on the log-in step and only when there is room. */
@media (min-height: 780px) { .auth-wrap[data-mode="login"] .auth-menu { display: block; } }

.auth-form-col { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 20px 16px 40px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-title { display: block; margin: 0 0 14px; font-size: 26px; }
#authBody .field label { font-family: var(--label); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
#authBody .field input { min-height: 46px; border: 1.5px solid #9DB0A1; border-radius: 3px; background: #fff; color: var(--ink); }
#authBody .field input:focus { border-color: var(--leaf); outline: 3px solid var(--leaf); box-shadow: none; }
.auth-toggle { display: grid; gap: 10px; margin-top: 18px; text-align: center; font-size: 15px; color: var(--ink); }
.auth-toggle a { color: var(--forest); text-decoration: none; }
.auth-toggle a b { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.auth-sep { display: none; }

@media (min-width: 860px) {
  .auth-wrap { flex-direction: row; }
  .auth-brand { flex: 0 0 46%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 48px; border-bottom: 0; border-right: 4px solid var(--lime); }
  .auth-brand-top { width: 100%; }
  .auth-hero-id { flex-direction: column; align-items: flex-start; gap: 18px; }
  .auth-hero-mark { width: 72px; height: 72px; }
  .auth-hero-mark .brand-badge { transform: scale(1.4); }
  .auth-hero-word { font-size: 68px; }
  .auth-hero-tag { font-size: 20px; }
  .auth-menu, .auth-wrap[data-mode] .auth-menu { display: block; margin-top: 34px; padding: 26px 28px 20px; }
  .auth-menu li { font-size: 17px; padding: 7px 0; }
  .auth-form-col { align-items: center; padding: 40px; }
  .auth-card { width: 440px; }
}

/* Sign-in hero: logo, name and tagline centred */
.auth-brand-top { margin-left: auto; margin-right: auto; }
.auth-hero-id { flex-direction: column !important; align-items: center !important; text-align: center; gap: 12px !important; }
.auth-hero-id > div { text-align: center; }
.auth-hero-mark { margin: 0 auto; }
@media (min-width: 860px) { .auth-brand-top { max-width: 440px; } .auth-hero-id { gap: 18px !important; } }