/* ==========================================================================
   SOG WORKSPACE — Unified App Shell Design System
   Path: css/themes/sog-workspace.css

   Scope: body.theme-sog  (SOG Operations workspace only)
   Purpose: Applies management-module design language to every view in the
            SOG workspace — sidebar, dashboard, pipeline, sales hub, CFO,
            settings, modals, forms, inputs.

   Design tokens inherited from sog-tactical.css:
     --sog-bg      #03040A   SOG Black
     --sog-navy    #2B3F6E   SOG Navy (glass / accent)
     --sog-gold    #C8A951
     --sog-tan     #C4B590   SOG Tan (labels / highlight)
     --sog-light   #EBE8D0   SOG Light (text on dark)
     --sog-white   #FFFFFF
     --sog-radius-card   16px
     --sog-radius-btn    12px
     --sog-font-heading  'Rajdhani'
     --sog-font-body     'Barlow'
   ========================================================================== */


/* ════════════════════════════════════════════════════════════════════════
   APP SHELL — SIDEBAR
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog #app-sidebar {
    background: #050713;
    border-right: 1px solid rgba(196,181,144,0.10);
}

body.theme-sog .alzar-sidebar-header {
    background: var(--sog-bg);
    border-bottom: 1px solid rgba(196,181,144,0.10);
}

body.theme-sog .sidebar-menu {
    background: transparent;
}

body.theme-sog .nav-item {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(196,181,144,0.55);
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
}

body.theme-sog .nav-item:hover {
    background: rgba(43,63,110,0.20);
    color: var(--sog-light);
}

body.theme-sog .nav-item.active {
    background: rgba(43,63,110,0.35);
    color: var(--sog-tan);
    border-left: 3px solid var(--sog-tan);
}

body.theme-sog .nav-item .nav-icon {
    color: inherit;
}

/* Sidebar section dividers */
body.theme-sog .sidebar-section-label {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.62rem;
    color: rgba(196,181,144,0.30);
    font-weight: 700;
}

/* SOG HQ nav injected by applySOGHardGate() */
body.theme-sog #sog-hq-nav .nav-item {
    border-left: 3px solid transparent;
}
body.theme-sog #sog-hq-nav .nav-item.active {
    border-left-color: var(--sog-gold);
    color: var(--sog-gold);
    background: rgba(200,169,81,0.12);
}
body.theme-sog #sog-hq-nav .nav-item:hover {
    background: rgba(200,169,81,0.08);
    color: var(--sog-gold);
}


/* ════════════════════════════════════════════════════════════════════════
   GLOBAL VIEW SHELL — view-container / view-header / view-title
   Applied to every page view inside the SOG workspace
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog .view-container {
    background: var(--sog-bg);
    color: var(--sog-light);
}

body.theme-sog .view-header {
    background: transparent;
    border-bottom: 1px solid rgba(196,181,144,0.10);
}

body.theme-sog .view-title,
body.theme-sog .page-title {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--sog-light);
}

body.theme-sog .view-subtitle {
    color: var(--sog-tan);
    font-family: var(--sog-font-body);
    opacity: 0.75;
}

/* Sub-tabs / pill tabs used by Sales Hub, CFO, etc. */
body.theme-sog .tab-bar,
body.theme-sog .cfo-tab-bar {
    border-bottom: 2px solid rgba(43,63,110,0.35);
    background: transparent;
}

body.theme-sog .tab-btn,
body.theme-sog .cfo-tab {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--sog-tan);
    opacity: 0.55;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: opacity .15s ease, background-color .15s ease;
}

body.theme-sog .tab-btn:hover,
body.theme-sog .cfo-tab:hover {
    opacity: 0.85;
    background: rgba(43,63,110,0.15);
    border-radius: 6px 6px 0 0;
}

body.theme-sog .tab-btn.active,
body.theme-sog .cfo-tab.active {
    color: var(--sog-tan);
    opacity: 1;
    border-bottom-color: var(--sog-tan);
}


/* ════════════════════════════════════════════════════════════════════════
   GLOBAL FORMS & INPUTS
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog .modern-input,
body.theme-sog input.form-input,
body.theme-sog textarea.form-input,
body.theme-sog select.form-input {
    background: rgba(43,63,110,0.15);
    border: 1px solid rgba(43,63,110,0.45);
    border-radius: var(--sog-radius-btn);
    color: var(--sog-light);
    font-family: var(--sog-font-body);
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.theme-sog .modern-input:focus,
body.theme-sog input.form-input:focus,
body.theme-sog textarea.form-input:focus,
body.theme-sog select.form-input:focus {
    border-color: var(--sog-navy);
    box-shadow: 0 0 0 3px rgba(43,63,110,0.25);
    outline: none;
}

body.theme-sog .modern-input::placeholder,
body.theme-sog input.form-input::placeholder,
body.theme-sog textarea.form-input::placeholder {
    color: rgba(196,181,144,0.40);
}

body.theme-sog .alzar-select,
body.theme-sog select.alzar-select {
    background: rgba(43,63,110,0.15);
    border: 1px solid rgba(43,63,110,0.45);
    border-radius: var(--sog-radius-btn);
    color: var(--sog-light);
    font-family: var(--sog-font-body);
}

body.theme-sog .alzar-search-box {
    background: rgba(43,63,110,0.15);
    border: 1px solid rgba(43,63,110,0.40);
    border-radius: var(--sog-radius-btn);
    color: var(--sog-light);
}

body.theme-sog .alzar-search-box input {
    background: transparent;
    color: var(--sog-light);
}

body.theme-sog .alzar-search-box input::placeholder {
    color: rgba(196,181,144,0.40);
}

body.theme-sog .alzar-search-box i {
    color: var(--sog-tan);
}

body.theme-sog label,
body.theme-sog .form-label {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sog-tan);
}

body.theme-sog .controls-bar,
body.theme-sog .alzar-controls-bar {
    background: transparent;
}


/* ════════════════════════════════════════════════════════════════════════
   GLOBAL TABLES — alzar-table / cfo-table
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog .alzar-table,
body.theme-sog .cfo-table {
    background: rgba(43,63,110,0.08);
    border-radius: var(--sog-radius-card);
    border: 1px solid rgba(43,63,110,0.25);
    overflow: hidden;
}

body.theme-sog .alzar-table thead,
body.theme-sog .cfo-table thead {
    background: rgba(43,63,110,0.25);
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
}

body.theme-sog .alzar-table th,
body.theme-sog .cfo-table th {
    color: var(--sog-tan);
    border-bottom: 2px solid rgba(43,63,110,0.40);
}

body.theme-sog .alzar-table tbody tr,
body.theme-sog .cfo-table tbody tr {
    border-bottom: 1px solid rgba(43,63,110,0.12);
    transition: background-color .12s ease;
}

body.theme-sog .alzar-table tbody tr:hover,
body.theme-sog .cfo-table tbody tr:hover {
    background: rgba(43,63,110,0.15);
}

body.theme-sog .alzar-table td,
body.theme-sog .cfo-table td {
    color: var(--sog-light);
    font-family: var(--sog-font-body);
}

/* Sortable column hover */
body.theme-sog .cfo-table th.sortable:hover {
    color: var(--sog-light);
}


/* ════════════════════════════════════════════════════════════════════════
   STAT CARDS — alzar-stat-card (Dashboard, Management)
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog .alzar-stat-card {
    background: rgba(43,63,110,0.18);
    border: 1px solid rgba(43,63,110,0.40);
    border-left: 3px solid var(--sog-navy);
    border-radius: var(--sog-radius-card);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    color: var(--sog-light);
    transition: box-shadow .2s ease, transform .15s ease;
}

body.theme-sog .alzar-stat-card:hover {
    box-shadow: 0 8px 24px rgba(43,63,110,0.35);
    transform: translateY(-2px);
}

body.theme-sog .alzar-stat-card.highlight {
    background: rgba(16,185,129,0.12);
    border-left-color: #10b981;
}

body.theme-sog .alzar-stat-card.negative-card {
    background: rgba(239,68,68,0.10);
    border-left-color: #ef4444;
}

body.theme-sog .stat-label {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--sog-tan);
}

body.theme-sog .stat-value {
    font-family: var(--sog-font-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sog-light);
}


/* ════════════════════════════════════════════════════════════════════════
   GENERIC CARDS — alzar-card / card
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog .alzar-card,
body.theme-sog .card {
    background: rgba(43,63,110,0.12);
    border: 1px solid rgba(43,63,110,0.30);
    border-radius: var(--sog-radius-card);
    color: var(--sog-light);
}

body.theme-sog .alzar-card .card-title,
body.theme-sog .card .card-title,
body.theme-sog .panel-head,
body.theme-sog .section-title {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--sog-tan);
}


/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD PAGE
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog #dashboardPage .gs-item > .alzar-card,
body.theme-sog #dashboardPage .widget-card {
    background: rgba(43,63,110,0.14);
    border: 1px solid rgba(43,63,110,0.32);
    border-radius: var(--sog-radius-card);
    color: var(--sog-light);
}

body.theme-sog #dashboardPage .widget-skeleton {
    background: rgba(43,63,110,0.10);
}

body.theme-sog #dashboardPage .sac-widget {
    background: rgba(43,63,110,0.14);
    border: 1px solid rgba(43,63,110,0.32);
    border-radius: var(--sog-radius-card);
}

body.theme-sog #dashboardPage .sac-widget .panel-head {
    border-bottom: 1px solid rgba(43,63,110,0.30);
}

body.theme-sog #dashboardPage .dashboard-grid .widget-header,
body.theme-sog #dashboardPage .widget-label {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sog-tan);
}

body.theme-sog #dashboardPage .widget-value,
body.theme-sog #dashboardPage .widget-number {
    font-family: var(--sog-font-heading);
    font-weight: 700;
    color: var(--sog-light);
}


/* ════════════════════════════════════════════════════════════════════════
   PIPELINE PAGE
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog #pipelinePage .view-container {
    background: var(--sog-bg);
}

/* Kanban columns */
body.theme-sog #pipelinePage .kanban-column,
body.theme-sog #pipelinePage .pipeline-column {
    background: rgba(43,63,110,0.10);
    border: 1px solid rgba(43,63,110,0.25);
    border-radius: var(--sog-radius-card);
}

body.theme-sog #pipelinePage .kanban-column-header,
body.theme-sog #pipelinePage .column-header,
body.theme-sog #pipelinePage .stage-label {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--sog-tan);
}

/* Job cards */
body.theme-sog #pipelinePage .job-card,
body.theme-sog #pipelinePage .pipeline-card {
    background: rgba(43,63,110,0.18);
    border: 1px solid rgba(43,63,110,0.35);
    border-radius: 10px;
    color: var(--sog-light);
    transition: box-shadow .15s ease, transform .12s ease;
}

body.theme-sog #pipelinePage .job-card:hover,
body.theme-sog #pipelinePage .pipeline-card:hover {
    box-shadow: 0 6px 18px rgba(43,63,110,0.30);
    transform: translateY(-1px);
}

body.theme-sog #pipelinePage .job-card .job-name,
body.theme-sog #pipelinePage .pipeline-card .card-title {
    font-family: var(--sog-font-heading);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--sog-light);
}

body.theme-sog #pipelinePage .job-card .job-meta,
body.theme-sog #pipelinePage .pipeline-card .card-meta {
    color: rgba(196,181,144,0.65);
    font-size: 0.78rem;
}

/* List view table when toggled */
body.theme-sog #pipelinePage .alzar-table {
    background: rgba(43,63,110,0.08);
}


/* ════════════════════════════════════════════════════════════════════════
   SALES HUB PAGE
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog #salesHubPage .view-container {
    background: var(--sog-bg);
}

/* Sales Hub top nav tabs */
body.theme-sog #salesHubPage .hub-tabs,
body.theme-sog #salesHubPage .nav-tabs {
    border-bottom: 2px solid rgba(43,63,110,0.35);
}

body.theme-sog #salesHubPage .hub-tab,
body.theme-sog #salesHubPage .nav-tab {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: rgba(196,181,144,0.55);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

body.theme-sog #salesHubPage .hub-tab.active,
body.theme-sog #salesHubPage .nav-tab.active {
    color: var(--sog-tan);
    border-bottom-color: var(--sog-tan);
}

/* Web Leads table */
body.theme-sog #salesHubPage .wl-toolbar {
    background: transparent;
    border-bottom: 1px solid rgba(43,63,110,0.25);
}

body.theme-sog #salesHubPage .wl-title {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--sog-light);
}

/* Automation Engine (inherits shhq- prefixed rules from sales-hub-hq.js inline CSS,
   but override the panel chrome here) */
body.theme-sog #salesHubPage .shhq-auto-header {
    border-bottom: 1px solid rgba(196,181,144,0.10);
    background: rgba(3,4,10,0.85);
}


/* ════════════════════════════════════════════════════════════════════════
   CFO PAGE
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog #cfoPage .view-container {
    background: var(--sog-bg);
}

body.theme-sog #cfoPage .cfo-tab-bar {
    background: transparent;
    border-bottom: 2px solid rgba(43,63,110,0.35);
}

body.theme-sog #cfoPage .cfo-tab {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--sog-tan);
    opacity: 0.55;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

body.theme-sog #cfoPage .cfo-tab.active {
    color: var(--sog-tan);
    opacity: 1;
    border-bottom-color: var(--sog-tan);
}

body.theme-sog #cfoPage .cfo-tab:hover {
    opacity: 0.85;
    background: rgba(43,63,110,0.15);
    border-radius: 6px 6px 0 0;
}

body.theme-sog #cfoPage .cfo-tab-panel {
    background: transparent;
}

body.theme-sog #cfoPage .cfo-table {
    background: rgba(43,63,110,0.08);
    border: 1px solid rgba(43,63,110,0.25);
    border-radius: var(--sog-radius-card);
    overflow: hidden;
}

body.theme-sog #cfoPage .cfo-table thead {
    background: rgba(43,63,110,0.25);
    color: var(--sog-tan);
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
}

body.theme-sog #cfoPage .cfo-table th {
    border-bottom: 2px solid rgba(43,63,110,0.40);
    color: var(--sog-tan);
}

body.theme-sog #cfoPage .cfo-table tbody tr {
    border-bottom: 1px solid rgba(43,63,110,0.12);
}

body.theme-sog #cfoPage .cfo-table tbody tr:hover {
    background: rgba(43,63,110,0.15);
}

body.theme-sog #cfoPage .cfo-table td {
    color: var(--sog-light);
}

/* CFO summary stat strip */
body.theme-sog #cfoPage .cfo-summary-bar,
body.theme-sog #cfoPage .ledger-summary {
    background: rgba(43,63,110,0.12);
    border: 1px solid rgba(43,63,110,0.28);
    border-radius: var(--sog-radius-card);
}

body.theme-sog #cfoPage .ledger-label,
body.theme-sog #cfoPage .summary-label {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
    color: var(--sog-tan);
}

body.theme-sog #cfoPage .ledger-value,
body.theme-sog #cfoPage .summary-value {
    font-family: var(--sog-font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--sog-light);
}


/* ════════════════════════════════════════════════════════════════════════
   CFO PREDICTIONS TAB
   Keeps predictor.css visuals aligned with SOG management design language
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog #cfo-tab-predictor {
    background: transparent;
}

/* Header action controls (CFO + Dashboard)
   Scoped to page-section IDs — no theme class needed.
   var(--sog-*) fallbacks ensure correct appearance in all tenant themes. */
#cfoPage #cfo-header-actions .btn,
#dashboardPage .dashboard-header-actions .btn {
    background: rgba(43,63,110,0.20);
    border: 1px solid rgba(43,63,110,0.45);
    color: var(--sog-light, #EBE8D0);
    font-family: var(--sog-font-heading, 'Rajdhani', 'Segoe UI', system-ui, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#cfoPage #cfo-header-actions .btn:hover,
#dashboardPage .dashboard-header-actions .btn:hover {
    background: rgba(43,63,110,0.30);
    border-color: rgba(196,181,144,0.55);
    color: var(--sog-light, #EBE8D0);
}

#cfoPage #cfo-header-actions .btn:active,
#dashboardPage .dashboard-header-actions .btn:active {
    background: rgba(43,63,110,0.36);
    border-color: rgba(196,181,144,0.62);
}

#cfoPage #cfo-header-actions .btn i,
#dashboardPage .dashboard-header-actions .btn i {
    color: var(--sog-tan, #C4B590);
}

#cfoPage #cfo-header-actions .alzar-tag.blue,
#dashboardPage .dashboard-header-actions .alzar-tag.blue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--sog-radius-btn, 12px);
    border: 1px solid rgba(43,63,110,0.45);
    background: rgba(43,63,110,0.20);
    color: var(--sog-tan, #C4B590);
    font-family: var(--sog-font-heading, 'Rajdhani', 'Segoe UI', system-ui, sans-serif);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body.theme-sog #cfo-tab-predictor .pred-page-grid {
    gap: 20px;
}

body.theme-sog #cfo-tab-predictor .alzar-card {
    background: rgba(43,63,110,0.14);
    border: 1px solid rgba(43,63,110,0.32);
    border-radius: var(--sog-radius-card);
    color: var(--sog-light);
}

body.theme-sog #cfo-tab-predictor .alzar-card-header {
    border-bottom: 1px solid rgba(43,63,110,0.30);
    background: rgba(3,4,10,0.45);
}

body.theme-sog #cfo-tab-predictor .alzar-card-header h3,
body.theme-sog #cfo-tab-predictor .alzar-card-header .alzar-title {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--sog-light);
}

body.theme-sog #cfo-tab-predictor .alzar-card-header i {
    color: var(--sog-tan);
}

body.theme-sog #cfo-tab-predictor .alzar-card-body {
    color: var(--sog-light);
}

/* Seasonality heatmap */
body.theme-sog #cfo-tab-predictor .pred-heat-grid {
    padding: 16px;
    gap: 10px;
}

body.theme-sog #cfo-tab-predictor .pred-heat-cell {
    border-radius: 10px;
    border: 1px solid rgba(43,63,110,0.35);
    background: rgba(43,63,110,0.15);
    color: var(--sog-light);
}

body.theme-sog #cfo-tab-predictor .pred-heat-cell:hover {
    border-color: rgba(196,181,144,0.55);
    box-shadow: 0 10px 20px rgba(0,0,0,0.35);
}

body.theme-sog #cfo-tab-predictor .pred-heat-label {
    color: var(--sog-tan);
    font-family: var(--sog-font-heading);
    letter-spacing: 0.06em;
}

body.theme-sog #cfo-tab-predictor .pred-heat-lambda {
    color: var(--sog-light);
    font-family: var(--sog-font-heading);
}

body.theme-sog #cfo-tab-predictor .pred-heat-prob {
    color: rgba(196,181,144,0.70);
}

body.theme-sog #cfo-tab-predictor .pred-heat-ok {
    background: rgba(43,63,110,0.12);
    border-color: rgba(43,63,110,0.45);
}

body.theme-sog #cfo-tab-predictor .pred-heat-warn {
    background: rgba(200,169,81,0.10);
    border-color: rgba(200,169,81,0.45);
}

body.theme-sog #cfo-tab-predictor .pred-heat-critical {
    background: rgba(239,68,68,0.10);
    border-color: rgba(239,68,68,0.45);
}

body.theme-sog #cfo-tab-predictor .pred-heat-current {
    outline: 2px solid var(--sog-tan);
    outline-offset: 1px;
}

body.theme-sog #cfo-tab-predictor .pred-advisory {
    margin: 12px 16px 10px;
    border-radius: 10px;
    border: 1px solid rgba(43,63,110,0.40);
    background: rgba(43,63,110,0.14);
    color: var(--sog-light);
}

body.theme-sog #cfo-tab-predictor .pred-advisory i {
    color: var(--sog-tan);
}

body.theme-sog #cfo-tab-predictor .pred-meta {
    border-top: 1px solid rgba(43,63,110,0.30);
    color: rgba(196,181,144,0.80);
    font-family: var(--sog-font-body);
}

/* Survival panel */
body.theme-sog #cfo-tab-predictor .pred-survival-header {
    background: rgba(3,4,10,0.35);
    border-bottom: 1px solid rgba(43,63,110,0.25);
}

body.theme-sog #cfo-tab-predictor .pred-kpi-label,
body.theme-sog #cfo-tab-predictor .pred-cone-title,
body.theme-sog #cfo-tab-predictor .pred-risk-label {
    font-family: var(--sog-font-heading);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sog-tan);
}

body.theme-sog #cfo-tab-predictor .pred-kpi-value,
body.theme-sog #cfo-tab-predictor .pred-risk-val {
    color: var(--sog-light);
    font-family: var(--sog-font-heading);
    font-weight: 700;
}

body.theme-sog #cfo-tab-predictor .pred-risk-item {
    background: rgba(43,63,110,0.15);
    border: 1px solid rgba(43,63,110,0.35);
}

body.theme-sog #cfo-tab-predictor .pred-cone-bar {
    background: rgba(43,63,110,0.10);
}

body.theme-sog #cfo-tab-predictor .pred-cone-95 {
    background: rgba(43,63,110,0.55);
}

body.theme-sog #cfo-tab-predictor .pred-cone-50 {
    background: rgba(97,140,232,0.60);
}

body.theme-sog #cfo-tab-predictor .pred-cone-mean {
    background: var(--sog-light);
}

body.theme-sog #cfo-tab-predictor .pred-cone-zero {
    background: rgba(239,68,68,0.60);
}

body.theme-sog #cfo-tab-predictor .pred-cone-label,
body.theme-sog #cfo-tab-predictor .pred-legend-item {
    color: rgba(196,181,144,0.78);
}

body.theme-sog #cfo-tab-predictor .pred-hb-item span {
    color: rgba(196,181,144,0.78);
}

body.theme-sog #cfo-tab-predictor .pred-hb-bar {
    background: rgba(43,63,110,0.18);
}

/* Scenario module */
body.theme-sog #cfo-tab-predictor .pred-scenario-toggle {
    border: 1px solid rgba(43,63,110,0.35);
    background: rgba(43,63,110,0.12);
    border-radius: 10px;
}

body.theme-sog #cfo-tab-predictor .pred-scenario-toggle:hover {
    border-color: rgba(196,181,144,0.55);
    background: rgba(43,63,110,0.20);
}

body.theme-sog #cfo-tab-predictor .pred-scenario-check:checked + .pred-scenario-label {
    color: var(--sog-light);
}

body.theme-sog #cfo-tab-predictor .pred-scenario-label {
    font-family: var(--sog-font-heading);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sog-tan);
}

body.theme-sog #cfo-tab-predictor .pred-scenario-meta {
    color: rgba(196,181,144,0.68);
}

body.theme-sog #cfo-tab-predictor .pred-scenario-result {
    border: 1px solid rgba(43,63,110,0.30);
    background: rgba(43,63,110,0.10);
    border-radius: 12px;
}

body.theme-sog #cfo-tab-predictor .pred-res-card {
    background: rgba(43,63,110,0.16);
    border: 1px solid rgba(43,63,110,0.32);
    border-radius: 10px;
}

body.theme-sog #cfo-tab-predictor .pred-res-label {
    color: var(--sog-tan);
    font-family: var(--sog-font-heading);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.theme-sog #cfo-tab-predictor .pred-res-value {
    color: var(--sog-light);
    font-family: var(--sog-font-heading);
    font-weight: 700;
}

body.theme-sog #cfo-tab-predictor .pred-res-delta,
body.theme-sog #cfo-tab-predictor .pred-result-applied {
    color: rgba(196,181,144,0.72);
}

/* Ask Alzar card within predictor */
body.theme-sog #cfo-tab-predictor .agent-chat-log {
    background: rgba(43,63,110,0.10);
}

body.theme-sog #cfo-tab-predictor .agent-msg {
    border: 1px solid rgba(43,63,110,0.30);
    background: rgba(43,63,110,0.12);
}

body.theme-sog #cfo-tab-predictor .agent-msg.agent-welcome {
    border-left: 3px solid var(--sog-tan);
}

body.theme-sog #cfo-tab-predictor .agent-input {
    background: rgba(43,63,110,0.15);
    border: 1px solid rgba(43,63,110,0.40);
    color: var(--sog-light);
}

body.theme-sog #cfo-tab-predictor .agent-input::placeholder {
    color: rgba(196,181,144,0.45);
}

body.theme-sog #cfo-tab-predictor .agent-send-btn {
    background: rgba(43,63,110,0.35);
    border: 1px solid rgba(43,63,110,0.55);
    color: var(--sog-light);
}

body.theme-sog #cfo-tab-predictor .agent-send-btn:hover {
    background: rgba(43,63,110,0.50);
}

@media (max-width: 1024px) {
    body.theme-sog #cfo-tab-predictor .pred-page-grid {
        gap: 16px;
        padding: 14px;
    }

    body.theme-sog #cfo-tab-predictor .pred-heat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    body.theme-sog #cfo-tab-predictor .pred-heat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog #settingsPage .view-container {
    background: var(--sog-bg);
}

body.theme-sog #settingsPage .settings-section,
body.theme-sog #settings-root .settings-section,
body.theme-sog #settings-main-content .settings-section {
    background: rgba(43,63,110,0.10);
    border: 1px solid rgba(43,63,110,0.28);
    border-radius: var(--sog-radius-card);
}

body.theme-sog .settings-section-title,
body.theme-sog .section-title {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--sog-tan);
    border-bottom: 1px solid rgba(43,63,110,0.25);
}

body.theme-sog .settings-section-desc,
body.theme-sog .settings-subsection-title {
    color: rgba(196,181,144,0.65);
    font-family: var(--sog-font-body);
}

body.theme-sog #settingsPage .settings-panel,
body.theme-sog #settings-root .settings-panel {
    background: rgba(43,63,110,0.10);
    border: 1px solid rgba(43,63,110,0.25);
    border-radius: var(--sog-radius-card);
    color: var(--sog-light);
}

/* Settings nav sidebar */
body.theme-sog .settings-nav-item {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(196,181,144,0.55);
    border-radius: 8px;
}

body.theme-sog .settings-nav-item:hover {
    background: rgba(43,63,110,0.20);
    color: var(--sog-light);
}

body.theme-sog .settings-nav-item.active {
    background: rgba(43,63,110,0.30);
    color: var(--sog-tan);
    border-left: 3px solid var(--sog-tan);
}

/* Settings card grid */
body.theme-sog .alzar-settings-card-grid .alzar-card {
    background: rgba(43,63,110,0.14);
    border: 1px solid rgba(43,63,110,0.30);
    border-radius: var(--sog-radius-card);
}

body.theme-sog .alzar-settings-card-grid .alzar-card:hover {
    border-color: rgba(43,63,110,0.55);
    box-shadow: 0 6px 18px rgba(43,63,110,0.25);
}

/* Toggle switches */
body.theme-sog .toggle-switch input:checked + .toggle-track {
    background: var(--sog-navy);
    border-color: var(--sog-navy);
}

body.theme-sog .toggle-track {
    border-color: rgba(43,63,110,0.45);
    background: rgba(43,63,110,0.15);
}


/* ════════════════════════════════════════════════════════════════════════
   MODALS — all modal dialogs in the SOG workspace
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog .modal-container,
body.theme-sog .modal-card {
    background: #0a0e1a;
    border: 1px solid rgba(43,63,110,0.45);
    border-radius: var(--sog-radius-card);
    box-shadow: 0 24px 64px rgba(0,0,0,0.65);
    color: var(--sog-light);
}

body.theme-sog .modal-header {
    border-bottom: 1px solid rgba(43,63,110,0.35);
    background: rgba(43,63,110,0.18);
}

body.theme-sog .modal-header h3,
body.theme-sog .modal-header h2 {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--sog-tan);
}

body.theme-sog .modal-footer {
    border-top: 1px solid rgba(43,63,110,0.35);
    background: rgba(43,63,110,0.10);
}

body.theme-sog .modal-overlay {
    background: rgba(3,4,10,0.75);
    backdrop-filter: blur(4px);
}


/* ════════════════════════════════════════════════════════════════════════
   STATUS / BADGE PILLS — inherited from management, applied globally
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog .status-pill,
body.theme-sog .hqm-sub-badge {
    font-family: var(--sog-font-heading);
    letter-spacing: 0.06em;
}

/* Monospace IDs */
body.theme-sog .hqm-ws-id,
body.theme-sog .tenant-id-mono {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    color: rgba(196,181,144,0.55);
}


/* ════════════════════════════════════════════════════════════════════════
   EMPTY STATES
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog .alzar-empty-state,
body.theme-sog .empty-state {
    color: rgba(196,181,144,0.35);
}

body.theme-sog .alzar-empty-state i,
body.theme-sog .empty-state i {
    color: rgba(43,63,110,0.50);
}

body.theme-sog .alzar-empty-state p,
body.theme-sog .empty-state p {
    color: rgba(196,181,144,0.40);
    font-family: var(--sog-font-body);
}


/* ════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog .alzar-toast {
    background: #0e1424;
    border: 1px solid rgba(43,63,110,0.50);
    border-radius: var(--sog-radius-btn);
    color: var(--sog-light);
    font-family: var(--sog-font-body);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

body.theme-sog .alzar-toast.success { border-left: 3px solid #10b981; }
body.theme-sog .alzar-toast.error   { border-left: 3px solid #ef4444; }
body.theme-sog .alzar-toast.warning { border-left: 3px solid #f59e0b; }
body.theme-sog .alzar-toast.info    { border-left: 3px solid var(--sog-navy); }


/* ════════════════════════════════════════════════════════════════════════
   SCROLLBARS — webkit
   ════════════════════════════════════════════════════════════════════════ */

body.theme-sog ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

body.theme-sog ::-webkit-scrollbar-track {
    background: rgba(43,63,110,0.05);
}

body.theme-sog ::-webkit-scrollbar-thumb {
    background: rgba(43,63,110,0.45);
    border-radius: 3px;
}

body.theme-sog ::-webkit-scrollbar-thumb:hover {
    background: rgba(43,63,110,0.70);
}


/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD STRUCTURAL PRIMITIVES (SOG ENTERPRISE FIT — GLOBAL)
   Applied to all workspaces/tenants. No theme-class scope.
   var(--sog-*) calls include hardcoded fallbacks so non-SOG themes
   inherit the correct SOG chassis appearance automatically.
   ════════════════════════════════════════════════════════════════════════ */

.dash-status-bar,
.dash-goal-rail {
    border: 1px solid rgba(43,63,110,0.35);
    border-radius: var(--sog-radius-card, 16px);
    background: rgba(43,63,110,0.12);
    box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}

.dash-status-pill {
    border: 1px solid rgba(43,63,110,0.38);
    border-radius: var(--sog-radius-btn, 12px);
    background: rgba(43,63,110,0.16);
    color: var(--sog-light, #EBE8D0);
    font-family: var(--sog-font-body, 'Barlow', 'Segoe UI', system-ui, sans-serif);
}

.dash-status-pill:hover {
    border-color: rgba(196,181,144,0.52);
    background: rgba(43,63,110,0.26);
}

.dash-status-pill .dsp-label {
    font-family: var(--sog-font-heading, 'Rajdhani', 'Segoe UI', system-ui, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sog-tan, #C4B590);
}

.dash-status-pill .dsp-value {
    color: var(--sog-light, #EBE8D0);
    font-family: var(--sog-font-heading, 'Rajdhani', 'Segoe UI', system-ui, sans-serif);
    font-weight: 700;
}

.dashboard-panel {
    background: rgba(43,63,110,0.12);
    border: 1px solid rgba(43,63,110,0.32);
    border-radius: var(--sog-radius-card, 16px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.30);
    color: var(--sog-light, #EBE8D0);
}

.panel-stub {
    background: rgba(43,63,110,0.08);
    border: 1px dashed rgba(196,181,144,0.36);
    border-radius: var(--sog-radius-card, 16px);
    color: rgba(196,181,144,0.74);
    font-family: var(--sog-font-body, 'Barlow', 'Segoe UI', system-ui, sans-serif);
    font-style: normal;
    letter-spacing: 0.01em;
    text-align: center;
}

.panel-stub::before {
    content: 'Data Hydrating';
    display: block;
    margin-bottom: 6px;
    font-family: var(--sog-font-heading, 'Rajdhani', 'Segoe UI', system-ui, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    color: var(--sog-tan, #C4B590);
}

html[data-brightness="light"] .dash-status-bar,
html[data-brightness="light"] .dash-goal-rail {
    border: 1px solid rgba(43,63,110,0.20);
    background: rgba(255,255,255,0.96);
    box-shadow: 0 10px 22px rgba(43,63,110,0.12);
}

html[data-brightness="light"] .dash-status-pill {
    border: 1px solid rgba(43,63,110,0.24);
    border-radius: var(--sog-radius-btn, 12px);
    background: rgba(43,63,110,0.06);
    color: #1a2440;
}

html[data-brightness="light"] .dash-status-pill:hover {
    border-color: rgba(43,63,110,0.40);
    background: rgba(43,63,110,0.10);
}

html[data-brightness="light"] .dash-status-pill .dsp-label {
    color: #4d5a7d;
}

html[data-brightness="light"] .dash-status-pill .dsp-value {
    color: #182340;
}

html[data-brightness="light"] .dashboard-panel {
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(43,63,110,0.18);
    box-shadow: 0 14px 28px rgba(43,63,110,0.10);
    color: #1a2440;
}

html[data-brightness="light"] .panel-stub {
    background: rgba(43,63,110,0.04);
    border: 1px dashed rgba(43,63,110,0.30);
    color: #5a6587;
}

html[data-brightness="light"] .panel-stub::before {
    color: #2b3f6e;
}