/* ==========================================================================
   Signed-in dashboard: bright and colourful by default, with an optional dark
   mode (data-bs-theme="dark" on <html>, chosen with the sun/moon button in
   the top bar and remembered per browser).

   Everything colour-related goes through the tokens below, so module screens
   that use var(--color-surface) etc. follow the theme on their own.
   Friendly tones (same as the public website, public/css/site.css) give stat
   cards, icons and card headers their own colour: --tone / --tone-2 / --tone-ink.
   ========================================================================== */

/* ---------- Light theme (default) ---------- */
:root, [data-bs-theme="light"] {
    --color-primary: #0E9F8E;
    --color-secondary: #D4A646;
    --radius: 14px;
    --font-heading: 'Clash Display', 'Hind Siliguri', sans-serif;
    --font-body: 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --color-bg: #F2F5FB;
    --color-surface: #FFFFFF;
    --color-surface-2: #F5F8FC;
    --color-border: #E2E8F0;
    --color-border-strong: #D3DCE8;
    --color-text: #1E2B3C;
    --color-heading: #0B2540;
    --color-muted: #5F6F84;
    --color-primary-hover: #0B8577;
    --color-primary-soft: rgba(14, 159, 142, .12);
    --color-secondary-soft: rgba(212, 166, 70, .16);
    --color-accent-text: #0A7C70;      /* icons / links on the page */
    --color-info-text: #1D4ED8;
    --color-gold-text: #8A6410;
    --tx-success: #15803D;
    --tx-danger: #BE123C;
    --tx-warning: #B45309;
    --tx-info: #0E7490;
    --shadow-sm: 0 1px 2px rgba(11, 37, 64, .05), 0 4px 14px -8px rgba(11, 37, 64, .16);
    --shadow: 0 16px 34px -18px rgba(11, 37, 64, .32);
    --rainbow: linear-gradient(90deg, #0D9488, #2563EB, #7C3AED, #DB2777, #EA580C, #EAB308, #16A34A);

    /* Status badges: soft tint + strong text */
    --bd-success-bg: #DCFCE7; --bd-success-fg: #166534;
    --bd-warning-bg: #FEF3C7; --bd-warning-fg: #92400E;
    --bd-danger-bg: #FFE4E6;  --bd-danger-fg: #9F1239;
    --bd-info-bg: #CFFAFE;    --bd-info-fg: #155E75;
    --bd-primary-bg: #CCFBF1; --bd-primary-fg: #115E59;
    --bd-secondary-bg: #E8EDF4; --bd-secondary-fg: #334155;
    --bd-accent-bg: #FEF3C7;  --bd-accent-fg: #8A5A00;

    /* Bootstrap mapped onto the tokens */
    --bs-body-bg: var(--color-surface);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: var(--color-text);
    --bs-body-color-rgb: 30, 43, 60;
    --bs-body-font-family: var(--font-body);
    --bs-emphasis-color: #0B2540;
    --bs-emphasis-color-rgb: 11, 37, 64;
    --bs-heading-color: var(--color-heading);
    --bs-secondary-color: var(--color-muted);
    --bs-secondary-bg: #EEF2F7;
    --bs-tertiary-bg: var(--color-surface-2);
    --bs-border-color: var(--color-border);
    --bs-border-radius: 10px;
    --bs-border-radius-lg: var(--radius);
    --bs-primary: #0E9F8E;
    --bs-primary-rgb: 14, 159, 142;
    --bs-link-color: #0A7C70;
    --bs-link-color-rgb: 10, 124, 112;
    --bs-link-hover-color: #075E55;
    --bs-link-hover-color-rgb: 7, 94, 85;

    /* Default tone = brand teal */
    --tone: #0D9488; --tone-2: #2DD4BF; --tone-ink: #115E59;
    color-scheme: light;
}

/* ---------- Dark theme (optional) ---------- */
[data-bs-theme="dark"] {
    --color-bg: #0B1220;
    --color-surface: #111A2C;
    --color-surface-2: #17233A;
    --color-border: #22314D;
    --color-border-strong: #2E3F60;
    --color-text: #F5F5F7;
    --color-heading: #FFFFFF;
    --color-muted: #93A1B8;
    --color-primary-hover: #0B8577;
    --color-primary-soft: rgba(14, 159, 142, .16);
    --color-secondary-soft: rgba(212, 166, 70, .14);
    --color-accent-text: #5FD4C4;
    --color-info-text: #A9C6FF;
    --color-gold-text: #E6C277;
    --tx-success: #6EE7A8;
    --tx-danger: #FF8A8A;
    --tx-warning: #FCD34D;
    --tx-info: #67E8F9;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
    --shadow: 0 18px 40px -20px rgba(0, 0, 0, .7);

    --bd-success-bg: rgba(34, 197, 94, .18);  --bd-success-fg: #86EFAC;
    --bd-warning-bg: rgba(245, 158, 11, .2);  --bd-warning-fg: #FCD34D;
    --bd-danger-bg: rgba(244, 63, 94, .22);   --bd-danger-fg: #FDA4AF;
    --bd-info-bg: rgba(6, 182, 212, .2);      --bd-info-fg: #67E8F9;
    --bd-primary-bg: rgba(14, 159, 142, .24); --bd-primary-fg: #5EEAD4;
    --bd-secondary-bg: rgba(148, 163, 184, .2); --bd-secondary-fg: #CBD5E1;
    --bd-accent-bg: rgba(212, 166, 70, .18);  --bd-accent-fg: #E6C277;

    --bs-body-bg: var(--color-surface);
    --bs-body-bg-rgb: 17, 26, 44;
    --bs-body-color: var(--color-text);
    --bs-body-color-rgb: 245, 245, 247;
    --bs-body-font-family: var(--font-body);
    --bs-emphasis-color: #FFFFFF;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: var(--color-heading);
    --bs-secondary-color: var(--color-muted);
    --bs-secondary-bg: #1A2740;
    --bs-tertiary-bg: var(--color-surface-2);
    --bs-border-color: var(--color-border);
    --bs-border-radius: 10px;
    --bs-border-radius-lg: var(--radius);
    --bs-primary: #0E9F8E;
    --bs-primary-rgb: 14, 159, 142;
    --bs-link-color: #5FD4C4;
    --bs-link-color-rgb: 95, 212, 196;
    --bs-link-hover-color: #9BE7DC;
    --bs-link-hover-color-rgb: 155, 231, 220;
    color-scheme: dark;
}

/* ---------- Friendly tones ----------
   .tone-1 … .tone-8 / .tone-red set a colour by hand; columns of a .row,
   blocks of the page and table rows get one automatically, in turn. */
.tone-1, .row > :nth-child(8n+1), .app-content > :nth-child(8n+1), tbody > tr:nth-child(8n+1) { --tone: #0D9488; --tone-2: #2DD4BF; --tone-ink: #115E59; }
.tone-2, .row > :nth-child(8n+2), .app-content > :nth-child(8n+2), tbody > tr:nth-child(8n+2) { --tone: #2563EB; --tone-2: #60A5FA; --tone-ink: #1E3A8A; }
.tone-3, .row > :nth-child(8n+3), .app-content > :nth-child(8n+3), tbody > tr:nth-child(8n+3) { --tone: #7C3AED; --tone-2: #A78BFA; --tone-ink: #4C1D95; }
.tone-4, .row > :nth-child(8n+4), .app-content > :nth-child(8n+4), tbody > tr:nth-child(8n+4) { --tone: #DB2777; --tone-2: #F472B6; --tone-ink: #831843; }
.tone-5, .row > :nth-child(8n+5), .app-content > :nth-child(8n+5), tbody > tr:nth-child(8n+5) { --tone: #EA580C; --tone-2: #FB923C; --tone-ink: #7C2D12; }
.tone-6, .row > :nth-child(8n+6), .app-content > :nth-child(8n+6), tbody > tr:nth-child(8n+6) { --tone: #16A34A; --tone-2: #4ADE80; --tone-ink: #14532D; }
.tone-7, .row > :nth-child(8n+7), .app-content > :nth-child(8n+7), tbody > tr:nth-child(8n+7) { --tone: #0891B2; --tone-2: #22D3EE; --tone-ink: #164E63; }
.tone-8, .row > :nth-child(8n+8), .app-content > :nth-child(8n+8), tbody > tr:nth-child(8n+8) { --tone: #C026D3; --tone-2: #E879F9; --tone-ink: #701A75; }
/* cards stacked one under another (e.g. patient profile history) keep changing colour too */
.card ~ .card:nth-child(8n+1) { --tone: #0D9488; --tone-2: #2DD4BF; --tone-ink: #115E59; }
.card ~ .card:nth-child(8n+2) { --tone: #2563EB; --tone-2: #60A5FA; --tone-ink: #1E3A8A; }
.card ~ .card:nth-child(8n+3) { --tone: #7C3AED; --tone-2: #A78BFA; --tone-ink: #4C1D95; }
.card ~ .card:nth-child(8n+4) { --tone: #DB2777; --tone-2: #F472B6; --tone-ink: #831843; }
.card ~ .card:nth-child(8n+5) { --tone: #EA580C; --tone-2: #FB923C; --tone-ink: #7C2D12; }
.card ~ .card:nth-child(8n+6) { --tone: #16A34A; --tone-2: #4ADE80; --tone-ink: #14532D; }
.card ~ .card:nth-child(8n+7) { --tone: #0891B2; --tone-2: #22D3EE; --tone-ink: #164E63; }
.card ~ .card:nth-child(8n+8) { --tone: #C026D3; --tone-2: #E879F9; --tone-ink: #701A75; }
/* explicit classes win over the automatic turn */
.row > .tone-1, .tone-1.tone-1.tone-1 { --tone: #0D9488; --tone-2: #2DD4BF; --tone-ink: #115E59; }
.row > .tone-2, .tone-2.tone-2.tone-2 { --tone: #2563EB; --tone-2: #60A5FA; --tone-ink: #1E3A8A; }
.row > .tone-3, .tone-3.tone-3.tone-3 { --tone: #7C3AED; --tone-2: #A78BFA; --tone-ink: #4C1D95; }
.row > .tone-4, .tone-4.tone-4.tone-4 { --tone: #DB2777; --tone-2: #F472B6; --tone-ink: #831843; }
.row > .tone-5, .tone-5.tone-5.tone-5 { --tone: #EA580C; --tone-2: #FB923C; --tone-ink: #7C2D12; }
.row > .tone-6, .tone-6.tone-6.tone-6 { --tone: #16A34A; --tone-2: #4ADE80; --tone-ink: #14532D; }
.row > .tone-7, .tone-7.tone-7.tone-7 { --tone: #0891B2; --tone-2: #22D3EE; --tone-ink: #164E63; }
.row > .tone-8, .tone-8.tone-8.tone-8 { --tone: #C026D3; --tone-2: #E879F9; --tone-ink: #701A75; }
.tone-red.tone-red.tone-red, .row > .tone-red { --tone: #E11D48; --tone-2: #FB7185; --tone-ink: #881337; }

/* ---------- Base ---------- */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
body {
    font-family: var(--font-body); color: var(--color-text);
    background:
        radial-gradient(1100px 420px at 100% -8%, rgba(124, 58, 237, .07), transparent 62%),
        radial-gradient(900px 380px at 0% 0%, rgba(13, 148, 136, .08), transparent 60%),
        var(--color-bg);
    background-attachment: fixed;
}
[data-bs-theme="dark"] body {
    background:
        radial-gradient(1100px 420px at 100% -8%, rgba(124, 58, 237, .12), transparent 62%),
        radial-gradient(900px 380px at 0% 0%, rgba(13, 148, 136, .12), transparent 60%),
        var(--color-bg);
    background-attachment: fixed;
}
h1, h2, h3, h4, h5, h6, .page-title, .stat-value { font-family: var(--font-heading); letter-spacing: .01em; }
.text-muted { color: var(--color-muted) !important; }
.min-w-0 { min-width: 0; }
.text-warning { color: var(--tx-warning) !important; }
.text-info { color: var(--tx-info) !important; }
.text-success { color: var(--tx-success) !important; }
.text-danger { color: var(--tx-danger) !important; }
.text-primary { color: var(--color-accent-text) !important; }
::selection { background: rgba(124, 58, 237, .22); }

/* ---------- Buttons & form controls ---------- */
.btn { border-radius: 10px; }
.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: transparent;
    background-image: linear-gradient(135deg, #0FB09D, #0E9F8E 45%, #0B7F9F);
    box-shadow: 0 8px 18px -10px rgba(14, 159, 142, .9);
}
.btn-primary:hover { background-image: linear-gradient(135deg, #0E9F8E, #0B8577 45%, #0A6C88); box-shadow: 0 12px 24px -10px rgba(14, 159, 142, .95); }
.btn-success { background-image: linear-gradient(135deg, #22C55E, #15803D); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; }
.btn-danger { background-image: linear-gradient(135deg, #F43F5E, #BE123C); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; }
.btn-warning { background-image: linear-gradient(135deg, #FCD34D, #F59E0B); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; }
.btn-info { background-image: linear-gradient(135deg, #22D3EE, #0891B2); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-border-color: transparent; }
.btn-outline-primary {
    --bs-btn-color: var(--color-accent-text);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-active-color: #fff;
}
.btn-secondary-accent {
    --bs-btn-color: #1A1405;
    --bs-btn-bg: var(--color-secondary);
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-color: #1A1405;
    --bs-btn-hover-bg: #C29433;
    --bs-btn-hover-border-color: #C29433;
}
.btn-light {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: var(--color-surface);
    --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-color: var(--color-accent-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
    --bs-btn-active-color: var(--color-accent-text);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
    --bs-btn-active-border-color: var(--color-primary);
    --bs-btn-disabled-color: var(--color-muted);
    --bs-btn-disabled-bg: var(--color-surface-2);
    --bs-btn-disabled-border-color: var(--color-border);
}
[data-bs-theme="dark"] .btn-light {
    --bs-btn-bg: var(--color-surface-2);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-hover-bg: #1C2A45;
    --bs-btn-hover-border-color: #2A3B5C;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #1C2A45;
    --bs-btn-active-color: #fff;
}
[data-bs-theme="light"] .btn-outline-warning { --bs-btn-color: #B45309; --bs-btn-border-color: #F59E0B; --bs-btn-hover-color: #422006; --bs-btn-hover-bg: #FBBF24; --bs-btn-hover-border-color: #F59E0B; --bs-btn-active-color: #422006; --bs-btn-active-bg: #F59E0B; --bs-btn-active-border-color: #F59E0B; }
[data-bs-theme="light"] .btn-outline-info { --bs-btn-color: #0E7490; --bs-btn-border-color: #06B6D4; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0891B2; --bs-btn-hover-border-color: #0891B2; --bs-btn-active-color: #fff; --bs-btn-active-bg: #0891B2; --bs-btn-active-border-color: #0891B2; }
.btn-outline-secondary { --bs-btn-color: var(--color-muted); --bs-btn-border-color: var(--color-border-strong); --bs-btn-hover-bg: var(--color-surface-2); --bs-btn-hover-color: var(--color-heading); --bs-btn-hover-border-color: var(--color-border-strong); --bs-btn-active-bg: var(--color-surface-2); --bs-btn-active-color: var(--color-heading); }
.form-control, .form-select { background-color: var(--color-surface); border-color: var(--color-border-strong); }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--color-surface-2); border-color: var(--color-border); }
.form-control:focus, .form-select:focus {
    background-color: var(--color-surface);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem var(--color-primary-soft);
}
[data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: var(--color-surface-2); }
.form-control:disabled, .form-control[readonly]:not(.demo-locked), .form-select:disabled { background-color: var(--bs-secondary-bg); }
.form-check-input { background-color: var(--color-surface); border-color: #B8C4D4; }
[data-bs-theme="dark"] .form-check-input { background-color: var(--color-surface-2); border-color: #2E3F60; }
.form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem var(--color-primary-soft); border-color: var(--color-primary); }
.input-group-text { background: var(--color-surface-2); border-color: var(--color-border-strong); color: var(--color-muted); }
[data-bs-theme="dark"] .input-group-text { border-color: var(--color-border); }

.pagination {
    --bs-pagination-bg: var(--color-surface);
    --bs-pagination-border-color: var(--color-border);
    --bs-pagination-active-bg: var(--color-primary);
    --bs-pagination-active-border-color: var(--color-primary);
    --bs-pagination-color: var(--color-accent-text);
    --bs-pagination-hover-color: var(--color-accent-text);
    --bs-pagination-hover-bg: var(--color-surface-2);
    --bs-pagination-hover-border-color: var(--color-border);
    --bs-pagination-disabled-bg: var(--color-surface-2);
    --bs-pagination-disabled-border-color: var(--color-border);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--color-primary-soft);
    flex-wrap: wrap;
}

/* ---------- Badges: coloured status pills ---------- */
.badge { font-weight: 600; letter-spacing: .01em; }
.badge.text-bg-primary   { background-color: var(--bd-primary-bg) !important;   color: var(--bd-primary-fg) !important; }
.badge.text-bg-success   { background-color: var(--bd-success-bg) !important;   color: var(--bd-success-fg) !important; }
.badge.text-bg-warning   { background-color: var(--bd-warning-bg) !important;   color: var(--bd-warning-fg) !important; }
.badge.text-bg-danger    { background-color: var(--bd-danger-bg) !important;    color: var(--bd-danger-fg) !important; }
.badge.text-bg-info      { background-color: var(--bd-info-bg) !important;      color: var(--bd-info-fg) !important; }
.badge.text-bg-secondary { background-color: var(--bd-secondary-bg) !important; color: var(--bd-secondary-fg) !important; }
.badge.text-bg-primary, .badge.text-bg-success, .badge.text-bg-warning, .badge.text-bg-danger, .badge.text-bg-info, .badge.text-bg-secondary,
.badge-soft-primary, .badge-soft-accent { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
.badge-soft-primary { background: var(--bd-primary-bg); color: var(--bd-primary-fg); }
.badge-soft-accent { background: var(--bd-accent-bg); color: var(--bd-accent-fg); }
/* badges sitting on a coloured button or active pill turn solid white */
.btn .badge.text-bg-light,
:is(.btn-primary, .btn-success, .btn-danger, .btn-info, .nav-pills .nav-link.active, .wl-tab.active, .list-group-item.active) .badge[class*="text-bg-"] { background-color: rgba(255, 255, 255, .94) !important; color: #0B2540 !important; box-shadow: none; }

/* ---------- Shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: 264px;
    flex-shrink: 0;
    display: flex; flex-direction: column;
    color: #fff;
    background-color: #0B4F4A;
    background-image:
        radial-gradient(340px 260px at 110% 0%, rgba(236, 72, 153, .28), transparent 65%),
        radial-gradient(300px 260px at -20% 100%, rgba(45, 212, 191, .22), transparent 65%),
        linear-gradient(180deg, #0B5D56 0%, #0E5A7A 30%, #1E3A8A 66%, #4C1D95 100%);
    border-right: 0;
    box-shadow: 4px 0 24px -12px rgba(30, 27, 75, .45);
}
[data-bs-theme="dark"] .app-sidebar {
    background-color: #062F2C;
    background-image:
        radial-gradient(340px 260px at 110% 0%, rgba(236, 72, 153, .18), transparent 65%),
        radial-gradient(300px 260px at -20% 100%, rgba(45, 212, 191, .14), transparent 65%),
        linear-gradient(180deg, #073B37 0%, #0A3550 30%, #172554 66%, #2E1065 100%);
    box-shadow: none;
    border-right: 1px solid rgba(255, 255, 255, .06);
}
@media (min-width: 992px) {
    .app-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
}
.app-sidebar.offcanvas-lg { --bs-offcanvas-width: 280px; --bs-offcanvas-bg: #0B4F4A; --bs-offcanvas-color: #fff; }
@media (max-width: 991.98px) {
    .app-sidebar.offcanvas-lg { overflow-y: auto; }
}

.sidebar-brand {
    display: flex; align-items: center; gap: .75rem;
    padding: 1.1rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.brand-mark {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(135deg, #2DD4BF, #2563EB 55%, #7C3AED);
    color: #fff; font-size: 1.2rem; flex-shrink: 0;
    box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .8);
}
.app-sidebar .brand-mark { background: linear-gradient(135deg, #F472B6, #FB923C); box-shadow: 0 8px 18px -8px rgba(236, 72, 153, .9); }
.brand-logo { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; background: #fff; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-text strong { color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text small { color: rgba(255, 255, 255, .72); }

.sidebar-nav { padding: .75rem .6rem 1rem; flex: 1 0 auto; }
.sidebar-credit { border-top: 1px solid rgba(255, 255, 255, .12); padding: .25rem .75rem .5rem; }
.sidebar-credit .vendor-credit { flex-wrap: wrap; text-align: center; }
.nav-heading {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
    color: var(--tone-2, #9FB0C8); padding: 1rem .75rem .35rem;
}
.sidebar-nav .nav-link {
    display: flex; align-items: center; gap: .7rem;
    color: rgba(255, 255, 255, .88); padding: .42rem .6rem; border-radius: 12px; font-size: .93rem;
    transition: background .15s, color .15s, transform .15s;
}
.sidebar-nav .nav-link i {
    font-size: .98rem; width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--tone-2), var(--tone));
    box-shadow: 0 6px 14px -8px var(--tone), inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.sidebar-nav .nav-link:hover { background: rgba(255, 255, 255, .1); color: #fff; transform: translateX(2px); }
.sidebar-nav .nav-link.active {
    color: #fff; font-weight: 600;
    background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 55%, var(--tone-ink)));
    box-shadow: 0 10px 22px -10px var(--tone), inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.sidebar-nav .nav-link.active i { background: #fff; color: var(--tone); box-shadow: none; }

.sidebar-nav button.nav-heading {
    display: flex; align-items: center; gap: .45rem; width: 100%; background: none; border: 0; text-align: left;
    cursor: pointer; border-radius: 8px;
}
.sidebar-nav button.nav-heading::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tone-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone-2) 25%, transparent); flex-shrink: 0; }
.sidebar-nav button.nav-heading span { margin-right: auto; }
.sidebar-nav button.nav-heading:hover { color: #fff; }
.sidebar-nav button.nav-heading i { font-size: .75rem; transition: transform .2s; }
.sidebar-nav button.nav-heading[aria-expanded="false"] i { transform: rotate(-90deg); }
.nav-group.is-closed { display: none; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
    display: flex; align-items: center; gap: .6rem;
    background: color-mix(in srgb, var(--color-surface) 80%, transparent);
    backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
    padding: .7rem 1rem calc(.7rem + 3px); position: sticky; top: 0; z-index: 1020;
    box-shadow: 0 8px 24px -18px rgba(11, 37, 64, .45);
}
.app-topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rainbow); }
.app-topbar > .ms-auto { flex-shrink: 0; }
.app-topbar > .page-title { flex: 1 1 auto; }
.page-title { font-size: 1.2rem; font-weight: 600; margin: 0; color: var(--color-heading); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-content { padding: 1.25rem 1rem 3rem; }
@media (min-width: 768px) { .app-content { padding: 1.5rem 1.75rem 3rem; } }
@media (max-width: 575.98px) {
    .app-topbar { padding-left: .75rem; padding-right: .75rem; gap: .4rem; }
    .app-topbar .btn { padding-left: .55rem; padding-right: .55rem; }
    .page-title { font-size: 1.05rem; }
}

.theme-toggle .theme-icon-light { display: none; }
[data-bs-theme="dark"] .theme-toggle .theme-icon-light { display: inline-block; color: #FBBF24; }
[data-bs-theme="dark"] .theme-toggle .theme-icon-dark { display: none; }
.theme-toggle .theme-icon-dark { color: #7C3AED; }

.avatar {
    width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center;
    background: linear-gradient(135deg, #EC4899, #F97316);
    color: #fff; font-weight: 600; font-size: .9rem; flex-shrink: 0;
}
.dropdown-menu {
    --bs-dropdown-bg: var(--color-surface);
    --bs-dropdown-border-color: var(--color-border);
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    --bs-dropdown-link-hover-color: var(--color-heading);
    --bs-dropdown-link-active-bg: var(--color-primary);
    border-radius: 12px; box-shadow: var(--shadow);
}
[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--color-surface-2); }

/* Vendor credit under the page on phones: white logo in dark mode, normal logo in light mode. */
.credit-on-dark { display: none; }
[data-bs-theme="dark"] .credit-on-dark { display: block; }
[data-bs-theme="dark"] .credit-on-light { display: none; }

/* ---------- Components ---------- */
.card {
    --bs-card-bg: var(--color-surface);
    --bs-card-border-color: var(--color-border);
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: calc(var(--radius) - 1px);
    --bs-card-cap-bg: transparent;
    box-shadow: var(--shadow-sm);
}
.card-header {
    background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 11%, var(--color-surface)), var(--color-surface) 78%);
    border-bottom: 1px solid color-mix(in srgb, var(--tone) 18%, var(--color-border));
    box-shadow: inset 0 3px 0 var(--tone);
    font-weight: 600; font-family: var(--font-heading); color: var(--color-heading);
}
.card-header > span > .bi:first-child, .card-header > .bi:first-child, .card-header > span:first-child > .bi:first-child { color: var(--tone); }
[data-bs-theme="dark"] .card-header > span > .bi:first-child, [data-bs-theme="dark"] .card-header > .bi:first-child { color: var(--tone-2); }
.card-footer { background: var(--color-surface-2); border-top-color: var(--color-border); }
.list-group { --bs-list-group-bg: var(--color-surface); --bs-list-group-border-color: var(--color-border); --bs-list-group-color: var(--color-text); --bs-list-group-action-hover-bg: var(--color-surface-2); --bs-list-group-active-bg: var(--color-primary); --bs-list-group-active-border-color: var(--color-primary); }
.modal { --bs-modal-bg: var(--color-surface); --bs-modal-border-color: var(--color-border); --bs-modal-header-border-color: var(--color-border); --bs-modal-footer-border-color: var(--color-border); }
.modal-content { box-shadow: 0 30px 70px -20px rgba(11, 37, 64, .45); }
.modal-header { background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 10%, var(--color-surface)), var(--color-surface) 80%); }
.offcanvas:not(.app-sidebar) { --bs-offcanvas-bg: var(--color-surface); }
.nav-tabs { --bs-nav-tabs-link-active-bg: var(--color-surface); --bs-nav-tabs-link-active-color: var(--color-heading); --bs-nav-tabs-border-color: var(--color-border); --bs-nav-tabs-link-active-border-color: var(--color-border) var(--color-border) var(--color-surface); }
.nav-tabs .nav-link { color: var(--color-muted); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--color-primary); }
.nav-pills .nav-link { color: var(--color-muted); }
.nav-pills .nav-link:hover { color: var(--color-heading); }
.nav-pills .nav-link.active { background-image: linear-gradient(135deg, #0FB09D, #0B7F9F); color: #fff; box-shadow: 0 8px 18px -10px rgba(14, 159, 142, .9); }
.progress { --bs-progress-bg: color-mix(in srgb, var(--tone) 12%, var(--color-surface-2)); border-radius: 999px; }
.progress-bar { border-radius: 999px; }
.progress-bar:not([class*="bg-"]) { background-image: linear-gradient(90deg, var(--tone), var(--tone-2)); }
.progress-bar.bg-warning { background-image: linear-gradient(90deg, #F59E0B, #FBBF24); }
.progress-bar.bg-danger { background-image: linear-gradient(90deg, #E11D48, #FB7185); }
.progress-bar.bg-success { background-image: linear-gradient(90deg, #16A34A, #4ADE80); }

/* Stat cards: colourful gradient tiles with white numbers */
.stat-card {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center; gap: .75rem 1rem; padding: 1.1rem;
    border: 0; color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 92%, #fff) 0%, var(--tone) 40%, color-mix(in srgb, var(--tone) 50%, var(--tone-ink)) 100%);
    box-shadow: 0 14px 28px -18px var(--tone), 0 2px 6px -2px rgba(11, 37, 64, .12);
    transition: transform .18s, box-shadow .18s;
}
.stat-card::before, .stat-card::after { content: ''; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.stat-card::before { width: 130px; height: 130px; right: -38px; top: -46px; background: rgba(255, 255, 255, .16); }
.stat-card::after { width: 84px; height: 84px; right: 36px; bottom: -52px; background: rgba(255, 255, 255, .1); }
a.stat-card:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -16px var(--tone), 0 2px 6px -2px rgba(11, 37, 64, .12); color: #fff; }
/* Wide card: icon beside the numbers. Narrow card: the numbers drop under the icon (and get the full width). */
.stat-card > div { flex: 1 1 170px; min-width: 0; container-type: inline-size; }
.stat-card .stat-value { color: #fff; font-size: 1.6rem; overflow-wrap: break-word; text-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
/* long money values shrink a little instead of breaking in the middle */
@container (max-width: 200px) { .stat-card .stat-value { font-size: 1.38rem; } }
@container (max-width: 140px) { .stat-card .stat-value { font-size: 1.18rem; } }
.stat-card .stat-label, .stat-card .text-muted, .stat-card small { color: rgba(255, 255, 255, .9) !important; }
.stat-card .fw-semibold { color: #fff; }
.stat-card .text-warning { color: #FEF08A !important; }
.stat-card .text-success { color: #BBF7D0 !important; }
.stat-card .text-danger { color: #FECDD3 !important; }
.stat-card a:not(.btn) { color: #fff; text-decoration: underline; }
.stat-icon {
    width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0;
    font-size: 1.35rem; color: #fff;
    background: linear-gradient(135deg, var(--tone-2), var(--tone));
    box-shadow: 0 8px 18px -10px var(--tone);
}
.stat-card .stat-icon { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); backdrop-filter: blur(4px); }
.stat-value { font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--color-heading); }
.stat-label { color: var(--color-muted); font-size: .88rem; }

/* Small coloured number tiles inside a card (e.g. bed occupancy) */
.mini-stat {
    display: block; height: 100%; padding: .8rem .6rem; border-radius: 12px; text-decoration: none; color: inherit;
    background: color-mix(in srgb, var(--tone) 9%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--tone) 22%, var(--color-border));
    transition: transform .15s, box-shadow .15s;
}
.mini-stat .stat-value { color: color-mix(in srgb, var(--tone) 70%, var(--tone-ink)); }
[data-bs-theme="dark"] .mini-stat .stat-value { color: var(--tone-2); }
a.mini-stat:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -14px var(--tone); color: inherit; }

/* Blood stock tiles (dashboard) */
.blood-tile { --bs-border-color: color-mix(in srgb, #E11D48 24%, var(--color-border)); background: color-mix(in srgb, #E11D48 6%, var(--color-surface)); transition: transform .15s, box-shadow .15s; }
.blood-tile > .small { color: #BE123C !important; font-weight: 700; }
[data-bs-theme="dark"] .blood-tile > .small { color: #FB7185 !important; }
.blood-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -14px #E11D48; }

/* Quick access tiles */
.shortcut {
    display: flex; align-items: center; gap: .8rem; padding: .8rem .95rem;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
    color: var(--color-text); text-decoration: none; height: 100%; font-weight: 500;
    transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
}
.shortcut:hover {
    border-color: color-mix(in srgb, var(--tone) 55%, var(--color-border)); color: var(--color-heading); transform: translateY(-2px);
    background: color-mix(in srgb, var(--tone) 6%, var(--color-surface));
    box-shadow: 0 14px 26px -16px var(--tone);
}
.shortcut i {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center;
    font-size: 1.15rem; color: #fff; background: linear-gradient(135deg, var(--tone-2), var(--tone));
    box-shadow: 0 8px 16px -10px var(--tone);
}

/* Tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--color-border);
    --bs-table-hover-bg: color-mix(in srgb, var(--color-primary) 6%, transparent);
    --bs-table-hover-color: var(--color-text);
    --bs-table-striped-bg: var(--color-surface-2);
    --bs-table-active-bg: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.table > :not(caption) > * > * { padding: .75rem; }
.table-sm > :not(caption) > * > * { padding: .45rem .6rem; }
.table thead th {
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: color-mix(in srgb, var(--tone) 62%, var(--color-heading));
    background: color-mix(in srgb, var(--tone) 8%, var(--color-surface));
    border-bottom-color: color-mix(in srgb, var(--tone) 25%, var(--color-border));
}
[data-bs-theme="dark"] .table thead th { color: color-mix(in srgb, var(--tone-2) 75%, #fff); background: color-mix(in srgb, var(--tone) 12%, var(--color-surface-2)); }

.module-group-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--tone); margin: 1.1rem 0 .5rem; }
[data-bs-theme="dark"] .module-group-title { color: var(--tone-2); }
.module-check {
    display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem;
    border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-2);
    cursor: pointer; height: 100%; color: var(--color-text);
}
.module-check:has(input:checked) { border-color: color-mix(in srgb, var(--tone) 60%, var(--color-border)); background: color-mix(in srgb, var(--tone) 10%, var(--color-surface)); }
.module-check i { color: var(--tone); }
[data-bs-theme="dark"] .module-check i { color: var(--tone-2); }

.perm-table td, .perm-table th { text-align: center; vertical-align: middle; }
.perm-table td:first-child, .perm-table th:first-child { text-align: left; }

.alert { border-radius: 12px; border-left-width: 4px; }
.alert-success { border-left-color: #16A34A; }
.alert-danger { border-left-color: #E11D48; }
.alert-warning { border-left-color: #F59E0B; }
.alert-info { border-left-color: #0891B2; }
.alert-primary { border-left-color: var(--color-primary); }

/* ---------- Dashboard welcome band ---------- */
.dash-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    padding: 1.35rem 1.4rem; margin-bottom: 1.5rem; border-radius: 20px; color: #fff;
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(236, 72, 153, .45), transparent 65%),
        radial-gradient(360px 200px at 70% 120%, rgba(249, 115, 22, .35), transparent 65%),
        linear-gradient(120deg, #0B6E63 0%, #0E9F8E 22%, #2563EB 62%, #7C3AED 100%);
    box-shadow: 0 22px 44px -26px rgba(37, 99, 235, .8);
}
.dash-hero::before, .dash-hero::after { content: ''; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.dash-hero::before { width: 220px; height: 220px; right: -60px; top: -90px; background: rgba(255, 255, 255, .12); }
.dash-hero::after { width: 140px; height: 140px; left: 38%; bottom: -90px; background: rgba(255, 255, 255, .08); }
.dash-hero h2 { color: #fff; }
.dash-hero p { color: rgba(255, 255, 255, .88); }
.dash-hero-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); flex-shrink: 0; }
.dash-hero-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); font-size: .9rem; white-space: nowrap; }
@media (max-width: 575.98px) { .dash-hero { padding: 1.1rem; border-radius: 16px; } .dash-hero h2 { font-size: 1.15rem; } }

/* ---------- License & about ---------- */
.license-hero, .about-hero {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    padding: 1.4rem; border-radius: var(--radius); color: #fff;
    background: linear-gradient(120deg, #1E3A8A, #2563EB 60%, #7C3AED);
    border: 0;
}
.license-hero.ok { background: linear-gradient(120deg, #0B5D56, #0E9F8E 60%, #16A34A); }
.license-icon {
    width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0;
    background: rgba(255,255,255,.14); font-size: 1.6rem; color: #fff;
}
.guest-card .license-icon { background: var(--color-primary-soft); color: var(--color-info-text); }
.about-hero { background: linear-gradient(120deg, #0B5D56, #1E3A8A 55%, #6D28D9); }
.about-hero h1, .about-hero h2, .about-hero h3 { color: #fff; }
.about-logo {
    min-width: 72px; max-width: 220px; height: 72px; padding: 10px 14px; border-radius: 16px; background: #fff;
    color: #0B1220; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
    font-size: 1.8rem; font-weight: 700;
}
.about-logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; pointer-events: none; user-select: none; }

/* ---------- Website management ---------- */
.theme-swatch { width: 22px; height: 22px; border-radius: 6px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.icon-choice { cursor: pointer; }
.icon-choice input { display: none; }
.icon-choice i {
    width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; font-size: 1.2rem;
    background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-muted);
}
.icon-choice input:checked + i { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-heading); }
.album-card { color: var(--color-text); }
.album-card:hover { border-color: var(--color-primary); }
.album-cover {
    height: 140px; border-radius: var(--radius) var(--radius) 0 0; background: var(--color-surface-2) center / cover no-repeat;
    display: grid; place-items: center; font-size: 2rem; color: var(--color-muted);
}
.admin-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.admin-photo { position: relative; }
.admin-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--color-border); }
.admin-photo form { position: absolute; top: .4rem; right: .4rem; }

/* ---------- Backup ---------- */
.drive-code {
    font-family: ui-monospace, Menlo, monospace; font-size: 1.8rem; font-weight: 700; letter-spacing: .25em;
    padding: .6rem 1rem; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-heading); display: inline-block;
    max-width: 100%; overflow-wrap: anywhere;
}

.google-guide { background: color-mix(in srgb, #2563EB 5%, var(--color-surface)); border: 1px solid color-mix(in srgb, #2563EB 20%, var(--color-border)); border-radius: var(--radius); padding: 1rem 1.1rem; color: var(--color-text); }
.google-guide ol { padding-left: 1.2rem; }
.google-guide li { margin-bottom: .55rem; line-height: 1.7; overflow-wrap: anywhere; }
.google-guide a { color: var(--color-info-text); }
.google-guide code { color: var(--tx-danger); }

/* ---------- Attendance ---------- */
.attendance-roll { width: 2.2rem; text-align: center; font-weight: 600; color: var(--color-muted); }
.attendance-choice .btn { min-width: 2.6rem; font-weight: 600; }
.attendance-row[data-status="absent"] { background: rgba(220, 53, 69, .08) !important; }
.attendance-row[data-status="late"] { background: rgba(255, 193, 7, .08) !important; }
.attendance-row[data-status="leave"] { background: rgba(13, 202, 240, .08) !important; }
/* The remark box only appears for people not present, or when it already has text. */
.attendance-row[data-status="present"] .attendance-remark:placeholder-shown { display: none; }
.attendance-savebar {
    position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    padding: .9rem 1rem; margin: 0 -1rem; background: color-mix(in srgb, var(--color-surface) 92%, transparent); backdrop-filter: blur(8px);
    border-top: 1px solid var(--color-border); box-shadow: 0 -10px 24px -18px rgba(11, 37, 64, .4);
}
@media (min-width: 768px) { .attendance-savebar { margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius); } }
.register-table th, .register-table td { padding: .35rem .3rem !important; font-size: .82rem; }
.register-off { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.att-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; max-width: 460px; }
.att-calendar-head { text-align: center; font-size: .75rem; color: var(--color-muted); }
.att-day {
    aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; font-size: .85rem;
    background: var(--color-surface-2); border: 1px solid var(--color-border);
}
.att-present, .att-late { background: rgba(25, 135, 84, .22); border-color: rgba(25, 135, 84, .5); }
.att-absent { background: rgba(220, 53, 69, .22); border-color: rgba(220, 53, 69, .55); }
.att-leave { background: rgba(13, 202, 240, .2); border-color: rgba(13, 202, 240, .5); }
.att-off { opacity: .5; }

@media print {
    .app-sidebar, .app-topbar, .academic-nav, form.card, footer, .theme-toggle { display: none !important; }
    body, .card { background: #fff !important; color: #000 !important; box-shadow: none !important; }
    .register-table, .register-table * { color: #000 !important; }
}

/* ---------- Sub navigation ---------- */
.academic-nav .nav-link { color: var(--color-muted); border-radius: 10px; }
.academic-nav .nav-link:hover { color: var(--color-heading); }
.academic-nav .nav-link.active { background: var(--color-primary-soft); color: var(--color-heading); }

.student-thumb {
    width: 40px; height: 40px; border-radius: 10px; object-fit: cover; display: inline-grid; place-items: center;
}
.student-thumb-empty { background: var(--color-primary-soft); color: var(--color-info-text); font-weight: 600; }
.student-photo { width: 120px; height: 140px; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--color-border); }
.student-photo-empty {
    width: 120px; height: 140px; border-radius: var(--radius); display: grid; place-items: center; margin: 0 auto;
    background: var(--color-surface-2); border: 1px dashed var(--color-border); color: var(--color-muted); font-size: 3rem;
}

/* ---------- Guest pages (login …) ---------- */
.guest-body {
    min-height: 100vh;
    background:
        radial-gradient(520px 380px at 12% 8%, rgba(45, 212, 191, .55), transparent 62%),
        radial-gradient(480px 360px at 92% 12%, rgba(236, 72, 153, .5), transparent 62%),
        radial-gradient(520px 380px at 85% 95%, rgba(249, 115, 22, .45), transparent 62%),
        radial-gradient(480px 360px at 5% 95%, rgba(124, 58, 237, .55), transparent 62%),
        linear-gradient(135deg, #0B6E63 0%, #0E7490 30%, #1E40AF 62%, #5B21B6 100%);
    background-attachment: fixed;
}
[data-bs-theme="dark"] .guest-body {
    background:
        radial-gradient(520px 380px at 12% 8%, rgba(45, 212, 191, .3), transparent 62%),
        radial-gradient(480px 360px at 92% 12%, rgba(236, 72, 153, .28), transparent 62%),
        radial-gradient(520px 380px at 85% 95%, rgba(249, 115, 22, .22), transparent 62%),
        linear-gradient(135deg, #062F2C 0%, #0B1F3A 50%, #1E1048 100%);
    background-attachment: fixed;
}
.guest-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.guest-card {
    width: 100%; max-width: 430px; border-radius: 22px; overflow: hidden;
    background: var(--color-surface); border: 0;
    box-shadow: 0 34px 80px -24px rgba(15, 23, 72, .6), 0 0 0 1px rgba(255, 255, 255, .25);
}
.guest-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--rainbow); }
.guest-card h1 { color: var(--color-heading); }
.guest-wrap .vendor-credit { color: rgba(255, 255, 255, .8) !important; }
.guest-wrap .alert { box-shadow: var(--shadow); }
.guest-locale { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
.school-hero-logo { width: 84px; height: 84px; border-radius: 20px; object-fit: cover; background: #fff; box-shadow: var(--shadow-sm); }

/* ---------- Charts (pure CSS bars) ---------- */
.fee-chart { display: flex; align-items: flex-end; gap: .75rem; height: 210px; padding-top: 1.4rem; }
.fee-chart-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .35rem; min-width: 0; }
.fee-chart-bar {
    width: 100%; max-width: 56px; border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, #A78BFA 0%, #3B82F6 45%, #14B8A6 100%); box-shadow: 0 6px 20px -8px rgba(59, 130, 246, .6);
    transition: height .6s cubic-bezier(.2, .8, .2, 1), filter .15s;
}
.fee-chart-col:hover .fee-chart-bar { filter: saturate(1.3) brightness(1.08); }
.fee-chart-col:last-child .fee-chart-bar { background: linear-gradient(180deg, #FB923C, #EC4899); box-shadow: 0 6px 20px -8px rgba(236, 72, 153, .6); }
.fee-chart-value { font-size: .72rem; color: var(--color-muted); white-space: nowrap; }
.fee-chart-label { font-size: .8rem; color: var(--color-muted); }
.fee-structure .input-group-text { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-muted); }
.receipt-row {
    display: flex; align-items: center; gap: .85rem; padding: .65rem .8rem; margin-bottom: .5rem;
    border: 1px solid var(--color-border); border-radius: 12px; color: var(--color-text); text-decoration: none;
    transition: border-color .15s, background .15s;
}
.receipt-row:hover { border-color: var(--color-primary); background: var(--color-surface-2); color: var(--color-heading); }
.receipt-row-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--color-secondary-soft); color: var(--color-gold-text); font-size: 1.1rem; }

/* ---------- Results / marks (shared) ---------- */
.marks-table input.form-control { max-width: 92px; text-align: center; }
.marks-table tr.is-absent input[type=number] { opacity: .35; pointer-events: none; }
.marks-total { min-width: 64px; font-weight: 600; }
.tabulation th, .tabulation td { padding: .45rem .5rem !important; font-size: .84rem; white-space: nowrap; }
.tabulation .sticky-col { position: sticky; left: 0; background: var(--color-surface); z-index: 1; }
.tabulation .fail { color: var(--tx-danger); font-weight: 600; }
.grade-pill { display: inline-block; min-width: 34px; padding: .1rem .45rem; border-radius: 999px; font-weight: 600; font-size: .8rem; text-align: center; background: var(--color-primary-soft); color: var(--color-info-text); }
.grade-pill.g-F { background: rgba(220, 53, 69, .16); color: var(--tx-danger); }
.grade-pill.g-Ap { background: rgba(25, 135, 84, .18); color: var(--tx-success); }
.exam-card { transition: border-color .15s, transform .15s; }
.exam-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.part-input { width: 76px; }

/* ---------- Staff ---------- */
.employee-card { transition: border-color .15s, transform .15s, box-shadow .15s; }
.employee-card:hover { border-color: color-mix(in srgb, var(--tone) 55%, var(--color-border)); transform: translateY(-2px); box-shadow: 0 14px 26px -16px var(--tone); }
.employee-photo { width: 64px; height: 64px; border-radius: 18px; object-fit: cover; flex-shrink: 0; }
.employee-photo-empty { display: grid; place-items: center; background: linear-gradient(135deg, var(--tone-2), var(--tone)); color: #fff; font-size: 1.5rem; font-weight: 600; }
.employee-photo-lg { width: 128px; height: 128px; border-radius: 32px; object-fit: cover; display: inline-grid; place-items: center; font-size: 3rem; box-shadow: 0 0 0 4px var(--color-surface), 0 0 0 6px var(--color-primary); }

/* ---------- Routine / timetable ---------- */
.routine-table { width: 100%; border-collapse: separate; border-spacing: 4px; min-width: 640px; }
.routine-table th, .routine-table td { text-align: center; vertical-align: middle; padding: .5rem .4rem; border-radius: 10px; font-size: .84rem; }
.routine-table thead th { background: var(--color-surface-2); color: var(--color-muted); font-weight: 600; }
.routine-table thead th small { display: block; font-weight: 400; font-size: .74rem; }
.routine-table .routine-day { text-align: left; white-space: nowrap; background: var(--color-surface-2); color: var(--color-text); font-weight: 600; }
.routine-table td { background: var(--color-primary-soft); color: var(--color-heading); min-width: 96px; }
.routine-table td b { display: block; font-weight: 600; }
.routine-table td small { display: block; color: var(--color-muted); font-size: .74rem; }
.routine-table td.is-empty { background: transparent; border: 1px dashed var(--color-border); }
.routine-table tr.is-today .routine-day { background: var(--color-secondary); color: #1A1405; }
.routine-table td.is-now { outline: 2px solid var(--color-secondary); }
.routine-table .routine-break, .routine-editor-break { background: var(--color-secondary-soft); color: var(--color-gold-text); min-width: 36px; width: 36px; }
.routine-table .routine-break span, .routine-editor-break span { writing-mode: vertical-rl; font-weight: 600; letter-spacing: .1em; }
.routine-table .routine-break-head { width: 36px; }
.routine-editor th { white-space: nowrap; font-size: .8rem; }
.routine-editor td { min-width: 150px; vertical-align: top; transition: background .15s; }
.routine-editor td.is-filled { background: var(--color-primary-soft); }
.routine-editor .routine-editor-break { min-width: 36px; text-align: center; vertical-align: middle; }

.today-time { min-width: 110px; font-size: .85rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.today-now { background: var(--color-secondary-soft) !important; }

/* ---------- Sales demo ---------- */
.demo-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem 1rem; font-size: .85rem;
    background: linear-gradient(90deg, #FEF3C7, #FCE7F3 50%, #E0F2FE); border-bottom: 1px solid var(--color-border); color: #7C4A03;
}
[data-bs-theme="dark"] .demo-strip { background: linear-gradient(90deg, rgba(212, 166, 70, .18), rgba(14, 159, 142, .12)); color: #F3DFA8; }
.demo-strip > i { color: #DB2777; }
.demo-logins { border-top: 1px dashed var(--color-border); padding-top: 1rem; }
.demo-login-btn { font-size: .88rem; padding: .55rem .5rem; }
.demo-login-btn i { color: #D4A646; }
.demo-locked { background: rgba(212, 166, 70, .1) !important; border-color: rgba(212, 166, 70, .55) !important; padding-right: 2.6rem; cursor: not-allowed; }
.demo-lock { position: absolute; right: .95rem; top: 50%; transform: translateY(-50%); color: #C08A1E; }
.demo-hint a { color: var(--color-gold-text); font-weight: 600; text-decoration: none; }

/* ---------- Online admission / forms in steps ---------- */
.adm-fieldset { border: 0; margin: 0 0 1.25rem; padding: 0 0 .5rem; border-bottom: 1px dashed var(--color-border); }
.adm-fieldset:last-child { border-bottom: 0; margin-bottom: 0; }
.adm-fieldset legend { float: none; display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 600; margin-bottom: .9rem; }
.adm-fieldset legend small { font-weight: 400; color: var(--color-muted); font-size: .8rem; }
.adm-step { width: 1.7rem; height: 1.7rem; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #2DD4BF, #0D9488); color: #fff; font-size: .85rem; flex-shrink: 0; }
.adm-hint { font-size: .85rem; color: var(--color-muted); margin: -.4rem 0 .6rem; }
.adm-quick { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .85rem; color: var(--color-muted); }
.adm-chip { border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); border-radius: 999px; padding: .2rem .8rem; font-size: .85rem; }
.adm-chip.active, .adm-chip:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.adm-photo {
    position: relative; display: grid; place-items: center; width: 100%; max-width: 170px; aspect-ratio: 4 / 5; border-radius: var(--radius); cursor: pointer;
    border: 2px dashed var(--color-border); background: var(--color-surface-2); overflow: hidden; margin-bottom: 1rem;
}
.adm-photo:hover { border-color: var(--color-primary); }
.adm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adm-photo span { display: flex; flex-direction: column; align-items: center; gap: .2rem; color: var(--color-muted); text-align: center; font-size: .85rem; padding: .5rem; }
.adm-photo span i { font-size: 1.6rem; }
.adm-photo span small { font-size: .72rem; }
.adm-filter .nav-link { color: var(--color-muted); border-radius: 8px; padding: .3rem .7rem; }
.adm-filter .nav-link.active { background: var(--color-primary-soft); color: var(--color-heading); }
.adm-status-pick { display: flex; flex-wrap: wrap; gap: .4rem; }
.adm-class-pick { display: flex; flex-wrap: wrap; gap: .35rem; }
.adm-history { list-style: none; padding: 0 0 0 1rem; margin: 0; border-left: 2px solid var(--color-border); }
.adm-history li { position: relative; padding-bottom: .8rem; }
.adm-history li::before { content: ''; position: absolute; left: calc(-1rem - 6px); top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); }
.adm-history li.is-private::before { background: var(--color-muted); }
.adm-history li:last-child { padding-bottom: 0; }
.dash-admission { border-color: rgba(212, 166, 70, .35); }
.dash-admission:hover { border-color: var(--color-secondary); }

/* ---------- Certificates ---------- */
.cert-rank { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 .4rem; border-radius: 50%; font-weight: 700; font-size: .85rem; }
.cert-rank.r1 { background: linear-gradient(135deg, #F3D36B, #B8860B); color: #3A2A00; }
.cert-rank.r2 { background: linear-gradient(135deg, #F1F4F8, #9AA4B1); color: #2A3038; }
.cert-rank.r3 { background: linear-gradient(135deg, #E7A86A, #9C5A22); color: #2E1806; }
.cert-pick { padding: .75rem; border-radius: var(--radius); background: var(--color-surface-2); border: 1px solid var(--color-border); }
.cert-swatch {
    position: relative; aspect-ratio: 297 / 210; border-radius: 6px; overflow: hidden; background: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: linear-gradient(var(--sw-tint), var(--sw-tint)) padding-box; border: 6px solid var(--sw-ink); box-shadow: inset 0 0 0 2px var(--sw-accent);
}
.cert-swatch .sw-title { font-weight: 700; color: var(--sw-ink); font-size: .95rem; position: relative; z-index: 1; }
.cert-swatch .sw-line { width: 58%; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--sw-ink) 25%, transparent); position: relative; z-index: 1; }
.cert-swatch .sw-line.short { width: 38%; background: var(--sw-accent); }
.cert-swatch.frame-guilloche { border-style: double; border-width: 8px; }
.cert-swatch.frame-ribbon { border: 2px solid var(--sw-ink); box-shadow: inset 26px 0 0 var(--sw-ink), inset 29px 0 0 var(--sw-accent); padding-left: 26px; }
.cert-swatch.frame-royal { border-width: 9px; box-shadow: inset 0 0 0 3px var(--sw-accent); }
.cert-swatch.frame-wave { border: 1px solid var(--sw-ink); }
.cert-swatch.frame-wave::before { content: ''; position: absolute; left: -20%; top: -45%; width: 70%; height: 80%; border-radius: 50%; background: var(--sw-ink); box-shadow: 6px 6px 0 var(--sw-accent); }
.cert-swatch.frame-wave::after { content: ''; position: absolute; right: -20%; bottom: -45%; width: 70%; height: 80%; border-radius: 50%; background: var(--sw-ink); box-shadow: -6px -6px 0 var(--sw-accent); }
.cert-swatch.frame-geometric { border: 1px solid var(--sw-ink); }
.cert-swatch.frame-geometric::before { content: ''; position: absolute; left: 0; top: 0; border-style: solid; border-width: 34px 34px 0 0; border-color: var(--sw-ink) transparent transparent transparent; }
.cert-swatch.frame-geometric::after { content: ''; position: absolute; right: 0; bottom: 0; border-style: solid; border-width: 0 0 34px 34px; border-color: transparent transparent var(--sw-accent) transparent; }
.cert-swatch.frame-laurel { border-width: 4px; outline: 2px solid var(--sw-accent); outline-offset: -10px; }
.sig-preview { display: inline-block; padding: .5rem 1rem; border-radius: 10px; background: #fff; border: 1px solid var(--color-border); }
.sig-preview img { max-height: 54px; max-width: 220px; }
.cert-swatch-wrap { padding: 5px; background: #fff; border-radius: 8px; }
.cert-tile { padding: 1rem; border-radius: var(--radius); background: var(--color-surface-2); border: 1px solid var(--color-border); border-top: 4px solid var(--sw-accent); display: flex; flex-direction: column; }
.cert-tile .btn { margin-top: auto !important; }
.cert-tile-top { display: flex; align-items: center; gap: .75rem; }
.cert-tile-icon { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; flex-shrink: 0; border-radius: 50%; background: rgba(34, 197, 94, .15); color: var(--tx-success); }

/* ---------- About the software ---------- */
.about-hero-text { flex: 1; min-width: 0; }
.about-product { font-size: 1.35rem; font-weight: 600; line-height: 1.35; }
.about-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: .45rem 0; }
.about-by { opacity: .85; }
.about-contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; }
.about-contact {
    display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: var(--radius); text-decoration: none; color: var(--color-text);
    background: var(--color-surface-2); border: 1px solid var(--color-border); transition: border-color .2s, transform .2s;
}
.about-contact:hover { color: var(--color-heading); border-color: var(--color-primary); transform: translateY(-1px); }
.about-contact i { font-size: 1.35rem; color: var(--color-accent-text); width: 1.6rem; text-align: center; flex-shrink: 0; }
.about-contact b { display: block; font-weight: 600; }
.about-contact small { display: block; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.about-contact.is-wa { background: rgba(37, 211, 102, .12); border-color: rgba(37, 211, 102, .45); }
.about-contact.is-wa i { color: #1DA851; }
.about-contact.is-wa:hover { border-color: #25D366; }
.about-products { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.about-products i { color: var(--color-secondary); margin-right: .45rem; }
.about-copy .list-group-item { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.about-copy span { color: var(--color-muted); flex-shrink: 0; }
.about-copy b { font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
    .about-hero { flex-direction: column; text-align: center; padding: 1.25rem 1rem; }
    .about-logo { height: 64px; max-width: 180px; }
    .about-product { font-size: 1.15rem; }
    .about-meta { justify-content: center; }
    .about-contacts { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .about-contact { flex-direction: column; align-items: flex-start; gap: .35rem; padding: .75rem; }
    .about-contact small { font-size: .75rem; max-width: 100%; }
    .about-copy .list-group-item { flex-direction: column; gap: .1rem; }
    .about-copy b { text-align: left; }
}
.english-box > summary { cursor: pointer; list-style: none; }
.english-box > summary::-webkit-details-marker { display: none; }
.english-box:not([open]) > summary { border-bottom: 0; }

/* ---------- Software license ---------- */
.lic-hero { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; padding: 1.6rem; border-radius: 20px; color: #fff; }
.lic-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.lic-hero.is-ok { background: linear-gradient(125deg, #0B5D56, #0E9F8E 55%, #16A34A); }
.lic-hero.is-info { background: linear-gradient(125deg, #1E3A8A, #2563EB 55%, #0891B2); }
.lic-hero.is-bad { background: linear-gradient(125deg, #881337, #E11D48 60%, #F97316); }
.lic-hero-main { flex: 1 1 360px; display: flex; gap: 1.1rem; align-items: flex-start; min-width: 0; position: relative; z-index: 1; }
.lic-status-icon { width: 64px; height: 64px; border-radius: 20px; flex-shrink: 0; display: grid; place-items: center; font-size: 2rem; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.lic-eyebrow { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.lic-hero h2 { font-size: 1.45rem; margin: .2rem 0 .3rem; color: #fff; }
.lic-hero p { margin: 0 0 .8rem; opacity: .9; }
.lic-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.lic-chips span { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; background: rgba(255,255,255,.16); font-size: .82rem; max-width: 100%; overflow-wrap: anywhere; }
.lic-meter { position: relative; z-index: 1; min-width: 190px; padding: 1rem 1.2rem; border-radius: 16px; background: rgba(255,255,255,.14); text-align: center; }
.lic-meter-num b { font-size: 2.2rem; line-height: 1; }
.lic-meter-num span { font-size: 1.1rem; opacity: .85; }
.lic-meter small { display: block; opacity: .85; }
.lic-bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,.22); margin-top: .6rem; overflow: hidden; }
.lic-bar span { display: block; height: 100%; background: #fff; border-radius: 99px; }
.lic-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.lic-site { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; border-radius: 14px; background: var(--color-surface-2); border: 1px solid var(--color-border); min-width: 0; }
.lic-site.is-this { border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.08); }
.lic-site > i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, #2DD4BF, #0D9488); color: #fff; flex-shrink: 0; }
.lic-site b { display: block; overflow-wrap: anywhere; }
.lic-site small { color: var(--color-muted); }
.lic-dot { width: 10px; height: 10px; border-radius: 50%; background: #22C55E; margin-left: auto; box-shadow: 0 0 0 4px rgba(34,197,94,.2); flex-shrink: 0; }
.lic-steps { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.lic-steps li { display: flex; gap: .7rem; padding: .85rem; border-radius: 14px; background: var(--color-surface-2); border: 1px solid var(--color-border); }
.lic-steps li > span { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(135deg, #2DD4BF, #0D9488); color: #fff; font-weight: 700; }
.lic-steps li:nth-child(2) > span { background: linear-gradient(135deg, #60A5FA, #2563EB); }
.lic-steps li:nth-child(3) > span { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.lic-steps b { display: block; font-size: .95rem; }
.lic-steps small { color: var(--color-muted); font-size: .8rem; }
.lic-form { display: flex; flex-wrap: wrap; gap: .6rem; }
.lic-input { position: relative; flex: 1 1 280px; min-width: 0; }
.lic-input i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--color-secondary); }
.lic-input input { width: 100%; height: 52px; padding: 0 1rem 0 2.7rem; border-radius: 12px; border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font-size: 1.05rem; letter-spacing: .08em; }
[data-bs-theme="dark"] .lic-input input { background: var(--color-surface-2); border-color: var(--color-border); }
.lic-input input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 .2rem var(--color-primary-soft); }
.lic-info-note { display: flex; gap: .9rem; }
.lic-info-note > i { font-size: 1.6rem; color: var(--color-accent-text); }
.lic-versions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.lic-versions > div { padding: .7rem 1rem; border-radius: 12px; background: var(--color-surface-2); border: 1px solid var(--color-border); min-width: 120px; }
.lic-versions > div.is-new { border-color: var(--color-secondary); }
.lic-versions small { display: block; color: var(--color-muted); font-size: .76rem; }
.lic-versions b { font-size: 1.2rem; }
.lic-versions > i { color: var(--color-muted); }
.lic-changelog { margin: .8rem 0 0; padding: .8rem; border-radius: 10px; background: var(--color-surface-2); white-space: pre-wrap; font-size: .82rem; }
.lic-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.lic-actions form { margin: 0; }
.lic-support-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.lic-support-logo { height: 46px; padding: 6px 10px; border-radius: 12px; background: #fff; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--color-border); }
.lic-support-logo img { height: 100%; width: auto; max-width: 110px; object-fit: contain; }
.lic-support-head b { display: block; }
.lic-support-head small { color: var(--color-muted); }
.lic-support-links { display: grid; gap: .5rem; }
.lic-support-links a { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border-radius: 12px; background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.lic-support-links a:hover { border-color: var(--color-primary); color: var(--color-heading); }
.lic-support-links a i { color: var(--color-accent-text); font-size: 1.1rem; }
.lic-support-links a.is-wa { background: rgba(37,211,102,.12); border-color: rgba(37,211,102,.45); }
.lic-support-links a.is-wa i { color: #1DA851; }
@media (max-width: 767.98px) {
    .lic-hero { padding: 1.25rem; gap: 1rem; }
    .lic-hero-main { flex-direction: column; }
    .lic-status-icon { width: 54px; height: 54px; font-size: 1.6rem; border-radius: 16px; }
    .lic-hero h2 { font-size: 1.2rem; }
    .lic-meter { width: 100%; }
    .lic-steps { grid-template-columns: 1fr; }
    .lic-form .btn { width: 100%; }
    .lic-actions { grid-template-columns: 1fr; }
}

/* ---------- Hospital screens ---------- */
.patient-chip { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border)); border-radius: 12px; background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); min-width: 0; }
.patient-chip .avatar { width: 40px; height: 40px; font-size: 1.1rem; }
.patient-photo { width: 96px; height: 96px; border-radius: 18px; object-fit: cover; background: linear-gradient(135deg, #CCFBF1, #DBEAFE); display: grid; place-items: center; font-size: 2.4rem; color: #0D9488; }
[data-bs-theme="dark"] .patient-photo { background: var(--color-surface-2); color: var(--color-muted); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.kv dt { color: var(--color-muted); font-weight: 400; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.lookup { position: relative; }
.lookup-results { position: absolute; z-index: 1060; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 320px; overflow-y: auto; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 18px 40px -10px rgba(11, 37, 64, .35); }
[data-bs-theme="dark"] .lookup-results { box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.lookup-results button { display: block; width: 100%; text-align: left; padding: .55rem .8rem; border: 0; background: none; color: inherit; border-bottom: 1px solid var(--color-border); }
.lookup-results button:last-child { border-bottom: 0; }
.lookup-results button:hover, .lookup-results button.is-active { background: var(--color-primary-soft); }
.lookup-results small { color: var(--color-muted); }
.bill-lines td { vertical-align: middle; }
.bill-lines input.form-control { min-width: 70px; }
.bill-total { font-size: 1.6rem; font-family: var(--font-heading); color: var(--color-heading); }
.status-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .35rem; background: currentColor; }
.queue-number { font-family: var(--font-heading); font-size: 1.4rem; min-width: 3rem; text-align: center; font-weight: 600; color: #7C3AED; }
[data-bs-theme="dark"] td.queue-number { color: #C4B5FD; }
span.queue-number, div.queue-number {
    display: inline-block; padding: .15rem .55rem; border-radius: 12px; color: #fff;
    background: linear-gradient(135deg, #F472B6, #7C3AED); box-shadow: 0 8px 16px -10px #7C3AED;
}
div.queue-number { display: block; width: max-content; }
div.queue-number.mx-auto, .text-center > div.queue-number { margin-left: auto; margin-right: auto; }
.bed-tile { border: 1px solid var(--color-border); border-radius: 12px; padding: .75rem; text-align: center; background: var(--color-surface-2); color: var(--color-text); }
.bed-tile.is-occupied { border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .08); }
.bed-tile.is-available { border-color: rgba(16, 185, 129, .55); background: rgba(16, 185, 129, .09); }
.bed-tile.is-cleaning { border-color: rgba(245, 158, 11, .55); background: rgba(245, 158, 11, .09); }
.bed-tile.is-maintenance { opacity: .55; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--color-muted); }
.empty-state i { font-size: 2.4rem; display: block; margin-bottom: .5rem; opacity: .75; color: var(--tone); }
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.filter-bar .form-control, .filter-bar .form-select { width: auto; min-width: 140px; max-width: 100%; }
@media (max-width: 575.98px) {
    .filter-bar > * { flex: 1 1 140px; min-width: 0; }
    .filter-bar .form-control, .filter-bar .form-select { width: 100%; min-width: 0; }
}

/* ---------- Module screens written for the old dark-only theme ----------
   Their own <style> blocks set a few white / light-teal colours; these
   (slightly more specific) rules make them follow the theme. */
html .bed-tile-no { color: var(--color-heading); }
html .ipd-tabs .nav-link.active { color: var(--color-heading); }
html .triage-pick input:checked + label { border-color: var(--color-heading); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-heading) 22%, transparent); }
html .triage-pick input:focus-visible + label { outline-color: var(--color-heading); }
html .er-case:hover, html .ot-case:hover { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
html button.rx-chip:hover, html .rx-chip button:hover { color: var(--color-accent-text); }
html[data-bs-theme="light"] .rx-actions { box-shadow: 0 -8px 24px -10px rgba(11, 37, 64, .25); }
html[data-bs-theme="light"] .trend-svg [stroke="#5FD4C4"] { stroke: #0D9488; }
html[data-bs-theme="light"] .trend-svg [fill="#5FD4C4"] { fill: #0D9488; }
html[data-bs-theme="light"] .trend-svg text[fill="#F59E0B"] { fill: #B45309; }
/* Orange triage colour comes inline from EmergencyVisit::TRIAGE; a deeper orange keeps its white text readable. */
[style*="background:#fd7e14"] { background-color: #D9480F !important; }
html .wl-tab.active { background-image: linear-gradient(135deg, #0FB09D, #0B7F9F); }

/* ==========================================================================
   Facility type themes: the type chosen at installation (data-facility on <html>)
   gives the dashboard the same colours and fonts as that type's demo and website.
   hospital = teal (the defaults above) · clinic = blue / indigo · diagnostic = violet / magenta
   ========================================================================== */
[data-facility="clinic"] {
    --color-primary: #2563EB; --color-primary-hover: #1D4ED8; --color-primary-soft: rgba(37, 99, 235, .12);
    --color-accent-text: #1D4ED8;
    --bs-primary: #2563EB; --bs-primary-rgb: 37, 99, 235;
    --bs-link-color: #1D4ED8; --bs-link-color-rgb: 29, 78, 216; --bs-link-hover-color: #1E3A8A; --bs-link-hover-color-rgb: 30, 58, 138;
    --tone: #2563EB; --tone-2: #60A5FA; --tone-ink: #1E3A8A;
    --bd-primary-bg: #DBEAFE; --bd-primary-fg: #1E40AF;
    --font-heading: 'Poppins', 'Anek Bangla', sans-serif;
    --font-body: 'Anek Bangla', 'Poppins', system-ui, sans-serif;
    --radius: 18px; --bs-border-radius: 12px;
}
[data-facility="diagnostic"] {
    --color-primary: #7C3AED; --color-primary-hover: #6D28D9; --color-primary-soft: rgba(124, 58, 237, .12);
    --color-accent-text: #6D28D9;
    --bs-primary: #7C3AED; --bs-primary-rgb: 124, 58, 237;
    --bs-link-color: #6D28D9; --bs-link-color-rgb: 109, 40, 217; --bs-link-hover-color: #4C1D95; --bs-link-hover-color-rgb: 76, 29, 149;
    --tone: #7C3AED; --tone-2: #C084FC; --tone-ink: #4C1D95;
    --bd-primary-bg: #EDE9FE; --bd-primary-fg: #5B21B6;
    --font-heading: 'Plus Jakarta Sans', 'Noto Sans Bengali', sans-serif;
    --font-body: 'Noto Sans Bengali', 'Plus Jakarta Sans', system-ui, sans-serif;
    --radius: 10px; --bs-border-radius: 8px;
}
[data-facility="clinic"][data-bs-theme="dark"] { --color-primary-soft: rgba(96, 165, 250, .16); --color-accent-text: #93C5FD; --bs-link-color: #93C5FD; --bs-link-color-rgb: 147, 197, 253; --bs-link-hover-color: #BFDBFE; --bd-primary-bg: rgba(59, 130, 246, .18); --bd-primary-fg: #BFDBFE; }
[data-facility="diagnostic"][data-bs-theme="dark"] { --color-primary-soft: rgba(192, 132, 252, .16); --color-accent-text: #C4B5FD; --bs-link-color: #C4B5FD; --bs-link-color-rgb: 196, 181, 253; --bs-link-hover-color: #DDD6FE; --bd-primary-bg: rgba(139, 92, 246, .2); --bd-primary-fg: #DDD6FE; }

/* Sidebars: each type its own gradient */
[data-facility="clinic"] .app-sidebar {
    background-color: #1E3A8A;
    background-image:
        radial-gradient(340px 260px at 110% 0%, rgba(56, 189, 248, .30), transparent 65%),
        radial-gradient(300px 260px at -20% 100%, rgba(129, 140, 248, .25), transparent 65%),
        linear-gradient(180deg, #1D4ED8 0%, #1E40AF 35%, #3730A3 70%, #312E81 100%);
}
[data-facility="diagnostic"] .app-sidebar {
    background-color: #4C1D95;
    background-image:
        radial-gradient(340px 260px at 110% 0%, rgba(244, 114, 182, .32), transparent 65%),
        radial-gradient(300px 260px at -20% 100%, rgba(167, 139, 250, .25), transparent 65%),
        linear-gradient(180deg, #5B21B6 0%, #6D28D9 30%, #86198F 68%, #9D174D 100%);
}
[data-facility="clinic"][data-bs-theme="dark"] .app-sidebar { background-image: linear-gradient(180deg, #172554 0%, #1E3A8A 50%, #1E1B4B 100%); }
[data-facility="diagnostic"][data-bs-theme="dark"] .app-sidebar { background-image: linear-gradient(180deg, #2E1065 0%, #4C1D95 50%, #500724 100%); }
[data-facility="clinic"] .app-sidebar.offcanvas-lg { --bs-offcanvas-bg: #1E3A8A; }
[data-facility="diagnostic"] .app-sidebar.offcanvas-lg { --bs-offcanvas-bg: #4C1D95; }
[data-facility="clinic"] .app-sidebar .brand-mark { background: linear-gradient(135deg, #38BDF8, #6366F1); box-shadow: 0 8px 18px -8px rgba(56, 189, 248, .9); }
[data-facility="diagnostic"] .app-sidebar .brand-mark { background: linear-gradient(135deg, #F472B6, #A855F7); box-shadow: 0 8px 18px -8px rgba(217, 70, 239, .9); }

/* Top hairline and welcome band follow the type */
[data-facility="clinic"] { --rainbow: linear-gradient(90deg, #0EA5E9, #2563EB, #6366F1, #8B5CF6, #0EA5E9); }
[data-facility="diagnostic"] { --rainbow: linear-gradient(90deg, #7C3AED, #A855F7, #D946EF, #EC4899, #7C3AED); }
[data-facility="clinic"] .dash-hero { background-image: radial-gradient(420px 220px at 100% 0%, rgba(56, 189, 248, .45), transparent 65%), radial-gradient(360px 220px at 0% 100%, rgba(129, 140, 248, .4), transparent 65%), linear-gradient(120deg, #1D4ED8, #4F46E5 55%, #0EA5E9); }
[data-facility="diagnostic"] .dash-hero { background-image: radial-gradient(420px 220px at 100% 0%, rgba(244, 114, 182, .45), transparent 65%), radial-gradient(360px 220px at 0% 100%, rgba(167, 139, 250, .4), transparent 65%), linear-gradient(120deg, #6D28D9, #A21CAF 55%, #DB2777); }

/* Shape details differ a little too: rounder clinic, crisper diagnostic */
[data-facility="clinic"] .card, [data-facility="clinic"] .stat-card { border-radius: 20px; }
[data-facility="diagnostic"] .card, [data-facility="diagnostic"] .stat-card { border-radius: 10px; }
[data-facility="diagnostic"] .sidebar-nav .nav-link { border-radius: 8px; }
[data-facility="clinic"] .sidebar-nav .nav-link { border-radius: 999px; }

/* Login page background */
[data-facility="clinic"] .guest-body { background-image: radial-gradient(520px 380px at 12% 8%, rgba(56, 189, 248, .5), transparent 62%), radial-gradient(480px 360px at 92% 90%, rgba(129, 140, 248, .5), transparent 62%), linear-gradient(135deg, #1D4ED8, #4F46E5 50%, #0EA5E9); }
[data-facility="diagnostic"] .guest-body { background-image: radial-gradient(520px 380px at 12% 8%, rgba(244, 114, 182, .5), transparent 62%), radial-gradient(480px 360px at 92% 90%, rgba(167, 139, 250, .5), transparent 62%), linear-gradient(135deg, #6D28D9, #A21CAF 50%, #DB2777); }

/* Primary buttons, pill tabs and worklist tabs follow the facility type too */
[data-facility="clinic"] .btn-primary { background-image: linear-gradient(135deg, #3B82F6, #2563EB 45%, #4F46E5); }
[data-facility="diagnostic"] .btn-primary { background-image: linear-gradient(135deg, #8B5CF6, #7C3AED 45%, #C026D3); }
[data-facility="clinic"] .nav-pills .nav-link.active, [data-facility="clinic"] .wl-tab.active { background-image: linear-gradient(135deg, #3B82F6, #4F46E5); box-shadow: 0 8px 18px -10px rgba(37, 99, 235, .9); }
[data-facility="diagnostic"] .nav-pills .nav-link.active, [data-facility="diagnostic"] .wl-tab.active { background-image: linear-gradient(135deg, #8B5CF6, #C026D3); box-shadow: 0 8px 18px -10px rgba(124, 58, 237, .9); }