@font-face{
  font-family:'ABCFavorit';
  font-weight:300;
  font-style:normal;
  font-display:swap;
  src:url('/assets/abcfavorit-300.woff') format('woff');
}
:root{
  --bg:#0D0D0D;--surf:#141414;--surf2:#1A1A1A;--surf3:#222222;
  --b1:rgba(255,255,255,0.07);--b2:rgba(255,255,255,0.12);--b3:rgba(255,255,255,0.22);
  --text:#F0EDE8;--text2:#A8A49E;--text3:#5C5852;--text4:#302E2B;
  --accent:#C8C2B8;--accent2:#E8E2D8;--abg:rgba(200,194,184,0.10);--abg2:rgba(200,194,184,0.18);
  --cream:#F5F0E8;--cream2:#EDE8DE;--cream3:rgba(245,240,232,0.06);
  --green:#3BAA6A;--gbg:rgba(59,170,106,0.10);
  --red:#C8503A;--rbg:rgba(200,80,58,0.10);
  --blue:#5A8FC4;
}
[data-theme="light"]{
  --bg:#F0EDE8;--surf:#FAFAF8;--surf2:#F5F2EC;--surf3:#EDE9E2;
  --b1:rgba(0,0,0,0.06);--b2:rgba(0,0,0,0.11);--b3:rgba(0,0,0,0.20);
  --text:#1A1816;--text2:#5C5852;--text3:#9A9690;--text4:#C8C4BC;
  --accent:#3A3834;--accent2:#1A1816;--abg:rgba(58,56,52,0.08);--abg2:rgba(58,56,52,0.14);
  --cream:#F5F0E8;--cream2:#EDE8DE;--cream3:rgba(245,240,232,0.5);
  --green:#1A7A4A;--gbg:rgba(26,122,74,0.08);
  --red:#A83828;--rbg:rgba(168,56,40,0.08);
  --blue:#2A6090;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Thin, unobtrusive scrollbars everywhere — Firefox first, then WebKit. */
/* Chrome and Edge give the ::-webkit- rules up the moment `scrollbar-width`
   is set on the element, and then draw their own stepper arrows. So the
   standard property is only handed to engines without the pseudo-elements
   (Firefox), and WebKit gets the 4px treatment with the buttons removed. */
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:var(--b2) transparent;}
}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-button{display:none;width:0;height:0;}
::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece{background:transparent;}
::-webkit-scrollbar-corner{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px;min-height:26px;}
::-webkit-scrollbar-thumb:hover{background:var(--text3);}
html,body{height:100%}
body{font-family:'ABCFavorit',sans-serif;background:var(--bg);color:var(--text);font-size:13px;line-height:1.5;display:block;height:100vh;overflow:hidden;}

/* sidebar removed */

.main{width:100%;height:100vh;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:58px;background:rgba(20,20,20,0.72);border-bottom:1px solid rgba(255,255,255,0.08);flex-shrink:0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
[data-theme="light"] .topbar{background:rgba(250,250,248,0.78);border-bottom:1px solid rgba(0,0,0,0.07);}
.tb-left{display:flex;align-items:center;gap:16px;}
.tb-title{font-size:15px;font-weight:600;color:var(--text);letter-spacing:-0.2px;}
.tb-sub{font-size:11px;color:var(--text3);margin-top:1px;}
.tb-right{display:flex;align-items:center;gap:6px;}
.hs-pill{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:7px;background:var(--surf2);border:1px solid var(--b2);font-size:11px;font-weight:500;color:var(--text2);}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--text3);flex-shrink:0;}
.sdot.live{background:var(--green);}
.tb-btn{width:31px;height:31px;border-radius:7px;background:var(--surf2);border:1px solid var(--b2);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.13s;}
.tb-btn:hover{background:var(--surf3);color:var(--text);}
.tb-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}

.state-bar{padding:8px 20px;background:var(--surf2);border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:5px;flex-wrap:wrap;flex-shrink:0;}
.state-grp{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.state-grp.right{margin-left:auto;}
.state-lbl{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.09em;margin-right:3px;}
.state-pill{padding:4px 11px;border-radius:20px;border:1px solid var(--b2);background:transparent;color:var(--text2);font-family:'ABCFavorit',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:all 0.12s;letter-spacing:0.04em;}
.state-pill:hover{background:var(--surf3);color:var(--text);}
.state-pill.active{background:var(--accent2);border-color:var(--accent2);color:#0D0D0D;}
[data-theme="light"] .state-pill.active{background:var(--accent2);border-color:var(--accent);color:#fff;}

.content{flex:1;overflow:hidden;padding:14px 16px;display:flex;flex-direction:column;gap:11px;background:var(--bg);min-height:0;}
.tile-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px;flex:1;min-height:0;}
.tile-grid .tile{min-height:0;overflow:hidden;}
.gauge-row{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;flex-shrink:0;}
.tile{background:var(--surf);border:1px solid var(--b1);border-radius:13px;padding:16px 17px;position:relative;overflow:hidden;transition:border-color 0.18s;display:flex;flex-direction:column;}
[data-theme="light"] .tile{background:var(--surf);}
.tile:hover{border-color:var(--b3);}
.t-accent{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:0;transition:opacity 0.18s;border-radius:13px 13px 0 0;}
.tile:hover .t-accent{opacity:1;}
.t-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:11px;}
.t-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.11em;color:var(--text3);}
.t-val{font-size:19px;font-weight:600;color:var(--text);margin-top:3px;letter-spacing:-0.3px;font-variant-numeric:tabular-nums;}
.t-val.amber{color:var(--accent2);}
.t-actions{display:flex;gap:3px;align-items:center;flex-shrink:0;}
.mini-btn{padding:3px 8px;border-radius:5px;border:1px solid var(--b2);background:transparent;color:var(--text3);font-family:'ABCFavorit',sans-serif;font-size:10px;font-weight:600;cursor:pointer;transition:all 0.12s;text-transform:uppercase;letter-spacing:0.05em;}
.mini-btn:hover{background:var(--surf3);color:var(--text);}
.mini-btn.active{background:var(--surf3);color:var(--accent2);border-color:var(--accent);}

.stage-list{display:flex;flex-direction:column;flex:1;min-height:0;}
.stage-row{display:grid;grid-template-columns:130px 1fr 60px;align-items:center;gap:6px;flex:1;}
.s-name{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.s-track{height:5px;background:var(--surf3);border-radius:3px;overflow:hidden;}
.s-fill{height:100%;border-radius:3px;background:var(--accent);transition:width 0.5s ease;}
.s-fill.ot{background:var(--green);}
.s-amt{font-size:11px;color:var(--text);text-align:right;font-family:'ABCFavorit',sans-serif;font-weight:400;}
.wl-row{display:flex;gap:7px;margin-top:12px;padding-top:10px;border-top:1px solid var(--b1);flex-shrink:0;}
.wl-chip{flex:1;border-radius:8px;padding:7px 10px;text-align:center;}
.wl-chip.won{background:var(--gbg);border:1px solid rgba(29,158,117,0.18);}
.wl-chip.lost{background:var(--rbg);border:1px solid rgba(216,90,48,0.14);}
.wl-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;}
.wl-chip.won .wl-lbl{color:var(--green);}
.wl-chip.lost .wl-lbl{color:var(--red);}
.wl-num{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;margin-top:3px;}
.wl-chip.won .wl-num{color:var(--green);}
.wl-chip.lost .wl-num{color:var(--red);}

.fc-hero{display:flex;gap:20px;margin-bottom:12px;}
.fc-item{}
.fc-lbl{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.10em;color:var(--text3);}
.fc-num{font-size:20px;font-weight:600;color:var(--text);margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:-0.3px;}
.fc-num.amber{color:var(--accent2);}
.fc-div{width:1px;background:var(--b2);align-self:stretch;}

.gauge-wrap{display:flex;flex-direction:column;align-items:center;padding:2px 0 0;flex:1;justify-content:center;}
.gauge-svg-area{position:relative;width:100%;max-width:220px;height:130px;}
.gauge-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:12px;text-align:center;pointer-events:none;}
.gauge-num{font-size:28px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-0.3px;}
.gauge-sub{font-size:10px;color:var(--text3);margin-top:5px;}

.gauge-meta{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:11px;color:var(--text2);}
.g-chip{background:var(--surf3);border:1px solid var(--b2);border-radius:5px;padding:2px 7px;font-size:10px;font-family:'ABCFavorit',sans-serif;color:var(--text);font-weight:500;}
.g-note{font-size:10px;color:var(--text3);}
.yoy-row{display:flex;margin-top:9px;padding-top:9px;border-top:1px solid var(--b1);width:100%;}
.yoy-cell{flex:1;text-align:center;padding:3px 4px;}
.yoy-cell+.yoy-cell{border-left:1px solid var(--b1);}
.yoy-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3);}
.yoy-num{font-size:14px;font-weight:500;color:var(--text);margin-top:3px;font-variant-numeric:tabular-nums;font-family:'ABCFavorit',sans-serif;}
.yoy-delta{font-size:10px;font-weight:600;margin-top:2px;}
.d-up{color:var(--green);}
.d-dn{color:var(--red);}

.loading{display:flex;align-items:center;justify-content:center;height:165px;gap:9px;flex-direction:column;color:var(--text3);font-size:11px;}
.spin{width:17px;height:17px;border:2px solid var(--b2);border-top-color:var(--accent2);border-radius:50%;animation:sp 0.7s linear infinite;}
@keyframes sp{to{transform:rotate(360deg)}}

.modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.68);z-index:500;align-items:center;justify-content:center;}
.modal-ov.open{display:flex;}
.modal{background:var(--surf);border:1px solid var(--b2);border-radius:16px;width:575px;max-height:84vh;display:flex;flex-direction:column;overflow:hidden;}
.m-hdr{padding:16px 20px 12px;border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.m-title{font-size:14px;font-weight:700;color:var(--text);}
.m-close{width:26px;height:26px;border-radius:6px;background:var(--surf2);border:1px solid var(--b2);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all 0.12s;}
.m-close:hover{background:var(--surf3);color:var(--text);}
.tab-row{display:flex;padding:0 20px;border-bottom:1px solid var(--b1);flex-shrink:0;background:var(--surf);}
.tab-btn{padding:8px 13px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text3);font-family:'ABCFavorit',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.12s;margin-bottom:-1px;}
.tab-btn:hover{color:var(--text2);}
.tab-btn.active{color:var(--accent2);border-bottom-color:var(--accent);}
.tab-pane{display:none;}
.tab-pane.active{display:block;}
.m-body{padding:16px 20px;overflow-y:auto;flex:1;}
.m-sect{margin-bottom:20px;}
.m-sect:last-child{margin-bottom:0;}
.sect-ttl{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:0.13em;color:var(--accent2);margin-bottom:8px;}
.info-note{font-size:11px;color:var(--text2);background:var(--surf2);border-radius:7px;padding:9px 12px;line-height:1.6;border-left:2px solid var(--accent);margin-bottom:10px;}
.s-row{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--b1);}
.s-row:last-child{border-bottom:none;}
.s-lbl{font-size:12px;color:var(--text2);flex:1;}
.s-inp{padding:5px 9px;border-radius:6px;border:1px solid var(--b2);background:var(--surf2);color:var(--text);font-family:'DM Mono',monospace;font-size:12px;width:95px;text-align:right;}
.s-inp.wide{width:190px;text-align:left;}
.s-inp:focus{outline:none;border-color:var(--accent2);}
.hs-row{display:flex;gap:7px;margin-top:7px;}
.hs-tok{flex:1;padding:7px 11px;border-radius:6px;border:1px solid var(--b2);background:var(--surf2);color:var(--text);font-family:'DM Mono',monospace;font-size:11px;}
.hs-tok:focus{outline:none;border-color:var(--accent2);}
.btn-p{padding:7px 15px;border-radius:6px;border:none;background:var(--accent2);color:#111;font-family:'ABCFavorit',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:opacity 0.13s;white-space:nowrap;}
[data-theme="light"] .btn-p{background:var(--accent2);color:#fff;}
.btn-p:hover{opacity:0.85;}
.btn-g{padding:7px 13px;border-radius:6px;border:1px solid var(--b2);background:transparent;color:var(--text2);font-family:'ABCFavorit',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.12s;}
.btn-g:hover{background:var(--surf3);color:var(--text);}
.m-foot{padding:12px 20px;border-top:1px solid var(--b1);display:flex;justify-content:flex-end;gap:7px;flex-shrink:0;background:var(--surf);}

.ow-tbl{width:100%;border-collapse:collapse;}
.ow-tbl thead th{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.09em;color:var(--text3);padding:0 0 8px;text-align:left;border-bottom:1px solid var(--b1);}
.ow-tbl tbody tr{border-bottom:1px solid var(--b1);}
.ow-tbl tbody tr:last-child{border-bottom:none;}
.ow-tbl td{padding:6px 0;vertical-align:middle;}
.st-badge{display:inline-block;padding:2px 8px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:0.04em;background:var(--surf3);color:var(--text2);font-family:'DM Mono',monospace;white-space:nowrap;min-width:38px;text-align:center;}
.ow-inp{padding:4px 8px;border-radius:5px;border:1px solid var(--b2);background:var(--surf2);color:var(--text);font-family:'DM Mono',monospace;font-size:11px;width:100%;}
.ow-inp:focus{outline:none;border-color:var(--accent2);}
.ow-sel{padding:4px 8px;border-radius:5px;border:1px solid var(--b2);background:var(--surf2);color:var(--text);font-family:'DM Mono',monospace;font-size:11px;cursor:pointer;min-width:58px;}
.ow-sel:focus{outline:none;border-color:var(--accent2);}
.del-btn{width:24px;height:24px;border-radius:5px;background:var(--surf2);border:1px solid var(--b2);color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all 0.12s;}
.del-btn:hover{background:var(--rbg);border-color:var(--red);color:var(--red);}

.ytd-g{display:grid;grid-template-columns:110px repeat(5,1fr);gap:5px;align-items:center;}
.ytd-gh{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text3);padding-bottom:5px;text-align:center;}
.ytd-gh:first-child{text-align:left;}
.ytd-rl{font-size:11px;color:var(--text2);padding:3px 0;}
.ytd-i{width:100%;padding:4px 5px;border-radius:5px;border:1px solid var(--b2);background:var(--surf2);color:var(--text);font-family:'DM Mono',monospace;font-size:11px;text-align:right;}
.ytd-i:focus{outline:none;border-color:var(--accent2);}

@media(max-width:1200px){
  .gauge-row{grid-template-columns:1fr 1fr;}
}
@media(max-width:900px){
  body{height:auto;overflow:auto;}
  .main{height:auto;overflow:visible;}
  .content{overflow:visible;flex:none;height:auto;}
  .tile-grid{grid-template-columns:1fr;flex:none;height:auto;}
  .tile-grid .tile{height:auto!important;min-height:300px;}
  .gauge-row{grid-template-columns:1fr 1fr;}
  .modal{width:94vw;}
}
@media(max-width:600px){
  .gauge-row{grid-template-columns:1fr;}
  .content{padding:8px;}
  .tile-grid,.gauge-row{gap:8px;}
  /* Topbar mobile */
  .topbar{padding:0 12px;height:50px;}
  .tb-title{font-size:13px;}
  .tb-sub{display:none;}
  .tb-left>div:nth-child(2){display:none;}/* hide divider */
  .hs-pill span:first-child+span{display:none;}/* hide status text, keep dot */
  .hs-pill{padding:5px 8px;}
  .tb-btn{width:30px;height:30px;}
  .tb-left img{height:24px;}
}
@media(max-width:400px){
  .topbar{padding:0 8px;}
  .tb-left>div:last-child{display:none;}/* hide title block on very small */
}

/* ---------- LOGIN SCREEN ---------- */
#login-screen{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:var(--bg);}
#login-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,var(--cream3),transparent 60%);pointer-events:none;}
.login-card{position:relative;width:340px;max-width:88vw;background:var(--surf);border:1px solid var(--b1);border-radius:16px;padding:34px 30px 28px;text-align:center;box-shadow:0 12px 48px rgba(0,0,0,0.28);}
.login-logo{height:46px;width:auto;border-radius:5px;display:inline-block;margin-bottom:18px;}
.login-title{font-size:15px;font-weight:600;color:var(--text);letter-spacing:-0.2px;}
.login-sub{font-size:11px;color:var(--text3);margin-top:3px;margin-bottom:22px;}
.login-input{width:100%;padding:11px 13px;border-radius:9px;border:1px solid var(--b2);background:var(--surf2);color:var(--text);font-family:'ABCFavorit',sans-serif;font-size:13px;outline:none;transition:border-color 0.15s;letter-spacing:0.02em;}
.login-input:focus{border-color:var(--accent);}
.login-btn{width:100%;margin-top:12px;padding:11px 13px;border-radius:9px;border:1px solid var(--accent2);background:var(--accent2);color:var(--bg);font-family:'ABCFavorit',sans-serif;font-size:12px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;cursor:pointer;transition:opacity 0.15s;}
.login-btn:hover{opacity:0.85;}
.login-error{font-size:11px;color:var(--red);margin-top:12px;min-height:14px;letter-spacing:0.01em;}

/* ===== Shared shell: dashboard nav ===== */
.dash-nav{display:flex;gap:4px;align-items:center;margin-left:14px;}
.dash-tab{
  appearance:none;border:1px solid var(--b1);background:transparent;color:var(--text2);
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  padding:6px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background .12s,color .12s,border-color .12s;text-decoration:none;display:inline-block;line-height:1.2;
}
.dash-tab:hover{color:var(--text);border-color:var(--b2);background:var(--abg);}
.dash-tab.active{background:var(--accent);border-color:var(--accent);color:var(--bg);}
[data-theme="light"] .dash-tab.active{background:var(--accent2);border-color:var(--accent);color:#fff;}
.dash-tab.locked{opacity:.38;cursor:not-allowed;}
.dash-tab.locked:hover{color:var(--text2);border-color:var(--b1);background:transparent;}

/* ===== Shared shell: target progress bars ===== */
.tgt-bar{margin-top:10px;}
.tgt-bar + .tgt-bar{margin-top:9px;}
.tgt-head{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;margin-bottom:4px;}
.tgt-lbl{color:var(--text3);text-transform:uppercase;letter-spacing:0.09em;font-weight:700;}
.tgt-val{font-weight:700;font-variant-numeric:tabular-nums;}
.tgt-track{position:relative;height:9px;border-radius:5px;background:var(--surf3);overflow:hidden;}
[data-theme="light"] .tgt-track{background:var(--surf3);}
.tgt-fill{position:absolute;inset:0 auto 0 0;border-radius:5px;transition:width .4s ease;}
.tgt-foot{display:flex;justify-content:space-between;font-size:9px;color:var(--text3);margin-top:3px;font-variant-numeric:tabular-nums;}
.tgt-mark{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--b3);}

/* ===== Shared shell: clickable tiles ===== */
.clickable{cursor:pointer;}
.clickable:hover .t-val,.clickable:hover .gauge-num{filter:brightness(1.12);}
.drill-hint{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.09em;font-weight:700;opacity:0;transition:opacity .15s;}
.tile:hover .drill-hint{opacity:1;}

/* ===== Shared shell: sales chart tiles ===== */
.sales-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.5fr);gap:14px;align-items:stretch;}
.sales-col{display:flex;flex-direction:column;gap:14px;min-width:0;}
.chart-box{position:relative;flex:1;min-height:210px;}
.sales-col.charts .tile{flex:1;display:flex;flex-direction:column;}
.sales-col{min-height:0;}
@media (max-width:1200px){
  .sales-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sales-grid .sales-col.charts{grid-column:1 / -1;}
}
@media (max-width:760px){
  .sales-grid{grid-template-columns:minmax(0,1fr);}
  .dash-nav{margin-left:0;flex-wrap:wrap;}
}

/* ===== Activities dashboard ===== */
.act-content{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:11px;}
.act-gauges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;min-height:0;}
.act-lists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;min-height:0;}
.act-gauges .tile,.act-lists .tile,.act-score{min-height:0;overflow:hidden;}
.act-score{min-height:0;}
.act-score-body{flex:1;min-height:0;overflow:auto;}
/* The scoreboard holds a known, small number of rows, so it is sized to fit
   rather than scrolled: cell padding and type step down with the viewport
   height until the whole table sits inside the tile. */
.act-score{padding:clamp(8px,1.35vh,16px) 17px;}
.act-score .t-hdr{margin-bottom:clamp(1px,0.5vh,8px);}
.act-score-body table{width:100%;}
.act-score-body th{padding:clamp(2px,0.5vh,9px) 12px !important;
  font-size:clamp(8px,1.05vh,9px) !important;line-height:1.25;}
.act-score-body td{padding:clamp(2px,0.55vh,11px) 12px !important;
  font-size:clamp(10px,1.45vh,13px) !important;line-height:1.3;}
.act-score-body td > div{line-height:1.3;}
.act-score-body .score-bar{height:clamp(5px,0.8vh,8px) !important;}
/* Everything in a gauge tile is sized against the viewport height, because
   the row is a fixed share of the screen: on a short laptop the arc, the
   number and the three figures underneath all step down together instead of
   the bottom row sliding out of the tile. */
.act-gauges .tile{padding:clamp(7px,1.1vh,12px) 15px clamp(8px,1.2vh,13px);}
.act-gauges .t-hdr{margin-bottom:clamp(1px,0.5vh,7px);}
.act-gauges .gauge-wrap{padding:0;justify-content:flex-start;gap:0;}
.act-gauges .gauge-svg-area{max-width:200px;height:auto;flex:1 1 0;min-height:42px;max-height:118px;}
.act-gauges .gauge-overlay{padding-bottom:clamp(4px,1vh,11px);}
.act-gauges .gauge-num{font-size:clamp(15px,2.7vh,25px);}
.act-gauges .gauge-sub{font-size:clamp(8px,1.05vh,10px);margin-top:clamp(1px,0.5vh,5px);}
.act-gauges .gauge-meta{font-size:clamp(9px,1.25vh,11px);margin-top:clamp(2px,0.7vh,7px);gap:6px;}
.act-gauges .g-chip{font-size:clamp(8px,1.1vh,10px);padding:1px 6px;}
.act-gauges .g-note{font-size:clamp(8px,1.1vh,10px);}
.act-gauges .yoy-row{margin-top:clamp(3px,0.9vh,9px);padding-top:clamp(3px,0.9vh,9px);}
.act-gauges .yoy-lbl{font-size:clamp(7px,0.9vh,9px);}
.act-gauges .yoy-num,.act-gauges .yoy-delta{font-size:clamp(10px,1.6vh,14px);}
.act-gauges .yoy-cell{padding:2px 4px;}
.act-list{margin-top:2px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;}

/* .thin-scroll kept as an explicit opt-in; the global rules below cover the
   rest of the app so every scrollbar matches. */
.thin-scroll{overscroll-behavior:contain;}
.act-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--b1);
}
.act-row:last-child{border-bottom:none;}
.act-row-main{
  font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%;
}
.act-row-sub{font-size:10px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.act-row-val{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums;}
.s-inp.wide{min-width:260px;}
select.s-inp{cursor:pointer;}

/* Stay four across while the board is height-locked: two rows of gauges in a
   band sized for one is what pushed the figures out of the tiles. Below
   1000px the board switches to scrolling anyway. */
@media (max-width:1000px){
  .act-gauges{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:1000px){
  .act-lists{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:620px){
  .act-gauges{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:1000px){
  .act-content{display:flex;overflow-y:auto;}
  .act-list{overflow:visible;}
  .act-score-body{overflow:visible;}
}

/* ===== Weekly dashboard ===== */
/* The board is sized to the window: four rows that share the height, each
   scrolling internally, so nothing runs off a laptop screen. */
.wk-content{display:grid;grid-template-rows:minmax(0,1.05fr) auto minmax(0,0.8fr) minmax(0,1.1fr);gap:11px;}
.wk-content > *{min-height:0;}

.wk-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-height:0;}
.wk-top > .tile{min-height:0;overflow:hidden;}
.wk-quote-tile{padding:0;overflow:hidden;position:relative;}
.wk-quote-tile .t-hdr{position:absolute;top:0;left:0;right:0;padding:14px 18px;margin:0;z-index:2;}
.wk-quote{min-height:0;flex:1;display:flex;}
.wk-quote-inner{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:42px 28px 24px;gap:11px;overflow:auto;position:relative;
  background-size:cover;background-position:center;
}
/* A photo behind the quote needs a scrim or the text stops being readable. */
.wk-quote-inner.has-image::before{
  content:'';position:absolute;inset:0;background:rgba(18,17,15,.55);
  backdrop-filter:saturate(1.1);
}
.wk-quote-inner > *{position:relative;z-index:1;}
.wk-quote-head{
  font-size:clamp(19px,1.95vw,31px);font-weight:800;line-height:1.08;
  letter-spacing:-0.01em;text-transform:uppercase;text-wrap:balance;
}
.wk-quote-text{font-size:clamp(12px,0.92vw,15px);line-height:1.5;max-width:44ch;opacity:.93;}
.wk-highlights-body{flex:1;min-height:0;overflow-y:auto;}
.wk-quote-attr{font-size:12px;font-weight:600;letter-spacing:.06em;}
.wk-quote-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--text3);font-size:14px;gap:4px;background:var(--surf2);
}

.wk-highlight{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--b1);}
.wk-highlight:last-child{border-bottom:none;}
.wk-highlight-n{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--abg);
  color:var(--accent2);font-size:10px;font-weight:700;display:flex;
  align-items:center;justify-content:center;margin-top:1px;
}
.wk-highlight-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.35;}
.wk-highlight-detail{font-size:11px;color:var(--text3);margin-top:2px;line-height:1.45;}

.wk-metrics{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;}
.wk-metric{padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-height:0;}
.wk-metric-label{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text3);line-height:1.3;
}
.wk-metric-value{font-size:clamp(18px,1.5vw,25px);font-weight:700;line-height:1.1;margin-top:2px;font-variant-numeric:tabular-nums;}
.wk-metric-target{font-size:13px;color:var(--text3);font-weight:400;}
.wk-delta{font-size:11px;font-weight:700;margin-left:6px;white-space:nowrap;
  letter-spacing:.01em;vertical-align:middle;}
.wk-metric-note{font-size:10px;color:var(--text3);line-height:1.35;flex:1;}
.wk-metric-src{
  font-size:9px;color:var(--text4);text-transform:uppercase;letter-spacing:.07em;
  font-weight:700;margin-top:2px;
}
.wk-metric-off{opacity:.72;}

.wk-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;min-height:0;}
.wk-bottom > .tile{min-height:0;}

/* Drop-target styling for the quote background image. */
.wk-drop{
  border:1px dashed var(--b2);border-radius:9px;padding:14px;text-align:center;
  font-size:11px;color:var(--text3);cursor:pointer;transition:all .13s;background:var(--surf2);
}
.wk-drop:hover,.wk-drop.over{border-color:var(--accent2);color:var(--text2);background:var(--surf3);}
.wk-drop-thumb{
  width:100%;height:86px;border-radius:7px;background-size:cover;background-position:center;
  margin-bottom:8px;border:1px solid var(--b2);
}

/* Keep the seven metrics on one row for as long as they stay legible —
   wrapping to two rows costs the tables below a third of their height. */
@media (max-width:1180px){ .wk-metrics{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (max-width:1100px){
  .wk-top,.wk-bottom{grid-template-columns:minmax(0,1fr);}
  .wk-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* Too narrow to hold it all on one screen — let the page scroll instead. */
  .wk-content{display:flex;overflow-y:auto;}
  .wk-quote{min-height:220px;}
}
@media (max-width:560px){ .wk-metrics{grid-template-columns:minmax(0,1fr);} }

/* Tables inside tiles need to grow to their content. `.tile` clips by default
   (for the rounded accent bar), which cut the Sales & Margin table off. */
.tile-table{overflow:visible;}
.tile-table .t-accent{overflow:hidden;}
.table-scroll{overflow:auto;max-width:100%;flex:1;min-height:0;}
@media (max-width:1100px){ .table-scroll{overflow-y:visible;} }