/* ══════════════════════════════════════════════════════════════
   SECTION 1: CSS
   1A: Variables, Reset & Fonts
   1B: Layout, Navigation & Topbar
   1C: Components (tables, pills, cards, modals, alerts, buttons)
   1D: Panel-specific styles
   ══════════════════════════════════════════════════════════════ */

/* ── 1A: Variables, Reset & Fonts ── */
@media print{.topbar,.nav,.toolbar{display:none!important}.panel{display:block!important}body{background:#fff;color:#000}.bcard{border:1px solid #ccc}}
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg0:#08080a;--bg1:#0f0f14;--bg2:#16161e;--bg3:#1c1c26;--bg4:#22222e;--bg5:#2a2a38;
  --line:rgba(255,255,255,0.06);--line2:rgba(255,255,255,0.11);--line3:rgba(255,255,255,0.18);
  --accent:#e8232a;--accent2:#ff5533;--gold:#f0c040;--teal:#00d4aa;--blue:#4a9eff;
  --green:#4cde80;--red:#ff4d55;--amber:#ffb830;--purple:#a78bfa;
  --text:rgba(255,255,255,0.90);--text2:rgba(255,255,255,0.60);--text3:rgba(255,255,255,0.35);
  --font-head:'Rajdhani',sans-serif;--font-mono:'JetBrains Mono',monospace;
}
body{background:var(--bg0);color:var(--text);font-family:var(--font-head);font-size:15px;min-height:100vh}
input,select,textarea{font-family:var(--font-mono);font-size:13px;background:var(--bg3);color:var(--text);border:1px solid var(--line2);border-radius:3px;padding:3px 6px;outline:none}
input:focus,select:focus{border-color:var(--teal)}
input[type=checkbox]{width:15px;height:15px;cursor:pointer;accent-color:var(--teal)}
input[type=number]{width:80px}
button{font-family:var(--font-head);font-size:13px;font-weight:600;letter-spacing:1px;cursor:pointer;border:1px solid var(--line2);background:var(--bg3);color:var(--text2);border-radius:4px;padding:6px 14px;transition:all 0.15s}
button:hover{background:var(--bg4);color:var(--text);border-color:var(--line3)}
button.primary{background:rgba(0,212,170,0.15);color:var(--teal);border-color:rgba(0,212,170,0.4)}
button.primary:hover{background:rgba(0,212,170,0.25)}
button.danger{background:rgba(232,35,42,0.15);color:var(--red);border-color:rgba(232,35,42,0.4)}
button.accent{background:rgba(232,35,42,0.15);color:var(--accent);border-color:rgba(232,35,42,0.4)}
button.warn{background:rgba(255,184,48,0.15);color:var(--amber);border-color:rgba(255,184,48,0.4)}

/* ── 1B: Layout, Navigation & Topbar ── */
.app{display:flex;flex-direction:column;min-height:100vh}
.sticky-header{position:sticky;top:0;z-index:100;flex-shrink:0}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 24px;background:var(--bg1);border-bottom:1px solid var(--line2)}
.topbar-left{display:flex;align-items:center;gap:24px}
.logo{display:flex;flex-direction:column}
.logo-main{font-size:26px;font-weight:700;letter-spacing:3px;text-transform:uppercase}
.logo-sub{font-size:10px;letter-spacing:4px;color:var(--accent);text-transform:uppercase;font-family:var(--font-mono)}
.app-meta{display:flex;flex-direction:column;border-left:1px solid var(--line2);padding-left:22px}
.app-meta-title{font-size:15px;font-weight:700;letter-spacing:1px;color:var(--text);font-family:var(--font-mono)}
.app-meta-sub{font-size:11px;color:var(--text2);font-family:var(--font-mono);margin-top:3px}
.topbar-right{display:flex;align-items:center;gap:10px}
.round-sel{display:flex;align-items:center;gap:8px}
.round-sel label{font-size:10px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;font-family:var(--font-mono)}
.round-sel select{font-size:11px;padding:5px 10px;min-width:160px;max-width:200px}
.nav{display:flex;gap:2px;padding:0 24px;background:var(--bg1);border-bottom:2px solid var(--line2);overflow-x:auto}
.nav-tab{font-size:13px;font-family:var(--font-head);letter-spacing:1.5px;font-weight:700;text-transform:uppercase;padding:9px 16px;cursor:pointer;color:rgba(255,255,255,0.75);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:normal;transition:all 0.15s;line-height:1.35;text-align:center;min-width:80px}
.nav-tab:hover{color:var(--text)}
.nav-tab.active{color:var(--teal);border-bottom-color:var(--teal)}
.content{padding:20px 24px;flex:1}
.panel{display:none}
.panel.active{display:block}

/* ── 1C: Components ── */
td{padding:7px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
table{width:100%;border-collapse:collapse;min-width:600px}
/* v4.2.15 (N3): Panel A/B tables shrink horizontally when columns are
   collapsed — width:auto so the table doesn't redistribute width to fill
   the container. The horizontal scrollbar still handles content overflow. */
#drivers-table, #constructors-table{width:auto;min-width:unset}
/* v4.2.16 (O1c): unmistakable visual feedback for disabled inputs in Panel A/B.
   Chrome's default disabled-checkbox style is too subtle to spot in dense tables. */
#drivers-table input[type="checkbox"]:disabled,
#constructors-table input[type="checkbox"]:disabled{
  opacity:0.35;
  cursor:not-allowed;
  filter:grayscale(0.5);
}
#drivers-table select:disabled,
#constructors-table select:disabled{
  opacity:0.45;
  cursor:not-allowed;
  background:rgba(255,255,255,0.04) !important;
  color:var(--text3) !important;
  border-color:rgba(255,255,255,0.08) !important;
}
th{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.65);padding:9px 10px;text-align:left;background:var(--bg2);border-bottom:1px solid var(--line2);white-space:nowrap;cursor:pointer;user-select:none}
th:hover{color:var(--text2)}
th.sort-asc::after{content:' ↑';color:var(--teal)}
th.sort-desc::after{content:' ↓';color:var(--teal)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg2)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line2);border-radius:6px;margin-bottom:16px;position:relative}
.panel-header{margin-bottom:18px}
.panel-title{font-size:28px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
.panel-accent{color:var(--accent)}
.panel-desc{font-size:13px;color:rgba(255,255,255,0.75);line-height:1.7;margin-top:8px;font-family:var(--font-mono);background:var(--bg2);border-left:3px solid var(--accent);padding:10px 14px;border-radius:0 4px 4px 0;max-height:600px;overflow:hidden;transition:max-height 0.2s ease, padding 0.2s ease, margin 0.2s ease}
.panel-desc.collapsed{max-height:0;padding:0 14px;margin-top:0;border-left-width:0}
.panel-title-row{display:flex;align-items:center;gap:10px}
.info-pill{font-family:var(--font-head);font-size:13px;font-weight:700;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);background:var(--bg3);border:1px solid var(--line2);border-radius:50%;padding:0;transition:all 0.15s}
.info-pill:hover{color:var(--teal);border-color:var(--teal)}
.info-pill.open{color:var(--teal);background:rgba(0,212,170,0.12);border-color:var(--teal)}
/* v4.2.13 (D1): edit-pencil for panel descriptions */
.desc-edit{font-family:var(--font-head);font-size:11px;font-weight:700;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);background:var(--bg3);border:1px solid var(--line2);border-radius:50%;padding:0;margin-left:4px;transition:all 0.15s}
.desc-edit:hover{color:var(--amber);border-color:var(--amber)}
.pos{color:var(--green)}.neg{color:var(--red)}.neutral{color:var(--text2)}.gold{color:var(--gold)}.blue{color:var(--blue)}.amber-col{color:var(--amber)}.teal{color:var(--teal)}.mono{font-family:var(--font-mono)}
.pill{display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border-radius:3px;font-family:var(--font-mono);white-space:nowrap}
.pill-keeper{background:rgba(76,222,128,0.15);color:var(--green);border:1px solid rgba(76,222,128,0.3)}
.pill-goner{background:rgba(255,77,85,0.15);color:var(--red);border:1px solid rgba(255,77,85,0.3)}
.pill-candidate{background:rgba(255,184,48,0.15);color:var(--amber);border:1px solid rgba(255,184,48,0.3)}
.pill-strategic{background:rgba(167,139,250,0.15);color:var(--purple);border:1px solid rgba(167,139,250,0.3)}
.pill-maybe{background:rgba(74,158,255,0.15);color:var(--blue);border:1px solid rgba(74,158,255,0.3)}
.pill-2x{background:rgba(232,35,42,0.25);color:#fff;border:1px solid var(--accent);font-weight:700}
.pill-3x{background:rgba(240,192,64,0.35);color:#fff;border:1px solid var(--gold);font-weight:700}
.pill-tt{background:rgba(232,35,42,0.15);color:var(--accent);border:1px solid rgba(232,35,42,0.3)}
.pill-lr{background:rgba(76,222,128,0.15);color:var(--green);border:1px solid rgba(76,222,128,0.3)}
.pill-mr{background:rgba(240,192,64,0.15);color:var(--gold);border:1px solid rgba(240,192,64,0.3)}
.pill-hr{background:rgba(255,120,40,0.18);color:#ff8c2a;border:1px solid rgba(255,120,40,0.5)}
.pill-xr{background:rgba(255,77,85,0.15);color:var(--red);border:1px solid rgba(255,77,85,0.3)}
/* v4.3.0: Step 3 combined table row framing. Driven by classification (Goner / Maybe), persists regardless of tick state. */
tr.row-goner > td{background:rgba(255,77,85,0.06)}
tr.row-goner > td:first-child{border-left:3px solid var(--red)}
tr.row-maybe > td{background:rgba(255,184,48,0.06)}
tr.row-maybe > td:first-child{border-left:3px solid var(--amber)}
.budget-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
.bcard{background:var(--bg2);border:1px solid var(--line2);border-radius:5px;padding:12px 16px;position:relative;overflow:hidden}
.bcard::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px}
.bcard.bc-total::after{background:var(--blue)}.bcard.bc-team::after{background:var(--amber)}.bcard.bc-cash::after{background:var(--teal)}.bcard.bc-changes::after{background:var(--gold)}.bcard.bc-bb::after{background:var(--green)}
.bcard-label{font-size:9px;letter-spacing:3px;color:var(--text3);text-transform:uppercase;font-family:var(--font-mono)}
.bcard-val{font-size:22px;font-weight:700;margin-top:4px;font-family:var(--font-mono)}
.bcard.bc-total .bcard-val{color:var(--blue)}.bcard.bc-cash .bcard-val{color:var(--teal)}.bcard.bc-changes .bcard-val{color:var(--gold)}.bcard.bc-team .bcard-val{color:var(--amber)}.bcard.bc-bb .bcard-val{color:var(--green)}
.bcard-sub{font-size:10px;color:var(--text3);margin-top:2px;font-family:var(--font-mono)}
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.toolbar-sep{width:1px;height:20px;background:var(--line2)}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1000;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:24px;min-width:320px;max-width:500px}
.modal h3{font-size:16px;font-weight:700;margin-bottom:12px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.alert{padding:10px 14px;border-radius:4px;font-size:12px;font-family:var(--font-mono);margin-bottom:10px}
.alert-warn{background:rgba(255,184,48,0.1);border:1px solid rgba(255,184,48,0.3);color:var(--amber)}
.alert-danger{background:rgba(255,77,85,0.1);border:1px solid rgba(255,77,85,0.3);color:var(--red)}
.alert-ok{background:rgba(76,222,128,0.1);border:1px solid rgba(76,222,128,0.3);color:var(--green)}
.alert-info{background:rgba(74,158,255,0.1);border:1px solid rgba(74,158,255,0.3);color:var(--blue)}

/* ── 1D: Panel-specific styles ── */
.placeholder-panel{padding:40px;text-align:center;background:var(--bg2);border:2px dashed var(--line2);border-radius:8px;margin-top:16px}
.placeholder-panel h2{font-size:20px;color:var(--text3);font-weight:600;margin-bottom:8px}
.placeholder-panel p{font-size:13px;color:var(--text3);font-family:var(--font-mono)}
.removal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.removal-card{background:var(--bg2);border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.removal-card-header{padding:10px 14px;background:var(--bg3);border-bottom:1px solid var(--line2);font-size:11px;font-family:var(--font-mono);letter-spacing:2px;text-transform:uppercase;color:var(--text3)}
.section-head{display:flex;align-items:center;gap:10px;margin:16px 0 10px}
.section-label{font-size:10px;font-family:var(--font-mono);letter-spacing:3px;text-transform:uppercase;color:var(--text3)}
.section-line{flex:1;height:1px;background:var(--line2)}
.h-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.h-panel{background:var(--bg2);border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.h-panel-header{padding:8px 14px;background:var(--bg3);border-bottom:1px solid var(--line2);display:flex;align-items:center;justify-content:space-between}
.h-panel-title{font-size:11px;font-family:var(--font-mono);letter-spacing:2px;text-transform:uppercase;color:var(--text2)}
.h-panel table{min-width:unset}
.h-panel td,.h-panel th{padding:5px 8px;font-size:11px}
.four-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.team-card{background:var(--bg2);border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.team-card-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg3);border-bottom:1px solid var(--line2)}
.team-card-title{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.team-card table{min-width:unset;width:100%}
.team-card td,.team-card th{padding:5px 8px;font-size:12px}
.team-totals{display:flex;gap:8px;padding:8px 14px;background:var(--bg3);border-top:1px solid var(--line2);flex-wrap:wrap}
.team-total-item{font-size:11px;font-family:var(--font-mono)}
.team-total-label{color:var(--text3)}
.team-total-val{font-weight:600;margin-left:4px}

/* Panel G: Team sections */
.team-section{background:var(--bg2);border:1px solid var(--line2);border-radius:6px;overflow:hidden;margin-bottom:16px}
.team-section-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg3);border-bottom:1px solid var(--line2)}
.team-section-title{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-family:var(--font-mono)}

/* Panel H: Rival cards */
.rival-card{background:var(--bg2);border:1px solid var(--line2);border-radius:6px;padding:14px 18px;margin-bottom:10px}
.rival-name-input{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-family:var(--font-mono);background:transparent;border:none;border-bottom:1px solid var(--line2);padding:4px 0;margin-bottom:10px;width:200px;outline:none}
.rival-name-input:focus{border-bottom-color:var(--teal)}

/* Panel M: Configuration */
.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.config-card{background:var(--bg2);border:1px solid var(--line2);border-radius:6px;padding:16px}
.config-card h3{font-size:11px;font-family:var(--font-mono);letter-spacing:3px;text-transform:uppercase;color:var(--text3);margin-bottom:12px}
.config-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.config-row:last-child{border-bottom:none}
.config-label{font-size:12px;color:var(--text2)}
.chip-score-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:1100px){.chip-score-grid{grid-template-columns:1fr 1fr}}


/* ── 1E: v4.0 — Tabs, Accordions, Sticky thead ── */
.tabs{display:flex;gap:2px;margin-bottom:14px;border-bottom:2px solid var(--line2);overflow-x:auto}
.tab{font-size:11px;font-family:var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;padding:8px 14px;cursor:pointer;color:var(--text2);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:all 0.15s;background:transparent;border-top:1px solid transparent;border-left:1px solid transparent;border-right:1px solid transparent;border-radius:4px 4px 0 0}
.tab:hover{color:var(--text)}
.tab.active{color:var(--teal);border-bottom-color:var(--teal);background:var(--bg2);border-top-color:var(--line2);border-left-color:var(--line2);border-right-color:var(--line2)}
.tab-pane{display:none}
.tab-pane.active{display:block}
.acc-list{display:flex;flex-direction:column;gap:8px}
.acc-step{background:var(--bg2);border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.acc-step[open]{border-color:rgba(0,212,170,0.35)}
.acc-summary{display:flex;align-items:center;gap:14px;padding:12px 16px;cursor:pointer;background:var(--bg3);user-select:none;list-style:none}
.acc-summary::-webkit-details-marker{display:none}
.acc-summary::before{content:'\25B8';color:var(--teal);font-size:13px;transition:transform 0.18s}
.acc-step[open] > .acc-summary::before{transform:rotate(90deg)}
.acc-num{font-size:10px;font-family:var(--font-mono);letter-spacing:2px;text-transform:uppercase;color:var(--text3);background:var(--bg4);padding:3px 9px;border-radius:3px;min-width:62px;text-align:center}
.acc-step[open] .acc-num{color:var(--teal);background:rgba(0,212,170,0.10)}
.acc-title{font-size:14px;font-weight:700;font-family:var(--font-head);letter-spacing:1.5px;text-transform:uppercase;color:var(--text)}
.acc-hint{font-size:11px;font-family:var(--font-mono);color:var(--text3);margin-left:auto}
.acc-body{padding:14px 16px;border-top:1px solid var(--line2)}
/* v4.1.1: sticky table headers — fixed-height vertical scroll container.
   The container scrolls both axes; thead sticks to top:0 within the container.
   Pattern is reliable across browsers (Chrome, FF, Safari). */
.tbl-wrap-noh{border:1px solid var(--line2);border-radius:6px;margin-bottom:16px;position:relative;max-height:calc(100vh - 240px);overflow:auto}
.tbl-wrap-noh thead th{position:sticky;z-index:5;background:var(--bg2)}
.tbl-wrap-noh thead tr:first-child th{top:0}
.tbl-wrap-noh thead tr:nth-child(2) th{top:32px}
/* Sticky header cells that are also sticky-left need a higher z-index */
.tbl-wrap-noh thead th[style*="position:sticky;left"]{z-index:6}
/* Ensure totals row stays at bottom of scroll without sticking */
/* ID-collapse toolbar button (NOT inside table header) */
.id-toggle{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-family:var(--font-mono);letter-spacing:1px;color:var(--text2);background:var(--bg3);border:1px solid var(--line2);border-radius:4px;padding:5px 10px;cursor:pointer}
.id-toggle:hover{color:var(--teal);border-color:var(--teal)}
.id-toggle.collapsed{color:var(--amber);border-color:var(--amber)}

/* v4.1: Status pill in topbar */
.status-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-family:var(--font-mono);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:3px 9px;border-radius:3px;background:var(--bg3);border:1px solid var(--line2)}
.status-pill .dot{width:8px;height:8px;border-radius:50%}
.status-pill.s-scheduled{color:var(--text2);border-color:var(--line3)} .status-pill.s-scheduled .dot{background:var(--text3)}
.status-pill.s-open{color:var(--amber);border-color:rgba(255,184,48,0.5)} .status-pill.s-open .dot{background:var(--amber)}
.status-pill.s-submitted{color:var(--blue);border-color:rgba(74,158,255,0.5)} .status-pill.s-submitted .dot{background:var(--blue)}
.status-pill.s-completed{color:var(--green);border-color:rgba(76,222,128,0.5)} .status-pill.s-completed .dot{background:var(--green)}

/* v4.2.0: panel-header sort buttons */
.sort-btn{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;color:var(--text2);background:var(--bg3);border:1px solid var(--line2);border-radius:3px;padding:4px 8px;cursor:pointer;margin-left:4px}
.sort-btn:hover{color:var(--teal);border-color:var(--teal)}

/* v4.2.0: Pre-race interim-state read-only mode */
.acc-step.step-frozen{opacity:0.55}
.acc-step.step-frozen .acc-body input,
.acc-step.step-frozen .acc-body select,
.acc-step.step-frozen .acc-body textarea,
.acc-step.step-frozen .acc-body button,
.acc-step.step-frozen .acc-summary input,
.acc-step.step-frozen .acc-summary select,
.acc-step.step-frozen .acc-summary button{pointer-events:none;cursor:not-allowed}
.acc-step.step-frozen .acc-summary::after{content:' \01F512 read-only';font-size:10px;color:var(--text3);margin-left:8px}
/* v4.2.6 (B1): step-completed visual cue. Green-tinted summary background +
   accent border. Independent of step-frozen — both classes can coexist. */
.acc-step.step-completed > .acc-summary{background:rgba(76,222,128,0.08);border-left:3px solid var(--green)}
.acc-step.step-completed > .acc-summary .acc-num{color:var(--green);background:rgba(76,222,128,0.12)}
.acc-step.step-completed input.step-tick{accent-color:var(--green)}
input.step-tick{cursor:pointer;width:16px;height:16px}
.step-tick-wrap{user-select:none}
/* v4.2.7 (C1+C5): shared status-banner + 5-state legend. Used by both
   Pre-race and Post-race panels. Inline styles render most of the layout
   (see renderStatusBanner); these rules add hover/transition polish. */
.status-banner{transition:background 0.18s, border-color 0.18s}
.status-legend-pill{transition:opacity 0.18s, background 0.18s; cursor:default}
.status-legend-pill:hover{opacity:1 !important}