/* Google Fonts loaded via tags in for better CSP compatibility */ :root{ --ink:#0a0c10;--paper:#f5f2eb;--pm:#ede9df;--pd:#ddd8cc; --accent:#c8440c;--adim:#e8825a;--gold:#b8940a;--teal:#1a7a6e; --uk:#1a4a7a;--uklt:#2a6aaa;--neg:#b01c1c;--muted:#6b6560;--blue:#3a5aad; --rule:rgba(10,12,16,0.12);--sh:0 2px 14px rgba(10,12,16,0.07); } *{box-sizing:border-box;margin:0;padding:0} body{background:var(--paper);color:var(--ink);font-family:'Barlow',sans-serif;font-size:13px;line-height:1.5} /* ── MASTHEAD ── */ .mast{background:var(--ink);color:var(--paper);padding:18px 44px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid var(--accent);gap:24px;flex-wrap:wrap} .mast-kick{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--adim);margin-bottom:3px} .mast-title{font-family:'Libre Baskerville',serif;font-size:22px;font-weight:700;letter-spacing:-0.5px} .mast-sub{font-size:11px;color:rgba(245,242,235,0.4);font-style:italic;margin-top:2px} /* Month selector */ .mo-ctrl{display:flex;flex-direction:column;align-items:center;gap:4px} .mo-ctrl label{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(245,242,235,0.45)} .mo-sel{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;background:rgba(255,255,255,0.09);color:var(--paper);border:1px solid rgba(255,255,255,0.18);padding:8px 34px 8px 14px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(245,242,235,0.5)'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;min-width:200px;transition:border-color .2s} .mo-sel:focus{outline:none;border-color:var(--accent)} .mo-sel option{background:#1a1c20;color:var(--paper)} .mo-hint{font-size:9px;color:rgba(245,242,235,0.25);text-align:center;margin-top:1px} .mast-r{text-align:right} .mast-r-mo{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold)} .mast-r-val{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:700;line-height:1} .mast-r-note{font-size:10px;color:rgba(245,242,235,0.28);margin-top:2px} /* ── TABS ── */ .tab-nav{background:var(--ink);padding:0 44px;display:flex;border-bottom:none} .tab-btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:11px 22px;color:rgba(245,242,235,0.38);border:none;background:none;cursor:pointer;border-bottom:3px solid transparent;transition:all .18s} .tab-btn:hover{color:rgba(245,242,235,0.7)} .tab-btn.au{color:var(--paper);border-bottom-color:var(--accent)} .tab-btn.ai{color:var(--paper);border-bottom-color:var(--gold)} .tab-btn.ak{color:var(--paper);border-bottom-color:var(--uklt)} .tdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;position:relative;top:-1px} .du{background:var(--accent)}.di{background:var(--gold)}.dk{background:var(--uklt)} /* ── PANELS ── */ .tab-panel{display:none}.tab-panel.active{display:block} .wrap{max-width:1400px;margin:0 auto;padding:24px 44px 52px} /* ── SECTION ── */ .sec{display:flex;align-items:center;gap:12px;margin:24px 0 13px} .sec-lbl{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);white-space:nowrap} .sec-line{flex:1;height:1px;background:var(--rule)} /* ── GRIDS ── */ .g5{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:20px} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px} .g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} .g32{display:grid;grid-template-columns:3fr 2fr;gap:16px;margin-bottom:16px} .g23{display:grid;grid-template-columns:2fr 3fr;gap:16px;margin-bottom:16px} /* ── KPI CARD ── */ .kpi{background:#fff;padding:16px 18px 14px;position:relative;overflow:hidden} .kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px} .kpi.ca::before{background:var(--accent)}.kpi.ct::before{background:var(--teal)} .kpi.cg::before{background:var(--gold)}.kpi.cn::before{background:var(--neg)} .kpi.cd::before{background:var(--pd)}.kpi.cu::before{background:var(--uk)} .kpi-l{font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .kpi-v{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;line-height:1;color:var(--ink)} .kpi-v.neg{color:var(--neg)} .kpi-deltas{display:flex;flex-direction:column;gap:3px;margin-top:8px} .dl-row{display:flex;align-items:center;gap:6px;font-size:11px} .dl-tag{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);width:26px;flex-shrink:0} .dl-up{color:var(--teal)}.dl-dn{color:var(--neg)}.dl-neu{color:var(--muted)} .dl-abs{font-weight:600}.dl-pct{color:var(--muted);font-size:10px;margin-left:2px} /* ── CARD ── */ .card{background:#fff;border:1px solid var(--rule);box-shadow:var(--sh);overflow:hidden} .card-hd{padding:10px 16px 8px;border-bottom:1px solid var(--rule);display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px} .card-t{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase} .card-b{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);background:var(--pm);padding:2px 7px} .card-bd{padding:14px} .p0{padding:0} /* ── ENTITY CARD ── */ .ent{background:#fff;border:1px solid var(--rule);box-shadow:var(--sh)} .ent-hd{background:var(--ink);color:var(--paper);padding:11px 16px 9px} .ent-hd.g{background:var(--gold)}.ent-hd.t{background:var(--teal)}.ent-hd.u{background:var(--uk)}.ent-hd.br{background:#5a3a0a} .ent-nm{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase} .ent-cu{font-size:10px;color:rgba(245,242,235,0.4);letter-spacing:2px;font-family:'Barlow Condensed',sans-serif} .ent-bd{padding:12px 16px} .ent-r{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;border-bottom:1px solid var(--pm)} .ent-r:last-child{border-bottom:none} .ent-lb{font-size:11px;color:var(--muted)} .ent-vl{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:600} .ent-mg{font-size:10px;color:var(--muted);margin-left:3px;font-weight:400} .ent-ebt{margin-top:9px;padding-top:9px;border-top:2px solid var(--ink);display:flex;justify-content:space-between;align-items:flex-end} .ent-ebt-l{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;color:var(--muted)} .ent-ebt-v{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:700;line-height:1;color:var(--teal)} .ent-ebt-v.neg{color:var(--neg)} /* ── TABLES ── */ table{width:100%;border-collapse:collapse;font-size:12px} thead th{font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);padding:7px 12px;text-align:right;background:var(--pm);border-bottom:1px solid var(--rule);white-space:nowrap} thead th:first-child{text-align:left} tbody td{padding:6px 12px;border-bottom:1px solid var(--pm);text-align:right;vertical-align:middle} tbody td:first-child{text-align:left;font-weight:500} tbody tr:last-child td{border-bottom:none} tbody tr:hover td{background:var(--pm)} .tm{color:var(--muted);font-size:11px;font-weight:400} .tp{color:var(--teal);font-weight:600}.tn{color:var(--neg);font-weight:600}.ta{color:var(--accent);font-weight:600} .tf td{background:var(--ink)!important;color:var(--paper)!important;font-weight:700;border:none;text-align:right} .tf td:first-child{text-align:left} .tf td.hi{color:#7dd9c8;font-family:'Barlow Condensed',sans-serif;font-size:15px} .tf td.hig{color:#f5c96a;font-family:'Barlow Condensed',sans-serif;font-size:15px} .tf td.hiu{color:#7ab3e8;font-family:'Barlow Condensed',sans-serif;font-size:15px} /* YTD table year header */ .yr-head{background:var(--ink);color:var(--paper);font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 12px;text-align:center!important} .yr-head.mock{background:#2a3a2a;color:rgba(245,242,235,0.6)} td.cur{background:rgba(26,122,110,0.06)}td.prev{background:rgba(184,148,10,0.05)}td.diff-pos{color:var(--teal);font-weight:600}td.diff-neg{color:var(--neg);font-weight:600} /* Progress bars */ .pb-w{display:flex;align-items:center;gap:6px} .pb{flex:1;height:5px;background:var(--pm);min-width:40px} .pb-f{height:100%} .pb-p{font-size:11px;color:var(--muted);width:34px;text-align:right;font-weight:500} /* Agent grid */ .ag-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule)} .ag-col{padding:14px 16px;border-right:1px solid var(--rule);background:#fff} .ag-col:last-child{border-right:none;background:var(--pm)} .ag-mode{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14px;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px} .ag-tot{font-size:11px;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--rule);margin-bottom:2px} .ag-row{display:flex;justify-content:space-between;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--pm)} .ag-row:last-child{border-bottom:none} .ag-tag{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;padding:1px 5px;margin-bottom:1px} .tg-agt{background:rgba(200,68,12,0.12);color:var(--accent)} .tg-c5c{background:rgba(26,122,110,0.12);color:var(--teal)} .tg-cus{background:rgba(184,148,10,0.12);color:var(--gold)} .tg-int{background:rgba(58,90,173,0.12);color:var(--blue)} .ag-desc{font-size:10px;color:var(--muted)} .ag-val{text-align:right} .ag-profit{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700} .ag-pct{font-size:10px;color:var(--muted)} /* Volume stat */ .vs{background:var(--pm);padding:11px 14px;display:flex;justify-content:space-between;align-items:center} .vs-l{font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)} .vs-v{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;line-height:1;margin-top:2px} .vs-ico{font-size:22px;color:var(--pd);line-height:1} .cc{display:inline-block;font-size:10px;background:var(--ink);color:var(--paper);padding:1px 4px;font-weight:700;letter-spacing:1px;margin-right:4px;font-family:'Barlow Condensed',sans-serif;vertical-align:middle} td.nowrap, .nowrap{white-space:nowrap} .note-bar{padding:7px 13px;background:rgba(184,148,10,0.10);border-left:3px solid var(--gold);font-size:11px;color:var(--muted)} .note-bar.uk{background:rgba(26,74,122,0.08);border-left-color:var(--uk)} .footnote{margin-top:36px;padding-top:10px;border-top:1px solid var(--rule);font-size:10px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px} /* ── NETLIFY IDENTITY LOGIN GATE ── */ #login-gate{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--ink);position:fixed;top:0;left:0;width:100%;z-index:9999} #login-box{background:var(--paper);padding:48px 40px;max-width:400px;width:90%;text-align:center;border-top:4px solid var(--accent)} #login-box .lg-logo{font-family:'Libre Baskerville',serif;font-size:22px;font-weight:700;color:var(--ink);margin-bottom:4px} #login-box .lg-sub{font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:32px;font-family:'Barlow Condensed',sans-serif} #login-box .lg-btn{display:block;background:var(--ink);color:var(--paper);border:none;padding:14px 32px;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;width:100%;margin-bottom:12px;text-decoration:none;box-sizing:border-box} #login-box .lg-btn:hover{background:#1a3a5c} #login-box .lg-note{font-size:11px;color:var(--muted);margin-top:16px} #dashboard-content{display:none} #login-box .lg-input{display:block;width:100%;padding:12px 14px;margin-bottom:12px;border:1px solid var(--pd);background:white;font-family:'Barlow',sans-serif;font-size:14px;color:var(--ink);box-sizing:border-box;outline:none} #login-box .lg-input:focus{border-color:var(--ink)} #login-box .lg-error{color:#b01c1c;font-size:12px;margin-top:8px;font-family:'Barlow',sans-serif} #login-box .lg-reset-title{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px;color:var(--ink)} /* ══════════════════════════════════════════════ RESPONSIVE — TABLET (max 900px) ══════════════════════════════════════════════ */ @media(max-width:900px){ .wrap{padding:16px 20px 40px} .mast{padding:14px 20px 12px} .tab-nav{padding:0 20px} .g5{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} .g2{grid-template-columns:1fr 1fr} .g32{grid-template-columns:1fr} .g23{grid-template-columns:1fr} .ag-grid{grid-template-columns:repeat(2,1fr)} .card-bd{padding:10px} .kpi-v{font-size:22px} } /* ══════════════════════════════════════════════ RESPONSIVE — MOBILE (max 600px) ══════════════════════════════════════════════ */ @media(max-width:600px){ /* Masthead */ .mast{padding:12px 16px 10px;flex-direction:column;align-items:flex-start;gap:12px} .mast-title{font-size:18px} .mast-sub{font-size:10px} .mo-ctrl{width:100%} .mo-sel{width:100%;min-width:unset} .mo-hint{font-size:10px;margin-top:4px} /* Tabs */ .tab-nav{padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:nowrap} .tab-btn{font-size:10px;padding:10px 14px;white-space:nowrap;flex-shrink:0} /* Wrap */ .wrap{padding:12px 12px 40px} /* Section headers */ .sec{margin:18px 0 10px} .sec-t{font-size:13px} /* KPI grids — all single column on mobile */ .g5{grid-template-columns:1fr 1fr} .g4{grid-template-columns:1fr 1fr} .g3{grid-template-columns:1fr 1fr} .g2{grid-template-columns:1fr} .g32{grid-template-columns:1fr} .g23{grid-template-columns:1fr} /* KPI cards */ .kpi{padding:12px 14px 10px} .kpi-v{font-size:20px} .kpi-l{font-size:9px} .kpi-deltas{flex-direction:row;gap:8px} /* Cards */ .card-hd{padding:8px 12px 6px} .card-bd{padding:10px 10px} .card-t{font-size:11px} /* All tables — horizontal scroll */ .card-bd table, .p0 table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap} table th, table td{padding:6px 8px;font-size:11px} /* Agent income grid */ .ag-grid{grid-template-columns:1fr 1fr} .ag-mode{font-size:12px} /* Charts — shorter on mobile */ .chart-wrap, [style*="height:260px"], [style*="height:220px"]{height:200px !important} canvas{max-height:200px} /* P&L entity cards */ .ent-bd{grid-template-columns:1fr !important} .pl-row{font-size:11px} .pl-val{font-size:11px} /* Progress bars in operator table */ .pb{min-width:20px} /* Trade lane country badges */ .cc{font-size:9px;padding:1px 4px} /* Login gate */ #login-box{padding:32px 20px} #login-box .lg-logo{font-size:18px} #login-box .lg-input{font-size:16px}/* prevent iOS zoom on focus */ /* Subsidiary P&L rows */ .sub-pl{font-size:11px} /* YTD table wrapper */ .p0{overflow-x:auto;-webkit-overflow-scrolling:touch} #usa-ytd-table, #ita-ytd-table, #uk-ytd-table{min-width:600px} } /* ══════════════════════════════════════════════ RESPONSIVE — SMALL MOBILE (max 380px) ══════════════════════════════════════════════ */ @media(max-width:380px){ .g5{grid-template-columns:1fr} .g4{grid-template-columns:1fr} .g3{grid-template-columns:1fr} .mast-title{font-size:16px} .tab-btn{font-size:9px;padding:8px 10px} .kpi-v{font-size:18px} } /* ── INCOME STATEMENT SUB-TABS ── */ .sub-nav{display:flex;border-bottom:2px solid var(--rule);margin-bottom:20px;gap:0} .sub-btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:9px 20px;color:var(--muted);border:none;background:none;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .15s} .sub-btn:hover{color:var(--ink)} .sub-btn.act{color:var(--ink);border-bottom-color:var(--accent)} .sub-btn.act-g{color:var(--ink);border-bottom-color:var(--gold)} .sub-btn.act-u{color:var(--ink);border-bottom-color:var(--uklt)} .sub-panel{display:none}.sub-panel.active{display:block} /* IS table */ .is-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .is-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:520px} .is-tbl th{background:var(--ink);color:var(--paper);font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:9px 14px;text-align:right;white-space:nowrap} .is-tbl th:first-child{text-align:left;width:26%} .is-tbl td{padding:9px 14px;border-bottom:1px solid var(--pm);text-align:right;font-family:'Barlow Condensed',sans-serif;font-size:26px} .is-tbl td:first-child{text-align:left;font-size:24px;color:var(--ink)} .is-tbl tr.is-hdr td{background:var(--pm);font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:20px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);padding:6px 14px;border-bottom:none} .is-tbl tr.is-hdr td:first-child{color:var(--ink)} .is-tbl tr.is-sub td{background:#fff;font-weight:600;border-top:1px solid var(--rule)} .is-tbl tr.is-total td{background:#fff;color:var(--ink);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;border-bottom:2px solid var(--ink);border-top:1px solid var(--rule)} .is-tbl tr.is-total td .pos{color:#1a7a3a;font-weight:700} .is-tbl tr.is-total td .neg{color:var(--neg);font-weight:700} .is-tbl tr.is-ebt td{background:#fff;color:var(--ink);font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:28px;border-bottom:2px solid var(--ink);border-top:2px solid var(--ink)} .is-tbl tr.is-ebt td .pos{color:#1a7a3a;font-weight:800} .is-tbl tr.is-ebt td .neg{color:var(--neg);font-weight:800} .is-tbl tr.is-ebt td .var-pos{color:#1a7a3a;font-weight:700} .is-tbl tr.is-ebt td .var-neg{color:var(--neg);font-weight:700} .is-tbl tr.is-indent td:first-child{padding-left:28px;color:var(--muted);font-size:22px} .is-tbl .pos{color:#1a7a3a}.is-tbl .neg{color:var(--neg)} .is-tbl .var-pos{color:#1a7a3a;font-size:22px}.is-tbl .var-neg{color:var(--neg);font-size:22px} .is-tbl tr.is-spacer td{padding:3px;border:none;background:transparent} .is-mo-ctrl{display:flex;align-items:center;gap:10px;margin-bottom:16px} .is-mo-ctrl label{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)} .is-mo-sel{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;background:var(--pm);color:var(--ink);border:1px solid var(--rule);padding:6px 28px 6px 10px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6560'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center} .is-na{text-align:center;padding:40px;color:var(--muted);font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:1px} @media(max-width:600px){ .sub-btn{font-size:9px;padding:7px 12px} .is-tbl td,.is-tbl th{padding:6px 8px;font-size:11px} .is-tbl tr.is-indent td:first-child{padding-left:18px} } /* ── LOADING OVERLAY ── */ #supa-loading{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--paper);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px} .supa-spinner{width:40px;height:40px;border:3px solid var(--rule);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .supa-msg{font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)} .supa-err{font-family:'Barlow Condensed',sans-serif;font-size:12px;color:var(--neg);text-align:center;max-width:400px;padding:0 20px} /* ── CLIENT ANALYSIS TAB ── */ .cl-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} .cl-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px} @media(max-width:900px){.cl-grid,.cl-grid-3{grid-template-columns:1fr}} .trend-up{color:#1a7a3a;font-weight:700} .trend-dn{color:var(--neg);font-weight:700} .trend-fl{color:var(--muted)} .trend-ico{font-size:16px;margin-right:3px} .cl-tbl{width:100%;border-collapse:collapse;font-size:12px} .cl-tbl th{background:var(--ink);color:var(--paper);font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:8px 10px;text-align:left;white-space:nowrap} .cl-tbl td{padding:7px 10px;border-bottom:1px solid var(--rule);vertical-align:middle} .cl-tbl tr:hover td{background:rgba(10,12,16,0.03)} .cl-tbl .num{text-align:right;font-variant-numeric:tabular-nums} .cl-tbl .mg{font-size:11px;color:var(--muted)} .cl-badge{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:1px;padding:2px 6px;border-radius:2px;text-transform:uppercase} .cl-badge.grow{background:#d4edda;color:#1a5c2a} .cl-badge.slow{background:#fde8e8;color:#8b1c1c} .cl-badge.flat{background:var(--pm);color:var(--muted)} .cl-badge.new{background:#e8f0fd;color:#1a3a8a} .spark-bar{display:inline-flex;align-items:flex-end;gap:2px;height:24px;vertical-align:middle} .spark-bar span{width:6px;background:var(--accent);border-radius:1px 1px 0 0;opacity:0.7;transition:opacity .15s} .spark-bar span.hi{opacity:1;background:var(--accent)} .spark-bar span.neg-bar{background:var(--neg)} /* ── SALES TAB ── */ .sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:20px} .sp-card{background:#fff;border:1px solid var(--rule);border-radius:4px;padding:18px;cursor:pointer;transition:all .18s;position:relative;overflow:hidden} .sp-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--accent)} .sp-card:hover{box-shadow:0 4px 20px rgba(10,12,16,0.12);transform:translateY(-1px)} .sp-card.active-card{box-shadow:0 4px 20px rgba(200,68,12,0.2);border-color:var(--accent)} .sp-name{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:800;letter-spacing:0.5px;margin-bottom:4px} .sp-role{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:12px} .sp-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px} .sp-stat-v{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700} .sp-stat-l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px} .sp-margin-bar{height:4px;background:var(--rule);border-radius:2px;margin-top:10px} .sp-margin-fill{height:4px;background:var(--accent);border-radius:2px;transition:width .4s} /* ── SALES DETAIL MODAL ── */ .modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(10,12,16,0.6);z-index:1000;align-items:stretch;justify-content:stretch;padding:0;overflow:hidden} .modal-overlay.open{display:flex} .modal-box{background:var(--paper);width:100vw;height:100vh;max-width:none;max-height:none;border-radius:0;overflow:hidden;box-shadow:none;display:flex;flex-direction:column} .modal-hd{background:var(--ink);color:var(--paper);padding:20px 28px;display:flex;align-items:center;justify-content:space-between} .modal-title{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800;letter-spacing:0.5px} .modal-close{background:none;border:none;color:var(--paper);font-size:24px;cursor:pointer;padding:0;line-height:1;opacity:0.6;transition:opacity .15s} .modal-close:hover{opacity:1} .modal-body{padding:16px 24px 24px 24px;overflow:hidden;flex:1 1 auto;min-height:0;display:flex;flex-direction:column} .modal-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;flex-shrink:0} .modal-kpi{background:#fff;border:1px solid var(--rule);padding:12px 16px;border-radius:3px;text-align:center} .modal-kpi-v{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800} .modal-kpi-l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px} #modal-detail-table{flex:1 1 auto;min-height:0;overflow:auto} .detail-tbl{width:100%;border-collapse:collapse;font-size:12px} .detail-tbl th{background:var(--ink);color:var(--paper);font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:8px 10px;text-align:left;white-space:nowrap;position:sticky;top:0;z-index:2} .detail-tbl td{padding:7px 10px;border-bottom:1px solid var(--rule);vertical-align:middle} .detail-tbl td:nth-child(5),.detail-tbl td:nth-child(6),.detail-tbl td:nth-child(7),.detail-tbl th:nth-child(5),.detail-tbl th:nth-child(6),.detail-tbl th:nth-child(7){min-width:160px} .detail-tbl tr:hover td{background:rgba(10,12,16,0.03)} .detail-tbl .num{text-align:right;font-variant-numeric:tabular-nums} @media(max-width:600px){.modal-summary{grid-template-columns:1fr 1fr}.sp-grid{grid-template-columns:1fr}} /* ── ERROR / WARNING BANNERS ── */ .err-banner{padding:12px 20px;font-size:12px;font-family:'Barlow Condensed',sans-serif;letter-spacing:0.5px;display:none;align-items:center;gap:10px} .err-banner.error{background:#fde8e8;border-left:4px solid var(--neg);color:#7a1c1c} .err-banner.warn{background:rgba(184,148,10,0.10);border-left:4px solid var(--gold);color:#5a4200} .err-banner .retry-btn{background:var(--ink);color:var(--paper);border:none;padding:6px 14px;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;margin-left:auto} /* ── MODAL COLUMN FILTER DROPDOWNS ── */ .col-filter-icon{font-size:9px;opacity:0.6;margin-left:2px;transition:opacity .15s} th:hover .col-filter-icon{opacity:1} .col-filter-dropdown{position:absolute;top:100%;left:0;z-index:100;background:#fff;border:1px solid #d0d7de;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,0.15);width:240px;max-height:360px;display:flex;flex-direction:column;text-transform:none;letter-spacing:0;font-weight:400} .col-filter-menu{padding:6px 10px;font-size:12px;color:#24292f;cursor:pointer} .col-filter-menu:hover{background:#f6f8fa} .col-filter-menu.disabled{color:#8c959f;cursor:default;background:transparent} .col-filter-menu.disabled:hover{background:transparent} .col-filter-divider{height:1px;background:#d0d7de;margin:4px 0} .col-filter-search{width:100%;box-sizing:border-box;padding:6px 8px;font-size:12px;border:none;border-bottom:1px solid #d0d7de;outline:none} .col-filter-search:focus{background:#f6f8fa} .col-filter-list{overflow-y:auto;flex:1 1 auto;max-height:220px} .col-filter-item{display:flex;align-items:center;gap:6px;padding:3px 8px;font-size:12px;color:#24292f;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .col-filter-item:hover{background:#f6f8fa} .col-filter-item input[type="checkbox"]{margin:0;flex-shrink:0} .col-filter-selectall{border-bottom:1px solid #d0d7de;font-weight:600;padding:5px 8px} .col-filter-footer{display:flex;justify-content:flex-end;gap:6px;padding:6px 8px;border-top:1px solid #d0d7de;background:#f6f8fa} .col-filter-btn{font-family:inherit;font-size:11px;padding:4px 12px;border-radius:3px;cursor:pointer;border:1px solid #d0d7de;background:#fff} .col-filter-btn:hover{background:#f6f8fa} .col-filter-ok{background:var(--ink);color:var(--paper);border-color:var(--ink)} .col-filter-ok:hover{opacity:0.85;background:var(--ink)}