/* ============================================================
   Titanium POS — owner panel (read only)
   ------------------------------------------------------------
   A light, card-led layout built mobile-first: the owner opens this
   on a phone far more often than at a desk. Wide screens get the same
   cards in a roomier grid rather than a different design, so there is
   one thing to maintain and it looks deliberate at every width.

   Dark mode is honoured because a phone in a dim stockroom will ask
   for it; every colour is a token so the two themes cannot drift.
   ============================================================ */
:root {
  --bg:#F1F3F7; --card:#FFFFFF; --card-2:#F7F8FB;
  --ink:#12141A; --ink-2:#5A6072; --ink-3:#8B92A6;
  --line:rgba(18,20,26,.08); --line-2:rgba(18,20,26,.14);

  --accent:#FF7A18; --accent-ink:#FFFFFF; --accent-soft:rgba(255,122,24,.12);
  --green:#22B573; --green-soft:rgba(34,181,115,.13);
  --red:#F0435A;   --red-soft:rgba(240,67,90,.12);
  --amber:#F5A524; --amber-soft:rgba(245,165,36,.14);
  --blue:#3E7BFA;  --blue-soft:rgba(62,123,250,.12);
  --violet:#8B5CF6; --violet-soft:rgba(139,92,246,.12);

  --r:14px; --r-lg:20px; --r-pill:999px;
  --shadow:0 1px 2px rgba(18,20,26,.04), 0 8px 24px rgba(18,20,26,.06);
  --shadow-lg:0 2px 6px rgba(18,20,26,.06), 0 18px 44px rgba(18,20,26,.10);
  --ui:'Segoe UI',system-ui,-apple-system,'Inter',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --safe:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg:#0C0D11; --card:#15171D; --card-2:#1B1E26;
    --ink:#F2F3F7; --ink-2:#9BA2B4; --ink-3:#6E7488;
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
    --accent-soft:rgba(255,122,24,.18);
    --green-soft:rgba(34,181,115,.18); --red-soft:rgba(240,67,90,.18);
    --amber-soft:rgba(245,165,36,.18); --blue-soft:rgba(62,123,250,.18);
    --violet-soft:rgba(139,92,246,.18);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34);
    --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --bg:#0C0D11; --card:#15171D; --card-2:#1B1E26;
  --ink:#F2F3F7; --ink-2:#9BA2B4; --ink-3:#6E7488;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --accent-soft:rgba(255,122,24,.18);
  --green-soft:rgba(34,181,115,.18); --red-soft:rgba(240,67,90,.18);
  --amber-soft:rgba(245,165,36,.18); --blue-soft:rgba(62,123,250,.18);
  --violet-soft:rgba(139,92,246,.18);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.5);
}

* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--ui); background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  /* the fixed tab bar must never sit on top of the last card */
  padding-bottom:calc(76px + var(--safe));
  overscroll-behavior-y:none;
}
@media (min-width:900px) { body { padding-bottom:32px; } }
a { color:inherit; text-decoration:none; }
.num, .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ---------------- page frame ---------------- */
.wrap { max-width:1180px; margin:0 auto; padding:18px 16px 8px; }
@media (min-width:900px) { .wrap { padding:26px 28px 8px; } }

/* ---------------- top bar ---------------- */
.top { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.top .hello { font-size:11px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--ink-3); }
.top h1 { font-size:25px; font-weight:800; letter-spacing:-.6px; line-height:1.15; }
@media (min-width:900px) { .top h1 { font-size:30px; } }
.top .av {
  margin-left:auto; width:46px; height:46px; border-radius:var(--r-pill); flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),#FFB25A);
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px;
  box-shadow:var(--shadow);
}

/* ---------------- sync banner ----------------
   Deliberately loud, and always directly under the title: every number on
   the page is only as trustworthy as this line. */
.sync {
  display:flex; align-items:center; gap:11px; padding:12px 14px; margin-bottom:16px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
}
.sync .dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--ink-3); }
.sync.live   .dot { background:var(--green); box-shadow:0 0 0 4px var(--green-soft); animation:pulse 2.4s ease-in-out infinite; }
.sync.recent .dot { background:var(--amber); box-shadow:0 0 0 4px var(--amber-soft); }
.sync.stale  .dot, .sync.never .dot { background:var(--red); box-shadow:0 0 0 4px var(--red-soft); }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.45 } }
.sync .txt { min-width:0; }
.sync b { display:block; font-size:13.5px; font-weight:700; }
.sync span { display:block; font-size:11.5px; color:var(--ink-3); }
.sync .when { margin-left:auto; text-align:right; font-size:11.5px; color:var(--ink-3); white-space:nowrap; }

/* ---------------- range picker ---------------- */
.range { position:relative; margin-bottom:16px; }
.range select {
  width:100%; height:52px; padding:0 44px 0 16px; font:inherit; font-weight:600; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); appearance:none; -webkit-appearance:none; cursor:pointer; outline:none;
}
.range select:focus-visible { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.range::after {
  content:""; position:absolute; right:18px; top:50%; width:9px; height:9px; pointer-events:none;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg); border-radius:1px;
}

/* ---------------- stat cards ---------------- */
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:16px; }
@media (min-width:700px) { .stats { grid-template-columns:repeat(4,1fr); } }
@media (min-width:900px) { .stats.six { grid-template-columns:repeat(6,1fr); } }

.stat {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 16px 14px; box-shadow:var(--shadow); position:relative; min-width:0;
}
.stat .k { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.stat .k b { font-size:12.5px; font-weight:700; color:var(--ink-2); letter-spacing:-.1px; }
.stat .ico {
  margin-left:auto; width:28px; height:28px; border-radius:9px; flex:0 0 auto;
  display:grid; place-items:center; font-size:13px; line-height:1;
}
.stat .v { font-size:26px; font-weight:800; letter-spacing:-1px; line-height:1.1; word-break:break-word; }
@media (min-width:700px) { .stat .v { font-size:24px; } }
.stat .d { font-size:11.5px; color:var(--ink-3); margin-top:5px; display:flex; align-items:center; gap:5px; }
.stat .d i { font-style:normal; font-weight:800; }
.stat .d i.up { color:var(--green); } .stat .d i.dn { color:var(--red); } .stat .d i.fl { color:var(--ink-3); }

.ico.g { background:var(--green-soft); color:var(--green); }
.ico.r { background:var(--red-soft);   color:var(--red); }
.ico.a { background:var(--amber-soft); color:var(--amber); }
.ico.b { background:var(--blue-soft);  color:var(--blue); }
.ico.v { background:var(--violet-soft);color:var(--violet); }
.ico.o { background:var(--accent-soft);color:var(--accent); }

/* the one hero figure a screen is really about */
.stat.hero { grid-column:1 / -1; background:linear-gradient(135deg,var(--accent),#FF9A45); border-color:transparent; }
.stat.hero .k b, .stat.hero .v, .stat.hero .d { color:#fff; }
.stat.hero .d { opacity:.9; }
.stat.hero .ico { background:rgba(255,255,255,.22); color:#fff; }
@media (min-width:700px) { .stat.hero { grid-column:span 2; } }

/* ---------------- cards ---------------- */
.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden;
}
.card > .hd { padding:16px 18px 12px; display:flex; align-items:flex-start; gap:12px; }
.card > .hd .eyebrow { font-size:10.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--ink-3); }
.card > .hd h2 { font-size:18px; font-weight:800; letter-spacing:-.4px; margin-top:1px; }
.card > .hd .sub { font-size:12.5px; color:var(--ink-3); margin-top:3px; }
.card > .hd .side { margin-left:auto; text-align:right; font-size:12px; color:var(--ink-3); white-space:nowrap; }
.card > .bd { padding:0 18px 18px; }
.card > .bd.flush { padding:0 0 6px; }
.grid2 { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:900px) { .grid2 { grid-template-columns:1fr 1fr; } }

/* ---------------- list rows (the "referrals" pattern) ---------------- */
.rows { display:flex; flex-direction:column; }
.rw { display:flex; align-items:center; gap:12px; padding:12px 18px; border-top:1px solid var(--line); min-width:0; }
.rw:first-child { border-top:0; }
.rw .bug {
  width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center;
  font-weight:800; font-size:13px; background:var(--card-2); color:var(--ink-2);
}
.rw .t { min-width:0; flex:1 1 auto; }
.rw .t b { display:block; font-size:14px; font-weight:700; letter-spacing:-.2px;
           white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rw .t span { display:block; font-size:11.5px; color:var(--ink-3);
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rw .r { text-align:right; flex:0 0 auto; }
.rw .r b { display:block; font-size:14px; font-weight:800; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.rw .r span { display:block; font-size:11px; color:var(--ink-3); }
.rw .r b.g { color:var(--green); } .rw .r b.r { color:var(--red); }

/* proportion bar under a row */
.meter { height:5px; border-radius:var(--r-pill); background:var(--card-2); overflow:hidden; margin-top:7px; }
.meter i { display:block; height:100%; border-radius:var(--r-pill); background:var(--accent); }
.meter i.g { background:var(--green); } .meter i.r { background:var(--red); }
.meter i.b { background:var(--blue); } .meter i.v { background:var(--violet); }

/* ---------------- charts ---------------- */
.chart { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.chart svg { display:block; width:100%; height:auto; min-width:280px; }

/* ---------------- tables ----------------
   Wide tables scroll inside their own box; the page itself never scrolls
   sideways, which on a phone is the difference between usable and not. */
.tw { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.data { width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px; }
table.data th {
  text-align:left; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  color:var(--ink-3); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
  position:sticky; top:0; background:var(--card);
}
table.data td { padding:11px 12px; border-bottom:1px solid var(--line); }
table.data tbody tr:last-child td { border-bottom:0; }
table.data tbody tr:hover { background:var(--card-2); }
table.data td.num, table.data th.num { text-align:right; white-space:nowrap; font-family:var(--mono); font-variant-numeric:tabular-nums; }
table.data td .sm { display:block; font-size:11px; color:var(--ink-3); }
table.data .name { min-width:180px; }

/* ---------------- pills ---------------- */
.pill { display:inline-block; font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:var(--r-pill);
        text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
.pill.g { background:var(--green-soft); color:var(--green); }
.pill.r { background:var(--red-soft);   color:var(--red); }
.pill.a { background:var(--amber-soft); color:var(--amber); }
.pill.b { background:var(--blue-soft);  color:var(--blue); }
.pill.n { background:var(--card-2);     color:var(--ink-3); }

/* ---------------- toolbar / search ---------------- */
.tools { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.tools input, .tools select {
  height:46px; padding:0 14px; font:inherit; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); outline:none; min-width:0;
}
.tools input { flex:1 1 220px; }
.tools select { flex:0 1 auto; appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer; }
.tools input:focus-visible, .tools select:focus-visible { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; height:46px; padding:0 18px;
  border-radius:var(--r); font:inherit; font-weight:700; font-size:14px; cursor:pointer;
  background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow);
}
.btn.accent { background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.btn:active { transform:scale(.985); }

/* ---------------- empty / footer ---------------- */
.empty { text-align:center; color:var(--ink-3); padding:34px 16px; font-size:13.5px; }
.empty b { display:block; color:var(--ink-2); font-size:14.5px; margin-bottom:4px; }
.note { font-size:12px; color:var(--ink-3); padding:2px 2px 20px; line-height:1.6; }
.note b { color:var(--ink-2); }

/* ---------------- bottom tab bar ---------------- */
.tabs {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; background:var(--card); border-top:1px solid var(--line);
  padding:8px 6px calc(8px + var(--safe));
  box-shadow:0 -6px 24px rgba(18,20,26,.06);
}
.tabs a {
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:5px 2px; font-size:10.5px; font-weight:700; color:var(--ink-3);
  border-radius:10px; -webkit-tap-highlight-color:transparent;
}
.tabs a svg { width:22px; height:22px; display:block; }
.tabs a.on { color:var(--accent); }
.tabs a span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
@media (min-width:900px) {
  /* On a desktop the same links become a normal top nav — no fixed bar
     eating a strip of a large screen. */
  .tabs {
    position:static; border-top:0; border-bottom:1px solid var(--line); box-shadow:none;
    max-width:1180px; margin:0 auto; padding:0 28px; gap:4px; background:transparent;
  }
  .tabs a { flex:0 0 auto; flex-direction:row; gap:8px; padding:12px 14px; font-size:13.5px; border-radius:0;
            border-bottom:2px solid transparent; }
  .tabs a.on { border-bottom-color:var(--accent); }
  .tabs a svg { width:17px; height:17px; }
}

/* ---------------- PIN screen ---------------- */
.pin-page { min-height:100dvh; display:grid; place-items:center; padding:24px; padding-bottom:24px; }
.pin-card {
  width:100%; max-width:380px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:30px 26px 26px; text-align:center;
}
.pin-card .mark {
  width:56px; height:56px; border-radius:17px; margin:0 auto 16px;
  background:linear-gradient(135deg,var(--accent),#FFB25A); box-shadow:var(--shadow);
}
.pin-card h1 { font-size:20px; font-weight:800; letter-spacing:-.4px; }
.pin-card .sub { font-size:13px; color:var(--ink-3); margin-top:5px; margin-bottom:22px; }
.pin-in {
  width:100%; height:60px; text-align:center; font-family:var(--mono);
  font-size:30px; font-weight:700; letter-spacing:12px; text-indent:12px;
  background:var(--card-2); border:1.5px solid var(--line); border-radius:var(--r);
  color:var(--ink); outline:none;
}
.pin-in:focus { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.pin-card .btn { width:100%; margin-top:14px; height:52px; }
.pin-err { background:var(--red-soft); color:var(--red); border-radius:var(--r);
           padding:11px 14px; font-size:13px; font-weight:600; margin-bottom:16px; }
.pin-foot { font-size:11.5px; color:var(--ink-3); margin-top:18px; line-height:1.6; }

/* keypad — a phone should not have to raise its keyboard for six digits */
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:16px; }
.keypad button {
  height:56px; font:inherit; font-size:21px; font-weight:700; font-family:var(--mono);
  background:var(--card-2); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r); cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.keypad button:active { background:var(--accent-soft); border-color:var(--accent); }
.keypad button.wide { font-size:14px; font-family:var(--ui); }

@media print {
  .tabs, .range, .tools, .btn { display:none !important; }
  body { background:#fff; padding:0; }
  .card { break-inside:avoid; box-shadow:none; }
}