/* ============================================================================
 * Crane Tea — SHARED APP SHELL
 *
 * This file is the "one app" illusion: the design-system tokens plus the chrome
 * (pinned header, period row, Net tick, sub-nav strip, bottom action + tab bar,
 * and the floating-card primitives) that must look IDENTICAL across the two
 * separately deployed services — ct-store-dashboard (Doanh thu · Kiểm kho) and
 * ct-order-portal (Đặt hàng).
 *
 * PORTAL TASK: copy this file VERBATIM into ct-order-portal/app/static/ and link
 * it before the portal's own stylesheet. The markup contract is documented in
 * docs/shared-shell.md. Do not fork the tokens or the chrome rules — a change
 * here is a change both services take together, or the illusion breaks.
 *
 * Tokens are lifted verbatim from the bound Crane Tea Design System
 * (design/_ds/.../tokens/*.css, Sept 2026 revision). Values are authoritative;
 * take colours/type/spacing from here, never from a screenshot.
 * ========================================================================== */

@import url('fonts.css');

/* ---------------------------------------------------------------- tokens */
:root{
  /* Tea green — the ground, and the colour of ACTUAL revenue */
  --green-900:#062b1c;
  --green-800:#083a25;
  --green-700:#0a5236;
  --green-600:#126943;
  --green-500:#2f8f5f;
  --green-300:#8fc4a6;

  /* Brand gold — the crane mark, and the colour of the TARGET */
  --gold-600:#c99518;
  --gold-500:#e8b23a;
  --gold-400:#f2ca69;
  --gold-300:#f7dd9d;

  /* Cream / paper — warmed */
  --cream-100:#fbf7ed;
  --cream-200:#f5efe0;
  --mint-50:#f1f7f3;
  --white:#ffffff;

  /* Ink — green-cast, never pure grey */
  --ink-900:#0d2318;
  --ink-700:#3d5245;
  --ink-600:#4f6558;
  --ink-500:#647a6c;
  --ink-400:#8ba396;

  /* Signal */
  --ok:#6fdaa2;
  --ok-ink:#0f7a4d;
  --warn:#96591f;
  --danger:#cf3f0a;
  --danger-soft:#ffb39c;
  --blue:#2c6fd1;

  /* Chart / channel palette — fixed per channel, never invented */
  --chart-dine-in:#0a5236;
  --chart-takeaway:#2f8f5f;
  --chart-grabfood:#c99518;
  --chart-shopeefood:#f2ca69;
  --chart-xanhsm:#8fc4a6;
  --chart-befood:#c5d8cc;
  --chart-momo:#8ba396;
  --chart-gojek:#b4c8bd;
  --chart-fallback:#b4c8bd;
  --chart-compare:#7d6b4f;
  --chart-live:#2f8f5f;
  --chart-grid:rgba(10,82,54,.07);

  /* Type */
  --font-sans:'Be Vietnam Pro',system-ui,sans-serif;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --text-display:40px;
  --text-figure:28px;
  --text-figure-sm:20px;
  --text-title:15px;
  --text-body:13px;
  --text-label:12px;
  --text-caption:11px;
  --text-brand:12px;
  --leading-tight:1.1;
  --leading-snug:1.35;
  --leading-relaxed:1.55;
  --tracking-display:-.03em;
  --tracking-figure:-.02em;
  --tracking-brand:.18em;
  --tracking-caps:.06em;
  --numeric-tabular:tabular-nums;

  /* Spacing */
  --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px; --space-5:12px;
  --space-6:16px; --space-7:20px; --space-8:24px; --space-9:32px;
  --gutter-page:14px;
  --gap-card:12px;
  --gap-section:20px;
  --gap-kpi:10px;
  --pad-card:16px;
  --pad-header:12px 14px 10px;
  --h-tabbar:58px;
  --h-actionbar:68px;
  --column-width:414px;
  --column-height:844px;
  --column-width-wide:560px;
  --tap-min:40px;
  --tap-min-lg:44px;
  --tap-pill:32px;

  /* Radii */
  --radius-phone:38px;
  --radius-card:20px;
  --radius-tile:18px;
  --radius-box:16px;
  --radius-inner:14px;
  --radius-control:14px;
  --radius-field:12px;
  --radius-chip:11px;
  --radius-tab:12px;
  --radius-swatch:7px;
  --radius-cell:3px;
  --radius-pill:999px;

  /* Elevation — brand-green tint, never black */
  --shadow-card:0 1px 2px rgba(6,43,28,.04),0 4px 12px rgba(6,43,28,.06);
  --shadow-raised:0 2px 4px rgba(6,43,28,.05),0 14px 30px rgba(6,43,28,.10);
  --shadow-pressed:0 1px 2px rgba(6,43,28,.08);
  --shadow-popover:0 18px 44px rgba(6,43,28,.24);
  --shadow-phone:0 30px 70px rgba(0,0,0,.45);
  --shadow-tabbar:0 -1px 0 rgba(6,43,28,.06),0 -10px 28px rgba(6,43,28,.10);
  --shadow-header:0 1px 0 rgba(6,43,28,.06),0 8px 20px rgba(6,43,28,.08);
  --border-card:1px solid rgba(10,82,54,.07);
  --border-field:1px solid rgba(10,82,54,.18);
  --border-list:1px solid rgba(10,82,54,.1);
  --rule-dashed:1px dashed rgba(10,82,54,.13);
  --rule-row:1px solid rgba(10,82,54,.06);
  --rule-total:1px solid rgba(10,82,54,.16);
  --rule-reference:1px dashed rgba(10,82,54,.26);
  --edge-gold:inset 3px 0 0 var(--gold-500);

  /* Motion */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.45,.05,.55,.95);
  --ease-spring:cubic-bezier(.34,1.36,.64,1);
  --press-scale:.97;
  --pulse-loading:1.1s;
  --pulse-live:2s;

  /* Semantic aliases — LOAD-BEARING colour rules:
     green = actual revenue · gold = the target · red = below · blue = above */
  --surface-page:var(--green-900);
  --surface-column:var(--cream-100);
  --surface-card:var(--white);
  --surface-card-dark:var(--green-700);
  --surface-header:var(--green-700);
  --surface-strip:var(--green-800);
  --surface-inset:var(--mint-50);
  --surface-inset-warm:var(--cream-200);
  --surface-sunken:rgba(0,0,0,.18);
  --surface-bar:rgba(251,247,237,.94);

  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-600);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-on-dark:#ffffff;
  --text-on-dark-muted:rgba(255,255,255,.66);
  --text-on-dark-faint:rgba(255,255,255,.48);
  --text-brand-gold:var(--gold-500);
  --text-link:var(--green-700);

  --measure-actual:var(--green-700);
  --measure-target:var(--gold-500);
  --measure-under:var(--danger);
  --measure-over:var(--blue);
  --measure-none:var(--ink-400);

  --status-ok:var(--ok-ink);
  --status-ok-fill:rgba(15,122,77,.1);
  --status-bad:var(--danger);
  --status-bad-fill:rgba(207,63,10,.1);
  --status-flat:var(--ink-400);
  --status-flat-fill:rgba(139,163,150,.14);

  --level-hit:var(--ok-ink);
  --level-near:var(--warn);
  --level-short:var(--danger);
  --level-over:var(--blue);
  --level-empty:var(--ink-400);

  --accent-selected:var(--gold-500);
  --accent-selected-ink:var(--green-700);
  --accent-selected-solid:var(--green-700);
  --accent-selected-solid-ink:#ffffff;

  --notice-gold-fill:rgba(232,178,58,.15);
  --notice-gold-border:1px solid rgba(232,178,58,.36);
  --notice-gold-ink:#f6e8c6;
  --notice-restated-fill:rgba(201,149,24,.17);
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--surface-page);
  color:var(--ink-900);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
/* The redesigned screens are full-bleed cream (the column IS the page); login,
 * error pages keep the older green-framed body in app.css.
 * The class selector beats app.css's bare `body{}`, so order does not matter. */
body.trang-app{ background:var(--surface-column); padding:0; display:block; }
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--green-500)}
[data-figure],table,tbody,th,td{font-variant-numeric:tabular-nums}

/* The phone column: authored at 414px, a device-like frame on desktop, full
 * bleed on a phone. It scrolls INSIDE itself so the chrome can pin. */
.ct-app{
  width:100%;
  max-width:var(--column-width);
  margin:0 auto;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--surface-column);
  color:var(--ink-900);
}
@media (min-width:600px){ .ct-app{ max-width:var(--column-width-wide); } }

/* =============================================================== HEADER === */
.ct-header{
  flex:none;
  position:sticky;
  top:0;
  z-index:5;
}
.ct-strip{
  background:var(--surface-header);
  padding:var(--pad-header);
  box-shadow:var(--shadow-header);
  position:relative;
  z-index:3;
}

/* row 1 — logo, stamp, store pill */
.ct-brand-row{ display:flex; align-items:center; gap:10px; min-height:var(--tap-min); }
.ct-brand-row > .chon-cua-hang{ flex:1; min-width:0; }
.ct-logo{ height:20px; width:auto; display:block; }
/* On cream there is no dark wordmark file: render CRANE TEA as gold type. */
.ct-wordmark{ font-size:var(--text-caption); font-weight:700; letter-spacing:var(--tracking-brand); color:var(--gold-500); white-space:nowrap; }
.ct-stamp{ font-size:var(--text-caption); font-weight:600; color:var(--text-on-dark-faint); white-space:nowrap; }
.ct-stamp.cu{ color:var(--danger-soft); }

.ct-store{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px 4px 5px; border-radius:var(--radius-pill);
  background:var(--surface-sunken); cursor:pointer; min-height:var(--tap-pill);
  border:0; font-family:inherit; color:#fff; max-width:62%;
}
.ct-store .ct-ct{
  width:20px; height:20px; border-radius:var(--radius-swatch); flex:none;
  background:var(--gold-500); color:var(--green-700);
  font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.ct-store .ct-store-name{ font-size:var(--text-label); font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ct-store .ct-caret{ color:var(--text-on-dark-faint); font-size:var(--text-caption); flex:none; }

/* row 2 — period pills (Doanh thu only) */
.ct-period-row{ margin-top:10px; display:flex; align-items:center; gap:8px; }
.ct-period-track{
  flex:1; min-width:0; display:flex; gap:2px;
  background:var(--surface-sunken); padding:3px; border-radius:var(--radius-tab);
  overflow-x:auto; scrollbar-width:none;
}
.ct-period-track::-webkit-scrollbar{ display:none; }
.ct-period{
  flex:1; padding:0 8px; min-height:var(--tap-pill); border-radius:var(--radius-pill);
  font-size:var(--text-label); font-weight:600; color:var(--text-on-dark-muted);
  background:transparent; display:flex; align-items:center; justify-content:center;
  white-space:nowrap; cursor:pointer; gap:5px; transition:background var(--dur-fast) var(--ease-out);
}
.ct-period.dang-chon{ background:var(--gold-500); color:var(--green-700); font-weight:700; }
/* The live period is a DIFFERENT SOURCE — a gold dot marks it so it never reads
   as another way of saying the settled numbers. */
.ct-period.truc-tiep .cham{ width:6px; height:6px; border-radius:var(--radius-pill); background:var(--gold-500); flex:none; }
.ct-period.truc-tiep.dang-chon .cham{ background:var(--green-700); }

/* row 3 — ONE date-range picker + Net tick (Doanh thu only). The native
 * <details> keeps it usable without JS; opening it pushes the sticky header
 * taller rather than laying an unreachable popover over the phone. */
.ct-daterow{ margin-top:8px; display:flex; align-items:flex-start; gap:8px; }
.ct-daterow.chi-net{ justify-content:flex-end; }
.ct-range-picker{ flex:1; min-width:0; }
.ct-range-picker > summary{
  list-style:none; cursor:pointer; min-height:var(--tap-pill); min-width:0;
  padding:4px 9px 4px 10px; border-radius:var(--radius-field);
  border:1px solid rgba(255,255,255,.22); background:var(--surface-sunken);
  color:#fff; display:flex; align-items:center; gap:8px;
}
.ct-range-picker > summary::-webkit-details-marker{ display:none; }
.ct-range-current{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ct-range-caption{
  font-size:9px; line-height:1.1; font-weight:600; color:var(--text-on-dark-faint);
}
.ct-range-value{
  margin-top:2px; min-width:0; overflow:hidden; text-overflow:ellipsis;
  font-size:var(--text-label); line-height:1.2; font-weight:600; color:#fff;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.ct-range-caret{
  flex:none; color:var(--text-on-dark-muted); font-size:var(--text-caption);
  transition:transform var(--dur-fast) var(--ease-out);
}
.ct-range-picker[open] .ct-range-caret{ transform:rotate(180deg); }
.ct-range-panel{
  margin-top:7px; padding:12px; border-radius:var(--radius-inner);
  background:var(--cream-100); color:var(--ink-900); box-shadow:var(--shadow-popover);
}
.ct-range-heading{ font-size:var(--text-label); font-weight:700; color:var(--ink-600); }
.ct-range-grid{
  margin-top:9px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px;
}
.ct-range-preset{
  min-width:0; min-height:36px; padding:0 8px; border-radius:var(--radius-field);
  border:var(--border-field); background:#fff; color:var(--green-700);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:var(--text-label); font-weight:600;
}
.ct-range-preset.dang-chon{ background:var(--green-700); border-color:var(--green-700); color:#fff; }
.ct-range-panel form{ margin-top:11px; min-width:0; }
.ct-range-fields{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:end; gap:6px; min-width:0;
}
.ct-range-field{ display:block; min-width:0; }
.ct-range-field > span{
  display:block; margin-bottom:3px; font-size:9.5px; font-weight:600; color:var(--ink-400);
}
.ct-range-field input{
  display:block; width:100%; min-width:0; max-width:100%; min-height:40px;
  padding:0 7px; border-radius:var(--radius-field); border:var(--border-field);
  background:#fff; color:var(--green-700); font:inherit; font-size:16px;
  font-variant-numeric:tabular-nums; outline:none;
}
.ct-range-field input:focus{ border-color:var(--green-700); }
.ct-range-arrow{ padding-bottom:11px; color:var(--ink-400); font-size:var(--text-label); }
.ct-range-apply{
  margin-top:10px; width:100%; min-height:40px; border:0;
  border-radius:var(--radius-control); background:var(--green-700); color:#fff;
  font:inherit; font-size:var(--text-body); font-weight:700; cursor:pointer;
}
.ct-range-note{
  margin-top:8px; font-size:var(--text-caption); line-height:var(--leading-snug);
  color:var(--ink-400);
}
.ct-net{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px 5px 6px; border-radius:var(--radius-pill);
  background:var(--surface-sunken); color:var(--text-on-dark-muted);
  font-size:var(--text-label); font-weight:600; min-height:var(--tap-pill); cursor:pointer;
}
.ct-net .o{
  width:16px; height:16px; border-radius:5px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:10px; line-height:1;
  border:1.5px solid rgba(255,255,255,.45); color:transparent;
}
.ct-net.dang-bat{ background:var(--gold-500); color:var(--green-700); }
.ct-net.dang-bat .o{ background:var(--green-700); border-color:var(--green-700); color:var(--gold-500); }

.ct-store.nut-tinh{ cursor:default; }
.ct-logout{
  flex:none; display:inline-flex; align-items:center; min-height:var(--tap-pill);
  padding:4px 8px; border-radius:var(--radius-pill); background:var(--surface-sunken);
  color:var(--text-on-dark-muted); font-size:var(--text-caption); font-weight:600;
  white-space:nowrap;
}

/* ---- the store switcher (a <details> whose summary is the brand row) ----
 * Shared chrome: the portal has the same store pill. `tim-cua-hang.js` adds the
 * live filter + auto-collapse; with JS off the <details> still opens and picks. */
.chon-cua-hang{ }
.chon-cua-hang > summary{ list-style:none; cursor:pointer; }
.chon-cua-hang > summary::-webkit-details-marker{ display:none; }
.chon-cua-hang[open] .ct-caret{ transform:rotate(180deg); }
.khung-cua-hang{
  margin-top:10px; background:var(--white); border-radius:var(--radius-inner);
  padding:12px; box-shadow:var(--shadow-popover);
}
.khung-cua-hang .tieu-de{ display:flex; align-items:center; gap:6px; font-size:var(--text-label); font-weight:600; color:var(--ink-600); }
.dem-cua-hang{
  font-size:var(--text-caption); font-weight:700; color:var(--green-700);
  background:rgba(10,82,54,.1); border-radius:var(--radius-pill); padding:1px 7px;
}
.o-tim{
  margin-top:10px; width:100%; min-width:0; min-height:var(--tap-min-lg);
  padding:0 12px; border-radius:var(--radius-field); border:var(--border-field);
  background:#fff; font-family:inherit; font-size:16px; color:var(--green-700);
  -webkit-appearance:none; appearance:none;
}
.o-tim:focus{ outline:none; border-color:var(--green-700); }
.o-tim::placeholder{ color:var(--ink-400); font-size:var(--text-label); }
.danh-sach-cua-hang{
  margin-top:8px; max-height:320px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; border-radius:var(--radius-field); border:var(--border-list); background:#fff;
}
.danh-sach-cua-hang::-webkit-scrollbar{ width:4px; }
.danh-sach-cua-hang::-webkit-scrollbar-thumb{ background:rgba(10,82,54,.22); border-radius:2px; }
.dong-cua-hang{
  display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 12px;
  border-top:var(--rule-row); font-size:var(--text-body); color:var(--green-700); text-align:left;
}
.dong-cua-hang:first-child{ border-top:0; }
.dong-cua-hang .ten{ flex:1; min-width:0; font-weight:600; line-height:var(--leading-snug); }
.dong-cua-hang .phu{ flex:none; font-size:var(--text-caption); color:var(--ink-400); }
.dong-cua-hang.dang-chon{ background:var(--green-700); color:#fff; }
.dong-cua-hang.dang-chon .phu{ color:rgba(255,255,255,.7); }
.dong-cua-hang[hidden]{ display:none; }
.khong-thay{ margin-top:9px; font-size:var(--text-caption); color:var(--ink-400); text-align:center; }

/* sub-nav strip (every function) */
.ct-subnav{
  flex:none; background:var(--cream-100); padding:10px 14px;
  box-shadow:var(--shadow-header); position:relative; z-index:2;
  display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
}
.ct-subnav::-webkit-scrollbar{ display:none; }
.ct-subnav-pill{
  flex:none; padding:0 12px; min-height:var(--tap-min); display:flex; align-items:center;
  border-radius:var(--radius-pill); font-size:var(--text-label); font-weight:600;
  color:var(--ink-600); background:#fff; white-space:nowrap; cursor:pointer;
  box-shadow:var(--shadow-card); transition:background var(--dur-fast) var(--ease-out);
}
.ct-subnav-pill.dang-chon{ background:var(--green-700); color:#fff; font-weight:700; }
/* An admin-only page pill carries a faint gold edge so the fleet tools read as
   a different audience, not another store page. */
.ct-subnav-pill.quan-tri{ box-shadow:var(--shadow-card),var(--edge-gold); }

/* ================================================================ BODY === */
.ct-body{ flex:1 0 auto; }
.ct-page{ display:flex; flex-direction:column; gap:var(--gap-card); padding:14px 14px 4px; }
.ct-section-label{
  padding:0 2px; font-size:var(--text-caption); font-weight:700; text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--ink-500);
}

/* ====================================================== BOTTOM CHROME === */
.ct-bottom{ flex:none; position:sticky; bottom:0; z-index:5; }

.ct-actionbar{
  display:flex; align-items:center; gap:12px;
  background:var(--surface-bar); backdrop-filter:blur(12px);
  box-shadow:var(--shadow-tabbar); padding:10px 14px; min-height:var(--h-actionbar);
}
.ct-actionbar .grow{ flex:1; min-width:0; }
.ct-actionbar .tien-do-nho{
  display:block; margin-top:6px; height:6px; border-radius:var(--radius-pill);
  background:rgba(10,82,54,.08); overflow:hidden;
}
.ct-actionbar .tien-do-nho > i{ display:block; height:100%; border-radius:var(--radius-pill); background:var(--green-500); }
.ct-btn{
  flex:none; min-height:var(--tap-min-lg); padding:0 18px; border:none;
  border-radius:var(--radius-control); background:var(--green-700); color:#fff;
  font-family:inherit; font-size:var(--text-body); font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.ct-btn:active{ transform:scale(var(--press-scale)); background:var(--green-800); }
.ct-btn.vang{ background:var(--gold-500); color:var(--green-700); }
.ct-btn.vang:active{ background:var(--gold-400); }
.ct-btn.vien{ background:#fff; color:var(--green-700); border:var(--border-field); }

.ct-tabbar{
  display:flex; background:var(--surface-bar); backdrop-filter:blur(12px);
  box-shadow:var(--shadow-tabbar);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
}
.ct-tab{
  flex:1; min-height:var(--h-tabbar); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; border-radius:var(--radius-inner);
  cursor:pointer; background:transparent; color:var(--ink-500);
  transition:background var(--dur-fast) var(--ease-out);
}
.ct-tab .glyph{ font-size:18px; line-height:1; }
.ct-tab .nhan{ font-size:var(--text-caption); font-weight:600; }
.ct-tab.dang-chon{ background:var(--green-700); color:#fff; }
.ct-tab.dang-chon .nhan{ font-weight:700; }

/* Press feedback on every tappable chrome surface (no hover on touch). */
.ct-period:active,.ct-subnav-pill:active,.ct-tab:active,.ct-net:active,.ct-store:active{ transform:scale(var(--press-scale)); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* Print: the browser's own Ctrl-P. Chrome that only exists to navigate comes
 * off; the column loses its device frame so it does not print a grey band. */
@media print{
  body{ background:#fff; }
  .ct-app{ max-width:100%; }
  .ct-header,.ct-bottom{ position:static; box-shadow:none; }
  .ct-period-row,.ct-daterow,.ct-tabbar,.ct-actionbar,.ct-store .ct-caret{ display:none !important; }
}

/* Store acknowledgement count, shared by each function's QAQC navigation. */
.ct-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.35em;height:1.35em;padding:0 .3em;margin-left:.35em;border-radius:99px;background:#bd3434;color:#fff;font-size:11px;line-height:1;font-weight:700;vertical-align:middle}