/* ============================================================
   MAZE ROOM — Toss Sports admin
   Light, Apple-neutral, dense, keyboard-friendly. Navigation is a
   frosted glass dock along the bottom, macOS style. Deliberately
   different from the storefront so you always know which one
   you're looking at.
   ============================================================ */
:root{
  --bg:#f5f5f7; --panel:#ffffff; --panel-2:#f0f0f3; --line:#e2e2e7;
  --ink:#1d1d1f; --ink-60:#6e6e73; --ink-40:#98989d;
  --orange:#FF8A1E; --orange-700:#E06F00;
  --green:#28c76f; --red:#e5484d; --amber:#c77d02; --blue:#3f6ad8;
  --r:12px; --ease:cubic-bezier(.4,0,.2,1);
  --f:'Inter',system-ui,sans-serif; --f-d:'Barlow Condensed',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--f);background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:14px}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
.hide{display:none!important}
a{color:var(--orange);text-decoration:none}

/* ---------- login ----------

   A ground behind the sign-in, and nothing else in the panel. The
   background belongs here and only here: past this screen the Maze Room
   is a dense working tool, and a photograph behind a table of numbers
   would fight the numbers every time.

   The photo carries a copyright watermark from whoever shot it. It is
   left intact — the notice is part of the image, and painting it out
   would be worse than showing it.

   The image is loaded on .gate rather than on body so the browser only
   fetches it on the login screen. Someone already signed in never pays
   for a 191kB photo they will not see. */
.gate{min-height:100vh;display:grid;place-items:center;padding:24px;
  position:relative;isolation:isolate;
  background:#0b0b18 url('../images/maze-bg-1600.webp') center/cover no-repeat;
  background-attachment:fixed}
@media (max-width:900px){
  /* the small file below the breakpoint, and no fixed attachment: iOS
     ignores it and Android repaints the whole layer on every scroll */
  .gate{background-image:url('../images/maze-bg-900.webp');background-attachment:scroll}
}

/* The scrim is what makes this work. It is a busy, high-contrast
   photograph, and a white card dropped straight onto it reads as a
   sticker. Dark at the edges, darker still behind the card, so the card
   looks lit rather than pasted. pointer-events:none because a decorative
   layer must never take a click meant for the form beneath it. */
.gate::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(680px 520px at 50% 50%, rgba(6,6,20,.72), rgba(6,6,20,.34) 60%, transparent 78%),
    linear-gradient(180deg, rgba(6,6,20,.55), rgba(6,6,20,.30) 38%, rgba(6,6,20,.68))}

.gate-card{width:100%;max-width:360px;border-radius:18px;
  padding:34px 28px;text-align:center;position:relative;
  /* Frosted rather than solid: the ground stays faintly readable through
     the card, which is the whole point of putting it there.

     .97 and not lower. At .93 the field showed through enough to drag the
     grey label text to 4.41:1, just under the 4.5 WCAG AA needs for body
     text — and these labels sit above the two fields someone has to type
     into. The frosted look survives the extra 4%; legibility would not
     have survived losing it. */
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 30px 70px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.25),
             inset 0 1px 0 rgba(255,255,255,.8)}

/* Safari before 16.4 and any browser with backdrop-filter disabled would
   render the card at 93% opacity over a photograph, which is unreadable.
   Fall back to something solid rather than something pretty. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .gate-card{background:rgba(255,255,255,.985)}
}
.gate-mark{width:64px;height:64px;object-fit:contain;display:block;margin:0 auto 12px}
.gate-card h1{font-family:var(--f-d);font-size:2rem;text-transform:uppercase;letter-spacing:.02em}
.gate-card p{color:var(--ink-60);font-size:.85rem;margin-bottom:22px}
.gate-card label{display:block;text-align:left;font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-60);margin-bottom:14px}
.gate-card input{width:100%;margin-top:6px;background:var(--bg);border:1.5px solid var(--line);
  border-radius:10px;padding:11px 13px;font-size:.92rem;text-transform:none;letter-spacing:0}
.gate-card input:focus{outline:none;border-color:var(--orange)}
.gate-err{margin-top:14px;background:rgba(229,72,77,.08);border:1px solid rgba(229,72,77,.3);
  color:#c22f34;border-radius:10px;padding:10px 12px;font-size:.8rem;text-align:left;line-height:1.5}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:10px;padding:10px 16px;font-weight:700;font-size:.85rem;
  transition:.16s var(--ease);white-space:nowrap}
.btn.primary{background:var(--orange);color:#1a1000}
.btn.primary:hover{background:#ff9c40}
.btn.ghost{border:1px solid var(--line);color:var(--ink-60)}
.btn.ghost:hover{border-color:var(--orange);color:var(--orange)}
.btn.danger{background:rgba(229,72,77,.1);color:#c22f34;border:1px solid rgba(229,72,77,.3)}
.btn.danger:hover{background:rgba(229,72,77,.18)}
.btn.block{width:100%}
.btn.sm{padding:6px 11px;font-size:.76rem;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- shell ---------- */
.shell{min-height:100vh}
.topbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.brand{font-family:var(--f-d);font-size:1.3rem;font-weight:900;text-transform:uppercase;
  letter-spacing:.04em;display:flex;align-items:center;gap:9px;
  color:var(--ink)}
.brand img{width:28px;height:28px;object-fit:contain;display:block}
/* who am I — always on screen, so a shared machine can't fool anyone */
.signed-as{margin-left:auto;display:flex;align-items:center;gap:9px;
  background:var(--panel);border:1px solid var(--line);border-radius:100px;
  padding:5px 6px 5px 14px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.br-sel{background:var(--panel);border:1px solid var(--line);border-radius:100px;
  padding:7px 12px;font-size:.78rem;font-weight:700;color:var(--ink);cursor:pointer}
.br-sel:focus{outline:none;border-color:var(--orange)}
.br-pin{background:var(--panel);border:1px solid var(--line);border-radius:100px;
  padding:6px 13px;font-size:.76rem;font-weight:700;color:var(--ink-60)}
/* per-branch split under a total */
.br-split{font-size:.63rem;color:var(--ink-40);font-weight:700;margin-top:2px;white-space:nowrap}
/* branch comparison cards on the dashboard */
.br-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.br-card{text-align:left;background:var(--panel-2);border:1px solid var(--line);
  border-radius:14px;padding:15px 16px;display:grid;gap:5px;transition:.18s var(--ease)}
.br-card:hover{border-color:var(--orange);transform:translateY(-2px)}
.br-nm{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}
.br-nm i{font-style:normal;background:var(--orange);color:#1a1000;border-radius:5px;
  padding:1px 6px;font-size:.62rem}
.br-card b{font-family:var(--f-d);font-size:1.9rem;line-height:1;color:var(--ink)}
.br-sub{font-size:.75rem;color:var(--ink-60)}
.br-meta{font-size:.68rem;color:var(--ink-40);font-weight:700}
/* best seller of the month, ranked */
.bs-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.bs-card{text-align:left;background:var(--panel-2);border:1px solid var(--line);
  border-radius:13px;padding:13px 14px;display:grid;gap:4px;transition:.18s var(--ease)}
.bs-card:hover{border-color:var(--orange);transform:translateY(-2px)}
.bs-card.top{border-color:rgba(255,138,30,.5);background:rgba(255,138,30,.07)}
.bs-month{display:flex;align-items:center;gap:7px;font-size:.66rem;font-weight:900;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40)}
.bs-rank{font-style:normal;border-radius:5px;padding:1px 6px;font-size:.62rem;
  background:var(--line);color:var(--ink-60)}
.bs-rank.r1{background:var(--orange);color:#1a1000}
.bs-rank.r2{background:rgba(255,138,30,.25);color:#b25e00}
.bs-card b{font-size:.95rem;line-height:1.25;color:var(--ink)}
.bs-units{font-size:.72rem;color:var(--ink-60)}
.sa-txt{font-size:.76rem;color:var(--ink-60)}
.sa-txt b{color:var(--ink);font-weight:700}
@media (max-width:600px){.sa-txt{display:none}.signed-as{padding:5px 6px}}
/* room at the bottom so the dock never covers the last table row */
.main{padding:24px 30px 140px;min-width:0;max-width:1240px;margin:0 auto}

/* ---------- THE DOCK — frosted glass, macOS style ---------- */
.dock-wrap{position:fixed;left:0;right:0;bottom:14px;z-index:50;
  display:flex;justify-content:center;pointer-events:none;
  padding:0 10px calc(env(safe-area-inset-bottom, 0px))}
.dock{pointer-events:auto;display:flex;align-items:flex-end;gap:4px;
  max-width:96vw;overflow-x:auto;scrollbar-width:none;
  padding:9px 12px;border-radius:24px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 18px 50px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.9)}
.dock::-webkit-scrollbar{display:none}
.dk{position:relative;flex:none;width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;color:#3a3a3f;
  transition:transform .12s ease-out,background .15s var(--ease),color .15s var(--ease);
  transform-origin:bottom center}
.dk svg{width:23px;height:23px;display:block}
.dk:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.dk:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.dk:disabled{opacity:.3;pointer-events:none}
/* the running-app dot */
.dk.on{color:var(--orange-700)}
.dk.on::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--orange-700)}
/* tooltip above, like a dock label */
.dk-tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) scale(.9);
  opacity:0;pointer-events:none;white-space:nowrap;
  background:rgba(28,28,32,.92);color:#fff;font-size:.68rem;font-weight:700;
  letter-spacing:.02em;padding:5px 10px;border-radius:8px;
  transition:opacity .15s var(--ease),transform .15s var(--ease)}
.dk:hover .dk-tip,.dk:focus-visible .dk-tip{opacity:1;transform:translateX(-50%) scale(1)}
.dk-div{flex:none;width:1px;height:34px;margin:0 5px;align-self:center;
  background:rgba(0,0,0,.14)}

/* ---------- founder-only sections ----------
   Finance, Activity and Settings are the sections nobody below founder can
   open at all. They sit together at the right behind a divider, on a warm
   tinted disc, so the powerful end of the dock reads at a glance. The tint
   is deliberately soft: it should identify, not shout over the active-tab
   dot, which is still the strongest signal in the dock. */
.dk.owner{color:#b25e00;background:rgba(255,138,30,.11);
  box-shadow:0 0 0 1px rgba(255,138,30,.22) inset, 0 2px 10px rgba(255,138,30,.14)}
.dk.owner:hover{background:rgba(255,138,30,.2);color:#8f4b00;
  box-shadow:0 0 0 1px rgba(255,138,30,.4) inset, 0 4px 14px rgba(255,138,30,.28)}
.dk.owner.on{color:var(--orange-700);background:rgba(255,138,30,.24);
  box-shadow:0 0 0 1px rgba(255,138,30,.5) inset, 0 4px 16px rgba(255,138,30,.3)}
/* the divider that opens the founder group is warm too */
.dk.owner ~ .dk-div,.dk-div:has(+ .dk.owner){background:rgba(255,138,30,.35)}
/* "Founder only" line inside the tooltip */
.dk-tip i{display:block;font-style:normal;font-size:.6rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#ffbe70;margin-top:2px}
.dk.me b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--orange),#ffb259);color:#1a1000;
  font-size:.72rem;font-weight:900;letter-spacing:.02em}

/* the account menu that floats above the avatar */
.dock-menu{pointer-events:auto;position:absolute;right:max(18px,calc(50vw - 340px));
  bottom:calc(100% + 12px);display:grid;gap:10px;min-width:200px;
  padding:16px;border-radius:18px;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(24px) saturate(1.7);-webkit-backdrop-filter:blur(24px) saturate(1.7);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 20px 60px rgba(0,0,0,.18)}
.dock-menu b{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:640px){
  .main{padding:18px 14px 130px}
  .dk{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .dk{transition:background .15s var(--ease),color .15s var(--ease)}
}

.banner{background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.3);
  color:#8a5a00;border-radius:12px;padding:13px 16px;font-size:.83rem;
  line-height:1.6;margin-bottom:22px}
.banner b{color:var(--ink)}
.banner code{background:rgba(0,0,0,.07);padding:2px 6px;border-radius:5px;font-size:.9em}

/* ---------- category chips ---------- */
.cat-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.cat-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;
  border-radius:100px;border:1px solid var(--line);background:var(--panel);
  font-size:.8rem;font-weight:700;color:var(--ink-60);transition:.15s var(--ease)}
.cat-chip i{font-style:normal;font-size:.68rem;font-weight:800;color:var(--ink-40);
  background:var(--panel-2);border-radius:100px;padding:1px 7px;
  font-variant-numeric:tabular-nums}
.cat-chip:hover{border-color:var(--orange);color:var(--ink)}
.cat-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cat-chip.on i{background:rgba(255,255,255,.2);color:#fff}

/* ---------- headings ---------- */
.head{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.head h2{font-family:var(--f-d);font-size:1.9rem;text-transform:uppercase;letter-spacing:.02em}
.head .sp{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.muted{color:var(--ink-60);font-size:.85rem;line-height:1.6}

/* ---------- cards / stats ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card b{display:block;font-family:var(--f-d);font-size:2rem;line-height:1;margin-bottom:5px}
.card span{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40)}
.card.warn b{color:var(--amber)} .card.good b{color:var(--green)} .card.hot b{color:var(--orange)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;margin-bottom:18px}
.panel h3{font-family:var(--f-d);font-size:1.2rem;text-transform:uppercase;
  letter-spacing:.03em;margin-bottom:12px}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:640px}
th{text-align:left;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-40);padding:12px 14px;border-bottom:1px solid var(--line);
  background:var(--panel-2);position:sticky;top:0;white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.pid{font-family:ui-monospace,monospace;font-size:.74rem;color:var(--ink-40)}

.pill{display:inline-block;padding:3px 9px;border-radius:100px;font-size:.68rem;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.pill.on{background:rgba(40,199,111,.16);color:#148a4e}
.pill.off{background:rgba(255,90,95,.14);color:#c22f34}
.pill.low{background:rgba(255,176,32,.16);color:#9a6c00}
.pill.entry{background:rgba(91,140,255,.16);color:#3f6ad8}
.pill.mid{background:rgba(255,176,32,.16);color:#9a6c00}
.pill.premium{background:rgba(255,138,30,.18);color:var(--orange)}
.pill.new{background:rgba(91,140,255,.16);color:#3f6ad8}
.pill.packed{background:rgba(255,176,32,.16);color:#9a6c00}
.pill.shipped{background:rgba(40,199,111,.16);color:#148a4e}
.pill.cancelled{background:rgba(255,90,95,.14);color:#c22f34}

.warn-cell{color:var(--amber);font-weight:700}

/* ---------- forms ---------- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.f label{display:block;font-size:.7rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-40);margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;background:var(--bg);border:1.5px solid var(--line);
  border-radius:9px;padding:9px 12px;font-size:.88rem}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--orange)}
.f textarea{min-height:90px;resize:vertical;font-family:ui-monospace,monospace;font-size:.8rem;line-height:1.6}
.f .row{margin-bottom:14px}
.f .hint{font-size:.72rem;color:var(--ink-40);margin-top:5px;line-height:1.5}
.check{display:flex;align-items:center;gap:9px;font-size:.85rem;font-weight:600}
.check input{width:17px;height:17px;accent-color:var(--orange)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;
  background:rgba(30,30,40,.4);backdrop-filter:blur(4px)}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  width:min(96vw,660px);max-height:90vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.2)}
.modal-head{display:flex;align-items:center;gap:12px;padding:18px 22px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.modal-head h3{font-family:var(--f-d);font-size:1.4rem;text-transform:uppercase}
.modal-head .x{margin-left:auto;font-size:1.4rem;color:var(--ink-40);line-height:1}
.modal-head .x:hover{color:var(--ink)}
.modal-body{padding:22px}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 22px;
  border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--panel)}

/* ---------- toast ---------- */
/* hidden state sits fully off-screen AND transparent — on the light theme
   the dark pill's top edge used to peek above the viewport bottom */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,200%);opacity:0;z-index:80;
  background:var(--ink);color:var(--bg);border-radius:100px;padding:11px 22px;
  font-weight:800;font-size:.85rem;transition:transform .3s var(--ease),opacity .3s var(--ease);box-shadow:0 14px 40px rgba(0,0,0,.18)}
.toast.on{transform:translate(-50%,-84px);opacity:1}   /* clears the dock */
.toast.bad{background:var(--red);color:#fff}

/* ---------- role chip ---------- */
.role-chip{display:inline-block;padding:3px 9px;border-radius:100px;font-size:.62rem;
  font-weight:900;letter-spacing:.1em;text-transform:uppercase;align-self:flex-start}
.role-chip.owner,.role-chip.founder{background:var(--orange);color:#1a1000}
.pill.founder{background:rgba(255,138,30,.18);color:#b25e00}
.role-chip.manager{background:rgba(91,140,255,.2);color:#3f6ad8}
.role-chip.sales{background:rgba(40,199,111,.18);color:#148a4e}
.role-chip.workshop{background:rgba(255,176,32,.18);color:#9a6c00}
.pill.owner{background:rgba(255,138,30,.18);color:var(--orange)}
.pill.manager{background:rgba(91,140,255,.16);color:#3f6ad8}
.pill.sales{background:rgba(40,199,111,.16);color:#148a4e}
.pill.workshop{background:rgba(255,176,32,.16);color:#9a6c00}
.pill.web{background:rgba(91,140,255,.16);color:#3f6ad8}
.pill.whatsapp{background:rgba(40,199,111,.16);color:#148a4e}
.pill.walkin{background:rgba(255,138,30,.16);color:var(--orange)}
.pill.phone,.pill.instagram{background:rgba(255,176,32,.16);color:#9a6c00}

/* ---------- sub tabs ---------- */
.subtabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:10px;
  overflow-x:auto}
.subtabs button{padding:7px 14px;border-radius:8px;font-weight:700;font-size:.82rem;
  color:var(--ink-60);white-space:nowrap}
.subtabs button:hover{background:var(--panel-2);color:var(--ink)}
.subtabs button.on{background:var(--orange);color:#1a1000}

/* ---------- charts ---------- */
.chart{position:relative;padding-top:8px}
.bars{display:flex;align-items:flex-end;gap:3px;height:150px}
.bar-col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.bar{width:70%;max-width:34px;background:linear-gradient(180deg,var(--orange),var(--orange-700));
  border-radius:4px 4px 0 0;min-height:2px;transition:.3s var(--ease)}
.bar-col:hover .bar{background:#ffb259}
.bar-lbl{font-size:.62rem;color:var(--ink-40);margin-top:6px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.chart-max{position:absolute;top:0;right:0;font-size:.68rem;color:var(--ink-40);font-weight:700}
.spark{width:100%;height:34px;color:var(--orange)}

/* ---------- month-by-month ---------- */
/* Paired bars on ONE shared scale, so revenue and outgoings are directly
   comparable — the whole point of the panel. */
.mw-chart{position:relative;display:flex;align-items:flex-end;gap:4px;height:180px;
  padding-top:6px}
.mw-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%}
.mw-pair{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.mw-bar{width:38%;max-width:26px;border-radius:4px 4px 0 0;min-height:2px;
  transition:opacity .18s var(--ease)}
.mw-bar.rev{background:linear-gradient(180deg,var(--orange),var(--orange-700))}
.mw-bar.out{background:linear-gradient(180deg,#9aa0b4,#6f758a)}
.mw-col:hover .mw-bar{opacity:.78}
.mw-lbl{font-size:.63rem;color:var(--ink-40);margin-top:7px;white-space:nowrap;font-weight:700}
.mw-max{position:absolute;top:0;right:0;font-size:.68rem;color:var(--ink-40);font-weight:700}
.mw-key{display:flex;gap:16px;margin-top:12px;font-size:.72rem;color:var(--ink-60)}
.mw-key span{display:inline-flex;align-items:center;gap:6px}
.mw-key i{width:11px;height:11px;border-radius:3px;display:block}
.mw-key i.rev{background:var(--orange)}
.mw-key i.out{background:#8c92a6}
.good-cell{color:var(--green)}
tfoot td{border-top:2px solid var(--line);background:var(--panel-2)}

.grid-2{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:1000px){.grid-2{grid-template-columns:1fr 1fr}}

table.mini{min-width:0;font-size:.83rem}
table.mini td{padding:8px 0;border-bottom:1px solid var(--line)}
table.mini tr:last-child td{border:0}

/* ---------- progress ---------- */
.prog{height:8px;border-radius:100px;background:var(--panel-2);overflow:hidden}
.prog i{display:block;height:100%;border-radius:100px;
  background:linear-gradient(90deg,var(--orange-700),var(--orange))}
.prog.sm{height:6px;max-width:130px}
b.rank{color:var(--orange)}

/* ---------- rows in modals ---------- */
.att-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.att-row:last-child{border:0}
.att-row span{flex:1;font-size:.88rem;font-weight:600}
.att-row select,.att-row input{width:150px;background:var(--bg);border:1.5px solid var(--line);
  border-radius:9px;padding:8px 11px;font-size:.85rem}
.rolebox{display:flex;gap:16px;flex-wrap:wrap}
.inline-sel{background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:5px 8px;font-size:.76rem}

/* ---------- SOPs ---------- */
.sop{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden}
.sop:last-child{margin-bottom:0}
.sop-head{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--panel-2);flex-wrap:wrap}
.sop-head b{font-size:.92rem}
.sop-head .muted{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.sop-head button{margin-left:auto}
.sop-body{padding:14px;font-family:var(--f);font-size:.85rem;line-height:1.75;
  white-space:pre-wrap;color:var(--ink-60);margin:0}

/* ---------- DASHBOARD: what needs doing ---------- */
.todo{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;margin-bottom:16px}
.todo-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.todo-h h3{font-family:var(--f-d);font-size:1.35rem;text-transform:uppercase;letter-spacing:.03em}
.todo-clear{margin-left:auto;font-size:.68rem;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green);background:rgba(40,199,111,.14);
  padding:5px 11px;border-radius:100px}

.job{display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  padding:14px 16px;border-radius:12px;background:var(--panel-2);
  border:1px solid var(--line);border-left:3px solid var(--ink-40);
  margin-bottom:9px;transition:.18s var(--ease)}
.job:last-child{margin-bottom:0}
.job:hover{background:#e9e9ee;transform:translateX(3px)}
.job:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.job.hot{border-left-color:var(--orange)}
.job.warn{border-left-color:var(--amber)}
.job b{font-family:var(--f-d);font-size:2rem;line-height:1;min-width:44px;
  color:var(--ink);font-variant-numeric:tabular-nums}
.job.hot b{color:var(--orange)}
.job.warn b{color:var(--amber)}
.job span{flex:1;min-width:0}
.job i{display:block;font-style:normal;font-size:.94rem;font-weight:700;color:var(--ink);line-height:1.25}
.job em{display:block;font-style:normal;font-size:.78rem;color:var(--ink-60);margin-top:2px;line-height:1.4}
.job u{text-decoration:none;color:var(--ink-40);font-size:1.1rem;transition:.18s var(--ease)}
.job:hover u{color:var(--orange);transform:translateX(3px)}

.setup .setup-row{display:grid;grid-template-columns:1fr auto;gap:4px 14px;width:100%;
  text-align:left;padding:12px 2px;border-bottom:1px solid var(--line);transition:.16s var(--ease)}
.setup .setup-row:last-child{border-bottom:0}
.setup .setup-row:hover{background:var(--panel-2)}
.setup-t b{display:block;font-size:.9rem;color:var(--ink)}
.setup-t span{display:block;font-size:.76rem;color:var(--ink-60);margin-top:2px}
.setup-n{font-size:.8rem;font-weight:800;color:var(--ink-40);white-space:nowrap;
  font-variant-numeric:tabular-nums;align-self:center}
.setup .prog{grid-column:1/-1;margin-top:4px}

.cards.tight{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.cards.tight .card{padding:13px 14px}
.cards.tight .card b{font-size:1.5rem}

.chart-wait{opacity:.75}
.chart-wait .gsub{margin:0}

/* ---------- ORDER DETAIL ---------- */
.od-open{font-family:ui-monospace,monospace;font-size:.74rem;color:var(--orange);
  text-decoration:underline;text-underline-offset:3px;padding:0}
.od-open:hover{color:var(--orange-700)}
.od h4{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40);
  margin-bottom:8px;font-weight:800}
.od-cols{display:grid;gap:20px;grid-template-columns:1fr;margin-bottom:22px}
.od-addr{white-space:pre-line;font-size:.88rem;line-height:1.6;margin:0 0 10px;
  padding:12px 14px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line)}
.od-meta{width:100%;font-size:.83rem;min-width:0}
.od-meta th{text-align:left;color:var(--ink-40);font-weight:700;padding:4px 12px 4px 0;
  background:transparent;border:0;text-transform:none;letter-spacing:0;font-size:.83rem}
.od-meta td{padding:4px 0;border:0}
.od-items{width:100%;border-collapse:collapse;font-size:.85rem;min-width:0}
.od-items th{background:var(--panel-2)}
.od-tot{margin:16px 0 0;margin-left:auto;width:min(260px,100%)}
.od-tot div{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:.85rem}
.od-tot b{font-variant-numeric:tabular-nums}
.od-grand{border-top:1px solid var(--line);margin-top:6px;padding-top:8px!important}
.od-grand b{font-family:var(--f-d);font-size:1.3rem;color:var(--orange)}
.od-act{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
@media (min-width:640px){.od-cols{grid-template-columns:1.1fr .9fr;gap:30px}}

/* ---------- PHOTO UPLOAD ---------- */
.up{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px;
  border:1.5px dashed var(--line);border-radius:12px;background:var(--bg);
  transition:.18s var(--ease)}
.up.over{border-color:var(--orange);background:rgba(255,138,30,.08)}
.up-hint{font-size:.76rem;color:var(--ink-40)}
.up-stat{margin-left:auto;font-size:.76rem;font-weight:800;color:var(--orange)}
/* Maintenance row, not a primary action — quieter than the drop zone above
   it so it reads as housekeeping for older photos rather than a step in
   the normal upload flow. */
.up-fix{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px;
  padding:9px 14px;border-radius:10px;background:var(--panel-2)}
.up-grid{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.up-th{position:relative;margin:0;width:74px;height:74px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel-2)}
.up-th img{width:100%;height:100%;object-fit:cover;display:block}
.up-th b{position:absolute;left:0;bottom:0;right:0;background:var(--orange);color:#1a1000;
  font-size:.55rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:2px}
.up-th button{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.7);color:#fff;font-size:.9rem;line-height:1;display:grid;place-items:center}
.up-th button:hover{background:var(--red)}
.up-urls{min-height:52px!important;font-size:.68rem!important;opacity:.55;margin-top:8px}
.up-urls:focus{opacity:1}

/* ---------- BILLING ---------- */
.pos-total{margin-top:6px;padding:14px 16px;border-radius:12px;background:var(--panel-2);
  border:1px solid var(--line);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pos-total b{font-family:var(--f-d);font-size:1.9rem;line-height:1;color:var(--orange)}
.pos-total span{font-size:.76rem;color:var(--ink-60)}

.inv-wrap{background:#fff;border-radius:10px;padding:4px}
.inv-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}

/* The document itself is always light — it exists to be printed. */
.inv{background:#fff;color:#14141f;padding:26px 24px;font-size:12.5px;line-height:1.5;
  font-family:var(--f)}
.inv-head{display:flex;justify-content:space-between;gap:20px;
  padding-bottom:14px;border-bottom:2px solid #14141f}
.inv-brand{font-family:var(--f-d);font-size:1.5rem;text-transform:uppercase;display:block;letter-spacing:.02em}
.inv-head span{display:block;color:#55556b;font-size:11.5px}
.inv-head b{color:#14141f}
.inv-type{text-align:right;flex:none}
.inv-type b{font-family:var(--f-d);font-size:1.05rem;letter-spacing:.08em;display:block}
.inv-void{display:inline-block;margin-top:4px;background:#e5484d;color:#fff;
  padding:2px 8px;border-radius:4px;font-weight:800;letter-spacing:.1em;font-size:10px}

.inv-parties{display:flex;gap:30px;justify-content:space-between;padding:14px 0;
  border-bottom:1px solid #d8d8e2}
.inv-parties span{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#8a8a9e;font-weight:800;margin-bottom:3px}
.inv-parties b{display:block;font-size:13px}
.inv-parties i{display:block;font-style:normal;color:#55556b;font-size:11.5px}

.inv-tbl{width:100%;border-collapse:collapse;margin-top:14px;min-width:0}
.inv-tbl th{text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:#8a8a9e;border-bottom:1px solid #d8d8e2;padding:7px 6px;background:transparent}
.inv-tbl td{padding:9px 6px;border-bottom:1px solid #ececf2;vertical-align:top}
.inv-tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hsn{display:block;font-size:10px;color:#8a8a9e;margin-top:2px}

.inv-tot{margin-top:14px;margin-left:auto;width:min(300px,100%)}
.inv-tot div{display:flex;justify-content:space-between;gap:20px;padding:4px 0;font-size:12px}
.inv-tot b{font-variant-numeric:tabular-nums}
.inv-grand{border-top:2px solid #14141f;margin-top:6px;padding-top:8px!important;font-size:15px!important}
.inv-grand b{font-family:var(--f-d);font-size:1.35rem}
.inv-note{margin-top:10px;font-size:10.5px;color:#8a8a9e;line-height:1.5}
.inv-foot{margin-top:22px;padding-top:12px;border-top:1px solid #d8d8e2;
  font-size:11px;color:#55556b}

/* the standalone print window */
body.printing{background:#fff;padding:0}
body.printing .inv{max-width:760px;margin:0 auto}
@media print{
  @page{margin:12mm}
  body.printing{padding:0}
  .inv{padding:0;font-size:11.5px}
  .inv-actions,.modal-head,.modal-foot{display:none!important}
}

.empty{text-align:center;padding:44px 20px;color:var(--ink-40);font-size:.88rem}
.loading{padding:40px;text-align:center;color:var(--ink-40)}

.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.filters input,.filters select{background:var(--panel);border:1px solid var(--line);
  border-radius:9px;padding:8px 12px;font-size:.83rem}
.filters input{min-width:210px}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--orange)}

@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;
    border-right:0;border-bottom:1px solid var(--line)}
  .brand{border-bottom:0;padding:14px 16px}
  #nav{display:flex;overflow-x:auto;padding:8px;flex:1 1 100%;order:3;border-top:1px solid var(--line)}
  #nav button{white-space:nowrap}
  .side-foot{margin:0 0 0 auto;border-top:0;padding:10px 14px;
    display:flex;align-items:center;gap:10px}
  .side-foot span{display:none}
  .main{padding:18px 16px 50px}
}

/* ---------- REQUESTS QUEUE ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:100px;
  padding:7px 14px;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;
  color:var(--ink-70);transition:.16s var(--ease)}
.chip:hover{border-color:var(--ink-30)}
.chip.on{background:var(--orange);border-color:var(--orange);color:#fff}
.chip.sm{padding:5px 11px;font-size:.76rem}
.chip b{color:var(--orange);margin-left:3px}
.chip.on b{color:#fff}

.reqlist{display:grid;gap:14px}
.reqcard{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--panel)}
.reqcard>header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  flex-wrap:wrap;margin-bottom:12px}
.reqcard>header b{display:block;font-size:1rem;margin:4px 0 2px}
.reqcard .tag{display:inline-block;font-size:.68rem;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange)}
.reqcard .muted{font-size:.78rem}

/* Two columns of label/value so a long custom-bat spec stays scannable
   instead of becoming a wall of lines. */
.reqfields{display:grid;gap:8px 22px;margin:0 0 12px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.reqfields div{display:grid;gap:1px}
.reqfields dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-40)}
.reqfields dd{margin:0;font-size:.88rem}

.reqshots{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.reqshots img{width:72px;height:72px;object-fit:cover;border-radius:9px;
  border:1px solid var(--line);display:block}
.reqvid{display:grid;place-items:center;width:72px;height:72px;border-radius:9px;
  background:var(--navy-900);color:#fff;font-size:.72rem;font-weight:700;text-decoration:none}
.reqnote{margin:0 0 10px;font-size:.85rem;color:var(--ink-70);
  border-left:3px solid var(--line);padding-left:11px}
.reqquote{margin:0 0 12px;font-size:.88rem}
.reqquote b{color:var(--orange)}

.reqcard>footer{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:12px}
.reqstat{margin-left:auto;padding:7px 11px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:.8rem;font-weight:700;background:var(--bg);text-transform:capitalize}

.pill{display:inline-block;padding:4px 11px;border-radius:100px;font-size:.72rem;
  font-weight:800;text-transform:capitalize;background:var(--panel-2);color:var(--ink-70)}
.pill.new{background:rgba(255,138,30,.14);color:#b96407}
.pill.quoted{background:rgba(61,61,168,.14);color:#3d3da8}
.pill.accepted,.pill.done{background:rgba(46,160,67,.14);color:#1f7a33}
.pill.declined{background:rgba(229,72,77,.13);color:#c92a2e}

/* an order nobody has acknowledged for half a day should look wrong */
.tbl tr.late{background:rgba(255,138,30,.07)}
.tbl tr.late td:first-child{box-shadow:inset 3px 0 0 var(--orange)}

/* the quiet link under the sign-in button — a button, not an <a>, because it
   changes what is on screen rather than going anywhere */
.gate-link{display:block;width:100%;margin-top:12px;padding:4px;
  font-size:.8rem;font-weight:700;color:var(--ink-60);background:none;border:0;
  cursor:pointer;transition:.15s var(--ease)}
.gate-link:hover{color:var(--orange)}
.gate-link:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:6px}
/* the same box carries the confirmation as well as the error, so it needs a
   neutral state that does not shout */
.gate-err{color:#c22f34}
.gate-err b{color:inherit}

/* ---------- play styles ----------
   Two axes the shop filters by: how a player bats, and how the bat picks
   up. The manager groups them; the product form ticks them. */
.ps-group{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.ps-group h4{margin:0;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-60)}
.ps-group .hint{margin-top:2px}
.ps-group .att-row.off{opacity:.5}
.ps-new{width:100%;background:var(--bg);border:1.5px solid var(--line);
  border-radius:9px;padding:8px 11px;font-size:.85rem}

/* The picker in the product form. A chip is a label wrapping its own
   checkbox, so the whole pill is the hit area rather than a 13px box. */
.ps-pick{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:9px}
.ps-pick:last-of-type{margin-bottom:0}
.ps-pick-h{flex:0 0 100%;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-60);font-weight:700}
.ps-chip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  background:var(--panel-2);border:1.5px solid var(--line);border-radius:100px;
  padding:6px 13px;font-size:.83rem;font-weight:600;transition:background .12s,border-color .12s}
.ps-chip:hover{border-color:var(--ink-60)}
/* Driven by the checkbox itself, not by a class the render put there: a
   class would be right on first paint and wrong the moment anyone clicked. */
.ps-chip:has(input:checked){background:var(--orange);border-color:var(--orange);color:#fff}
/* The native box is redundant once the pill itself reads as on or off, but
   it stays in the DOM so the label keeps working and so does the keyboard. */
.ps-chip input{position:absolute;opacity:0;width:0;height:0}
.ps-chip:focus-within{outline:2px solid var(--orange);outline-offset:2px}