/* ==========================================================================
   Monbari Psychiatric Care — Core Design System
   --------------------------------------------------------------------------
   Single source of truth for design tokens, layout and components.
   Loaded before theme-polish.css (refinement layer only).

   Density : compact / data-dense
   Accent  : refined teal
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* --- Brand accent (refined teal) --- */
    --primary:          #0f766e;
    --primary-dark:     #0b5f58;
    --primary-darker:   #084c46;
    --primary-light:    #e9f5f3;
    --primary-soft:     #d3ebe7;
    --primary-ring:     rgba(15, 118, 110, .16);

    /* --- Neutral / slate scale --- */
    --slate-25:   #fbfcfd;
    --slate-50:   #f6f8fa;
    --slate-100:  #eef1f4;
    --slate-200:  #e3e8ed;
    --slate-300:  #cfd8e0;
    --slate-400:  #94a3b1;
    --slate-500:  #6b7c8c;
    --slate-600:  #526271;
    --slate-700:  #3b4855;
    --slate-800:  #2a3540;
    --slate-900:  #1c252e;

    /* --- Surfaces --- */
    --canvas:         #f4f6f8;
    --surface:        #ffffff;
    --surface-muted:  #f8fafb;
    --surface-sunken: #f1f4f7;

    /* --- Sidebar --- */
    --nav-bg:         #1f2c38;
    --nav-bg-soft:    #263543;
    --table-head-edge: #16212b;

    /* Bed silhouette used as a masked watermark on bed-availability tiles.
       Applied via mask-image so it picks up the tile's own text colour. */
    --bed-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 2a.5.5 0 0 1 .5.5V8h5.5V5.5a.5.5 0 0 1 .5-.5H13A2.5 2.5 0 0 1 15.5 7.5v6a.5.5 0 0 1-1 0V12h-13v1.5a.5.5 0 0 1-1 0v-11A.5.5 0 0 1 1.5 2Zm3 2.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Z'/%3E%3C/svg%3E");

    --nav-hover:      rgba(255, 255, 255, .07);
    --nav-active:     rgba(15, 118, 110, .28);
    --nav-text:       #a9b8c5;
    --nav-text-dim:   #6f8496;
    --nav-text-bright:#ffffff;
    --nav-accent:     #2dd4bf;

    /* --- Text --- */
    --text-main:   #1c252e;
    --text-body:   #3b4855;
    --text-muted:  #6b7c8c;
    --text-faint:  #94a3b1;
    --text-invert: #ffffff;

    /* --- Lines --- */
    --border:        #e3e8ed;
    --border-strong: #cfd8e0;
    --border-soft:   #eef1f4;

    /* --- Semantic --- */
    --success:       #15803d;
    --success-bg:    #e7f6ec;
    --success-border:#bfe6cc;
    --danger:        #b91c1c;
    --danger-bg:     #fdeceb;
    --danger-border: #f6c9c6;
    --warning:       #b45309;
    --warning-bg:    #fdf3e3;
    --warning-border:#f2d9ac;
    --info:          #0369a1;
    --info-bg:       #e8f2fa;
    --info-border:   #c2ddf0;

    /* --- Radii (compact: tighter than before) --- */
    --radius-sm: 5px;
    --radius:    7px;
    --radius-md: 9px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* --- Elevation (calm, low-spread) --- */
    --shadow-xs: 0 1px 2px rgba(28, 37, 46, .05);
    --shadow-sm: 0 1px 2px rgba(28, 37, 46, .06), 0 1px 3px rgba(28, 37, 46, .04);
    --shadow-md: 0 2px 6px rgba(28, 37, 46, .07), 0 6px 16px rgba(28, 37, 46, .06);
    --shadow-lg: 0 12px 32px rgba(28, 37, 46, .14);

    /* --- Type scale (compact) --- */
    --fs-xs:   11px;
    --fs-sm:   12px;
    --fs-base: 13.5px;
    --fs-md:   14px;
    --fs-lg:   16px;
    --fs-xl:   19px;

    /* Identifiers staff read aloud and match against a wristband — bed
       numbers, patient codes, voucher numbers. Monospaced so a transposed
       digit is visible as a broken column. */
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* --- Layout --- */
    --sidebar-w:  248px;
    --topbar-h:   44px;
    --page-pad-x: 20px;
    --page-pad-y: 16px;

    /* Bootstrap bridge — keeps native BS components on-palette */
    --bs-primary:     #0f766e;
    --bs-primary-rgb: 15, 118, 110;
    --bs-body-color:  #1c252e;
    --bs-body-bg:     #f4f6f8;
    --bs-border-color:#e3e8ed;
    --bs-link-color:  #0f766e;
    --bs-link-hover-color: #0b5f58;

    /* --------------------------------------------------------------
       Legacy aliases (--ui-*)
       Kept so inline styles written against the previous theme
       (e.g. includes/confirm-modal.php) keep resolving correctly.
       Prefer the tokens above for anything new.
       -------------------------------------------------------------- */
    --ui-canvas:        var(--canvas);
    --ui-surface:       var(--surface);
    --ui-surface-muted: var(--surface-muted);
    --ui-dark:          var(--nav-bg);
    --ui-dark-hover:    var(--nav-bg-soft);
    --ui-border:        var(--border);
    --ui-text:          var(--text-main);
    --ui-muted:         var(--text-muted);
    --ui-accent:        var(--primary);
    --ui-accent-hover:  var(--primary-dark);
    --ui-accent-soft:   var(--primary-light);
    --ui-focus:         var(--primary-ring);
    --ui-shadow-sm:     var(--shadow-xs);
    --ui-shadow-md:     var(--shadow-md);
}

* { box-sizing: border-box; }

html, body { overflow-x: hidden; }

body {
    font-family: 'Hind Siliguri', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--canvas);
    color: var(--text-body);
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Tabular figures everywhere numbers matter — money columns line up */
.table td, .table th,
.stat-value, .num, .amount, .val,
input[type="number"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.3;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

hr { border-color: var(--border); opacity: 1; }

::selection { background: var(--primary-soft); color: var(--primary-darker); }

img { max-width: 100%; height: auto; }

/* ==========================================================================
   2. LAYOUT SHELL
   ========================================================================== */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}

.main-content {
    margin-left: var(--sidebar-w);
    flex-grow: 1;
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-body {
    padding: var(--page-pad-y) var(--page-pad-x);
    flex-grow: 1;
    min-width: 0;
}

/* ==========================================================================
   3. SIDEBAR
   ========================================================================== */
.sidebar {
    width: var(--sidebar-w);
    background: var(--nav-bg);
    color: var(--nav-text);
    flex-shrink: 0;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    z-index: 1030;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

/* --- Brand --- */
.sidebar-brand {
    padding: 15px 14px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    position: relative;
    background:
        radial-gradient(220px 90px at 12% 0%, rgba(45, 212, 191, .13), transparent 70%);
}
/* Teal hairline under the brand ties it to the active-item accent */
.sidebar-brand::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: -1px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--nav-accent), transparent 82%);
    opacity: .55;
}
.sidebar-brand a {
    display: flex;
    align-items: center;
    gap: 11px;
    color: inherit;
    text-decoration: none;
}
.sidebar-brand .brand-icon {
    width: 36px; height: 36px;
    background: rgba(255, 255, 255, .1);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--fs-lg);
    flex-shrink: 0;
}
/* Round mark, matching the login page treatment */
.sidebar-brand img,
.sidebar-brand .brand-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    object-fit: contain;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, .28),
        0 0 0 1px rgba(255, 255, 255, .34),
        0 0 0 4px rgba(45, 212, 191, .13);
    transition: transform .18s ease, box-shadow .18s ease;
}
.sidebar-brand a:hover .brand-logo {
    transform: scale(1.05);
    box-shadow:
        0 3px 12px rgba(0, 0, 0, .32),
        0 0 0 1px rgba(255, 255, 255, .5),
        0 0 0 5px rgba(45, 212, 191, .24);
}
.sidebar-brand a:hover h6 { color: var(--nav-accent); }
.sidebar-brand h6 {
    color: var(--nav-text-bright);
    margin: 0;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: -.1px;
    transition: color .15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-brand small {
    color: var(--nav-text-dim);
    font-size: 10px;
    line-height: 1.35;
    display: block;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Menu --- */
.sidebar-menu {
    padding: 8px 0 24px;
    list-style: none;
    margin: 0;
}

.menu-label,
.sidebar-menu .menu-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 5px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--nav-text-dim);
    font-weight: 700;
}
.sidebar-menu .menu-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .09);
}

.sidebar-menu li a,
.sidebar-menu li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1px 8px;
    padding: 8px 10px;
    color: var(--nav-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius);
    border-left: 0;
    position: relative;
    transition: background-color .15s ease, color .15s ease;
    cursor: pointer;
}
.sidebar-menu li a span { flex-grow: 1; min-width: 0; }
.sidebar-menu li a i:first-child {
    font-size: 15px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    opacity: .9;
}

.sidebar-menu li > a:hover {
    background: var(--nav-hover);
    color: var(--nav-text-bright);
}

.sidebar-menu li > a.active {
    background: var(--nav-active);
    color: var(--nav-text-bright);
    font-weight: 600;
}
/* Left accent rail on the active item */
.sidebar-menu li > a.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    background: var(--nav-accent);
}
.sidebar-menu li > a.active i:first-child { opacity: 1; color: var(--nav-accent); }

/* --- Submenu --- */
.chevron {
    font-size: 10px !important;
    width: auto !important;
    transition: transform .2s ease;
    opacity: .7;
}
.menu-toggle[aria-expanded="true"] .chevron,
.menu-toggle.active .chevron { transform: rotate(180deg); }

.submenu {
    list-style: none;
    padding-left: 0;
    margin: 1px 8px 4px;
    border-radius: var(--radius);
    position: relative;
}
.sidebar-menu .submenu li > a {
    padding: 7px 10px 7px 30px;
    font-size: 12.5px;
    color: var(--nav-text-dim);
    margin: 0;
    border-radius: var(--radius-sm);
    font-weight: 500;
}
.sidebar-menu .submenu li > a i { font-size: 12px !important; }
.sidebar-menu .submenu li > a:hover {
    color: var(--nav-text-bright);
    background: var(--nav-hover);
}
.sidebar-menu .submenu li > a.active {
    color: var(--nav-text-bright);
    background: var(--nav-active);
}
.sidebar-menu .submenu li > a.active::before { left: 0; top: 4px; bottom: 4px; }

/* --- Logout item --- */
.sidebar-menu li > a:has(.bi-box-arrow-right) { color: #f0a9a9; }
.sidebar-menu li > a:has(.bi-box-arrow-right):hover {
    background: rgba(185, 28, 28, .22);
    color: #ffd4d4;
}
/* Logout sits in a <form>, so mirror the nav-item styling by hand */
.sidebar-logout { margin: 1px 8px; }
.sidebar-logout .btn-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 500;
    color: #f0a9a9;
    border-radius: var(--radius);
    text-align: left;
    transition: background-color .15s ease, color .15s ease;
}
.sidebar-logout .btn-link i {
    font-size: 15px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    opacity: .9;
}
.sidebar-logout .btn-link:hover {
    background: rgba(185, 28, 28, .22);
    color: #ffd4d4;
    text-decoration: none;
}

/* --- Scrollbar --- */
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .14);
    border-radius: var(--radius-pill);
}
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .26); }

/* --- Mobile backdrop --- */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(28, 37, 46, .5);
    backdrop-filter: blur(2px);
    z-index: 1029;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.sidebar-backdrop.show { opacity: 1; visibility: visible; }

/* ==========================================================================
   4. TOPBAR
   ========================================================================== */
.topbar {
    background: var(--nav-bg);
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 0 var(--page-pad-x);
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: none;
}

.topbar .btn-toggle-sidebar {
    display: none;
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: var(--nav-text-bright);
    padding: 6px 8px;
    border-radius: var(--radius);
    transition: background-color .15s ease;
}
.topbar .btn-toggle-sidebar:hover { background: rgba(255,255,255,.12); }

/* The topbar is a three-track row: hamburger | org name | user chip.
   The name is a real flex item that grows into the space between the two,
   so it optically centres in the visible gap. Absolute centring was tried
   first and read as off-centre, because the wide user chip on the right
   makes the true midpoint of the bar look shifted. */
.app-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
    text-align: center;
}
/* Left and right tracks are given equal weight so the middle track lands
   in the true centre of what the eye actually sees. */
.topbar > .topbar-lead,
.topbar > .user-chip { flex: 0 0 auto; }
.app-title::before {
    content: "";
    order: 2;
    width: 80px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, transparent, var(--primary) 30%, var(--primary) 70%, transparent);
    opacity: .8;
    flex-shrink: 0;
}
.app-title .page-title,
.topbar-org-name {
    font-size: 16px !important;
    font-weight: 600;
    letter-spacing: .1px;
    color: var(--nav-text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    margin-bottom: 0;
}

/* Desktop typography for the centred wordmark. */
@media (min-width: 992px) {
    .topbar .app-title .page-title,
    .topbar .topbar-org-name {
        font-size: 17px !important;
        font-weight: 700;
        letter-spacing: .04em;
        text-align: center;
        color: var(--nav-text-bright);
    }
}

/* Keyboard skip link — visible only when focused */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1100;
    background: var(--primary);
    color: #fff;
    padding: 9px 16px;
    border-radius: 0 0 var(--radius) 0;
    font-size: var(--fs-md);
    font-weight: 600;
}
.skip-link:focus {
    left: 0;
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* --- User chip --- */
.topbar .user-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    flex-shrink: 0;
}
.topbar .user-chip .avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12.5px;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,.28);
}
.topbar .user-name-text {
    font-weight: 600;
    color: var(--nav-text-bright);
    font-size: 13px;
}
.topbar .user-role-text {
    background: rgba(255,255,255,.14);
    color: #fff !important;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.topbar .user-chip .btn-link {
    color: var(--nav-text) !important;
    font-size: 16px;
    line-height: 1;
    padding: 6px !important;
    border-radius: var(--radius);
    transition: background-color .15s ease, color .15s ease;
}
.topbar .user-chip .btn-link:hover {
    color: #ff8080 !important;
    background: rgba(255,255,255,.1);
}
.btn-topbar-backup {
    border: none;
    background: transparent;
    color: var(--nav-text);
    border-radius: 8px;
    padding: 6px !important;
    font-size: 16px;
    line-height: 1;
    transition: background-color .15s ease, color .15s ease;
}
.btn-topbar-backup:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
}

/* ==========================================================================
   5. MODULE MENU (sub-navigation tabs)
   ========================================================================== */
.module-menu {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 7px var(--page-pad-x) !important;
    position: sticky;
    top: var(--topbar-h);
    z-index: 1015;
    box-shadow: none !important;
}
.module-menu .d-flex { gap: 5px !important; }

.module-menu .btn {
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.module-menu .btn i { font-size: 13px; }

.module-menu .btn-light,
.module-menu .btn.btn-light.border {
    background: transparent;
    border-color: transparent !important;
    color: var(--text-muted);
}
.module-menu .btn-light:hover {
    background: var(--surface-sunken);
    color: var(--text-main);
    border-color: transparent !important;
}
/* Selected tab: solid dark green with white text (the original treatment). */
.module-menu .btn.active,
.module-menu .btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(15, 118, 110, .28) !important;
}
.module-menu .btn.active i,
.module-menu .btn-primary i { color: #fff !important; }
.module-menu .btn.active:hover,
.module-menu .btn-primary:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: #fff !important;
}

/* ==========================================================================
   6. CARDS
   ========================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}
.card.border-0 { border: 1px solid var(--border) !important; }

.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
    font-weight: 600;
    font-size: var(--fs-md);
    color: var(--text-main);
    padding: 10px 14px;
    letter-spacing: .1px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
.card-header h5, .card-header h6 { margin: 0; font-size: var(--fs-md); }
.card-header .bi { color: var(--primary); vertical-align: -1px; }
.card-header.bg-primary .bi,
.card-header.bg-dark .bi,
.card-header.text-white .bi { color: inherit; }

/* ---- New Admission form: a light teal edge on each section header ----------
   Scoped to #admissionPage so the shared .card-header stays neutral elsewhere.
   The long form reads as three stages, so each stage gets the same tint the
   admission record uses — colour for orientation, nothing more. */
#admissionPage > .card > .card-header {
    background: linear-gradient(180deg, var(--primary-light) 0%, #eef7f5 100%);
    border-bottom-color: var(--primary-soft);
    box-shadow: inset 2px 0 0 var(--primary);
    color: var(--primary-darker);
}
#admissionPage > .card > .card-header .bi { color: var(--primary); }

/* Required fields earn a teal dot, so the eye finds them without reading */
#admissionPage .form-label { color: var(--text-body); font-weight: 600; }

/* Fields the form fills in for you — bed and rent — sit on a tinted ground so
   they read as results rather than empty inputs waiting for the clerk. The
   billing table is left alone: its readonly cells are dense running totals
   and a tint on every other column just made it noisy. */
#admissionPage .form-control[readonly]:not(.form-control-sm) {
    background: var(--primary-light);
    border-color: var(--primary-soft);
    color: var(--primary-darker);
    font-weight: 600;
}

/* Save is the one thing on this page you cannot undo — give it the weight */
#admissionPage .card-body > .mt-4.text-end {
    border-top: 1px solid var(--border-soft);
    margin-top: 18px !important;
    padding-top: 15px;
}

.card-body { padding: 14px; }
.card-footer {
    background: var(--surface-muted);
    border-top: 1px solid var(--border-soft);
    padding: 10px 14px;
}

/* Bootstrap's .shadow-sm is used widely — keep it calm and consistent */
.shadow-sm { box-shadow: var(--shadow-xs) !important; }
.shadow { box-shadow: var(--shadow-sm) !important; }
.shadow-lg { box-shadow: var(--shadow-md) !important; }

/* ==========================================================================
   7. PAGE HEADINGS
   ========================================================================== */
.page-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 1px;
    letter-spacing: -.2px;
    line-height: 1.3;
}
.page-title .bi { font-size: 17px; color: var(--primary); }

.page-subtitle {
    color: var(--text-muted);
    font-size: 12.5px;
    margin-bottom: 14px;
}

.section-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -.1px;
}

/* ==========================================================================
   7b. SHARED PAGE CHROME
   One vocabulary for the header / filter / toolbar / empty-state blocks that
   every list and form page used to hand-roll with ad-hoc utility strings.
   ========================================================================== */

/* ---- Page header: icon + title block on the left, actions on the right ---- */
.page-header {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
    padding-bottom: 13px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
}
.page-header .page-title,
.page-header .page-subtitle { margin-bottom: 0; }
.page-header-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 18px;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .12);
}
.page-header-text { min-width: 0; flex: 1 1 240px; }
.page-header-text .page-subtitle { margin-top: 2px; }
.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Small tinted count that sits beside a heading: "Admissions (128)" */
.count-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    vertical-align: middle;
}

/* ---- Filter bar: the search / date-range / status panel above a table ---- */
.filter-bar {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 13px 14px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
}
.filter-bar .form-label {
    font-size: 10px;
    margin-bottom: 3px;
}
.filter-bar .form-control,
.filter-bar .form-select {
    font-size: 12.5px;
}
/* Buttons sit on the same baseline as the inputs they follow */
.filter-bar .filter-actions {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}
.filter-bar .filter-actions .btn { white-space: nowrap; }

/* ---- Toolbar: a flat row of controls, no panel chrome ---- */
.toolbar {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 13px;
}
.toolbar-spacer { margin-left: auto; }

/* ---- Empty state ---- */
.empty-state {
    text-align: center;
    padding: 44px 20px;
    color: var(--text-muted);
}
.empty-state-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-muted);
    border: 1px solid var(--border-soft);
    color: var(--text-faint);
    font-size: 24px;
}
.empty-state h5 {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-body);
    margin-bottom: 4px;
}
.empty-state p {
    font-size: var(--fs-md);
    color: var(--text-muted);
    margin-bottom: 0;
}
.empty-state p + .btn { margin-top: 15px; }

/* ==========================================================================
   7c. LIST-PAGE CASCADE
   The 34 filter pages and 56 plain card headers already share a markup shape
   (`form[method=GET].row` inside a card, `.card-header` above a table). These
   rules upgrade all of them at once, so no page markup has to be rewritten.
   ========================================================================== */

/* ---- GET filter forms read as a compact control strip ---- */form[method="GET"] > [class*="col-"] > .form-label,
form[method="get"] > [class*="col-"] > .form-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 3px;
}
form[method="GET"] .form-control-sm,
form[method="GET"] .form-select-sm,
form[method="get"] .form-control-sm,
form[method="get"] .form-select-sm {
    font-size: 12.5px;
    min-height: 33px;
}
/* The trailing action row sits tight under the inputs it belongs to */
form[method="GET"] > .col-12.d-flex,
form[method="get"] > .col-12.d-flex { padding-top: 2px; }

/* A card whose body is only a filter form loses the heavy card treatment */
.card > .card-body > form[method="GET"].row:only-child,
.card > .card-body > form[method="get"].row:only-child { margin: 0; }

/* ---- Card headers: one consistent treatment for the 56 bare variants ---- */
.card > .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--text-main);
}
.card > .card-header > .btn,
.card > .card-header > a.btn,
.card > .card-header > .card-header-actions { margin-left: auto; }
.card > .card-header > .btn ~ .btn { margin-left: 0; }
.card > .card-header .bi { color: var(--primary); }
/* Coloured headers keep their own icon colour */
.card > .card-header[class*="bg-"] .bi { color: inherit; }

/* ---- Row action clusters in tables ---- */
/* Action cells sit last and hold 1-3 small buttons. They must never wrap: a
   wrapped cluster grows the row height and, on a fixed-width column, pushes
   the table past its scroll container instead of scrolling inside it. */
.table td:last-child > .btn,
.table td:last-child > form,
.table td:last-child > a.btn { vertical-align: middle; }
.table th:last-child,
.table td:last-child:has(> .btn),
.table td:last-child:has(> form) { white-space: nowrap; }
.table td:last-child > form.d-inline { display: inline-block !important; }
.table td:last-child > .btn + form,
.table td:last-child > form + .btn,
.table td:last-child > .btn + .btn,
.table td:last-child > a.btn + form { margin-left: 3px; }

.table td .btn-group-sm > .btn,
.table td > .btn-sm,
.table td .d-flex > .btn-sm { padding: 3px 8px; font-size: 11.5px; }
.table td .btn-sm .bi { font-size: 12px; }
/* Icon-only action buttons become square so clusters align */
.table td .btn-sm > .bi:only-child { margin: 0; }

/* A .table-responsive must be allowed to be narrower than its table */
.table-responsive { max-width: 100%; }

/* ---- Numeric columns line up ---- */
.table td.text-end,
.table th.text-end { font-variant-numeric: tabular-nums; }

/* ---- Soft-deleted / voided rows read as struck through, not shouted ---- */
.table tbody tr.row-deleted td,
.table tbody tr.table-danger.deleted td {
    color: var(--text-faint);
    text-decoration: line-through;
    text-decoration-color: var(--border-strong);
}

/* ==========================================================================
   7d. RECORD VIEW
   The single-record screens (admission, patient, bill) all answer the same
   three questions in the same order: who is this, where are they, what is
   owed. This vocabulary encodes that order so colour is only ever spent on
   meaning — teal for wayfinding, red for money owed, green for money in,
   slate for everything that is reference material.
   ========================================================================== */

/* ---- Record banner: identity + location + status ------------------------
   A light teal wash gives the banner weight without making it a dark block.
   The leading-edge rail carries status; the trailing-edge figure well is a
   slightly deeper tint of the same wash so it reads as a conclusion without
   clashing with the banner background. */
.record-banner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #f0fafa 0%, var(--primary-light) 40%, #e4f2f0 100%);
    border: 1px solid var(--primary-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 17px 20px 17px 22px;
    margin-bottom: 14px;
    overflow: hidden;
}
/* Status rail — a 4px stripe on the leading edge */
.record-banner::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--slate-400);
}
.record-banner.is-admitted::before   { background: var(--success); }
.record-banner.is-discharged::before { background: var(--slate-500); }
.record-banner.is-pending::before    { background: var(--warning); }

.record-identity { display: flex; align-items: flex-start; gap: 14px; min-width: 0; flex: 1 1 320px; }
.record-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--primary);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.3px;
    box-shadow: 0 2px 8px rgba(15, 118, 110, .18);
}
.record-name {
    font-size: 21px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -.3px;
    line-height: 1.22;
    margin: 0 0 5px;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}
/* The code is an identifier staff read aloud and match against a wristband:
   monospaced digits so transposition errors are visible. */
.record-code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, .75);
    border: 1px solid var(--primary-soft);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    letter-spacing: .02em;
}
.record-banner .badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 4px 9px;
    border-radius: var(--radius-pill);
}

.record-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 16px;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.6;
}
.record-meta > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.record-meta .bi { color: var(--primary); font-size: 13px; opacity: .7; }
.record-meta strong { color: var(--text-main); font-weight: 600; }

/* ---- Headline figure on the banner's trailing edge ----
   The number staff act on. A white card lifts it off the tinted banner so it
   reads as a separate instrument rather than more text. */
.record-figure {
    margin-left: auto;
    text-align: right;
    flex: 0 0 auto;
    background: var(--surface);
    border: 1px solid var(--primary-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    padding: 11px 16px;
    min-width: 168px;
}
.record-figure-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: 3px;
}
.record-figure-value {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.6px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}
.record-figure-value.is-due     { color: var(--danger); }
.record-figure-value.is-settled { color: var(--success); }
.record-figure-note { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* ---- Definition list: the label/value pairs that were <table> markup ----
   A two-column grid tracks the longest label, so values align down the whole
   column without the borders a table would impose on reference data. */
.record-dl {
    display: grid;
    grid-template-columns: minmax(110px, auto) 1fr;
    gap: 0;
    margin: 0;
    font-size: var(--fs-md);
}
.record-dl > dt,
.record-dl > dd {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-soft);
    margin: 0;
    min-width: 0;
}
.record-dl > dt {
    color: var(--text-muted);
    font-weight: 500;
    padding-right: 14px;
}
.record-dl > dd {
    color: var(--text-main);
    font-weight: 500;
    text-align: right;
    overflow-wrap: anywhere;
}
.record-dl > dt:last-of-type,
.record-dl > dd:last-of-type { border-bottom: none; }
/* Values that are absent are stated as absent, never left blank */
.record-dl > dd.is-empty { color: var(--text-faint); font-weight: 400; }

/* ---- Compact variant: reference data that is scanned, not read ----
   The identity blocks (patient, admission, guardian, bed) are look-up
   material — staff check one field and move on. Tighter rows, a left-aligned
   value, and zebra banding on the row pairs keep the label/value bond obvious
   once the list is folded into two pairs per row. */
.record-dl.is-compact {
    grid-template-columns: minmax(88px, auto) 1fr;
    font-size: var(--fs-base);
    column-gap: 12px;
}
.record-dl.is-compact > dt,
.record-dl.is-compact > dd {
    padding: 4px 0;
    line-height: 1.45;
    border-bottom: 1px dotted var(--border);
}
.record-dl.is-compact > dt {
    padding-right: 0;
    color: var(--text-muted);
    font-weight: 500;
}
.record-dl.is-compact > dd {
    text-align: left;
    color: var(--text-main);
    font-weight: 600;
}
.record-dl.is-compact > dd.is-empty { color: var(--text-faint); font-weight: 400; }

/* Two label/value pairs per row once the panel is wide enough to hold
   them without the value wrapping — halves the height of every block. */
@media (min-width: 1200px) {
    .record-dl.is-compact.is-2up {
        grid-template-columns: minmax(84px, auto) minmax(0, 1fr) minmax(84px, auto) minmax(0, 1fr);
        column-gap: 18px;
    }
    /* Free-text values (address, diagnosis) keep the full width — folding
       them into a half column would force a ragged wrap. */
    .record-dl.is-compact.is-2up > dt.is-wide { grid-column: 1; }
    .record-dl.is-compact.is-2up > dd.is-wide { grid-column: 2 / -1; }
}

/* Reference panels carry more rows than they do padding */
.panel-body.is-tight { padding: 10px 15px 12px; }

/* ---- Panel head: a teal edge ties the reference blocks to the banner ---- */
.panel-head.is-accent {
    background: linear-gradient(180deg, var(--primary-light) 0%, #eef7f5 100%);
    border-bottom-color: var(--primary-soft);
    box-shadow: inset 2px 0 0 var(--primary);
}
.panel-head.is-accent .panel-title { color: var(--primary-darker); }
.panel-head.is-accent .bi { color: var(--primary); }

/* ---- Money summary: the figures a cashier reconciles, in reading order ----
   Each cell carries a hairline top rule in its own semantic colour, so the
   strip reads as money-in vs money-out at a glance without tinting whole
   surfaces. The resolving cell is the only one that gets a filled ground. */
.money-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.money-cell {
    background: var(--surface);
    padding: 12px 14px 13px;
    border-top: 2px solid var(--slate-300);
}
.money-cell.is-in    { border-top-color: var(--success); }
.money-cell.is-due   { border-top-color: var(--danger); }
.money-cell.is-hold  { border-top-color: var(--info); }
.money-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.money-value {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.3px;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
    line-height: 1.2;
}
.money-value.is-in   { color: var(--success); }
.money-value.is-due  { color: var(--danger); }
.money-note { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
/* The cell that resolves the others reads as the conclusion */
.money-cell.is-total {
    background: var(--primary-light);
    border-top-color: var(--primary);
}
.money-cell.is-total .money-label { color: var(--primary-dark); }

/* ---- Inline empty state for a panel that has no rows yet ---- */
.record-empty {
    text-align: center;
    padding: 26px 16px;
    color: var(--text-muted);
    font-size: var(--fs-md);
}
.record-empty .bi { display: block; font-size: 21px; color: var(--text-faint); margin-bottom: 6px; }

@media (max-width: 575.98px) {
    .record-banner { padding: 14px 15px 14px 17px; }
    .record-figure {
        margin-left: 0;
        width: 100%;
        text-align: left;
    }
    .record-dl { grid-template-columns: 1fr; }
    .record-dl > dt { padding-bottom: 0; border-bottom: none; }
    .record-dl > dd { text-align: left; padding-top: 1px; }
    .record-dl.is-compact > dt { border-bottom: none; padding-bottom: 0; }
}

/* ==========================================================================
   8. FORMS
   ========================================================================== */
.form-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.form-control,
.form-select {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 6px 10px;
    font-size: var(--fs-md);
    color: var(--text-main);
    background-color: var(--surface);
    min-height: 34px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--text-faint); }

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--slate-400); }

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
    background-color: var(--surface);
    color: var(--text-main);
}

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

.form-control-sm, .form-select-sm {
    padding: 4px 8px;
    font-size: 12.5px;
    min-height: 30px;
    border-radius: var(--radius-sm);
}
.form-control-lg, .form-select-lg {
    padding: 9px 13px;
    font-size: var(--fs-lg);
    min-height: 42px;
}

textarea.form-control { min-height: 62px; line-height: 1.5; }

.input-group-text {
    background: var(--surface-sunken);
    border-color: var(--border-strong);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--radius);
}

.form-check-input { border-color: var(--border-strong); }
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}
.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
.form-check-label { font-size: var(--fs-md); }

.form-text { font-size: 11.5px; color: var(--text-faint); }

/* Required-field marker */
.form-label .req,
.form-label .text-danger { color: var(--danger); }

/* Select2 alignment with native controls */
.select2-container .select2-selection--single {
    border-color: var(--border-strong);
    border-radius: var(--radius);
    height: 34px;
    min-height: 34px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    font-size: var(--fs-md);
    color: var(--text-main);
    padding-left: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
.select2-dropdown {
    border-color: var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary);
}
.select2-search--dropdown .select2-search__field {
    border-radius: var(--radius-sm);
    border-color: var(--border-strong);
    font-size: var(--fs-md);
}

/* --------------------------------------------------------------------------
   8b. FORM PAGE RHYTHM
   Create/edit pages are built as a stack of `.card > .card-header + .card-body`
   fieldsets holding a `.row.g-2/.g-3` of `.col-md-*` fields. These rules give
   that existing shape a clearer hierarchy without touching page markup.
   -------------------------------------------------------------------------- */

/* Each fieldset card reads as a titled section. Coloured headers (bg-primary,
   bg-secondary and friends) are excluded rather than overridden-then-reverted,
   because `revert` would roll back Bootstrap's own author-origin colours too. */
form .card > .card-header:not([class*="bg-"]) {
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border-soft);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--text-body);
    padding: 9px 14px;
}
form .card > .card-header .bi { font-size: 13px; }

/* A trailing star in a label is the required marker */
.form-label { position: relative; }

/* Invalid state — used by the flash-error pages when a field is re-rendered */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger);
    background-image: none;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, .16); }
.invalid-feedback { font-size: 11px; color: var(--danger); }

/* The validation summary the pages flash from $_SESSION['form_errors'] */
.alert-danger > ul.mb-0 {
    padding-left: 17px;
    margin-top: 4px;
}
.alert-danger > ul.mb-0 > li { font-size: 12.5px; }

/* Action row at the foot of a form: separated, right-aligned, roomy targets */
form .form-actions,
form .d-grid.gap-2 + .form-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-top: 13px;
    margin-top: 4px;
    border-top: 1px solid var(--border-soft);
}
form .form-actions .btn { min-height: 38px; padding-inline: 18px; }
form .form-actions .form-actions-note {
    margin-right: auto;
    font-size: 11.5px;
    color: var(--text-faint);
}

/* Read-only/derived fields (totals, computed codes) look calculated, not typed */
.form-control[readonly].calc,
.form-control.calc[readonly] {
    background: var(--primary-light);
    border-color: rgba(15, 118, 110, .22);
    color: var(--primary-dark);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Line-item tables inside forms stay tight. Scoped to cells that actually hold
   a control, so read-only tables that merely sit inside a form keep their
   normal row height. */
form .table td:has(> .form-control),
form .table td:has(> .form-select),
form .table td:has(> .input-group) { padding: 5px 7px; }
form .table td .form-control,
form .table td .form-select {
    min-height: 30px;
    padding: 3px 7px;
    font-size: 12.5px;
}

/* ==========================================================================
   9. BUTTONS
   ========================================================================== */
.btn {
    border-radius: var(--radius);
    font-size: var(--fs-md);
    padding: 6px 13px;
    font-weight: 500;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn i { line-height: 1; }

.btn-sm {
    padding: 4px 10px;
    font-size: 12.5px;
    border-radius: var(--radius-sm);
    gap: 5px;
}
.btn-lg { padding: 9px 18px; font-size: var(--fs-lg); border-radius: var(--radius-md); }

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-ring);
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}
.btn-primary:active { background: var(--primary-darker) !important; border-color: var(--primary-darker) !important; }

.btn-success { background: var(--success); border-color: var(--success); }
.btn-success:hover { background: #126b33; border-color: #126b33; }
.btn-danger  { background: var(--danger);  border-color: var(--danger); }
.btn-danger:hover { background: #9d1818; border-color: #9d1818; }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-warning:hover { background: #96450a; border-color: #96450a; color: #fff; }
.btn-info    { background: var(--info); border-color: var(--info); color: #fff; }
.btn-info:hover { background: #025886; border-color: #025886; color: #fff; }
.btn-secondary { background: var(--slate-600); border-color: var(--slate-600); }
.btn-secondary:hover { background: var(--slate-700); border-color: var(--slate-700); }
.btn-dark { background: var(--slate-800); border-color: var(--slate-800); }
.btn-dark:hover { background: var(--slate-900); border-color: var(--slate-900); }

.btn-light {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-body);
}
.btn-light:hover {
    background: var(--surface-sunken);
    border-color: var(--slate-400);
    color: var(--text-main);
}

.btn-outline-secondary {
    border-color: var(--border-strong);
    color: var(--text-body);
    background: var(--surface);
}
.btn-outline-secondary:hover {
    background: var(--surface-sunken);
    border-color: var(--slate-400);
    color: var(--text-main);
}
.btn-outline-primary { border-color: var(--primary); color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-outline-dark { border-color: var(--border-strong); color: var(--text-main); }
.btn-outline-dark:hover { background: var(--slate-800); border-color: var(--slate-800); color: #fff; }
.btn-outline-success:hover { background: var(--success); border-color: var(--success); }
.btn-outline-danger:hover  { background: var(--danger);  border-color: var(--danger); }

.btn-link { text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

.btn:disabled, .btn.disabled { opacity: .55; }

/* ==========================================================================
   10. TABLES  (light professional header — not heavy dark blocks)
   ========================================================================== */
.table {
    font-size: var(--fs-base);
    color: var(--text-body);
    margin-bottom: 0;
    --bs-table-bg: transparent;
}

.table thead th {
    background: var(--nav-bg);
    color: #fff;
    border-bottom: 2px solid var(--table-head-edge);
    border-top: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .04em;
    padding: 9px 10px;
    white-space: nowrap;
    vertical-align: middle;
}
.table thead th a { color: #fff; }
.table thead th .bi { color: rgba(255, 255, 255, .8); }
.table thead th:first-child { border-top-left-radius: var(--radius); }
.table thead th:last-child  { border-top-right-radius: var(--radius); }

.table tbody td {
    padding: 7px 10px;
    vertical-align: middle;
    border-color: var(--border-soft);
    color: var(--text-body);
}
.table tbody tr:last-child td { border-bottom: none; }

.table-hover > tbody > tr:hover > * {
    background-color: #eef3f5 !important;
    color: var(--text-main);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--surface-muted);
}

/* Footer / total rows */
.table tfoot td, .table tfoot th,
.table tr.table-light td,
.table tr.total-row td {
    background: var(--surface-sunken);
    font-weight: 700;
    color: var(--text-main);
    border-top: 1px solid var(--border-strong);
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
}

/* Tables sitting directly inside a card: flush edges */
.card > .table-responsive > .table,
.card > .table { margin-bottom: 0; }
.card > .table-responsive > .table > thead th:first-child,
.card > .table > thead th:first-child,
.card > .table-responsive > .table > thead th:last-child,
.card > .table > thead th:last-child { border-radius: 0; }

.summary-table th {
    font-weight: 600;
    color: var(--text-main);
    border-color: var(--border);
    background: transparent;
    text-transform: none;
    font-size: var(--fs-md);
    letter-spacing: 0;
}
.summary-table td { border-color: var(--border); font-size: var(--fs-md); }
.summary-table tr.table-light td { font-size: var(--fs-md); font-weight: 700; }
.summary-table i { font-size: var(--fs-md); }

/* --------------------------------------------------------------------------
   10b. Legacy markup compatibility
   Existing pages use Bootstrap utilities directly (bg-primary card headers,
   table-bordered, table-dark, thead.table-light). These rules keep that
   markup rendering correctly under the new light-header system, so no page
   markup has to be touched.
   -------------------------------------------------------------------------- */

/* thead .table-light — 42 pages use it; keep every table head uniformly dark
   (this matches the original system, where the dark head was forced) */
.table > thead.table-light th,
.table > thead > tr.table-light > th,
.table > thead.table-light > tr > th {
    background: var(--nav-bg);
    color: #fff;
    --bs-table-bg: var(--nav-bg);
    --bs-table-color: #fff;
    border-bottom-color: var(--table-head-edge);
}

/* table-bordered — soften Bootstrap's dark grid lines */
.table-bordered > :not(caption) > * { border-color: var(--border); }
.table-bordered > :not(caption) > * > * { border-color: var(--border); }
.table-bordered > thead > tr > th {
    border-color: var(--table-head-edge);
    border-bottom-color: var(--table-head-edge);
}
.table-bordered > tbody > tr:last-child > td { border-bottom: 1px solid var(--border); }
/* Bordered tables need square corners or the grid looks broken */
.table-bordered > thead th:first-child,
.table-bordered > thead th:last-child { border-radius: 0; }

/* table-dark — keep it dark but on our navy, not Bootstrap's black */
.table-dark,
.table > thead.table-dark th,
.table > thead > tr.table-dark > th {
    --bs-table-bg: var(--nav-bg);
    --bs-table-color: #fff;
    --bs-table-border-color: rgba(255, 255, 255, .14);
    background: var(--nav-bg);
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .14);
}

/* Coloured card headers used by existing pages */
.card-header.bg-primary,
.card-header.bg-dark,
.card-header.bg-success,
.card-header.bg-danger,
.card-header.bg-secondary,
.card-header.bg-info,
.card-header.bg-warning {
    border-bottom-color: transparent;
    color: #fff;
}
.card-header.bg-primary   { background-color: var(--primary) !important; }
.card-header.bg-dark      { background-color: var(--nav-bg) !important; }
.card-header.bg-success   { background-color: var(--success) !important; }
.card-header.bg-danger    { background-color: var(--danger) !important; }
.card-header.bg-secondary { background-color: var(--slate-600) !important; }
.card-header.bg-info      { background-color: var(--info) !important; }
.card-header.bg-warning   { background-color: var(--warning) !important; color: #fff; }
.card-header.bg-warning,
.card-header.bg-warning a,
.card-header.bg-warning .bi { color: #fff !important; }

/* Anything inside a dark header inherits white, including small text + links */
.card-header.bg-primary *,
.card-header.bg-dark *,
.card-header.bg-success *,
.card-header.bg-danger *,
.card-header.bg-secondary *,
.card-header.bg-info *,
.card-header.bg-warning * { color: inherit; }
.card-header.bg-primary .text-muted,
.card-header.bg-dark .text-muted,
.card-header.bg-success .text-muted,
.card-header.bg-danger .text-muted,
.card-header.bg-secondary .text-muted,
.card-header.bg-info .text-muted { color: rgba(255, 255, 255, .75) !important; }

/* Buttons and badges sitting in a dark header need to stay legible */
.card-header[class*="bg-"]:not(.bg-white):not(.bg-light) .btn-light {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
}
.card-header[class*="bg-"]:not(.bg-white):not(.bg-light) .btn-light:hover {
    background: rgba(255, 255, 255, .26);
    color: #fff;
}
.card-header[class*="bg-"]:not(.bg-white):not(.bg-light) .badge.bg-light {
    background: rgba(255, 255, 255, .18) !important;
    color: #fff !important;
    border-color: transparent;
}

/* bg-white / bg-light headers: match the default header, keep teal icons */
.card-header.bg-white,
.card-header.bg-light {
    background-color: var(--surface) !important;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-soft);
}
.card-header.bg-light { background-color: var(--surface-muted) !important; }
.card-header.bg-white .bi,
.card-header.bg-light .bi { color: var(--primary); }

/* Utility text colours on dark surfaces elsewhere (page headers, banners) */
.bg-dark, .bg-primary { color: #fff; }
.bg-dark .bi, .bg-primary .bi { color: inherit; }

/* ==========================================================================
   11. BADGES / STATUS PILLS
   ========================================================================== */
.badge {
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 10.5px;
    padding: 3px 8px;
    letter-spacing: .02em;
    line-height: 1.5;
}

.badge-vacant   { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.badge-occupied { background: var(--danger-bg);  color: var(--danger);  border: 1px solid var(--danger-border); }
.badge-due      { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.badge-paid     { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }

/* Bootstrap solid badges — kept solid and saturated, as before, so status
   chips stay strong against the dark table heads and voucher rows. */
.badge.bg-success   { background: var(--success) !important; color: #fff !important; }
.badge.bg-danger    { background: var(--danger)  !important; color: #fff !important; }
.badge.bg-warning   { background: var(--warning) !important; color: #fff !important; }
.badge.bg-info      { background: var(--info)    !important; color: #fff !important; }
.badge.bg-primary   { background: var(--primary) !important; color: #fff !important; }
.badge.bg-secondary { background: var(--slate-600) !important; color: #fff !important; }
.badge.bg-dark      { background: var(--nav-bg) !important; color: #fff !important; }
.badge.bg-light     { background: var(--slate-100) !important; color: var(--slate-700) !important; border: 1px solid var(--border-strong); }

/* ==========================================================================
   12. ALERTS
   ========================================================================== */
.alert {
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    box-shadow: none;
    padding: 10px 14px;
    font-size: var(--fs-md);
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.alert .bi { font-size: var(--fs-lg); line-height: 1.3; flex-shrink: 0; }
.alert .btn-close { margin-left: auto; padding: 10px; font-size: 11px; }
.alert-success { background: var(--success-bg); border-color: var(--success-border); color: #10502a; }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: #8f1616; }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: #8a4008; }
.alert-info    { background: var(--info-bg);    border-color: var(--info-border);    color: #075172; }

/* ==========================================================================
   13. STAT / KPI CARDS
   ========================================================================== */
.stat-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm) !important;
}
.stat-card .card-body { padding: 13px 15px; }

.stat-card .stat-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: none;
}
.stat-card .stat-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 2px;
}
.stat-card .stat-value {
    font-size: 21px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.15;
    letter-spacing: -.4px;
}
.stat-card .stat-meta { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }

.stat-card-success .stat-icon { background: var(--success-bg); color: var(--success); }
.stat-card-success { border-left: 3px solid var(--success); background: var(--surface); }
.stat-card-danger  .stat-icon { background: var(--danger-bg); color: var(--danger); }
.stat-card-danger  { border-left: 3px solid var(--danger); background: var(--surface); }
.stat-card-info    .stat-icon { background: var(--primary-light); color: var(--primary-dark); }
.stat-card-info    { border-left: 3px solid var(--primary); background: var(--surface); }
.stat-card-navy    .stat-icon { background: var(--slate-100); color: var(--slate-700); }
.stat-card-navy    { border-left: 3px solid var(--slate-600); background: var(--surface); }
.stat-card-warning .stat-icon { background: var(--warning-bg); color: #9a5b00; }
.stat-card-warning { border-left: 3px solid var(--warning); background: var(--surface); }

/* ==========================================================================
   13a. WARD STAT STRIP
   The six figures a ward clerk reads together: who is here, how many beds
   are left, and where the money stands. They are one instrument panel, not
   six loose cards, so they share a single bordered ground with hairline
   dividers. Each tile carries its meaning twice — a tinted icon chip and a
   matching top rule — and the money pair sits on a faint ground so cash
   never blurs into the census.
   ========================================================================== */
.ward-stats {
    display: grid;
    /* auto-fit, not a fixed track count: the strip is reused with four tiles
       (admission list) and six (active IPD). Empty tracks would otherwise
       leave the backing colour showing as a gap on the short version. */
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.ward-stat {
    background: var(--surface);
    padding: 12px 14px 13px;
    border-top: 2px solid var(--slate-300);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.ward-stat-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    font-size: 15px;
    background: var(--slate-100);
    color: var(--slate-600);
}
.ward-stat-body { min-width: 0; flex: 1 1 auto; }
.ward-stat-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ward-stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.4px;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.ward-stat-value .cur {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 1px;
}
/* Meta stays on one line — a wrapped caption makes the tile taller than its
   neighbours and breaks the strip's baseline. */
.ward-stat-meta {
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ward-stat.is-primary { border-top-color: var(--primary); }
.ward-stat.is-primary .ward-stat-icon { background: var(--primary-light); color: var(--primary-dark); }
.ward-stat.is-success { border-top-color: var(--success); }
.ward-stat.is-success .ward-stat-icon { background: var(--success-bg); color: var(--success); }
.ward-stat.is-warning { border-top-color: var(--warning); }
.ward-stat.is-warning .ward-stat-icon { background: var(--warning-bg); color: #9a5b00; }
.ward-stat.is-info { border-top-color: var(--info); }
.ward-stat.is-info .ward-stat-icon { background: var(--info-bg); color: var(--info); }
.ward-stat.is-danger { border-top-color: var(--danger); }
.ward-stat.is-danger .ward-stat-icon { background: var(--danger-bg); color: var(--danger); }

/* The money pair reads as its own half of the strip */
.ward-stat.is-money { background: var(--surface-muted); }
.ward-stat.is-money .ward-stat-value { font-size: 20px; }
.ward-stat.is-money.is-danger  .ward-stat-value { color: var(--danger); }
.ward-stat.is-money.is-success .ward-stat-value { color: var(--success); }

/* Occupancy runs as a hairline under the bed tile it belongs to */
.ward-stat-bar {
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    margin-top: 6px;
    overflow: hidden;
}
.ward-stat-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--warning);
}

@media (max-width: 1199.98px) {
    .ward-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 575.98px) {
    .ward-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ward-stat { padding: 10px 11px 11px; gap: 8px; }
    .ward-stat-icon { width: 28px; height: 28px; font-size: 13px; }
    .ward-stat-label { font-size: 10.5px; }
    .ward-stat-value { font-size: 19px; }
    .ward-stat.is-money .ward-stat-value { font-size: 16px; }
    .ward-stat-meta { display: none; }
}

/* ==========================================================================
   13c. ACCOUNTS DASHBOARD
   The page answers three separate questions and used to answer all of them
   with the same centred card: what we hold right now, what moved today, and
   what has moved ever. So the hierarchy now matches the question. The balance
   in hand is one hero figure with its account split beside it — the single
   bold element on the page. Today's movement is a four-tile flow strip in the
   ward-strip language. The lifetime totals are a quiet one-line rail, because
   they are reference, not news. Every figure is set in tabular numerals so
   the columns line up when read down.
   ========================================================================== */
.acct-position {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(0, 1.65fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

/* ---- The figure this page gets opened for ---- */
.acct-hero {
    background: linear-gradient(155deg, var(--primary-light) 0%, #eef7f5 62%, var(--surface) 100%);
    padding: 18px 20px 19px;
    box-shadow: inset 3px 0 0 var(--primary);
}
.acct-hero-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--primary-dark);
}
.acct-hero-value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -1.1px;
    color: var(--primary-darker);
    font-variant-numeric: tabular-nums;
    margin-top: 7px;
}
.acct-hero-value.is-negative { color: var(--danger); }
.acct-hero-value .cur { font-size: 19px; font-weight: 600; margin-right: 2px; opacity: .7; }
.acct-hero-meta { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* ---- Where that balance actually sits ---- */
.acct-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 1px;
    background: var(--border);
}
.acct-split-cell {
    background: var(--surface);
    padding: 15px 17px 16px;
    min-width: 0;
}
.acct-split-head { display: flex; align-items: center; gap: 8px; }
.acct-chip {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    font-size: 14px;
    background: var(--slate-100);
    color: var(--slate-600);
}
.acct-split-name {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acct-share {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface-muted);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    padding: 1px 7px;
    font-variant-numeric: tabular-nums;
}
.acct-split-value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.2;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    margin-top: 10px;
}
.acct-split-value.is-negative { color: var(--danger); }
.acct-split-value .cur { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-right: 1px; }
.acct-split-meta { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }
.acct-bar {
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    overflow: hidden;
    margin-top: 9px;
}
.acct-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--slate-400); }
.acct-split-cell.is-cash .acct-chip { background: var(--success-bg); color: var(--success); }
.acct-split-cell.is-cash .acct-bar > span { background: var(--success); }
.acct-split-cell.is-bank .acct-chip { background: var(--info-bg); color: var(--info); }
.acct-split-cell.is-bank .acct-bar > span { background: var(--info); }
.acct-split-cell.is-in .acct-chip { background: var(--success-bg); color: var(--success); }
.acct-split-cell.is-in .acct-bar > span { background: var(--success); }
.acct-split-cell.is-out .acct-chip { background: var(--danger-bg); color: var(--danger); }
.acct-split-cell.is-out .acct-bar > span { background: var(--danger); }

/* ---- Band label: names the timeframe the figures under it belong to ---- */
.acct-band-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 9px;
}
.acct-band-head h6 {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-muted);
    white-space: nowrap;
}
.acct-band-line { flex: 1 1 auto; height: 1px; background: var(--border); }
.acct-band-date {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Today's movement: direction is carried by the chip and the top rule ---- */
.acct-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.acct-flow-tile {
    background: var(--surface);
    padding: 13px 15px 14px;
    border-top: 2px solid var(--slate-300);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.acct-flow-tile .acct-chip { width: 32px; height: 32px; font-size: 15px; }
.acct-flow-body { min-width: 0; flex: 1 1 auto; }
.acct-flow-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acct-flow-value {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.2;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.acct-flow-value .cur { font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-right: 1px; }
/* A quiet day should read as quiet, not as four bold zeros */
.acct-flow-value.is-idle { color: var(--text-faint); }
.acct-flow-value.is-idle .cur { color: var(--text-faint); }
.acct-flow-meta {
    font-size: 11.5px;
    color: var(--text-faint);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acct-flow-tile.is-in { border-top-color: var(--success); }
.acct-flow-tile.is-in .acct-chip { background: var(--success-bg); color: var(--success); }
.acct-flow-tile.is-in .acct-flow-value:not(.is-idle) { color: var(--success); }
.acct-flow-tile.is-out { border-top-color: var(--danger); }
.acct-flow-tile.is-out .acct-chip { background: var(--danger-bg); color: var(--danger); }
.acct-flow-tile.is-out .acct-flow-value:not(.is-idle) { color: var(--danger); }
.acct-flow-tile.is-move { border-top-color: var(--warning); }
.acct-flow-tile.is-move .acct-chip { background: var(--warning-bg); color: #9a5b00; }
.acct-flow-tile.is-net {
    border-top-color: var(--primary);
    background: var(--surface-muted);
}
.acct-flow-tile.is-net .acct-chip { background: var(--primary-light); color: var(--primary-dark); }
.acct-flow-tile.is-net .acct-flow-value:not(.is-idle) { color: var(--primary-darker); }
.acct-flow-tile.is-net.is-short .acct-flow-value:not(.is-idle) { color: var(--danger); }

/* ---- Lifetime totals: reference, so they get one line and no chrome ---- */
.acct-rail {
    display: flex;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.acct-rail-item {
    flex: 1 1 190px;
    min-width: 0;
    padding: 11px 15px 12px;
    border-left: 1px solid var(--border-soft);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.acct-rail-item:first-child { border-left: 0; }
.acct-rail-item.is-net { background: var(--surface-muted); }
.acct-rail-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acct-rail-value {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.acct-rail-value.is-in { color: var(--success); }
.acct-rail-value.is-out { color: var(--danger); }
.acct-rail-value.is-move { color: #9a5b00; }
.acct-rail-value.is-net { color: var(--primary-dark); }
.acct-rail-value.is-net.is-short { color: var(--danger); }

/* ---- Recent transactions read as a ledger, not a grid of boxes ---- */
.acct-ledger td { vertical-align: middle; }
.acct-ledger .led-date {
    font-weight: 600;
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.acct-ledger .led-acc { font-weight: 600; color: var(--text-body); white-space: nowrap; }
.acct-ledger .led-acc .bi { color: var(--text-faint); margin-right: 4px; }
.acct-ledger .led-ref { font-size: 12px; color: var(--text-muted); }
.acct-ledger .led-ref .led-id { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.acct-ledger .led-desc { color: var(--text-muted); }
.acct-ledger .led-num {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* A 0.00 stays in place so the columns still line up, but it drops to a
       faint weight — the eye tracks the side that actually carries the amount */
    color: var(--text-faint);
    font-weight: 500;
}
.acct-ledger .led-num.is-in { color: var(--success); font-weight: 700; }
.acct-ledger .led-num.is-out { color: var(--danger); font-weight: 700; }

.acct-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}
.acct-tag.is-income { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.acct-tag.is-expense { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.acct-tag.is-transfer { background: var(--warning-bg); border-color: var(--warning-border); color: #9a5b00; }
.acct-tag.is-advance { background: var(--info-bg); border-color: var(--info-border); color: var(--info); }

/* ---- Running-balance ledger (cash / bank statement) ----------------------
   In a statement the balance column is the spine — it is the only figure the
   reader tracks down the page. It gets a faint ground and a hairline left rule
   so the eye can run it without re-finding the column on every row. */
.acct-ledger .led-bal {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-main);
    background: var(--surface-muted);
    box-shadow: inset 1px 0 0 var(--border-soft);
}
.acct-ledger .led-bal.is-short { color: var(--danger); }
.table-hover.acct-ledger > tbody > tr:hover > .led-bal { background-color: #e8eef1 !important; }

/* The carried-in balance is a boundary, not a transaction */
.acct-ledger tr.led-opening td {
    background: var(--primary-light);
    color: var(--primary-darker);
    font-weight: 600;
    border-bottom: 1px solid var(--primary-soft);
}
.acct-ledger tr.led-opening .led-bal {
    background: var(--primary-soft);
    color: var(--primary-darker);
    box-shadow: none;
}
.acct-ledger tr.led-opening .bi { color: var(--primary); margin-right: 5px; }

/* Closing row: the figure the whole page was opened to find */
.acct-ledger tfoot th {
    background: var(--surface-sunken);
    border-top: 2px solid var(--border-strong);
    font-size: var(--fs-base);
    padding: 10px;
    vertical-align: middle;
}
.acct-ledger tfoot th.led-foot-label {
    text-align: right;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .07em;
    color: var(--text-muted);
}
.acct-ledger tfoot th.led-num { font-variant-numeric: tabular-nums; }
.acct-ledger tfoot th.led-bal {
    background: var(--primary-light);
    color: var(--primary-darker);
    box-shadow: inset 1px 0 0 var(--primary-soft);
    font-size: 15px;
}
.acct-ledger tfoot th.led-bal.is-short { color: var(--danger); }

@media (max-width: 991.98px) {
    .acct-position { grid-template-columns: minmax(0, 1fr); }
    .acct-hero-value { font-size: 31px; }
}
@media (max-width: 575.98px) {
    .acct-hero { padding: 15px 16px 16px; }
    .acct-hero-value { font-size: 27px; }
    .acct-split-cell { padding: 13px 14px 14px; }
    .acct-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .acct-flow-tile { padding: 11px 12px 12px; gap: 8px; }
    .acct-flow-tile .acct-chip { width: 28px; height: 28px; font-size: 13px; }
    .acct-flow-value { font-size: 17px; }
    .acct-flow-meta { display: none; }
    .acct-band-head { margin-top: 16px; }
    .acct-rail-item {
        flex: 1 1 100%;
        border-left: 0;
        border-top: 1px solid var(--border-soft);
    }
    .acct-rail-item:first-child { border-top: 0; }
}

/* ==========================================================================
   13e. SERVICE CATALOGUE
   The price list is a reference table, so the service name carries the row and
   everything secondary — group, who it relates to, discount ceiling — drops to
   a line of small flags underneath instead of claiming its own column.
   ========================================================================== */

/* A long add-form reads as three questions, not fourteen fields */
.svc-group { padding-bottom: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.svc-group:last-of-type { border-bottom: 0; margin-bottom: 6px; }
.svc-group-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--primary);
    margin-bottom: 10px;
}

/* Side by side once there is room: the divider turns vertical */
.svc-cols .svc-group { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
@media (min-width: 992px) {
    .svc-cols > .svc-col + .svc-col { border-left: 1px solid var(--border-soft); }
}

/* A switch with its consequence spelled out beside it */
.svc-toggle {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
    cursor: pointer;
    margin-bottom: 8px;
}
.svc-toggle > .form-check-input { margin: 2px 0 0; flex: 0 0 auto; }
.svc-toggle-body { min-width: 0; }
.svc-toggle-name { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-main); }
.svc-toggle-note { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.svc-toggle:has(> input:checked) { border-color: var(--primary-soft); background: var(--primary-light); }
.svc-toggle:has(> input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }

.svc-table .svc-name { font-size: 13px; font-weight: 600; color: var(--text-main); line-height: 1.25; }
.svc-table .svc-sub { font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.svc-table .svc-cell { font-size: 12.5px; color: var(--text-body); }
.svc-table .svc-nil { color: var(--text-faint); }
.svc-table .svc-unit { font-size: 10.5px; font-weight: 600; color: var(--text-faint); margin-left: 2px; }
.svc-table .led-num {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-main);
}
.svc-table .led-num.svc-off { color: var(--text-faint); font-weight: 400; }

/* Secondary attributes ride under the name as quiet flags */
.svc-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.svc-flag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    background: var(--slate-50);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
}
.svc-flag .bi { font-size: 10px; color: var(--text-faint); }

/* ==========================================================================
   13d. FUND TRANSFER
   A transfer is not a list of fields, it is a route: money leaves one account
   and lands in another. So the form leads with that route — source on the
   left, destination on the right, a swap between them — and every option
   carries its live balance, because the one thing the clerk needs to know
   before moving money is whether the source has it.
   ========================================================================== */
.xfer-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 12px;
}
.xfer-side {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    padding: 11px 12px 12px;
    min-width: 0;
}
.xfer-side-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-body);
    margin-bottom: 9px;
}
.xfer-side-label .bi { font-size: 15px; }
.xfer-side.is-source .xfer-side-label { color: var(--danger); }
.xfer-side.is-target .xfer-side-label { color: var(--success); }

/* Each account is a pickable card, not a line in a dropdown */
.xfer-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    margin-bottom: 7px;
    transition: border-color .12s ease, background .12s ease;
}
.xfer-opt:last-child { margin-bottom: 0; }
.xfer-opt:hover { border-color: var(--border-strong); }
.xfer-opt > input { position: absolute; opacity: 0; pointer-events: none; }
.xfer-opt:has(> input:checked) {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: inset 2px 0 0 var(--primary);
}
.xfer-opt:has(> input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }
/* The destination cannot be the source — the option greys out rather than
   disappearing, so the row never reflows under the cursor */
.xfer-opt.is-blocked {
    opacity: .42;
    cursor: not-allowed;
    background: var(--surface-sunken);
}
.xfer-opt-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    font-size: 14px;
    background: var(--slate-100);
    color: var(--slate-600);
}
.xfer-opt:has(> input:checked) .xfer-opt-icon { background: var(--primary-soft); color: var(--primary-dark); }
.xfer-opt-body { min-width: 0; flex: 1 1 auto; }
.xfer-opt-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}
.xfer-opt-bal {
    font-size: 11.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}
.xfer-opt:has(> input:checked) .xfer-opt-name,
.xfer-opt:has(> input:checked) .xfer-opt-bal { color: var(--primary-darker); }

/* The swap sits on the route line itself */
.xfer-swap {
    align-self: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--primary);
    font-size: 15px;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: background .12s ease, color .12s ease, transform .18s ease;
}
.xfer-swap:hover { background: var(--primary-light); }
.xfer-swap.is-turning { transform: rotate(180deg); }

/* Amount is the decision on this page, so it gets the size */
.xfer-amount { position: relative; }
.xfer-amount > .cur {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-faint);
    pointer-events: none;
}
.xfer-amount > .form-control {
    height: 50px;
    padding-left: 34px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.4px;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

/* One line of plain language confirming what the button will do */
.xfer-recap {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--primary-light);
    border: 1px solid var(--primary-soft);
    color: var(--primary-darker);
    font-size: 12.5px;
}
.xfer-recap .bi { color: var(--primary); }
.xfer-recap b { font-variant-numeric: tabular-nums; }
.xfer-recap.is-invalid {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: #9a5b00;
}
.xfer-recap.is-invalid .bi { color: #9a5b00; }

@media (max-width: 575.98px) {
    .xfer-route { grid-template-columns: minmax(0, 1fr); gap: 9px; }
    .xfer-swap { justify-self: center; transform: rotate(90deg); }
    .xfer-swap.is-turning { transform: rotate(270deg); }
    .xfer-amount > .form-control { height: 46px; font-size: 18px; }
}

/* ==========================================================================
   13b. DASHBOARD
   KPI band, finance band, panels and quick links. These replace the
   inline-styled circles index.php used to hand-roll.
   ========================================================================== */

/* ---- KPI card: accent rail on top, icon left, number right ---- */
.kpi-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 15px 15px 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 13px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
[class*="col-"] > .kpi-card { height: 100%; }
.kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--kpi-accent, var(--primary));
}
.kpi-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}
.kpi-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 20px;
    background: var(--kpi-tint, var(--primary-light));
    color: var(--kpi-accent, var(--primary));
}
.kpi-text { min-width: 0; }
.kpi-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kpi-value {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.8px;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}
.kpi-meta { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }

.kpi-primary { --kpi-accent: var(--primary);    --kpi-tint: var(--primary-light); }
.kpi-success { --kpi-accent: var(--success);    --kpi-tint: var(--success-bg); }
.kpi-slate   { --kpi-accent: var(--slate-600);  --kpi-tint: var(--slate-100); }
.kpi-info    { --kpi-accent: var(--info);       --kpi-tint: var(--info-bg); }
.kpi-danger  { --kpi-accent: var(--danger);     --kpi-tint: var(--danger-bg); }
.kpi-warning { --kpi-accent: var(--warning);    --kpi-tint: var(--warning-bg); }

/* ---- Finance tile: left rail, number leads, glyph watermark right ---- */
.fin-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--fin-accent, var(--primary));
    border-radius: var(--radius-md);
    padding: 13px 15px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
[class*="col-"] > .fin-card { height: 100%; }
.fin-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.fin-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.fin-value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.15;
    color: var(--fin-accent, var(--primary));
    font-variant-numeric: tabular-nums;
}
.fin-value .taka { font-size: 14px; font-weight: 600; opacity: .75; margin-right: 1px; }
.fin-card > .bi {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: var(--fin-accent, var(--primary));
    opacity: .13;
    pointer-events: none;
}
.fin-income  { --fin-accent: var(--success); }
.fin-expense { --fin-accent: var(--danger); }
.fin-month   { --fin-accent: var(--primary); }
.fin-mexp    { --fin-accent: var(--warning); }

/* ---- Dashboard panel: a card with a quiet, labelled head ---- */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Only stretch to full height when sitting in a grid column, so side-by-side
   panels line up. A standalone panel must size to its own content — otherwise
   it inherits the page height and leaves a large blank area underneath. */
[class*="col-"] > .panel { height: 100%; }
.panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-muted);
}
.panel-head .bi { color: var(--primary); font-size: 14px; }
.panel-title {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-body);
    margin: 0;
}
.panel-head .panel-action { margin-left: auto; font-size: 11px; }
.panel-body { padding: 15px; flex: 1 1 auto; }
.panel-body-flush { padding: 0; }

/* A table dropped straight into a panel must not re-round its head corners */
.panel > .table-responsive,
.panel > .panel-body-flush { border-radius: 0; }
.panel > .table-responsive > .table,
.panel .panel-body-flush > .table { margin-bottom: 0; }
.panel > .table-responsive > .table > thead th,
.panel .panel-body-flush > .table > thead th { border-radius: 0; }
.panel > .table-responsive > .table > tbody > tr:last-child > td,
.panel .panel-body-flush > .table > tbody > tr:last-child > td { border-bottom: none; }

/* Empty states inside a table cell shouldn't inherit the cell's padding */
.table td > .empty-state { padding: 34px 18px; }

/* Occupancy read-out inside a panel */
.occupancy-figure {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.8px;
    line-height: 1;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}
.occupancy-figure small {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-faint);
    letter-spacing: 0;
}
.occupancy-bar { height: 9px; border-radius: var(--radius-pill); background: var(--surface-sunken); }
.occupancy-bar .progress-bar { border-radius: var(--radius-pill); background: var(--primary); }

/* Three-up mini figures under a divider */
.mini-figures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 14px;
}
.mini-figure { background: var(--surface); padding: 9px 8px; text-align: center; }
.mini-figure .mf-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.mini-figure .mf-value {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

/* ---- Quick links ---- */
.quick-link {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 11px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-body);
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, transform .15s ease, color .15s ease;
}
.quick-link .bi {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}
.quick-link:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
    transform: translateY(-2px);
}
.quick-link:hover .bi { background: var(--primary); color: #fff; }

/* Legacy hooks kept so any page still using them stays consistent */
.dash-kpi .rounded-circle { box-shadow: none; border-radius: var(--radius-md) !important; }
.dash-kpi .fs-3 { font-size: 22px !important; font-weight: 700; letter-spacing: -.4px; color: var(--text-main); }
.dash-fin .fs-4 { font-size: 18px !important; font-weight: 700; letter-spacing: -.3px; }
.dash-kpi .text-muted.small,
.dash-fin .text-muted.small {
    font-size: 10.5px !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}

/* Bootstrap subtle backgrounds — align to the palette */
.bg-primary-subtle   { background-color: var(--primary-light) !important; }
.text-primary        { color: var(--primary) !important; }
.bg-success-subtle   { background-color: var(--success-bg) !important; }
.text-success        { color: var(--success) !important; }
.bg-danger-subtle    { background-color: var(--danger-bg) !important; }
.text-danger         { color: var(--danger) !important; }
.bg-warning-subtle   { background-color: var(--warning-bg) !important; }
.text-warning        { color: var(--warning) !important; }
.bg-info-subtle      { background-color: var(--info-bg) !important; }
.text-info           { color: var(--info) !important; }
.bg-secondary-subtle { background-color: var(--slate-100) !important; }
.text-secondary      { color: var(--slate-600) !important; }
.text-muted          { color: var(--text-muted) !important; }
.bg-light            { background-color: var(--surface-muted) !important; }

/* ==========================================================================
   14. REPORT SHORTCUT LINKS
   ========================================================================== */
.report-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-md);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    box-shadow: var(--shadow-xs);
}
.report-link i { font-size: 17px; transition: transform .15s ease; }
.report-link:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--border-strong);
}
.report-link:hover i { transform: translateX(2px); }

.report-link-green     { border-left-color: var(--success); }
.report-link-green i   { color: var(--success); }
.report-link-green:hover     { background: var(--success-bg); color: var(--success); }
.report-link-red       { border-left-color: var(--danger); }
.report-link-red i     { color: var(--danger); }
.report-link-red:hover       { background: var(--danger-bg); color: var(--danger); }
.report-link-primary   { border-left-color: var(--primary); }
.report-link-primary i { color: var(--primary); }
.report-link-primary:hover   { background: var(--primary-light); color: var(--primary-dark); }
.report-link-info      { border-left-color: var(--info); }
.report-link-info i    { color: var(--info); }
.report-link-info:hover      { background: var(--info-bg); color: var(--info); }
.report-link-secondary { border-left-color: var(--slate-500); }
.report-link-secondary i { color: var(--slate-500); }
.report-link-secondary:hover { background: var(--slate-100); color: var(--slate-700); }
.report-link-warning   { border-left-color: var(--warning); }
.report-link-warning i { color: var(--warning); }
.report-link-warning:hover   { background: var(--warning-bg); color: var(--warning); }
.report-link-dark      { border-left-color: var(--slate-700); }
.report-link-dark i    { color: var(--slate-700); }
.report-link-dark:hover      { background: var(--slate-100); color: var(--slate-900); }
.report-link-outline   { border-left-color: var(--border-strong); }
.report-link-outline i { color: var(--text-muted); }
.report-link-outline:hover   { background: var(--primary-light); color: var(--primary-dark); }

/* ==========================================================================
   15. BED AVAILABILITY GRID
   ========================================================================== */
.bed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 6px;
}
/* Tiles stack their two lines (bed number over rate). The global
   `.btn { display:inline-flex }` would otherwise sit them side by side,
   producing "201 ৳2100" on a single line. */
.bed-grid > .btn {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 48px;
    white-space: normal;
    padding: 6px 9px;
    font-size: 12px;
    line-height: 1.25;
    text-align: left;
    border-radius: var(--radius);
}

/* Faint bed watermark, tinted from the tile's own text colour so it works
   on both the green outline (vacant) and solid red (occupied) variants. */
.bed-grid > .btn::after {
    content: "";
    position: absolute;
    right: -7px;
    bottom: -9px;
    width: 44px;
    height: 44px;
    background-color: currentColor;
    opacity: .11;
    pointer-events: none;
    -webkit-mask: var(--bed-watermark) no-repeat center / contain;
    mask: var(--bed-watermark) no-repeat center / contain;
    transition: opacity .15s ease;
}
.bed-grid > .btn:hover::after { opacity: .17; }

/* First line: the bed number. Second line: the rate. */
.bed-grid > .btn > div:first-child {
    position: relative;
    z-index: 1;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.15;
}
.bed-grid > .btn > div:last-child {
    position: relative;
    z-index: 1;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.bed-btn {
    font-weight: 600;
    font-size: 12.5px;
}
/* Keep the rate legible once the tile flips to a solid fill. */
.bed-btn:hover > div.text-muted,
.bed-btn.active > div.text-muted,
.bed-btn:focus > div.text-muted { color: rgba(255, 255, 255, .85) !important; }

.bed-btn.active {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(21, 128, 61, .22);
}
.bed-btn.btn-outline-secondary:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-dark);
}
.ward-block h6 { font-weight: 700; margin-top: 8px; color: var(--text-main); }
.floor-block { background: var(--surface-muted); }

/* ==========================================================================
   15b. BED BOARD  (bed-plan.php)
   The read-only counterpart to section 15. This page has exactly one job:
   find the next free bed, and know who is in the others. So it is built as
   the thing it replaces — the magnetic board at the nursing station, where
   every bed is a fixed slot in an aligned grid and the eye hunts for gaps.

   The rule that drives the palette: colour is spent on status. A vacant bed
   is green and dashed where a clerk can act, an occupied bed is red carrying
   its occupant's name, and the amber hatch marks a bed out of service. Status
   is legible from across the room: free slots are sparse and dashed, taken
   slots are dense and red, so a full ward reads full at a glance.

   Everything is scoped under #bedplan. Each floor is its own card so a block
   maps to a place staff physically walk, not a divider row in a long table.
   ========================================================================== */

/* ---- Floor card + head: one block per floor ------------------------------
   Each floor gets its own card; the head is a tinted strip with an inset teal
   rail carrying the floor name and its bed/free reconciliation totals. The
   gap between floors is the global .card margin, so blocks read as separate. */
.bp-floor-card { overflow: hidden; }
.bp-floor-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
    background: var(--surface-muted);
    box-shadow: inset 3px 0 0 var(--primary);
    border-bottom: 1px solid var(--border);
}
.bp-floor-name {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--slate-700);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.bp-floor-name .bi { color: var(--primary); font-size: 13px; opacity: .8; }
/* Floor totals sit on the trailing edge as a quiet reconciliation line */
.bp-floor-sum {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.bp-floor-sum b { color: var(--text-main); font-weight: 600; }
.bp-floor-sum .sep { color: var(--border-strong); }

/* The thead is dropped per floor (five stacked dark navy heads would be
   heavy), so the column widths the header used to hold move onto the cells. */
.bp-ward-table td.bp-free      { width: 130px; }
.bp-ward-table td.bp-rate-cell { width: 110px; }

/* ---- Ward identity cell ---- */
.bp-ward-name {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
}
.bp-ward-meta {
    display: flex;
    align-items: center;
    gap: 5px 9px;
    flex-wrap: wrap;
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-muted);
}
.bp-ward-meta .bi { font-size: 11px; opacity: .75; }
/* Gender restriction is a rule, not a label — a tinted pill reads as one */
.bp-gender {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface-muted);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
}
.bp-gender.is-male   { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info); }
.bp-gender.is-female { background: var(--primary-light); border-color: var(--primary-soft); color: var(--primary-dark); }

/* ---- The board ----------------------------------------------------------
   A fixed-track grid, not a wrapped chip flow: every bed occupies the same
   footprint, so slots line up into columns a clerk can scan straight down and
   the gaps in a ward are countable at a glance. */
.bp-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 4px;
    min-width: 234px;
}
.bp-slot {
    display: block;
    min-width: 0;
    padding: 3px 6px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}
/* Bed number: an identifier, so it takes the mono face — see --font-mono */
.bp-slot-no {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.3;
    color: var(--slate-700);
    font-variant-numeric: tabular-nums;
}
/* Second line always says something — an empty line would read as a fault */
.bp-slot-who {
    font-size: 9.5px;
    line-height: 1.3;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Occupied: red, matching the status vocabulary the rest of the app already
   uses (`.badge-occupied`, the Occupied tile on the summary strip). */
.bp-slot.is-occupied {
    background: var(--danger-bg);
    border-color: var(--danger-border);
}
.bp-slot.is-occupied .bp-slot-no  { color: var(--danger); }
.bp-slot.is-occupied .bp-slot-who { color: var(--danger); opacity: .8; }

/* Hover only ever means "this slot opens a record" */
a.bp-slot:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}
a.bp-slot:hover .bp-slot-no,
a.bp-slot:hover .bp-slot-who { color: var(--primary-dark); }
a.bp-slot:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* Free: the one state worth colour. Dashed edge = an open slot, and the
   sparse second line keeps the row rhythm without inventing content. */
.bp-slot.is-vacant {
    background: var(--success-bg);
    border-color: var(--success-border);
    border-style: dashed;
}
.bp-slot.is-vacant .bp-slot-no  { color: var(--success); }
.bp-slot.is-vacant .bp-slot-who { color: var(--success); opacity: .72; }

/* Out of service: a hatch, not a third colour to compete with the other two.
   It also survives a monochrome printout as texture. */
.bp-slot.is-maintenance {
    background: repeating-linear-gradient(135deg,
                var(--warning-bg) 0 5px,
                var(--warning-border) 5px 10px);
    border-color: var(--warning-border);
}
.bp-slot.is-maintenance .bp-slot-no  { color: var(--warning); }
.bp-slot.is-maintenance .bp-slot-who { color: var(--warning); opacity: .8; }

/* An attendant bed cannot take a patient, so it is tagged, not tinted */
.bp-slot-att {
    flex: 0 0 auto;
    padding: 0 3px;
    border-radius: 2px;
    background: var(--slate-100);
    color: var(--slate-600);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .06em;
}
/* Only pushed to the trailing edge inside a slot — the legend reuses the tag
   inline, where auto margin would fling it away from its caption. */
.bp-slot-no .bp-slot-att { margin-left: auto; }
.bp-board-empty { font-size: 12px; color: var(--text-faint); font-style: italic; }

/* ---- The decision figure ------------------------------------------------
   One number per ward: how many beds you can fill right now. It replaced a
   pair of counts, a progress bar and a Yes/No badge that all said this. */
.bp-free { text-align: right; white-space: nowrap; }
.bp-free-value {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.1;
    color: var(--success);
    font-variant-numeric: tabular-nums;
}
.bp-free-of { font-size: 11px; color: var(--text-faint); margin-top: 1px; white-space: normal; }
/* A full ward is not an error either — it is a dead end, stated plainly */
.bp-free.is-full .bp-free-value {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
}
.bp-free.is-unbuilt .bp-free-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: none;
    letter-spacing: 0;
}

/* ---- Rate cell ---- */
.bp-rate { font-weight: 600; color: var(--text-main); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bp-rate .per { font-size: 10.5px; font-weight: 500; color: var(--text-faint); }

/* ---- Legend: replaces the paragraph that explained bracket notation ---- */
.bp-legend {
    display: flex;
    align-items: center;
    gap: 8px 20px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    font-size: 11.5px;
    color: var(--text-muted);
}
.bp-legend-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-faint);
}
.bp-legend-item { display: inline-flex; align-items: center; gap: 6px; }
/* Real slot fragments, so the key and the board share one vocabulary */
.bp-legend-swatch {
    flex: 0 0 auto;
    width: 30px;
    height: 17px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.bp-legend-swatch.is-occupied {
    background: var(--danger-bg);
    border-color: var(--danger-border);
}
.bp-legend-swatch.is-vacant {
    background: var(--success-bg);
    border-color: var(--success-border);
    border-style: dashed;
}
.bp-legend-swatch.is-maintenance {
    background: repeating-linear-gradient(135deg,
                var(--warning-bg) 0 5px,
                var(--warning-border) 5px 10px);
    border-color: var(--warning-border);
}

@media (max-width: 767.98px) {
    /* Narrower tracks, but not so narrow the occupant's name becomes an
       ellipsis — the name is half of what the board is for. */
    .bp-board { min-width: 0; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
    .bp-floor-sum { margin-left: 0; width: 100%; }
}

@media print {
    #bedplan .page-header-actions,
    #bedplan .bp-legend { display: none; }
    /* Hairline tints vanish on most printers — the edges have to carry it */
    .bp-slot { border-color: var(--slate-400); }
    .bp-slot.is-vacant { border-style: dashed; border-color: var(--slate-500); }
}

/* ==========================================================================
   16. DONUT + TREND CHARTS
   ========================================================================== */
.donut-wrap { flex: 0 0 auto; }
.donut {
    width: 124px; height: 124px;
    border-radius: 50%;
    position: relative;
}
.donut-hole {
    position: absolute;
    inset: 22px;
    background: var(--surface);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
}

.trend-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}
.trend-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.trend-bars-inner {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 132px;
    width: 100%;
    border-bottom: 1px solid var(--border-strong);
    background-image: none;
}
.trend-bar {
    width: 40%;
    max-width: 16px;
    min-width: 6px;
    border-radius: 3px 3px 0 0;
    min-height: 3px;
    transition: height .3s ease;
}
.trend-bar-inc { background: var(--success); }
.trend-bar-exp { background: var(--danger); }
.trend-amt {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.trend-amt-inc { color: var(--success); }
.trend-amt-exp { color: var(--danger); }
.trend-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ==========================================================================
   17. MODALS / DROPDOWNS / PAGINATION / TABS
   ========================================================================== */
.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--border-soft);
    padding: 13px 16px;
}
.modal-title { font-size: var(--fs-lg); font-weight: 600; }
.modal-body { padding: 16px; }
.modal-footer {
    border-top: 1px solid var(--border-soft);
    padding: 11px 16px;
    gap: 6px;
}
.modal-backdrop.show { opacity: .45; }

.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 5px;
    font-size: var(--fs-md);
}
.dropdown-item {
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    color: var(--text-body);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--primary-light);
    color: var(--primary-dark);
}
.dropdown-item.active, .dropdown-item:active {
    background: var(--primary);
    color: #fff;
}
.dropdown-divider { border-color: var(--border-soft); margin: 4px 0; }

.pagination { --bs-pagination-font-size: 12.5px; }
.pagination .page-link {
    border-radius: var(--radius-sm);
    margin: 0 2px;
    color: var(--text-body);
    border-color: var(--border);
    padding: 5px 10px;
}
.pagination .page-link:hover { background: var(--surface-sunken); color: var(--text-main); }
.pagination .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.pagination .page-item.disabled .page-link { color: var(--text-faint); background: var(--surface-muted); }

.nav-tabs { border-bottom: 1px solid var(--border); gap: 2px; }
.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: var(--fs-md);
    padding: 8px 13px;
    border-radius: var(--radius) var(--radius) 0 0;
}
.nav-tabs .nav-link:hover { color: var(--text-main); background: var(--surface-muted); border-bottom-color: var(--border-strong); }
.nav-tabs .nav-link.active {
    color: var(--primary);
    background: transparent;
    border-bottom-color: var(--primary);
}

.progress { height: 7px; border-radius: var(--radius-pill); background: var(--surface-sunken); }
.progress-bar { background: var(--primary); border-radius: var(--radius-pill); }

.list-group-item { border-color: var(--border-soft); padding: 9px 13px; font-size: var(--fs-md); }

/* ==========================================================================
   18. PHARMACY MEDICINE COMBOBOX
   ========================================================================== */
.medicine-widget { position: relative; }
.medicine-input { padding-right: 28px !important; }
.medicine-input::-webkit-search-cancel-button,
.medicine-input::-webkit-clear-button { display: none; }
.medicine-widget::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 11px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--text-faint);
    border-bottom: 2px solid var(--text-faint);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.medicine-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 5px;
    display: none;
}
.medicine-dropdown.open { display: block; }
.medicine-list { max-height: 220px; overflow-y: auto; }
.medicine-option {
    padding: 6px 9px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-md);
}
.medicine-option:hover,
.medicine-option.active { background: var(--primary-light); color: var(--primary-dark); }

/* Compact numeric inputs in pharmacy/billing line-item tables */
#purchaseTable input.qty,
#purchaseTable input.rate,
#medicineTable input.qty,
#medicineTable input.rate {
    padding: 2px 6px;
    font-size: 13px;
    height: 28px;
    min-height: 28px;
    text-align: right;
}
#saleForm .form-control,
#saleForm .form-select {
    padding: 5px 9px;
    font-size: var(--fs-md);
    min-height: 32px;
    height: auto;
}
#saleForm textarea.form-control { padding: 5px 9px; font-size: var(--fs-md); }

/* ==========================================================================
   19. UTILITIES / EMPTY STATES
   ========================================================================== */
.min-w-0 { min-width: 0; }

.page-body .text-center.py-5 .bi { font-size: 2.1rem; color: var(--border-strong); }
.page-body .text-center.py-5 h5 { color: var(--text-body); font-size: var(--fs-lg); }
.page-body .text-center.py-5 p { color: var(--text-muted); font-size: var(--fs-md); }

.main-content, .page-body, .card { min-width: 0; }

/* Grid columns are flex items, so they default to `min-width: auto` — the
   min-content width of their contents. A wide table therefore forces its
   column past its declared width and pushes the whole row off the right of
   the page instead of scrolling inside its own .table-responsive. */
.page-body .row > [class*="col-"] { min-width: 0; }

/* Pages that wrap their own .container-fluid inside .page-body would otherwise
   pay for the shell padding twice. */
.page-body > .container-fluid,
.page-body > .container { padding-left: 0; padding-right: 0; }

/* Scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--surface-sunken); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); z-index: 1031; }
    .sidebar.show { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .main-content { margin-left: 0; }
    .topbar .btn-toggle-sidebar { display: block; }

    .module-menu { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .module-menu::-webkit-scrollbar { height: 0; }
    .module-menu .d-flex { flex-wrap: nowrap; }
    .module-menu .btn { white-space: nowrap; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .page-body { padding: 14px; }
    .topbar { padding: 0 14px; }
    .topbar .app-title { max-width: 62vw; overflow: hidden; }
    .topbar .app-title .topbar-org-name {
        max-width: 100%;
        font-size: 13px !important;
        white-space: normal;
        line-height: 1.2;
    }
}

@media (max-width: 575.98px) {
    :root { --page-pad-x: 12px; --page-pad-y: 12px; }

    .page-body { padding: 12px; }
    .topbar { padding: 0 12px; min-height: 50px; }
    .topbar .app-title { max-width: 62vw; overflow: hidden; }
    .topbar .app-title .topbar-org-name {
        max-width: 100%;
        font-size: 12px !important;
        white-space: normal;
        line-height: 1.2;
    }
    .topbar .app-title::before {
        height: 2px;
        width: 56px;
        margin-top: 1px;
    }
    .topbar-org-name { font-size: 12px !important; }
    .topbar .user-chip { gap: 6px; }
    .topbar .user-chip .user-name-text,
    .topbar .user-chip .user-role-text { display: none; }
    .module-menu { top: 50px; padding: 6px 12px !important; }

    .card-body { padding: 12px; }
    .card-header { padding: 10px 12px; font-size: 13px; }

    /* Prevent iOS auto-zoom on focus */
    .form-control, .form-select, .input-group-text { font-size: 16px; }
    .form-label { font-size: 11.5px; }

    .page-title { font-size: 16px; }
    .page-subtitle { font-size: 12px; margin-bottom: 10px; }

    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl { margin: .4rem auto; }
    .modal-body { padding: 13px; }
    .modal-header, .modal-footer { padding: 11px 13px; }

    .bed-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
    .bed-grid > .btn { min-height: 46px; padding: 5px 8px; font-size: 12px; }
    .bed-grid > .btn::after { width: 38px; height: 38px; }

    .btn { padding: 7px 13px; font-size: 14px; }
    .btn-sm { padding: 5px 10px; font-size: 13px; }

    /* Stack 2-3-across form fields so inputs stay touch friendly.
       KPI/stat blocks (no form control inside) are left alone. */
    .row > .col-4:has(.form-control),
    .row > .col-4:has(.form-select),
    .row > .col-6:has(.form-control),
    .row > .col-6:has(.form-select) {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Compact scrollable tables */
    .table-responsive .table { white-space: nowrap; }
    .table-responsive .table th,
    .table-responsive .table td { font-size: 12px; padding: 6px 8px; }
    .table-responsive::-webkit-scrollbar { height: 4px; }
    .table-responsive::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }

    /* Dashboard KPIs */
    .page-body .fs-3 { font-size: 18px !important; }
    .page-body .fs-4 { font-size: 16px !important; }
    .page-body .rounded-circle { width: 40px !important; height: 40px !important; }
    .page-body .rounded-circle i { font-size: 1rem !important; }
    .page-body .d-flex.gap-2 > .btn { padding: 6px 10px; font-size: 12.5px; }
    .page-body .row.g-3 { --bs-gutter-y: 8px; }
    .page-body .row.g-3 > [class*="col"] { padding-bottom: 0; }
    .dash-kpi .rounded-circle { width: 38px !important; height: 38px !important; }
    .dash-kpi .fs-3 { font-size: 18px !important; }
    .dash-fin { padding: .7rem !important; }
    .dash-fin .fs-4 { font-size: 15px !important; }

    /* Page header action buttons go full width */
    .page-body > .d-flex.flex-wrap.justify-content-between .btn { width: 100%; }

    /* Admission list quick stats */
    .quick-stats .card-body { padding: 8px 10px; }
    .quick-stats .card-body .text-muted,
    .quick-stats .card-body .small { font-size: 10.5px; }
    .quick-stats .card-body h1,
    .quick-stats .card-body h2,
    .quick-stats .card-body h3,
    .quick-stats .card-body h4,
    .quick-stats .card-body h5 { font-size: 17px; margin: 0; }
    .quick-stats .card-body .bi { font-size: 18px; }

    /* Active IPD header + filters */
    .active-head { flex-wrap: wrap; gap: 8px; }
    .active-head h3 { font-size: 17px; }
    .active-head p { font-size: 12px; }
    .active-head .page-title { font-size: 17px; }
    .active-head .page-subtitle { font-size: 12px; }
    .active-head .btn { padding: 6px 12px; font-size: 13px; }
    .active-filters .form-label { font-size: 11px; margin-bottom: 2px; }
    .active-filters .form-control,
    .active-filters .form-select { padding: 5px 9px; font-size: 16px; }
    .active-filters .btn { padding: 5px 10px; font-size: 13px; }

    /* Admission view action bar */
    .view-action-bar { flex-wrap: wrap; gap: 6px; }
    .view-action-bar h4 { width: 100%; }
    .view-action-btns { display: flex; flex-wrap: wrap; gap: 6px; }
    .view-action-btns .btn,
    .view-action-bar .btn {
        margin: 0;
        padding: 7px 12px;
        font-size: 13px;
        white-space: nowrap;
        flex: 1 1 auto;
    }

    /* Pharmacy */
    .stock-col { display: none; }
    .medicine-input { font-size: 16px !important; }
    .medicine-option { font-size: 13px; padding: 6px 9px; }
    .pharmacy-actions .card-header { padding: 8px 12px; font-size: 13px; }
    .pharmacy-actions .card-body h3 { font-size: 17px; margin-bottom: 8px; }
    .pharmacy-actions .card-body .btn { padding: 6px 12px; font-size: 13px; }

    /* Accounts dashboard */
    .accounts-stats .card-body { padding: 10px 12px; }
    .accounts-stats h6 { font-size: 12px; margin-bottom: 2px; }
    .accounts-stats h3 { font-size: 18px; margin-bottom: 0; }
    .accounts-stats h4 { font-size: 16px; margin-bottom: 0; }
    .accounts-stats .card-body h3.text-primary,
    .accounts-stats .card-body h3.text-success,
    .accounts-stats .card-body h3.text-danger,
    .accounts-stats .card-body h3.text-warning { font-size: 18px; }

    /* Admission / compact form pages */
    #admissionPage .form-control,
    #admissionPage .form-select,
    .compact-page .form-control,
    .compact-page .form-select {
        padding: 5px 9px;
        font-size: 16px;
        min-height: 0;
        height: auto;
    }
    #admissionPage .form-control-sm,
    .compact-page .form-control-sm { padding: 3px 6px; font-size: 13px; }
    #admissionPage .form-label,
    .compact-page .form-label { font-size: 11px; margin-bottom: 2px; }
    #admissionPage .row,
    .compact-page .row { --bs-gutter-y: 5px; }
    #admissionPage .mb-2,
    .compact-page .mb-2 { margin-bottom: 5px; }
    #admissionPage .mb-3,
    .compact-page .mb-3 { margin-bottom: 8px; }
    #admissionPage .g-3,
    .compact-page .g-3 { --bs-gutter-y: 6px; }
    #admissionPage .d-flex.gap-1,
    .compact-page .d-flex.gap-1 { gap: 4px; }
    #admissionPage .input-group-text,
    #admissionPage .input-group .btn,
    .compact-page .input-group-text,
    .compact-page .input-group .btn { padding: 5px 9px; font-size: 13px; }
    #admissionPage .card-header,
    .compact-page .card-header { padding: 9px 12px; font-size: 13.5px; }
    .compact-page .card-body { padding: 10px 12px; }
    .compact-page .btn:not(.btn-sm):not(.addRow):not(.removeRow) { padding: 6px 12px; font-size: 13px; }

    /* Report date filters */
    .no-print form .col-md-5,
    .no-print form .col-md-4,
    .no-print form .col-md-3,
    .no-print form .col-md-6,
    .no-print form .col-lg-3 {
        flex: 0 0 auto;
        width: 50%;
        max-width: 50%;
    }
    .no-print form .col-md-2,
    .no-print form .col-md-4:has(button),
    .no-print form .col-md-3:has(button) {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
    .no-print form input[type="date"],
    .no-print form .form-select {
        font-size: 16px;
        padding: 6px 9px;
        min-height: 0;
        height: auto;
    }
    .no-print form label {
        font-size: 11px;
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .no-print form .col-md-2.d-grid .btn,
    .no-print form .col-md-4.d-grid .btn,
    .no-print form .col-md-3.d-grid .btn,
    .no-print form .col-lg-3.d-grid .btn { padding: 7px 10px; font-size: 13.5px; }

    /* Expense summary cards, 2-per-row */
    .page-body .col-6.col-md-3 .card .card-body { padding: 11px; }
    .page-body .col-6.col-md-3 .card .card-body .rounded-3 { padding: 8px; }
    .page-body .col-6.col-md-3 .card .card-body .fs-5 { font-size: 15px !important; }
    .page-body .col-6.col-md-3 .card .card-body .text-muted.small {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ==========================================================================
   20b. MOBILE ENHANCEMENTS
   --------------------------------------------------------------------------
   Density stays compact on desktop and tablet; phones get comfortable
   44px touch targets. Wide tables keep their first column pinned so the
   patient/description column stays readable while swiping sideways.
   All CSS-only — no page markup is required.
   ========================================================================== */

/* --- New page chrome / dashboard components on small screens ------------- */
@media (max-width: 991.98px) {
    .kpi-card { padding: 12px; gap: 10px; }
    .kpi-icon { width: 38px; height: 38px; font-size: 17px; border-radius: var(--radius); }
    .kpi-value { font-size: 21px; letter-spacing: -.6px; }
    .kpi-label { font-size: 9.5px; }
    .fin-value { font-size: 17px; }
    .fin-card > .bi { font-size: 24px; right: 8px; }
}

@media (max-width: 575.98px) {
    /* Header stacks: icon + title on one line, actions full-width below */
    .page-header { gap: 10px; padding-bottom: 11px; margin-bottom: 13px; }
    .page-header-icon { width: 34px; height: 34px; font-size: 16px; }
    .page-header-actions { margin-left: 0; width: 100%; }
    .page-header-actions .btn { flex: 1 1 auto; justify-content: center; }

    .kpi-card { flex-direction: column; align-items: flex-start; gap: 8px; }
    .kpi-value { font-size: 19px; }

    .fin-card > .bi { display: none; }
    .fin-value { font-size: 16px; }

    /* Three mini figures are too tight on a phone — go two-up */
    .mini-figures { grid-template-columns: repeat(2, 1fr); }
    .mini-figure:last-child { grid-column: 1 / -1; }

    .filter-bar { padding: 11px; }
    .empty-state { padding: 32px 16px; }
    .empty-state-icon { width: 48px; height: 48px; font-size: 20px; }

    /* Form action rows go full width and stack in reverse so the primary
       action sits on top, where the thumb lands */
    form .form-actions { flex-direction: column-reverse; align-items: stretch; }
    form .form-actions .btn { width: 100%; min-height: 44px; }
    form .form-actions .form-actions-note { margin: 0 0 4px; text-align: center; }
}

/* --- Safe-area (notch / home indicator) ---------------------------------- */
@supports (padding: max(0px)) {
    .topbar {
        padding-left: max(var(--page-pad-x), env(safe-area-inset-left));
        padding-right: max(var(--page-pad-x), env(safe-area-inset-right));
    }
    .sidebar {
        padding-left: env(safe-area-inset-left);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .page-body {
        padding-left: max(var(--page-pad-x), env(safe-area-inset-left));
        padding-right: max(var(--page-pad-x), env(safe-area-inset-right));
        padding-bottom: max(var(--page-pad-y), env(safe-area-inset-bottom));
    }
    .module-menu {
        padding-left: max(var(--page-pad-x), env(safe-area-inset-left)) !important;
        padding-right: max(var(--page-pad-x), env(safe-area-inset-right)) !important;
    }
}

/* --- Never let a stray wide element scroll the whole page ---------------- */
@media (max-width: 991.98px) {
    /* `clip` rather than `hidden`: hidden would make body a scroll container
       and break the sticky module menu. */
    html, body { overflow-x: clip; }
    .page-body img,
    .page-body canvas,
    .page-body svg,
    .page-body pre { max-width: 100%; height: auto; }
    .page-body .row { --bs-gutter-x: 12px; }

    /* Off-canvas sidebar: own scroll + momentum, never the page behind it */
    .sidebar {
        width: min(84vw, 300px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .sidebar-backdrop.show { backdrop-filter: blur(2px); }

    /* Bootstrap grid columns that hold a form control stack rather than squeeze */
    .row > [class*="col-md-"]:has(> .form-control),
    .row > [class*="col-md-"]:has(> .form-select),
    .row > [class*="col-lg-"]:has(> .form-control),
    .row > [class*="col-lg-"]:has(> .form-select) { min-width: 0; }

    /* Button groups wrap instead of overflowing (but keep action buttons in
       table rows on one line — the table container scrolls horizontally) */
    .page-body .btn-group:not(.btn-group-vertical) { flex-wrap: wrap; }
    .table-responsive .btn-group,
    .table .btn-group { flex-wrap: nowrap !important; }

    /* Dropdowns can't hang off-screen */
    .dropdown-menu { max-width: calc(100vw - 24px); }
    .dropdown-menu-end { right: 0; left: auto; }
}

/* --- Tablet: 768px - 991.98px -------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    :root { --page-pad-x: 16px; --page-pad-y: 14px; }

    .page-body { padding: 14px 16px; }
    .topbar { padding: 0 16px; }
    .module-menu { padding: 7px 16px !important; }

    /* 4-across stat blocks are cramped on a tablet — go 2-across */
    .row > .col-md-3:has(.stat-card),
    .row > .col-md-3:has(.dash-kpi),
    .row > .col-md-3:has(.dash-fin),
    .accounts-stats > .col-md-3,
    .quick-stats > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .stat-card .stat-value { font-size: 19px; }
    .modal-dialog.modal-xl { max-width: calc(100vw - 40px); }
    .table th, .table td { padding: 7px 9px; }
}

/* --- Phone: comfortable touch targets ------------------------------------ */
@media (max-width: 767.98px) {
    /* Primary controls reach the 44px guideline.
       Height comes from padding, not flex — several buttons (bed grid,
       stacked labels) rely on normal block flow inside the button. */
    .btn {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .btn-sm { padding-top: 8px; padding-bottom: 8px; }
    .btn-lg { padding-top: 13px; padding-bottom: 13px; }

    /* Bed grid keeps its own compact geometry. Selector must match the
       base rule's specificity (0,2,0) or it silently loses. */
    .bed-grid > .btn {
        padding: 6px 8px;
        min-height: 50px;
        height: auto;
    }

    .form-control,
    .form-select,
    .input-group-text { min-height: 44px; }
    .form-control-sm, .form-select-sm { min-height: 38px; }
    textarea.form-control { min-height: 76px; }

    /* These pages deliberately set min-height:0 for desktop density.
       On a phone they still need a tappable control, so re-assert it. */
    #admissionPage .form-control,
    #admissionPage .form-select,
    .compact-page .form-control,
    .compact-page .form-select,
    .no-print form input[type="date"],
    .no-print form .form-select {
        min-height: 44px;
        height: auto;
    }
    #admissionPage .form-control-sm,
    .compact-page .form-control-sm { min-height: 38px; }

    /* Checkboxes and radios are far too small to tap by default */
    .form-check-input { width: 1.2em; height: 1.2em; margin-top: .15em; }
    .form-check { min-height: 32px; padding-left: 1.9em; }
    .form-check-label { padding-top: 2px; }

    /* Sidebar and menus */
    .sidebar-menu li > a { min-height: 44px; }
    .module-menu .btn { min-height: 40px; }
    .pagination .page-link {
        min-width: 40px;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nav-tabs .nav-link { min-height: 42px; display: flex; align-items: center; }
    .dropdown-item { min-height: 42px; display: flex; align-items: center; }

    /* Icon-only buttons inside table rows */
    .table .btn-sm:not(.bed-btn),
    .table .btn-group .btn {
        min-width: 38px;
        min-height: 38px;
        padding: 6px 9px;
    }
    .table td .d-flex.gap-1,
    .table td .btn-group { gap: 6px !important; }

    /* Close buttons are a common mis-tap */
    .btn-close { width: 1.1em; height: 1.1em; padding: 12px; }
}

/* --- Phone: wide tables keep the first column pinned ---------------------- */
@media (max-width: 767.98px) {
    .table-responsive { position: relative; }

    /* The scroll container must not clip the sticky cell */
    .table-responsive > .table > thead > tr > th:first-child,
    .table-responsive > .table > tbody > tr > td:first-child,
    .table-responsive > .table > tfoot > tr > td:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
        box-shadow: 1px 0 0 var(--border-strong);
    }
    .table-responsive > .table > thead > tr > th:first-child {
        z-index: 4;
        background: var(--nav-bg);
    }
    /* Body cells need an opaque background or content scrolls under them */
    .table-responsive > .table > tbody > tr > td:first-child { background: var(--surface); }
    .table-responsive > .table.table-striped > tbody > tr:nth-of-type(odd) > td:first-child {
        background: var(--surface-muted);
    }
    .table-responsive > .table.table-hover > tbody > tr:hover > td:first-child {
        background: #eef3f5;
    }
    .table-responsive > .table > tfoot > tr > td:first-child { background: var(--surface-sunken); }

    /* A pinned column only helps if it can't eat the screen */
    .table-responsive > .table > * > tr > *:first-child {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Make the scrollbar visible so the swipe affordance is obvious */
    .table-responsive { scrollbar-width: thin; }
    .table-responsive::-webkit-scrollbar { height: 5px; }
    .table-responsive::-webkit-scrollbar-track { background: var(--surface-sunken); border-radius: var(--radius-pill); }
    .table-responsive::-webkit-scrollbar-thumb { background: var(--slate-400); border-radius: var(--radius-pill); }
}

/* --- Phone: modals behave like sheets ------------------------------------ */
@media (max-width: 767.98px) {
    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: none;
        margin: 8px;
    }
    .modal-content { max-height: calc(100dvh - 16px); }
    .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }

    /* Keep the action buttons reachable without scrolling to the bottom */
    .modal-footer {
        position: sticky;
        bottom: 0;
        background: var(--surface);
        z-index: 2;
        gap: 8px;
        padding-bottom: max(11px, env(safe-area-inset-bottom));
    }
    .modal-footer .btn { flex: 1 1 auto; }
    .modal-header { position: sticky; top: 0; background: var(--surface); z-index: 2; }
}

/* --- Phone: form and select2 sizing -------------------------------------- */
@media (max-width: 575.98px) {
    /* Select2 is used on the accounts pages — match native control height */
    .select2-container .select2-selection--single { min-height: 44px; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
    .select2-container { max-width: 100% !important; }
    .select2-dropdown { font-size: 16px; }

    /* Input groups: keep the addon compact so the field keeps its room */
    .input-group > .input-group-text { padding: 0 10px; }
    .input-group > .btn { padding: 0 12px; }

    /* Stacked action bars read better full width */
    .modal-footer .btn { width: 100%; flex: 1 1 100%; }
}

/* --- Landscape phones: reclaim vertical space ----------------------------- */
@media (max-width: 991.98px) and (max-height: 480px) and (orientation: landscape) {
    .topbar { min-height: 44px; }
    .module-menu { top: 44px; padding-top: 4px !important; padding-bottom: 4px !important; }
    .sidebar-brand { padding-top: 8px; padding-bottom: 8px; }
    .modal-content { max-height: calc(100dvh - 12px); }
}

/* ==========================================================================
   21. PRINT
   ========================================================================== */
.print-header { display: none; }

@media print {

    @page { size: A4; margin: 10mm; }

    body { background: #fff !important; }

    .sidebar,
    .topbar,
    .module-menu,
    .sidebar-backdrop,
    .btn-toggle-sidebar { display: none !important; }

    .app-wrapper,
    .main-content,
    .page-body,
    .container-fluid {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .no-print,
    form,
    .btn,
    .dropdown-menu,
    .pagination,
    .modal-backdrop,
    .modal,
    .toast,
    .alert { display: none !important; }

    .print-header {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 3px solid #0d6efd;
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    .print-header .ph-logo { width: 28px; height: 28px; object-fit: contain; margin-right: 12px; }
    .print-header .ph-brand { font-size: 19px; font-weight: 700; color: #0d6efd; letter-spacing: .3px; }
    .print-header .ph-title {
        margin-left: auto;
        background: #0d6efd;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        padding: 6px 16px;
        border-radius: 3px;
        letter-spacing: .5px;
    }
    .print-header .ph-meta { flex-basis: 100%; font-size: 11px; color: #555; margin-top: 8px; }

    .card { box-shadow: none !important; border: 1px solid #adb5bd !important; margin-bottom: 10px !important; }
    .card .card-body { padding: 6px !important; }

    /* Neutralise the on-screen colour rules so print matches the old output.
       These selectors only exist to out-specify section 10b — they add no
       new styling of their own beyond restoring Bootstrap's print defaults. */
    .card-header.bg-primary,
    .card-header.bg-dark,
    .card-header.bg-secondary,
    .card-header.bg-success,
    .card-header.bg-danger,
    .card-header.bg-info,
    .card-header.bg-warning {
        background-color: #e9ecef !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .card-header.bg-primary *,
    .card-header.bg-dark *,
    .card-header.bg-secondary *,
    .card-header.bg-success *,
    .card-header.bg-danger *,
    .card-header.bg-info *,
    .card-header.bg-warning *,
    .card-header.text-white,
    .card-header.text-white * { color: #000 !important; }

    /* Table heads: light on paper, not the dark navy used on screen */
    .table thead th,
    .table > thead.table-light th,
    .table > thead.table-light > tr > th,
    .table > thead > tr.table-light > th,
    .table > thead.table-dark th,
    .table > thead > tr.table-dark > th,
    .table-bordered > thead > tr > th {
        background: #f1f1f1 !important;
        color: #000 !important;
        --bs-table-bg: #f1f1f1 !important;
        --bs-table-color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        border-color: #999 !important;
    }
    .table thead th a,
    .table thead th .bi { color: #000 !important; }

    .table { font-size: 11px !important; width: 100% !important; }
    .table th, .table td { padding: 4px 6px !important; }
    .table-responsive { overflow: visible !important; }

    a { text-decoration: none !important; color: #000 !important; }

    /* hide nested print-headers when a report is embedded inside another */
    .card .print-header { display: none !important; }
}

/* ============================================================
   PWA — install banner + update banner (additive, brand-matched)
   ============================================================ */
.hms-install {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1200;
  display: flex; align-items: center; gap: 12px;
  background: #ffffff; color: #1f2c38;
  border: 1px solid rgba(15, 118, 110, .3);
  border-radius: 16px; padding: 12px 12px 12px 14px;
  box-shadow: 0 12px 32px rgba(31, 44, 56, .2);
  font-family: "Hind Siliguri", "Inter", system-ui, sans-serif;
}
@media (min-width: 720px) {
  .hms-install { left: auto; right: 20px; bottom: 20px; max-width: 380px; }
}
.hms-install__mark {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 12px; background: #1f2c38; color: #5eead4;
  display: grid; place-items: center;
  font-size: 24px; font-weight: 700;
}
.hms-install__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hms-install__text strong { font-size: 14px; }
.hms-install__text span { font-size: 12px; color: #54666f; }
.hms-install__go {
  flex: 0 0 auto; border: 0; cursor: pointer;
  background: #0F766E; color: #fff;
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 9px 16px; border-radius: 999px;
}
.hms-install__no {
  flex: 0 0 auto; border: 0; cursor: pointer; background: none;
  color: #8ba0aa; font-size: 14px; padding: 6px;
}
.hms-update {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1200;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #1f2c38; color: #fff;
  border-radius: 14px; padding: 12px 12px 12px 16px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
  font-family: "Hind Siliguri", "Inter", system-ui, sans-serif;
}
@media (min-width: 720px) {
  .hms-update { left: auto; right: 20px; bottom: 20px; max-width: 420px; }
}
.hms-update button {
  flex: 0 0 auto; border: 0; cursor: pointer;
  background: #0F766E; color: #fff;
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 8px 16px; border-radius: 999px;
}