/* Nearbury dashboards (seller + admin). Built on home.css tokens and app.css parts.
   Rules: one main action per screen, words next to every icon, 56px main buttons,
   plain words, status always shown as a word plus a colour. */

.d{font-family:var(--font);color:var(--ink);background:var(--bg-2);font-size:var(--fs-md);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
.d *{box-sizing:border-box}
.d h1,.d h2,.d h3,.d p{margin:0}
.d a{color:var(--ink)}

/* Shell: sidebar + main on desktop, top bar + bottom tabs on phone */
.dash{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh}
.dmain{min-width:0;padding:var(--s4) var(--s4) calc(var(--dock,0px) + 24px);display:flex;flex-direction:column;gap:var(--s5)}
.dmain--narrow{max-width:760px}
.dtop{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.dtop__logo{font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:-0.045em;text-decoration:none;color:var(--ink)}
.dtop__logo small{font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:0;color:var(--muted);margin-left:var(--s2)}

.side{display:none}
.side__logo{display:block;font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:-0.045em;text-decoration:none;color:var(--ink);padding:0 var(--s3)}
.side__shop{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.side__av{width:36px;height:36px;border-radius:var(--r);background:var(--ink);color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-md);font-weight:var(--fw-bold);flex:none}
.side__name{font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.25}
.side__sub{font-size:var(--fs-sm);color:var(--muted)}
.side nav{display:flex;flex-direction:column;gap:2px}
.side__label{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--muted);padding:var(--s4) var(--s3) var(--s2);text-transform:uppercase;letter-spacing:.04em}
.navi{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:48px;padding:0 var(--s3);border-radius:var(--r);font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--ink-2);text-decoration:none}
.navi:hover{background:var(--bg-2);color:var(--ink)}
.navi[aria-current="page"]{background:var(--accent);color:var(--ink)}
.navi--sm{min-height:40px;font-size:var(--fs-md);font-weight:var(--fw-reg)}
.navi .pill{margin-left:auto}

/* Page head */
.phead{display:flex;flex-direction:column;gap:var(--s2)}
.phead__row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.ptitle{font-size:var(--fs-2xl);line-height:1.15;font-weight:var(--fw-bold);letter-spacing:-0.03em}
.psub{font-size:var(--fs-md);color:var(--ink-2);max-width:60ch}
.back{display:inline-flex;align-items:center;gap:var(--s2);min-height:40px;font-size:var(--fs-md);font-weight:var(--fw-bold);text-decoration:none;color:var(--ink)}

/* Big buttons */
.btn--xl{height:56px;padding:0 var(--s5);font-size:var(--fs-lg)}
.btn--full{width:100%}
.btn--dark{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.btn--dark:hover{background:#27272A;color:#FFFFFF}
.btn--ghost{background:transparent;border-color:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--bg-2)}
.btn--red{background:#FFFFFF;border-color:#B8341A;color:#B8341A}

/* Cards */
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.card--tight{padding:var(--s4);gap:var(--s3)}
.card--flush{padding:0;gap:0;overflow:hidden}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.card__title{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:-0.01em}
.card__link{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* The one thing to do now */
.now{background:var(--ink);color:#FFFFFF;border-radius:var(--r);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.now a{color:#FFFFFF}
.now__big{font-size:var(--fs-2xl);line-height:1.1;font-weight:var(--fw-bold);letter-spacing:-0.03em}
.now__big .hi{color:var(--ink)}
.now__sub{font-size:var(--fs-md);color:#D4D4D8}
.now .btn--p{color:var(--ink)}
.now--calm{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.now--calm .now__sub{color:var(--ink-2)}

/* Big numbers */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.stat{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
.stat__n{font-size:var(--fs-2xl);line-height:1.1;font-weight:var(--fw-bold);letter-spacing:-0.03em}
.stat__l{font-size:var(--fs-md);color:var(--muted)}
.stat__d{font-size:var(--fs-sm);font-weight:var(--fw-bold)}

/* Status pills: always a word, colour helps */
.pill{display:inline-flex;align-items:center;gap:var(--s2);height:26px;padding:0 var(--s3);border-radius:var(--r);font-size:var(--fs-sm);font-weight:var(--fw-bold);white-space:nowrap;background:var(--bg-2);border:1px solid var(--line);color:var(--ink)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#A1A1AA}
.pill--new{background:var(--accent);border-color:var(--accent)}
.pill--new::before{background:var(--ink)}
.pill--busy::before{background:#D97706}
.pill--go::before{background:#2563EB}
.pill--done::before{background:#0B6B4F}
.pill--bad{background:#FEF3F2;border-color:#FECDCA;color:#B8341A}
.pill--bad::before{background:#B8341A}
.pill--plain::before{display:none}
.num{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 var(--s2);border-radius:var(--r);background:var(--ink);color:#FFFFFF;font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.navi[aria-current="page"] .num{background:var(--ink)}

/* Big tabs (filters) */
.tabs{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tab{flex:none;display:inline-flex;align-items:center;gap:var(--s2);height:44px;padding:0 var(--s4);border-radius:var(--r);border:1px solid var(--line);background:var(--bg);font:inherit;font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--ink);cursor:pointer;white-space:nowrap;text-decoration:none}
.tab:hover{border-color:var(--ink)}
.tab.on{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.tab.on .num{background:var(--accent);color:var(--ink)}

/* List rows (orders, products, shops) */
.list2{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);background:var(--bg);min-height:76px}
.item:last-child{border-bottom:0}
.item:hover{background:#FBFBFC}
.item--noimg{grid-template-columns:minmax(0,1fr) auto}
.item__img{width:56px;height:56px;border-radius:var(--r);border:1px solid var(--line);background:#FFFFFF;object-fit:contain}
.item__ph{width:56px;height:56px;border-radius:var(--r);background:var(--ph);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-sm);color:var(--muted)}
.item__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.item__t{font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item__s{font-size:var(--fs-md);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item__end{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2)}
.item__p{font-size:var(--fs-md);font-weight:var(--fw-bold)}

/* Desktop table (admin) */
.tbl{width:100%;border-collapse:collapse;background:var(--bg);font-size:var(--fs-md)}
.tbl th{text-align:left;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);background:#FBFBFC;white-space:nowrap}
.tbl td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.tblwrap{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto}

/* Order progress: 4 big steps */
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.step4{display:flex;flex-direction:column;gap:var(--s2);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--muted)}
.step4__bar{height:6px;border-radius:3px;background:var(--line)}
.step4.done{color:var(--ink)}
.step4.done .step4__bar{background:var(--ink)}
.step4.now{color:var(--ink)}
.step4.now .step4__bar{background:var(--accent);box-shadow:inset 0 0 0 1px #3EE6B0}

/* Tick list (packing) */
.checks{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.check{display:grid;grid-template-columns:32px 56px minmax(0,1fr) auto;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border:0;border-bottom:1px solid var(--line);background:var(--bg);font:inherit;color:var(--ink);text-align:left;cursor:pointer;min-height:80px;width:100%}
.check:last-child{border-bottom:0}
.check__box{width:28px;height:28px;border-radius:var(--r);border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;background:var(--bg)}
.check.on{background:#EFE9FD}
.check.on .check__box{background:var(--accent);border-color:var(--ink)}

/* Big choice tiles (add products, more menu) */
.tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.tile{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);min-height:88px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;width:100%}
.tile:hover{border-color:var(--ink)}
.tile__i{width:48px;height:48px;border-radius:var(--r);background:var(--bg-2);display:inline-flex;align-items:center;justify-content:center;flex:none}
.tile--hero .tile__i{background:var(--accent)}
.tile__t{font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:1.25}
.tile__s{font-size:var(--fs-md);color:var(--muted)}
.tile__go{margin-left:auto;flex:none;color:var(--muted)}

/* Big code (handover) */
.bigcode{display:flex;gap:var(--s2);justify-content:center}
.bigcode span{width:56px;height:68px;border:2px solid var(--ink);border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-2xl);font-weight:var(--fw-bold);background:var(--bg)}

/* Bar chart (simple, CSS only) */
.bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s2);align-items:end;height:160px}
.bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:var(--s2);height:100%;font-size:var(--fs-sm);color:var(--muted)}
.bar i{display:block;width:100%;max-width:40px;border-radius:4px 4px 0 0;background:var(--ink)}
.bar.today i{background:var(--accent);box-shadow:inset 0 0 0 1px #3EE6B0}

/* Map placeholder (admin live map) */
.map{position:relative;height:420px;border-radius:var(--r);border:1px solid var(--line);background:
  linear-gradient(#ECECEF 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,#ECECEF 1px,transparent 1px) 0 0/48px 48px,#F7F6FB;overflow:hidden}
.map__pin{position:absolute;display:inline-flex;align-items:center;gap:var(--s2);height:30px;padding:0 var(--s3);border-radius:var(--r);background:var(--ink);color:#FFFFFF;font-size:var(--fs-sm);font-weight:var(--fw-bold);white-space:nowrap}
.map__pin--shop{background:var(--accent);color:var(--ink);border:1px solid #3EE6B0}
.map__pin--late{background:#B8341A}

/* Phone frames for popups */
.phone{width:360px;border:1px solid var(--line);border-radius:18px;background:var(--bg);overflow:hidden;box-shadow:0 8px 24px rgba(23,20,43,.08)}
.alert{background:var(--ink);color:#FFFFFF;padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s4);min-height:640px}

/* Help bubble */
.tip{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);background:#EFE9FD;border:1px solid #E2D3FF;border-radius:var(--r);font-size:var(--fs-md);color:var(--ink)}
.warn{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);background:#FFFAEB;border:1px solid #FEDF89;border-radius:var(--r);font-size:var(--fs-md);color:var(--ink)}
.bad{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);background:#FEF3F2;border:1px solid #FECDCA;border-radius:var(--r);font-size:var(--fs-md);color:var(--ink)}

/* Empty state */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3);padding:var(--s7) var(--s5);background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.empty__i{width:64px;height:64px;border-radius:var(--r);background:var(--bg-2);display:inline-flex;align-items:center;justify-content:center}

/* Big open/closed switch */
.openbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.bigswitch{position:relative;width:64px;height:36px;border-radius:18px;background:#A1A1AA;border:0;cursor:pointer;flex:none}
.bigswitch::after{content:"";position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;background:#FFFFFF;transition:left .15s}
.bigswitch.on{background:var(--ink)}
.bigswitch.on::after{left:32px;background:var(--accent)}

/* Two-column helpers */
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
.kv{display:grid;grid-template-columns:minmax(0,1fr) fit-content(65%);gap:var(--s2) var(--s4);font-size:var(--fs-md)}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:var(--fw-bold);text-align:right;min-width:0;overflow-wrap:anywhere}
.textarea{width:100%;min-height:110px;padding:var(--s3) var(--s4);border:1px solid #A1A1AA;border-radius:var(--r);font:inherit;font-size:var(--fs-md);resize:vertical}

/* Phone tab bar for dashboards */
.dtabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--bg);border-top:1px solid var(--line);padding:6px 4px calc(8px + env(safe-area-inset-bottom));font-family:var(--font)}
.dtabs a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:#4A4560;text-decoration:none}
.dtabs__i{display:inline-flex;align-items:center;justify-content:center;width:56px;height:30px;border-radius:var(--r)}
.dtabs a[aria-current="page"]{color:var(--ink)}
.dtabs a[aria-current="page"] .dtabs__i{background:var(--accent)}
.dtabs .num{position:absolute;top:0;right:calc(50% - 30px);background:var(--ink)}

/* Sticky action bar inside dashboards (phone) */
.dbar{position:fixed;left:0;right:0;bottom:var(--dtabs-h,70px);z-index:40;display:flex;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--bg);border-top:1px solid var(--line)}
.dbar .btn{flex:1}

/* Spec boards reuse .spec/.specgrid from app.css */
.specgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (min-width:768px){
  .dmain{padding:var(--s6) var(--s6) var(--s7)}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tiles--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ptitle{font-size:var(--fs-2xl)}
}
@media (min-width:1024px){
  .dash{grid-template-columns:248px minmax(0,1fr)}
  .side{display:flex;flex-direction:column;gap:var(--s4);position:sticky;top:0;height:100vh;overflow-y:auto;padding:var(--s5) var(--s3);background:var(--bg);border-right:1px solid var(--line)}
  .dtop{display:none}
  .dtabs{display:none}
  .dbar{position:static;padding:0;background:transparent;border:0}
  .dbar .btn{flex:none}
  .dmain{padding:var(--s6) var(--s7) var(--s7);max-width:1240px}
  .dmain--narrow{max-width:820px}
  .cols{grid-template-columns:minmax(0,1fr) 360px;align-items:start}
  .cols--half{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .now{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--s6)}
  .now__big{font-size:var(--fs-2xl)}
}
@media (max-width:1023px){
  .hide-phone{display:none !important}
}
@media (min-width:1024px){
  .hide-desk{display:none !important}
}
.dbar-space{display:block;height:72px}
@media (min-width:1024px){.dbar-space{display:none}}

/* Charts (Kelmo chart style on Nearbury tokens) */
.chart{display:flex;flex-direction:column;gap:var(--s5)}
.chart__top{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.chart__lbl{font-size:var(--fs-sm);color:#4A4560;font-weight:var(--fw-reg)}
.chart__big{font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:-0.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.chart__sub{font-size:var(--fs-md);color:#4A4560}
.up{color:#0B6B4F;font-weight:var(--fw-bold)}
.dn{color:#B8341A;font-weight:var(--fw-bold)}
.legend{display:flex;align-items:center;gap:var(--s5);font-size:var(--fs-sm);color:#4A4560}
.legend span{display:inline-flex;align-items:center;gap:var(--s2)}
.chart svg.lc{display:block;width:100%;height:auto}
.hbars{display:flex;flex-direction:column;gap:var(--s1)}
.hb{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) 72px;gap:var(--s3);align-items:center;min-height:36px;font-size:var(--fs-md)}
.hb__t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb__v{text-align:right;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.track{height:8px;border-radius:4px;background:#F2F4F7;overflow:hidden;display:block}
.track i{display:block;height:8px;border-radius:4px;background:var(--ink)}
.hb--top .track i{background:var(--ink)}
.spark{display:block;width:100%;height:32px;margin-top:var(--s2)}
@media (max-width:767px){.hb{grid-template-columns:minmax(0,96px) minmax(0,1fr) 56px;font-size:var(--fs-md)}.chart__big{font-size:var(--fs-2xl)}}

/* Popups opened in place (sheet on phone, centred box on desktop) */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(23,20,43,.45);display:flex;align-items:flex-end;justify-content:center;padding:0}
.overlay .sheet{width:100%;max-width:480px;border-radius:12px 12px 0 0;max-height:90vh;overflow:auto}
@media (min-width:768px){.overlay{align-items:center;padding:var(--s5)}.overlay .sheet{border-radius:var(--r)}}

/* Sidebar column background runs the full page height */
@media (min-width:1024px){.dash{background:linear-gradient(90deg,#FFFFFF 247px,var(--line) 247px,var(--line) 248px,var(--bg-2) 248px)}.side{border-right:0}}

/* Search (Shopify style) */
.side__search{display:flex;align-items:center;gap:var(--s3);min-height:44px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);color:#4A4560;font:inherit;font-size:var(--fs-md);cursor:pointer;text-align:left;width:100%}
.side__search span{flex:1}
.side__search kbd{font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-bold);border:1px solid var(--line);border-radius:4px;padding:1px var(--s2);background:#FFFFFF;color:#4A4560}
.seg2{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);padding:2px;gap:2px;background:#FFFFFF}
.seg2 button{height:36px;padding:0 var(--s3);border:0;border-radius:4px;background:transparent;font:inherit;font-size:var(--fs-md);font-weight:var(--fw-reg);color:#4A4560;cursor:pointer}
.seg2 button.on{background:var(--ink);color:#FFFFFF;font-weight:var(--fw-bold)}

/* Brand A */
.navi[aria-current="page"]{background:var(--brand-mist);color:var(--brand-deep)}.tab.on{background:var(--brand);border-color:var(--brand);color:#FFFFFF}.seg2 button.on{background:var(--brand);color:#FFFFFF}.bigswitch.on{background:var(--brand)}.check.on .check__box{background:var(--brand);border-color:var(--brand);color:#FFFFFF}.dtabs a[aria-current="page"] .dtabs__i{background:var(--brand);color:#FFFFFF}
.p a.btn--p,.p .btn--p,.d .btn--p,.d a.btn--p,.now .btn--p,.now a.btn--p{color:#FFFFFF}