/* ====================================================================
   ALZAR MULTI-TENANT THEMES
   Path: css/themes.css
   Load after: css/main.css (so these overrides win the cascade)

   Strategy: Override the SAME CSS custom properties that :root defines.
   Every component already reads --color-primary, --color-bg-base, etc.
   Swapping the body class is all it takes to re-skin the app.

   в”Њв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”ђ
   в”‚  body.theme-metals  в†’  Combid Metals  (Industrial Steel Blue) в”‚
   в”‚  body.theme-pro     в†’  Combid Pro     (Construction Orange)   в”‚
   └────────────────────────────────────────────────────────────────┘
   ==================================================================== */


/* =========================================
   THEME: COMBID METALS (Manufacturing)
   Feel: Industrial, Precision, Steel, Cool
   ========================================= */

body.theme-metals {
    /* PRIMARY: Electric Blue / Steel */
    --color-primary:     #00a8e8;
    --color-primary-dim: rgba(0, 168, 232, 0.10);
    --color-primary-hover: #0077b6;
    --color-primary-light: rgba(0, 168, 232, 0.10);
    --color-primary-glow:  rgba(0, 168, 232, 0.40);

    /* BACKGROUNDS: Industrial Charcoal */
    --color-bg-base:    #121212;       /* Deep Charcoal Canvas */
    --color-bg-surface: #1A1B1E;       /* Industrial Gray - Cards/Panels */
    --color-bg-subtle:  #3A3B3E;
    --color-bg-hover:   #3A3B3E;

    /* BORDERS */
    --color-border: #3A3B3E;

    /* TEXT: Crisp White */
    --color-text-main:  #f8fafc;
    --color-text-muted: #94a3b8;

    /* STATUS */
    --color-success: #22c55e;
    --color-warning: #facc15;   /* Factory Safety Yellow */
    --color-danger:  #ef4444;
    --color-info:    #00a8e8;

    /* ACCENT */
    --color-accent:       #facc15;
    --color-accent-hover: #eab308;

    /* GRADIENT */
    --gradient-brand: linear-gradient(135deg, #00a8e8 0%, #0077b6 100%);
}


/* =========================================
   THEME: COMBID PRO (Installation)
   Feel: Construction, Heavy Duty, Warm, Safety
   ========================================= */

body.theme-pro {
    /* PRIMARY: Safety Orange / Blaze */
    --color-primary:     #f97316;
    --color-primary-dim: rgba(249, 115, 22, 0.10);
    --color-primary-hover: #ea580c;
    --color-primary-light: rgba(249, 115, 22, 0.10);
    --color-primary-glow:  rgba(249, 115, 22, 0.40);

    /* BACKGROUNDS: Industrial Charcoal */
    --color-bg-base:    #121212;       /* Deep Charcoal Canvas */
    --color-bg-surface: #1A1B1E;       /* Industrial Gray - Cards/Panels */
    --color-bg-subtle:  #3A3B3E;
    --color-bg-hover:   #3A3B3E;

    /* BORDERS */
    --color-border: #3A3B3E;

    /* TEXT: Warm Grey */
    --color-text-main:  #fafafa;
    --color-text-muted: #a1a1aa;

    /* STATUS */
    --color-success: #84cc16;   /* High-Vis Green */
    --color-warning: #fbbf24;
    --color-danger:  #f43f5e;
    --color-info:    #f97316;

    /* ACCENT */
    --color-accent:       #84cc16;
    --color-accent-hover: #65a30d;

    /* GRADIENT */
    --gradient-brand: linear-gradient(135deg, #f97316 0%, #facc15 100%);
}


/* =========================================
   UNIVERSAL COMPONENT OVERRIDES
   Specific tweaks for elements inside themes
   ========================================= */

/* в”Ђв”Ђ Sidebar Active Marker в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

body.theme-metals .nav-item.active {
    border-right: 3px solid var(--color-primary);
    border-left: none;
    background: linear-gradient(90deg, rgba(0, 168, 232, 0.1) 0%, transparent 100%);
    color: var(--color-primary);
}

body.theme-pro .nav-item.active {
    border-right: 3px solid var(--color-primary);
    border-left: none;
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.1) 0%, transparent 100%);
    color: var(--color-primary);
}

/* в”Ђв”Ђ Brand Icon & Tagline (sidebar header) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

body.theme-metals .alzar-brand-icon i,
body.theme-metals .alzar-brand-tagline,
body.theme-metals .text-logic {
    color: var(--color-primary);
}

body.theme-pro .alzar-brand-icon i,
body.theme-pro .alzar-brand-tagline,
body.theme-pro .text-logic {
    color: var(--color-primary);
}

/* в”Ђв”Ђ Brand Icon SVG glow в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

body.theme-metals .brand-icon svg {
    filter: drop-shadow(0 0 8px var(--color-primary-glow));
}

body.theme-pro .brand-icon svg {
    filter: drop-shadow(0 0 8px var(--color-primary-glow));
}

/* в”Ђв”Ђ Login Screen Logo Glow в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

body.theme-metals .glow-text {
    text-shadow: 0 0 20px rgba(0, 168, 232, 0.6);
}

body.theme-pro .glow-text {
    text-shadow: 0 0 20px rgba(249, 115, 22, 0.6);
}

/* в”Ђв”Ђ Primary Buttons в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

body.theme-metals .btn.primary {
    background: var(--gradient-brand);
    border: none;
    color: #fff;
}
body.theme-metals .btn.primary:hover {
    background: var(--color-primary-hover);
}

body.theme-pro .btn.primary {
    background: var(--gradient-brand);
    border: none;
    color: #000;            /* Dark text on orange for legibility */
}
body.theme-pro .btn.primary:hover {
    background: var(--color-primary-hover);
    color: #fff;
}

/* в”Ђв”Ђ KPI Values в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

body.theme-metals .kpi-value,
body.theme-metals .stat-value,
body.theme-pro .kpi-value,
body.theme-pro .stat-value {
    color: var(--color-primary);
}

/* в”Ђв”Ђ Progress Bars в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

body.theme-metals .progress-bar,
body.theme-pro .progress-bar {
    background: var(--gradient-brand);
}

/* в”Ђв”Ђ Scrollbar в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        body.theme-metals ::-webkit-scrollbar-thumb { background: #00a8e8; }
        body.theme-metals ::-webkit-scrollbar-thumb:hover { background: #0077b6; }

        body.theme-pro ::-webkit-scrollbar-thumb { background: #f97316; }
        body.theme-pro ::-webkit-scrollbar-thumb:hover { background: #ea580c; }
    }
}


/* ====================================================================
   COMPANY SWITCHER COMPONENT  (rendered by context-manager.js)
   Lives inside .sidebar-footer at the bottom of the sidebar
   ==================================================================== */

/* в”Ђв”Ђ Sidebar Footer в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

.sidebar-footer {
    border-top: 1px solid var(--color-border, #334155);
    padding: 8px;
    margin-top: auto;
}

.company-switcher {
    position: relative;
}

.switcher-trigger {
    display: flex;
    align-items: center;
    background: none;
    border: 1px solid var(--color-border, #334155);
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text-main, #f8fafc);
    transition: background-color .2s, border-color .2s;
    white-space: nowrap;
    width: 100%;
}
.switcher-trigger:hover {
    background-color: var(--color-bg-hover, #334155);
    border-color: var(--color-primary);
}

.switcher-current {
    display: flex;
    align-items: center;
    gap: 8px;
}

.switcher-icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-primary-dim, rgba(34,197,94,.1));
    border-radius: 6px;
    flex-shrink: 0;
}
.switcher-icon i {
    font-size: 1rem;
    color: var(--color-primary);
}

.switcher-name {
    font-weight: 600;
    font-size: .85rem;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.switcher-arrow {
    font-size: .7rem;
    transition: transform .2s;
    opacity: .6;
}
.switcher-trigger[aria-expanded="true"] .switcher-arrow {
    transform: rotate(180deg);
}

/* в”Ђв”Ђ Dropdown в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

.switcher-dropdown {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 220px;
    background: var(--color-bg-surface, #1e293b);
    border: 1px solid var(--color-border, #334155);
    border-radius: 10px;
    box-shadow: 0 -8px 30px rgba(0,0,0,.35);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all .2s ease;
}
.switcher-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.switcher-dropdown-header {
    padding: 10px 14px;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted, #94a3b8);
    border-bottom: 1px solid var(--color-border, #334155);
}

.switcher-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-main, #f8fafc);
    transition: background-color .15s;
    text-align: left;
}
.switcher-option:hover {
    background-color: var(--color-bg-hover, #334155);
}
.switcher-option:last-child {
    border-radius: 0 0 10px 10px;
}
.switcher-option.active {
    background-color: var(--color-primary-dim, rgba(34,197,94,.1));
}

.option-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-bg-hover, #334155);
    border-radius: 8px;
    flex-shrink: 0;
}
.switcher-option.active .option-icon {
    background: var(--color-primary);
}
.option-icon i {
    font-size: 1rem;
    color: var(--color-text-muted, #94a3b8);
}
.switcher-option.active .option-icon i {
    color: #fff;
}

.option-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.option-name {
    font-weight: 600;
    font-size: .85rem;
}
.option-tagline {
    font-size: .7rem;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.option-check {
    flex-shrink: 0;
    color: var(--color-primary);
    font-size: .9rem;
}

/* в”Ђв”Ђ Collapsed sidebar: shrink switcher в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

.shell-collapsed .switcher-name,
.shell-collapsed .switcher-arrow {
    display: none;
}
.shell-collapsed .switcher-trigger {
    padding: 8px;
    justify-content: center;
}
.shell-collapsed .switcher-dropdown {
    left: calc(100% + 8px);
    bottom: 0;
    top: auto;
}

/* в”Ђв”Ђ Smooth theme transition в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

.nav-item, .btn,
.alzar-brand-icon i, .alzar-brand-tagline, .text-logic,
.kpi-value, .stat-value {
    transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}

/* ====================================================================
   COMPANY MODULES – Toggle Grid (Settings > Company Modules)
   ==================================================================== */

.module-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.module-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-card, #1e1e2e);
    border: 1px solid var(--color-border, #2a2a3a);
    cursor: pointer;
    transition: opacity .2s, background .2s;
}
.module-toggle-row:hover {
    background: var(--color-bg-hover, #262636);
}
.module-toggle-row.disabled-module {
    opacity: .45;
}

.module-toggle-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--color-text, #e0e0e0);
}
.module-toggle-info i {
    font-size: 1.15rem;
    color: var(--color-primary, #00a8e8);
}

/* в”Ђв”Ђ iOS-style toggle switch в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

.toggle-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-track {
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--color-bg-muted, #3a3a4a);
    transition: background .2s;
    position: relative;
}
.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s;
}
.toggle-switch input:checked + .toggle-track {
    background: var(--color-primary, #00a8e8);
}
.toggle-switch input:checked + .toggle-track .toggle-thumb {
    transform: translateX(18px);
}

/* в”Ђв”Ђ Tenant card highlight в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

.tenant-card.active-tenant {
    border-color: var(--color-primary, #00a8e8);
    box-shadow: 0 0 0 1px var(--color-primary, #00a8e8);
}
.tenant-card .badge-sm {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--color-bg-muted, #3a3a4a);
    color: var(--color-text-muted, #999);
}

/* в”Ђв”Ђ Script tag shown under module name в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

.module-script-tag {
    display: block;
    font-size: 0.68rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--color-text-muted, #777);
    opacity: .7;
    margin-top: 1px;
}




/* ====================================================================
   THEME: LIGHT MODE  (Jobber-style, clean SaaS)
   Applied via  data-brightness="light"  on <html>
   Stacks on top of any tenant theme -- primary accent colors stay.

   Architecture:
     Canvas  = off-white (#f4f5f7)  -- the page background
     Surface = pure white (#ffffff) -- cards, panels, sidebars
     Borders = whisper-faint #e5e7eb -- definition without weight
     Shadows = replace heavy borders for depth separation
   ==================================================================== */

body[data-brightness="light"],
html[data-brightness="light"] body {
    --color-bg-base:     #f4f5f7;
    --color-bg-surface:  #ffffff;
    --color-bg-elevated: #ffffff;
    --color-bg-card:     #ffffff;
    --color-bg-panel:    #ffffff;
    --color-bg-hover:    #edf0f2;
    --color-bg-subtle:   #f4f5f7;
    --color-border:      #e5e7eb;

    --color-text-base:         #111827;
    --color-text-main:         #111827;
    --color-text-muted:        #6b7280;
    --color-text-base-inverse: #f8fafc;

    --color-icon-default: #374151;
    --color-icon-active:  var(--color-active);
}

/* Body base */
html[data-brightness="light"] body {
    background: var(--color-bg-base);
    color: var(--color-text-main);
}

/* Sidebar gets surface white */
html[data-brightness="light"] .app-sidebar {
    background: #ffffff;
    border-right: 1px solid var(--color-border);
}

/* Header */
html[data-brightness="light"] .app-header,
html[data-brightness="light"] .view-header {
    background: #ffffff;
    border-bottom-color: var(--color-border);
}

/* Cards -- shadow-first, feather-light border */
html[data-brightness="light"] .alzar-card,
html[data-brightness="light"] .kpi-card,
html[data-brightness="light"] .dashboard-card,
html[data-brightness="light"] .settings-card,
html[data-brightness="light"] .pipeline-card,
html[data-brightness="light"] .kanban-card,
html[data-brightness="light"] .kanban-column,
html[data-brightness="light"] .alzar-settings-panel,
html[data-brightness="light"] .ws-card {
    background: #ffffff;
    border-color: var(--color-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
}
html[data-brightness="light"] .alzar-card:hover,
html[data-brightness="light"] .kanban-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
}

/* Settings panels */
html[data-brightness="light"] .settings-content-area,
html[data-brightness="light"] #settings-main-content {
    background: var(--color-bg-base);
}
html[data-brightness="light"] .settings-category-bar,
html[data-brightness="light"] .settings-tabs-main,
html[data-brightness="light"] .settings-subtab-bar {
    background: #ffffff;
    border-bottom-color: var(--color-border);
}
html[data-brightness="light"] .settings-category-tab,
html[data-brightness="light"] .settings-sub-tab {
    color: #6b7280;
    background: transparent;
    border-color: transparent;
}
html[data-brightness="light"] .settings-category-tab.active,
html[data-brightness="light"] .settings-sub-tab.active {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    background: transparent;
}
html[data-brightness="light"] .settings-category-tab:hover:not(.active),
html[data-brightness="light"] .settings-sub-tab:hover:not(.active) {
    color: #374151;
    background: var(--color-bg-hover);
}

/* Inputs -- white bg, faint border, colored focus ring */
html[data-brightness="light"] input,
html[data-brightness="light"] textarea,
html[data-brightness="light"] select {
    background: #ffffff;
    color: #111827;
    border: 1px solid var(--color-border);
}
html[data-brightness="light"] input:focus,
html[data-brightness="light"] textarea:focus,
html[data-brightness="light"] select:focus {
    outline: none;
    border-color: var(--color-active, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
html[data-brightness="light"] input::placeholder,
html[data-brightness="light"] textarea::placeholder {
    color: #9ca3af;
}

/* Tables */
html[data-brightness="light"] table th {
    background: #f9fafb;
    color: #374151;
    border-bottom: 1px solid var(--color-border);
}
html[data-brightness="light"] table td {
    border-bottom: 1px solid var(--color-border);
    color: #111827;
}
html[data-brightness="light"] table tr:hover td {
    background: var(--color-bg-hover);
}

/* Dropdowns & popovers */
html[data-brightness="light"] .switcher-dropdown,
html[data-brightness="light"] #user-dropdown {
    background: #ffffff;
    border-color: var(--color-border);
    box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
}

/* User dropdown internals — light mode */
html[data-brightness="light"] .ud-header {
    border-bottom-color: var(--color-border) !important;
}
html[data-brightness="light"] .ud-name {
    color: #111827 !important;
}
html[data-brightness="light"] .ud-email {
    color: #6b7280 !important;
}
html[data-brightness="light"] .ud-role {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
}
html[data-brightness="light"] .ud-section {
    border-bottom-color: var(--color-border) !important;
}
html[data-brightness="light"] .ud-section-label {
    color: #9ca3af !important;
}
html[data-brightness="light"] .ud-tenant-btn {
    color: #1f2937 !important;
}
html[data-brightness="light"] .ud-tenant-btn:hover {
    background: var(--color-bg-hover) !important;
}
html[data-brightness="light"] .ud-tenant-btn.active {
    background: rgba(0, 0, 0, 0.05) !important;
}
html[data-brightness="light"] .ud-tenant-icon {
    background: #f3f4f6 !important;
    color: #374151 !important;
}
html[data-brightness="light"] .ud-brightness-label {
    color: #374151 !important;
    opacity: 1 !important;
}
html[data-brightness="light"] .ud-logout-btn {
    color: #dc2626 !important;
}
html[data-brightness="light"] .ud-logout-btn:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #b91c1c !important;
}

/* Modals */
html[data-brightness="light"] .modal-content,
html[data-brightness="light"] .alzar-modal {
    background: #ffffff;
    border-color: var(--color-border);
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
}

/* Nav items (sidebar) */
html[data-brightness="light"] #app-sidebar,
html[data-brightness="light"] .app-sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--color-border) !important;
}

html[data-brightness="light"] .nav-item {
    color: #1f2937 !important;
}
html[data-brightness="light"] .nav-item:hover {
    background: var(--color-bg-hover);
    color: #111827 !important;
}
html[data-brightness="light"] .nav-item.active {
    color: var(--color-active) !important;
}

/* Electron titlebar in light mode */
html[data-brightness="light"] #title-bar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--color-border) !important;
}
html[data-brightness="light"] .tb-center .nav-item {
    color: #374151 !important;
}
html[data-brightness="light"] .tb-center .nav-item:hover {
    background: var(--color-bg-hover) !important;
    color: #111827 !important;
}
html[data-brightness="light"] .tb-center .nav-item.active {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary) !important;
}
html[data-brightness="light"] .tb-center .nav-item.active i {
    color: var(--color-primary) !important;
}
html[data-brightness="light"] .app-logo {
    color: #111827 !important;
}
html[data-brightness="light"] .tb-right {
    color: #374151 !important;
}

/* Job Hub panel overrides */
html[data-brightness="light"] .job-hub-panel {
    background: #ffffff !important;
    border-left: 1px solid var(--color-border) !important;
}
html[data-brightness="light"] .jh-header {
    background: #f4f5f7 !important;
    border-bottom: 1px solid var(--color-border) !important;
}
html[data-brightness="light"] .jh-section {
    background: #ffffff !important;
    border: 1px solid var(--color-border) !important;
}
html[data-brightness="light"] .jh-section-title {
    color: #6b7280 !important;
    border-bottom: 1px solid var(--color-border) !important;
}
html[data-brightness="light"] .jh-client-name {
    color: #111827 !important;
}
html[data-brightness="light"] .jh-detail-label {
    color: #6b7280 !important;
}
html[data-brightness="light"] .jh-detail-value {
    color: #111827 !important;
}
html[data-brightness="light"] .jh-close-btn {
    border-color: var(--color-border) !important;
    color: #374151 !important;
}
html[data-brightness="light"] .jh-close-btn:hover {
    background: var(--color-bg-hover) !important;
    color: #111827 !important;
}

/* Module toggle cards */
html[data-brightness="light"] .module-toggle-row {
    background: #f9fafb;
    border-color: var(--color-border);
}
html[data-brightness="light"] .module-toggle-row:hover {
    background: var(--color-bg-hover);
}
html[data-brightness="light"] .module-toggle-info {
    color: #374151;
}

/* Scrollbar */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        html[data-brightness="light"] ::-webkit-scrollbar-track {
            background: #f4f5f7;
        }
        html[data-brightness="light"] ::-webkit-scrollbar-thumb {
            background: #d1d5db;
        }
        html[data-brightness="light"] ::-webkit-scrollbar-thumb:hover {
            background: #9ca3af;
        }
    }
}

/* Bootstrap utility class inversions */
html[data-brightness="light"] .text-light,
html[data-brightness="light"] .text-white {
    color: #111827 !important;
}
html[data-brightness="light"] .bg-dark {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: var(--color-border) !important;
}
html[data-brightness="light"] .text-muted {
    color: #6b7280 !important;
}
html[data-brightness="light"] .bg-secondary {
    background-color: var(--color-bg-surface) !important;
    color: #111827 !important;
    border-color: var(--color-border) !important;
}

/* Inner card / Kanban task block overrides */
html[data-brightness="light"] .task-card,
html[data-brightness="light"] .kanban-item,
html[data-brightness="light"] .alzar-card .card,
html[data-brightness="light"] .card {
    background-color: var(--color-bg-surface) !important;
    border-color: var(--color-border) !important;
    color: #111827 !important;
}

html[data-brightness="light"] .task-card:hover,
html[data-brightness="light"] .kanban-item:hover {
    background-color: #f3f4f6 !important;
}

html[data-brightness="light"] .card-header,
html[data-brightness="light"] .card-footer {
    background-color: #f9fafb !important;
    border-color: var(--color-border) !important;
    color: #111827 !important;
}

/* Bootstrap bg-primary / bg-info / bg-success / bg-warning / bg-danger — keep brand colors but ensure readable text */
html[data-brightness="light"] .bg-light {
    background-color: #f4f5f7 !important;
    color: #111827 !important;
}

/* Calendar day cells */
html[data-brightness="light"] .calendar-day {
    background: #ffffff !important;
    border-color: var(--color-border) !important;
}
html[data-brightness="light"] .calendar-day.today {
    background: rgba(59,130,246,0.06) !important;
    border-color: var(--color-primary) !important;
}
html[data-brightness="light"] .calendar-day.today .calendar-day-num {
    color: var(--color-primary) !important;
}
html[data-brightness="light"] .calendar-day-num {
    color: #374151;
}
html[data-brightness="light"] .calendar-day:not(.empty):hover {
    background: var(--color-bg-hover) !important;
}
html[data-brightness="light"] .master-cal-dayrow {
    color: #6b7280;
}

/* ====================================================================
   LIGHT MODE — Fix dark rgba() overlay backgrounds across entire app
   All rgba(0,0,0,X) overlays that look gray on a white surface are
   replaced with proper light-mode surface colors.
   ==================================================================== */

/* ── Dashboard: KPI Mini Grid (My Commission / Open Quotes) ── */
html[data-brightness="light"] .kpi-mini-grid {
    background: #f3f4f6 !important;
    border: 1px solid var(--color-border) !important;
}

/* ── Dashboard: Widget config toggle rows ── */
html[data-brightness="light"] .toggle-row {
    background: #f9fafb !important;
    border-color: var(--color-border) !important;
}
html[data-brightness="light"] .toggle-row:hover {
    background: var(--color-bg-hover) !important;
}

/* ── Grid Widget: Panel head (title bar of each widget) ── */
html[data-brightness="light"] .gs-widget .panel-head {
    background: #f9fafb !important;
    border-bottom-color: var(--color-border) !important;
}

/* ── Grid Widget: draggable widget-header bar ── */
html[data-brightness="light"] .gs-widget .widget-header {
    background: #f9fafb !important;
    border-bottom-color: var(--color-border) !important;
}

/* ── Widget footer (bottom area of cards) ── */
html[data-brightness="light"] .widget-footer {
    background: #f9fafb !important;
    border-top-color: var(--color-border) !important;
}

/* ── alzar-card header ── */
html[data-brightness="light"] .alzar-card-header {
    background: #f9fafb !important;
    border-bottom-color: var(--color-border) !important;
}

/* ── CFO: Panel title bar ── */
html[data-brightness="light"] .panel-title {
    background: #f9fafb !important;
    border-bottom-color: var(--color-border) !important;
    color: #374151 !important;
}

/* ── CFO: Timeline boxes (30 / 60 / 90 DAYS) ── */
html[data-brightness="light"] .timeline-box,
html[data-brightness="light"] .t-box {
    background: #f3f4f6 !important;
    border-color: var(--color-border) !important;
}

/* ── CFO: Table header cells ── */
html[data-brightness="light"] .cfo-table th {
    background: #f9fafb !important;
    color: #374151 !important;
    border-bottom-color: var(--color-border) !important;
}
html[data-brightness="light"] .cfo-table tr:hover td {
    background: var(--color-bg-hover) !important;
}

/* ── CFO: Simulator results block + large result area ── */
html[data-brightness="light"] .sim-results,
html[data-brightness="light"] .sim-result-area {
    background: #f3f4f6 !important;
    border: 1px solid var(--color-border) !important;
}

/* ── CFO: Input fields ── */
html[data-brightness="light"] .cfo-input {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: var(--color-border) !important;
}

/* ── CFO: Detail sections in modals ── */
html[data-brightness="light"] .detail-section {
    background: #f3f4f6 !important;
}

/* ── CFO: Expense / Cashflow summary bars ── */
html[data-brightness="light"] .expense-summary,
html[data-brightness="light"] .cashflow-summary {
    background: #f9fafb !important;
    border-bottom-color: var(--color-border) !important;
}

/* ── Forms: modern-input / modern-select (rgba dark bg) ── */
html[data-brightness="light"] .modern-input,
html[data-brightness="light"] .modern-select {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: var(--color-border) !important;
}

/* ── Predictor: meta footer bar ── */
html[data-brightness="light"] .pred-meta {
    background: #f9fafb !important;
    border-top-color: var(--color-border) !important;
    color: #6b7280 !important;
}

/* ── Predictor: advisory panels (keep colored bg, fix text) ── */
html[data-brightness="light"] .pred-advisory-warn {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.30) !important;
    color: #92400e !important;
}
html[data-brightness="light"] .pred-advisory-ok {
    background: rgba(34, 197, 94, 0.07) !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
    color: #065f46 !important;
}
html[data-brightness="light"] .pred-heat-ok {
    background: #f9fafb !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

/* ── Cards: module-card (settings module toggles) ── */
html[data-brightness="light"] .module-card {
    background: #ffffff !important;
    border-color: var(--color-border) !important;
}
html[data-brightness="light"] .module-card:hover {
    background: #f9fafb !important;
}

/* ── Cards: bg-black-10 utility ── */
html[data-brightness="light"] .bg-black-10 {
    background: #f3f4f6 !important;
}

/* ── Activity row hover ── */
html[data-brightness="light"] .activity-row:hover {
    background: var(--color-bg-hover) !important;
}

/* ── Modals: footer area + header ── */
html[data-brightness="light"] .modal-footer,
html[data-brightness="light"] .alzar-modal .modal-footer {
    background: #f9fafb !important;
    border-top-color: var(--color-border) !important;
}
html[data-brightness="light"] .modal-header,
html[data-brightness="light"] .alzar-modal .modal-header {
    background: #f9fafb !important;
    border-bottom-color: var(--color-border) !important;
}

/* ── Pipeline / Production: any inset panel ── */
html[data-brightness="light"] .panel-inset,
html[data-brightness="light"] .inset-block {
    background: #f3f4f6 !important;
}

/* ── Forms: select dropdowns & inset inputs ── */
html[data-brightness="light"] select {
    background: #ffffff !important;
    color: #111827 !important;
}

/* ====================================================================
   DARK MODE — Fix invisible inset sections
   Original CSS uses rgba(0,0,0,0.2) overlays which darken flat into
   the card surface (#1A1B1E). Replace with an elevated light value so
   these sections are clearly visible against the card background.
   #212426 = ~6 levels lighter than #1A1B1E = subtle elevation.
   ==================================================================== */

/* ── Dashboard: KPI Mini Grid ── */
html:not([data-brightness="light"]) .kpi-mini-grid {
    background: #212426 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}

/* ── CFO: Timeline boxes (30 / 60 / 90 DAYS) ── */
html:not([data-brightness="light"]) .timeline-box,
html:not([data-brightness="light"]) .t-box {
    background: #212426 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}

/* ── CFO: Target Simulator result area ── */
html:not([data-brightness="light"]) .sim-results,
html:not([data-brightness="light"]) .sim-result-area {
    background: #212426 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}

/* ── CFO: Table header cells ── */
html:not([data-brightness="light"]) .cfo-table th {
    background: #212426 !important;
}

/* ── CFO: Detail / inset sections ── */
html:not([data-brightness="light"]) .detail-section {
    background: #212426 !important;
}

/* ── CFO: expense & cashflow summary bars ── */
html:not([data-brightness="light"]) .expense-summary,
html:not([data-brightness="light"]) .cashflow-summary {
    background: #1f2224 !important;
}

/* ── Widget / panel sub-headers ── */
html:not([data-brightness="light"]) .gs-widget .panel-head,
html:not([data-brightness="light"]) .gs-widget .widget-header {
    background: rgba(255,255,255,0.04) !important;
}

/* ── Predictor: meta footer ── */
html:not([data-brightness="light"]) .pred-meta {
    background: rgba(255,255,255,0.04) !important;
}

/* ── Forms: modern-input / modern-select ── */
html:not([data-brightness="light"]) .modern-input,
html:not([data-brightness="light"]) .modern-select {
    background: rgba(255,255,255,0.06) !important;
}

/* ── Toggle rows ── */
html:not([data-brightness="light"]) .toggle-row {
    background: rgba(255,255,255,0.04) !important;
}