/*
 * SOG DESERT TACTICAL — Dedicated Design System
 * Path: css/themes/sog-tactical.css
 *
 * All rules scoped to body.theme-sog.
 * Fonts (Rajdhani + Barlow) are lazy-injected by js/sog-tactical.js.
 * GSAP scroll-in helpers live at the bottom of this file.
 *
 * Palette:
 *   #03040A  — SOG Black (bg-primary)
 *   #2B3F6E  — SOG Navy  (accent)
 *   #C4B590  — SOG Tan   (gold/highlight)
 *   #EBE8D0  — SOG Light (light section bg)
 */

/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════ */
body.theme-sog {
    /* Palette */
    --sog-bg:     #03040A;
    --sog-navy:   #2B3F6E;
    --sog-gold:   #C8A951;
    --sog-tan:    #C4B590;
    --sog-light:  #EBE8D0;
    --sog-white:  #FFFFFF;

    /* Radius */
    --sog-radius-card: 16px;   /* rounded-2xl */
    --sog-radius-btn:  12px;   /* rounded-xl */

    /* Typography */
    --sog-font-heading: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    --sog-font-body:    'Barlow', 'Segoe UI', system-ui, sans-serif;

    background: var(--sog-bg);
}

/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════ */
body.theme-sog,
body.theme-sog .view-container,
body.theme-sog p,
body.theme-sog span,
body.theme-sog button,
body.theme-sog input,
body.theme-sog select,
body.theme-sog textarea,
body.theme-sog label {
    font-family: var(--sog-font-body);
    line-height: 1.625;
}

body.theme-sog h1,
body.theme-sog h2,
body.theme-sog h3,
body.theme-sog .view-title,
body.theme-sog .alzar-title,
body.theme-sog .sog-heading {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   TACTICAL TEXTURES
   ═══════════════════════════════════════════════════════════════════ */

/* Hero / Section: Dark camo with navy blobs */
body.theme-sog .camo-bg {
    background-color: var(--sog-bg);
    background-image:
        radial-gradient(ellipse 220px 160px at 12% 18%, rgba(43,63,110,0.55) 0%, transparent 60%),
        radial-gradient(ellipse 180px 240px at 78% 22%, rgba(43,63,110,0.45) 0%, transparent 65%),
        radial-gradient(ellipse 260px 200px at 32% 48%, rgba(43,63,110,0.40) 0%, transparent 60%),
        radial-gradient(ellipse 200px 180px at 88% 58%, rgba(43,63,110,0.50) 0%, transparent 65%),
        radial-gradient(ellipse 240px 220px at 18% 78%, rgba(43,63,110,0.42) 0%, transparent 62%),
        radial-gradient(ellipse 180px 160px at 62% 82%, rgba(43,63,110,0.48) 0%, transparent 60%),
        radial-gradient(ellipse 220px 200px at 92% 92%, rgba(43,63,110,0.38) 0%, transparent 65%),
        radial-gradient(ellipse 200px 240px at 48% 12%, rgba(43,63,110,0.44) 0%, transparent 62%);
    color: var(--sog-light);
}

/* Tactical grid overlay (place on same element as camo-bg or hero) */
body.theme-sog .tac-grid {
    position: relative;
    isolation: isolate;
}
body.theme-sog .tac-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(196,181,144,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(196,181,144,0.05) 1px, transparent 1px);
    background-size: 48px 48px;
}
body.theme-sog .tac-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(to bottom,
            rgba(0,0,0,0.30) 0%,
            transparent 35%,
            rgba(0,0,0,0.50) 80%,
            var(--sog-bg) 100%);
}
body.theme-sog .tac-grid > * {
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   ALTERNATING SECTION RHYTHM
   camo-bg (Dark) → Light Tan (#EBE8D0) → White → Dark (#03040A)
   Applied by js/sog-tactical.js to direct children of TONED_PAGE_IDS.
   ═══════════════════════════════════════════════════════════════════ */
body.theme-sog .sog-tone-dark {
    background-color: var(--sog-bg);
    color: var(--sog-light);
}
body.theme-sog .sog-tone-camo {
    /* uses .camo-bg rule above */
    color: var(--sog-light);
}
body.theme-sog .sog-tone-light {
    background-color: var(--sog-light);
    color: var(--sog-bg);
}
body.theme-sog .sog-tone-white {
    background-color: var(--sog-white);
    color: var(--sog-bg);
}

/* Headings on light surfaces: force dark */
body.theme-sog .sog-tone-light h1,
body.theme-sog .sog-tone-light h2,
body.theme-sog .sog-tone-light h3,
body.theme-sog .sog-tone-white h1,
body.theme-sog .sog-tone-white h2,
body.theme-sog .sog-tone-white h3,
body.theme-sog .sog-tone-light .view-title,
body.theme-sog .sog-tone-white .view-title {
    color: var(--sog-bg);
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
body.theme-sog .btn,
body.theme-sog button.btn.primary,
body.theme-sog .btn.primary {
    border-radius: var(--sog-radius-btn);
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
body.theme-sog .btn.primary {
    background: var(--sog-navy);
    color: var(--sog-white);
    border: 1px solid var(--sog-navy);
}
body.theme-sog .btn.primary:hover {
    background: #364f87;
    border-color: #364f87;
}
/* Dark mode (default): semi-transparent ghost buttons with navy border */
body.theme-sog .btn.secondary,
body.theme-sog .btn.ghost {
    background: rgba(43,63,110,0.15);
    color: var(--sog-light);
    border: 1.5px solid rgba(43,63,110,0.55);
    font-weight: 600;
}
body.theme-sog .btn.secondary:hover,
body.theme-sog .btn.ghost:hover {
    background: var(--sog-navy);
    color: var(--sog-white);
    border-color: var(--sog-navy);
}
body.theme-sog .sog-tone-dark .btn.secondary,
body.theme-sog .sog-tone-camo .btn.secondary,
body.theme-sog .sog-tone-dark .btn.ghost,
body.theme-sog .sog-tone-camo .btn.ghost {
    background: rgba(255,255,255,0.06);
    color: var(--sog-light);
    border-color: rgba(255,255,255,0.18);
}

/* Light mode: white-bg ghost buttons */
html[data-brightness="light"] body.theme-sog .btn.secondary,
html[data-brightness="light"] body.theme-sog .btn.ghost {
    background: var(--sog-white);
    color: var(--sog-navy);
    border-color: var(--sog-navy);
}
html[data-brightness="light"] body.theme-sog .btn.secondary:hover,
html[data-brightness="light"] body.theme-sog .btn.ghost:hover {
    background: var(--sog-navy);
    color: var(--sog-white);
}

/* ═══════════════════════════════════════════════════════════════════
   CARDS — "On Dark" vs "On Light"
   ═══════════════════════════════════════════════════════════════════ */
body.theme-sog .alzar-card,
body.theme-sog .card {
    border-radius: var(--sog-radius-card);
    transition: box-shadow .25s ease, transform .15s ease;
}

/* On light backgrounds: White bg, rounded-2xl, shadow-sm */
body.theme-sog .sog-tone-light .alzar-card,
body.theme-sog .sog-tone-white .alzar-card,
body.theme-sog .sog-tone-light .card,
body.theme-sog .sog-tone-white .card,
body.theme-sog .sog-card-light {
    background: var(--sog-white);
    border: 1px solid rgba(43,63,110,0.10);
    border-radius: var(--sog-radius-card);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
body.theme-sog .sog-tone-light .alzar-card:hover,
body.theme-sog .sog-tone-white .alzar-card:hover,
body.theme-sog .sog-tone-light .card:hover,
body.theme-sog .sog-tone-white .card:hover,
body.theme-sog .sog-card-light:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.18);
    transform: translateY(-2px);
}

/* On dark/camo backgrounds */
body.theme-sog .sog-tone-dark .alzar-card,
body.theme-sog .sog-tone-camo .alzar-card,
body.theme-sog .sog-tone-dark .card,
body.theme-sog .sog-tone-camo .card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--sog-radius-card);
    color: var(--sog-light);
}

/* ═══════════════════════════════════════════════════════════════════
   MANAGEMENT PAGE — DARK MODE (default)
   SOG dark aesthetic: navy-accented cards, dark surfaces
   ═══════════════════════════════════════════════════════════════════ */

/* Shared: SOG heading typography on stat labels/values regardless of brightness */
body.theme-sog #managementPage .stat-label {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    font-weight: 700;
}
body.theme-sog #managementPage .stat-value {
    font-family: var(--sog-font-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

/* Shared: tab bar typography */
body.theme-sog #managementPage .cfo-tab {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 0.82rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
body.theme-sog #managementPage .alzar-table thead {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Dark mode: stat cards — navy-tinted glass */
body.theme-sog #managementPage .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);
}
body.theme-sog #managementPage .alzar-stat-card.highlight {
    background: rgba(16,185,129,0.12);
    border-left-color: #10b981;
}
body.theme-sog #managementPage .alzar-stat-card.negative-card {
    background: rgba(239,68,68,0.10);
    border-left-color: #ef4444;
}
body.theme-sog #managementPage .alzar-stat-card:hover {
    box-shadow: 0 8px 24px rgba(43,63,110,0.35);
    transform: translateY(-2px);
}
body.theme-sog #managementPage .stat-label { color: var(--sog-tan); }
body.theme-sog #managementPage .stat-value  { color: var(--sog-light); }

/* Dark mode: table */
body.theme-sog #managementPage .cfo-tab-panel {
    background: transparent;
}
body.theme-sog #managementPage #hqm-users-table,
body.theme-sog #managementPage #hqm-ws-table {
    background: rgba(43,63,110,0.10);
    border-radius: var(--sog-radius-card);
    border: 1px solid rgba(43,63,110,0.30);
    overflow: hidden;
    margin-top: 4px;
}
body.theme-sog #managementPage .alzar-table thead {
    background: rgba(43,63,110,0.25);
    color: var(--sog-tan);
}
body.theme-sog #managementPage .alzar-table th {
    border-bottom: 2px solid rgba(43,63,110,0.40);
    color: var(--sog-tan);
}
body.theme-sog #managementPage .alzar-table tbody tr {
    border-bottom: 1px solid rgba(43,63,110,0.15);
    transition: background-color .12s ease;
}
body.theme-sog #managementPage .alzar-table tbody tr:hover {
    background: rgba(43,63,110,0.15);
}
body.theme-sog #managementPage .alzar-table td {
    color: var(--sog-light);
    font-family: var(--sog-font-body);
}

/* Dark mode: tab bar */
body.theme-sog #managementPage .cfo-tab-bar {
    background: transparent;
    border-bottom: 2px solid rgba(43,63,110,0.35);
}
body.theme-sog #managementPage .cfo-tab {
    color: var(--sog-tan);
    opacity: 0.6;
}
body.theme-sog #managementPage .cfo-tab.active {
    color: var(--sog-tan);
    opacity: 1;
    border-bottom-color: var(--sog-tan);
}
body.theme-sog #managementPage .cfo-tab:hover {
    opacity: 0.85;
    background: rgba(43,63,110,0.15);
    border-radius: 6px 6px 0 0;
}

/* Dark mode: controls */
body.theme-sog #managementPage .alzar-controls-bar {
    background: transparent;
}
body.theme-sog #managementPage .alzar-search-box {
    background: rgba(43,63,110,0.18);
    border: 1px solid rgba(43,63,110,0.40);
    border-radius: var(--sog-radius-btn);
    color: var(--sog-light);
}
body.theme-sog #managementPage .alzar-search-box input {
    color: var(--sog-light);
    background: transparent;
}
body.theme-sog #managementPage .alzar-search-box input::placeholder {
    color: rgba(196,181,144,0.5);
}
body.theme-sog #managementPage .alzar-search-box i {
    color: var(--sog-tan);
}
body.theme-sog #managementPage .alzar-select {
    background: rgba(43,63,110,0.18);
    border: 1px solid rgba(43,63,110,0.40);
    border-radius: var(--sog-radius-btn);
    color: var(--sog-light);
}

/* Dark mode: view header */
body.theme-sog #managementPage .view-header,
body.theme-sog #managementPage .view-title {
    color: var(--sog-light);
    background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════
   MANAGEMENT PAGE — LIGHT MODE OVERRIDES
   White cards, tan section bg, navy text — only when brightness=light
   ═══════════════════════════════════════════════════════════════════ */

html[data-brightness="light"] body.theme-sog #managementPage .view-container,
html[data-brightness="light"] body.theme-sog #managementPage .view-content {
    background: var(--sog-light);
    color: var(--sog-bg);
}
html[data-brightness="light"] body.theme-sog #managementPage .alzar-stat-card {
    background: var(--sog-white);
    border: 1px solid rgba(43,63,110,0.12);
    border-left: 3px solid var(--sog-navy);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    color: var(--sog-bg);
}
html[data-brightness="light"] body.theme-sog #managementPage .alzar-stat-card.highlight {
    background: rgba(16,185,129,0.08);
    border-left-color: #10b981;
}
html[data-brightness="light"] body.theme-sog #managementPage .alzar-stat-card.negative-card {
    background: rgba(239,68,68,0.06);
    border-left-color: #ef4444;
}
html[data-brightness="light"] body.theme-sog #managementPage .alzar-stat-card:hover {
    box-shadow: 0 8px 24px rgba(43,63,110,0.18);
}
html[data-brightness="light"] body.theme-sog #managementPage .stat-label { color: var(--sog-navy); }
html[data-brightness="light"] body.theme-sog #managementPage .stat-value  { color: var(--sog-bg);   }

html[data-brightness="light"] body.theme-sog #managementPage #hqm-users-table,
html[data-brightness="light"] body.theme-sog #managementPage #hqm-ws-table {
    background: var(--sog-white);
    border: 1px solid rgba(43,63,110,0.10);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
html[data-brightness="light"] body.theme-sog #managementPage .alzar-table thead {
    background: var(--sog-light);
    color: var(--sog-navy);
}
html[data-brightness="light"] body.theme-sog #managementPage .alzar-table th {
    border-bottom-color: rgba(43,63,110,0.15);
    color: var(--sog-navy);
}
html[data-brightness="light"] body.theme-sog #managementPage .alzar-table tbody tr {
    border-bottom-color: rgba(43,63,110,0.07);
}
html[data-brightness="light"] body.theme-sog #managementPage .alzar-table tbody tr:hover {
    background: rgba(43,63,110,0.04);
}
html[data-brightness="light"] body.theme-sog #managementPage .alzar-table td {
    color: var(--sog-bg);
}

html[data-brightness="light"] body.theme-sog #managementPage .cfo-tab-bar {
    border-bottom-color: rgba(43,63,110,0.15);
}
html[data-brightness="light"] body.theme-sog #managementPage .cfo-tab {
    color: var(--sog-navy);
    opacity: 0.6;
}
html[data-brightness="light"] body.theme-sog #managementPage .cfo-tab.active {
    color: var(--sog-navy);
    opacity: 1;
    border-bottom-color: var(--sog-navy);
}
html[data-brightness="light"] body.theme-sog #managementPage .cfo-tab:hover {
    background: rgba(43,63,110,0.06);
}

html[data-brightness="light"] body.theme-sog #managementPage .alzar-search-box {
    background: var(--sog-white);
    border-color: rgba(43,63,110,0.20);
    color: var(--sog-bg);
}
html[data-brightness="light"] body.theme-sog #managementPage .alzar-search-box input {
    color: var(--sog-bg);
}
html[data-brightness="light"] body.theme-sog #managementPage .alzar-search-box i {
    color: var(--sog-navy);
}
html[data-brightness="light"] body.theme-sog #managementPage .alzar-select {
    background: var(--sog-white);
    border-color: rgba(43,63,110,0.20);
    color: var(--sog-bg);
}
html[data-brightness="light"] body.theme-sog #managementPage .view-header,
html[data-brightness="light"] body.theme-sog #managementPage .view-title {
    color: var(--sog-bg);
}

/* ═══════════════════════════════════════════════════════════════════
   EYEBROW LABELS
   ═══════════════════════════════════════════════════════════════════ */
body.theme-sog .sog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--sog-tan);
    margin-bottom: 12px;
}
body.theme-sog .sog-eyebrow::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 2px;
    background: var(--sog-tan);
}

/* ═══════════════════════════════════════════════════════════════════
   HQ PANEL PAGE — shell-embedded full-frame HQ control
   (AI Control Room / Component Studio / Intelligence)
   ═══════════════════════════════════════════════════════════════════ */
body.theme-sog #hqPanelPage {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.theme-sog #hq-panel-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 1;
}

body.theme-sog #hq-panel-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    background: var(--sog-navy);
    color: var(--sog-light);
    flex-shrink: 0;
    font-family: var(--sog-font-heading);
    font-size: 0.95rem;
    border-bottom: 2px solid var(--sog-tan);
}

body.theme-sog #hq-panel-header .btn.ghost {
    color: var(--sog-light);
    border-color: rgba(235,232,208,0.3);
    font-size: 0.85rem;
    padding: 6px 14px;
    gap: 6px;
}

body.theme-sog #hq-panel-header .btn.ghost:hover {
    background: rgba(235,232,208,0.12);
    border-color: var(--sog-tan);
}

body.theme-sog #hq-panel-header .hq-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sog-tan);
    font-size: 1rem;
}

body.theme-sog #hq-panel-frame {
    flex: 1;
    min-height: 0;
    border: 0;
    display: block;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   TITLE BAR — SOG BRANDING
   ═══════════════════════════════════════════════════════════════════ */
body.theme-sog #title-bar {
    background: var(--sog-bg);
    border-bottom: 1px solid rgba(196,181,144,0.12);
}
body.theme-sog .tb-left .logo-text .logo-alzar {
    color: var(--sog-light);
}
body.theme-sog .tb-left .logo-text .logo-logic {
    color: var(--sog-tan);
}

/* ═══════════════════════════════════════════════════════════════════
   GSAP SCROLL-IN HELPERS
   Initial state — sog-tactical.js animates them in.
   ═══════════════════════════════════════════════════════════════════ */
body.theme-sog .animate-up {
    opacity: 0;
    transform: translateY(32px);
}
body.theme-sog .animate-stagger > * {
    opacity: 0;
    transform: translateY(24px);
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL SOG WORKSPACE OVERRIDES
   Applies to EVERY module: Dashboard, Pipeline, CFO, Production,
   Estimator, CRM, Settings, Inventory, Calendar, etc.
   Uses shared Alzar component class names — no per-module scoping.

   Pattern:
     body.theme-sog ...   → always-on (typography, radius, accent rules)
     html[data-brightness="light"] body.theme-sog ...  → light mode only
   Dark mode inherits from base unified.css + sog token overrides below.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shared: view chrome ─────────────────────────────────── */
body.theme-sog .view-header,
body.theme-sog .view-title,
body.theme-sog .page-title,
body.theme-sog .section-title {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Shared: stat cards — typography + radius (both modes) ─ */
body.theme-sog .alzar-stat-card {
    border-radius: var(--sog-radius-card);
    border-left-width: 3px;
}
body.theme-sog .alzar-stat-card .stat-label {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    font-weight: 700;
}
body.theme-sog .alzar-stat-card .stat-value {
    font-family: var(--sog-font-heading);
    font-weight: 700;
    line-height: 1;
}

/* ── Shared: generic cards — radius ─────────────────────── */
body.theme-sog .alzar-card {
    border-radius: var(--sog-radius-card);
}

/* ── Shared: tabs — Rajdhani uppercase (all modules) ─────── */
body.theme-sog .cfo-tab,
body.theme-sog .alzar-tab,
body.theme-sog .tab-btn,
body.theme-sog .nav-tab {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.82rem;
    font-weight: 600;
}

/* ── Shared: table headers — Rajdhani uppercase (all modules) */
body.theme-sog .alzar-table thead th,
body.theme-sog .alzar-table thead td,
body.theme-sog table.data-table thead th {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
}

/* ── Shared: input / select radius ──────────────────────── */
body.theme-sog .alzar-input,
body.theme-sog .alzar-select,
body.theme-sog .alzar-search-box {
    border-radius: var(--sog-radius-btn);
}

/* ══════════════════════════════════════════════════════════
   DARK MODE — Global SOG visual treatment
   (default; no data-brightness attribute on <html>)
   ══════════════════════════════════════════════════════════ */

/* Stat cards: navy-glass accent */
body.theme-sog .alzar-stat-card {
    background: rgba(43, 63, 110, 0.18);
    border: 1px solid rgba(43, 63, 110, 0.38);
    border-left: 3px solid var(--sog-navy);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    color: var(--sog-light);
}
body.theme-sog .alzar-stat-card:hover {
    box-shadow: 0 8px 24px rgba(43, 63, 110, 0.32);
    transform: translateY(-2px);
    border-left-color: var(--sog-tan);
}
body.theme-sog .alzar-stat-card .stat-label { color: var(--sog-tan); }
body.theme-sog .alzar-stat-card .stat-value  { color: var(--sog-light); }

/* Preserve semantic left-border color variants */
body.theme-sog .alzar-stat-card.profit-card,
body.theme-sog .alzar-stat-card.positive-card,
body.theme-sog .alzar-stat-card.highlight {
    background: rgba(16, 185, 129, 0.10);
    border-left-color: #10b981;
}
body.theme-sog .alzar-stat-card.negative-card {
    background: rgba(239, 68, 68, 0.09);
    border-left-color: #ef4444;
}

/* Generic cards: navy-glass */
body.theme-sog .alzar-card,
body.theme-sog .alzar-card-header + .alzar-card-body,
body.theme-sog .content-card {
    background: rgba(43, 63, 110, 0.13);
    border: 1px solid rgba(43, 63, 110, 0.30);
}
body.theme-sog .alzar-card-header,
body.theme-sog .card-header {
    background: rgba(43, 63, 110, 0.22);
    border-bottom: 1px solid rgba(43, 63, 110, 0.35);
    color: var(--sog-tan);
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body.theme-sog .alzar-card:hover { box-shadow: 0 8px 24px rgba(43, 63, 110, 0.28); }

/* View chrome: text colors */
body.theme-sog .view-header,
body.theme-sog .view-title,
body.theme-sog .page-title,
body.theme-sog .section-title {
    color: var(--sog-light);
    background: transparent;
}

/* Tab bars */
body.theme-sog .cfo-tab,
body.theme-sog .alzar-tab,
body.theme-sog .tab-btn,
body.theme-sog .nav-tab {
    color: var(--sog-tan);
    opacity: 0.6;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
body.theme-sog .cfo-tab.active,
body.theme-sog .alzar-tab.active,
body.theme-sog .tab-btn.active,
body.theme-sog .nav-tab.active {
    color: var(--sog-tan);
    opacity: 1;
    border-bottom-color: var(--sog-tan);
}
body.theme-sog .cfo-tab:hover,
body.theme-sog .alzar-tab:hover,
body.theme-sog .tab-btn:hover,
body.theme-sog .nav-tab:hover {
    opacity: 0.85;
    background: rgba(43, 63, 110, 0.15);
    border-radius: 6px 6px 0 0;
}
body.theme-sog .cfo-tab-bar,
body.theme-sog .alzar-tab-bar,
body.theme-sog .tab-bar {
    border-bottom: 2px solid rgba(43, 63, 110, 0.35);
}

/* Tables */
body.theme-sog .alzar-table thead th,
body.theme-sog .alzar-table thead td,
body.theme-sog table.data-table thead th {
    background: rgba(43, 63, 110, 0.25);
    color: var(--sog-tan);
    border-bottom: 2px solid rgba(43, 63, 110, 0.40);
}
body.theme-sog .alzar-table tbody tr {
    border-bottom: 1px solid rgba(43, 63, 110, 0.13);
}
body.theme-sog .alzar-table tbody tr:hover,
body.theme-sog table.data-table tbody tr:hover {
    background: rgba(43, 63, 110, 0.15);
}
body.theme-sog .alzar-table td,
body.theme-sog table.data-table td { color: var(--sog-light); }

/* Form controls */
body.theme-sog .alzar-input,
body.theme-sog .alzar-select {
    background: rgba(43, 63, 110, 0.18);
    border: 1px solid rgba(43, 63, 110, 0.40);
    color: var(--sog-light);
}
body.theme-sog .alzar-input::placeholder { color: rgba(196, 181, 144, 0.45); }
body.theme-sog .alzar-input:focus,
body.theme-sog .alzar-select:focus {
    border-color: var(--sog-navy);
    box-shadow: 0 0 0 3px rgba(43, 63, 110, 0.25);
    outline: none;
}
body.theme-sog .alzar-search-box {
    background: rgba(43, 63, 110, 0.18);
    border: 1px solid rgba(43, 63, 110, 0.40);
    color: var(--sog-light);
}
body.theme-sog .alzar-search-box input {
    color: var(--sog-light);
    background: transparent;
}
body.theme-sog .alzar-search-box input::placeholder { color: rgba(196, 181, 144, 0.45); }
body.theme-sog .alzar-search-box i { color: var(--sog-tan); }

/* Controls bar */
body.theme-sog .alzar-controls-bar,
body.theme-sog .controls-bar,
body.theme-sog .filter-bar {
    background: transparent;
}

/* Pipeline / Kanban cards */
body.theme-sog .pipeline-card,
body.theme-sog .kanban-card {
    background: rgba(43, 63, 110, 0.18);
    border: 1px solid rgba(43, 63, 110, 0.35);
    border-radius: var(--sog-radius-card);
    color: var(--sog-light);
}
body.theme-sog .pipeline-card:hover,
body.theme-sog .kanban-card:hover {
    border-color: var(--sog-navy);
    box-shadow: 0 4px 14px rgba(43, 63, 110, 0.30);
}
body.theme-sog .pipeline-column-header,
body.theme-sog .kanban-column-header {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sog-tan);
}

/* Settings panels */
body.theme-sog .settings-section,
body.theme-sog .settings-panel {
    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 .settings-section-title,
body.theme-sog .settings-label {
    font-family: var(--sog-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sog-tan);
}

/* Production cards / job cards */
body.theme-sog .job-card,
body.theme-sog .prod-card,
body.theme-sog .order-card {
    background: rgba(43, 63, 110, 0.15);
    border: 1px solid rgba(43, 63, 110, 0.32);
    border-radius: var(--sog-radius-card);
    color: var(--sog-light);
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE — Global SOG visual treatment
   (html[data-brightness="light"] only)
   ══════════════════════════════════════════════════════════ */

/* View chrome */
html[data-brightness="light"] body.theme-sog .view-header,
html[data-brightness="light"] body.theme-sog .view-title,
html[data-brightness="light"] body.theme-sog .page-title,
html[data-brightness="light"] body.theme-sog .section-title {
    color: var(--sog-bg);
}

/* Stat cards: white on tan */
html[data-brightness="light"] body.theme-sog .alzar-stat-card {
    background: var(--sog-white);
    border: 1px solid rgba(43, 63, 110, 0.12);
    border-left: 3px solid var(--sog-navy);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    color: var(--sog-bg);
}
html[data-brightness="light"] body.theme-sog .alzar-stat-card:hover {
    box-shadow: 0 8px 24px rgba(43, 63, 110, 0.18);
}
html[data-brightness="light"] body.theme-sog .alzar-stat-card .stat-label { color: var(--sog-navy); }
html[data-brightness="light"] body.theme-sog .alzar-stat-card .stat-value  { color: var(--sog-bg);   }
html[data-brightness="light"] body.theme-sog .alzar-stat-card.profit-card,
html[data-brightness="light"] body.theme-sog .alzar-stat-card.positive-card,
html[data-brightness="light"] body.theme-sog .alzar-stat-card.highlight {
    background: rgba(16, 185, 129, 0.07);
    border-left-color: #10b981;
}
html[data-brightness="light"] body.theme-sog .alzar-stat-card.negative-card {
    background: rgba(239, 68, 68, 0.06);
    border-left-color: #ef4444;
}

/* Generic cards */
html[data-brightness="light"] body.theme-sog .alzar-card,
html[data-brightness="light"] body.theme-sog .content-card {
    background: var(--sog-white);
    border: 1px solid rgba(43, 63, 110, 0.10);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
html[data-brightness="light"] body.theme-sog .alzar-card-header,
html[data-brightness="light"] body.theme-sog .card-header {
    background: var(--sog-light);
    border-bottom-color: rgba(43, 63, 110, 0.12);
    color: var(--sog-navy);
}

/* Tab bars */
html[data-brightness="light"] body.theme-sog .cfo-tab,
html[data-brightness="light"] body.theme-sog .alzar-tab,
html[data-brightness="light"] body.theme-sog .tab-btn,
html[data-brightness="light"] body.theme-sog .nav-tab {
    color: var(--sog-navy);
    opacity: 0.6;
}
html[data-brightness="light"] body.theme-sog .cfo-tab.active,
html[data-brightness="light"] body.theme-sog .alzar-tab.active,
html[data-brightness="light"] body.theme-sog .tab-btn.active,
html[data-brightness="light"] body.theme-sog .nav-tab.active {
    color: var(--sog-navy);
    opacity: 1;
    border-bottom-color: var(--sog-navy);
}
html[data-brightness="light"] body.theme-sog .cfo-tab:hover,
html[data-brightness="light"] body.theme-sog .alzar-tab:hover,
html[data-brightness="light"] body.theme-sog .tab-btn:hover,
html[data-brightness="light"] body.theme-sog .nav-tab:hover {
    background: rgba(43, 63, 110, 0.06);
}
html[data-brightness="light"] body.theme-sog .cfo-tab-bar,
html[data-brightness="light"] body.theme-sog .alzar-tab-bar,
html[data-brightness="light"] body.theme-sog .tab-bar {
    border-bottom-color: rgba(43, 63, 110, 0.18);
}

/* Tables */
html[data-brightness="light"] body.theme-sog .alzar-table thead th,
html[data-brightness="light"] body.theme-sog .alzar-table thead td,
html[data-brightness="light"] body.theme-sog table.data-table thead th {
    background: var(--sog-light);
    color: var(--sog-navy);
    border-bottom: 2px solid rgba(43, 63, 110, 0.18);
}
html[data-brightness="light"] body.theme-sog .alzar-table tbody tr {
    border-bottom: 1px solid rgba(43, 63, 110, 0.07);
}
html[data-brightness="light"] body.theme-sog .alzar-table tbody tr:hover,
html[data-brightness="light"] body.theme-sog table.data-table tbody tr:hover {
    background: rgba(43, 63, 110, 0.04);
}
html[data-brightness="light"] body.theme-sog .alzar-table td,
html[data-brightness="light"] body.theme-sog table.data-table td {
    color: var(--sog-bg);
}

/* Form controls */
html[data-brightness="light"] body.theme-sog .alzar-input,
html[data-brightness="light"] body.theme-sog .alzar-select {
    background: var(--sog-white);
    border: 1px solid rgba(43, 63, 110, 0.22);
    color: var(--sog-bg);
}
html[data-brightness="light"] body.theme-sog .alzar-input::placeholder {
    color: rgba(43, 63, 110, 0.35);
}
html[data-brightness="light"] body.theme-sog .alzar-input:focus,
html[data-brightness="light"] body.theme-sog .alzar-select:focus {
    border-color: var(--sog-navy);
    box-shadow: 0 0 0 3px rgba(43, 63, 110, 0.12);
}
html[data-brightness="light"] body.theme-sog .alzar-search-box {
    background: var(--sog-white);
    border: 1px solid rgba(43, 63, 110, 0.22);
    color: var(--sog-bg);
}
html[data-brightness="light"] body.theme-sog .alzar-search-box input {
    color: var(--sog-bg);
    background: transparent;
}
html[data-brightness="light"] body.theme-sog .alzar-search-box input::placeholder {
    color: rgba(43, 63, 110, 0.35);
}
html[data-brightness="light"] body.theme-sog .alzar-search-box i {
    color: var(--sog-navy);
}

/* Pipeline / Kanban cards */
html[data-brightness="light"] body.theme-sog .pipeline-card,
html[data-brightness="light"] body.theme-sog .kanban-card {
    background: var(--sog-white);
    border: 1px solid rgba(43, 63, 110, 0.10);
    color: var(--sog-bg);
}
html[data-brightness="light"] body.theme-sog .pipeline-card:hover,
html[data-brightness="light"] body.theme-sog .kanban-card:hover {
    border-color: rgba(43, 63, 110, 0.25);
    box-shadow: 0 4px 14px rgba(43, 63, 110, 0.12);
}
html[data-brightness="light"] body.theme-sog .pipeline-column-header,
html[data-brightness="light"] body.theme-sog .kanban-column-header {
    color: var(--sog-navy);
}

/* Settings panels */
html[data-brightness="light"] body.theme-sog .settings-section,
html[data-brightness="light"] body.theme-sog .settings-panel {
    background: var(--sog-white);
    border: 1px solid rgba(43, 63, 110, 0.10);
}
html[data-brightness="light"] body.theme-sog .settings-section-title,
html[data-brightness="light"] body.theme-sog .settings-label {
    color: var(--sog-navy);
}

/* Production / job cards */
html[data-brightness="light"] body.theme-sog .job-card,
html[data-brightness="light"] body.theme-sog .prod-card,
html[data-brightness="light"] body.theme-sog .order-card {
    background: var(--sog-white);
    border: 1px solid rgba(43, 63, 110, 0.10);
    color: var(--sog-bg);
}

/* ── Canvas: body background + title bar ─────────────────── */
html[data-brightness="light"] body.theme-sog {
    background: var(--sog-light);
    color: var(--sog-bg);
}
html[data-brightness="light"] body.theme-sog .view-container {
    background: var(--sog-light);
    color: var(--sog-bg);
}
html[data-brightness="light"] body.theme-sog #title-bar {
    background: linear-gradient(180deg, var(--sog-white) 0%, var(--sog-light) 100%);
    border-bottom: 1px solid rgba(43, 63, 110, 0.18);
}
html[data-brightness="light"] body.theme-sog .tb-left .logo-text .logo-alzar {
    color: var(--sog-bg);
}
html[data-brightness="light"] body.theme-sog .tb-left .logo-text .logo-logic {
    color: var(--sog-navy);
}
html[data-brightness="light"] body.theme-sog .nav-item span,
html[data-brightness="light"] body.theme-sog #title-bar .nav-item {
    color: var(--sog-bg);
}
html[data-brightness="light"] body.theme-sog .nav-item.active {
    color: var(--sog-navy) !important;
}