:root{
    --espresso:#58382C;--taupe:#C3A494;--cream:#FCF5F0;--peach:#FFD4B4;
    --espresso-light:#7a5142;--espresso-soft:rgba(88,56,44,.08);
    --ink:#2a1d17;--muted:#8a6e63;--line:rgba(88,56,44,.14);--line-strong:rgba(88,56,44,.28);
    --positive:#5e8d4a;
    --shadow-sm:0 1px 2px rgba(88,56,44,.06);
    --shadow-md:0 2px 8px rgba(88,56,44,.08);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',sans-serif;background:var(--cream);color:var(--ink);line-height:1.5;font-size:15px;padding-bottom:env(safe-area-inset-bottom)}
button{font-family:inherit;cursor:pointer}

/* HEADER — mobile-first compact */
.header{background:var(--espresso);color:var(--cream);padding:24px 18px 22px;position:relative;overflow:hidden;padding-top:max(24px,env(safe-area-inset-top))}
.header::before{content:'';position:absolute;top:-50%;right:-30%;width:300px;height:300px;background:radial-gradient(circle,var(--peach) 0%,transparent 60%);opacity:.1;pointer-events:none}
.brand{font-family:'Cormorant Garamond',serif;font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:var(--peach);margin-bottom:10px;font-weight:500}
.header h1{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:500;line-height:1.05;margin-bottom:4px;letter-spacing:-.01em}
.header h1 em{font-style:italic;color:var(--peach);display:block;font-size:20px;margin-top:2px}
.header-sub{font-size:12.5px;color:var(--taupe);font-weight:400;line-height:1.5;margin-top:8px}

/* Top stats row in header */
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,212,180,.18)}
.hero-stat{display:flex;flex-direction:column}
.hero-stat .lbl{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--peach);font-weight:600;margin-bottom:2px}
.hero-stat .val{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--cream);font-weight:500;line-height:1.1}
.hero-stat .val small{font-family:'Inter',sans-serif;font-size:10px;color:var(--taupe);font-weight:400;display:block;margin-top:1px}

/* TABS — bottom nav style for mobile */
.tabs-wrap{background:white;border-bottom:1px solid var(--line-strong);position:sticky;top:0;z-index:50;box-shadow:var(--shadow-sm);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs-wrap::-webkit-scrollbar{display:none}
.tabs{display:flex;min-width:max-content}
.tab{background:none;border:none;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:14px 16px;border-bottom:3px solid transparent;transition:color .15s;white-space:nowrap;display:flex;align-items:center;gap:8px;min-height:48px}
.tab:active{background:var(--cream)}
.tab.active{color:var(--espresso);border-bottom-color:var(--espresso)}
.tab-num{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:var(--taupe);line-height:1;letter-spacing:0;font-weight:400}
.tab.active .tab-num{color:var(--peach);background:var(--espresso);padding:1px 7px;border-radius:2px}

.panel{display:none;padding:0}
.panel.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

section{padding:24px 18px}
.kicker{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);margin-bottom:4px;font-weight:700}
h2.title{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:500;color:var(--espresso);margin-bottom:4px;line-height:1.1}
.sub{color:var(--muted);font-size:13px;margin-bottom:20px;line-height:1.5}
h3.subtitle{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;color:var(--espresso);margin-top:28px;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.vat-tag{display:inline-block;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;padding:3px 7px;border-radius:2px;background:var(--espresso-soft);color:var(--espresso)}

/* KPI CARDS — stack on mobile */
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
/* Report 05's Pacing row is SIX cards, not the Sales overview's four. A modifier
   rather than a change to .kpi-grid, because the Sales report shares that class
   and its four-card row must not reflow. */
.kpi-grid.six{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.kpi{background:white;border:1px solid var(--line);border-radius:6px;padding:14px;box-shadow:var(--shadow-sm)}
.kpi-label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:700}
.kpi-value{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:500;color:var(--espresso);line-height:1.05;margin-bottom:4px;word-break:break-word}
.kpi-value.lg{font-size:22px}
.kpi-value.sm{font-size:18px}
.kpi-unit{font-family:'Inter',sans-serif;font-size:10px;color:var(--muted);font-weight:400;margin-left:3px}
.kpi-sub{font-size:11px;color:var(--muted);padding-top:8px;border-top:1px solid var(--line);margin-top:6px;line-height:1.4}
.kpi-sub strong{color:var(--espresso);font-weight:700}
.kpi.accent{background:var(--espresso);color:var(--cream);border-color:var(--espresso);grid-column:1/-1}
.kpi.accent .kpi-label{color:var(--peach)}
.kpi.accent .kpi-value{color:var(--cream);font-size:32px}
.kpi.accent .kpi-unit{color:var(--taupe)}
.kpi.accent .kpi-sub{color:var(--taupe);border-top-color:rgba(255,212,180,.2)}
.kpi.accent .kpi-sub strong{color:var(--peach)}

/* RANK BARS */
.bar-list{background:white;border:1px solid var(--line);border-radius:6px;padding:8px 14px;box-shadow:var(--shadow-sm);margin-bottom:8px}
.bar-row{padding:10px 0;border-bottom:1px solid var(--line)}
.bar-row:last-child{border-bottom:none}
.bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.bar-name{font-size:13px;color:var(--ink);font-weight:600;flex:1;min-width:0;line-height:1.3}
.bar-meta{font-size:10px;color:var(--muted);font-weight:500;margin-top:1px}
.bar-val{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;color:var(--espresso);text-align:right;white-space:nowrap;line-height:1.1}
.bar-val small{display:block;font-family:'Inter',sans-serif;font-size:9.5px;color:var(--muted);font-weight:400;margin-top:1px}
.bar-track{height:6px;background:var(--cream);border-radius:3px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--espresso),var(--taupe));border-radius:3px;transition:width .4s ease}

/* CATEGORY LIST (replaces wide table on mobile) */
.cat-list{background:white;border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:var(--shadow-sm)}
.cat-item{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}
.cat-item:last-child{border-bottom:none}
.cat-item.total{background:var(--espresso);color:var(--cream)}
.cat-item.total .ci-name,.cat-item.total .ci-pct,.cat-item.total .ci-amt{color:var(--cream)}
.cat-item.total .ci-meta{color:var(--peach)}
.cat-item.total .ci-inc{color:var(--taupe)}
.ci-left{flex:1;min-width:0}
.ci-name{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3}
.ci-meta{font-size:10.5px;color:var(--muted);margin-top:2px}
.ci-right{text-align:right;white-space:nowrap}
.ci-amt{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;color:var(--espresso);line-height:1.1}
.ci-inc{font-size:10px;color:var(--muted);margin-top:1px}
.ci-pct{font-size:10.5px;color:var(--taupe);font-weight:600;margin-top:1px}

/* BRANCH ACCORDION (Tab 2) */
.search-row{margin-bottom:14px;display:flex;flex-direction:column;gap:8px}
.search-input{width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:6px;background:white;font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);-webkit-appearance:none}
.search-input:focus{outline:none;border-color:var(--espresso)}
.search-btns{display:flex;gap:6px}
.expand-btn{flex:1;padding:10px 8px;background:white;border:1px solid var(--line-strong);color:var(--espresso);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:6px;min-height:40px}
.expand-btn:active{background:var(--espresso);color:var(--peach);border-color:var(--espresso)}

.branch-block{background:white;border:1px solid var(--line);border-radius:6px;margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow-sm)}
.branch-head{padding:14px 16px;background:var(--espresso);color:var(--cream);display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:56px}
.branch-head:active{background:var(--espresso-light)}
.bh-left{flex:1;min-width:0}
.bh-name{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;line-height:1.15;margin-bottom:2px}
.bh-meta{font-size:10px;color:var(--peach);letter-spacing:.04em}
.bh-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.bh-amt{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--cream);font-weight:500;white-space:nowrap;line-height:1.1}
.bh-inc{font-size:10px;color:var(--taupe);white-space:nowrap}
.toggle{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--peach);transition:transform .25s;flex-shrink:0;width:18px;text-align:center}
.branch-block.collapsed .toggle{transform:rotate(-90deg)}
.branch-body{padding:6px 14px 14px;display:block}
.branch-block.collapsed .branch-body{display:none}

/* DOCTOR CARD inside branch */
.doc-block{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.doc-block:first-child{margin-top:6px;padding-top:6px;border-top:none}
.doc-head{padding:6px 0 10px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.doc-name{font-weight:700;font-size:14px;color:var(--espresso);line-height:1.25;flex:1}
.doc-meta-sm{font-size:10px;color:var(--muted);margin-top:1px;font-weight:500}
.doc-amt{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--espresso);font-weight:500;text-align:right;white-space:nowrap;line-height:1.1}
.doc-amt small{display:block;font-family:'Inter',sans-serif;font-size:9.5px;color:var(--muted);font-weight:400}

.prod-list{list-style:none;padding:0;margin:6px 0 0}
.prod-li{padding:10px 0;border-bottom:1px dotted var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.prod-li:last-child{border-bottom:none}
.pl-left{flex:1;min-width:0}
.pl-name{font-size:13px;color:var(--ink);font-weight:600;line-height:1.3}
.pl-cat{display:inline-block;font-size:9px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-weight:600;margin-top:2px}
.pl-qty{font-size:10.5px;color:var(--muted);margin-top:2px}
.pl-right{text-align:right;white-space:nowrap}
.pl-ex{font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--espresso);font-weight:500;line-height:1.1}
.pl-inc{font-size:9.5px;color:var(--muted);margin-top:1px}

/* DOCTOR LEADERBOARD CARDS */
.doc-card{background:white;border:1px solid var(--line);border-radius:6px;padding:14px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;box-shadow:var(--shadow-sm)}
.doc-card .rank{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--taupe);font-weight:500;width:32px;flex-shrink:0;line-height:1}
.doc-card .rank.top1{color:var(--espresso);font-weight:600}
.doc-card .info{flex:1;min-width:0}
.doc-card .name{font-size:14px;font-weight:700;color:var(--espresso);line-height:1.25;margin-bottom:3px}
.doc-card .branches{font-size:10.5px;color:var(--muted);line-height:1.4}
.doc-card .lines{font-size:10px;color:var(--taupe);font-weight:600;letter-spacing:.04em;margin-top:3px}
.doc-card .money{text-align:right;white-space:nowrap}
.doc-card .ex{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:500;color:var(--espresso);line-height:1.05}
.doc-card .inc{font-size:10px;color:var(--muted);margin-top:1px}
.doc-card .pct{font-size:10px;color:var(--taupe);font-weight:600;margin-top:2px}

/* PRODUCT CARDS */
.prod-card{background:white;border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin-bottom:8px;box-shadow:var(--shadow-sm)}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pc-left{flex:1;min-width:0}
.pc-rank{display:inline-block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;color:var(--taupe);font-weight:500;margin-right:6px}
.pc-name{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3;display:inline}
.pc-cat{display:inline-block;font-size:9px;color:var(--espresso);background:var(--espresso-soft);padding:2px 6px;border-radius:2px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin-top:6px}
.pc-right{text-align:right;white-space:nowrap}
.pc-ex{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;color:var(--espresso);line-height:1.05}
.pc-inc{font-size:10px;color:var(--muted);margin-top:1px}
.pc-meta{display:flex;gap:14px;margin-top:8px;font-size:10.5px;color:var(--muted)}
.pc-meta strong{color:var(--espresso);font-weight:700}

/* TOTAL CARD */
.total-card{background:var(--espresso);color:var(--cream);border-radius:6px;padding:16px;margin-top:10px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.total-card .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--peach);font-weight:700}
.total-card .meta{font-size:10px;color:var(--taupe);margin-top:2px}
.total-card .amt{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;color:var(--cream);line-height:1.1;text-align:right}
.total-card .amt small{display:block;font-family:'Inter',sans-serif;font-size:10.5px;color:var(--taupe);font-weight:400;margin-top:1px}

/* FOOTER */
footer{background:var(--espresso);color:var(--taupe);padding:24px 18px;margin-top:32px;text-align:center;padding-bottom:max(24px,env(safe-area-inset-bottom))}
footer .brand{color:var(--peach);margin-bottom:6px}
footer p{font-size:10.5px;letter-spacing:.04em;line-height:1.5}

/* DESKTOP refinements */
@media (min-width:768px){
    .header{padding:36px 32px 32px}
    .header h1{font-size:42px}
    .header h1 em{font-size:28px}
    .header-sub{font-size:14px;max-width:600px}
    .hero-stats{grid-template-columns:repeat(4,1fr);gap:18px}
    .hero-stat .val{font-size:22px}
    section{padding:36px 32px;max-width:1100px;margin:0 auto}
    .kpi-grid{grid-template-columns:repeat(4,1fr);gap:14px}
    .kpi-grid.six{grid-template-columns:repeat(6,1fr);gap:12px}
    .kpi-grid.six .kpi-value{font-size:21px}
    .kpi-grid.six .kpi.accent .kpi-value{font-size:24px}
    .kpi-grid.six .kpi-sub{font-size:10.5px}
    .kpi.accent{grid-column:auto}
    .kpi-value{font-size:30px}
    .kpi.accent .kpi-value{font-size:34px}
    .tabs{max-width:1100px;margin:0 auto;padding:0 32px}
    .tab{padding:18px 24px;font-size:12px}
    h2.title{font-size:32px}
    .bar-list{padding:10px 20px}
    .branch-head{padding:18px 22px;min-height:64px}
    .bh-name{font-size:22px}
    .bh-amt{font-size:22px}
    .branch-body{padding:8px 22px 22px}
    footer{margin-top:48px;padding:32px 32px}
}

.prod-card{cursor:pointer;transition:border-color .15s, box-shadow .15s}
.prod-card:active{background:var(--cream)}
.prod-card.expanded{border-color:var(--espresso);box-shadow:var(--shadow-md)}
.pc-chevron{display:inline-block;font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--taupe);transition:transform .25s;margin-left:6px}
.prod-card.expanded .pc-chevron{transform:rotate(90deg);color:var(--espresso)}
.pc-sellers{display:none;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.prod-card.expanded .pc-sellers{display:block;animation:fade .2s}
.pc-sellers-title{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px;display:flex;justify-content:space-between;align-items:baseline}
.pc-sellers-title strong{color:var(--espresso)}
.seller-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px dotted var(--line)}
.seller-row:last-child{border-bottom:none}
.seller-rank{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;color:var(--taupe);font-weight:500;flex-shrink:0;width:18px;line-height:1.4}
.seller-info{flex:1;min-width:0}
.seller-name{font-size:13px;font-weight:600;color:var(--espresso);line-height:1.25}
.seller-branch{font-size:10.5px;color:var(--muted);margin-top:1px}
.seller-meta{font-size:9.5px;color:var(--taupe);font-weight:600;letter-spacing:.04em;margin-top:2px}
.seller-money{text-align:right;white-space:nowrap;flex-shrink:0}
.seller-ex{font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:500;color:var(--espresso);line-height:1.05}
.seller-inc{font-size:9.5px;color:var(--muted);margin-top:1px}

.doc-card{cursor:pointer;transition:border-color .15s, box-shadow .15s;flex-wrap:wrap}
.doc-card:active{background:var(--cream)}
.doc-card.expanded{border-color:var(--espresso);box-shadow:var(--shadow-md)}
.doc-chevron{display:inline-block;font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--taupe);transition:transform .25s;margin-left:6px}
.doc-card.expanded .doc-chevron{transform:rotate(90deg);color:var(--espresso)}
.dc-products{display:none;width:100%;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.doc-card.expanded .dc-products{display:block;animation:fade .2s}
.dc-products-title{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px;display:flex;justify-content:space-between;align-items:baseline}
.dc-products-title strong{color:var(--espresso)}
.dc-prod-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px dotted var(--line)}
.dc-prod-row:last-child{border-bottom:none}
.dc-prod-info{flex:1;min-width:0}
.dc-prod-name{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3}
.dc-prod-cat{font-size:9px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-weight:600;margin-top:2px;display:inline-block}
.dc-prod-meta{font-size:10px;color:var(--taupe);font-weight:500;letter-spacing:.02em;margin-top:3px}
.dc-prod-money{text-align:right;white-space:nowrap;flex-shrink:0}
.dc-prod-ex{font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:500;color:var(--espresso);line-height:1.05}
.dc-prod-inc{font-size:9.5px;color:var(--muted);margin-top:1px}

.pc-stock{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:11px;font-size:11px;font-weight:700;letter-spacing:.02em;border:1px solid var(--line);background:rgba(195,164,148,.10);color:var(--espresso)}
.pc-stock.low{background:rgba(255,212,180,.55);border-color:#FFD4B4;color:#7a4515}
.pc-stock.zero{background:rgba(204,68,68,.10);border-color:rgba(204,68,68,.4);color:#a02a2a;font-weight:800}
.pc-stock.unknown{background:transparent;border-style:dashed;color:var(--muted);font-weight:500}
.pc-stock-icon{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.pc-stock-tag{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600;margin-left:4px}

.pc-stock.pending{background:rgba(195,164,148,.15);border-color:var(--taupe);color:var(--taupe);font-weight:600}

/* === Stock tab additions === */
.cat-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;padding-bottom:4px}
.cat-chip{background:var(--cream);border:1px solid var(--taupe);color:var(--espresso);padding:5px 10px;border-radius:14px;font-family:'Inter',sans-serif;font-size:11px;cursor:pointer;transition:all 0.15s;white-space:nowrap}
.cat-chip:hover{background:var(--peach)}
.cat-chip.active{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
.chip-n{opacity:0.7;margin-left:3px;font-weight:600}
.cat-divider{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--espresso);margin:18px 0 8px 0;padding-bottom:4px;border-bottom:1px solid var(--taupe);letter-spacing:0.04em;text-transform:uppercase;font-weight:600}
.stock-card{background:var(--cream);border:1px solid var(--taupe);border-radius:14px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:all 0.18s}
.stock-card:hover{background:#fff}
.stock-card.low{border-left:4px solid #d97a3a}
.stock-card.zero{border-left:4px solid #c4493a}
.sc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sc-left{flex:1;min-width:0}
.sc-name{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;color:var(--espresso)}
.sc-chevron{color:var(--taupe);margin-left:4px;transition:transform 0.18s;display:inline-block}
.stock-card.expanded .sc-chevron{transform:rotate(90deg)}
.sc-cat{font-family:'Inter',sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--taupe);margin-top:4px;display:inline-block}
.sc-right{text-align:right;flex-shrink:0}
.sc-total{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:600;color:var(--espresso);line-height:1}
.sc-total.low{color:#d97a3a}
.sc-total.zero{color:#c4493a}
.sc-unit{font-family:'Inter',sans-serif;font-size:10px;text-transform:uppercase;color:var(--taupe);letter-spacing:0.06em;margin-top:2px}
.sc-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;font-family:'Inter',sans-serif;font-size:11px;color:var(--taupe)}
.status-pill{padding:2px 8px;border-radius:6px;font-weight:500}
.status-pill.low{background:rgba(217,122,58,0.12);color:#d97a3a}
.status-pill.zero{background:rgba(196,73,58,0.12);color:#c4493a}
.sc-branches{display:none;margin-top:12px;padding-top:12px;border-top:1px dashed var(--taupe)}
.stock-card.expanded .sc-branches{display:block}
.sc-branches-title{font-family:'Inter',sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--taupe);margin-bottom:8px}
.branch-stock-row{display:flex;justify-content:space-between;padding:6px 10px;font-family:'Inter',sans-serif;font-size:13px;color:var(--espresso);border-radius:6px;margin-bottom:3px}
.branch-stock-row:nth-child(even){background:rgba(195,164,148,0.08)}
.branch-stock-row.wh-row{background:rgba(88,56,44,0.06);font-weight:500}
.branch-stock-name{color:var(--espresso)}
.branch-stock-val{font-family:'Cormorant Garamond',serif;font-weight:600}


/* ===== 04 TARGETS TAB ===== */
:root{--tg-green:#5e8d4a;--tg-amber:#c98a2e;--tg-red:#b0503c}
.tg-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.tg-s{background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px 11px;text-align:center;box-shadow:var(--shadow-sm)}
.tg-s.tot{background:var(--espresso);border-color:var(--espresso)}
.tg-s .l{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--taupe);font-weight:700}
.tg-s.tot .l{color:rgba(255,255,255,.7)}
.tg-s .p{font-family:'Cormorant Garamond',serif;font-size:31px;line-height:1.05;color:var(--espresso);margin:4px 0 2px}
.tg-s.tot .p{color:#fff}
.tg-s .n{font-size:10.5px;color:var(--muted);line-height:1.45;font-variant-numeric:tabular-nums}
.tg-s.tot .n{color:rgba(255,255,255,.8)}
.tg-s .b{height:5px;border-radius:99px;background:var(--espresso-soft);margin-top:8px;position:relative}
.tg-s.tot .b{background:rgba(255,255,255,.25)}
.tg-s .b i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--taupe)}
.tg-s.tot .b i{background:var(--peach)}
.tg-s .b u{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--espresso);opacity:.5}
.tg-s.tot .b u{background:#fff;opacity:.85}
.tg-note{background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:11px 13px;font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.tg-note strong{color:var(--espresso)}
.tg-chips{display:flex;gap:6px;padding-bottom:2px;margin-bottom:10px}
.tg-chip{flex:none;background:#fff;border:1px solid var(--line-strong);border-radius:99px;padding:7px 14px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.tg-chip.on{background:var(--espresso);border-color:var(--espresso);color:#fff}
.tg-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:6px;background:#fff;box-shadow:var(--shadow-sm)}
table.tg-t{width:100%;border-collapse:collapse;font-size:12.5px;min-width:420px}
table.tg-t thead th{background:var(--cream);color:var(--espresso);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;padding:9px 8px;text-align:right;border-bottom:1px solid var(--line-strong);white-space:nowrap}
table.tg-t thead th:first-child{text-align:left;padding-left:12px}
table.tg-t td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top;font-variant-numeric:tabular-nums}
table.tg-t td:first-child{text-align:left;padding-left:12px}
table.tg-t tbody tr:last-child td{border-bottom:none}
table.tg-t .dn{font-size:13px;font-weight:600;color:var(--ink);line-height:1.25}
table.tg-t .db{font-size:10px;color:var(--muted);margin-top:1px}
table.tg-t .pc{font-size:14px;font-weight:700;line-height:1.15}
table.tg-t .av{font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap}
.pc.g{color:var(--tg-green)} .pc.a{color:var(--tg-amber)} .pc.r{color:var(--tg-red)} .pc.n{color:var(--line-strong)}
.tg-count{font-size:12px;color:var(--muted);margin:10px 0 0}
.tg-foot{font-size:12px;color:var(--muted);line-height:1.7;margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.tg-foot strong{color:var(--espresso)}
#targets .vD{display:none}
#targets.viewDay .vM{display:none}
#targets.viewDay .vD{display:block}
#targets.viewDay div.tg-sum.vD{display:grid}
@media(max-width:400px){table.tg-t{font-size:12px}table.tg-t thead th,table.tg-t td{padding:8px 6px}}
/* targets sub-tabs */
.tg-subtabs{display:flex;gap:8px;margin:2px 0 14px}
.tg-subtab{flex:1;background:#fff;border:1px solid var(--line-strong);border-radius:8px;padding:11px 10px;font:inherit;
font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.tg-subtab.on{background:var(--espresso);border-color:var(--espresso);color:#fff}
.tgsub{display:none}.tgsub.on{display:block}
#tgBranches .bD{display:none}
#tgBranches.viewDayB .bM{display:none}
#tgBranches.viewDayB .bD{display:block}
#tgBranches.viewDayB div.tg-sum.bD{display:grid}
table.tg-t tfoot td{text-align:right}table.tg-t tfoot td:first-child{text-align:left}
.pcv{font-size:13.5px;font-weight:700;color:var(--espresso);font-variant-numeric:tabular-nums}
.ret-tag{color:#b0503c;font-weight:600}
.branch-stock-val small{color:var(--muted);font-weight:500}

/* ===== 04 TARGETS TAB ===== */
:root{--tg-green:#5e8d4a;--tg-amber:#c98a2e;--tg-red:#b0503c}
.tg-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.tg-s{background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px 11px;text-align:center;box-shadow:var(--shadow-sm)}
.tg-s.tot{background:var(--espresso);border-color:var(--espresso)}
.tg-s .l{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--taupe);font-weight:700}
.tg-s.tot .l{color:rgba(255,255,255,.7)}
.tg-s .p{font-family:'Cormorant Garamond',serif;font-size:31px;line-height:1.05;color:var(--espresso);margin:4px 0 2px}
.tg-s.tot .p{color:#fff}
.tg-s .n{font-size:10.5px;color:var(--muted);line-height:1.45;font-variant-numeric:tabular-nums}
.tg-s.tot .n{color:rgba(255,255,255,.8)}
.tg-s .b{height:5px;border-radius:99px;background:var(--espresso-soft);margin-top:8px;position:relative}
.tg-s.tot .b{background:rgba(255,255,255,.25)}
.tg-s .b i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--taupe)}
.tg-s.tot .b i{background:var(--peach)}
.tg-s .b u{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--espresso);opacity:.5}
.tg-s.tot .b u{background:#fff;opacity:.85}
.tg-note{background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:11px 13px;font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.tg-note strong{color:var(--espresso)}
.tg-chips{display:flex;gap:6px;padding-bottom:2px;margin-bottom:10px}
.tg-chip{flex:none;background:#fff;border:1px solid var(--line-strong);border-radius:99px;padding:7px 14px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.tg-chip.on{background:var(--espresso);border-color:var(--espresso);color:#fff}
.tg-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:6px;background:#fff;box-shadow:var(--shadow-sm)}
table.tg-t{width:100%;border-collapse:collapse;font-size:12.5px;min-width:420px}
table.tg-t thead th{background:var(--cream);color:var(--espresso);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;padding:9px 8px;text-align:right;border-bottom:1px solid var(--line-strong);white-space:nowrap}
table.tg-t thead th:first-child{text-align:left;padding-left:12px}
table.tg-t td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top;font-variant-numeric:tabular-nums}
table.tg-t td:first-child{text-align:left;padding-left:12px}
table.tg-t tbody tr:last-child td{border-bottom:none}
table.tg-t .dn{font-size:13px;font-weight:600;color:var(--ink);line-height:1.25}
table.tg-t .db{font-size:10px;color:var(--muted);margin-top:1px}
table.tg-t .pc{font-size:14px;font-weight:700;line-height:1.15}
table.tg-t .av{font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap}
.pc.g{color:var(--tg-green)} .pc.a{color:var(--tg-amber)} .pc.r{color:var(--tg-red)} .pc.n{color:var(--line-strong)}
.tg-count{font-size:12px;color:var(--muted);margin:10px 0 0}
.tg-foot{font-size:12px;color:var(--muted);line-height:1.7;margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.tg-foot strong{color:var(--espresso)}
#targets .vD{display:none}
#targets.viewDay .vM{display:none}
#targets.viewDay .vD{display:block}
#targets.viewDay div.tg-sum.vD{display:grid}
@media(max-width:400px){table.tg-t{font-size:12px}table.tg-t thead th,table.tg-t td{padding:8px 6px}}
/* targets sub-tabs */
.tg-subtabs{display:flex;gap:8px;margin:2px 0 14px}
.tg-subtab{flex:1;background:#fff;border:1px solid var(--line-strong);border-radius:8px;padding:11px 10px;font:inherit;
font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.tg-subtab.on{background:var(--espresso);border-color:var(--espresso);color:#fff}
.tgsub{display:none}.tgsub.on{display:block}
#tgBranches .bD{display:none}
#tgBranches.viewDayB .bM{display:none}
#tgBranches.viewDayB .bD{display:block}
#tgBranches.viewDayB div.tg-sum.bD{display:grid}
table.tg-t tfoot td{text-align:right}table.tg-t tfoot td:first-child{text-align:left}
.pcv{font-size:13.5px;font-weight:700;color:var(--espresso);font-variant-numeric:tabular-nums}
.ret-tag{color:#b0503c;font-weight:600}
.branch-stock-val small{color:var(--muted);font-weight:500}
/* ============================================================
   Nouvelage · Daily Sales Live — control bar + live-render additions.
   base.css carries the original report styling untouched.
   ============================================================ */

/* ---------------------------------------------------- control bar ---- */
.cbar{
    position:sticky;top:0;z-index:80;background:var(--espresso);color:var(--cream);
    padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));
    box-shadow:0 1px 0 rgba(255,212,180,.14),0 2px 12px rgba(88,56,44,.18);
}
/* An open drawer is too tall to pin — let it scroll away instead of eating the viewport. */
.cbar:has(.conn.open){position:relative}
/* Tabs pin directly under the collapsed bar, whose height JS publishes as --cbarH. */
.tabs-wrap{top:var(--cbarH,0px)}
.cbar-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cbar-brand{
    font-family:'Cormorant Garamond',serif;font-size:10px;letter-spacing:.3em;
    text-transform:uppercase;color:var(--peach);font-weight:500;margin-right:2px;white-space:nowrap;
}
.cbar-spacer{flex:1 1 auto;min-width:4px}

.seg{display:flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,212,180,.22);border-radius:4px;overflow:hidden}
.seg button{
    background:none;border:none;color:var(--taupe);font-size:10.5px;font-weight:600;
    letter-spacing:.07em;text-transform:uppercase;padding:7px 10px;white-space:nowrap;transition:.15s;
}
.seg button+button{border-left:1px solid rgba(255,212,180,.16)}
.seg button:hover{color:var(--cream)}
.seg button.on{background:var(--peach);color:var(--espresso)}

.cbar label.fld{display:flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--peach);font-weight:600}
.cbar input[type=date]{
    background:rgba(255,255,255,.1);border:1px solid rgba(255,212,180,.25);color:var(--cream);
    border-radius:4px;padding:6px 8px;font-size:12.5px;font-family:'Inter',sans-serif;
    font-variant-numeric:tabular-nums;color-scheme:dark;min-width:135px;
}
.cbar input[type=date]:focus{outline:none;border-color:var(--peach)}

.btn{
    background:var(--peach);color:var(--espresso);border:none;border-radius:4px;
    padding:8px 14px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    display:inline-flex;align-items:center;gap:6px;transition:.15s;white-space:nowrap;
}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* Ghost buttons are drawn for the dark control bar — cream text on a translucent
   white fill. On a white card that is cream on white, near enough invisible, so
   anywhere inside a panel they flip to dark ink on a real border. */
.btn.ghost{background:rgba(255,255,255,.1);color:var(--cream);border:1px solid rgba(255,212,180,.3)}
.btn.ghost:hover{background:rgba(255,255,255,.18)}
.panel .btn.ghost,.recon .btn.ghost{
    background:#fff;color:var(--espresso);border:1px solid var(--line-strong);
}
.panel .btn.ghost:hover,.recon .btn.ghost:hover{background:var(--cream);border-color:var(--espresso-light)}
.panel .btn.ghost:disabled,.recon .btn.ghost:disabled{color:var(--muted);border-color:var(--line)}

.dot{width:7px;height:7px;border-radius:50%;background:#c96a4f;flex:none;box-shadow:0 0 0 3px rgba(201,106,79,.2)}
.dot.ok{background:#7fc26a;box-shadow:0 0 0 3px rgba(127,194,106,.2)}
.dot.busy{background:var(--peach);animation:pulse 1s infinite;box-shadow:0 0 0 3px rgba(255,212,180,.2)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.cstat{font-size:11px;color:var(--taupe);display:flex;align-items:center;gap:7px;white-space:nowrap}

/* connection drawer */
.conn{display:none;margin-top:10px;padding-top:11px;border-top:1px solid rgba(255,212,180,.18)}
.conn.open{display:block;animation:fade .2s ease}
.conn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}
.conn-f{display:flex;flex-direction:column;gap:4px}
.conn-f span{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--peach);font-weight:700}
.conn-f select{
    background:rgba(255,255,255,.1);border:1px solid rgba(255,212,180,.25);color:var(--cream);
    border-radius:4px;padding:8px 10px;font-size:13px;font-family:'Inter',sans-serif;width:100%;
    appearance:none;-webkit-appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--peach) 50%),linear-gradient(135deg,var(--peach) 50%,transparent 50%);
    background-position:calc(100% - 15px) calc(50% + 1px),calc(100% - 10px) calc(50% + 1px);
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px;
}
.conn-f select:focus{outline:none;border-color:var(--peach)}
.conn-f select option{background:var(--espresso);color:var(--cream)}
.conn-endpoint{
    font-size:10px;color:var(--taupe);font-style:normal;letter-spacing:.02em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.conn-f input{
    background:rgba(255,255,255,.1);border:1px solid rgba(255,212,180,.25);color:var(--cream);
    border-radius:4px;padding:8px 10px;font-size:13px;font-family:'Inter',sans-serif;width:100%;
}
.conn-f input:focus{outline:none;border-color:var(--peach);background:rgba(255,255,255,.16)}
.conn-f input::placeholder{color:rgba(195,164,148,.55)}
.conn-foot{display:flex;align-items:center;gap:12px;margin-top:11px;flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--taupe)}
.chk input{accent-color:var(--peach);width:14px;height:14px}
.conn-hint{font-size:10.5px;color:var(--taupe);line-height:1.5;flex:1 1 260px;min-width:200px}

.err{
    margin-top:9px;background:rgba(201,106,79,.18);border:1px solid rgba(201,106,79,.5);
    color:#ffd9cd;border-radius:4px;padding:9px 11px;font-size:12px;line-height:1.5;
}
.err:empty{display:none}

/* -------------------------------------------------- states / shell ---- */
.stage{padding:60px 24px;text-align:center;color:var(--muted)}
.stage h3{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--espresso);font-weight:500;margin-bottom:8px}
.stage p{font-size:13.5px;max-width:420px;margin:0 auto;line-height:1.6}
.spin{
    width:26px;height:26px;border:2px solid var(--line-strong);border-top-color:var(--espresso);
    border-radius:50%;animation:sp .7s linear infinite;margin:0 auto 16px;
}
@keyframes sp{to{transform:rotate(360deg)}}
#shell[hidden]{display:none}

.rangeline{
    background:white;border-bottom:1px solid var(--line);padding:9px 18px;font-size:11.5px;
    color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;align-items:center;
}
.rangeline strong{color:var(--espresso);font-weight:700}

/* --------------------------------------------------- table helpers ---- */
.ltab{width:100%;border-collapse:collapse;background:white;border:1px solid var(--line);border-radius:6px;overflow:hidden;font-size:13px}
.ltab th{
    background:var(--cream);text-align:left;padding:9px 11px;font-size:9px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted);font-weight:700;border-bottom:1px solid var(--line-strong);white-space:nowrap;
}
.ltab td{padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:top}
.ltab tr:last-child td{border-bottom:none}
.ltab td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ltab .nm{font-weight:600;color:var(--ink)}
.ltab .sm2{font-size:11px;color:var(--muted);margin-top:2px}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:6px}

.searchbox{
    width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:6px;
    font-size:14px;font-family:'Inter',sans-serif;margin-bottom:12px;background:white;
}
.searchbox:focus{outline:none;border-color:var(--espresso)}

.acc{background:white;border:1px solid var(--line);border-radius:6px;margin-bottom:8px;overflow:hidden;box-shadow:var(--shadow-sm)}
.acc-h{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none}
.acc-h:hover{background:var(--cream)}
.acc-h .cv{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.acc-h .cv b{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--espresso);font-weight:500}
.acc-h .cv small{display:block;font-size:10.5px;color:var(--muted)}
.acc-h .car{color:var(--taupe);font-size:11px;transition:transform .2s}
.acc.open .acc-h .car{transform:rotate(90deg)}
.acc-b{display:none;border-top:1px solid var(--line);padding:4px 0}
.acc.open .acc-b{display:block}
.acc-name{font-weight:600;font-size:14px;color:var(--espresso)}
.acc-meta{font-size:11px;color:var(--muted);margin-top:2px}

.pill{display:inline-block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
    padding:3px 7px;border-radius:2px;background:var(--espresso-soft);color:var(--espresso)}

/* targets */
.tcell b{display:block;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.tcell small{display:block;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:1px}
.g{color:#5e8d4a}.a{color:#c08a2e}.r{color:#b0503c}
.trk{height:4px;background:var(--espresso-soft);border-radius:2px;margin-top:5px;position:relative;overflow:hidden}
.trk i{display:block;height:100%;background:var(--espresso);border-radius:2px}
.trk u{position:absolute;top:-2px;width:1px;height:8px;background:var(--taupe)}

@media(max-width:520px){
    .cbar-brand{display:none}
    .cbar input[type=date]{min-width:0;flex:1 1 120px}
    .ltab{font-size:12.5px}
}
@media print{
    .cbar,.tabs-wrap{display:none}
    .panel{display:block!important}
}

/* IMPORT — the confirmation before a whole month is replaced */
.sheet-dialog{position:fixed;inset:0;z-index:60;background:rgba(42,29,23,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.sheet-dialog[hidden]{display:none}
.sheet-card{background:#fff;border-radius:8px;box-shadow:0 8px 40px rgba(42,29,23,.28);width:min(560px,100%);max-height:86vh;overflow:auto;padding:22px 24px}
.sheet-card h3{font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:600;color:var(--espresso);margin-bottom:4px;line-height:1.15}
.sheet-card .sub{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.sheet-rows{width:100%;border-collapse:collapse;margin:12px 0}
.sheet-rows td{padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}
.sheet-rows td:first-child{color:var(--muted);width:112px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;padding-top:9px}
.sheet-rows tr:last-child td{border-bottom:none}
.sheet-rows b{font-weight:600}
.sheet-warn{background:rgba(201,138,46,.1);border-left:3px solid var(--tg-amber);padding:9px 11px;border-radius:0 4px 4px 0;font-size:12.5px;margin:10px 0;color:var(--ink)}
.sheet-stop{background:rgba(176,80,60,.1);border-left:3px solid var(--tg-red);padding:9px 11px;border-radius:0 4px 4px 0;font-size:12.5px;margin:10px 0;color:var(--ink)}
.sheet-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center}
.sheet-card .btn{background:var(--espresso);color:var(--cream)}
.sheet-card .btn.ghost{background:transparent;color:var(--espresso);border:1px solid var(--line-strong)}
.sheet-card .btn.danger{background:var(--tg-red);color:#fff}
.sheet-card input[type=text],.sheet-card input[type=password]{font-family:inherit;font-size:13.5px;padding:7px 9px;border:1px solid var(--line-strong);border-radius:4px;background:#fff;color:var(--ink);width:150px}
.sheet-card input[type=password]{width:200px}
@media(max-width:520px){.sheet-card{padding:18px 16px}.sheet-rows td:first-child{width:86px}}

/* SALES | FINANCE — the top-level switch, styled like the date presets */
.seg.suite{flex:0 0 auto}
.seg.suite a{
    background:none;border:none;color:var(--taupe);padding:7px 13px;font-size:11px;font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;
    transition:.15s;white-space:nowrap;
}
.seg.suite a:hover{color:var(--cream)}
.seg.suite a.on{background:var(--peach);color:var(--espresso);border-radius:4px}

/* SIDEBAR — one vertical list of reports, because more are coming.
   Open pushes the page across; closed gives the width back. On narrow screens it
   overlays instead, since there is no width to give up. */
:root{--navW:212px}
.sidenav{
    position:fixed;left:0;top:0;bottom:0;width:var(--navW);z-index:90;
    background:#b0503c;color:var(--cream);display:flex;flex-direction:column;
    border-right:1px solid rgba(255,212,180,.12);
    transition:transform .18s ease;padding-top:env(safe-area-inset-top);
}
body{padding-left:var(--navW);transition:padding-left .18s ease}
.nav-closed .sidenav{transform:translateX(-100%)}
.nav-closed body,html.nav-closed body{padding-left:0}

.sidenav-top{padding:14px 16px 12px;border-bottom:1px solid rgba(255,212,180,.12)}
.sidenav-brand{display:block;font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;color:var(--peach);line-height:1.1}
.sidenav-sub{display:block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);margin-top:3px}

.sidenav-list{flex:1;overflow-y:auto;padding:10px 8px}
.sidenav-h{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(195,164,148,.65);padding:10px 8px 5px;font-weight:600}
.sidenav-list a{
    display:flex;gap:10px;align-items:flex-start;padding:9px 9px;border-radius:6px;
    text-decoration:none;color:#FFD4B4;transition:.14s;margin-bottom:1px;
}
/* Hover lifts to cream so there is still a visible change — peach on peach
   would make hovering do nothing a reader can see. The ACTIVE row keeps
   espresso on peach: peach text on a peach pill is unreadable. */
.sidenav-list a:hover{background:rgba(255,255,255,.1);color:var(--cream)}
.sidenav-list a.on{background:var(--peach);color:var(--espresso)}
.sidenav-list a .ic{flex:0 0 16px;margin-top:1px;opacity:.9}
.sidenav-list a.on .ic{opacity:1}
.sidenav-list a .tx{min-width:0}
.sidenav-list a .lb{display:block;font-size:13px;font-weight:600;letter-spacing:.01em}
.sidenav-list a .ht{display:block;font-size:10.5px;line-height:1.35;margin-top:1px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidenav-list a.on .ht{opacity:.75}

.sidenav-foot{padding:12px 16px;font-size:10.5px;line-height:1.45;color:rgba(195,164,148,.55);border-top:1px solid rgba(255,212,180,.1)}

.navtoggle{
    flex:0 0 auto;background:#b0503c;border:1px solid rgba(255,212,180,.28);
    color:#FFD4B4;border-radius:5px;padding:6px;display:inline-flex;align-items:center;
    justify-content:center;transition:.15s;margin-right:2px;
}
.navtoggle:hover{background:#c25c46}

.sidenav-scrim{display:none}
@media(max-width:900px){
    body{padding-left:0}
    .sidenav{box-shadow:6px 0 28px rgba(42,29,23,.4)}
    .sidenav-scrim{display:block;position:fixed;inset:0;z-index:89;background:rgba(42,29,23,.5)}
    .nav-closed .sidenav-scrim{display:none}
}
@media print{.sidenav,.sidenav-scrim,.navtoggle{display:none!important}body{padding-left:0!important}}
/* No slide on the first paint — only on a real click. */
.nav-still .sidenav,.nav-still body{transition:none!important}

/* Net collections on the Sales overview. Carries .accent too, so it is the same
   brown as Revenue Ex-VAT — Mina asked for that explicitly. Everything below is
   only what differs: a slightly smaller figure so a 7-digit number and its two
   sub-lines still fit a fifth of the row, and an amber that reads on espresso
   for the line that says the data stops short of the selected range. */
.kpi.coll .kpi-sub{line-height:1.5}
.kpi.coll .short{color:#e8b869}
.kpi.coll .short strong{color:#f0c98a}
.kpi.coll .cmeta{margin-bottom:7px}
/* The two revenue lines: label left, figure right, so they read as a small
   statement under the collections headline rather than as running prose. */
.kpi.coll .kv{
    display:flex;justify-content:space-between;gap:10px;
    padding:3px 0;border-top:1px solid rgba(255,212,180,.16);
}
.kpi.coll .kv span{color:var(--taupe)}
.kpi.coll .kv b{color:var(--peach);font-weight:700;font-variant-numeric:tabular-nums}

/* ---- tab 04 sorting controls ----
   Search, sort and the flat toggle on one line, wrapping to stacked on a phone.
   The select is deliberately as tall as the search box so the row reads as one
   control strip rather than three unrelated widgets. */
.tg-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.tg-tools .searchbox{flex:1 1 220px;margin-bottom:0}
.tg-sort{display:flex;align-items:center;gap:7px;flex:0 1 auto}
.tg-sort>span,.tg-flat>span{
    font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;white-space:nowrap;
}
.tg-sort select{
    border:1px solid var(--line-strong);border-radius:6px;padding:9px 11px;
    font-size:13px;font-family:'Inter',sans-serif;background:white;color:var(--ink);cursor:pointer;
}
.tg-sort select:focus{outline:none;border-color:var(--espresso)}
.tg-flat{display:flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap}
.tg-flat input{width:15px;height:15px;accent-color:var(--espresso);cursor:pointer}
@media(max-width:600px){
    .tg-tools{flex-direction:column;align-items:stretch}
    /* flex-basis follows the MAIN axis, so the 220px basis above becomes a
       220px HEIGHT once the strip turns vertical — the search box collapsed to a
       26px-wide sliver. Reset it explicitly rather than relying on the shorthand
       meaning the same thing in both directions. */
    .tg-tools .searchbox{flex:0 0 auto;width:100%}
    .tg-sort,.tg-flat{flex:0 0 auto}
    .tg-sort select{width:100%}
}

/* The "excl. packages" qualifier on the revenue lines — small and inline, so the
   label reads as one phrase rather than wrapping into a second row. */
.kpi.coll .kv span i{
    display:block;font-style:normal;font-size:9px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--taupe);opacity:.85;margin-top:1px;
}
.kpi.coll .kv.sub{border-top-style:dashed}
.kpi.coll .kv.sub span,.kpi.coll .kv.sub b{font-size:10.5px;color:var(--taupe);font-weight:400}

/* ============================================================
   COMMERCIAL — the funnel grid.

   Steps sit in a row, and the ones with no live source are drawn in place rather
   than omitted: a visibly absent step reads as a gap in the plumbing, whereas a
   missing one reads as a funnel that genuinely begins at "booked". Hence
   .fstep.absent is styled as a deliberate hole — dashed, muted, no number.
   ============================================================ */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0 4px}
.fstep{background:white;border:1px solid var(--line);border-radius:6px;padding:11px 12px}
.fstep .l{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.fstep .v{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:var(--espresso);line-height:1.1;margin:3px 0 2px;font-variant-numeric:tabular-nums}
.fstep .n{font-size:10.5px;color:var(--muted);line-height:1.4}
.fstep .n strong{color:var(--ink)}
.fstep.absent{border-style:dashed;background:var(--cream)}
.fstep.absent .v{font-size:15px;color:var(--muted);font-style:italic}
.fstep.absent .why{color:#b0503c}

/* The attendance vocabulary, matching src/lib/appointments.js exactly. Three
   groups, three colours, and `open` is deliberately NOT green or red — it is the
   group that means "nobody wrote the outcome down". */
.sev{font-size:9px;letter-spacing:.1em;font-weight:700;padding:2px 6px;border-radius:3px;text-transform:uppercase;white-space:nowrap}
.sev.attended{background:rgba(94,141,74,.15);color:#4a7038}
.sev.lost{background:rgba(176,80,60,.14);color:#b0503c}
.sev.open{background:rgba(201,138,46,.16);color:#a06a1c}

/* The 2026 target matrix is wide by nature — twelve months across. */
.ltab.tight{font-size:12px}
.ltab.tight td,.ltab.tight th{padding:6px 7px}
.ltab.tight td.n,.ltab.tight th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ============================================================
   DAILY COLLECTION BARS — report 05's Pacing tab.
   A plain flex row of bars; the weekly rhythm is the whole point, so weekends
   should be visibly short rather than smoothed into a line.
   ============================================================ */
.dbars{display:flex;align-items:flex-end;gap:3px;margin:14px 0 6px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.dbar{flex:1 0 22px;min-width:22px;display:flex;flex-direction:column;align-items:center;gap:3px}
.dbar-t{height:120px;width:100%;display:flex;align-items:flex-end;background:var(--cream);border-radius:2px}
.dbar-t i{display:block;width:100%;background:var(--espresso);border-radius:2px 2px 0 0;min-height:2px}
.dbar-d{font-size:9.5px;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.dbar-w{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media(max-width:600px){.dbar-t{height:88px}}

/* Sub-sub-headings, used where report 04 nests a table group under a section
   ("Unresolved by branch" beneath "Appointments with no recorded outcome").
   Without this an h4 falls back to the browser default, which is bolder and
   larger than the h3 above it. */
h4.subtitle{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:600;color:var(--espresso-light);
  margin:18px 0 8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
h4.subtitle .sm2{font-size:10.5px;color:var(--muted);font-family:'Inter',system-ui,sans-serif;font-weight:500}

/* ============================================================
   BAR LIST + TWO-COLUMN — report 01's Service mix tab.

   A bar list is a label, a proportional bar and a figure on one row. Report 01
   uses it three times on that tab: for the category ranking (where a row is
   clickable and drives the two panels below it) and for the by-branch and
   by-doctor splits of whichever category is selected.

   The clickable variant is a real <button>, not a div with a handler: it has to
   be reachable by keyboard, because the whole tab is unusable without it — the
   two panels below show nothing until a category is picked.
   ============================================================ */
.blist{display:flex;flex-direction:column;gap:1px}
.blist-row{display:grid;grid-template-columns:minmax(120px,1.4fr) minmax(60px,3fr) auto;
  align-items:center;gap:10px;padding:7px 9px;border-radius:4px;background:transparent;
  border:none;width:100%;text-align:left;font-family:inherit;font-size:12.5px;color:var(--ink)}
.blist-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blist-row .tr{background:var(--cream);border-radius:2px;height:9px;overflow:hidden}
.blist-row .tr i{display:block;height:100%;background:var(--espresso);border-radius:2px;min-width:2px}
.blist-row .vv{font-variant-numeric:tabular-nums;font-size:12px;white-space:nowrap;color:var(--ink)}
.blist-row .vv small{color:var(--muted);font-size:10.5px;margin-left:5px}
button.blist-row{cursor:pointer}
button.blist-row:hover{background:var(--cream)}
button.blist-row:focus-visible{outline:2px solid var(--espresso);outline-offset:1px}
button.blist-row.on{background:var(--espresso-soft,rgba(88,56,44,.09))}
button.blist-row.on .nm{font-weight:700;color:var(--espresso)}
button.blist-row.on .tr i{background:var(--espresso-light,#7a5142)}
.blist-row.fam-laser .tr i{background:#a06a1c}
.blist-row.fam-inj .tr i{background:#4a7038}
.blist-row.fam-body .tr i{background:#58382C}
.blist-row.fam-other .tr i{background:var(--taupe)}
@media(max-width:600px){
  .blist-row{grid-template-columns:1fr auto;gap:6px}
  .blist-row .tr{grid-column:1/-1;order:3}
}

/* Two panels side by side — "By branch" next to "By doctor". Stacks on mobile. */
.twocol{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0}
@media(min-width:820px){.twocol{grid-template-columns:1fr 1fr}}
.pcard{background:white;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow-sm)}
.pcard-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:11px 13px;border-bottom:1px solid var(--line)}
.pcard-head h4{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:600;color:var(--espresso)}
.pcard-head .hint{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pcard-body{padding:9px 8px}
.pcard-body .empty{padding:14px 6px;font-size:12px;color:var(--muted);text-align:center}

/* The "click a category" affordance, and the status chip beside a heading. */
.tag{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;
  background:var(--cream);border:1px solid var(--line);border-radius:3px;padding:2px 6px}
.kpi-sub .down{color:#b0503c;font-weight:700}
.kpi-sub .up{color:#4a7038;font-weight:700}
.kpi.accent .kpi-sub .down{color:#ffb3a3}

/* A KPI card standing in for a figure with no source — report 04's ratios grid
   has two of eight that divide by the PBX conversation count, which NRS cannot
   read. Dashed and muted so the grid still reads as eight ratios with two holes,
   rather than as six ratios that happen to be all there are. */
.kpi.absent{border-style:dashed;background:var(--cream);box-shadow:none}
.kpi.absent .kpi-value{font-size:15px;color:var(--muted);font-style:italic}
.kpi.absent .kpi-sub{color:#b0503c}

/* ============================================================
   THE CHAIN — report 04's funnel tab.

   A vertical list of steps with an arrow row between each pair carrying the
   conversion. Stage tint deepens down the chain so the eye can see how far from
   cash a step is; `.fn-step.absent` is a step with no live source, drawn as a
   hole in place rather than omitted, because a chain that silently starts at
   "booked" claims the top of the funnel is not there rather than not measured.
   ============================================================ */
.funnel{display:flex;flex-direction:column;gap:0;margin:16px 0 8px}
.fn-step{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:white;border:1px solid var(--line);border-radius:6px;padding:12px 14px;box-shadow:var(--shadow-sm)}
.fn-step .fn-left{min-width:0;flex:1 1 auto}
.fn-step .st{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--taupe)}
.fn-step .nm{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:var(--espresso);line-height:1.15;margin:1px 0 2px}
.fn-step .ds{font-size:11px;color:var(--muted);line-height:1.4}
.fn-step .ds strong{color:var(--ink)}
.fn-step .fn-right{text-align:right;flex:0 0 auto}
.fn-step .fn-right .v{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;
  color:var(--espresso);line-height:1;font-variant-numeric:tabular-nums}
.fn-step .fn-right .p{font-size:10px;color:var(--muted);margin-top:3px}
.fn-step.stage-1{background:#fffdfb}
.fn-step.stage-2{background:var(--cream)}
.fn-step.stage-3{background:var(--espresso-soft)}
.fn-step.stage-4{background:var(--espresso);border-color:var(--espresso)}
.fn-step.stage-4 .st{color:var(--peach)}
.fn-step.stage-4 .nm,.fn-step.stage-4 .fn-right .v{color:var(--cream)}
.fn-step.stage-4 .ds,.fn-step.stage-4 .fn-right .p{color:var(--taupe)}
.fn-step.stage-4 .ds strong{color:var(--peach)}
.fn-step.absent{border-style:dashed;background:var(--cream);box-shadow:none}
.fn-step.absent .nm{color:var(--muted)}
.fn-step.absent .fn-right .v{font-size:14px;font-style:italic;color:var(--muted)}
.fn-step.absent .ds{color:#b0503c}
.fn-arrow{font-size:11px;color:var(--muted);padding:7px 14px;line-height:1.4}
.fn-arrow strong{color:var(--espresso);font-weight:700}
@media(max-width:600px){
  .fn-step{flex-direction:column;align-items:flex-start;gap:6px}
  .fn-step .fn-right{text-align:left}
  .fn-arrow{padding:6px 8px}
}

/* ============================================================
   THE CALL LIST — report 04's unresolved-appointments section.

   Branch chips, a card with a CSV button, the table, then the two rollups.
   ============================================================ */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}
.chip{font-size:11.5px;font-weight:600;color:var(--espresso);background:white;
  border:1px solid var(--line-strong);border-radius:14px;padding:6px 13px;font-family:inherit;cursor:pointer}
.chip:hover{background:var(--cream)}
.chip:focus-visible{outline:2px solid var(--espresso);outline-offset:2px}
.chip.on{background:var(--espresso);border-color:var(--espresso);color:var(--cream)}

.listcard{background:white;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-sm);overflow:hidden;margin:14px 0}
.listcard-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px}
.listcard-head h3{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;color:var(--espresso);margin:0}
.listcard-head h3 b{font-weight:600}

/* Mobile numbers in a boxed monospace cell — a phone number is for reading digit
   by digit and dialling, so it gets tabular figures and a border of its own. */
.mob{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  background:var(--cream);border:1px solid var(--line);border-radius:3px;padding:2px 6px;white-space:nowrap}
.mob.none{color:var(--muted);padding:2px 9px}
.nosvc{color:#b0503c;font-size:11.5px}

/* The sensitivity banner. It is not a footnote: this table is names and phone
   numbers, and report 04 prints the same warning beside its own copy. */
.pii{background:rgba(176,80,60,.07);border:1px solid rgba(176,80,60,.28);border-left:3px solid #b0503c;
  border-radius:5px;padding:12px 14px;font-size:12px;color:var(--ink);line-height:1.5;margin:12px 0}
.pii strong{color:#b0503c}

/* A table that scrolls inside its own card, header pinned.
   Sized for roughly ten rows: the call list's Service column wraps to two lines
   often enough that a fixed row count in `rem` would be a lie, so this is a
   height that lands mid-row — the clipped eleventh row is the affordance that
   says there is more below, which a flush edge does not.

   `border-collapse:collapse` drops a sticky th's bottom border while scrolling
   in WebKit, so the rule is painted as an inset shadow instead. */
.tw.scrolly{max-height:var(--h);overflow-y:auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* The min-width is what makes "ten rows" mean anything. Without it the columns
   compress on a narrower window, a long cell wraps to two lines, and the same
   height shows fourteen rows on a wide screen and six on a narrow one. Scrolling
   sideways keeps every row one line tall, so the count is stable.

   It is a variable because the width that stops wrapping depends on the table:
   the 8-column call list needs 1020px, a 7-column patient list needs less, and
   imposing the wider figure on the narrower table would force a sideways scroll
   that buys nothing. Override with `style="--minw:…"` on the wrapper. */
.tw.scrolly{--minw:1020px;--h:320px}
.tw.scrolly table{border:none;border-radius:0;min-width:var(--minw)}
.tw.scrolly thead th{position:sticky;top:0;z-index:2;
  box-shadow:inset 0 -1px 0 var(--line-strong);border-bottom:none}
/* And the total row pinned to the BOTTOM. Three of these tables keep their total
   in a tfoot — target-to-pool, the category mix, the month-by-month summary —
   and caging a table scrolls its total out of sight, which is the one row a
   reader is looking for. Needs an opaque background of its own: sticky cells sit
   over the scrolling rows, and a transparent one shows them through. */
.tw.scrolly tfoot th,.tw.scrolly tfoot td{position:sticky;bottom:0;z-index:2;
  background:var(--cream);box-shadow:inset 0 1px 0 var(--line-strong);border-top:none}
.tw.scrolly::-webkit-scrollbar{width:9px;height:9px}
.tw.scrolly::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:5px}
.tw.scrolly::-webkit-scrollbar-track{background:transparent}
/* Two-line rows are ~37px against the one-line 28px, so a table whose cells
   carry a sub-line needs a taller window to show the same number of rows.
   `--h` is per-table for that reason rather than one figure for all. */
@media(max-width:600px){.tw.scrolly{--h:300px}}


/* ============================================================
   Reports 08 and 09 — the components their source packs use.

   PORTED, NOT REINVENTED. Both frozen packs are built out of expandable cards
   rather than tables: a product in the expiry register opens to show every lot
   behind it, a category in the movement ledger opens to its own ledger and every
   SKU inside it. The first build of these two reports rendered flat tables, which
   showed the same numbers and lost the thing the packs are actually for — you
   cannot chase a lot you cannot see, and a category total with no SKUs under it
   is a number nobody can act on.

   So these rules come out of the packs' own stylesheets, with two edits and no
   others:

     · any selector app.css already defines is DROPPED, so nothing here can move
       a figure on the six reports that were already working
     · the .lg rule from the procurement pack is dropped too — both packs use
       that name, for a legend chip in one and a live-sync log line in the
       other, and the legend is the one these reports need

   The pack palette is the app palette (--espresso, --cream, --taupe, --line),
   so the colours needed no translation. The five status colours are literals
   here exactly as they are in the packs and in public/inventory.js: stock-out
   #b0503c, critical #d97a3a, below ideal #c98a2e, healthy #5e8d4a, overstock
   --taupe.
   ============================================================ */
/* ===== expiry + inventory status pills ===== */
.ex-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:11px;
 font-size:10.5px;font-weight:700;letter-spacing:.02em;border:1px solid var(--line);
 background:rgba(195,164,148,.10);color:var(--espresso);white-space:nowrap}
.ex-pill.exp{background:rgba(176,80,60,.12);border-color:rgba(176,80,60,.45);color:#8f3c2b;font-weight:800}
.ex-pill.cri{background:rgba(217,122,58,.14);border-color:rgba(217,122,58,.45);color:#a3551f}
.ex-pill.war{background:rgba(201,138,46,.14);border-color:rgba(201,138,46,.42);color:#8a5f14}
.ex-pill.wat{background:rgba(195,164,148,.18);border-color:var(--taupe);color:var(--espresso)}
.ex-pill.ok{background:rgba(94,141,74,.12);border-color:rgba(94,141,74,.38);color:#456b36}
.ex-pill.unk{background:transparent;border-style:dashed;color:var(--muted);font-weight:600}
.lot-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px dotted var(--line)}
.lot-row:last-child{border-bottom:none}
.lot-info{flex:1;min-width:0}
.lot-name{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3}
.lot-meta{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.45}
.lot-money{text-align:right;white-space:nowrap;flex-shrink:0}
.lot-row.tot{border-top:2px solid var(--line-strong);background:var(--cream);border-bottom:none;padding:10px 8px;margin-top:4px}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.f-chip{background:#fff;border:1px solid var(--line-strong);color:var(--muted);padding:7px 13px;
 border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.f-chip.on{background:var(--espresso);border-color:var(--espresso);color:#fff}
.f-chip .cn{opacity:.65;margin-left:4px;font-weight:600}
/* ===== inventory analysis (category cards) ===== */
.inv-card{background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:10px;
 box-shadow:var(--shadow-sm);overflow:hidden;border-left:4px solid var(--taupe)}
.inv-card.exp{border-left-color:#b0503c}
.inv-card.cri{border-left-color:#d97a3a}
.inv-card.war{border-left-color:#c98a2e}
.inv-card.ok{border-left-color:#5e8d4a}
.inv-card.wat{border-left-color:var(--taupe)}
.inv-card.unk{border-left-color:var(--line-strong)}
.inv-head{display:flex;align-items:center;gap:10px;padding:14px 14px;cursor:pointer;
 -webkit-tap-highlight-color:transparent}
.inv-head:active{background:var(--cream)}
.inv-info{flex:1;min-width:0}
.inv-name{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--espresso);line-height:1.15}
.inv-meta{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:6px;font-size:10.5px;color:var(--muted)}
.inv-amt{text-align:right;flex-shrink:0}
.inv-amt-main{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:var(--espresso);line-height:1}
.inv-amt-sub{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.inv-tog{color:var(--taupe);font-size:14px;transition:transform .2s;flex-shrink:0}
.inv-card.expanded .inv-tog{transform:rotate(90deg)}
.inv-body{display:none;padding:0 14px 14px}
.inv-card.expanded .inv-body{display:block}
.mv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
.mv.hand{background:var(--espresso);border-color:var(--espresso)}
.mv.hand .mv-lbl,.mv.hand .mv-sub{color:rgba(252,245,240,.7)}
.mv.hand .mv-val{color:#fff}
.mv-lbl{font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700}
.mv-val{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;color:var(--espresso);line-height:1.15;margin-top:2px}
.mv-sub{font-size:9.5px;color:var(--muted);margin-top:1px}
.ideal-row{background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:11px 12px;margin-bottom:14px}
.ideal-title{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:10.5px;
 color:var(--muted);margin-bottom:8px}
.ideal-title strong{color:var(--espresso)}
.ideal-bar{position:relative;height:9px;background:#fff;border:1px solid var(--line);border-radius:99px;overflow:visible}
.ideal-bar .have{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--taupe),var(--espresso));border-radius:99px}
.ideal-bar .mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:#b0503c}
.si-table{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:6px;background:#fff}
.si-table table{width:100%;border-collapse:collapse;font-size:11.5px;min-width:640px}
.si-table thead th{background:var(--cream);color:var(--espresso);font-size:8.5px;letter-spacing:.1em;
 text-transform:uppercase;font-weight:700;padding:8px 7px;text-align:right;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.si-table thead th:first-child{text-align:left;padding-left:11px}
.si-table td{padding:8px 7px;border-bottom:1px solid var(--line);text-align:right;
 font-variant-numeric:tabular-nums;vertical-align:top;white-space:nowrap}
.si-table td:first-child{text-align:left;padding-left:11px;white-space:normal}
.si-table tbody tr:last-child td{border-bottom:none}
.si-table .prod-name{font-size:12px;font-weight:600;color:var(--ink);line-height:1.25}
.si-table .prod-name small{display:block;font-size:9.5px;color:var(--muted);font-weight:400;margin-top:1px}
.si-table td.hand{font-weight:700;color:var(--espresso)}
.si-table tfoot td{background:var(--cream);font-weight:700;color:var(--espresso);border-top:2px solid var(--line-strong)}
.inv-legend{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.inv-legend .lg{font-size:10px;font-weight:600;color:var(--muted);border:1px solid var(--line);
 border-radius:99px;padding:5px 11px;background:#fff}
.inv-legend .lg b{display:inline-block;width:7px;height:7px;border-radius:99px;margin-right:5px;vertical-align:middle}
.controls{background:#fff;border:1px solid var(--line);border-radius:10px;padding:15px;margin-top:16px;box-shadow:0 4px 14px rgba(88,56,44,.06)}
.ctl-lbl{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);font-weight:700;margin-bottom:6px}
.prod-input{width:100%;padding:12px 13px;border:1.5px solid var(--espresso);border-radius:6px;font-family:'Inter';font-size:14px;color:var(--ink);background:var(--cream)}
.custrange{display:flex;align-items:center;gap:7px;margin-top:8px;flex-wrap:wrap}
.custrange input[type=date]{padding:6px 9px;border:1px solid var(--line);border-radius:8px;font-family:Inter;font-size:11.5px;color:var(--ink);background:#fff}
.custrange button{padding:7px 15px;border:none;border-radius:8px;background:var(--peach);color:var(--espresso);font-weight:700;font-size:11.5px;cursor:pointer;font-family:Inter}
.cr-to{font-size:11px;color:var(--muted)}
.list-wrap{margin-top:22px}
.list-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.list-head h2{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:var(--espresso)}
.list-head .cnt{font-size:11px;color:var(--muted);font-weight:600}
.list-search{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:13px;font-family:'Inter',sans-serif;color:var(--ink);background:#fff;margin-bottom:10px}
.list-search:focus{outline:none;border-color:var(--taupe)}
.ilist{display:flex;flex-direction:column;gap:7px}
/* ---- merged additions ---- */
.bars{background:#fff;border:1px solid var(--line);border-radius:9px;padding:14px}
.bseg .fl.buy{background:var(--peach)}
.bseg .lb.buy{color:#a8794f}
.leg{display:flex;gap:14px;font-size:10px;color:var(--muted);margin-bottom:12px;flex-wrap:wrap}
.leg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.leg i.sale{background:var(--espresso)}
.leg i.buy{background:var(--peach)}
.subtabs{display:flex;gap:6px;margin:10px 0 12px;flex-wrap:wrap}
.subtabs button{background:#fff;border:1px solid var(--line);border-radius:20px;font-family:Inter;font-size:11.5px;font-weight:600;color:var(--espresso);padding:7px 14px;cursor:pointer}
.subtabs button.active{background:var(--espresso);color:#fff;border-color:var(--espresso)}
/* The pack's panels are #tab-pu and #tab-pr; ours are #pu and #pr, so the
   original selector matched nothing. Both are listed rather than the pack's
   dropped, because the ported block is meant to stay readable against its
   source. */
#tab-pu .subtabs,#tab-pr .controls,#pu .subtabs,#vs .subtabs,#pr .controls{margin:18px 0 0}

/* The "All products" list on report 09 tab 02, and the footnote card both packs
   end a panel with. Ported like the rest; `.bars` is the pack's own wrapper and
   holds a `.bar-list` inside it, so the monthly chart needs no column rules of
   its own. */
.il-row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.il-row:last-child{border-bottom:none}
.il-row:hover{background:var(--cream)}
.il-left{flex:1;min-width:0}
.il-name{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3}
.il-meta{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.il-right{text-align:right;white-space:nowrap;flex-shrink:0}
.il-amt{font-size:13.5px;font-weight:700;color:var(--espresso);font-variant-numeric:tabular-nums}
.il-sub{font-size:10px;color:var(--muted);margin-top:2px}
.note{font-size:11.5px;color:var(--muted);line-height:1.65;background:var(--cream);
    border-left:3px solid var(--taupe);padding:12px 14px;border-radius:0 8px 8px 0;margin-top:14px}
.note b,.note strong{color:var(--espresso)}

/* The movement cells themselves.
   MISSED ON THE FIRST PASS, and the miss was visible: the port listed
   `mv-grid`, `mv-lbl`, `mv-val` and `mv-sub` but not the bare `.mv` that holds
   them, so report 08's movement ledger rendered as seven runs of naked text in
   a two-column grid — no boxes, no green on the receipts, no red on the
   issues, no dark card on the closing figure. The grid was structurally right
   and looked nothing like the source pack.
   `.mv.hand` and its children are already defined above; only the base cell and
   the three tints were absent. */
.mv{background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:9px 10px}
.mv.in{border-color:rgba(94,141,74,.35)}
.mv.bonus{border-color:var(--peach);background:rgba(255,212,180,.22)}
.mv.out{border-color:rgba(176,80,60,.3)}

/* The money column inside a lot row — the figure on the right of every lot,
   every branch group and every invoice line in reports 08's expansions. Missed
   with `.mv` on the first pass and just as visible: the numbers rendered at
   body size with no weight, so an expansion read as a wall of prose instead of
   a column you can scan down. */
.lot-ex{font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:500;
    color:var(--espresso);line-height:1.05}
.lot-inc{font-size:9.5px;color:var(--muted);margin-top:1px}

/* "Not linked" — the sixth status, which the source pack does not have because
   it reads its mapping live and never has an unresolved one. Grey and dashed
   like `unk`, deliberately NOT amber or red: it is not a warning about the
   stock, it is an absence of information about it, and 43 products in a warning
   colour is a page nobody reads twice. */
.ex-pill.nolink{background:transparent;border-style:dashed;border-color:var(--line-strong);
    color:var(--muted);font-weight:600}

/* The cache-age text in the shared control bar, beside the page's own status.
   Two different things: `#status` says what the PAGE is doing ("loading…"), this
   says how old the DATA is ("synced 2h ago"). Collapsing them into one line is
   how a reader ends up thinking a fresh page means fresh figures. */
.cbar-sync{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--taupe);
    margin-left:8px;padding-left:8px;border-left:1px solid rgba(255,212,180,.25);white-space:nowrap}
@media(max-width:700px){.cbar-sync{display:none}}

/* The year-at-a-glance grid on Admin → Periods. Twelve cells answering the one
   question the list of published sheets structurally cannot: which month is
   MISSING — a missing month being precisely the row that is not there.
   `due` and `ahead` are the same absence and look different on purpose: one is
   money already unmeasured, the other is a diary entry, and colouring them
   alike is how twelve amber squares teach somebody to ignore the row. */
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:7px;margin-bottom:14px}
.mcell{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:9px 10px;
    border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;
    font-family:'Inter',sans-serif;text-align:left;transition:.12s}
.mcell:hover:not(:disabled){border-color:var(--espresso);box-shadow:var(--shadow-sm)}
.mcell:disabled{cursor:default;opacity:.5}
.mcell .mc-m{font-size:13px;font-weight:700;color:var(--espresso)}
.mcell .mc-s{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.mcell .mc-n{font-size:10px;color:var(--muted)}
.mcell.published{border-left:3px solid var(--positive);background:rgba(94,141,74,.06)}
.mcell.published .mc-s{color:#456b36}
.mcell.draft{border-left:3px solid #c98a2e;background:rgba(201,138,46,.08)}
.mcell.draft .mc-s{color:#8a5f14}
.mcell.due{border-left:3px solid #b0503c;background:rgba(176,80,60,.07)}
.mcell.due .mc-s{color:#8f3c2b}
.mcell.ahead{border-left:3px solid var(--line-strong)}

/* ---- the payslip -------------------------------------------------------
   Report 05 tab 04 opens one of these per doctor. It reuses `.sheet-dialog`,
   so only the sheet itself is styled here. */
.payslip-card{max-width:620px}
.ps-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
    border-bottom:2px solid var(--espresso);padding-bottom:12px;margin-bottom:6px}
.ps-name{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:var(--espresso);line-height:1.1}
.ps-meta{font-size:11px;color:var(--muted);margin-top:3px}
.ps-net{font-family:'Cormorant Garamond',serif;font-size:27px;font-weight:600;color:var(--espresso);
    text-align:right;white-space:nowrap;line-height:1}
.ps-net small{display:block;font-size:8.5px;font-weight:400;color:var(--muted);
    letter-spacing:.14em;text-transform:uppercase;margin-top:3px;font-family:'Inter',sans-serif}
.ps-h{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
    margin:16px 0 4px;font-weight:700}
.ps-line{display:flex;justify-content:space-between;gap:12px;padding:6px 0;
    border-bottom:1px solid var(--line);font-size:13px}
.ps-line:last-child{border-bottom:none}
.ps-line.strong{font-weight:700;color:var(--espresso);border-bottom:1px solid var(--line-strong)}
.ps-l{flex:1;min-width:0}
.ps-sub{display:block;font-size:10.5px;color:var(--muted);font-weight:400;margin-top:1px}
.ps-v{white-space:nowrap;font-variant-numeric:tabular-nums}
.ps-t{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
.ps-t th,.ps-t td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left}
.ps-t .n{text-align:right;font-variant-numeric:tabular-nums}
.ps-t tfoot th{border-top:2px solid var(--line-strong);font-weight:700;color:var(--espresso)}
.ps-note{font-size:12px;color:var(--ink);background:var(--cream);padding:10px 12px;
    border-radius:6px;white-space:pre-wrap;line-height:1.55}

/* Print gives the payslip the page to itself. No library: "save as PDF" is the
   browser's own dialog, which every machine here already has. */
@media print{
  body>*{display:none!important}
  .sheet-dialog[hidden]{display:none!important}
  .sheet-dialog{display:block!important;position:static!important;background:none!important;padding:0!important}
  .sheet-card{box-shadow:none!important;border:none!important;max-width:none!important;padding:0!important}
  .sheet-actions{display:none!important}
  #dlgTitle{display:none!important}
}

/* ---- charts, as inline SVG ----
   The project carries no charting library and the CSP forbids loading one, so
   `public/chartlet.js` emits SVG. Colours live on the elements as presentation
   attributes — a <style> inside the SVG is dropped by styleSrc and the chart
   renders unstyled — so there is very little for this stylesheet to do. */
.chart-card{background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:14px 14px 8px;margin:12px 0 4px}
.chartwrap{position:relative;width:100%;overflow-x:auto}
.ck-svg{display:block;width:100%;height:auto}
/* Under 600px twelve month labels collide, so the chart keeps a floor width and
   scrolls inside its card rather than compressing into an unreadable smear. */
@media (max-width:600px){.ck-svg{min-width:560px}}

/* A first column that stays put. The plan grid is 24 months wide and a figure
   with no name against it is unreadable. */
.ltab.sticky1 td:first-child,.ltab.sticky1 th:first-child{position:sticky;left:0;
  background:var(--card);z-index:1}
.ltab.sticky1 thead th:first-child{z-index:2}

/* Sortable headers carry their own affordance. */
.ltab th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
.ltab th[data-sort]::after{content:'\2195';opacity:.35;margin-left:4px;font-size:10px}
.ltab th[data-sort].asc::after{content:'\2191';opacity:.9}
.ltab th[data-sort].desc::after{content:'\2193';opacity:.9}

/* ---------------------------------------------------------------------------
   Contact Centre — the weekly lock (public/cc-gate.js).
   A full-page sheet over an EMPTY report: the server sent no figures, so the
   card is not hiding anything, it is the page.
   ------------------------------------------------------------------------- */
.cc-lock{position:fixed;inset:0;z-index:60;background:rgba(42,29,23,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px}
.cc-lock-card{background:var(--cream);border-radius:10px;box-shadow:0 12px 40px rgba(42,29,23,.25);max-width:460px;width:100%;padding:26px 24px 22px;border-top:4px solid var(--espresso)}
.cc-lock-eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#c98a2e;font-weight:700;margin-bottom:8px}
.cc-lock-card h2{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:var(--espresso);line-height:1.1;margin-bottom:12px}
.cc-lock-ar{font-family:system-ui,'Geeza Pro','Segoe UI','Noto Naskh Arabic',sans-serif;text-align:right;font-size:14.5px;line-height:1.7;color:var(--ink);margin-bottom:12px}
.cc-lock-week{font-weight:700;font-size:16px;color:var(--ink);background:var(--espresso-soft);border-radius:6px;padding:9px 12px;margin-bottom:14px;text-align:center}
.cc-lock-note{font-size:13px;line-height:1.55;border-left:3px solid #c98a2e;background:#fff;padding:9px 11px;border-radius:4px;margin-bottom:14px}
.cc-lock-btn{display:block;text-align:center;background:var(--espresso);color:var(--cream);text-decoration:none;font-weight:600;font-size:14px;border-radius:6px;padding:11px 14px}
.cc-lock-btn:hover{background:var(--espresso-light)}
.cc-lock-hint{font-size:12px;color:var(--muted);margin-top:8px;text-align:center}
.cc-lock-foot{font-size:11.5px;color:var(--muted);margin-top:16px;padding-top:12px;border-top:1px solid var(--line);line-height:1.5}

/* who is signed in — the sidebar foot (nav.js fills it from /auth/me) */
#sidenav-who{display:flex;flex-direction:column;gap:2px;line-height:1.35}
#sidenav-who .who-nm{font-weight:700;color:var(--cream, #fff)}
#sidenav-who .who-ac{opacity:.75}
#sidenav-who .who-role{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin-top:3px}
.cbar-who{font-weight:600;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
#sidenav-who .who-scope{font-size:11px;margin-top:4px;padding:3px 6px;border-radius:4px;background:rgba(255,255,255,.08);opacity:.9}
.cbar-who .who-scope{opacity:.75;font-weight:400;margin-left:6px}
.cstat .dot.busy{animation:nrs-pulse 1s ease-in-out infinite}
@keyframes nrs-pulse{0%,100%{opacity:1}50%{opacity:.25}}