/* Layout: sticky app bar with four views; dashboard = filters, KPI strip, then a 2x2 grid of table / trend / products / manager share. */
:root{
  --bg:#f1f5f9; --surface:#ffffff; --surface-2:#f6f9fc; --ink:#0d2036; --ink-2:#43566c; --ink-3:#69798f;
  --line:#d8e1eb; --line-2:#e6edf4; --grid:#e3e9f1;
  --brand-blue:#0878c8; --brand-green:#3eb675; --brand-navy:#002850;
  --accent:#0b6fbd; --accent-ink:#ffffff; --accent-soft:#e1effb;
  --good:#16854d; --bad:#b3261e; --warn-bg:#fcf1d4; --warn-ink:#6d4a00;
  --s1:#0878c8; --s2:#eb6834; --s3:#3eb675; --s4:#eda100; --s5:#8a5fd0; --s6:#16a3b8; --s7:#d4437d; --neutral-bar:#a9b6c6;
  --font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a1320; --surface:#0f1b2c; --surface-2:#142238; --ink:#e7eef7; --ink-2:#b2c1d3; --ink-3:#8496ad;
    --line:#223249; --line-2:#1b2a3e; --grid:#1f2e44;
    --accent:#4aa3ee; --accent-ink:#04152a; --accent-soft:#12304f;
    --good:#5fd08a; --bad:#ff8c82; --warn-bg:#3a2f10; --warn-ink:#f2c96b;
    --s1:#3d96e8; --s2:#d95926; --s3:#3eb675; --s4:#c98500; --s5:#a37ae6; --s6:#22b5cc; --s7:#e0578f; --neutral-bar:#546780; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a1320; --surface:#0f1b2c; --surface-2:#142238; --ink:#e7eef7; --ink-2:#b2c1d3; --ink-3:#8496ad;
  --line:#223249; --line-2:#1b2a3e; --grid:#1f2e44;
  --accent:#4aa3ee; --accent-ink:#04152a; --accent-soft:#12304f;
  --good:#5fd08a; --bad:#ff8c82; --warn-bg:#3a2f10; --warn-ink:#f2c96b;
  --s1:#3d96e8; --s2:#d95926; --s3:#3eb675; --s4:#c98500; --s5:#a37ae6; --s6:#22b5cc; --s7:#e0578f; --neutral-bar:#546780; color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.45;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 40px}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em;text-wrap:balance}
.wrap{max-width:1320px;margin:0 auto}
.mono{font-family:var(--mono);font-size:12px}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* app bar */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:14px 0 10px}
.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;letter-spacing:-.02em}
.brand svg{width:26px;height:26px}
.tenant{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.tenant b{color:var(--ink);font-weight:600}
nav{display:flex;gap:2px;margin-left:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px;flex-wrap:wrap}
nav button{border:0;background:transparent;padding:7px 14px;border-radius:7px;cursor:pointer;color:var(--ink-2);font-weight:550;display:flex;gap:7px;align-items:center}
nav button[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
nav button:not([aria-current="page"]):hover{background:var(--surface-2);color:var(--ink)}
.badge{background:var(--warn-bg);color:var(--warn-ink);border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px;font-variant-numeric:tabular-nums}
nav button[aria-current="page"] .badge{background:var(--accent-ink);color:var(--accent)}

/* generic */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0}
.card h2{font-size:15px}
.card-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:12px}
.card-head .sub{color:var(--ink-3);font-size:12.5px}
.card-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 13px;cursor:pointer;font-weight:550}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.primary[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.btn.small{padding:4px 10px;font-size:12.5px}
.btn.link{border:0;background:none;color:var(--accent);padding:2px 4px;text-decoration:underline;text-underline-offset:2px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;padding:6px 13px;cursor:pointer;font-weight:550;color:var(--ink-2)}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 13px;cursor:pointer;font-weight:550;color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pill{display:inline-block;font-family:var(--mono);font-size:11.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 7px;color:var(--ink-2)}
.pill.un{background:var(--warn-bg);border-color:transparent;color:var(--warn-ink)}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label,.lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600}
select,input[type=text],input[type=date],input[type=search],input[type=email],input[type=tel]{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 9px;min-width:0;width:100%}
.notice{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;background:var(--warn-bg);color:var(--warn-ink);border-radius:10px;padding:9px 14px;margin:6px 0 14px;font-size:13px}
.notice .btn{background:transparent;border-color:currentColor;color:inherit}
.muted{color:var(--ink-3)}
.up{color:var(--good)} .down{color:var(--bad)}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:flex-end;margin:6px 0 12px}
.selects{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px;align-items:end}
.selects .clear{align-self:end}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;min-width:0}
.kpi .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600}
.kpi .v{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi .d{font-size:12.5px;color:var(--ink-2)}
.kpi.warn{background:var(--warn-bg);border-color:transparent}
.kpi.warn .k,.kpi.warn .d{color:var(--warn-ink)}

/* grid */
.grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px}
@media (max-width:900px){.grid{grid-template-columns:minmax(0,1fr)}}
.tabs{display:flex;gap:4px}
.tabs button{border:1px solid var(--line);background:var(--surface);padding:5px 14px;border-radius:8px;cursor:pointer;font-weight:600;color:var(--ink-2)}
.tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.scroll{overflow:auto;max-width:100%}
.tscroll{max-height:440px}
table{border-collapse:collapse;width:100%}
table{font-size:13px}
th,td{padding:6px 8px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line-2)}
th:first-child,td:first-child{text-align:left}
thead th{position:sticky;top:0;background:var(--surface);z-index:1;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:600;border-bottom:1px solid var(--line)}
thead tr.yr th{color:var(--ink);font-size:13px;text-transform:none;letter-spacing:0;text-align:center;border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:var(--surface-2)}
tfoot td{position:sticky;bottom:0;background:var(--surface);font-weight:700;border-top:1px solid var(--line);border-bottom:0}
td.name{max-width:210px;overflow:hidden;text-overflow:ellipsis}
.t2{display:block;font-size:11.5px;color:var(--ink-3)}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:5px}

/* chart */
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:6px;font-size:12.5px;color:var(--ink-2)}
.chartbox{position:relative}
svg text{font-family:var(--font)}
.bars{display:flex;flex-direction:column;gap:7px}
.brow{display:grid;grid-template-columns:minmax(90px,38%) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:12.5px;border:0;background:none;padding:2px 0;text-align:left;width:100%}
.brow.click{cursor:pointer}
.brow.click:hover .bl{color:var(--accent)}
.bl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.btrack{height:16px;position:relative}
.bfill{height:100%;border-radius:2px 5px 5px 2px;background:var(--s1);min-width:2px}
.bfill.un{background:repeating-linear-gradient(135deg,var(--neutral-bar) 0 3px,transparent 3px 6px);border:1px solid var(--neutral-bar)}
.bv{font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.bv b{color:var(--ink);font-weight:600}
#tip{position:fixed;z-index:50;pointer-events:none;background:var(--ink);color:var(--bg);border-radius:8px;padding:7px 10px;font-size:12.5px;box-shadow:0 4px 18px rgba(0,0,0,.25);display:none;max-width:280px}
#tip .r{display:flex;gap:8px;justify-content:space-between}

/* detail card */
.detail{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;margin-bottom:14px}
@media (max-width:760px){.detail{grid-template-columns:minmax(0,1fr)}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:13px}
.kv dt{color:var(--ink-3)} .kv dd{margin:0}
.hist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;font-size:13px}
.hist li{display:flex;gap:10px}

/* upload */
.drop{border:2px dashed var(--line);border-radius:14px;padding:30px 20px;text-align:center;background:var(--surface);cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:center}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop b{font-size:16px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:16px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--ink-2)}
.step b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.stat{background:var(--surface-2);border-radius:10px;padding:10px 12px}
.stat .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.stat .k{font-size:12px;color:var(--ink-3)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px;align-items:start}
@media (max-width:980px){.two{grid-template-columns:minmax(0,1fr)}}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.row .field{flex:1 1 150px}
td input,td select{padding:4px 7px}
.bulk{position:sticky;top:0;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.bulk .field{min-width:180px}
.radio{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.radio label{display:flex;gap:6px;align-items:center;text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink);font-weight:500}
.radio input{width:auto}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;z-index:60;box-shadow:0 6px 24px rgba(0,0,0,.3);max-width:calc(100vw - 32px)}
.warnrow{color:var(--warn-ink);background:var(--warn-bg);border-radius:6px;padding:1px 7px;font-size:12px}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.card{animation:fade .25s ease both}@keyframes fade{from{opacity:.0;transform:translateY(3px)}to{opacity:1;transform:none}}
}

/* gate screens */
.gate{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px}
.gate[hidden]{display:none}
.gatecard{width:min(100%,480px);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:32px 28px;text-align:center}
.gate h1{font-size:22px;margin-bottom:8px}
.gate p{color:var(--ink-2);margin:0 0 14px}
.gate code,.gate pre{text-align:left}
.gate code,.gate pre{font-family:var(--mono);font-size:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:block;white-space:pre-wrap;word-break:break-all;user-select:all}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:12px;padding:34px;text-align:center;color:var(--ink-2);margin-bottom:14px}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}
/* Only dim a view if loading takes a noticeable moment; quick filter changes keep everything on screen. */
.loading{cursor:progress;animation:dimlate .2s linear .45s both}@keyframes dimlate{to{opacity:.6}}
.linkbtn{border:0;background:none;color:var(--ink-2);cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:4px 8px}

/* sources, products, sign-in errors */
.srcgroup{display:flex;flex-direction:column;gap:8px}
.grp{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.grp h2{margin:0;font-size:15px;letter-spacing:.02em}
.pcodes{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.pcodes .x{border:0;background:transparent;color:var(--ink-3);cursor:pointer;font-size:11px;padding:0 2px;text-decoration:underline}
.dupe{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.dupe:first-of-type{border-top:0}
.dupe .nm{font-weight:600}
.gate .err{background:var(--warn-bg);color:var(--warn-ink);border-radius:10px;padding:10px 12px;margin:0 0 14px;font-size:13px}

.bulk[hidden]{display:none}
.two.wide-r{grid-template-columns:minmax(0,.95fr) minmax(0,1.45fr)}
@media (max-width:980px){.two.wide-r{grid-template-columns:minmax(0,1fr)}}

button.pill{cursor:pointer;font:inherit;font-family:var(--mono);font-size:11.5px}
button.pill:hover{border-color:var(--accent);color:var(--accent)}
tr.sel td{background:var(--accent-soft)}
.back{margin-bottom:10px}
.ammeta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;margin:6px 0 4px}
.ammeta .field{min-width:200px}
.row[hidden]{display:none}
.seg .count{display:inline-block;margin-left:5px;font-size:11px;font-weight:700;padding:0 6px;border-radius:999px;background:var(--line);color:var(--muted);font-variant-numeric:tabular-nums}
.seg button[aria-pressed="true"] .count{background:rgba(255,255,255,.22);color:inherit}
.seg.warn button[aria-pressed="false"]{background:var(--warn-bg);color:var(--warn-ink)}
.seg.warn button[aria-pressed="false"] .count{background:rgba(0,0,0,.08);color:inherit}
.seg.warn button[aria-pressed="true"]{background:var(--warn-ink);color:var(--warn-bg)}
.seg button[hidden]{display:none}

/* top bar: Upload icon and the Manage menu */
nav button.iconbtn{padding:7px 10px}
nav .menu{position:relative}
nav .menu>button{border:0;background:transparent;padding:7px 12px;border-radius:7px;cursor:pointer;color:var(--ink-2);font-weight:550;display:flex;gap:7px;align-items:center;font:inherit;font-weight:550}
nav .menu>button[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
nav .menu>button[aria-current="page"] .badge{background:var(--accent-ink);color:var(--accent)}
nav .menu>button:not([aria-current="page"]):hover,nav .menu>button[aria-expanded="true"]:not([aria-current="page"]){background:var(--surface-2);color:var(--ink)}
.menu-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:5px;box-shadow:0 10px 30px rgba(0,0,0,.14);display:flex;flex-direction:column;gap:1px}
.menu-pop[hidden]{display:none}
.menu-pop button{width:100%;justify-content:space-between;text-align:left}
nav .menu-pop button[aria-current="page"]{background:var(--surface-2);color:var(--ink);font-weight:700}
nav .menu-pop button[aria-current="page"] .badge{background:var(--warn-bg);color:var(--warn-ink)}

/* roles: the server enforces them; these only tidy what a role cannot use */
body.role-viewer [data-write], body.role-viewer [data-fin]{display:none!important}
body.role-viewer #bulk, body.role-viewer #prodBulk, body.role-viewer #dupes, body.role-viewer #reassign, body.role-viewer [data-accchange], body.role-viewer .x, body.role-viewer #accTbl input[type=checkbox], body.role-viewer #prodTbl input[type=checkbox]{display:none!important}
body.role-viewer #prodTbl input[type=text]{pointer-events:none;border-color:transparent;background:transparent}
.roletag{font-weight:600;color:var(--ink)}
.rate-ed{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:12px;background:var(--surface-2)}
.rate-ed h3{margin:0 0 8px;font-size:14px}
.rate-ed .row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.rate-ed table{margin-top:10px}
.rate-ed .radio{flex-direction:column;align-items:flex-start;gap:6px}
.rate-ed .radio label input[type=date]{margin-left:4px}
.rate-ed .row{flex-direction:column;align-items:flex-start;gap:10px}
.rate-ed input[type=date]{width:150px!important}

/* compact customer card inside the KPI row */
.kpi.cust{grid-column:span 2}
@media (max-width:640px){.kpi.cust{grid-column:1/-1}}
.kpi.cust .cust-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kpi.cust .cname{font-size:16px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.kpi.cust .right{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.kpi.cust .d{margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.cust .cust-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;font-size:12.5px;color:var(--ink-2)}
.kpis .kpi{min-height:104px}

.brow.sel{background:var(--surface-2);border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--accent)}
.brow.sel .bl{font-weight:700;color:var(--accent)}
.brow.click{padding:2px 4px}

th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover,th.sortable.on{color:var(--ink)}
th.sortable .arr{font-size:9px;margin-left:2px}

/* commissions dashboard */
table.monthly th,table.monthly td{white-space:nowrap}
table.monthly td.name{text-align:left;position:sticky;left:0;background:var(--surface)}
table.monthly tfoot td{font-weight:700}
td.mc{cursor:pointer}
td.mc:hover{background:var(--surface-2)}
td.mc.sel{background:var(--accent);color:var(--accent-ink);border-radius:6px}
td.mc.sel .muted{color:inherit;opacity:.7}
th.future{color:var(--ink-3);font-weight:500}
table.detail-tbl th,table.detail-tbl td{white-space:nowrap}
table.detail-tbl td:nth-child(7){white-space:normal}
table.detail-tbl tfoot td{font-weight:700}
.rate-ed .frDate{width:150px}
.rate-ed + .rate-ed{margin-top:12px}

.chk{display:inline-flex;gap:7px;align-items:center;font-size:12.5px;color:var(--ink-2);cursor:pointer;margin-left:auto}
.chk[hidden]{display:none}

.themebtn{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.themebtn:hover{color:var(--ink);border-color:var(--ink-3)}
.themebtn .i-sun{display:none}
:root[data-theme="dark"] .themebtn .i-sun{display:block}
:root[data-theme="dark"] .themebtn .i-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .themebtn .i-sun{display:block}
  :root:not([data-theme="light"]) .themebtn .i-moon{display:none}
}
table.detail-tbl thead th{text-align:center!important}

button.xp{border:0;background:none;color:var(--ink-3);cursor:pointer;width:20px;height:20px;padding:0;margin:0 4px 0 -4px;border-radius:5px;font-size:12px;vertical-align:middle;line-height:1}
button.xp:hover{background:var(--line-2);color:var(--ink)}
tbody tr.sub td{background:var(--surface-2);font-size:13px;color:var(--ink-2)}
tbody tr.sub .subn{padding-left:30px;display:inline-block}
tbody tr.sub td.name{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
tbody tr.sub .subn{display:block}
button.brand{border:0;background:none;color:inherit;font-family:inherit;padding:0;cursor:pointer}
button.brand:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}

#tbl td.name{max-width:380px}
#tbl .nm{display:flex;align-items:baseline;gap:8px;min-width:0}
#tbl .nmt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#tbl .nm .loc{color:var(--ink-3);font-size:12px;white-space:nowrap;flex:none}
#tbl .nm .pill{flex:none}
#tbl button.xp{display:block;width:auto;height:auto;margin:2px 0 0 -4px;padding:1px 6px;font-size:11.5px;color:var(--ink-3);border-radius:5px}
.chk .count{display:inline-block;font-size:11px;font-weight:700;padding:0 6px;border-radius:999px;background:var(--line);color:var(--ink-2);font-variant-numeric:tabular-nums}
#v-accounts label.chk{text-transform:none;letter-spacing:normal;font-weight:500;font-size:13px;color:var(--ink-2);align-self:center}

/* Broker Management: room for the whole Broker ID table, tops level, matching control heights */
.two.wide-r{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
@media (max-width:980px){.two.wide-r{grid-template-columns:minmax(0,1fr)}}
#bidCard:empty{display:none}
.field select,.field input[type=text],.field input[type=search],.field input[type=email],.field input[type=tel],.field input[type=date]{height:36px}
.row.addone .field{flex:1 1 90px}
.row.addone .field:first-child{flex:0 0 96px}
@media (max-width:700px){.row.addone{flex-wrap:wrap!important}}

/* Clear filters: only appears once something is selected, so make it stand out */
.btn.clear{height:36px;display:inline-flex;align-items:center;gap:6px;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));font-weight:650;background:var(--accent-soft)}
.btn.clear::before{content:"✕";font-size:11px;font-weight:700}
.btn.clear:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.clear[hidden]{display:none}
#codes td.per{text-align:left;font-size:12.5px;line-height:1.25;min-width:96px}
#codes td.per .btn.link{padding:0;text-align:left}
#codes td.per .btn.link.muted{color:var(--ink-3);text-decoration:none}

.rate-ed .row .field{flex:0 0 auto}
.rate-ed .row.perrow{flex-direction:row;align-items:flex-end;flex-wrap:wrap}
#codes td.per .btn.link{white-space:normal}
#codes td.per{width:104px}
#codes input[data-cn]{width:118px;min-width:0!important}
#codes input[data-cn]{width:96px}
#codes td.per{width:92px}
#codes th,#codes td{padding-left:6px;padding-right:6px}
#codes input[data-cn]{width:90px}
#codes select{padding-left:6px;padding-right:2px}
.two.wide-r{grid-template-columns:minmax(0,1.09fr) minmax(0,1fr)}
#codes input[data-cn]{width:84px}

/* Broker ID table: centered headers, and the Broker ID pill, Display name and Meaning controls share one height */
#codes thead th{text-align:center}
#codes input[data-cn],#codes select[data-ck],#codes button.pill,#codes span.pill{height:32px;box-sizing:border-box;display:inline-flex;align-items:center}
#codes input[data-cn]{display:block;padding-top:0;padding-bottom:0}
#codes button.pill,#codes span.pill{padding-top:0;padding-bottom:0}

/* Broker ID table: whole row selects, everything centered; commission editor sits beside the details */
#codes th,#codes td{text-align:center!important}
#codes td.num{text-align:center!important}
#codes input[data-cn]{text-align:center}
#codes select[data-ck]{text-align-last:center}
#codes tbody tr[data-row]{cursor:pointer}
#codes tbody tr[data-row]:hover td{background:var(--surface-2)}
#codes tbody tr.sel td,#codes tbody tr.sel:hover td{background:var(--accent-soft)}
#codes td.per{width:auto}
#rateEd[hidden]{display:none}
#rateEd .rate-ed{border:0;background:none;padding:0;margin:0}
#rateEd .rate-ed h3{font-size:16px;margin-bottom:12px}

/* Account Managers table: same treatment as the Broker ID table */
#ams th,#ams td{text-align:center!important;vertical-align:middle}
#ams td.num{text-align:center!important}
#ams input[data-am]{height:32px;box-sizing:border-box;text-align:center;padding-top:0;padding-bottom:0;width:100%}
#ams .pill{height:32px;box-sizing:border-box;display:inline-flex;align-items:center;padding-top:0;padding-bottom:0}
#ams button.btn.small{height:32px;display:inline-flex;align-items:center}

#ams th,#ams td{padding-left:5px;padding-right:5px}
#ams input[data-am]{font-size:13px;min-width:0!important}
#ams input[data-f=phone]{width:108px}
#ams input[data-f=email]{width:150px}
#ams button.rm{width:32px;padding:0;justify-content:center;color:var(--bad)}
#ams td:first-child{white-space:normal}
#ams th,#ams td{padding-left:4px;padding-right:4px}
#ams th{font-size:11px;letter-spacing:.03em}
#ams input[data-am]{padding-left:6px;padding-right:6px}
#ams input[data-f=phone]{width:112px}
#ams input[data-f=email]{width:128px}
#ams .pill{padding-left:7px;padding-right:7px}
#ams button.rm{width:30px}

/* Broker ID table: Broker ID and Display name read better left aligned */
#codes th:nth-child(1),#codes td:nth-child(1),#codes th:nth-child(2),#codes td:nth-child(2){text-align:left!important}
#codes input[data-cn]{text-align:left}

/* Broker Management: Brokers on top, Account Managers as their own section underneath */
.sect-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:30px 0 12px;padding-top:18px;border-top:2px solid var(--line)}
.sect-head.first{margin-top:0;padding-top:0;border-top:0}
.sect-head h2{font-size:18px}
.sect-head .sub{color:var(--ink-3);font-size:13px}
.two.wide-l{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
@media (max-width:980px){.two.wide-l{grid-template-columns:minmax(0,1fr)}}
#ams input[data-f=phone]{width:120px}
#ams input[data-f=email]{width:185px}
#ams th,#ams td{padding-left:6px;padding-right:6px}
#ams th{font-size:11.5px}
.row.addone .field{flex:1 1 80px}

/* Header: every control is the same height, and Upload is its own pill to the right of Manage */
.bar{--hdr-h:42px}
.bar .tenant{height:var(--hdr-h);box-sizing:border-box;padding-top:0;padding-bottom:0}
.themebtn{width:var(--hdr-h);height:var(--hdr-h)}
#signout.linkbtn{height:var(--hdr-h);box-sizing:border-box;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:0 16px;text-decoration:none;display:inline-flex;align-items:center}
#teamBtn.linkbtn{height:var(--hdr-h);width:var(--hdr-h);box-sizing:border-box;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:0;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
#signout.linkbtn[hidden]{display:none}
#teamBtn.linkbtn[hidden]{display:none}
#signout.linkbtn:hover{color:var(--ink);border-color:var(--ink-3)}
#teamBtn.linkbtn:hover{color:var(--ink);border-color:var(--ink-3)}
.bar nav{height:var(--hdr-h);box-sizing:border-box;align-items:center}
.bar nav button,.bar nav .menu>button{height:34px}
nav.navsolo{margin-left:-12px}
body.role-viewer nav.navsolo{display:none}

/* Commissions invoice detail: fit the page width instead of scrolling sideways */
table.detail-tbl{width:100%;table-layout:fixed;font-size:12px}
table.detail-tbl th,table.detail-tbl td{white-space:normal!important;overflow-wrap:break-word;padding:7px 5px;min-width:0!important;vertical-align:middle}
table.detail-tbl th{font-size:10.5px;letter-spacing:.03em;line-height:1.25}
table.detail-tbl th .arr{display:inline}
table.detail-tbl td[style]{min-width:0!important}
table.detail-tbl th:nth-child(1){width:6.5%}
table.detail-tbl th:nth-child(2){width:12%}
table.detail-tbl th:nth-child(3){width:6.5%}
table.detail-tbl th:nth-child(4){width:5.5%}
table.detail-tbl th:nth-child(5){width:4.5%}
table.detail-tbl th:nth-child(6){width:9.5%}
table.detail-tbl th:nth-child(7){width:11%}
table.detail-tbl th:nth-child(8){width:4.5%}
table.detail-tbl th:nth-child(9){width:5.5%}
table.detail-tbl th:nth-child(10){width:7%}
table.detail-tbl th:nth-child(11){width:7%}
table.detail-tbl th:nth-child(12){width:7%}
table.detail-tbl th:nth-child(13){width:6.5%}
table.detail-tbl th:nth-child(14){width:7%}
table.detail-tbl .pill{font-size:11px;padding:2px 6px}
table.detail-tbl th{overflow-wrap:normal;word-break:normal}
table.detail-tbl td.mono{overflow-wrap:anywhere}

/* Commissions: Overview | Broker tabs and the Broker dashboard */
.ctabs{margin-bottom:12px}
.two.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:980px){.two.even{grid-template-columns:minmax(0,1fr)}}
.bkpis{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.kpi.bkid .v{letter-spacing:.01em}
.kpi .bkmeta{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:6px;font-size:12.5px;color:var(--ink-2)}
.kpi .bkmeta b{color:var(--ink);font-weight:600}
.kpi .d b.up{color:var(--good,#1a7f4b)}
.kpi .d b.dn{color:var(--bad,#b3261e)}
#bkCustTbl tr.click{cursor:pointer}
#bkCustTbl tr.sel td{background:var(--surface-2);font-weight:600}
#bkCustTbl td.name{max-width:none}
table.detail-tbl.nobk th:nth-child(1){width:15%}
table.detail-tbl.nobk th:nth-child(2){width:6.5%}
table.detail-tbl.nobk th:nth-child(3){width:5.5%}
table.detail-tbl.nobk th:nth-child(4){width:4.5%}
table.detail-tbl.nobk th:nth-child(5){width:9.5%}
table.detail-tbl.nobk th:nth-child(6){width:14.5%}
table.detail-tbl.nobk th:nth-child(7){width:4.5%}
table.detail-tbl.nobk th:nth-child(8){width:5.5%}
table.detail-tbl.nobk th:nth-child(9){width:7%}
table.detail-tbl.nobk th:nth-child(10){width:7%}
table.detail-tbl.nobk th:nth-child(11){width:7%}
table.detail-tbl.nobk th:nth-child(12){width:6.5%}
table.detail-tbl.nobk th:nth-child(13){width:7%}
/* A broker login only has its own dashboard: no navigation, no Manage, no upload. */
body.role-broker header.bar nav{display:none!important}
.codelink{padding:0;font-size:inherit;text-decoration:none}.codelink:hover b{text-decoration:underline}
.ctabs[hidden],#bkCodeF[hidden],#cOverview[hidden],#cBroker[hidden],#bkBody[hidden],#bkFilters[hidden]{display:none!important}

/* Broker dashboard customers table follows the Sales Dashboard table */
#bkCustTbl .nm{display:flex;align-items:baseline;gap:8px;min-width:0}
#bkCustTbl .nmt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#bkCustTbl .nm .loc{color:var(--ink-3);font-size:12px;white-space:nowrap;flex:none}
#bkCustTbl button.xp{display:block;width:auto;height:auto;margin:2px 0 0 -4px;padding:1px 6px;font-size:11.5px;color:var(--ink-3);border-radius:5px}
#bkCustTbl td.name{max-width:260px}
/* Invoice detail: every value sits centered under its centered heading */
table.detail-tbl tbody td, table.detail-tbl tfoot td{text-align:center!important}
table.detail-tbl tfoot td[colspan]{text-align:left!important}
table.detail-tbl td.num{font-variant-numeric:tabular-nums}
table.detail-tbl th:nth-child(3){width:7.5%}
table.detail-tbl th:nth-child(7){width:10%}
table.detail-tbl.nobk th:nth-child(3){width:5.5%}
table.detail-tbl.nobk th:nth-child(7){width:4.5%}
table.detail-tbl.nobk th:nth-child(2){width:7.5%}
table.detail-tbl.nobk th:nth-child(6){width:13.5%}
table.detail-tbl td:nth-child(3){white-space:nowrap!important}
table.detail-tbl.nobk td:nth-child(3){white-space:normal!important}
table.detail-tbl.nobk td:nth-child(2){white-space:nowrap!important}
.two.even.bkgrid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
@media (max-width:980px){.two.even.bkgrid{grid-template-columns:minmax(0,1fr)}}
#bkCustTbl td.name{max-width:none}

/* Phone: the header is just the logo and a menu button. Everything else lives in the menu. */
.hdrmenu{display:contents}
.burger{display:none}
.mlbl{display:none}
@media (max-width:760px){
  .bar{flex-wrap:wrap;gap:8px 12px;padding:12px 0 8px;position:relative}
  .burger{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;cursor:pointer;padding:0}
  .burger[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  .hdrmenu{display:none}
  .bar.open .hdrmenu{display:flex;flex-direction:column;gap:4px;flex:0 0 100%;order:3;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
  .hdrmenu .tenant{order:1;height:auto!important;border:0;background:transparent;border-radius:0;padding:2px 6px 8px;border-bottom:1px solid var(--line);flex-wrap:wrap;font-size:13px}
  .hdrmenu nav{margin:0!important;height:auto!important;border:0;background:transparent;padding:0;flex-direction:column;gap:2px;align-items:stretch}
  .hdrmenu nav[aria-label="Sections"]{order:2;display:none}
  .hdrmenu nav.navmanage{order:2}
  .hdrmenu nav.navsolo{order:3}
  .hdrmenu #themeBtn{order:4}
  .hdrmenu #signout{order:6}
  .hdrmenu #teamBtn{order:5}
  .hdrmenu nav button,.hdrmenu nav .menu>button{height:auto!important;min-height:44px;width:100%;justify-content:flex-start;padding:10px 12px;font-size:15px}
  .hdrmenu nav .menu>button{pointer-events:none;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;min-height:34px;padding-bottom:2px}
  .hdrmenu nav .menu>button svg:last-child{display:none}
  .hdrmenu .menu-pop,.hdrmenu .menu-pop[hidden]{display:flex!important;position:static;box-shadow:none;border:0;padding:0 0 0 8px;min-width:0;background:transparent}
  .hdrmenu .menu-pop button{justify-content:flex-start}
  .hdrmenu .mlbl{display:inline}
  .hdrmenu #teamBtn.linkbtn{width:100%!important}
  .hdrmenu #themeBtn,.hdrmenu #signout.linkbtn{width:100%!important;height:auto!important;min-height:44px;border:0;border-radius:7px;background:transparent;justify-content:flex-start;gap:10px;padding:10px 12px;font-size:15px;text-decoration:none;color:var(--ink-2);font-weight:550;display:flex}
  .hdrmenu #themeBtn,.hdrmenu #teamBtn.linkbtn{width:100%!important;height:auto!important;min-height:44px;border:0;border-radius:7px;background:transparent;justify-content:flex-start;gap:10px;padding:10px 12px;font-size:15px;text-decoration:none;color:var(--ink-2);font-weight:550;display:flex}
  .hdrmenu #signout.linkbtn[hidden]{display:none}
  .hdrmenu #teamBtn.linkbtn[hidden]{display:none}
  .hdrmenu #themeBtn:hover,.hdrmenu #signout.linkbtn:hover{background:var(--surface-2);color:var(--ink)}
  .hdrmenu #themeBtn:hover,.hdrmenu #teamBtn.linkbtn:hover{background:var(--surface-2);color:var(--ink)}
  .hdrmenu nav.navsolo button.iconbtn{gap:10px}
  .hdrmenu nav.navsolo{margin-left:0!important;border-top:0}
  .hdrmenu #themeBtn,.hdrmenu #signout{border-top:0}
  .hdrmenu #themeBtn,.hdrmenu #teamBtn{border-top:0}
  body.role-broker .burger{display:inline-flex}
  body.role-broker .hdrmenu nav{display:none!important}
}

/* Phone: wide tables keep their natural column widths and scroll sideways inside their card */
@media (max-width:760px){
  .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.detail-tbl{table-layout:auto;width:100%;min-width:1180px}
  table.detail-tbl th,table.detail-tbl td{white-space:nowrap!important;width:auto!important;padding:8px 9px}
  table.detail-tbl td[style]{min-width:0!important}
  table.detail-tbl th{font-size:10.5px}
  #bkCustTbl table.bkcust{font-size:12.5px;table-layout:auto}
  #bkCustTbl table.bkcust th,#bkCustTbl table.bkcust td{padding:8px 5px}
  #bkCustTbl td.name{max-width:118px}
  #bkCustTbl .nm{flex-wrap:wrap;gap:0 6px}
  #bkCustTbl table.bkcust th{font-size:10px;letter-spacing:.02em}
  #bkCustTbl tr.sub .subn{padding-left:12px}
}
@media (max-width:980px){.two,.two.wide-r,.two.wide-l,.two.even,.two.even.bkgrid{grid-template-columns:minmax(0,1fr)!important}}
@media (max-width:760px){
  #v-freight table,#v-brokers table{display:block;overflow-x:auto;max-width:100%}
  .rate-ed .row{flex-wrap:wrap}
  .rate-ed .radio{flex-wrap:wrap}
}
@media (max-width:760px){
  #tbl table{font-size:12.5px;table-layout:auto;width:100%}
  #tbl table.manyyrs{min-width:560px}
  #tbl th,#tbl td{padding:8px 4px}
  #tbl thead th{font-size:10px;letter-spacing:.02em}
  #tbl thead tr.yr th{font-size:12px}
  #tbl td.name{max-width:none;width:34%;white-space:normal}
  #tbl .nm{flex-wrap:wrap;gap:0 6px}
  #tbl .nmt{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
  #tbl tr.sub .subn{padding-left:12px}
  #tbl td.num{white-space:nowrap}
}
/* Phone: Sales, Active accounts and New vs lost sit in one row */
@media (max-width:760px){
  #kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  #kpis:has(.kpi.cust){grid-template-columns:minmax(0,1fr)}
  #kpis .kpi{padding:10px 9px;min-height:0}
  #kpis .kpi .k{font-size:9.5px;letter-spacing:.03em;line-height:1.25}
  #kpis .kpi .v{font-size:19px;margin-top:3px;white-space:nowrap}
  #kpis .kpi .d{font-size:11px;line-height:1.3;margin-top:2px}
  #kpis .kpi.cust .v,#kpis .kpi.cust .d{white-space:normal}
}

/* Phone navigation: Sales / Commissions pill under the logo; the menu holds the rest, in clear groups */
.mobtabs{display:none}
@media (max-width:760px){
  .mobtabs{display:flex;gap:0;margin:2px 0 14px;padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:12px;width:100%;box-sizing:border-box}
  .mobtabs button{flex:1 1 0;justify-content:center;padding:10px 6px;font-size:14px;border-radius:9px;text-align:center}
  body.role-viewer .mobtabs,body.role-broker .mobtabs{display:none}
  .hdrmenu nav[aria-label="Sections"]>button{display:none}
  .bar.open .hdrmenu{gap:0;padding:6px}
  .hdrmenu .tenant{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:10px 12px 12px;margin-bottom:4px}
  .hdrmenu .tenant .tl{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
  .hdrmenu .tenant b{font-size:15px}
  .hdrmenu .tenant .dot{display:none}
  .hdrmenu .tenant .roletag{font-size:12px;color:var(--ink-2)}
  .hdrmenu nav.navmanage .menu>button{padding:12px 12px 4px;min-height:0}
  .hdrmenu nav .menu>button svg:first-child{display:none}
  .hdrmenu .menu-pop,.hdrmenu .menu-pop[hidden]{padding:0}
  .hdrmenu nav .menu-pop button,.hdrmenu nav.navsolo button{border-radius:8px;padding:12px;min-height:46px}
  .hdrmenu nav .menu-pop button[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
  .hdrmenu nav.navsolo,.hdrmenu #themeBtn{border-top:1px solid var(--line)!important;margin-top:6px!important;padding-top:6px!important;border-radius:0}
  .hdrmenu #themeBtn{border-radius:0!important}
  .hdrmenu #signout.linkbtn{border-top:0!important}
  .hdrmenu #teamBtn.linkbtn{border-top:0!important}
  .hdrmenu nav.navsolo button.iconbtn svg,.hdrmenu #themeBtn svg{width:19px;height:19px;flex:none}
}
@media (max-width:760px){
  .mobtabs button{font-size:13px;white-space:nowrap;padding:10px 4px}
  .hdrmenu nav .menu>button,.hdrmenu nav .menu>button[aria-current="page"]{background:transparent!important;color:var(--ink-3)!important}
}

/* Phone, take two: the Sales/Commissions pill only on those two pages; day-night and upload are small icons by the menu button */
.hdricons{display:none}
@media (max-width:760px){
  .hdricons{display:flex;gap:2px;margin-left:auto;align-items:center}
  .hdricons .themebtn{width:38px;height:38px;border:0;background:transparent;color:var(--ink-3)}
  .hdricons .themebtn:hover{color:var(--ink);background:var(--surface-2)}
  .burger{margin-left:0}
  .mobtabs{display:none}
  body[data-view="dashboard"] .mobtabs,body[data-view="commissions"] .mobtabs{display:flex}
  body.role-viewer .mobtabs,body.role-broker .mobtabs{display:none!important}
  body.role-viewer #upBtn2,body.role-broker #upBtn2{display:none!important}
  .hdrmenu #themeBtn,.hdrmenu nav.navsolo{display:none!important}
  /* menu: Manage first, Sign out, then the workspace as quiet small print */
  .hdrmenu nav.navmanage{order:1}
  .hdrmenu #signout{order:2}
  .hdrmenu #teamBtn{order:2}
  .hdrmenu .tenant{order:3;margin:6px 0 0;border-bottom:0;border-top:1px solid var(--line);padding:10px 12px 6px}
  .hdrmenu .tenant .tl{font-size:10px}
  .hdrmenu .tenant b{font-size:12.5px;font-weight:600;color:var(--ink-2)}
  .hdrmenu .tenant .roletag{font-size:11.5px;color:var(--ink-3)}
  .hdrmenu #signout.linkbtn{border-top:1px solid var(--line)!important;margin-top:6px;border-radius:0}
  .hdrmenu #teamBtn.linkbtn{border-top:1px solid var(--line)!important;margin-top:6px;border-radius:0}
  .hdrmenu #teamBtn + #signout.linkbtn{border-top:0!important;margin-top:0}
}
@media (max-width:760px){
  .bar .hdricons{order:2;margin-left:auto}
  .bar .burger{order:3;margin-left:2px}
  .bar.open .hdrmenu{order:4}
}
/* Phone: the page switch is an underlined tab bar, so it never looks like the filter pills below it */
@media (max-width:760px){
  .mobtabs{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;margin:0 0 16px;gap:0}
  .mobtabs button{background:transparent!important;color:var(--ink-3);border-radius:0;font-size:15px;font-weight:650;padding:12px 4px 11px;border-bottom:3px solid transparent;margin-bottom:-1px}
  .mobtabs button[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brand-green)}
  .mobtabs button:not([aria-current="page"]):hover{color:var(--ink)}
}

/* Phone: the menu floats over the page (the page dims behind it) instead of pushing everything down */
@media (max-width:760px){
  .bar{position:relative;z-index:35}
  .bar.open .hdrmenu{position:absolute;top:calc(100% + 4px);left:0;right:0;flex:none;z-index:36;box-shadow:0 18px 50px rgba(0,0,0,.28);max-height:calc(100vh - 90px);overflow-y:auto}
  body.menu-open::before{content:"";position:fixed;inset:0;background:rgba(4,14,28,.5);z-index:30}
}
/* Phone: Years, then Period and Measure side by side; every pill stretches to fill its row */
@media (max-width:760px){
  #v-dashboard .filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 10px;align-items:end}
  #v-dashboard .filters .field:first-child{grid-column:1/-1}
  #v-dashboard .filters .field{min-width:0}
  #v-dashboard #yrs{flex-wrap:wrap}
  #v-dashboard #yrs .chip{flex:1 1 72px;text-align:center;padding:9px 8px}
  #v-dashboard .filters .seg{display:flex;width:100%}
  #v-dashboard .filters .seg button{flex:1 1 0;padding:9px 6px;text-align:center}
}

/* Phone: the drop-down filters fold away behind one Filters button */
.filtertoggle{display:none}
@media (max-width:760px){
  .filtertoggle{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;margin:0 0 12px;padding:11px 14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;font:inherit;font-weight:600;cursor:pointer}
  .filtertoggle .ft-c{margin-left:auto;color:var(--ink-3);transition:transform .15s}
  #v-dashboard.fopen .filtertoggle .ft-c{transform:rotate(180deg)}
  .filtertoggle .fcount{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
  .filtertoggle .fcount[hidden]{display:none}
  #v-dashboard #selects{display:none}
  #v-dashboard.fopen #selects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Phone: Commissions tiles are compact and sit two across */
@media (max-width:760px){
  #cKpis,#bkKpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:10px}
  #cKpis .kpi,#bkKpis .kpi{padding:10px 10px;min-height:0}
  #cKpis .kpi .k,#bkKpis .kpi .k{font-size:9.5px;letter-spacing:.03em;line-height:1.25}
  #cKpis .kpi .v,#bkKpis .kpi .v{font-size:20px;margin-top:3px;white-space:nowrap}
  #cKpis .kpi .d,#bkKpis .kpi .d{font-size:11px;line-height:1.3;margin-top:2px}
  #bkKpis .kpi .bkmeta{flex-direction:column;gap:0;margin-top:3px;font-size:11px;line-height:1.35}
  #cNote{font-size:11.5px!important;margin-bottom:8px!important}
}

/* Commissions filters fold behind a Filters button on phones (same as the Sales Dashboard) */
.filtertoggle .fsum{font-weight:500;color:var(--ink-2);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media (max-width:760px){
  #cOverview #cFilters,#cBroker #bkFilters{display:none!important}
  #cOverview.fopen #cFilters:not([hidden]){display:flex!important;gap:10px}
  #cBroker.fopen #bkFilters:not([hidden]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}
  #cOverview.fopen .filtertoggle .ft-c,#cBroker.fopen .filtertoggle .ft-c{transform:rotate(180deg)}
  .filtertoggle[hidden]{display:none!important}
}

/* Phone: the tabs read "Sales" and "Commissions"; a small label above them says what they switch between */
.mt-lbl{display:none}
@media (max-width:760px){
  .mobtabs{flex-wrap:wrap}
  .mobtabs .mt-lbl{display:block;flex:0 0 100%;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:0 2px 2px;margin-bottom:-2px}
  .mobtabs button{font-size:16px}
}
@media (max-width:760px){.mobtabs{margin-top:8px}}
/* Phone: slimmer Sales Dashboard pills (same size as the Overview / Broker pills) and one font in the invoice table */
@media (max-width:760px){
  #v-dashboard #yrs .chip{padding:5px 8px;font-size:14.5px;flex:1 1 64px}
  #v-dashboard .filters .seg button{padding:5px 6px;font-size:14.5px}
  #v-dashboard .tabs{gap:4px;flex-wrap:nowrap}
  #v-dashboard .tabs button{padding:5px 10px;font-size:14.5px;white-space:nowrap;flex:1 1 auto}
  table.detail-tbl td,table.detail-tbl td.mono,table.detail-tbl .pill{font-family:inherit!important;font-size:12px!important;letter-spacing:0}
  table.detail-tbl .pill{padding:1px 7px}
}
@media (max-width:760px){#v-dashboard .tabs button{padding:5px 8px;font-size:14px}}
/* Phones inflate long text in wide tables (Item Description); keep every size exactly as set */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:760px){
  table.detail-tbl td:nth-child(7),table.detail-tbl.nobk td:nth-child(6){font-size:12px!important;line-height:1.3;max-height:none}
  table.detail-tbl td{font-size:12px!important}
}

/* Phone: Item and Item Description are just a glimpse; cut them short (tap-and-hold shows the full text) */
@media (max-width:760px){
  table.detail-tbl{min-width:980px}
  table.detail-tbl td.descr,table.detail-tbl td.prod{max-width:110px;width:110px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important}
}
@media (max-width:760px){
  table.detail-tbl{min-width:0;width:max-content}
  table.detail-tbl th{white-space:normal!important;line-height:1.2;padding:8px 7px}
  table.detail-tbl td{padding:8px 7px}
}
@media (max-width:760px){table.detail-tbl{width:1px;min-width:100%}}
/* Phone: an opened Filters bar and its drop-downs are one box */
@media (max-width:760px){
  #v-dashboard.fopen #fToggle,#cOverview.fopen #cfToggle,#cBroker.fopen #bkfToggle{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent;margin-bottom:0}
  #v-dashboard.fopen #selects,#cOverview.fopen #cFilters:not([hidden]),#cBroker.fopen #bkFilters:not([hidden]){border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;background:var(--surface);padding:2px 14px 14px;margin:0 0 12px}
}
@media (max-width:760px){#v-dashboard.fopen #fToggle,#cOverview.fopen #cfToggle,#cBroker.fopen #bkfToggle{border-bottom-color:var(--surface)}}

/* Phone: the Commissions view switch is labeled "Show" and says what each side is: all Brokers, or one Broker */
.ctabs .m,.ctabs .ct-lbl{display:none}
@media (max-width:760px){
  .ctabs{flex-wrap:wrap;gap:4px;margin-bottom:12px}
  .ctabs .ct-lbl{display:block;flex:0 0 100%;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:0 2px}
  .ctabs .d{display:none}
  .ctabs .m{display:inline}
  .ctabs button{flex:1 1 0;padding:5px 8px;font-size:14.5px;text-align:center}
}

/* Parent Companies */
.bulk .bsep{flex-basis:100%;border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.parrow{display:grid;grid-template-columns:minmax(170px,1.1fr) 90px 100px minmax(220px,2.4fr) auto;gap:10px 14px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.parrow:first-child{border-top:0}
.parrow.head{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);padding:0 0 6px}
.parrow .num{text-align:right}
.parrow input[type=text]{width:100%;font-weight:700}
.parrow .rules{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.parrow .rules .pill{display:inline-flex;align-items:center;gap:4px}
.parrow .rules .pill .x{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:14px;line-height:1;padding:0 0 0 2px}
.parrow .acts{display:flex;gap:6px;justify-content:flex-end}
.parrow .cnt{background:none;border:0;padding:0;color:var(--ink);font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line)}
body.role-viewer .parrow input[type=text]{pointer-events:none;border-color:transparent;background:transparent}
#parCard .row .field{flex:0 1 300px}
#v-accounts>#accMain>.sect-head.first{margin-top:14px}
@media(max-width:760px){
  .parrow{grid-template-columns:1fr auto auto;gap:6px 10px;padding:10px 0}
  .parrow.head{display:none}
  .parrow>.num:nth-of-type(2){display:none}
  .parrow .rules{grid-column:1/-1;order:5}
  .parrow .rules input.addrule{flex:1;min-width:120px}
  .parrow .acts{order:3}
  .parrow .acts .btn{padding:6px 10px}
  #parCard .row .field{flex:1 1 160px}
}

.tabs .ts{display:none}
@media (max-width:760px){
  #v-dashboard .tabs .tl{display:none}
  #v-dashboard .tabs .ts{display:inline}
}
.pcodes .pill .x{text-decoration:none;font-size:14px;line-height:1;margin-left:3px;padding:0 1px}
.pcodes input.addcode{width:112px;min-width:0;font-size:12.5px;padding:3px 8px;height:auto}

/* Ribbon chart (Sales by Account Manager) */
.rbsvg{display:block;width:100%;height:auto}
.rbsvg .rbseg{cursor:pointer}
.rbsvg .rib{opacity:.32;transition:opacity .12s}
.rbsvg .rib:hover{opacity:.55}
.rbsvg .dim{opacity:.18}
.rbsvg .rib.dim{opacity:.08}
.rbleg{display:flex;flex-wrap:wrap;gap:6px 12px;margin:8px 0 0;font-size:12.5px}
.rbleg button,.rbleg span.rbk{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:2px 0;color:var(--ink-2);font:inherit;cursor:pointer}
.rbleg span.rbk{cursor:default}
.rbleg .sw{width:11px;height:11px;border-radius:3px;display:inline-block}
.rbnote{font-size:12.5px;margin:6px 0 0}

/* Quick-add panel inside the Account Manager list */
.addpanel{background:var(--bg-2,var(--accent-soft));border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.addpanel[hidden]{display:none}
.addpanel .row.addone{margin:0}

.brand .wm{letter-spacing:-.03em}
.brand .wm1{color:var(--brand-navy)}
.brand .wm2{color:var(--brand-blue)}
:root[data-theme="dark"] .brand .wm1{color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand .wm1{color:var(--ink)}}

.gate .gatelogo{display:block;width:min(100%,300px);height:auto;margin:0 auto 22px;background:#fff;border-radius:10px;padding:6px 10px}

/* A thin brand strip across the very top, and a green edge on notices */
html{position:relative}
html::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-green));z-index:2}
.toast{border-left:4px solid var(--brand-green)}

/* Parent Company page */
.parrow .pname{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.parrow .pname .btn.link{font-weight:700;text-align:left;padding:0}
.parrow .rules .pill{font-size:11.5px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 14px}
.pgrid .field input,#parOne textarea{width:100%}
#parOne textarea{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;resize:vertical}
.rulelist{display:flex;flex-direction:column;gap:6px}
.rulerow{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:8px;padding:7px 12px;background:var(--surface-2)}
.rulerow .x{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:18px;line-height:1}
.rulerow .x:hover{color:var(--bad)}
body.role-viewer #parOne input,body.role-viewer #parOne textarea{pointer-events:none;border-color:transparent;background:transparent}
#parOne .row .field:first-child{flex:0 0 170px}
#parOne .row .field:nth-child(2){flex:1 1 220px}

/* Parent Company page: its own header so it is clearly not the Accounts list */
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink-3);margin:2px 0 10px}
.crumbs .btn.link{padding:0;font-size:13px}
.crumbs b{color:var(--ink);font-weight:650}
.phero{background:linear-gradient(135deg,var(--accent-soft),var(--surface) 70%);border:1px solid var(--line);border-left:5px solid var(--brand-blue);border-radius:14px;padding:18px 22px}
.phero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand-blue)}
.phname{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:2px 0 0;color:var(--ink)}
.pstats{display:flex;flex-wrap:wrap;gap:10px 32px;margin-top:16px}
.pstat .v{font-size:22px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pstat .k{font-size:12px;color:var(--ink-3)}
@media (max-width:760px){.phero{padding:14px 16px}.phname{font-size:23px}.pstats{gap:8px 22px}}
nav.crumbs{background:none;border:0;box-shadow:none;padding:0;border-radius:0;display:flex}

/* Section banners (Accounts: Parent Companies / Accounts. Brokers: Brokers / Account Managers) */
.sechero{--hc:var(--brand-blue);display:flex;align-items:flex-end;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;background:linear-gradient(135deg,color-mix(in srgb,var(--hc) 13%,var(--surface)),var(--surface) 72%);border:1px solid var(--line);border-left:5px solid var(--hc);border-radius:14px;padding:14px 20px;margin:30px 0 12px}
.sechero.first{margin-top:6px}
.sechero.sh-navy{--hc:var(--brand-navy)}
.sechero.sh-green{--hc:var(--brand-green)}
:root[data-theme="dark"] .sechero.sh-navy{--hc:#7fb0e6}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sechero.sh-navy{--hc:#7fb0e6}}
.sechero .eyebrow{color:var(--hc)}
:root[data-theme="light"] .sechero.sh-green .eyebrow,:root:not([data-theme]) .sechero.sh-green .eyebrow{color:#1f8a52}
.sechero h2{font-size:22px;letter-spacing:-.02em;margin:1px 0 2px}
.sechero p{margin:0;color:var(--ink-3);font-size:13px;max-width:620px}
.shstats{display:flex;flex-wrap:wrap;gap:6px 26px}
.shstat .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.shstat .k{font-size:11.5px;color:var(--ink-3)}
@media (max-width:760px){.sechero{padding:12px 14px}.sechero h2{font-size:19px}.shstats{gap:4px 18px}.shstat .v{font-size:17px}}

/* Parent Company rows open to customers, then products */
tbody tr.sub.subc td{background:var(--surface-2);font-weight:500}
tbody tr.sub.subc .nm{padding-left:22px}
tbody tr.sub.sub2 td{background:color-mix(in srgb,var(--surface-2) 60%,var(--surface));font-size:12.5px}
tbody tr.sub.sub2 .subn{padding-left:54px}
#tbl tr.subc button.xp{margin-left:22px}
@media (max-width:760px){#tbl tr.sub.sub2 .subn{padding-left:34px}#tbl tr.subc .nm{padding-left:10px}#tbl tr.subc button.xp{margin-left:10px}}

/* Manage is its own pill, apart from the Sales / Commissions dashboard switcher */
nav.navmanage{margin-left:10px}
/* Manage and Upload sit together in one pill on desktop; on a phone Upload lives in the menu */
nav.navmanage .navup{padding:7px 10px;border-left:1px solid var(--line);border-radius:0 7px 7px 0;margin-left:3px}
@media (min-width:761px){nav.navsolo{display:none}}
@media (max-width:760px){nav.navmanage .navup{display:none}}
body.role-viewer nav.navmanage .navup{display:none}

/* Day / Night lives in the Manage menu on desktop (phones keep it in the menu; brokers have no Manage menu) */
.pop-sep{height:1px;background:var(--line);margin:5px 4px}
.pop-theme{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 8px 5px 12px}
.pop-theme .lbl{font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
nav .menu-pop .seg button{width:auto;padding:5px 12px;border-radius:0;font-size:13px;justify-content:center}
nav .menu-pop .seg button:hover{background:var(--surface-2)}
nav .menu-pop .seg button[aria-pressed="true"],nav .menu-pop .seg button[aria-pressed="true"]:hover{background:var(--accent);color:var(--accent-ink)}
@media (min-width:761px){body:not(.role-broker) #themeBtn{display:none}}
@media (max-width:760px){.pop-sep,.pop-theme{display:none}}

/* Dashboard tabs come in pairs, joined: Customer + Parent, Broker + Account Manager */
#dimTabs{gap:0}
#dimTabs button{border-radius:0}
#dimTabs button:nth-child(odd){border-radius:8px 0 0 8px}
#dimTabs button:nth-child(even){border-radius:0 8px 8px 0;margin-left:-1px}
#dimTabs button:nth-child(3){margin-left:12px;border-radius:8px 0 0 8px}
#dimTabs button[aria-selected="true"]{position:relative;z-index:1}
@media (max-width:760px){#dimTabs button:nth-child(3){margin-left:8px}}
/* Appearance row: quiet, so the Manage list stays the focus */
.pop-theme{padding:3px 6px 3px 12px}
.pop-theme .lbl{font-size:10.5px;font-weight:500;letter-spacing:.06em}
nav .menu-pop .seg{border-radius:6px}
nav .menu-pop .seg button{padding:2px 9px;font-size:11.5px;font-weight:500;color:var(--ink-3)}
/* Workspace is information, not a control: plain text, no pill */
.bar .tenant{background:none;border:0;border-radius:0;padding:0;color:var(--ink-3)}
.bar .tenant b{color:var(--ink-2)}
nav .menu-pop .seg button[aria-pressed="true"],nav .menu-pop .seg button[aria-pressed="true"]:hover{background:var(--accent-soft);color:var(--accent);font-weight:600}

/* Workspace sits under the logo on desktop; on a phone it stays in the menu */
.brandcol{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.wsline{font-size:11.5px;line-height:1.1;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;padding-left:36px}
.wsline b{font-weight:600;color:var(--ink-2)}
.wsline{display:none}

/* Bigger logo */
.brand{font-size:25px;gap:12px}
.brand svg{width:38px;height:38px}
@media (max-width:760px){.brand{font-size:21px;gap:9px}.brand svg{width:31px;height:31px}}

/* The real BrokerScope wordmark (no tagline). The dark variant swaps the navy for a light tone. */
.brand .logo{height:54px;width:auto;display:block;margin:-4px 0}
.brand .logo-dark{display:none}
:root[data-theme="dark"] .brand .logo-light{display:none}
:root[data-theme="dark"] .brand .logo-dark{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand .logo-light{display:none}:root:not([data-theme="light"]) .brand .logo-dark{display:block}}
@media (max-width:760px){.brand .logo{height:38px;margin:-3px 0}}
/* Parent drilldown: the Products button sits directly under the customer name, left edges aligned */
#tbl tr.subc .subn{padding-left:0}
#tbl tr.subc .nm{padding-left:22px}
#tbl tr.subc button.xp{margin-left:16px}
@media (max-width:760px){#tbl tr.subc .subn{padding-left:0}#tbl tr.subc .nm{padding-left:10px}#tbl tr.subc button.xp{margin-left:4px}}

/* Customer insights card (shown when one customer is selected) */
#mgr .ins+.ins{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.ins-h{font-weight:700;font-size:13.5px;margin-bottom:8px}
.ins-h .muted{font-weight:500;font-size:12px;margin-left:6px}
.ins-stats{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:6px}
.ins-stat .v{font-size:17px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ins-stat .k{font-size:11.5px;color:var(--ink-3);max-width:190px}
.ins-stat.late .v{color:var(--warn-ink,#9a5b00)}
svg.rhythm{width:100%;height:auto;display:block;overflow:visible}
svg.rhythm .ax{stroke:var(--line);stroke-width:1}
svg.rhythm .axl{fill:var(--ink-3);font-size:10px}
svg.rhythm .lp{stroke:var(--s1);stroke-width:1.5;opacity:.55}
svg.rhythm .ld{fill:var(--s1)}
svg.rhythm .lp.last{stroke:var(--brand-green);opacity:1;stroke-width:2}
svg.rhythm .ld.last{fill:var(--brand-green)}
.mvlist{display:flex;flex-direction:column;gap:6px}
.mvrow{display:grid;grid-template-columns:minmax(110px,44%) minmax(0,1fr) 62px;gap:10px;align-items:center;font-size:12.5px}
.mvn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.mvtrack{height:12px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.mvbar{display:block;height:100%;border-radius:4px}
.mvbar.up{background:var(--good)} .mvbar.down{background:var(--bad)}
.mvv{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.tag{font-size:10.5px;font-weight:700;padding:0 6px;border-radius:999px;margin-left:4px;text-transform:uppercase;letter-spacing:.03em}
.tag.new{background:var(--accent-soft);color:var(--accent)}
.tag.gone{background:var(--warn-bg);color:var(--warn-ink)}
.ins-line{margin:0 0 8px;font-size:13px;color:var(--ink-2)}
.brow.pick{cursor:pointer}
.brow.pick:hover .bl{color:var(--accent)}
.brow.me .bl{font-weight:700;color:var(--accent)}
.brow.me .bfill{background:var(--brand-green)}
@media (max-width:760px){.mvrow{grid-template-columns:minmax(90px,40%) minmax(0,1fr) 54px}}
.bfill{display:block}
.mvrow{grid-template-columns:minmax(0,1fr) 62px;row-gap:2px}
.mvrow .mvn{grid-column:1/-1;white-space:normal;overflow:visible;line-height:1.25}
.mvrow .mvtrack{grid-column:1}
.mvrow .mvv{grid-column:2}
@media (max-width:760px){.mvrow{grid-template-columns:minmax(0,1fr) 54px}}
.ins-stats{gap:8px 16px}
.ins-stat .k{max-width:150px}

/* Customer insights: a wide card right under the KPIs, so it is the first thing you read */
.card.insights{margin-bottom:14px;border-left:5px solid var(--brand-green);background:linear-gradient(135deg,color-mix(in srgb,var(--brand-green) 8%,var(--surface)),var(--surface) 55%)}
.card.insights .card-head h2{font-size:18px;letter-spacing:-.02em}
.insrow{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:flex-start}
.insrow .ins{flex:1 1 280px;min-width:0;margin:0!important;padding:0!important;border:0!important}
.insrow .ins:first-child{flex:1.6 1 380px}
.insrow .ins+.ins{border-left:1px solid var(--line)!important;padding-left:28px!important}
@media (max-width:900px){.insrow .ins+.ins{border-left:0!important;padding-left:0!important;border-top:1px solid var(--line)!important;padding-top:16px!important}}
.insights svg.rhythm{max-height:150px}
#dashGrid.custmode>.card:nth-child(3){grid-column:1/-1}

/* Group insights */
.insrow .ins.wide{flex:1 1 100%!important;border:0!important;padding:0!important}
.ins-stats.strip{gap:6px 34px;margin:0 0 2px}
.ins-stats.strip .ins-stat .k{max-width:170px}
.insrow .ins.wide+.ins{border-left:0!important;padding-left:0!important}
button.mvrow.pick,button.attrow.pick{border:0;background:none;padding:2px 0;text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%}
button.mvrow.pick:hover .mvn,button.attrow.pick:hover .an{color:var(--accent)}
.attlist{display:flex;flex-direction:column;gap:8px}
.attrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;align-items:center;font-size:12.5px}
.attrow .an{grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:550}
.attrow .an .loc{margin-left:6px;font-weight:400;color:var(--ink-3);font-size:11.5px}
.attrow .ad{grid-column:1;color:var(--ink-3);font-size:12px}
.attrow .ad b{color:var(--warn-ink,#9a5b00)}
.attrow .ar{grid-column:2;grid-row:1/3;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.attrow .ar small{display:block;font-weight:400;color:var(--ink-3);font-size:10.5px}

.insrow .ins.full{flex:1 1 100%!important;border-left:0!important;padding-left:0!important;border-top:1px solid var(--line)!important;padding-top:14px!important}
.ins.full .brow{grid-template-columns:minmax(120px,22%) minmax(0,1fr) auto}

/* Selection bar: only appears once accounts are ticked */
.bulk{display:block;border-color:var(--accent);box-shadow:0 6px 22px rgba(8,120,200,.14)}
.bulk[hidden]{display:none}
.bulkhead{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.bulkhead b{font-size:14.5px}
.bulkcols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px 28px}
.bulkcol{display:flex;flex-direction:column;gap:8px;min-width:0}
.bulkcol+.bulkcol{border-left:1px solid var(--line);padding-left:28px}
.bulkt{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700}
.bulkwhen{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:13px}
.bulk .bsep{display:none}
@media (max-width:900px){.bulkcols{grid-template-columns:minmax(0,1fr)}.bulkcol+.bulkcol{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:12px}}

/* Parent Companies list: sortable headers (a Sort by box on phones) */
.parrow.head .psort{background:none;border:0;padding:0;font:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit;cursor:pointer}
.parrow.head .psort:hover,.parrow.head .psort.on{color:var(--ink)}
.parrow.head .psort .arr{font-size:9px}
.parsortm{display:none}
@media (max-width:760px){.parsortm{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12.5px;color:var(--ink-3)}.parsortm select{width:auto}}
.parrow.head{border-top:0}

/* Broker insights: where each dollar goes */
.wf{display:flex;flex-direction:column;gap:7px}
.wfrow{display:grid;grid-template-columns:minmax(110px,38%) minmax(0,1fr) 78px;gap:10px;align-items:center;font-size:12.5px}
.wfn{color:var(--ink)}
.wft{height:14px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.wfb{display:block;height:100%;border-radius:4px;background:var(--s1)}
.wfrow.neg .wfb{background:var(--neutral-bar,#b8c4d4)}
.wfrow.mid .wfb{background:var(--brand-blue)}
.wfrow.comm .wfb{background:var(--brand-green)}
.wfrow.comm .wfn,.wfrow.comm .wfv{font-weight:700}
.wfv{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.wfv small{display:block;font-weight:400;color:var(--ink-3);font-size:10.5px}
@media (max-width:760px){.wfrow{grid-template-columns:minmax(100px,40%) minmax(0,1fr) 62px}}

/* Broker sales insights */
.ins-stat.good .v{color:var(--good)}
.tag.late{background:var(--warn-bg);color:var(--warn-ink)}
.pushlist{display:flex;flex-direction:column;gap:14px}
.push .pn{font-size:13px;font-weight:600;line-height:1.25}
.pbars{position:relative;height:10px;background:var(--surface-2);border-radius:5px;margin:6px 0 4px}
.pbars .pb.mine{position:absolute;left:0;top:0;bottom:0;background:var(--brand-blue);border-radius:5px}
.pbars .pb.theirs{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1px;background:var(--brand-green);border-radius:2px}
.push .pd{font-size:12px;color:var(--ink-3)}
.push .pd b{color:var(--ink)}
.pnot{font-size:12px;color:var(--ink-3);margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
button.chipbtn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:1px 9px;font:inherit;font-size:11.5px;color:var(--ink-2);cursor:pointer}
button.chipbtn:hover{border-color:var(--accent);color:var(--accent)}
.cmp{display:flex;flex-direction:column;gap:6px}
.cmprow{display:grid;grid-template-columns:minmax(60px,22%) minmax(0,1fr) 54px 42px;gap:8px;align-items:center;font-size:12.5px}
.cmprow .cn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmprow .ct{height:12px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.cmprow .cb{display:block;height:100%;background:var(--neutral-bar,#b8c4d4);border-radius:4px}
.cmprow.me .cb{background:var(--brand-green)}
.cmprow.me .cn,.cmprow.me .cv{font-weight:700}
.cmprow .cv{text-align:right;font-variant-numeric:tabular-nums}
.cmprow .cg{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}

/* Logins card (Broker Management) */
#loginCard .addone .field{flex:1 1 140px}
#loginCard .addone .field:first-child{flex:1 1 100%}
#loginCard .addone .field[hidden]{display:none}
#loginCard .addone select,#loginCard .addone input{width:100%}
#loginCard .addone .btn{flex:0 0 auto}
#loginCard td{white-space:normal;overflow-wrap:anywhere}
#loginCard td:last-child{white-space:nowrap}

#teamBtn[aria-current]{color:var(--ink);border-color:var(--ink-3)}
.hdrmenu #teamBtn[aria-current]{background:var(--surface-2)}
body.role-broker #teamBtn{display:none!important}

/* Broker insights collapse: header only until opened */
#bkIns.collapsed .insrow{display:none}
#bkIns.collapsed .card-head{margin-bottom:0}

/* Invoice detail quick filters */
.lfbar{margin:0 0 10px}
.mchips{display:flex;flex-wrap:wrap;gap:6px}
.mchips button{font:inherit;font-size:12.5px;font-weight:600;min-height:30px;padding:0 11px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer}
.mchips button:hover{border-color:var(--ink-3)}
.mchips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lfrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.lfrow input[type="search"]{flex:1 1 240px;min-width:0;max-width:360px}
.lfrow select{flex:0 1 260px;min-width:0;max-width:100%}
@media (max-width:640px){.mchips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-2px;padding:2px;scrollbar-width:none}.mchips::-webkit-scrollbar{display:none}.mchips button{flex:0 0 auto}.lfrow input[type="search"],.lfrow select{flex:1 1 100%;max-width:none}}

/* Desktop: Team access and Sign out live at the bottom of the Manage menu (Broker logins have no menu, so they keep the Sign out button). On phones they are rows of the menu instead. */
@media (min-width:761px){body:not(.role-broker) #teamBtn,body:not(.role-broker) #signout{display:none!important}}
@media (max-width:760px){.hdrmenu .popacct{display:none!important}}
.menu-pop #signoutPop[hidden]{display:none}