/* =========================================================================
   Masingcwabane — design system
   Clean SaaS look (Linear / Notion-ish), responsive down to phone.
   ========================================================================= */

/* Branding editor */
.branding-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px 24px;
    align-items: center;
}

.branding-color-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
}

.branding-color-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.branding-color-token {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-500);
}

.branding-color-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.branding-color-inputs input[type="color"] {
    width: 38px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    cursor: pointer;
}

.branding-color-inputs input[type="text"] {
    width: 110px;
    padding: 6px 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 12px;
}

.branding-color-clear {
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    width: 24px;
    height: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--ink-500);
}

.branding-color-clear:hover {
    color: var(--danger);
    border-color: var(--danger);
}

.branding-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.branding-logo-card {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.branding-logo-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.branding-logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    background: var(--surface-3);
    border-radius: var(--radius-md);
    padding: 8px;
}

.branding-logo-preview img {
    max-height: 96px;
    max-width: 100%;
    object-fit: contain;
}

.branding-logo-placeholder {
    color: var(--ink-400);
    font-size: 12px;
}

.branding-logo-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.branding-row-link {
    color: var(--brand);
    font-weight: 500;
}


:root {
    /* Palette — Masingcwabane brand (maroon #630000, silver #8B8B8B) */
    --brand: #630000;
    --brand-600: #4a0000;
    --brand-50: #fbf2f2;
    --brand-100: #f4dada;
    --brand-accent: #8B8B8B;

    /* Warm amber accent — restrained on-brand counterpoint to the maroon.
       Used for active-nav indicator, key CTAs, and category highlights. */
    --accent: #c9881a;
    --accent-600: #a06912;
    --accent-100: #fbeed1;
    --accent-50: #fdf6e6;

    /* Dedicated sidebar palette — always dark, independent of light/dark
       mode for the main canvas. Deep maroon at the top fading to near-
       black at the bottom, with high-contrast ink for menu labels. */
    --nav-bg-top: #3a0606;
    --nav-bg-bottom: #120608;
    --nav-ink: #f1e8e8;
    --nav-ink-muted: #b09a9a;
    --nav-section: #8a6e6e;
    --nav-hover: rgba(255, 255, 255, 0.18);
    --nav-active-bg: rgba(255, 255, 255, 0.22);
    --nav-border: rgba(255, 255, 255, 0.06);

    --ink-900: #0f172a;
    --ink-700: #334155;
    --ink-500: #64748b;
    --ink-400: #94a3b8;
    --ink-300: #cbd5e1;

    --surface: #f7f8fa;
    --surface-2: #ffffff;
    --surface-3: #f1f3f7;
    --border: #e6e8ee;
    --border-strong: #d6d9e0;

    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #2563eb;

    --success-bg: #ecfdf5;
    --warning-bg: #fffbeb;
    --danger-bg: #fef2f2;
    --info-bg: #eff6ff;

    /* Shape */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* Elevation */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);

    /* Layout */
    --shell-header-height: 56px;
    --shell-footer-height: 44px;
    --shell-nav-width: 248px;

    /* Type */
    --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-900);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--brand);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--surface-3);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    color: var(--ink-700);
}

/* =========================================================================
   App shell
   ========================================================================= */

.app-shell {
    display: grid;
    grid-template-columns: var(--shell-nav-width) 1fr;
    grid-template-rows: var(--shell-header-height) 1fr var(--shell-footer-height);
    grid-template-areas:
        "header header"
        "nav    body"
        "footer footer";
    min-height: 100vh;
    background: var(--surface);
}

.app-header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--surface-2);
    color: var(--ink-900);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--ink-700);
    padding: 0;
}

@media (min-width: 901px) {
    .app-shell.nav-collapsed {
        grid-template-columns: 0 1fr;
    }

    .app-shell.nav-collapsed .app-nav {
        display: none;
    }
}

.nav-toggle:hover {
    background: var(--surface-3);
    color: var(--ink-900);
}

.brand-mark {
    display: inline-block;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    object-fit: contain;
}

.brand-title {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink-900);
}

.env-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--brand-50);
    color: var(--brand-600);
    letter-spacing: 0.02em;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    color: var(--ink-500) !important;
    text-decoration: none !important;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.header-icon-btn:hover {
    background: var(--surface-3);
    color: var(--ink-900) !important;
}

/* Account menu (Microsoft-style avatar button + popup card in the header).
   Namespaced as `.account-*` to avoid colliding with the member-detail
   `.profile-card` summary section. */

.account-button {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: box-shadow 120ms ease, transform 120ms ease;
}

.account-button:hover {
    box-shadow: 0 0 0 2px var(--surface-3);
}

.account-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--brand);
}

.account-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.account-avatar-lg {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
}

.account-scrim {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1000;
}

.account-card {
    position: fixed;
    top: calc(var(--shell-header-height) - 4px);
    right: 16px;
    width: 320px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 16px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-card-identity {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.account-card-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-900);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-card-email {
    font-size: 0.8rem;
    color: var(--ink-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-card-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--ink-700);
}

.account-card-row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.account-card-row-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-500);
}

.account-card-row-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-card-divider {
    height: 1px;
    background: var(--border);
}

.account-card-action {
    appearance: none;
    background: transparent;
    border: none;
    text-decoration: none;
    color: var(--ink-700) !important;
    font-size: 0.88rem;
    font-weight: 500;
    text-align: left;
    padding: 10px 10px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.account-card-action:hover {
    background: var(--surface-3);
    color: var(--ink-900) !important;
}

.account-card-action-label {
    flex: 1 1 auto;
}

.account-card-toggle {
    width: 32px;
    height: 18px;
    background: var(--border-strong);
    border-radius: 999px;
    position: relative;
    transition: background 150ms ease;
    flex: 0 0 32px;
}

.account-card-toggle.on {
    background: var(--brand);
}

.account-card-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform 150ms ease;
}

.account-card-toggle.on .account-card-toggle-knob {
    transform: translateX(14px);
}

/* Dark mode token overrides for non-Fluent custom UI */

.app-shell.dark {
    --surface: #0b1220;
    --surface-2: #111a2c;
    --surface-3: #18233a;
    --border: #1f2c44;
    --border-strong: #2c3a55;
    --ink-900: #f1f5f9;
    --ink-700: #cbd5e1;
    --ink-500: #94a3b8;
    --ink-400: #64748b;
    --ink-300: #475569;

    /* Brighten brand accents so links and chips are legible on dark backgrounds.
       The deep maroon (#630000) disappears on near-black; remap to a warm
       light-rose that retains the brand feel while clearing WCAG AA contrast. */
    --brand: #ef9a9a;
    --brand-600: #f4b3b3;
    --brand-100: #3a1a1a;
    --brand-50: #2a1414;

    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #60a5fa;

    --success-bg: #052e1a;
    --warning-bg: #3a2a08;
    --danger-bg: #3a0f0f;
    --info-bg: #0b223f;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.65);

    color: var(--ink-900);
    background: var(--surface);
}

.app-shell.dark .app-header,
.app-shell.dark .app-footer,
.app-shell.dark .app-body {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--ink-900);
}

.app-shell.dark .app-body {
    background: var(--surface);
}

/* Sidebar keeps its own dark gradient in both light and dark mode —
   it owns its palette via --nav-* tokens. */
.app-shell.dark .app-nav {
    background: linear-gradient(180deg, var(--nav-bg-top) 0%, var(--nav-bg-bottom) 100%);
    border-right-color: var(--nav-border);
    color: var(--nav-ink);
}

/* Cards, tables, inputs in dark mode */
.app-shell.dark .page-card,
.app-shell.dark .account-card {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--ink-900);
}

.app-shell.dark .history-table thead th {
    background: var(--surface-3);
    color: var(--ink-500);
    border-bottom-color: var(--border);
}

.app-shell.dark .history-table tbody td {
    border-bottom-color: var(--border);
    color: var(--ink-700);
}

.app-shell.dark .history-table tbody tr:hover td {
    background: var(--surface-3);
}

/* Force Fluent design tokens used by FluentDataGrid / FluentBadge / FluentButton
   to follow the dark palette. Fluent components read these CSS vars at runtime. */
.app-shell.dark {
    --neutral-layer-1: #0b1220;
    --neutral-layer-2: #111a2c;
    --neutral-layer-3: #18233a;
    --neutral-layer-4: #1f2c44;
    --neutral-fill-rest: #18233a;
    --neutral-fill-hover: #1f2c44;
    --neutral-fill-active: #2c3a55;
    --neutral-stroke-rest: #2c3a55;
    --neutral-stroke-divider-rest: #1f2c44;
    --neutral-foreground-rest: #f1f5f9;
    --neutral-foreground-hint: #94a3b8;
    --fill-color: #0b1220;
}

/* Side nav */

.app-nav {
    grid-area: nav;
    background: linear-gradient(180deg, var(--nav-bg-top) 0%, var(--nav-bg-bottom) 100%);
    border-right: 1px solid var(--nav-border);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 10px 20px;
    position: sticky;
    top: var(--shell-header-height);
    height: calc(100vh - var(--shell-header-height));
    color: var(--nav-ink);
    /* Custom scrollbar so the dark sidebar doesn't show a bright OS scrollbar. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.app-nav::-webkit-scrollbar { width: 8px; }
.app-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
}
.app-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }

.app-nav-menu {
    width: 100% !important;
    min-width: 100% !important;
    background: transparent !important;
    color: var(--nav-ink) !important;
    /* Override Fluent design tokens for the sidebar so labels/icons read
       on the dark surface. The hover paint uses --neutral-fill-secondary-rest
       (not -stealth-hover); the active 3px bar uses --accent-fill-rest. */
    --neutral-foreground-rest: var(--nav-ink) !important;
    --neutral-foreground-hover: #ffffff !important;
    --neutral-foreground-active: #ffffff !important;
    --neutral-foreground-hint: var(--nav-ink-muted) !important;
    --neutral-fill-stealth-rest: transparent !important;
    --neutral-fill-stealth-hover: var(--nav-hover) !important;
    --neutral-fill-stealth-active: var(--nav-active-bg) !important;
    --neutral-fill-secondary-rest: var(--nav-hover) !important;
    --neutral-fill-secondary-hover: var(--nav-hover) !important;
    --neutral-fill-rest: transparent !important;
    --accent-foreground-rest: var(--accent) !important;
    --accent-fill-rest: var(--accent) !important;
}

.app-nav-menu fluent-anchor,
.app-nav-menu a {
    text-decoration: none !important;
    color: var(--nav-ink) !important;
}

/* Default text inside the sidebar — bright readable ink. This is the
   default for everything; the more specific group-title selector below
   overrides it only for the group header text. */
.app-nav-menu,
.app-nav-menu fluent-nav-link,
.app-nav-menu .fluent-nav-text {
    color: var(--nav-ink) !important;
}

/* Nav link rows — comfortable touch height, amber left-bar indicator
   on the active item (matches the mockup). */
.app-nav-menu fluent-nav-link,
.app-nav-menu .fluent-nav-link {
    position: relative;
    border-radius: 8px;
    margin: 1px 4px;
    --neutral-foreground-rest: var(--nav-ink) !important;
}

.app-nav-menu fluent-nav-link .fluent-nav-text,
.app-nav-menu .fluent-nav-link .fluent-nav-text {
    text-decoration: none !important;
    font-weight: 500;
    color: var(--nav-ink) !important;
    font-size: 0.875rem;
    letter-spacing: 0.005em;
    text-transform: none;
}

/* Fluent v4 renders the menu as plain Blazor — the visible hoverable row
   is `.fluent-nav-item .positioning-region`. Fluent's own rule paints it
   with --neutral-fill-secondary-rest, so we override both the token AND
   target the surface directly to be unambiguous. */
.app-nav-menu .fluent-nav-item .positioning-region {
    background: transparent !important;
    border-radius: 8px !important;
    transition: background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.app-nav-menu .fluent-nav-item .positioning-region:hover,
.app-nav-menu .fluent-nav-item:hover .positioning-region,
.app-nav-menu .fluent-nav-link:hover .positioning-region {
    background-color: var(--nav-hover) !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.55) !important;
}

.app-nav-menu .fluent-nav-item:hover .fluent-nav-text,
.app-nav-menu .fluent-nav-link:hover .fluent-nav-text {
    color: #ffffff !important;
}

/* Active row — stronger background and amber left-bar via Fluent's own
   ::before pseudo-element (uses --accent-fill-rest, now overridden). */
.app-nav-menu .fluent-nav-item a.active .positioning-region,
.app-nav-menu .fluent-nav-link.active .positioning-region,
.app-nav-menu a.active .positioning-region {
    background-color: var(--nav-active-bg) !important;
    color: #ffffff !important;
}

.app-nav-menu .fluent-nav-item a.active .positioning-region::before {
    background: var(--accent) !important;
}

.app-nav-menu .fluent-nav-link.active .fluent-nav-text,
.app-nav-menu a.active .fluent-nav-text {
    color: #ffffff !important;
    font-weight: 600;
}

/* Icon visibility — IconColor="Color.Accent" emits inline fill on the
   <FluentIcon> SVG that resolves to brand maroon, which is invisible on
   the dark maroon sidebar. Force-override fill/color on the SVG and
   every descendant (path, g, rect…) so icons read clearly. */
.app-nav-menu svg,
.app-nav-menu fluent-nav-link svg,
.app-nav-menu fluent-nav-link svg *,
.app-nav-menu fluent-nav-group svg,
.app-nav-menu fluent-nav-group svg *,
.app-nav-menu [slot="start"] svg,
.app-nav-menu [slot="start"] svg * {
    color: var(--nav-ink) !important;
    fill: var(--nav-ink) !important;
    opacity: 1 !important;
}

.app-nav-menu fluent-nav-link:hover svg,
.app-nav-menu fluent-nav-link:hover svg *,
.app-nav-menu fluent-nav-group:hover [slot="start"] svg,
.app-nav-menu fluent-nav-group:hover [slot="start"] svg * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.app-nav-menu fluent-nav-link[active] svg,
.app-nav-menu fluent-nav-link[active] svg *,
.app-nav-menu fluent-nav-link.active svg,
.app-nav-menu fluent-nav-link.active svg * {
    color: var(--accent) !important;
    fill: var(--accent) !important;
}

/* Section group label — uppercase, tracked, muted (matches GENERAL /
   TEAM MANAGEMENT / WEBSITE MANAGEMENT style).
   Target ONLY the group's own title text, not the texts inside its
   child <fluent-nav-link> children. The group title is rendered via
   ::part(label) in the Fluent web component; we also fall back to the
   direct-child structural selector for the Blazor wrapper variant. */
.app-nav-menu fluent-nav-group::part(label),
.app-nav-menu fluent-nav-group::part(title) {
    font-weight: 700 !important;
    color: var(--nav-section) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* Some Fluent versions render the title as a direct child span. Match
   only the IMMEDIATE child label of fluent-nav-group, never descendants. */
.app-nav-menu > fluent-nav-menu > fluent-nav-group > .fluent-nav-text,
.app-nav-menu fluent-nav-group > .fluent-nav-text,
.app-nav-menu fluent-nav-group > [slot="start"] + .fluent-nav-text {
    font-weight: 700 !important;
    color: var(--nav-section) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.app-nav-menu fluent-nav-group {
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid var(--nav-border);
}

.app-nav-menu fluent-nav-group:first-of-type {
    margin-top: 8px;
    border-top: none;
}

/* The top-level Dashboard link sits above the first group; give it a
   little breathing room. */
.app-nav-menu > fluent-nav-link:first-child {
    margin-bottom: 4px;
}

/* Mobile drawer overlay (only used <= 900px) */
.nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 60;
    opacity: 0;
    transition: opacity 180ms ease;
}

.app-body {
    grid-area: body;
    background: var(--surface);
    overflow: visible;
    min-width: 0;
}

.content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 28px 48px;
}

.content.content-wide {
    max-width: none;
}

.app-shell.nav-collapsed .content {
    max-width: none;
    padding: 24px 36px 48px;
}

/* Pagination footer under data grids. */
.grid-paginator {
    display: flex;
    justify-content: flex-end;
    padding: 10px 4px 2px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}

.app-shell.dark .grid-paginator {
    border-top-color: var(--border);
}

/* Generic history / log table used by claim and member detail pages. */
.history-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
    color: var(--ink-700);
}

.history-table thead th {
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink-500);
    background: var(--surface-3);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.history-table thead th:first-child { border-top-left-radius: var(--radius-sm); }
.history-table thead th:last-child  { border-top-right-radius: var(--radius-sm); }

.history-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.history-table tbody tr:last-child td { border-bottom: none; }
.history-table tbody tr:hover td { background: var(--surface-3); }

/* Column hints — keep timestamps/people from shrinking, let the note expand. */
.history-table th.col-when,
.history-table td.col-when   { white-space: nowrap; width: 1%; }
.history-table th.col-status,
.history-table td.col-status { white-space: nowrap; width: 1%; }
.history-table th.col-actor,
.history-table td.col-actor  { white-space: nowrap; width: 1%; }
.history-table th.col-note,
.history-table td.col-note   { width: auto; }

.app-footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    color: var(--ink-500);
    font-size: 0.78rem;
}

/* =========================================================================
   Page header & breadcrumbs
   ========================================================================= */

.page-header {
    margin-bottom: 22px;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: var(--ink-500);
}

.breadcrumbs a {
    color: var(--ink-500) !important;
    text-decoration: none !important;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    transition: background 120ms ease, color 120ms ease;
}

.breadcrumbs a:hover {
    background: var(--surface-3);
    color: var(--ink-900) !important;
}

.breadcrumbs .crumb-sep {
    color: var(--ink-300);
    user-select: none;
    padding: 0 2px;
}

.breadcrumbs .crumb-current {
    padding: 3px 8px;
    font-weight: 500;
    color: var(--ink-900);
}

.page-header-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.page-header-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--brand-50);
    color: var(--brand-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
}

.page-header-icon fluent-icon {
    color: var(--brand-600) !important;
}

.page-header-text {
    flex: 1;
    min-width: 0;
}

.page-header-text .page-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink-900);
    line-height: 1.25;
}

.page-header-text .page-subtitle {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: var(--ink-500);
    line-height: 1.5;
}

.page-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* =========================================================================
   Cards
   ========================================================================= */

.page-card {
    padding: 20px;
    border-radius: var(--radius-lg);
    background: var(--surface-2) !important;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    margin-bottom: 18px;
}

.page-card .form-section-title {
    display: block;
    margin: 0 0 14px;
    font-weight: 600;
    color: var(--ink-900);
    font-size: 0.95rem;
}

.card-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

/* Iconified card header — solid maroon square with a white icon, matching
   the mockup's small filled tile + uppercase label pattern. Inline styles
   on individual cards (e.g. quick-actions / arrears) can still override
   the background to introduce accent variants. */
.card-title-row .card-title-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: #fff;
    flex: 0 0 32px;
    box-shadow: var(--shadow-xs);
}

.card-title-row .card-title-icon fluent-icon {
    color: #fff !important;
}

.card-title-row .card-title-icon svg {
    color: #fff;
    fill: #fff;
}

/* Accent variant — amber tile for special / featured cards. */
.card-title-icon-accent {
    background: var(--accent) !important;
    color: #fff !important;
}

.card-title-row .card-title-text {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink-900);
    letter-spacing: -0.005em;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.form-grid .span-2 {
    grid-column: span 2;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

/* =========================================================================
   KPI cards
   ========================================================================= */

.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}

.kpi-card {
    padding: 18px 20px 16px !important;
    border-radius: var(--radius-lg) !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-xs);
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    position: relative;
    /* keep visible so the corner orb can paint beyond the inner edge if needed */
}

/* Left accent bar — slightly more prominent now and uses the per-variant
   colour set below. */
.kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--brand);
    opacity: 0.9;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* Decorative coloured orb in the top-right corner — visual rhyme with
   the mockup's circular stat badges. Soft tint so it doesn't compete
   with the big number. */
.kpi-card::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--brand);
    opacity: 0.18;
    box-shadow: 0 0 0 4px rgba(99, 0, 0, 0.08);
    pointer-events: none;
}

.kpi-card .kpi-label,
.kpi-card fluent-label[typo="body"]:first-of-type {
    font-size: 0.72rem !important;
    color: var(--ink-500) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.kpi-card fluent-label[typo="hero-title"] {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--ink-900) !important;
    margin: 4px 0 2px !important;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

.kpi-card fluent-label[typo="body"]:last-of-type {
    font-size: 0.78rem !important;
    color: var(--ink-500) !important;
}

/* Per-variant colours: left bar + corner orb both follow the category. */
.kpi-total::before { background: var(--brand); }
.kpi-total::after { background: var(--brand); box-shadow: 0 0 0 4px rgba(99, 0, 0, 0.10); }

.kpi-active::before { background: var(--success); }
.kpi-active::after { background: var(--success); box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12); }

.kpi-pending::before { background: var(--accent); }
.kpi-pending::after { background: var(--accent); box-shadow: 0 0 0 4px rgba(201, 136, 26, 0.15); }

.kpi-lapsed::before { background: var(--danger); }
.kpi-lapsed::after { background: var(--danger); box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12); }

.kpi-month::before { background: var(--accent); }
.kpi-month::after { background: var(--accent); box-shadow: 0 0 0 4px rgba(201, 136, 26, 0.15); }

.kpi-due::before { background: var(--warning); }
.kpi-due::after { background: var(--warning); box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.15); }
.kpi-month::before { background: var(--info); }
.kpi-due::before { background: #ea580c; }

/* Remove old gradient backgrounds from KPI variants */
.kpi-total, .kpi-active, .kpi-pending, .kpi-lapsed, .kpi-month, .kpi-due {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}

/* =========================================================================
   Metric / dash cards
   ========================================================================= */

.metric-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.metric-card {
    padding: 14px 16px !important;
    border-radius: var(--radius-md) !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-xs);
}

.metric-card fluent-label[typo="body"] {
    font-size: 0.78rem !important;
    color: var(--ink-500) !important;
}

.metric-card fluent-label[typo="subject"] {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--ink-900) !important;
}

.metric-card fluent-label[typo="hero-title"] {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: var(--ink-900) !important;
    letter-spacing: -0.01em;
}

.metric-card-danger {
    background: var(--danger-bg) !important;
    border-color: #fecaca !important;
}

.metric-card-danger fluent-label[typo="hero-title"] {
    color: var(--danger) !important;
}

.metric-card-accent {
    background: var(--brand-50) !important;
    border-color: var(--brand-100) !important;
}

.metric-card-accent fluent-label[typo="hero-title"] {
    color: var(--brand-600) !important;
}

/* Inline badge variants */
.badge-danger {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

.dash-card {
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.dash-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.hint-card {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-strong);
    background: var(--surface-3);
    color: var(--ink-700);
    font-size: 0.875rem;
}

/* =========================================================================
   Filter grid
   ========================================================================= */

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 16px;
    align-items: end;
}

.filter-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.filter-cell > * {
    width: 100%;
}

.filter-cell-wide {
    grid-column: span 2;
}

/* =========================================================================
   Forms
   ========================================================================= */

fluent-text-field,
fluent-search,
fluent-number-field,
fluent-text-area,
fluent-select,
fluent-date-picker {
    width: 100%;
}

/* Ensure the open dropdown listbox paints above sibling cards / inputs
   instead of being covered by the next card below. The Fluent UI web
   components render their listbox inside the host as an absolutely-
   positioned element; without a stacking context on the host the
   following sibling (page-card, FluentMessageBar, etc.) wins the paint
   order and visually overlaps the menu. */
fluent-select,
fluent-combobox,
fluent-listbox,
fluent-date-picker,
fluent-menu-button {
    position: relative;
}

fluent-select[open],
fluent-combobox[open],
fluent-menu-button[open],
fluent-date-picker[open] {
    z-index: 9000;
}

/* Anchored regions are the floating popover surface that hosts the
   FluentDatePicker calendar and FluentSelect listbox. They must escape
   their containing card, paint above every other element on the page,
   and look like real floating popovers (white background + shadow). */
fluent-anchored-region {
    position: fixed !important;
    z-index: 9999 !important;
    background: var(--surface-2, #fff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

fluent-select::part(listbox),
fluent-combobox::part(listbox),
fluent-menu::part(control) {
    z-index: 9999;
    background: var(--surface-2, #fff);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

/* Let dropdown listboxes/calendars escape their containing FluentCard.
   The <fluent-card> web component applies `contain: content` in its
   shadow DOM by default, which acts like `overflow: clip` and chops off
   any absolutely-positioned popover (FluentSelect listbox, FluentDatePicker
   calendar, FluentCombobox menu) that extends past the card boundary.
   Override from outside so popovers can paint beyond the card. */
fluent-card,
.page-card,
.metric-card,
.dash-card {
    contain: none !important;
    overflow: visible !important;
}

/* Every layout wrapper between the FluentSelect and the viewport must
   honour overflow:visible. Any ancestor with overflow:hidden, clip, or
   `contain: paint/strict` will visually chop a long open listbox. */
fluent-stack,
.filter-grid,
.filter-cell,
.members-toolbar,
.form-grid,
.form-grid .span-2,
.kv-grid,
.card-grid {
    overflow: visible !important;
}

/* The open listbox sits inside a position:fixed <fluent-anchored-region>,
   which already paints in viewport space. Just give it room to breathe
   (up to 75vh, capped at 560px) before it starts scrolling internally,
   and make sure nothing painted later in the document covers it. */
fluent-select::part(listbox),
fluent-combobox::part(listbox),
fluent-menu::part(control) {
    max-height: min(75vh, 560px);
    overflow-y: auto;
    z-index: 10000;
}

/* Page cards and metric cards establish their own stacking context only
   when an open dropdown above them needs to be on top — keep them in the
   default flow so absolutely-positioned overlays from earlier siblings
   can sit on top of them. */
.page-card,
.metric-card,
.metric-row,
.filter-grid,
.filter-cell {
    isolation: auto;
}

.spacer {
    height: 14px;
}

/* =========================================================================
   Data grid
   ========================================================================= */

.data-grid-wrap {
    margin-top: 8px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    -webkit-overflow-scrolling: touch;
}

fluent-data-grid {
    --header-background: var(--surface-3);
    --neutral-stroke-divider-rest: var(--border);
}

fluent-data-grid::part(grid),
fluent-data-grid [role="grid"] {
    font-size: 0.875rem;
}

fluent-data-grid [role="columnheader"] {
    font-weight: 600 !important;
    color: var(--ink-700) !important;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* =========================================================================
   Row actions
   ========================================================================= */

.row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.row-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    color: var(--ink-500) !important;
    text-decoration: none !important;
    transition: background 120ms ease, color 120ms ease;
}

.row-actions a:hover {
    background: var(--brand-50);
    color: var(--brand) !important;
}

.row-actions a[data-variant="danger"] {
    color: var(--danger) !important;
}

.row-actions a[data-variant="danger"]:hover {
    background: var(--danger-bg);
}

.row-actions fluent-anchor::part(control),
.row-actions fluent-button::part(control) {
    min-width: 0;
    padding-inline: 8px;
}

/* =========================================================================
   Misc
   ========================================================================= */

.muted {
    color: var(--ink-500);
    font-size: 0.85rem;
}

.kv-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
.kv-grid > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
    font-size: 0.875rem;
}
.kv-grid > div:last-child {
    border-bottom: none;
}
.kv-grid > div span:first-child {
    color: var(--ink-500);
    font-weight: 500;
}
.kv-grid > div span:last-child {
    color: var(--ink-900);
    text-align: right;
}

.tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.hint {
    margin-top: 12px;
}

.allocations {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.allocations li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
}
.allocations li:last-child {
    border-bottom: none;
}

.batch-chip {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    background: var(--surface-3);
    color: var(--ink-700);
}

/* =========================================================================
   Mobile-only card lists (hidden on desktop)
   ========================================================================= */

.mobile-card-list {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.member-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    position: relative;
}

.member-card-warning {
    border-color: #fecaca;
    background: linear-gradient(180deg, #fff7f7 0%, var(--surface-2) 60%);
}

.member-card-selected {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand-100);
    cursor: pointer;
}

.member-card[role="button"], .member-card.clickable {
    cursor: pointer;
}

.member-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.member-card-name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-900);
    line-height: 1.3;
}

.member-card-name a {
    color: var(--ink-900);
    text-decoration: none;
}

.member-card-name a:hover {
    color: var(--brand);
}

.member-card-policy {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--ink-500);
}

.repeater-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 50%;
    background: #ea580c;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

.dep-pick-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.dep-pick-table th,
.dep-pick-table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
}

.dep-pick-table th {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.member-card-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    font-size: 0.82rem;
}

.member-card-meta dt {
    margin: 0;
    color: var(--ink-500);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.member-card-meta dd {
    margin: 2px 0 0;
    color: var(--ink-900);
    font-weight: 500;
}

.member-card-actions {
    display: flex;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.member-card-actions a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--ink-700) !important;
    text-decoration: none !important;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background 120ms ease, color 120ms ease;
}

.member-card-actions a:hover {
    background: var(--brand-50);
    color: var(--brand) !important;
}

/* =========================================================================
   Responsive: tablet (<= 900px) → drawer nav
   ========================================================================= */

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "body"
            "footer";
        grid-template-rows: var(--shell-header-height) 1fr var(--shell-footer-height);
    }

    .nav-toggle {
        display: inline-flex;
    }

    .app-nav {
        position: fixed;
        top: var(--shell-header-height);
        left: 0;
        bottom: 0;
        width: 80%;
        max-width: 300px;
        height: calc(100vh - var(--shell-header-height));
        z-index: 70;
        transform: translateX(-100%);
        transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
        box-shadow: var(--shadow-lg);
    }

    .app-shell.nav-open .app-nav {
        transform: translateX(0);
    }

    .app-shell.nav-open .nav-scrim {
        display: block;
        opacity: 1;
    }

    .content {
        padding: 16px 16px 32px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .form-grid .span-2 {
        grid-column: span 1;
    }

    .kpi-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .page-header-row {
        gap: 10px;
    }

    .page-header-actions {
        margin-left: 0;
        width: 100%;
    }

    .page-header-text .page-title {
        font-size: 1.2rem;
    }

    .filter-cell-wide {
        grid-column: span 1;
    }

    .app-footer {
        font-size: 0.72rem;
        padding: 0 16px;
    }

    .env-pill {
        display: none;
    }

    .account-card {
        right: 8px;
        width: calc(100vw - 16px);
        max-width: 320px;
    }
}

/* =========================================================================
   Responsive: phone (<= 640px) → tables become card lists
   ========================================================================= */

@media (max-width: 640px) {
    .content {
        padding: 14px 12px 28px;
    }

    .kpi-row {
        grid-template-columns: 1fr;
    }

    .page-card {
        padding: 16px;
        border-radius: var(--radius-md);
    }

    .page-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header-actions {
        width: 100%;
    }

    .page-header-actions fluent-anchor,
    .page-header-actions fluent-button {
        flex: 1 0 auto;
    }

    /* Data grids → horizontal scroll with a hint */
    .data-grid-wrap {
        position: relative;
    }
    .data-grid-wrap::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 20px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.9));
        pointer-events: none;
    }

    .metric-row {
        grid-template-columns: 1fr 1fr;
    }

    .brand-title {
        font-size: 0.9rem;
    }

    /* Toggle: show stacked card list, hide the data grid */
    .desktop-only-table {
        display: none !important;
    }

    .mobile-card-list {
        display: flex !important;
    }
}

/* =========================================================================
   Active-filter chips
   ========================================================================= */

.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 10px;
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    color: var(--brand-600);
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.2;
    max-width: 100%;
}

.active-filter-chip .chip-label {
    color: var(--ink-500);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.66rem;
}

.active-filter-chip .chip-value {
    color: var(--ink-900);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.chip-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--ink-500);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
}

.chip-clear:hover {
    background: var(--brand-100);
    color: var(--brand-600);
}

.chip-clear-all {
    background: transparent;
    border: none;
    color: var(--ink-500);
    font-size: 0.78rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 8px;
}

.chip-clear-all:hover {
    color: var(--brand-600);
}

/* =========================================================================
   Member detail — profile card + tabs
   ========================================================================= */

.profile-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    margin-bottom: 14px;
}

.profile-avatar {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 14px rgba(99, 0, 0, 0.25);
}

.profile-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-id-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.profile-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 18px;
    margin: 0;
}

.profile-meta > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.profile-meta dt {
    margin: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-500);
    font-weight: 500;
}

.profile-meta dd {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ink-900);
    font-weight: 500;
    word-break: break-word;
}

.profile-meta-wide {
    grid-column: 1 / -1;
}

.member-tabs {
    --neutral-stroke-divider-rest: var(--border);
}

.member-tabs fluent-tab[aria-selected="true"] {
    color: var(--brand-600) !important;
    font-weight: 600;
}

.sms-body {
    margin: 6px 0 0;
    padding: 10px 12px;
    background: var(--surface-3);
    border-radius: var(--radius-sm);
    color: var(--ink-700);
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 640px) {
    .profile-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 12px;
    }

    .profile-avatar {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        font-size: 1.05rem;
    }
}

/* =========================================================================
   Login page
   ========================================================================= */

.login-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(1200px 600px at 0% 0%, rgba(99, 0, 0, 0.15), transparent 60%),
        radial-gradient(900px 500px at 100% 100%, rgba(139, 139, 139, 0.12), transparent 60%),
        var(--surface);
    font-family: var(--font-ui);
    padding: 16px;
}

.login-shell {
    width: 100%;
    max-width: 400px;
}

.login-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    box-shadow: var(--shadow-lg);
}

.login-brand {
    text-align: center;
    margin-bottom: 24px;
}

.login-heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
    color: #fff;
    font-size: 26px;
    margin-bottom: 12px;
    box-shadow: 0 12px 24px rgba(99, 0, 0, 0.25);
}

.login-logo {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    object-fit: contain;
}

.login-mark {
    display: block;
    max-width: 280px;
    width: 100%;
    height: auto;
    margin: 0 auto 8px;
}

.login-brand h1 {
    margin: 0 0 4px;
    font-size: 1.4rem;
    color: var(--ink-900);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.login-brand p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ink-500);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ink-700);
    font-size: 0.82rem;
    font-weight: 500;
}

.login-form input {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    font-size: 0.95rem;
    background: var(--surface-2);
    color: var(--ink-900);
    outline: none;
    transition: border 120ms ease, box-shadow 120ms ease;
    font-family: inherit;
}

.login-form input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(99, 0, 0, 0.15);
}

.login-submit {
    margin-top: 6px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--brand);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    font-family: inherit;
}

.login-submit:hover {
    background: var(--brand-600);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(99, 0, 0, 0.25);
}

.login-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid #fecaca;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    margin-bottom: 14px;
    font-size: 0.875rem;
}

.login-hint {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    text-align: center;
    color: var(--ink-500);
}

/* ---------- Help / user manual modal ---------- */
.help-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1400;
}

.help-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1040px, calc(100vw - 32px));
    height: min(720px, calc(100vh - 64px));
    background: var(--surface-1, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    z-index: 1401;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.help-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.help-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.help-modal-title-main {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink-900);
    line-height: 1.2;
}

.help-modal-title-sub {
    font-size: 0.8rem;
    color: var(--ink-500);
    margin-top: 2px;
}

.help-modal-close {
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ink-500);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, color 120ms ease;
}

.help-modal-close:hover {
    background: var(--surface-3);
    color: var(--ink-900);
}

.help-search-row {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-1);
}

.help-body {
    display: grid;
    grid-template-columns: 280px 1fr;
    flex: 1 1 auto;
    min-height: 0;
}

.help-topics {
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 10px 8px;
    background: var(--surface-2);
}

.help-section-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-500);
    padding: 12px 10px 4px;
    font-weight: 600;
}

.help-topic {
    appearance: none;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--ink-700);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
}

.help-topic:hover {
    background: var(--surface-3);
    color: var(--ink-900);
}

.help-topic.is-active {
    background: var(--brand-50, #eef2ff);
    color: var(--brand, #4f46e5);
    font-weight: 600;
}

.help-content {
    overflow-y: auto;
    padding: 22px 28px 32px;
    color: var(--ink-800);
    line-height: 1.55;
}

.help-content-title {
    margin: 0 0 6px;
    font-size: 1.35rem;
    color: var(--ink-900);
}

.help-content-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 18px;
}

.help-keyword {
    font-size: 0.72rem;
    background: var(--surface-3);
    color: var(--ink-600);
    padding: 2px 8px;
    border-radius: 999px;
}

.help-content-body h4 {
    margin: 18px 0 6px;
    font-size: 0.95rem;
    color: var(--ink-900);
}

.help-content-body p {
    margin: 0 0 10px;
}

.help-content-body ul,
.help-content-body ol {
    margin: 0 0 12px 22px;
    padding: 0;
}

.help-content-body li {
    margin-bottom: 4px;
}

.help-content-body code {
    background: var(--surface-3);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.85em;
}

.help-empty {
    color: var(--ink-500);
    font-size: 0.9rem;
    padding: 10px;
}

@media (max-width: 720px) {
    .help-modal {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .help-body {
        grid-template-columns: 1fr;
    }

    .help-topics {
        max-height: 38vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
}

/* =========================================================================
   Dashboard v2 — greeting, refresh, skeleton, composition bar, quick tiles
   ========================================================================= */

.dashboard-updated {
    font-size: 0.78rem;
    color: var(--ink-500);
    align-self: center;
    margin-right: 4px;
    white-space: nowrap;
}

/* ---- Skeleton shimmer ---------------------------------------------------- */

.skeleton {
    display: block;
    background: linear-gradient(90deg,
        var(--surface-3) 0%,
        rgba(255, 255, 255, 0.65) 50%,
        var(--surface-3) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: dash-shimmer 1.4s ease-in-out infinite;
}

.app-shell.dark .skeleton {
    background: linear-gradient(90deg,
        var(--surface-3) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        var(--surface-3) 100%);
    background-size: 200% 100%;
}

.skeleton-line {
    height: 12px;
}

.skeleton-line-xs { width: 35%; height: 10px; }
.skeleton-line-sm { width: 60%; height: 10px; }
.skeleton-line-md { width: 50%; height: 14px; }
.skeleton-line-lg { width: 80%; height: 28px; margin: 6px 0; }

.skeleton-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-tile {
    height: 64px;
    border-radius: var(--radius-md);
}

.skeleton-tile-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

@keyframes dash-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Composition bar (Active / Pending / Lapsed) ------------------------- */

.composition-card {
    padding: 16px 18px !important;
    margin-bottom: 14px !important;
}

.composition-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.composition-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--ink-900);
    font-size: 0.95rem;
}

.composition-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--ink-500);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.legend-active { background: var(--success); }
.legend-pending { background: var(--warning); }
.legend-lapsed { background: var(--danger); }

.composition-bar {
    display: flex;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-3);
    border: 1px solid var(--border);
}

.composition-seg {
    height: 100%;
    transition: width 0.4s ease;
}

.composition-seg.seg-active  { background: var(--success); }
.composition-seg.seg-pending { background: var(--warning); }
.composition-seg.seg-lapsed  { background: var(--danger); }

/* ---- Quick action tiles -------------------------------------------------- */

.quick-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.quick-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--ink-900) !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.quick-tile:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: var(--border-strong);
}

.quick-tile:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.quick-tile-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-50);
    color: var(--brand-600);
    flex-shrink: 0;
}

.quick-tile-icon fluent-icon {
    color: var(--brand-600) !important;
}

.quick-tile-primary {
    border-color: var(--brand);
    background: linear-gradient(180deg, var(--brand-50) 0%, var(--surface-2) 80%);
}

.quick-tile-primary .quick-tile-icon {
    background: var(--brand);
    color: #fff;
}

.quick-tile-primary .quick-tile-icon fluent-icon {
    color: #fff !important;
}

.quick-tile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.quick-tile-title {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.2;
    color: var(--ink-900);
}

.quick-tile-sub {
    font-size: 0.76rem;
    color: var(--ink-500);
    margin-top: 2px;
}

.quick-tile-chevron {
    color: var(--ink-400);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.quick-tile:hover .quick-tile-chevron {
    opacity: 1;
    transform: translateX(0);
}

/* ---- Card title "View all" link ----------------------------------------- */

.card-title-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.78rem;
    color: var(--brand-600);
    text-decoration: none !important;
}

.card-title-link:hover {
    color: var(--brand);
    text-decoration: underline !important;
}

.card-title-link fluent-icon {
    color: var(--brand-600);
}

/* ---- Friendly empty states ---------------------------------------------- */

.empty-state {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    border-radius: var(--radius-md);
    background: var(--surface-3);
    border: 1px dashed var(--border-strong);
}

.empty-state-success {
    background: var(--success-bg);
    border-color: rgba(22, 163, 74, 0.25);
}

.empty-state fluent-icon {
    flex-shrink: 0;
}

.empty-state-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.empty-state-title {
    font-weight: 600;
    color: var(--ink-900);
    font-size: 0.92rem;
}

.empty-state-sub {
    font-size: 0.82rem;
    color: var(--ink-500);
}

.empty-state-sub a {
    color: var(--brand-600);
}

/* ---- Card micro-interactions: hover lift + entrance fade ---------------- */

.dash-hover-lift {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dash-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dash-fade-in {
    animation: dash-fade-up 0.32s ease both;
}

.dash-fade-in:nth-of-type(2) { animation-delay: 0.05s; }
.dash-fade-in:nth-of-type(3) { animation-delay: 0.10s; }
.dash-fade-in:nth-of-type(4) { animation-delay: 0.15s; }
.dash-fade-in:nth-of-type(5) { animation-delay: 0.20s; }
.dash-fade-in:nth-of-type(6) { animation-delay: 0.25s; }

@keyframes dash-fade-up {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ---- Respect reduced motion --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .skeleton,
    .composition-seg,
    .quick-tile,
    .quick-tile-chevron,
    .dash-hover-lift,
    .dash-fade-in {
        animation: none !important;
        transition: none !important;
    }
}

/* ---- Dashboard responsive tweaks ---------------------------------------- */

@media (max-width: 720px) {
    .composition-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .quick-tiles {
        grid-template-columns: 1fr;
    }

    .dashboard-updated {
        display: none;
    }

    .card-title-link span {
        display: none;
    }
}

/* =========================================================================
   Command palette (Ctrl+K) + header trigger
   ========================================================================= */

.header-palette-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 8px 0 10px;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--ink-500);
    border: 1px solid var(--border);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.header-palette-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--ink-900);
}

.header-palette-btn fluent-icon {
    color: var(--ink-500);
}

.header-palette-text {
    color: var(--ink-500);
}

.header-palette-kbd {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--ink-500);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.4;
}

@media (max-width: 720px) {
    .header-palette-text,
    .header-palette-kbd {
        display: none;
    }
    .header-palette-btn {
        width: 36px;
        padding: 0;
        justify-content: center;
    }
}

/* ---- Modal ---- */

.palette-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1400;
    animation: palette-scrim-in 120ms ease both;
}

.palette-modal {
    position: fixed;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, calc(100vw - 32px));
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1401;
    overflow: hidden;
    animation: palette-pop-in 160ms ease both;
}

@keyframes palette-scrim-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes palette-pop-in {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.palette-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.palette-search-icon {
    color: var(--ink-400);
    display: inline-flex;
}

.palette-search-icon fluent-icon {
    color: var(--ink-400) !important;
}

.palette-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink-900);
    padding: 4px 0;
}

.palette-input::placeholder {
    color: var(--ink-400);
}

.palette-kbd {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--ink-500);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.palette-esc {
    margin-left: 8px;
}

.palette-results {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.palette-section-label {
    padding: 8px 10px 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-500);
    font-weight: 600;
}

.palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: var(--ink-900);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 80ms ease;
}

.palette-item.is-active,
.palette-item:focus-visible {
    background: var(--brand-50);
    outline: none;
}

.app-shell.dark .palette-item.is-active,
.app-shell.dark .palette-item:focus-visible {
    background: rgba(99, 0, 0, 0.18);
}

.palette-item-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--ink-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.palette-item-icon fluent-icon {
    color: var(--ink-700) !important;
}

.palette-item-icon-member {
    background: var(--brand-50);
    color: var(--brand-600);
}

.palette-item-icon-member fluent-icon {
    color: var(--brand-600) !important;
}

.palette-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.palette-item-title {
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--ink-900);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.palette-item-sub {
    font-size: 0.76rem;
    color: var(--ink-500);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.palette-item-sub code {
    background: transparent;
    padding: 0;
    color: var(--ink-500);
}

.palette-item-enter {
    color: var(--ink-400);
    opacity: 0;
    transition: opacity 120ms ease;
}

.palette-item.is-active .palette-item-enter {
    opacity: 1;
    color: var(--brand-600);
}

.palette-status,
.palette-empty,
.palette-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 12px;
    color: var(--ink-500);
    font-size: 0.86rem;
}

.palette-empty fluent-icon,
.palette-status fluent-icon {
    color: var(--ink-400);
}

.palette-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-500);
    font-size: 0.75rem;
    flex-wrap: wrap;
}

.palette-footer-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.palette-footer-group .palette-kbd {
    margin-right: 2px;
}

@media (max-width: 720px) {
    .palette-modal {
        top: 0;
        left: 0;
        right: 0;
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        transform: none;
        border-radius: 0;
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .palette-scrim,
    .palette-modal {
        animation: none !important;
    }
}

/* =========================================================================
   Members page polish — sticky toolbar, status pills, density, breakdown
   ========================================================================= */

.members-toolbar {
    position: sticky;
    top: calc(var(--shell-header-height) + 8px);
    z-index: 20;
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    box-shadow: var(--shadow-sm);
}

.status-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.status-pill {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--ink-700);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
    line-height: 1.2;
}

.status-pill:hover {
    background: var(--surface-3);
    border-color: var(--ink-300);
}

.status-pill:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.status-pill.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.status-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ink-400);
    display: inline-block;
}

.status-pill-active .status-pill-dot { background: #16a34a; }
.status-pill-pending .status-pill-dot { background: #f59e0b; }
.status-pill-lapsed .status-pill-dot { background: #dc2626; }
.status-pill-cancelled .status-pill-dot { background: #6b7280; }

.status-pill.is-active .status-pill-dot {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

/* Results header (count + breakdown + density toggle) */
.results-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 10px;
}

.results-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.results-breakdown {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.results-breakdown-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink-700);
    background: var(--surface-3);
    border: 1px solid var(--border);
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1.2;
}

.results-breakdown-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    display: inline-block;
}

.results-breakdown-active .results-breakdown-dot { background: #16a34a; }
.results-breakdown-pending .results-breakdown-dot { background: #f59e0b; }
.results-breakdown-lapsed .results-breakdown-dot { background: #dc2626; }
.results-breakdown-cancelled .results-breakdown-dot { background: #6b7280; }

/* Density toggle (segmented control) */
.density-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    overflow: hidden;
    flex: 0 0 auto;
}

.density-toggle-btn {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--ink-700);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    line-height: 1.2;
}

.density-toggle-btn + .density-toggle-btn {
    border-left: 1px solid var(--border);
}

.density-toggle-btn:hover {
    background: var(--surface-3);
}

.density-toggle-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.density-toggle-btn.is-active {
    background: var(--brand-50);
    color: var(--brand);
}

.app-shell.dark .density-toggle-btn.is-active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--brand-100, #fecaca);
}

/* Compact rows for the data grid */
.data-grid-wrap.density-compact fluent-data-grid::part(grid),
.data-grid-wrap.density-compact fluent-data-grid [role="grid"] {
    font-size: 0.82rem;
}

.data-grid-wrap.density-compact fluent-data-grid [role="row"] {
    min-height: 32px;
}

.data-grid-wrap.density-compact fluent-data-grid [role="gridcell"] {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.data-grid-wrap.density-compact .row-actions a {
    width: 26px;
    height: 26px;
}

/* Hover-reveal row actions (keep accessible: visible on focus-within + on touch) */
@media (hover: hover) and (pointer: fine) {
    .data-grid-wrap fluent-data-grid [role="row"] .row-actions {
        opacity: 0.55;
        transition: opacity 120ms ease;
    }

    .data-grid-wrap fluent-data-grid [role="row"]:hover .row-actions,
    .data-grid-wrap fluent-data-grid [role="row"]:focus-within .row-actions {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .status-pill,
    .density-toggle-btn,
    .data-grid-wrap fluent-data-grid [role="row"] .row-actions {
        transition: none !important;
    }
}

@media (max-width: 720px) {
    .members-toolbar {
        position: static;
    }

    .results-header {
        flex-direction: column;
        align-items: stretch;
    }

    .density-toggle {
        align-self: flex-end;
    }
}

/* =========================================================================
   Dashboard-inspired components — tag pills, row-category badges,
   refined CTAs. Borrowed from the Dungeon dashboard motif (sectioned
   nav + filled category tiles + bold CTAs) but tuned for the funeral-
   SaaS voice (maroon brand + restrained amber accent, never bright
   playful colours).
   ========================================================================= */

/* Tag pill — small dark pill with light text. Use for context tokens
   like branch codes, package keys, or roster-style filter chips.
   <span class="tag-pill">BR-01</span> or <span class="tag-pill tag-pill-amber">PLATINUM</span>. */
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: var(--ink-700);
    color: #fff;
    line-height: 1.3;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.tag-pill-muted {
    background: var(--surface-3);
    color: var(--ink-700);
    border-color: var(--border);
}

.tag-pill-amber {
    background: var(--accent);
    color: #fff;
}

.tag-pill-brand {
    background: var(--brand);
    color: #fff;
}

.app-shell.dark .tag-pill-muted {
    background: var(--surface-3);
    color: var(--ink-700);
}

/* Row category badge — the bold left-side label used in event/list rows
   (matches the mockup's MATCHUP / EVENT / MEETING leaders). Pair with
   a colour modifier; defaults to muted ink.
   <span class="row-cat row-cat-active">ACTIVE</span> */
.row-cat {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #fff;
    background: var(--ink-500);
    min-width: 72px;
    justify-content: center;
}

.row-cat-active    { background: var(--success); }
.row-cat-pending   { background: var(--accent); }
.row-cat-lapsed    { background: var(--danger); }
.row-cat-cancelled { background: var(--ink-500); }
.row-cat-brand     { background: var(--brand); }
.row-cat-paid      { background: var(--success); }
.row-cat-due       { background: var(--warning); }
.row-cat-claim     { background: var(--info); }

/* Primary CTA — strong filled button using the amber accent. For the
   "headline" action on a card (one per card, the one you really want
   the user to take). Use `.cta-primary` on a plain <a> / <button> or
   on a FluentButton via Class="cta-primary". */
.cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    text-decoration: none !important;
    transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 1px 2px rgba(160, 105, 18, 0.18);
}

.cta-primary:hover {
    background: var(--accent-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(160, 105, 18, 0.25);
    text-decoration: none !important;
}

.cta-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(160, 105, 18, 0.18);
}

.cta-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-100), 0 4px 12px rgba(160, 105, 18, 0.25);
}

.cta-primary:disabled,
.cta-primary[disabled] {
    background: var(--ink-300);
    color: #fff !important;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Dark CTA — the somber counterpoint (think "BACKUP SYSTEM" in the
   mockup). Use for less-loud secondary headline actions. */
.cta-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radius-md);
    background: var(--ink-900);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    text-decoration: none !important;
    transition: background 120ms ease, transform 120ms ease;
}

.cta-dark:hover {
    background: var(--ink-700);
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* Promote PageHeader Actions FluentButton[Appearance=Accent] so primary
   page actions adopt the amber accent automatically — no per-page change
   needed. Targets the New member / Record payment / Lodge claim buttons. */
.page-header-actions fluent-button[appearance="accent"]::part(control) {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.page-header-actions fluent-button[appearance="accent"]::part(control):hover {
    background: var(--accent-600) !important;
    border-color: var(--accent-600) !important;
}

.page-header-actions fluent-anchor[appearance="accent"]::part(control) {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.page-header-actions fluent-anchor[appearance="accent"]::part(control):hover {
    background: var(--accent-600) !important;
    border-color: var(--accent-600) !important;
}

/* When the active status-pill is showing, use the amber accent instead
   of the maroon brand — visually consistent with the new active-nav
   indicator and the page primary CTAs. Subtle but coherent. */
.status-pill.is-active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

/* Brand pill (in header) — keep light maroon for the "Honoring life's
   legacy" tagline since it lives on the light header. */
.env-pill {
    background: var(--brand-50);
    color: var(--brand-600);
}

/* PageHeader title icon — refine to match the new iconified card-header
   tile (solid maroon square + white icon). */
.page-header-icon {
    background: var(--brand) !important;
    color: #fff !important;
}

.page-header-icon fluent-icon,
.page-header-icon svg {
    color: #fff !important;
    fill: #fff !important;
}

/* =================================================================
   Analytics charts
   ================================================================= */
.chart-card .chart-card-hint {
    margin-left: auto;
    font-size: 12px;
    color: var(--ink-muted, #64748b);
    font-weight: 500;
}

.chart-host {
    width: 100%;
    margin-top: 8px;
    min-height: 220px;
}

.chart-svg {
    width: 100%;
    height: 240px;
    display: block;
    overflow: visible;
}

.chart-grid {
    stroke: rgba(15, 23, 42, 0.08);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.app-shell.dark .chart-grid {
    stroke: rgba(255, 255, 255, 0.10);
}

.chart-axis-label {
    font-size: 11px;
    font-family: 'Inter', system-ui, sans-serif;
    fill: var(--ink-muted, #64748b);
}

.app-shell.dark .chart-axis-label {
    fill: rgba(255, 255, 255, 0.65);
}

.chart-svg rect,
.chart-svg path,
.chart-svg circle {
    transition: opacity 140ms ease, transform 140ms ease;
}

.chart-svg rect:hover,
.chart-svg path:hover,
.chart-svg circle:hover {
    opacity: 0.85;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 12px;
}

.chart-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-muted, #475569);
    font-weight: 500;
}

.chart-legend .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* Donut + legend split layout */
.chart-split {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    gap: 18px;
    align-items: center;
    margin-top: 10px;
}

@media (max-width: 720px) {
    .chart-split {
        grid-template-columns: 1fr;
    }
}

.chart-donut {
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-donut-svg {
    height: 200px;
    width: 200px;
    display: block;
}

.donut-center-value {
    font-size: 22px;
    font-weight: 700;
    fill: var(--ink, #0f172a);
    font-family: 'Inter', system-ui, sans-serif;
}

.donut-center-sub {
    font-size: 11px;
    fill: var(--ink-muted, #64748b);
    font-family: 'Inter', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.app-shell.dark .donut-center-value {
    fill: #f1f5f9;
}

.app-shell.dark .donut-center-sub {
    fill: rgba(255, 255, 255, 0.65);
}

.chart-legend-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.chart-legend-list .legend-row {
    display: grid;
    grid-template-columns: 14px 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 13px;
}

.chart-legend-list .legend-row:hover {
    background: rgba(15, 23, 42, 0.04);
}

.app-shell.dark .chart-legend-list .legend-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.chart-legend-list .legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.chart-legend-list .legend-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink, #0f172a);
    font-weight: 500;
}

.app-shell.dark .chart-legend-list .legend-name {
    color: #e2e8f0;
}

.chart-legend-list .legend-value {
    font-variant-numeric: tabular-nums;
    color: var(--ink, #0f172a);
    font-weight: 600;
}

.app-shell.dark .chart-legend-list .legend-value {
    color: #e2e8f0;
}

.chart-legend-list .legend-pct {
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted, #64748b);
    font-size: 12px;
    min-width: 38px;
    text-align: right;
}

/* Horizontal bar list (top branches) */
.hbar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.hbar-row {
    display: grid;
    grid-template-columns: minmax(120px, 200px) 1fr 60px;
    gap: 12px;
    align-items: center;
}

.hbar-label {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hbar-track {
    background: rgba(15, 23, 42, 0.06);
    border-radius: 6px;
    height: 12px;
    overflow: hidden;
}

.app-shell.dark .hbar-track {
    background: rgba(255, 255, 255, 0.08);
}

.hbar-fill {
    background: linear-gradient(90deg, var(--brand, #630000), var(--brand-600, #8b0a0a));
    height: 100%;
    border-radius: 6px;
    transition: width 320ms ease;
}

.hbar-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 13px;
}


/* ---------- Payment receipt (print-friendly) ---------- */
.receipt-sheet {
    background: #fff;
    color: #111827;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
    padding: 32px 36px;
    margin: 12px 0 32px;
    max-width: 880px;
    page-break-inside: avoid;
}

.app-shell.dark .receipt-sheet {
    background: #fff;
    color: #111827;
}

.receipt-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 2px solid var(--brand, #630000);
    padding-bottom: 18px;
    margin-bottom: 22px;
}

.receipt-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.receipt-brand-mark {
    background: linear-gradient(135deg, var(--brand, #630000), var(--brand-600, #8b0a0a));
    color: #fff;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.5px;
}

.receipt-tenant-name {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
}

.receipt-tenant-sub {
    margin: 4px 0 0;
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.receipt-meta {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 24px;
    row-gap: 4px;
    font-size: 12px;
    color: #374151;
}

.receipt-meta > div {
    display: contents;
}

.receipt-meta .rcpt-key {
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 10.5px;
    padding-right: 8px;
}

.receipt-meta .rcpt-val {
    font-weight: 600;
    color: #0f172a;
}

.receipt-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 22px;
}

.receipt-party-title {
    margin: 0 0 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #6b7280;
    font-weight: 600;
}

.receipt-party-name {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.receipt-party-meta {
    margin: 0;
    display: grid;
    row-gap: 4px;
    font-size: 12.5px;
    color: #374151;
}

.receipt-party-meta > div {
    display: grid;
    grid-template-columns: 100px 1fr;
    column-gap: 8px;
}

.receipt-party-meta dt {
    color: #6b7280;
    font-weight: 500;
}

.receipt-party-meta dd {
    margin: 0;
    color: #0f172a;
    font-weight: 500;
}

.receipt-party-right {
    text-align: right;
}

.receipt-party-right .receipt-party-meta > div {
    grid-template-columns: 1fr 100px;
}

.receipt-party-right .receipt-party-meta dt {
    order: 2;
    text-align: right;
}

.receipt-party-right .receipt-party-meta dd {
    order: 1;
    text-align: right;
}

.receipt-section-title {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #6b7280;
    font-weight: 600;
}

.receipt-table-wrap {
    margin-bottom: 18px;
}

.receipt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.receipt-table th,
.receipt-table td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.receipt-table thead th {
    background: rgba(99, 0, 0, 0.05);
    color: #0f172a;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--brand, #630000);
}

.receipt-table td.num,
.receipt-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.receipt-table tr.is-current {
    background: rgba(99, 0, 0, 0.04);
    font-weight: 600;
}

.receipt-table tfoot td {
    border-bottom: none;
    border-top: 2px solid rgba(15, 23, 42, 0.16);
    font-weight: 700;
    color: #0f172a;
}

.receipt-table tfoot .total-label {
    text-align: right;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.6px;
    color: #6b7280;
}

.receipt-table tfoot .total-value {
    color: var(--brand, #630000);
    font-size: 14px;
}

.receipt-totals {
    display: flex;
    justify-content: flex-end;
    margin: 18px 0 24px;
}

.receipt-totals-box {
    min-width: 260px;
    border: 1px solid rgba(99, 0, 0, 0.2);
    background: rgba(99, 0, 0, 0.04);
    border-radius: 10px;
    padding: 12px 16px;
}

.receipt-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #374151;
    padding: 4px 0;
}

.receipt-totals-row-strong {
    border-top: 1px dashed rgba(15, 23, 42, 0.18);
    padding-top: 8px;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--brand, #630000);
}

.receipt-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px dashed rgba(15, 23, 42, 0.18);
    padding-top: 18px;
    margin-top: 12px;
}

.receipt-signature {
    flex: 0 0 auto;
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.receipt-signature-line {
    width: 220px;
    height: 1px;
    background: #6b7280;
    margin-bottom: 6px;
}

.receipt-fineprint {
    flex: 1;
    margin: 0;
    font-size: 11px;
    color: #6b7280;
    text-align: right;
    max-width: 360px;
}

@media (max-width: 720px) {
    .receipt-sheet { padding: 18px 16px; }
    .receipt-parties { grid-template-columns: 1fr; }
    .receipt-party-right { text-align: left; }
    .receipt-party-right .receipt-party-meta > div { grid-template-columns: 100px 1fr; }
    .receipt-party-right .receipt-party-meta dt { order: 0; text-align: left; }
    .receipt-party-right .receipt-party-meta dd { order: 0; text-align: left; }
    .receipt-meta { grid-template-columns: 1fr; }
}

@media print {
    @page { margin: 14mm; }
    body { background: #fff !important; }
    .no-print,
    .app-header,
    .app-nav,
    .app-footer,
    .nav-scrim,
    .page-header,
    .account-scrim,
    .account-card,
    fluent-toast-provider,
    fluent-dialog-provider,
    fluent-tooltip-provider,
    fluent-message-bar-provider,
    fluent-menu-provider { display: none !important; }

    .app-shell,
    .app-body,
    .content {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        color: #111827 !important;
        grid-template-columns: 1fr !important;
    }

    .receipt-sheet {
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        page-break-inside: avoid;
    }
}