/* ============================================================================
   Patient Relationship Management — Portal Design System
   ----------------------------------------------------------------------------
   Goal: a calm, white, minimalist line-of-business UI.

   Principles (see .claude/skills/prm-dev/reference/design-system.md):
     1. White surfaces on a near-white page. No decorative gradients.
     2. Structure comes from thin 1px neutral borders, not heavy shadows.
     3. A single, restrained blue accent. Colour is reserved for status.
     4. One neutral text scale (near-black -> muted -> subtle).
     5. Consistent, modest radii and spacing across every feature.

   This file is the single source of truth. Feature pages still ship local
   `<style>` blocks (gradient heroes, panels, drawers); the "Normalization
   layer" near the bottom overrides those legacy looks by exact class name so
   the whole app stays consistent without editing every page. Prefer adding new
   styling here (tokens + the .app-* utilities) over new per-page CSS.
   ========================================================================== */

/* 1. Design tokens ---------------------------------------------------------- */
:root {
    /* Surfaces */
    --app-bg: #f6f7f9;            /* page background */
    --app-surface: #ffffff;       /* cards, panels, heroes, drawers */
    --app-surface-alt: #f9fafb;   /* subtle insets: nav rails, groups */

    /* Borders */
    --app-border: #e8eaed;        /* default hairline */
    --app-border-strong: #d7dbe0; /* emphasised dividers */

    /* Text */
    --app-text: #1a1d21;          /* headings / primary */
    --app-text-muted: #667085;    /* body / secondary */
    --app-text-subtle: #98a1ad;   /* hints / meta */

    /* Accent (Care CRM blue). Colour otherwise means status only. */
    --app-accent: #2563eb;
    --app-accent-hover: #1d4ed8;
    --app-accent-soft: #eff4ff;

    /* Radii */
    --app-radius-sm: 8px;
    --app-radius: 10px;
    --app-radius-lg: 12px;
    --app-radius-pill: 999px;

    /* Slide-over drawer desktop width — one comfortable form column for every
       shared-suffix drawer (US-18.2). Tune here; capped to the viewport so it
       still goes edge-to-edge on small screens. Widened so the add/edit forms
       (medications especially) have room to breathe without feeling cramped. */
    --app-drawer-width: 52rem;

    /* Shadows — intentionally soft */
    --app-shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
    --app-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06);
    --app-shadow: 0 6px 20px rgba(17, 24, 39, 0.08);  /* drawers / overlays only */

    /* Status (soft tint + readable foreground) — matched to the Care CRM badges */
    --app-success: #15803d;        --app-success-bg: #e7f6ee;
    --app-warning: #b45309;        --app-warning-bg: #fbf1de;
    --app-danger:  #dc2626;        --app-danger-bg:  #fdecec;
    --app-info:    #2563eb;        --app-info-bg:    #eaf1fe;
    --app-neutral: #475467;        --app-neutral-bg: #f2f4f7;

    /* Category accents for pills/avatars that need variety beyond status
       (e.g. care-type badges, deterministic avatar colours). Soft tint + fg. */
    --app-violet:  #6941c6;        --app-violet-bg:  #f4f0fe;
    --app-teal:    #0e7490;        --app-teal-bg:    #e6f6fb;
    --app-pink:    #c11574;        --app-pink-bg:    #fdf0f7;
    --app-amber:   #b45309;        --app-amber-bg:   #fbf1de;

    /* Spacing scale — compose paddings/margins from these, not magic values. */
    --app-space-1: 0.25rem;  --app-space-2: 0.5rem;  --app-space-3: 0.75rem;
    --app-space-4: 1rem;     --app-space-5: 1.5rem;  --app-space-6: 2rem;

    /* Type scale + weights */
    --app-text-xs: 0.72rem;  --app-text-sm: 0.82rem; --app-text-md: 0.9rem;
    --app-text-lg: 1rem;     --app-text-xl: 1.35rem;
    --app-font-regular: 400; --app-font-medium: 550; --app-font-semibold: 650;

    /* Motion */
    --app-ease: cubic-bezier(0.2, 0, 0, 1);
    --app-duration-fast: 120ms; --app-duration: 200ms;

    /* Focus ring — visible keyboard focus everywhere (WCAG 2.4.7) */
    --app-focus-ring: 0 0 0 3px var(--app-accent-soft), 0 0 0 1px var(--app-accent);

    /* Semantic tier — name the MEANING once; themes/tenants remap primitives.
       Reference these (not the primitives) wherever colour carries meaning. */
    --app-occupancy-occupied: var(--app-accent);
    --app-occupancy-reserved: var(--app-violet);
    --app-occupancy-void:     var(--app-border-strong);
    --app-chat-bubble-mine:   var(--app-accent);
    --app-chat-bubble-theirs: var(--app-surface-alt);
    --app-nav-active-bg:      var(--app-accent-soft);
}

/* 2. Radzen theme variable overrides --------------------------------------- */
/* Re-point the Radzen "Default" theme at the tokens above so every native
   Radzen component (grids, buttons, inputs, dialogs, menus) inherits the
   palette automatically.

   IMPORTANT: the Radzen theme stylesheet (default.css) is linked in index.html
   BEFORE this file. Do not reintroduce <RadzenTheme> in a layout — that injects
   the theme AFTER app.css, and Radzen's :root values would win again (orange
   primary #ff6d41, teal secondary #35a0d7, dark sidebar). With the link order
   fixed, these overrides win by source order — no !important needed. */
:root {
    /* Accent (primary) -> our one blue */
    --rz-primary: var(--app-accent);
    --rz-primary-light: var(--app-accent);
    --rz-primary-lighter: var(--app-accent-soft);
    --rz-primary-dark: var(--app-accent-hover);
    --rz-primary-darker: var(--app-accent-hover);
    --rz-on-primary: #ffffff;

    /* Secondary -> neutral (kills the default teal on secondary buttons) */
    --rz-secondary: var(--app-neutral);
    --rz-secondary-light: var(--app-surface-alt);
    --rz-secondary-lighter: var(--app-surface-alt);
    --rz-secondary-dark: #344054;
    --rz-secondary-darker: #1d2939;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-light: var(--app-text);

    /* Text */
    --rz-text-color: var(--app-text);
    --rz-text-secondary-color: var(--app-text-muted);
    --rz-text-disabled-color: var(--app-text-subtle);
    --rz-link-color: var(--app-accent);

    /* Neutral ramp -> lighten the greys Radzen uses for borders/dividers so
       nothing reads as a "hard dark grey" line. */
    --rz-base-200: #eef0f2;
    --rz-base-300: var(--app-border);

    /* Surfaces */
    --rz-body-background-color: var(--app-bg);
    --rz-base-background-color: var(--app-surface);
    --rz-panel-background-color: var(--app-surface);
    --rz-card-background-color: var(--app-surface);
    --rz-input-background-color: var(--app-surface);

    --rz-header-background-color: #ffffff;
    --rz-sidebar-background-color: #ffffff;
    --rz-sidebar-color: var(--app-text);

    /* RadzenMenu items (top nav) -> quiet, no bold hover block */
    --rz-menu-item-color: var(--app-text-muted);
    --rz-menu-item-icon-color: var(--app-text-subtle);
    --rz-menu-item-hover-color: var(--app-text);
    --rz-menu-item-hover-background-color: var(--app-surface-alt);
    --rz-menu-item-selected-color: var(--app-accent-hover);
    --rz-menu-item-selected-background-color: var(--app-accent-soft);

    /* RadzenPanelMenu items (LEFT SIDEBAR, incl. submenus). Radzen's Default
       theme styles these for a DARK sidebar (base-800/900 backgrounds, white
       text, a dark base-900 divider) — that is the odd dark submenu look.
       Re-point them all at the light palette. */
    --rz-panel-menu-item-color: var(--app-text-muted);
    --rz-panel-menu-item-icon-color: var(--app-text-subtle);
    --rz-panel-menu-item-background-color: transparent;
    --rz-panel-menu-item-hover-color: var(--app-text);
    --rz-panel-menu-item-hover-background-color: var(--app-surface-alt);
    --rz-panel-menu-item-active-color: var(--app-accent-hover);
    --rz-panel-menu-item-active-background-color: var(--app-accent-soft);
    --rz-panel-menu-item-active-indicator: var(--app-accent);
    --rz-panel-menu-item-border: none;

    /* SUBMENU (2nd-level) items use a SEPARATE family that defaults to near-black
       (base-900) backgrounds — this was the odd dark submenu. Make them light;
       indentation alone conveys the hierarchy. */
    --rz-panel-menu-item-2nd-level-color: var(--app-text-muted);
    --rz-panel-menu-item-2nd-level-background-color: transparent;
    --rz-panel-menu-item-2nd-level-hover-color: var(--app-text);
    --rz-panel-menu-item-2nd-level-hover-background-color: var(--app-surface-alt);
    --rz-panel-menu-item-2nd-level-active-color: var(--app-accent-hover);
    --rz-panel-menu-item-2nd-level-active-background-color: var(--app-accent-soft);

    /* Borders + radius */
    --rz-border: var(--app-border);
    --rz-border-color: var(--app-border);
    --rz-border-radius: var(--app-radius);

    /* Shadows */
    --rz-shadow: var(--app-shadow-sm);
    --rz-panel-shadow: var(--app-shadow-sm);
    --rz-card-shadow: var(--app-shadow-sm);
    --rz-dialog-shadow: var(--app-shadow);

    --rz-grid-header-background-color: var(--app-surface-alt);
    --rz-grid-stripe-background-color: var(--app-surface-alt);
}

/* 3. Base / typography ------------------------------------------------------ */
html, body {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--app-bg);
    color: var(--app-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--app-text);
    font-weight: 650;
    letter-spacing: -0.01em;
}

a, .btn-link {
    color: var(--app-accent);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: var(--app-accent-hover);
    text-decoration: underline;
}

h1:focus { outline: none; }

code { color: #b5318a; }

.content { padding-top: 1.1rem; }

/* 4. Layout: header, sidebar, panel menu (white) --------------------------- */
.rz-header,
.rz-sidebar {
    background-color: var(--app-surface) !important;
    background-image: none !important;
    color: var(--app-text) !important;
}

.rz-header {
    border-bottom: 1px solid var(--app-border) !important;
    box-shadow: none !important;
}

.rz-sidebar {
    border-right: 1px solid var(--app-border) !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.rz-panel-menu,
.rz-navigation-menu {
    background: transparent !important;
    border: none !important;
}

/* Left nav items read as quiet list rows — a full-width subtle highlight on
   hover, never a floating button. */
.rz-panel-menu .rz-navigation-item-link {
    color: var(--app-text-muted) !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.rz-panel-menu .rz-navigation-item-link:hover {
    background-color: var(--app-surface-alt) !important;
    color: var(--app-text) !important;
    box-shadow: none !important;
}

.rz-panel-menu .rz-navigation-item-link.rz-navigation-item-link-active,
.rz-panel-menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link,
.rz-panel-menu li.rz-navigation-item-active > .rz-navigation-item-wrapper > .rz-navigation-item-link {
    background-color: var(--app-accent-soft) !important;
    color: var(--app-accent-hover) !important;
    box-shadow: inset 3px 0 0 0 var(--app-accent) !important;
}

/* 5. Radzen component refinements ------------------------------------------ */
.rz-button {
    border-radius: var(--app-radius-sm);
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.rz-button.rz-secondary,
.rz-button.rz-light,
.rz-button.rz-base {
    background-color: var(--app-surface) !important;
    border: 1px solid var(--app-border-strong) !important;
    color: var(--app-text) !important;
}

/* In-content section nav (Details / Actions / Documents / Notes and the
   record/settings rails) -> quiet tab list, not chunky filled buttons.
   The active item is the only Radzen "primary" button inside the rail; give it
   a soft accent wash instead of a bold fill. */
.incident-section-nav .rz-button,
.person-section-nav .rz-button,
.record-nav .rz-button,
.settings-nav .rz-button,
.cp-section-nav .rz-button,
.ra-section-nav .rz-button,
.ms-nav .rz-button,
.incident-section-button,
.person-section-button,
.record-nav-button,
.settings-nav-button,
.cp-section-button,
.ra-section-button,
.ms-nav-button {
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    color: var(--app-text-muted) !important;
    justify-content: flex-start !important;
    font-weight: 550 !important;
}

.incident-section-nav .rz-button:hover,
.person-section-nav .rz-button:hover,
.record-nav .rz-button:hover,
.settings-nav .rz-button:hover,
.cp-section-nav .rz-button:hover,
.ra-section-nav .rz-button:hover,
.ms-nav .rz-button:hover,
.incident-section-button:hover,
.person-section-button:hover,
.record-nav-button:hover,
.settings-nav-button:hover,
.cp-section-button:hover,
.ra-section-button:hover,
.ms-nav-button:hover {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}

.incident-section-nav .rz-button.rz-primary,
.person-section-nav .rz-button.rz-primary,
.record-nav .rz-button.rz-primary,
.settings-nav .rz-button.rz-primary,
.cp-section-nav .rz-button.rz-primary,
.ra-section-nav .rz-button.rz-primary,
.ms-nav .rz-button.rz-primary,
.incident-section-button.rz-primary,
.person-section-button.rz-primary,
.record-nav-button.rz-primary,
.settings-nav-button.rz-primary,
.cp-section-button.rz-primary,
.ra-section-button.rz-primary,
.ms-nav-button.rz-primary {
    background: var(--app-accent-soft) !important;
    color: var(--app-accent-hover) !important;
    border-color: transparent !important;
    font-weight: 650 !important;
}

.rz-card,
.rz-panel {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-xs);
}

.rz-datagrid,
.rz-data-grid {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: none;
    overflow: hidden;
}

.rz-grid-table thead th,
.rz-datatable-thead > tr > th {
    background-color: var(--app-surface-alt);
    color: var(--app-text-subtle);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--app-border);
}

/* Every grid reads as a scannable list: a quiet hover highlight on each data
   row (matches the Care CRM People grid). Presentation only — the flagship
   `.app-grid-clean` opt-in additionally drops the vertical cell borders. */
.rz-grid-table tbody > tr:hover > td,
.rz-datatable-data > tr:hover > td {
    background-color: var(--app-surface-alt);
}

.rz-dialog,
.rz-dialog-content {
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow);
}

.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-datepicker,
.rz-numeric,
.rz-spinner {
    border-radius: var(--app-radius-sm);
}

/* 6. Normalization layer ---------------------------------------------------- */
/* Flattens the legacy per-page look (gradient heroes, heavy shadows, oversized
   radii, colour-tinted headings) into the minimalist system. Keyed on the
   exact feature class names so nothing over-matches. When adding a new feature,
   reuse these suffixes (-hero, -panel, -card, -drawer*, -overview-group, etc.)
   and it inherits the look for free. */

/* 6a. Heroes -> flat white headers */
.audit-hero, .dashboard-hero, .incident-hero, .people-hero,
.person-hero, .settings-hero, .record-hero, .screen-hero, .ms-hero {
    background: var(--app-surface) !important;
    background-image: none !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius-lg) !important;
    box-shadow: none !important;
}

/* 6b. Panels -> white cards with hairline border + soft shadow */
.audit-panel, .audit-grid-panel, .dashboard-panel, .incident-panel,
.people-panel, .person-panel, .settings-panel, .record-panel, .screen-panel, .ms-panel {
    background: var(--app-surface) !important;
    background-image: none !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius-lg) !important;
    box-shadow: var(--app-shadow-xs) !important;
}

/* 6c. Stat / summary / KPI tiles -> subtle inset */
.dashboard-stat-card, .dashboard-list-card, .dashboard-kpi-item,
.people-summary-card, .summary-card, .person-snapshot-item {
    background: var(--app-surface) !important;
    background-image: none !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: none !important;
}

/* 6d. Nav rails / empty states -> subtle alt surface.
   (Overview groups are intentionally NOT here — they're flattened in 6d-ii so
   detail pages never show nested grey cards.) */
.incident-section-nav, .person-section-nav, .record-nav, .settings-nav, .ms-nav,
.cp-section-nav, .ra-section-nav,
.audit-empty-state, .fact-sheet-empty {
    background: var(--app-surface-alt) !important;
    background-image: none !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: none !important;
}

/* 6d-ii. Detail overview groups (person + incident) read as flat sections — no
   nested grey cards, no boxy borders anywhere. Applies to every usage: the
   person Overview/Preferences column sections, the Hospital Fact Sheet grid
   tiles, and the Incident overview grid tiles. */
.person-overview-group, .incident-overview-group {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* Full-width column sections (person Overview + Preferences forms) get a single
   hairline divider between them instead of a fill. Grid-tile usages (fact sheet,
   incident overview) stay flat and are separated by their own grid gap. */
.person-overview-form { gap: 1.75rem !important; }
.person-overview-form > .person-overview-group {
    border-bottom: 1px solid var(--app-border) !important;
    padding: 0 0 1.75rem !important;
}
.person-overview-form > .person-overview-group:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* 6d-iii. Home dashboard tabs — replace Radzen's floating boxed tabs with flat
   underline tabs that sit on a single full-width hairline, and strip the boxed
   panel chrome so the content aligns with the page header and stat row. */
.dashboard-tabs, .dashboard-tabs .rz-tabview,
.dashboard-tabs .rz-tabview-panels, .dashboard-tabs .rz-tabview-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.dashboard-tabs .rz-tabview-panels, .dashboard-tabs .rz-tabview-panel {
    padding: 0 !important;
}
.dashboard-tab-body { padding: 0 !important; }

/* Tab strip anchored by a full-width underline */
.dashboard-tabs .rz-tabview-nav {
    justify-content: flex-start !important;
    gap: 0.25rem;
    border-bottom: 1px solid var(--app-border) !important;
    margin-bottom: 1.25rem !important;
}
/* Individual tabs: flat, no box, no rounded top, no top border */
.dashboard-tabs .rz-tabview-nav li {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
.dashboard-tabs .rz-tabview-nav li a {
    color: var(--app-text-muted) !important;
    font-weight: 600 !important;
    padding: 0.65rem 0.95rem !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;   /* overlap the nav hairline */
    transition: color 0.15s ease, border-color 0.15s ease;
}
.dashboard-tabs .rz-tabview-nav li:hover:not(.rz-tabview-selected) a {
    color: var(--app-text) !important;
}
/* Active tab: accent text + accent underline, no fill */
.dashboard-tabs .rz-tabview-nav li.rz-tabview-selected {
    background: transparent !important;
}
.dashboard-tabs .rz-tabview-nav li.rz-tabview-selected a {
    color: var(--app-accent) !important;
    border-bottom-color: var(--app-accent) !important;
}

/* 6d-iv. Dashboard content rows top-align their columns so a short/empty panel
   (e.g. "Needs attention today" when nothing is due) sizes to its content
   instead of stretching to match the taller column beside it. */
.dashboard-shell .rz-row { align-items: flex-start !important; }

/* 6e. Slide-over drawers -> white with one soft shadow */
.incident-drawer, .people-drawer, .person-drawer, .settings-drawer,
.record-drawer, .screen-drawer, .drawer-shell, .ms-drawer {
    background: var(--app-surface) !important;
    background-image: none !important;
    border-left: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow) !important;
}

/* 6e-i. One central desktop width for every shared-suffix drawer (US-18.2).
   Applied here so individual pages no longer set their own width; capped to
   100vw so the ≤640px full-width rule in §10a still wins on small screens. */
.incident-drawer, .people-drawer, .person-drawer, .settings-drawer,
.record-drawer, .screen-drawer, .drawer-shell, .ms-drawer, .help-drawer {
    width: min(var(--app-drawer-width), 100vw) !important;
}

/* 6f. Drawer headers -> flat */
.incident-drawer-header, .people-drawer-header, .person-drawer-header,
.settings-drawer-header, .record-drawer-header, .screen-drawer-header, .ms-drawer-header {
    background: var(--app-surface) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--app-border) !important;
}

/* 6g. Drawer backdrops -> consistent dim */
.incident-drawer-backdrop, .people-drawer-backdrop, .person-drawer-backdrop,
.settings-drawer-backdrop, .record-drawer-backdrop, .screen-drawer-backdrop,
.help-drawer-backdrop, .ms-drawer-backdrop {
    background: rgba(17, 24, 39, 0.32) !important;
    backdrop-filter: none !important;
}

/* 6h. Tinted headings / values -> neutral near-black */
.audit-title, .dashboard-title, .settings-title, .record-title, .screen-title,
.incident-hero-title, .people-hero-title, .person-hero-title,
.dashboard-panel-title, .dashboard-stat-value,
.incident-overview-group-title, .person-overview-group-title,
.people-name, .summary-value, .people-summary-value, .person-snapshot-value,
.incident-drawer-title, .people-drawer-title, .person-drawer-title,
.settings-drawer-title, .record-drawer-title, .screen-drawer-title,
.ms-title, .ms-drawer-title,
.primary-text {
    color: var(--app-text) !important;
}

/* 6i. Secondary / muted copy -> single muted tone */
.audit-copy, .audit-subtle, .dashboard-copy, .dashboard-subtle,
.dashboard-stat-label, .incident-hero-copy, .incident-subtle,
.people-hero-copy, .people-subtle, .person-hero-copy, .person-subtle,
.settings-copy, .settings-subtle, .record-copy, .record-subtle,
.screen-copy, .muted-text, .summary-label, .people-summary-label,
.incident-drawer-copy, .people-drawer-copy, .person-drawer-copy,
.incident-overview-label, .person-overview-label,
.incident-overview-group-copy, .person-overview-group-copy,
.ms-copy, .ms-drawer-copy,
.audit-empty-hint {
    color: var(--app-text-muted) !important;
}

/* 6j. Breadcrumb links -> accent */
.incident-breadcrumb-link, .person-breadcrumb-link,
.record-breadcrumb-link, .settings-breadcrumb-link {
    color: var(--app-accent) !important;
    font-weight: 600;
}

/* 6k. Chips -> uniform soft neutral */
.incident-chip, .person-chip, .record-chip, .settings-chip {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text-muted) !important;
    border-radius: var(--app-radius-pill) !important;
}

/* 7. Reusable utilities + status pills ------------------------------------- */
/* Prefer these on new pages instead of bespoke per-feature CSS. */
.app-page { display: flex; flex-direction: column; gap: 1rem; }

.app-surface {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-xs);
}

.app-page-header {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    padding: 1.25rem 1.5rem;
}

.app-title { margin: 0; font-size: 1.5rem; font-weight: 650; color: var(--app-text); }
.app-subtitle { margin: 0.25rem 0 0; color: var(--app-text-muted); line-height: 1.5; }
.app-muted { color: var(--app-text-muted); }
.app-subtle { color: var(--app-text-subtle); }

.app-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: var(--app-radius-pill);
    padding: 0.2rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--app-neutral-bg);
    color: var(--app-neutral);
}

/* Grid toolbar — the direct, right-aligned primary action(s) above a data grid
   (US-18.5, replaces the nested "Actions" dropdown). Same placement on every
   grid so the pattern is learnable once; wraps and stays touch-sized on mobile. */
.app-grid-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.app-pill-success { background: var(--app-success-bg); color: var(--app-success); }
.app-pill-warning { background: var(--app-warning-bg); color: var(--app-warning); }
.app-pill-danger  { background: var(--app-danger-bg);  color: var(--app-danger); }
.app-pill-info    { background: var(--app-info-bg);    color: var(--app-info); }

/* Human-readable audit change view (shared <AuditChanges /> component). */
.audit-changes { display: flex; flex-direction: column; gap: 0.3rem; }

.audit-changes-empty { color: var(--app-text-subtle); font-size: 0.85rem; }

.audit-change-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    font-size: 0.85rem;
    line-height: 1.45;
}

.audit-change-label { font-weight: 600; color: var(--app-text); }
.audit-change-label::after { content: ":"; }

.audit-change-values {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem;
    color: var(--app-text-muted);
}

.audit-change-old { color: var(--app-text-subtle); text-decoration: line-through; text-decoration-thickness: 1px; }
.audit-change-arrow { color: var(--app-text-subtle); }
.audit-change-new { color: var(--app-text); font-weight: 500; }

.audit-change-toggle { padding: 0 !important; min-width: 0 !important; font-size: 0.78rem !important; }

.audit-changes-raw { margin-top: 0.3rem; }

.audit-change-rawblock {
    margin: 0.35rem 0 0;
    padding: 0.6rem 0.7rem;
    background: var(--app-surface-alt);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    max-height: 16rem;
    overflow: auto;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: var(--app-text-muted);
}

/* Medication & turning schedule worklist (US-18.1, /medicationSchedule).
   A scannable round: outstanding work first, recorded work muted/struck. */
.med-sched-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
}
.med-sched-summary-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.med-sched-resident-card .med-sched-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.med-sched-group { margin-bottom: 0.85rem; }
.med-sched-group:last-child { margin-bottom: 0; }

.med-sched-group-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--app-text-subtle);
}
.med-sched-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    border-radius: var(--app-radius-pill);
    background: var(--app-surface-alt);
    color: var(--app-text-muted);
    font-size: 0.72rem;
}

.med-sched-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
}
.med-sched-row + .med-sched-row { margin-top: 0.4rem; }

.med-sched-row-main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.med-sched-row-title { color: var(--app-text); font-weight: 500; }
.med-sched-row-meta { color: var(--app-text-muted); font-size: 0.8rem; }

.med-sched-row-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

/* Recorded rows recede: muted inset + a struck title = "done, no action". */
.med-sched-row-done { background: var(--app-surface-alt); border-style: dashed; }
.med-sched-row-done .med-sched-row-title {
    color: var(--app-text-subtle);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.med-sched-alldone {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
    color: var(--app-success);
    font-weight: 500;
}
.med-sched-alldone-icon { font-size: 1.2rem; color: var(--app-success); }

.med-sched-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
}
.med-sched-empty-icon { font-size: 2.5rem; color: var(--app-success); }

/* 8. Sidebar icon rail (collapsed state) ----------------------------------- */
/* The layout is a CSS grid (`grid-template-columns: auto 1fr`) with the sidebar
   as a static grid item, so the sidebar's width drives the body offset. Radzen
   collapses the sidebar to `width: 0` (fully hidden). We instead keep a narrow
   64px rail showing each item's icon; the grid reflows the body for free.
   Higher specificity (`.rz-sidebar.rz-sidebar-collapsed`) beats Radzen's
   later-loaded `.rz-sidebar-collapsed`. */
.rz-sidebar.rz-sidebar-collapsed {
    width: 64px !important;
    opacity: 1 !important;
    overflow: visible !important;
}

/* Hide labels + the expand chevron, centre the icons */
.rz-sidebar-collapsed .rz-navigation-item-text,
.rz-sidebar-collapsed .rz-navigation-item-icon-children {
    display: none !important;
}

.rz-sidebar-collapsed .rz-panel-menu .rz-navigation-item-link {
    justify-content: center !important;
    padding-inline: 0 !important;
}

.rz-sidebar-collapsed .rz-navigation-item-icon {
    margin: 0 !important;
}

/* Submenu items stay visible in the rail as their own centred icons (the parent
   groups are forced open via Expanded="true" in MainLayout so the children are
   always rendered). Reset the inline indentation/negative-margin the expanded
   menu uses so child icons line up under the top-level ones. */
.rz-sidebar-collapsed .rz-panel-menu .rz-navigation-menu .rz-navigation-item-link {
    padding-inline: 0 !important;
    justify-content: center !important;
}

.rz-sidebar-collapsed .rz-panel-menu .rz-navigation-menu .rz-navigation-item-icon {
    margin: 0 !important;
    width: var(--rz-icon-size) !important;
    height: var(--rz-icon-size) !important;
    font-size: var(--rz-icon-size) !important;
}

/* 9. Misc ------------------------------------------------------------------- */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.2rem var(--app-accent);
}

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--app-success); }
.invalid { outline: 1px solid var(--app-danger); }
.validation-message { color: var(--app-danger); }

#blazor-error-ui {
    background: #fff;
    border-top: 1px solid var(--app-border);
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(17, 24, 39, 0.08);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b42318;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
    border-radius: var(--app-radius-sm);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--app-border);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--app-accent);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: var(--app-text-muted);
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* Not-authorised */
.centered-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.not-authorized-display { width: 30%; }

/* Quiet, thin scrollbars to match the minimalist surfaces */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd2da transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: #cbd2da;
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}
*::-webkit-scrollbar-track { background: transparent; }

/* ===========================================================================
   10. Responsive / mobile point-of-care overrides
   ---------------------------------------------------------------------------
   These rules make the high-frequency bedside recording flows (eMAR, vital
   signs, food/fluid, repositioning, continence, notes) usable on phones and
   tablets at ≤ 640px without regressing the desktop experience.
   Touch targets are ≥ 44px; layouts collapse to single columns; grids scroll
   horizontally rather than overflowing; drawers go full-width on mobile.
   All overrides use existing design tokens — no hardcoded hex values.
   =========================================================================== */

/* 10a. Baseline touch ergonomics — all viewports ≤ 640px ------------------- */
@media (max-width: 640px) {

    /* Touch-size all interactive controls */
    .rz-button,
    button,
    select,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Inputs fill the available width */
    .rz-textbox,
    .rz-textarea,
    .rz-dropdown,
    .rz-datepicker,
    .rz-numeric {
        width: 100% !important;
        font-size: 1rem !important; /* prevent iOS zoom on focus */
    }

    /* Page body loses the desktop padding so the full width is usable */
    .rz-body,
    .rz-content,
    .rz-body > .rz-content {
        padding: 0.5rem !important;
    }

    /* The sidebar hides on mobile — only the header "hamburger" toggle is needed */
    .rz-sidebar {
        position: fixed !important;
        z-index: 900 !important;
        height: 100vh !important;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    .rz-sidebar-expanded.rz-sidebar {
        transform: translateX(0);
    }

    /* The header stays full-width and slightly taller for thumb reach */
    .rz-header {
        padding: 0.5rem 0.75rem !important;
        min-height: 56px !important;
    }

    /* Drawers / slide-overs go full-width */
    .screen-drawer,
    .person-drawer,
    .incident-drawer,
    .people-drawer,
    .settings-drawer,
    .record-drawer,
    .ms-drawer,
    .help-drawer,
    .drawer-shell {
        width: 100vw !important;
        border-radius: 0 !important;
    }

    /* Radzen dialogs fill the viewport */
    .rz-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .rz-dialog-content {
        border-radius: 0 !important;
        padding: 1rem !important;
    }

    /* Data grids become horizontally scrollable without breaking the page */
    .rz-datagrid,
    .rz-data-grid {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Page heroes: reduce padding */
    .screen-hero,
    .people-hero,
    .person-hero,
    .app-page-header {
        padding: 1rem !important;
    }

    /* Two-column summary card rows → single column */
    .rz-row,
    .rz-col,
    [class*="rz-col-"] {
        /* Radzen columns use inline styles so we target the layout container.
           We use a soft override — flex wrap handles it naturally. */
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* KPI/summary cards → stacked */
    .summary-card,
    .occ-kpi-card,
    .compliance-stat-card {
        margin-bottom: 0.5rem;
    }

    /* In-page section navs → horizontal scrolling pill bar (every screen, so they behave alike) */
    .person-section-nav,
    .incident-section-nav,
    .record-nav,
    .settings-nav,
    .ms-nav,
    .cp-section-nav,
    .ra-section-nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 0.25rem !important;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
    }
    .person-section-nav .rz-button,
    .incident-section-nav .rz-button,
    .record-nav .rz-button,
    .settings-nav .rz-button,
    .ms-nav .rz-button,
    .cp-section-nav .rz-button,
    .ra-section-nav .rz-button {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Quick-add panel: the trigger lives on the right of the header, so keep the
       panel right-anchored on mobile too — left-anchoring pushed it off-screen
       (US-18.8). Cap its width so it never exceeds the viewport. */
    .quick-add-panel {
        right: 0 !important;
        left: auto !important;
        max-width: calc(100vw - 1.5rem) !important;
    }

    /* Global search full-width on mobile */
    .global-search-wrapper {
        flex: 1;
    }
    .global-search-wrapper .rz-textbox {
        width: 100% !important;
    }
    .global-search-panel {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
    }
}

/* 10a-ii. 641–768px: Radzen's own ≤768px rule forces .rz-body to 100vw (it
   assumes an off-canvas sidebar), so the sidebar must overlay here too or it
   pushes ~250px of every page off-screen. */
@media (min-width: 641px) and (max-width: 768px) {
    .rz-sidebar {
        position: fixed !important;
        z-index: 900 !important;
        height: 100vh !important;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    .rz-sidebar-expanded.rz-sidebar {
        transform: translateX(0);
        box-shadow: var(--app-shadow-sm);
    }
}

/* 10b. Medication schedule / eMAR round (tablet + phone) -------------------- */
@media (max-width: 768px) {
    /* Resident cards in the medication schedule / handover → full width */
    .med-sched-resident-card,
    .handover-resident-card {
        margin-bottom: 0.75rem;
    }

    /* Worklist rows stack so the status + a full-width touch Record button sit
       below the medication/turn label — no horizontal overflow at the bedside. */
    .med-sched-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .med-sched-row-actions {
        justify-content: space-between;
    }
    .med-sched-record-btn {
        flex: 1;
    }

    /* eMAR history grid → hide secondary columns on narrow screens */
    .mar-col-scheduled,
    .mar-col-witness {
        display: none !important;
    }

    /* Record-turn / record-admin dialog: stack all form rows */
    .record-turn-form .rz-row,
    .record-admin-form .rz-row {
        flex-wrap: wrap !important;
    }
}

/* 10c. Bedside chart forms (food/fluid, vitals, continence, repositioning) -- */
@media (max-width: 768px) {

    /* Floating "record" action buttons → bottom-of-screen sticky strip on phone */
    .bedside-action-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.75rem 1rem;
        background: var(--app-surface);
        border-top: 1px solid var(--app-border);
        box-shadow: 0 -2px 8px rgba(17, 24, 39, 0.08);
        z-index: 500;
        display: flex;
        gap: 0.5rem;
    }
    .bedside-action-bar .rz-button {
        flex: 1;
    }

    /* Today-summary cards in chart panels → horizontal scroll instead of wrap */
    .chart-today-cards {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }
    .chart-today-card {
        flex: 0 0 auto;
        min-width: 140px;
    }

    /* Make the chart add-form full-width */
    .chart-add-form {
        padding: 1rem !important;
    }

    /* Vital signs NEWS2 badge: ensure it wraps on narrow screens */
    .news2-badge {
        white-space: normal !important;
        word-break: break-word;
    }
}

/* 10d. Print handover — mobile-friendly print sizing ----------------------- */
@media print {
    .rz-sidebar,
    .rz-header,
    .bedside-action-bar {
        display: none !important;
    }
    .rz-body,
    .rz-content {
        padding: 0 !important;
        margin: 0 !important;
    }
    .handover-card {
        page-break-inside: avoid;
    }
}

/* ===========================================================================
   11. Care CRM design language — shared primitives
   ---------------------------------------------------------------------------
   Reusable, token-driven building blocks that give every grid, detail page and
   dashboard the same look & feel as the Care CRM reference design: branded
   sidebar chrome, initials avatars, segmented pill controls, clean list-row
   grids, dense stat rows, and colour-coded attention feeds. Prefer these on new
   pages so the whole portal converges without bespoke CSS.
   =========================================================================== */

/* 11a. Initials avatar ----------------------------------------------------- */
.app-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--app-radius-pill);
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #fff;
    background: var(--app-accent);
    text-transform: uppercase;
    user-select: none;
}
.app-avatar-sm { width: 2rem;   height: 2rem;   font-size: 0.72rem; }
.app-avatar-lg { width: 3.5rem; height: 3.5rem; font-size: 1.15rem; }

/* Deterministic colour palette — pick by a stable hash of the person's name so
   the same person always gets the same colour. */
.app-avatar-c0 { background: var(--app-accent); }
.app-avatar-c1 { background: var(--app-violet); }
.app-avatar-c2 { background: var(--app-teal); }
.app-avatar-c3 { background: var(--app-success); }
.app-avatar-c4 { background: var(--app-pink); }
.app-avatar-c5 { background: var(--app-amber); }

/* 11b. Segmented pill control (Residents / Staff / Visitors, tab-like nav) --- */
.app-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--app-surface-alt);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-pill);
}
.app-segmented .rz-button {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--app-text-muted) !important;
    border-radius: var(--app-radius-pill) !important;
    font-weight: 600;
    min-height: 0;
    padding: 0.4rem 1.1rem !important;
}
.app-segmented .rz-button:hover {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}
.app-segmented .rz-button.rz-primary,
.app-segmented .rz-button.rz-primary:hover {
    background: var(--app-accent) !important;
    color: #fff !important;
}

/* 11c. Clean list-row grid — makes a RadzenDataGrid read as a scannable list
   (hairline row dividers, hover highlight, no vertical cell borders). Opt in by
   adding `app-grid-clean` to the RadzenDataGrid class. */
.app-grid-clean.rz-datagrid,
.app-grid-clean .rz-datatable {
    border: none !important;
    box-shadow: none !important;
}
.app-grid-clean .rz-grid-table thead th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--app-text-subtle);
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}
.app-grid-clean .rz-grid-table tbody td {
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--app-border) !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}
.app-grid-clean .rz-grid-table tbody tr:last-child td { border-bottom: none !important; }
.app-grid-clean .rz-grid-table tbody tr:hover td {
    background: var(--app-surface-alt) !important;
}
/* Rows that navigate on click get the pointer affordance. */
.app-grid-rowlink .rz-grid-table tbody tr { cursor: pointer; }

/* A generic clickable list row (used outside data grids — feeds, mini lists). */
.app-list-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid var(--app-border);
}
.app-list-row:last-child { border-bottom: none; }
.app-list-row-link { cursor: pointer; border-radius: var(--app-radius-sm); }
.app-list-row-link:hover { background: var(--app-surface-alt); }
.app-list-row-chevron { margin-left: auto; color: var(--app-text-subtle); }

/* 11d. Dense stat row (dashboard + list-page KPIs) ------------------------- */
.app-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.85rem;
}
.app-stat-tile {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.app-stat-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--app-text-subtle);
}
.app-stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1.05; color: var(--app-text); }
.app-stat-value-sm { font-size: 1.4rem; }
.app-stat-meta { font-size: 0.82rem; color: var(--app-text-muted); }

/* 11e. Uppercase field label / value (detail pages) ------------------------ */
.app-field-label,
.person-overview-label,
.person-snapshot-label {
    display: block;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--app-text-subtle);
    margin-bottom: 0.2rem;
}
.app-field-value { color: var(--app-text); line-height: 1.45; }

/* 11f. Colour-coded attention feed ----------------------------------------- */
.app-feed { display: flex; flex-direction: column; }
.app-feed-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid var(--app-border);
}
.app-feed-item:last-child { border-bottom: none; }
.app-feed-item-link { cursor: pointer; border-radius: var(--app-radius-sm); }
.app-feed-item-link:hover { background: var(--app-surface-alt); }
.app-feed-tag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-width: 6.5rem;
    justify-content: center;
    border-radius: var(--app-radius-pill);
    padding: 0.28rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
}
.app-feed-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.app-feed-title { color: var(--app-text); font-weight: 550; }
.app-feed-meta { color: var(--app-text-muted); font-size: 0.82rem; }
.app-feed-trailing { margin-left: auto; flex: 0 0 auto; color: var(--app-text-muted); font-size: 0.85rem; white-space: nowrap; }

/* 11g. Occupancy segmented bar --------------------------------------------- */
.app-occupancy-bar {
    display: flex;
    height: 0.6rem;
    border-radius: var(--app-radius-pill);
    overflow: hidden;
    background: var(--app-surface-alt);
}
.app-occupancy-seg { height: 100%; }
.app-occupancy-seg-occupied { background: var(--app-occupancy-occupied); }
.app-occupancy-seg-reserved { background: var(--app-occupancy-reserved); }
.app-occupancy-seg-void { background: var(--app-occupancy-void); }
.app-legend { display: flex; flex-direction: column; gap: 0.5rem; }
.app-legend-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; color: var(--app-text-muted); }
.app-legend-dot { width: 0.7rem; height: 0.7rem; border-radius: var(--app-radius-pill); flex: 0 0 auto; }
.app-legend-value { margin-left: auto; font-weight: 650; color: var(--app-text); }

/* 11h. Sidebar brand block + user footer ----------------------------------- */
/* Make the sidebar a column so the brand pins to the top, the menu scrolls in
   the middle, and the user card sits at the bottom. */
.rz-sidebar { display: flex !important; flex-direction: column !important; }
.rz-sidebar .rz-panel-menu { flex: 1 1 auto; overflow-y: auto; }

.app-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1rem 0.9rem;
    border-bottom: 1px solid var(--app-border);
}
.app-sidebar-brand-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--app-radius);
    background: var(--app-accent);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
}
.app-sidebar-brand-logo {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--app-radius);
    object-fit: contain;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
}
.app-sidebar-brand-text { display: flex; flex-direction: column; min-width: 0; }
.app-sidebar-brand-name { font-weight: 650; color: var(--app-text); line-height: 1.2; }
.app-sidebar-brand-sub { font-size: 0.78rem; color: var(--app-text-muted); }

.app-sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: auto;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--app-border);
}
.app-sidebar-user-text { display: flex; flex-direction: column; min-width: 0; }
.app-sidebar-user-name { font-weight: 600; color: var(--app-text); line-height: 1.2; font-size: 0.9rem; }
.app-sidebar-user-role { font-size: 0.78rem; color: var(--app-text-muted); }

/* Collapsed 64px rail: show only the mark / avatar, hide the text. */
.rz-sidebar-collapsed .app-sidebar-brand,
.rz-sidebar-collapsed .app-sidebar-user { justify-content: center; padding-inline: 0; }
.rz-sidebar-collapsed .app-sidebar-brand-text,
.rz-sidebar-collapsed .app-sidebar-user-text { display: none; }

/* 11i. Page header action row (title + right-aligned actions) --------------- */
.app-page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.app-page-header-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

@media (max-width: 640px) {
    .app-feed-tag { min-width: 0; }
    .app-feed-trailing { display: none; }
    .app-stat-value { font-size: 1.6rem; }
}

/* ===========================================================================
   12. Layout utilities, feedback & shared states (design review, Jul 2026)
   =========================================================================== */

/* 12a. Micro-utilities — replace the most repeated inline Style= values.
   An inline style is acceptable only when the value is data-driven. */
.app-w-full { width: 100%; }
.app-form-col { max-width: 360px; display: flex; flex-direction: column; gap: var(--app-space-2); }
.app-mt-2 { margin-top: var(--app-space-2); }
.app-mt-3 { margin-top: var(--app-space-3); }

/* 12a-ii. Add-drawer form sections (US-18.7). Groups the fields inside an
   AddPanel/dialog into a small number of labelled blocks with consistent
   spacing. Token-driven; reused across the drawer family, never per page. */
.drawer-form-intro { display: flex; flex-direction: column; gap: 0.15rem; }
.drawer-form-subtitle { color: var(--app-text-muted); font-size: 0.9rem; line-height: 1.4; }
.drawer-form-section { display: flex; flex-direction: column; gap: 0.75rem; }
.drawer-form-section + .drawer-form-section { padding-top: 1.1rem; border-top: 1px solid var(--app-border); }
.drawer-form-section-title { color: var(--app-text); font-weight: 650; }

/* 12b. Visible keyboard focus (WCAG 2.4.7). :focus-visible keeps mouse use quiet. */
:where(a, button, [role="button"], .rz-button, input, select, textarea):focus-visible {
    outline: none;
    box-shadow: var(--app-focus-ring);
}

/* 12c. Skeleton loading placeholder. The shimmer gradient is the sanctioned
   exception to "no gradients" — it is feedback, not decoration. */
.app-skeleton {
    background: linear-gradient(90deg, var(--app-surface-alt) 25%, var(--app-border) 50%, var(--app-surface-alt) 75%);
    background-size: 200% 100%;
    animation: app-skeleton-shimmer 1.4s var(--app-ease) infinite;
    border-radius: var(--app-radius-sm);
    min-height: 0.9rem;
    display: inline-block;
    color: transparent;
    user-select: none;
}
@keyframes app-skeleton-shimmer { to { background-position: -200% 0; } }

/* 12d. Shared empty state (use the AppEmptyState component). */
.app-empty-state {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    padding: var(--app-space-6) var(--app-space-4); text-align: center;
    background: var(--app-surface-alt); border-radius: var(--app-radius);
    border: 1px dashed var(--app-border-strong);
}
.app-empty-icon  { font-size: 2rem; color: var(--app-text-subtle); }
.app-empty-title { font-weight: var(--app-font-semibold); color: var(--app-text); }
.app-empty-copy  { font-size: var(--app-text-md); color: var(--app-text-muted); max-width: 34ch; }

/* 12e. Breadcrumb primitive for detail pages. */
.app-breadcrumb {
    display: flex; gap: 0.4rem; align-items: center;
    font-size: var(--app-text-sm); color: var(--app-text-subtle);
    margin-bottom: var(--app-space-2);
}
.app-breadcrumb a { color: var(--app-text-muted); }
.app-breadcrumb .sep::before { content: "/"; color: var(--app-border-strong); }

/* 12f. Sidebar section label (non-interactive group heading). */
.nav-section-label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--app-text-subtle);
    padding: 0.9rem 1rem 0.3rem;
}
.rz-sidebar-collapsed .nav-section-label { display: none; }

/* Link-card variant of the stat tile (Settings landing). */
a.app-stat-tile { text-decoration: none; color: inherit; transition: border-color var(--app-duration-fast) var(--app-ease); }
a.app-stat-tile:hover { border-color: var(--app-accent); text-decoration: none; }
.settings-tiles { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }

/* Branding page logo preview. */
.branding-logo-preview {
    height: 3rem;
    max-width: 12rem;
    object-fit: contain;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    padding: 0.25rem;
}

/* 12g. Compact grid density (toggle via .app-grid-compact on the grid). */
.app-grid-clean.app-grid-compact .rz-grid-table tbody td {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

/* 12h. Native file inputs (Blazor <InputFile>) — give the unstyled OS control the
   same white-minimalist look as the rest of the form controls (Import People,
   Branding logo, family-update photo, document upload). */
input[type="file"] {
    display: block;
    width: 100%;
    font-size: 0.9rem;
    color: var(--app-text-muted);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    padding: 0.4rem 0.5rem;
}
input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-alt);
    color: var(--app-text);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    transition: border-color var(--app-duration-fast) var(--app-ease), background var(--app-duration-fast) var(--app-ease);
}
input[type="file"]::file-selector-button:hover {
    border-color: var(--app-accent);
    background: var(--app-surface);
}