/* ============================================================================
   Style.css - the one stylesheet for the Honeysuckle Care Management app
   ============================================================================
   Loaded by index.html as Style.css?v=<date>; the ?v= value changes with
   each release so browsers fetch the new copy (see also .htaccess, which
   sends "Cache-Control: no-cache" for .css files).

   No inline styles anywhere. The Content Security Policy in .htaccess sets
   style-src 'self', which blocks <style> blocks and style="..." attributes
   in index.html and in HTML built by the tab-*.js files. Every look the app
   needs therefore has a class here. Scripts mostly show, hide or restyle
   things by adding and removing classes; setting element.style from
   script is not blocked by the CSP and is used in places (switchTab and
   the window open/close helpers in core.js set style.display, which
   overrides the hiding classes below).

   How the file is organised (top to bottom):
     1. DESIGN TOKENS AND BASE: the colour variables on :root (--primary,
        --accent, --bg, --text, --border, --text-muted, and one variable
        per palette shade and job, e.g. --red-800-fg), then DARK MODE,
        which gives those variables their dark values; box-sizing and page
        defaults. Every rule uses these variables rather than literal
        colours (October 2026), so dark mode covers the whole app. The few
        things that stay white in dark mode are at the very end (DARK MODE:
        THINGS THAT STAY LIGHT).
     2. APP SHELL: header, tab navigation (a bottom bar on phones),
        containers and cards.
     3. TABLES: desktop tables, then the "card view" that turns each table
        row into a labelled card on narrow screens (by media query, by
        container query, and by the .fit-cards class core.js adds).
     4. BUTTONS AND FORMS, ACCESSIBILITY helpers (focus rings, skip link,
        .sr-only, reduced motion).
     5. SHARED COMPONENTS: modals/windows, the section jump bar, toasts,
        confirm dialog, photo/PDF lightbox, photo thumbnails, chips, the
        body map diagram.
     6. UTILITY CLASSES (u-*): one class per former inline style="",
        generated when inline styles were removed for the CSP. Names
        describe the declarations (u-flex-gap-0-5rem) or are numbered where
        no short name fitted (u-style-3). .u-hidden-2 is the general
        "hidden" class that scripts toggle.
     7. STATE CLASSES: colours that depend on data (severity, invoice
        status, alert level, active/inactive).
     8. FEATURE SECTIONS, roughly in the order they were added: mood picker,
        Settings layout permissions, EHR column widths, Settings hub,
        two-factor login, third-party software review, audit log, staff
        training matrix, care plans and risk assessments, notification
        bell, invoices, rota, family portal, NHS number check, CQC evidence
        pack, residence notes. Each names the tab-*.js file that uses it.
     9. PHONES AND TABLETS: full-screen windows, sticky title and Save bars,
        and bigger touch targets for (pointer: coarse) screens.

   Breakpoints used throughout:
     max-width 767px   phone (bottom tab bar, card tables, full-screen
                       windows)
     min-width 768px   tablet and up
     min-width 1024px  wide screen (header brand and nav side by side)
     max-width 700px   container query on .table-responsive, and the
                       Settings layout permissions list
     600px / 640px     a few small forms that stack on very narrow screens
     pointer: coarse   any touch screen, whatever its width

   Stacking order (z-index), lowest to highest:
     5-6     sticky bars inside a window (jump bar, title bar, Save bar)
     1000    .modal-overlay (an ordinary window)
     1500    phone bottom tab bar; notification panel
     2000    .sub-modal (a window opened from another window)
     2500    .modal-above-history (a form opened from Full History)
     3000    .confirm-overlay (confirm and "Confirm it's you" dialogs)
     4000    .lightbox-modal (photo and PDF viewer)
     10000   #toast-container (messages always on top)
     100000  .skip-link when focused

   Print: there is no general print stylesheet. The only @media print rules
   are for printing two-factor set-up codes (body.printing-setup-codes).
   PDFs of records are generated by script, not by printing the page.

   Accessibility: colours are chosen for WCAG AA contrast (ratios noted
   next to some of them), focus rings are always visible, touch targets
   are at least 24px (40-44px on touch screens), and status is shown in
   words as well as colour.
   ============================================================================ */

/* ============================================================
   DESIGN TOKENS AND BASE
   ============================================================ */
:root {
    --primary: #0f172a;
    --accent: #0369a1; /* 5.9:1 with white (WCAG AA) */
    --bg: #f8fafc;
    --text: #334155;
    --border: #e2e8f0;
    --text-muted: #64748b; /* secondary notes (.list-count-note); 4.8:1 with white */

    /* Every colour the rules below use, as a variable named after its
       palette shade and the job it does there: -bg a background or fill,
       -fg text or an icon line, -bd a border, outline or focus ring. In
       light mode each is just the original colour (so the two shades of a
       colour used for different jobs are the same here); dark mode, below,
       gives each job its own value. Use these, not literal colours, in new
       rules, so dark mode keeps working. */
    color-scheme: light;
    --white-bd: #fff; --white-bg: #fff; --white-fg: #fff;
    --slate-50-bd: #f8fafc; --slate-50-bg: #f8fafc; --slate-100-bd: #f1f5f9;
    --slate-100-bg: #f1f5f9; --slate-200-bd: #e2e8f0; --slate-200-bg: #e2e8f0;
    --slate-200-fg: #e2e8f0; --slate-300-bd: #cbd5e1; --slate-400-bd: #94a3b8;
    --slate-400-fg: #94a3b8; --slate-450-bd: #7c8ba1; --slate-500-bd: #64748b;
    --slate-500-bg: #64748b; --slate-500-fg: #64748b; --slate-600-fg: #475569;
    --slate-700-bg: #334155; --slate-700-fg: #334155; --slate-800-fg: #1e293b;
    --slate-900-bg: #0f172a; --slate-900-fg: #0f172a;
    --grey-100-bg: #f5f5f5; --grey-300-bd: #ddd; --grey-800-fg: #333;
    --primary-bd: var(--primary); --primary-fg: var(--primary);
    --accent-bd: var(--accent); --accent-fg: var(--accent);
    --sky-50-bg: #f0f9ff; --sky-100-bg: #e0f2fe; --sky-200-bd: #bae6fd;
    --sky-300-bd: #7dd3fc; --sky-600-bd: #0284c7; --sky-700-bd: #0369a1;
    --sky-700-bg: #0369a1; --sky-700-fg: #0369a1; --sky-800-bd: #075985;
    --sky-800-fg: #075985; --sky-900-fg: #0c4a6e;
    --blue-50-bg: #eff6ff; --blue-100-bg: #dbeafe; --blue-200-bd: #bfdbfe;
    --blue-900-fg: #1e3a8a;
    --red-50-bg: #fef2f2; --red-100-bd: #fee2e2; --red-100-bg: #fee2e2;
    --red-200-bd: #fecaca; --red-300-bd: #fca5a5; --red-300-fg: #fca5a5;
    --red-500-bd: #ef4444; --red-500-bg: #ef4444; --red-600-bd: #dc2626;
    --red-600-bg: #dc2626; --red-600-fg: #dc2626; --red-700-bd: #b91c1c;
    --red-700-bg: #b91c1c; --red-700-fg: #b91c1c; --red-800-bd: #991b1b;
    --red-800-bg: #991b1b; --red-800-fg: #991b1b; --red-900-bd: #7f1d1d;
    --red-900-fg: #7f1d1d;
    --orange-100-bg: #ffedd5; --orange-500-bd: #f97316;
    --orange-700-bg: #c2410c; --orange-900-fg: #7c2d12;
    --amber-50-bg: #fffbeb; --amber-100-bg: #fef3c7; --amber-200-bd: #fde68a;
    --amber-300-bd: #fcd34d; --amber-400-bd: #fbbf24; --amber-500-bd: #f59e0b;
    --amber-700-bd: #b45309; --amber-700-bg: #b45309; --amber-700-fg: #b45309;
    --amber-800-bd: #92400e; --amber-800-bg: #92400e; --amber-800-fg: #92400e;
    --amber-900-fg: #78350f;
    --yellow-100-bg: #fef9c3; --yellow-300-bg: #fde047;
    --yellow-600-fg: #ca8a04; --yellow-900-fg: #713f12;
    --green-100-bg: #dcfce7; --green-700-bg: #15803d; --green-700-fg: #15803d;
    --green-800-fg: #166534; --green-900-fg: #14532d;
    --emerald-50-bg: #ecfdf5; --emerald-200-bd: #a7f3d0;
    --emerald-500-bd: #10b981; --emerald-700-bg: #047857;
    --emerald-700-fg: #047857; --emerald-800-fg: #065f46;
    --emerald-900-bd: #064e3b;
}

/* ============================================================
   DARK MODE
   Each person can switch it on or off (the moon/sun button in the
   header; core.js applyTheme, saved to their account by set-theme in
   server/routes/account.php). theme-init.js puts data-theme="dark" on
   <html> before the page is drawn, from this device's last choice, so
   there is no white flash; the account's own choice is applied once
   they sign in.
   Dark mode only changes the colour variables above: the page is the
   darkest surface, cards and windows sit a step lighter, text is a pale
   slate, and coloured text and tinted panels (red, amber, green, blue)
   use lighter text on deep tints of the same hue, so status still reads
   by colour and by words. Solid coloured buttons and badges keep their
   colours (their white text has the same contrast). Contrast is WCAG AA
   for text and 3:1 for field edges, as in light mode.
   color-scheme: dark gives date pickers, drop-downs and scroll bars
   their dark look too.
   ============================================================ */
:root[data-theme="dark"] {
    color-scheme: dark;
    --primary: #0a111c;
    --accent: #0369a1;
    --bg: #0d1520;
    --text: #d6deea;
    --border: #2b3a50;
    --text-muted: #95a3b8;
    --white-bg: #162130;
    --slate-50-bd: #1d2a3b; --slate-50-bg: #1b2738; --slate-100-bd: #243247;
    --slate-100-bg: #213045; --slate-200-bd: #2b3a50; --slate-200-bg: #2a3a52;
    --slate-300-bd: #3a4a62; --slate-400-bd: #5b6c85; --slate-450-bd: #71839d;
    --slate-500-bd: #71839d; --slate-500-bg: #52627a; --slate-500-fg: #95a3b8;
    --slate-600-fg: #b1bdcd; --slate-700-fg: #d6deea; --slate-800-fg: #e2e8f0;
    --slate-900-fg: #f1f5f9;
    --grey-100-bg: #213045; --grey-300-bd: #3a4a62; --grey-800-fg: #d6deea;
    --primary-bd: #5b6c85; --primary-fg: #f1f5f9;
    --accent-bd: #38bdf8; --accent-fg: #7dd3fc;
    --sky-50-bg: #0e2433; --sky-100-bg: #0f2c40; --sky-200-bd: #155a80;
    --sky-600-bd: #38bdf8; --sky-700-bd: #38bdf8; --sky-700-fg: #7dd3fc;
    --sky-800-bd: #0ea5e9; --sky-800-fg: #7dd3fc; --sky-900-fg: #bae6fd;
    --blue-50-bg: #131f3a; --blue-100-bg: #172a52; --blue-200-bd: #2a4580;
    --blue-900-fg: #93c5fd;
    --red-50-bg: #2a1316; --red-100-bd: #6b2228; --red-100-bg: #3b171b;
    --red-200-bd: #7a2a30; --red-300-bd: #9b3a40; --red-600-fg: #f87171;
    --red-700-bd: #ef4444; --red-700-fg: #fca5a5; --red-800-bd: #f87171;
    --red-800-fg: #fca5a5; --red-900-bd: #b91c1c; --red-900-fg: #fecaca;
    --orange-100-bg: #3a2312; --orange-900-fg: #fdba74;
    --amber-50-bg: #29200f; --amber-100-bg: #3a2c0e; --amber-200-bd: #6f5214;
    --amber-300-bd: #8a6714; --amber-700-bd: #f59e0b; --amber-700-fg: #fbbf24;
    --amber-800-bd: #d97706; --amber-800-fg: #fcd34d; --amber-900-fg: #fde68a;
    --yellow-100-bg: #332b0c; --yellow-600-fg: #facc15;
    --yellow-900-fg: #fde68a;
    --green-100-bg: #11301e; --green-700-fg: #4ade80; --green-800-fg: #86efac;
    --green-900-fg: #bbf7d0;
    --emerald-50-bg: #0f2b23; --emerald-200-bd: #1f6b4f;
    --emerald-700-fg: #34d399; --emerald-800-fg: #6ee7b7;
    --emerald-900-bd: #10b981;
}

/* Padding and borders count inside an element's width everywhere. */
* { 
    box-sizing: border-box; 
}

/* overscroll-behavior stops the "pull to refresh"/rubber-band bounce on
   phones, which could reload the app mid-entry; the tap highlight is
   removed because buttons have their own pressed and focus styles. */
html, body {
    width: 100%;
    height: 100%;
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

/* App-chrome elements (nav, buttons, badges) behave like native UI controls;
   everything else (table data, notes, form content) stays selectable so
   users can copy client details, phone numbers, etc. */
nav, header, .btn, .badge, .nav-tab, #main-app-nav {
    -webkit-user-select: none;
    user-select: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

/* Fields must stay selectable even inside the no-select app chrome above
   (e.g. the search box in a header). */
input, textarea {
    -webkit-user-select: auto;
    user-select: auto;
}

/* ============================================================
   APP SHELL: HEADER, TAB LIST AND PHONE TAB BAR
   The dark header bar holds the tenant logo, app title and signed-in
   user on the left, and the notification bell and account menu on the
   right. Below it, .app-body holds the main menu (#main-app-nav) and
   <main>:
     - 768px and up: a slim column of categories down the left (Home,
       Care, Quality, Team, Business, Admin); each slides out a panel of
       its pages;
     - phones (up to 767px): the same categories as a bar along the
       bottom; each opens its pages as a sheet above the bar.
   ============================================================ */
:root { --app-header-h: 4.5rem; --nav-rail-w: 5.5rem; }
/* env(safe-area-inset-*) keeps content clear of the notch and home bar on
   phones when the app runs full screen (added to the home screen). */
header.app-header {
    background: var(--primary);
    color: var(--white-fg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    padding-top: max(0.5rem, env(safe-area-inset-top));
    min-width: 0;
}
.app-header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.app-header-text { min-width: 0; }
/* The tenant's name stays on one line, cut short with "..." if it must. */
#app-header-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-header-tools { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
/* Tenant logo shown to the left of the app title/user/role block in the
   header, when the tenant has uploaded one in Admin Settings. Hidden via
   .u-hidden-2 by default and only revealed once a logo URL is actually set,
   so no broken-image icon flashes for tenants without one. */
.app-header-logo {
    height: 40px;
    width: auto;
    max-width: 120px;
    border-radius: 4px;
    background: var(--white-bg);
    object-fit: contain;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    /* The header stays at the top while the page scrolls, with the
       sidebar under it. Below the windows (1000) so a window covers it. */
    header.app-header {
        position: sticky;
        top: 0;
        z-index: 900;
        box-sizing: border-box;
        min-height: var(--app-header-h);
        padding: 0.5rem 1.25rem;
        padding-top: max(0.5rem, env(safe-area-inset-top));
    }
    /* A field that gets keyboard focus scrolls clear of the header
       (WCAG 2.4.11). */
    html { scroll-padding-top: calc(var(--app-header-h) + 0.5rem); }
}
/* Phones: a single compact line (the name and role are in the account
   menu). */
@media (max-width: 767px) {
    .app-header-welcome { display: none; }
    .app-header-logo { height: 32px; max-width: 80px; }
    #app-header-title { font-size: 1.05rem; }
}

/* Every <nav> (also the record windows' "Jump to section" bars). */
nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    width: 100%;
}
nav button {
    background: transparent;
    border: none;
    color: var(--slate-400-fg);
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 4px;
    flex: 1 1 auto;
    text-align: center;
}
nav button.active {
    color: var(--white-fg);
    background: rgba(255, 255, 255, 0.1);
    font-weight: bold;
    border-bottom: 2px solid var(--accent-bd);
}

/* THE MAIN MENU (#main-app-nav; core.js, MAIN MENU).
   #nav-rail holds one button per category (.nav-cat): a slim column down
   the left from 768px, a bar along the bottom on phones. Each category's
   pages are in its .nav-panel, which slides out beside the column (or up
   from the bar) when the category is pressed: page buttons (.nav-item)
   with an icon, a name and a line saying what the page is for, and "Find
   a page" at the top. A tall panel goes to two columns
   (.nav-panel-wide) and scrolls if it still doesn't fit. The column
   holds up to seven categories in 320px of height, so it fits any screen
   with room for more. */
#main-app-nav {
    background: var(--primary);
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    box-sizing: border-box;
}
.nav-rail { display: flex; flex-direction: column; gap: 0.3rem; box-sizing: border-box; }
.nav-rail .nav-cat {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 100%;
    min-height: 3.6rem;
    padding: 0.4rem 0.2rem;
    border: 0;
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1.15;
    text-align: center;
    color: var(--slate-300-fg, #cbd5e1);
    background: transparent;
}
.nav-rail .nav-cat.u-hidden-2 { display: none; }
.nav-rail .nav-cat .nav-ico { font-size: 1.35rem; line-height: 1.1; }
.nav-rail .nav-cat .nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-rail .nav-cat:hover { background: rgba(255, 255, 255, 0.08); color: var(--white-fg); }
.nav-rail .nav-cat.active { color: var(--white-fg); font-weight: 700; background: rgba(255, 255, 255, 0.1); box-shadow: inset 3px 0 0 var(--accent-bd); border-bottom: 0; }
.nav-rail .nav-cat.open { color: var(--white-fg); background: rgba(255, 255, 255, 0.18); }

/* A category's panel. Hidden until its category is pressed. */
.nav-panel { display: none; }
.nav-panel.open {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 2px;
    box-sizing: border-box;
    background: var(--primary);
    color: var(--white-fg);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    animation: nav-panel-in 0.16s ease-out;
}
.nav-panel.nav-panel-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-panel-head, .nav-panel .nav-find, .nav-panel .nav-find-results { grid-column: 1 / -1; }
.nav-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0.15rem 0.35rem 0.5rem; }
.nav-panel .nav-group-title { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-300-fg, #cbd5e1); }
.nav-panel-close {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; padding: 0;
    border: 0; border-radius: 8px;
    background: transparent; color: var(--slate-300-fg, #cbd5e1); font-size: 1rem;
}
.nav-panel-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--white-fg); }
#main-app-nav .nav-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-radius: 8px;
    text-align: left;
    font-size: 0.95rem;
    color: var(--slate-200-fg, #e2e8f0);
    background: transparent;
}
#main-app-nav .nav-item.u-hidden-2 { display: none; }
#main-app-nav .nav-item:hover { background: rgba(255, 255, 255, 0.08); color: var(--white-fg); }
#main-app-nav .nav-item.active { background: rgba(255, 255, 255, 0.13); color: var(--white-fg); box-shadow: inset 3px 0 0 var(--accent-bd); border-bottom: 0; font-weight: normal; }
#main-app-nav .nav-item .nav-ico { width: 1.5rem; flex-shrink: 0; text-align: center; font-size: 1.15rem; line-height: 1.35; }
.nav-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
#main-app-nav .nav-item .nav-label { font-weight: 600; color: inherit; }
#main-app-nav .nav-item .nav-desc { font-size: 0.78rem; line-height: 1.3; color: var(--slate-400-fg); overflow-wrap: anywhere; }
#main-app-nav .nav-item.active .nav-desc, #main-app-nav .nav-item:hover .nav-desc { color: var(--slate-300-fg, #cbd5e1); }
/* While "Find a page" has something in it, its results take the place of
   the panel's own pages. */
.nav-panel.finding > .nav-item { display: none !important; }
.nav-find { position: relative; margin: 0 0 0.4rem; }
.nav-find.u-hidden-2, .nav-find-results.u-hidden-2 { display: none; }
.nav-find-ico { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); font-size: 0.85rem; pointer-events: none; }
.nav-find input {
    width: 100%;
    box-sizing: border-box;
    min-height: 2.5rem;
    margin: 0;
    padding: 0.45rem 0.7rem 0.45rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--white-fg);
    font-size: 0.92rem;
}
.nav-find input::placeholder { color: var(--slate-400-fg); opacity: 1; }
.nav-find input:focus { border-color: var(--sky-300-bd); outline: 2px solid var(--sky-300-bd); outline-offset: 1px; }
.nav-find-results { display: grid; grid-template-columns: inherit; gap: 2px; }
.nav-panel.nav-panel-wide .nav-find-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-find-none { margin: 0.25rem 0.5rem 0.5rem; color: var(--slate-300-fg, #cbd5e1); font-size: 0.9rem; }
.nav-backdrop.u-hidden-2 { display: none; }
@keyframes nav-panel-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

@media (min-width: 768px) {
    .app-body {
        display: grid;
        grid-template-columns: var(--nav-rail-w) minmax(0, 1fr);
        align-items: start;
    }
    /* The column of categories, under the header, the height of the
       screen. Above the backdrop, so another category can be pressed
       while a panel is open. */
    #main-app-nav {
        position: sticky;
        top: var(--app-header-h);
        z-index: 960;
        height: calc(100vh - var(--app-header-h));
        width: auto;
    }
    .nav-rail { height: 100%; overflow-y: auto; padding: 0.5rem 0.4rem 1rem; scrollbar-width: thin; }
    /* The panel slides out beside the column, as tall as it needs (up to
       the bottom of the screen). */
    .nav-panel.open {
        position: fixed;
        top: var(--app-header-h);
        left: var(--nav-rail-w);
        width: min(20rem, calc(100vw - var(--nav-rail-w) - 1rem));
        max-height: calc(100vh - var(--app-header-h));
        padding: 0.6rem 0.6rem 0.9rem;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0 0 12px 0;
        box-shadow: 10px 8px 28px rgba(15, 23, 42, 0.35);
    }
    .nav-panel.open.nav-panel-wide { width: min(38rem, calc(100vw - var(--nav-rail-w) - 1rem)); }
    .nav-backdrop {
        position: fixed;
        top: var(--app-header-h);
        left: 0; right: 0; bottom: 0;
        z-index: 940;
        background: rgba(15, 23, 42, 0.28);
    }
    /* In a grid, auto side margins would shrink the page to fit its
       content; width: 100% keeps it full width (up to its max-width),
       still centred. */
    .app-body > main.container { width: 100%; box-sizing: border-box; }
}
/* Short screens (a phone on its side, a small laptop window): smaller
   categories so they all show. */
@media (min-width: 768px) and (max-height: 600px) {
    .nav-rail { gap: 0.15rem; padding-top: 0.3rem; }
    .nav-rail .nav-cat { min-height: 2.9rem; padding: 0.25rem 0.2rem; gap: 0.1rem; }
    .nav-rail .nav-cat .nav-ico { font-size: 1.15rem; }
    #main-app-nav .nav-item { min-height: 40px; padding-top: 0.4rem; padding-bottom: 0.4rem; }
}

/* PHONES (up to 767px): the categories are a bar along the bottom, and a
   category's pages slide up from it as a sheet, two to a row. */
@media (max-width: 767px) {
    body {
        /* Extra padding so the last rows of a page can scroll clear of the
           fixed bar instead of sitting behind it. */
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
    }
    /* A field or button that gets keyboard focus scrolls clear of the
       bar rather than sitting behind it (WCAG 2.4.11). */
    html { scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
    #main-app-nav { display: block; width: auto; background: transparent; }
    .nav-rail {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        display: grid;
        grid-template-columns: repeat(var(--nav-cat-count, 5), minmax(0, 1fr));
        gap: 0.15rem;
        background: var(--primary);
        padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom));
        /* Above page content and ordinary windows (1000). Windows hide the
           bar instead (body.window-open, see PHONES AND TABLETS). */
        z-index: 1500;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    }
    .nav-rail .nav-cat { min-width: 0; min-height: 52px; padding: 0.3rem 0.1rem; }
    .nav-rail .nav-cat.active { box-shadow: inset 0 -3px 0 var(--accent-bd); }
    .nav-panel.open {
        position: fixed;
        left: 0; right: 0;
        bottom: calc(4.1rem + env(safe-area-inset-bottom));
        max-height: calc(100vh - 8rem - env(safe-area-inset-bottom));
        max-height: calc(100dvh - 8rem - env(safe-area-inset-bottom));
        z-index: 1450;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
        padding: 0.75rem 0.75rem 1rem;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
        animation-name: nav-sheet-in;
    }
    .nav-panel.open .nav-find-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
    #main-app-nav .nav-item { flex-direction: column; align-items: flex-start; gap: 0.25rem; min-height: 56px; padding: 0.6rem 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
    #main-app-nav .nav-item .nav-desc { display: none; }
    #main-app-nav .nav-item .nav-ico { width: auto; font-size: 1.25rem; }
    .nav-find input { font-size: 16px; }
    .nav-backdrop { position: fixed; inset: 0; z-index: 1400; background: rgba(15, 23, 42, 0.55); }
    body.nav-panel-open { overflow: hidden; }
}
/* A phone on its side: little height, so the sheet uses the width, three
   pages to a row with the icon beside the name. */
@media (max-width: 767px) and (max-height: 500px) {
    .nav-panel.open { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: calc(100vh - 4.6rem - env(safe-area-inset-bottom)); max-height: calc(100dvh - 4.6rem - env(safe-area-inset-bottom)); gap: 0.25rem; padding: 0.35rem 0.6rem 0.5rem; }
    .nav-panel.open .nav-find-results { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; }
    .nav-panel-head { padding-bottom: 0; }
    .nav-find { margin-bottom: 0.15rem; }
    .nav-find input { min-height: 2.25rem; padding-top: 0.3rem; padding-bottom: 0.3rem; }
    #main-app-nav .nav-item { flex-direction: row; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.35rem 0.6rem; }
}
@keyframes nav-sheet-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav-panel.open { animation: none; } }

/* THE ACCOUNT MENU (header, right): name and role, dark mode, the manual,
   the security statement, Settings and Log out. */
.account-wrap { position: relative; }
.account-btn { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; }
.account-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 1500;
    width: min(17rem, calc(100vw - 1.5rem));
    background: var(--white-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15,23,42,0.28);
    padding: 0.35rem;
}
.account-menu.u-hidden-2 { display: none; }
.account-menu-who { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.6rem 0.65rem 0.7rem; border-bottom: 1px solid var(--border); margin-bottom: 0.3rem; overflow-wrap: anywhere; }
.account-menu-list { list-style: none; margin: 0; padding: 0; }
.account-menu-list li.u-hidden-2 { display: none; }
.account-menu-sep { border-top: 1px solid var(--border); margin-top: 0.3rem; padding-top: 0.3rem; }
.account-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 44px;
    padding: 0.4rem 0.65rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}
.account-item:hover, .account-item:focus-visible { background: var(--slate-100-bg); color: var(--text); text-decoration: none; }
.account-item-ico { width: 1.4rem; text-align: center; flex-shrink: 0; }
.account-item-note { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--slate-600-fg); border: 1px solid var(--border); border-radius: 4px; padding: 0 0.3rem; }
.account-logout { color: var(--red-700-fg, #b91c1c); }
.account-logout:hover, .account-logout:focus-visible { color: var(--red-700-fg, #b91c1c); }
/* The dark mode switch: a small track and knob, filled when on. */
.account-switch { margin-left: auto; position: relative; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: var(--slate-450-bd); flex-shrink: 0; }
.account-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.25rem - 4px); height: calc(1.25rem - 4px); border-radius: 50%; background: var(--white-bg); transition: left 0.15s; }
.theme-toggle[aria-pressed="true"] .account-switch { background: var(--accent-bd); }
.theme-toggle[aria-pressed="true"] .account-switch::after { left: calc(100% - 1.25rem + 2px); }

/* ============================================================
   CONTAINERS AND CARDS
   ============================================================ */
/* .container is the centred page column; each tab is a .tab-content
   holding one or more white .card panels. */
.container { 
    max-width: 1100px; 
    margin: 1rem auto; 
    padding: 0 0.75rem; 
}

@media (min-width: 768px) { 
    .container { margin: 2rem auto; padding: 0 1rem; } 
}

.tab-content {
    padding-bottom: 3rem;
}

.card {
    background: var(--white-bg);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

@media (min-width: 768px) { 
    .card { padding: 1.5rem; margin-bottom: 1.5rem; } 
}

.card-header-flex {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .card-header-flex { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ============================================================
   TABLES
   Every list in the app is a <table> inside .table-responsive, and
   every <td> carries a data-label attribute naming its column. On
   wide screens it is a normal table; where there is not enough room
   each row becomes a card, with the data-label shown as a label
   beside each value (td::before). The card rules appear three times:
   by screen width, by container width, and for .fit-cards.
   ============================================================ */
/* TABLES (Desktop) */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 1rem;
}

/* min-width keeps desktop columns readable; .table-responsive scrolls
   sideways if the space is narrower (until the card view takes over). */
table { 
    width: 100%; 
    border-collapse: collapse; 
    min-width: 600px; 
}

th, td {
    text-align: left;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
}

th { 
    background: var(--slate-100-bg); 
    text-transform: uppercase; 
    font-size: 0.7rem; 
    letter-spacing: 0.05em; 
    white-space: nowrap; 
}

/* Right-align every table's Action column, desktop only (mobile already
   right-aligns every cell relative to its label via the responsive rules
   below). Applies universally via the data-label attribute every Action
   column already consistently uses across the whole app, rather than
   needing a class added to dozens of individual table cells. */
@media (min-width: 768px) {
    td[data-label="Action"], td[data-label="Actions"] {
        text-align: right;
    }
}

/* RESPONSIVE TABLES (Mobile Card View) */
@media (max-width: 767px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
    /* The header row is moved off-screen rather than display:none, so
       screen readers can still announce the column headings. */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    tr {
        border: 1px solid var(--border);
        margin-bottom: 1rem;
        border-radius: 8px;
        background: var(--white-bg);
        padding: 0.5rem;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    td {
        border: none;
        border-bottom: 1px solid var(--slate-50-bd);
        position: relative;
        /* the left 45% is kept free for the column label drawn by
           td::before */
        padding: 0.5rem 0.5rem 0.5rem 45%;
        text-align: right;
        min-height: 2.5rem;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    td:last-child { border-bottom: 0; }
    /* The column label, taken from the cell's data-label attribute. */
    td::before {
        content: attr(data-label);
        position: absolute;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        width: 40%;
        text-align: left;
        font-weight: 600;
        color: var(--slate-600-fg);
        font-size: 0.75rem;
        text-transform: uppercase;
        pointer-events: none;
    }
    .table-responsive {
        background: transparent;
        border: none;
        overflow-x: hidden;
    }
    .table-responsive table { min-width: auto; }
}

/* The same card layout wherever a table's own space is narrower than
   700px: a tablet held upright, or a half-width table inside the client
   record on any screen. Before, these scrolled sideways and hid the
   Edit/Delete buttons off to the right.
   container-type makes each .table-responsive a size container, so the
   @container rule below measures the table's own box, not the screen.
   The declarations repeat the phone rules above because a media query and
   a container query cannot share one rule block. */
.table-responsive { container-type: inline-size; }
@container (max-width: 700px) {
    table, thead, tbody, th, td, tr { display: block; }
    table { min-width: auto; }
    thead tr { position: absolute; top: -9999px; left: -9999px; }
    tr {
        border: 1px solid var(--border);
        margin-bottom: 1rem;
        border-radius: 8px;
        background: var(--white-bg);
        padding: 0.5rem;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    td {
        border: none;
        border-bottom: 1px solid var(--slate-50-bd);
        position: relative;
        padding: 0.5rem 0.5rem 0.5rem 45%;
        text-align: right;
        min-height: 2.5rem;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    td:last-child { border-bottom: 0; }
    td::before {
        content: attr(data-label);
        position: absolute;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        width: 40%;
        text-align: left;
        font-weight: 600;
        color: var(--slate-600-fg);
        font-size: 0.75rem;
        text-transform: uppercase;
        pointer-events: none;
    }
    /* a single "No records" cell spans the card */
    td[colspan] { padding-left: 0.5rem; justify-content: center; text-align: center; }
    td[colspan]::before { content: none; }
}


/* The same card layout for a table that doesn't fit its space at any width
   (e.g. a tablet held upright, where a table is a little wider than the
   screen): core.js adds .fit-cards when a table would otherwise scroll
   sideways, and takes it off again when there's room. */
.table-responsive.fit-cards { background: transparent; border: none; overflow-x: hidden; }
.table-responsive.fit-cards table, .table-responsive.fit-cards thead, .table-responsive.fit-cards tbody, .table-responsive.fit-cards th, .table-responsive.fit-cards td, .table-responsive.fit-cards tr { display: block; }
.table-responsive.fit-cards table { min-width: auto; }
.table-responsive.fit-cards thead tr { position: absolute; top: -9999px; left: -9999px; }
.table-responsive.fit-cards tr {
    border: 1px solid var(--border);
    margin-bottom: 1rem;
    border-radius: 8px;
    background: var(--white-bg);
    padding: 0.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.table-responsive.fit-cards td {
    border: none;
    border-bottom: 1px solid var(--slate-50-bd);
    position: relative;
    padding: 0.5rem 0.5rem 0.5rem 45%;
    text-align: right;
    min-height: 2.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.table-responsive.fit-cards td:last-child { border-bottom: 0; }
.table-responsive.fit-cards td::before {
    content: attr(data-label);
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 40%;
    text-align: left;
    font-weight: 600;
    color: var(--slate-600-fg);
    font-size: 0.75rem;
    text-transform: uppercase;
    pointer-events: none;
}
/* a single "No records" cell spans the card */
.table-responsive.fit-cards td[colspan] { padding-left: 0.5rem; justify-content: center; text-align: center; }
.table-responsive.fit-cards td[colspan]::before { content: none; }

/* ============================================================
   BUTTONS AND FORMS
   .btn is the standard button (42px tall); colour variants add
   -danger, -success or -neutral; .btn-compact is the small size used
   in table rows and card headers.
   ============================================================ */
/* BUTTONS & FORMS */
.btn {
    background: var(--accent);
    color: var(--white-fg);
    border: none;
    padding: 0.625rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
}
.btn-danger { background: var(--red-600-bg); }
.btn-success { background: var(--emerald-700-bg); }

/* ============================================================
   BUTTON SIZE CONSISTENCY
   One canonical "compact" size for secondary/inline actions -
   table-row Edit/Delete buttons, small utility buttons in card
   headers, etc. Replaces ~10 near-duplicate classes that had
   accumulated slightly different padding/font-size values over
   time (u-fs-0-75rem-2, u-fs-0-75rem-minh-auto, u-fs-0-8rem, and
   others) despite all being used for the exact same purpose.
   Compose with .btn-danger/.btn-success for a colored compact
   button, and with .btn-neutral for a grey compact button (used
   for lower-emphasis actions like viewing history).
   ============================================================ */
.btn-compact {
    padding: 4px 10px;
    font-size: 0.8rem;
    min-height: 28px; /* at least 24px tall to tap (WCAG 2.5.8) */
}
/* Consistent width for short table-row action buttons (Edit/Delete/PDF) so
   two of them sit side by side in a table cell instead of stacking - min-
   width (not a hard width) so longer labels like "Delete" aren't clipped,
   while shorter ones like "Edit"/"PDF" render at exactly this width. */
.btn-table-action {
    min-width: 50px;
    text-align: center;
}
.btn-neutral {
    background: var(--slate-500-bg);
}

/* Keyboard focus visibility - previously there were no focus styles at all,
   making the app unusable for keyboard-only and switch-device navigation. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.profile-link:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent-bd);
    outline-offset: 2px;
}
.body-region:focus-visible {
    outline: 3px solid var(--accent-bd);
    outline-offset: 1px;
}

.form-group { margin-bottom: 1rem; }
.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
}
/* A checkbox label inside a .form-group (e.g. "Business Class Use",
   "Non-Driver") needs the flex utility's row layout to keep the checkbox
   and its text aligned, but .form-group label above has higher specificity
   than the single-class utility, so its display:block was winning and
   silently breaking the alignment. This restores flex for that combination
   specifically, without weakening .form-group label for ordinary labels. */
.form-group label.u-flex-items-center-gap-0-5rem,
.form-group label.u-flex-items-center-gap-0-5rem-bold-cursor-pointer {
    display: flex;
}
.form-group input:not([type="checkbox"]):not([type="radio"]), .form-group select, .form-group textarea {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid var(--slate-450-bd); /* 3.4:1, so the field edge is visible (WCAG 1.4.11) */
    border-radius: 4px;
    box-sizing: border-box;
    /* 16px, not smaller: iPhone Safari zooms the page in when a field
       with text under 16px gets focus. */
    font-size: 16px;
    background-color: var(--white-bg);
}
/* Without the exclusion above, a checkbox/radio inside a .form-group
   inherited width:100%, stretching it across most of the flex row (see the
   flex label rule above) and squeezing its text label into a narrow
   remaining space that wrapped onto two lines. Give it a normal fixed
   checkbox size instead so the text gets the rest of the row's width. */
.form-group input[type="checkbox"], .form-group input[type="radio"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* The sign-in, two-factor and password-change cards. */
.login-box { max-width: 400px; margin: 2rem auto; }
.login-title { margin-bottom: 0.75rem; }
.login-logo { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.login-logo-dark { display: none; }
[data-theme="dark"] .login-logo-light { display: none; }
[data-theme="dark"] .login-logo-dark { display: block; }
.login-title-custom .login-logo { display: none !important; }
@media (min-width: 768px) { .login-box { margin: 5rem auto; } }

.badge { 
    background: var(--sky-100-bg); color: var(--sky-700-fg); padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; 
}
.profile-link { color: var(--accent-fg); font-weight: bold; cursor: pointer; text-decoration: underline; }
/* A name that opens a record is a real button, styled as a link. */
button.profile-link { background: none; border: none; padding: 2px 0; margin: 0; font: inherit; font-weight: bold; text-align: left; min-height: 24px; }
/* An attachment thumbnail is a button, so it can be opened from the keyboard. */
.attachment-thumb-btn { background: none; border: none; padding: 0; margin: 0; cursor: pointer; display: block; color: inherit; font: inherit; }

/* ============================================================
   ACCESSIBILITY
   Skip link, focus rings, screen-reader-only text and reduced
   motion. Focus styles for ordinary controls are under BUTTONS AND
   FORMS above.
   ============================================================ */
/* ACCESSIBILITY */
/* "Skip to main content": hidden until it receives keyboard focus.
   z-index 100000 so it shows above everything, even an open window. */
.skip-link { position: absolute; left: 0.5rem; top: -100px; z-index: 100000; background: var(--slate-900-bg); color: var(--white-fg); padding: 0.75rem 1rem; border-radius: 4px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 0.5rem; outline: 3px solid var(--amber-400-bd); outline-offset: 2px; }
/* <main> takes focus from the skip link (it has tabindex="-1"); it is not
   a control, so no ring. */
main:focus { outline: none; }
/* On the dark header and nav bar the focus ring is light, so it stands out
   at least 3:1 against the dark background (WCAG 1.4.11 / 2.4.7). */
header :focus-visible, #main-app-nav button:focus-visible, .toast :focus-visible { outline-color: var(--sky-300-bd); }
/* The account menu and the bell's panel are light panels inside the dark
   header, so their focus ring goes back to the usual dark one. */
header .account-menu :focus-visible, header .notif-panel :focus-visible { outline-color: var(--accent-bd); }
/* The window's title takes focus when it opens (not a control, so no ring). */
[role="dialog"] [tabindex="-1"]:focus, [role="alertdialog"] [tabindex="-1"]:focus { outline: none; }
/* Focused fields aren't hidden under the sticky "Jump to section" bar. */
.modal-content { scroll-padding-top: 4.5rem; }
/* Visually hidden text that screen readers still read. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Respect "reduce motion" settings. !important is needed to override
   every animation and transition in the file (and any set by a vendor
   library); 0.01ms rather than 0 so "animationend"/"transitionend" events
   that scripts wait for still fire. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* ============================================================
   MODALS (WINDOWS)
   A .modal-overlay is the dimmed full-page backdrop; .modal-content
   is the white window inside it. Overlays start hidden (.u-hidden-3
   or .u-hidden-2); core.js opens one by setting style.display to
   flex (which overrides the class) and adds body.window-open while
   any window is open. Long record
   windows (client, residence) are split into .ehr-section blocks
   with a sticky jump bar. On phones windows fill the screen: see
   PHONES AND TABLETS at the end.
   ============================================================ */
/* MODALS */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.75); display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 1rem;
}
.modal-content {
    background: var(--white-bg); border-radius: 8px; max-width: 950px; width: 100%; max-height: 90vh;
    overflow-y: auto; padding: 1.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    scroll-behavior: smooth;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}
.ehr-section { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }

/* Jump-to-section menu at the top of a long, multi-section modal (Client
   Record, Residence Record). Sticky within the modal's own scroll
   container (.modal-content has overflow-y: auto), so it stays reachable
   without having to scroll back up first. */
/* Lets a JS-populated wrapper's children act as direct flex items of
   .section-jump-nav (so dynamically-added category buttons wrap alongside
   the static ones) without the wrapper div itself becoming a flex item. */
.u-display-contents { display: contents; }

.section-jump-nav {
    position: sticky;
    /* -25px pulls the bar up into the window's 1.5rem top padding, so it
       sits flush with the top edge while scrolling (no gap above it). */
    top: -25px;
    z-index: 5;
    background: var(--white-bg);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 0;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

/* On a phone, one row of section buttons that you swipe sideways, pinned
   under the window's title bar. (It used to be a grid of six rows that
   took about a third of the screen while scrolling.) */
@media (max-width: 767px) {
    .section-jump-nav {
        /* --win-head-h is the height of the sticky title bar, set by
           core.js when a window opens; 0px if it hasn't been measured. */
        top: var(--win-head-h, 0px);
        flex-wrap: nowrap;
        overflow-x: auto;
        /* negative side margins run the bar to the screen edges, past
           the window's 1rem padding */
        margin: 0 -1rem 0.5rem;
        padding: 0.5rem 1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .section-jump-nav::-webkit-scrollbar { display: none; }
    .section-jump-nav button { flex: 0 0 auto; margin: 0; white-space: nowrap; }
}

/* ============================================================
   TOASTS
   Short messages ("Saved", errors) from showToast in core.js.
   They appear above the bottom tab bar and fade out by themselves.
   ============================================================ */
/* CUSTOM TOASTS */
#toast-container {
    position: fixed;
    /* 5rem up clears the phone bottom tab bar */
    bottom: max(5rem, calc(env(safe-area-inset-bottom) + 5rem));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000; /* above windows (2000-2500) and dialogs (3000-4000) */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    width: 90%;
    max-width: 400px;
}
.toast {
    background: var(--slate-700-bg);
    color: var(--white-fg);
    padding: 0.8rem 1.25rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(20px);
    text-align: center;
    font-weight: 500;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast { pointer-events: none; } /* taps and clicks go through to the button underneath (on a phone a message can sit over Save) */
.toast.error { background: var(--red-600-bg); border: 1px solid var(--red-900-bd); }
.toast.success { background: var(--emerald-700-bg); border: 1px solid var(--emerald-900-bd); }
.toast.info { background: var(--sky-700-bg); border: 1px solid var(--sky-800-bd); }

/* ============================================================
   SETTINGS LAYOUT MANAGER (tab-settings.js)
   Small up/down buttons for reordering sections. See also TENANT
   LAYOUT PERMISSIONS further down.
   ============================================================ */
/* SYSTEM SETTINGS LAYOUT MANAGER */
.order-btn {
    background: var(--slate-100-bg); border: 1px solid var(--slate-300-bd); color: var(--slate-700-fg); padding: 2px 8px;
    font-size: 0.75rem; border-radius: 4px; cursor: pointer; min-height: auto; margin-right: 2px;
}
.order-btn:hover { background: var(--slate-200-bg); }

/* ============================================================
   PHOTO AND PDF LIGHTBOX (core.js)
   Full-screen viewer for photos and attached PDFs. z-index 4000 puts
   it above every window and dialog, since it is often opened from
   inside one.
   ============================================================ */
/* IN-APP PHOTO LIGHTBOX */
.lightbox-modal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(15, 23, 42, 0.95); z-index: 4000; display: flex; flex-direction: column;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
}
.lightbox-header {
    display: flex; justify-content: space-between; align-items: center; color: var(--white-fg);
    padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.lightbox-body {
    flex: 1; display: flex; align-items: center; justify-content: center;
    overflow: hidden; margin-top: 1rem;
}
.lightbox-img {
    max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}
/* In-app PDF viewer inside the lightbox (PDF.js, see renderPdfInLightbox in
   core.js): a status/"open in new tab" toolbar above a scrollable column of
   page canvases, filling the lightbox body on every platform. */
.lightbox-pdf {
    width: 100%;
    align-self: stretch;
    /* min-height: 0 lets this flex child shrink below its content height,
       so the page list scrolls inside it instead of overflowing the
       screen (same reason on .lightbox-pdf-pages). */
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.lightbox-pdf-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    color: var(--white-fg);
    flex-shrink: 0;
}
.lightbox-pdf-status {
    font-size: 0.875rem;
    opacity: 0.85;
}
.lightbox-pdf-pages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
}
.lightbox-pdf-page {
    display: block;
    background: var(--white-bg);
    border-radius: 4px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    max-width: 100%;
}
.lightbox-pdf-fallback {
    color: var(--white-fg);
    text-align: center;
    padding: 2rem 1rem;
}

/* ============================================================
   PHOTO THUMBNAILS IN EDIT FORMS
   Already-uploaded photos on a record's edit form, each with a
   round red delete button on its top-right corner.
   ============================================================ */
/* EXISTING PHOTO THUMBNAILS IN EDIT FORMS */
.existing-photos-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.photo-thumb-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    border: 1px solid var(--slate-300-bd);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    background: var(--slate-50-bg);
}
.photo-thumb-wrapper .attachment-thumb-btn { width: 100%; height: 100%; }
.photo-thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
}
.photo-delete-btn {
    position: absolute;
    /* hangs off the corner of the thumbnail; z-index 10 keeps it above
       the image */
    top: -8px;
    right: -8px;
    background: var(--red-600-bg);
    color: var(--white-fg);
    border: 2px solid var(--white-bd);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: background 0.2s ease;
}
.photo-delete-btn:hover {
    background: var(--red-700-bg);
}

/* ============================================================
   CHIPS
   Chips list the body regions picked on the body map (incidents and
   wound records).
   ============================================================ */
/* CHIPS */
.selected-regions-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }
.chip {
    background: var(--red-100-bg); color: var(--red-800-fg); border: 1px solid var(--red-300-bd); padding: 2px 8px;
    border-radius: 12px; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px;
}
.chip-remove { cursor: pointer; font-weight: bold; color: var(--red-700-fg); }
.chip-remove:hover { color: var(--red-900-fg); }

/* ============================================================
   BODY MAP DIAGRAM
   Front and back SVG outlines; each region is a clickable
   .body-region path, coloured red when selected.
   ============================================================ */
/* BODY DIAGRAM SVG */
.body-map-container {
    display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center;
    background: var(--white-bg); padding: 1rem; border: 1px solid var(--border); border-radius: 6px; margin-top: 0.5rem;
}
.body-view-box { flex: 1 1 240px; max-width: 280px; text-align: center; }
.body-view-box h5 { margin: 0 0 0.5rem 0; color: var(--primary-fg); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
.body-svg { width: 100%; height: auto; max-height: 380px; }
.body-region { fill: var(--slate-200-bg); stroke: var(--slate-500-fg); stroke-width: 1.2; cursor: pointer; transition: fill 0.2s ease, stroke 0.2s ease; }
.body-region:hover { fill: var(--yellow-300-bg); stroke: var(--yellow-600-fg); }
/* !important so a selected region stays red while hovered, rather than
   the :hover yellow taking over. */
.body-region.selected { fill: var(--red-500-bg) !important; stroke: var(--red-800-fg) !important; }

/* ============================================================
   UTILITY CLASSES (auto-generated from inline style cleanup)
   Each u-* class replaces one style="..." attribute that used to be
   in index.html or a tab-*.js file, so the page works under the
   Content Security Policy (style-src 'self'). The name lists the
   main declarations; "-2", "-3" etc. are variants that differ in a
   detail, and u-style-N are ones with no short descriptive name.
   Some names no longer describe everything in them (for example
   .u-mb-1rem also adds a border and padding); check the rule before
   reusing one. Kept in alphabetical order.
   ============================================================ */
/* The show/hide password eye button inside a password field, pinned to
   the field's right edge. */
.u-abs-border-none-cursor-pointer-text-muted-flex-items-center {
    position: absolute;
    right: 6px;
    min-width: 28px;
    min-height: 28px;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--slate-600-fg);
    display: flex;
    align-items: center;
}
.u-bold-fs-1rem {
    font-weight: bold;
    font-size: 1rem;
}
.u-capitalize {
    text-transform: capitalize;
}
.u-col-span-full {
    background: var(--slate-50-bg);
    border: 1px solid var(--border);
    padding: 1rem;
    border-radius: 8px;
    grid-column: 1 / -1;
}
.u-col-span-full-2 {
    grid-column: 1 / -1;
}
.u-col-span-full-w-100pct {
    grid-column: 1 / -1;
    border: 0;
    border-top: 1px solid var(--slate-300-bd);
    width: 100%;
}
.u-flex-1 {
    flex: 1;
}
.u-flex-gap-0-25rem-wrap-justify-end {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.u-flex-gap-0-5rem {
    display: flex;
    gap: 0.5rem;
}
.u-flex-gap-0-5rem-items-center {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.u-flex-gap-0-5rem-mb-1rem {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.u-flex-gap-0-5rem-mt-1rem {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
.u-flex-items-center-gap-0-5rem {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.u-flex-items-center-gap-0-5rem-bold-cursor-pointer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: bold;
    cursor: pointer;
}
.u-flex-justify-between-fs-1-25rem {
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
}
.u-flex-justify-between-items-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.u-flex-justify-between-items-center-mb-0-4rem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}
.u-flex-justify-between-items-center-mb-0-5rem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.u-flex-justify-between-items-center-pb-0-5rem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}
.u-flex-justify-between-items-center-pb-0-5rem-mb-0-5rem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--slate-200-bd);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}
.u-flex-justify-between-items-center-pb-0-5rem-mb-1rem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
.u-flex-justify-between-items-center-wrap-gap-1rem {
    background: var(--white-bg);
    border: 1px solid var(--slate-300-bd);
    border-radius: 6px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.u-flex-justify-between-mb-0-5rem {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.u-flex-justify-between-mb-0-5rem-pb-0-5rem {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--slate-200-bd);
    padding-bottom: 0.5rem;
}
.u-flex-justify-between-pb-0-5rem {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}
.u-flex-wrap-justify-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.u-fs-0-75rem {
    padding: 2px 8px;
    font-size: 0.75rem;
}
.u-fs-0-75rem-2 {
    padding: 2px 6px;
    font-size: 0.75rem;
}
.u-fs-0-75rem-3 {
    padding: 2px 8px;
    font-size: 0.75rem;
    background: var(--slate-500-bg);
}
.u-fs-0-75rem-minh-auto {
    padding: 2px 8px;
    font-size: 0.75rem;
    min-height: auto;
}
.u-fs-0-75rem-minh-auto-2 {
    padding: 2px 6px;
    font-size: 0.75rem;
    min-height: auto;
}
.u-fs-0-75rem-minh-auto-mb-2px {
    padding: 2px 8px;
    font-size: 0.75rem;
    min-height: auto;
    margin-bottom: 2px;
}
.u-fs-0-75rem-minh-auto-mt-14px {
    padding: 2px 8px;
    font-size: 0.75rem;
    min-height: auto;
    margin-top: 14px;
}
.u-fs-0-75rem-minh-auto-no-underline-inline-flex-items-center {
    padding: 2px 8px;
    font-size: 0.75rem;
    min-height: auto;
    text-decoration: none;
    margin: 2px;
    display: inline-flex;
    align-items: center;
}
.u-fs-0-85rem {
    font-size: 0.85rem;
}
.u-fs-0-875rem-text-muted-mt-0 {
    font-size: 0.875rem;
    color: var(--slate-600-fg);
    margin-top: 0;
}
.u-fs-0-875rem-text-muted-mt-0-25rem {
    font-size: 0.875rem;
    color: var(--slate-600-fg);
    margin-top: 0.25rem;
}
.u-fs-0-875rem-text-text {
    font-size: 0.875rem;
    color: var(--slate-600-fg);
}
.u-fs-0-875rem-text-text-2 {
    font-size: 0.875rem;
    margin: 0.5rem 0;
    color: var(--slate-700-fg);
}
.u-fs-0-875rem-text-text-mt-0 {
    font-size: 0.875rem;
    color: var(--slate-600-fg);
    margin-top: 0;
}
.u-fs-0-8rem {
    padding: 2px 8px;
    font-size: 0.8rem;
}
.u-fs-0-9rem-prewrap {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    white-space: pre-wrap;
}
.u-fs-1-5rem {
    font-size: 1.5rem;
}
.u-grid-gap-0-75rem-mt-1rem {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}
.u-grid-gap-1-5rem {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); /* one column on a narrow screen */
    gap: 1.5rem;
}
.u-grid-gap-1-5rem-mt-1-5rem {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); /* one column on a narrow screen */
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.u-grid-gap-1rem {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1rem;
}
.u-grid-gap-1rem-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 1rem;
}
.u-grid-gap-1rem-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.u-grid-gap-1rem-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1rem;
}
.u-grid-gap-1rem-mt-1rem {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.u-grid-gap-1rem-mt-1rem-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.u-h-120 {
    height: 120px;
}

/* Tick-box lists (e.g. assigning residences to a staff account). Not a
   u-* class; it sits here in the middle of the alphabetical list by
   accident of history. */
.checkbox-list-label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem; color: inherit; }
.checkbox-list {
    max-height: 200px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.5rem; background: var(--white-bg);
}
.checkbox-list .checkbox-list-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.25rem; font-weight: normal; cursor: pointer; margin: 0;
}
.checkbox-list .checkbox-list-item + .checkbox-list-item { border-top: 1px solid var(--slate-100-bd); }
.checkbox-list .checkbox-list-item input { width: auto; margin: 0; }
/* Hidden items (e.g. another tenant's residences) must stay hidden despite
   the display: flex above. */
.checkbox-list .checkbox-list-item.u-hidden-2 { display: none; }
.checkbox-list .checkbox-list-empty { color: var(--slate-600-fg); font-size: 0.875rem; padding: 0.35rem 0.25rem; }
.u-h-250-relative {
    height: 250px;
    position: relative;
}
.u-h-280-relative {
    height: 280px;
    position: relative;
}
/* The three "hidden" classes. .u-hidden-2 is the general one that scripts
   add and remove to hide and show things. .u-hidden and .u-hidden-3 were
   generated from overlays that started hidden and also carried a z-index
   (3000; 1000). The z-index does nothing while the element is hidden,
   and the overlay's own class (.lightbox-modal, .modal-overlay) sets the
   real one; core.js shows the overlay with style.display. Any rule elsewhere
   that sets display on an element needs a matching "X.u-hidden-2
   { display: none; }" rule after it, or the element can't be hidden;
   several such rules appear later in this file. */
.u-hidden {
    display: none;
    z-index: 3000;
}
.u-hidden-2 {
    display: none;
}
.u-hidden-3 {
    display: none;
    z-index: 1000;
}
.u-m-0 {
    margin: 0;
}
.u-m-0-fs-1-25rem {
    margin: 0;
    font-size: 1.25rem;
}
.u-m-0-text-danger-dark {
    margin: 0;
    color: var(--red-800-fg);
}
.u-maxw-400 {
    max-width: 400px;
}
.u-maxw-450 {
    max-width: 450px;
}
.u-maxw-500 {
    max-width: 500px;
}
.u-maxw-600 {
    max-width: 600px;
}
.u-maxw-700 {
    max-width: 700px;
}
.u-mb-0-5rem {
    margin-bottom: 0.5rem;
}
.u-mb-1-5rem {
    margin-bottom: 1.5rem;
}
.u-mb-1rem {
    padding: 1rem;
    border: 1px solid var(--slate-300-bd);
    border-radius: 6px;
    margin-bottom: 1rem;
}
.u-minh-auto {
    padding: 2px 8px;
    min-height: auto;
}
.u-minh-auto-fs-0-9rem {
    padding: 0.375rem 1rem;
    min-height: auto;
    font-size: 0.9rem;
}
.u-mt-0 {
    margin-top: 0;
}
.u-mt-0-5rem-border-t-none {
    margin-top: 0.5rem;
    border-top: none;
    padding-top: 0;
}
.u-mt-0-75rem {
    margin-top: 0.75rem;
}
.u-mt-0-75rem-flex-gap-0-5rem {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
}
.u-mt-0-fs-1rem-text-dark {
    margin-top: 0;
    font-size: 1rem;
    color: var(--slate-900-fg);
}
.u-mt-1-5rem {
    margin-top: 1.5rem;
    background: var(--red-100-bg);
    border-left: 5px solid var(--red-500-bd);
}
.u-mt-1-5rem-2 {
    margin-top: 1.5rem;
}
.u-mt-1-5rem-3 {
    margin-top: 1.5rem;
    background: var(--white-bg);
    border: 1px solid var(--red-100-bd);
    padding: 1rem;
    border-radius: 6px;
}
.u-mt-1-5rem-4 {
    background: var(--white-bg);
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid var(--slate-300-bd);
    margin-top: 1.5rem;
}
.u-mt-1-5rem-grid-gap-1rem {
    margin-top: 1.5rem;
    display: grid;
    gap: 1rem;
}
.u-mt-1rem {
    margin-top: 1rem;
}
.u-mt-1rem-2 {
    background: var(--white-bg);
    border: 1px solid var(--border);
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
}
.u-mt-1rem-flex-col-gap-0-5rem {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.u-mt-6px {
    margin-top: 6px;
}
.u-nowrap-text-center {
    white-space: nowrap;
    text-align: center;
}
.u-pb-0-mb-0 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.u-prewrap-normal {
    margin: 4px 0 0 0;
    white-space: pre-wrap;
    font-weight: normal;
}
.u-relative-flex-items-center {
    position: relative;
    display: flex;
    align-items: center;
}
.u-style {
    background: var(--slate-500-bg);
}
.u-style-10 {
    background: var(--slate-50-bg);
    border: 1px solid var(--border);
    padding: 0.8rem;
    border-radius: 6px;
}
.u-style-11 {
    margin: 0 0 0.25rem 0;
}
.u-style-2 {
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border);
}
.u-style-3 {
    background: var(--slate-50-bg);
    border: 1px solid var(--border);
    padding: 1rem;
    border-radius: 8px;
}
.u-style-4 {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}
.u-style-5 {
    background: var(--slate-50-bg);
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid var(--slate-300-bd);
}
.u-style-6 {
    background: var(--slate-100-bg);
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid var(--sky-600-bd);
}
.u-style-7 {
    margin: 0.5rem 0 0;
}
.u-style-8 {
    background: var(--slate-100-bg);
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid var(--emerald-500-bd);
}
.u-style-9 {
    background: var(--slate-100-bg);
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid var(--amber-500-bd);
}
.u-text-center {
    text-align: center;
}
.u-text-center-text-danger {
    text-align: center;
    color: var(--red-700-fg);
}
.u-text-center-text-muted {
    text-align: center;
    color: var(--slate-600-fg);
}
.u-text-danger {
    color: var(--red-700-fg);
}
.u-text-danger-2 {
    color: var(--red-600-fg);
}
.u-text-danger-dark {
    background: var(--red-100-bg);
    color: var(--red-800-fg);
}
.u-text-danger-dark-2 {
    background: var(--red-100-bg);
    color: var(--red-700-fg);
}
.u-text-danger-m-0 {
    color: var(--red-600-fg);
    margin: 0;
}
.u-text-danger-mb-0-5rem {
    color: var(--red-700-fg);
    margin-bottom: 0.5rem;
}
.u-text-dark {
    color: var(--slate-900-fg);
}
.u-text-info {
    background: var(--sky-100-bg);
    color: var(--sky-700-fg);
    margin-left: 4px;
}
.u-text-info-2 {
    color: var(--sky-700-fg);
}
.u-text-info-mb-0-5rem {
    color: var(--sky-700-fg);
    margin-bottom: 0.5rem;
}
.u-text-muted {
    color: var(--slate-600-fg);
}
.u-text-muted-2 {
    background: var(--slate-100-bg);
    color: var(--slate-600-fg);
}
.u-text-muted-bold {
    color: var(--slate-600-fg);
    font-weight: bold;
}
.u-text-muted-fs-0-85rem {
    color: var(--slate-600-fg);
    font-size: 0.85rem;
}
.u-text-muted-light {
    color: var(--slate-400-fg); /* on the dark header: 6.9:1 */
}
.u-text-muted-m-0-col-span-full {
    color: var(--slate-600-fg);
    margin: 0;
    grid-column: 1/-1;
}
.u-text-muted-text-center {
    color: var(--slate-600-fg);
    text-align: center;
}
.u-text-success {
    background: var(--green-100-bg);
    color: var(--green-700-fg);
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid var(--emerald-500-bd);
}
.u-text-success-2 {
    color: var(--green-700-fg);
}
.u-text-success-3 {
    background: var(--green-100-bg);
    color: var(--green-700-fg);
}
.u-text-text {
    margin: 0.25rem 0 0;
    color: var(--slate-600-fg);
}
.u-text-warning {
    background: var(--amber-100-bg);
    color: var(--amber-700-fg);
}
.u-uppercase {
    text-transform: uppercase;
}
/* full-width field with room on the right for an icon button inside it */
.u-w-100pct {
    width: 100%;
    padding-right: 40px;
    box-sizing: border-box;
}
.u-w-100pct-2 {
    width: 100%;
}
/* Full-height document preview area. */
.u-w-100pct-h-75vh-border-none {
    width: 100%;
    height: 75vh;
    border: none;
    background: var(--white-bg);
}
/* 80px square tile for a non-image attachment (e.g. a PDF), matching the
   size of .photo-thumb-wrapper. */
.u-w-80-h-80-flex-col-items-center-justify-center {
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--slate-100-bg);
    border: 1px solid var(--slate-300-bd);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--slate-900-fg);
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}
.u-w-80-text-center {
    width: 80px;
    text-align: center;
}

/* ============================================================
   STATE-DRIVEN CLASSES (replace styles that varied by data,
   e.g. severity colors, active/inactive badges, alert cards)
   ============================================================ */

/* Incident hotspot severity (tab-analytics.js) */
.severity-row {
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid transparent;
}
/* Dashboard Appointments card: the line between past appointments (above)
   and upcoming ones (below), with "Today" in the middle (tab-dashboard.js). */
.dash-appt-separator { display: flex; align-items: center; gap: 0.75rem; margin: 0.25rem 0; color: var(--slate-700-fg); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.dash-appt-separator::before, .dash-appt-separator::after { content: ""; flex: 1; border-top: 2px dashed var(--slate-500-bd); }
.severity-low { background: var(--sky-100-bg); border-color: var(--sky-700-bd); color: var(--sky-700-fg); }
.severity-medium { background: var(--amber-100-bg); border-color: var(--amber-800-bd); color: var(--amber-800-fg); }
.severity-high { background: var(--red-100-bg); border-color: var(--red-800-bd); color: var(--red-800-fg); }
.severity-badge-low { background: var(--sky-700-bg); color: var(--white-fg); }
.severity-badge-medium { background: var(--amber-800-bg); color: var(--white-fg); }
.severity-badge-high { background: var(--red-800-bg); color: var(--white-fg); }

/* Generic active/inactive badge (financial entries, etc.) */
.status-active { background: var(--green-100-bg); color: var(--green-800-fg); }
.status-inactive { background: var(--slate-100-bg); color: var(--slate-600-fg); }
/* A residence's Active / Inactive badge in its record window
   (tab-residences.js). */
.res-status-active { background: var(--green-100-bg); color: var(--green-700-fg); }
.res-status-inactive { background: var(--red-100-bg); color: var(--red-800-fg); }

/* Dashboard compliance/insurance alert cards (tab-dashboard.js) */
.alert-card {
    padding: 1rem;
    border-radius: 6px;
    border-left: 5px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.alert-card-critical { background: var(--red-100-bg); border-left-color: var(--red-500-bd); }
.alert-card-warning { background: var(--amber-100-bg); border-left-color: var(--amber-500-bd); }
.alert-card-nonbusiness { background: var(--orange-100-bg); border-left-color: var(--orange-500-bd); }
.alert-badge-critical { background: var(--red-600-bg); color: var(--white-fg); }
.alert-badge-warning { background: var(--amber-700-bg); color: var(--white-fg); }
.alert-badge-nonbusiness { background: var(--orange-700-bg); color: var(--white-fg); }

/* Completed task styling (tab-handovers.js) */
.task-card {
    background: var(--slate-50-bg);
    border: 1px solid var(--border);
    padding: 0.8rem;
    border-radius: 6px;
    opacity: 1;
}
.task-card-done { opacity: 0.75; }

/* Invoice status badges (tab-invoices.js) */
.invoice-status-default { background: var(--slate-200-bg); color: var(--slate-600-fg); }
.invoice-status-paid { background: var(--green-100-bg); color: var(--green-700-fg); }
.invoice-status-overdue { background: var(--red-100-bg); color: var(--red-700-fg); }
.invoice-status-issued { background: var(--amber-100-bg); color: var(--amber-800-fg); }

/* Inactive residence row (tab-residences.js) */
.residence-row-inactive { opacity: 0.65; background: var(--slate-50-bg); }

/* ============================================================
   MOVED OUT OF index.html's <head> inline <style> block
   (inline <style> blocks require style-src 'unsafe-inline' just
   like style="" attributes do)
   ============================================================ */
/* A window opened from inside another window, so it sits above the one
   it was opened from (2000 > 1000). !important so it wins over the
   z-index of .modal-overlay whatever order the rules come in. */
.sub-modal { z-index: 2000 !important; }
.read-only-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1rem; margin-top: 1rem; background: var(--slate-50-bg); padding: 1rem; border-radius: 6px; border: 1px solid var(--border); }
.read-only-grid div { margin-bottom: 0.25rem; }

/* ============================================================
   MOOD FACE-PICKER (Daily Record form)
   Radio inputs are visually hidden but remain keyboard/screen-
   reader accessible; each option shows an emoji with a visible
   text label underneath, grouped into three colour-coded rows.
   ============================================================ */
.mood-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mood-row {
    display: flex;
    gap: 0.5rem;
    border-radius: 8px;
    padding: 0.5rem;
}
.mood-row-green { background: var(--green-100-bg); }
.mood-row-yellow { background: var(--yellow-100-bg); }
.mood-row-red { background: var(--red-100-bg); }

.mood-option {
    flex: 1;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.6rem 0.5rem;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.mood-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.mood-face {
    font-size: 2rem;
    line-height: 1;
}
.mood-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    line-height: 1.1;
}
.mood-option:has(input:checked) {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--accent-bd);
    transform: scale(1.05);
}
.mood-option:has(input:focus-visible) {
    outline: 3px solid var(--accent-bd);
    outline-offset: 2px;
}

/* ============================================================
   CUSTOM CONFIRM DIALOG (replaces native browser confirm())
   showConfirm in core.js, the "Confirm it's you" dialog and the
   invoice payment-terms box (tab-invoices.js). The box is also a
   .modal-content; these rules come after the MODALS section and after
   the u-maxw-* utilities, so they win over both (the box is 400px wide
   at most, even where u-maxw-450 is also set).
   ============================================================ */
.confirm-overlay {
    z-index: 3000; /* above .sub-modal (2000), so it always sits on top
                       even when triggered from within an open modal */
}
.confirm-box {
    background: var(--white-bg);
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.confirm-message {
    margin: 0 0 1.25rem 0;
    white-space: pre-wrap;
}
.confirm-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* ============================================================
   TENANT LAYOUT PERMISSIONS (Settings)
   Desktop: a real grid with a header row ("Element | Admin |
   Provider | Support") so each column's meaning is explicit and
   every row aligns cleanly under it.
   Mobile (<=700px): collapses to a stacked layout with the role
   name printed directly next to each checkbox, since there's no
   room for aligned columns on a narrow screen.
   ============================================================ */
.layout-list-header {
    display: grid;
    grid-template-columns: 1fr 90px 90px 90px;
    gap: 0.5rem;
    padding: 0 1rem;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.layout-list-header.has-super-admin-col {
    grid-template-columns: 1fr 90px 90px 90px 90px;
}
.layout-list-header span:not(:first-child) {
    text-align: center;
}

.layout-item-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.layout-item-row {
    display: grid;
    grid-template-columns: 1fr 90px 90px 90px;
    align-items: center;
    gap: 0.5rem;
    background: var(--slate-50-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 1rem;
}
.layout-item-row.has-super-admin-col {
    grid-template-columns: 1fr 90px 90px 90px 90px;
}
/* A row with no role tick boxes (name and move buttons only). !important
   so it also overrides .layout-item-row.has-super-admin-col, which is more
   specific. */
.layout-item-row-simple {
    grid-template-columns: 1fr auto !important;
}
.layout-item-name-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.layout-item-name {
    font-size: 0.95rem;
    overflow-wrap: break-word;
}
.layout-item-move {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}
.layout-item-move .btn {
    padding: 4px 10px;
    min-height: 36px;
    font-size: 0.9rem;
}
.layout-role-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}
.layout-role-cell input[type="checkbox"] {
    width: 22px;
    height: 22px;
    cursor: pointer;
}
.layout-role-cell.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* The header row already labels each column on desktop, so the
   inline label under each checkbox is redundant there - shown
   only once the layout switches to the stacked mobile view. */
.layout-role-label {
    display: none;
}

@media (max-width: 700px) {
    .layout-list-header {
        display: none;
    }
    .layout-item-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }
    .layout-item-name-cell {
        justify-content: space-between;
    }
    .layout-role-cell {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.5rem;
        padding: 0.4rem 0;
        border-top: 1px dashed var(--border);
    }
    .layout-role-label {
        display: inline;
        font-size: 0.85rem;
    }
}


/* ============================================================
   SMALL ADDITIONS (Settings save button, read-only text, Daily
   Records, compliance tables)
   ============================================================ */
/* Held confirmation state on the Settings "Save" button, so success is
   visible directly at the point of interaction, not just via a toast that's
   easy to miss if you're not looking at that corner of the screen.
   !important so the green wins over .btn-danger/.btn-success colours. */
.btn-save-confirmed {
    background: var(--green-700-bg) !important;
    transform: scale(1.03);
    transition: background 0.2s ease, transform 0.2s ease;
}

/* Preserves line breaks typed into a textarea (e.g. GP Details) when
   displayed read-only elsewhere - textContent already keeps the \n
   characters intact, but browsers collapse them visually unless told
   otherwise. Unlike .u-prewrap-normal, this doesn't reset font-weight,
   so it works correctly on <strong> elements too. */
.u-prewrap {
    white-space: pre-wrap;
}

/* Highlights auto-generated Daily Record rows so they're visually distinct
   from genuine staff entries at a glance, not just via the badge text.
   !important beats the white row background the card view sets on phones. */
.daily-record-auto-row {
    background: var(--amber-100-bg) !important;
}

/* Fixed width for the Date Issued column in the simplified compliance
   tables (Fire Drills, Fire Alarm Tests, Carbon Monoxide Tests), so it
   renders the same size across all three regardless of how long each
   table's Notes text happens to be - without this, plain HTML tables
   auto-size columns per-table based on their own content, which made the
   Date column a different width in each one despite identical markup.
   Desktop only: on mobile the table collapses into stacked label:value
   cards, where a fixed cell width would just look like a narrow, broken
   layout instead of the intended full-width stacking. */
@media (min-width: 768px) {
    .compliance-date-col {
        width: 130px;
        white-space: nowrap;
    }
}

/* ============================================================
   EHR TABLE COLUMN WIDTHS (desktop)
   table-layout: fixed so explicit widths are respected exactly
   (auto layout only treats them as hints). Any column left
   without an explicit width class absorbs the remaining space -
   used for the free-text Notes/Details/Description column in
   each table, so it's the one that grows to fill the row.
   ============================================================ */
@media (min-width: 768px) {
    .ehr-section table, .fixed-table {
        table-layout: fixed;
    }
    .ehr-col-70  { width: 70px; }
    .ehr-col-90  { width: 90px; }
    .ehr-col-100 { width: 100px; }
    .ehr-col-action { width: 140px; }
    .ehr-col-action-wide { width: 200px; }
    .ehr-col-110 { width: 110px; }
    .ehr-col-120 { width: 120px; }
    .ehr-col-140 { width: 140px; }
    .ehr-col-160 { width: 160px; }
}

/* ============================================================
   SETTINGS HUB - grid of category cards, each opening a modal
   with that group's full settings, replacing the old single
   long scrolling page of every field mixed together.
   ============================================================ */
.settings-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.settings-hub-card {
    background: var(--slate-50-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.settings-hub-icon {
    font-size: 1.75rem;
}
.settings-hub-card h3 {
    margin: 0;
    font-size: 1rem;
}
.settings-hub-card p {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: var(--slate-600-fg);
    flex-grow: 1;
}

/* ============================================================
   FULL HISTORY WINDOWS, ANALYTICS LINKS, LOGO PREVIEWS
   ============================================================ */
/* Shared section history modal: hides the Action column (always last)
   since this is a read-only view, not for editing - also means Edit/
   Delete button text is automatically excluded from the innerText-based
   PDF export, with no changes needed to any individual render function. */
.history-view-table th:last-child,
.history-view-table td:last-child {
    display: none;
}

/* Override for the one history view that needs its Action column visible -
   compliance records support Edit/Delete from the history view, unlike
   every other section which is read-only there. */
.history-view-table.show-actions th:last-child,
.history-view-table.show-actions td:last-child {
    display: table-cell;
}

/* A form opened from the Full History list sits above that list (2500:
   above .sub-modal at 2000, below dialogs at 3000). !important to beat
   .sub-modal's own !important. */
.modal-above-history { z-index: 2500 !important; }

/* Analytics rows that open the record they describe. */
.analytics-row-link { cursor: pointer; }
.analytics-row-link:hover, .analytics-row-link:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* Current-logo previews in Settings and Platform Invoicing. A class rather
   than an inline style="" attribute, which the Content-Security-Policy
   (style-src 'self') would block. */
.logo-preview-img { max-height: 60px; }

/* ============================================================
   TWO-FACTOR LOGIN (see mfa.js)
   ============================================================ */
.login-error-banner {
    background: var(--red-50-bg);
    border: 1px solid var(--red-200-bd);
    color: var(--red-800-fg);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}
.mfa-hint { color: var(--slate-600-fg); font-size: 0.875rem; margin: 0 0 0.75rem 0; }
.mfa-steps { padding-left: 1.25rem; margin: 0 0 0.75rem 0; font-size: 0.875rem; color: var(--slate-700-fg); }
.mfa-steps li { margin-bottom: 0.35rem; }
.mfa-qr { display: flex; justify-content: center; margin: 0.5rem 0 0.75rem 0; min-height: 40px; }
/* pixelated keeps the QR code's squares sharp when scaled, so phone
   cameras read it reliably */
.mfa-qr-img { width: 200px; height: 200px; image-rendering: pixelated; border: 1px solid var(--border); border-radius: 6px; background: var(--white-bg); }
.mfa-manual { margin-bottom: 0.75rem; font-size: 0.875rem; }
.mfa-manual summary { cursor: pointer; color: var(--accent-fg); }
/* user-select: all selects the whole set-up key in one tap, for copying
   into an authenticator app by hand. */
.mfa-secret { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; letter-spacing: 0.05em; background: var(--slate-100-bg); padding: 0.5rem 0.75rem; border-radius: 6px; word-break: break-all; user-select: all; }
.mfa-recovery-codes { list-style: none; padding: 0; margin: 0 0 0.75rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.mfa-recovery-codes code { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; background: var(--slate-100-bg); padding: 0.4rem 0.6rem; border-radius: 4px; text-align: center; }
.mfa-confirm-saved { display: flex; align-items: center; gap: 0.5rem; margin: 0.75rem 0; font-size: 0.875rem; }
.mfa-link-btn { background: none; border: none; color: var(--accent-fg); cursor: pointer; font-size: 0.875rem; padding: 0.75rem 0 0 0; text-decoration: underline; display: block; }
/* .mfa-link-btn sets display, and comes after .u-hidden-2 in this file, so
   hiding one needs this more specific rule. */
.mfa-link-btn.u-hidden-2 { display: none; }
.mfa-warning { background: var(--amber-50-bg); border: 1px solid var(--amber-200-bd); color: var(--amber-800-fg); border-radius: 6px; padding: 0.75rem; font-size: 0.85rem; margin-bottom: 0.75rem; }
.mfa-hub-status { font-size: 0.8rem; font-weight: 600; margin: 0 0 0.5rem 0; }
.mfa-hub-status-on { color: var(--emerald-700-fg); }
.mfa-hub-status-off { color: var(--red-700-fg); }
/* Buttons had no disabled look anywhere in the app, so a disabled button
   (e.g. "Continue" until recovery codes are confirmed saved, or "Signing
   in..." while a request is running) looked clickable. */
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Timed switch-off controls (two-factor login) */
.mfa-off-row { margin-top: 0.5rem; padding: 0.6rem 0.75rem; background: var(--amber-50-bg); border: 1px solid var(--amber-200-bd); border-radius: 6px; }
.mfa-off-row label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; }
.mfa-off-row select { width: 100%; }
.mfa-off-status { display: block; color: var(--amber-700-fg); font-weight: 600; margin-top: 0.35rem; }
.mfa-off-status.u-hidden-2 { display: none; }

/* ============================================================
   THIRD-PARTY SOFTWARE REVIEW (Super Admin)
   The periodic check of the libraries in vendor/ (versions,
   support status, links), with a reminder banner when overdue.
   Colour levels: ok green, warn amber, bad red.
   ============================================================ */
.review-hub-status { font-size: 0.8rem; font-weight: 600; margin: 0 0 0.5rem 0; }
.review-level-ok { color: var(--emerald-700-fg); }
.review-level-warn { color: var(--amber-700-fg); }
.review-level-bad { color: var(--red-700-fg); }
.review-status-box { border-radius: 6px; padding: 0.75rem; margin-bottom: 1rem; font-size: 0.9rem; border: 1px solid var(--border); background: var(--slate-50-bg); }
.review-status-box.review-level-bad { background: var(--red-50-bg); border-color: var(--red-200-bd); }
.review-status-box.review-level-warn { background: var(--amber-50-bg); border-color: var(--amber-200-bd); }
.review-status-box.review-level-ok { background: var(--emerald-50-bg); border-color: var(--emerald-200-bd); }
.review-subheading { font-size: 1rem; margin: 1.25rem 0 0.5rem 0; }
.review-checks { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; }
.review-checks li { padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.review-checks small { display: block; color: var(--slate-600-fg); margin-left: 1.6rem; }
.review-links a { display: block; font-size: 0.8rem; }
.review-purpose { display: block; font-size: 0.75rem; color: var(--slate-600-fg); }
.review-support { font-size: 0.8rem; font-weight: 600; }
.review-db-note { display: block; font-size: 0.75rem; color: var(--slate-600-fg); font-weight: normal; }
.review-tick { width: 1.25rem; height: 1.25rem; }
.review-complete-hint { display: block; margin-top: 0.4rem; }
.review-history-entry { border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; font-size: 0.85rem; }
.review-history-entry summary { cursor: pointer; font-weight: 600; }
.review-history-entry ul { margin: 0.4rem 0 0 1rem; padding: 0; }
.review-reminder { border-radius: 8px; padding: 0.9rem 1rem; margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; border: 1px solid var(--amber-200-bd); background: var(--amber-50-bg); color: var(--amber-800-fg); }
.review-reminder.review-level-bad { border-color: var(--red-200-bd); background: var(--red-50-bg); color: var(--red-800-fg); }

/* ============================================================
   SIGN-IN, AUDIT LOG, AMENDMENTS, TENANT DETAILS AND DIALOGS
   Smaller feature sections; each names the script that uses it.
   ============================================================ */
/* Required password change on the login card (password.js) */
.password-rules { color: var(--slate-600-fg); font-size: 0.85rem; margin: 0 0 1rem 1.1rem; padding: 0; }
.password-rules li { margin-bottom: 0.25rem; }

/* Audit log integrity check (tab-admin.js) */
.audit-header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.audit-integrity-result { margin: 0.75rem 0; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.9rem; }
.audit-integrity-result.u-hidden-2 { display: none; }
.audit-integrity-good { background: var(--emerald-50-bg); border: 1px solid var(--emerald-500-bd); color: var(--emerald-800-fg); }
.audit-integrity-bad { background: var(--red-50-bg); border: 1px solid var(--red-500-bd); color: var(--red-800-fg); }
.audit-integrity-result ul { margin: 0.5rem 0 0 1.1rem; padding: 0; }

/* Amendment history (tab-clients.js) */
.btn-amended { background: var(--amber-100-bg); color: var(--amber-800-fg); border: 1px solid var(--amber-500-bd); }
.version-card { border: 1px solid var(--slate-200-bd); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.version-card h4 { margin: 0 0 0.5rem 0; font-size: 0.9rem; }
.version-card dl { display: grid; grid-template-columns: minmax(110px, 35%) 1fr; gap: 0.25rem 0.75rem; margin: 0; font-size: 0.875rem; }
.version-card dt { color: var(--slate-600-fg); }
.version-card dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
.version-card .version-changed { background: var(--yellow-100-bg); }

/* A late utility class, kept next to the amendment button that uses it. */
.u-flex-gap-0-5rem-wrap { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.btn-amended.u-hidden-2 { display: none; }

/* Long audit action names wrap inside their column */
#audit-log-list .badge { white-space: normal; word-break: break-word; display: inline-block; max-width: 100%; }
.audit-date-nav { margin-top: 1rem; }

/* Tenant business details form (tab-admin.js) */
.biz-form-section { margin: 1.25rem 0 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--slate-200-bd); font-size: 0.95rem; }
.biz-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; }
.biz-postcode { max-width: 12rem; text-transform: uppercase; }
@media (max-width: 600px) { .biz-form-row { grid-template-columns: 1fr; } }

/* "Confirm it's you" dialog (confirmIdentity in core.js) */
.identity-title { margin: 0 0 0.5rem; }
.identity-input { width: 100%; box-sizing: border-box; margin-top: 0.25rem; padding: 0.625rem; border: 1px solid var(--slate-450-bd); border-radius: 4px; font-size: 16px; background-color: var(--white-bg); }
.identity-error { min-height: 1.2em; margin: 0.5rem 0 0; font-size: 0.85rem; }

/* Two-factor set-up codes dialog (showSetupCodes in mfa.js) */
.header-btn-group { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.setup-codes-box { max-width: 760px; width: 100%; max-height: 90vh; overflow-y: auto; }
.setup-codes-table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; }
.setup-codes-table th, .setup-codes-table td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--slate-200-bd); }
.setup-code { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em; }
/* On a phone these small tables have no room for a label beside each value,
   so each row is a card with the label above the value, and the whole
   window fits the screen with no sideways scrolling. Long names and
   usernames wrap; a set-up code stays on one line. */
@media (max-width: 767px) {
    .setup-codes-overlay { padding: 0.5rem; }
    .setup-codes-box { padding: 1rem; max-height: 94vh; text-align: left; }
    .setup-codes-box .confirm-message { text-align: left; }
    .setup-codes-table { min-width: 0; }
    .setup-codes-table tr { padding: 0.25rem 0.75rem; }
    .setup-codes-table td {
        display: block; padding: 0.4rem 0; text-align: left; min-height: 0;
        overflow-wrap: anywhere; border-bottom: 1px solid var(--slate-50-bd);
    }
    .setup-codes-table td:last-child { border-bottom: 0; }
    .setup-codes-table td::before {
        position: static; transform: none; display: block; width: auto; margin-bottom: 0.1rem;
    }
    .setup-codes-table .setup-code { font-size: 1.3rem; white-space: nowrap; overflow-wrap: normal; }
    .setup-codes-table code { overflow-wrap: anywhere; }
}
/* Printing the set-up codes: mfa.js adds body.printing-setup-codes, calls
   window.print(), then removes it. Everything except the codes dialog is
   hidden (!important to beat any display set elsewhere), and the dialog
   is laid out as a plain page with its buttons removed. */
@media print {
    body.printing-setup-codes > *:not(.setup-codes-overlay) { display: none !important; }
    body.printing-setup-codes .setup-codes-overlay { position: static; background: none; padding: 0; }
    body.printing-setup-codes .setup-codes-box { max-height: none; overflow: visible; box-shadow: none; max-width: none; }
    body.printing-setup-codes .setup-codes-box .confirm-actions { display: none; }
}

/* Files deleted with a record, in the "Deleted Record" window */
.quarantine-file-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--slate-200-bd); }

/* Settings > Encryption Keys. .enc-new-keys shows newly generated key
   values once (tab-settings.js), for copying into secrets.php by hand;
   user-select: all selects the lot in one click. */
.u-maxw-760 { max-width: 760px; }
.enc-new-keys { background: var(--slate-900-bg); color: var(--slate-200-fg); padding: 0.75rem; border-radius: 4px; white-space: pre-wrap; word-break: break-all; font-size: 0.85rem; user-select: all; }
.enc-steps { padding-left: 1.25rem; }

/* "Showing the latest 200 of 1,234" under a list, and the page buttons in
   the Full History window (both only shown when there is more to see). */
.list-count-note { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--text-muted); }
.list-pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.75rem; font-size: 0.875rem; }
.list-pager.u-hidden-2 { display: none; } /* the rule above would otherwise override .u-hidden-2 */

/* Emails that couldn't be sent (Dashboard / Tenants tab). */
.email-failures-card { border-left: 4px solid var(--red-600-bd); }
.email-failure-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--slate-200-bd); }
@media (max-width: 640px) { .email-failure-row { flex-direction: column; } }

/* Platform invoice, viewed (Invoicing tab, Super Admin). */
.platform-invoice-status { font-size: 0.875rem; margin-bottom: 0.75rem; }
.platform-invoice-doc { border: 1px solid var(--slate-200-bd); border-radius: 6px; padding: 1.25rem; background: var(--white-bg); color: var(--grey-800-fg); }
.platform-invoice-logo { max-height: 60px; margin-bottom: 0.75rem; display: block; }
.platform-invoice-meta { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0.75rem 0; font-size: 0.9rem; }
.platform-invoice-meta > div:last-child { text-align: right; }
.platform-invoice-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; }
.platform-invoice-table th { background: var(--grey-100-bg); text-align: left; }
.platform-invoice-table th, .platform-invoice-table td { padding: 8px; border: 1px solid var(--grey-300-bd); }
.platform-invoice-total td { font-weight: bold; }
.u-text-right { text-align: right; }


/* ============================================================
   PHONES AND TABLETS
   Carers mostly record at the point of care, on a phone.
   ============================================================ */
/* While a window is open the page behind it doesn't scroll.
   body.window-open is added and removed by core.js as windows open and
   close. */
body.window-open { overflow: hidden; }

@media (max-width: 767px) {
    /* Windows fill the screen. Confirm dialogs are left as small centred
       boxes (:not(.confirm-overlay)). */
    .modal-overlay:not(.confirm-overlay) { padding: 0; align-items: stretch; }
    .modal-overlay:not(.confirm-overlay) .modal-content {
        max-width: none;
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        padding: 0 1rem calc(1rem + env(safe-area-inset-bottom));
        box-shadow: none;
    }
    /* The title bar (title + Close) stays at the top while you scroll.
       :has() picks out a window's first child only when it holds the
       title, so windows laid out differently are left alone. */
    .modal-overlay:not(.confirm-overlay) .modal-content > :first-child:has(> .modal-title, > h2) {
        position: sticky;
        top: 0;
        z-index: 6;
        background: var(--white-bg);
        margin: 0 -1rem 0.75rem;
        padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.75rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }
    .modal-overlay:not(.confirm-overlay) .modal-content > :first-child > .modal-title,
    .modal-overlay:not(.confirm-overlay) .modal-content > :first-child > h2 {
        font-size: 1.2rem;
        line-height: 1.3;
        flex: 1 1 10rem;
        margin: 0;
    }
    /* Save stays at the bottom of the screen, always in reach. Applies to
       the last row of a form when that row holds the submit button. */
    .modal-overlay:not(.confirm-overlay) form > div:last-child:has(> button[type="submit"]) {
        position: sticky;
        bottom: calc(-1rem - env(safe-area-inset-bottom)); /* flush with the screen edge, past the window's own bottom padding */
        z-index: 6;
        background: var(--white-bg);
        margin: 1rem -1rem 0;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    }
    .modal-overlay:not(.confirm-overlay) form > div:last-child:has(> button[type="submit"]) > .btn { flex: 1 1 auto; min-height: 48px; }
    /* The bottom bar steps aside while a window is open. */
    body.window-open .nav-rail, body.window-open .nav-panel.open { display: none; }
    /* Record forms are one column (.u-grid-gap-1rem-3 is the two-column
       form grid). */
    .u-grid-gap-1rem-3 { grid-template-columns: 1fr; }
}

/* Touch screens (phones and tablets): bigger buttons and tick boxes, and
   16px text in fields so iPhones don't zoom in when you tap one.
   (pointer: coarse) catches a tablet or touch laptop wider than 767px,
   where a finger is still the pointer. */
@media (max-width: 767px), (pointer: coarse) {
    .btn-compact { min-height: 40px; padding: 6px 12px; }
    input[type="checkbox"], input[type="radio"],
    .form-group input[type="checkbox"], .form-group input[type="radio"] { width: 22px; height: 22px; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea { font-size: 16px; }
    .section-jump-nav .btn { min-height: 40px; }
    nav button { min-height: 44px; }
    button.profile-link { min-height: 40px; display: inline-flex; align-items: center; }
    .u-abs-border-none-cursor-pointer-text-muted-flex-items-center { min-width: 40px; min-height: 40px; right: 2px; }
    .u-style-2 { min-height: 40px; }
    .layout-item-list .btn { min-height: 40px; min-width: 40px; }
}

/* ============================================================
   LIST FILTERS (Clients, Incidents, Daily Records, Tasks & Handovers)
   Fields sit side by side where there's room and stack on a phone.
   ============================================================ */
.list-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 0.5rem 0.75rem;
    align-items: end;
    margin-bottom: 1rem;
}
.list-filters.u-hidden-2 { display: none; } /* the grid above would otherwise override .u-hidden-2 */
.list-filter-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.list-filter-field label { font-size: 0.8rem; font-weight: 600; color: var(--slate-600-fg); }
.list-filter-field input, .list-filter-field select {
    width: 100%;
    min-height: 40px;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--slate-450-bd);
    border-radius: 4px;
    background: var(--white-bg);
    font-size: 0.875rem;
}
.list-filter-field input[aria-invalid="true"] { border-color: var(--red-700-bd); }
.list-filter-clear { width: 100%; min-height: 40px; }
.list-filter-clear:disabled { opacity: 0.6; cursor: default; }
.list-filters-card { padding-bottom: 0.25rem; }
.list-filters-card .list-filters { margin-bottom: 0.75rem; }
/* Two filters per row on a phone (the search box gets a whole row). */
@media (max-width: 767px) {
    .list-filters { grid-template-columns: 1fr 1fr; }
    .list-filter-field:has(input[type="search"]), .list-filter-clear-field { grid-column: 1 / -1; }
}
/* 16px on touch screens, like every other field (no iPhone zoom). */
@media (max-width: 767px), (pointer: coarse) {
    .list-filter-field input, .list-filter-field select { font-size: 16px; }
}

/* Settings > Clock Check (compares the server, database and browser clocks
   so UK times are recorded correctly; tab-settings.js) */
.clock-check-convert { margin-top: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--amber-200-bd); background: var(--amber-50-bg); border-radius: 6px; }
.clock-check-convert h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.clock-check-convert p { font-size: 0.875rem; margin: 0 0 0.75rem; }
.clock-check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.clock-check-item { padding: 0.6rem 0.75rem; border-radius: 6px; border: 1px solid var(--border); background: var(--slate-50-bg); font-size: 0.9rem; }
.clock-check-item.is-ok { background: var(--emerald-50-bg); border-color: var(--emerald-200-bd); }
.clock-check-item.is-problem { background: var(--amber-50-bg); border-color: var(--amber-200-bd); }
.clock-check-columns { font-size: 0.8rem; word-break: break-word; }

/* ============================================================
   STAFF TRAINING & CHECKS (tab-staff.js)
   Status always in words (and an icon), not colour alone.
   ============================================================ */
.staff-st { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.staff-st-ok { background: var(--emerald-50-bg); color: var(--emerald-800-fg); }
.staff-st-due_soon { background: var(--amber-100-bg); color: var(--amber-800-fg); }
.staff-st-expired { background: var(--red-100-bg); color: var(--red-800-fg); }
.staff-st-missing { background: var(--slate-100-bg); color: var(--slate-600-fg); font-weight: 500; }
.staff-st-not_yet { background: var(--slate-50-bg); color: var(--slate-600-fg); font-weight: 500; }
.staff-legend { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.staff-summary { font-weight: 600; margin: 0 0 0.5rem; }
/* A wide matrix scrolls sideways on its own (it's a data table), with the
   names column kept in view. Narrow screens get the card layout.
   border-collapse: separate is needed for position: sticky to work on the
   names column in some browsers; the box-shadow draws its right border,
   which a collapsed border would lose while scrolling. */
.staff-matrix { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.staff-matrix th, .staff-matrix td { white-space: normal; vertical-align: top; }
.staff-matrix thead th { min-width: 7.5rem; font-size: 0.7rem; }
.staff-matrix .staff-matrix-name { position: sticky; left: 0; background: var(--white-bg); z-index: 1; min-width: 10rem; text-align: left; box-shadow: 1px 0 0 var(--border); }
.staff-matrix thead .staff-matrix-name { background: var(--slate-100-bg); }
@container (max-width: 700px) {
    .staff-matrix .staff-matrix-name { position: static; box-shadow: none; padding: 0.5rem; }
    .staff-matrix tbody th { display: block; border-bottom: 1px solid var(--border); }
}
@media (max-width: 767px) {
    .staff-matrix .staff-matrix-name { position: static; box-shadow: none; }
    .staff-matrix tbody th { display: block; }
}
/* "By person": a card for each member of staff, their checks in a grid
   that reflows to the width (no sideways scrolling on a tablet). */
.staff-matrix-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
/* "By check" / "By person" switch: two buttons joined into one control,
   the current one marked aria-pressed="true". */
.staff-view-toggle { display: inline-flex; gap: 0; }
.staff-view-toggle .btn { border-radius: 0; margin: 0; }
.staff-view-toggle .btn:first-child { border-radius: 6px 0 0 6px; }
.staff-view-toggle .btn:last-child { border-radius: 0 6px 6px 0; }
.staff-view-toggle .btn[aria-pressed="true"] { background: var(--accent); color: var(--white-fg); }
.staff-view-toggle.u-hidden-2, .staff-legend.u-hidden-2, .staff-matrix-wrap.u-hidden-2, .staff-people.u-hidden-2 { display: none; }
.staff-st-na { background: transparent; color: var(--slate-600-fg); font-weight: 500; }
.staff-col-where { display: block; font-weight: 500; text-transform: none; color: var(--slate-600-fg); }
.staff-people { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr)); gap: 0.75rem; }
.staff-person { border: 1px solid var(--border); border-radius: 8px; background: var(--white-bg); padding: 0.75rem 0.85rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); min-width: 0; }
.staff-person-empty { text-align: center; }
.staff-person-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; margin-bottom: 0.5rem; }
.staff-person-name { margin: 0; font-size: 1rem; }
.staff-person-role { color: var(--slate-600-fg); font-size: 0.85rem; }
.staff-person-sum { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-left: auto; }
.staff-person-items { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13.5rem, 100%), 1fr)); gap: 0.35rem 0.75rem; }
.staff-person-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.3rem 0; border-top: 1px solid var(--slate-100-bd); min-width: 0; }
.staff-person-label { font-size: 0.85rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.staff-person-more { margin: 0.4rem 0 0; font-size: 0.85rem; }
.staff-person-items { margin-bottom: 0.35rem; }
.staff-person-line { margin: 0.35rem 0 0; font-size: 0.875rem; line-height: 1.6; }
.staff-person-line > .staff-st { margin-right: 0.35rem; }
.staff-person-name-chip small { color: var(--slate-600-fg); white-space: nowrap; }
.staff-section { margin-top: 1.25rem; }
.staff-section h3 { font-size: 1.05rem; }
.staff-dbs-note { background: var(--blue-50-bg); border: 1px solid var(--blue-200-bd); color: var(--blue-900-fg); border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.85rem; }
.staff-dash-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.staff-dash-item { font-size: 0.9rem; }
.staff-course-form { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.staff-course-archived td { color: var(--slate-600-fg); }
.staff-record-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; margin-bottom: 0.5rem; }
.staff-record-toolbar.u-hidden-2 { display: none; }
.staff-leaver-banner { background: var(--amber-50-bg); border: 1px solid var(--amber-300-bd); color: var(--amber-900-fg); border-radius: 6px; padding: 0.6rem 0.85rem; margin-bottom: 0.75rem; }
.staff-leaver-banner p { margin: 0.25rem 0; }
.staff-leaver-banner .u-text-muted { color: var(--yellow-900-fg); }
.staff-leaver-count { display: inline-block; min-width: 1.4em; margin-left: 0.35rem; padding: 0 0.35em; border-radius: 999px; background: var(--amber-700-bg); color: var(--white-fg); font-size: 0.8em; font-weight: 700; text-align: center; }
.staff-settings-form { padding-bottom: 1rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.staff-settings-other { border-bottom: 0; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.staff-settings-other > .u-flex-gap-0-5rem { margin-top: 0.75rem; }
.staff-types-table .staff-type-group th { background: var(--slate-100-bg); text-align: left; font-size: 0.85rem; text-transform: none; }
.staff-type-where { display: block; color: var(--slate-600-fg); font-size: 0.85rem; }
.staff-type-applies { border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.85rem 0.75rem; margin: 0 0 1rem; }
.staff-type-applies legend { font-weight: 700; padding: 0 0.25rem; }
.staff-type-applies > label { display: flex; align-items: center; gap: 0.5rem; min-height: 32px; cursor: pointer; }
.staff-type-residences { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 0.15rem 1rem; margin: 0.15rem 0 0.35rem 1.6rem; }
.staff-type-residences.u-hidden-2, .staff-type-form.u-hidden-2 { display: none; }
.staff-type-residences label { display: flex; align-items: center; gap: 0.45rem; min-height: 32px; cursor: pointer; font-weight: normal; }
.staff-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 0 1rem; }

/* ============================================================
   STRUCTURED CARE PLANS AND RISK ASSESSMENTS (tab-careplans.js)
   Care plan sections shown as cards (read view) and fieldsets
   (edit view); risk assessments as a card list with likelihood x
   severity rating grids.
   ============================================================ */
.care-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.care-plan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; font-size: 0.875rem; color: var(--slate-600-fg); margin: 0 0 0.75rem; }
.care-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: 0.5rem 1.25rem; margin-bottom: 0.75rem; padding: 0.75rem 0.85rem; background: var(--slate-50-bg); border: 1px solid var(--border); border-radius: 8px; }
.care-summary-item h4, .care-sec-card h4 { margin: 0 0 0.25rem; font-size: 0.95rem; }
.care-summary-item p, .care-sec-field p { margin: 0 0 0.35rem; font-size: 0.9rem; overflow-wrap: anywhere; }
.care-sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: 0.75rem; }
.care-sec-card { border: 1px solid var(--border); border-radius: 8px; padding: 0.65rem 0.85rem; background: var(--white-bg); min-width: 0; }
.care-sec-field { margin-top: 0.35rem; }
.care-sec-label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--slate-600-fg); }
.care-not-applying { font-size: 0.85rem; color: var(--slate-600-fg); margin: 0.75rem 0 0; }
.care-edit-sec { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.85rem 0.25rem; margin: 0 0 0.85rem; }
.care-edit-sec legend { font-weight: 700; padding: 0 0.25rem; }
.care-edit-sec small.u-text-muted { display: block; margin-bottom: 0.25rem; }
.care-applies { display: flex; align-items: center; gap: 0.5rem; min-height: 36px; cursor: pointer; font-weight: 600; }
.care-edit-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: 0 1rem; }
.care-edit-fields.u-hidden-2 { display: none; }
.care-form-footer { display: grid; grid-template-columns: minmax(10rem, 14rem) 1fr; gap: 0 1rem; align-items: start; }
@media (max-width: 640px) { .care-form-footer { grid-template-columns: 1fr; } }
.risk-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); gap: 0.75rem; }
.risk-card { border: 1px solid var(--border); border-radius: 8px; padding: 0.65rem 0.85rem; background: var(--white-bg); min-width: 0; }
.risk-card-archived { background: var(--slate-50-bg); }
.risk-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.risk-card-head h4 { margin: 0; font-size: 1rem; margin-right: auto; }
.risk-card-line { font-size: 0.875rem; margin: 0.4rem 0 0; overflow-wrap: anywhere; }
.risk-card-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.risk-archived { margin-top: 0.75rem; }
.risk-archived summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.risk-rating-fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.85rem; margin: 0 0 1rem; }
.risk-rating-fieldset legend { font-weight: 700; padding: 0 0.25rem; }
.risk-rating-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 0 1.25rem; }
.risk-rating-col h4 { margin: 0.25rem 0 0.5rem; font-size: 0.9rem; }
.risk-score-line { min-height: 1.6rem; margin: 0 0 0.5rem; }
.risk-score-table th[scope="row"] { text-align: left; font-weight: 600; }

/* ============================================================
   NOTIFICATION BELL (tab-notifications.js)
   The bell sits in the dark header; its panel drops down below it
   (z-index 1500, above page content). Below 1024px the header
   layout changes, so the panel is fixed to the screen instead.
   ============================================================ */
.notif-wrap { position: relative; }
.notif-wrap.u-hidden-2, .notif-panel.u-hidden-2, .notif-prefs.u-hidden-2, .notif-count.u-hidden-2 { display: none; }
.notif-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: var(--white-fg); font-size: 1.2rem; cursor: pointer; }
.notif-bell:hover, .notif-bell[aria-expanded="true"] { background: rgba(255,255,255,0.18); }
/* The unread count bubble; the border in the header colour cuts it out
   from the bell. */
.notif-count { position: absolute; top: -4px; right: -4px; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem; border-radius: 999px; background: var(--red-600-bg); color: var(--white-fg); font-size: 0.75rem; font-weight: 700; line-height: 1.35rem; text-align: center; border: 2px solid var(--primary-bd); }
.notif-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 1500; width: min(26rem, calc(100vw - 2rem)); max-height: min(70vh, 34rem); overflow-y: auto; background: var(--white-bg); color: var(--text); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,0.28); border: 1px solid var(--border); }
@media (max-width: 1023px) { .notif-panel { position: fixed; top: 4.25rem; right: 0.75rem; left: 0.75rem; width: auto; } }
.notif-panel-head { position: sticky; top: 0; background: var(--white-bg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--border); z-index: 1; }
.notif-panel-title { margin: 0; font-size: 1.05rem; color: var(--primary-fg); }
.notif-panel-actions { display: flex; gap: 0.4rem; }
.notif-prefs { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); background: var(--slate-50-bg); }
.notif-prefs fieldset { border: 0; padding: 0; margin: 0 0 0.5rem; }
.notif-prefs legend { font-weight: 700; margin-bottom: 0.25rem; }
.notif-prefs label { display: flex; align-items: center; gap: 0.5rem; min-height: 32px; cursor: pointer; }
/* Alerts on this device, and the two columns (bell, device) of choices. */
.notif-device { border: 1px solid var(--border); border-radius: 8px; background: var(--white-bg); padding: 0.55rem 0.7rem; margin: 0 0 0.7rem; }
.notif-device-title { margin: 0 0 0.25rem; font-size: 0.95rem; color: var(--primary-fg); }
.notif-device-status { margin: 0 0 0.45rem; font-size: 0.85rem; }
.notif-device-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.notif-device-actions .u-hidden-2 { display: none; }
.notif-pref-head, .notif-pref-row { display: grid; grid-template-columns: 1fr 3rem 4.2rem; align-items: center; gap: 0.25rem; }
.notif-pref-head { font-size: 0.75rem; font-weight: 700; color: var(--slate-600-fg); text-align: center; }
.notif-pref-row { min-height: 34px; border-top: 1px solid var(--slate-100-bd); font-size: 0.88rem; }
.notif-pref-row input { justify-self: center; width: 1.15rem; height: 1.15rem; cursor: pointer; }
.notif-pref-row .notif-pref-na { justify-self: center; color: var(--slate-600-fg); font-size: 0.8rem; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item { border-bottom: 1px solid var(--slate-100-bd); }
.notif-item button { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0.15rem 0.5rem; width: 100%; text-align: left; background: none; border: 0; padding: 0.65rem 0.9rem; cursor: pointer; font: inherit; color: inherit; }
.notif-item button:hover, .notif-item button:focus-visible { background: var(--slate-100-bg); }
.notif-item.is-unread button { background: var(--blue-50-bg); }
.notif-item.is-unread button:hover { background: var(--blue-100-bg); }
.notif-icon { grid-row: span 2; font-size: 1.1rem; line-height: 1.4; }
.notif-title { font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }
.notif-item.is-unread .notif-title::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); margin-right: 0.4rem; vertical-align: middle; }
.notif-time { font-size: 0.75rem; color: var(--slate-600-fg); white-space: nowrap; }
.notif-body { grid-column: 2 / span 2; font-size: 0.85rem; color: var(--slate-600-fg); overflow-wrap: anywhere; }
.notif-empty { padding: 1rem 0.9rem; color: var(--slate-600-fg); font-size: 0.9rem; }

/* ============================================================
   INVOICES: payments, emailing, aged debt (tab-invoices.js)
   ip- = invoice payment window, ie- = invoice email window.
   ============================================================ */
.invoice-status-part { background: var(--sky-100-bg); color: var(--sky-800-fg); }
.aged-debt { border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; background: var(--white-bg); }
.aged-debt-table td, .aged-debt-table th { white-space: nowrap; }
.aged-debt-table tbody th, .aged-debt-table tfoot th { text-align: left; font-weight: 600; background: none; text-transform: none; font-size: 0.95rem; letter-spacing: normal; color: var(--text); }
.aged-debt-table tbody th small { text-transform: none; font-weight: 400; }
.aged-debt-table tfoot th, .aged-debt-table tfoot td { font-weight: 700; border-top: 2px solid var(--border); }
.aged-debt-late { color: var(--red-700-fg); font-weight: 600; }
.ip-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); gap: 0.5rem; margin: 0 0 0.5rem; }
.ip-figures div { background: var(--slate-50-bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.6rem; }
.ip-figures dt { font-size: 0.75rem; color: var(--slate-600-fg); font-weight: 600; text-transform: uppercase; }
.ip-figures dd { margin: 0; font-size: 1.05rem; }
.ip-admin { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.ip-admin.u-hidden-2, #invoice-payment-form.u-hidden-2 { display: none; }
.ie-problem { background: var(--red-50-bg); border: 1px solid var(--red-200-bd); color: var(--red-800-fg); border-radius: 6px; padding: 0.5rem 0.75rem; }
.ie-problem.u-hidden-2 { display: none; }
#invoices-list small, #platform-invoices-list small, .aged-debt-table small { font-size: 0.8rem; }
#invoice-email-form input[type=checkbox] { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
/* Invoicing address missing: a prompt on the residence form, the resident's
   profile, the email window and the Invoices tab (tab-residences.js,
   tab-clients.js, tab-invoices.js). */
.inv-addr-missing { background: var(--amber-50-bg); border: 1px solid var(--amber-300-bd); color: var(--amber-800-fg); border-radius: 6px; padding: 0.5rem 0.75rem; margin: 0 0 0.5rem; }
.inv-addr-missing.u-hidden-2 { display: none; }
#modal-r-invoice-addr-group label.u-mt-1rem { display: block; }

/* ============================================================
   PLATFORM SETTINGS, PHYSIO, ROTA, FAMILY PORTAL, NHS NUMBER,
   CQC PACK, RESIDENCE NOTES
   Later feature sections; each names the script that uses it.
   ============================================================ */
/* Platform Settings > Send a test email (Super Admin).
   The result can include the mail server's conversation in a <pre>. */
.plat-mail-test { border: 1px solid var(--slate-200-bd); border-radius: 8px; padding: 0.75rem 1rem; margin: 0.5rem 0 1rem; background: var(--slate-50-bg); }
.plat-mail-test-row { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.plat-mail-test-row .form-group { flex: 1 1 14rem; margin-bottom: 0; }
.plat-mail-test-result { margin-top: 0.75rem; }
.plat-mail-test-result.u-hidden-2 { display: none; }
.plat-mail-test-result .ok { color: var(--green-800-fg); font-weight: 600; }
.plat-mail-test-result .bad { color: var(--red-800-fg); font-weight: 600; }
.plat-mail-test-result dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.75rem; font-size: 0.85rem; margin: 0.5rem 0; }
.plat-mail-test-result dt { color: var(--slate-600-fg); }
.plat-mail-test-result dd { margin: 0; word-break: break-all; }
.plat-mail-test-result pre { max-height: 16rem; overflow: auto; background: var(--slate-900-bg); color: var(--slate-200-fg); padding: 0.5rem; border-radius: 6px; font-size: 0.75rem; white-space: pre-wrap; word-break: break-all; }
.plat-save-status { font-weight: 600; font-size: 0.9rem; }
.plat-save-status.is-saved { color: var(--green-800-fg); }
.plat-save-status.is-error { color: var(--red-800-fg); }
.plat-save-row { align-items: center; flex-wrap: wrap; }
.smtp-help summary { cursor: pointer; font-weight: 600; }
.smtp-help dl { margin: 0.5rem 0 0; font-size: 0.85rem; }
.smtp-help dt { font-weight: 600; margin-top: 0.5rem; }
.smtp-help dd { margin: 0.15rem 0 0; color: var(--slate-700-fg); }

/* Physio exercises (client record) */
.physio-notes { white-space: pre-wrap; }
/* Correspondence summary and notes (tab-clients.js): keep line breaks. */
.corr-text { white-space: pre-wrap; }
.badge.physio-status-current { background: var(--green-100-bg); color: var(--green-900-fg); }
.badge.physio-status-upcoming { background: var(--sky-100-bg); color: var(--sky-900-fg); }
.badge.physio-status-ended { background: var(--slate-100-bg); color: var(--slate-700-fg); }

/* Rota (tab-rota.js). A week of days, each a list of shifts; the left
   border colour marks your own shifts (blue) and open shifts (amber).
   Two days side by side from 1100px. */
.rota-my { border: 1px solid var(--border, var(--slate-200-bd)); border-radius: 10px; padding: 0.75rem 1rem; background: var(--slate-50-bg); }
.rota-mini-list { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.rota-mini-list li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid var(--slate-200-bd); }
.rota-mini-list li:last-child { border-bottom: 0; }
.rota-confirm-box { background: var(--amber-50-bg); border: 1px solid var(--amber-300-bd); border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0.5rem 0; }
.rota-confirm-box p { margin: 0; }
.rota-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-end; }
.rota-toolbar .form-group { min-width: 12rem; }
.rota-week-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.rota-week-nav input[type=date] { min-height: 40px; }
.rota-days { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.rota-day { border: 1px solid var(--slate-200-bd); border-radius: 10px; padding: 0.6rem 0.8rem; background: var(--white-bg); }
.rota-day.is-today { border-color: var(--sky-700-bd); box-shadow: 0 0 0 1px var(--sky-700-bd); }
.rota-day h4 { margin: 0 0 0.4rem; font-size: 1rem; }
.rota-shifts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.rota-shift { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: flex-start; padding: 0.5rem 0.6rem; border-radius: 8px; background: var(--slate-50-bg); border-left: 4px solid var(--slate-400-bd); }
.rota-shift.is-mine { border-left-color: var(--sky-700-bd); background: var(--sky-50-bg); }
.rota-shift.is-open { border-left-color: var(--amber-700-bd); background: var(--amber-50-bg); }
.rota-shift-main { flex: 1 1 16rem; display: grid; gap: 0.15rem; }
.rota-shift-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rota-type { display: inline-block; font-size: 0.8rem; background: var(--slate-200-bg); color: var(--slate-800-fg); border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.25rem; }
.rota-shift-notes, .rota-worked { font-size: 0.875rem; color: var(--slate-700-fg); white-space: pre-wrap; }
.rota-worked { border-top: 1px dashed var(--slate-300-bd); padding-top: 0.25rem; margin-top: 0.15rem; }
.rota-add-day { margin-top: 0.4rem; }
.badge.rota-st-open { background: var(--amber-100-bg); color: var(--amber-900-fg); }
.badge.rota-st-planned { background: var(--sky-100-bg); color: var(--sky-900-fg); }
.badge.rota-st-confirm { background: var(--orange-100-bg); color: var(--orange-900-fg); }
.badge.rota-st-done { background: var(--green-100-bg); color: var(--green-900-fg); }
.rota-warn-flag { color: var(--amber-800-fg); font-weight: 600; font-size: 0.85rem; cursor: help; }
.rota-warn-box { background: var(--amber-50-bg); border: 1px solid var(--amber-300-bd); border-radius: 8px; padding: 0.5rem 0.8rem; color: var(--amber-900-fg); }
.rota-warn-box summary { cursor: pointer; font-weight: 600; }
.rota-warn-box ul { margin: 0.4rem 0 0.2rem; padding-left: 1.2rem; }
.rota-warn-box.u-hidden-2 { display: none; }
.rota-note { margin: 0 0 0.5rem; color: var(--orange-900-fg); }
.rota-hours-line { font-weight: 600; color: var(--sky-900-fg); margin: 0.25rem 0 0.5rem; }
.rota-planned { background: var(--slate-100-bg); border-radius: 8px; padding: 0.5rem 0.75rem; margin: 0 0 0.5rem; }
.rota-hours-form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.rota-hours-form .form-group { margin-bottom: 0; }
.rota-hours-table small { font-size: 0.8rem; }
#rota-plan-tools.u-hidden-2, #rota-readonly-note.u-hidden-2, #rota-type-form.u-hidden-2 { display: none; }
@media (min-width: 1100px) {
    .rota-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rota-hours-table tbody th, .rota-hours-table tfoot th { text-transform: none; letter-spacing: normal; font-size: inherit; color: inherit; font-weight: 600; }
#settings-rota-modal input[type=checkbox] { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
@media (max-width: 600px) {
    .rota-hours-form { flex-direction: column; align-items: stretch; }
    .rota-hours-form .form-group, .rota-hours-form .btn { width: 100%; }
}

/* Family portal (tab-family.js): what a Family Member sees - messages
   (a chat-style list, theirs on the left, their own on the right),
   updates with photos, and visit requests. */
.family-picker { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: flex-end; }
.family-picker .form-group { min-width: min(320px, 100%); }
.family-picker select { width: 100%; }
.family-waiting .btn { margin: 0.15rem 0.25rem 0.15rem 0; }
.family-section { border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: 1.25rem; }
.family-section:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.family-section h3 { margin: 0 0 0.6rem; }
.family-note { background: var(--slate-100-bg); border-radius: 8px; padding: 0.75rem 1rem; }
.family-msgs { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; max-height: 28rem; overflow-y: auto; }
.family-msg { max-width: min(36rem, 92%); border-radius: 10px; padding: 0.5rem 0.75rem; border: 1px solid var(--border); }
.family-msg-mine { align-self: flex-end; background: var(--sky-100-bg); border-color: var(--sky-200-bd); }
.family-msg-theirs { align-self: flex-start; background: var(--white-bg); }
.family-msg-new { border-color: var(--sky-700-bd); box-shadow: inset 3px 0 0 var(--sky-700-bd); }
.family-msg-meta { font-size: 0.8rem; color: var(--slate-600-fg); margin-bottom: 0.2rem; }
.family-msg-body { overflow-wrap: anywhere; }
.family-new { background: var(--sky-700-bg); color: var(--white-fg); border-radius: 999px; padding: 0 0.45rem; font-size: 0.75rem; font-weight: 600; }
.family-msg-form { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.family-msg-form label { font-weight: 600; }
.family-updates, .family-visits { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.family-update, .family-visit { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.8rem; background: var(--white-bg); }
.family-visit-past { background: var(--slate-50-bg); }
.family-photo-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.family-photo { padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--white-bg); cursor: pointer; width: 96px; height: 96px; overflow: hidden; }
.family-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.family-photo-pick { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.family-photo-pick img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.family-photo-pick span { display: flex; align-items: center; gap: 0.35rem; min-height: 44px; }
.family-status { display: inline-block; font-size: 0.8rem; font-weight: 600; border-radius: 999px; padding: 0.05rem 0.55rem; margin-left: 0.25rem; }
.family-st-wait { background: var(--amber-100-bg); color: var(--amber-900-fg); }
.family-st-suggest { background: var(--orange-100-bg); color: var(--orange-900-fg); }
.family-st-ok { background: var(--green-100-bg); color: var(--green-900-fg); }
.family-st-no { background: var(--slate-200-bg); color: var(--slate-700-fg); }
.family-hours-line { margin: 0 0 0.6rem; }
.family-chip { display: inline-block; font-size: 0.8rem; background: var(--sky-100-bg); color: var(--sky-900-fg); border-radius: 999px; padding: 0.05rem 0.55rem; margin: 0.1rem 0.15rem 0.1rem 0; }
.family-table { width: 100%; border-collapse: collapse; }
.family-table th, .family-table td { text-align: left; vertical-align: top; padding: 0.5rem; border-bottom: 1px solid var(--border); }
.family-table tbody th { text-transform: none; letter-spacing: normal; font-size: inherit; color: inherit; font-weight: 600; }
.family-check { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; cursor: pointer; }
.family-check input { width: 1.4rem; height: 1.4rem; flex-shrink: 0; }
#fu-existing-wrap.u-hidden-2, #fd-suggest-fields.u-hidden-2 { display: none; }
@media (max-width: 600px) {
    .family-table thead { display: none; }
    .family-table, .family-table tbody, .family-table tr, .family-table th, .family-table td { display: block; width: 100%; }
    .family-table tr { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.6rem; }
    .family-table th, .family-table td { border-bottom: none; padding: 0.35rem 0.6rem; }
    .family-msg { max-width: 100%; }
}

/* NHS number check (tab-clients.js): message under the NHS number field
   after the check-digit test, and a warning badge where a stored number
   fails it. */
.nhs-msg { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--slate-600-fg); }
.nhs-msg.nhs-ok { color: var(--green-800-fg); font-weight: 600; }
.nhs-msg.nhs-bad { color: var(--red-700-fg); font-weight: 600; }
#ehr-nhs[aria-invalid="true"] { border-color: var(--red-700-bd); }
.nhs-warn { display: inline-block; font-size: 0.8rem; font-weight: 600; color: var(--amber-800-fg); background: var(--amber-50-bg); border: 1px solid var(--amber-300-bd); border-radius: 6px; padding: 0 0.4rem; margin-left: 0.25rem; }

/* CQC inspection evidence pack (tab-cqc.js): a summary of gaps, then one
   collapsible <details> per CQC key question (Safe, Effective...). */
#cqc-pack.u-hidden-2 { display: none; }
.cqc-pack { margin-top: 1.5rem; }
.cqc-form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.cqc-form .form-group { margin-bottom: 0; }
.cqc-summary { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; background: var(--slate-100-bg); border-radius: 8px; padding: 0.75rem 1rem; }
.cqc-chip, .cqc-count { display: inline-block; font-size: 0.8rem; font-weight: 600; border-radius: 999px; padding: 0.05rem 0.6rem; white-space: nowrap; }
.cqc-st-gap { background: var(--red-100-bg); color: var(--red-800-fg); }
.cqc-st-attention { background: var(--amber-100-bg); color: var(--amber-900-fg); }
.cqc-st-ok { background: var(--green-100-bg); color: var(--green-900-fg); }
.cqc-st-info { background: var(--slate-200-bg); color: var(--slate-700-fg); }
.cqc-ready { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; }
.cqc-ready-item .btn { margin-left: 0.25rem; }
.cqc-examples, .cqc-ex ul { margin: 0.25rem 0 0; padding-left: 1.2rem; font-size: 0.85rem; color: var(--slate-600-fg); }
.cqc-all-good { color: var(--green-900-fg); font-weight: 600; }
.cqc-details-form { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.cqc-details-form .form-group { min-width: min(260px, 100%); flex: 1; }
.cqc-kq { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.9rem; margin-bottom: 0.6rem; background: var(--white-bg); }
.cqc-kq > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.cqc-kq-title { font-weight: 700; font-size: 1.05rem; color: var(--primary-fg); }
.cqc-item { border-top: 1px solid var(--border); padding: 0.6rem 0; }
.cqc-item-head { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.cqc-statements { font-size: 0.8rem; color: var(--slate-600-fg); margin: 0.2rem 0; }
.cqc-lines { margin: 0.25rem 0; padding-left: 1.2rem; }
.cqc-ex > summary { cursor: pointer; font-size: 0.85rem; color: var(--accent-fg); min-height: 32px; display: flex; align-items: center; }
.cqc-notes-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0 1rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.cqc-save-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0.75rem 0 1rem; }
.cqc-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.cqc-table th, .cqc-table td { text-align: left; vertical-align: top; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); }
@media (max-width: 600px) {
    .cqc-form { flex-direction: column; align-items: stretch; }
    .cqc-form .btn, .cqc-summary .btn { width: 100%; }
}

/* Residence notes (wifi code, bin day...) on the residence record */
.res-notes-view { margin-top: 1rem; background: var(--slate-50-bg); padding: 0.75rem 1rem; border-radius: 6px; border: 1px solid var(--border); }
.res-notes-text { margin-top: 0.25rem; white-space: pre-wrap; word-break: break-word; color: var(--slate-900-fg); }
.res-notes-text.res-notes-empty { color: var(--slate-600-fg); font-style: italic; }

/* One daily record per resident per day (tab-daily-records.js,
   openMergedDailyRecord): the explanation at the top of a daily record form
   when someone is adding to the day's existing record, and taller boxes so
   the combined text can be read. */
.daily-append-note { background: var(--blue-50-bg); border: 1px solid var(--blue-200-bd); color: var(--blue-900-fg); border-radius: 6px; padding: 0.5rem 0.75rem; margin-bottom: 1rem; font-size: 0.9rem; }
.daily-append-note p { margin: 0 0 0.4rem; }
.daily-append-note p:last-child { margin-bottom: 0; }
.daily-append-mode textarea { min-height: 9rem; }
/* Daily record text keeps its line breaks in the lists, so an addition's
   "— Added by ... —" line starts on its own line. */
td[data-label="Observations & Care"] { white-space: pre-line; }

/* Staff signatures (tab-users.js renderSignaturePanel; the user form and the
   staff record window). The preview sits on white, as it will on an invoice,
   with a light border so a transparent PNG's edges can be seen. */
.signature-preview-box { margin-top: 0.35rem; padding: 0.5rem; background: var(--white-bg); border: 1px dashed var(--slate-400-bd); border-radius: 6px; min-height: 3rem; display: flex; align-items: center; }
.signature-preview { display: block; max-width: 260px; max-height: 90px; width: auto; height: auto; }
.staff-signature-section { margin-top: 1.25rem; }

/* ============================================================
   DARK MODE: THINGS THAT STAY LIGHT
   Most of dark mode is the colour variables (DARK MODE, near the top).
   These few keep a white background on purpose, because they show
   something as it will look on white paper or on a logo's own
   background: logos (usually dark lettering on transparent), signature
   previews (as printed on invoices) and the white page behind PDF
   previews. Literal white here is intentional.
   ============================================================ */
:root[data-theme="dark"] .app-header-logo,
:root[data-theme="dark"] .signature-preview-box {
    background: #fff;
}
:root[data-theme="dark"] .signature-preview-box { border-color: var(--slate-450-bd); }
/* ... and any words in it ("No signature uploaded yet.") keep their
   light-mode slate, 7.6:1 on the white. */
:root[data-theme="dark"] .signature-preview-box,
:root[data-theme="dark"] .signature-preview-box * { color: #475569; }
/* The header is the darkest surface; a fine line keeps it apart from the
   page. (The phone tab bar already has its shadow.) */
:root[data-theme="dark"] header { border-bottom: 1px solid var(--slate-100-bd); }

/* ============================================================
   MEDICATION (eMAR; tab-mar.js, October 2026)
   The medication round (#mar-tab), the dose, strike-through, effect,
   medicine, stop, MAR chart and controlled drug register windows. Colours
   are the palette variables, so dark mode follows automatically. Every
   state is shown in words as well as colour.
   ============================================================ */
.mar-summary { margin: 0.25rem 0 1rem; font-weight: 600; color: var(--slate-700-fg); }
.mar-summary:empty { display: none; }
.mar-note { padding: 0.6rem 0.8rem; border-radius: 6px; margin: 0.5rem 0; font-size: 0.9rem; }
.mar-note-warn { background: var(--amber-100-bg); color: var(--amber-900-fg); border: 1px solid var(--amber-300-bd); }
.mar-note-danger { background: var(--red-100-bg); color: var(--red-900-fg); border: 1px solid var(--red-300-bd); font-weight: 600; }
.mar-note.u-hidden-2 { display: none; }
.mar-list { display: grid; gap: 1rem; }
.mar-resident { border: 1px solid var(--slate-200-bd); border-radius: 8px; padding: 0.9rem 1rem; background: var(--white-bg); }
.mar-res-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.5rem; }
.mar-res-head h3 { font-size: 1.1rem; }
.mar-allergy { font-size: 0.85rem; padding: 0.35rem 0.6rem; border-radius: 4px; background: var(--red-50-bg); color: var(--red-800-fg); border-left: 4px solid var(--red-600-bd); margin-bottom: 0.6rem; }
.mar-allergy-none { background: var(--slate-50-bg); color: var(--slate-600-fg); border-left-color: var(--slate-300-bd); }
.mar-table td { vertical-align: top; }
/* Same column widths for every resident, so the round reads down the page. */
@media (min-width: 768px) {
    .mar-table { table-layout: fixed; width: 100%; }
    .mar-table th:nth-child(1) { width: 70px; }
    .mar-table th:nth-child(2) { width: 38%; }
    .mar-table th:nth-child(4) { width: 150px; }
}
.mar-row-overdue td:first-child, .mar-row-missed td:first-child { box-shadow: inset 4px 0 0 var(--red-600-bd); }
.mar-row-due td:first-child { box-shadow: inset 4px 0 0 var(--amber-500-bd); }
.mar-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.mar-badge-given { background: var(--green-100-bg); color: var(--green-900-fg); }
.mar-badge-not-given { background: var(--slate-100-bg); color: var(--slate-800-fg); border: 1px solid var(--slate-300-bd); }
.mar-badge-due { background: var(--amber-100-bg); color: var(--amber-900-fg); border: 1px solid var(--amber-400-bd); }
.mar-badge-overdue, .mar-badge-missed { background: var(--red-100-bg); color: var(--red-900-fg); border: 1px solid var(--red-300-bd); }
.mar-badge-upcoming { background: var(--sky-50-bg); color: var(--sky-900-fg); border: 1px solid var(--sky-200-bd); }
.mar-cd-tag { display: inline-block; font-size: 0.7rem; font-weight: 800; padding: 0 5px; border-radius: 3px; background: var(--orange-100-bg); color: var(--orange-900-fg); border: 1px solid var(--orange-500-bd); vertical-align: middle; }
.mar-record-note { font-size: 0.8rem; margin-top: 0.2rem; white-space: pre-wrap; }
.mar-prn-title { margin: 1rem 0 0.4rem; font-size: 0.95rem; color: var(--slate-700-fg); }
.mar-prn { border-top: 1px dashed var(--slate-200-bd); padding: 0.6rem 0; }
.mar-prn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.mar-prn-doses { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: 0.85rem; }
.mar-prn-doses li { margin-bottom: 0.4rem; }
.mar-rec-summary { background: var(--slate-50-bg); border: 1px solid var(--slate-200-bd); border-radius: 6px; padding: 0.6rem 0.8rem; margin-bottom: 0.6rem; display: grid; gap: 0.2rem; }
.mar-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 1rem; }
.mar-form-row.u-hidden-2 { display: none; }
.mar-fieldset, .mar-witness { border: 1px solid var(--slate-200-bd); border-radius: 6px; padding: 0.5rem 0.8rem 0.8rem; margin: 0 0 1rem; }
.mar-witness { background: var(--orange-100-bg); border-color: var(--orange-500-bd); }
.mar-witness.u-hidden-2 { display: none; }
.mar-witness legend, .mar-fieldset legend { font-weight: 700; font-size: 0.9rem; padding: 0 0.3rem; }
.mar-times { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.mar-time-item { display: flex; gap: 0.25rem; align-items: center; }
.mar-time-item input { width: auto; }
.mar-days { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; }
.mar-day-check, .mar-check { display: inline-flex; gap: 0.35rem; align-items: center; font-weight: normal; cursor: pointer; }
.mar-day-check input, .mar-check input { width: auto; margin: 0; }
.mar-med-stopped td { color: var(--slate-500-fg); }
/* The MAR chart: wide, scrolls sideways inside the window. */
.mar-chart-content { max-width: 1200px; }
.mar-chart-nav { flex-wrap: wrap; }
.mar-chart-scroll { overflow-x: auto; border: 1px solid var(--slate-200-bd); border-radius: 6px; }
.mar-chart { border-collapse: collapse; font-size: 0.75rem; min-width: 100%; }
.mar-chart th, .mar-chart td { border: 1px solid var(--slate-200-bd); padding: 2px; text-align: center; min-width: 1.6rem; text-transform: none; letter-spacing: normal; }
.mar-chart thead th { background: var(--slate-100-bg); position: sticky; top: 0; }
.mar-chart .mar-chart-med { text-align: left; min-width: 11rem; position: sticky; left: 0; background: var(--white-bg); font-weight: normal; z-index: 1; }
.mar-chart thead .mar-chart-med { background: var(--slate-100-bg); z-index: 2; }
.mar-chart-time { white-space: nowrap; font-weight: 700; }
.mar-c-none { background: var(--slate-200-bg); }
.mar-c-given { color: var(--green-800-fg); font-weight: 700; }
.mar-c-not { color: var(--red-800-fg); font-weight: 800; background: var(--red-50-bg); }
.mar-c-missing { color: var(--red-800-fg); font-weight: 800; }
.mar-c-today { outline: 2px solid var(--accent-bd); outline-offset: -2px; }
.mar-chart-key { font-size: 0.8rem; margin-top: 0.6rem; color: var(--slate-700-fg); }
.mar-chart-notes { font-size: 0.85rem; padding-left: 1.2rem; }
.mar-struck { text-decoration: line-through; color: var(--slate-500-fg); }
@media (max-width: 640px) {
    .mar-res-head, .mar-prn-head { flex-direction: column; align-items: stretch; }
}
/* The chart stays a grid on phones (scrolling sideways in its box) rather
   than turning into cards like other tables. */
@media (max-width: 767px) {
    .mar-chart { display: table; }
    .mar-chart thead { display: table-header-group; }
    .mar-chart tbody { display: table-row-group; }
    .mar-chart tr, .mar-chart thead tr { display: table-row; position: static; border: 0; margin: 0; padding: 0; border-radius: 0; box-shadow: none; background: transparent; }
    .mar-chart th, .mar-chart td { display: table-cell; position: static; padding: 2px; min-height: 0; text-align: center; }
    .mar-chart .mar-chart-med { position: sticky; text-align: left; min-width: 8rem; }
    .mar-chart td::before { content: none; }
}

/* ============================================================
   SERVICES (Settings > Services for Admins, Service Prices and a
   tenant's Services for the Super Admin; tab-settings.js, tab-admin.js)
   ============================================================ */
.svc-list { display: grid; gap: 0.75rem; }
.svc-item { border: 1px solid var(--slate-200-bd); border-radius: 8px; padding: 0.75rem 0.9rem; background: var(--white-bg); }
.svc-item.svc-off { background: var(--slate-50-bg); }
.svc-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; }
.svc-head h3 { font-size: 1rem; }
.svc-res { border: 0; padding: 0; margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.svc-res-item { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: normal; cursor: pointer; min-height: 24px; }
.svc-res-item input { width: auto; margin: 0; }
.badge.badge-neutral { background: var(--slate-100-bg); color: var(--slate-700-fg); border: 1px solid var(--slate-300-bd); }
.svc-table td { vertical-align: top; }
.svc-table input[type="checkbox"] { width: auto; }
.svc-summary { margin-top: 0.75rem; padding: 0.6rem 0.8rem; border-radius: 6px; background: var(--sky-50-bg); border: 1px solid var(--sky-200-bd); font-size: 0.9rem; }

/* ============================================================
   EVENTS (tab-events.js)
   The Events tab's list, the event window, its forms, and the
   Dashboard's Upcoming events card. Replies and invitee types are
   always words (and an icon), not colour alone.
   ============================================================ */
.events-summary { margin: 0 0 0.75rem; font-weight: 600; }
.events-summary:empty { display: none; }
.events-summary-waiting { color: var(--amber-800-fg); }
.events-list { display: grid; gap: 0.75rem; }
.event-card, .dash-event { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--white-bg); }
.event-card.is-cancelled { opacity: 0.8; background: var(--slate-50-bg); }
.event-card-main, .dash-event-main { min-width: 0; flex: 1 1 auto; }
/* The calendar badge: day over month. */
.event-date { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.4rem; padding: 0.35rem 0; border-radius: 8px; background: var(--sky-50-bg); border: 1px solid var(--sky-200-bd); color: var(--sky-900-fg); line-height: 1.1; }
.event-date-day { font-size: 1.35rem; font-weight: 700; }
.event-date-mon { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.event-card-title, .dash-event-title { margin: 0 0 0.2rem; font-size: 1.05rem; }
.event-open { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--sky-800-fg); text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: 24px; }
.event-open:hover { color: var(--sky-900-fg); }
.event-card-when, .event-card-meta, .dash-event-line { margin: 0.1rem 0; font-size: 0.875rem; overflow-wrap: anywhere; }
.event-card-meta { color: var(--slate-600-fg); }
.event-card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.event-card-tags:empty { display: none; }
.event-cancelled { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 700; background: var(--red-100-bg); color: var(--red-800-fg); }
.event-waiting { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 700; background: var(--amber-100-bg); color: var(--amber-800-fg); }
.event-my { font-size: 0.85rem; }
.event-st { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.event-st-invited { background: var(--slate-100-bg); color: var(--slate-700-fg); }
.event-st-accepted { background: var(--emerald-50-bg); color: var(--emerald-800-fg); }
.event-st-declined { background: var(--red-100-bg); color: var(--red-800-fg); }
.event-kind { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.event-kind-client { background: var(--sky-50-bg); color: var(--sky-900-fg); border-color: var(--sky-200-bd); }
.event-kind-family { background: var(--amber-50-bg); color: var(--amber-900-fg); border-color: var(--amber-200-bd); }
.event-kind-staff { background: var(--slate-100-bg); color: var(--slate-800-fg); border-color: var(--slate-200-bd); }

/* The event window. */
.event-view-content { max-width: 960px; }
.event-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.event-banner { padding: 0.6rem 0.8rem; border-radius: 6px; border: 1px solid var(--amber-200-bd); background: var(--amber-50-bg); font-size: 0.9rem; }
.event-banner-danger { border-color: var(--red-200-bd); background: var(--red-50-bg); color: var(--red-900-fg); }
.event-details { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0 0 1rem; font-size: 0.92rem; }
.event-detail { display: contents; }
.event-details dt { font-weight: 700; color: var(--slate-600-fg); }
.event-details dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .event-details { grid-template-columns: 1fr; gap: 0.1rem; }
    .event-details dd { margin-bottom: 0.45rem; }
}
.event-section-title { font-size: 1.05rem; margin: 1rem 0 0.5rem; }
.event-invites tbody th { text-transform: none; letter-spacing: normal; font-size: inherit; color: inherit; background: none; white-space: normal; text-align: left; font-weight: 600; }
.event-sub { display: block; font-size: 0.78rem; font-weight: 400; color: var(--slate-600-fg); }
.event-sub-inline { font-size: 0.8rem; color: var(--slate-600-fg); }
.event-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* Forms. */
.event-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.event-form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) { .event-form-row, .event-form-row-3 { grid-template-columns: 1fr; } }
.event-fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.9rem 0.8rem; margin: 0 0 1rem; min-width: 0; }
.event-fieldset legend { font-weight: 700; padding: 0 0.3rem; }
.event-fieldset-inner { margin-top: 0.5rem; }
.event-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 0.15rem 1rem; margin: 0.4rem 0; }
.event-check, .event-radio-list label { display: flex; align-items: center; gap: 0.5rem; min-height: 36px; cursor: pointer; }
.event-check.is-invited { color: var(--slate-600-fg); }
.event-radio-list { display: flex; flex-direction: column; gap: 0.1rem; }
.event-radio-row { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.event-custom-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem; }
.event-custom-row input { flex: 1 1 auto; min-width: 0; }
.event-invite-list { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.event-invite-family { list-style: none; margin: 0 0 0.3rem 1.9rem; padding: 0; }
.event-select-all { margin-top: 0.3rem; }

/* The Dashboard card: one event under another. */
.dash-events-list { display: grid; gap: 0.75rem; margin-top: 1rem; }
.dash-event-title { font-size: 1rem; }
.dash-event-group { font-size: 0.85rem; margin: 0.25rem 0; overflow-wrap: anywhere; }
.dash-event-group .event-kind { margin-right: 0.3rem; }
@media (max-width: 480px) { .event-card, .dash-event { padding: 0.75rem; gap: 0.65rem; } .event-date { width: 3rem; } }

/* ============================================================
   INCIDENT ESCALATION (tab-incidents.js; server/lib/incidents.php)
   Harm grade chips, the safeguarding badge, the follow-up status in
   lists, the follow-up window (#incident-review-modal) and the
   dashboard card (#dash-incidents-card).
   ============================================================ */
.harm-chip { display: inline-block; padding: 1px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.harm-none { background: var(--slate-100-bg); color: var(--slate-800-fg); border-color: var(--slate-300-bd); }
.harm-low { background: var(--blue-50-bg); color: var(--blue-900-fg); border-color: var(--blue-200-bd); }
.harm-moderate { background: var(--amber-50-bg); color: var(--amber-900-fg); border-color: var(--amber-400-bd); }
.harm-severe, .harm-death { background: var(--red-100-bg); color: var(--red-900-fg); border-color: var(--red-500-bd); }
.harm-ungraded { background: transparent; color: var(--slate-600-fg); border-color: var(--slate-300-bd); font-weight: 600; }
.sg-badge { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 0.72rem; font-weight: 700; background: var(--red-800-bg); color: #fff; white-space: nowrap; }
.inc-type-cell { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.inc-harm-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.inc-status { display: inline-block; font-weight: 700; font-size: 0.8rem; }
.inc-status-open { color: var(--amber-900-fg); }
.inc-status-closed { color: var(--green-800-fg); }
.inc-todo-count { font-size: 0.8rem; }
@media (max-width: 767px) { .inc-type-cell { justify-content: flex-end; } .inc-harm-cell { align-items: flex-end; } }

.irv-summary { background: var(--slate-50-bg); border: 1px solid var(--slate-200-bd); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.irv-summary-line { margin: 0.2rem 0; overflow-wrap: anywhere; }
.irv-status { font-weight: 600; margin: 0 0 0.75rem; }
.irv-status-open { color: var(--amber-900-fg); }
.irv-status-closed { color: var(--green-800-fg); }
.irv-todo-title { font-size: 1rem; margin: 0 0 0.35rem; }
.irv-todo-list { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.irv-todo-list li { margin: 0.15rem 0; }
.irv-overdue { color: var(--red-800-fg); font-weight: 600; }
.irv-due { font-size: 0.8rem; font-weight: 400; color: var(--slate-600-fg); }
.irv-overdue .irv-due { color: var(--red-800-fg); }
.irv-section { border: 1px solid var(--slate-200-bd); border-radius: 8px; padding: 0.75rem 1rem 0.25rem; margin: 0 0 1rem; min-width: 0; }
.irv-section > legend { font-weight: 700; padding: 0 0.35rem; }
.irv-body { border: 0; border-top: 1px solid var(--slate-200-bd); padding: 0.6rem 0 0; margin: 0 0 0.5rem; min-width: 0; }
.irv-section > .irv-body:first-of-type { border-top: 0; padding-top: 0; }
.irv-body > legend { font-weight: 600; padding: 0; float: left; width: 100%; }
.irv-help { clear: both; margin: 0.15rem 0 0.4rem; padding: 0; }
.irv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 0.75rem; }
.irv-grid .form-group { min-width: 0; }
.irv-grid input, .irv-grid select { width: 100%; box-sizing: border-box; }
.irv-check { display: flex; align-items: flex-end; grid-column: span 2; }
.irv-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 600px) {
    .irv-grid { grid-template-columns: 1fr; }
    .irv-check { grid-column: auto; }
}
.dash-incident { display: grid; gap: 0.35rem; justify-items: start; align-content: start; }
.dash-incident .irv-todo-list { font-size: 0.85rem; }
.dash-incident .irv-todo-list { margin: 0; }
.dash-incident-head { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.template-placeholders { margin: 0 0 0.75rem; }
.template-placeholders summary { cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.template-placeholders code { white-space: nowrap; }

/* A group of related settings inside a settings window (e.g. Incident
   follow-up in Compliance & Retention). */
.settings-fieldset { border: 1px solid var(--slate-200-bd); border-radius: 8px; padding: 0.75rem 1rem 0.25rem; margin: 0.5rem 0 1rem; min-width: 0; }
.settings-fieldset > legend { font-weight: 700; padding: 0 0.35rem; }
.settings-help { margin: 0 0 0.75rem; font-size: 0.85rem; }

/* ============================================================
   COMPLAINTS & COMPLIMENTS (tab-feedback.js). The windows reuse the
   incident follow-up styles (.irv-*).
   ============================================================ */
.fb-kind { display: inline-block; padding: 1px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.fb-kind-complaint { background: var(--amber-50-bg); color: var(--amber-900-fg); border-color: var(--amber-400-bd); }
.fb-kind-compliment { background: var(--emerald-50-bg); color: var(--emerald-800-fg); border-color: var(--emerald-200-bd); }
.fb-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fb-details { white-space: pre-wrap; }
.fbv-top-actions { margin: -0.25rem 0 0.75rem; }
.family-fb-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.family-fb-item { border: 1px solid var(--slate-200-bd); border-radius: 8px; padding: 0.5rem 0.75rem; overflow-wrap: anywhere; }
.family-fb-kind { border: 0; padding: 0; margin: 0 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.family-fb-kind legend { font-weight: 600; padding: 0; margin-bottom: 0.25rem; width: 100%; }
.family-fb-kind label { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 24px; }
@media (max-width: 600px) { .fb-grid-2 { grid-template-columns: 1fr; } }
.family-fb-meta { font-size: 0.85rem; }

/* Files attached to a complaint or compliment, under its summary. */
.fbv-files { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: -0.25rem 0 0.75rem; }
.fbv-files-label { font-weight: 600; font-size: 0.85rem; }

/* ============================================================
   MONITORING CHARTS (tab-monitoring.js)
   ============================================================ */
.u-maxw-900 { max-width: 900px; }
.mon-list { display: grid; gap: 1rem; }
.mon-card { border: 1px solid var(--slate-200-bd); border-radius: 10px; padding: 0.85rem 1rem; background: var(--white-bg); min-width: 0; }
.mon-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; flex-wrap: wrap; }
.mon-card-name { margin: 0; font-size: 1.1rem; }
.mon-card-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.mon-plan-note { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--slate-700-fg); overflow-wrap: anywhere; }
.mon-issues { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mon-issue { font-size: 0.8rem; font-weight: 600; padding: 2px 8px; border-radius: 12px; border: 1px solid transparent; }
.mon-issue-overdue { background: var(--amber-50-bg); color: var(--amber-900-fg); border-color: var(--amber-400-bd); }
.mon-issue-urgent { background: var(--red-100-bg); color: var(--red-900-fg); border-color: var(--red-500-bd); }
.mon-issue-warn { background: var(--slate-100-bg); color: var(--slate-800-fg); border-color: var(--slate-300-bd); }
.mon-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.6rem; margin-top: 0.75rem; }
.mon-tile { border: 1px solid var(--slate-200-bd); border-radius: 8px; padding: 0.55rem 0.7rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.mon-tile-title { margin: 0; font-size: 0.85rem; color: var(--slate-700-fg); }
.mon-tile-main { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.mon-tile-sub { margin: 0; font-size: 0.8rem; color: var(--slate-600-fg); overflow-wrap: anywhere; }
.mon-tile-btns { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.3rem; }
.mon-progress { display: block; width: 100%; height: 0.6rem; margin: 0.15rem 0 0.25rem; accent-color: var(--primary); }
.news-chip { display: inline-block; padding: 1px 8px; border-radius: 12px; font-size: 0.8rem; font-weight: 700; border: 1px solid transparent; }
.news-low { background: var(--emerald-50-bg); color: var(--emerald-800-fg); border-color: var(--emerald-200-bd); }
.news-low_single, .news-medium { background: var(--amber-50-bg); color: var(--amber-900-fg); border-color: var(--amber-400-bd); }
.news-high { background: var(--red-800-bg); color: #fff; }
.mon-without { margin-top: 1.25rem; }
.mon-without-title { font-size: 1rem; margin: 0 0 0.5rem; }
.mon-without-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.mon-without-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--slate-200-bd); padding: 0.3rem 0; }
.mon-record-who { margin: -0.25rem 0 0.75rem; font-weight: 600; overflow-wrap: anywhere; }
.mon-plan-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.35rem 1rem; }
.mon-plan-kind { display: flex; align-items: center; gap: 0.45rem; min-height: 24px; }
.mon-chart-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.mon-chart-kinds { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mon-kind-btn[aria-pressed="true"] { background: var(--primary); color: #fff; }
.mon-chart-days { margin: 0; min-width: 9rem; }
.mon-chart-summary { margin: 0.25rem 0 0.75rem; font-weight: 600; }
.mon-chart-canvas-wrap { position: relative; height: 260px; margin-bottom: 1rem; }
.mon-voided td { color: var(--slate-600-fg); }
@media (max-width: 600px) { .mon-tiles { grid-template-columns: 1fr; } .mon-chart-canvas-wrap { height: 220px; } }
#mon-chart-table .btn { white-space: nowrap; }

/* ============================================================
   CAPACITY, DOLS AND RESUSCITATION (tab-capacity.js)
   ============================================================ */
.resus-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.75rem 0 0; padding: 0.55rem 0.85rem; border-radius: 8px; border: 1px solid var(--slate-300-bd); background: var(--slate-100-bg); color: var(--slate-800-fg); overflow-wrap: anywhere; }
.resus-banner.resus-dnacpr, .resus-card.resus-dnacpr { background: var(--red-100-bg); border-color: var(--red-500-bd); color: var(--red-900-fg); }
.resus-banner.resus-cpr, .resus-card.resus-cpr { background: var(--emerald-50-bg); border-color: var(--emerald-200-bd); color: var(--emerald-800-fg); }
.resus-banner.resus-none { font-size: 0.9rem; }
.resus-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; padding: 0.65rem 0.85rem; border: 1px solid; border-radius: 8px; overflow-wrap: anywhere; }
.cap-sub { margin: 1.1rem 0 0.4rem; font-size: 1rem; }
.cap-due .cap-due-row { margin-bottom: 0.35rem; font-size: 0.9rem; font-weight: 600; }
.cap-muted { color: var(--slate-600-fg); margin: 0.25rem 0; }
.cap-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.cap-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--slate-200-bd); overflow-wrap: anywhere; }
.cap-list li > span { min-width: 0; }
.cap-list li.cap-old { color: var(--slate-600-fg); }
.cap-add { margin-top: 0.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cap-earlier { margin-top: 0.5rem; }
.cap-earlier summary { cursor: pointer; font-size: 0.9rem; min-height: 24px; }
.cap-chip { display: inline-block; padding: 1px 8px; border-radius: 12px; font-size: 0.78rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.cap-chip-dnacpr, .cap-chip-lacks_capacity { background: var(--red-100-bg); color: var(--red-900-fg); border-color: var(--red-500-bd); }
.cap-chip-cpr, .cap-chip-has_capacity, .cap-chip-granted { background: var(--emerald-50-bg); color: var(--emerald-800-fg); border-color: var(--emerald-200-bd); }
.cap-chip-applied { background: var(--amber-50-bg); color: var(--amber-900-fg); border-color: var(--amber-400-bd); }
.cap-chip-not_granted, .cap-chip-ended { background: var(--slate-100-bg); color: var(--slate-800-fg); border-color: var(--slate-300-bd); }
.cap-files { font-size: 0.85rem; white-space: nowrap; }
.cap-form-h { font-size: 1rem; margin: 1rem 0 0.5rem; }
.cap-yn { border: 1px solid var(--slate-200-bd); border-radius: 8px; padding: 0.5rem 0.75rem 0.75rem; margin: 0 0 0.75rem; }
.cap-yn legend { font-weight: 700; padding: 0 0.25rem; }
.cap-yn-opts { display: flex; gap: 1.25rem; margin: 0.25rem 0 0.5rem; }
.cap-yn-opts label { display: flex; align-items: center; gap: 0.4rem; min-height: 24px; cursor: pointer; }
.cap-yn-note-label { font-size: 0.85rem; display: block; margin-bottom: 0.2rem; }
.cap-yn textarea { width: 100%; }
.cap-suggest { font-weight: 600; margin: 0 0 0.75rem; }
.cap-suggest:empty { display: none; }
.cap-existing-files { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: -0.25rem 0 1rem; }
.cap-existing-files:empty { display: none; }
.cap-dl { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 0.35rem 1rem; margin: 0; }
.cap-dl dt { font-weight: 700; color: var(--slate-700-fg); }
.cap-dl dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cap-view-files { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.cap-register td { vertical-align: top; }
.cap-due-list { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; }
.cap-due-list .cap-due-overdue { color: var(--red-800-fg); font-weight: 700; }
@media (max-width: 600px) { .cap-dl { grid-template-columns: 1fr; } .cap-dl dt { margin-top: 0.4rem; } .resus-card { flex-direction: column; } }
.resus-banner.u-hidden-2 { display: none; }
.cap-list li > .btn, .resus-card > .btn { flex-shrink: 0; white-space: nowrap; }
.cap-register td:first-child { min-width: 8rem; }

/* ============================================================
   HOSPITAL TRANSFERS (tab-hospital.js)
   ============================================================ */
.hosp-banner { background: var(--amber-50-bg); border-color: var(--amber-400-bd); color: var(--amber-900-fg); }
.hosp-gaps { border: 1px solid var(--amber-400-bd); background: var(--amber-50-bg); color: var(--amber-900-fg); border-radius: 8px; padding: 0.5rem 0.85rem; margin-bottom: 0.75rem; }
.hosp-gaps.u-hidden-2 { display: none; }
.hosp-gaps-title { margin: 0 0 0.25rem; font-weight: 700; }
.hosp-gaps ul { margin: 0; padding-left: 1.1rem; }
.hosp-summary-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.25rem; overflow-wrap: anywhere; }
.hosp-open-note { font-weight: 600; border-left: 4px solid var(--amber-400-bd); padding-left: 0.6rem; }
.hosp-belongings-set { border: 1px solid var(--slate-200-bd); border-radius: 8px; padding: 0.5rem 0.75rem 0.75rem; margin: 0 0 1rem; }
.hosp-belongings-set legend { font-weight: 700; padding: 0 0.25rem; }
.hosp-belongings { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.35rem 1rem; }
.hosp-belong { display: flex; align-items: center; gap: 0.45rem; min-height: 24px; cursor: pointer; }
.hosp-h { font-size: 1rem; margin: 0 0 0.5rem; }

/* ============================================================
   STAFF LEAVE (tab-leave.js)
   ============================================================ */
.leave-h { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }
.leave-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; margin: 0.5rem 0 0.75rem; }
.leave-tile { border: 1px solid var(--slate-200-bd); border-radius: 8px; padding: 0.5rem 0.65rem; display: flex; flex-direction: column; }
.leave-tile-v { font-weight: 700; font-size: 1.1rem; }
.leave-tile-l { font-size: 0.8rem; color: var(--slate-600-fg); }
.leave-tile-main { border-color: var(--emerald-200-bd); background: var(--emerald-50-bg); }
.leave-tile-neg { border-color: var(--red-500-bd); background: var(--red-100-bg); }
.leave-st-requested { background: var(--amber-50-bg); color: var(--amber-900-fg); border-color: var(--amber-400-bd); }
.leave-st-approved { background: var(--emerald-50-bg); color: var(--emerald-800-fg); border-color: var(--emerald-200-bd); }
.leave-st-declined, .leave-st-cancelled { background: var(--slate-100-bg); color: var(--slate-800-fg); border-color: var(--slate-300-bd); }
.leave-st-recorded { background: var(--red-100-bg); color: var(--red-900-fg); border-color: var(--red-500-bd); }
.leave-shift-flag { font-weight: 600; color: var(--amber-900-fg); }
.leave-allowance { border: 1px solid var(--slate-200-bd); border-radius: 8px; padding: 0.25rem 0.85rem 0.85rem; margin: 0.75rem 0; }
.leave-allowance.u-hidden-2 { display: none; }
.rota-leave { list-style: none; padding: 0; margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rota-leave-item { font-size: 0.78rem; font-weight: 600; padding: 1px 8px; border-radius: 12px; background: var(--sky-50-bg); border: 1px solid var(--sky-200-bd); color: var(--slate-800-fg); }
.rota-leave-item.is-sick { background: var(--red-100-bg); border-color: var(--red-500-bd); color: var(--red-900-fg); }
.rota-leave-item.is-requested { border-style: dashed; background: transparent; }
#leave-decide-detail { margin-bottom: 1rem; }

/* Residents' personal money (tab-money.js). */
.u-maxw-1000 { max-width: 1000px; }
.money-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; margin-bottom: 0.75rem; border: 1px solid var(--slate-200-bd); border-radius: 8px; background: var(--slate-50-bg, transparent); }
.money-balance { font-size: 1.6rem; margin-left: 0.4rem; }
.money-actions { margin-bottom: 0.75rem; }
.money-table td { vertical-align: top; }
.money-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.money-kind { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0 6px; border-radius: 10px; background: var(--sky-50-bg); border: 1px solid var(--sky-200-bd); color: var(--slate-800-fg); }
.money-diff-row td { background: var(--amber-50-bg); }
.money-count-note { padding: 0.6rem 0.8rem; border-left: 4px solid var(--sky-200-bd); background: var(--sky-50-bg); color: var(--slate-800-fg); margin-top: 0; }
.money-witness, .money-statement { border: 1px solid var(--slate-200-bd); border-radius: 8px; padding: 0.75rem 1rem; margin: 0.5rem 0 1rem; }
.money-witness legend, .money-statement legend { font-weight: 700; padding: 0 0.3rem; }
.money-statement { margin-top: 1rem; }
.money-statement-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.money-statement-row .form-group { margin: 0; }
.money-ehr-bal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; }
.money-table .btn-table-action { white-space: nowrap; margin: 0 0.25rem 0.25rem 0; }
#money-correct-btn.u-hidden-2, #money-receipt-input.u-hidden-2 { display: none; }

/* Settings > Layout & Permissions: the menu category beside each tab. */
.layout-item-cat { display: inline-block; margin-left: 0.4rem; padding: 0 0.45rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted, #475569); font-size: 0.72rem; font-weight: 600; vertical-align: middle; }

/* Enquiries and admissions (tab-enquiries.js). */
.enq-vac { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.75rem; margin: 0.6rem 0 1.25rem; }
.enq-vac-tile { border: 1px solid var(--slate-200-bd); border-radius: 10px; padding: 0.7rem 0.85rem; background: var(--slate-50-bg); display: grid; gap: 0.4rem; min-width: 0; }
.enq-vac-tile.is-full { border-color: var(--amber-400-bd); background: var(--amber-50-bg); }
.enq-vac-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; overflow-wrap: anywhere; }
.enq-vac-free { font-weight: 700; color: var(--emerald-800-fg); white-space: nowrap; }
.enq-vac-tile.is-full .enq-vac-free { color: var(--amber-900-fg); }
.enq-vac-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--emerald-50-bg); border: 1px solid var(--emerald-200-bd); }
.enq-vac-bar .is-occupied { background: var(--sky-700-bg); }
.enq-vac-bar .is-offered { background: var(--amber-400-bd); }
.enq-filters { margin-bottom: 1rem; }
.enq-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; align-items: start; }
@media (max-width: 1100px) { .enq-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .enq-board { grid-template-columns: minmax(0, 1fr); } }
.enq-col { background: var(--slate-50-bg); border: 1px solid var(--slate-200-bd); border-radius: 10px; padding: 0.6rem; display: grid; gap: 0.5rem; min-width: 0; }
.enq-col-h { margin: 0 0 0.1rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-700-fg); display: flex; align-items: center; gap: 0.4rem; }
.enq-count { font-size: 0.75rem; background: var(--slate-200-bg); color: var(--slate-800-fg); border-radius: 10px; padding: 0 7px; letter-spacing: 0; }
.enq-empty { margin: 0; color: var(--slate-600-fg); font-size: 0.85rem; }
.enq-card { display: grid; gap: 0.2rem; text-align: left; width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--slate-200-bd); border-left: 4px solid var(--sky-600-bd); border-radius: 8px; background: var(--white-bg); color: var(--text); cursor: pointer; font: inherit; min-width: 0; overflow-wrap: anywhere; }
.enq-card:hover, .enq-card:focus-visible { border-color: var(--sky-600-bd); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12); }
.enq-card-name { font-weight: 700; color: var(--slate-900-fg); }
.enq-card-meta { font-size: 0.82rem; color: var(--slate-700-fg); }
.enq-card-age { font-size: 0.75rem; color: var(--slate-600-fg); }
.enq-next { display: inline-block; justify-self: start; font-size: 0.75rem; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: var(--sky-50-bg); border: 1px solid var(--sky-200-bd); color: var(--slate-800-fg); }
.enq-next.is-today { background: var(--amber-50-bg); border-color: var(--amber-400-bd); color: var(--amber-900-fg); }
.enq-next.is-overdue { background: var(--red-100-bg); border-color: var(--red-500-bd); color: var(--red-900-fg); }
.enq-assess-chip, .enq-stage-chip { display: inline-block; justify-self: start; font-size: 0.75rem; font-weight: 700; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--slate-300-bd); background: var(--slate-100-bg); color: var(--slate-800-fg); }
.enq-assess-chip.is-can_meet, .enq-stage-chip.is-admitted { background: var(--emerald-50-bg); border-color: var(--emerald-200-bd); color: var(--emerald-800-fg); }
.enq-assess-chip.is-with_conditions, .enq-stage-chip.is-offered { background: var(--amber-50-bg); border-color: var(--amber-400-bd); color: var(--amber-900-fg); }
.enq-assess-chip.is-cannot_meet { background: var(--red-100-bg); border-color: var(--red-500-bd); color: var(--red-900-fg); }
.enq-stage-chip.is-closed { background: var(--slate-200-bg); color: var(--slate-700-fg); }
.enq-sub { margin: -0.5rem 0 0.75rem; color: var(--slate-700-fg); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.enq-steps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.3rem; counter-reset: enqstep; }
.enq-steps li { counter-increment: enqstep; text-align: center; font-size: 0.8rem; color: var(--slate-600-fg); padding-top: 0.25rem; border-top: 4px solid var(--slate-200-bd); min-width: 0; overflow-wrap: anywhere; }
.enq-steps li span::before { content: counter(enqstep) ". "; }
.enq-steps li.is-done { border-top-color: var(--sky-700-bg); color: var(--slate-800-fg); }
.enq-steps li.is-current { border-top-color: var(--emerald-500-bd); color: var(--slate-900-fg); font-weight: 700; }
.enq-closed-banner { margin: 0 0 1rem; padding: 0.55rem 0.8rem; border-left: 4px solid var(--amber-400-bd); background: var(--amber-50-bg); color: var(--amber-900-fg); border-radius: 4px; }
.enq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.25rem; align-items: start; }
@media (max-width: 760px) { .enq-layout { grid-template-columns: minmax(0, 1fr); } .enq-side { order: -1; } }
.enq-side { border: 1px solid var(--slate-200-bd); border-radius: 10px; padding: 0.75rem; background: var(--slate-50-bg); min-width: 0; }
.enq-side .leave-h:first-child { margin-top: 0; }
.enq-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.enq-actions .btn { white-space: nowrap; }
.enq-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.3rem 0.9rem; margin: 0; }
.enq-dl dt { color: var(--slate-600-fg); font-size: 0.85rem; }
.enq-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { .enq-dl { grid-template-columns: minmax(0, 1fr); } .enq-dl dd { margin-bottom: 0.3rem; } }
.enq-h4 { margin: 0.9rem 0 0.3rem; font-size: 0.9rem; }
.enq-pre { white-space: pre-line; overflow-wrap: anywhere; }
.enq-next-form { margin-top: 1rem; }
.enq-next-row, .enq-log-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.enq-next-row .form-group, .enq-log-form .form-group { margin: 0; }
.enq-next-row .form-group:first-child, .enq-log-text { flex: 1 1 220px; }
.enq-log { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.enq-log-item { border-left: 3px solid var(--slate-300-bd); padding: 0.2rem 0 0.2rem 0.7rem; }
.enq-log-item.is-status { border-left-color: var(--sky-600-bd); }
.enq-log-item.is-visit { border-left-color: var(--emerald-500-bd); }
.enq-log-head { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.78rem; align-items: baseline; }
.enq-log-kind { font-weight: 700; color: var(--slate-800-fg); }
.enq-fieldset { border: 1px solid var(--slate-200-bd); border-radius: 8px; padding: 0.75rem 1rem; margin: 0 0 1rem; }
.enq-fieldset legend { font-weight: 700; padding: 0 0.3rem; }
.enq-fieldset > label { display: flex; margin: 0.25rem 0; }
.enq-areas-form .enq-area textarea { min-height: 3.2rem; }
.enq-areas { display: grid; gap: 0.15rem; margin: 0.5rem 0 0; }
.enq-areas dt { font-weight: 700; margin-top: 0.6rem; }
.enq-areas dd { margin: 0; }
.enq-figures { margin: 0 0 0.5rem; padding-left: 1.1rem; }
.enq-figures li { margin: 0.25rem 0; }
.enq-small-table { width: 100%; min-width: 0; font-size: 0.85rem; }
#enq-files-add.u-hidden-2, #enq-next-form.u-hidden-2, #enq-log-form.u-hidden-2, #enq-of-warn.u-hidden-2, #enq-ad-cond.u-hidden-2, #enq-ad-noassess-wrap.u-hidden-2, #enq-stage-visit-wrap.u-hidden-2, #enq-files-input.u-hidden-2 { display: none; }
.enq-table-wrap { overflow-x: auto; }

/* Quality audits and maintenance (tab-audits.js). */
.btn-link { background: none; border: 0; padding: 0; color: var(--accent-fg); text-decoration: underline; cursor: pointer; font: inherit; }
.au-summary { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0.75rem; }
.au-stat { padding: 0.25rem 0.7rem; border-radius: 14px; background: var(--slate-100-bg); border: 1px solid var(--slate-200-bd); font-size: 0.85rem; }
.au-stat.is-overdue { background: var(--red-100-bg); border-color: var(--red-500-bd); color: var(--red-900-fg); }
.au-stat.is-soon { background: var(--amber-50-bg); border-color: var(--amber-400-bd); color: var(--amber-900-fg); }
.au-chip { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: var(--slate-100-bg); border: 1px solid var(--slate-300-bd); color: var(--slate-800-fg); white-space: nowrap; }
.au-chip.is-overdue { background: var(--red-100-bg); border-color: var(--red-500-bd); color: var(--red-900-fg); white-space: normal; }
.au-chip.is-soon { background: var(--amber-50-bg); border-color: var(--amber-400-bd); color: var(--amber-900-fg); }
.au-chip.is-good { background: var(--emerald-50-bg); border-color: var(--emerald-200-bd); color: var(--emerald-800-fg); }
.au-score { display: inline-block; font-weight: 700; font-size: 0.8rem; padding: 0 7px; border-radius: 10px; border: 1px solid var(--slate-300-bd); }
.au-score.is-good { background: var(--emerald-50-bg); border-color: var(--emerald-200-bd); color: var(--emerald-800-fg); }
.au-score.is-mid { background: var(--amber-50-bg); border-color: var(--amber-400-bd); color: var(--amber-900-fg); }
.au-score.is-low { background: var(--red-100-bg); border-color: var(--red-500-bd); color: var(--red-900-fg); }
.au-row-overdue td:first-child { box-shadow: inset 4px 0 0 var(--red-500-bd); }
.au-row-off td { color: var(--slate-600-fg); }
.au-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.au-items { display: grid; gap: 0.6rem; margin: 0.5rem 0 1rem; }
.au-q { border: 1px solid var(--slate-200-bd); border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0; min-width: 0; }
.au-q legend { font-weight: 600; padding: 0 0.3rem; font-size: 0.92rem; }
.au-yn { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
.au-yn-opt { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.8rem; border: 1px solid var(--slate-300-bd); border-radius: 18px; cursor: pointer; min-height: 36px; }
.au-yn-opt:has(input:checked).is-yes { background: var(--emerald-50-bg); border-color: var(--emerald-500-bd); }
.au-yn-opt:has(input:checked).is-no { background: var(--red-100-bg); border-color: var(--red-500-bd); }
.au-yn-opt:has(input:checked).is-na { background: var(--slate-100-bg); border-color: var(--slate-500-bd); }
.au-note { margin-top: 0.5rem; }
.au-note label { font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 0.2rem; }
.au-note input { width: 100%; }
#au-items .au-note.u-hidden-2, #au-tpl-form.u-hidden-2, #au-ac-res-wrap.u-hidden-2, #au-view-delete.u-hidden-2, #au-templates-btn.u-hidden-2, #au-action-add.u-hidden-2,
#mt-update-form.u-hidden-2, #mt-up-done-wrap.u-hidden-2, #mt-files-wrap.u-hidden-2, #mt-edit-btn.u-hidden-2, #mt-files-input.u-hidden-2 { display: none; }
.au-read-wrap { overflow-x: auto; margin: 0.4rem 0; }
.au-read-table { width: 100%; min-width: 0; font-size: 0.88rem; }
.au-read-table input[type=text] { width: 100%; min-width: 3.5rem; }
.au-read-table td:first-child input { min-width: 9rem; }
@media (max-width: 620px) { .au-read-table td input[type=text] { width: 100%; min-width: 0; } .au-read-table td:first-child input { min-width: 0; } }
.au-v-list { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; gap: 0.35rem; }
.au-v-item { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.35rem 0; border-bottom: 1px solid var(--slate-200-bd); flex-wrap: wrap; }
.au-v-item .au-read-wrap { flex-basis: 100%; }
.au-v-a { flex: 0 0 2.8rem; text-align: center; font-weight: 700; font-size: 0.8rem; border-radius: 10px; padding: 1px 0; background: var(--slate-100-bg); }
.au-v-a.is-yes { background: var(--emerald-50-bg); color: var(--emerald-800-fg); }
.au-v-a.is-no { background: var(--red-100-bg); color: var(--red-900-fg); }
.au-v-q { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.au-tpl-form { margin-top: 1rem; border-top: 1px solid var(--slate-200-bd); padding-top: 0.5rem; }
.mt-prio { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--slate-300-bd); background: var(--slate-100-bg); color: var(--slate-800-fg); }
.mt-prio.is-urgent { background: var(--red-100-bg); border-color: var(--red-500-bd); color: var(--red-900-fg); }
.mt-prio.is-high { background: var(--amber-50-bg); border-color: var(--amber-400-bd); color: var(--amber-900-fg); }
.mt-update { margin-top: 1rem; border-top: 1px solid var(--slate-200-bd); padding-top: 0.5rem; }

/* Policies (tab-policies.js) */
.pl-bar { display: inline-block; vertical-align: middle; width: 90px; height: 8px; border-radius: 4px; background: var(--slate-200-bd); overflow: hidden; }
.pl-bar-fill { display: block; height: 100%; width: 0; background: var(--amber-400-bd); }
.pl-bar-fill.is-done { background: var(--emerald-500-bd); }
.pl-bar-fill.is-low { background: var(--red-500-bd); }
.pl-bar-text { font-size: 0.85rem; white-space: nowrap; }
.pl-desc { margin: 0 0 0.6rem; white-space: pre-line; }
.pl-ack { margin-top: 1rem; padding: 0.8rem 1rem; border: 1px solid var(--emerald-200-bd); background: var(--emerald-50-bg); border-radius: 8px; }
.pl-ack-label { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 500; cursor: pointer; }
.pl-ack-label input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.pl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.5rem 1.5rem; }
.pl-sub-h { margin: 0.3rem 0; font-size: 0.92rem; }
.pl-names { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; font-size: 0.92rem; }
.pl-names li { padding: 0.2rem 0; border-bottom: 1px solid var(--slate-200-bd); overflow-wrap: anywhere; }
.pl-fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.pl-fieldset legend { font-weight: 600; margin-bottom: 0.3rem; }
.pl-roles { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.pl-role { display: inline-flex; gap: 0.35rem; align-items: center; min-height: 36px; cursor: pointer; }
#pl-add-btn.u-hidden-2, #pl-col-staff.u-hidden-2, #pl-ack.u-hidden-2, #pl-readers.u-hidden-2, #pl-remind-btn.u-hidden-2, #pl-admin-btns.u-hidden-2, #pl-issue-btn.u-hidden-2,
#plf-archived-wrap.u-hidden-2, #pli-within-wrap.u-hidden-2 { display: none; }

/* Import & export (tab-dataio.js) */
.dio-sec { margin-top: 1.25rem; padding-top: 0.5rem; border-top: 1px solid var(--slate-200-bd); }
.dio-help { margin: 0.25rem 0 0.75rem; padding: 0.6rem 0.8rem; background: var(--slate-100-bg); border-radius: 8px; font-size: 0.92rem; }
.dio-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.dio-row .form-group { flex: 1 1 260px; min-width: 0; }
.dio-row input[type=file] { max-width: 100%; }
.dio-msg { padding: 0.6rem 0.8rem; border-radius: 8px; border: 1px solid var(--slate-300-bd); }
.dio-msg.is-error { background: var(--red-100-bg); border-color: var(--red-500-bd); color: var(--red-900-fg); }
.dio-msg.is-good { background: var(--emerald-50-bg); border-color: var(--emerald-200-bd); color: var(--emerald-800-fg); }
.dio-table { font-size: 0.9rem; }
.dio-table code { overflow-wrap: anywhere; }
.dio-accounts { margin-top: 1rem; padding: 0.6rem 0.9rem; border: 2px solid var(--amber-400-bd); border-radius: 8px; }
#dio-import.u-hidden-2, #dio-export.u-hidden-2, #dio-run-wrap.u-hidden-2, #dio-help-clients.u-hidden-2, #dio-help-staff.u-hidden-2 { display: none; }
#dio-result:not(:empty) { margin-top: 1rem; }
.dio-accounts > button { margin-top: 0.6rem; }

/* Property risk assessments in the Residence record (tab-premises.js). */
.prem-section { margin-top: 1rem; }
.prem-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.prem-intro { font-size: 0.875rem; margin: 0.35rem 0 0.75rem; }
.prem-list { margin-top: 0.25rem; }
.prem-archived { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.4rem; }
.prem-note { background: var(--amber-50-bg); border: 1px solid var(--amber-400-bd); border-radius: 6px; padding: 0.5rem 0.75rem; }
.prem-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.prem-hazards td, .prem-hazards th { vertical-align: top; font-size: 0.875rem; overflow-wrap: anywhere; }
.prem-hazards { table-layout: fixed; width: 100%; min-width: 640px; }
.prem-hazards th { white-space: normal; }
.prem-hazards th:nth-child(1) { width: 2.4rem; }
.prem-buttons { margin: 0.75rem 0 0.25rem; }
.prem-hazards th:nth-child(4), .prem-hazards th:nth-child(6) { width: 9.5rem; }
.prem-actions { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.prem-action { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.5rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.75rem; overflow-wrap: anywhere; }
.prem-action.is-done { background: var(--slate-50-bg); }
.prem-action > div:first-child { flex: 1 1 18rem; min-width: 0; }
.prem-reviews { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; display: grid; gap: 0.3rem; overflow-wrap: anywhere; }
.prem-hazard { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.85rem 0.75rem; margin: 0 0 0.75rem; min-width: 0; }
.prem-hazard legend { font-weight: 700; padding: 0 0.25rem; }
.prem-rate { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 0.75rem; background: var(--slate-50-bg); border-radius: 6px; padding: 0.35rem 0.6rem; margin-bottom: 0.6rem; }
.prem-rate .form-group { margin-bottom: 0.35rem; min-width: 10rem; flex: 1 1 10rem; }
.prem-rate-label { flex: 1 0 100%; font-weight: 600; font-size: 0.85rem; padding-top: 0.2rem; }
.prem-rate-score { min-height: 2.2rem; display: flex; align-items: center; padding-bottom: 0.35rem; }
.prem-action-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 9.5rem) auto; gap: 0 0.5rem; align-items: end; }
.prem-action-row > button { margin-bottom: 1rem; }
.prem-type-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 8.5rem) auto auto auto; gap: 0 0.75rem; align-items: end; border-bottom: 1px solid var(--slate-100-bd); padding: 0.4rem 0; }
.prem-type-row .form-group { margin-bottom: 0.35rem; }
.prem-check { display: flex; align-items: center; gap: 0.35rem; min-height: 40px; margin-bottom: 0.35rem; white-space: nowrap; cursor: pointer; }
.prem-file-remove { margin-left: 0.15rem; }
@media (max-width: 700px) {
    .prem-action-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .prem-action-row .form-group:first-child { grid-column: 1 / -1; }
    .prem-type-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .prem-type-row .form-group:first-child { grid-column: 1 / -1; }
}

/* The Health and Care Passport in the record (tab-passport.js). */
.pp-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 0.5rem 1rem; margin: 0.5rem 0 0.75rem; }
.pp-top dt { font-size: 0.8rem; color: var(--slate-600-fg); }
.pp-top dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pp-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: 0.6rem; }
.pp-field { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.75rem; background: var(--white-bg); min-width: 0; }
.pp-field h4 { margin: 0 0 0.25rem; font-size: 0.95rem; color: var(--primary-fg); }
.pp-field p { margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
#pp-from-plan-wrap { margin-bottom: 0.9rem; }

/* Daily records: who last updated the record, under the shift. */
.dr-updated-by { white-space: nowrap; }