/* ============================================================
   e-Hayat Theme Layer
   Loaded AFTER adminlte.css. Three themes share one token set:
     html[data-theme="light"]  clean white (default)
     html[data-theme="blue"]   calm clinical blue
     html[data-theme="dark"]   black (also sets data-bs-theme="dark")
   The theme is applied before first paint by the inline script in
   the layouts and switched by /js/theme.js. Views should use the
   --eh-* tokens (never raw hex) so every theme stays readable.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root,
html[data-theme="light"] {
    color-scheme: light;

    --eh-bg: #f5f7f9;
    --eh-surface: #ffffff;
    --eh-surface-2: #f8fafb;
    --eh-surface-3: #eef1f4;
    --eh-border: #e4e8ec;
    --eh-border-strong: #cfd6dd;

    --eh-ink: #18212d;
    --eh-muted: #5f6b7a;
    --eh-subtle: #8a95a3;

    /* Brand = the logo: green #87CB28 with navy #063865 (navy text on green reads 6:1; white would not).
       brand-text is the same green, deepened so text and links stay readable on white. */
    --eh-brand: #87cb28;
    --eh-brand-hover: #7cbb25;
    --eh-brand-text: #517a18;
    --eh-brand-soft: #f1f8e6;
    --eh-brand-soft-2: #e2f1cc;
    --eh-brand-border: #c9e59f;
    --eh-on-brand: #063865;
    --eh-focus: rgba(135, 203, 40, .35);

    --eh-success-text: #1a7431;
    --eh-success-soft: #e7f6ec;
    --eh-danger-text: #b42318;
    --eh-danger-soft: #fdecec;
    --eh-warning-text: #9a5b00;
    --eh-warning-soft: #fff4e0;
    --eh-info-text: #0b5c8f;
    --eh-info-soft: #e7f2fa;
    --eh-danger-border: #f5c2bd;
    --eh-warning-border: #f3d9a4;
    --eh-info-border: #bcd9ef;

    --eh-sidebar-bg: #ffffff;
    --eh-sidebar-border: #e4e8ec;
    --eh-sidebar-ink: #3b4654;
    --eh-sidebar-muted: #8a95a3;
    --eh-sidebar-hover: #f2f5f7;
    --eh-sidebar-active-bg: #f1f8e6;
    --eh-sidebar-active-ink: #517a18;
    --eh-sidebar-brand-ink: #063865;

    --eh-header-bg: #ffffff;
    --eh-hero-grad: linear-gradient(120deg, #042a4c 0%, #063865 60%, #0b4f86 120%);

    --eh-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --eh-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --eh-shadow-lg: 0 16px 40px -16px rgba(16, 24, 40, .22);

    --eh-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235f6b7a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    --eh-radius: 14px;
    --eh-radius-sm: 10px;

    /* The two logo colours, identical in every theme */
    --eh-logo-green: #87cb28;
    --eh-logo-navy: #063865;

    /* Legacy aliases (older markup still references these) */
    --eh-green: var(--eh-brand);
    --eh-green-dark: var(--eh-brand-hover);
    --eh-green-light: var(--eh-brand);
    --eh-teal: var(--eh-brand);
    --eh-teal-dark: var(--eh-brand-hover);
    --eh-mint: var(--eh-brand-soft);
    --eh-grad: var(--eh-brand);
}

html[data-theme="blue"] {
    color-scheme: light;

    --eh-bg: #f2f6fb;
    --eh-surface: #ffffff;
    --eh-surface-2: #f6f9fd;
    --eh-surface-3: #e9f0f8;
    --eh-border: #dde6f0;
    --eh-border-strong: #c5d3e3;

    --eh-ink: #0f1e33;
    --eh-muted: #52637a;
    --eh-subtle: #8595a9;

    --eh-brand: #063865;
    --eh-brand-hover: #052d51;
    --eh-brand-text: #063865;
    --eh-brand-soft: #e7eef5;
    --eh-brand-soft-2: #d2dfeb;
    --eh-brand-border: #b4c7da;
    --eh-on-brand: #ffffff;
    --eh-focus: rgba(6, 56, 101, .22);

    --eh-sidebar-bg: #063865;
    --eh-sidebar-border: #063865;
    --eh-sidebar-ink: #c9d6e3;
    --eh-sidebar-muted: #8fa6bd;
    --eh-sidebar-hover: rgba(255, 255, 255, .07);
    --eh-sidebar-active-bg: rgba(135, 203, 40, .16);
    --eh-sidebar-active-ink: #87cb28;
    --eh-sidebar-brand-ink: #ffffff;

    --eh-hero-grad: linear-gradient(120deg, #042a4c 0%, #063865 60%, #0b4f86 120%);

    --eh-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2352637a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

html[data-theme="dark"] {
    color-scheme: dark;

    --eh-bg: #0b0e12;
    --eh-surface: #14181e;
    --eh-surface-2: #191e25;
    --eh-surface-3: #222933;
    --eh-border: #262d37;
    --eh-border-strong: #36404c;

    --eh-ink: #e7ebf0;
    --eh-muted: #9aa5b3;
    --eh-subtle: #6f7a88;

    --eh-brand: #87cb28;
    --eh-brand-hover: #91d630;
    --eh-brand-text: #87cb28;
    --eh-brand-soft: rgba(135, 203, 40, .12);
    --eh-brand-soft-2: rgba(135, 203, 40, .20);
    --eh-brand-border: rgba(135, 203, 40, .35);
    --eh-on-brand: #063865;
    --eh-focus: rgba(135, 203, 40, .30);

    --eh-success-text: #4cc27a;
    --eh-success-soft: rgba(76, 194, 122, .12);
    --eh-danger-text: #f87171;
    --eh-danger-soft: rgba(248, 113, 113, .12);
    --eh-warning-text: #fbbf24;
    --eh-warning-soft: rgba(251, 191, 36, .12);
    --eh-info-text: #38bdf8;
    --eh-info-soft: rgba(56, 189, 248, .12);
    --eh-danger-border: rgba(248, 113, 113, .35);
    --eh-warning-border: rgba(251, 191, 36, .35);
    --eh-info-border: rgba(56, 189, 248, .35);

    --eh-sidebar-bg: #101419;
    --eh-sidebar-border: #1d232b;
    --eh-sidebar-ink: #b8c1cc;
    --eh-sidebar-muted: #6f7a88;
    --eh-sidebar-hover: rgba(255, 255, 255, .05);
    --eh-sidebar-active-bg: rgba(135, 203, 40, .14);
    --eh-sidebar-active-ink: #87cb28;
    --eh-sidebar-brand-ink: #e7ebf0;

    --eh-header-bg: #14181e;
    --eh-hero-grad: linear-gradient(120deg, #021526 0%, #042a4c 60%, #063865 120%);

    --eh-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --eh-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    --eh-shadow-lg: 0 16px 40px -16px rgba(0, 0, 0, .7);

    --eh-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa5b3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Printing always uses the White palette (dark text on paper), whatever theme is on screen. */
@media print {
    html[data-theme="blue"],
    html[data-theme="dark"] {
    color-scheme: light;

    --eh-bg: #f5f7f9;
    --eh-surface: #ffffff;
    --eh-surface-2: #f8fafb;
    --eh-surface-3: #eef1f4;
    --eh-border: #e4e8ec;
    --eh-border-strong: #cfd6dd;

    --eh-ink: #18212d;
    --eh-muted: #5f6b7a;
    --eh-subtle: #8a95a3;

    /* Brand = the logo: green #87CB28 with navy #063865 (navy text on green reads 6:1; white would not).
       brand-text is the same green, deepened so text and links stay readable on white. */
    --eh-brand: #87cb28;
    --eh-brand-hover: #7cbb25;
    --eh-brand-text: #517a18;
    --eh-brand-soft: #f1f8e6;
    --eh-brand-soft-2: #e2f1cc;
    --eh-brand-border: #c9e59f;
    --eh-on-brand: #063865;
    --eh-focus: rgba(135, 203, 40, .35);

    --eh-success-text: #1a7431;
    --eh-success-soft: #e7f6ec;
    --eh-danger-text: #b42318;
    --eh-danger-soft: #fdecec;
    --eh-warning-text: #9a5b00;
    --eh-warning-soft: #fff4e0;
    --eh-info-text: #0b5c8f;
    --eh-info-soft: #e7f2fa;
    --eh-danger-border: #f5c2bd;
    --eh-warning-border: #f3d9a4;
    --eh-info-border: #bcd9ef;

    --eh-sidebar-bg: #ffffff;
    --eh-sidebar-border: #e4e8ec;
    --eh-sidebar-ink: #3b4654;
    --eh-sidebar-muted: #8a95a3;
    --eh-sidebar-hover: #f2f5f7;
    --eh-sidebar-active-bg: #f1f8e6;
    --eh-sidebar-active-ink: #517a18;
    --eh-sidebar-brand-ink: #063865;

    --eh-header-bg: #ffffff;
    --eh-hero-grad: linear-gradient(120deg, #042a4c 0%, #063865 60%, #0b4f86 120%);

    --eh-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --eh-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --eh-shadow-lg: 0 16px 40px -16px rgba(16, 24, 40, .22);

    --eh-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235f6b7a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    --eh-radius: 14px;
    --eh-radius-sm: 10px;
    }
}

/* ---------- 2. Bridge tokens into Bootstrap / AdminLTE ---------- */
html[data-theme] {
    --bs-body-bg: var(--eh-surface);
    --bs-body-color: var(--eh-ink);
    --bs-emphasis-color: var(--eh-ink);
    --bs-heading-color: inherit; /* headings follow their container (white on coloured banners) */
    --bs-secondary-color: var(--eh-muted);
    --bs-tertiary-color: var(--eh-subtle);
    --bs-secondary-bg: var(--eh-surface-3);
    --bs-tertiary-bg: var(--eh-surface-2);
    --bs-border-color: var(--eh-border);
    --bs-border-color-translucent: var(--eh-border);
    --bs-link-color: var(--eh-brand-text);
    --bs-link-hover-color: var(--eh-brand-hover);
    --bs-focus-ring-color: var(--eh-focus);
    --bs-form-select-bg-img: var(--eh-select-arrow);
    --bs-border-radius: .55rem;
    --bs-border-radius-lg: .8rem;
    --bs-border-radius-sm: .4rem;

    accent-color: var(--eh-brand);
    scrollbar-color: var(--eh-border-strong) transparent;
}

html[data-theme] body {
    font-family: 'Inter', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Tahoma, sans-serif;
    color: var(--eh-ink);
    background: var(--eh-bg) !important; /* beats .bg-body-tertiary */
    -webkit-font-smoothing: antialiased;
}

html[data-theme] button,
html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea { font-family: inherit; }

::selection { background: var(--eh-brand-soft-2); color: var(--eh-ink); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -.01em; }
h3, .h3 { font-size: 1.45rem; font-weight: 650; }
h4, .h4 { font-size: 1.25rem; font-weight: 650; }
h5, .h5 { font-size: 1.05rem; font-weight: 600; }
.text-muted, .text-body-secondary { color: var(--eh-muted) !important; }
hr { border-color: var(--eh-border); opacity: 1; }

/* Suppress every transition for one frame while the theme flips (no colour "wipe"). */
html.eh-theme-switching *,
html.eh-theme-switching *::before,
html.eh-theme-switching *::after { transition: none !important; }

/* ---------- 3. App shell: header ---------- */
.app-header {
    background: var(--eh-header-bg) !important;
    border-bottom: 1px solid var(--eh-border);
    box-shadow: none;
}

.app-header .navbar-nav .nav-link {
    color: var(--eh-muted) !important;
    font-weight: 500;
    border-radius: 8px;
}

.app-header .navbar-nav .nav-link:hover { color: var(--eh-ink) !important; }

.app-header .badge.eh-hospital-badge {
    background: var(--eh-brand-soft) !important;
    color: var(--eh-brand-text) !important;
    border: 1px solid var(--eh-brand-border);
    font-weight: 600;
    padding: .4em .7em;
    border-radius: 999px;
}

/* ---------- 4. App shell: sidebar ---------- */
.app-sidebar {
    background: var(--eh-sidebar-bg) !important;
    border-inline-end: 1px solid var(--eh-sidebar-border);
    box-shadow: none !important;
}

.app-sidebar .sidebar-brand {
    background: var(--eh-sidebar-bg);
    border-bottom: 1px solid var(--eh-sidebar-border);
    min-height: 3.5rem;
    padding: .5rem 1rem !important;
    display: flex;
    align-items: center;
}

.app-sidebar .sidebar-brand .brand-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: var(--eh-sidebar-brand-ink) !important;
}

.app-sidebar .sidebar-brand .brand-text {
    font-size: 1.15rem;
    font-weight: 700 !important;
    letter-spacing: -.02em;
    color: var(--eh-sidebar-brand-ink) !important;
}

/* Logo mark (green cross + navy outline). The navy (Blue) and Dark sidebars show the
   white-outline version so the outline never disappears into the background. */
.app-sidebar .sidebar-brand .brand-badge {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.app-sidebar .sidebar-brand .brand-logo { width: 36px; height: 36px; object-fit: contain; }
.app-sidebar .sidebar-brand .brand-logo--light { display: none; }
html[data-theme="blue"] .app-sidebar .sidebar-brand .brand-logo--color,
html[data-theme="dark"] .app-sidebar .sidebar-brand .brand-logo--color { display: none; }
html[data-theme="blue"] .app-sidebar .sidebar-brand .brand-logo--light,
html[data-theme="dark"] .app-sidebar .sidebar-brand .brand-logo--light { display: block; }

.app-sidebar .sidebar-menu .nav-header {
    color: var(--eh-sidebar-muted) !important;
    font-size: .7rem !important;
    font-weight: 600;
    letter-spacing: .06em;
    padding-top: 1rem !important;
    padding-bottom: .35rem !important;
}

.app-sidebar .sidebar-menu .nav-link {
    color: var(--eh-sidebar-ink) !important;
    padding: .55rem .75rem;
    margin: 1px .6rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: .88rem;
    width: auto;
}

.app-sidebar .sidebar-menu .nav-link:hover {
    background: var(--eh-sidebar-hover);
    color: var(--eh-sidebar-brand-ink) !important;
}

.app-sidebar .sidebar-menu .nav-link.active {
    background: var(--eh-sidebar-active-bg) !important;
    color: var(--eh-sidebar-active-ink) !important;
    font-weight: 600;
}

.app-sidebar .sidebar-menu .nav-icon {
    font-size: 1.05rem;
    margin-inline-end: .7rem;
    width: 20px;
    text-align: center;
    opacity: .85;
}

.app-sidebar .sidebar-menu .nav-link.active .nav-icon { opacity: 1; }

/* ---------- 5. Footer ---------- */
.app-footer {
    background: var(--eh-surface);
    border-top: 1px solid var(--eh-border);
    color: var(--eh-muted);
    font-size: .85rem;
}
.app-footer a { color: var(--eh-brand-text); }

/* ---------- 6. Cards ---------- */
.card {
    --bs-card-bg: var(--eh-surface);
    --bs-card-border-color: var(--eh-border);
    --bs-card-cap-bg: var(--eh-surface);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius);
    box-shadow: var(--eh-shadow-sm);
    color: var(--eh-ink);
}

.app-main .card { overflow: hidden; }

/* One neutral header style everywhere; coloured bg-* headers are flattened on purpose. */
.card-header,
.card-header[class*="bg-"] {
    background: var(--eh-surface) !important;
    color: var(--eh-ink) !important;
    border-bottom: 1px solid var(--eh-border) !important;
    padding: .85rem 1.1rem;
    font-weight: 600;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.card-header .card-title {
    color: var(--eh-ink) !important;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0;
}

.card-footer {
    background: var(--eh-surface-2);
    border-top: 1px solid var(--eh-border);
}

/* the legacy white "light" button inside a card header is the primary action */
.card-header .btn-light {
    background: var(--eh-brand);
    border-color: var(--eh-brand);
    color: var(--eh-on-brand);
}
.card-header .btn-light:hover { background: var(--eh-brand-hover); border-color: var(--eh-brand-hover); color: var(--eh-on-brand); }

/* ---------- 7. Hero banners ---------- */
.eh-hero {
    position: relative;
    border-radius: var(--eh-radius);
    overflow: hidden;
    color: #fff;
    background-size: cover;
    background-position: center;
    isolation: isolate;
}

.eh-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(8, 30, 22, .82) 0%, rgba(8, 30, 22, .55) 50%, rgba(8, 30, 22, .2) 100%);
}

html[data-theme="blue"] .eh-hero::before {
    background: linear-gradient(90deg, rgba(10, 30, 60, .85) 0%, rgba(10, 30, 60, .55) 50%, rgba(10, 30, 60, .2) 100%);
}

.eh-hero .eh-hero-body { padding: 1.75rem 2rem; }
.eh-hero h1, .eh-hero h2, .eh-hero h3, .eh-hero h4 { color: #fff; font-weight: 700; margin-bottom: .35rem; }
.eh-hero p, .eh-hero .eh-sub { color: rgba(255, 255, 255, .88); margin-bottom: 0; }
.eh-hero .eh-accent { color: var(--eh-logo-green); }

.eh-hero--dashboard { background-image: url('/images/ui/hero-dashboard.webp'); }
.eh-hero--hospital  { background-image: url('/images/ui/hero-hospital.webp'); }
.eh-hero--patient   { background-image: url('/images/ui/portal-patient.webp'); }
.eh-hero--doctor    { background-image: url('/images/ui/portal-doctor.webp'); }
.eh-hero--staff     { background-image: url('/images/ui/portal-staff.webp'); }

@media (max-width: 576px) {
    .eh-hero .eh-hero-body { padding: 1.25rem; }
}

/* ---------- 8. KPI small-boxes (solid, calm) ---------- */
.small-box {
    border-radius: var(--eh-radius);
    box-shadow: var(--eh-shadow-sm);
    overflow: hidden;
}

.small-box > .inner { padding: 1rem 1.2rem; }
.small-box h3 { font-weight: 700; color: inherit; }
.small-box p, .small-box .inner { color: inherit; }
.small-box-footer { text-decoration: none !important; }
.small-box .icon > i { opacity: .22; }

.small-box.bg-info    { background: #0e7c86 !important; color: #fff !important; }
.small-box.bg-success { background: #1e7e34 !important; color: #fff !important; }
.small-box.bg-warning { background: #b86e00 !important; color: #fff !important; }
.small-box.bg-danger  { background: #b42318 !important; color: #fff !important; }
.small-box.bg-primary { background: var(--eh-brand) !important; color: var(--eh-on-brand) !important; }
.small-box.bg-warning .inner, .small-box.bg-warning .small-box-footer { color: #fff !important; }

.small-box-footer { background: rgba(0, 0, 0, .12); }
.small-box-footer:hover { background: rgba(0, 0, 0, .2); }

/* ---------- 9. Buttons (solid; no gradients) ---------- */
.btn {
    border-radius: 9px;
    font-weight: 500;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.btn-lg { border-radius: 11px; }
.btn-sm { border-radius: 7px; }

.btn-primary,
.btn-success {
    --bs-btn-color: var(--eh-on-brand);
    --bs-btn-bg: var(--eh-brand);
    --bs-btn-border-color: var(--eh-brand);
    --bs-btn-hover-color: var(--eh-on-brand);
    --bs-btn-hover-bg: var(--eh-brand-hover);
    --bs-btn-hover-border-color: var(--eh-brand-hover);
    --bs-btn-active-color: var(--eh-on-brand);
    --bs-btn-active-bg: var(--eh-brand-hover);
    --bs-btn-active-border-color: var(--eh-brand-hover);
    --bs-btn-disabled-color: var(--eh-on-brand);
    --bs-btn-disabled-bg: var(--eh-brand);
    --bs-btn-disabled-border-color: var(--eh-brand);
    --bs-btn-focus-shadow-rgb: 135, 203, 40;
    background-image: none;
}

.btn-outline-primary,
.btn-outline-success {
    --bs-btn-color: var(--eh-brand-text);
    --bs-btn-border-color: var(--eh-brand-border);
    --bs-btn-hover-color: var(--eh-on-brand);
    --bs-btn-hover-bg: var(--eh-brand);
    --bs-btn-hover-border-color: var(--eh-brand);
    --bs-btn-active-color: var(--eh-on-brand);
    --bs-btn-active-bg: var(--eh-brand-hover);
    --bs-btn-active-border-color: var(--eh-brand-hover);
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0e7c86;
    --bs-btn-border-color: #0e7c86;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b6770;
    --bs-btn-hover-border-color: #0b6770;
}

.btn-warning {
    --bs-btn-color: #1f1300;
    --bs-btn-bg: #f5b83d;
    --bs-btn-border-color: #f5b83d;
    --bs-btn-hover-color: #1f1300;
    --bs-btn-hover-bg: #eaa51a;
    --bs-btn-hover-border-color: #eaa51a;
}

.btn-light {
    --bs-btn-color: var(--eh-ink);
    --bs-btn-bg: var(--eh-surface-2);
    --bs-btn-border-color: var(--eh-border);
    --bs-btn-hover-color: var(--eh-ink);
    --bs-btn-hover-bg: var(--eh-surface-3);
    --bs-btn-hover-border-color: var(--eh-border-strong);
    --bs-btn-active-bg: var(--eh-surface-3);
    --bs-btn-active-color: var(--eh-ink);
}

.btn-outline-secondary {
    --bs-btn-color: var(--eh-muted);
    --bs-btn-border-color: var(--eh-border-strong);
    --bs-btn-hover-color: var(--eh-ink);
    --bs-btn-hover-bg: var(--eh-surface-3);
    --bs-btn-hover-border-color: var(--eh-border-strong);
    --bs-btn-active-color: var(--eh-ink);
    --bs-btn-active-bg: var(--eh-surface-3);
}

.btn-outline-dark {
    --bs-btn-color: var(--eh-ink);
    --bs-btn-border-color: var(--eh-border-strong);
    --bs-btn-hover-color: var(--eh-surface);
    --bs-btn-hover-bg: var(--eh-ink);
    --bs-btn-hover-border-color: var(--eh-ink);
}

.btn-link { color: var(--eh-brand-text); }

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .22rem var(--eh-focus) !important;
}

/* ---------- 10. Forms ---------- */
.form-label,
label.col-form-label {
    font-weight: 500;
    font-size: .875rem;
    color: var(--eh-ink);
    margin-bottom: .35rem;
}

.form-text { color: var(--eh-muted); }

.form-control,
.form-select {
    background-color: var(--eh-surface);
    color: var(--eh-ink);
    border: 1px solid var(--eh-border-strong);
    border-radius: 9px;
    min-height: 2.5rem;
    padding: .5rem .8rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.form-control-sm,
.form-select-sm { min-height: 2.05rem; padding: .3rem .65rem; font-size: .85rem; border-radius: 7px; }
.form-control-lg,
.form-select-lg { min-height: 3rem; border-radius: 11px; }

textarea.form-control { min-height: 4.5rem; }
.form-control[type="file"] { padding: .35rem .5rem; }
.form-control::file-selector-button { background: var(--eh-surface-3); color: var(--eh-ink); border-radius: 6px; }

.form-control:hover,
.form-select:hover { border-color: var(--eh-subtle); }

.form-control:focus,
.form-select:focus {
    border-color: var(--eh-brand);
    background-color: var(--eh-surface);
    color: var(--eh-ink);
}

.form-control::placeholder { color: var(--eh-subtle); opacity: 1; }

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--eh-surface-2);
    color: var(--eh-muted);
}

.form-select {
    padding-inline-end: 2.25rem;
    background-image: var(--eh-select-arrow), var(--bs-form-select-bg-icon, none);
    background-size: 14px 14px;
    background-position: right .75rem center;
    cursor: pointer;
}
html[dir="rtl"] .form-select { background-position: left .75rem center; }

.form-select[multiple],
.form-select[size]:not([size="1"]) { background-image: none; padding-inline-end: .8rem; }

.input-group-text {
    background: var(--eh-surface-2);
    color: var(--eh-muted);
    border-color: var(--eh-border-strong);
}

.form-check-input {
    border-color: var(--eh-border-strong);
    background-color: var(--eh-surface);
}

.form-check-input:checked {
    background-color: var(--eh-brand);
    border-color: var(--eh-brand);
}

/* On the light logo green (White and Dark themes) the tick / dot / switch knob is navy, like the logo;
   the Blue theme's navy fill keeps Bootstrap's white marks. */
html:not([data-theme="blue"]) .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23063865' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
html:not([data-theme="blue"]) .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23063865'/%3e%3c/svg%3e");
}
html:not([data-theme="blue"]) .form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23063865'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus { border-color: var(--eh-brand-border); }

/* Modern dropdown list for <select class="form-select"> where the browser supports it
   (Chrome/Edge 135+). Mouse/trackpad only: phones keep their native picker wheel.
   Other browsers simply keep the styled native select above. */
@supports (appearance: base-select) {
    @media (hover: hover) and (pointer: fine) {
        select.form-select:not([multiple]):not([size]),
        select.form-select:not([multiple]):not([size])::picker(select) {
            appearance: base-select;
        }

        select.form-select:not([multiple]):not([size]) {
            background-image: none;
            padding-inline-end: .8rem;
            display: flex;
            align-items: center;
        }

        select.form-select:not([multiple]):not([size])::picker-icon {
            content: "";
            width: 14px;
            height: 14px;
            margin-inline-start: auto;
            display: block;
            flex: 0 0 auto;
            background: var(--eh-select-arrow) center / 14px 14px no-repeat;
        }

        select.form-select:not([multiple]):not([size])::picker(select) {
            background: var(--eh-surface);
            color: var(--eh-ink);
            border: 1px solid var(--eh-border);
            border-radius: 12px;
            box-shadow: var(--eh-shadow-lg);
            padding: 4px;
            margin-block: 4px;
            max-height: min(22rem, 60vh);
            min-width: anchor-size(width);
        }

        select.form-select:not([multiple]):not([size]) option {
            text-transform: none;
            letter-spacing: normal;
            font-weight: 400;
            padding: .5rem .7rem;
            border-radius: 8px;
            font-size: .9rem;
            color: var(--eh-ink);
            background: transparent;
            cursor: pointer;
        }

        select.form-select:not([multiple]):not([size]) option:hover,
        select.form-select:not([multiple]):not([size]) option:focus-visible {
            background: var(--eh-surface-3);
            outline: none;
        }

        select.form-select:not([multiple]):not([size]) option:checked {
            background: var(--eh-brand-soft);
            color: var(--eh-brand-text);
            font-weight: 600;
        }

        select.form-select:not([multiple]):not([size]) option::checkmark { color: var(--eh-brand-text); }
        select.form-select:not([multiple]):not([size]) option:disabled { color: var(--eh-subtle); cursor: default; }

        select.form-select:not([multiple]):not([size]) optgroup {
            font-size: .72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: var(--eh-muted);
            padding: .35rem .3rem .1rem;
        }
    }
}

/* ---------- 11. Dropdown menus, modals, lists, tabs ---------- */
.dropdown-menu {
    --bs-dropdown-bg: var(--eh-surface);
    --bs-dropdown-color: var(--eh-ink);
    --bs-dropdown-border-color: var(--eh-border);
    --bs-dropdown-link-color: var(--eh-ink);
    --bs-dropdown-link-hover-color: var(--eh-ink);
    --bs-dropdown-link-hover-bg: var(--eh-surface-3);
    --bs-dropdown-link-active-color: var(--eh-brand-text);
    --bs-dropdown-link-active-bg: var(--eh-brand-soft);
    --bs-dropdown-header-color: var(--eh-muted);
    --bs-dropdown-divider-bg: var(--eh-border);
    border-radius: 12px;
    box-shadow: var(--eh-shadow-lg);
    padding: 4px;
}

.dropdown-item { border-radius: 8px; padding: .5rem .75rem; font-size: .9rem; }
.dropdown-header { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

.modal {
    --bs-modal-bg: var(--eh-surface);
    --bs-modal-color: var(--eh-ink);
    --bs-modal-border-color: var(--eh-border);
    --bs-modal-header-border-color: var(--eh-border);
    --bs-modal-footer-border-color: var(--eh-border);
    --bs-modal-border-radius: 16px;
}

.modal-header .modal-title { font-weight: 600; }

.list-group {
    --bs-list-group-bg: var(--eh-surface);
    --bs-list-group-color: var(--eh-ink);
    --bs-list-group-border-color: var(--eh-border);
    --bs-list-group-action-hover-bg: var(--eh-surface-3);
    --bs-list-group-action-hover-color: var(--eh-ink);
    --bs-list-group-active-bg: var(--eh-brand);
    --bs-list-group-active-border-color: var(--eh-brand);
    --bs-list-group-active-color: var(--eh-on-brand);
}

.nav-tabs { --bs-nav-tabs-border-color: var(--eh-border); --bs-nav-tabs-link-active-bg: var(--eh-surface); --bs-nav-tabs-link-active-color: var(--eh-brand-text); --bs-nav-tabs-link-active-border-color: var(--eh-border) var(--eh-border) var(--eh-surface); }
.nav-tabs .nav-link { color: var(--eh-muted); font-weight: 500; }
.nav-tabs .nav-link.active { font-weight: 600; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--eh-brand); --bs-nav-pills-link-active-color: var(--eh-on-brand); }
.nav-pills .nav-link:not(.active) { color: var(--eh-muted); }

.pagination {
    --bs-pagination-color: var(--eh-ink);
    --bs-pagination-bg: var(--eh-surface);
    --bs-pagination-border-color: var(--eh-border);
    --bs-pagination-hover-color: var(--eh-ink);
    --bs-pagination-hover-bg: var(--eh-surface-3);
    --bs-pagination-hover-border-color: var(--eh-border);
    --bs-pagination-active-bg: var(--eh-brand);
    --bs-pagination-active-border-color: var(--eh-brand);
    --bs-pagination-active-color: var(--eh-on-brand);
    --bs-pagination-disabled-bg: var(--eh-surface-2);
    --bs-pagination-disabled-color: var(--eh-subtle);
    --bs-pagination-disabled-border-color: var(--eh-border);
    --bs-pagination-focus-box-shadow: 0 0 0 .22rem var(--eh-focus);
}

.accordion {
    --bs-accordion-bg: var(--eh-surface);
    --bs-accordion-color: var(--eh-ink);
    --bs-accordion-border-color: var(--eh-border);
    --bs-accordion-btn-color: var(--eh-ink);
    --bs-accordion-btn-bg: var(--eh-surface);
    --bs-accordion-active-bg: var(--eh-brand-soft);
    --bs-accordion-active-color: var(--eh-brand-text);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .22rem var(--eh-focus);
}

.progress { --bs-progress-bg: var(--eh-surface-3); }
.progress-bar.bg-success, .progress-bar:not([class*="bg-"]) { background-color: var(--eh-brand) !important; }

/* ---------- 12. Tables ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--eh-ink);
    --bs-table-border-color: var(--eh-border);
    --bs-table-striped-bg: var(--eh-surface-2);
    --bs-table-striped-color: var(--eh-ink);
    --bs-table-hover-bg: var(--eh-surface-3);
    --bs-table-hover-color: var(--eh-ink);
}

.table > thead > tr > th,
.table thead th {
    color: var(--eh-muted);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: var(--eh-surface-2);
    border-bottom: 1px solid var(--eh-border);
    white-space: nowrap;
}

.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table-sm > :not(caption) > * > * { padding: .4rem .5rem; }
.app-main .table tbody tr:hover > * { background-color: var(--eh-surface-2); }

.table-light,
.table > thead.table-light > tr > th {
    --bs-table-bg: var(--eh-surface-2);
    --bs-table-color: var(--eh-muted);
    --bs-table-border-color: var(--eh-border);
}

.table-dark { --bs-table-bg: #1f2937; }

/* ---------- 13. Badges, alerts, semantic text ---------- */
.badge { font-weight: 600; letter-spacing: .01em; }
.badge.bg-success:not(.eh-hospital-badge) { background: #1e7e34 !important; }
html[data-theme="dark"] .badge.bg-success:not(.eh-hospital-badge) { background: #1d8a43 !important; }
.badge.bg-primary { background: var(--eh-brand) !important; color: var(--eh-on-brand) !important; }

.alert { border-radius: 12px; border-width: 1px; }
.alert-success { --bs-alert-bg: var(--eh-success-soft); --bs-alert-color: var(--eh-success-text); --bs-alert-border-color: var(--eh-brand-border); --bs-alert-link-color: var(--eh-success-text); }
.alert-danger  { --bs-alert-bg: var(--eh-danger-soft);  --bs-alert-color: var(--eh-danger-text);  --bs-alert-border-color: transparent; --bs-alert-link-color: var(--eh-danger-text); }
.alert-warning { --bs-alert-bg: var(--eh-warning-soft); --bs-alert-color: var(--eh-warning-text); --bs-alert-border-color: transparent; --bs-alert-link-color: var(--eh-warning-text); }
.alert-info    { --bs-alert-bg: var(--eh-info-soft);    --bs-alert-color: var(--eh-info-text);    --bs-alert-border-color: transparent; --bs-alert-link-color: var(--eh-info-text); }
.alert-primary { --bs-alert-bg: var(--eh-brand-soft);   --bs-alert-color: var(--eh-brand-text);   --bs-alert-border-color: var(--eh-brand-border); }
.alert-secondary, .alert-light { --bs-alert-bg: var(--eh-surface-2); --bs-alert-color: var(--eh-ink); --bs-alert-border-color: var(--eh-border); }

/* Bootstrap's text-warning/info (#ffc107 / #0dcaf0) are unreadable on white; use the readable tokens. */
.text-primary { color: var(--eh-brand-text) !important; }
.text-success { color: var(--eh-success-text) !important; }
.text-danger  { color: var(--eh-danger-text) !important; }
.text-warning { color: var(--eh-warning-text) !important; }
.text-info    { color: var(--eh-info-text) !important; }
.border-primary { border-color: var(--eh-brand) !important; }
.bg-primary { background-color: var(--eh-brand) !important; }

.bg-primary-subtle, .bg-success-subtle { background-color: var(--eh-success-soft) !important; }
.bg-danger-subtle  { background-color: var(--eh-danger-soft) !important; }
.bg-warning-subtle { background-color: var(--eh-warning-soft) !important; }
.bg-info-subtle    { background-color: var(--eh-info-soft) !important; }

/* Light utility classes are hard-coded light in Bootstrap; make them follow the theme. */
.bg-white { background-color: var(--eh-surface) !important; }
.bg-light, .bg-body-secondary { background-color: var(--eh-surface-2) !important; }
.text-bg-light { background-color: var(--eh-surface-2) !important; color: var(--eh-ink) !important; }
.border-light { border-color: var(--eh-border) !important; }

/* .text-dark stays dark only where it sits on a coloured background (warning/info badges). */
html[data-theme="dark"] .text-dark:not(.badge):not(.btn):not([class*="bg-"]):not([class*="text-bg-"]) { color: var(--eh-ink) !important; }
html[data-theme="dark"] .badge.bg-light, html[data-theme="dark"] .badge.text-bg-light { color: var(--eh-ink) !important; }

/* ---------- 14. Page header block (optional helper for views) ---------- */
.eh-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.eh-page-head h1, .eh-page-head h2, .eh-page-head h3, .eh-page-head h4 { margin: 0; font-weight: 700; }
.eh-page-head .eh-page-sub { color: var(--eh-muted); font-size: .9rem; margin: .2rem 0 0; }

/* ---------- 15. Theme switcher ---------- */
.eh-theme-toggle .bi { font-size: 1.05rem; }
.eh-ti-blue, .eh-ti-dark { display: none; }
html[data-theme="blue"] .eh-ti-light, html[data-theme="dark"] .eh-ti-light { display: none; }
html[data-theme="blue"] .eh-ti-blue { display: inline-block; }
html[data-theme="dark"] .eh-ti-dark { display: inline-block; }

.eh-theme-menu { min-width: 13.5rem; }
.eh-theme-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.eh-theme-menu .dropdown-item small { color: var(--eh-muted); }
.eh-theme-menu .eh-check { margin-inline-start: auto; visibility: hidden; color: var(--eh-brand-text); }
html[data-theme="light"] [data-eh-theme="light"] .eh-check,
html[data-theme="blue"] [data-eh-theme="blue"] .eh-check,
html[data-theme="dark"] [data-eh-theme="dark"] .eh-check { visibility: visible; }
html[data-theme="light"] [data-eh-theme="light"],
html[data-theme="blue"] [data-eh-theme="blue"],
html[data-theme="dark"] [data-eh-theme="dark"] { font-weight: 600; }

.eh-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 0, 0, .12);
}

.eh-swatch-light { background: linear-gradient(135deg, #ffffff 50%, #1e7e34 50%); }
.eh-swatch-blue  { background: linear-gradient(135deg, #ffffff 50%, #1d63c9 50%); }
.eh-swatch-dark  { background: linear-gradient(135deg, #14181e 50%, #4cc27a 50%); border-color: rgba(255, 255, 255, .2); }

/* ---------- 16. Charts & maps follow the theme (CSS beats ApexCharts' SVG attributes) ---------- */
.apexcharts-xaxis-label,
.apexcharts-yaxis-label,
.apexcharts-xaxis-title-text,
.apexcharts-yaxis-title-text,
.apexcharts-title-text,
.apexcharts-subtitle-text,
.apexcharts-datalabels-group .apexcharts-datalabel-label { fill: var(--eh-muted); }
.apexcharts-datalabels-group .apexcharts-datalabel-value { fill: var(--eh-ink); }
.apexcharts-legend-text { color: var(--eh-muted) !important; }
.apexcharts-gridline,
.apexcharts-xaxis-tick,
.apexcharts-xaxis line,
.apexcharts-yaxis line { stroke: var(--eh-border); }
.apexcharts-tooltip.apexcharts-theme-light {
    background: var(--eh-surface) !important;
    color: var(--eh-ink);
    border-color: var(--eh-border) !important;
    box-shadow: var(--eh-shadow-lg) !important;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: var(--eh-surface-2) !important;
    border-color: var(--eh-border) !important;
}
.apexcharts-xaxistooltip, .apexcharts-yaxistooltip { background: var(--eh-surface) !important; color: var(--eh-ink) !important; border-color: var(--eh-border) !important; }
.apexcharts-menu { background: var(--eh-surface) !important; border-color: var(--eh-border) !important; }
.apexcharts-menu-item:hover { background: var(--eh-surface-3) !important; }
html[data-theme="dark"] .apexcharts-radialbar-track path,
html[data-theme="dark"] .apexcharts-radialbar-track .apexcharts-radialbar-area { stroke: var(--eh-surface-3); }
html[data-theme="dark"] .apexcharts-pie-area,
html[data-theme="dark"] .apexcharts-pie-series path { stroke: var(--eh-surface); }

html[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.78) contrast(1.08) saturate(.85); }
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip { background: var(--eh-surface); color: var(--eh-ink); }

/* FullCalendar (appointments) */
html[data-theme] .fc {
    --fc-border-color: var(--eh-border);
    --fc-page-bg-color: var(--eh-surface);
    --fc-neutral-bg-color: var(--eh-surface-2);
    --fc-list-event-hover-bg-color: var(--eh-surface-3);
}

/* ---------- 17. Motion: keep it quick; honour reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   Dashboard pages (.dash): Hospital / Doctor / Lab dashboards,
   Lab queue, Tickets desk, Patient search, Patient history.
   Each view still carries its own <style>; these rules are one
   step more specific so every dashboard shares one calm look:
   a white page header instead of the green banner, flat cards,
   neutral secondary buttons and soft icon chips.
   ============================================================ */
html[data-theme] .dash { color: var(--eh-ink); }

/* Page header (was the green banner) */
html[data-theme] .dash .d-hero {
    background: transparent;
    color: var(--eh-ink);
    box-shadow: none;
    border-radius: 0;
    padding: .25rem 0 .35rem;
    overflow: visible;
}
html[data-theme] .dash .d-hero::before,
html[data-theme] .dash .d-hero::after { display: none; }

html[data-theme] .dash .d-hero h4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .15rem .6rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--eh-ink);
    margin: 0;
}
html[data-theme] .dash .d-hero h4 > .bi:first-child {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0 !important;
    border-radius: 12px;
    background: var(--eh-brand-soft);
    color: var(--eh-brand-text);
    font-size: 1.2rem;
    flex: 0 0 auto;
}
html[data-theme] .dash .d-hero h4 span { color: var(--eh-muted); opacity: 1 !important; font-weight: 500; }

html[data-theme] .dash .d-hero .sub {
    color: var(--eh-muted);
    opacity: 1;
    font-size: .9rem;
    margin-top: .35rem;
    padding-inline-start: calc(42px + .6rem);
}
html[data-theme] .dash .d-hero .sub .bi { opacity: .8; }

/* Header buttons (Switch, Print, Queue, Export...) are quiet secondary buttons */
html[data-theme] .dash .d-hero .btn-switch {
    background: var(--eh-surface);
    color: var(--eh-ink);
    border: 1px solid var(--eh-border-strong);
    border-radius: 9px;
    font-weight: 500;
    backdrop-filter: none;
    box-shadow: var(--eh-shadow-sm);
    padding: .4rem .8rem;
}
html[data-theme] .dash .d-hero .btn-switch:hover {
    background: var(--eh-surface-3);
    color: var(--eh-ink);
    border-color: var(--eh-border-strong);
}

/* Patient-history identity chips + patient search bar inside the header */
html[data-theme] .dash .d-hero .chips { padding-inline-start: calc(42px + .6rem); }
html[data-theme] .dash .d-hero .chip {
    background: var(--eh-surface);
    border: 1px solid var(--eh-border);
    color: var(--eh-ink);
    font-weight: 500;
}
html[data-theme] .dash .d-hero .chip .bi { color: var(--eh-muted); }

html[data-theme] .dash .searchbar { margin-top: .9rem; }
html[data-theme] .dash .searchbar input {
    background: var(--eh-surface);
    color: var(--eh-ink);
    border: 1px solid var(--eh-border-strong);
    border-radius: 10px;
    min-height: 2.75rem;
    box-shadow: var(--eh-shadow-sm);
}
html[data-theme] .dash .searchbar input:focus { outline: none; border-color: var(--eh-brand); box-shadow: 0 0 0 .22rem var(--eh-focus); }
html[data-theme] .dash .searchbar input::placeholder { color: var(--eh-subtle); }
html[data-theme] .dash .searchbar .btn {
    background: var(--eh-brand);
    color: var(--eh-on-brand);
    border-radius: 10px;
    font-weight: 600;
}
html[data-theme] .dash .searchbar .btn:hover { background: var(--eh-brand-hover); color: var(--eh-on-brand); }

/* Cards */
html[data-theme] .dash .d-card {
    background: var(--eh-surface);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius);
    box-shadow: var(--eh-shadow-sm);
}
html[data-theme] .dash .d-head { font-weight: 600; font-size: .98rem; color: var(--eh-ink); }
html[data-theme] .dash .d-head .ic,
html[data-theme] .dash .insight .dot {
    background: var(--eh-brand-soft);
    color: var(--eh-brand-text);
    border-radius: 9px;
}

/* Filter toolbar: fields and buttons share one height and one baseline */
html[data-theme] .dash .d-controls { align-items: flex-end; gap: .75rem; }
html[data-theme] .dash .d-controls label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--eh-muted);
}
html[data-theme] .dash .d-controls .form-control,
html[data-theme] .dash .d-controls .form-select {
    min-height: 2.35rem;
    border-radius: 9px;
    border-color: var(--eh-border-strong);
}
html[data-theme] .dash .d-controls .form-select { width: auto !important; min-width: 11.5rem; white-space: nowrap; }
html[data-theme] .dash .d-controls .btn { min-height: 2.35rem; display: inline-flex; align-items: center; }

/* Buttons */
html[data-theme] .dash .btn-grad {
    background: var(--eh-brand);
    color: var(--eh-on-brand);
    border: 1px solid var(--eh-brand);
    border-radius: 9px;
    font-weight: 600;
    box-shadow: none;
    filter: none;
}
html[data-theme] .dash .btn-grad:hover { background: var(--eh-brand-hover); border-color: var(--eh-brand-hover); color: var(--eh-on-brand); }

html[data-theme] .dash .btn-xlsx,
html[data-theme] .dash .btn-rec,
html[data-theme] .dash .qa .btn-out {
    background: var(--eh-surface);
    color: var(--eh-ink);
    border: 1px solid var(--eh-border-strong);
    border-radius: 9px;
    font-weight: 500;
    box-shadow: none;
}
html[data-theme] .dash .btn-xlsx:hover,
html[data-theme] .dash .btn-rec:hover,
html[data-theme] .dash .qa .btn-out:hover { background: var(--eh-surface-3); color: var(--eh-ink); }
html[data-theme] .dash .btn-xlsx .bi,
html[data-theme] .dash .btn-rec .bi,
html[data-theme] .dash .qa .btn-out .bi { color: var(--eh-brand-text); }

/* KPI tiles: white card, soft icon chip, no coloured side bar, no hover jump */
html[data-theme] .dash .kpi {
    background: var(--eh-surface);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius);
    box-shadow: var(--eh-shadow-sm);
    padding: 1rem 1.1rem .4rem;
    transition: border-color .15s ease;
}
html[data-theme] .dash .kpi:hover { transform: none; box-shadow: var(--eh-shadow-sm); border-color: var(--eh-border-strong); }
html[data-theme] .dash .kpi::before { display: none; }
html[data-theme] .dash .kpi-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--eh-brand-soft);
    color: var(--eh-brand-text);
    box-shadow: none;
    font-size: 1rem;
}
html[data-theme] .dash .kpi-val { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; margin-top: .65rem; }
html[data-theme] .dash .kpi-label { color: var(--eh-muted); font-weight: 500; font-size: .8rem; }
html[data-theme] .dash .pill { font-weight: 600; }
html[data-theme] .dash .pill.flat { background: var(--eh-surface-2); color: var(--eh-muted); }

/* Small stats, chips and request rows */
html[data-theme] .dash .stat { background: var(--eh-surface-2); border-color: var(--eh-border); }
html[data-theme] .dash .role-chip { background: var(--eh-surface-2); border-color: var(--eh-border); }
html[data-theme] .dash .role-chip b { color: var(--eh-brand-text); }
html[data-theme] .dash .req { background: var(--eh-surface); border-color: var(--eh-border); }
html[data-theme] .dash .req:hover { transform: none; border-color: var(--eh-brand-border); box-shadow: none; background: var(--eh-surface-2); }
html[data-theme] .dash .leg .nm { color: var(--eh-ink); }
html[data-theme] .dash a.leg-link:hover { background: var(--eh-surface-2); }
html[data-theme] .dash a.leg-link:hover .nm { color: var(--eh-brand-text); }

@media (max-width: 576px) {
    html[data-theme] .dash .d-hero h4 { font-size: 1.2rem; flex-wrap: nowrap; }
    html[data-theme] .dash .d-hero h4 > .bi:first-child { width: 36px; height: 36px; font-size: 1.05rem; }
    html[data-theme] .dash .d-hero .sub,
    html[data-theme] .dash .d-hero .chips { padding-inline-start: 0; }
    html[data-theme] .dash .d-controls > div,
    html[data-theme] .dash .d-controls .form-control,
    html[data-theme] .dash .d-controls .form-select { width: 100% !important; }
    html[data-theme] .dash .d-controls .btn { flex: 1 1 auto; justify-content: center; }
    html[data-theme] .dash .d-controls .ms-auto { margin-inline-start: 0 !important; }
}

/* ============================================================
   Mobile: wide data tables become stacked "cards" on phones.
   Applies to tables marked .table-tools or .eh-stack whose cells
   carry data-label="…".
   ============================================================ */
@media (max-width: 576px) {
    table.table-tools thead,
    table.eh-stack thead {
        display: none;
    }

    table.table-tools tbody tr,
    table.eh-stack tbody tr {
        display: block;
        margin-bottom: .75rem;
        border: 1px solid var(--eh-border);
        border-radius: 10px;
        overflow: hidden;
        background: var(--eh-surface);
    }

    table.table-tools tbody td,
    table.eh-stack tbody td {
        display: block;
        text-align: end;
        padding: .5rem .75rem;
        border: none;
        border-bottom: 1px solid var(--eh-border);
        white-space: normal !important;
    }

    table.table-tools tbody td:last-child,
    table.eh-stack tbody td:last-child {
        border-bottom: none;
    }

    table.table-tools tbody td[data-label]::before,
    table.eh-stack tbody td[data-label]::before {
        content: attr(data-label);
        float: inline-start;
        font-weight: 600;
        color: var(--eh-muted);
        margin-inline-end: 1rem;
        text-transform: uppercase;
        font-size: .72rem;
        letter-spacing: .02em;
        padding-top: .15rem;
    }

    table.table-tools.table-striped tbody tr:nth-of-type(odd) td,
    table.eh-stack.table-striped tbody tr:nth-of-type(odd) td {
        background: transparent;
    }

    .table-tools-bar { width: 100%; }
    .table-tools-bar .input-group { max-width: none !important; flex: 1 1 100%; }
}

/* ============================================================
   CREATE-TICKET FORM  (icon sections + repeatable rows)
   ============================================================ */
.eh-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--eh-radius-sm);
    background: var(--eh-brand-soft);
    color: var(--eh-brand-text);
    font-size: 1.05rem;
    margin-inline-end: .6rem;
    flex: 0 0 auto;
}

.eh-form-section .card-header {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--eh-ink);
    background: var(--eh-surface);
    border-bottom: 1px solid var(--eh-border);
}

.eh-doctor-checklist { max-height: 190px; overflow-y: auto; background: var(--eh-surface); }

.eh-pool-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .8rem;
    border-radius: var(--eh-radius-sm);
    background: var(--eh-brand-soft);
}

.eh-dim { opacity: .5; pointer-events: none; }

.eh-repeat-row {
    display: flex;
    gap: .6rem;
    align-items: flex-end;
    padding: .6rem;
    border: 1px dashed var(--eh-border-strong);
    border-radius: var(--eh-radius-sm);
    margin-bottom: .6rem;
    background: var(--eh-surface-2);
}
.eh-repeat-row > div { min-width: 0; }
.eh-repeat-row .form-label { font-size: .78rem; color: var(--eh-muted); margin-bottom: .15rem; }

.eh-addrow-btn {
    border: 1px dashed var(--eh-brand-border);
    color: var(--eh-brand-text);
    background: transparent;
}
.eh-addrow-btn:hover { background: var(--eh-brand-soft); color: var(--eh-brand-text); }

.eh-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--eh-surface);
    border-top: 1px solid var(--eh-border);
    padding: .75rem 1rem;
    border-radius: var(--eh-radius-sm) var(--eh-radius-sm) 0 0;
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    margin-top: .5rem;
    box-shadow: 0 -6px 16px -12px rgba(0, 0, 0, .25);
}

@media (max-width: 768px) {
    .eh-repeat-row { flex-wrap: wrap; }
    .eh-repeat-row > div { flex: 1 1 100%; }
}

/* ============================================================
   NAVIGATION: sidebar + header fixes (all sizes, esp. mobile)
   ============================================================ */

/* Sidebar links as flex rows: icon | wrapping label | badge.
   AdminLTE forces nowrap+ellipsis on labels, which clips long
   bilingual entries and makes text overlap the count badges. */
.sidebar-wrapper .sidebar-menu .nav-link {
    display: flex;
    align-items: center;
    min-height: 40px;
}

.sidebar-wrapper .sidebar-menu .nav-link p {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
    text-align: start;
    margin: 0;
}

.sidebar-wrapper .sidebar-menu .nav-link .badge {
    flex: 0 0 auto;
    margin-inline-start: .5rem;
}

.sidebar-wrapper {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Close arrow in the sidebar's brand row: only for the slide-in menu (phones/tablets, below). */
.app-sidebar .eh-sidebar-close { display: none; }

/* ---- Phone / small-tablet (below the lg sidebar breakpoint) ---- */
@media (max-width: 991.98px) {
    .app-header .navbar-nav > .nav-item > .nav-link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .app-header .navbar-nav { flex-wrap: nowrap; align-items: center; }
    .app-header { overflow-x: clip; }

    /* If the header runs short of room, the hospital name chip shrinks (with "…") instead of
       the account/logout icons being pushed off the screen edge. */
    .app-header .navbar-nav.ms-auto { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
    .app-header .navbar-nav.ms-auto > .nav-item { flex: 0 0 auto; }
    .app-header .navbar-nav.ms-auto > .nav-item.eh-hospital-chip { flex: 0 1 auto; min-width: 0; }
    .app-header .eh-hospital-chip .eh-hospital-badge { min-width: 0; }

    .app-header .eh-hospital-badge {
        display: inline-block;
        max-width: 34vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    .app-header .eh-user-name {
        display: inline-block;
        max-width: 26vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    /* Header menus (alerts, language, theme) hang from the header's end edge, not from their
       small icon: anchored to the icon they ran off the side of the screen (off the left in
       English, off the right in Arabic/Kurdish). The li goes static so the header is the anchor. */
    .app-header .navbar-nav .nav-item.dropdown { position: static; }
    .app-header .navbar-nav .dropdown-menu[data-bs-popper] {
        top: 100%;
        inset-inline-start: auto;
        inset-inline-end: .5rem;
        width: min(20rem, calc(100% - 1rem));
        max-height: calc(100vh - 5rem);
        max-height: calc(100dvh - 5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        margin-top: .25rem;
    }
    .app-header .dropdown-menu .dropdown-item { white-space: normal; min-height: 44px; display: flex; align-items: center; }
    .app-header .dropdown-menu.show { animation: eh-menu-in .16s ease-out; }

    /* sidebar links get full 44px touch targets on touch screens */
    .sidebar-wrapper .sidebar-menu .nav-link { min-height: 44px; }

    /* Off-canvas sidebar: brand on top, the menu fills the rest and scrolls on its own.
       AdminLTE sizes the menu with 100vh, which on phones is taller than the visible screen
       (the browser toolbar covers the bottom), so the last links could never be reached. */
    .sidebar-expand-lg .app-sidebar {
        display: flex;
        flex-direction: column;
        max-height: none;
    }
    .sidebar-expand-lg .app-sidebar .sidebar-brand { flex: 0 0 auto; }
    .sidebar-expand-lg .app-sidebar .sidebar-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }

    /* The menu always has a little room to scroll, so a swipe moves it (with the phone's natural
       bounce) even when every link fits on screen, instead of doing nothing / feeling like a tap. */
    .sidebar-expand-lg .app-sidebar .sidebar-wrapper > nav { min-height: calc(100% + 4rem); }

    /* Brand row: logo at the start, close arrow at the end (next to the dimmed page). */
    .sidebar-expand-lg .app-sidebar .sidebar-brand { justify-content: space-between; gap: .5rem; }
    .app-sidebar .eh-sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid var(--eh-sidebar-border);
        border-radius: 12px;
        background: var(--eh-sidebar-hover);
        color: var(--eh-sidebar-ink);
        font-size: 1.1rem;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .15s ease, color .15s ease;
    }
    .app-sidebar .eh-sidebar-close:active {
        background: var(--eh-sidebar-active-bg);
        color: var(--eh-sidebar-active-ink);
    }
    .app-sidebar .eh-sidebar-close:focus-visible { outline: 2px solid var(--eh-focus); outline-offset: 2px; }

    /* While the sidebar is open the page behind it stays still, so a swipe always scrolls the menu. */
    body.sidebar-open { overflow: hidden; }
    .sidebar-expand-lg.sidebar-open .sidebar-overlay { touch-action: none; }
}

/* Touch screens: a finger that starts a scroll on a link must not leave it looking pressed.
   Hover/focus highlights (which "stick" after a tap on phones) are dropped; a link lights up
   only while it is really being pressed. Mouse users keep the normal hover. */
.app-sidebar .sidebar-menu .nav-link {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: none) {
    .sidebar-wrapper .sidebar-menu > .nav-item:hover > .nav-link:not(.active),
    .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:focus:not(.active):not(:focus-visible),
    .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:hover:not(.active) {
        background-color: transparent;
        color: var(--eh-sidebar-ink) !important;
    }
    .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:active:not(.active) {
        background-color: var(--eh-sidebar-hover);
    }
}

@keyframes eh-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .app-header .dropdown-menu.show { animation: none; }
}

/* Account link: name on wide screens, just an icon on phones (keeps Logout on screen). */
.eh-user-icon, .eh-logout-icon { display: none; font-size: 1.15rem; }

/* Phones and small tablets: every header icon must stay on screen (account + logout used to be
   pushed off the edge). Name and "Logout" become icons, and the hospital name chip is the one
   item that gives way, shortening with "…". */
@media (max-width: 767.98px) {
    .app-header .eh-user-name { display: none; }
    .app-header .eh-user-icon,
    .app-header .eh-logout-icon { display: inline-block; }
    .app-header .eh-logout-text { display: none; }

    .app-header .navbar-nav.ms-auto > .nav-item.eh-hospital-chip { margin-inline-end: .25rem !important; }
    .app-header .eh-hospital-chip .eh-hospital-badge { max-width: 100%; margin-inline-end: .35rem !important; }
}

/* Phones: 16px inputs stop iOS Safari from zooming the page on focus. */
@media (max-width: 576px) {
    .app-header .navbar-nav > .nav-item > .nav-link { min-width: 40px; padding-left: .4rem; padding-right: .4rem; }

    /* Header menus open as a full-width panel just under the header. */
    .app-header .navbar-nav .dropdown-menu[data-bs-popper] { inset-inline-start: .5rem; width: auto; }

    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm { font-size: 16px; }

    .app-content-header > .container-fluid { padding-left: .6rem; padding-right: .6rem; }
    .card-header { padding: .75rem .9rem; }
}

/* ============================================================
   LANGUAGE  (English / العربية / کوردی / English + العربية)
   <html lang dir> is set by the server from the eh-lang cookie; Arabic and Kurdish
   load adminlte.rtl.min.css, so Bootstrap utilities (ms-*, me-*, text-end…) flip on their own.
   ============================================================ */

/* Picker in the navbar */
.eh-lang-toggle .bi { font-size: 1.05rem; }
.eh-lang-code { font-size: .78rem; font-weight: 600; margin-inline-start: .3rem; }

.eh-lang-menu { min-width: 12.5rem; }
.eh-lang-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.eh-lang-menu .eh-check { margin-inline-start: auto; visibility: hidden; color: var(--eh-brand-text); }
.eh-lang-menu .dropdown-item.active,
.eh-lang-menu .dropdown-item.active:hover {
    background: var(--eh-brand-soft);
    color: var(--eh-brand-text);
    font-weight: 600;
}
.eh-lang-menu .dropdown-item.active .eh-check { visibility: visible; }

/* Picker pinned to the corner of the login page (sits on the photo background) */
.eh-lang-corner-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: color-mix(in srgb, var(--eh-surface) 92%, transparent);
    color: var(--eh-ink);
    border: 1px solid var(--eh-border);
    border-radius: 999px;
    padding: .4rem .9rem;
    font-weight: 500;
    box-shadow: var(--eh-shadow-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.eh-lang-corner-btn:hover,
.eh-lang-corner-btn:focus-visible,
.eh-lang-corner-btn.show {
    background: var(--eh-surface);
    color: var(--eh-ink);
    border-color: var(--eh-border-strong);
}

/* English + Arabic mode: the Arabic sits small and light beside the English.
   Opacity (not a colour) so it also reads well inside coloured buttons and badges. */
.eh-alt {
    font-size: .88em;
    font-weight: 400;
    opacity: .72;
    margin-inline-start: .35em;
}

/* In the narrow sidebar the Arabic gets its own line under the English instead of wrapping mid-phrase.
   (English + Arabic mode is always left-to-right, so "left" lines it up with the English.) */
html[data-lang="en-ar"] .app-sidebar .eh-alt {
    display: block;
    margin-inline-start: 0;
    text-align: left;
    font-size: .82em;
    line-height: 1.35;
}

/* Letter-spacing breaks the joined letters of Arabic script (Arabic and Kurdish). */
:lang(ar),
:lang(ckb) { letter-spacing: normal !important; }

/* Direction arrows point the other way when reading right-to-left. */
[dir="rtl"] .bi-chevron-right::before,
[dir="rtl"] .bi-chevron-left::before,
[dir="rtl"] .bi-chevron-double-right::before,
[dir="rtl"] .bi-chevron-double-left::before,
[dir="rtl"] .bi-arrow-right::before,
[dir="rtl"] .bi-arrow-left::before,
[dir="rtl"] .bi-arrow-right-short::before,
[dir="rtl"] .bi-arrow-left-short::before,
[dir="rtl"] .bi-arrow-right-circle::before,
[dir="rtl"] .bi-arrow-left-circle::before,
[dir="rtl"] .bi-caret-right-fill::before,
[dir="rtl"] .bi-caret-left-fill::before,
[dir="rtl"] .bi-box-arrow-right::before,
[dir="rtl"] .bi-box-arrow-in-right::before,
[dir="rtl"] .bi-box-arrow-left::before,
[dir="rtl"] .bi-reply::before { transform: scaleX(-1); }