/* Sideline — shared shell for the three team-store portals.
   Third distinct world: near-black chrome with a crimson accent and Oswald
   headings, so it reads as athletic and looks nothing like the sage of
   demos/homecare or the slate-and-orange of demos/painting. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --ink:#141416;--ink2:#1e1e22;
  --pri:#B3172F;--pri-h:#94132700;--pri-l:#fbe9ec;--pri-p:#fdf5f6;--pri-b:#f0b8c1;
  --white:#fff;--bg:#f6f6f7;--surface:#fff;--s2:#ededf0;
  --border:#e2e2e6;--border2:#c9c9d1;
  --text:#141416;--t2:#54545e;--t3:#8b8b96;
  --green:#15803d;--green-bg:#f0fdf4;--green-bd:#bbf7d0;
  --amber:#b45309;--amber-bg:#fffbeb;--amber-bd:#fde68a;
  --red:#c0392b;--red-bg:#fdf2f0;--red-bd:#f3c7bf;
  --blue:#1d4ed8;--blue-bg:#eff6ff;--blue-bd:#bfdbfe;
  --r:10px;
}
html,body{height:100%;background:var(--bg);color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
body{overflow:hidden;}
h1,h2,h3,h4{font-family:'Oswald','Inter',sans-serif;font-weight:600;line-height:1.18;letter-spacing:.01em;}

/* ─── SHELL ───────────────────────────────────────────────── */
#app{display:flex;height:100vh;}
.main{flex:1;overflow-y:auto;padding:1.5rem;min-width:0;}

/* ─── SIDEBAR ─────────────────────────────────────────────── */
.sidebar{width:222px;flex-shrink:0;background:var(--ink);color:#fff;display:flex;flex-direction:column;}
.sb-brand{padding:1.15rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.12);}
.sb-logo{display:flex;align-items:center;gap:9px;font-family:'Oswald',sans-serif;font-size:20px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;}
.sb-leaf{width:22px;height:22px;border-radius:4px;background:var(--pri);flex-shrink:0;display:flex;
  align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;font-family:'Oswald',sans-serif;}
.sb-tag{font-size:8px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.18em;margin-top:4px;font-weight:600;}
.ns{font-size:8px;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.4);padding:.95rem 1.25rem .3rem;font-weight:600;}
.ni{display:flex;align-items:center;gap:9px;padding:8px 1.25rem;font-size:13.5px;cursor:pointer;color:rgba(255,255,255,.8);
  border-left:2px solid transparent;user-select:none;transition:all .12s;white-space:nowrap;}
.ni:hover{color:#fff;background:rgba(255,255,255,.06);}
.ni.active{color:#fff;border-left-color:var(--pri);background:rgba(255,255,255,.09);font-weight:600;}
.ni svg{width:15px;height:15px;flex-shrink:0;stroke-width:1.9;}
.nbadge{margin-left:auto;background:var(--pri);color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:8px;}
.sb-user{margin-top:auto;padding:.95rem 1.25rem;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:9px;}
.sb-uname{font-size:12.5px;font-weight:600;}
.sb-ucred{font-size:10px;color:rgba(255,255,255,.55);}
.sidebar .av{background:rgba(255,255,255,.15);color:#fff;}

/* ─── AVATAR ──────────────────────────────────────────────── */
.av{width:32px;height:32px;border-radius:6px;background:var(--pri-l);color:var(--pri);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;}
.av.lg{width:44px;height:44px;font-size:14px;border-radius:8px;}
.av.xl{width:62px;height:62px;font-size:19px;border-radius:11px;}
.av.dark{background:var(--ink);color:#fff;}

/* ─── PAGE HEADER ─────────────────────────────────────────── */
.pg-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.3rem;gap:12px;flex-wrap:wrap;}
.pg-title{font-size:27px;font-weight:600;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.02em;}
.pg-sub{font-size:12.5px;color:var(--t2);margin-top:2px;}

/* ─── CARDS ───────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem 1.15rem;}
.card+.card{margin-top:1rem;}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem;gap:10px;}
.card-t{font-size:15px;font-weight:600;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em;}
.card-x{font-size:11px;color:var(--t3);}
.grid{display:grid;gap:1rem;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.g-2-1{grid-template-columns:1.6fr 1fr;}

/* ─── STATS ───────────────────────────────────────────────── */
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:.95rem 1.05rem;}
.stat-l{font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--t3);font-weight:700;}
.stat-v{font-size:28px;font-weight:600;font-family:'Oswald',sans-serif;margin-top:3px;line-height:1;}
.stat-d{font-size:11px;color:var(--t2);margin-top:6px;}
.stat.hot{background:var(--ink);border-color:var(--ink);}
.stat.hot .stat-v{color:#fff;}
.stat.hot .stat-l{color:rgba(255,255,255,.6);}
.stat.hot .stat-d{color:rgba(255,255,255,.75);}
.stat.alert{border-color:var(--pri-b);background:var(--pri-l);}
.stat.alert .stat-v,.stat.alert .stat-l{color:var(--pri);}

/* ─── BADGES ──────────────────────────────────────────────── */
.bd{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:4px;
  border:1px solid;white-space:nowrap;text-transform:uppercase;letter-spacing:.05em;}
.bd.ok{background:var(--green-bg);color:var(--green);border-color:var(--green-bd);}
.bd.warn{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-bd);}
.bd.bad{background:var(--red-bg);color:var(--red);border-color:var(--red-bd);}
.bd.info{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-bd);}
.bd.mute{background:var(--s2);color:var(--t2);border-color:var(--border2);}
.bd.pri{background:var(--pri-l);color:var(--pri);border-color:var(--pri-b);}
.bd.dark{background:var(--ink);color:#fff;border-color:var(--ink);}
.bd.plain{text-transform:none;letter-spacing:0;font-weight:600;}

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:6px;padding:9px 16px;font-size:13px;
  font-weight:600;cursor:pointer;border:1px solid transparent;font-family:inherit;transition:all .13s;white-space:nowrap;}
.btn svg{width:15px;height:15px;stroke-width:2.1;}
.btn.p{background:var(--pri);color:#fff;}
.btn.p:hover{filter:brightness(1.08);}
.btn.d{background:var(--ink);color:#fff;}
.btn.g{background:var(--white);color:var(--text);border-color:var(--border2);}
.btn.g:hover{border-color:var(--ink);}
.btn.sm{padding:6px 12px;font-size:12px;}
.btn.wide{width:100%;}
.btn:disabled{opacity:.45;cursor:default;}

/* ─── ROWS ────────────────────────────────────────────────── */
.row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--border);}
.row:last-child{border-bottom:0;}
.row-m{flex:1;min-width:0;}
.row-t{font-size:13.5px;font-weight:600;}
.row-s{font-size:11.5px;color:var(--t2);margin-top:2px;}
.row-r{text-align:right;flex-shrink:0;}
.clickable{cursor:pointer;border-radius:8px;padding-left:8px;padding-right:8px;margin:0 -8px;transition:background .12s;}
.clickable:hover{background:var(--pri-p);}

/* ─── PRODUCT TILES ───────────────────────────────────────── */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;}
.prod{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer;transition:all .14s;}
.prod:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,20,22,.09);}
.prod-img{height:112px;display:flex;align-items:center;justify-content:center;position:relative;}
.prod-img svg{width:34px;height:34px;stroke-width:1.3;color:rgba(255,255,255,.9);}
.prod-b{padding:9px 10px 11px;}
.prod-n{font-size:12.5px;font-weight:600;line-height:1.3;}
.prod-p{font-size:14px;font-weight:700;font-family:'Oswald',sans-serif;margin-top:4px;}
.prod-c{font-size:10px;color:var(--t3);margin-top:2px;}

/* ─── SIZE PILLS ──────────────────────────────────────────── */
.sizes{display:flex;flex-wrap:wrap;gap:6px;}
.size{padding:7px 11px;border:1px solid var(--border2);border-radius:6px;font-size:12.5px;font-weight:600;cursor:pointer;
  background:#fff;transition:all .12s;}
.size:hover{border-color:var(--ink);}
.size.on{background:var(--ink);color:#fff;border-color:var(--ink);}

/* ─── BARS ────────────────────────────────────────────────── */
.bar{height:7px;border-radius:4px;background:var(--s2);overflow:hidden;}
.bar>span{display:block;height:100%;background:var(--pri);}
.bar.dark>span{background:var(--ink);}
.bar.good>span{background:var(--green);}
.spark{display:flex;align-items:flex-end;gap:2px;height:44px;}
.spark>i{flex:1;background:var(--pri-b);border-radius:2px 2px 0 0;min-height:2px;}
.spark>i.hi{background:var(--pri);}

/* ─── ALERTS ──────────────────────────────────────────────── */
.alert{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:9px;border:1px solid;font-size:12.5px;line-height:1.45;}
.alert svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;stroke-width:2.1;}
.alert.warn{background:var(--amber-bg);border-color:var(--amber-bd);color:#78350f;}
.alert.bad{background:var(--red-bg);border-color:var(--red-bd);color:#7f2318;}
.alert.info{background:var(--pri-p);border-color:var(--pri-b);color:#7d1022;}
.alert.dark{background:var(--ink);border-color:var(--ink);color:#fff;}

/* ─── FORM ────────────────────────────────────────────────── */
label.fl{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t2);margin-bottom:5px;}
input.fi,textarea.fi,select.fi{width:100%;padding:9px 11px;border:1px solid var(--border2);border-radius:6px;font-size:13.5px;
  font-family:inherit;background:var(--white);color:var(--text);outline:none;}
input.fi:focus,textarea.fi:focus,select.fi:focus{border-color:var(--ink);}
.fg{margin-bottom:.95rem;}

/* ─── MODAL ───────────────────────────────────────────────── */
.ov{position:fixed;inset:0;background:rgba(20,20,22,.55);z-index:60;display:none;align-items:center;justify-content:center;padding:22px;}
.ov.on{display:flex;}
.modal{background:var(--white);border-radius:12px;max-width:540px;width:100%;max-height:86vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.3);}
.modal-h{padding:1.1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.modal-b{padding:1.25rem;}
.modal-f{padding:.95rem 1.25rem;border-top:1px solid var(--border);display:flex;gap:9px;justify-content:flex-end;background:var(--s2);}
.x{cursor:pointer;color:var(--t3);font-size:19px;line-height:1;padding:2px 6px;border-radius:6px;}
.x:hover{background:var(--s2);color:var(--text);}

/* ─── TOAST ───────────────────────────────────────────────── */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;
  padding:11px 20px;border-radius:7px;font-size:13px;font-weight:500;z-index:90;opacity:0;transition:all .28s;
  box-shadow:0 10px 30px rgba(0,0,0,.26);display:flex;align-items:center;gap:8px;}
.toast.on{transform:translateX(-50%) translateY(0);opacity:1;}
.toast svg{width:16px;height:16px;stroke-width:2.4;}

/* ─── MISC ────────────────────────────────────────────────── */
.muted{color:var(--t2);} .tiny{font-size:11px;}
.sep{height:1px;background:var(--border);margin:1rem 0;}
.pill-row{display:flex;flex-wrap:wrap;gap:6px;}
.empty{text-align:center;padding:2.2rem 1rem;color:var(--t3);font-size:13px;}
.num{font-family:'Oswald',sans-serif;font-weight:600;}

/* ─── PHONE FRAME (storefront) ────────────────────────────── */
.phone-wrap{height:100vh;overflow-y:auto;background:var(--s2);display:flex;justify-content:center;}
.phone{width:100%;max-width:460px;background:var(--bg);min-height:100vh;border-left:1px solid var(--border);border-right:1px solid var(--border);}
.appbar{position:sticky;top:0;z-index:20;background:var(--ink);color:#fff;padding:.85rem 1.05rem;display:flex;align-items:center;gap:10px;}
.appbar h1{font-size:18px;font-weight:600;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.05em;}
.appbar small{display:block;font-size:10.5px;opacity:.8;font-weight:400;font-family:'Inter',sans-serif;text-transform:none;letter-spacing:0;}
.pbody{padding:1.05rem;padding-bottom:5.5rem;}
.tabbar{position:sticky;bottom:0;background:var(--white);border-top:1px solid var(--border);display:flex;z-index:20;}
.tb{flex:1;padding:9px 4px 10px;text-align:center;cursor:pointer;color:var(--t3);font-size:10px;font-weight:600;
  border-top:2px solid transparent;transition:all .12s;position:relative;}
.tb svg{width:19px;height:19px;display:block;margin:0 auto 3px;stroke-width:1.9;}
.tb.on{color:var(--pri);border-top-color:var(--pri);}
.tb-dot{position:absolute;top:5px;right:50%;margin-right:-16px;background:var(--pri);color:#fff;font-size:9px;font-weight:700;
  min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;}

/* ─── COUNTDOWN ───────────────────────────────────────────── */
.cd{background:var(--ink);color:#fff;border-radius:10px;padding:1rem 1.1rem;}
.cd-l{font-size:9.5px;text-transform:uppercase;letter-spacing:.15em;opacity:.6;font-weight:700;}
.cd-v{font-family:'Oswald',sans-serif;font-size:32px;font-weight:600;line-height:1;margin:5px 0 4px;}
.cd-d{font-size:11.5px;opacity:.8;}

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:900px){ .g4{grid-template-columns:repeat(2,1fr);} .g3,.g-2-1{grid-template-columns:1fr;} }
@media(max-width:720px){
  .sidebar{width:58px;}
  .sb-logo span:not(.sb-leaf),.sb-tag,.ni span,.sb-user div,.ns{display:none;}
  .sb-brand,.ni,.sb-user{padding-left:0;padding-right:0;justify-content:center;}
  .ni{border-left:0;border-right:2px solid transparent;}
  .ni.active{border-right-color:var(--pri);}
  .main{padding:1rem;} .g2{grid-template-columns:1fr;}
}