/* ═══════════════════════════════════════════════════════════════
   Anova ADM Platform — Main Stylesheet
   Extracted from index.html <style> block (lines 17-722)
═══════════════════════════════════════════════════════════════ */
    :root {
      --yellow:#FFD732; --navy:#2D4187; --dark:#111111; --dark2:#1a1a1a;
      --dark3:#222222; --border:#2a2a2a; --muted:#888888; --white:#ffffff;
      --red:#D94040; --orange:#E87A30; --green:#2F9E5A; --blue:#3A7FD5;
      --font:'Work Sans',-apple-system,sans-serif;
      --color-warm:#B8860B;
      --sidebar:220px; --right:272px;
    }
    .toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--dark3);border:1px solid var(--border);border-radius:8px;padding:10px 18px;font-size:11px;color:rgba(255,255,255,.8);z-index:200;opacity:1;transition:opacity .4s;pointer-events:none;white-space:nowrap}
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
    html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:dark}
    html,body{font-family:var(--font);font-size:13px;background:var(--dark);color:var(--white);height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
    .shell{display:grid;grid-template-rows:52px 38px 1fr;grid-template-columns:var(--sidebar) 1fr var(--right);height:100vh}

    /* NAV */
    .topnav{grid-column:1/-1;background:var(--dark);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:0}
    .nav-logo{font-size:13px;font-weight:800;letter-spacing:4px;color:var(--white);white-space:nowrap;display:flex;flex-direction:column;line-height:1.1;margin-right:28px}
    .nav-logo-sub{font-size:8px;font-weight:500;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
    .nav-tabs{display:flex;align-items:center;flex:1;justify-content:center}
    .nav-tab{padding:0 20px;height:52px;display:flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap}
    .nav-tab:hover{color:var(--white)}
    .nav-tab.active{color:var(--white);border-bottom-color:var(--yellow)}
    .nav-right{display:flex;align-items:center;gap:10px;margin-left:16px}
    .db-pill{display:flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid var(--border);border-radius:20px;font-size:10px;font-weight:500;color:var(--muted)}
    .db-dot{width:6px;height:6px;background:var(--green);border-radius:50%}
    .nav-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;font-size:14px;border-radius:6px}
    .nav-icon:hover{background:rgba(255,255,255,.06);color:var(--white)}
    .ai-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--yellow);border-radius:6px;font-size:11px;font-weight:700;color:var(--dark);cursor:pointer;border:none}
    .avatar{width:28px;height:28px;background:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--white);cursor:pointer}
    .nav-signout{display:flex;align-items:center;padding:5px 8px;border:1px solid var(--border);border-radius:6px;font-size:13px;color:var(--muted);cursor:pointer;background:transparent;font-family:var(--font);transition:color .15s,border-color .15s}
    .nav-signout:hover{color:var(--white);border-color:#555}

    /* FILTER BAR */
    .filterbar{grid-column:1/-1;background:var(--dark2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:8px}
    .filter-label{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
    .filter-select{padding:3px 9px;border:1px solid var(--border);border-radius:4px;font-size:11px;font-weight:500;color:rgba(255,255,255,.75);cursor:pointer;background:var(--dark3);font-family:var(--font);outline:none;appearance:none;-webkit-appearance:none}
    .filter-select:hover,.filter-select:focus{border-color:#444;color:var(--white)}
    .filter-sep{color:var(--border)}
    .temp-badge{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted)}
    .temp-val{padding:2px 10px;border-radius:20px;font-size:10px;font-weight:700}

    /* SIDEBAR */
    .sidebar{grid-row:3;background:var(--dark2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;padding-bottom:16px}
    .sb-section{padding:14px 14px 6px}
    .sb-label{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
    .sb-divider{border:none;border-top:1px solid var(--border);margin:4px 0}
    .src-row{display:flex;align-items:flex-start;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04)}
    .src-row:last-child{border-bottom:none}
    .src-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:3px}
    .src-name{font-size:11px;font-weight:600;color:rgba(255,255,255,.8);line-height:1.2}
    .src-sub{font-size:9px;color:var(--muted);margin-top:1px}
    .adm-row{display:flex;align-items:center;gap:8px;padding:5px 0}
    .adm-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--white);flex-shrink:0}
    .adm-info{flex:1}
    .adm-name-text{font-size:11px;font-weight:600;color:rgba(255,255,255,.8)}
    .adm-accts{font-size:9px;color:var(--muted)}
    .adm-status{width:7px;height:7px;border-radius:50%;flex-shrink:0}
    .vert-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:11px;color:rgba(255,255,255,.65)}
    .vert-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}

    /* MAIN */
    .main{grid-row:3;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
    .tab-panel{display:none;flex-direction:column;gap:14px}
    .tab-panel.active{display:flex}

    /* KPI STRIP */
    .kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
    .kpi-card{background:var(--dark3);border:1px solid var(--border);border-radius:8px;padding:12px 14px}
    .kpi-card-label{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
    .kpi-card-value{font-size:26px;font-weight:800;line-height:1;color:var(--white)}
    .kpi-card-sub{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:10px}
    .delta-up{color:var(--green);font-weight:700}
    .delta-down{color:var(--red);font-weight:700}
    .delta-flat{color:var(--muted);font-weight:700}
    .kpi-note{color:var(--muted)}
    .lifecycle-bar{display:flex;gap:2px;height:5px;border-radius:3px;overflow:hidden;margin:8px 0 4px}
    .lc-seg{height:100%;border-radius:1px}
    .lifecycle-labels{display:flex;gap:6px;flex-wrap:wrap}
    .lc-label{font-size:8px;color:var(--muted);display:flex;align-items:center;gap:3px}
    .lc-dot{width:6px;height:6px;border-radius:1px}

    /* TEMP GRID */
    .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
    .section-title{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
    .temp-grid{display:flex;flex-wrap:wrap;gap:8px}
    .temp-tile{width:120px;border-radius:8px;padding:10px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid transparent;cursor:pointer;transition:transform .12s,box-shadow .12s;box-sizing:border-box}
    .temp-tile:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.5);border-color:rgba(255,255,255,.12)}
    .temp-tile-name{font-size:9px;font-weight:700;letter-spacing:.5px;color:rgba(255,255,255,.7);text-align:center;line-height:1.3;width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    .temp-tile-adm{font-size:8px;color:rgba(255,255,255,.4)}
    .temp-tile-score{font-size:22px;font-weight:800;line-height:1}
    .temp-tile-kpis{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px;justify-content:center;width:100%}
    .temp-tile-kpi{font-size:8px;font-weight:600;padding:2px 6px;border-radius:3px;background:rgba(0,0,0,.25);color:rgba(255,255,255,.6);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .temp-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

    /* SETTINGS MODAL */
    .settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300}
    .settings-modal{position:fixed;top:60px;right:16px;width:264px;background:var(--dark3);border:1px solid var(--border);border-radius:10px;padding:16px;z-index:301;flex-direction:column;gap:12px}
    .settings-header{display:flex;align-items:center;justify-content:space-between}
    .settings-title{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
    .settings-close{font-size:12px;color:var(--muted);cursor:pointer;padding:2px 4px;border-radius:3px;line-height:1}
    .settings-close:hover{color:var(--white);background:rgba(255,255,255,.06)}
    .settings-section-label{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
    .settings-desc{font-size:10px;color:rgba(255,255,255,.38);line-height:1.45;margin-top:-6px}
    .settings-options{display:flex;flex-direction:column;gap:5px}
    .settings-option{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:border-color .12s,background .12s;user-select:none}
    .settings-option.selected{border-color:var(--yellow);background:rgba(255,215,50,.06)}
    .settings-option:hover:not(.selected){border-color:#444;background:rgba(255,255,255,.03)}
    .settings-option-check{width:14px;height:14px;border:1.5px solid #444;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;transition:background .1s,border-color .1s}
    .settings-option.selected .settings-option-check{background:var(--yellow);border-color:var(--yellow);color:var(--dark);font-weight:800}
    .settings-option-label{font-size:11px;font-weight:500;color:rgba(255,255,255,.72);flex:1}
    .settings-save{padding:8px;background:var(--yellow);border:none;border-radius:6px;font-size:11px;font-weight:700;color:var(--dark);cursor:pointer;font-family:var(--font);letter-spacing:.5px}
    .settings-save:hover{opacity:.88}
    .tl-item{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--muted)}
    .tl-swatch{width:10px;height:10px;border-radius:2px}
    .bg-critical{background:rgba(217,64,64,.15);border-color:rgba(217,64,64,.25)}
    .bg-atrisk{background:rgba(232,122,48,.15);border-color:rgba(232,122,48,.25)}
    .bg-warm{background:rgba(184,134,11,.15);border-color:rgba(184,134,11,.25)}
    .bg-healthy{background:rgba(47,158,90,.15);border-color:rgba(47,158,90,.25)}
    .bg-champion{background:rgba(58,127,213,.15);border-color:rgba(58,127,213,.25)}

    /* ACTION TABLES */
    .action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .action-panel{background:var(--dark3);border:1px solid var(--border);border-radius:8px;overflow:hidden}
    .action-panel-header{padding:8px 12px;background:var(--dark2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
    .action-panel-title{font-size:10px;font-weight:700;color:var(--white)}
    .action-panel-sort{font-size:8px;color:var(--muted);letter-spacing:.5px}
    .action-table{width:100%;border-collapse:collapse;font-size:10px}
    .action-table th{padding:6px 10px;text-align:left;font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
    .action-table td{padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.04);color:rgba(255,255,255,.8)}
    .action-table tr:last-child td{border-bottom:none}
    .priority-badge{padding:2px 7px;border-radius:3px;font-size:8px;font-weight:700;letter-spacing:.5px}
    .badge-crit{background:rgba(217,64,64,.25);color:var(--red)}
    .badge-warn{background:rgba(232,122,48,.2);color:var(--orange)}
    .badge-ok{background:rgba(47,158,90,.2);color:var(--green)}
    .action-btn{width:22px;height:22px;border-radius:4px;background:rgba(255,255,255,.06);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;color:var(--muted)}
    .action-btn:hover{background:rgba(255,255,255,.12);color:var(--white)}
    .action-panel-foot{padding:5px 10px;font-size:8px;color:var(--muted);border-top:1px solid var(--border);background:var(--dark2)}

    /* TIERED KPI GRID — customer detail view */
    .tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
    .tier-section{background:var(--dark3);border:1px solid var(--border);border-radius:8px;overflow:hidden}
    .tier-section-header{padding:7px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px}
    .tier-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
    .tier-name{font-size:8px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--white);flex:1}
    .tier-badge-action{font-size:8px;font-weight:700;color:var(--red)}
    .tier-badge-watch{font-size:8px;font-weight:700;color:var(--orange)}
    .tier-badge-ok{font-size:8px;color:var(--green)}
    .tier-badge-pending{font-size:8px;color:var(--muted)}
    .tier-kpi-row{display:flex;align-items:center;gap:6px;padding:5px 10px;border-bottom:1px solid rgba(255,255,255,.04)}
    .tier-kpi-row:last-child{border-bottom:none}
    .tier-kpi-id{font-size:7px;font-weight:700;color:var(--muted);width:34px;flex-shrink:0;letter-spacing:.3px}
    .tier-kpi-lbl{font-size:9px;color:rgba(255,255,255,.65);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .tier-kpi-val{font-size:10px;font-weight:700;color:var(--white);text-align:right;flex-shrink:0;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .tier-kpi-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
    .tier-st-ok{background:var(--green)}
    .tier-st-watch{background:var(--orange)}
    .tier-st-action{background:var(--red)}
    .tier-st-pending{background:rgba(255,255,255,.12)}
    /* KPI clickable + history panel */
    .tier-kpi-row{user-select:none;cursor:default}
    .tier-kpi-row.kpi-has-history{cursor:pointer}
    .tier-kpi-row.kpi-has-history:hover{background:rgba(255,255,255,.04)}
    .tier-kpi-row.kpi-row-active{background:rgba(255,215,50,.07);border-left:2px solid var(--yellow)}
    .kpi-history-panel{padding:10px 12px 12px;border-top:1px solid rgba(255,255,255,.05);animation:kpiPanelIn .15s ease}
    @keyframes kpiPanelIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
    .kpi-hist-title{font-size:8px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
    .kpi-hist-empty{font-size:10px;color:var(--muted);font-style:italic}
    .kpi-bar-chart{display:flex;align-items:flex-end;gap:3px;height:72px;position:relative}
    .kpi-bar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1;gap:2px;height:100%;cursor:default}
    .kpi-bar-col.drillable{cursor:pointer}
    .kpi-bar-col.drillable:hover .kpi-bar{filter:brightness(1.25)}
    .kpi-bar-col.drillable .kpi-bar-lbl{border-bottom:1px dotted rgba(255,255,255,.3)}
    .kpi-bar-val{font-size:7px;color:rgba(255,255,255,.6);white-space:nowrap;line-height:1}
    .kpi-bar-wrap{display:flex;align-items:flex-end;flex:1;width:100%}
    .kpi-bar{width:100%;border-radius:2px 2px 0 0;min-height:3px;transition:height .25s ease}
    .kpi-bar-lbl{font-size:7px;color:var(--muted);white-space:nowrap;margin-top:2px}
    .kpi-hist-delta{font-size:9px;margin-top:7px;color:var(--muted)}
    .kpi-hist-delta b{color:var(--white)}
    .kpi-drill-back{background:none;border:none;color:var(--muted);font-size:8px;cursor:pointer;padding:0 0 6px;display:block;letter-spacing:.5px}
    .kpi-drill-back:hover{color:var(--white)}

    /* BRANCH / DIVISION ANALYSIS */
    .branch-panel{background:var(--dark3);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:0}
    .branch-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
    .branch-header:hover{background:rgba(255,255,255,.03)}
    .branch-header-left{display:flex;align-items:center;gap:8px}
    .branch-header-title{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--white)}
    .branch-header-sub{font-size:9px;color:var(--muted)}
    .branch-collapse-icon{font-size:10px;color:var(--muted);transition:transform .2s}
    .branch-collapse-icon.open{transform:rotate(180deg)}
    .branch-body{padding:12px 14px}
    .branch-tabs{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap}
    .branch-tab{font-size:9px;font-weight:600;letter-spacing:.4px;padding:4px 10px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all .15s}
    .branch-tab.active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:var(--white)}
    .branch-tab:hover:not(.active){background:rgba(255,255,255,.06)}
    .branch-table{width:100%;border-collapse:collapse;font-size:10px}
    .branch-table th{text-align:left;font-size:8px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:4px 8px 6px;border-bottom:1px solid var(--border)}
    .branch-table th.r{text-align:right}
    .branch-table td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
    .branch-table td.r{text-align:right;font-variant-numeric:tabular-nums}
    .branch-table tr:last-child td{border-bottom:none}
    .branch-table tr:hover td{background:rgba(255,255,255,.025)}
    .branch-rank{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;flex-shrink:0}
    .branch-name-cell{display:flex;align-items:center;gap:7px}
    .branch-score-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:10px;font-size:9px;font-weight:700}
    .branch-bar-cell{display:flex;align-items:center;gap:5px}
    .branch-mini-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.18);flex-shrink:0}
    .branch-spread{font-size:8px;color:var(--muted);padding:8px 0 2px;display:flex;gap:12px;flex-wrap:wrap}
    .branch-spread strong{color:var(--white)}
    .branch-empty{font-size:10px;color:var(--muted);padding:10px 0;text-align:center}

    /* DAY-TO-DAY ACTION CARDS */
    .day-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
    .day-card{background:var(--dark3);border:1px solid var(--border);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
    .day-card-header{display:flex;justify-content:space-between;align-items:flex-start}
    .day-card-name{font-size:14px;font-weight:700;color:var(--white)}
    .day-card-meta{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-top:3px}
    .day-card-score{font-size:22px;font-weight:800;text-align:right;line-height:1}
    .day-card-stage{font-size:9px;font-weight:600;text-align:right;margin-top:2px}
    .day-stats-row{display:flex;gap:10px;flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
    .day-stat-item{font-size:9px;color:var(--muted)}
    .day-stat-item strong{color:var(--white);font-weight:700}
    .day-actions-list{display:flex;flex-direction:column;gap:5px;flex:1}
    .day-action-item{display:flex;align-items:flex-start;gap:7px;font-size:10px;line-height:1.45;color:rgba(255,255,255,.7)}
    .day-action-item.priority-high{color:var(--white)}
    .day-action-item.priority-ok{color:var(--green)}
    .day-action-icon{font-size:10px;flex-shrink:0;margin-top:1px}
    .day-action-text{flex:1}
    .day-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:6px;border-top:1px solid var(--border)}
    .day-view-btn{font-size:10px;font-weight:700;color:var(--yellow);background:none;border:1px solid rgba(255,215,50,.3);border-radius:5px;padding:5px 12px;cursor:pointer;font-family:var(--font);transition:background .15s}
    .day-view-btn:hover{background:rgba(255,215,50,.1)}
    .day-sync-meta{font-size:8px;color:var(--muted)}

    /* CUSTOMER VIEW */
    .customer-selector-row{display:flex;align-items:center;gap:12px;background:var(--dark3);border:1px solid var(--border);border-radius:8px;padding:10px 14px}
    .customer-select-label{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
    .customer-dropdown{flex:1;background:var(--dark2);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:13px;font-weight:700;color:var(--white);font-family:var(--font);cursor:pointer;outline:none;appearance:none;-webkit-appearance:none}
    .customer-meta{display:flex;align-items:center;gap:10px}
    .cm-item{font-size:10px;color:var(--muted)}
    .cm-item strong{color:rgba(255,255,255,.75)}
    .cm-badge{padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700}
    /* SECTION MINI-BARS — temp grid tiles */
    .tile-sections{width:100%;margin-top:5px;display:flex;flex-direction:column;gap:3px}
    .tile-sec-row{display:flex;align-items:center;gap:5px;width:100%}
    .tile-sec-letter{font-size:7px;font-weight:800;letter-spacing:.5px;color:rgba(255,255,255,.4);width:8px;text-align:center;flex-shrink:0}
    .tile-sec-track{flex:1;height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;min-width:0}
    .tile-sec-fill{height:100%;border-radius:2px}
    .tile-sec-num{font-size:7px;font-weight:700;color:rgba(255,255,255,.45);width:18px;text-align:right;flex-shrink:0}

    /* SCORE BREAKDOWN PANEL — customer view */
    .score-breakdown{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
    .sbd-section{background:var(--dark3);border:1px solid var(--border);border-radius:8px;overflow:hidden}
    .sbd-sec-header{display:flex;align-items:center;gap:10px;padding:10px 14px 8px;border-bottom:1px solid var(--border)}
    .sbd-sec-name{font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;flex:1}
    .sbd-sec-weight{font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.5);flex-shrink:0}
    .sbd-sec-score{font-size:12px;font-weight:800;flex-shrink:0;min-width:52px;text-align:right}
    .sbd-sec-bar-wrap{flex:1;height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;max-width:80px}
    .sbd-sec-bar{height:100%;border-radius:2px;transition:width .4s}
    .sbd-kpi-list{padding:8px 14px 10px}
    .sbd-kpi-row{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04)}
    .sbd-kpi-row:last-child{border-bottom:none}
    .sbd-kpi-label{font-size:10px;color:var(--muted);flex:1}
    .sbd-kpi-val{font-size:10px;font-weight:600;color:rgba(255,255,255,.6);min-width:44px;text-align:right;flex-shrink:0}
    .sbd-kpi-bar-wrap{width:80px;height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;flex-shrink:0}
    .sbd-kpi-bar{height:100%;border-radius:2px}
    .sbd-kpi-score{font-size:10px;font-weight:700;min-width:28px;text-align:right;flex-shrink:0}
    .sbd-pending{font-size:9px;color:var(--muted);padding:10px 14px;font-style:italic}
    .sbd-pending-kpis{padding:4px 14px 10px;display:flex;flex-wrap:wrap;gap:4px}
    .sbd-pending-tag{font-size:8px;padding:2px 7px;border-radius:10px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.3)}

    .cv-kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}

    /* TREND TABLE */
    .trend-wrap{background:var(--dark3);border:1px solid var(--border);border-radius:8px;overflow:hidden}
    .trend-table{width:100%;border-collapse:collapse;font-size:11px}
    .trend-table thead th{padding:9px 14px;text-align:left;font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);background:var(--dark2);border-bottom:1px solid var(--border)}
    .trend-table tbody td{padding:9px 14px;border-bottom:1px solid var(--border);color:rgba(255,255,255,.75)}
    .trend-table tbody tr:last-child td{border-bottom:none}
    .trend-table tbody tr.current td{background:rgba(255,215,50,.05);color:var(--white);font-weight:600}
    .trend-table tbody tr.current td:first-child{color:var(--yellow)}
    .arr-up{color:var(--green)}
    .arr-down{color:var(--red)}

    /* RIGHT PANEL */
    .right-panel{grid-row:3;background:var(--dark2);border-left:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}
    .rp-section{padding:14px;border-bottom:1px solid var(--border)}
    .rp-section:last-child{border-bottom:none}

    /* WARRANTY EXPIRY TOOL — left sidebar */
    .sb-tools-section{padding-bottom:14px}
    .wex-row{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04);cursor:default}
    .wex-row:last-child{border-bottom:none}
    .wex-days{min-width:26px;text-align:center;font-size:9px;font-weight:800;padding:2px 4px;border-radius:4px;background:rgba(216,67,21,.18);color:#FF7043;flex-shrink:0}
    .wex-days.wex-urgent{background:rgba(211,47,47,.22);color:#EF5350}
    .wex-days.wex-ok{background:rgba(46,125,50,.18);color:#66BB6A}
    .wex-info{flex:1;min-width:0}
    .wex-serial{font-size:10px;font-weight:700;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .wex-company{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .wex-badge{font-size:8px;font-weight:700;padding:1px 4px;border-radius:3px;flex-shrink:0;letter-spacing:.4px}
    .wex-badge.msa{background:rgba(41,182,246,.15);color:#29B6F6}
    .wex-badge.lease{background:rgba(171,71,188,.15);color:#AB47BC}
    .wex-badge.regular{background:rgba(255,255,255,.07);color:var(--muted)}
    .wex-empty{font-size:10px;color:var(--muted);padding:4px 0}
    .wex-loading{font-size:10px;color:var(--muted);padding:4px 0;font-style:italic}
    .wex-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
    .wex-count{font-size:9px;font-weight:700;color:var(--orange);background:rgba(232,122,48,.12);padding:1px 5px;border-radius:4px}

    /* SIDEBAR TOOL LINKS */
    .sb-tool-link{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:6px;cursor:pointer;transition:background .15s;margin-bottom:4px}
    .sb-tool-link:hover{background:rgba(255,255,255,.06)}
    .sb-tool-icon{font-size:15px;width:24px;text-align:center;flex-shrink:0}
    .sb-tool-info{min-width:0}
    .sb-tool-name{font-size:11px;font-weight:700;color:rgba(255,255,255,.85)}
    .sb-tool-desc{font-size:9px;color:var(--muted);margin-top:1px}
    /* SIDEBAR WARRANTY BADGE */
    .sb-wex-link{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:6px;cursor:pointer;transition:background .15s}
    .sb-wex-link:hover{background:rgba(255,255,255,.06)}
    .sb-wex-icon{width:28px;height:28px;background:rgba(232,122,48,.15);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
    .sb-wex-info{flex:1;min-width:0}
    .sb-wex-name{font-size:11px;font-weight:600;color:rgba(255,255,255,.85)}
    .sb-wex-sub{font-size:9px;color:var(--muted);margin-top:1px}
    /* WARRANTY FULL VIEW (inside main, replaces tab panels) */
    #warranty-view{display:none;flex-direction:column;gap:0}
    #warranty-view.active{display:flex}
    .mobile-view{display:none;flex-direction:column;gap:0;flex:1;min-height:0}
    .mobile-view.active{display:flex}
    .mv-body{flex:1;overflow-y:auto;padding-top:14px}
    .mv-subtitle{font-weight:400;color:var(--muted);font-size:12px;margin-left:6px}
    .mv-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;color:var(--muted)}
    .mv-placeholder-icon{font-size:48px;color:rgba(255,215,50,.45);margin-bottom:14px;line-height:1}
    .mv-placeholder-title{font-size:16px;font-weight:700;color:var(--white);letter-spacing:.5px;margin-bottom:6px}
    .mv-placeholder-sub{font-size:12px;line-height:1.5;max-width:280px}
    .wv-header{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--border);flex-shrink:0}
    .wv-back{background:none;border:1px solid var(--border);color:rgba(255,255,255,.6);font-size:11px;font-weight:600;padding:5px 12px;border-radius:5px;cursor:pointer;transition:all .15s}
    .wv-back:hover{border-color:rgba(255,255,255,.3);color:var(--white)}
    .wv-title{flex:1;font-size:14px;font-weight:700;color:var(--white)}
    .wv-export{background:rgba(47,158,90,.15);border:1px solid rgba(47,158,90,.3);color:#4CAF50;font-size:10px;font-weight:700;padding:5px 12px;border-radius:5px;cursor:pointer;letter-spacing:.5px;transition:all .15s}
    .wv-export:hover{background:rgba(47,158,90,.25)}
    .wv-chips{display:flex;align-items:center;gap:7px;padding:14px 0 10px;flex-wrap:wrap;flex-shrink:0}
    .wv-chip{font-size:10px;font-weight:700;padding:4px 11px;border-radius:12px;cursor:pointer;border:1px solid var(--border);color:var(--muted);background:none;transition:all .15s;user-select:none}
    .wv-chip.active{border-color:rgba(255,255,255,.25);color:var(--white);background:rgba(255,255,255,.07)}
    .wv-chip.active.msa{border-color:rgba(41,182,246,.4);color:#29B6F6;background:rgba(41,182,246,.1)}
    .wv-chip.active.lease{border-color:rgba(171,71,188,.4);color:#AB47BC;background:rgba(171,71,188,.1)}
    .wv-count-lbl{font-size:10px;color:var(--muted);margin-left:auto}
    .wv-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:8px;flex:1;min-height:200px}
    .wv-table{width:100%;border-collapse:collapse;font-size:11px}
    .wv-table th{background:var(--dark3);color:var(--muted);font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:8px 12px;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:1}
    .wv-table td{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.04);color:rgba(255,255,255,.8);white-space:nowrap}
    .wv-table tr:last-child td{border-bottom:none}
    .wv-table tr:hover td{background:rgba(255,255,255,.03)}
    .wv-empty{text-align:center;padding:48px;color:var(--muted);font-size:12px}

    /* TOOL OVERLAY */
    .tool-overlay{position:fixed;inset:0;background:var(--dark);z-index:500;display:flex;flex-direction:column;overflow:hidden}
    .tool-overlay-header{display:flex;align-items:center;gap:12px;padding:0 20px;height:52px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--dark2)}
    .tool-back-btn{background:none;border:1px solid var(--border);color:rgba(255,255,255,.6);font-size:11px;font-weight:600;padding:5px 12px;border-radius:5px;cursor:pointer;transition:all .15s}
    .tool-back-btn:hover{border-color:rgba(255,255,255,.3);color:var(--white)}
    .tool-overlay-title{flex:1;font-size:13px;font-weight:700;color:var(--white);letter-spacing:.3px}
    .tool-export-btn{background:rgba(47,158,90,.15);border:1px solid rgba(47,158,90,.3);color:#4CAF50;font-size:10px;font-weight:700;padding:5px 12px;border-radius:5px;cursor:pointer;letter-spacing:.5px;transition:all .15s}
    .tool-export-btn:hover{background:rgba(47,158,90,.25)}
    .tool-view{flex:1;overflow:hidden;display:flex;flex-direction:column}
    .tool-body{display:flex;gap:0;height:100%;overflow:hidden}
    .tool-left{width:260px;flex-shrink:0;padding:20px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:10px;overflow-y:auto}
    .tool-right{flex:1;padding:20px;overflow:auto;display:flex;flex-direction:column;gap:12px}
    .tool-section-label{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
    .tool-textarea{flex:1;min-height:180px;background:var(--dark3);border:1px solid var(--border);border-radius:6px;color:rgba(255,255,255,.85);font-size:11px;font-family:monospace;padding:10px 12px;resize:none;outline:none;transition:border .15s;line-height:1.6}
    .tool-textarea:focus{border-color:rgba(255,255,255,.25)}
    .tool-input-meta{font-size:9px;color:var(--muted)}
    .tool-run-btn{background:var(--accent);border:none;color:var(--white);font-size:11px;font-weight:700;padding:9px 16px;border-radius:6px;cursor:pointer;letter-spacing:.5px;transition:opacity .15s}
    .tool-run-btn:hover{opacity:.85}
    .tool-run-btn:disabled{opacity:.4;cursor:not-allowed}
    .tool-status{font-size:10px;color:var(--muted);min-height:16px}
    .tool-results-summary{display:flex;gap:10px;flex-wrap:wrap}
    .trs-chip{font-size:10px;font-weight:700;padding:3px 9px;border-radius:4px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.7)}
    .trs-chip.ok{background:rgba(47,158,90,.15);color:#4CAF50}
    .trs-chip.warn{background:rgba(232,122,48,.12);color:var(--orange)}
    .trs-chip.bad{background:rgba(211,47,47,.15);color:#EF5350}
    .tool-table-wrap{overflow:auto;flex:1;border:1px solid var(--border);border-radius:6px}
    .tool-table{width:100%;border-collapse:collapse;font-size:11px}
    .tool-table th{background:var(--dark3);color:var(--muted);font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:8px 12px;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0}
    .tool-table td{padding:7px 12px;border-bottom:1px solid rgba(255,255,255,.04);color:rgba(255,255,255,.8);white-space:nowrap}
    .tool-table tr:last-child td{border-bottom:none}
    .tool-table tr:hover td{background:rgba(255,255,255,.03)}
    .tt-status{font-size:9px;font-weight:700;padding:2px 6px;border-radius:3px}
    .tt-status.yes{background:rgba(47,158,90,.15);color:#4CAF50}
    .tt-status.no{background:rgba(211,47,47,.12);color:#EF5350}
    .tt-status.inactive{background:rgba(232,122,48,.12);color:var(--orange)}
    .tt-status.unknown{background:rgba(255,255,255,.07);color:var(--muted)}
    .tt-type{font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px}
    .tt-type.msa{background:rgba(41,182,246,.12);color:#29B6F6}
    .tt-type.lease{background:rgba(171,71,188,.12);color:#AB47BC}
    .tt-type.regular{background:rgba(255,255,255,.06);color:var(--muted)}
    .tt-type.deactivated{background:rgba(255,255,255,.04);color:var(--muted)}
    .tt-type.unknown{background:rgba(255,255,255,.04);color:var(--muted)}
    /* ── Warranty Checker — monitor-style input ──────────────────────────── */
    .wc-layout{display:flex;flex-direction:column;gap:24px;padding:24px 28px;height:100%;overflow-y:auto;box-sizing:border-box;background:var(--dark)}
    .wc-monitor-wrap{display:flex;flex-direction:column;align-items:center;gap:0}
    .wc-monitor{width:100%;max-width:680px;background:var(--dark3);border:2px solid rgba(255,215,50,.18);border-radius:14px;box-shadow:0 0 48px rgba(255,215,50,.05),0 0 0 1px rgba(255,255,255,.03) inset;overflow:hidden}
    .wc-monitor-bar{background:var(--dark2);padding:8px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
    .wc-monitor-dots{display:flex;gap:5px}
    .wc-monitor-dot{width:8px;height:8px;border-radius:50%}
    .wc-monitor-dot.r{background:#ff5f57}.wc-monitor-dot.y{background:#febc2e}.wc-monitor-dot.g{background:#28c840}
    .wc-monitor-brand{flex:1;text-align:center;font-size:9px;font-weight:700;letter-spacing:2.5px;color:rgba(255,215,50,.45);text-transform:uppercase}
    .wc-screen{padding:20px 22px;background:var(--dark)}
    .wc-serial-lbl{font-size:8px;font-weight:700;letter-spacing:2px;color:rgba(255,215,50,.55);text-transform:uppercase;margin-bottom:8px}
    #wc-serials{width:100%;min-height:130px;background:var(--dark2);border:1px solid var(--border);border-radius:7px;color:rgba(255,255,255,.85);font-size:13px;font-family:'Courier New',monospace;padding:12px 14px;resize:vertical;outline:none;transition:border .15s,box-shadow .15s;line-height:1.85;caret-color:var(--yellow);box-sizing:border-box}
    #wc-serials::placeholder{color:rgba(255,255,255,.38)}
    #wc-serials:focus{border-color:rgba(255,215,50,.35);box-shadow:0 0 14px rgba(255,215,50,.05) inset}
    .wc-screen-footer{display:flex;align-items:center;gap:12px;margin-top:14px}
    .wc-count-lbl{font-size:10px;color:rgba(255,255,255,.35);font-family:monospace;flex:1}
    .wc-run-btn{background:var(--yellow);border:none;color:#111;font-size:11px;font-weight:700;padding:9px 22px;border-radius:6px;cursor:pointer;letter-spacing:.5px;transition:opacity .15s;white-space:nowrap}
    .wc-run-btn:hover{opacity:.85}.wc-run-btn:disabled{opacity:.35;cursor:not-allowed}
    .wc-monitor-stand-neck{width:54px;height:14px;background:linear-gradient(180deg,rgba(255,215,50,.08),transparent);border-left:1px solid rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.04);margin:0 auto}
    .wc-monitor-stand-foot{width:110px;height:5px;background:rgba(255,255,255,.05);border-radius:0 0 5px 5px;margin:0 auto}
    /* results panel */
    .wc-results-panel{display:none;flex-direction:column;gap:12px}
    .wc-results-panel.visible{display:flex}
    .wc-results-hdr{display:flex;align-items:center;gap:10px}
    .wc-results-title{font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;flex:1}
    .wc-export-row{display:flex;gap:8px}
    .wc-exp-btn{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:5px 13px;border-radius:5px;cursor:pointer;border:none;letter-spacing:.4px;transition:opacity .15s}
    .wc-exp-btn:hover{opacity:.8}
    .wc-exp-btn.xlsx{background:rgba(33,115,70,.2);color:#4CAF50;border:1px solid rgba(33,115,70,.35)}
    .wc-exp-btn.pdf{background:rgba(211,47,47,.15);color:#EF5350;border:1px solid rgba(211,47,47,.3)}
    .wc-status{font-size:10px;padding:6px 0;min-height:18px}
    .wc-status.ok{color:#4CAF50}.wc-status.error{color:#EF5350}.wc-status.info{color:var(--muted)}
    /* Tool placeholder layout (used by coming-soon tools) */
    .tool-ph-layout{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;text-align:center;padding:40px;color:var(--muted)}
    .tool-ph-icon{font-size:44px;opacity:.35}
    .tool-ph-title{font-size:18px;font-weight:700;color:var(--white);letter-spacing:.2px}
    .tool-ph-desc{font-size:13px;max-width:340px;line-height:1.7;color:var(--muted)}
    .tool-ph-badge{margin-top:4px;display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:rgba(255,215,50,.08);color:rgba(255,215,50,.6);border:1px solid rgba(255,215,50,.15)}
    .ip-layout{display:flex;flex-direction:column;gap:22px;padding:24px 28px;height:100%;overflow-y:auto;box-sizing:border-box;background:var(--dark)}
    .ip-hero{max-width:860px;padding:18px 20px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:linear-gradient(135deg,rgba(224,58,16,.16),rgba(45,65,135,.14));box-shadow:0 18px 40px rgba(0,0,0,.16)}
    .ip-eyebrow{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,215,50,.82);margin-bottom:8px}
    .ip-title{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--white)}
    .ip-desc{margin-top:8px;max-width:720px;font-size:12px;line-height:1.6;color:rgba(255,255,255,.72)}
    .ip-upload-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:18px;align-items:stretch}
    .ip-upload-card{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.03)}
    .ip-upload-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
    .ip-upload-label{font-size:9px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}
    .ip-upload-title{margin-top:5px;font-size:16px;font-weight:700;color:var(--white)}
    .ip-upload-badge{padding:4px 8px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;white-space:nowrap}
    .ip-upload-badge.internal{background:rgba(255,215,50,.12);border:1px solid rgba(255,215,50,.25);color:var(--yellow)}
    .ip-upload-badge.external{background:rgba(41,182,246,.12);border:1px solid rgba(41,182,246,.24);color:#29B6F6}
    .ip-upload-copy{font-size:11px;line-height:1.6;color:rgba(255,255,255,.66)}
    .ip-upload-zone{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px;border:1px dashed rgba(255,255,255,.14);border-radius:10px;background:rgba(0,0,0,.18)}
    .ip-upload-zone input[type="file"]{display:none}
    .ip-upload-btn{background:var(--yellow);border:none;color:#111;font-size:11px;font-weight:700;padding:9px 16px;border-radius:6px;cursor:pointer;letter-spacing:.5px;transition:opacity .15s}
    .ip-upload-btn:hover{opacity:.86}
    .ip-upload-hint{font-size:10px;color:var(--muted)}
    .ip-file-meta{min-height:34px;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);font-size:11px;line-height:1.5;color:rgba(255,255,255,.72)}
    .ip-file-meta.empty{display:flex;align-items:center;color:var(--muted)}
    .ip-file-name{font-weight:700;color:var(--white);word-break:break-word}
    .ip-file-sub{margin-top:2px;color:var(--muted)}
    .ip-status-line{font-size:11px;color:rgba(255,255,255,.58)}
    @media (max-width: 900px){
      .ip-upload-grid{grid-template-columns:1fr}
      .ip-layout{padding:20px}
    }
    .rp-label{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
    .rp-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
    .temp-list-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)}
    .temp-list-row:last-child{border-bottom:none}
    .tlr-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
    .tlr-name{flex:1;font-size:11px;font-weight:600;color:rgba(255,255,255,.8)}
    .tlr-adm{font-size:9px;color:var(--muted)}
    .tlr-score{font-size:14px;font-weight:800;width:28px;text-align:right}
    .section-sub-label{font-size:9px;color:var(--muted);letter-spacing:.5px;margin:6px 0 4px}
    .briefing-meta{font-size:10px;color:var(--muted);margin-bottom:8px}
    .briefing-item{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:10px;color:rgba(255,255,255,.7);line-height:1.4}
    .briefing-item:last-child{border-bottom:none}
    .briefing-num{width:16px;height:16px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:var(--white);flex-shrink:0;margin-top:1px}
    .deliverable-btn{display:flex;align-items:center;gap:8px;padding:7px 10px;margin-bottom:5px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:6px;font-size:10px;color:rgba(255,255,255,.7);cursor:pointer;transition:border-color .12s}
    .deliverable-btn:hover{border-color:#444;color:var(--white)}
    .deliverable-btn:last-child{margin-bottom:0}

    /* AGENT */
    .agent-fab{position:fixed;bottom:24px;right:24px;width:44px;height:44px;background:var(--yellow);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--dark);cursor:pointer;z-index:100;box-shadow:0 4px 16px rgba(255,215,50,.4);transition:transform .15s}
    .agent-fab:hover{transform:scale(1.08)}
    .agent-drawer{position:fixed;bottom:80px;right:24px;width:320px;background:var(--dark2);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.6);z-index:99;display:none;flex-direction:column;overflow:hidden}
    .agent-drawer.open{display:flex}
    .agent-header{padding:12px 14px;background:var(--dark);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
    .agent-a{width:26px;height:26px;background:var(--yellow);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--dark)}
    .agent-title{font-size:12px;font-weight:700;color:var(--white)}
    .agent-conn{font-size:9px;color:var(--muted)}
    .agent-close{margin-left:auto;cursor:pointer;color:var(--muted)}
    .agent-close:hover{color:var(--white)}
    .agent-messages{padding:12px 12px 6px;display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto}
    .msg{padding:7px 10px;border-radius:8px;font-size:11px;line-height:1.5;max-width:88%}
    .msg-ai{background:var(--dark3);border:1px solid var(--border);color:rgba(255,255,255,.8);align-self:flex-start}
    .msg-user{background:var(--navy);color:var(--white);align-self:flex-end}
    .msg-ai strong{color:var(--yellow)}
    /* AI typing indicator */
    .ai-typing{display:flex;align-items:center;gap:5px;padding:10px 14px}
    .ai-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:ai-bounce .9s infinite ease-in-out}
    .ai-dot:nth-child(2){animation-delay:.15s}
    .ai-dot:nth-child(3){animation-delay:.3s}
    @keyframes ai-bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
    /* AI response formatting */
    .ai-highlight{background:rgba(255,215,50,.12);color:var(--yellow);border-radius:3px;padding:1px 4px;font-weight:700}
    .ai-stage{font-size:10px;font-weight:600}
    .msg-ai em{color:var(--muted);font-style:italic}
    .msg-ai .ai-bullet{padding-left:10px;margin:1px 0;position:relative}
    .msg-ai .ai-bullet::before{content:"•";position:absolute;left:0;color:var(--yellow)}
    .agent-conn{font-size:9px;transition:color .3s}
    .agent-input-row{padding:8px 12px 12px;display:flex;gap:8px;border-top:1px solid var(--border)}
    .agent-input{flex:1;background:var(--dark3);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:11px;color:var(--white);font-family:var(--font);outline:none}
    .agent-input::placeholder{color:var(--muted)}
    .agent-send{width:30px;height:30px;background:var(--yellow);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:var(--dark);border:none;flex-shrink:0}
    /* ── Log Viewer tab ────────────────────────────────────── */
    .log-toolbar{display:flex;align-items:center;gap:10px;padding:14px 0 10px;flex-wrap:wrap}
    .log-toolbar select,.log-toolbar input{background:var(--dark3);border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:11px;color:var(--white);font-family:var(--font);outline:none}
    .log-toolbar select:focus,.log-toolbar input:focus{border-color:var(--yellow)}
    .log-stats{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
    .log-stat-chip{padding:4px 12px;border-radius:20px;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
    .log-stat-chip.WARNING{background:rgba(232,122,48,.15);color:#E87A30}
    .log-stat-chip.ERROR{background:rgba(217,64,64,.15);color:#D94040}
    .log-stat-chip.CRITICAL{background:rgba(217,64,64,.25);color:#ff6b6b}
    .log-stat-chip.CLIENT_ERROR{background:rgba(139,92,246,.15);color:#8b5cf6}
    .log-stat-chip.ok{background:rgba(47,158,90,.15);color:#2F9E5A}
    .log-table{width:100%;border-collapse:collapse;font-size:11px}
    .log-table th{text-align:left;padding:6px 10px;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap}
    .log-table td{padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:top;font-family:monospace;font-size:10px;line-height:1.4}
    .log-table tr:hover td{background:rgba(255,255,255,.03)}
    .log-table .log-ts{color:var(--muted);white-space:nowrap;width:140px}
    .log-table .log-level{width:75px}
    .log-table .log-logger{width:180px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
    .log-table .log-msg{color:var(--white)}
    .log-table .log-corr{width:80px;color:var(--muted);font-size:9px}
    .badge-W{color:#E87A30;font-weight:700}.badge-E{color:#D94040;font-weight:700}.badge-C{color:#ff6b6b;font-weight:700}.badge-I{color:#2F9E5A}.badge-B{color:#8b5cf6;font-weight:700}
    .log-exc{color:rgba(217,64,64,.7);font-size:9px;margin-top:2px;white-space:pre-wrap;max-height:80px;overflow:auto}
    .log-section-label{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--yellow);padding:14px 0 6px}

    /* ── Fleet Inventory Panel ──────────────────────────────────────────────── */
    .fleet-panel{background:var(--dark3);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:12px}
    .fleet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
    .fleet-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
    .fleet-stat{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:6px;padding:8px 10px;text-align:center}
    .fleet-stat-num{font-size:18px;font-weight:800;line-height:1.1}
    .fleet-stat-label{font-size:8px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:3px}
    .fleet-stat-sub{font-size:8px;color:rgba(255,255,255,.22);margin-top:2px}
    .fleet-stat.is-alert .fleet-stat-num{color:var(--orange)}
    .fleet-stat.is-critical .fleet-stat-num{color:var(--red)}
    .fleet-manage-btn{font-size:9px;font-weight:700;letter-spacing:.5px;padding:5px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.15);background:transparent;color:rgba(255,255,255,.45);cursor:pointer;text-transform:uppercase;transition:all .2s}
    .fleet-manage-btn:hover{border-color:var(--blue);color:var(--blue);background:rgba(45,65,135,.15)}

    /* ── Ghost Sites Manager Modal ──────────────────────────────────────────── */
    /* ── Bulk-Assign Modal ─────────────────────────────────────────────── */
    .assign-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:1100;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
    .assign-modal{background:var(--dark2);border:1px solid var(--border);border-radius:12px;width:min(900px,96vw);max-height:86vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.8)}
    .assign-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
    .assign-modal-title{font-size:14px;font-weight:700;letter-spacing:.2px}
    .assign-modal-sub{font-size:10px;color:var(--muted);margin-top:2px}
    .assign-modal-close{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:color .15s}
    .assign-modal-close:hover{color:var(--text)}
    .assign-platform-bar{display:flex;align-items:center;gap:8px;padding:10px 20px;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
    .assign-plat-badge{padding:3px 10px;border-radius:12px;font-size:10px;font-weight:600;letter-spacing:.4px;cursor:pointer;border:1px solid transparent;transition:all .15s}
    .assign-plat-badge.active{border-color:var(--navy-light,#3A5FD9)}
    .assign-filter-row{display:flex;align-items:center;gap:8px;padding:10px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
    .assign-search{flex:1;padding:4px 10px;background:var(--dark3);border:1px solid var(--border);border-radius:4px;font-size:11px;color:var(--text);font-family:var(--font);outline:none}
    .assign-search::placeholder{color:var(--muted)}
    .assign-search:focus{border-color:#444}
    .assign-table-wrap{flex:1;overflow-y:auto;position:relative}
    .assign-table{width:100%;border-collapse:collapse;font-size:11px}
    .assign-table th{position:sticky;top:0;background:var(--dark3);padding:7px 14px;text-align:left;font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap}
    .assign-table th:first-child{width:32px;text-align:center}
    .assign-table td{padding:7px 14px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
    .assign-table td:first-child{text-align:center}
    .assign-table tr:hover td{background:rgba(255,255,255,.03)}
    .assign-table tr.selected td{background:rgba(45,65,135,.18)}
    .assign-plat-pill{display:inline-block;padding:1px 7px;border-radius:10px;font-size:9px;font-weight:600;letter-spacing:.4px;white-space:nowrap}
    .assign-adm-chip{display:inline-block;padding:1px 7px;border-radius:3px;font-size:9px;font-weight:600;letter-spacing:.3px}
    .assign-empty{padding:40px;text-align:center;color:var(--muted);font-size:12px}
    .assign-pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-top:1px solid var(--border);flex-shrink:0}
    .assign-page-btn{background:var(--dark3);border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:10px;padding:3px 9px;cursor:pointer}
    .assign-page-btn:hover{border-color:#555}
    .assign-page-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}
    .assign-page-btn:disabled{opacity:.35;cursor:default}
    .assign-footer{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--border);flex-shrink:0;background:var(--dark3)}
    .assign-sel-count{font-size:11px;color:var(--muted);white-space:nowrap;min-width:80px}
    .assign-sel-count b{color:var(--text)}
    .assign-btn{padding:5px 16px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;border:1px solid transparent;font-family:var(--font)}
    .assign-btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
    .assign-btn-primary:hover{background:#3A5FD9}
    .assign-btn-primary:disabled{opacity:.4;cursor:default}
    .assign-btn-ghost{background:transparent;color:var(--muted);border-color:var(--border)}
    .assign-btn-ghost:hover{color:var(--text);border-color:#555}
    /* Filter bar bulk-assign trigger button */
    #bulk-assign-btn{padding:3px 11px;background:rgba(45,65,135,.25);border:1px solid rgba(45,65,135,.5);border-radius:4px;font-size:11px;font-weight:600;color:rgba(160,180,255,.9);cursor:pointer;font-family:var(--font);transition:all .15s;white-space:nowrap}
    #bulk-assign-btn:hover{background:rgba(45,65,135,.45);color:#fff}
    /* ── end Bulk-Assign Modal ─────────────────────────────────────────── */

    .ghost-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
    .ghost-modal{background:var(--dark2);border:1px solid var(--border);border-radius:12px;width:640px;max-width:94vw;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
    .ghost-modal-head{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border)}
    .ghost-modal-title{font-size:13px;font-weight:700;margin-bottom:3px}
    .ghost-modal-sub{font-size:10px;color:var(--muted)}
    .ghost-modal-close{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;line-height:1;padding:2px 4px;margin-top:-2px;transition:color .15s}
    .ghost-modal-close:hover{color:var(--text)}
    .ghost-toolbar{display:flex;align-items:center;gap:8px;padding:10px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap}
    .ghost-sel-btn{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all .15s}
    .ghost-sel-btn:hover{border-color:rgba(255,255,255,.3);color:var(--text)}
    .ghost-del-btn{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 12px;border-radius:20px;border:1px solid rgba(220,50,50,.4);background:rgba(220,50,50,.1);color:var(--red);cursor:pointer;transition:all .2s;margin-left:auto}
    .ghost-del-btn:hover:not(:disabled){background:rgba(220,50,50,.22);border-color:var(--red)}
    .ghost-del-btn:disabled{opacity:.3;cursor:not-allowed}
    .ghost-count-label{font-size:9px;color:var(--muted)}
    .ghost-modal-body{flex:1;overflow-y:auto}
    .ghost-row{display:flex;align-items:center;gap:10px;padding:8px 20px;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background .12s}
    .ghost-row:last-child{border-bottom:none}
    .ghost-row:hover{background:rgba(255,255,255,.03)}
    .ghost-row.is-selected{background:rgba(45,65,135,.13)}
    .ghost-row input[type=checkbox]{accent-color:var(--blue);width:13px;height:13px;flex-shrink:0;cursor:pointer}
    .ghost-row-name{font-size:11px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .ghost-row-id{font-size:9px;color:var(--muted);flex-shrink:0;font-family:monospace}
    .ghost-row-type{font-size:9px;color:var(--muted);flex-shrink:0;min-width:55px;text-align:right}
    .ghost-empty{padding:32px 20px;text-align:center;color:var(--muted);font-size:11px}
    .ghost-loading{padding:24px 20px;text-align:center;color:var(--muted);font-size:10px}
    .ghost-status{padding:10px 20px;font-size:10px;border-top:1px solid var(--border);min-height:36px;display:flex;align-items:center;gap:6px}
    .ghost-status-ok{color:var(--green)}.ghost-status-warn{color:var(--orange)}.ghost-status-err{color:var(--red)}

    /* ── Comm Failures Drill-Down Table ─────────────────────────────────────── */
    .cf-table{width:100%;border-collapse:collapse;font-size:11px}
    .cf-table thead tr{background:var(--dark3,#1a1a2e);position:sticky;top:0;z-index:1}
    .cf-table th{padding:8px 12px;text-align:left;color:var(--muted);font-weight:600;font-size:10px;border-bottom:1px solid var(--border)}
    .cf-table th:hover{color:var(--text)}
    .cf-table td{padding:7px 12px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
    .cf-table tbody tr:hover{background:rgba(255,255,255,.03)}

    /* ── PDOM Portfolio Overview Table — Customer View ─────────────────────── */
    .cv-mode-bar{display:flex;align-items:center;gap:8px;background:var(--dark3);border:1px solid var(--border);border-radius:8px;padding:8px 12px;flex-shrink:0}
    .cv-mode-lbl{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-right:4px;white-space:nowrap}
    .cv-mode-btn{font-size:10px;font-weight:600;padding:4px 12px;border-radius:5px;border:1px solid var(--border);background:none;color:var(--muted);cursor:pointer;transition:all .15s;font-family:var(--font)}
    .cv-mode-btn.active{background:var(--yellow);border-color:var(--yellow);color:var(--dark);font-weight:700}
    .cv-mode-btn:hover:not(.active){border-color:#444;color:var(--white)}
    #cv-overview{display:none;flex-direction:column;gap:10px}
    #cv-overview.active{display:flex}
    #cv-detail{display:none;flex-direction:column;gap:14px}
    #cv-detail.active{display:flex}
    .pdom-table-wrap{background:var(--dark3);border:1px solid var(--border);border-radius:8px;overflow:auto}
    .pdom-table{width:100%;border-collapse:collapse;font-size:11px}
    .pdom-table th{background:var(--dark2);color:var(--muted);font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:9px 12px;border-bottom:1px solid var(--border);white-space:nowrap;transition:color .12s}
    .pdom-table th.sortable{cursor:pointer;user-select:none}
    .pdom-table th.sortable:hover{color:var(--white)}
    .pdom-table th.sorted{color:var(--yellow)}
    .pdom-table .sort-arrow{margin-left:3px;opacity:.45;font-size:8px}
    .pdom-table th.sorted .sort-arrow{opacity:1;color:var(--yellow)}
    .pdom-table td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle;white-space:nowrap}
    .pdom-table tr:last-child td{border-bottom:none}
    .pdom-table tr.pdom-row:hover td{background:rgba(255,255,255,.03);cursor:pointer}
    .pdom-name{font-size:12px;font-weight:700;color:var(--white)}
    .pdom-adm{font-size:9px;color:var(--muted);margin-top:1px}
    .pdom-stage{font-size:9px;font-weight:700;padding:3px 8px;border-radius:12px;display:inline-block;letter-spacing:.3px}
    .pdom-temp{font-size:14px;font-weight:800}
    .pdom-fill{font-size:12px;font-weight:700;color:var(--white)}
    .pdom-fill-mom{font-size:9px;margin-left:4px;font-weight:600}
    .pdom-devices{font-size:11px;color:rgba(255,255,255,.7)}
    .pdom-metric{font-size:12px;font-weight:700}
    .pdom-back-row{display:flex;align-items:center;gap:8px;padding-bottom:2px}
    .pdom-back-btn{background:none;border:1px solid var(--border);color:rgba(255,255,255,.55);font-size:10px;font-weight:600;padding:4px 10px;border-radius:5px;cursor:pointer;transition:all .15s;font-family:var(--font)}
    .pdom-back-btn:hover{border-color:rgba(255,255,255,.3);color:var(--white)}

    /* ── KPI Column Selector Popover (PDOM table) ──────────────────────────── */
    .cv-col-btn{font-size:10px;font-weight:600;padding:4px 10px;border-radius:5px;border:1px solid var(--border);background:none;color:var(--muted);cursor:pointer;transition:all .15s;font-family:var(--font);white-space:nowrap;margin-left:auto;display:flex;align-items:center;gap:5px}
    .cv-col-btn:hover,.cv-col-btn.open{border-color:rgba(255,255,255,.3);color:var(--white)}
    .cv-col-count{background:rgba(255,215,50,.15);color:var(--yellow);border-radius:3px;padding:0 4px;font-size:9px;font-weight:700;min-width:16px;text-align:center;line-height:16px}
    .cv-col-popover{position:absolute;top:calc(100% + 6px);right:0;background:var(--dark3);border:1px solid var(--border);border-radius:8px;padding:12px 14px;z-index:200;width:272px;box-shadow:0 8px 32px rgba(0,0,0,.6);display:none;max-height:70vh;overflow-y:auto}
    .cv-col-popover.open{display:block}
    .cv-col-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
    .cv-col-header-title{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.5)}
    .cv-col-header-count{font-size:9px;color:var(--yellow);font-weight:600}
    .cv-col-lifecycle{font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:10px 0 5px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:6px}
    .cv-col-lifecycle:first-child{margin-top:0}
    .cv-lc-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
    .cv-lc-dot.plan{background:#3A7FD5}
    .cv-lc-dot.deploy{background:#E87A30}
    .cv-lc-dot.operate{background:#2F9E5A}
    .cv-lc-dot.maintain{background:#9B6DFF}
    .cv-col-row{display:flex;align-items:flex-start;gap:8px;padding:4px 0;cursor:pointer;user-select:none}
    .cv-col-row:hover .cv-col-label{color:var(--white)}
    .cv-col-row.locked{cursor:default;opacity:.45}
    .cv-col-check{width:14px;height:14px;border:1.5px solid #444;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;transition:all .1s;margin-top:2px}
    .cv-col-row.checked .cv-col-check{background:var(--yellow);border-color:var(--yellow);color:var(--dark);font-weight:800}
    .cv-col-row.locked .cv-col-check{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
    .cv-col-label{font-size:11px;color:rgba(255,255,255,.7);flex:1;line-height:1.3}
    .cv-col-desc{font-size:8px;color:var(--muted);margin-top:1px;line-height:1.35}
    .cv-col-src{font-size:7.5px;font-weight:600;padding:1px 4px;border-radius:3px;margin-top:2px;display:inline-block}
    .cv-col-src.live{background:rgba(47,158,90,.15);color:#2F9E5A}
    .cv-col-src.databricks{background:rgba(255,100,20,.1);color:#E87A30}
    .cv-col-src.dataviews{background:rgba(58,127,213,.12);color:#3A7FD5}
    .cv-col-src.crm{background:rgba(155,109,255,.12);color:#9B6DFF}
    .cv-col-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06);position:sticky;bottom:0;background:var(--dark3);padding-bottom:2px}
    .cv-col-save{background:var(--yellow);border:none;border-radius:4px;padding:5px 14px;font-size:10px;font-weight:700;color:var(--dark);cursor:pointer;font-family:var(--font)}
    .cv-col-reset{background:none;border:1px solid var(--border);border-radius:4px;padding:5px 10px;font-size:10px;color:var(--muted);cursor:pointer;font-family:var(--font);transition:all .15s}
    .cv-col-reset:hover{color:var(--white);border-color:#555}
    .cv-tenant-badge{font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;background:rgba(58,127,213,.15);color:var(--blue);margin-left:4px;vertical-align:middle}

    /* ── Settings modal tabs ───────────────────────────────────────────────── */
    .stab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);margin:0 -16px 12px;padding:0 16px}
    .stab{font-size:10px;font-weight:600;padding:6px 12px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;transition:all .12s;white-space:nowrap}
    .stab:hover{color:var(--white)}
    .stab.active{color:var(--white);border-bottom-color:var(--yellow)}
    .stab-panel{display:none}.stab-panel.active{display:block}

    /* ── Report Builder Overlay ─────────────────────────────────────────────── */
    .rb-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:20px}
    .rb-modal{background:var(--dark2);border:1px solid var(--border);border-radius:12px;width:100%;max-width:660px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.7)}
    .rb-head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
    .rb-head-title{font-size:13px;font-weight:700;color:var(--white);letter-spacing:.3px}
    .rb-head-title span{color:var(--yellow);letter-spacing:2px}
    .rb-close{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1;transition:color .12s;font-family:var(--font)}
    .rb-close:hover{color:var(--white)}
    .rb-body{overflow-y:auto;padding:16px 20px;flex:1}
    .rb-foot{padding:12px 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-shrink:0}
    .rb-field-label{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:14px 0 7px}
    .rb-field-label:first-child{margin-top:0}
    .rb-field textarea{width:100%;background:var(--dark3);border:1px solid var(--border);border-radius:6px;padding:9px 12px;font-size:11px;color:var(--white);font-family:var(--font);resize:vertical;min-height:68px;outline:none;transition:border-color .15s}
    .rb-field textarea:focus{border-color:#444}
    .rb-field textarea::placeholder{color:var(--muted)}
    .rb-templates{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
    .rb-tpl{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:7px;padding:9px 12px;cursor:pointer;transition:all .15s}
    .rb-tpl:hover{border-color:rgba(255,215,50,.35);background:rgba(255,215,50,.05)}
    .rb-tpl.active{border-color:rgba(255,215,50,.6);background:rgba(255,215,50,.1)}
    .rb-tpl-name{font-size:11px;font-weight:700;color:var(--white);margin-bottom:3px}
    .rb-tpl-desc{font-size:9px;color:var(--muted);line-height:1.4}
    .rb-tpl.active .rb-tpl-name{color:var(--yellow)}
    .rb-sections{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
    .rb-sec-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all .12s;user-select:none}
    .rb-sec-item:hover{border-color:#444}
    .rb-sec-item.checked{border-color:rgba(255,215,50,.45);background:rgba(255,215,50,.07)}
    .rb-sec-check{width:14px;height:14px;border:1.5px solid var(--border);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:transparent;transition:all .12s}
    .rb-sec-item.checked .rb-sec-check{background:var(--yellow);border-color:var(--yellow);color:#111}
    .rb-sec-text{font-size:10px;font-weight:600;color:rgba(255,255,255,.65)}
    .rb-sec-item.checked .rb-sec-text{color:var(--white)}
    .rb-cust-select{width:100%;background:var(--dark3);border:1px solid var(--border);border-radius:6px;padding:9px 12px;font-size:12px;color:var(--white);font-family:var(--font);outline:none;cursor:pointer;transition:border-color .15s}
    .rb-cust-select:focus{border-color:#444}
    .btn-rb-gen{flex:1;padding:10px 22px;background:var(--yellow);border:none;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#111;cursor:pointer;transition:opacity .15s;font-family:var(--font)}
    .btn-rb-gen:hover{opacity:.88}
    .btn-rb-cancel{padding:10px 18px;background:transparent;border:1px solid var(--border);border-radius:6px;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;font-family:var(--font)}
    .btn-rb-cancel:hover{color:var(--white);border-color:#555}
    .rb-custom-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;margin-top:8px;background:rgba(255,215,50,.06);border:1px dashed rgba(255,215,50,.28);border-radius:6px;font-size:10px;font-weight:700;color:var(--yellow);cursor:pointer;letter-spacing:.5px;transition:all .15s}


/* ═══════════════════════════════════════════════════════════════
   PWA + MOBILE — Responsive layer
   Desktop ≥ 1024px | Tablet 768–1023px | Mobile < 768px
   All rules here override the desktop-first styles above.
═══════════════════════════════════════════════════════════════ */

/* ── Nav-more button (hidden on desktop) ────────────────────── */
.nav-more-btn,
.nav-more-filter-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 32px; height: 32px;
  background: none; border: none;
  cursor: pointer; padding: 4px; border-radius: 6px;
  flex-shrink: 0;
  transition: background .15s;
}
.nav-more-btn span,
.nav-more-filter-btn span {
  display: block; width: 16px; height: 2px;
  background: var(--muted); border-radius: 2px;
  transition: background .15s, transform .2s;
}
.nav-more-btn:hover span,
.nav-more-filter-btn:hover span,
.nav-more-btn--open span { background: var(--white); }
.nav-more-filter-btn.nav-more-btn--open span { background: var(--white); }
.nav-more-btn--open span:nth-child(1),
.nav-more-filter-btn.nav-more-btn--open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-more-btn--open span:nth-child(2),
.nav-more-filter-btn.nav-more-btn--open span:nth-child(2) { opacity: 0; }
.nav-more-btn--open span:nth-child(3),
.nav-more-filter-btn.nav-more-btn--open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Nav-more panel (mobile tab drawer) ─────────────────────── */
.nav-more-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 398;
}
.nav-more-overlay--open { display: block; }

.nav-more-panel {
  position: fixed;
  top: 52px; left: 0; right: 0;
  background: var(--dark2);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  z-index: 399;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-more-panel--open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav-more-inner {
  display: flex; flex-direction: column;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.nav-more-item {
  display: flex; align-items: center;
  padding: 15px 20px;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,.05);
  font-family: var(--font); font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.65);
  cursor: pointer; text-align: left;
  transition: background .12s, color .12s;
}
.nav-more-item:last-child { border-bottom: none; }
.nav-more-item:hover { background: rgba(255,255,255,.04); color: var(--white); }
.nav-more-item--active { color: var(--yellow); background: rgba(255,215,50,.06); font-weight: 600; }
.nav-more-item--active::before {
  content: ''; display: inline-block;
  width: 3px; height: 14px; border-radius: 2px;
  background: var(--yellow); margin-right: 10px; flex-shrink: 0;
}
.nav-more-sep {
  height: 1px; background: rgba(255,255,255,.08); margin: 4px 0;
}
.nav-more-section-label {
  padding: 8px 20px 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  color: rgba(255,255,255,.3); text-transform: uppercase;
}
.nav-more-badge {
  margin-left: auto;
  background: var(--orange); color: #000;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px;
}
.nav-more-account-header {
  padding: 10px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.nav-more-account-name {
  font-size: 13px; font-weight: 700; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-more-account-role {
  font-size: 10px; font-weight: 600; letter-spacing: 1px;
  color: rgba(255,255,255,.4); text-transform: uppercase; margin-top: 2px;
}
.nav-more-item--signout { color: var(--red); }
.nav-more-item--signout:hover { background: rgba(217,64,64,.08); color: var(--red); }

/* ── Hamburger button (hidden on desktop, shown on mobile) ──── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-right: 4px;
}
.nav-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--muted);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.15s;
}
.nav-hamburger:hover span { background: var(--white); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--white); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--white); }

/* ── Sidebar overlay backdrop ───────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 299;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sidebar-overlay.visible { display: block; }

/* ── PWA install banner ──────────────────────────────────────── */
.pwa-install-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--dark2);
  border-top: 2px solid var(--yellow);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 500;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.pwa-install-banner.visible { transform: translateY(0); }
.pwa-install-banner-icon { font-size: 20px; flex-shrink: 0; }
.pwa-install-banner-text { flex: 1; }
.pwa-install-banner-title { font-size: 12px; font-weight: 700; color: var(--white); }
.pwa-install-banner-sub   { font-size: 10px; color: var(--muted); margin-top: 1px; }
.pwa-install-btn {
  padding: 7px 16px;
  background: var(--yellow);
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--dark);
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
  flex-shrink: 0;
}
.pwa-dismiss-btn {
  padding: 6px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}

/* ── PWA update banner ───────────────────────────────────────── */
.pwa-update-banner {
  position: fixed;
  top: 64px; left: 50%;
  transform: translateX(-50%) translateY(-200px);
  opacity: 0;
  pointer-events: none;
  background: var(--dark3);
  border: 1px solid var(--yellow);
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 500;
  transition: transform 0.35s ease, opacity 0.35s ease;
  white-space: nowrap;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.pwa-update-banner.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.pwa-update-banner span  { font-size: 11px; color: rgba(255,255,255,0.8); }
.pwa-update-link {
  font-size: 11px;
  font-weight: 700;
  color: var(--yellow);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  padding: 0;
}

/* ── Bottom navigation bar (mobile only) ────────────────────── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  min-height: 64px;
  background: var(--dark2);
  border-top: 1px solid var(--border);
  z-index: 200;
  padding: 0 8px env(safe-area-inset-bottom);
  box-sizing: content-box;
}
.bottom-nav-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: 64px;
}
.bnav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font);
  border-radius: 8px;
  transition: color 0.15s;
  min-width: 56px;
  height: 64px;
  line-height: 1;
}
.bnav-btn.active { color: var(--yellow); }
.bnav-icon { font-size: 18px; line-height: 1; }
.bnav-label { font-size: 9px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }

/* ── No-scroll lock when sidebar drawer is open ─────────────── */
.body--no-scroll { overflow: hidden; touch-action: none; }


/* ════════════════════════════════════════════════════════════════
   TABLET — 768px to 1023px
   Hide right panel, narrow sidebar, compress nav
════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  :root { --sidebar: 200px; --right: 0px; }

  .shell {
    grid-template-columns: var(--sidebar) 1fr;
  }
  .right-panel { display: none; }

  /* Compress nav */
  .db-pill  { display: none; }
  .ai-btn   { display: none; }
  .nav-tab  { padding: 0 14px; font-size: 10px; letter-spacing: 1px; }
}


/* ════════════════════════════════════════════════════════════════
   MOBILE — < 768px
   Single column, sidebar as drawer, bottom nav, full-screen modals
════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Base ──────────────────────────────────────────────────── */
  html, body {
    overflow: hidden;        /* shell handles scrolling per-panel */
    height: 100%;
    height: calc(var(--vh, 1vh) * 100);
  }

  /* ── Shell grid: single column, account for bottom nav ──────── */
  .shell {
    grid-template-rows: calc(56px + env(safe-area-inset-top)) 44px 1fr;
    grid-template-columns: 1fr;
    height: calc(var(--vh, 1vh) * 100);
    padding-bottom: 64px; /* bottom nav height */
  }

  /* ── Top nav ─────────────────────────────────────────────────── */
  .topnav { padding: 0 12px; gap: 0; }
  .nav-hamburger { display: none; }   /* sidebar replaced by nav-more panel */
  .nav-logo { margin-right: 0; }
  .nav-logo-sub { display: none; }

  /* Tabs: hidden on mobile — bottom nav + nav-more handle navigation */
  .nav-tabs { display: none; }

  /* Compress nav-right; more-tabs button lives in filterbar on mobile */
  .nav-right { gap: 6px; margin-left: auto; }
  .nav-more-btn { display: none; }  /* filterbar btn takes over */
  .db-pill   { display: none; }
  .ai-btn    { display: none; }
  .nav-icon  { width: 28px; height: 28px; font-size: 13px; }
  .nav-signout { padding: 4px 6px; font-size: 12px; }

  /* Avatar: hidden on mobile — Settings / Health / Sign Out moved into hamburger drawer */
  .avatar-wrapper { display: none; }

  /* Anova AI floating button: hidden on mobile (lives behind the bottom nav otherwise) */
  .agent-fab { display: none; }

  /* ── Filter bar ──────────────────────────────────────────────── */
  .filterbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 10px;
    overflow: hidden;
  }
  .filter-label { display: none; }
  .filter-sep   { display: none; }
  #adm-sep-before  { display: none; }
  #adm-filter-group { display: none !important; }
  .temp-badge      { display: none; }

  /* Customer select: takes remaining space but doesn't crowd the hamburger */
  #f-customer {
    flex: 1 1 0;
    min-width: 0;
    max-width: 180px;
  }
  /* Period select: compact */
  #f-period { flex: 0 0 auto; max-width: 110px; }

  .filter-select { padding: 5px 8px; font-size: 12px; }
  /* Inputs at 16px to prevent iOS zoom-on-focus */
  select, input, textarea { font-size: 16px !important; }

  /* Show the filterbar more-tabs hamburger */
  .nav-more-filter-btn { display: flex; margin-left: auto; }

  /* ── Sidebar: fully hidden on mobile — content lives in nav-more ── */
  .sidebar        { display: none; }
  .sidebar-overlay { display: none; }

  /* ── Right panel: hidden ─────────────────────────────────────── */
  .right-panel { display: none; }

  /* ── Main content ────────────────────────────────────────────── */
  .main { padding: 10px; }

  /* ── KPI strip: 2 columns ────────────────────────────────────── */
  .kpi-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi-card-value { font-size: 22px; }

  /* ── Temperature grid ────────────────────────────────────────── */
  .temp-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Bottom navigation: shown ────────────────────────────────── */
  .bottom-nav { display: block; }

  /* ── Tables: horizontal scroll ───────────────────────────────── */
  .portfolio-table-wrap,
  .tier-table-wrap,
  table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Modals: full-screen ─────────────────────────────────────── */
  /* Manager modals */
  .mgr-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .mgr-modal-body { max-height: calc(100% - 100px) !important; }

  /* Generic overlay panels */
  .warranty-panel,
  .report-builder-panel,
  #tool-overlay > div,
  #assign-overlay > div,
  #tp-overlay > div {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 60vh;
    border-radius: 16px 16px 0 0 !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto !important;
  }

  /* Comm failures modal */
  .cf-modal-panel {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    height: 100vh !important;
  }

  /* Settings modal */
  #settings-modal {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 50vh;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
  }

  /* ── Touch targets: minimum 44px ────────────────────────────── */
  .nav-tab,
  .adm-row,
  .src-row,
  .filter-select,
  button:not(.nav-hamburger):not(.bnav-btn) {
    min-height: 40px;
  }

  /* ── Score breakdown ─────────────────────────────────────────── */
  .score-grid { grid-template-columns: 1fr !important; }

  /* ── Customer-detail: prevent horizontal scroll, restructure dense grids ── */
  .main { overflow-x: hidden; }
  #tab-customer, #cv-detail, #cv-overview { min-width: 0; }
  /* Fleet inventory: was 5 cols on desktop — wrap to 3-up so device stats fit the viewport */
  .fleet-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .fleet-panel { padding: 10px 12px; }
  .fleet-stat-num { font-size: 16px; }
  /* Lifecycle KPI tiers: was 4 cols — 2x2 so each section is readable */
  .tier-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tier-name { font-size: 9px; letter-spacing: 1px; }
  /* Trend table: scroll horizontally inside its own wrapper, not the page */
  .trend-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Branch analysis tables / customer selector row: hard cap width */
  #branch-analysis, .customer-selector-row { max-width: 100%; overflow-x: auto; }
  /* Section titles and meta wrap instead of pushing the page wider */
  .customer-meta, .customer-dropdown { min-width: 0; max-width: 100%; }
  /* Hide the "← All Accounts" back button on mobile — the View toggle (All Accounts / Account Detail) already provides the same navigation */
  .pdom-back-row { display: none; }

  /* ── Safe area padding (iOS notch/home indicator) ────────────── */
  .shell    { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .topnav   { padding-top: env(safe-area-inset-top); }
  .bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
}
    .rb-custom-btn:hover{background:rgba(255,215,50,.13);border-color:rgba(255,215,50,.5)}


/* ════════════════════════════════════════════════════════════════
   WIDE DESKTOP — ≥ 1440px
   Expand sidebar/right columns; cap main content width
════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  :root { --sidebar: 260px; --right: 320px; }

  /* Cap center column so content doesn't stretch to 1500px+ */
  .main { max-width: 1100px; }
}

/* ════════════════════════════════════════════════════════════════
   ULTRA-WIDE — ≥ 1920px
   Further expand and add more breathing room
════════════════════════════════════════════════════════════════ */
@media (min-width: 1920px) {
  :root { --sidebar: 300px; --right: 360px; }

  .main { max-width: 1300px; }
  .kpi-strip { grid-template-columns: repeat(5, 1fr); }
  .tier-grid  { grid-template-columns: repeat(5, 1fr); }
}


/* ════════════════════════════════════════════════════════════════
   LANDSCAPE PHONES — short viewport (height ≤ 500px)
   Collapse chrome, hide bottom nav, shrink rows
════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .shell {
    grid-template-rows: 40px 36px 1fr;
    padding-bottom: 0; /* no bottom nav */
  }

  .topnav  { min-height: 40px; }
  .filterbar { min-height: 36px; padding: 4px 10px; }

  /* Hide bottom nav — not enough height for it */
  .bottom-nav { display: none !important; }

  /* Sidebar as slim drawer — still 280px but starts offscreen */
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 240px;
    height: 100%;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    grid-row: unset;
    grid-column: unset;
  }
  .sidebar.sidebar--open { transform: translateX(0); }

  /* Show hamburger so user can still open sidebar */
  .nav-hamburger { display: flex; }

  /* Tighter grid */
  .kpi-strip { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .main { padding: 8px; gap: 8px; }
}


/* ════════════════════════════════════════════════════════════════
   SCROLLBARS — thin & themed across all panels
════════════════════════════════════════════════════════════════ */
.main,
.sidebar,
.right-panel,
.agent-messages,
.assign-table-wrap,
.wv-table-wrap,
.modal-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}

.main::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.right-panel::-webkit-scrollbar,
.agent-messages::-webkit-scrollbar,
.assign-table-wrap::-webkit-scrollbar,
.wv-table-wrap::-webkit-scrollbar,
.modal-body::-webkit-scrollbar { width: 4px; height: 4px; }

.main::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.right-panel::-webkit-scrollbar-track,
.agent-messages::-webkit-scrollbar-track { background: transparent; }

.main::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.right-panel::-webkit-scrollbar-thumb,
.agent-messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
  border-radius: 4px;
}

.main::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.right-panel::-webkit-scrollbar-thumb:hover,
.agent-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.28);
}

/* ── App loading overlay ─────────────────────────────────────────────────── */
#app-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--dark, #0f0f17);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .35s ease, visibility .35s ease;
}
#app-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.app-loader-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 24px;
}
.app-loader-logo {
  font-size: 26px; font-weight: 800; letter-spacing: 7px;
  color: var(--white); margin-bottom: 4px;
}
.app-loader-title {
  font-size: 10px; font-weight: 600; letter-spacing: 3px;
  color: rgba(255,255,255,.55); text-transform: uppercase;
}
.app-loader-version {
  font-size: 10px; font-weight: 500; letter-spacing: .5px;
  color: rgba(255,255,255,.3); margin-top: 6px;
}
.app-loader-spinner {
  width: 28px; height: 28px;
  border: 2px solid rgba(255,215,50,.18);
  border-top-color: var(--yellow, #FFD732);
  border-radius: 50%;
  animation: appLoaderSpin .8s linear infinite;
  margin-top: 22px;
}
@keyframes appLoaderSpin { to { transform: rotate(360deg); } }
.app-loader-status {
  font-size: 10px; color: rgba(255,255,255,.4);
  margin-top: 14px; letter-spacing: .5px;
}

/* ── Avatar wrapper + dropdown ───────────────────────────────────────────── */
.avatar-wrapper { position: relative; }

.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--yellow); color: var(--dark);
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; flex-shrink: 0;
  transition: opacity .15s;
}
.avatar:hover { opacity: .85; }
.avatar-open .avatar { outline: 2px solid var(--yellow); outline-offset: 2px; }

.avatar-dropdown {
  display: none;
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 220px;
  background: var(--dark2); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  z-index: 1000;
  flex-direction: column;
}
.avatar-dropdown--open { display: flex; }

.avatar-dd-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border);
}
.avatar-dd-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--yellow); color: var(--dark);
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.avatar-dd-info { display: flex; flex-direction: column; overflow: hidden; }
.avatar-dd-name {
  font-size: 12px; font-weight: 600; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.avatar-dd-role {
  font-size: 10px; font-weight: 500; letter-spacing: .5px;
  color: var(--muted); text-transform: uppercase; margin-top: 1px;
}

.avatar-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  font-size: 12px; font-weight: 500; color: rgba(255,255,255,.75);
  cursor: pointer; border: none; background: none; width: 100%;
  text-align: left; transition: background .12s, color .12s;
}
.avatar-dd-item:hover { background: rgba(255,255,255,.05); color: var(--white); }
.avatar-dd-item svg { flex-shrink: 0; opacity: .65; }

.avatar-dd-badge {
  margin-left: auto;
  font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(255,255,255,.08); color: var(--muted);
}

.avatar-dd-divider,
.avatar-dd-sep { height: 1px; background: var(--border); margin: 2px 0; }

/* aliases for alternate HTML class names */
.avatar-dd-initials {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--yellow); color: var(--dark);
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.avatar-dd-icon { font-size: 13px; opacity: .7; width: 16px; text-align: center; }

.avatar-dd-item--danger,
.avatar-dd-item--signout { color: var(--red); }
.avatar-dd-item--danger:hover,
.avatar-dd-item--signout:hover { background: rgba(217,64,64,.08); color: var(--red); }

/* ── Benchmarking placeholder panel ─────────────────────────────────────── */
.benchm-placeholder {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px;
  padding: 56px 20px 40px; text-align: center;
}
.benchm-icon { font-size: 36px; opacity: .35; margin-bottom: 4px; }
.benchm-title { font-size: 16px; font-weight: 700; color: var(--white); }
.benchm-desc {
  font-size: 12px; color: var(--muted); max-width: 360px; line-height: 1.6;
}

.benchm-cards {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 12px;
  padding: 0 24px 32px; max-width: 900px; margin: 0 auto;
}
@media (max-width: 900px) { .benchm-cards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .benchm-cards { grid-template-columns: 1fr; } }

.benchm-card {
  background: var(--dark2); border: 1px solid var(--border);
  border-radius: 10px; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.benchm-hero {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding-bottom: 28px; text-align: center;
}
.benchm-card-label {
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
}
.benchm-card-value {
  font-size: 24px; font-weight: 800; color: rgba(255,255,255,.2);
}
.benchm-card-sub {
  font-size: 10px; color: var(--muted);
}
.benchm-skeleton {
  height: 28px; border-radius: 5px;
  background: linear-gradient(90deg,var(--border) 25%,rgba(255,255,255,.04) 50%,var(--border) 75%);
  background-size: 200% 100%;
  animation: benchm-shimmer 1.8s infinite linear;
}
.benchm-skeleton-sm {
  height: 14px; width: 60%; border-radius: 4px;
  background: linear-gradient(90deg,var(--border) 25%,rgba(255,255,255,.04) 50%,var(--border) 75%);
  background-size: 200% 100%;
  animation: benchm-shimmer 1.8s infinite linear;
}
@keyframes benchm-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Health Status modal ─────────────────────────────────────────────────── */
#health-status-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65); z-index: 1100;
}
#health-status-modal {
  display: none; position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: min(480px, calc(100vw - 32px));
  background: var(--dark2); border: 1px solid var(--border);
  border-radius: 14px; flex-direction: column; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.7); z-index: 1101;
}
.health-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
}
.health-modal-title {
  font-size: 13px; font-weight: 700; letter-spacing: .5px;
}
.health-modal-close {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 2px;
  transition: color .12s;
}
.health-modal-close:hover { color: var(--white); }

.health-modal-body { padding: 8px 0 8px; }

.health-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.04);
}
.health-row:last-child { border-bottom: none; }

.health-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--border);
}

.health-row-info { display: flex; flex-direction: column; flex: 1; }
.health-row-name {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6);
}
.health-row-detail {
  font-size: 10px; color: var(--muted); margin-top: 2px;
}
.health-row-status {
  font-size: 10px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted);
}

.health-modal-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  font-size: 10px; color: var(--muted); text-align: center;
  line-height: 1.5;
}

/* health modal inner elements */
.health-notice {
  font-size: 11px; color: var(--muted); line-height: 1.55;
  padding: 10px 20px 14px; border-bottom: 1px solid var(--border);
}
.health-connections { padding: 4px 0; }
.health-row--disabled { opacity: .55; }
.health-dot--unknown { background: var(--border); }
.health-label {
  flex: 1;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7);
}
.health-status-badge {
  font-size: 11px; font-weight: 600; color: var(--muted);
  letter-spacing: .5px;
}