/* MSI Branch Dashboard - house style:
   brand red #d6392b topbar, light #f4f6f9 background, white cards, system font. */

:root{
  --red:#d6392b; --red-active:#b62a1f; --green:#1a8a32; --blue:#1f5fb3; --warn:#8a5a00;
  --bg:#f4f6f9; --text:#1a1a1a; --muted:#667085;
  --card-border:#e1e5ea; --form-border:#c7cfd9; --divider:#f0f2f5; --row-hover:#fafbff;
  --topbar-h:3.3rem;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);-webkit-text-size-adjust:100%}
body{font-size:.95rem;line-height:1.45}
.hidden{display:none!important}
.muted{color:var(--muted)}
.dim{color:var(--muted)}
.up{color:var(--green)}
.down{color:#b91c1c}
a{color:var(--blue);text-decoration:none;cursor:pointer}
a:hover{text-decoration:underline}
button{font:inherit}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- Login ---------- */
.login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem}
.login-card{background:#fff;border:1px solid var(--card-border);border-radius:.6rem;padding:1.75rem 1.5rem;width:360px;box-shadow:0 10px 30px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:.85rem}
.login-logo{height:42px;width:auto;align-self:center;margin-bottom:4px}
.login-card h1{margin:0;font-size:1.4rem}
.login-card label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;font-weight:600}
.login-card input{appearance:none;border:1px solid var(--form-border);background:#fff;color:var(--text);padding:.5rem .7rem;border-radius:.4rem;font:inherit;font-size:.95rem;min-height:2.3rem}
.login-card input:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.err{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;padding:.55rem .8rem;border-radius:.4rem;font-size:.88rem}

/* ---------- Auth gate (local login + TOTP MFA) ---------- */
.auth-host{position:fixed;inset:0;z-index:50;background:var(--bg);overflow:auto}
.auth-wrap{display:flex;align-items:flex-start;justify-content:center;min-height:100vh;padding:2.5rem 1.25rem}
.auth-card{background:#fff;border:1px solid var(--card-border);border-radius:.7rem;padding:1.9rem 1.6rem;width:400px;max-width:100%;box-shadow:0 12px 34px rgba(0,0,0,.10);display:flex;flex-direction:column;gap:.85rem}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:.45rem;margin-bottom:.35rem}
.auth-brand img{height:44px;width:auto;background:#fff;border-radius:5px}
.auth-title{font-weight:700;font-size:1.02rem;color:var(--muted);letter-spacing:.01em}
.auth-h{margin:0;font-size:1.35rem;text-align:center}
.auth-sub{margin:0;font-size:.9rem;color:var(--muted);line-height:1.5}
.auth-hint{margin:.1rem 0 0;font-size:.8rem;color:var(--muted)}
.auth-loading{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:2rem 0;color:var(--muted)}
.auth-error{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;padding:.55rem .8rem;border-radius:.4rem;font-size:.88rem}
.auth-form{display:flex;flex-direction:column;gap:.8rem;margin-top:.2rem}
.auth-label{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;font-weight:600}
.auth-input{appearance:none;border:1px solid var(--form-border);background:#fff;color:var(--text);padding:.55rem .7rem;border-radius:.45rem;font:inherit;font-size:.98rem;min-height:2.4rem}
.auth-input:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.auth-code{font-variant-numeric:tabular-nums;letter-spacing:.4em;text-align:center;font-size:1.25rem}
.auth-btn{appearance:none;border:0;background:var(--red);color:#fff;font-weight:600;font-size:.98rem;padding:.62rem 1rem;border-radius:.45rem;cursor:pointer;min-height:2.5rem;margin-top:.2rem}
.auth-btn:hover{background:var(--red-active)}
.auth-btn:disabled{opacity:.6;cursor:default}
.auth-link{background:none;border:0;color:var(--blue);cursor:pointer;font-size:.86rem;padding:.15rem;align-self:center}
.auth-link:hover{text-decoration:underline}
.auth-link--muted{color:var(--muted)}
.auth-qr{display:flex;justify-content:center;padding:.6rem;background:#fff;border:1px solid var(--card-border);border-radius:.5rem}
.auth-qr canvas,.auth-qr img,.auth-qr svg{width:196px;height:196px;max-width:100%;display:block}
/* Users admin view */
.users-pad{padding:1rem 1.1rem}
.users-h{margin:0 0 .1rem;font-size:1rem}
.users-sub{margin:0 0 .8rem;font-size:.82rem;color:var(--muted)}
.users-add{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 160px auto;gap:.7rem .9rem;align-items:end}
.users-field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.users-field label{font-size:.78rem;font-weight:600;color:var(--muted)}
.users-field label .opt{font-weight:400}
.users-add input,.users-add select{width:100%;padding:.5rem .6rem;border:1px solid var(--form-border);border-radius:.4rem;background:#fff;color:var(--text);font:inherit;font-size:.9rem;min-height:2.4rem}
.users-add input:focus,.users-add select:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
@media(max-width:760px){.users-add{grid-template-columns:1fr}}
.btn.btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.btn-primary:hover{background:var(--red-active);border-color:var(--red-active)}
.users-temp{margin:0 0 1rem;padding:.75rem .9rem;border:1px solid var(--red);border-radius:.5rem;background:#fdecea;font-size:.9rem}
.users-temppw{display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:1.05rem;letter-spacing:.04em;margin:.25rem .5rem .25rem 0;padding:.15rem .5rem;background:#fff;border:1px solid var(--card-border);border-radius:.3rem}
.rolepill{display:inline-block;font-size:.74rem;font-weight:600;padding:.12rem .55rem;border-radius:1rem;border:1px solid var(--card-border);color:var(--muted)}
.rolepill--admin{color:var(--blue);border-color:rgba(31,95,179,.4)}
.rolepill--super_admin{color:var(--red);border-color:rgba(214,57,43,.45)}
.ubadge{display:inline-block;font-size:.72rem;padding:.06rem .5rem;border-radius:1rem;border:1px solid var(--card-border);color:var(--muted);margin:.1rem .15rem 0 0;white-space:nowrap}
.ubadge--ok{color:var(--green);border-color:rgba(26,138,50,.4)}
.ubadge--off{color:var(--red);border-color:rgba(214,57,43,.45)}
.users-role{max-width:150px;padding:.32rem .45rem;border:1px solid var(--form-border);border-radius:.4rem;background:#fff;color:var(--text);font:inherit;font-size:.85rem}
.users-actions{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.btn.btn-danger{color:var(--red);border-color:rgba(214,57,43,.45)}
.btn.btn-danger:hover{background:var(--red);color:#fff;border-color:var(--red)}
.auth-mfa-key{background:#f8fafc;border:1px solid var(--card-border);border-radius:.5rem;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.5rem}
.auth-kv{display:flex;justify-content:space-between;gap:1rem;font-size:.82rem;color:var(--muted)}
.auth-kv b{color:var(--text);text-align:right}
.auth-secret-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:.2rem}
.auth-secret{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.02rem;font-weight:600;letter-spacing:.08em;word-break:break-all;background:#fff;border:1px dashed var(--form-border);border-radius:.4rem;padding:.5rem .6rem}
.auth-copy{align-self:flex-start;background:#fff;border:1px solid var(--form-border);color:var(--text);border-radius:.4rem;padding:.32rem .7rem;font-size:.82rem;cursor:pointer}
.auth-copy:hover{border-color:var(--red);color:var(--red)}
.auth-uri{font-size:.8rem;color:var(--muted)}
.auth-uri summary{cursor:pointer}
.auth-uri-code{display:block;margin-top:.4rem;word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;background:#fff;border:1px solid var(--card-border);border-radius:.35rem;padding:.4rem .5rem}
.auth-recovery{list-style:none;margin:.2rem 0;padding:.7rem .8rem;display:grid;grid-template-columns:1fr 1fr;gap:.35rem .9rem;background:#f8fafc;border:1px solid var(--card-border);border-radius:.5rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95rem;letter-spacing:.03em}
.auth-check{display:flex;align-items:center;gap:.45rem;font-size:.86rem;margin-top:.2rem}
.drawer__user{font-size:.82rem;color:var(--muted);margin-top:.25rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Topbar ---------- */
.topbar{display:flex;align-items:center;gap:.7rem;min-height:var(--topbar-h);padding:.55rem 1rem;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 45%),linear-gradient(180deg,var(--red),var(--red-active));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 2px 8px rgba(0,0,0,.22);border-bottom:1px solid rgba(0,0,0,.14);position:sticky;top:0;z-index:10}
.topbar-logo{height:30px;width:auto;background:#fff;border-radius:6px;padding:2px 6px;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.brand{font-size:1.08rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.20)}
.topbar-right{display:inline-flex;align-items:center;gap:.6rem;margin-left:auto;min-width:0}
.topbar__rep{font-size:.95rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50vw}
.topbar__rep:not(:empty){display:inline-block;font-size:.85rem;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:.26rem .8rem;max-width:46vw;vertical-align:middle;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}

/* ---------- Hamburger + slide-out drawer (Quote Tracking pattern) ---------- */
.topbar__menu{appearance:none;background:transparent;border:0;color:#fff;width:2.4rem;height:2.4rem;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;flex-shrink:0;margin-left:-.4rem;transition:background .12s ease}
.topbar__menu:hover{background:rgba(255,255,255,.18)}
.topbar__menu:active{background:rgba(255,255,255,.30)}

.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;opacity:0;transition:opacity 180ms ease}
.drawer-backdrop.is-open{opacity:1}
.drawer-backdrop[hidden]{display:none}
.drawer{position:fixed;top:0;left:0;height:100dvh;width:min(var(--osd-drawer-width,17rem),86vw);background:#2b2b2b;color:#fff;z-index:100;transform:translateX(-100%);transition:transform 200ms ease;box-shadow:2px 0 12px rgba(0,0,0,.3);display:flex;flex-direction:column}
.drawer.is-open{transform:translateX(0)}
.drawer[hidden]{display:none}
.drawer__head{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 45%),linear-gradient(180deg,var(--red),var(--red-active));min-height:var(--topbar-h);padding:0 1rem;color:#fff;display:flex;flex-direction:column;justify-content:center;box-shadow:inset 0 -1px 0 rgba(0,0,0,.14)}
.drawer__app{font-size:1rem;font-weight:700;line-height:1.2}
.drawer__sub{font-size:.8rem;opacity:.85;line-height:1.2}
.drawer__picker{padding:.8rem 1rem .4rem;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer__picker label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;margin-bottom:.3rem}
/* Light field: native <option> popups inherit the control's background, so a
   dark select renders dark-on-dark options on Windows/Chromium. White bg + dark
   text keeps both the closed control and the open list readable everywhere. */
.drawer__select{appearance:none;width:100%;background:#fff;color:#1a1a1a;border:1px solid var(--form-border);border-radius:.4rem;padding:.5rem 2rem .5rem .7rem;font:inherit;font-size:.95rem;font-weight:600;min-height:2.4rem;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3,4.5 6,7.5 9,4.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center}
.drawer__select:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.drawer__select option{background:#fff;color:#1a1a1a}
.drawer__nav{padding:.35rem 0;flex-grow:1;overflow-y:auto;display:flex;flex-direction:column}
.drawer__item{appearance:none;background:transparent;border:0;width:100%;text-align:left;color:#fff;padding:.7rem 1rem;display:flex;align-items:center;gap:.75rem;font-family:inherit;font-size:.92rem;cursor:pointer;text-decoration:none}
.drawer__item:hover{background:rgba(255,255,255,.05);text-decoration:none}
.drawer__item:active{background:rgba(255,255,255,.09)}
.drawer__item.is-active{background:rgba(214,57,43,.22);color:#ffb4ac;font-weight:600}
.drawer__icon{color:#cfcfcf;flex-shrink:0}
.drawer__item.is-active .drawer__icon{color:#ff8a7d}
.drawer__bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding:.5rem 0 .4rem}
.drawer__user{padding:.4rem 1rem .55rem}
.drawer__user-name{font-size:.92rem;font-weight:600;color:#fff}
.drawer__user-meta{font-size:.78rem;color:#9ca3af;margin-top:.1rem}
.drawer__item--signout{color:#fca5a5}
.drawer__item--signout .drawer__icon{color:#fca5a5}
.drawer__pin{position:absolute;top:50%;right:.5rem;transform:translateY(-50%);appearance:none;background:transparent;border:0;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;color:#fff;cursor:pointer;opacity:.85}
.drawer__pin:hover{background:rgba(0,0,0,.18);opacity:1}
.drawer__pin .drawer__pin-icon--pin{display:inline-block}
.drawer__pin .drawer__pin-icon--unpin{display:none}
body.menu-pinned .drawer__pin .drawer__pin-icon--pin{display:none}
body.menu-pinned .drawer__pin .drawer__pin-icon--unpin{display:inline-block}
.drawer__resize-handle{display:none}
/* Contractor self-service: no rep picker (locked to their own dashboard). */
body.self-mode .drawer__picker{display:none}
@media (max-width:959.98px){.drawer__pin{display:none}}
@media (min-width:960px){
  body.menu-pinned .drawer{transform:translateX(0);box-shadow:none;border-right:1px solid rgba(0,0,0,.18)}
  body.menu-pinned .drawer[hidden]{display:flex}
  body.menu-pinned .drawer-backdrop{display:none!important}
  body.menu-pinned .topbar__menu{display:none}
  body.menu-pinned .topbar,body.menu-pinned main{margin-left:min(var(--osd-drawer-width,17rem),86vw)}
  body.menu-pinned .drawer__resize-handle{display:block;position:absolute;top:0;right:0;width:8px;height:100%;cursor:ew-resize;background:transparent;z-index:110}
  body.menu-pinned .drawer__resize-handle:hover,body.menu-pinned .drawer__resize-handle.is-dragging{background:rgba(214,57,43,.55)}
  body.menu-resizing,body.menu-resizing *{cursor:ew-resize!important;user-select:none!important}
}
@media (max-width:560px){.brand{display:none}}

/* ---------- Layout ---------- */
main{padding:1rem;max-width:1360px;margin:0 auto}
.pagehead{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin:.2rem 0 1rem}
.pagehead h1{margin:0;font-size:1.35rem}
.pagehead__updated{margin-left:auto;white-space:nowrap}
.pagehead__refresh{align-self:center}
.pagehead__auto{align-self:center}
.pagehead__auto.is-on{color:var(--green);border-color:var(--green);font-weight:600}
.pagehead__asof{align-self:center;display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--muted);border:1px solid var(--card-border);border-radius:6px;padding:.15rem .45rem;background:#fff}
.pagehead__asof input{border:0;font:inherit;font-size:.82rem;color:var(--text);background:transparent;padding:0;min-height:1.6rem}
.pagehead__asof input:focus{outline:none}
.pagehead__asof.is-on{border-color:var(--red);color:var(--red);font-weight:600;background:#fdecea}
.pagehead__asof-clear{appearance:none;border:0;background:transparent;color:inherit;font-size:1rem;line-height:1;cursor:pointer;padding:0 .1rem}
.badge{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.18rem .5rem;border-radius:999px;background:#eef2f7;color:#475569}
.badge.b-salesrep{background:#dbeafe;color:#1e3a8a}
.badge.b-takenby{background:#e6f6ea;color:#14632a}
.badge.b-both{background:#fde9d7;color:#9a3412}

.banner{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:.5rem;padding:.6rem .85rem;margin-bottom:1rem;font-size:.9rem}

/* ---------- KPI stat cards ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;margin-bottom:1rem}
.kpi{background:#fff;border:1px solid var(--card-border);border-radius:.6rem;padding:1.05rem 1rem;box-shadow:0 1px 2px rgba(0,0,0,.03);display:flex;flex-direction:column;text-align:center}
.kpi .lbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.kpi .val{font-size:1.9rem;font-weight:800;margin-top:.25rem;line-height:1.05;letter-spacing:-.01em}
.kpi .sub{font-size:.82rem;color:var(--muted);margin-top:.25rem}
.kpi .delta{font-weight:700}
/* Goal-vs-actual progress (Month + Year tiles). Bar pinned to the tile bottom. */
.kpi .goal{margin-top:auto;padding-top:.55rem}
.goal__bar{height:6px;border-radius:3px;background:var(--divider);overflow:hidden}
.goal__fill{display:block;height:100%;border-radius:3px;background:#1f5fb3}
.goal__fill.goal--ahead{background:var(--green)}
.goal__fill.goal--behind{background:#c0392b}
.goal__line{font-size:.76rem;color:var(--muted);margin-top:.3rem}
.goal__line .pace--ahead{color:var(--green);font-weight:700}
.goal__line .pace--behind{color:#c0392b;font-weight:700}
.goal__line .pace--on{color:var(--text);font-weight:600}
.goal__proj{font-size:.74rem;color:var(--muted);margin-top:.15rem}

/* ---------- v2 preview: insights section ---------- */
.v2badge{font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--red);color:#fff;border-radius:.25rem;padding:.05rem .3rem;vertical-align:middle}
.v2sec{margin-top:1.4rem;border-top:2px solid var(--card-border);padding-top:1rem}
.v2sec--noline{border-top:0;padding-top:0;margin-top:0}
.statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:.7rem;margin-bottom:1rem}
.strip-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin:0 0 .6rem}
.strip-head h2{margin:0;font-size:.98rem}
.stat{background:#fff;border:1px solid var(--card-border);border-radius:.5rem;padding:1rem .8rem;box-shadow:0 1px 2px rgba(0,0,0,.03);text-align:center;display:flex;flex-direction:column;justify-content:center}
.stat__lbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.stat__val{font-size:1.7rem;font-weight:800;margin-top:.25rem;line-height:1.05;letter-spacing:-.01em;white-space:nowrap}
.stat__sub{font-size:.76rem;color:var(--muted);margin-top:.25rem}
.stat--ahead .stat__val{color:var(--green)}
.stat--behind .stat__val{color:#c0392b}
.stat--clickable{cursor:pointer;transition:background .12s,box-shadow .12s}
.stat--clickable:hover{background:#f2f7fd;box-shadow:0 2px 10px rgba(31,95,179,.12)}
.stat__tabs{display:flex;justify-content:center;gap:.25rem;margin-top:.45rem}
.stat__tabs button{padding:.1rem .55rem;font-size:.72rem}

/* ---------- Panels / cards ---------- */
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
@media (max-width:820px){.grid2{grid-template-columns:1fr}}
/* On phones there's no room to keep the header on one row - let it wrap again. */
@media (max-width:560px){.panel__head,.panel__tools{flex-wrap:wrap}.panel__head h2{flex:1 1 100%}}
.panel{background:#fff;border:1px solid var(--card-border);border-radius:.6rem;box-shadow:0 1px 2px rgba(0,0,0,.03);margin-bottom:1rem;overflow:hidden;min-width:0}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem 1rem;border-bottom:1px solid var(--divider);flex-wrap:nowrap}
.panel__head h2{margin:0;font-size:.98rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.panel__note{font-size:.74rem;color:var(--muted);font-weight:500}
.panel__tools{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:nowrap;justify-content:flex-end;flex:0 0 auto}
.panel__filter{appearance:none;border:1px solid var(--form-border);border-radius:.4rem;padding:.25rem .55rem;font:inherit;font-size:.82rem;min-height:1.9rem;width:130px;background:#fff}
.panel__filter:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
/* Sortable headers for the dashboard/team list cards. */
.panel table th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.panel table th.sortable:hover{color:var(--text)}
.panel table th.sorted{color:var(--red)}
.panel table th .caret{font-size:.7rem}
.panel table th.tleft,.panel table td.tleft{text-align:left}
.panel table tbody tr[data-rk]{cursor:pointer}

/* ---------- Share pie (opt-in via Preferences) ---------- */
.pie{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;padding:.9rem 1rem;border-bottom:1px solid var(--divider)}
.pie__disc{width:130px;height:130px;border-radius:50%;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.pie__legend{list-style:none;margin:0;padding:0;flex:1 1 220px;min-width:0;display:grid;grid-template-columns:1fr;gap:.2rem}
.pie__legend li{display:flex;align-items:center;gap:.45rem;font-size:.82rem}
.pie__sw{width:.8rem;height:.8rem;border-radius:2px;flex:none}
.pie__lb{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pie__pc{flex:none;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.pref-section{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:.4rem 0 .6rem;padding-top:.6rem;border-top:1px solid var(--divider)}

/* ---------- Tables ---------- */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{padding:.5rem .7rem;border-bottom:1px solid var(--divider);text-align:right;white-space:nowrap;vertical-align:middle;font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left;font-variant-numeric:normal}
thead th{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;background:#fafbfc;font-weight:700;border-bottom:1px solid var(--card-border)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--row-hover)}
.rank{color:var(--muted);width:1.4rem;text-align:right;padding-right:.2rem}
td.cust{max-width:160px;overflow:hidden;text-overflow:ellipsis}
/* Dashboard panel tables (e.g. 6-column Product Category) sit in half-width
   cards that get narrow when the menu is pinned - tighten cells so they fit
   without a horizontal scrollbar. .tablewrap still scrolls as a fallback when
   the card is very narrow. Settings table keeps its roomier spacing. */
.panel table:not(.settings){font-size:.82rem}
.panel table:not(.settings) th,.panel table:not(.settings) td{padding:.4rem .4rem}
.subtle{color:var(--muted);font-size:.82rem}

/* group-of-columns separators in the summary table */
.summary th.grp,.summary td.grp{border-left:1px solid var(--card-border)}
.summary tbody th{text-align:left;font-weight:600;color:var(--text);text-transform:none;letter-spacing:0;background:#fff;font-size:.88rem}

/* ---------- Pill tabs ---------- */
.pill-tabs{display:inline-flex;gap:.3rem}
.pill-tabs button{background:#f1f5f9;border:1px solid var(--card-border);border-radius:6px;color:var(--text);padding:.25rem .7rem;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.pill-tabs button:hover{background:#e2e8f0}
.pill-tabs button.active{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- Buttons ---------- */
.btn{appearance:none;border:1px solid var(--form-border);background:#fff;color:var(--text);padding:.5rem .95rem;border-radius:.4rem;font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;min-height:2.3rem;display:inline-flex;align-items:center;gap:.4rem;line-height:1;text-decoration:none}
.btn:hover:not(:disabled){background:#f7f8fa}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn--primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn--primary:hover:not(:disabled){background:var(--red-active);border-color:var(--red-active)}
.btn-sm{padding:.32rem .7rem;min-height:2rem;font-size:.85rem}
.btn-danger{background:#fff;color:#b91c1c;border-color:#f0a8a1}
.btn-danger:hover:not(:disabled){background:var(--red);color:#fff;border-color:var(--red)}

/* ---------- Settings table ---------- */
.settings td,.settings th{text-align:left}
.settings td.num,.settings th.num{text-align:right}
.settings th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.settings th.sortable:hover{color:var(--text)}
.settings th.sorted{color:var(--red)}
.settings th .caret{font-size:.7rem}

/* ---------- Team leaderboard ---------- */
table.lead th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
table.lead th.sortable:hover{color:var(--text)}
table.lead th.sorted{color:var(--red)}
table.lead th .caret{font-size:.7rem}
table.lead td:nth-child(2),table.lead th:nth-child(2){text-align:left}
table.lead tbody tr.lead{cursor:pointer}
table.lead tbody tr.lead:hover td{background:#eef4fc}
.warnchip{font-size:.72rem;font-weight:700;color:#9a3412;background:#fde9d7;padding:.1rem .45rem;border-radius:999px}

/* ---------- Modal ---------- */
.modal-host{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:flex-start;justify-content:center;padding:2.5rem 1rem;z-index:1000;overflow:auto}
.modal{background:#fff;border-radius:.6rem;width:min(560px,100%);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.4);resize:both;overflow:hidden;min-width:320px;min-height:220px}
.modal h3{margin:0;padding:.85rem 1rem;border-bottom:1px solid var(--divider);font-size:1.05rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:.75rem;user-select:none}
.modal .modal-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal .modal-actions{display:flex;align-items:center;gap:.5rem;flex:none}
.modal .body{padding:1rem;overflow-y:auto;flex:1 1 auto;min-height:0}
.modal .foot{padding:.7rem 1rem;border-top:1px solid var(--divider);display:flex;justify-content:flex-end;gap:.5rem}
.modal .x{appearance:none;background:transparent;border:0;font-size:1.4rem;line-height:1;cursor:pointer;width:2rem;height:2rem;border-radius:.3rem;color:var(--muted)}
.modal .x:hover{background:var(--divider);color:var(--text)}
.formrow{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.85rem}
.formrow label{font-size:.85rem;font-weight:600}
.formrow input,.formrow select{appearance:none;border:1px solid var(--form-border);background:#fff;color:var(--text);padding:.5rem .7rem;border-radius:.4rem;font:inherit;font-size:.95rem;min-height:2.3rem;width:100%}
.formrow input:focus,.formrow select:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.formrow .hint{font-size:.78rem;color:var(--muted)}
.formrow .hint.up{color:var(--green);font-weight:600}
.formrow .hint.down{color:#b91c1c;font-weight:600}
.adrow{display:flex;gap:.5rem}
.adrow input{flex:1}
.adrow input.valid{border-color:var(--green);background:#f3fbf5}
.adrow input.invalid{border-color:#d9534f;background:#fff6f6}
/* Checkboxes must keep their native look (the generic rule above strips it). */
.formrow input[type=checkbox]{appearance:auto;-webkit-appearance:auto;width:1.15rem;height:1.15rem;min-height:0;padding:0;flex:none;accent-color:var(--red);cursor:pointer}
.formrow--check label{flex-direction:row;align-items:center;gap:.5rem;display:flex;cursor:pointer}
.formrow--check .hint{font-weight:400}

/* ---------- Toast / misc ---------- */
.toast{position:fixed;bottom:1rem;right:1rem;background:#1a1a1a;color:#fff;padding:.7rem 1rem;border-radius:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:1100;font-size:.9rem;max-width:360px}
.toast.bad{background:#991b1b}
.empty{padding:2rem;text-align:center;color:var(--muted);font-size:.9rem}

/* ---------- About ---------- */
.about{padding:1.1rem 1.3rem;max-width:760px;line-height:1.55}
.about h3{margin:1.2rem 0 .35rem;font-size:1rem;color:var(--text)}
.about h3:first-child{margin-top:0}
.about p{margin:.35rem 0;font-size:.92rem}
.about ul{margin:.4rem 0 .4rem 1.1rem;padding:0;font-size:.92rem}
.about li{margin:.25rem 0}
.about code{background:var(--divider);padding:.05rem .35rem;border-radius:4px;font-size:.85rem}

/* ---------- Drill-down (click a figure -> its invoice lines) ---------- */
.drillable{cursor:pointer}
tr.drillable:hover td{background:#eef4fc}
td.drillable:hover{background:#e2edfb}
.kpi.drillable{transition:background .12s,box-shadow .12s}
.kpi.drillable:hover{background:#f2f7fd;box-shadow:0 2px 10px rgba(31,95,179,.12)}
.modal.wide{width:min(880px,100%)}
/* Two-column rep edit form: pairs fields so the modal reads wide, not tall. */
.repform{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.25rem;align-items:start}
.repform .formrow{margin-bottom:0}
.repform .formrow--full{grid-column:1 / -1}
@media (max-width:620px){.repform{grid-template-columns:1fr}}
/* Read-only monthly sales-mix mini chart in the rep edit modal. */
.season{display:flex;gap:.4rem;align-items:flex-end;padding:.4rem .1rem 0}
.season .mo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.2rem}
.season .moPct{font-size:.64rem;color:var(--muted);font-variant-numeric:tabular-nums}
.season .bar{width:100%;max-width:1.7rem;background:var(--red);opacity:.82;border-radius:3px 3px 0 0}
.season .moLabel{font-size:.66rem;color:var(--muted)}
.season-note{font-size:.76rem;color:var(--muted);margin-top:.45rem}
.season-card{padding:.7rem 1rem 1.1rem}
.season-card .bar{max-width:2.6rem}
.drill-summary{font-weight:700;font-size:1.02rem;margin-bottom:.25rem}
.drill-tools{display:flex;align-items:center;gap:.6rem;margin:.1rem 0 .55rem}
.drill-count{margin-right:auto}
table.drill th,table.drill td{padding:.4rem .55rem}
table.drill th.tleft{text-align:left}
table.drill th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
table.drill th.sortable:hover{color:var(--text)}
table.drill th.sorted{color:var(--red)}
table.drill th .caret{font-size:.7rem}
table.drill td.cust{max-width:220px;text-align:left}
table.drill--orders tbody tr.orow{cursor:pointer}
.drill-orderhint{margin:.1rem 0 .5rem}
.drill-back{margin-bottom:.6rem}
.loading{padding:3rem;text-align:center;color:var(--muted)}
.spin{display:inline-block;width:1.1rem;height:1.1rem;border:2px solid var(--card-border);border-top-color:var(--red);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:.4rem}
@keyframes spin{to{transform:rotate(360deg)}}
/* "N hidden" note (per-user display filter; the hide toggle lives in the detail). */
.hidnote{font-size:.72rem;color:var(--muted);padding:.1rem .25rem .4rem}
.ordhide.is-on{color:var(--green);border-color:var(--green)}

/* ---------- Charts (MTD trend line + inventory bars share .season) ---------- */
.chart-card{padding:.55rem .8rem .9rem}
.linechart{width:100%;max-width:760px;height:auto;display:block;margin:0 auto}
.linechart--full{max-width:none}
.barchart{width:100%;max-width:1120px;height:auto;display:block;margin:0 auto}
.chart-card--clickable{cursor:zoom-in}
.chart-card--clickable .linechart rect{cursor:crosshair}
.chart-hint{text-align:center;font-size:.72rem;color:var(--muted);margin-top:.3rem}
.inv-bars .mo{cursor:pointer;border-radius:5px;transition:background .12s}
.inv-bars .mo:hover{background:#eef4fc}
td.over{color:var(--warn)}
.inv-tabs{margin-bottom:.7rem}
.inv-crumbs{margin-bottom:.5rem;font-size:.85rem}
.inv-crumbs a{cursor:pointer}
.inv-crumb-sep{color:var(--muted)}
.inv-crumb-cur{color:var(--text);font-weight:600}
.chart-legend{display:flex;flex-wrap:wrap;gap:.15rem 1.1rem;justify-content:center;margin-top:.45rem}
.chart-leg{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;color:var(--muted)}
.chart-sw{width:.9rem;height:.5rem;border-radius:2px;flex:none}