/* Generic pointer affordance for clickable non-button elements (e.g. trust
   insight cards opening their provenance drill-down). */
.cursor-pointer { cursor: pointer; }

/* Prevent page-level scrolling when master-detail layout is active */
html:has(.master-detail-container),
html:has(.master-detail-container) body,
html:has(.master-detail-container) #kvapp {
    overflow: hidden !important;
    max-height: 100vh !important;
}

/* Remove uppercase button and navbar text from Sandstone theme */
.btn, .navbar .nav-link {
    text-transform: none;
}

/* Fix grey dropdown items and uppercase text in Sandstone theme */
.dropdown-menu .dropdown-item {
    color: #325D88;  /* Sandstone primary color */
    text-transform: none;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    color: #325D88;
    background-color: #f8f5f0;  /* Sandstone light background */
}

/* Sticky navbar - ensure background covers content when scrolling */
.navbar.sticky-top {
    background-color: #f8f5f0;  /* Sandstone light background */
    z-index: 1020;
}

/* Column header gear icon: overlay in top-right, visible on hover */
.tabulator-col .col-gear-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    font-size: 0.75rem;
    transition: opacity 0.15s;
}
.tabulator-col:hover .col-gear-btn {
    opacity: 0.5;
}
.tabulator-col .col-gear-btn:hover {
    opacity: 1 !important;
}

/* Tabulator sort icons: hide arrow when unsorted */
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-sorter {
    display: none;
}

/* Sticky toolbar for browse/list views */
.browse-toolbar-sticky {
    position: sticky;
    top: 56px;  /* navbar height */
    background-color: #f8f5f0;
    z-index: 1010;
    flex-shrink: 0;
}

/* In master-detail mode, toolbar is in a flex column — no sticky needed */
html:has(.master-detail-container) .browse-toolbar-sticky {
    position: static;
}

/* Master/detail row selection */
.tabulator-row.tabulator-selected {
    background-color: #cfe2ff !important;
}

/* Detail panel headers */
.detail-panel-header {
    padding: 0.4rem 0.75rem;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f5f0;
    flex-shrink: 0;
}

/* Branch banner — shown when a branch is active */
.branch-banner {
    background-color: #fff3cd;  /* Bootstrap warning yellow */
    border-bottom: 1px solid #ffc107;
    font-size: 0.9rem;
    position: sticky;
    top: 56px;  /* below navbar */
    z-index: 1015;
}

/* Branch active tint — subtle background on main content area */
.branch-active-tint {
    background-color: #fffbf0;
    min-height: 100vh;
}

/* Sticky form buttons - always visible at bottom */
.form-buttons-sticky {
    position: sticky;
    bottom: 0;
    background-color: #f8f5f0;  /* Sandstone light background */
    padding: 1rem 0;
    margin-top: 1rem;
    border-top: 1px solid #dee2e6;
    z-index: 10;
}

/* Form content needs bottom padding so the last field isn't hidden
   behind the sticky button bar when scrolled to the bottom. */
.form-content {
    padding-bottom: 5rem;
}

/* ============================================================
   F.8 + F.9 — theme tokens (M.7 wiring) and demo brand identity.

   Light tokens (default) define the demo brand: a warm-paper
   palette with deep teal primary, amber accent, Inter/Fraunces
   typography, and a soft shadow / radius profile. Dark mode lives
   under [data-theme="dark"].

   Tenants override at the `--brand-*` layer; the surface and tone
   tokens stay stable so component CSS doesn't have to react.
   ============================================================ */
:root {
    /* Brand palette — deep teal anchors authority; amber accent for KPIs and highlights. */
    --brand-primary: #115e6c;
    --brand-primary-hover: #0d4d59;
    --brand-primary-soft: #d8eaee;       /* tint for selected rows, focus rings */
    --brand-primary-fg: #ffffff;

    /* Default Light — warm cream rail, distinct from canvas but light */
    --chrome-rail-bg: #f4ead4;
    --chrome-rail-fg: #20272f;
    --chrome-rail-fg-muted: #6f7a87;
    --chrome-rail-hover-bg: #ede0c2;
    --chrome-rail-active-fg: #115e6c;
    --chrome-rail-border: #d4c8a6;
    --chrome-rail-border-soft: #e3dccb;
    --brand-accent: #c98a3f;             /* warm amber */
    --brand-accent-hover: #b1762e;
    --brand-accent-soft: #f4e7d2;
    --brand-accent-fg: #2c1d05;

    /* Surfaces — warm paper rather than clinical white. */
    --surface-bg: #fbf7ef;               /* page bg: very warm off-white */
    --surface-fg: #20272f;
    --surface-muted: #6f7a87;
    --surface-card: #ffffff;
    --surface-card-side: #f6efe1;        /* side rail / footer rows: paper tint */
    --surface-border: #e3dccb;
    --surface-divider: #ece5d3;
    --surface-row-hover: #f1eadb;
    --surface-input-bg: #ffffff;
    --surface-input-disabled-bg: #f6efe1;
    --surface-shadow: 0 1px 3px rgba(20, 25, 35, 0.06), 0 1px 2px rgba(20, 25, 35, 0.04);
    --surface-shadow-lg: 0 4px 16px rgba(20, 25, 35, 0.08), 0 2px 6px rgba(20, 25, 35, 0.05);

    /* Tones — anchored to brand. Muted is paper-tinted. */
    --tone-success-bg: #2a7d4f;
    --tone-success-fg: #ffffff;
    --tone-danger-bg: #b8404a;
    --tone-danger-fg: #ffffff;
    --tone-warning-bg: #d49025;
    --tone-warning-fg: #2c1d05;
    --tone-info-bg: var(--brand-primary);
    --tone-info-fg: #ffffff;
    --tone-secondary-bg: #6f7a87;
    --tone-secondary-fg: #ffffff;
    --tone-muted-bg: #ece5d3;
    --tone-muted-fg: #5b6573;

    /* Typography */
    --font-base-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-headline-family: "Fraunces", Georgia, "Times New Roman", serif;
    --font-numeric-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --font-base: 14px;
    --font-small: 0.875rem;
    --font-label: 0.85rem;

    /* Radius + shadow */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;

    /* Motion */
    --motion-fast: 150ms;
    --motion-standard: 250ms;

    /* ----------------------------------------------------------------
       Density tokens — wired to ThemeTokens.Density (M.7) via the
       [data-density="compact" | "comfortable"] attribute on <html>.
       Compact is the default; the user toggles in the navbar.

       Every component that wants density awareness reads these vars
       rather than hardcoding paddings — so flipping density flips the
       whole UI in one place.
       ---------------------------------------------------------------- */
    --row-height: 36px;          /* table row height */
    --cell-padding-y: 6px;       /* table cell vertical padding */
    --cell-padding-x: 10px;      /* table cell horizontal padding */
    --form-row-gap: 0.4rem;      /* vertical gap between form rows */
    --form-col-gap: 0.85rem;     /* horizontal gap inside a row */
    --header-band-h: 44px;       /* page-header band height target */
    --toolbar-band-h: 44px;      /* browse toolbar band height target */
    --action-icon-size: 1.05rem; /* ghost-icon size in cells */
    --action-icon-padding: 0.25rem;
    --form-control-py: 0.3rem;   /* input padding-y */
    --card-padding: 0.85rem;
    --base-font-size: 13px;
}

[data-density="comfortable"] {
    --row-height: 48px;
    --cell-padding-y: 12px;
    --cell-padding-x: 14px;
    --form-row-gap: 0.7rem;
    --form-col-gap: 1rem;
    --header-band-h: 56px;
    --toolbar-band-h: 56px;
    --action-icon-size: 1.15rem;
    --action-icon-padding: 0.4rem;
    --form-control-py: 0.45rem;
    --card-padding: 1.1rem;
    --base-font-size: 14px;
}

[data-theme="dark"] {
    /* Slightly desaturated brand for night reading. Tones brighten to
       stay legible on dark surfaces. */
    --brand-primary: #4ba6b8;
    --brand-primary-hover: #5fb7c8;
    --brand-primary-soft: #1d3a40;
    --brand-accent: #e3a55a;
    --brand-accent-hover: #ecb878;
    --brand-accent-soft: #3a2c14;

    /* Default Dark — graphite teal */
    --chrome-rail-bg: #14282d;
    --chrome-rail-fg: #d8eaee;
    --chrome-rail-fg-muted: rgba(216, 234, 238, 0.55);
    --chrome-rail-hover-bg: rgba(255, 255, 255, 0.06);
    --chrome-rail-active-fg: #4ba6b8;
    --chrome-rail-border: #0a1c20;
    --chrome-rail-border-soft: rgba(255, 255, 255, 0.06);

    --surface-bg: #161a1f;
    --surface-fg: #e6e8eb;
    --surface-muted: #9ba2ad;
    --surface-card: #1d2127;
    --surface-card-side: #1a1e23;
    --surface-border: #303640;
    --surface-divider: #262b32;
    --surface-row-hover: #262d36;
    --surface-input-bg: #1d2127;
    --surface-input-disabled-bg: #1a1e23;
    --surface-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    --surface-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
    --tone-muted-bg: #2a2f37;
    --tone-muted-fg: #c0c5cd;
}

/* ────────────────────────────────────────────────────────────────────
   Phase F.14.3 — extra theme presets, inspired by
   https://styles.refero.design/. Each preset overrides the same brand
   + surface tokens; structural CSS rules across the rest of the file
   (dropdowns, tabs, cards, calendar, ...) consume the variables and
   pick up the new look automatically.

   These are LIGHT-WEIGHT mappings — they don't pull custom fonts,
   bespoke shadows, or per-component decorations from the source
   designs. The point is to give Pascal a quick visual sweep across
   options; we tune the specific theme he picks afterwards.
   ──────────────────────────────────────────────────────────────────── */

/* ── Reworkd — clean data grid on soft sky gradient ───────────────── */
[data-theme="reworkd"] {
    --brand-primary: #3e79ea;
    --brand-primary-hover: #3161df;
    --brand-primary-soft: #e7f0ff;
    --brand-primary-fg: #ffffff;
    --brand-accent: #3e9ed0;
    --brand-accent-hover: #2f8cbe;
    --brand-accent-soft: #d6ecf7;
    --brand-accent-fg: #ffffff;

    --surface-bg: #eaf2ff;          /* sky tint, more saturated */
    --surface-fg: #1a1f2b;
    --surface-muted: #6b7280;
    --surface-card: #ffffff;
    --surface-card-side: #d8e6fa;
    --surface-border: #c5d4ed;
    --surface-divider: #d8e2f0;
    --surface-row-hover: #dde9fc;
    --surface-input-bg: #ffffff;
    --surface-input-disabled-bg: #f5f9ff;
    --surface-shadow: rgba(63, 70, 75, 0.06) 0 2px 4px;
    --surface-shadow-lg: rgba(63, 70, 75, 0.10) 0 21px 44px -32px;

    /* Reworkd — cool sky-tinted light rail */
    --chrome-rail-bg: #d5e3f7;
    --chrome-rail-fg: #1a1f2b;
    --chrome-rail-fg-muted: #6b7280;
    --chrome-rail-hover-bg: #c4d4ed;
    --chrome-rail-active-fg: #3e79ea;
    --chrome-rail-border: #b3c5e3;
    --chrome-rail-border-soft: #c5d4ed;

    /* Reworkd — geometric humanist sans (similar to Suisse Intl). */
    --font-base-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
    --font-headline-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

    /* Reworkd — multi-layered shadows for the soft depth signature. */
    --surface-shadow: 0 1px 2px rgba(63, 70, 75, 0.05), 0 2px 4px rgba(63, 70, 75, 0.04);
    --surface-shadow-lg: 0 4px 12px rgba(63, 70, 75, 0.10), 0 12px 28px -12px rgba(63, 70, 75, 0.18);
}

/* ── Apple — gallery wall at natural light ────────────────────────── */
[data-theme="apple"] {
    --brand-primary: #0071e3;       /* Azure */
    --brand-primary-hover: #0066cc; /* Cobalt Link */
    --brand-primary-soft: #e6f0fa;
    --brand-primary-fg: #ffffff;
    --brand-accent: #1d1d1f;        /* Ink — used for chips / muted CTAs */
    --brand-accent-hover: #2d2d2f;
    --brand-accent-soft: #f5f5f7;
    --brand-accent-fg: #ffffff;

    --surface-bg: #f5f5f7;          /* Fog */
    --surface-fg: #1d1d1f;          /* Ink */
    --surface-muted: #6e6e73;
    --surface-card: #ffffff;        /* Snow */
    --surface-card-side: #ebebef;
    --surface-border: #d2d2d7;
    --surface-divider: #e8e8ed;
    --surface-row-hover: #e4e4e8;
    --surface-input-bg: #ffffff;
    --surface-input-disabled-bg: #f5f5f7;
    --surface-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
    --surface-shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.06);

    /* Apple — clean fog rail, white card, signature minimalism */
    --chrome-rail-bg: #ebebef;
    --chrome-rail-fg: #1d1d1f;
    --chrome-rail-fg-muted: #6e6e73;
    --chrome-rail-hover-bg: #dedee2;
    --chrome-rail-active-fg: #0071e3;
    --chrome-rail-border: #c8c8cd;
    --chrome-rail-border-soft: #d2d2d7;

    /* Apple — native SF on macOS / iOS, Inter elsewhere. Zero load. */
    --font-base-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif;
    --font-headline-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif;

    /* Apple — softer card radii (their signature) + flat panels (no shadows;
     * elevation comes from contrast between surface tones). */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --surface-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
    --surface-shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* ── Augen Pro — architectural blueprint on white ─────────────────── */
[data-theme="augen"] {
    --brand-primary: #0f1012;       /* Midnight Ink — primary CTA = strong dark */
    --brand-primary-hover: #2a2c30;
    --brand-primary-soft: #e8e8ec;
    --brand-primary-fg: #fdfdfd;
    --brand-accent: #0071e3;        /* Future Blue — interactive accents */
    --brand-accent-hover: #2384ee;
    --brand-accent-soft: #e6f0fa;
    --brand-accent-fg: #ffffff;

    --surface-bg: #f2f2f4;          /* Ghost White */
    --surface-fg: #0f1012;          /* Midnight Ink */
    --surface-muted: #8f8f8f;
    --surface-card: #fdfdfd;        /* Canvas */
    --surface-card-side: #dcdcdf;
    --surface-border: #c4c4c8;
    --surface-divider: #d8d8dc;
    --surface-row-hover: #d4d4d8;
    --surface-input-bg: #fdfdfd;
    --surface-input-disabled-bg: #f2f2f4;
    --surface-shadow: 0 0 0 1px rgba(15, 16, 18, 0.06);
    --surface-shadow-lg: 0 0 0 1px rgba(15, 16, 18, 0.08);

    /* Augen Pro — architectural blueprint, ghost-white rail with stark borders */
    --chrome-rail-bg: #e6e6ea;
    --chrome-rail-fg: #0f1012;
    --chrome-rail-fg-muted: #6f6f73;
    --chrome-rail-hover-bg: #d4d4d8;
    --chrome-rail-active-fg: #0071e3;
    --chrome-rail-border: #b8b8bc;
    --chrome-rail-border-soft: #c8c8cc;

    /* Augen Pro — geometric grotesk (similar to PP Neue Montreal). */
    --font-base-family: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
    --font-headline-family: "Space Grotesk", "Inter", system-ui, sans-serif;

    /* Augen Pro — sharp, architectural radii + flat panels (precision). */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --surface-shadow: 0 0 0 1px rgba(15, 16, 18, 0.10);
    --surface-shadow-lg: 0 0 0 1px rgba(15, 16, 18, 0.14);
}

/* Apply theme variables to body and form chrome. */
body {
    background-color: var(--surface-bg);
    color: var(--surface-fg);
    font-family: var(--font-base-family);
    font-size: var(--base-font-size);
    font-feature-settings: "ss01", "cv11";  /* Inter stylistic alts: rounded a, single-storey g */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[data-theme="dark"] body { color-scheme: dark; }

/* D.1 — density-aware Tabulator: cell padding + row height pulled from
   the density tokens. Compact = MEG-tight; comfortable = the previous
   spacious default. */
.tabulator .tabulator-row { min-height: var(--row-height); }
.tabulator .tabulator-row .tabulator-cell {
    padding: var(--cell-padding-y) var(--cell-padding-x);
}
.tabulator .tabulator-header .tabulator-col {
    padding-top: var(--cell-padding-y);
    padding-bottom: var(--cell-padding-y);
}

/* Density-aware form controls. */
.form-control, .form-select, textarea.form-control {
    padding-top: var(--form-control-py);
    padding-bottom: var(--form-control-py);
}

/* Density-aware form grid (F.1) — keep the column count, tighten the gaps. */
.form-grid { row-gap: var(--form-row-gap); column-gap: var(--form-col-gap); }
.form-grid-cell .form-group,
.form-grid-cell .mb-3 { margin-bottom: var(--form-row-gap) !important; }

/* D.3 — tighten the label-above-input gap in compact mode. KVision
   wraps every form control in a `.form-group` and renders the label
   with a default 8 px bottom margin; that adds ~10 px of dead space
   per field on a dense form. */
.form-grid-cell .form-group > label,
.form-grid-cell .form-group > .form-label {
    margin-bottom: 2px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--surface-muted);
    line-height: 1.2;
    text-transform: none;
}
[data-density="comfortable"] .form-grid-cell .form-group > label,
[data-density="comfortable"] .form-grid-cell .form-group > .form-label {
    margin-bottom: 4px;
    font-size: 0.85rem;
}

/* Density-aware card padding. */
.card-body { padding: var(--card-padding); }
.card-header { padding: var(--cell-padding-y) var(--card-padding); }

/* F.9 — headlines use Fraunces with a small optical-size tweak. */
h1, h2, h3, h4, h5, h6,
.headline, .navbar-brand {
    font-family: var(--font-headline-family);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.navbar-brand { font-size: 1.25rem; }

/* F.9 — tabular figures everywhere a number lives in a column / total / KPI. */
.tabulator-cell,
.line-table-totals,
.form-display-value,
.kpi-value,
.numeric { font-variant-numeric: tabular-nums; }
.line-table-totals { font-family: var(--font-base-family); }

/* Cards inherit the brand surface + a softer shadow than Bootstrap default. */
.card {
    background-color: var(--surface-card);
    border-color: var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--surface-shadow);
}
.card-header {
    background-color: transparent;
    border-bottom-color: var(--surface-divider);
    font-family: var(--font-headline-family);
    font-weight: 600;
}

/* F.9 brand-primary on Bootstrap utility classes that Bootswatch ships. */
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-primary-fg);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
    color: var(--brand-primary-fg) !important;
}
.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-outline-primary:hover {
    background-color: var(--brand-primary);
    color: var(--brand-primary-fg);
}
a, .text-primary { color: var(--brand-primary); }

/* Form controls: slightly softer radius, focus ring uses brand-primary-soft. */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--surface-border);
    background-color: var(--surface-input-bg);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem var(--brand-primary-soft);
}
.form-control:disabled, .form-control[readonly] {
    background-color: var(--surface-input-disabled-bg);
}

/* Navbar — paper background, brand wordmark accents. */
.navbar.navbar-light, .navbar.bg-light, .navbar {
    background-color: var(--surface-card) !important;
    border-bottom: 1px solid var(--surface-border);
    box-shadow: var(--surface-shadow);
}

/* Brand mark — every navbar gets a small brand square before the
   wordmark, painted with the brand-primary / brand-accent diagonal.
   No Kotlin change needed; the pseudo-element rides on the existing
   `.navbar-brand` element KVision renders. */
.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--surface-fg);
}
.navbar-brand::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    background:
        linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary) 60%, var(--brand-accent) 60%, var(--brand-accent) 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* Status badges pick up the brand tones. */
.badge {
    font-family: var(--font-base-family);
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: var(--radius-sm);
    padding: 0.35em 0.7em;
}
.badge.bg-primary { background-color: var(--brand-primary) !important; }
.badge.bg-success { background-color: var(--tone-success-bg) !important; color: var(--tone-success-fg) !important; }
.badge.bg-danger { background-color: var(--tone-danger-bg) !important; color: var(--tone-danger-fg) !important; }
.badge.bg-warning { background-color: var(--tone-warning-bg) !important; color: var(--tone-warning-fg) !important; }
.badge.bg-secondary { background-color: var(--tone-secondary-bg) !important; color: var(--tone-secondary-fg) !important; }
.badge.bg-light { background-color: var(--tone-muted-bg) !important; color: var(--tone-muted-fg) !important; }

/* Tabulator: tighter headers, no Bootstrap-blue selected state, brand row hover. */
.tabulator { border-radius: var(--radius-md); }
.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col {
    background-color: var(--surface-card-side);
    color: var(--surface-fg);
    border-color: var(--surface-border);
    font-family: var(--font-base-family);
    font-weight: 600;
    letter-spacing: 0.01em;
}
.tabulator .tabulator-row { border-color: var(--surface-divider); }
.tabulator .tabulator-row.tabulator-selected,
.tabulator .tabulator-row:hover { background-color: var(--surface-row-hover) !important; }

/* Line-table totals row uses the warm paper tint. */
.line-table-totals { color: var(--surface-muted); }

/* Sticky button bar inherits the page tone. */
.form-buttons-sticky {
    background-color: var(--surface-card-side);
    border-top: 1px solid var(--surface-border);
}

/* Empty state: paint the icon with brand-primary at low opacity. */
.empty-state-icon { color: var(--brand-primary); opacity: 0.55; }
.empty-state-title { font-family: var(--font-headline-family); }

/* F.10 — page header at the top of every entity screen. Title in the
   brand serif (Fraunces); subtitle in body sans for the entity
   identifier or count. */
.page-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 1rem 0.5rem 0.75rem;
    border-bottom: 1px solid var(--surface-divider);
    margin-bottom: 0.5rem;
}
.page-title {
    font-family: var(--font-headline-family);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0;
    /* Phase F.14.4 — title uses the theme's brand colour for instant
     * recognisability across themes (was just surface-fg = same on all). */
    color: var(--brand-primary);
    letter-spacing: -0.01em;
}
.page-subtitle {
    color: var(--surface-muted);
    font-size: 0.95rem;
    font-feature-settings: "tnum";
}
/* Browse pages render the subtitle as a bare count next to the title;
 * Phase F.14.4 — count chip uses brand-soft so each theme tints it. */
.page-header[data-screen-kind="browse"] .page-subtitle {
    display: inline-flex;
    align-items: center;
    background-color: var(--brand-primary-soft);
    color: var(--brand-primary);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.3;
}
[data-theme="dark"] .page-header { border-bottom-color: var(--surface-divider); }

/* AI chat panel: header uses brand. */
.chat-panel { border-radius: 0; box-shadow: var(--surface-shadow-lg); }
.chat-header {
    background-color: var(--brand-primary);
    color: var(--brand-primary-fg);
    border-bottom-color: var(--brand-primary-hover);
    font-family: var(--font-headline-family);
}
.chat-close { color: rgba(255,255,255,0.85) !important; }
.chat-close:hover { color: #ffffff !important; }
.chat-message-user { background-color: var(--brand-primary-soft); color: var(--surface-fg); }
.chat-message-assistant { background-color: var(--surface-card-side); }

/* Catch-all: under dark mode, every Bootstrap card and the inner body /
   header / footer surfaces switch to the dark palette so individual
   class overrides don't have to repeat the same rule. */
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background-color: var(--surface-card) !important;
    color: var(--surface-fg) !important;
    border-color: var(--surface-border) !important;
}
[data-theme="dark"] .form-layout-side .card,
[data-theme="dark"] .form-layout-side .card-body,
[data-theme="dark"] .form-layout-side .card-header {
    background-color: var(--surface-card-side) !important;
}

/* Cards inherit the theme's surface colors. */
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header {
    background-color: var(--surface-card);
    color: var(--surface-fg);
    border-color: var(--surface-border);
}
[data-theme="dark"] .form-content,
[data-theme="dark"] .form-buttons-sticky { background-color: var(--surface-bg); border-color: var(--surface-border); }
[data-theme="dark"] .form-buttons-sticky { background-color: var(--surface-card-side); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea {
    background-color: var(--surface-input-bg);
    color: var(--surface-fg);
    border-color: var(--surface-border);
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--surface-input-disabled-bg);
    color: var(--surface-muted);
}
[data-theme="dark"] .navbar { background-color: var(--surface-card) !important; border-bottom-color: var(--surface-border); }
[data-theme="dark"] .navbar .nav-link { color: var(--surface-fg) !important; }
[data-theme="dark"] .navbar .nav-link:hover { background-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .navbar .navbar-brand { color: var(--surface-fg); }
[data-theme="dark"] .tabulator,
[data-theme="dark"] .tabulator-row,
[data-theme="dark"] .tabulator-header { background-color: var(--surface-card) !important; color: var(--surface-fg); border-color: var(--surface-border); }
[data-theme="dark"] .tabulator-row:hover { background-color: var(--surface-row-hover) !important; }
[data-theme="dark"] .tabulator .tabulator-col,
[data-theme="dark"] .tabulator .tabulator-row .tabulator-cell { background-color: var(--surface-card); color: var(--surface-fg); border-color: var(--surface-border); }
[data-theme="dark"] .form-display-field { border-bottom-color: var(--surface-divider); }
[data-theme="dark"] .form-display-label { color: var(--surface-muted); }
[data-theme="dark"] .form-display-value { color: var(--surface-fg); }
[data-theme="dark"] .empty-state-panel { color: var(--surface-muted); }
[data-theme="dark"] .empty-state-icon { color: var(--surface-muted); }
[data-theme="dark"] .form-layout-side .card { background-color: var(--surface-card-side) !important; color: var(--surface-fg); border-color: var(--surface-border) !important; }
[data-theme="dark"] .bg-light { background-color: var(--surface-card-side) !important; color: var(--surface-fg) !important; }
[data-theme="dark"] .navbar.navbar-light,
[data-theme="dark"] .navbar.bg-light {
    background-color: var(--surface-card) !important;
    border-bottom: 1px solid var(--surface-border);
}
[data-theme="dark"] .navbar.navbar-light .navbar-brand,
[data-theme="dark"] .navbar.navbar-light .nav-link,
[data-theme="dark"] .navbar.bg-light .navbar-brand,
[data-theme="dark"] .navbar.bg-light .nav-link { color: var(--surface-fg) !important; }
[data-theme="dark"] .tabulator,
[data-theme="dark"] .tabulator .tabulator-tableholder,
[data-theme="dark"] .tabulator-row,
[data-theme="dark"] .tabulator .tabulator-row .tabulator-cell {
    background-color: var(--surface-card) !important;
    color: var(--surface-fg) !important;
    border-color: var(--surface-border) !important;
}
[data-theme="dark"] .tabulator .tabulator-row.tabulator-row-even {
    background-color: var(--surface-card-side) !important;
}
[data-theme="dark"] .tabulator .tabulator-header,
[data-theme="dark"] .tabulator .tabulator-header .tabulator-col,
[data-theme="dark"] .tabulator .tabulator-header .tabulator-col-content {
    background-color: var(--surface-card-side) !important;
    color: var(--surface-fg) !important;
    border-color: var(--surface-border) !important;
}
[data-theme="dark"] .tabulator .tabulator-row:hover { background-color: var(--surface-row-hover) !important; }
[data-theme="dark"] .browse-toolbar-sticky,
[data-theme="dark"] .form-buttons-sticky {
    background-color: var(--surface-card-side) !important;
    border-color: var(--surface-border) !important;
}
[data-theme="dark"] .text-muted { color: var(--surface-muted) !important; }
[data-theme="dark"] .badge.bg-light { background-color: var(--surface-input-disabled-bg) !important; color: var(--surface-fg) !important; }
[data-theme="dark"] hr,
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end { border-color: var(--surface-border) !important; }
[data-theme="dark"] .chat-panel { background-color: var(--surface-card); border-left-color: var(--surface-border); color: var(--surface-fg); }
[data-theme="dark"] .chat-header { background-color: var(--surface-card-side); border-bottom-color: var(--surface-border); }

/* Demo-brand primary button accent in light + dark. */
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-primary-fg);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

/* Calendar — match base font. F.8 fixes item 4. */
.rbc-calendar { font-size: var(--font-base); font-family: inherit; }
.rbc-toolbar { font-size: var(--font-base); }
.rbc-toolbar button { font-size: var(--font-small); }

/* Phase F.3 — make table rows obviously clickable. Cursor and hover
   tint signal that clicking the row opens the entity's $view. The
   action column stays interactive on its own. */
.tabulator .tabulator-row { cursor: pointer; }
.tabulator .tabulator-row:hover { background-color: #f1f3f5; }

/* F.7 — keep navbar hover legible. Bootstrap's default :hover bumps
   font-weight which shifts the layout slightly and reads "bold-ugly"
   against the light navbar. Use a background tint instead. */
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
    font-weight: inherit;
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 0.25rem;
}

/* F.7 — the Ask-AI element is a <button> styled with `nav-link`. On
   mobile the navbar collapses and Bootstrap's button defaults centre
   the text and constrain width, breaking alignment with the sibling
   navLink anchors. Override so it reads as a regular nav row. */
.navbar button.nav-link {
    text-align: left !important;
    width: 100% !important;
    border: 0 !important;
    background-color: transparent !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    display: block !important;
    color: var(--surface-fg) !important;
    box-shadow: none !important;
}
.navbar button.nav-link:hover,
.navbar button.nav-link:focus {
    background-color: rgba(0, 0, 0, 0.04) !important;
}
@media (min-width: 992px) {
    /* On wide viewports keep the natural button width — only on the
       collapsed (hamburger) layout do we want the full-row pattern. */
    .navbar button.nav-link {
        width: auto !important;
        display: inline-flex !important;
        align-items: center;
        text-align: center !important;
    }
}

/* Phase M.2h / F.5 — main column + side rail layout. The MAIN column
   takes the remaining space; the SIDE rail is fixed-width on desktop
   and collapses below the main column on narrow viewports. */
.form-layout {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 320px);
    column-gap: 1.5rem;
    align-items: start;
}
.form-layout-main { min-width: 0; }
.form-layout-side { min-width: 0; }
.form-layout-side .card { background-color: #f8f9fa; }
@media (max-width: 900px) {
    .form-layout { grid-template-columns: 1fr; }
}

/* D.2 — ghost-icon action buttons inside list cells. Borderless,
   transparent, hover background. Density-aware sizing. Replaces the
   chunky solid-coloured buttons that used to dominate every row. */
.row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--surface-muted);
    padding: var(--action-icon-padding);
    border-radius: var(--radius-sm);
    cursor: pointer;
    line-height: 1;
    margin: 0 1px;
}
.row-action i {
    font-size: var(--action-icon-size);
    display: inline-block;
}
.row-action:hover, .row-action:focus {
    color: var(--brand-primary);
    background-color: var(--brand-primary-soft);
    outline: none;
}
.row-action.row-action-text {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    color: var(--brand-primary);
}
[data-theme="dark"] .row-action {
    color: var(--surface-muted);
}
[data-theme="dark"] .row-action:hover {
    color: var(--brand-primary);
    background-color: var(--brand-primary-soft);
}

/* F.4 — display-only widget for computed money / percentage. Reads
   like a label + bold value pair, lives nicely in the side rail. */
.form-display-field {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.35rem 0;
    gap: 0.75rem;
    border-bottom: 1px dashed #dee2e6;
}
.form-display-field:last-child { border-bottom: none; }
.form-display-label {
    color: #495057;
    font-size: 0.9rem;
}
.form-display-value {
    font-weight: 600;
    color: #212529;
    text-align: right;
}

/* Phase F.1 — 12-column grid inside every form block.
   Field cells span 3 / 4 / 6 / 8 / 12 columns based on widthHint
   (resolved by EntityFormBuilder.widthClassFor). On viewports below
   720 px every cell collapses to full width. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 1rem;
    row-gap: 0.5rem;
    align-items: start;
}
.form-grid-cell { min-width: 0; }
.form-grid-w-3  { grid-column: span 3; }
.form-grid-w-4  { grid-column: span 4; }
.form-grid-w-6  { grid-column: span 6; }
.form-grid-w-8  { grid-column: span 8; }
.form-grid-w-12 { grid-column: span 12; }
@media (max-width: 720px) {
    .form-grid-w-3,
    .form-grid-w-4,
    .form-grid-w-6,
    .form-grid-w-8,
    .form-grid-w-12 { grid-column: span 12; }
}
/* Tighter vertical rhythm inside grid cells. */
.form-grid-cell .form-group,
.form-grid-cell .mb-3 { margin-bottom: 0.5rem !important; }

/* Empty-state panel — shown inline below the list table when no rows. */
.empty-state-panel {
    text-align: center;
    padding: 3rem 2rem;
    color: #495057;
}
.empty-state-icon {
    font-size: 3rem;
    color: #adb5bd;
    margin-bottom: 0.5rem;
}
.empty-state-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.empty-state-subtitle {
    font-size: 0.95rem;
}

/* AI Chat Panel — overlay on right edge, does not push main content.
   z-index above the sticky browse toolbar (1015) so the header is visible. */
.chat-panel { position: fixed; right: 0; top: 60px; bottom: 0; width: 420px; background: white; border-left: 1px solid #c8c8c8; box-shadow: -4px 0 12px rgba(0,0,0,0.12); display: flex; flex-direction: column; z-index: 1020; }
.chat-header { padding: 12px 16px; border-bottom: 1px solid #dee2e6; background: #f8f9fa; display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.chat-close { background: transparent !important; border: none !important; color: #495057 !important; padding: 0 8px !important; line-height: 1 !important; }
.chat-close:hover { color: #000 !important; }
.chat-close { background: none; border: none; font-size: 20px; cursor: pointer; padding: 0 8px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-message { padding: 8px 12px; border-radius: 8px; max-width: 90%; }
.chat-message-user { background: #d0e7ff; margin-left: auto; white-space: pre-wrap; }
.chat-message-assistant { background: #f0f0f0; }
.chat-message-assistant p { margin: 0 0 0.4em 0; }
.chat-message-assistant p:last-child { margin-bottom: 0; }
.chat-message-assistant pre { background: #e0e0e0; padding: 6px 8px; border-radius: 4px; overflow-x: auto; font-size: 0.85em; }
.chat-message-assistant code { background: #e0e0e0; padding: 1px 4px; border-radius: 3px; font-size: 0.85em; }
.chat-message-assistant pre code { background: none; padding: 0; }
.chat-message-assistant ul, .chat-message-assistant ol { margin: 0.3em 0; padding-left: 1.5em; }
.chat-message-assistant table { border-collapse: collapse; margin: 0.3em 0; font-size: 0.9em; }
.chat-message-assistant th, .chat-message-assistant td { border: 1px solid #ccc; padding: 3px 6px; }
.chat-tool-activity { font-size: 0.75em; color: #666; font-family: monospace; padding: 2px 8px; border-left: 2px solid #ccc; margin-left: 4px; }
.chat-thinking { font-style: italic; color: #888; padding: 8px 12px; }
.chat-input-row { border-top: 1px solid #eee; padding: 12px; display: flex; gap: 8px; align-items: flex-end; }
.chat-input-row .form-group { flex: 1; margin-bottom: 0; }
.chat-input-row textarea { flex: 1; }
.chat-clear-row { padding: 4px 12px; border-top: 1px solid #f5f5f5; text-align: center; }

/* Review-changes card (rendered inside the chat panel when the AI proposes modifications) */
.chat-review-card { padding: 8px 12px; background: #fffbe6; border: 1px solid #ffe58f; border-radius: 6px; margin: 4px 0; }

/* Risk-warning card — rendered in the chat when the agent emits a risk-warning block. */
.chat-risk-card { padding: 10px 12px; border-radius: 6px; margin: 4px 0; border-width: 1px; border-style: solid; }
.chat-risk-card-low { background: #f4f6f8; border-color: #ced4da; color: #383d41; }
.chat-risk-card-medium { background: #e8f0ff; border-color: #a8c5f0; color: #0b3c8a; }
.chat-risk-card-high { background: #fff3cd; border-color: #ffeeba; color: #856404; }
.chat-risk-card-critical { background: #f8d7da; border-color: #f5c6cb; color: #721c24; }
.chat-risk-summary { font-weight: 600; display: flex; align-items: center; }
.chat-risk-icon { margin-right: 6px; }
.chat-risk-bullets { font-size: 0.9em; }
.chat-risk-bullets ul { margin: 6px 0 0 0; padding-left: 20px; }
.chat-risk-bullets p { margin: 6px 0; }
.chat-risk-bullets code { background: rgba(0, 0, 0, 0.08); padding: 2px 6px; border-radius: 4px; font-size: 0.95em; }
.chat-critical-gate { display: flex; flex-direction: column; gap: 6px; }
.chat-critical-gate input { font-family: monospace; }

/* Ask-user question card. */
.chat-ask-user-card { padding: 10px 12px; background: #eef4ff; border: 1px solid #c7d7f3; border-radius: 6px; margin: 4px 0; }
.chat-ask-user-question { font-weight: 600; margin-bottom: 6px; }
.chat-ask-user-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-ask-user-choice { white-space: normal; text-align: left; }

/* Risk criticality badges */
.risk-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.75em; font-weight: 600; line-height: 1.4; }
.risk-info { background: #e0e0e0; color: #555; }
.risk-low { background: #d4edda; color: #155724; }
.risk-medium { background: #fff3cd; color: #856404; }
.risk-high { background: #f8d7da; color: #721c24; }
.risk-critical { background: #dc3545; color: white; }

/* Review-changes modal content */
.review-summary { display: flex; align-items: center; border-bottom: 1px solid #eee; }
.review-warnings { border-bottom: 1px solid #eee; }
.review-group { border-bottom: 1px solid #eee; }
.review-group-header { cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; }
.review-group-header:hover { background: #f8f5f0; }
.review-group-details { background: #fafafa; }
.review-entity { border-top: 1px dashed #ddd; }
.review-entity:first-child { border-top: none; }
.review-entity-header { display: flex; align-items: center; }
.review-field-diff { padding: 2px 0; font-size: 0.9em; }
.review-old-value { color: #999; text-decoration: line-through; }
.review-new-value { color: #155724; font-weight: 500; }
.review-ai-instruction { font-style: italic; }

/* Branch banner (hidden when not active) */
.branch-banner { background: #fff3cd; border-bottom: 1px solid #ffe58f; }

/* ============================================================
   Phase F.14 — Chrome dispatch CSS
   ============================================================ */

/* ── SIDEBAR chrome ─────────────────────────────────────────── */
[data-chrome="sidebar"] #kvapp > .kv-panel:first-child {
    /* Let the layout div drive the structure */
    display: block;
}

.chrome-sidebar-layout {
    display: flex;
    height: 100vh;
    /* Phase F.14.4 — visible so chrome dropdowns can escape; the
     * inner content area carries its own scroll. */
    overflow: visible;
}

/* Fixed-width left rail.
 * Phase F.14.4 — the rail is painted with the theme's `--chrome-rail-*`
 * tokens. By default these resolve to the surface palette (back-compat
 * for any renderer that hasn't opted in), but every shipping theme
 * overrides them so each gets a distinctively-coloured sidebar — the
 * single biggest visual identifier between themes. */
.chrome-sidebar-rail {
    width: 240px;
    min-width: 240px;
    height: 100vh;
    position: sticky;
    top: 0;
    background-color: var(--chrome-rail-bg, var(--surface-card-side));
    color: var(--chrome-rail-fg, var(--surface-fg));
    border-right: 1px solid var(--chrome-rail-border, var(--surface-border));
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    flex-shrink: 0;
}

/* Brand area at top of rail — sits at the very top, separated by a
 * subtle inner-shadow border from the rest of the rail. */
.chrome-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--chrome-rail-border-soft, rgba(255, 255, 255, 0.08));
    min-height: 56px;
}
.chrome-sidebar-brand::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary) 60%, var(--brand-accent) 60%, var(--brand-accent) 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.chrome-sidebar-brand-name {
    font-family: var(--font-headline-family);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--chrome-rail-fg, var(--surface-fg));
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav section */
.chrome-sidebar-nav {
    padding: var(--space-sm) 0;
    flex: 1;
}

/* Individual nav item */
.chrome-sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    color: var(--chrome-rail-fg, var(--surface-fg)) !important;
    text-decoration: none !important;
    font-size: 0.875rem;
    border-radius: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color var(--motion-fast);
}
.chrome-sidebar-item:hover,
.chrome-sidebar-item:focus {
    background-color: var(--chrome-rail-hover-bg, var(--surface-row-hover));
    color: var(--chrome-rail-active-fg, var(--brand-primary)) !important;
}
.chrome-sidebar-item .bi {
    font-size: 1rem;
    min-width: 18px;
    text-align: center;
    color: var(--chrome-rail-fg-muted, var(--surface-muted));
}
.chrome-sidebar-item:hover .bi { color: var(--chrome-rail-active-fg, var(--brand-primary)); }

/* Divider between primary and secondary nav sections */
.chrome-sidebar-divider {
    height: 1px;
    background-color: var(--chrome-rail-border-soft, var(--surface-divider));
    margin: var(--space-xs) var(--space-lg);
}

/* Group header (accordion toggle) */
.chrome-sidebar-group {
    overflow: hidden;
}
.chrome-sidebar-group-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--chrome-rail-fg-muted, var(--surface-muted));
    cursor: pointer;
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    transition: background-color var(--motion-fast);
}
.chrome-sidebar-group-header:hover { background-color: var(--chrome-rail-hover-bg, var(--surface-row-hover)); }
.chrome-sidebar-group-header .bi:not(.chrome-sidebar-chevron) {
    min-width: 18px;
    text-align: center;
}

/* Chevron rotates when group is open */
.chrome-sidebar-chevron {
    font-size: 0.65rem;
    transition: transform var(--motion-standard);
    color: var(--chrome-rail-fg-muted, var(--surface-muted));
}

/* Collapsible children container */
.chrome-sidebar-group-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--motion-standard) ease;
}
.chrome-sidebar-group-items .chrome-sidebar-item {
    padding-left: calc(var(--space-lg) + 26px);
}

/* Right-side body: topbar + scrollable content.
 * Phase F.14.4 — kept overflow visible so chrome-topbar dropdowns
 * (theme picker, user picker) can escape vertically. The inner
 * content child below carries the actual scroll. */
.chrome-sidebar-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-width: 0;
    min-height: 0;
}

/* Slim top bar above content */
.chrome-sidebar-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 0 var(--space-lg);
    height: 56px;
    min-height: 56px;
    background-color: var(--surface-card);
    border-bottom: 1px solid var(--surface-border);
    box-shadow: var(--surface-shadow);
    position: sticky;
    top: 0;
    /* Phase F.14.4 — sit above .browse-toolbar-sticky (z=1010) so chrome
     * dropdowns aren't covered by the page-header search bar. The
     * topbar IS the navigation chrome and must win the stacking
     * contest with sticky page elements. */
    z-index: 1020;
    flex-shrink: 0;
    /* Phase F.14.4 — let dropdowns inside escape the chrome body's
     * overflow: hidden clipping. */
    overflow: visible;
}

/* Phase F.14.4 — chrome dropdowns sit above the page-header (z=80)
 * and any sticky table headers. Bootstrap's default is 1000 already,
 * but make this explicit so we don't fight Bootstrap-version drift. */
.theme-picker .dropdown-menu,
.chrome-sidebar-topbar .dropdown-menu,
.chrome-topbar-right .dropdown-menu {
    z-index: 2000;
}

/* Phase F.14.6 — chrome dropdowns must scroll when their content is
 * taller than the viewport. The Developer dropdown carries 12 items
 * (3 leaves + 4 Layout entries + 4 AI entries + Reset); on a smaller
 * browser window without this rule items below the viewport were
 * clipped with no scroll affordance. */
.navbar .dropdown-menu,
.theme-picker .dropdown-menu,
.chrome-sidebar-topbar .dropdown-menu,
.chrome-topbar-right .dropdown-menu {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}
.chrome-topbar-breadcrumb {
    display: flex;
    align-items: center;
    min-width: 0;
    flex-shrink: 1;
    color: var(--surface-muted);
    font-size: 0.875rem;
}
.chrome-topbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chrome-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

/* Scrollable content area */
.chrome-sidebar-body > .kv-panel:last-child,
.chrome-sidebar-body > div:not(.chrome-sidebar-topbar) {
    flex: 1;
    overflow-y: auto;
}

/* Dark mode for sidebar */
[data-theme="dark"] .chrome-sidebar-rail {
    background-color: var(--surface-card-side);
    border-right-color: var(--surface-border);
}
[data-theme="dark"] .chrome-sidebar-topbar {
    background-color: var(--surface-card);
    border-bottom-color: var(--surface-border);
}

/* Collapse to icon-only below 1024px (MultiRenderer: web targets desktop;
   below 1024 is edge case — don't fully break, just shrink the rail) */
@media (max-width: 1024px) {
    .chrome-sidebar-rail {
        width: 56px;
        min-width: 56px;
    }
    .chrome-sidebar-brand-name,
    .chrome-sidebar-item span:not(.bi),
    .chrome-sidebar-group-header span:not(.bi):not(.chrome-sidebar-chevron),
    .chrome-sidebar-chevron {
        display: none;
    }
    .chrome-sidebar-brand { justify-content: center; padding: var(--space-md); }
    .chrome-sidebar-item { justify-content: center; padding: var(--space-sm); }
    .chrome-sidebar-group-header { justify-content: center; padding: var(--space-sm); }
    .chrome-sidebar-group-items .chrome-sidebar-item { padding-left: var(--space-sm); }
}

/* ── HYBRID chrome ──────────────────────────────────────────── */
.chrome-hybrid-layout {
    display: flex;
    height: 100vh;
    /* Phase F.14.6 — visible so chrome-topbar dropdowns escape (same
     * fix as the sidebar layout). The inner content carries scroll. */
    overflow: visible;
}
.chrome-hybrid-rail {
    width: 64px;
    min-width: 64px;
    height: 100vh;
    position: sticky;
    top: 0;
    background-color: var(--surface-card-side);
    border-right: 1px solid var(--surface-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm) 0;
    z-index: 100;
    flex-shrink: 0;
}
.chrome-hybrid-brand-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary) 60%, var(--brand-accent) 60%, var(--brand-accent) 100%);
    margin-bottom: var(--space-sm);
    cursor: pointer;
}
.chrome-hybrid-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
}
.chrome-hybrid-rail-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    color: var(--surface-muted) !important;
    text-decoration: none !important;
    transition: background-color var(--motion-fast), color var(--motion-fast);
}
.chrome-hybrid-rail-item:hover { background-color: var(--brand-primary-soft); color: var(--brand-primary) !important; }
.chrome-hybrid-rail-item .bi { font-size: 1.2rem; }
.chrome-hybrid-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Phase F.14.6 — visible so dropdowns escape; inner content area
     * carries its own scroll (same pattern as sidebar chrome). */
    overflow: visible;
    min-width: 0;
    min-height: 0;
}
.chrome-hybrid-body > div:not(.chrome-hybrid-topbar) {
    flex: 1;
    overflow-y: auto;
}
.chrome-hybrid-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 0 var(--space-lg);
    height: 56px;
    min-height: 56px;
    background-color: var(--surface-card);
    border-bottom: 1px solid var(--surface-border);
    box-shadow: var(--surface-shadow);
    position: sticky;
    top: 0;
    /* z-index above .browse-toolbar-sticky (z=1010) so chrome dropdowns
     * are not covered by the page-header search bar. */
    z-index: 1020;
    flex-shrink: 0;
    overflow: visible;
}

/* ── SPOTLIGHT chrome ───────────────────────────────────────── */
.chrome-spotlight-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
.chrome-spotlight-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: 0 var(--space-lg);
    height: 56px;
    min-height: 56px;
    background-color: var(--surface-card);
    border-bottom: 1px solid var(--surface-border);
    box-shadow: var(--surface-shadow);
    z-index: 1020;
}
.chrome-spotlight-brand {
    flex-shrink: 0;
}
.chrome-spotlight-brand-name {
    font-family: var(--font-headline-family);
    font-weight: 600;
    font-size: 1rem;
    color: var(--surface-fg);
}
.chrome-spotlight-search-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}
.chrome-spotlight-input {
    width: 100%;
    max-width: 560px;
    padding: 0.4rem 1rem !important;
    border-radius: 999px !important;
    background-color: var(--surface-input-bg) !important;
    border: 1.5px solid var(--surface-border) !important;
    font-size: 0.9rem;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.chrome-spotlight-input:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--brand-primary-soft) !important;
}
.chrome-spotlight-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 560px;
    background-color: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--surface-shadow-lg);
    z-index: 1030;
    overflow: hidden;
}
.chrome-spotlight-suggestion-item {
    display: block;
    padding: var(--space-sm) var(--space-lg);
    color: var(--surface-fg) !important;
    text-decoration: none !important;
    font-size: 0.875rem;
    transition: background-color var(--motion-fast);
}
.chrome-spotlight-suggestion-item:hover { background-color: var(--surface-row-hover); color: var(--brand-primary) !important; }
.chrome-spotlight-right {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

/* ── AI Launchers ───────────────────────────────────────────── */

/* Top-bar search field */
.ai-topbar-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.ai-topbar-input {
    width: 100%;
    max-width: 480px;
    padding: 0.35rem 0.9rem !important;
    border-radius: 999px !important;
    background-color: var(--surface-input-bg) !important;
    border: 1.5px solid var(--surface-border) !important;
    font-size: 0.875rem;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.ai-topbar-input:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--brand-primary-soft) !important;
}

/* FAB — fixed circle, bottom-right */
.ai-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--brand-primary);
    color: var(--brand-primary-fg);
    border: none;
    box-shadow: var(--surface-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1050;
    transition: background-color var(--motion-fast), transform var(--motion-fast);
}
.ai-fab:hover {
    background-color: var(--brand-primary-hover);
    transform: scale(1.08);
}
.ai-fab .bi {
    font-size: 1.5rem;
    line-height: 1;
}
/* Ensure the FAB is on top of the chat panel */
.ai-fab { z-index: 1060; }

/* Adjust branch-banner top offset when sidebar chrome is active */
[data-chrome="sidebar"] .branch-banner,
[data-chrome="hybrid"] .branch-banner {
    /* Branch banner sits below the topbar, which is 56px high */
    top: 56px;
}

/* Prevent the kvapp container from adding its own Bootstrap container constraints
   when sidebar/hybrid/spotlight chrome is active */
[data-chrome="sidebar"] #kvapp,
[data-chrome="hybrid"] #kvapp,
[data-chrome="spotlight"] #kvapp {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure sticky browse toolbar offset is correct when sidebar topbar is present */
[data-chrome="sidebar"] .browse-toolbar-sticky,
[data-chrome="hybrid"] .browse-toolbar-sticky,
[data-chrome="spotlight"] .browse-toolbar-sticky {
    top: 56px;
}

/* Adjust chat-panel offset when sidebar chrome active (topbar is 56px) */
[data-chrome="sidebar"] .chat-panel,
[data-chrome="hybrid"] .chat-panel,
[data-chrome="spotlight"] .chat-panel {
    top: 56px;
}

/* Phase Chess.C — Leaflet map widget target inside the read-only
   entity view. Fixed height so Leaflet measures correctly on first
   paint, rounded corners to match the card body. */
.map-field-canvas {
    height: 280px;
    border-radius: 0 0 var(--bs-card-border-radius, 0.375rem) var(--bs-card-border-radius, 0.375rem);
    z-index: 0;
}