/* ==========================================================================
   HMS design system - light + dark
   --------------------------------------------------------------------------
   One stylesheet for the whole staff/patient application. Loaded last in
   the layout head (application/views/theme/head.php) so it wins over
   AdminLTE, Bootstrap 4/5 and the vendor plugins.

   Theme: <html data-theme="light|dark"> is set before first paint by the
   inline script in theme/head.php; the user's choice (light / dark /
   system) lives in localStorage "hms-theme" and is mirrored to the server
   session for code that still reads it. body.dark-mode is kept in step so
   AdminLTE's own plugin dark styles also apply.

   Rule of thumb: never hard-code a colour below the token block - use a
   token, so both themes stay correct.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
    color-scheme: light;

    /* surfaces */
    --hms-bg: #F3F6F8;
    --hms-surface: #FFFFFF;
    --hms-surface-2: #F7F9FB;          /* table heads, subtle fills */
    --hms-elevated: #FFFFFF;           /* modals, dropdowns, popovers */
    --hms-input: #FFFFFF;
    --hms-hover: #EFF4F7;
    --hms-overlay: rgba(9, 21, 33, .55);

    /* lines */
    --hms-border: #E1E8EE;
    --hms-border-strong: #C9D4DD;
    --hms-divider: #EDF1F5;

    /* text */
    --hms-text: #102132;
    --hms-text-2: #3D4F63;
    --hms-muted: #607082;
    --hms-placeholder: #97A5B4;
    --hms-inverse: #FFFFFF;

    /* brand: clinical teal + warm coral, deep navy for depth */
    --hms-primary: #0D7B7F;
    --hms-primary-hover: #0A6D72;
    --hms-primary-soft: rgba(14, 131, 136, .10);
    --hms-primary-contrast: #FFFFFF;
    --hms-accent: #E4576A;
    --hms-accent-soft: rgba(228, 87, 106, .12);
    --hms-navy: #0B2233;

    /* status */
    --hms-success: #16803C;  --hms-success-soft: rgba(22, 128, 60, .11);
    --hms-warning: #A75C09;  --hms-warning-soft: rgba(217, 132, 10, .14);
    --hms-danger:  #CB3838;  --hms-danger-soft:  rgba(210, 58, 58, .11);
    --hms-info:    #1C6FB8;  --hms-info-soft:    rgba(28, 111, 184, .11);

    /* sidebar (deep navy in both themes gives the product its frame) */
    --hms-side-bg: #0B2233;
    --hms-side-bg-2: #0F2C41;
    --hms-side-text: #C7D6E2;
    --hms-side-muted: #7F97AB;
    --hms-side-active: #13A3A8;
    --hms-side-hover: rgba(255, 255, 255, .06);

    /* shape + depth */
    --hms-r-sm: 8px;
    --hms-r: 12px;
    --hms-r-lg: 16px;
    --hms-r-pill: 999px;
    --hms-shadow-sm: 0 1px 2px rgba(16, 33, 50, .05), 0 2px 8px rgba(16, 33, 50, .05);
    --hms-shadow: 0 4px 16px rgba(16, 33, 50, .08);
    --hms-shadow-lg: 0 18px 48px rgba(16, 33, 50, .18);
    --hms-focus: 0 0 0 3px rgba(14, 131, 136, .28);

    /* type */
    --hms-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --hms-font-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --hms-fs-xs: .75rem;
    --hms-fs-sm: .8125rem;
    --hms-fs: .875rem;
    --hms-fs-md: 1rem;
    --hms-fs-lg: 1.25rem;
    --hms-fs-xl: 1.5rem;

    /* spacing */
    --hms-s1: 4px; --hms-s2: 8px; --hms-s3: 12px; --hms-s4: 16px; --hms-s5: 20px; --hms-s6: 24px; --hms-s8: 32px;

    --hms-speed: .16s;
}

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

    --hms-bg: #0A121D;
    --hms-surface: #111B28;
    --hms-surface-2: #0E1723;
    --hms-elevated: #172334;
    --hms-input: #0D1621;
    --hms-hover: #1A2738;
    --hms-overlay: rgba(2, 6, 12, .7);

    --hms-border: #22324A;
    --hms-border-strong: #31445F;
    --hms-divider: #1B2839;

    --hms-text: #E5ECF3;
    --hms-text-2: #BAC7D5;
    --hms-muted: #8698AD;
    --hms-placeholder: #5E7089;
    --hms-inverse: #0A121D;

    --hms-primary: #2BC3BD;
    --hms-primary-hover: #56D4CF;
    --hms-primary-soft: rgba(43, 195, 189, .14);
    --hms-primary-contrast: #062321;
    --hms-accent: #F58293;
    --hms-accent-soft: rgba(245, 130, 147, .14);

    --hms-success: #3DD68C;  --hms-success-soft: rgba(61, 214, 140, .14);
    --hms-warning: #F5B94A;  --hms-warning-soft: rgba(245, 185, 74, .15);
    --hms-danger:  #F87272;  --hms-danger-soft:  rgba(248, 114, 114, .14);
    --hms-info:    #5BB4F5;  --hms-info-soft:    rgba(91, 180, 245, .14);

    --hms-side-bg: #07111C;
    --hms-side-bg-2: #0C1826;
    --hms-side-text: #B9C8D6;
    --hms-side-muted: #6D8399;
    --hms-side-active: #2BC3BD;
    --hms-side-hover: rgba(255, 255, 255, .05);

    --hms-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --hms-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    --hms-shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
    --hms-focus: 0 0 0 3px rgba(43, 195, 189, .35);
}

/* ---------- 2. Base --------------------------------------------------------- */
html[data-theme] { background: var(--hms-bg); }
html[data-theme] body {
    font-family: var(--hms-font) !important;
    font-size: var(--hms-fs);
    color: var(--hms-text) !important;
    background: var(--hms-bg) !important;
    -webkit-font-smoothing: antialiased;
    transition: none;
}
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3,
html[data-theme] h4, html[data-theme] h5, html[data-theme] h6,
html[data-theme] .h1, html[data-theme] .h2, html[data-theme] .h3, html[data-theme] .h4 {
    font-family: var(--hms-font-head) !important;
    color: var(--hms-text) !important;
    letter-spacing: -.01em;
    font-weight: 700;
}
html[data-theme] p, html[data-theme] li, html[data-theme] td, html[data-theme] dd { color: inherit; }
html[data-theme] a { color: var(--hms-primary); }
html[data-theme] a:hover { color: var(--hms-primary-hover); }
html[data-theme] small, html[data-theme] .text-muted, html[data-theme] .text-gray, html[data-theme] .help-block,
html[data-theme] .form-text { color: var(--hms-muted) !important; }
html[data-theme] hr { border-color: var(--hms-divider) !important; opacity: 1; }
html[data-theme] label { font-weight: 600 !important; color: var(--hms-text-2) !important; font-size: var(--hms-fs-sm); margin-bottom: 6px; padding-top: 0; }
html[data-theme] ::selection { background: var(--hms-primary); color: var(--hms-primary-contrast); }
html[data-theme] :focus-visible { outline: none; box-shadow: var(--hms-focus) !important; border-radius: var(--hms-r-sm); }
html[data-theme] * { scrollbar-width: thin; scrollbar-color: var(--hms-border-strong) transparent; }
html[data-theme] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme] ::-webkit-scrollbar-thumb { background: var(--hms-border-strong); border-radius: 10px; border: 2px solid var(--hms-bg); }
html[data-theme] .content-wrapper {
    background: var(--hms-bg) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--hms-text);
}
html[data-theme] .content { padding: 0 var(--hms-s4) var(--hms-s6); }

/* ---------- 3. Top bar ----------------------------------------------------- */
html[data-theme] .main-header.navbar {
    background: color-mix(in srgb, var(--hms-surface) 88%, transparent) !important;
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--hms-border) !important;
    box-shadow: none !important;
    padding-top: 10px !important; padding-bottom: 10px !important;
    position: sticky; top: 0; z-index: 1030;
}
html[data-theme] .main-header .nav-link { color: var(--hms-text-2) !important; border-radius: var(--hms-r-sm); transition: background var(--hms-speed), color var(--hms-speed); }
html[data-theme] .main-header .nav-link:hover { background: var(--hms-hover); color: var(--hms-text) !important; }
html[data-theme] .main-header .nav-link::after { display: none !important; }
html[data-theme] .navbar-badge { background: var(--hms-accent) !important; color: #fff !important; font-weight: 700; }

/* Theme switcher (light / dark / system) */
/* Theme switch: outlined pill with high-contrast icons so it reads in both themes */
.hms-theme-switch {
    display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--hms-r-pill);
    background: var(--hms-surface) !important; border: 1.5px solid var(--hms-border-strong) !important;
    box-shadow: var(--hms-shadow-sm);
}
html[data-theme="dark"] .hms-theme-switch { background: var(--hms-surface-2) !important; border-color: rgba(255, 255, 255, .22) !important; }
.hms-theme-switch button {
    width: 30px; height: 28px; border: 0 !important; border-radius: var(--hms-r-pill); background: transparent !important;
    color: var(--hms-text-2) !important; display: grid; place-items: center; cursor: pointer; font-size: 13px; padding: 0; line-height: 1;
    transition: background var(--hms-speed), color var(--hms-speed); box-shadow: none !important;
}
html[data-theme="dark"] .hms-theme-switch button { color: #C9D6E2 !important; }
.hms-theme-switch button i { color: inherit !important; }
.hms-theme-switch button:hover { color: var(--hms-primary) !important; background: var(--hms-primary-soft) !important; }
.hms-theme-switch button:focus-visible { outline: 2px solid var(--hms-primary); outline-offset: 1px; }
.hms-theme-switch button[aria-pressed="true"] { background: var(--hms-primary) !important; color: var(--hms-primary-contrast) !important; }
html[data-theme="dark"] .hms-theme-switch button[aria-pressed="true"] { color: #062322 !important; }
.hms-theme-switch--floating { position: fixed; top: 14px; right: 14px; z-index: 1100; }

/* ---------- 4. Sidebar ----------------------------------------------------- */
html[data-theme] .main-sidebar {
    background: linear-gradient(180deg, var(--hms-side-bg), var(--hms-side-bg-2)) !important;
    box-shadow: none !important;
    border-right: 1px solid rgba(255, 255, 255, .04);
}
html[data-theme] .main-sidebar .brand-link {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    padding: 14px 12px !important;
}
html[data-theme] .main-sidebar .brand-link .brand-image {
    width: 38px !important; height: 38px !important; border-radius: 10px !important; border: 0 !important;
    box-shadow: none !important; object-fit: cover; max-height: none; margin-left: 4px;
}
html[data-theme] .main-sidebar .brand-text {
    font-family: var(--hms-font-head) !important; font-size: 1rem !important; font-weight: 700 !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important;
    letter-spacing: 0 !important; text-transform: none !important; margin-left: 10px;
}
html[data-theme] .main-sidebar .brand-link.hms-brand { display: flex !important; align-items: center; gap: 0; white-space: nowrap; overflow: hidden; }
html[data-theme] .main-sidebar .brand-link.hms-brand .brand-image { float: none; margin: 0 0 0 4px; flex: 0 0 auto; }

/* section headings ("Patient care", "Finance"...) */
html[data-theme] .nav-sidebar .nav-header {
    color: var(--hms-side-muted) !important; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 18px 12px 6px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* links */
html[data-theme] .nav-sidebar .nav-item > .nav-link {
    color: var(--hms-side-text) !important;
    border-radius: 10px !important;
    padding: 9px 12px !important;
    margin: 1px 0;
    font-size: var(--hms-fs) !important;
    font-weight: 500;
    transform: none !important;
    transition: background var(--hms-speed), color var(--hms-speed);
}
html[data-theme] .nav-sidebar .nav-link .nav-icon { color: var(--hms-side-muted); width: 1.4rem; font-size: 1rem; transition: color var(--hms-speed); }
html[data-theme] .nav-sidebar .nav-link > p > .right { transition: transform var(--hms-speed) ease; }
html[data-theme] .nav-sidebar .nav-item > .nav-link:hover { background: var(--hms-side-hover) !important; color: #fff !important; }
html[data-theme] .nav-sidebar .nav-item > .nav-link:hover .nav-icon { color: #fff; }
html[data-theme] .nav-sidebar .nav-item > .nav-link:focus-visible { outline: 2px solid var(--hms-side-active); outline-offset: -2px; }

/* an expanded group: quietly lifted, no accent */
html[data-theme] .nav-sidebar > .nav-item.menu-open > .nav-link { background: rgba(255, 255, 255, .04) !important; color: #fff !important; box-shadow: none !important; }
html[data-theme] .nav-sidebar > .nav-item.menu-open > .nav-link .nav-icon { color: #fff; }

/* the page you are on (a top-level link, or the group that holds it) */
html[data-theme] .nav-sidebar > .nav-item > .nav-link.active,
html[data-theme] .nav-sidebar > .nav-item > .nav-link.hms-parent-active {
    background: color-mix(in srgb, var(--hms-side-active) 16%, transparent) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--hms-side-active) !important;
}
html[data-theme] .nav-sidebar .nav-link.active .nav-icon,
html[data-theme] .nav-sidebar .nav-link.hms-parent-active .nav-icon { color: var(--hms-side-active) !important; }

/* sub-menus: a thin guide line and small dots instead of big circles */
html[data-theme] .nav-sidebar .nav-treeview { padding-left: 0; margin: 2px 0 6px 22px; border-left: 1px solid rgba(255, 255, 255, .08); }
html[data-theme] .nav-sidebar .nav-treeview > .nav-item > .nav-link { position: relative; font-size: var(--hms-fs-sm) !important; padding: 7px 10px !important; margin-left: 6px; color: var(--hms-side-text) !important; }
html[data-theme] .nav-sidebar .nav-treeview .nav-icon.fa-circle { font-size: 6px !important; width: 1rem; vertical-align: middle; }
html[data-theme] .nav-sidebar .nav-treeview > .nav-item > .nav-link.active { background: var(--hms-side-hover) !important; box-shadow: none !important; color: #fff !important; font-weight: 600; }
html[data-theme] .nav-sidebar .nav-treeview > .nav-item > .nav-link.active::before {
    content: ""; position: absolute; left: -7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--hms-side-active);
}
html[data-theme] .nav-sidebar .badge { font-size: 10px; }
html[data-theme] .sidebar { padding-bottom: 24px; }

/* collapsed "mini" sidebar (desktop): headings become thin dividers */
@media (min-width: 992px) {
    html[data-theme] .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-header {
        display: block !important; height: 1px; padding: 0 !important; margin: 10px 8px; font-size: 0; background: rgba(255, 255, 255, .08);
    }
    html[data-theme] .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview { margin-left: 0; border-left: 0; }
    html[data-theme] .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview > .nav-item > .nav-link { margin-left: 0; }
}

/* phones and tablets: off-canvas menu over a dimmed page */
@media (max-width: 991.98px) {
    html[data-theme] .main-sidebar { box-shadow: var(--hms-shadow-lg, 0 20px 50px rgba(0, 0, 0, .35)) !important; }
    html[data-theme] #sidebar-overlay { background: rgba(6, 14, 22, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
    html[data-theme] .nav-sidebar .nav-item > .nav-link { padding: 11px 12px !important; }
}

/* ---------- 5. Page header + breadcrumbs ----------------------------------- */
html[data-theme] .content-header { padding: 20px var(--hms-s4) 12px !important; }
html[data-theme] .content-header h1, html[data-theme] .content-header .m-0 {
    font-size: var(--hms-fs-xl) !important; font-weight: 800 !important; color: var(--hms-text) !important;
}
/* two header styles exist across modules (plain, and "bg-white shadow-sm display-4"); render both the same */
html[data-theme] .content-header { background: transparent !important; box-shadow: none !important; margin-bottom: 0 !important; }
html[data-theme] .content-header h1 { display: flex; align-items: center; gap: 12px; line-height: 1.25 !important; margin: 0 0 4px !important; letter-spacing: -.01em; }
html[data-theme] .content-header h1 > i {
    flex: 0 0 auto; width: 38px; height: 38px; margin: 0 !important; border-radius: 10px; display: inline-grid; place-items: center;
    font-size: 17px !important; background: var(--hms-primary-soft); color: var(--hms-primary) !important;
}
html[data-theme] .content-header .row { align-items: center; row-gap: 6px; }
html[data-theme] .content-header .breadcrumb.float-sm-right { justify-content: flex-end; }
@media (max-width: 575.98px) {
    html[data-theme] .content-header .breadcrumb.float-sm-right { justify-content: flex-start; float: none !important; }
}
html[data-theme] .breadcrumb { background: transparent !important; padding: 0 !important; margin: 0; font-size: var(--hms-fs-sm); }
html[data-theme] .breadcrumb-item, html[data-theme] .breadcrumb-item a { color: var(--hms-muted) !important; }
html[data-theme] .breadcrumb-item.active { color: var(--hms-text-2) !important; font-weight: 600; }
html[data-theme] .breadcrumb-item + .breadcrumb-item::before { color: var(--hms-placeholder) !important; }

/* Demo banner */
.demo-mode-banner {
    background: linear-gradient(90deg, var(--hms-accent), color-mix(in srgb, var(--hms-accent) 70%, #7a1030));
    color: #fff; font-size: var(--hms-fs-sm); font-weight: 600; text-align: center; padding: 8px 16px; letter-spacing: .01em;
}
html[data-theme="dark"] .demo-mode-banner { color: #2a0610; }

/* ---------- 6. Cards (+ legacy Bootstrap 3 panels) ------------------------- */
html[data-theme] .card, html[data-theme] .panel {
    background: var(--hms-surface) !important;
    color: var(--hms-text) !important;
    border: 1px solid var(--hms-border) !important;
    border-radius: var(--hms-r) !important;
    box-shadow: var(--hms-shadow-sm) !important;
    backdrop-filter: none !important;
    margin-bottom: var(--hms-s5);
}
html[data-theme] .card:hover { box-shadow: var(--hms-shadow-sm) !important; }
html[data-theme] .card-header, html[data-theme] .panel-heading {
    background: transparent !important;
    color: var(--hms-text) !important;
    border-bottom: 1px solid var(--hms-divider) !important;
    padding: 14px 18px !important;
    border-radius: var(--hms-r) var(--hms-r) 0 0 !important;
}
html[data-theme] .card-title, html[data-theme] .panel-title, html[data-theme] .card-header h3, html[data-theme] .card-header h4 {
    font-family: var(--hms-font-head) !important; font-size: var(--hms-fs-md) !important; font-weight: 700 !important; color: var(--hms-text) !important; margin: 0;
}
html[data-theme] .card-body, html[data-theme] .panel-body { padding: 18px !important; color: var(--hms-text); }
html[data-theme] .card-footer, html[data-theme] .panel-footer {
    background: var(--hms-surface-2) !important; border-top: 1px solid var(--hms-divider) !important;
    border-radius: 0 0 var(--hms-r) var(--hms-r) !important;
}
/* AdminLTE coloured card outlines -> a slim accent on top instead of a heavy frame */
html[data-theme] .card-primary.card-outline, html[data-theme] .card-info.card-outline,
html[data-theme] .card-success.card-outline, html[data-theme] .card-danger.card-outline,
html[data-theme] .card-warning.card-outline { border-top: 3px solid var(--hms-primary) !important; }
html[data-theme] .card-primary:not(.card-outline) > .card-header,
html[data-theme] .card-info:not(.card-outline) > .card-header,
html[data-theme] .card-success:not(.card-outline) > .card-header {
    background: var(--hms-primary-soft) !important; color: var(--hms-text) !important;
}
html[data-theme] .card-primary:not(.card-outline) > .card-header *,
html[data-theme] .card-info:not(.card-outline) > .card-header * { color: var(--hms-text) !important; }

/* ---------- 7. KPI tiles (AdminLTE small-box / info-box) ------------------- */
html[data-theme] .small-box {
    background: var(--hms-surface) !important;
    color: var(--hms-text) !important;
    border: 1px solid var(--hms-border);
    border-radius: var(--hms-r-lg) !important;
    box-shadow: var(--hms-shadow-sm) !important;
    overflow: hidden;
    transition: transform var(--hms-speed), box-shadow var(--hms-speed), border-color var(--hms-speed);
}
html[data-theme] .small-box:hover { transform: translateY(-2px); box-shadow: var(--hms-shadow) !important; border-color: var(--hms-border-strong); }
html[data-theme] .small-box .inner { padding: 18px 20px !important; }
html[data-theme] .small-box h3 { font-size: 1.9rem !important; font-weight: 800 !important; color: var(--hms-text) !important; margin: 0 0 4px; }
html[data-theme] .small-box p { color: var(--hms-muted) !important; font-weight: 600; font-size: var(--hms-fs-sm); margin: 0; }
html[data-theme] .small-box .icon > i, html[data-theme] .small-box .icon > .fa, html[data-theme] .small-box .icon > .fas {
    color: var(--hms-primary) !important; opacity: .18; font-size: 64px !important; top: 16px !important;
}
html[data-theme] .small-box .small-box-footer {
    background: var(--hms-surface-2) !important; color: var(--hms-primary) !important; font-weight: 600;
    border-top: 1px solid var(--hms-divider); padding: 8px 0;
}
html[data-theme] .small-box .small-box-footer:hover { background: var(--hms-primary-soft) !important; }
/* keep the meaning of the vendor colours as an accent stripe */
html[data-theme] .small-box.bg-info    { box-shadow: inset 4px 0 0 var(--hms-info), var(--hms-shadow-sm) !important; }
html[data-theme] .small-box.bg-success { box-shadow: inset 4px 0 0 var(--hms-success), var(--hms-shadow-sm) !important; }
html[data-theme] .small-box.bg-warning { box-shadow: inset 4px 0 0 var(--hms-warning), var(--hms-shadow-sm) !important; }
html[data-theme] .small-box.bg-danger  { box-shadow: inset 4px 0 0 var(--hms-danger), var(--hms-shadow-sm) !important; }
html[data-theme] .small-box.bg-primary { box-shadow: inset 4px 0 0 var(--hms-primary), var(--hms-shadow-sm) !important; }
html[data-theme] .small-box.bg-info .icon > i    { color: var(--hms-info) !important; }
html[data-theme] .small-box.bg-success .icon > i { color: var(--hms-success) !important; }
html[data-theme] .small-box.bg-warning .icon > i { color: var(--hms-warning) !important; }
html[data-theme] .small-box.bg-danger .icon > i  { color: var(--hms-danger) !important; }

html[data-theme] .info-box {
    background: var(--hms-surface) !important; color: var(--hms-text) !important;
    border: 1px solid var(--hms-border); border-radius: var(--hms-r-lg) !important; box-shadow: var(--hms-shadow-sm) !important;
    padding: 14px !important; min-height: 0;
}
html[data-theme] .info-box .info-box-icon {
    border-radius: var(--hms-r) !important; width: 52px; height: 52px; font-size: 1.35rem;
    background: var(--hms-primary-soft) !important; color: var(--hms-primary) !important; box-shadow: none !important;
}
html[data-theme] .info-box .info-box-icon.bg-success, html[data-theme] .info-box .info-box-icon.bg-green { background: var(--hms-success-soft) !important; color: var(--hms-success) !important; }
html[data-theme] .info-box .info-box-icon.bg-warning, html[data-theme] .info-box .info-box-icon.bg-yellow { background: var(--hms-warning-soft) !important; color: var(--hms-warning) !important; }
html[data-theme] .info-box .info-box-icon.bg-danger, html[data-theme] .info-box .info-box-icon.bg-red { background: var(--hms-danger-soft) !important; color: var(--hms-danger) !important; }
html[data-theme] .info-box .info-box-icon.bg-info, html[data-theme] .info-box .info-box-icon.bg-aqua { background: var(--hms-info-soft) !important; color: var(--hms-info) !important; }
html[data-theme] .info-box .info-box-text { color: var(--hms-muted) !important; font-size: var(--hms-fs-sm); font-weight: 600; text-transform: none; }
html[data-theme] .info-box .info-box-number { color: var(--hms-text) !important; font-size: 1.35rem; font-weight: 800; }

/* ---------- 8. Buttons ----------------------------------------------------- */
html[data-theme] .btn {
    border-radius: var(--hms-r-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    font-size: var(--hms-fs-sm) !important;
    padding: 7px 14px !important;
    transform: none !important;
    box-shadow: none !important;
    transition: background var(--hms-speed), color var(--hms-speed), border-color var(--hms-speed), box-shadow var(--hms-speed);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    line-height: 1.35;
}
html[data-theme] .btn:focus-visible { box-shadow: var(--hms-focus) !important; }
html[data-theme] .btn-sm, html[data-theme] .btn-group-sm > .btn, html[data-theme] table .btn { padding: 4px 10px !important; font-size: var(--hms-fs-xs) !important; }
html[data-theme] .btn-lg { padding: 11px 20px !important; font-size: var(--hms-fs-md) !important; }
html[data-theme] .btn-xs { padding: 2px 8px !important; font-size: 11px !important; }
html[data-theme] .btn:disabled, html[data-theme] .btn.disabled { opacity: .5 !important; cursor: not-allowed; }

/* solid */
html[data-theme] .btn-primary { background: var(--hms-primary) !important; border: 1px solid var(--hms-primary) !important; color: var(--hms-primary-contrast) !important; }
html[data-theme] .btn-primary:hover { background: var(--hms-primary-hover) !important; border-color: var(--hms-primary-hover) !important; }
html[data-theme] .btn-success { background: var(--hms-success) !important; border: 1px solid var(--hms-success) !important; color: #fff !important; }
html[data-theme] .btn-danger { background: var(--hms-danger) !important; border: 1px solid var(--hms-danger) !important; color: #fff !important; }
html[data-theme="dark"] .btn-success, html[data-theme="dark"] .btn-danger { color: var(--hms-inverse) !important; }
html[data-theme] .btn-success:hover, html[data-theme] .btn-danger:hover { filter: brightness(1.08); }
/* tonal: the app uses btn-info ~440 times for view/edit - make it calm */
html[data-theme] .btn-info { background: var(--hms-info-soft) !important; border: 1px solid transparent !important; color: var(--hms-info) !important; }
html[data-theme] .btn-info:hover { background: var(--hms-info) !important; color: #fff !important; }
html[data-theme="dark"] .btn-info:hover { color: var(--hms-inverse) !important; }
html[data-theme] .btn-warning { background: var(--hms-warning-soft) !important; border: 1px solid transparent !important; color: var(--hms-warning) !important; }
html[data-theme] .btn-warning:hover { background: var(--hms-warning) !important; color: #fff !important; }
/* neutral */
html[data-theme] .btn-secondary, html[data-theme] .btn-default, html[data-theme] .btn-light {
    background: var(--hms-surface) !important; border: 1px solid var(--hms-border-strong) !important; color: var(--hms-text-2) !important;
}
html[data-theme] .btn-secondary:hover, html[data-theme] .btn-default:hover, html[data-theme] .btn-light:hover { background: var(--hms-hover) !important; color: var(--hms-text) !important; }
html[data-theme] .btn-dark { background: var(--hms-text) !important; border: 1px solid var(--hms-text) !important; color: var(--hms-inverse) !important; }
html[data-theme] .btn-link { background: transparent !important; border: 0 !important; color: var(--hms-primary) !important; }
/* outline */
html[data-theme] .btn-outline-primary { background: transparent !important; border: 1px solid var(--hms-primary) !important; color: var(--hms-primary) !important; }
html[data-theme] .btn-outline-primary:hover { background: var(--hms-primary-soft) !important; }
html[data-theme] .btn-outline-danger { background: transparent !important; border: 1px solid var(--hms-danger) !important; color: var(--hms-danger) !important; }
html[data-theme] .btn-outline-secondary, html[data-theme] .btn-outline-info, html[data-theme] .btn-outline-success {
    background: transparent !important; border: 1px solid var(--hms-border-strong) !important; color: var(--hms-text-2) !important;
}
/* DataTables export buttons */
html[data-theme] .dt-buttons .btn, html[data-theme] .buttons-html5 {
    background: var(--hms-surface) !important; border: 1px solid var(--hms-border-strong) !important; color: var(--hms-text-2) !important;
}
html[data-theme] .dt-buttons .btn:hover, html[data-theme] .buttons-html5:hover { background: var(--hms-hover) !important; color: var(--hms-text) !important; }

/* ---------- 9. Forms ------------------------------------------------------- */
html[data-theme] .form-control, html[data-theme] .custom-select, html[data-theme] .form-select,
html[data-theme] input[type="text"], html[data-theme] input[type="email"], html[data-theme] input[type="number"],
html[data-theme] input[type="password"], html[data-theme] input[type="search"], html[data-theme] input[type="tel"],
html[data-theme] input[type="date"], html[data-theme] input[type="time"], html[data-theme] input[type="datetime-local"],
html[data-theme] input[type="url"], html[data-theme] textarea, html[data-theme] select {
    background-color: var(--hms-input) !important;
    color: var(--hms-text) !important;
    border: 1px solid var(--hms-border-strong) !important;
    border-radius: var(--hms-r-sm) !important;
    font-size: var(--hms-fs) !important;
    box-shadow: none !important;
    transition: border-color var(--hms-speed), box-shadow var(--hms-speed);
}
html[data-theme] .form-control:not(textarea) { min-height: 38px; }
html[data-theme] .form-control:focus, html[data-theme] .custom-select:focus, html[data-theme] .form-select:focus,
html[data-theme] textarea:focus, html[data-theme] select:focus, html[data-theme] input:focus {
    border-color: var(--hms-primary) !important; box-shadow: var(--hms-focus) !important; outline: none;
}
html[data-theme] .form-control::placeholder, html[data-theme] input::placeholder, html[data-theme] textarea::placeholder { color: var(--hms-placeholder) !important; opacity: 1; }
html[data-theme] .form-control:disabled, html[data-theme] .form-control[readonly] { background-color: var(--hms-surface-2) !important; color: var(--hms-muted) !important; }
html[data-theme] .is-invalid, html[data-theme] .has-error .form-control { border-color: var(--hms-danger) !important; }
html[data-theme] .invalid-feedback, html[data-theme] .text-danger { color: var(--hms-danger) !important; }
html[data-theme] .input-group-text, html[data-theme] .input-group-addon {
    background: var(--hms-surface-2) !important; color: var(--hms-muted) !important; border: 1px solid var(--hms-border-strong) !important;
}
html[data-theme] .form-group { margin-bottom: 14px; }
html[data-theme] .form-group label .required, html[data-theme] label .text-danger { color: var(--hms-danger) !important; }
html[data-theme] .custom-control-label::before { background: var(--hms-input) !important; border-color: var(--hms-border-strong) !important; }
html[data-theme] .custom-control-input:checked ~ .custom-control-label::before,
html[data-theme] .form-check-input:checked { background-color: var(--hms-primary) !important; border-color: var(--hms-primary) !important; }
html[data-theme] .form-check-input { background-color: var(--hms-input); border-color: var(--hms-border-strong); }
html[data-theme] input[type="checkbox"], html[data-theme] input[type="radio"] { accent-color: var(--hms-primary); }
html[data-theme] input[type="file"].form-control { padding: 6px; }
html[data-theme] input[type="file"]::file-selector-button {
    border: 0; border-radius: 6px; background: var(--hms-primary-soft); color: var(--hms-primary); font-weight: 600; padding: 4px 10px; margin-right: 10px; cursor: pointer;
}
html[data-theme] .icheck-primary > input:first-child:checked + label::before { background: var(--hms-primary) !important; border-color: var(--hms-primary) !important; }

/* ---------- 10. Tables + DataTables --------------------------------------- */
html[data-theme] .table {
    color: var(--hms-text) !important;
    background: transparent !important;
    border-collapse: separate !important; border-spacing: 0;
    box-shadow: none !important; border-radius: 0 !important; overflow: visible;
    font-size: var(--hms-fs) !important;
    margin-bottom: 0;
}
html[data-theme] .table thead th, html[data-theme] .table th {
    background: var(--hms-surface-2) !important;
    color: var(--hms-muted) !important;
    font-size: 11.5px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em;
    border: 0 !important; border-bottom: 1px solid var(--hms-border) !important;
    padding: 11px 14px !important; white-space: nowrap; vertical-align: middle;
    position: static;
}
html[data-theme] .table td {
    border: 0 !important; border-bottom: 1px solid var(--hms-divider) !important;
    padding: 11px 14px !important; vertical-align: middle; color: var(--hms-text) !important; background: transparent !important;
}
html[data-theme] .table tbody tr { background: transparent !important; transition: background var(--hms-speed); }
html[data-theme] .table-striped tbody tr:nth-of-type(odd) { background: color-mix(in srgb, var(--hms-surface-2) 70%, transparent) !important; }
html[data-theme] .table-hover tbody tr:hover, html[data-theme] .table tbody tr:hover { background: var(--hms-hover) !important; }
html[data-theme] .table tbody tr.selected, html[data-theme] .table tbody tr.active { background: var(--hms-primary-soft) !important; }
html[data-theme] .table-bordered, html[data-theme] .table-bordered td, html[data-theme] .table-bordered th { border-color: var(--hms-divider) !important; }
html[data-theme] .table tfoot th, html[data-theme] .table tfoot td { background: var(--hms-surface-2) !important; color: var(--hms-text) !important; font-weight: 700; }
html[data-theme] .card > .table-responsive, html[data-theme] .card-body > .table-responsive { border-radius: var(--hms-r-sm); }
html[data-theme] .dataTables_wrapper { color: var(--hms-text-2); font-size: var(--hms-fs-sm); }
html[data-theme] .dataTables_wrapper .dataTables_filter input, html[data-theme] .dataTables_wrapper .dataTables_length select {
    min-height: 34px; border-radius: var(--hms-r-pill) !important; padding: 4px 12px !important; margin-left: 6px;
}
html[data-theme] .dataTables_wrapper .dataTables_filter input { padding-left: 32px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238698AD' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='m12.5 12.5-3-3'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 12px center !important; }
html[data-theme] .dataTables_wrapper .dataTables_info { color: var(--hms-muted) !important; padding-top: 14px !important; }
html[data-theme] table.dataTable thead .sorting::before, html[data-theme] table.dataTable thead .sorting::after,
html[data-theme] table.dataTable thead .sorting_asc::after, html[data-theme] table.dataTable thead .sorting_desc::after { color: var(--hms-muted); opacity: .45; }
html[data-theme] table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
html[data-theme] table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before { background: var(--hms-primary) !important; box-shadow: none !important; border: 0 !important; }
html[data-theme] table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--hms-divider) !important; }
html[data-theme] .dataTables_processing { background: var(--hms-elevated) !important; color: var(--hms-text) !important; border: 1px solid var(--hms-border) !important; border-radius: var(--hms-r) !important; box-shadow: var(--hms-shadow) !important; }
html[data-theme] td.dataTables_empty { color: var(--hms-muted) !important; padding: 36px 14px !important; text-align: center; }

/* ---------- 11. Badges, labels, alerts ------------------------------------ */
html[data-theme] .badge, html[data-theme] .label {
    border-radius: var(--hms-r-pill) !important; font-weight: 600 !important; font-size: 11.5px !important;
    padding: 4px 9px !important; letter-spacing: .01em; line-height: 1.2;
}
html[data-theme] .badge-primary, html[data-theme] .bg-primary.badge, html[data-theme] .label-primary { background: var(--hms-primary-soft) !important; color: var(--hms-primary) !important; }
html[data-theme] .badge-success, html[data-theme] .label-success, html[data-theme] .bg-success.badge { background: var(--hms-success-soft) !important; color: var(--hms-success) !important; }
html[data-theme] .badge-warning, html[data-theme] .label-warning, html[data-theme] .bg-warning.badge { background: var(--hms-warning-soft) !important; color: var(--hms-warning) !important; }
html[data-theme] .badge-danger, html[data-theme] .label-danger, html[data-theme] .bg-danger.badge { background: var(--hms-danger-soft) !important; color: var(--hms-danger) !important; }
html[data-theme] .badge-info, html[data-theme] .label-info, html[data-theme] .bg-info.badge { background: var(--hms-info-soft) !important; color: var(--hms-info) !important; }
html[data-theme] .badge-secondary, html[data-theme] .badge-light, html[data-theme] .label-default { background: var(--hms-surface-2) !important; color: var(--hms-text-2) !important; border: 1px solid var(--hms-border); }
html[data-theme] .badge-dark { background: var(--hms-text) !important; color: var(--hms-inverse) !important; }
html[data-theme] .alert { border-radius: var(--hms-r) !important; border: 1px solid transparent !important; font-weight: 500; padding: 12px 16px; }
html[data-theme] .alert-success { background: var(--hms-success-soft) !important; color: var(--hms-success) !important; border-color: color-mix(in srgb, var(--hms-success) 30%, transparent) !important; }
html[data-theme] .alert-danger { background: var(--hms-danger-soft) !important; color: var(--hms-danger) !important; border-color: color-mix(in srgb, var(--hms-danger) 30%, transparent) !important; }
html[data-theme] .alert-warning { background: var(--hms-warning-soft) !important; color: var(--hms-warning) !important; border-color: color-mix(in srgb, var(--hms-warning) 30%, transparent) !important; }
html[data-theme] .alert-info, html[data-theme] .alert-primary { background: var(--hms-info-soft) !important; color: var(--hms-info) !important; border-color: color-mix(in srgb, var(--hms-info) 30%, transparent) !important; }
html[data-theme] .alert .close { color: inherit !important; opacity: .7; text-shadow: none; }

/* Coloured utility backgrounds used directly in views keep their meaning, toned down */
html[data-theme] .bg-white { background: var(--hms-surface) !important; color: var(--hms-text) !important; }
html[data-theme] .bg-light { background: var(--hms-surface-2) !important; color: var(--hms-text) !important; }
html[data-theme] .text-dark { color: var(--hms-text) !important; }
html[data-theme] .text-primary { color: var(--hms-primary) !important; }
html[data-theme] .text-success { color: var(--hms-success) !important; }
html[data-theme] .text-warning { color: var(--hms-warning) !important; }
html[data-theme] .text-info { color: var(--hms-info) !important; }
html[data-theme] .border, html[data-theme] .border-top, html[data-theme] .border-bottom { border-color: var(--hms-border) !important; }

/* ---------- 12. Modals, dropdowns, popovers ------------------------------- */
html[data-theme] .modal-backdrop.show { background: var(--hms-overlay); opacity: 1 !important; }
html[data-theme] .modal-content {
    background: var(--hms-elevated) !important; color: var(--hms-text) !important;
    border: 1px solid var(--hms-border) !important; border-radius: var(--hms-r-lg) !important; box-shadow: var(--hms-shadow-lg) !important;
}
html[data-theme] .modal-header { border-bottom: 1px solid var(--hms-divider) !important; padding: 16px 20px !important; background: transparent !important; }
html[data-theme] .modal-header .modal-title { font-family: var(--hms-font-head); font-weight: 700; font-size: var(--hms-fs-lg); color: var(--hms-text) !important; }
html[data-theme] .modal-header .close, html[data-theme] .modal-header .btn-close { color: var(--hms-muted) !important; opacity: 1; text-shadow: none; }
html[data-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
html[data-theme] .modal-body { padding: 20px !important; }
html[data-theme] .modal-footer { border-top: 1px solid var(--hms-divider) !important; padding: 12px 20px !important; background: var(--hms-surface-2); border-radius: 0 0 var(--hms-r-lg) var(--hms-r-lg); }
html[data-theme] .modal.fade .modal-dialog { transition: transform .18s ease-out, opacity .18s; transform: translateY(8px); }
html[data-theme] .modal.show .modal-dialog { transform: none; }

html[data-theme] .dropdown-menu {
    background: var(--hms-elevated) !important; color: var(--hms-text) !important;
    border: 1px solid var(--hms-border) !important; border-radius: var(--hms-r) !important; box-shadow: var(--hms-shadow) !important; padding: 6px !important;
}
html[data-theme] .dropdown-item { color: var(--hms-text-2) !important; border-radius: 6px; padding: 7px 12px; font-size: var(--hms-fs); }
html[data-theme] .dropdown-item:hover, html[data-theme] .dropdown-item:focus { background: var(--hms-hover) !important; color: var(--hms-text) !important; }
html[data-theme] .dropdown-item.active, html[data-theme] .dropdown-item:active { background: var(--hms-primary-soft) !important; color: var(--hms-primary) !important; }
html[data-theme] .dropdown-divider { border-color: var(--hms-divider) !important; }
html[data-theme] .dropdown-header { color: var(--hms-muted) !important; }
html[data-theme] .popover { background: var(--hms-elevated) !important; border-color: var(--hms-border) !important; }
html[data-theme] .popover-header { background: var(--hms-surface-2) !important; color: var(--hms-text) !important; border-color: var(--hms-divider) !important; }
html[data-theme] .popover-body { color: var(--hms-text) !important; }
html[data-theme] .tooltip-inner { background: var(--hms-text) !important; color: var(--hms-inverse) !important; border-radius: 6px; font-weight: 500; }

/* ---------- 13. Tabs, pagination, lists, progress ------------------------- */
html[data-theme] .nav-tabs { border-bottom: 1px solid var(--hms-border) !important; gap: 4px; }
html[data-theme] .nav-tabs .nav-link { border: 0 !important; border-bottom: 2px solid transparent !important; color: var(--hms-muted) !important; font-weight: 600; background: transparent !important; padding: 10px 14px; border-radius: 0 !important; }
html[data-theme] .nav-tabs .nav-link:hover { color: var(--hms-text) !important; }
html[data-theme] .nav-tabs .nav-link.active, html[data-theme] .nav-tabs .nav-item.show .nav-link { color: var(--hms-primary) !important; border-bottom-color: var(--hms-primary) !important; }
html[data-theme] .nav-pills:not(.nav-sidebar) .nav-link { border-radius: var(--hms-r-pill); color: var(--hms-text-2); font-weight: 600; }
html[data-theme] .nav-pills:not(.nav-sidebar) .nav-link.active { background: var(--hms-primary) !important; color: var(--hms-primary-contrast) !important; }
html[data-theme] .tab-content { color: var(--hms-text); }

html[data-theme] .pagination { gap: 4px; }
html[data-theme] .page-link, html[data-theme] .paginate_button .page-link {
    background: var(--hms-surface) !important; color: var(--hms-text-2) !important;
    border: 1px solid var(--hms-border) !important; border-radius: var(--hms-r-sm) !important; min-width: 34px; text-align: center; font-weight: 600;
}
html[data-theme] .page-link:hover { background: var(--hms-hover) !important; color: var(--hms-text) !important; }
html[data-theme] .page-item.active .page-link { background: var(--hms-primary) !important; border-color: var(--hms-primary) !important; color: var(--hms-primary-contrast) !important; }
html[data-theme] .page-item.disabled .page-link { background: var(--hms-surface-2) !important; color: var(--hms-placeholder) !important; }

html[data-theme] .list-group-item { background: var(--hms-surface) !important; color: var(--hms-text) !important; border-color: var(--hms-divider) !important; }
html[data-theme] .list-group-item.active { background: var(--hms-primary-soft) !important; color: var(--hms-primary) !important; border-color: var(--hms-divider) !important; }
html[data-theme] .list-group-item-action:hover { background: var(--hms-hover) !important; }
html[data-theme] .progress { background: var(--hms-surface-2) !important; border-radius: var(--hms-r-pill) !important; height: 8px; box-shadow: none !important; }
html[data-theme] .progress-bar { background: var(--hms-primary) !important; border-radius: var(--hms-r-pill); }
html[data-theme] .progress-bar.bg-success { background: var(--hms-success) !important; }
html[data-theme] .progress-bar.bg-warning { background: var(--hms-warning) !important; }
html[data-theme] .progress-bar.bg-danger { background: var(--hms-danger) !important; }

/* ---------- 14. Select2 ---------------------------------------------------- */
html[data-theme] .select2-container--default .select2-selection--single,
html[data-theme] .select2-container--default .select2-selection--multiple,
html[data-theme] .select2-container--bootstrap4 .select2-selection {
    background: var(--hms-input) !important; border: 1px solid var(--hms-border-strong) !important; border-radius: var(--hms-r-sm) !important; min-height: 38px;
}
html[data-theme] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme] .select2-container--bootstrap4 .select2-selection__rendered { color: var(--hms-text) !important; line-height: 36px !important; }
html[data-theme] .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }
html[data-theme] .select2-container--default .select2-selection__placeholder { color: var(--hms-placeholder) !important; }
html[data-theme] .select2-container--default.select2-container--focus .select2-selection--multiple,
html[data-theme] .select2-container--open .select2-selection { border-color: var(--hms-primary) !important; box-shadow: var(--hms-focus) !important; }
html[data-theme] .select2-dropdown { background: var(--hms-elevated) !important; border: 1px solid var(--hms-border) !important; border-radius: var(--hms-r-sm) !important; box-shadow: var(--hms-shadow) !important; color: var(--hms-text) !important; }
html[data-theme] .select2-search__field { background: var(--hms-input) !important; color: var(--hms-text) !important; border: 1px solid var(--hms-border-strong) !important; border-radius: 6px; }
html[data-theme] .select2-results__option { color: var(--hms-text-2) !important; }
html[data-theme] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme] .select2-container--default .select2-results__option--highlighted { background: var(--hms-primary) !important; color: var(--hms-primary-contrast) !important; }
html[data-theme] .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--hms-primary-soft) !important; color: var(--hms-primary) !important; }
html[data-theme] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--hms-primary-soft) !important; color: var(--hms-primary) !important; border: 0 !important; border-radius: var(--hms-r-pill) !important; padding: 2px 10px !important;
}
html[data-theme] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--hms-primary) !important; }

/* ---------- 15. Date & time pickers --------------------------------------- */
html[data-theme] .datepicker.dropdown-menu, html[data-theme] .daterangepicker, html[data-theme] .bootstrap-datetimepicker-widget,
html[data-theme] .datetimepicker, html[data-theme] .bootstrap-timepicker-widget {
    background: var(--hms-elevated) !important; color: var(--hms-text) !important;
    border: 1px solid var(--hms-border) !important; border-radius: var(--hms-r) !important; box-shadow: var(--hms-shadow) !important;
}
html[data-theme] .datepicker table tr td, html[data-theme] .datepicker table tr th,
html[data-theme] .daterangepicker .calendar-table, html[data-theme] .daterangepicker td, html[data-theme] .daterangepicker th,
html[data-theme] .bootstrap-datetimepicker-widget td, html[data-theme] .bootstrap-datetimepicker-widget th,
html[data-theme] .datetimepicker td, html[data-theme] .datetimepicker th {
    background: transparent !important; color: var(--hms-text) !important; border-color: transparent !important; border-radius: 6px;
}
html[data-theme] .daterangepicker .calendar-table { border: 0 !important; }
html[data-theme] .datepicker table tr td.day:hover, html[data-theme] .daterangepicker td.available:hover,
html[data-theme] .bootstrap-datetimepicker-widget td.day:hover, html[data-theme] .datetimepicker td.day:hover,
html[data-theme] .datepicker .prev:hover, html[data-theme] .datepicker .next:hover, html[data-theme] .datepicker .datepicker-switch:hover { background: var(--hms-hover) !important; }
html[data-theme] .datepicker table tr td.today, html[data-theme] .bootstrap-datetimepicker-widget td.today::before { color: var(--hms-primary) !important; font-weight: 700; }
html[data-theme] .datepicker table tr td.active, html[data-theme] .datepicker table tr td.active:hover,
html[data-theme] .daterangepicker td.active, html[data-theme] .daterangepicker td.active:hover,
html[data-theme] .bootstrap-datetimepicker-widget td.active, html[data-theme] .datetimepicker td.active {
    background: var(--hms-primary) !important; color: var(--hms-primary-contrast) !important; text-shadow: none !important;
}
html[data-theme] .daterangepicker td.in-range { background: var(--hms-primary-soft) !important; color: var(--hms-text) !important; }
html[data-theme] .datepicker table tr td.old, html[data-theme] .datepicker table tr td.new, html[data-theme] .daterangepicker td.off,
html[data-theme] .datepicker table tr td.disabled, html[data-theme] .bootstrap-datetimepicker-widget td.disabled { color: var(--hms-placeholder) !important; background: transparent !important; }
html[data-theme] .daterangepicker .ranges li { color: var(--hms-text-2); border-radius: 6px; }
html[data-theme] .daterangepicker .ranges li:hover { background: var(--hms-hover) !important; }
html[data-theme] .daterangepicker .ranges li.active { background: var(--hms-primary) !important; color: var(--hms-primary-contrast) !important; }
html[data-theme] .daterangepicker .drp-buttons { border-top-color: var(--hms-divider) !important; }
html[data-theme] .daterangepicker select, html[data-theme] .daterangepicker .calendar-time select { background: var(--hms-input) !important; color: var(--hms-text) !important; }
html[data-theme] .daterangepicker::before, html[data-theme] .daterangepicker::after, html[data-theme] .datepicker-dropdown::before, html[data-theme] .datepicker-dropdown::after { display: none !important; }
html[data-theme="dark"] input::-webkit-calendar-picker-indicator { filter: invert(.8); }

/* ---------- 16. FullCalendar ---------------------------------------------- */
html[data-theme] .fc {
    --fc-border-color: var(--hms-divider);
    --fc-page-bg-color: var(--hms-surface);
    --fc-neutral-bg-color: var(--hms-surface-2);
    --fc-list-event-hover-bg-color: var(--hms-hover);
    --fc-today-bg-color: var(--hms-primary-soft);
    --fc-event-bg-color: var(--hms-primary);
    --fc-event-border-color: var(--hms-primary);
    --fc-event-text-color: var(--hms-primary-contrast);
    --fc-button-bg-color: var(--hms-surface);
    --fc-button-border-color: var(--hms-border-strong);
    --fc-button-text-color: var(--hms-text-2);
    --fc-button-hover-bg-color: var(--hms-hover);
    --fc-button-hover-border-color: var(--hms-border-strong);
    --fc-button-active-bg-color: var(--hms-primary);
    --fc-button-active-border-color: var(--hms-primary);
    color: var(--hms-text);
}
html[data-theme] .fc .fc-button { border-radius: var(--hms-r-sm) !important; font-weight: 600; text-transform: capitalize; box-shadow: none !important; }
html[data-theme] .fc .fc-button-active, html[data-theme] .fc .fc-button-primary:not(:disabled).fc-button-active { color: var(--hms-primary-contrast) !important; }
html[data-theme] .fc .fc-toolbar-title { font-family: var(--hms-font-head); font-weight: 800; font-size: var(--hms-fs-lg); color: var(--hms-text); }
html[data-theme] .fc .fc-col-header-cell-cushion, html[data-theme] .fc .fc-daygrid-day-number { color: var(--hms-text-2) !important; }
html[data-theme] .fc .fc-day-today .fc-daygrid-day-number { color: var(--hms-primary) !important; font-weight: 800; }
html[data-theme] .fc .fc-event { border-radius: 6px; padding: 1px 4px; font-weight: 600; }
html[data-theme] .fc .fc-day-other { opacity: .55; }

/* ---------- 17. Editors, uploads, notifications --------------------------- */
html[data-theme] .note-editor.note-frame { border-color: var(--hms-border-strong) !important; border-radius: var(--hms-r-sm) !important; }
html[data-theme] .note-toolbar, html[data-theme] .note-statusbar { background: var(--hms-surface-2) !important; border-color: var(--hms-divider) !important; }
html[data-theme] .note-editable { background: var(--hms-input) !important; color: var(--hms-text) !important; }
html[data-theme] .note-btn { background: var(--hms-surface) !important; color: var(--hms-text-2) !important; border-color: var(--hms-border) !important; }
html[data-theme] .dropzone { background: var(--hms-surface-2) !important; border: 2px dashed var(--hms-border-strong) !important; border-radius: var(--hms-r) !important; color: var(--hms-muted); }
html[data-theme] .ms-container .ms-list { background: var(--hms-input) !important; border-color: var(--hms-border-strong) !important; }
html[data-theme] .ms-container .ms-selectable li.ms-elem-selectable, html[data-theme] .ms-container .ms-selection li.ms-elem-selection { color: var(--hms-text-2) !important; border-bottom-color: var(--hms-divider) !important; }

html[data-theme] #toast-container > div {
    background-color: var(--hms-elevated) !important; color: var(--hms-text) !important; opacity: 1 !important;
    border: 1px solid var(--hms-border); border-left: 4px solid var(--hms-primary); border-radius: var(--hms-r) !important;
    box-shadow: var(--hms-shadow) !important; background-position: 14px center !important; padding-left: 46px !important;
}
html[data-theme] #toast-container > .toast-success { border-left-color: var(--hms-success); }
html[data-theme] #toast-container > .toast-error { border-left-color: var(--hms-danger); }
html[data-theme] #toast-container > .toast-warning { border-left-color: var(--hms-warning); }
html[data-theme] #toast-container > .toast-info { border-left-color: var(--hms-info); }
html[data-theme="light"] #toast-container > div { background-image: none !important; padding-left: 16px !important; }
html[data-theme] #toast-container .toast-title { font-weight: 700; }

html[data-theme] .swal2-popup { background: var(--hms-elevated) !important; color: var(--hms-text) !important; border-radius: var(--hms-r-lg) !important; box-shadow: var(--hms-shadow-lg); }
html[data-theme] .swal2-title { color: var(--hms-text) !important; font-family: var(--hms-font-head); }
html[data-theme] .swal2-html-container, html[data-theme] .swal2-content { color: var(--hms-text-2) !important; }
html[data-theme] .swal2-styled.swal2-confirm { background: var(--hms-primary) !important; color: var(--hms-primary-contrast) !important; border-radius: var(--hms-r-sm) !important; box-shadow: none !important; }
html[data-theme] .swal2-styled.swal2-cancel { background: var(--hms-surface-2) !important; color: var(--hms-text-2) !important; border-radius: var(--hms-r-sm) !important; }
html[data-theme] .swal2-container.swal2-backdrop-show { background: var(--hms-overlay) !important; }

/* ---------- 18. Charts (Google Charts SVG) ---------------------------------
   Google Charts paints with SVG presentation attributes, which any CSS rule
   outranks - so the charts follow the theme without touching their code. */
html[data-theme="dark"] [id*="chart" i] svg > rect:first-child,
html[data-theme="dark"] [id*="chart" i] svg g > rect[fill="#ffffff"],
html[data-theme="dark"] [class*="chart" i] svg > rect:first-child { fill: transparent !important; }
html[data-theme="dark"] [id*="chart" i] svg text, html[data-theme="dark"] [class*="chart" i] svg text { fill: var(--hms-text-2) !important; }
html[data-theme="dark"] [id*="chart" i] svg path[stroke="#cccccc"], html[data-theme="dark"] [id*="chart" i] svg rect[fill="#cccccc"],
html[data-theme="dark"] [id*="chart" i] svg rect[fill="#ebebeb"] { fill: var(--hms-divider) !important; stroke: var(--hms-divider) !important; }
html[data-theme] .google-visualization-tooltip {
    background: var(--hms-elevated) !important; border: 1px solid var(--hms-border) !important; border-radius: var(--hms-r-sm) !important;
    box-shadow: var(--hms-shadow) !important; color: var(--hms-text) !important;
}
html[data-theme] .google-visualization-tooltip * { color: var(--hms-text) !important; }

/* ---------- 18b. Dashboard: clickable KPIs --------------------------------- */
/* Analytics / staff-on-duty rows: whole row opens the matching list */
html[data-theme] .hms-kpi-row {
    color: var(--hms-text) !important; border-radius: var(--hms-r-sm); padding-right: 30px !important; position: relative;
    transition: background var(--hms-speed), padding var(--hms-speed);
}
html[data-theme] .hms-kpi-row::after {
    content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 10px; position: absolute; right: 10px; top: 50%;
    transform: translate(-4px, -50%); opacity: 0; color: var(--hms-primary); transition: opacity var(--hms-speed), transform var(--hms-speed);
}
html[data-theme] .hms-kpi-row:hover, html[data-theme] .hms-kpi-row:focus-visible { background: var(--hms-primary-soft) !important; padding-left: 10px !important; text-decoration: none; }
html[data-theme] .hms-kpi-row:hover::after, html[data-theme] .hms-kpi-row:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
html[data-theme] .hms-kpi-row .badge-pill { min-width: 38px; font-size: 12px; font-variant-numeric: tabular-nums; }

/* Today / month / year overview tiles */
html[data-theme] a.hms-kpi-tile { display: block; color: inherit !important; text-decoration: none; border-radius: var(--hms-r); }
html[data-theme] a.hms-kpi-tile .stat-card {
    position: relative; height: 100%; background: var(--hms-surface) !important; border: 1px solid var(--hms-border) !important;
    border-radius: var(--hms-r) !important; transition: transform var(--hms-speed), box-shadow var(--hms-speed), border-color var(--hms-speed);
}
html[data-theme] a.hms-kpi-tile .stat-card::after {
    content: "\f061"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 10px; position: absolute; top: 10px; right: 12px;
    color: var(--hms-primary); opacity: 0; transform: translateX(-4px); transition: opacity var(--hms-speed), transform var(--hms-speed);
}
html[data-theme] a.hms-kpi-tile:hover .stat-card, html[data-theme] a.hms-kpi-tile:focus-visible .stat-card {
    transform: translateY(-3px); border-color: var(--hms-primary) !important; box-shadow: var(--hms-shadow) !important;
}
html[data-theme] a.hms-kpi-tile:hover .stat-card::after, html[data-theme] a.hms-kpi-tile:focus-visible .stat-card::after { opacity: 1; transform: none; }
html[data-theme] a.hms-kpi-tile:focus-visible { outline: none; }
html[data-theme] a.hms-kpi-tile:focus-visible .stat-card { box-shadow: var(--hms-focus) !important; }
html[data-theme] a.hms-kpi-tile .stat-card h6 { color: var(--hms-muted) !important; }
html[data-theme] a.hms-kpi-tile .stat-card p { color: var(--hms-text) !important; font-variant-numeric: tabular-nums; }
html[data-theme] a.hms-kpi-tile .stat-card i.rounded-circle { color: #fff; width: 34px; height: 34px; display: inline-grid; place-items: center; }

/* Finance tiles at the top already link; give them the same hover */
html[data-theme] .stat-card > a { display: block; color: inherit !important; text-decoration: none; }
html[data-theme] .card.stat-card { transition: transform var(--hms-speed), box-shadow var(--hms-speed), border-color var(--hms-speed); border: 1px solid var(--hms-border) !important; }
html[data-theme] .card.stat-card:hover { transform: translateY(-3px); border-color: var(--hms-primary) !important; }
@media (prefers-reduced-motion: reduce) {
    html[data-theme] a.hms-kpi-tile:hover .stat-card, html[data-theme] .card.stat-card:hover { transform: none; }
}

/* ---------- 18c. Module pages: shared patterns (Phase 4) ------------------- */
/* Headers that views colour with bg-* / bg-gradient-* are neutral (see 6 and 12);
   keep their meaning with a thin coloured stripe, and make any text-white inside readable. */
html[data-theme] :is(.card-header, .modal-header, .panel-heading)[class*="bg-"] .text-white,
html[data-theme] :is(.card-header, .modal-header, .panel-heading).text-white :is(h1, h2, h3, h4, h5, h6, p, span:not(.badge), small, label, a:not(.btn)) { color: var(--hms-text) !important; }
html[data-theme] :is(.card-header, .modal-header, .panel-heading)[class*="bg-"] i:not(.badge i),
html[data-theme] :is(.card-header, .modal-header, .panel-heading).text-white > i { color: var(--hms-primary) !important; }
html[data-theme] :is(.card-header, .modal-header)[class*="bg-primary"], html[data-theme] :is(.card-header, .modal-header)[class*="bg-gradient-primary"] { box-shadow: inset 0 3px 0 var(--hms-primary); }
html[data-theme] :is(.card-header, .modal-header)[class*="bg-info"] { box-shadow: inset 0 3px 0 var(--hms-info); }
html[data-theme] :is(.card-header, .modal-header)[class*="bg-success"] { box-shadow: inset 0 3px 0 var(--hms-success); }
html[data-theme] :is(.card-header, .modal-header)[class*="bg-danger"] { box-shadow: inset 0 3px 0 var(--hms-danger); }
html[data-theme] :is(.card-header, .modal-header)[class*="bg-warning"] { box-shadow: inset 0 3px 0 var(--hms-warning); }
html[data-theme] .modal-header .close span { color: var(--hms-muted) !important; }

/* Large inputs (form-control-lg is used ~1,500 times): same comfortable height, calmer text */
html[data-theme] .form-control-lg, html[data-theme] .custom-select-lg, html[data-theme] .input-group-lg > .form-control {
    font-size: var(--hms-fs) !important; padding: 10px 14px !important; height: auto !important; min-height: 44px; border-radius: var(--hms-r-sm) !important;
}
html[data-theme] select.form-control-lg { padding-right: 34px !important; }
html[data-theme] textarea.form-control-lg { min-height: 96px; }

/* Big submit buttons: no heavy glow */
html[data-theme] .btn.shadow-lg, html[data-theme] .btn.shadow { box-shadow: var(--hms-shadow-sm) !important; }
html[data-theme] .btn-block.btn-lg { min-height: 46px; }

/* Form section titles ("h3 border-bottom border-primary text-uppercase") inside forms and modals */
html[data-theme] :is(.modal-body, form, .card-body) h3.border-bottom.text-uppercase,
html[data-theme] :is(.modal-body, form, .card-body) h4.border-bottom.text-uppercase {
    font-size: var(--hms-fs-sm) !important; font-weight: 800 !important; letter-spacing: .06em; color: var(--hms-text-2) !important;
    padding-bottom: 10px !important; margin: 8px 0 16px !important; display: flex; align-items: center; gap: 10px;
}
html[data-theme] :is(.modal-body, form, .card-body) :is(h3, h4).border-bottom.text-uppercase::before {
    content: ""; width: 4px; height: 16px; border-radius: 4px; background: var(--hms-primary); flex-shrink: 0;
}
html[data-theme] :is(.modal-body, form, .card-body) :is(h3, h4).border-bottom.border-danger.text-uppercase::before { background: var(--hms-danger); }
html[data-theme] :is(.modal-body, form, .card-body) :is(h3, h4).border-bottom.border-success.text-uppercase::before { background: var(--hms-success); }
html[data-theme] :is(.modal-body, form, .card-body) :is(h3, h4).border-bottom.border-info.text-uppercase::before { background: var(--hms-info); }

/* Row action buttons in tables (view / edit / delete / invoice): one compact size, even spacing */
html[data-theme] table.dataTable td .btn, html[data-theme] .table td .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; min-width: 30px;
    margin: 2px 2px 2px 0; border-radius: 8px !important; white-space: nowrap; width: auto !important;
}
html[data-theme] .table td .btn i { font-size: 12px; }
html[data-theme] .table td .btn-group > .btn { margin: 0; }

/* Long tab rows (the patient record has up to 11): scroll sideways instead of wrapping */
@media (max-width: 991.98px) {
    html[data-theme] .nav-tabs {
        flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
        margin-left: 0 !important; margin-right: 0 !important;
    }
    html[data-theme] .nav-tabs .nav-item { flex: 0 0 auto; }
    html[data-theme] .nav-tabs .nav-link { white-space: nowrap; }
}

/* ---------- 18d. Patient record (patient/medicalHistory) ------------------ */
html[data-theme] .hms-pt-strip {
    display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 2fr) minmax(220px, 1fr); gap: 18px 24px; align-items: center;
    background: var(--hms-surface); border: 1px solid var(--hms-border); border-radius: var(--hms-r-lg); box-shadow: var(--hms-shadow-sm);
    padding: 18px 22px; margin-bottom: var(--hms-s5);
}
html[data-theme] .hms-pt-strip__photo { width: 64px; height: 64px; border-radius: 18px; object-fit: cover; border: 2px solid var(--hms-surface); box-shadow: 0 0 0 2px var(--hms-primary-soft); background: var(--hms-surface-2); }
html[data-theme] .hms-pt-strip__name { font-size: 1.3rem !important; font-weight: 800 !important; margin: 0 0 6px !important; color: var(--hms-text) !important; line-height: 1.2; }
html[data-theme] .hms-pt-strip__meta { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-theme] .hms-pt-strip__meta span { font-size: 12.5px; font-weight: 600; color: var(--hms-text-2); background: var(--hms-surface-2); border: 1px solid var(--hms-border); border-radius: var(--hms-r-pill); padding: 3px 10px; }
html[data-theme] .hms-pt-strip__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }
html[data-theme] .hms-pt-strip__facts dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hms-muted); margin-bottom: 3px; }
html[data-theme] .hms-pt-strip__facts dd { margin: 0; font-weight: 600; color: var(--hms-text); overflow-wrap: anywhere; }
html[data-theme] .hms-pt-strip__blood { color: var(--hms-danger) !important; font-weight: 800 !important; }
html[data-theme] .hms-pt-allergy { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--hms-r); border: 1px solid; font-size: var(--hms-fs-sm); }
html[data-theme] .hms-pt-allergy i { font-size: 18px; margin-top: 1px; }
html[data-theme] .hms-pt-allergy b { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
html[data-theme] .hms-pt-allergy span { font-weight: 600; overflow-wrap: anywhere; }
html[data-theme] .hms-pt-allergy--alert { background: var(--hms-danger-soft); border-color: color-mix(in srgb, var(--hms-danger) 40%, transparent); color: var(--hms-danger); }
html[data-theme] .hms-pt-allergy--none { background: var(--hms-success-soft); border-color: color-mix(in srgb, var(--hms-success) 35%, transparent); color: var(--hms-success); }
html[data-theme] .hms-pt-allergy--unknown { background: var(--hms-surface-2); border-color: var(--hms-border); color: var(--hms-muted); }
html[data-theme] .hms-empty-val, html[data-theme] .hms-record .font-weight-medium:empty::before { color: var(--hms-placeholder); font-weight: 400; }
html[data-theme] .hms-record .font-weight-medium:empty::before { content: "\2014"; }

/* the record card nests card > card-body > section.card-body: drop the doubled padding */
html[data-theme] .hms-record > .card-body { padding: 0 !important; }
html[data-theme] .hms-record > .card-body > section > section.card-body { padding: 14px 18px 18px !important; }
html[data-theme] .hms-record .nav-tabs.card-header-tabs { margin: 0 0 18px !important; }

/* Basic tab: label/value pairs in a two-column grid */
html[data-theme] .hms-record .info-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
html[data-theme] .hms-record .info-group > h6 { grid-column: 1 / -1; margin: 0 !important; font-size: 11.5px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--hms-primary) !important; }
html[data-theme] .hms-record .info-group > .mb-3 { margin: 0 !important; min-width: 0; }
html[data-theme] .hms-record .info-group label { font-size: 12px !important; font-weight: 600 !important; color: var(--hms-muted) !important; }
html[data-theme] .hms-record .info-group .font-weight-medium { font-weight: 600; color: var(--hms-text); overflow-wrap: anywhere; }
html[data-theme] .hms-record #basic img.rounded-circle { width: 120px !important; height: 120px !important; }

@media (max-width: 1199.98px) {
    html[data-theme] .hms-pt-strip { grid-template-columns: auto minmax(0, 1fr); }
    html[data-theme] .hms-pt-strip__facts, html[data-theme] .hms-pt-allergy { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    html[data-theme] .hms-pt-strip { padding: 16px; gap: 14px; }
    html[data-theme] .hms-pt-strip__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-theme] .hms-record .info-group { grid-template-columns: 1fr; }
}
@media print { html[data-theme] .hms-pt-strip { box-shadow: none; border-color: #ccc; } }

/* ---------- 18e. Profile side cards (doctor details, patient/nurse details) --- */
html[data-theme] .profile-nav .text-center img.rounded-circle { width: 88px !important; height: 88px !important; object-fit: cover; margin-bottom: 10px; box-shadow: 0 0 0 3px var(--hms-primary-soft); }
html[data-theme] .profile-nav .text-center h1 { font-size: 1.15rem !important; font-weight: 800 !important; margin: 4px 0 2px !important; }
html[data-theme] .profile-nav .text-center p { color: var(--hms-muted); font-size: var(--hms-fs-sm); margin-bottom: 12px; overflow-wrap: anywhere; }
html[data-theme] .profile-nav .list-group-item { gap: 12px; font-size: 12.5px; font-weight: 600; color: var(--hms-muted) !important; padding: 11px 0 !important; align-items: flex-start !important; }
/* values were blue badges that overflowed with long emails/addresses: show them as plain text */
html[data-theme] .profile-nav .list-group-item .badge.r-activity, html[data-theme] .profile-nav .list-group-item .address_bar {
    background: transparent !important; border: 0 !important; color: var(--hms-text) !important; font-size: var(--hms-fs-sm) !important; font-weight: 600 !important;
    padding: 0 !important; white-space: normal; text-align: right; overflow-wrap: anywhere; max-width: 65%; float: none !important; margin-left: auto;
}

/* ---------- 18f. Small fixes on landing pages ------------------------------ */
/* KPI tiles whose only link is the "More info" strip: the whole tile opens it */
html[data-theme] .small-box { position: relative; }
html[data-theme] .small-box > a.small-box-footer::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
html[data-theme] .small-box:has(> a.small-box-footer) { cursor: pointer; transition: transform var(--hms-speed), box-shadow var(--hms-speed); }
html[data-theme] .small-box:has(> a.small-box-footer):hover { transform: translateY(-3px); box-shadow: var(--hms-shadow) !important; }
html[data-theme] .small-box > a.small-box-footer:focus-visible { outline: none; }
html[data-theme] .small-box:has(> a.small-box-footer:focus-visible) { box-shadow: var(--hms-focus) !important; }
@media (prefers-reduced-motion: reduce) { html[data-theme] .small-box:has(> a.small-box-footer):hover { transform: none; } }

/* Add payment: the discount % label was 8px */
html[data-theme] .percent_amount { font-size: 12px !important; }

/* ---------- 18g. Lists: status pills and stock flags (Phase 4c, hms-tables.js) --- */
.hms-pill {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; letter-spacing: .01em;
    background: var(--hms-primary-soft); color: var(--hms-primary);
}
.hms-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.hms-pill--ok     { background: var(--hms-success-soft); color: var(--hms-success); }
.hms-pill--warn   { background: var(--hms-warning-soft); color: var(--hms-warning); }
.hms-pill--bad    { background: var(--hms-danger-soft);  color: var(--hms-danger); }
.hms-pill--info   { background: var(--hms-info-soft);    color: var(--hms-info); }
.hms-pill--violet { background: rgba(109, 91, 208, .13); color: #5B49C4; }
html[data-theme="dark"] .hms-pill--violet { background: rgba(160, 145, 255, .16); color: #B7A9FF; }
td .hms-pill + .hms-pill, td .hms-pill { vertical-align: middle; }
.hms-muted { color: var(--hms-muted) !important; font-style: normal; }

/* ---------- 18h. Payers: NHIS and corporate cover (Phase 5) --------------------- */
.hms-switch-card { position: relative; display: block; margin: 0 0 12px; cursor: pointer; }
.hms-switch-card input { position: absolute; opacity: 0; }
.hms-switch-card > span { display: block; height: 100%; padding: 16px 16px 16px 56px; border-radius: 14px; border: 1.5px solid var(--hms-border, #DDE6EC); background: var(--hms-surface); color: var(--hms-text-2); font-size: 13.5px; transition: border-color .15s, box-shadow .15s; }
.hms-switch-card > span b { display: block; color: var(--hms-text); font-size: 15px; margin-bottom: 3px; }
.hms-switch-card > span b i { color: var(--hms-primary); margin-right: 4px; }
.hms-switch-card > span::before { content: ""; position: absolute; left: 16px; top: 18px; width: 28px; height: 16px; border-radius: 999px; background: var(--hms-border, #C4D2DC); transition: background .15s; }
.hms-switch-card > span::after { content: ""; position: absolute; left: 18px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s; }
.hms-switch-card input:checked + span { border-color: var(--hms-primary); box-shadow: 0 0 0 3px var(--hms-primary-soft); }
.hms-switch-card input:checked + span::before { background: var(--hms-primary); }
.hms-switch-card input:checked + span::after { transform: translateX(12px); }
.hms-switch-card input:focus-visible + span { outline: 2px solid var(--hms-primary); outline-offset: 2px; }
.hms-payers__subhead { font-size: 15px; font-weight: 800; margin: 22px 0 12px; color: var(--hms-text); }
.hms-payers__search { max-width: 360px; }
.hms-payers__tariff td { vertical-align: middle; }
.hms-claim-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.hms-claim-kpi { position: relative; display: block; padding: 14px 16px; border-radius: 14px; background: var(--hms-surface); box-shadow: var(--hms-shadow-sm); border: 1px solid var(--hms-border, #DDE6EC); color: var(--hms-text-2) !important; text-decoration: none !important; overflow: hidden; transition: transform .15s; }
.hms-claim-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c); }
.hms-claim-kpi:hover { transform: translateY(-2px); }
.hms-claim-kpi span { display: block; font-size: 12.5px; font-weight: 600; }
.hms-claim-kpi b { display: block; font-size: 1.35rem; color: var(--hms-text); margin: 2px 0; font-variant-numeric: tabular-nums; }
.hms-claim-kpi small { color: var(--hms-muted); }
.hms-claim-filter .form-group { margin-bottom: 10px; }
.hms-claim-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.hms-claim-bulk::after { display: none; }
.hms-claim-bulk__actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hms-claim-bulk__actions .form-control { width: 240px; max-width: 100%; }
.hms-claim-table td { vertical-align: middle; }
.hms-whopays { border-left: 4px solid var(--hms-primary) !important; }
.hms-whopays__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hms-whopays__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hms-whopays__who small { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--hms-muted); }
.hms-whopays__who b { display: block; font-size: 16px; color: var(--hms-text); }
.hms-whopays__meta { display: block; font-size: 12.5px; color: var(--hms-text-2); }
.hms-whopays__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--hms-primary-soft); color: var(--hms-primary); font-size: 17px; }
.hms-whopays__icon--nhis { background: var(--hms-success-soft); color: var(--hms-success); }
.hms-whopays__icon--corporate { background: var(--hms-info-soft); color: var(--hms-info); }
.hms-whopays__split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.hms-whopays__split > div { padding: 12px; border-radius: 12px; background: var(--hms-surface-2); border: 1px solid var(--hms-border, #DDE6EC); }
.hms-whopays__split small { display: block; font-size: 12px; font-weight: 600; color: var(--hms-muted); }
.hms-whopays__split b { display: block; font-size: 1.2rem; color: var(--hms-text); font-variant-numeric: tabular-nums; }
.hms-whopays__split .is-insurer { border-color: color-mix(in srgb, var(--hms-success) 40%, transparent); }
.hms-whopays__split .is-patient { border-color: color-mix(in srgb, var(--hms-primary) 40%, transparent); }
.hms-whopays__lines { margin-bottom: 10px; }
.hms-whopays__lines tfoot th { border-top: 2px solid var(--hms-border, #DDE6EC); }
.hms-whopays__bill label { font-weight: 700; font-size: 13px; }
.hms-whopays__bill .input-group { max-width: 620px; }
@media (max-width: 575px) { .hms-whopays__split { grid-template-columns: 1fr; } }
.hms-payer-choice { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hms-payer-choice label { position: relative; margin: 0; cursor: pointer; }
.hms-payer-choice input { position: absolute; opacity: 0; }
.hms-payer-choice span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--hms-border, #DDE6EC); font-weight: 700; font-size: 13.5px; color: var(--hms-text-2); background: var(--hms-surface); }
.hms-payer-choice input:checked + span { border-color: var(--hms-primary); background: var(--hms-primary-soft); color: var(--hms-primary); }
.hms-payer-choice input:focus-visible + span { outline: 2px solid var(--hms-primary); outline-offset: 2px; }
.hms-pt-cover dd small { color: var(--hms-muted); }

/* ---------- 18i. Signed-out pages: sign in, forgot / reset password (Phase 5) ---- */
body.hms-auth-body { margin: 0; min-height: 100vh; background: var(--hms-bg, #F3F6F8); color: var(--hms-text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.hms-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; }
.hms-auth__brand {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
    padding: 40px clamp(28px, 4vw, 56px); color: #fff;
    background: radial-gradient(90% 70% at 100% 0%, rgba(228, 87, 106, .35) 0%, rgba(228, 87, 106, 0) 55%), linear-gradient(160deg, #0B2233 0%, #0E3D4A 55%, #0E8388 100%);
}
.hms-auth__brand::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%; border: 60px solid rgba(255, 255, 255, .05); pointer-events: none; }
.hms-auth__logo { display: inline-flex; align-items: center; gap: 12px; color: #fff !important; text-decoration: none !important; font: 800 20px 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: -.01em; }
.hms-auth__mark { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); font-size: 18px; }
.hms-auth__pitch h1 { font: 800 clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem)/1.2 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: -.02em; margin: 0 0 22px; max-width: 16ch; color: #fff; }
.hms-auth__pitch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hms-auth__pitch li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: rgba(255, 255, 255, .88); }
.hms-auth__pitch li i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .12); font-size: 13px; margin-top: -3px; }
.hms-auth__owner { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .7); }
.hms-auth__panel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 20px 28px; }
.hms-auth__panel .hms-theme-switch--floating { position: absolute; top: 18px; right: 18px; }
.hms-auth__card { width: 100%; max-width: 420px; background: var(--hms-surface); border: 1px solid var(--hms-border); border-radius: 20px; padding: 32px 30px; box-shadow: 0 24px 60px -30px rgba(16, 33, 50, .35); }
.hms-auth__title { font: 800 1.6rem/1.2 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: -.02em; margin: 0 0 6px; color: var(--hms-text); }
.hms-auth__sub { color: var(--hms-muted); margin: 0 0 22px; font-size: 14.5px; }
.hms-auth__form label { font-weight: 700; font-size: 13.5px; color: var(--hms-text); margin-bottom: 6px; }
.hms-auth__labelrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hms-auth__field { position: relative; }
.hms-auth__field > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--hms-muted); font-size: 14px; pointer-events: none; }
.hms-auth__field .form-control { height: 48px; padding-left: 42px; border-radius: 12px; font-size: 15px; }
.hms-auth__field .form-control:focus { border-color: var(--hms-primary); box-shadow: 0 0 0 3px var(--hms-primary-soft); }
.hms-auth__reveal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--hms-muted); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; }
.hms-auth__reveal:hover, .hms-auth__reveal:focus-visible { color: var(--hms-primary); background: var(--hms-primary-soft); outline: none; }
.hms-auth__field .form-control:has(+ .hms-auth__reveal) { padding-right: 48px; }
.hms-auth__submit { height: 48px; border-radius: 12px; font-weight: 700; font-size: 15px; margin-top: 6px; }
.hms-auth__link { font-size: 13px; font-weight: 600; color: var(--hms-primary) !important; }
.hms-auth__alt { text-align: center; margin: 20px 0 0; font-size: 14px; color: var(--hms-muted); }
.hms-auth__alt a { font-weight: 700; color: var(--hms-primary) !important; }
.hms-auth__alert { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; font-size: 14px; }
.hms-auth__alert p { margin: 0; }
.hms-admin-badge { display: table; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; background: var(--hms-primary-soft); color: var(--hms-primary); }
.hms-login-owner { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--hms-muted); }
@media (max-width: 900px) {
    .hms-auth { grid-template-columns: 1fr; }
    .hms-auth__brand { padding: 22px 20px; gap: 14px; }
    .hms-auth__pitch h1 { font-size: 1.25rem; margin-bottom: 0; max-width: none; }
    .hms-auth__pitch ul, .hms-auth__owner, .hms-auth__brand::after { display: none; }
    .hms-auth__panel { padding: 64px 16px 24px; justify-content: flex-start; }
    .hms-auth__card { padding: 24px 20px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .hms-auth * { transition: none !important; } }

/* ---------- 18j. Accessibility helpers (Phase 6, hms-a11y.js) ---------------- */
.hms-skip { position: fixed; left: 12px; top: -60px; z-index: 100000; padding: 10px 16px; border-radius: 10px; background: var(--hms-primary); color: #fff !important; font-weight: 700; text-decoration: none !important; box-shadow: var(--hms-shadow-sm); transition: top .15s ease; }
.hms-skip:focus { top: 12px; outline: 3px solid #fff; outline-offset: 2px; }
#hms-main:focus { outline: none; }

/* ---------- 19. Loader, footer, misc -------------------------------------- */
html[data-theme] .loader {
    border: 4px solid var(--hms-primary-soft) !important; border-top-color: var(--hms-primary) !important;
    width: 44px !important; height: 44px !important; box-shadow: none !important; animation: hms-spin .8s linear infinite !important;
}
@keyframes hms-spin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
html[data-theme] .main-footer { background: var(--hms-surface) !important; color: var(--hms-muted) !important; border-top: 1px solid var(--hms-border) !important; font-size: var(--hms-fs-sm); }
html[data-theme] .control-sidebar, html[data-theme] .control-sidebar::before { background: var(--hms-elevated) !important; color: var(--hms-text) !important; }
html[data-theme] .img-circle, html[data-theme] .img-thumbnail { border-color: var(--hms-border) !important; background: var(--hms-surface-2); }
html[data-theme] .well { background: var(--hms-surface-2) !important; border: 1px solid var(--hms-border) !important; border-radius: var(--hms-r) !important; box-shadow: none !important; }
html[data-theme] .callout { background: var(--hms-surface) !important; border-left-color: var(--hms-primary) !important; color: var(--hms-text) !important; border-radius: var(--hms-r-sm); }

/* Reusable building blocks for later phases */
.hms-empty { text-align: center; padding: 40px 16px; color: var(--hms-muted); }
.hms-empty__icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; background: var(--hms-primary-soft); color: var(--hms-primary); font-size: 22px; }
.hms-empty h4 { font-size: var(--hms-fs-md) !important; margin-bottom: 4px; }
.hms-skeleton { background: linear-gradient(90deg, var(--hms-surface-2) 25%, var(--hms-hover) 37%, var(--hms-surface-2) 63%); background-size: 400% 100%; animation: hms-shimmer 1.2s ease infinite; border-radius: 6px; }
@keyframes hms-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- 20. Responsive, motion, print --------------------------------- */
@media (max-width: 767.98px) {
    html[data-theme] .content { padding: 0 var(--hms-s2) var(--hms-s4); }
    html[data-theme] .content-header { padding: 14px var(--hms-s3) 8px !important; }
    html[data-theme] .content-header h1 { font-size: var(--hms-fs-lg) !important; }
    html[data-theme] .card-body, html[data-theme] .panel-body { padding: 14px !important; }
    html[data-theme] .modal-dialog { margin: 8px; }
    html[data-theme] .table-responsive { -webkit-overflow-scrolling: touch; }
    html[data-theme] .dataTables_wrapper .dataTables_filter, html[data-theme] .dataTables_wrapper .dataTables_length { text-align: left !important; }
    html[data-theme] .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin-left: 0; }
    html[data-theme] .btn:not(.btn-sm):not(.btn-xs) { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after { transition: none !important; animation-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print {
    html[data-theme] body, html[data-theme] .content-wrapper, html[data-theme] .card, html[data-theme] .table td, html[data-theme] .table th {
        background: #fff !important; color: #000 !important; box-shadow: none !important;
    }
    .hms-theme-switch, .demo-mode-banner { display: none !important; }
}