/**
 * HMS global theme — change the "Theme knobs" block to re-skin the whole app.
 */
:root,
[data-bs-theme="light"] {
    /* ═══════════════════════════════════════════════════════════════════
       THEME KNOBS
       ═══════════════════════════════════════════════════════════════════ */
    /* Sampled from https://technologywisdom.com (brand palette) */
    --theme-primary: #0156d1;
    --theme-accent: #0156d1;
    --theme-highlight: #f24a4a;
    --theme-button: #f24a4a;
    --theme-surface: #ffffff;
    --theme-bg: #f5f5f5;
    --theme-text: #23282d;

    /* Companion RGB values for Bootstrap (update when you change hex above) */
    --theme-accent-rgb: 1, 86, 209;
    --theme-primary-rgb: 1, 86, 209;
    --theme-highlight-rgb: 242, 74, 74;
    --theme-button-rgb: 242, 74, 74;

    /* ═══════════════════════════════════════════════════════════════════
       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) 82%, #000);
    --hms-primary-light: color-mix(in srgb, var(--theme-primary) 72%, #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-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-button: var(--theme-button);
    --hms-button-dark: color-mix(in srgb, var(--theme-button) 88%, #000);
    --hms-button-glow: rgba(var(--theme-button-rgb), 0.35);
    --hms-icon-bg: #e9ecef;
    /* --hms-panel-bg-image is set in layouts/partials/hms-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-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));

    /* Chart palette (admin + customer dashboards) */
    --chart-1: var(--hms-accent);
    --chart-2: var(--hms-highlight);
    --chart-3: var(--hms-text-muted);
    --chart-4: color-mix(in srgb, var(--hms-accent) 70%, var(--hms-highlight));
    --chart-5: color-mix(in srgb, var(--hms-accent) 40%, #ffffff);
    --chart-6: color-mix(in srgb, var(--hms-highlight) 35%, #ffffff);
    --chart-7: color-mix(in srgb, var(--hms-accent) 60%, #000);
    --chart-8: var(--hms-primary-light);

    /* 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: var(--hms-primary-dark);
    --admin-sidebar-to: #001a3d;
    --admin-sidebar-text: #ffffff;
    --admin-sidebar-muted: #b0b0b0;
    --admin-sidebar-active: var(--hms-button);
    --admin-sidebar-active-text: var(--hms-on-accent);
    --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%, #d8e2ef);
    --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%, #b8c8e0);
    --admin-table-row-border: color-mix(in srgb, var(--theme-primary) 14%, #c5d0de);
    --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-accent-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);
}

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

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

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

.admin-shell .pagination {
    --bs-pagination-color: var(--admin-button);
    --bs-pagination-hover-color: var(--admin-button-dark);
    --bs-pagination-hover-bg: color-mix(in srgb, var(--theme-button) 10%, #fff);
    --bs-pagination-hover-border-color: var(--admin-button-outline-border);
    --bs-pagination-focus-color: var(--admin-button-dark);
    --bs-pagination-focus-bg: color-mix(in srgb, var(--theme-button) 10%, #fff);
    --bs-pagination-active-color: var(--hms-on-accent);
    --bs-pagination-active-bg: var(--admin-button);
    --bs-pagination-active-border-color: var(--admin-button);
}

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

.admin-shell .page-link:hover,
.admin-shell .page-link:focus {
    color: var(--admin-button-dark);
    background-color: color-mix(in srgb, var(--theme-button) 10%, #fff);
    border-color: var(--admin-button-outline-border);
}

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