/* ═══════════════════════════════════════════════════════════
   A&D COMMAND CENTER — styles.css
   Cosco Fire Protection | Operations Control Panel
═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'IBM Plex Sans', Arial, sans-serif;
    font-size: 13px;
    background: #080c10;
    color: #d4dae4;
    min-height: 100vh;
    overflow: hidden;
}

.mono  { font-family: 'IBM Plex Mono', monospace; }
.muted { color: #3d4a5c; }
.good-text    { color: #32c864; }
.warning-text { color: #f5b840; }
.danger-text  { color: #ff4040; }

/* ════════════════════════════════════════════════════════════
   LAYOUT
════════════════════════════════════════════════════════════ */
.app-layout { display: flex; height: 100vh; overflow: hidden; }

/* ════════════════════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════════════════════ */
.sidebar {
    width: 220px;
    min-width: 220px;
    height: 100vh;
    background: #080c10;
    border-right: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 100;
}

.sidebar-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

.sidebar-header { padding: 20px 16px 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sidebar-logo { display: flex; flex-direction: column; gap: 2px; }
.sidebar-logo-mark { font-size: 18px; font-weight: 700; color: #ff4040; letter-spacing: -0.3px; line-height: 1; }
.sidebar-logo-sub { font-size: 9px; color: #3d4a5c; text-transform: uppercase; letter-spacing: 1.2px; }

.sidebar-role { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 11.5px; color: #7a8898; font-weight: 500; }
.sidebar-role-dot { width: 7px; height: 7px; border-radius: 50%; background: #32c864; box-shadow: 0 0 6px rgba(50,200,100,0.6); flex-shrink: 0; }
.sidebar-role-tag { margin-left: auto; font-size: 9.5px; color: #ff4040; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

.sidebar-section-label { font-size: 9px; font-weight: 700; color: #2a3240; text-transform: uppercase; letter-spacing: 1.2px; padding: 14px 16px 4px 16px; }

.sidebar-nav { display: flex; flex-direction: column; padding: 2px 8px; gap: 1px; }

.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: #4a5a6a; font-size: 12px; font-weight: 500; transition: all 0.15s ease; cursor: pointer; border: 1px solid transparent; }
.nav-item:hover { background: rgba(255,255,255,0.04); color: #8a9aaa; }
.nav-item.active { background: rgba(30,100,220,0.15); color: #e0e6ef; border-color: rgba(60,140,255,0.2); }

.nav-icon { font-size: 13px; width: 16px; text-align: center; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
svg.nav-icon { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.75; fill: none; flex-shrink: 0; }
.nav-label { flex: 1; }
.nav-badge { font-size: 8.5px; font-weight: 700; padding: 2px 5px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.nav-badge.soon { background: rgba(255,255,255,0.05); color: #2a3240; }
.nav-role-tag { font-size: 10px; font-weight: 700; color: #3d4a5c; text-transform: uppercase; letter-spacing: 0.3px; }

.nav-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #ffffff; flex-shrink: 0; }
.nav-avatar-design { background: #6a3fc8; }
.nav-avatar-super  { background: #c85a20; }
.nav-avatar-sales  { background: #208ac8; }

.sidebar-footer { padding: 14px 16px; font-size: 9.5px; color: #1e2530; border-top: 1px solid rgba(255,255,255,0.03); text-transform: uppercase; letter-spacing: 0.8px; flex-shrink: 0; background: var(--sidebar-bg); }

/* ════════════════════════════════════════════════════════════
   MAIN CONTENT
════════════════════════════════════════════════════════════ */
.main-content { flex: 1; min-width: 0; height: 100vh; overflow-y: auto; background: #080c10; background-image: radial-gradient(ellipse at 20% 10%, rgba(180,20,20,0.06) 0%, transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(20,40,80,0.08) 0%, transparent 55%); scrollbar-width: thin; scrollbar-color: #1c2330 transparent; }
.main-content::-webkit-scrollbar { width: 4px; }
.main-content::-webkit-scrollbar-thumb { background: #1c2330; border-radius: 4px; }

.page { display: none; padding: 24px; }
.page.active { display: block; }

.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-title-block h1 { margin: 0 0 2px 0; font-size: 20px; font-weight: 700; color: #e0e8f4; letter-spacing: -0.3px; }
.page-title-block p { margin: 0; font-size: 11px; color: #3d4a5c; text-transform: uppercase; letter-spacing: 1px; }

.panel { background: linear-gradient(160deg, #0f1520 0%, #0c1118 100%); border-radius: 16px; padding: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.04); overflow: hidden; isolation: isolate; }

.coming-soon-block { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 16px; }
.coming-soon-block p { margin: 0; font-size: 13px; color: #2a3240; }
.coming-soon-icon { font-size: 32px; color: #1e2530; }

/* ── BILLING TABS ─────────────────────────────────────────── */
.tab-bar { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 0; }
.tab-btn { background: transparent; border: none; border-bottom: 2px solid transparent; color: #3d4a5c; font-family: 'IBM Plex Sans', sans-serif; font-size: 12.5px; font-weight: 600; padding: 8px 16px; cursor: pointer; transition: all 0.15s ease; margin-bottom: -1px; }
.tab-btn:hover { color: #7a8898; }
.tab-btn.active { color: #e0e6ef; border-bottom-color: #ff4040; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.primary-btn { background: rgba(30,100,220,0.18); border: 1px solid rgba(60,140,255,0.3); color: #6aa0ff; padding: 8px 16px; border-radius: 8px; font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.18s ease; }
.primary-btn:hover { background: rgba(30,100,220,0.30); border-color: rgba(60,140,255,0.55); color: #88b8ff; }

/* ── TABLE ────────────────────────────────────────────────── */
.table-loading-bar { height: 2px; background: linear-gradient(90deg, transparent, #ff4040, transparent); background-size: 200% 100%; animation: shimmer 1.2s infinite; margin-bottom: 8px; border-radius: 2px; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table th { text-align: left; padding: 8px 10px; color: #3d4a5c; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.9px; border-bottom: 1px solid #1c2330; }
.data-table td { padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,0.03); color: #b8c4d0; vertical-align: middle; }
.project-name-cell { font-weight: 600; color: #dde4ef !important; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.table-message { text-align: center; color: #3d4a5c; padding: 32px 0 !important; font-size: 13px; }
.error-message { color: #ff5555 !important; }
.clickable-row { cursor: pointer; transition: background 0.15s ease; }
.clickable-row:hover td { background: rgba(255,255,255,0.03); }
.clickable-row:hover .project-name-cell { color: #ffffff !important; }

/* ── TYPE TAGS ────────────────────────────────────────────── */
.type-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10.5px; font-weight: 700; font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.5px; }
.type-ad   { background: rgba(255,140,30,0.12); color: #ff9030; border: 1px solid rgba(255,140,30,0.22); }
.type-as   { background: rgba(60,140,255,0.12); color: #5a9fff; border: 1px solid rgba(60,140,255,0.22); }
.type-ac   { background: rgba(160,80,255,0.12); color: #b060ff; border: 1px solid rgba(160,80,255,0.22); }
.type-svc  { background: rgba(50,200,100,0.12); color: #32c864; border: 1px solid rgba(50,200,100,0.22); }
.type-lfps { background: rgba(245,180,60,0.12); color: #f5b840; border: 1px solid rgba(245,180,60,0.22); }
.type-co   { background: rgba(160,200,255,0.12); color: #80c0ff; border: 1px solid rgba(160,200,255,0.22); }

/* ── STATUS CHIPS ─────────────────────────────────────────── */
.status-chip { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; }
.status-chip.red    { background: rgba(255,60,60,0.15);   color: #ff5555; border: 1px solid rgba(255,60,60,0.25); }
.status-chip.blue   { background: rgba(60,140,255,0.15);  color: #6aa0ff; border: 1px solid rgba(60,140,255,0.25); }
.status-chip.yellow { background: rgba(245,180,60,0.15);  color: #f5b840; border: 1px solid rgba(245,180,60,0.25); }
.status-chip.green  { background: rgba(50,200,100,0.15);  color: #32c864; border: 1px solid rgba(50,200,100,0.25); }
.status-chip.gray   { background: rgba(120,140,160,0.15); color: #8a9aaa; border: 1px solid rgba(120,140,160,0.2); }

.field-stage { display: inline-block; padding: 2px 8px; border-radius: 4px; background: rgba(60,120,200,0.15); color: #6aa0e0; border: 1px solid rgba(60,120,200,0.2); font-size: 11px; font-weight: 500; }
.phase-tag   { display: inline-block; padding: 2px 8px; border-radius: 4px; background: rgba(100,100,100,0.12); color: #7a8898; border: 1px solid rgba(100,100,100,0.18); font-size: 11px; }

.indicator-cell { white-space: nowrap; }
.indicator-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; cursor: default; }
.indicator-dot.green  { background: #32d17d; box-shadow: 0 0 6px rgba(50,209,125,0.5); }
.indicator-dot.yellow { background: #f5c451; box-shadow: 0 0 6px rgba(245,196,81,0.5); }
.indicator-dot.red    { background: #ff5c5c; box-shadow: 0 0 6px rgba(255,92,92,0.5); }

/* ════════════════════════════════════════════════════════════
   DRAWER
════════════════════════════════════════════════════════════ */
.drawer { position: fixed; top: 0; right: -480px; width: 460px; height: 100%; background: #0d1118; box-shadow: -8px 0 24px rgba(0,0,0,0.5); border-left: 1px solid rgba(255,255,255,0.05); transition: right 0.28s cubic-bezier(0.4,0,0.2,1); z-index: 500; }
.drawer.open { right: 0; }
.drawer-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: #3d4a5c; font-size: 13px; }
.drawer-content { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #2a3040 transparent; }
.drawer-content::-webkit-scrollbar { width: 4px; }
.drawer-content::-webkit-scrollbar-thumb { background: #2a3040; border-radius: 4px; }
.drawer-header { position: sticky; top: 0; z-index: 10; background: #0d1118; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 18px 20px 14px 20px; display: flex; justify-content: space-between; align-items: flex-start; }
.drawer-title h2 { margin: 0 0 8px 0; font-size: 18px; font-weight: 700; color: #e8edf4; letter-spacing: -0.2px; }
.drawer-meta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cosco-id { font-size: 11px; color: #3d4a5c; letter-spacing: 0.5px; }
.close-btn { background: transparent; border: 1px solid rgba(255,255,255,0.08); color: #5a6270; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s ease; margin-top: 2px; }
.close-btn:hover { background: rgba(255,60,60,0.12); border-color: rgba(255,60,60,0.3); color: #ff5555; }
.drawer-body { padding: 0 20px 32px 20px; }
.drawer-section { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.drawer-section.last-section { border-bottom: none; }
.section-label { margin: 0 0 12px 0; font-size: 9.5px; font-weight: 700; color: #c0392b; text-transform: uppercase; letter-spacing: 1.4px; }
.empty-state-inline { color: #3d4a5c; font-size: 12px; margin: 4px 0 0 0; font-style: italic; }
.info-grid { display: grid; grid-template-columns: 148px 1fr; gap: 7px 10px; align-items: center; }
.ig-label { font-size: 11px; color: #3d4a5c; font-weight: 500; }
.ig-value { font-size: 12px; color: #c8d4e0; font-weight: 500; }
.ig-row { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
.highlight-value { font-size: 15px !important; font-weight: 700 !important; color: #ffffff !important; font-family: 'IBM Plex Mono', monospace; }
.ownership-row { display: flex; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; overflow: hidden; }
.owner-block { flex: 1; display: flex; flex-direction: column; padding: 10px 12px; border-right: 1px solid rgba(255,255,255,0.06); }
.owner-block:last-child { border-right: none; }
.owner-role { font-size: 9.5px; color: #3d4a5c; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; }
.owner-name { font-size: 13px; font-weight: 600; color: #c8d4e0; }
.lifecycle-track { display: flex; flex-direction: column; padding-left: 8px; }
.lifecycle-gate { display: flex; align-items: flex-start; gap: 12px; position: relative; min-height: 56px; }
.gate-connector { position: absolute; left: 7px; top: 20px; width: 2px; height: calc(100% + 2px); background: rgba(255,255,255,0.1); z-index: 0; }
.lifecycle-gate.complete .gate-connector { background: #32c864; box-shadow: 0 0 6px rgba(50,200,100,0.5); }
.gate-connector.hidden { display: none; }
.gate-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; position: relative; z-index: 1; border: 2px solid transparent; }
.lifecycle-gate.complete .gate-dot { background: #32c864; border-color: rgba(50,200,100,0.4); box-shadow: 0 0 8px rgba(50,200,100,0.4); }
.lifecycle-gate.pending  .gate-dot { background: #1a2030; border-color: rgba(255,255,255,0.12); }
.gate-content { flex: 1; padding-bottom: 14px; }
.gate-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.gate-name { font-size: 12.5px; font-weight: 600; color: #c8d4e0; }
.lifecycle-gate.pending .gate-name { color: #4a5a6a; }
.gate-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; letter-spacing: 0.3px; }
.gate-badge.complete    { background: rgba(50,200,100,0.12); color: #32c864; border: 1px solid rgba(50,200,100,0.22); }
.gate-badge.pending     { background: rgba(255,255,255,0.04); color: #3d4a5c; border: 1px solid rgba(255,255,255,0.08); }
.gate-badge.in-progress { background: rgba(245,180,60,0.12); color: #f5b840; border: 1px solid rgba(245,180,60,0.22); }
.gate-meta { display: flex; justify-content: space-between; align-items: center; }
.gate-owner { font-size: 11px; color: #3d4a5c; }
.gate-date  { font-size: 11px; color: #4a5a6a; }
.admin-block-label { font-size: 11px; font-weight: 600; color: #4a5a6a; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.coord-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.coord-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.coord-item { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 9px 12px; display: flex; flex-direction: column; gap: 3px; }
.coord-label { font-size: 9.5px; color: #3d4a5c; text-transform: uppercase; letter-spacing: 0.7px; }
.coord-value { font-size: 12px; font-weight: 600; color: #c8d4e0; }
.status-yes { color: #32c864 !important; }
.status-no  { color: #ff5555 !important; }
.hours-block { display: flex; flex-direction: column; gap: 14px; }
.hours-item  { display: flex; flex-direction: column; gap: 5px; }
.hours-head  { display: flex; justify-content: space-between; align-items: baseline; }
.hours-label { font-size: 11px; color: #4a5568; font-weight: 500; }
.hours-pct   { font-size: 12px; font-weight: 700; font-family: 'IBM Plex Mono', monospace; }
.hours-sub   { font-size: 11px; color: #3d4a5c; margin-top: 1px; }
.hours-total-block { display: flex; flex-direction: column; gap: 5px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 2px; }
.hours-total-label { font-size: 11px !important; font-weight: 700 !important; color: #7a8898 !important; }
.bar-track-total { height: 7px !important; }
.bar-track { width: 100%; height: 5px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.bar-fill.good    { background: linear-gradient(90deg, #1a7a44, #32c864); }
.bar-fill.warning { background: linear-gradient(90deg, #a06010, #f5b840); }
.bar-fill.danger  { background: linear-gradient(90deg, #8a1010, #ff4040); }
.bar-group { margin-bottom: 12px; }
.bar-group:last-of-type { margin-bottom: 0; }
.bar-group-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.po-summary-row { display: flex; align-items: center; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; overflow: hidden; }
.po-stat { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 10px; gap: 4px; }
.po-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.06); }
.po-stat-value { font-size: 18px; font-weight: 700; color: #c8d4e0; font-family: 'IBM Plex Mono', monospace; }
.po-stat-value.warn { color: #f5b840; }
.po-stat-label { font-size: 9.5px; color: #3d4a5c; text-transform: uppercase; letter-spacing: 0.7px; }
.billing-line { display: flex; justify-content: space-between; align-items: center; }
.ar-block-label { font-size: 11px; font-weight: 600; color: #4a5a6a; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ar-item { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.ar-item:last-child { margin-bottom: 0; }
.ar-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar-item-id   { font-size: 12px; font-weight: 600; color: #c8d4e0; }
.ar-item-desc { font-size: 11px; color: #4a5a6a; flex: 1; }
.aging-chip { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; white-space: nowrap; }
.aging-1-30   { background: rgba(50,200,100,0.10);  color: #32c864; border: 1px solid rgba(50,200,100,0.2); }
.aging-31-60  { background: rgba(245,180,60,0.10);  color: #f5b840; border: 1px solid rgba(245,180,60,0.2); }
.aging-61-90  { background: rgba(255,100,60,0.10);  color: #ff7040; border: 1px solid rgba(255,100,60,0.2); }
.aging-91-120 { background: rgba(255,60,60,0.12);   color: #ff4040; border: 1px solid rgba(255,60,60,0.2); }
.aging-120plus{ background: rgba(140,0,0,0.20);     color: #ff8080; border: 1px solid rgba(140,0,0,0.3); }
/* Path 1A D.1 — Estimator-specific aging chip thresholds (30/45/60 per locked architecture §5) */
.aging-est-0-30   { background: rgba(50,200,100,0.10);  color: #32c864; border: 1px solid rgba(50,200,100,0.2); }
.aging-est-31-45  { background: rgba(245,180,60,0.10);  color: #f5b840; border: 1px solid rgba(245,180,60,0.2); }
.aging-est-46-60  { background: rgba(255,100,60,0.10);  color: #ff7040; border: 1px solid rgba(255,100,60,0.2); }
.aging-est-60plus { background: rgba(255,60,60,0.12);   color: #ff4040; border: 1px solid rgba(255,60,60,0.2); }

/* Path 1A D.2 — Lifecycle stamps (chip pills color-matched to status pill) */
.est-lifecycle-stamp { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; }
.est-stamp-submitted { background: #3a3a1f; color: #ffd97a; }
.est-stamp-awarded   { background: #1f3a2a; color: #7ad9a3; }
.est-stamp-lost      { background: #3a1f1f; color: #ff7a7a; }
.est-stamp-rebound   { background: #1f3a3a; color: #5dd0d6; }
.sub-card { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.sub-card:last-child { margin-bottom: 0; }
.sub-name { font-size: 12.5px; font-weight: 700; color: #d8e0ec; margin-bottom: 10px; }
.sub-divider { height: 1px; background: rgba(255,255,255,0.05); margin: 10px 0; }
.sub-poc-label { font-size: 9.5px; font-weight: 600; color: #4a5a6a; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
.sub-grid { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; align-items: start; }
.sub-label { font-size: 11px; color: #3d4a5c; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; padding-top: 1px; }
.sub-value { font-size: 11.5px; color: #b8c4d0; }
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.doc-btn { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); color: #8a9aaa; padding: 10px 10px; border-radius: 8px; font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; font-weight: 500; text-align: left; cursor: pointer; transition: all 0.15s ease; }
.doc-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,60,60,0.25); color: #c8d4e0; }

/* ════════════════════════════════════════════════════════════
   MODAL
════════════════════════════════════════════════════════════ */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); z-index: 900; align-items: center; justify-content: center; padding: 24px; }
.modal-overlay.open { display: flex; }
.modal-window { background: #0d1118; border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; width: 100%; max-width: 700px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,0.7); overflow: hidden; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 22px 24px 16px 24px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.modal-title { margin: 0 0 4px 0; font-size: 18px; font-weight: 700; color: #e8edf4; }
.modal-subtitle { margin: 0; font-size: 11px; color: #3d4a5c; }
.modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: #2a3040 transparent; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }

/* ── PREREQUISITES BLOCK ──────────────────────────────────── */
.prereq-block {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 4px;
}

.prereq-title {
    font-size: 11px;
    font-weight: 700;
    color: #ff4040;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
}

.prereq-subtitle {
    font-size: 11px;
    color: #3d4a5c;
    margin: 0 0 14px 0;
}

.prereq-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.prereq-item:last-child { border-bottom: none; }

.prereq-check { display: none; }

.prereq-box {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-size: 12px;
    color: transparent;
}

.prereq-check:checked + .prereq-box {
    background: rgba(50,200,100,0.2);
    border-color: #32c864;
    color: #32c864;
}

.prereq-check:checked + .prereq-box::after {
    content: '✓';
    font-weight: 700;
    color: #32c864;
}

.prereq-label {
    font-size: 12.5px;
    color: #7a8898;
    font-weight: 500;
    transition: color 0.15s ease;
}

.prereq-check:checked ~ .prereq-label { color: #c8d4e0; }

/* prereq item locked state */
.prereq-item.locked .prereq-box { border-color: rgba(255,60,60,0.3); background: rgba(255,60,60,0.05); }

/* ── FORM ELEMENTS ────────────────────────────────────────── */
.form-section-label { font-size: 11px; font-weight: 700; color: #4a5a6a; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.form-row { display: flex; gap: 14px; margin-bottom: 14px; }
.form-group { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.form-group.full { flex: 2; }
.form-label { font-size: 11px; font-weight: 600; color: #4a5a6a; text-transform: uppercase; letter-spacing: 0.7px; }
.req { color: #ff5555; margin-left: 2px; }

.form-input, .form-select, .form-textarea {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #c8d4e0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12.5px;
    padding: 9px 12px;
    outline: none;
    transition: border-color 0.15s ease;
    width: 100%;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: rgba(255,60,60,0.4);
    background: rgba(255,255,255,0.06);
}

.form-input::placeholder, .form-textarea::placeholder { color: #3d4a5c; }
.form-select { cursor: pointer; }
.form-select option { background: #0d1118; color: #c8d4e0; }
/* Native <optgroup> labels — section dividers inside select dropdowns.
   Muted italic to distinguish from options. Hardcoded colors match the
   hardcoded .form-select option pattern so rendering is consistent across
   all themes (dark / light / high contrast / charcoal / ocean / soft light /
   forest / full tactical / charcoal silver / charcoal warm). */
.form-select optgroup {
    background: #0d1118;
    color: #7a8898;
    font-style: italic;
    font-weight: 700;
    padding: 4px 0;
}
.form-select optgroup option {
    background: #0d1118;
    color: #c8d4e0;
    font-style: normal;
    font-weight: normal;
    padding-left: 12px;
}
.form-select optgroup option:disabled {
    color: #4a5a6a;
    font-style: italic;
}
.form-textarea { resize: vertical; min-height: 72px; }
.form-divider { height: 1px; background: rgba(255,255,255,0.05); margin: 6px 0 18px 0; }
.form-input.error, .form-select.error { border-color: rgba(255,60,60,0.5) !important; }
.form-error-msg { font-size: 11px; color: #ff5555; margin-top: 2px; }

/* ── MODAL BUTTONS ────────────────────────────────────────── */
.cancel-btn { background: transparent; border: 1px solid rgba(255,255,255,0.08); color: #5a6270; padding: 9px 20px; border-radius: 8px; font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; }
.cancel-btn:hover { background: rgba(255,255,255,0.04); color: #8a9aaa; }

.save-btn { background: rgba(30,160,80,0.25); border: 1px solid rgba(50,200,100,0.4); color: #32c864; padding: 9px 24px; border-radius: 8px; font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; }
.save-btn:hover:not(:disabled) { background: rgba(30,160,80,0.40); border-color: rgba(50,200,100,0.6); color: #50e080; }
.save-btn:disabled { opacity: 0.35; cursor: not-allowed; color: #5a6270; border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }

/* ════════════════════════════════════════════════════════════
   DRAWER ACTION BUTTONS (Edit / Archive / Delete)
════════════════════════════════════════════════════════════ */
.drawer-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-top: 2px;
}

.drawer-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-top: 2px;
}

.drawer-action-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    color: #5a6270;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.drawer-action-btn:hover { background: rgba(255,255,255,0.05); color: #c8d4e0; }

.drawer-action-btn.edit-btn:hover {
    background: rgba(60,120,255,0.12);
    border-color: rgba(60,120,255,0.3);
    color: #6aa0ff;
}

.drawer-action-btn.archive-btn:hover {
    background: rgba(245,180,60,0.12);
    border-color: rgba(245,180,60,0.3);
    color: #f5b840;
}

.drawer-action-btn.delete-btn:hover {
    background: rgba(255,60,60,0.12);
    border-color: rgba(255,60,60,0.3);
    color: #ff5555;
}

/* ════════════════════════════════════════════════════════════
   EDIT FORM (in-drawer)
════════════════════════════════════════════════════════════ */
.edit-form-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding: 16px 20px 0 20px;
    scrollbar-width: thin;
    scrollbar-color: #2a3040 transparent;
}

.edit-form-header {
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.edit-form-title {
    font-size: 13px;
    font-weight: 600;
    color: #6aa0ff;
}

.edit-section-label {
    font-size: 9.5px;
    font-weight: 700;
    color: #c0392b;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin-bottom: 10px;
}

.edit-divider {
    height: 1px;
    background: rgba(255,255,255,0.05);
    margin: 6px 0 16px 0;
}

.edit-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.edit-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-group.full { flex: 2; }

.edit-label {
    font-size: 11px;
    font-weight: 600;
    color: #3d4a5c;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.edit-input,
.edit-select,
.edit-textarea {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 7px;
    color: #c8d4e0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    padding: 7px 10px;
    outline: none;
    transition: border-color 0.15s ease;
    width: 100%;
}

.edit-input:focus,
.edit-select:focus,
.edit-textarea:focus {
    border-color: rgba(60,120,255,0.4);
    background: rgba(255,255,255,0.06);
}

.edit-select { cursor: pointer; }
.edit-select option { background: #0d1118; color: #c8d4e0; }
.edit-textarea { resize: vertical; min-height: 64px; }

.edit-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 0 20px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 8px;
    position: sticky;
    bottom: 0;
    background: #0d1118;
}

/* Green save button variant for edit drawer */
.save-btn.green-save { background: rgba(30,160,80,0.25); border-color: rgba(50,200,100,0.4); color: #32c864; }

/* ════════════════════════════════════════════════════════════
   VIEW TOGGLE — Active / Archived
════════════════════════════════════════════════════════════ */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Estimates header only: stack the Import button beneath the view-toggle,
   centered under it (right-aligned region, not full page width). Scoped to
   .est-header-stack so the shared .page-header-actions row is unchanged. */
.est-header-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.view-toggle {
    display: flex;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
}

.toggle-btn {
    background: transparent;
    border: none;
    color: #3d4a5c;
    padding: 7px 14px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.toggle-btn:hover { color: #7a8898; background: rgba(255,255,255,0.03); }

.toggle-btn.active {
    background: rgba(255,60,60,0.15);
    color: #e0e6ef;
    border-radius: 6px;
}

/* ── Archived row style ───────────────────────────────────── */
.archived-row td { opacity: 0.45; }
.archived-row:hover td { opacity: 0.65; background: rgba(255,255,255,0.02); }
.archived-row .project-name-cell { color: #7a8898 !important; }

/* ════════════════════════════════════════════════════════════
   PURCHASE ORDER CARDS
════════════════════════════════════════════════════════════ */
.po-cards-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.po-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 12px 14px;
    transition: opacity 0.15s ease;
}

.po-card-closed {
    opacity: 0.4;
}

.po-card-closed:hover { opacity: 0.65; }

.po-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.po-card-number {
    font-size: 12.5px;
    font-weight: 700;
    color: #d8e0ec;
}

.po-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.po-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.po-card-row .ig-label { flex-shrink: 0; }
.po-card-row .ig-value { text-align: right; }

/* ════════════════════════════════════════════════════════════
   SUMMARY BAR
════════════════════════════════════════════════════════════ */
.summary-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: linear-gradient(135deg, #0f1520 0%, #0c1118 100%);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 12px;
    gap: 0;
    row-gap: 14px;
}

.summary-stat {
    flex: 1 1 160px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0 4px;
}

.summary-value {
    font-size: 20px;
    font-weight: 700;
    color: #c8d4e0;
    font-family: 'IBM Plex Mono', monospace;
    line-height: 1;
}

.summary-value.highlight { color: #32c864; }

.summary-label {
    font-size: 9.5px;
    color: #3d4a5c;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

.summary-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.06);
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   VIEW TOGGLE BAR (4-way)
════════════════════════════════════════════════════════════ */
.view-toggle-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 4px;
    width: fit-content;
}

.view-toggle-bar .toggle-btn {
    background: transparent;
    border: none;
    color: #3d4a5c;
    padding: 6px 16px;
    border-radius: 7px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.view-toggle-bar .toggle-btn:hover { color: #7a8898; }

.view-toggle-bar .toggle-btn.active {
    background: rgba(30,100,220,0.18);
    color: #e0e6ef;
    border: 1px solid rgba(60,140,255,0.25);
}

/* ── Completed row style ──────────────────────────────────── */
.completed-row td { opacity: 0.6; }
.completed-row:hover td { opacity: 0.8; background: rgba(255,255,255,0.02); }
.completed-row .project-name-cell { color: #7a8898 !important; }

/* ════════════════════════════════════════════════════════════
   ACTION ITEM CARDS (drawer)
════════════════════════════════════════════════════════════ */
.ai-count {
    font-size: 10.5px;
    color: #3d4a5c;
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.ai-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 12px 14px;
}

.ai-card.ai-overdue {
    border-color: rgba(255,60,60,0.25);
    background: rgba(255,60,60,0.04);
}

.ai-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ai-number {
    font-size: 11.5px;
    font-weight: 700;
    color: #7a8898;
}

.ai-chips {
    display: flex;
    gap: 5px;
}

.ai-description {
    font-size: 12.5px;
    color: #c8d4e0;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1.4;
}

.ai-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.ai-meta-item {
    display: flex;
    gap: 5px;
    align-items: baseline;
}

.ai-notes {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 11px;
    color: #4a5a6a;
    font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   RECORD TYPE TOGGLE (New Project form)
════════════════════════════════════════════════════════════ */
.record-type-toggle {
    display: flex;
    gap: 8px;
}

.record-type-btn {
    flex: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: #4a5a6a;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.record-type-btn:hover {
    background: rgba(255,255,255,0.06);
    color: #8a9aaa;
}

.record-type-btn.active {
    background: rgba(30,100,220,0.18);
    border-color: rgba(60,140,255,0.35);
    color: #e0e6ef;
}

/* ════════════════════════════════════════════════════════════
   ACTION ITEMS PAGE
════════════════════════════════════════════════════════════ */
.filter-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-select {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #c8d4e0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    padding: 7px 10px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease;
    min-width: 140px;
}

.filter-select:focus { border-color: rgba(255,60,60,0.4); }
.filter-select option { background: #0d1118; color: #c8d4e0; }

.overdue-row td { background: rgba(255,60,60,0.04) !important; }
.overdue-row:hover td { background: rgba(255,60,60,0.07) !important; }

/* ════════════════════════════════════════════════════════════
   CUSTOMER OUTREACH — GOAL CARDS
════════════════════════════════════════════════════════════ */
.outreach-goal-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.outreach-goal-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 12px 16px;
    min-width: 180px;
    flex: 1;
}

.outreach-goal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.outreach-goal-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #c8d4e0;
}

/* ════════════════════════════════════════════════════════════
   RESOLUTION NOTES — TIMESTAMPED LOG STYLE
════════════════════════════════════════════════════════════ */
#ai-drawer-resolution,
#ea-drawer-resolution,
#pl-drawer-resolution {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
    color: #b8c4d0 !important;
    min-height: 100px;
}

/* ════════════════════════════════════════════════════════════
   RESOLUTION NOTES LOG
════════════════════════════════════════════════════════════ */
.notes-log-display {
    background: transparent;
    border: none;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: #2a3040 transparent;
}

.notes-log-entry {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.notes-log-entry:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.notes-log-stamp {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    color: #3d4a5c;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.notes-log-text {
    font-size: 12px;
    color: #c8d4e0;
    line-height: 1.5;
    white-space: pre-wrap;
}

.notes-log-empty {
    font-size: 11px;
    color: #2a3240;
    font-style: italic;
}

.notes-add-block { margin-top: 4px; }

.notes-add-input {
    font-size: 12px !important;
    min-height: 56px !important;
}

/* ════════════════════════════════════════════════════════════
   NOTES vs RESOLUTION NOTES — visual separation
════════════════════════════════════════════════════════════ */
.notes-add-input::placeholder { color: #3d4a5c; font-style: italic; }

.notes-log-entry {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.notes-log-entry:last-child { border-bottom: none; }

.notes-log-stamp {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    color: #4a5a6a;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.notes-log-text {
    font-size: 12px;
    color: #c8d4e0;
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   THEME SYSTEM — CSS Variables
════════════════════════════════════════════════════════════ */

/* ── DARK THEME (default) ────────────────────────────────── */
body, body.theme-dark {
    --bg-primary:      #080c10;
    --bg-secondary:    #0d1118;
    --bg-panel:        #0f1520;
    --bg-hover:        rgba(255,255,255,0.04);
    --border-color:    rgba(255,255,255,0.06);
    --text-primary:    #e0e8f4;
    --text-secondary:  #b8c4d0;
    --text-muted:      #3d4a5c;
    --text-dim:        #7a8898;
    --accent:          #ff4040;
    --accent-hover:    #ff6060;
    --sidebar-bg:      #080c10;
    --drawer-bg:       #0d1118;
    --input-bg:        rgba(255,255,255,0.04);
    --input-border:    rgba(255,255,255,0.08);
    --scrollbar:       #1c2330;
}

/* ── LIGHT THEME ─────────────────────────────────────────── */
body.theme-light {
    --bg-primary:      #f0f2f5;
    --bg-secondary:    #ffffff;
    --bg-panel:        #ffffff;
    --bg-hover:        rgba(0,0,0,0.03);
    --border-color:    rgba(0,0,0,0.08);
    --text-primary:    #1a2030;
    --text-secondary:  #3a4a5a;
    --text-muted:      #8a9aaa;
    --text-dim:        #6a7a8a;
    --accent:          #cc2020;
    --accent-hover:    #ee3030;
    --sidebar-bg:      #ffffff;
    --drawer-bg:       #ffffff;
    --input-bg:        rgba(0,0,0,0.03);
    --input-border:    rgba(0,0,0,0.12);
    --scrollbar:       #d0d8e0;
}

/* ── HIGH CONTRAST THEME ─────────────────────────────────── */
body.theme-high-contrast {
    --bg-primary:      #000000;
    --bg-secondary:    #0a0a0a;
    --bg-panel:        #0d0d0d;
    --bg-hover:        rgba(255,255,255,0.08);
    --border-color:    rgba(255,255,255,0.15);
    --text-primary:    #ffffff;
    --text-secondary:  #e0e8ff;
    --text-muted:      #6080a0;
    --text-dim:        #a0b0c0;
    --accent:          #ff2020;
    --accent-hover:    #ff5050;
    --sidebar-bg:      #000000;
    --drawer-bg:       #0a0a0a;
    --input-bg:        rgba(255,255,255,0.06);
    --input-border:    rgba(255,255,255,0.2);
    --scrollbar:       #2a3a4a;
}

/* ── CHARCOAL THEME ──────────────────────────────────────── */
body.theme-charcoal {
    --bg-primary:      #1a1a1a;
    --bg-secondary:    #222222;
    --bg-panel:        #272727;
    --bg-hover:        rgba(255,255,255,0.04);
    --border-color:    rgba(255,255,255,0.07);
    --text-primary:    #e8e8e8;
    --text-secondary:  #b8b8b8;
    --text-muted:      #8a8a8a;
    --text-dim:        #888888;
    --accent:          #ff4040;
    --accent-hover:    #ff6060;
    --sidebar-bg:      #141414;
    --drawer-bg:       #222222;
    --input-bg:        rgba(255,255,255,0.05);
    --input-border:    rgba(255,255,255,0.1);
    --scrollbar:       #333333;
}

/* ── OCEAN THEME ─────────────────────────────────────────── */
body.theme-ocean {
    --bg-primary:      #0a1628;
    --bg-secondary:    #0e1e36;
    --bg-panel:        #112244;
    --bg-hover:        rgba(100,180,255,0.05);
    --border-color:    rgba(100,160,255,0.1);
    --text-primary:    #d0e8ff;
    --text-secondary:  #90b8e0;
    --text-muted:      #6a88b0;
    --text-dim:        #5a80a8;
    --accent:          #ff4040;
    --accent-hover:    #ff6060;
    --sidebar-bg:      #07101e;
    --drawer-bg:       #0e1e36;
    --input-bg:        rgba(100,160,255,0.06);
    --input-border:    rgba(100,160,255,0.15);
    --scrollbar:       #1a3050;
}

/* ── SOFT LIGHT THEME ────────────────────────────────────── */
body.theme-soft-light {
    --bg-primary:      #f5f0eb;
    --bg-secondary:    #ede8e2;
    --bg-panel:        #faf7f4;
    --bg-hover:        rgba(0,0,0,0.03);
    --border-color:    rgba(0,0,0,0.07);
    --text-primary:    #2a2018;
    --text-secondary:  #4a3828;
    --text-muted:      #9a8878;
    --text-dim:        #7a6858;
    --accent:          #cc2020;
    --accent-hover:    #ee3030;
    --sidebar-bg:      #ede8e2;
    --drawer-bg:       #faf7f4;
    --input-bg:        rgba(0,0,0,0.04);
    --input-border:    rgba(0,0,0,0.1);
    --scrollbar:       #c8b8a8;
}

/* ── FOREST THEME ────────────────────────────────────────── */
body.theme-forest {
    --bg-primary:      #0d1a0f;
    --bg-secondary:    #111f13;
    --bg-panel:        #152418;
    --bg-hover:        rgba(80,200,100,0.05);
    --border-color:    rgba(80,180,80,0.1);
    --text-primary:    #c8e8c0;
    --text-secondary:  #90b890;
    --text-muted:      #7aa87a;
    --text-dim:        #508050;
    --accent:          #ff4040;
    --accent-hover:    #ff6060;
    --sidebar-bg:      #090f0a;
    --drawer-bg:       #111f13;
    --input-bg:        rgba(80,180,80,0.06);
    --input-border:    rgba(80,180,80,0.15);
    --scrollbar:       #1a3a1a;
}

/* ── FULL TACTICAL THEME ─────────────────────────────────── */
/* Command-center aesthetic: atmospheric deep blue-black base,
   cyan informational accent, Cosco red preserved for danger only.
   See TACTICAL_REFERENCE_MOCKUP.html for the authoritative spec. */
body.theme-full-tactical {
    --bg-primary:      #05070b;
    --bg-secondary:    #0a0e15;
    --bg-panel:        #0d1219;
    --bg-hover:        rgba(110,160,240,0.05);
    --border-color:    rgba(120,170,230,0.08);
    --text-primary:    #e0e8f4;
    --text-secondary:  #b8c4d0;
    --text-muted:      #3a4658;
    --text-dim:        #7c8ba0;
    --accent:          #ff4040;
    --accent-hover:    #ff6060;
    --sidebar-bg:      #05070b;
    --drawer-bg:       #0a0e15;
    --input-bg:        rgba(110,160,240,0.06);
    --input-border:    rgba(110,160,240,0.15);
    --scrollbar:       #18223a;
    /* Tactical-theme-only additions: */
    --tac-info:        #4ec3ff;    /* cyan — informational primary */
    --tac-info-soft:   rgba(78,195,255,0.12);
    --tac-success:     #2edb7a;
    --tac-warn:        #f5b840;
    --tac-danger:      #ff5050;
    --tac-panel-grad:  linear-gradient(165deg, #0d1826 0%, #08101c 100%);
}

/* ════════════════════════════════════════════════════════════
   APPLY CSS VARIABLES TO ELEMENTS
════════════════════════════════════════════════════════════ */
body                { background: var(--bg-primary); color: var(--text-secondary); }
.sidebar            { background: var(--sidebar-bg); border-right-color: var(--border-color); }
.main-content       { background: var(--bg-primary); }
.panel              { background: var(--bg-panel); border-color: var(--border-color); }
.drawer             { background: var(--drawer-bg); border-left-color: var(--border-color); }
.drawer-header      { background: var(--drawer-bg); border-bottom-color: var(--border-color); }
.modal-window       { background: var(--drawer-bg); border-color: var(--border-color); }
.form-input,
.form-select,
.form-textarea,
.edit-input,
.edit-select,
.edit-textarea,
.filter-select      { background: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); }
.data-table th      { color: var(--text-muted); border-bottom-color: var(--border-color); }
.data-table td      { border-bottom-color: var(--border-color); color: var(--text-secondary); }
.page-title-block h1{ color: var(--text-primary); }
.nav-item           { color: var(--text-muted); }
.nav-item:hover     { background: var(--bg-hover); }
.sidebar-footer     { color: var(--text-muted); border-top-color: var(--border-color); }
.summary-bar        { background: var(--bg-panel); border-color: var(--border-color); }
.summary-value      { color: var(--text-secondary); }
.summary-label      { color: var(--text-muted); }
.summary-divider    { background: var(--border-color); }
.drawer-section     { border-bottom-color: var(--border-color); }
.ig-label           { color: var(--text-muted); }
.ig-value           { color: var(--text-secondary); }
.project-name-cell  { color: var(--text-primary) !important; }

/* Light theme specific overrides */
body.theme-light .nav-item.active     { background: rgba(30,100,220,0.12); color: #1a2030; border-color: rgba(60,140,255,0.25); }
body.theme-light .sidebar-logo-mark   { color: #cc2020; }
body.theme-light .section-label       { color: #cc2020; }
body.theme-light .data-table td       { color: #3a4a5a; }
body.theme-light .modal-body          { background: #ffffff; }
body.theme-light .modal-header        { background: #ffffff; border-bottom-color: rgba(0,0,0,0.08); }
body.theme-light .modal-footer        { background: #ffffff; border-top-color: rgba(0,0,0,0.08); }
body.theme-light .cancel-btn          { color: #5a6270; border-color: rgba(0,0,0,0.15); }
body.theme-light .cancel-btn:hover    { background: rgba(0,0,0,0.05); }
body.theme-light .close-btn           { color: #5a6270; border-color: rgba(0,0,0,0.12); }
body.theme-light .main-content        { background-image: none; }
body.theme-light .clickable-row:hover td { background: rgba(0,0,0,0.04) !important; color: #1a2030 !important; }
body.theme-light .clickable-row:hover .project-name-cell { color: #000000 !important; }
body.theme-light .data-table td       { color: #3a4a5a; }
body.theme-light .muted               { color: #6a7a8a !important; }
body.theme-light .mono                { color: #2a3a4a; }
body.theme-light .type-tag            { opacity: 1; }
body.theme-light .status-chip         { opacity: 1; }
body.theme-light .field-stage         { background: rgba(30,100,220,0.1); color: #1a60c0; border-color: rgba(30,100,220,0.2); }
body.theme-light .phase-tag           { background: rgba(0,0,0,0.06); color: #3a4a5a; border-color: rgba(0,0,0,0.1); }
body.theme-light .prereq-block        { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
body.theme-light .prereq-label        { color: #3a4a5a; }
body.theme-light .form-section-label  { color: #5a6a7a; border-bottom-color: rgba(0,0,0,0.06); }
body.theme-light .edit-section-label  { color: #cc2020; }
body.theme-light .ai-card             { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
body.theme-light .po-card             { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
body.theme-light .owner-block         { border-color: rgba(0,0,0,0.08); }
body.theme-light .notes-log-display   { background: rgba(0,0,0,0.02); }
body.theme-light .summary-value       { color: #1a2030; }
body.theme-light .summary-label       { color: #6a7a8a; }
body.theme-light .summary-bar         { background: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
body.theme-light .ig-label            { color: #7a8898; }
body.theme-light .ig-value            { color: #2a3a4a; }
body.theme-light .highlight-value     { color: #000000 !important; }
body.theme-light .owner-name          { color: #1a2030; }
body.theme-light .gate-name           { color: #2a3a4a; }
body.theme-light .coord-value         { color: #2a3a4a; }
body.theme-light .hours-label         { color: #5a6a7a; }
body.theme-light .drawer-title h2     { color: #1a2030; }
body.theme-light .gate-connector      { background: rgba(0,0,0,0.12); }
body.theme-light .lifecycle-gate.complete .gate-connector { background: #28a855; box-shadow: 0 0 6px rgba(40,168,85,0.4); }
body.theme-light .lifecycle-gate.pending .gate-name  { color: #8a9aaa; }
body.theme-light .lifecycle-gate.pending .gate-dot   { background: #d0d8e0; border-color: rgba(0,0,0,0.12); }
body.theme-light .gate-date           { color: #6a7a8a; }
body.theme-light .gate-owner          { color: #8a9aaa; }
body.theme-light .cosco-id            { color: #6a7a8a; }
body.theme-light .view-toggle-bar .toggle-btn { color: #5a6a7a; }
body.theme-light .view-toggle-bar .toggle-btn.active { color: #1a2030; background: rgba(30,100,220,0.12); }
body.theme-light .filter-select       { color: #2a3a4a; background: #ffffff; border-color: rgba(0,0,0,0.15); }
body.theme-light .table-message       { color: #8a9aaa; }

/* Soft Light specific overrides */
body.theme-soft-light .sidebar-logo-mark  { color: #cc2020; }
body.theme-soft-light .section-label      { color: #cc2020; }
body.theme-soft-light .data-table td      { color: #4a3828; }
body.theme-soft-light .modal-body         { background: #faf7f4; }
body.theme-soft-light .modal-header       { background: #faf7f4; border-bottom-color: rgba(0,0,0,0.07); }
body.theme-soft-light .modal-footer       { background: #faf7f4; border-top-color: rgba(0,0,0,0.07); }
body.theme-soft-light .cancel-btn         { color: #6a5848; border-color: rgba(0,0,0,0.12); }
body.theme-soft-light .close-btn          { color: #6a5848; border-color: rgba(0,0,0,0.12); }
body.theme-soft-light .main-content       { background-image: none; }
body.theme-soft-light .clickable-row:hover td { background: rgba(0,0,0,0.03) !important; }
body.theme-soft-light .filter-select      { color: #2a2018; background: #faf7f4; border-color: rgba(0,0,0,0.12); }
body.theme-soft-light .summary-bar        { background: #faf7f4; }
body.theme-soft-light .summary-value      { color: #2a2018; }
body.theme-soft-light .ig-label           { color: #9a8878; }
body.theme-soft-light .ig-value           { color: #2a2018; }
body.theme-soft-light .owner-name         { color: #2a2018; }
body.theme-soft-light .drawer-title h2    { color: #2a2018; }
body.theme-soft-light .table-message      { color: #9a8878; }

/* Ocean specific overrides */
body.theme-ocean .section-label           { color: #6ab0ff; }
body.theme-ocean .sidebar-logo-mark       { color: #ff4040; }

/* Forest specific overrides */
body.theme-forest .section-label          { color: #60c860; }
body.theme-forest .sidebar-logo-mark      { color: #ff4040; }

/* Charcoal specific overrides */
body.theme-charcoal .section-label        { color: #ff4040; }

/* High contrast specific overrides */
body.theme-high-contrast .data-table th { font-size: 11px; }
body.theme-high-contrast .data-table td { font-size: 13px; }
body.theme-high-contrast .project-name-cell { font-size: 14px !important; }
body.theme-high-contrast .status-chip  { font-size: 12px; padding: 4px 10px; }
body.theme-high-contrast .summary-value { font-size: 24px; }

/* ════════════════════════════════════════════════════════════
   SETTINGS PANEL
════════════════════════════════════════════════════════════ */
.settings-gear-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s ease;
    margin-left: auto;
}

.settings-gear-btn:hover { color: var(--text-dim); }

.sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.settings-panel {
    position: fixed;
    bottom: 60px;
    left: 16px;
    width: 240px;
    background: var(--drawer-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    z-index: 600;
    display: none;
}

.settings-panel.open { display: block; }

.settings-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.settings-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.settings-section-label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.theme-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.theme-btn {
    width: calc(33% - 6px);
    flex: none;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 8px 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 10px;
    color: var(--text-dim);
}

.theme-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.theme-btn.active { border-color: var(--accent); background: rgba(255,60,60,0.1); color: var(--text-primary); }

.theme-preview {
    width: 36px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
}

.theme-preview-dark       { background: linear-gradient(135deg, #080c10 0%, #ff4040 100%); }
.theme-preview-light      { background: linear-gradient(135deg, #f0f2f5 0%, #cc2020 100%); border-color: rgba(0,0,0,0.15); }
.theme-preview-hc         { background: linear-gradient(135deg, #000000 0%, #ff2020 100%); }
.theme-preview-charcoal   { background: linear-gradient(135deg, #1a1a1a 0%, #ff4040 100%); }
.theme-preview-ocean      { background: linear-gradient(135deg, #0a1628 0%, #6ab0ff 100%); }
.theme-preview-soft-light { background: linear-gradient(135deg, #f5f0eb 0%, #cc2020 100%); border-color: rgba(0,0,0,0.12); }
.theme-preview-forest     { background: linear-gradient(135deg, #0d1a0f 0%, #60c860 100%); }

/* ════════════════════════════════════════════════════════════
   CERTIFICATION CARDS
════════════════════════════════════════════════════════════ */
.cert-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.cert-card:last-child { margin-bottom: 0; }

.cert-card.cert-expired  { border-color: rgba(255,60,60,0.3);  background: rgba(255,60,60,0.04); }
.cert-card.cert-warning  { border-color: rgba(255,100,60,0.3); background: rgba(255,100,60,0.04); }

.cert-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.cert-type   { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.cert-number { font-size: 11px; color: var(--text-muted); }

.cert-card-body {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 6px 10px;
    align-items: baseline;
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD
════════════════════════════════════════════════════════════ */
.dash-kpi-strip {
    display: flex;
    align-items: center;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.dash-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 80px;
}

.dash-kpi-value {
    font-size: 22px;
    font-weight: 700;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--text-secondary);
    line-height: 1;
    margin-bottom: 4px;
}

.dash-kpi-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    text-align: center;
}

.dash-kpi-divider {
    width: 1px;
    height: 36px;
    background: var(--border-color);
    flex-shrink: 0;
}

.dash-grid-2 {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

/* Prevent canvas/table children from blowing out their column */
.dash-grid-2 > div {
    flex: 1;
    min-width: 0;
}



.dash-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* [Round I P3C] Panel header count badges — upgraded from faded gray mono
   text to a small glowing pill. Applies to all 11 panels that use this
   class: donut panel titles ("3 projects", "7% to goal"), section right-side
   counts (Action Items, Email, POs, Punch List, Outreach). Modifier classes
   (.danger-text / .warn-text / .success-text) swap the chip color while
   preserving the pill shape. Tactical theme layers a soft glow on top. */
.dash-panel-count {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 3px 10px;
    border-radius: 20px;
    line-height: 1.2;
    white-space: nowrap;
    color: #4ec3ff;
    background: rgba(78, 195, 255, 0.12);
    border: 1px solid rgba(78, 195, 255, 0.35);
}
.dash-panel-count.danger-text {
    color: #ff5050;
    background: rgba(255, 80, 80, 0.12);
    border-color: rgba(255, 80, 80, 0.40);
}
.dash-panel-count.warn-text {
    color: #f5b840;
    background: rgba(245, 184, 64, 0.12);
    border-color: rgba(245, 184, 64, 0.40);
}
.dash-panel-count.success-text {
    color: #2edb7a;
    background: rgba(46, 219, 122, 0.12);
    border-color: rgba(46, 219, 122, 0.40);
}
/* Tactical-theme glow halo for extra visual pop. */
body.theme-full-tactical .dash-panel-count {
    box-shadow: 0 0 8px rgba(78, 195, 255, 0.25),
                inset 0 0 12px rgba(78, 195, 255, 0.08);
}
body.theme-full-tactical .dash-panel-count.danger-text {
    box-shadow: 0 0 8px rgba(255, 80, 80, 0.30),
                inset 0 0 12px rgba(255, 80, 80, 0.10);
}
body.theme-full-tactical .dash-panel-count.warn-text {
    box-shadow: 0 0 8px rgba(245, 184, 64, 0.28),
                inset 0 0 12px rgba(245, 184, 64, 0.09);
}
body.theme-full-tactical .dash-panel-count.success-text {
    box-shadow: 0 0 8px rgba(46, 219, 122, 0.28),
                inset 0 0 12px rgba(46, 219, 122, 0.09);
}

/* ── BLEND RATE BADGE ──────────────────────────────────── */
.blend-rate-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(50,200,100,0.08);
    border: 1px solid rgba(50,200,100,0.2);
    border-radius: 8px;
    padding: 6px 14px;
}

.blend-rate-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #32c864;
}

.blend-rate-value {
    font-size: 18px;
    font-weight: 700;
    font-family: 'IBM Plex Mono', monospace;
    color: #32c864;
}

/* ── SIDEBAR ALERT BADGE ───────────────────────────────── */
.nav-alert-badge {
    margin-left: auto;
    background: rgba(255,60,60,0.2);
    border: 1px solid rgba(255,60,60,0.35);
    color: #ff6060;
    font-size: 9.5px;
    font-weight: 700;
    font-family: 'IBM Plex Mono', monospace;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* ════════════════════════════════════════════════════════════
   BILLING PAGE
════════════════════════════════════════════════════════════ */
.billing-tab-bar {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
}

.billing-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 20px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: -1px;
}

.billing-tab-btn:hover { color: var(--text-secondary); }
.billing-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

.billing-tab-content { display: none; }
.billing-tab-content.active { display: block; }

.billing-period-block { margin-bottom: 20px; }

.billing-period-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 6px;
}

.billing-period-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.billing-project-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD CHARTS
════════════════════════════════════════════════════════════ */
.dash-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

.dash-chart-panel {
    position: relative;
}

.dash-chart-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-chart-wrap canvas {
    max-width: 100%;
}

.dash-gauge-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -42%);
    text-align: center;
    pointer-events: none;
}

.dash-gauge-value {
    font-size: 18px;
    font-weight: 700;
    font-family: 'IBM Plex Mono', monospace;
    color: #c8d4e0;
    line-height: 1;
}

.dash-gauge-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #3d4a5c;
    margin-top: 3px;
}

@media (max-width: 1100px) {
    .dash-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .dash-grid-3 {
        grid-template-columns: 1fr;
    }
    .dash-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ── DASHBOARD TABLE SCROLL ─────────────────────────────── */
.dash-table-scroll {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
    position: relative;
}

.dash-table-scroll::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.dash-table-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.dash-table-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
}

.dash-table-scroll table {
    min-width: max-content;
}

/* ── CHART TOOLTIP ───────────────────────────────────────── */
.chart-tooltip {
    position: fixed;
    background: rgba(15,22,36,0.96);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: #c8d4e0;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transition: opacity 0.1s ease;
}

.chart-tooltip-label {
    font-size: 10px;
    color: #4a5a6a;
    margin-bottom: 2px;
    font-family: 'IBM Plex Sans', sans-serif;
}

.chart-tooltip-value {
    font-size: 13px;
    font-weight: 700;
}

/* ── COLLAPSIBLE SIDEBAR FOR DASHBOARD ──────────────────── */
.sidebar-collapsed {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-right: none !important;
}

.main-content-expanded {
    margin-left: 0 !important;
}

/* Smooth transition */
.sidebar {
    transition: width 0.25s ease, min-width 0.25s ease, padding 0.25s ease;
}

.main-content {
    transition: margin-left 0.25s ease;
}

/* Dashboard toggle button */
.dash-sidebar-toggle {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 16px;
    height: 48px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: none;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    color: #4a5a6a;
    font-size: 10px;
    transition: background 0.15s ease;
}

.dash-sidebar-toggle:hover {
    background: rgba(255,255,255,0.1);
    color: #c8d4e0;
}

.sidebar-collapsed ~ .main-content .dash-sidebar-toggle,
.page-dashboard .dash-sidebar-toggle {
    display: flex;
}

/* ── CLICKABLE KPI ───────────────────────────────────────── */
.dash-kpi-link {
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
    padding: 4px 6px;
    margin: -4px -6px;
}

.dash-kpi-link:hover {
    background: rgba(255,255,255,0.04);
}

.dash-kpi-link:hover .dash-kpi-label {
    color: #6aa0ff;
}

.dash-kpi-link .dash-kpi-label {
    transition: color 0.15s ease;
}

/* ── DASHBOARD LAYOUT FIXES ─────────────────────────────── */

/* Left column wrapper — don't stretch beyond content */
#page-dashboard .dash-grid-2 > div:first-child {
    align-self: start !important;
}

/* Allow panels to clip so scroll containers work correctly */
#page-dashboard .panel {
    overflow: hidden;
}

#page-dashboard .dash-table-scroll {
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Both dash-grid-2 columns shrink to their own content height.
   Prevents the taller right column from inflating the left column's panels. */
#page-dashboard .dash-grid-2 > div {
    align-self: start;
}

/* ── BILLING SELECTOR DISABLED (Dept Report tab) ─────────── */
.billing-selector-disabled {
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}
/* ── SECTION-LEVEL EDITING ─────────────────────────────── */
.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 8px;
}
.section-header-row .section-label {
    margin-bottom: 0;
}
.section-edit-btns {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.section-edit-btn {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 5px;
    border: 1px solid rgba(106,160,255,0.35);
    background: rgba(106,160,255,0.08);
    color: #6aa0ff;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background 0.15s, border-color 0.15s;
}
.section-edit-btn:hover {
    background: rgba(106,160,255,0.18);
    border-color: rgba(106,160,255,0.6);
}
.gate-check-btn {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 4px;
    border: 1px solid rgba(50,200,100,0.35);
    background: rgba(50,200,100,0.08);
    color: #32c864;
    cursor: pointer;
    transition: background 0.15s;
}
.gate-check-btn:hover { background: rgba(50,200,100,0.18); }
.gate-undo-btn {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.08);
    background: transparent;
    color: #4a5a6a;
    cursor: pointer;
    transition: color 0.15s;
}
.gate-undo-btn:hover { color: #f5b840; border-color: rgba(245,184,64,0.3); }

/* ── SECTION EDIT FORMS ────────────────────────────────── */
.se-form {
    padding: 14px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.se-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.se-group {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.se-group.se-check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.se-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #4a5a6a;
}
.se-input, .se-select {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    color: #c8d4e0;
    font-size: 12px;
    padding: 6px 10px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
}
.se-select {
    color-scheme: light;
    color: #1a2535;
    background: #fff;
}
.se-input:focus, .se-select:focus {
    border-color: rgba(106,160,255,0.5);
}
.se-input.mono { font-family: 'IBM Plex Mono', monospace; }
.se-checkbox { width: 15px; height: 15px; cursor: pointer; accent-color: #6aa0ff; }
.se-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.se-save-btn   { padding: 6px 18px; font-size: 11px; }
.se-cancel-btn { padding: 6px 14px; font-size: 11px; }
/* ── LOGIN OVERLAY ─────────────────────────────────────── */
.login-overlay {
    position: fixed;
    inset: 0;
    background: #0a1220;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.login-card {
    background: #111c2d;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 40px 36px 32px;
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.login-logo { text-align: center; }
.login-logo-mark {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #e0e8f4;
    letter-spacing: -0.5px;
    display: block;
}
.login-logo-sub {
    font-size: 11px;
    color: #4a5a6a;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-top: 2px;
}
.login-sub {
    text-align: center;
    font-size: 11px;
    color: #3d4a5c;
    margin-top: -8px;
}
.login-error {
    background: rgba(255,60,60,0.1);
    border: 1px solid rgba(255,60,60,0.25);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 11px;
    color: #ff5555;
}
.login-field { display: flex; flex-direction: column; gap: 5px; }
.login-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #4a5a6a;
}
.login-input {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    color: #c8d4e0;
    font-size: 13px;
    padding: 10px 14px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
}
.login-input:focus { border-color: rgba(106,160,255,0.5); }
.login-btn {
    width: 100%;
    padding: 11px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
    border-radius: 8px;
}

/* ── LOGOUT BUTTON ─────────────────────────────────────── */
.logout-btn {
    background: transparent;
    border: none;
    color: #3d4a5c;
    font-size: 11px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.15s;
    font-family: inherit;
}
.logout-btn:hover { color: #ff5555; }
/* ── TIMESHEET GRID ─────────────────────────────────────── */
.ts-grid { min-width: 700px; font-size: 11px; }
.ts-grid th { white-space: nowrap; }
.ts-grid td { vertical-align: middle; }
.ts-hours-input {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    color: #c8d4e0;
    font-family: 'IBM Plex Mono', monospace;
}
.ts-hours-input:focus {
    border-color: rgba(106,160,255,0.5);
    outline: none;
    background: rgba(106,160,255,0.06);
}
/* ── DAILY TIMESHEET ──────────────────────────────────────── */
.ts-week-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }

.ts-day-card {
    background: #111827;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 120px;
    min-width: 0;
    overflow: hidden;
}
.ts-day-card.ts-today  { border-color: rgba(230,60,60,0.35); background: #12141c; }

.ts-day-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.ts-day-name   { font-size: 13px; font-weight: 700; color: #c8d4e0; }
.ts-day-date   { font-size: 11px; color: #4a5a6a; }

.ts-day-entries { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ts-entry-row   { display: flex; align-items: center; gap: 6px; min-width: 0;
    background: rgba(255,255,255,0.03); border-radius: 4px; padding: 5px 7px;
    font-size: 11px; }

.ts-tab.active { border-bottom-color: #e63c3c !important; color: #c8d4e0 !important; }
.ts-tab:hover  { color: #c8d4e0 !important; }
/* ── TIMESHEET BADGE + TABS (updated) ────────────────────── */
.ts-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e63c3c;
    color: #fff;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 6px;
    vertical-align: middle;
}
.ts-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #4a5a6a;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 18px;
    cursor: pointer;
    letter-spacing: 0.6px;
    transition: color 0.15s;
}
.ts-tab:hover  { color: #c8d4e0; }
.ts-tab.active { border-bottom-color: #e63c3c; color: #c8d4e0; }
/* ── DRAWER BACKDROP ─────────────────────────────────────── */
.drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 499; /* just below drawer z-index of 500 */
    transition: opacity 0.28s ease;
}
.drawer-backdrop.active { display: block; }
/* ── DRAWER CONTRAST — dark/high-contrast themes ─────────── */
body.theme-dark .drawer,
body.theme-dark #ai-drawer,
body.theme-dark #ea-drawer,
body.theme-dark #pl-drawer {
    background: #1c2333;
    border-left-color: rgba(255,255,255,0.10);
    box-shadow: -8px 0 24px rgba(0,0,0,0.6);
}
body.theme-dark .drawer-header,
body.theme-dark #ai-drawer .drawer-header,
body.theme-dark #ea-drawer .drawer-header,
body.theme-dark #pl-drawer .drawer-header {
    background: #1c2333;
}
body.theme-high-contrast .drawer,
body.theme-high-contrast #ai-drawer,
body.theme-high-contrast #ea-drawer,
body.theme-high-contrast #pl-drawer {
    background: #1a2030;
    border-left-color: rgba(255,255,255,0.15);
    box-shadow: -8px 0 24px rgba(0,0,0,0.7);
}
body.theme-high-contrast .drawer-header,
body.theme-high-contrast #ai-drawer .drawer-header,
body.theme-high-contrast #ea-drawer .drawer-header,
body.theme-high-contrast #pl-drawer .drawer-header {
    background: #1a2030;
}
/* also update backdrop opacity */
.drawer-backdrop.active { display: block; background: rgba(0,0,0,0.72); }
/* ── TABLE HORIZONTAL SCROLL ─────────────────────────────── */
.table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { min-width: 600px; }
.data-table th, .data-table td { white-space: nowrap; }

/* ── FONT BRIGHTNESS — data text on dark/high-contrast ───── */
body.theme-dark .data-table td,
body.theme-high-contrast .data-table td { color: #c8d4e0; font-size: 13px; }
body.theme-dark .ig-value,
body.theme-high-contrast .ig-value { color: #c8d4e0; font-size: 13px; }
body.theme-dark .drawer-body,
body.theme-high-contrast .drawer-body { font-size: 13px; color: #c8d4e0; }
body.theme-dark .coord-value,
body.theme-high-contrast .coord-value { color: #c8d4e0; }
/* ── SCROLLABLE TABLE (5-row max with sticky header) ─────── */
.scrollable-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 188px; /* ~3 rows at ~48px each + header */
    -webkit-overflow-scrolling: touch;
}
.scrollable-table-wrap::-webkit-scrollbar { width: 5px; height: 5px; }
.scrollable-table-wrap::-webkit-scrollbar-track { background: transparent; }
.scrollable-table-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.scrollable-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
.scrollable-table-wrap .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-panel, #0f1520);
}
/* ── DASHBOARD CARD SCROLL ───────────────────────────────── */
.dash-table-scroll::-webkit-scrollbar { width: 4px; }
.dash-table-scroll::-webkit-scrollbar-track { background: transparent; }
.dash-table-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.dash-table-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
/* ── DASHBOARD TABLE FROZEN HEADERS + NO WORD WRAP ───────── */
.dash-table-scroll { overflow-x: auto; overflow-y: auto; }
.dash-table-scroll .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-panel, #0f1520);
    white-space: nowrap;
}
.dash-table-scroll .data-table td { white-space: nowrap; }
/* ── DASHBOARD FROZEN HEADERS FIX ───────────────────────── */
/* Inner table-scroll-wrap must NOT create a separate scroll context */
.dash-table-scroll .table-scroll-wrap {
    overflow: visible !important;
}
/* sticky only works when .dash-table-scroll is the scroll container */
.dash-table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
}
.dash-table-scroll .data-table {
    min-width: max-content;
}
.dash-table-scroll .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-panel, #0f1520);
    white-space: nowrap;
}
.dash-table-scroll .data-table td {
    white-space: nowrap;
}
/* ── ACTIVE PROJECTS CARD: snap rows, no mid-row clip ─────── */
#page-dashboard .dash-table-scroll[style*="scroll-snap"] .data-table tbody tr {
    scroll-snap-align: start;
}
/* Ensure the panel grows but aligns to bottom of right column */
#page-dashboard .dash-grid-2 > div:first-child {
    min-height: 0;
}
/* ── MODAL BOX (used by sub modal and others) ─────────────── */
.modal-box {
    background: #0d1118;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.7);
}

/* ── PROJECT HEALTH CHIPS ─────────────────────────────────── */
.health-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 3px 7px;
    border-radius: 20px;
    white-space: nowrap;
    font-family: 'IBM Plex Sans', sans-serif;
}
.health-on-track       { background: rgba(50,200,100,0.12);  border: 1px solid rgba(50,200,100,0.35);  color: #32c864; }
.health-needs-attention{ background: rgba(245,184,64,0.12);  border: 1px solid rgba(245,184,64,0.35);  color: #f5b840; }
.health-at-risk        { background: rgba(255,60,60,0.12);   border: 1px solid rgba(255,60,60,0.35);   color: #ff5555; }
.health-over-budget    { background: rgba(255,100,30,0.12);  border: 1px solid rgba(255,100,30,0.35);  color: #ff7030; }
.health-no-data        { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: #3d4a5c; }

/* Allow wrapping only on explicitly marked cells */
.data-table td.wrap-cell { white-space: normal; min-width: 180px; max-width: 300px; }
/* Tabbed timesheet history — sticky header + scroll */
.ts-history-panel .ts-history-scroll { position: relative; }
.ts-history-panel .ts-history-scroll thead th {
    position: sticky; top: 0; z-index: 2;
    background: #1c2330; color: #8090a0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}
.ts-history-panel .ts-history-tabs .ts-tab {
    font-size: 11px; padding: 8px 16px;
    background: transparent; color: #6a7a8a; border: none; cursor: pointer;
    border-bottom: 2px solid transparent;
}
.ts-history-panel .ts-history-tabs .ts-tab:hover { color: #b8c4d0; }
.ts-history-panel .ts-history-tabs .ts-tab.active {
    color: #ff5555; border-bottom-color: #ff5555; font-weight: 600;
}
.ts-history-panel .ts-history-filters input[type="date"],
.ts-history-panel .ts-history-filters select {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: #c8d4e0; border-radius: 4px;
}

/* Dashboard timesheet panel — sticky header within 5-row scroll cap */
.dash-ts-scroll thead th {
    position: sticky; top: 0; z-index: 2;
    background: #1c2330;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}
/* ─── ROUND G4 — Pipeline trend chart grid + Advanced filters ───────── */
.pipe-trend-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; flex-wrap: wrap; gap: 8px;
}
.pipe-trend-note {
    font-size: 10px; color: #3d4a5c; font-style: italic;
}
.pipe-trend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.pipe-trend-cell {
    background: #111a25;
    border: 1px solid #1e2a3a;
    border-radius: 6px;
    padding: 10px 12px;
}
.pipe-trend-cell-hdr {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px; min-height: 18px;
}
.pipe-trend-cell-hdr > span {
    font-size: 11px; color: #7a8898; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.pipe-chart-legend {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.pipe-trend-cell canvas {
    display: block; width: 100%; max-width: 100%;
}
/* [Round I P3] Split pipe-trend panels use .panel wrapper now — mirror the
   canvas sizing the old .pipe-trend-cell rule gave, so each chart fills its
   panel width without collapsing to the canvas intrinsic 300x150 default. */
.pipe-trend-grid > .panel canvas {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 180px;
}

/* Advanced filter collapse panel */
.pipe-advanced-panel {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #1e2a3a;
}
.pipe-advanced-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1.8fr;
    gap: 10px;
    align-items: end;
}
.pipe-adv-field label {
    font-size: 10px; color: #7a8898;
    display: block; margin-bottom: 3px;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.pipe-adv-field .filter-select,
.pipe-adv-field input.filter-select {
    width: 100%;
}

/* Narrow screens — collapse 2x2 to 1 column, advanced grid to 2 cols */
@media (max-width: 900px) {
    .pipe-trend-grid     { grid-template-columns: 1fr; }
    .pipe-advanced-grid  { grid-template-columns: 1fr 1fr; }
}

/* ─── PHASE 4 CLEANUP — unify chart cells + dashboard alignment ───── */

/* Match pipe-trend-cell to the main panel gradient so nested chart
   cells read as part of the same visual family as top-level panels. */
.pipe-trend-cell {
    background: linear-gradient(160deg, #0f1520 0%, #0c1118 100%);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 12px 14px;
}

/* Hide any summary-divider that wraps onto a new row (first/last visual
   element of a row looks like a floating bar). Safe because the tile
   itself visually separates without needing the divider. */
.summary-bar .summary-divider:first-child,
.summary-bar .summary-divider:last-child { display: none; }

/* ─── DASHBOARD TABLE ALIGNMENT ────────────────────────────────────── */
/* Right-align numeric columns, center date columns, scoped to each
   dashboard table via :has() so ordering is explicit and reversible. */

/* Active Projects — Value = col 5 (right); Start = col 9, Target = col 10 (center) */
.panel:has(#dash-projects-tbody) th:nth-child(5),
.panel:has(#dash-projects-tbody) td:nth-child(5) { text-align: right; }
.panel:has(#dash-projects-tbody) th:nth-child(9),
.panel:has(#dash-projects-tbody) td:nth-child(9),
.panel:has(#dash-projects-tbody) th:nth-child(10),
.panel:has(#dash-projects-tbody) td:nth-child(10) { text-align: center; }

/* Dashboard Action Items (right column) — AI # = col 1, Aging = col 4 (right); Due = col 8 (center) */
.panel:has(#dash-ai-tbody-right) th:nth-child(1),
.panel:has(#dash-ai-tbody-right) td:nth-child(1),
.panel:has(#dash-ai-tbody-right) th:nth-child(4),
.panel:has(#dash-ai-tbody-right) td:nth-child(4) { text-align: right; }
.panel:has(#dash-ai-tbody-right) th:nth-child(8),
.panel:has(#dash-ai-tbody-right) td:nth-child(8) { text-align: center; }

/* Dashboard Email Actions (right column) — Aging = col 4 (right); Due = col 5 (center) */
.panel:has(#dash-ea-tbody-right) th:nth-child(4),
.panel:has(#dash-ea-tbody-right) td:nth-child(4) { text-align: right; }
.panel:has(#dash-ea-tbody-right) th:nth-child(5),
.panel:has(#dash-ea-tbody-right) td:nth-child(5) { text-align: center; }

/* Dashboard Purchase Orders — Amount = col 2, Remaining = col 3 (right) */
.panel:has(#dash-po-tbody) th:nth-child(2),
.panel:has(#dash-po-tbody) td:nth-child(2),
.panel:has(#dash-po-tbody) th:nth-child(3),
.panel:has(#dash-po-tbody) td:nth-child(3) { text-align: right; }

/* Dashboard Punch List — Due = col 5 (center) */
.panel:has(#dash-pl-tbody) th:nth-child(5),
.panel:has(#dash-pl-tbody) td:nth-child(5) { text-align: center; }

/* Mono font for all numeric columns keeps digit alignment consistent */
.panel:has(#dash-projects-tbody) td:nth-child(5),
.panel:has(#dash-po-tbody) td:nth-child(2),
.panel:has(#dash-po-tbody) td:nth-child(3),
.panel:has(#dash-ai-tbody-right) td:nth-child(1),
.panel:has(#dash-ai-tbody-right) td:nth-child(4),
.panel:has(#dash-ea-tbody-right) td:nth-child(4) {
    font-family: 'IBM Plex Mono', monospace;
}

/* Normalize dashboard side-panel scroll caps so they line up visually */
.dash-grid-2 > div:nth-child(2) .dash-table-scroll { max-height: 170px; }
/* ════════════════════════════════════════════════════════════
   ROUND I — PHASE 1 FOUNDATION
   Added: Apr 22 2026. Full Tactical theme visuals + utility
   classes used by Phase 2+. See TACTICAL_REFERENCE_MOCKUP.html
   for authoritative spec.
════════════════════════════════════════════════════════════ */

/* Theme preview swatch for the 8th theme picker option */
.theme-preview-full-tactical {
    background: linear-gradient(135deg, #05070b 0%, #4ec3ff 100%);
}

/* ── FULL TACTICAL — ATMOSPHERIC BASE ────────────────────── */
/* Radial glow at top of main-content + bottom-corner ambient tints.
   Kept subtle; these are visible without forcing anyone's eye to work. */
body.theme-full-tactical .main-content {
    background:
        radial-gradient(ellipse 900px 500px at 50% -10%, rgba(78,195,255,0.12), transparent 60%),
        radial-gradient(ellipse 400px 300px at 5% 100%, rgba(46,219,122,0.04), transparent 70%),
        radial-gradient(ellipse 400px 300px at 95% 100%, rgba(78,195,255,0.04), transparent 70%),
        var(--bg-primary);
    background-attachment: fixed, fixed, fixed, fixed;
}

/* Cyan top-strip on every panel — the "power rail" signature.
   z-index:1 keeps it above the panel bg but below any content. */
body.theme-full-tactical .panel {
    background: var(--tac-panel-grad);
    position: relative;
    overflow: hidden;
}
body.theme-full-tactical .panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tac-info), transparent);
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
}

/* Monospace cyan section labels + data-table headers */
body.theme-full-tactical .section-label {
    font-family: 'IBM Plex Mono', monospace;
    color: var(--tac-info);
    letter-spacing: 1.4px;
    font-weight: 600;
}
body.theme-full-tactical .data-table th {
    font-family: 'IBM Plex Mono', monospace;
    color: var(--tac-info);
    letter-spacing: 0.8px;
}

/* Sidebar logo mark stays Cosco red across tactical (brand) */
body.theme-full-tactical .sidebar-logo-mark { color: var(--accent); }

/* Nav active-state gets cyan ambient glow in tactical */
body.theme-full-tactical .nav-item.active {
    background: var(--tac-info-soft);
    color: var(--text-primary);
    border-color: rgba(78,195,255,0.25);
}

/* ── UTILITY CLASSES — used by Phase 2+ ──────────────────── */
/* Rule: defined once here, consumed by markup changes later.
   Do NOT apply these globally to existing tables yet — Phase 5
   does that pass deliberately, one page at a time. */

/* .table-scroll — horizontal + vertical scroll wrapper.
   Inner <table> should use min-width: max-content to preserve
   natural column widths. Headers stay sticky via position:sticky. */
.table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 320px;
    border-radius: 6px;
}
.table-scroll table {
    min-width: max-content;
    width: 100%;
}
.table-scroll th,
.table-scroll td {
    white-space: nowrap;
}
.table-scroll thead th {
    position: sticky;
    top: 0;
    background: var(--bg-panel);
    z-index: 2;
}
/* Styled scrollbars — thin, cyan-tinted in tactical, neutral elsewhere */
.table-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border-radius: 4px;
}
.table-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
body.theme-full-tactical .table-scroll::-webkit-scrollbar-thumb {
    background: rgba(78,195,255,0.25);
}
body.theme-full-tactical .table-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(78,195,255,0.45);
}

/* .hdr-chip — small status pill in panel headers.
   Variants: info (cyan), success (green), warn (amber),
   danger (red), muted (gray). */
.hdr-chip {
    display: inline-flex;
    align-items: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    line-height: 1.2;
    white-space: nowrap;
}
.hdr-chip.info    { background: rgba(78,195,255,0.12);  color: #4ec3ff; }
.hdr-chip.success { background: rgba(46,219,122,0.14);  color: #2edb7a; }
.hdr-chip.warn    { background: rgba(245,184,64,0.15);  color: #f5b840; }
.hdr-chip.danger  { background: rgba(255,80,80,0.15);   color: #ff8080; }
.hdr-chip.muted   { background: rgba(255,255,255,0.05); color: var(--text-dim); }

.hdr-chips {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* .hdr-drill — subtle drill-in arrow at far right of header */
.hdr-drill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    color: var(--text-dim);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
    margin-left: 4px;
}
.hdr-drill:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* .status-ring — 10px colored circle next to row names.
   Variants: green (On Track), amber (Watch), red (At Risk),
   gray (default/no data). */
.status-ring {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4a5868;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}
.status-ring.green { background: #2edb7a; box-shadow: 0 0 6px rgba(46,219,122,0.5); }
.status-ring.amber { background: #f5b840; box-shadow: 0 0 6px rgba(245,184,64,0.5); }
.status-ring.red   { background: #ff5050; box-shadow: 0 0 8px rgba(255,80,80,0.6); }
.status-ring.gray  { background: #4a5868; }

/* .live-dot — pulsing green indicator for dashboard header.
   Kept subtle — this is a signal, not a siren. */
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2edb7a;
    box-shadow: 0 0 6px rgba(46,219,122,0.6);
    animation: live-pulse 2.2s ease-in-out infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.88); }
}

/* ════════════════════════════════════════════════════════════
   ROUND I — PHASE 2A  HERO ROW
   Revenue Pace panel + Backlog compact tile + gauge pair.
   CRITICAL: the height pattern.
     - .pace-panel carries min-height: 280 (drives row height)
     - .hero-right-stack has NO height / NO min-height — absorbs via flex
     - .hero-gauge-pair has flex:1 + min-height:0 — eats remaining space
     - The CSS grid's default align-items:stretch makes right col match left.
   Setting height on both columns fights in the grid cell → thread 6 Phase 3.
   Do NOT reintroduce height:... on .hero-right-stack.
════════════════════════════════════════════════════════════ */

.kpi-tier-hero {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

/* ── REVENUE PACE PANEL (LEFT) ─────────────────────────── */
.pace-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px 10px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    max-height: 340px;
}
/* In tactical theme, the power-rail strip from .panel::before already applies
   because .pace-panel is themed via the same tactical overrides below. */
body.theme-full-tactical .pace-panel {
    background: var(--tac-panel-grad);
}
body.theme-full-tactical .pace-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tac-info), transparent);
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
}

.pace-hdr {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
    gap: 12px;
}
.pace-lbl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--text-primary);
    font-weight: 600;
}
body.theme-full-tactical .pace-lbl { color: var(--tac-info); }
.pace-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 2px;
}
.pace-delta { text-align: right; }
.pace-delta-val {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.2px;
    color: var(--text-primary);
}
.pace-delta-val.ahead { color: #2edb7a; }
.pace-delta-val.behind { color: #ff5050; }
.pace-delta-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 3px;
}
.pace-chart-wrap {
    height: 200px;
    margin-top: 4px;
    position: relative;
}
.pace-chart-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
}
.pace-legend {
    display: flex;
    gap: 18px;
    justify-content: center;
    padding: 6px 0 2px;
    flex-wrap: wrap;
}
.pace-leg-item {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.pace-swatch {
    display: inline-block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
}
.pace-swatch-dashed {
    display: inline-block;
    width: 18px;
    height: 2px;
    background-image: linear-gradient(to right, var(--swatch-color, #fff) 50%, transparent 50%);
    background-size: 5px 2px;
    background-repeat: repeat-x;
}

/* ── RIGHT COLUMN STACK ─────────────────────────────────── */
/* NO height / NO min-height on this container. Intentional. */
.hero-right-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 0;
}

/* BACKLOG HERO TILE — compact, sizes to content */
.hero-tile {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px 16px 10px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.hero-tile-compact {
    min-height: 0;
    padding: 12px 14px 10px;
}
body.theme-full-tactical .hero-tile { background: var(--tac-panel-grad); }
body.theme-full-tactical .hero-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tac-info), transparent);
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
}
.hero-lbl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--text-dim);
    font-weight: 600;
    margin-bottom: 6px;
}
body.theme-full-tactical .hero-lbl { color: var(--tac-info); }
.hero-val {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.hero-tile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.hero-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 2px;
}
.hero-tile:hover {
    border-color: rgba(78,195,255,0.3);
}

/* GAUGE PAIR — flex:1 eats remaining height under Backlog tile */
.hero-gauge-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    flex: 1;
    min-height: 0;
}
.gauge-tile {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    overflow: hidden;
    position: relative;
}
body.theme-full-tactical .gauge-tile { background: var(--tac-panel-grad); }
body.theme-full-tactical .gauge-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tac-info), transparent);
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
}
.gauge-lbl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--text-dim);
    font-weight: 600;
    text-align: center;
    margin-bottom: 4px;
}
body.theme-full-tactical .gauge-lbl { color: var(--tac-info); }
.gauge-canvas-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.gauge-canvas-wrap canvas {
    max-width: 100%;
    max-height: 100%;
}
.gauge-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-top: 4px;
    text-align: center;
}

/* ════════════════════════════════════════════════════════════
   ROUND I — PHASE 2B  TIERED KPI STRIP (2 rows x 8 tiles)
   Row 1 = Operational · Row 2 = Pipeline
   Fixed uniform tile height via 2-line-reserved label + value.
   Replaces the old single-row .dash-kpi-strip layout.
════════════════════════════════════════════════════════════ */

.dash-kpi-strip-tiered {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}

.dash-kpi-row {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 0.9fr));
    gap: 22px;
}

.dash-kpi-tile {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 12px 11px;
    min-height: 74px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s;
}
body.theme-full-tactical .dash-kpi-tile {
    background: var(--tac-panel-grad);
}
body.theme-full-tactical .dash-kpi-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tac-info), transparent);
    opacity: 0.5;
    pointer-events: none;
}

.dash-kpi-tile.dash-kpi-link {
    cursor: pointer;
}
.dash-kpi-tile.dash-kpi-link:hover {
    border-color: rgba(78,195,255,0.3);
}
body.theme-full-tactical .dash-kpi-tile.dash-kpi-link:hover {
    border-color: rgba(78,195,255,0.5);
}

.dash-kpi-tile-lbl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-dim);
    line-height: 1.3;
    /* Reserve 2-line height for uniform tile sizing even when a label is short */
    height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
}
body.theme-full-tactical .dash-kpi-tile-lbl {
    color: var(--tac-info);
}

.dash-kpi-tile-val {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    margin-top: auto;
    text-align: left;
}
.dash-kpi-tile-val.success-text { color: #2edb7a; }
.dash-kpi-tile-val.warn-text    { color: #f5b840; }
.dash-kpi-tile-val.danger-text  { color: #ff5050; }

/* ════════════════════════════════════════════════════════════
   ROUND I — PHASE 2C  Chart panel unification in Tactical theme
   The 4 pipeline trend cells + 3 donut chart panels did not share
   the .panel base, so the Tactical override that sets the shared
   gradient background + cyan top-strip did not reach them.
   This makes every chart container read as one visual family.
════════════════════════════════════════════════════════════ */

body.theme-full-tactical .pipe-trend-cell,
body.theme-full-tactical .dash-chart-panel {
    background: var(--tac-panel-grad);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}
body.theme-full-tactical .pipe-trend-cell::before,
body.theme-full-tactical .dash-chart-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tac-info), transparent);
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
}
/* ════════════════════════════════════════════════════════════
   ROUND I — PHASE 3A  Backlog sparkline inside hero tile
   Compact line chart — no axes, no labels, pure trend.
   Lives between the value and the sub-label.
════════════════════════════════════════════════════════════ */

.hero-spark-wrap {
    width: 100%;
    height: 32px;
    margin: 6px 0 4px 0;
    position: relative;
}
.hero-spark-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
}
/* ════════════════════════════════════════════════════════════
   CHARCOAL SILVER THEME  (Variant A)
   Cool silver accents on deep charcoal. Preserves semantic colors.
════════════════════════════════════════════════════════════ */

body.theme-charcoal-silver {
    --bg-primary:      #0a0c10;
    --bg-secondary:    #11141a;
    --bg-panel:        #161a20;
    --bg-hover:        rgba(210,216,224,0.05);
    --border-color:    rgba(210,216,224,0.08);
    --text-primary:    #eef1f5;
    --text-secondary:  #c2c8d0;
    --text-muted:      #3d4550;
    --text-dim:        #8a94a0;
    --accent:          #ff4040;
    --accent-hover:    #ff6060;
    --sidebar-bg:      #0a0c10;
    --drawer-bg:       #11141a;
    --input-bg:        rgba(210,216,224,0.06);
    --input-border:    rgba(210,216,224,0.15);
    --scrollbar:       #1f2530;
    --tac-info:        #d2d8e0;
    --tac-info-soft:   rgba(210,216,224,0.12);
    --tac-success:     #2edb7a;
    --tac-warn:        #f5b840;
    --tac-danger:      #ff5050;
    --tac-panel-grad:  linear-gradient(165deg, #242830 0%, #1b1e23 100%);
}

body.theme-charcoal-silver .main-content {
    background: radial-gradient(circle at 50% 0%, #15181f 0%, #0a0c10 100%);
}
body.theme-charcoal-silver .panel {
    background: var(--tac-panel-grad);
    border: 1px solid rgba(210,216,224,0.08);
    position: relative;
}
body.theme-charcoal-silver .panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(210,216,224,0.35), transparent);
    pointer-events: none;
}
body.theme-charcoal-silver .section-label {
    color: var(--tac-info);
}
body.theme-charcoal-silver .data-table th {
    color: var(--tac-info);
}
body.theme-charcoal-silver .dash-kpi-tile {
    background: var(--tac-panel-grad);
}
body.theme-charcoal-silver .dash-kpi-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tac-info), transparent);
    opacity: 0.45;
    pointer-events: none;
}
body.theme-charcoal-silver .dash-kpi-tile-lbl {
    color: var(--tac-info);
}
body.theme-charcoal-silver .dash-panel-count {
    box-shadow: 0 0 8px rgba(210,216,224,0.18),
                inset 0 0 10px rgba(210,216,224,0.06);
}
body.theme-charcoal-silver .pipe-trend-cell,
body.theme-charcoal-silver .dash-chart-panel {
    background: var(--tac-panel-grad);
    position: relative;
}
body.theme-charcoal-silver .hero-tile {
    background: var(--tac-panel-grad);
}
body.theme-charcoal-silver .hero-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tac-info), transparent);
    opacity: 0.45;
    pointer-events: none;
}
body.theme-charcoal-silver .hero-lbl,
body.theme-charcoal-silver .gauge-lbl,
body.theme-charcoal-silver .pace-title {
    color: var(--tac-info);
}
body.theme-charcoal-silver .gauge-tile {
    background: var(--tac-panel-grad);
}
body.theme-charcoal-silver .gauge-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tac-info), transparent);
    opacity: 0.45;
    pointer-events: none;
}
body.theme-charcoal-silver .pace-panel {
    background: var(--tac-panel-grad);
}
body.theme-charcoal-silver .pace-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tac-info), transparent);
    opacity: 0.45;
    pointer-events: none;
}
.theme-preview-charcoal-silver {
    background: linear-gradient(135deg, #0a0c10 0%, #d2d8e0 100%);
}

/* ════════════════════════════════════════════════════════════
   CHARCOAL WARM THEME  (Variant B)
   Warm cream-white accents on deep charcoal. Preserves semantic colors.
════════════════════════════════════════════════════════════ */

body.theme-charcoal-warm {
    --bg-primary:      #0b0b0c;
    --bg-secondary:    #141415;
    --bg-panel:        #18181a;
    --bg-hover:        rgba(235,230,220,0.05);
    --border-color:    rgba(235,230,220,0.07);
    --text-primary:    #f5f1e8;
    --text-secondary:  #c4bfb5;
    --text-muted:      #6e6a62;
    --text-dim:        #8a8580;
    --accent:          #ff4040;
    --accent-hover:    #ff6060;
    --sidebar-bg:      #0b0b0c;
    --drawer-bg:       #141415;
    --input-bg:        rgba(235,230,220,0.06);
    --input-border:    rgba(235,230,220,0.14);
    --scrollbar:       #26231f;
    --tac-info:        #ebe6dc;
    --tac-info-soft:   rgba(235,230,220,0.1);
    --tac-success:     #2edb7a;
    --tac-warn:        #f5b840;
    --tac-danger:      #ff5050;
    --tac-panel-grad:  linear-gradient(165deg, #242626 0%, #1a1b1c 100%);
}

body.theme-charcoal-warm .main-content {
    background: radial-gradient(circle at 50% 0%, #1c1c1a 0%, #0b0b0c 100%);
}
body.theme-charcoal-warm .panel {
    background: var(--tac-panel-grad);
    border: 1px solid rgba(235,230,220,0.07);
    position: relative;
}
body.theme-charcoal-warm .panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(235,230,220,0.3), transparent);
    pointer-events: none;
}
body.theme-charcoal-warm .section-label {
    color: var(--tac-info);
}
body.theme-charcoal-warm .data-table th {
    color: var(--tac-info);
}
body.theme-charcoal-warm .dash-kpi-tile {
    background: var(--tac-panel-grad);
}
body.theme-charcoal-warm .dash-kpi-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tac-info), transparent);
    opacity: 0.40;
    pointer-events: none;
}
body.theme-charcoal-warm .dash-kpi-tile-lbl {
    color: var(--tac-info);
}
body.theme-charcoal-warm .dash-panel-count {
    box-shadow: 0 0 8px rgba(235,230,220,0.15),
                inset 0 0 10px rgba(235,230,220,0.05);
}
body.theme-charcoal-warm .pipe-trend-cell,
body.theme-charcoal-warm .dash-chart-panel {
    background: var(--tac-panel-grad);
    position: relative;
}
body.theme-charcoal-warm .hero-tile {
    background: var(--tac-panel-grad);
}
body.theme-charcoal-warm .hero-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tac-info), transparent);
    opacity: 0.40;
    pointer-events: none;
}
body.theme-charcoal-warm .hero-lbl,
body.theme-charcoal-warm .gauge-lbl,
body.theme-charcoal-warm .pace-title {
    color: var(--tac-info);
}
body.theme-charcoal-warm .gauge-tile {
    background: var(--tac-panel-grad);
}
body.theme-charcoal-warm .gauge-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tac-info), transparent);
    opacity: 0.40;
    pointer-events: none;
}
body.theme-charcoal-warm .pace-panel {
    background: var(--tac-panel-grad);
}
body.theme-charcoal-warm .pace-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tac-info), transparent);
    opacity: 0.40;
    pointer-events: none;
}
.theme-preview-charcoal-warm {
    background: linear-gradient(135deg, #0b0b0c 0%, #ebe6dc 100%);
}
/* ════════════════════════════════════════════════════════════
   LIGHT + SOFT LIGHT — shadow depth parity
   The dashboard's lower panels (via .panel base class) already
   have box-shadow: 0 8px 32px rgba(0,0,0,0.45). The hero tiles,
   gauges, pace panel, and KPI tiles don't use .panel so they stay
   flat without this. Adds matching depth to those elements so the
   whole dashboard reads as a consistent 3D surface.
════════════════════════════════════════════════════════════ */

body.theme-light .hero-tile,
body.theme-light .gauge-tile,
body.theme-light .pace-panel,
body.theme-light .dash-kpi-tile,
body.theme-light .pipe-trend-cell {
    background: linear-gradient(165deg, #ffffff 0%, #f4f6f9 100%);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}

body.theme-soft-light .hero-tile,
body.theme-soft-light .gauge-tile,
body.theme-soft-light .pace-panel,
body.theme-soft-light .dash-kpi-tile,
body.theme-soft-light .pipe-trend-cell {
    background: linear-gradient(165deg, #faf7f4 0%, #f1ebe4 100%);
    border: 1px solid rgba(0,0,0,0.07);
    box-shadow: 0 8px 32px rgba(80,60,40,0.45);
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase 1.7 — Estimator Tab States
   ═══════════════════════════════════════════════════════════════════════
   Extends .toggle-btn (canonical Pipeline tab pattern) with three
   additional states beyond the existing .active:
     .complete       — green text + leading checkmark; criteria met
     .locked         — dimmed gray + leading lock icon; prior phase incomplete
     (default)       — neutral; this is the "next available" state

   A tab can be both .complete AND .active simultaneously (revisiting a
   completed tab) — composite styling renders correctly because .active
   handles its own background while .complete handles color + ::before. */

/* ═══════════════════════════════════════════════════════════════════════
   Phase 1.7c-final — Lifecycle tab badges (pill style)
   ═══════════════════════════════════════════════════════════════════════
   Replaces the bare-text-with-underline pattern with a pill-shaped badge
   per tab. Each tab now has visual weight so the workflow boundary is
   obvious at a glance. States:
     (default)       neutral pill, dim border + bg, gray text
     .active         blue tint pill — current tab
     .complete       green tint + ✓ prefix — phase done
     .complete.active blue tint background, green text+✓ — current AND done
     .locked         dim+gray, cursor:not-allowed — prior phase incomplete
     .viewport       outline-only (transparent bg) — BOM viewport, distinct
                     from phases so it doesn't read as "the 8th phase"

   Separator (.est-tab-separator) is a vertical divider between phases
   and viewports. Visual cue: lifecycle ends, viewport begins. */

.est-tab-bar .toggle-btn.est-tab {
    /* Override .toggle-btn defaults — pill badge, not underlined text */
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 6px 14px;
    color: #a8b2bd;
    font-weight: 600;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.est-tab-bar .toggle-btn.est-tab:hover {
    background: rgba(255,255,255,0.06);
    color: #c8d4e0;
    border-color: rgba(255,255,255,0.18);
}
.est-tab-bar .toggle-btn.est-tab.active {
    background: rgba(60,140,255,0.16);
    color: #6aa0ff;
    border-color: rgba(60,140,255,0.40);
}
.est-tab-bar .toggle-btn.est-tab.active:hover {
    background: rgba(60,140,255,0.22);
    color: #8eb6ff;
}
/* Completed phases — green text + ✓ prefix */
.est-tab-bar .toggle-btn.est-tab.complete {
    color: #32c864;
    border-color: rgba(50,200,100,0.25);
    background: rgba(50,200,100,0.06);
}
.est-tab-bar .toggle-btn.est-tab.complete::before {
    content: '\2713 ';
    margin-right: 4px;
    font-weight: 700;
}
/* Active AND complete: blue active background wins, green text+✓ stays */
.est-tab-bar .toggle-btn.est-tab.complete.active {
    background: rgba(60,140,255,0.16);
    border-color: rgba(60,140,255,0.40);
    color: #32c864;
}
/* Locked phases — dimmed, no hover, cursor:not-allowed */
.est-tab-bar .toggle-btn.est-tab.locked {
    color: #3d4a5c;
    background: rgba(255,255,255,0.015);
    border-color: rgba(255,255,255,0.05);
    opacity: 0.55;
    cursor: not-allowed;
}
.est-tab-bar .toggle-btn.est-tab.locked:hover {
    background: rgba(255,255,255,0.015);
    color: #3d4a5c;
    border-color: rgba(255,255,255,0.05);
}

/* ─────────────────────────────────────────────────────────────────────
   CHUNK 1 CLOSE-OUT — .est-step state styling + takeoff cell alignment
   Item 2: parallel additive rules for the new 6-step bar's .complete /
   .locked states. The existing .est-tab rules above (3428–3481) stay
   byte-for-byte; .active already carries via the general
   .view-toggle-bar .toggle-btn.active (L765).
   Item 4: scoped vertical-align on takeoff table cells — the Unit Cost
   cell has a "master $X" hint that makes it taller than siblings;
   anchoring every cell to top keeps inputs + sibling text aligned.
   ───────────────────────────────────────────────────────────────────── */
.est-step-bar .toggle-btn.est-step.complete {
    color: #32c864;
    border-color: rgba(50,200,100,0.25);
    background: rgba(50,200,100,0.06);
}
.est-step-bar .toggle-btn.est-step.complete::before {
    content: '\2713 ';
    margin-right: 4px;
    font-weight: 700;
}
.est-step-bar .toggle-btn.est-step.complete.active {
    background: rgba(60,140,255,0.16);
    border-color: rgba(60,140,255,0.40);
    color: #32c864;
}
.est-step-bar .toggle-btn.est-step.locked {
    color: #3d4a5c;
    background: rgba(255,255,255,0.015);
    border-color: rgba(255,255,255,0.05);
    opacity: 0.55;
    cursor: not-allowed;
}
.est-step-bar .toggle-btn.est-step.locked:hover {
    background: rgba(255,255,255,0.015);
    color: #3d4a5c;
    border-color: rgba(255,255,255,0.05);
}
#est-step-takeoff-content table td {
    vertical-align: top;
}

/* Viewport (BOM) — distinct from phases. Outline-only when inactive so
   it visually reads as "different kind of thing." */
.est-tab-bar .toggle-btn.est-tab.viewport {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    color: #a8b2bd;
}
.est-tab-bar .toggle-btn.est-tab.viewport:hover {
    background: rgba(255,255,255,0.04);
    color: #c8d4e0;
    border-color: rgba(255,255,255,0.28);
}
.est-tab-bar .toggle-btn.est-tab.viewport.active {
    background: rgba(106,160,255,0.10);
    border-color: rgba(106,160,255,0.50);
    color: #6aa0ff;
}

/* Visual separator between lifecycle phases and viewports. Vertical
   line with a small horizontal margin. */
.est-tab-bar .est-tab-separator {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.15);
    margin: 0 6px;
}

/* Light-theme overrides */
body.theme-light .est-tab-bar .toggle-btn.est-tab           { background: rgba(0,0,0,0.025); border-color: rgba(0,0,0,0.10); color: #5a6a7a; }
body.theme-light .est-tab-bar .toggle-btn.est-tab:hover     { background: rgba(0,0,0,0.05); color: #1a2030; border-color: rgba(0,0,0,0.20); }
body.theme-light .est-tab-bar .toggle-btn.est-tab.active    { background: rgba(30,100,220,0.12); color: #1e64dc; border-color: rgba(30,100,220,0.35); }
body.theme-light .est-tab-bar .toggle-btn.est-tab.complete  { color: #1f8a4a; background: rgba(31,138,74,0.07); border-color: rgba(31,138,74,0.25); }
body.theme-light .est-tab-bar .toggle-btn.est-tab.complete.active { background: rgba(30,100,220,0.12); border-color: rgba(30,100,220,0.35); color: #1f8a4a; }
body.theme-light .est-tab-bar .toggle-btn.est-tab.locked    { color: #8a96a6; background: rgba(0,0,0,0.01); border-color: rgba(0,0,0,0.05); }
body.theme-light .est-tab-bar .toggle-btn.est-tab.viewport  { background: transparent; border-color: rgba(0,0,0,0.18); color: #5a6a7a; }
body.theme-light .est-tab-bar .toggle-btn.est-tab.viewport:hover { background: rgba(0,0,0,0.04); color: #1a2030; border-color: rgba(0,0,0,0.28); }
body.theme-light .est-tab-bar .toggle-btn.est-tab.viewport.active { background: rgba(30,100,220,0.10); color: #1e64dc; border-color: rgba(30,100,220,0.45); }
body.theme-light .est-tab-bar .est-tab-separator            { background: rgba(0,0,0,0.15); }


/* ═══════════════════════════════════════════════════════════════════════
   Phase 1.7b — Devices Panel: Sectioned Parts Table
   ═══════════════════════════════════════════════════════════════════════
   Hover/focus polish for the rebuild. Layout itself is inline-styled
   (matching the rest of the estimator page); these rules add the
   interactive states + light-theme overrides + scrollbar polish that
   inline styles can't reach. */

/* Section header rows respond to hover with a brighter band */
.est-section-header:hover {
    background: rgba(255,255,255,0.05) !important;
}
.est-section-header:hover td {
    color: #ffffff;
}

/* Part rows lift slightly on hover for scan-readability on long lists */
.est-part-row:hover {
    background: rgba(255,255,255,0.025);
}

/* Search bar focus state — matches ProFlow's other text inputs */
#est-devices-search:focus {
    outline: none;
    border-color: rgba(106,160,255,0.45) !important;
    background: rgba(255,255,255,0.06) !important;
}

/* Filter checkboxes — accent color matches selected state */
.est-devices-toolbar input[type="checkbox"] {
    accent-color: #6aa0ff;
    width: 14px;
    height: 14px;
}

/* Horizontal scrollbar styling on the table wrapper — keep it subtle */
.est-tab-pane[data-tab-pane="devices"] .table-scroll-wrap::-webkit-scrollbar {
    height: 8px;
}
.est-tab-pane[data-tab-pane="devices"] .table-scroll-wrap::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.20);
}
.est-tab-pane[data-tab-pane="devices"] .table-scroll-wrap::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.10);
    border-radius: 4px;
}
.est-tab-pane[data-tab-pane="devices"] .table-scroll-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.18);
}

/* ─── Light-theme overrides ─── */
body.theme-light .est-section-header              { background: rgba(0,0,0,0.03) !important; border-top-color: rgba(0,0,0,0.08) !important; border-bottom-color: rgba(0,0,0,0.08) !important; }
body.theme-light .est-section-header:hover        { background: rgba(0,0,0,0.06) !important; }
body.theme-light .est-section-header:hover td     { color: #1a2030; }
body.theme-light .est-part-row:hover              { background: rgba(0,0,0,0.025); }
body.theme-light #est-devices-search              { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.10) !important; color: #1a2030 !important; }
body.theme-light #est-devices-search:focus        { background: rgba(0,0,0,0.06) !important; border-color: rgba(30,100,220,0.45) !important; }


/* ─── P1.7b polish: hide spinner arrows on qty inputs ───
   Browser default <input type="number"> shows up/down spinners. Larry's
   spec is type-only entry — hide them across Chrome / Safari / Firefox /
   Edge. Class scoped to the estimator's qty inputs so we don't affect
   any other number input in ProFlow. */
.est-qty-input::-webkit-outer-spin-button,
.est-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.est-qty-input { -moz-appearance: textfield; appearance: textfield; }

/* Catalog Skeleton C4 — GLOBAL number-input spinner removal. Kills the
   up/down arrows on every <input type="number"> across ProFlow (type-only
   entry). Supersedes the scoped .est-qty-input rule above (left in place,
   now redundant). Applies to timesheet hour inputs too — intentional. */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }


/* ═══════════════════════════════════════════════════════════════════════
   Phase 1.7c-final — Devices: search-and-pick UI polish
   ═══════════════════════════════════════════════════════════════════════
   Find-a-Part search input focus state, results-section hover affordance,
   entered-parts category-band hover, light-theme tint adjustments. */

#est-devices-search:focus {
    outline: none;
    border-color: rgba(106,160,255,0.45) !important;
    background: rgba(255,255,255,0.06) !important;
}

#est-devices-category {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: #c8d4e0;
    border-radius: 5px;
}
#est-devices-category:focus {
    outline: none;
    border-color: rgba(106,160,255,0.45);
}

/* Entered-parts category-band hover (collapsible header rows) */
.est-entered-cat-header:hover {
    background: rgba(255,255,255,0.05) !important;
}
.est-entered-cat-header:hover td {
    color: #ffffff;
}

/* Devices Summary panel — light-theme tint */
body.theme-light #est-devices-summary-panel .mono { color: #1a2030; }
body.theme-light #est-devices-search              { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.10) !important; color: #1a2030 !important; }
body.theme-light #est-devices-search:focus        { background: rgba(0,0,0,0.06) !important; border-color: rgba(30,100,220,0.45) !important; }
body.theme-light #est-devices-category            { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.10); color: #1a2030; }
body.theme-light .est-entered-cat-header:hover    { background: rgba(0,0,0,0.04) !important; }
body.theme-light .est-entered-cat-header:hover td { color: #1a2030; }

/* ──────────────────────────────────────────────────────────────────
   Wire & Subs workspace — column header styling parity with Devices.
   Devices entered-parts/search tables render <th> cells via inline
   styles in _estRenderTableHeader() (color:#c0392b 9.5px 700 1.4px on
   rgba(0,0,0,0.20) bg). Wire/Rough/Subs tables use class="data-table"
   which gets the muted-gray .data-table th styling instead. This rule
   restores parity with Devices for every <th> inside the wire-subs
   content slot. Specificity: #id + .class + element = 111, beats both
   .data-table th (11) and theme-prefixed body.theme-X .data-table th (21).
   ────────────────────────────────────────────────────────────────── */
#est-wire-content .data-table th {
    color: #c0392b;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    background: rgba(0,0,0,0.20);
    padding: 8px 10px;
}

/* ──────────────────────────────────────────────────────────────────
   Stacked modal support (Phase 1.8c+).

   When a modal opens from another modal's context (e.g. + New Vendor
   from inside the Parts/Inventory modal), it needs to render ABOVE
   the parent modal — not at the same z-level, where DOM order alone
   determines stacking. .modal-stacked bumps z-index above the base
   .modal-overlay (z:900). The parent's overlay also gets a transparent
   backdrop while a child is stacked, so only the child's backdrop is
   visible (avoids double-dark screen).

   Usage (set/cleared in JS):
     parent modal opens .modal-stacked-child:  hides parent's dark scrim
     stacked child gets  .modal-stacked:        z:950 (above parent)
   ────────────────────────────────────────────────────────────────── */
.modal-overlay.modal-stacked         { z-index: 950; }
.modal-overlay.modal-stacked-child   { background: transparent; backdrop-filter: none; }
/* ═══════════════════════════════════════════════════════════════════════
   PATH 1A BOM-2 — Bill of Materials viewport + print
   ═══════════════════════════════════════════════════════════════════════
   Internal-only readout of project info + grouped BOM tables. Dark theme
   on screen. Print is handled via JS body-swap (see _bomPrint() in app.js)
   which avoids CSS ancestor-chain games — the BoM markup is cloned into
   a clean white-background body for the duration of window.print() and
   then restored afterward.
   ─────────────────────────────────────────────────────────────────── */

/* Section panel spacing */
#est-tab-bom .bom-section { page-break-inside: avoid; }
#est-tab-bom table.data-table { border-collapse: collapse; }
#est-tab-bom table.data-table thead th {
    text-align: left;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #7a8898;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
#est-tab-bom table.data-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: #c8d4e0;
    vertical-align: top;
}

/* Print-mode body class — applied during window.print() by _bomPrint() */
body.bom-printing { background: #fff !important; }
body.bom-printing > * { display: none !important; }
body.bom-printing > #bom-print-host { display: block !important; }
#bom-print-host {
    background: #fff;
    color: #000;
    padding: 0.5in;
    font-family: inherit;
}
#bom-print-host *,
#bom-print-host .panel,
#bom-print-host .bom-header-block,
#bom-print-host .section-label,
#bom-print-host .mono,
#bom-print-host span,
#bom-print-host div,
#bom-print-host td,
#bom-print-host th {
    color: #000 !important;
    background: #fff !important;
    border-color: #999 !important;
}
#bom-print-host table.data-table { border-collapse: collapse; width: 100%; }
#bom-print-host table.data-table thead th {
    text-align: left;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #000 !important;
    border-bottom: 1.5px solid #000 !important;
}
#bom-print-host table.data-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid #ccc !important;
    vertical-align: top;
}
#bom-print-host .bom-header-block {
    border-bottom: 1.5px solid #000 !important;
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
}
#bom-print-host .bom-section {
    border: 1px solid #999 !important;
    border-radius: 0 !important;
    margin-bottom: 14px !important;
    padding: 16px 18px;
    page-break-inside: avoid;
}
#bom-print-host .bom-no-print { display: none !important; }

/* Page setup */
@media print {
    @page { margin: 0.5in; }
}