/**
 * BMS global theme — change the "Theme knobs" block to re-skin the whole app.
 */
:root,
[data-bs-theme="light"] {
    /* ═══════════════════════════════════════════════════════════════════
       THEME KNOBS — Zanzibar flag palette
       Blue = primary brand · Green = CTA/buttons · Gold = highlights
       ═══════════════════════════════════════════════════════════════════ */
    /* Brand blue — single knob (header, sidebars, links, charts) */
    --brand-blue: #0093cd;
    --theme-primary: var(--brand-blue);
    --theme-accent: var(--brand-blue);
    --theme-secondary: #1eb53a;
    --theme-highlight: #fcd116;
    --theme-button: #1eb53a;
    --theme-surface: #ffffff;
    --theme-bg: #f2f9fc;
    --theme-text: #1a1a1a;

    /* Flag reference swatches */
    --hms-flag-blue: var(--brand-blue);
    --hms-flag-blue-deep: color-mix(in srgb, var(--theme-primary) 85%, #000);
    --hms-flag-black: #1a1a1a;
    --hms-flag-green: #1eb53a;
    --hms-flag-green-dark: #12752f;
    --hms-flag-gold: #fcd116;
    /* Companion RGB values for Bootstrap (update when you change hex above) */
    --theme-accent-rgb: 0, 147, 205;
    --theme-primary-rgb: 0, 147, 205;
    --theme-secondary-rgb: 30, 181, 58;
    --theme-highlight-rgb: 252, 209, 22;
    --theme-button-rgb: 30, 181, 58;

    /* Reusable alpha tints (primary = blue brand) */
    --hms-primary-alpha-04: rgba(var(--theme-primary-rgb), 0.04);
    --hms-primary-alpha-08: rgba(var(--theme-primary-rgb), 0.08);
    --hms-primary-alpha-10: rgba(var(--theme-primary-rgb), 0.10);
    --hms-primary-alpha-12: rgba(var(--theme-primary-rgb), 0.12);
    --hms-primary-alpha-35: rgba(var(--theme-primary-rgb), 0.35);
    --hms-primary-alpha-45: rgba(var(--theme-primary-rgb), 0.45);
    --hms-button-alpha-12: rgba(var(--theme-button-rgb), 0.12);
    --hms-shadow-brand: rgba(0, 80, 120, 0.10);
    --hms-tint-surface: color-mix(in srgb, var(--theme-primary) 8%, #fff);
    --hms-border-brand: color-mix(in srgb, var(--theme-primary) 20%, #fff);
    --hms-border-brand-light: color-mix(in srgb, var(--theme-primary) 12%, #e5eef5);
    --hms-flag-blue-alpha-12: rgba(var(--theme-primary-rgb), 0.12);

    /* ═══════════════════════════════════════════════════════════════════
       Derived palette (auto-built from knobs — usually leave as-is)
       ═══════════════════════════════════════════════════════════════════ */
    --hms-primary: var(--theme-primary);
    --hms-primary-dark: color-mix(in srgb, var(--theme-primary) 85%, #000);
    --hms-primary-light: color-mix(in srgb, var(--theme-primary) 55%, #fff);
    --hms-accent: var(--theme-accent);
    --hms-accent-dark: color-mix(in srgb, var(--theme-accent) 85%, #000);
    --hms-accent-light: color-mix(in srgb, var(--theme-accent) 55%, #fff);
    --hms-accent-disabled: color-mix(in srgb, var(--theme-accent) 25%, #fff);
    --hms-secondary: var(--theme-secondary);
    --hms-secondary-dark: color-mix(in srgb, var(--theme-secondary) 85%, #000);
    --hms-secondary-light: color-mix(in srgb, var(--theme-secondary) 55%, #fff);
    --hms-highlight: var(--theme-highlight);
    --hms-highlight-dark: color-mix(in srgb, var(--theme-highlight) 88%, #000);
    --hms-highlight-soft: color-mix(in srgb, var(--theme-highlight) 45%, #fff);
    --hms-highlight-glow: rgba(var(--theme-highlight-rgb), 0.38);
    --hms-button: var(--theme-button);
    --hms-button-dark: #12752f;
    --hms-button-glow: rgba(var(--theme-button-rgb), 0.42);
    --hms-icon-bg: #e9ecef;
    /* --hms-panel-bg-image is set in layouts/partials/bms-styles.blade.php via asset() */
    --hms-sidebar-bg-rotation: 90deg;
    --hms-surface: var(--theme-surface);
    --hms-bg: var(--theme-bg);
    --hms-text: var(--theme-text);
    --hms-text-muted: #6a6a6a;
    --hms-border: #dddddd;
    --hms-border-soft: #f5f5f5;
    --hms-shadow: rgba(0, 0, 0, 0.08);
    --hms-glow: rgba(var(--theme-accent-rgb), 0.22);
    --hms-focus-ring: rgba(var(--theme-accent-rgb), 0.18);
    --hms-on-primary: #ffffff;
    --hms-on-accent: #ffffff;
    --hms-on-highlight: #ffffff;

    /* Hero / banner gradients (flag blue → black → green CTA stripe) */
    --hms-hero-gradient: linear-gradient(135deg, var(--brand-blue) 0%, #142028 48%, #1eb53a 100%);
    --hms-hero-shadow: rgba(0, 147, 205, 0.24);
    --hms-radius-sm: 6px;
    --hms-radius-md: 8px;
    --hms-radius-lg: 12px;

    /* Tints for cards, chips, KPI backgrounds */
    --hms-tint-accent: color-mix(in srgb, var(--theme-accent) 12%, var(--theme-surface));
    --hms-tint-accent-strong: color-mix(in srgb, var(--theme-accent) 22%, var(--theme-surface));
    --hms-tint-primary: color-mix(in srgb, var(--theme-primary) 10%, var(--theme-surface));
    --hms-tint-highlight: color-mix(in srgb, var(--theme-highlight) 14%, var(--theme-surface));
    --hms-tint-green: color-mix(in srgb, var(--theme-button) 14%, var(--theme-surface));
    --hms-tint-secondary: color-mix(in srgb, var(--theme-secondary) 12%, var(--theme-surface));
    --hms-tint-blue: color-mix(in srgb, var(--hms-flag-blue) 12%, var(--theme-surface));

    /* Chart palette — blue primary series, green CTA / secondary series */
    --chart-1: var(--hms-flag-blue);
    --chart-2: var(--hms-flag-green);
    --chart-3: var(--hms-flag-gold);
    --chart-4: var(--hms-flag-black);
    --chart-5: color-mix(in srgb, var(--hms-flag-blue) 45%, #ffffff);
    --chart-6: color-mix(in srgb, var(--hms-flag-green) 40%, #ffffff);
    --chart-7: color-mix(in srgb, var(--hms-flag-gold) 55%, #ffffff);
    --chart-8: color-mix(in srgb, var(--hms-flag-blue) 70%, var(--hms-flag-green));

    /* Legacy aliases (used across frontend.css) */
    --booking-blue: var(--hms-primary);
    --booking-accent: var(--hms-accent);
    --booking-bg: var(--hms-bg);
    --booking-text: var(--hms-text);

    /* Admin panel */
    --admin-primary: var(--hms-accent);
    --admin-primary-dark: var(--hms-accent-dark);
    --admin-primary-rgb: var(--theme-accent-rgb);
    --admin-surface: var(--hms-surface);
    --admin-text: var(--hms-text);
    --admin-text-muted: var(--hms-text-muted);
    --admin-bg: var(--hms-bg);
    --admin-sidebar-from: color-mix(in srgb, var(--theme-primary) 85%, #000);
    --admin-sidebar-to: color-mix(in srgb, var(--theme-primary) 55%, #000);
    --dashboard-sidebar-bg: var(--brand-blue, var(--hms-accent));
    --dashboard-sidebar-border: color-mix(in srgb, var(--hms-accent) 75%, #000);
    --dashboard-sidebar-text: #ffffff;
    --dashboard-sidebar-text-muted: rgba(255, 255, 255, 0.62);
    --dashboard-sidebar-hover-bg: rgba(255, 255, 255, 0.12);
    --dashboard-sidebar-active-bg: rgba(255, 255, 255, 0.14);
    --dashboard-sidebar-subtle-bg: rgba(255, 255, 255, 0.08);
    --admin-sidebar-bg: var(--dashboard-sidebar-bg);
    --admin-sidebar-text: var(--dashboard-sidebar-text);
    --admin-sidebar-muted: var(--dashboard-sidebar-text-muted);
    --customer-sidebar-bg: var(--dashboard-sidebar-bg);
    --admin-sidebar-active: var(--hms-flag-gold);
    --admin-sidebar-active-text: var(--hms-on-highlight);
    --admin-button: var(--hms-button);
    --admin-button-dark: var(--hms-button-dark);
    --admin-button-outline-border: color-mix(in srgb, var(--theme-button) 40%, #fff);
    --admin-border: var(--hms-border);
    --admin-card-border: color-mix(in srgb, var(--theme-primary) 12%, #d8e8f2);
    --admin-table-head: color-mix(in srgb, var(--theme-bg) 70%, var(--theme-surface));
    --admin-table-head-bg: color-mix(in srgb, var(--theme-accent) 18%, var(--theme-surface));
    --admin-table-head-text: color-mix(in srgb, var(--theme-accent) 82%, #0f172a);
    --admin-table-head-border: color-mix(in srgb, var(--theme-accent) 32%, #b8d4e8);
    --admin-table-row-border: color-mix(in srgb, var(--theme-primary) 14%, #c5d8e8);
    --admin-outline-border: color-mix(in srgb, var(--theme-accent) 35%, #fff);

    /* Customer dashboard */
    --customer-page-title: var(--hms-primary);
    --customer-panel-header: var(--hms-surface);
    --customer-panel-header-text: var(--hms-text);
    --customer-panel-header-border: var(--hms-border);

    /* Auth pages */
    --auth-shell-bg: radial-gradient(
        circle at top right,
        var(--hms-tint-accent-strong) 0%,
        var(--hms-bg) 40%,
        color-mix(in srgb, var(--theme-bg) 90%, var(--theme-accent) 6%) 100%
    );
    --auth-brand-title: var(--hms-primary);
    --auth-brand-subtitle: var(--hms-text-muted);
    --auth-btn-bg: var(--hms-button);
    --auth-btn-shadow: var(--hms-button-glow);
    --auth-link: var(--hms-primary-dark);
    --auth-input-focus: var(--hms-accent-light);
    --auth-card-border: var(--hms-border);

    /* Bootstrap 5 overrides */
    --bs-primary: var(--hms-accent);
    --bs-primary-rgb: var(--theme-accent-rgb);
    --bs-primary-text-emphasis: var(--hms-accent-dark);
    --bs-primary-bg-subtle: var(--hms-tint-accent);
    --bs-primary-border-subtle: var(--admin-outline-border);
    --bs-link-color: var(--hms-accent);
    --bs-link-hover-color: var(--hms-accent-dark);
    --bs-body-bg: var(--hms-bg);
    --bs-body-color: var(--hms-text);
    --bs-border-color: var(--hms-border);
    --bs-focus-ring-color: var(--hms-focus-ring);
    --bs-pagination-color: var(--hms-accent);
    --bs-pagination-hover-color: var(--hms-accent-dark);
    --bs-pagination-hover-bg: var(--hms-tint-accent);
    --bs-pagination-hover-border-color: var(--hms-accent-light);
    --bs-pagination-focus-color: var(--hms-accent-dark);
    --bs-pagination-focus-bg: var(--hms-tint-accent);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--hms-focus-ring);
    --bs-pagination-active-color: var(--hms-on-accent);
    --bs-pagination-active-bg: var(--hms-accent);
    --bs-pagination-active-border-color: var(--hms-accent);
    --bs-pagination-disabled-color: var(--hms-text-muted);
    --bs-form-check-input-checked-bg-color: var(--hms-accent);
    --bs-form-check-input-checked-border-color: var(--hms-accent);
}

/* ═══════════════════════════════════════════════════════════════════
   Bootstrap 5.3 bridge — CDN CSS hardcodes #0d6efd on buttons/pagination
   ═══════════════════════════════════════════════════════════════════ */
.booking-body .btn-primary {
    --bs-btn-color: var(--hms-on-accent);
    --bs-btn-bg: var(--hms-button);
    --bs-btn-border-color: var(--hms-button);
    --bs-btn-hover-color: var(--hms-on-accent);
    --bs-btn-hover-bg: var(--hms-button-dark);
    --bs-btn-hover-border-color: var(--hms-button-dark);
    --bs-btn-active-color: var(--hms-on-accent);
    --bs-btn-active-bg: var(--hms-button-dark);
    --bs-btn-active-border-color: var(--hms-button-dark);
    --bs-btn-disabled-color: var(--hms-on-accent);
    --bs-btn-disabled-bg: var(--hms-button);
    --bs-btn-disabled-border-color: var(--hms-button);
    --bs-btn-focus-shadow-rgb: var(--theme-button-rgb);
    font-weight: 600;
    box-shadow: 0 2px 8px var(--hms-button-glow);
}

.booking-body .btn-primary:hover,
.booking-body .btn-primary:focus,
.booking-body .btn-primary:active {
    box-shadow: 0 4px 14px var(--hms-button-glow);
}

.booking-body .btn-outline-primary {
    --bs-btn-color: var(--hms-button);
    --bs-btn-border-color: var(--hms-button);
    --bs-btn-hover-color: var(--hms-on-accent);
    --bs-btn-hover-bg: var(--hms-button);
    --bs-btn-hover-border-color: var(--hms-button);
    --bs-btn-active-color: var(--hms-on-accent);
    --bs-btn-active-bg: var(--hms-button-dark);
    --bs-btn-active-border-color: var(--hms-button-dark);
    --bs-btn-disabled-color: var(--hms-button);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--hms-button);
    --bs-btn-focus-shadow-rgb: var(--theme-button-rgb);
    font-weight: 600;
}

.booking-body .btn-link {
    --bs-btn-color: var(--hms-accent);
    --bs-btn-hover-color: var(--hms-accent-dark);
    --bs-btn-active-color: var(--hms-accent-dark);
}

.booking-body .text-primary {
    color: var(--hms-accent) !important;
}

.booking-body .bg-primary {
    --bs-bg-opacity: 1;
    background-color: var(--hms-accent) !important;
}

.booking-body .border-primary {
    border-color: var(--hms-accent) !important;
}

.booking-body .alert-info .alert-link {
    color: var(--hms-accent-dark);
}

.booking-body .pagination {
    --bs-pagination-color: var(--hms-accent);
    --bs-pagination-hover-color: var(--hms-accent-dark);
    --bs-pagination-active-bg: var(--hms-accent);
    --bs-pagination-active-border-color: var(--hms-accent);
}

.booking-body .page-link {
    color: var(--hms-accent);
}

.booking-body .page-link:hover,
.booking-body .page-link:focus {
    color: var(--hms-accent-dark);
    background-color: var(--hms-tint-accent);
    border-color: var(--hms-accent-light);
}

.booking-body .page-item.active .page-link {
    background-color: var(--hms-accent);
    border-color: var(--hms-accent);
    color: var(--hms-on-accent);
}

.booking-body .form-check-input:checked {
    background-color: var(--hms-accent);
    border-color: var(--hms-accent);
}

.booking-body .form-check-input:focus {
    border-color: var(--hms-accent-light);
    box-shadow: 0 0 0 0.25rem var(--hms-focus-ring);
}

.booking-body .form-select:focus,
.booking-body .form-control:focus {
    border-color: var(--hms-accent-light);
    box-shadow: 0 0 0 0.25rem var(--hms-focus-ring);
}

/* Admin panel — primary actions use brand button color (same as public site CTAs) */
.admin-shell .btn-primary {
    --bs-btn-color: var(--hms-on-accent);
    --bs-btn-bg: var(--admin-button);
    --bs-btn-border-color: var(--admin-button);
    --bs-btn-hover-color: var(--hms-on-accent);
    --bs-btn-hover-bg: var(--admin-button-dark);
    --bs-btn-hover-border-color: var(--admin-button-dark);
    --bs-btn-active-color: var(--hms-on-accent);
    --bs-btn-active-bg: var(--admin-button-dark);
    --bs-btn-active-border-color: var(--admin-button-dark);
    --bs-btn-disabled-color: var(--hms-on-accent);
    --bs-btn-disabled-bg: var(--admin-button);
    --bs-btn-disabled-border-color: var(--admin-button);
    --bs-btn-focus-shadow-rgb: var(--theme-button-rgb);
    font-weight: 600;
    box-shadow: 0 2px 8px var(--hms-button-glow);
}

.admin-shell .btn-primary:hover,
.admin-shell .btn-primary:focus,
.admin-shell .btn-primary:active {
    box-shadow: 0 4px 14px var(--hms-button-glow);
}

.admin-shell .btn-outline-primary {
    --bs-btn-color: var(--admin-button);
    --bs-btn-border-color: var(--admin-button);
    --bs-btn-hover-color: var(--hms-on-accent);
    --bs-btn-hover-bg: var(--admin-button);
    --bs-btn-hover-border-color: var(--admin-button);
    --bs-btn-active-color: var(--hms-on-accent);
    --bs-btn-active-bg: var(--admin-button-dark);
    --bs-btn-active-border-color: var(--admin-button-dark);
    --bs-btn-disabled-color: var(--admin-button);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--admin-button);
    --bs-btn-focus-shadow-rgb: var(--theme-button-rgb);
    font-weight: 600;
}

.admin-shell .pagination {
    --bs-pagination-color: var(--admin-primary);
    --bs-pagination-hover-color: var(--admin-primary-dark);
    --bs-pagination-hover-bg: var(--hms-tint-accent);
    --bs-pagination-hover-border-color: var(--admin-outline-border);
    --bs-pagination-focus-color: var(--admin-primary-dark);
    --bs-pagination-focus-bg: var(--hms-tint-accent);
    --bs-pagination-active-color: var(--hms-on-accent);
    --bs-pagination-active-bg: var(--admin-primary);
    --bs-pagination-active-border-color: var(--admin-primary);
}

.admin-shell .page-link {
    color: var(--admin-primary);
}

.admin-shell .page-link:hover,
.admin-shell .page-link:focus {
    color: var(--admin-primary-dark);
    background-color: var(--hms-tint-accent);
    border-color: var(--admin-outline-border);
}

.admin-shell .page-item.active .page-link {
    background-color: var(--admin-primary);
    border-color: var(--admin-primary);
    color: var(--hms-on-accent);
}

/* Global Bootstrap component bridge — entire app */
.booking-body .text-bg-primary,
.booking-body .badge.text-bg-primary,
.booking-body .badge.bg-primary,
.admin-shell .text-bg-primary,
.admin-shell .badge.text-bg-primary,
.customer-shell .text-bg-primary,
.customer-shell .badge.text-bg-primary,
.host-shell .text-bg-primary,
.host-shell .badge.text-bg-primary,
.setup-wizard-page .text-bg-primary,
.setup-wizard-page .badge.text-bg-primary {
    background-color: var(--hms-highlight-dark) !important;
    color: var(--hms-on-accent) !important;
}

.booking-body .link-primary {
    color: var(--hms-accent) !important;
}

.booking-body .link-primary:hover,
.booking-body .link-primary:focus {
    color: var(--hms-accent-dark) !important;
}

.booking-body .nav-pills .nav-link.active,
.booking-body .nav-pills .show > .nav-link {
    background-color: var(--hms-button);
    color: var(--hms-on-accent);
}

.booking-body .home-hero-search .home-hero-search__tabs .nav-link.active,
.booking-body .home-hero-search .home-hero-search__tabs .show > .nav-link {
    background-color: var(--hms-highlight-dark);
    color: var(--hms-on-accent);
    box-shadow: 0 2px 8px var(--hms-highlight-glow);
}

.booking-body .progress-bar {
    background-color: var(--hms-accent);
}

.booking-body .dropdown-item.active,
.booking-body .dropdown-item:active {
    background-color: var(--hms-accent);
    color: var(--hms-on-accent);
}

.admin-shell .text-primary,
.customer-shell .text-primary,
.host-shell .text-primary {
    color: var(--hms-accent) !important;
}

.admin-shell .form-check-input:checked,
.customer-shell .form-check-input:checked,
.host-shell .form-check-input:checked {
    background-color: var(--hms-accent);
    border-color: var(--hms-accent);
}

.admin-shell .form-control:focus,
.admin-shell .form-select:focus,
.customer-shell .form-control:focus,
.customer-shell .form-select:focus,
.host-shell .form-control:focus,
.host-shell .form-select:focus,
.setup-wizard-page .form-control:focus,
.setup-wizard-page .form-select:focus {
    border-color: var(--hms-accent-light);
    box-shadow: 0 0 0 0.25rem var(--hms-focus-ring);
}

.setup-wizard-page .btn-primary {
    --bs-btn-color: var(--hms-on-accent);
    --bs-btn-bg: var(--hms-button);
    --bs-btn-border-color: var(--hms-button);
    --bs-btn-hover-bg: var(--hms-button-dark);
    --bs-btn-hover-border-color: var(--hms-button-dark);
    --bs-btn-active-bg: var(--hms-button-dark);
    --bs-btn-active-border-color: var(--hms-button-dark);
    --bs-btn-focus-shadow-rgb: var(--theme-button-rgb);
    font-weight: 600;
    box-shadow: 0 2px 8px var(--hms-button-glow);
}

.setup-wizard-page .btn-primary:hover,
.setup-wizard-page .btn-primary:focus,
.setup-wizard-page .btn-primary:active {
    box-shadow: 0 4px 14px var(--hms-button-glow);
}

.setup-wizard-page .btn-outline-primary {
    --bs-btn-color: var(--hms-button);
    --bs-btn-border-color: var(--hms-button);
    --bs-btn-hover-color: var(--hms-on-accent);
    --bs-btn-hover-bg: var(--hms-button);
    --bs-btn-hover-border-color: var(--hms-button);
    font-weight: 600;
}

.setup-wizard-page .text-primary {
    color: var(--hms-accent) !important;
}

/* Info badges use flag blue (primary brand) */
.booking-body .badge.text-bg-info,
.booking-body .bg-info {
    background-color: var(--hms-accent) !important;
    color: var(--hms-on-accent) !important;
}

.booking-body .text-info {
    color: var(--hms-accent-dark) !important;
}

.booking-body .btn-outline-secondary.brand-secondary,
.booking-body .btn-outline-info.brand-secondary {
    --bs-btn-color: var(--hms-accent);
    --bs-btn-border-color: var(--hms-accent);
    --bs-btn-hover-bg: var(--hms-accent);
    --bs-btn-hover-border-color: var(--hms-accent);
    --bs-btn-hover-color: var(--hms-on-accent);
}