/* 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
 */

/* ============================
 * 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: #061b38;
    --w5obm-secondary: #1e3a8a;
    --w5obm-success: #198754;
    --w5obm-danger: #dc3545;
    --w5obm-warning: #ffc107;
    --w5obm-info: #0dcaf0;
    --w5obm-light: #f8f9fa;
    --w5obm-dark: #343a40;

    /* Theme-driven vars (navbar + accents) */
    --theme-accent-primary: #1e3a8a;
    --theme-accent-secondary: #4a90e2;
    --theme-text-primary: #0f172a;
    --theme-text-secondary: #475569;
    --theme-nav-bg: rgba(255, 255, 255, 0.96);
    --theme-nav-bg-scrolled: rgba(255, 255, 255, 0.98);
    --theme-nav-border: rgba(0, 0, 0, 0.18);
    --theme-nav-shadow: 0 8px 26px rgba(0, 0, 0, .1);

    /* Legacy palette vars used in some site CSS */
    --primary-blue: #061b38;
    --secondary-blue: #1e3a8a;
    --accent-gold: #FFD700;

    /* 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: rgba(3, 26, 84, 0.85);
    --hero-overlay-to: rgba(20, 94, 255, 0.70);
    --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: rgba(255, 255, 255, 0.85);
    --hero-badge-bg: rgba(255, 255, 255, 0.25);
    --hero-badge-border: rgba(255, 255, 255, 0.55);
    --hero-badge-text: #ffffff;
    --hero-stat-bg: rgba(255, 255, 255, 0.12);
    --hero-stat-border: rgba(255, 255, 255, 0.25);

    /* 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: rgba(255, 255, 255, 0.8);
    --hero-button-hover-bg: rgba(255, 255, 255, 0.18);
    --hero-button-hover-text: #ffffff;

    /* Hero Logo */
    --hero-logo-bg: rgba(255, 255, 255, 0.95);
    --hero-logo-border: rgba(255, 215, 0, 0.8);

    /* Hero Carousel */
    --hero-carousel-indicator-bg: rgba(255, 255, 255, 0.7);
    --hero-carousel-text: #ffffff;

    /* Navbar customization (can be overridden by user or admin) */
    --w5obm-navbar-bg: rgba(255, 255, 255, 0.96);
    --w5obm-navbar-bg-scrolled: rgba(255, 255, 255, 0.98);
    --w5obm-navbar-text-primary: #0f172a;
    --w5obm-navbar-text-secondary: #475569;
    --w5obm-navbar-border: rgba(0, 0, 0, 0.18);
    --w5obm-navbar-shadow: 0 8px 26px rgba(0, 0, 0, .1);
}

/* ============================
 * W5OBM Navy (w5obm_navy)
 * ============================ */
:root[data-w5obm-theme="w5obm_navy"] {
    --bs-primary-rgb: 240, 180, 41;
    --bs-body-bg: #071a33;
    --bs-body-bg-rgb: 7, 26, 51;
    --bs-body-color: #f8fafc;
    --bs-body-color-rgb: 248, 250, 252;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #cbd5e1;
    --bs-tertiary-color: #94a3b8;
    --bs-border-color: rgba(148, 163, 184, 0.28);

    --bs-primary: #f0b429;
    /* gold */
    --bs-link-color: #f0b429;
    --bs-link-hover-color: #ffd166;

    --bs-success: #22c55e;
    /* green */
    --bs-info: #38bdf8;
    --bs-warning: #f59e0b;
    --bs-danger: #ef4444;

    --bs-card-bg: rgba(15, 23, 42, 0.75);
    --bs-card-color: #f8fafc;
    --bs-modal-bg: #0b1220;
    --bs-modal-color: #f8fafc;
    --bs-dropdown-bg: #0b1220;
    --bs-dropdown-link-color: #f8fafc;
    --bs-dropdown-link-hover-bg: rgba(240, 180, 41, 0.10);

    /* W5OBM custom theme variables (used by w5obm.css patterns) */
    --w5obm-primary-blue: #0b2a5b;
    --w5obm-secondary-blue: #123a7a;
    --w5obm-accent-gold: #f0b429;
    --w5obm-shadow-blue: 0 8px 26px rgba(0, 0, 0, 0.45);

    /* Theme-driven vars (define for per-theme customization) */
    --w5obm-primary: var(--bs-primary);
    --w5obm-secondary: #22c55e;
    --theme-accent-primary: var(--bs-primary);
    --theme-accent-secondary: #ffd166;
    --theme-text-primary: var(--bs-body-color);
    --theme-text-secondary: var(--bs-secondary-color);
    --theme-nav-bg: rgba(7, 26, 51, 0.92);
    --theme-nav-bg-scrolled: rgba(7, 26, 51, 0.96);
    --theme-nav-border: rgba(148, 163, 184, 0.28);
    --theme-nav-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);

    /* Legacy palette vars */
    --primary-blue: #071a33;
    --secondary-blue: #123a7a;
    --accent-gold: #f0b429;

    /* HERO theme integration for navy */
    --hero-gradient-start: #071a33;
    --hero-gradient-end: #123a7a;
    --hero-overlay-from: rgba(7, 26, 51, 0.90);
    --hero-overlay-to: rgba(18, 58, 122, 0.75);
    --hero-text-primary: #f8fafc;
    --hero-text-secondary: rgba(248, 250, 252, 0.85);
    --hero-badge-bg: rgba(240, 180, 41, 0.25);
    --hero-badge-border: rgba(240, 180, 41, 0.55);
    --hero-badge-text: #f0b429;
    --hero-stat-bg: rgba(240, 180, 41, 0.12);
    --hero-stat-border: rgba(240, 180, 41, 0.25);

    /* Navy theme hero components (high contrast white text) */
    --hero-button-text: #ffffff;
    --hero-button-border: rgba(255, 255, 255, 0.75);
    --hero-button-hover-bg: rgba(255, 255, 255, 0.2);
    --hero-button-hover-text: #ffffff;
    --hero-logo-bg: rgba(255, 255, 255, 0.92);
    --hero-logo-border: rgba(240, 179, 67, 0.9);
    --hero-carousel-text: #ffffff;
    --hero-carousel-indicator-bg: rgba(255, 255, 255, 0.65);

    /* Navbar integration */
    --w5obm-navbar-bg: rgba(7, 26, 51, 0.92);
    --w5obm-navbar-bg-scrolled: rgba(7, 26, 51, 0.96);
    --w5obm-navbar-text-primary: #f8fafc;
    --w5obm-navbar-text-secondary: #cbd5e1;
    --w5obm-navbar-border: rgba(148, 163, 184, 0.28);
    --w5obm-navbar-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);

    /* Text colors for Navy theme (high contrast on dark bg) */
    --theme-text-primary: #f8fafc;
    --theme-text-secondary: #cbd5e1;
}

: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: rgba(255, 255, 255, 0.06) !important;
}

:root[data-w5obm-theme="w5obm_navy"] .text-muted {
    color: rgba(203, 213, 225, 0.85) !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).
 */
:root[data-w5obm-theme="w5obm_indigo"] {
    /* Bootstrap root variables (set per-theme so you can customize them) */
    --bs-primary: #061f62;
    --bs-primary-rgb: 29, 78, 216;

    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: #2a3b61;
    --bs-body-color-rgb: 42, 59, 97;
    --bs-emphasis-color: #3564d1;
    --bs-secondary-color: #153159;
    --bs-tertiary-color: #124a98;
    --bs-border-color: rgba(1, 9, 29, 0.15);

    --bs-link-color: #602cf0;
    --bs-link-hover-color: #7795f5;

    --bs-success: #16a34a;
    --bs-info: #0ea5e9;
    --bs-warning: #f59e0b;
    --bs-danger: #dc2626;

    --bs-card-bg: #ffffff;
    --bs-card-color: #0f172a;
    --bs-modal-bg: #ffffff;
    --bs-modal-color: #0f172a;
    --bs-dropdown-bg: #ffffff;
    --bs-dropdown-link-color: #0f172a;
    --bs-dropdown-link-hover-bg: rgba(29, 78, 216, 0.10);

    /* W5OBM custom theme variables (used by w5obm.css patterns) */
    --w5obm-primary-blue: #1d4ed8;
    --w5obm-secondary-blue: #1e40af;
    --w5obm-accent-gold: #f0b429;
    --w5obm-shadow-blue: 0 5px 15px rgba(29, 78, 216, 0.25);

    /* Theme-driven vars */
    --w5obm-primary: var(--bs-primary);
    --w5obm-secondary: var(--w5obm-secondary-blue);
    --theme-accent-primary: var(--bs-primary);
    --theme-accent-secondary: var(--w5obm-secondary-blue);
    --theme-text-primary: var(--bs-body-color);
    --theme-text-secondary: var(--bs-secondary-color);
    --theme-nav-bg: rgba(255, 255, 255, 0.96);
    --theme-nav-bg-scrolled: rgba(255, 255, 255, 0.98);
    --theme-nav-border: rgba(15, 23, 42, 0.18);
    --theme-nav-shadow: 0 8px 26px rgba(0, 0, 0, .1);

    /* Legacy palette vars */
    --primary-blue: var(--w5obm-primary-blue);
    --secondary-blue: var(--w5obm-secondary-blue);
    --accent-gold: var(--w5obm-accent-gold);

    /* HERO theme integration for indigo */
    --hero-gradient-start: #061f62;
    --hero-gradient-end: #1d4ed8;
    --hero-overlay-from: rgba(6, 31, 98, 0.85);
    --hero-overlay-to: rgba(29, 78, 216, 0.70);
    --hero-text-primary: #ffffff;
    --hero-text-secondary: rgba(255, 255, 255, 0.90);
    --hero-badge-bg: rgba(240, 180, 41, 0.25);
    --hero-badge-border: rgba(240, 180, 41, 0.55);
    --hero-badge-text: #f0b429;
    --hero-stat-bg: rgba(255, 255, 255, 0.12);
    --hero-stat-border: rgba(255, 255, 255, 0.25);
    --hero-button-text: #ffffff;
    --hero-button-border: rgba(255, 255, 255, 0.80);
    --hero-button-hover-bg: rgba(255, 255, 255, 0.20);
    --hero-button-hover-text: #ffffff;
    --hero-logo-bg: rgba(255, 255, 255, 0.95);
    --hero-logo-border: rgba(139, 92, 246, 0.85);
    --hero-carousel-text: #ffffff;
    --hero-carousel-indicator-bg: rgba(255, 255, 255, 0.70);

    /* Navbar integration */
    --w5obm-navbar-bg: rgba(255, 255, 255, 0.96);
    --w5obm-navbar-bg-scrolled: rgba(255, 255, 255, 0.98);
    --w5obm-navbar-text-primary: #2a3b61;
    --w5obm-navbar-text-secondary: #153159;
    --w5obm-navbar-border: rgba(15, 23, 42, 0.18);
    --w5obm-navbar-shadow: 0 8px 26px rgba(0, 0, 0, .1);
    /* Footer colors */
    --w5obm-footer-bg-start: #031a54;
    --w5obm-footer-bg-end: #145eff;
    --w5obm-footer-text: #ffffff;
    --w5obm-footer-text-muted: rgba(255, 255, 255, 0.85);
    --w5obm-footer-title: #ffffff;
    --w5obm-footer-link: rgba(255, 255, 255, 0.85);
    --w5obm-footer-link-hover: #f0b343;

    /* Text colors for Indigo theme (dark text on light bg) */
    --theme-text-primary: #2a3b61;
    --theme-text-secondary: #153159;
}

/* ============================
 * W5OBM Green (w5obm_green)
 * ============================
 * Back-compat: also honors legacy .theme-green wrapper.
 */
:root[data-w5obm-theme="w5obm_green"],
.theme-green {
    /* Bootstrap root variables (set per-theme so you can customize them) */
    --bs-primary: #1a5d47;
    --bs-primary-rgb: 26, 93, 71;

    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: #0f172a;
    --bs-body-color-rgb: 15, 23, 42;
    --bs-emphasis-color: #0f172a;
    --bs-secondary-color: #475569;
    --bs-tertiary-color: #64748b;
    --bs-border-color: rgba(15, 23, 42, 0.15);

    --bs-link-color: #1a5d47;
    --bs-link-hover-color: #2d8670;

    --bs-success: #16a34a;
    --bs-info: #0ea5e9;
    --bs-warning: #f59e0b;
    --bs-danger: #dc2626;

    --bs-card-bg: #ffffff;
    --bs-card-color: #0f172a;
    --bs-modal-bg: #ffffff;
    --bs-modal-color: #0f172a;
    --bs-dropdown-bg: #ffffff;
    --bs-dropdown-link-color: #0f172a;
    --bs-dropdown-link-hover-bg: rgba(26, 93, 71, 0.10);

    --w5obm-primary-blue: #1a5d47;
    --w5obm-secondary-blue: #2d8670;
    --w5obm-accent-gold: #FFD700;

    --w5obm-shadow-blue: 0 5px 15px rgba(45, 134, 112, 0.3);

    /* Theme-driven vars */
    --w5obm-primary: var(--bs-primary);
    --w5obm-secondary: var(--w5obm-secondary-blue);
    --theme-accent-primary: var(--bs-primary);
    --theme-accent-secondary: var(--w5obm-secondary-blue);
    --theme-text-primary: var(--bs-body-color);
    --theme-text-secondary: var(--bs-secondary-color);
    --theme-nav-bg: rgba(255, 255, 255, 0.96);
    --theme-nav-bg-scrolled: rgba(255, 255, 255, 0.98);
    --theme-nav-border: rgba(15, 23, 42, 0.18);
    --theme-nav-shadow: 0 8px 26px rgba(0, 0, 0, .1);

    /* Legacy palette vars */
    --primary-blue: var(--w5obm-primary-blue);
    --secondary-blue: var(--w5obm-secondary-blue);
    --accent-gold: var(--w5obm-accent-gold);

    /* HERO theme integration for green */
    --hero-gradient-start: #1a5d47;
    --hero-gradient-end: #2d8670;
    --hero-overlay-from: rgba(26, 93, 71, 0.85);
    --hero-overlay-to: rgba(45, 134, 112, 0.70);
    --hero-text-primary: #ffffff;
    --hero-text-secondary: rgba(255, 255, 255, 0.88);
    --hero-badge-bg: rgba(255, 215, 0, 0.25);
    --hero-badge-border: rgba(255, 215, 0, 0.55);
    --hero-badge-text: #FFD700;
    --hero-stat-bg: rgba(255, 255, 255, 0.12);
    --hero-stat-border: rgba(255, 255, 255, 0.28);
    --hero-button-text: #ffffff;
    --hero-button-border: rgba(255, 255, 255, 0.82);
    --hero-button-hover-bg: rgba(255, 255, 255, 0.2);
    --hero-button-hover-text: #ffffff;
    --hero-logo-bg: rgba(255, 255, 255, 0.94);
    --hero-logo-border: rgba(34, 197, 94, 0.88);
    --hero-carousel-text: #ffffff;
    --hero-carousel-indicator-bg: rgba(255, 255, 255, 0.68);

    /* Navbar integration */
    --w5obm-navbar-bg: rgba(255, 255, 255, 0.96);
    --w5obm-navbar-bg-scrolled: rgba(255, 255, 255, 0.98);
    --w5obm-navbar-text-primary: #1a5d47;
    --w5obm-navbar-text-secondary: #2d8670;
    --w5obm-navbar-border: rgba(15, 23, 42, 0.18);
    --w5obm-navbar-shadow: 0 8px 26px rgba(0, 0, 0, .1);

    /* Text colors for Green theme (dark text on light bg) */
    --theme-text-primary: #1a5d47;
    --theme-text-secondary: #2d8670;
}

: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 rgba(45, 134, 112, 0.4);
}

: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: rgba(45, 134, 112, 0.1);
}

:root[data-w5obm-theme="w5obm_green"] .nav-link.active,
.theme-green .nav-link.active {
    color: var(--w5obm-primary-blue);
    background-color: rgba(45, 134, 112, 0.15);
}

: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, rgba(26, 93, 71, 0.85), rgba(45, 134, 112, 0.7));
}

: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);
}

:root[data-w5obm-theme="w5obm_green"] {
    /* HERO theme integration for green */
    --hero-gradient-start: #1a5d47;
    --hero-gradient-end: #2d8670;
    --hero-overlay-from: rgba(26, 93, 71, 0.85);
    --hero-overlay-to: rgba(45, 134, 112, 0.70);
    --hero-text-primary: #ffffff;
    --hero-text-secondary: rgba(255, 255, 255, 0.90);
    --hero-badge-bg: rgba(255, 255, 255, 0.25);
    --hero-badge-border: rgba(255, 255, 255, 0.55);
    --hero-badge-text: #ffffff;
    --hero-stat-bg: rgba(255, 255, 255, 0.12);
    --hero-stat-border: rgba(255, 255, 255, 0.25);

    /* Navbar integration */
    --w5obm-navbar-bg: rgba(255, 255, 255, 0.96);
    --w5obm-navbar-bg-scrolled: rgba(255, 255, 255, 0.98);
    --w5obm-navbar-text-primary: #0f172a;
    --w5obm-navbar-text-secondary: #475569;
    --w5obm-navbar-border: rgba(15, 23, 42, 0.18);
    --w5obm-navbar-shadow: 0 8px 26px rgba(0, 0, 0, .1);
}