/* W5OBM Consolidated Theme Overrides
 *
 * Goal: keep theme-specific CSS in one place.
 * Activation: include/header.php and include/header.modern.php set
 *   document.documentElement.dataset.w5obmTheme = <theme key>
 *
 * Supported keys (dev):
 * - w5obm_navy
 * - w5obm_indigo
 * - w5obm_green
 * - w5obm_black
 * - w5obm_ruby
 * - w5obm_maroon
 * - w5obm_copper
 */

/* ============================
 * Global defaults (always defined)
 * ============================
 * Many pages use these CSS variables (some are also overridden at runtime by PHP).
 * Defining them here guarantees they exist even if runtime injection fails.
 */
:root {
    /* W5OBM Custom Variables (used by some legacy components) */
    --w5obm-primary: var(--w5obm-primary-blue);
    --w5obm-secondary: var(--w5obm-secondary-blue);
    --w5obm-success: #198754;
    --w5obm-danger: var(--color-danger);
    --w5obm-warning: var(--color-warning);
    --w5obm-info: #0dcaf0;
    --w5obm-light: #f8f9fa;
    --w5obm-dark: #343a40;

    /* Theme-driven vars stay as compatibility aliases. Runtime values come from css/site-header-vars.php. */
    --theme-accent-primary: var(--w5obm-accent-primary, var(--w5obm-secondary-blue));
    --theme-accent-secondary: var(--w5obm-accent-secondary, #4a90e2);
    --theme-text-primary: var(--w5obm-navbar-text-primary, #0f172a);
    --theme-text-secondary: var(--w5obm-navbar-text-secondary, #475569);
    --theme-nav-bg: var(--w5obm-navbar-bg, #FFFFFFF5);
    --theme-nav-bg-scrolled: var(--w5obm-navbar-bg-scrolled, #FFFFFFFA);
    --theme-nav-border: var(--w5obm-navbar-border, #0000002E);
    --theme-nav-shadow: var(--w5obm-navbar-shadow, 0 8px 26px #0000001A);

    /* Legacy palette vars used in some site CSS */
    --primary-blue: var(--w5obm-primary-blue);
    --secondary-blue: var(--w5obm-secondary-blue);
    --accent-gold: var(--w5obm-accent-gold);

    /* Hero variables (safe defaults; may be overridden at runtime) */
    --hero-gradient-angle: 135deg;
    --hero-gradient-start: var(--primary-blue);
    --hero-gradient-end: var(--secondary-blue);
    --hero-overlay-from: #031A54D9;
    --hero-overlay-to: #145EFFB2;
    --hero-fade-alpha: 0.08;
    --hero-fade-start: 55%;
    --hero-fade-alpha-effective: 0.08;
    --hero-fade-start-effective: 55%;
    --hero-text-primary: #ffffff;
    --hero-text-secondary: #FFFFFFD9;
    --hero-badge-bg: #FFFFFF40;
    --hero-badge-border: #FFFFFF8C;
    --hero-badge-text: #ffffff;
    --hero-stat-bg: #FFFFFF1F;
    --hero-stat-border: #FFFFFF40;

    /* Hero Variant Gradients */
    --hero-variant-indigo-start: #0f172a;
    --hero-variant-indigo-end: #4338ca;
    --hero-variant-teal-start: #0f766e;
    --hero-variant-teal-end: #14b8a6;
    --hero-variant-sunset-start: #c33764;
    --hero-variant-sunset-end: #1d2671;

    /* Hero Buttons (high contrast) */
    --hero-button-text: #ffffff;
    --hero-button-border: #FFFFFFCC;
    --hero-button-hover-bg: #FFFFFF2E;
    --hero-button-hover-text: #ffffff;

    /* Hero Logo */
    --hero-logo-bg: #FFFFFFF2;
    --hero-logo-border: #FFD700CC;

    /* Hero Carousel */
    --hero-carousel-indicator-bg: #FFFFFFB2;
    --hero-carousel-text: #ffffff;

    /* Navbar customization (can be overridden by user or admin) */
    --w5obm-navbar-bg: var(--theme-nav-bg, #FFFFFFF5);
    --w5obm-navbar-bg-scrolled: var(--theme-nav-bg-scrolled, #FFFFFFFA);
    --w5obm-navbar-text-primary: var(--theme-text-primary, #0f172a);
    --w5obm-navbar-text-secondary: var(--theme-text-secondary, #475569);
    --w5obm-navbar-border: var(--theme-nav-border, #0000002E);
    --w5obm-navbar-shadow: var(--theme-nav-shadow, 0 8px 26px #0000001A);
}

/* ============================
 * W5OBM Navy (w5obm_navy)
 * ============================ */
/* W5OBM navy value defaults moved to css/site-header-vars.php. */

:root[data-w5obm-theme="w5obm_navy"] body {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Make "light" utility backgrounds not blinding in navy mode */
:root[data-w5obm-theme="w5obm_navy"] .bg-light,
:root[data-w5obm-theme="w5obm_navy"] .bg-body-tertiary {
    background-color: var(--bs-tertiary-bg, #FFFFFF1A) !important;
}

/* Content cards can intentionally request light Bootstrap utility surfaces even in navy mode. */
:root[data-w5obm-theme="w5obm_navy"] :is(
    .card,
    .card-header,
    .card-body,
    .card-footer,
    .modal-content,
    .modal-header,
    .modal-body,
    .modal-footer,
    .accordion-item,
    .accordion-body,
    .list-group-item
).bg-light {
    background-color: rgba(var(--bs-light-rgb, 248, 249, 250), 1) !important;
    color: var(--w5obm-light-panel-text, var(--bs-body-color, #212529)) !important;
}

:root[data-w5obm-theme="w5obm_navy"] :is(
    .card,
    .card-header,
    .card-body,
    .card-footer,
    .modal-content,
    .modal-header,
    .modal-body,
    .modal-footer,
    .accordion-item,
    .accordion-body,
    .list-group-item
).bg-body-tertiary {
    background-color: var(--bs-tertiary-bg, #f8fafc) !important;
    color: var(--w5obm-light-panel-text, var(--bs-body-color, #212529)) !important;
}

:root[data-w5obm-theme="w5obm_navy"] .bg-body-tertiary,
:root[data-w5obm-theme="w5obm_navy"] .card-header.bg-body-tertiary {
    color: var(--bs-body-color, #f8fafc) !important;
}

:root[data-w5obm-theme="w5obm_navy"] .text-muted {
    color: #CBD5E1D9 !important;
}

/* Ensure navbar transition stays smooth */
:root[data-w5obm-theme="w5obm_navy"] .w5obm-navbar {
    transition: background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

/* ============================
 * W5OBM Indigo (w5obm_indigo)
 * ============================
 * NOTE: This is intentionally blue-leaning (no lavender).
 */
/* W5OBM indigo value defaults moved to css/site-header-vars.php. */

/* ============================
 * W5OBM Green (w5obm_green)
 * ============================
 * Back-compat: also honors legacy .theme-green wrapper.
 */
/* W5OBM green value defaults moved to css/site-header-vars.php. */

:root[data-w5obm-theme="w5obm_green"] .btn-primary,
.theme-green .btn-primary {
    background: linear-gradient(135deg, var(--w5obm-primary-blue), var(--w5obm-secondary-blue));
}

:root[data-w5obm-theme="w5obm_green"] .btn-primary:hover,
:root[data-w5obm-theme="w5obm_green"] .btn-primary:focus,
.theme-green .btn-primary:hover,
.theme-green .btn-primary:focus {
    background: linear-gradient(135deg, var(--w5obm-secondary-blue), var(--w5obm-primary-blue));
    box-shadow: 0 10px 25px #2D867066;
}

:root[data-w5obm-theme="w5obm_green"] .card-border-top,
.theme-green .card-border-top {
    border-top: 5px solid var(--w5obm-secondary-blue);
}

:root[data-w5obm-theme="w5obm_green"] a,
.theme-green a {
    color: var(--w5obm-secondary-blue);
}

:root[data-w5obm-theme="w5obm_green"] a:hover,
:root[data-w5obm-theme="w5obm_green"] a:focus,
.theme-green a:hover,
.theme-green a:focus {
    color: var(--w5obm-primary-blue);
}

:root[data-w5obm-theme="w5obm_green"] .table thead th,
.theme-green .table thead th {
    background: linear-gradient(135deg, var(--w5obm-primary-blue), var(--w5obm-secondary-blue));
}

:root[data-w5obm-theme="w5obm_green"] .nav-link:hover,
:root[data-w5obm-theme="w5obm_green"] .nav-link:focus,
.theme-green .nav-link:hover,
.theme-green .nav-link:focus {
    color: var(--w5obm-secondary-blue);
    background-color: #2D86701A;
}

:root[data-w5obm-theme="w5obm_green"] .nav-link.active,
.theme-green .nav-link.active {
    color: var(--w5obm-primary-blue);
    background-color: #2D867026;
}

:root[data-w5obm-theme="w5obm_green"] .navbar-w5obm,
.theme-green .navbar-w5obm {
    background: var(--w5obm-primary-blue);
}

:root[data-w5obm-theme="w5obm_green"] .footer,
.theme-green .footer {
    background: var(--w5obm-primary-blue);
}

:root[data-w5obm-theme="w5obm_green"] .hero-overlay,
.theme-green .hero-overlay {
    background: linear-gradient(135deg, #1A5D47D9, #2D8670B2);
}

:root[data-w5obm-theme="w5obm_green"] .bg-primary,
.theme-green .bg-primary {
    background: linear-gradient(135deg, var(--w5obm-primary-blue), var(--w5obm-secondary-blue)) !important;
}

:root[data-w5obm-theme="w5obm_green"] .text-primary,
.theme-green .text-primary {
    color: var(--w5obm-primary-blue) !important;
}

:root[data-w5obm-theme="w5obm_green"] .text-secondary,
.theme-green .text-secondary {
    color: var(--w5obm-secondary-blue) !important;
}

:root[data-w5obm-theme="w5obm_green"] .card-primary,
.theme-green .card-primary {
    background: linear-gradient(135deg, var(--w5obm-primary-blue), var(--w5obm-secondary-blue));
}

:root[data-w5obm-theme="w5obm_green"] *:focus,
.theme-green *:focus {
    outline: 2px solid var(--w5obm-accent-gold);
}

/* Remaining W5OBM green value defaults moved to css/site-header-vars.php. */

/* ============================
 * W5OBM Black (w5obm_black)
 * ============================
 * GitHub-inspired dark surface with bright code-blue accents.
 */
/* W5OBM black value defaults moved to css/site-header-vars.php. */

/* ============================
 * W5OBM Ruby (w5obm_ruby)
 * ============================
 * Dark ruby-red theme with high-contrast rose accents.
 */
/* W5OBM ruby value defaults moved to css/site-header-vars.php. */

/* ============================
 * W5OBM Maroon (w5obm_maroon)
 * ============================
 * Deep wine-maroon theme with softer rose accents.
 */
/* W5OBM maroon value defaults moved to css/site-header-vars.php. */

/* ============================
 * W5OBM Copper (w5obm_copper)
 * ============================
 * Warm bronze-and-ember dark theme.
 */
/* W5OBM copper value defaults moved to css/site-header-vars.php. */

/* Shared custom-theme component treatments */
:root[data-w5obm-theme="w5obm_indigo"] .btn-primary,
:root[data-w5obm-theme="w5obm_black"] .btn-primary,
:root[data-w5obm-theme="w5obm_ruby"] .btn-primary,
:root[data-w5obm-theme="w5obm_maroon"] .btn-primary,
:root[data-w5obm-theme="w5obm_copper"] .btn-primary {
    background: linear-gradient(135deg, var(--w5obm-primary-blue), var(--w5obm-secondary-blue));
    border-color: var(--w5obm-primary-blue);
}

:root[data-w5obm-theme="w5obm_indigo"] .btn-primary:hover,
:root[data-w5obm-theme="w5obm_indigo"] .btn-primary:focus,
:root[data-w5obm-theme="w5obm_black"] .btn-primary:hover,
:root[data-w5obm-theme="w5obm_black"] .btn-primary:focus,
:root[data-w5obm-theme="w5obm_ruby"] .btn-primary:hover,
:root[data-w5obm-theme="w5obm_ruby"] .btn-primary:focus,
:root[data-w5obm-theme="w5obm_maroon"] .btn-primary:hover,
:root[data-w5obm-theme="w5obm_maroon"] .btn-primary:focus,
:root[data-w5obm-theme="w5obm_copper"] .btn-primary:hover,
:root[data-w5obm-theme="w5obm_copper"] .btn-primary:focus {
    background: linear-gradient(135deg, var(--w5obm-secondary-blue), var(--w5obm-primary-blue));
    box-shadow: var(--w5obm-custom-primary-hover-shadow);
}

:root[data-w5obm-theme="w5obm_indigo"] .card-border-top,
:root[data-w5obm-theme="w5obm_black"] .card-border-top,
:root[data-w5obm-theme="w5obm_ruby"] .card-border-top,
:root[data-w5obm-theme="w5obm_maroon"] .card-border-top,
:root[data-w5obm-theme="w5obm_copper"] .card-border-top {
    border-top: 5px solid var(--w5obm-secondary-blue);
}

:root[data-w5obm-theme="w5obm_indigo"] a,
:root[data-w5obm-theme="w5obm_black"] a,
:root[data-w5obm-theme="w5obm_ruby"] a,
:root[data-w5obm-theme="w5obm_maroon"] a,
:root[data-w5obm-theme="w5obm_copper"] a {
    color: var(--bs-link-color);
}

:root[data-w5obm-theme="w5obm_indigo"] a:hover,
:root[data-w5obm-theme="w5obm_indigo"] a:focus,
:root[data-w5obm-theme="w5obm_black"] a:hover,
:root[data-w5obm-theme="w5obm_black"] a:focus,
:root[data-w5obm-theme="w5obm_ruby"] a:hover,
:root[data-w5obm-theme="w5obm_ruby"] a:focus,
:root[data-w5obm-theme="w5obm_maroon"] a:hover,
:root[data-w5obm-theme="w5obm_maroon"] a:focus,
:root[data-w5obm-theme="w5obm_copper"] a:hover,
:root[data-w5obm-theme="w5obm_copper"] a:focus {
    color: var(--bs-link-hover-color);
}

:root[data-w5obm-theme="w5obm_indigo"] .table thead th,
:root[data-w5obm-theme="w5obm_indigo"] .bg-primary,
:root[data-w5obm-theme="w5obm_indigo"] .card-primary,
:root[data-w5obm-theme="w5obm_black"] .table thead th,
:root[data-w5obm-theme="w5obm_black"] .bg-primary,
:root[data-w5obm-theme="w5obm_black"] .card-primary,
:root[data-w5obm-theme="w5obm_ruby"] .table thead th,
:root[data-w5obm-theme="w5obm_ruby"] .bg-primary,
:root[data-w5obm-theme="w5obm_ruby"] .card-primary,
:root[data-w5obm-theme="w5obm_maroon"] .table thead th,
:root[data-w5obm-theme="w5obm_maroon"] .bg-primary,
:root[data-w5obm-theme="w5obm_maroon"] .card-primary,
:root[data-w5obm-theme="w5obm_copper"] .table thead th,
:root[data-w5obm-theme="w5obm_copper"] .bg-primary,
:root[data-w5obm-theme="w5obm_copper"] .card-primary {
    background: linear-gradient(135deg, var(--w5obm-primary-blue), var(--w5obm-secondary-blue)) !important;
    color: var(--hero-text-primary) !important;
}

:root[data-w5obm-theme="w5obm_indigo"] .nav-link:hover,
:root[data-w5obm-theme="w5obm_indigo"] .nav-link:focus,
:root[data-w5obm-theme="w5obm_black"] .nav-link:hover,
:root[data-w5obm-theme="w5obm_black"] .nav-link:focus,
:root[data-w5obm-theme="w5obm_ruby"] .nav-link:hover,
:root[data-w5obm-theme="w5obm_ruby"] .nav-link:focus,
:root[data-w5obm-theme="w5obm_maroon"] .nav-link:hover,
:root[data-w5obm-theme="w5obm_maroon"] .nav-link:focus,
:root[data-w5obm-theme="w5obm_copper"] .nav-link:hover,
:root[data-w5obm-theme="w5obm_copper"] .nav-link:focus {
    color: var(--w5obm-secondary-blue);
    background-color: var(--w5obm-custom-nav-hover-bg);
}

:root[data-w5obm-theme="w5obm_indigo"] .nav-link.active,
:root[data-w5obm-theme="w5obm_black"] .nav-link.active,
:root[data-w5obm-theme="w5obm_ruby"] .nav-link.active,
:root[data-w5obm-theme="w5obm_maroon"] .nav-link.active,
:root[data-w5obm-theme="w5obm_copper"] .nav-link.active {
    color: var(--w5obm-primary-blue);
    background-color: var(--w5obm-custom-nav-active-bg);
}

@layer themeOverridesContrast {
    :root {
        --w5obm-theme-surface: var(--bs-body-bg, #ffffff);
        --w5obm-theme-surface-alt: var(--bs-secondary-bg, #f8f9fa);
        --w5obm-theme-text: var(--bs-body-color, #212529);
        --w5obm-theme-muted: var(--bs-secondary-color, #6c757d);
        --w5obm-theme-border: var(--bs-border-color, #21252926);
        --w5obm-theme-heading: var(--bs-emphasis-color, var(--w5obm-theme-text));
        --w5obm-theme-interactive-bg: #ffffff;
        --w5obm-theme-interactive-text: #0f172a;
        --w5obm-theme-interactive-muted: #475569;
        --w5obm-theme-interactive-border: #cbd5e1;
        --w5obm-theme-table-striped-bg: #f8fafc;
        --w5obm-theme-table-hover-bg: #eef3f8;
        --w5obm-theme-table-active-bg: #e2e8f0;
    }

    body {
        background-color: var(--w5obm-theme-surface);
        color: var(--w5obm-theme-text);
    }

    .card,
    .modal-content,
    .dropdown-menu,
    .list-group-item,
    .offcanvas,
    .toast {
        background-color: var(--bs-card-bg, var(--w5obm-theme-surface));
        color: var(--bs-card-color, var(--w5obm-theme-text));
        border-color: var(--w5obm-theme-border);
    }

    .card-header,
    .card-footer,
    .table thead th,
    .table > :not(caption) > * > * {
        border-color: var(--w5obm-theme-border);
    }

    .text-muted,
    .text-body-secondary {
        color: var(--w5obm-theme-muted) !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
        color: var(--w5obm-theme-heading);
    }

    [data-w5obm-theme="w5obm_navy"] {
        --w5obm-theme-surface: var(--bs-body-bg, #071a33);
        --w5obm-theme-surface-alt: var(--bs-secondary-bg, #FFFFFF14);
        --w5obm-theme-text: var(--bs-body-color, #f8fafc);
        --w5obm-theme-muted: var(--bs-secondary-color, #cbd5e1);
        --w5obm-theme-border: var(--bs-border-color, #94A3B847);
        --w5obm-theme-heading: var(--bs-emphasis-color, #ffffff);
        --w5obm-theme-interactive-bg: #ffffff;
        --w5obm-theme-interactive-text: #0f172a;
        --w5obm-theme-interactive-muted: #475569;
        --w5obm-theme-interactive-border: #cbd5e1;
        --w5obm-theme-table-striped-bg: #f8fafc;
        --w5obm-theme-table-hover-bg: #eef3f8;
        --w5obm-theme-table-active-bg: #e2e8f0;
    }

    [data-bs-theme="dark"],
    .theme-dark,
    .dark-theme,
    .dark-mode,
    body.dark,
    html.dark {
        --w5obm-theme-surface: var(--bs-body-bg, #0f172a);
        --w5obm-theme-surface-alt: var(--bs-secondary-bg, #1e293b);
        --w5obm-theme-text: var(--bs-body-color, #f8fafc);
        --w5obm-theme-muted: var(--bs-secondary-color, #cbd5e1);
        --w5obm-theme-border: var(--bs-border-color, #94A3B847);
        --w5obm-theme-heading: var(--bs-emphasis-color, #ffffff);
        --w5obm-theme-interactive-bg: #ffffff;
        --w5obm-theme-interactive-text: #0f172a;
        --w5obm-theme-interactive-muted: #475569;
        --w5obm-theme-interactive-border: #cbd5e1;
        --w5obm-theme-table-striped-bg: #f8fafc;
        --w5obm-theme-table-hover-bg: #eef3f8;
        --w5obm-theme-table-active-bg: #e2e8f0;
    }

    [data-w5obm-theme="w5obm_navy"] .form-control,
    [data-w5obm-theme="w5obm_navy"] .form-select,
    [data-w5obm-theme="w5obm_navy"] .input-group-text,
    [data-w5obm-theme="w5obm_navy"] .table,
    [data-w5obm-theme="w5obm_navy"] .accordion-item,
    [data-bs-theme="dark"] .form-control,
    [data-bs-theme="dark"] .form-select,
    [data-bs-theme="dark"] .input-group-text,
    [data-bs-theme="dark"] .table,
    [data-bs-theme="dark"] .accordion-item,
    .theme-dark .form-control,
    .theme-dark .form-select,
    .theme-dark .input-group-text,
    .theme-dark .table,
    .theme-dark .accordion-item,
    .dark-theme .form-control,
    .dark-theme .form-select,
    .dark-theme .input-group-text,
    .dark-theme .table,
    .dark-theme .accordion-item,
    .dark-mode .form-control,
    .dark-mode .form-select,
    .dark-mode .input-group-text,
    .dark-mode .table,
    .dark-mode .accordion-item,
    body.dark .form-control,
    body.dark .form-select,
    body.dark .input-group-text,
    body.dark .table,
    body.dark .accordion-item,
    html.dark .form-control,
    html.dark .form-select,
    html.dark .input-group-text,
    html.dark .table,
    html.dark .accordion-item {
        background-color: var(--w5obm-theme-interactive-bg);
        color: var(--w5obm-theme-interactive-text);
        border-color: var(--w5obm-theme-interactive-border);
        --bs-table-bg: var(--w5obm-theme-interactive-bg);
        --bs-table-color: var(--w5obm-theme-interactive-text);
        --bs-table-border-color: var(--w5obm-theme-interactive-border);
        --bs-table-striped-bg: var(--w5obm-theme-table-striped-bg);
        --bs-table-striped-color: var(--w5obm-theme-interactive-text);
        --bs-table-hover-bg: var(--w5obm-theme-table-hover-bg);
        --bs-table-hover-color: var(--w5obm-theme-interactive-text);
        --bs-table-active-bg: var(--w5obm-theme-table-active-bg);
        --bs-table-active-color: var(--w5obm-theme-interactive-text);
        --bs-accordion-bg: var(--w5obm-theme-interactive-bg);
        --bs-accordion-color: var(--w5obm-theme-interactive-text);
    }
}