/* ===========================================================================
   theme.css — SKIN (swappable). Design tokens + every visual property:
   palette, backgrounds, borders (+radius), shadows, typography. Keyed to the
   same selectors as layout.css. Replace this file to reskin the app.
   =========================================================================== */
/* ===========================================================================
   styles.css — Pastel FE, single stylesheet
   Loaded once on every page via _layout.html (and login.html).

   SECTIONS
     1. Design tokens & dark theme
     2. Base
     3. Layout chrome (navbar, sidebar, main)
     4. Bootstrap component overrides
     5. Shared components
     6. Pages
     7. Modals & panels
     8. jSpreadsheet grid

   THEME MODEL: all colour/space/radius/shadow decisions flow through the
   --pt-* design tokens. Bootstrap's --bs-* are wired onto them. Dark mode only
   re-declares the tokens under [data-bs-theme="dark"]. Light token values equal
   the original hard-coded hex, so the light appearance is unchanged.

   PAGE SCOPING: rules that use *global* selectors (body / main / list-group /
   offcanvas) but should only apply to one page are prefixed with a body page
   class — `body.login-page`, `body.chat-page`, `body.alerts-page`,
   `body.department-page` (set via {% block body_class %} in _layout.html).
   =========================================================================== */
/* ===========================================================================
   1. DESIGN TOKENS & DARK THEME
   =========================================================================== */
:root {
    /* Brooks-Keret institutional theme (OKLCH): dark navy shell chrome,
       light content surfaces, teal accent. */
    /* Shell — dark chrome (navbar + sidebar) */
    --pt-shell: oklch(0.24 0.04 245);
    --pt-shell-foreground: oklch(0.97 0.008 220);
    --pt-shell-muted: oklch(0.66 0.025 230);
    --pt-shell-border: oklch(0.32 0.035 240);
    --pt-shell-accent: oklch(0.78 0.055 195);  /* teal — exact reference --gold */
    /* Brand */
    --pt-primary: oklch(0.24 0.04 245);        /* navy — primary buttons/fills */
    --pt-primary-hover: oklch(0.31 0.045 245);
    --pt-primary-dark: oklch(0.20 0.04 245);
    --pt-link: oklch(0.55 0.055 195);          /* teal — reference --gold hue/chroma, darkened for on-white readability */
    /* Neutral surfaces */
    --pt-canvas: oklch(0.985 0.005 220);
    --pt-surface: oklch(1 0 0);
    --pt-surface-2: oklch(0.965 0.006 250);
    --pt-surface-3: oklch(0.95 0.008 250);
    --pt-border: oklch(0.91 0.012 220);
    /* Text */
    --pt-text: oklch(0.24 0.04 245);
    --pt-text-strong: oklch(0.20 0.04 245);
    --pt-text-muted: oklch(0.52 0.025 240);
    --pt-on-accent: oklch(0.99 0 0);
    /* Status */
    --pt-secondary: oklch(0.52 0.025 240);
    --pt-success: oklch(0.68 0.14 155);
    --pt-info: oklch(0.52 0.025 240);
    --pt-warning: oklch(0.78 0.14 70);
    --pt-danger: oklch(0.62 0.20 25);
    /* A blue with enough chroma to be a colour rather than a shade: the status
       set is otherwise a green, an amber and two greys, and a fifth state read
       as one of them whichever muted token it borrowed. */
    --pt-accent-blue: oklch(0.58 0.13 250);
    /* Status "ink": the same hues darkened enough to read as text on their own
       pale tint. Pills and marks use these rather than restating the values. */
    --pt-success-ink: oklch(0.42 0.11 155);
    --pt-info-ink: oklch(0.42 0.06 195);
    --pt-warning-ink: oklch(0.45 0.10 70);
    --pt-danger-ink: oklch(0.45 0.16 25);
    /* Radius / elevation */
    --pt-radius: 0.5rem;
    --pt-radius-lg: 0.625rem;
    --pt-radius-card: 0.875rem;                /* panels / cards */
    --pt-card-border: oklch(0.93 0.008 250);   /* faint card edge */
    --pt-row-border: oklch(0.95 0.005 250);    /* subtle table row separator */
    --pt-shadow: 0 4px 16px oklch(0.24 0.04 245 / 0.10);
    /* Type */
    --pt-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --pt-font-display: "Space Grotesk", var(--pt-font-sans);
    --pt-font-mono: "JetBrains Mono", ui-monospace, monospace;
    --pt-fs-base: 0.875rem;
    --pt-fs-sm: 0.8125rem;
    --pt-fs-xs: 0.75rem;
    --bs-primary: var(--pt-primary);
    --bs-secondary: var(--pt-secondary);
    --bs-success: var(--pt-success);
    --bs-info: var(--pt-info);
    --bs-warning: var(--pt-warning);
    --bs-danger: var(--pt-danger);
    --bs-light: var(--pt-surface-2);
    --bs-dark: var(--pt-primary-dark);
    --bs-body-bg: var(--pt-canvas);
    --bs-body-color: var(--pt-text);
    --bs-font-sans-serif: var(--pt-font-sans);
    /* -rgb variants — Bootstrap's .text-*/.bg-*/.badge utilities use these, not
       the plain --bs-* colours. Without them, utilities fall back to stock BS.
       (RGB computed from the --pt-* OKLCH values.) */
    --bs-primary-rgb: 13, 33, 49;
    --bs-secondary-rgb: 92, 107, 118;
    --bs-success-rgb: 63, 177, 113;
    --bs-info-rgb: 92, 107, 118;
    --bs-warning-rgb: 240, 166, 70;
    --bs-danger-rgb: 230, 67, 67;
    --bs-light-rgb: 244, 245, 247;
    --bs-dark-rgb: 13, 33, 49;
    --bs-link-color-rgb: 0, 133, 133;
    --bs-link-hover-color-rgb: 0, 105, 105;
}
/* Dark theme — re-declare tokens only. Values align with Bootstrap 5.3's own
   dark palette so native components and our chrome share one look. Activated by
   data-bs-theme="dark" on <html> (set by the navbar toggle in _layout.html). */
[data-bs-theme="dark"] {
    --pt-shell: oklch(0.18 0.035 245);
    --pt-shell-foreground: oklch(0.96 0.008 220);
    --pt-shell-muted: oklch(0.66 0.025 230);
    --pt-shell-border: oklch(0.29 0.03 240);
    --pt-shell-accent: oklch(0.82 0.08 195);
    --pt-primary: oklch(0.58 0.10 245);
    --pt-primary-hover: oklch(0.64 0.10 245);
    --pt-primary-dark: oklch(0.16 0.03 245);
    --pt-link: oklch(0.80 0.09 195);
    --pt-canvas: oklch(0.20 0.03 245);
    --pt-surface: oklch(0.25 0.03 245);
    --pt-surface-2: oklch(0.29 0.03 245);
    --pt-surface-3: oklch(0.33 0.03 245);
    --pt-border: oklch(0.37 0.03 245);
    --pt-card-border: oklch(0.30 0.02 245);
    --pt-row-border: oklch(0.28 0.02 245);
    --pt-text: oklch(0.95 0.008 220);
    --pt-text-strong: oklch(0.98 0.008 220);
    --pt-text-muted: oklch(0.66 0.025 230);
    /* The pale tint now sits on a dark surface, so the ink lightens instead. */
    --pt-success-ink: oklch(0.82 0.12 155);
    --pt-info-ink: oklch(0.82 0.06 195);
    --pt-warning-ink: oklch(0.85 0.10 70);
    --pt-danger-ink: oklch(0.78 0.14 25);
    /* Lifted off the dark canvas, the way the other fills are. */
    --pt-accent-blue: oklch(0.66 0.13 250);
    --pt-shadow: 0 4px 16px oklch(0 0 0 / 0.6);
    --bs-body-bg: var(--pt-canvas);
    --bs-body-color: var(--pt-text);
    --bs-light: var(--pt-surface-3);
}
/* Bootstrap surface + text utilities are fixed and don't follow data-bs-theme;
   .text-gray-* are our BS4 leftovers. Re-point them in dark. */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--pt-surface) !important;
}
[data-bs-theme="dark"] .bg-light {
    background-color: var(--pt-surface-2) !important;
}
[data-bs-theme="dark"] .text-dark {
    color: var(--pt-text) !important;
}
[data-bs-theme="dark"] .text-gray-800 {
    color: var(--pt-text) !important;
}
[data-bs-theme="dark"] .text-gray-300 {
    color: var(--pt-text-muted) !important;
}
/* Tab headers — Bootstrap's nav-tabs link colours need explicit dark values. */
[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--pt-text-muted);
}
[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--pt-text);
    border-color: var(--pt-border);
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--pt-text);
    background-color: var(--pt-canvas);
    border-color: var(--pt-border) var(--pt-border) var(--pt-canvas);
}
/* ===========================================================================
   2. BASE
   =========================================================================== */
body {
    font-family: var(--pt-font-sans);
    font-size: var(--pt-fs-base);
    background-color: var(--pt-canvas);
    color: var(--pt-text);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--pt-font-display);
    letter-spacing: -0.01em;
    font-weight: 600;
}
/* Compact type scale — the default Bootstrap sizes read too large here. */
h1, .h1 { font-size: 1.6rem; }
h2, .h2 { font-size: 1.35rem; }
h3, .h3 { font-size: 1.15rem; }
h4, .h4 { font-size: 1.05rem; }
h5, .h5 { font-size: 0.95rem; }
h6, .h6 { font-size: 0.8rem; }
code, kbd, samp, pre {
    font-family: var(--pt-font-mono);
}
/* ===========================================================================
   3. LAYOUT CHROME (navbar, sidebar, main)
   =========================================================================== */
/* Shell chrome — navbar + sidebar are dark navy; text light, teal accents. */
.navbar {
    background-color: var(--pt-shell) !important;
    border-bottom: 1px solid var(--pt-shell-border);
    box-shadow: none;
}
.navbar-brand {
    color: var(--pt-shell-accent) !important;
    font-size: 0.9375rem;          /* reference BKLogo: text-[15px] font-semibold */
    font-weight: 600;
    letter-spacing: -0.01em;       /* font-display tracking */
    font-family: var(--pt-font-display);
}
/* Page title in the top bar — reference TopBar (Shell.tsx): font-display title +
   uppercase tracked subtitle, divided from the brand. */
/* Brand occupies the sidebar-width area so the page title aligns with the main
   content (reference: title at sidebar-edge + 20px). */
.navbar-brand {
    width: 220px;                  /* 20px left pad + 220 = 240 = sidebar width,
                                      so the divider lands on the sidebar edge */
    margin-right: 0;
    flex-shrink: 0;
}
/* Collapsed sidebar shrinks to 72px — the brand's right edge must follow so the
   divider keeps sitting on the sidebar↔content boundary (20px pad + 52 = 72). */
html.sidebar-collapsed .navbar-brand {
    width: 52px;
}
.navbar-page-title {
    margin-left: 0;
    padding-left: 20px;
    border-left: 1px solid var(--pt-shell-border);
    justify-content: center;
    line-height: 1.15;
}
.navbar-page-title:has(.navbar-page-title-main:empty) {
    display: none !important;      /* pages that don't set a title */
}
.navbar-page-title-main {
    font-family: var(--pt-font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--pt-shell-foreground);
}
.navbar-page-title-sub {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--pt-shell-muted);
    margin-top: 2px;
}
/* Customer switcher IS the page title in the top navbar — the selected customer
   is the large subject (reference TopBar). A themed dropdown (like the tenant
   switcher), not a native select, so the open list matches the app. */
.navbar-customer-dropdown {
    display: flex;
}
.navbar-customer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 22rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    line-height: 1.15;
}
.navbar-customer-toggle:focus,
.navbar-customer-toggle:focus-visible {
    box-shadow: none;
    outline: none;
}
.navbar-customer-toggle .navbar-page-title-main {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.navbar-customer-toggle:hover:not(:disabled) .navbar-page-title-main {
    color: var(--pt-shell-accent);
}
.navbar-customer-toggle:disabled {
    opacity: 1;
}
.navbar-customer-toggle:disabled .navbar-page-title-main {
    color: var(--pt-shell-muted);
}
.navbar-customer-caret {
    font-size: 13px;
    color: var(--pt-shell-muted);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.navbar-customer-toggle[aria-expanded="true"] .navbar-customer-caret {
    transform: rotate(180deg);
}
/* Menu — reuses the app dropdown styling (light surface, teal hover). */
.navbar-customer-menu {
    min-width: 15rem;
    max-width: 22rem;
    margin-top: 0.35rem;
}
.navbar-customer-search {
    position: relative;
    padding: 0.25rem 0.25rem 0.375rem;
}
.navbar-customer-search .bi-search {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--pt-text-muted);
    pointer-events: none;
}
.navbar-customer-search .form-control {
    padding-left: 1.9rem;
}
/* Scopes that aren't a client (shared, unassigned): pinned between the search
   and the scrolling client list, separated so they don't read as one more
   client and don't scroll away. */
.navbar-customer-scopes {
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--pt-border, rgba(0, 0, 0, 0.08));
}
.navbar-customer-list {
    max-height: 320px;
    overflow-y: auto;
}
.navbar-customer-menu .dropdown-item {
    cursor: pointer;
}
/* Selected customer — a faint teal tint + medium weight (no check, no full
   fill), so it's distinct from the teal :hover fill. */
.navbar-customer-menu .dropdown-item.is-selected {
    background-color: color-mix(in srgb, var(--pt-shell-accent) 18%, white);
    font-weight: 600;
}
.navbar-customer-menu .dropdown-item.is-selected:hover,
.navbar-customer-menu .dropdown-item.is-selected:focus {
    background-color: var(--pt-shell-accent);   /* hover still wins with the full fill */
    color: var(--pt-shell);
}
.navbar .navbar-nav .nav-link {
    color: var(--pt-shell-foreground);
    font-weight: 500;              /* reference: font-medium, not 600 */
}
.navbar .navbar-text {
    color: var(--pt-shell-foreground);
    font-size: 0.875rem;           /* reference user name: text-sm */
    font-weight: 500;
    text-align: right;             /* reference: name right-aligned */
}
/* Tenant switcher — reference-style: 14px light text, muted building + chevron,
   no Bootstrap caret triangle. */
.navbar .nav-link.dropdown-toggle {
    font-size: 0.875rem;
    color: var(--pt-shell-foreground);
}
.navbar .dropdown-toggle::after {
    display: none;
}
.navbar .nav-link.dropdown-toggle .bi-building,
.navbar .nav-link.dropdown-toggle .tenant-chevron {
    color: var(--pt-shell-muted) !important;
}
.navbar .nav-link.dropdown-toggle .tenant-chevron {
    font-size: 16px;
}
/* User menu block — reference: name + workspace meta (right-aligned) + avatar. */
.navbar-user {
    padding: 2px 6px;
}
.navbar-user-name {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--pt-shell-foreground);
    max-width: 12rem;
}
.navbar-user-meta {
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--pt-shell-muted);
    max-width: 12rem;
}
.navbar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, oklch(0.82 0.05 195), oklch(0.72 0.06 195));
    color: var(--pt-shell);
    font-family: var(--pt-font-display);
    font-weight: 600;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.navbar .navbar-nav .nav-link:hover {
    color: var(--pt-shell-accent);
}
.navbar .btn-link {
    color: var(--pt-shell-foreground);
}
.navbar .vr {
    color: var(--pt-shell-border);
    margin-left: 8px;
    margin-right: 8px;
    opacity: 0.4;
}
/* Utility icon buttons (theme toggle, sign out) — reference TopBar: muted 36px
   rounded hover-buttons, distinct from the prominent user/tenant text. */
.navbar .nav-link.d-flex:not(.dropdown-toggle) {
    width: 36px;
    height: 36px;
    justify-content: center;
    border-radius: 8px;
    color: var(--pt-shell-muted) !important;
    padding: 0 !important;
    margin-left: 2px;
}
.navbar .nav-link.d-flex:not(.dropdown-toggle):hover {
    background-color: oklch(0.97 0.008 220 / 0.06);
    color: var(--pt-shell-foreground) !important;
}
.navbar .nav-link.dropdown-toggle {
    font-weight: 500;
}
.sidebar {
    background-color: var(--pt-shell) !important;
    border-right: 1px solid var(--pt-shell-border);
    background-image: radial-gradient(circle at 1px 1px, oklch(1 0 0 / 0.05) 1px, transparent 0);
    background-size: 24px 24px;   /* reference shell-grid-bg */
}
.sidebar .nav-link {
    color: var(--pt-shell-muted);
    font-weight: 400;
    border: 1px solid transparent;
    border-radius: 8px;
}
.sidebar .nav-link:hover {
    background-color: oklch(0.97 0.008 220 / 0.04);
    color: var(--pt-shell-foreground);
}
.sidebar .nav-link.active {
    color: var(--pt-shell-foreground);
    background-color: oklch(0.97 0.008 220 / 0.08);
    border-color: var(--pt-shell-border);
    font-weight: 400;   /* reference: active stays 400, distinguished by colour+border */
}
.sidebar .nav-link .badge {
    font-size: 0.625rem;                                        /* text-[10px] */
    background-color: oklch(0.78 0.055 195 / 0.15) !important;  /* bg-gold/15 — beat .bg-secondary */
    color: oklch(0.78 0.055 195) !important;                    /* text-gold */
    border: 1px solid oklch(0.78 0.055 195 / 0.2) !important;   /* border-gold/20 */
    font-weight: 500;
    border-radius: 4px;                                         /* reference `rounded`, not pill */
}
/* ===========================================================================
   4. BOOTSTRAP COMPONENT OVERRIDES
   =========================================================================== */
/* Panels — border only, no shadow (BK reference: rounded-xl border bg-card). */
.card {
    background-color: var(--pt-surface);   /* reference --card = white; was showing canvas (no contrast) */
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-card);
    box-shadow: none;
}
/* RULES/WITH ALERTS summary tiles carry JS-inline tint + colored left-border;
   neutralise them to clean bordered cards. */
.card.dashboard-tile-header {
    background-color: var(--pt-surface) !important;
    border: 1px solid var(--pt-border) !important;
}
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--pt-card-border);
    font-family: var(--pt-font-display);   /* reference section header: font-display */
    font-size: 0.9375rem;                  /* text-[15px] */
    font-weight: 600;
    letter-spacing: -0.01em;
}
.btn {
    border-radius: var(--pt-radius);
    font-weight: 500;                      /* reference button: font-medium */
    font-size: var(--pt-fs-base);
}
.btn-primary {
    background-color: var(--pt-primary);
    border-color: var(--pt-primary);
}
.btn-primary:hover {
    background-color: var(--pt-primary-hover);
    border-color: var(--pt-primary-hover);
}
.btn-outline-primary {
    color: var(--pt-link);
    border-color: var(--pt-primary);
}
.btn-outline-primary:hover {
    background-color: var(--pt-surface-2);
    color: var(--pt-primary-hover);
    border-color: var(--pt-primary-hover);
}
.table {
    font-size: var(--pt-fs-sm);
    --bs-table-bg: transparent;              /* cells sit on the card, not a grey fill */
    --bs-table-color: var(--pt-text);        /* navy text, not black */
}
/* Tables — chrome-light: transparent head, muted uppercase labels, hairline rows. */
.table thead th {
    background-color: transparent;   /* reference header: no fill */
    color: var(--pt-text-muted);
    font-weight: 500;                /* reference: 500, not 600 */
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 10px;
    padding: 10px 20px;              /* reference th padding */
    border-bottom: 1px solid var(--pt-border);
}
.table tbody td {
    padding: 14px 20px;              /* reference td padding (py-3.5 px-5) */
    font-size: 14px;                 /* reference cell: text-sm */
    vertical-align: middle;
    border-bottom: 1px solid var(--pt-row-border);
}
.table-hover tbody tr:hover {
    background-color: var(--pt-surface-3);
}
/* Rows sit on an opaque surface so hover and selection read against the card
   rather than blending into it. State lives here, once: every screen used to
   restate these three rules under its own scope, each with !important, which is
   how one hardcoded selection blue ended up in two places and how the data
   room lost its styling when a wrapper id changed. */
/* Rows are transparent on the card they sit in — only a hairline divides them.
   Filling every cell meant hover and selection had to out-paint that fill,
   which is what the per-screen !important rules were for. */
.table tbody tr,
.table tbody tr > td {
    background-color: transparent;
}
/* Bootstrap paints row state with an inset box-shadow over the cell
   (--bs-table-bg-state in 5.3, --bs-table-accent-bg in 5.2), so setting
   background-color here paints underneath it and its default blue wins. Set
   the variables it actually draws with. */
.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--pt-surface-3);
    --bs-table-accent-bg: var(--pt-surface-3);
}
.table > tbody > tr.table-active > * {
    --bs-table-bg-state: color-mix(in srgb, var(--pt-shell-accent) 22%, var(--pt-surface-2));
    --bs-table-accent-bg: color-mix(in srgb, var(--pt-shell-accent) 22%, var(--pt-surface-2));
    --bs-table-color-state: var(--pt-text);
}
/* Status as a pale pill with its own icon: legible at a glance in a column of
   them, and quiet enough not to compete with the row's name. */
.pt-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    border: 0;
}
.pt-pill i { font-size: 11px; }
.pt-pill-ready   { background-color: color-mix(in srgb, var(--pt-success) 16%, var(--pt-surface)); color: var(--pt-success-ink); }
.pt-pill-working { background-color: color-mix(in srgb, var(--pt-link) 15%, var(--pt-surface)); color: var(--pt-info-ink); }
.pt-pill-warn    { background-color: color-mix(in srgb, var(--pt-warning) 20%, var(--pt-surface)); color: var(--pt-warning-ink); }
.pt-pill-danger  { background-color: color-mix(in srgb, var(--pt-danger) 14%, var(--pt-surface)); color: var(--pt-danger-ink); }
.pt-pill-muted   { background-color: var(--pt-surface-3); color: var(--pt-text-muted); }
/* Filled, and blue rather than another blue-green. A sixth pale wash would not
   have been told apart from the five above — the teal tint and the green tint
   are both a ~15% wash of a blue-green — so this one gets weight as well as a
   hue of its own. Neither of the two obvious shortcuts works here: .bg-info
   maps to the same grey as .bg-secondary in this theme, and --pt-link is a
   muted slate-teal that reads as that grey again at badge size. */
.pt-pill-accent,
.pt-badge-accent { background-color: var(--pt-accent-blue); color: var(--pt-on-accent); }

/* Toolbar buttons: an icon-only square for the actions that operate on the
   selection, and one filled, labelled button for the thing you came to do. */
.pt-icon-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: var(--pt-radius);
    border: 1px solid var(--pt-border);
    background-color: var(--pt-surface);
    color: var(--pt-text-muted);
}
.pt-icon-btn:hover:not(:disabled) {
    background-color: var(--pt-surface-3);
    color: var(--pt-text);
    border-color: var(--pt-border);
}
.pt-icon-btn:disabled { opacity: 0.45; }
/* Inline variant: the viewer's page and zoom controls sit inside a toolbar row
   rather than beside a table, so they take less room. */
/* Bare: no border, no surface — for controls that sit inside other furniture
   (a row, a header, a cell) where a bordered button would be one box too many.
   The third role in the set, after the labelled button and the icon square. */
.pt-btn-bare {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    padding: 0;
    color: var(--pt-text-muted);
    font-size: 13px;
    line-height: 1;
}
.pt-btn-bare:hover:not(:disabled) { color: var(--pt-text); }
.pt-btn-bare:disabled { opacity: 0.45; }
.pt-btn-bare-danger { color: var(--pt-danger-ink); }
.pt-btn-bare-danger:hover:not(:disabled) { color: var(--pt-danger-ink); opacity: 0.8; }

/* Bootstrap's dropdown caret is a ::after element, which lands as a second grid
   item in the icon square and pushes the icon onto its own row. The square is
   34px and the icon already says the control opens something. */
.pt-icon-btn.dropdown-toggle::after { display: none; }

.pt-icon-btn-sm {
    width: 28px;
    height: 28px;
    font-size: 12px;
}
/* Labelled secondary: same surface as the icon square, but sized by its text.
   Applying the icon-only style to a button that carries a label crushes it to
   34px and the label spills over its neighbour. */
.pt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--pt-radius);
    border: 1px solid var(--pt-border);
    background-color: var(--pt-surface);
    color: var(--pt-text);
    font-size: 13px;
    font-weight: 500;
}
.pt-btn:hover:not(:disabled) { background-color: var(--pt-surface-3); color: var(--pt-text); }
.pt-btn:disabled { opacity: 0.45; }

/* Destructive: the same shape as the secondary, in the danger hue, so delete
   and reject read as different from cancel without shouting like a fill. */
.pt-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--pt-radius);
    border: 1px solid color-mix(in srgb, var(--pt-danger) 40%, transparent);
    background-color: var(--pt-surface);
    color: var(--pt-danger-ink);
    font-size: 13px;
    font-weight: 500;
}
.pt-btn-danger:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--pt-danger) 10%, var(--pt-surface));
    color: var(--pt-danger-ink);
}
.pt-btn-danger:disabled { opacity: 0.45; }
.pt-icon-btn-danger { color: var(--pt-danger-ink); }
.pt-icon-btn-danger:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--pt-danger) 10%, var(--pt-surface));
    color: var(--pt-danger-ink);
}

.pt-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--pt-radius);
    background-color: var(--pt-primary);
    color: var(--pt-on-accent);
    font-weight: 600;
    font-size: 13px;
}
.pt-btn-primary:hover:not(:disabled) { background-color: var(--pt-primary-hover); color: var(--pt-on-accent); }
.pt-btn-primary:disabled { opacity: 0.45; }

/* Numerics: one width per glyph and a shared right edge, so a column of sizes
   lines up and a longer value reads as bigger rather than merely wider. Kept
   whole here rather than split with layout.css — one component, one rule. */
.pt-num,
th.pt-num {
    font-family: var(--pt-font-mono);
    font-size: 13px;
    text-align: right;
}

/* Chip: a value that is a label rather than prose — a document type, a client.
   On --pt-surface, the one surface no row state uses, so it keeps its edge
   under the cursor and on a selected row. */
.pt-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.45;
    background-color: var(--pt-surface);
    color: var(--pt-text);
    border: 1px solid var(--pt-border);
    white-space: nowrap;
}
.pt-chip-muted { color: var(--pt-text-muted); }
.pt-chip-warn {
    background-color: color-mix(in srgb, var(--pt-warning) 18%, var(--pt-surface));
    border-color: transparent;
    color: var(--pt-warning-ink);
}

/* File-kind mark in the first column: the row's identity, the way the mock
   leads each row with an avatar. */
.pt-filemark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 15px;
    background-color: var(--pt-surface-3);
    color: var(--pt-text-muted);
}
.pt-filemark-pdf { background-color: color-mix(in srgb, var(--pt-danger) 12%, var(--pt-surface)); color: var(--pt-danger); }
.pt-filemark-sheet { background-color: color-mix(in srgb, var(--pt-success) 14%, var(--pt-surface)); color: var(--pt-success-ink); }

/* A table and the meta that describes it are one surface. */
.pt-table-card {
    background-color: var(--pt-surface);
    border: 1px solid var(--pt-card-border);
    border-radius: var(--pt-radius-card);
    overflow: hidden;
}
.pt-table-card .table { margin-bottom: 0; }
.pt-table-card .table tbody tr:last-child > td { border-bottom: 0; }

/* Count and paging belong to the table, so they sit inside its card. */
.pt-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--pt-border);
    font-size: 12px;
    color: var(--pt-text-muted);
}

/* The picker toggle is chrome type by default (--pt-shell-foreground, meant for
   the navy navbar). On a light toolbar that renders near-white on white, so the
   toolbar variant restates it in body colour. */
.navbar-customer-toggle.is-toolbar .navbar-page-title-main { color: var(--pt-text); }
.navbar-customer-toggle.is-toolbar .navbar-customer-caret { color: var(--pt-text-muted); }
.navbar-customer-toggle.is-toolbar:hover:not(:disabled) .navbar-page-title-main { color: var(--pt-link); }

/* Playbook rules — reference list treatment (Active Agents card): a header row
   then divided rows, each with title over muted logic and a status pill, not a
   table. */
.playbook-panel-head {
    border-bottom: 1px solid var(--pt-card-border);
}
.playbook-panel-title {
    font-family: var(--pt-font-display);
    font-size: 0.9375rem;         /* reference card title: 15px */
    font-weight: 600;
    letter-spacing: -0.01em;
}
.playbook-row {
    border-top: 1px solid var(--pt-row-border);
    transition: background-color 0.12s ease;
}
.playbook-row:first-child {
    border-top: none;             /* header already draws the divider above row 1 */
}
.playbook-row:hover {
    background-color: var(--pt-surface-2);
}
.playbook-row-title {
    font-size: 0.875rem;          /* reference row title: text-sm */
    font-weight: 500;
    color: var(--pt-text);
}
.playbook-row-logic {
    font-size: 0.75rem;           /* reference row subtitle: text-xs muted */
    color: var(--pt-text-muted);
    margin-top: 1px;
}
/* Customers screen header — prominent title like the reference greeting, sitting
   on the page (no card / border-bottom band). */
.customers-title {
    font-family: var(--pt-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--pt-text);
}
/* KPI-widget tiles (e.g. Collections) — clean stat tiles like the top strip but
   a step smaller, so a row of them (incl. text values) fits side by side. */
/* The tile body is a query container so the value below can size itself off the
   tile's own width rather than the viewport. Without this, a long figure
   (e.g. a 9-digit revenue) wrapped onto a second line and blew the card. */
.kpi-tile-body {
    container-type: inline-size;
}
.kpi-tile-value {
    /* Fit-to-tile: never wrap, scale down with the container, floor at a size
       that stays readable. 1.5rem remains the value for a comfortably wide
       tile — this only bites when the number would otherwise overflow.
       No ellipsis: a truncated figure is worse than a small one, so the value
       shrinks to fit and always shows every digit. The coefficient leaves room
       for the widest realistic figure (currency symbol + 9 digits + commas). */
    font-size: clamp(0.7rem, 11cqi, 1.5rem);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--pt-text);
}
/* Dropdown menu — reference (dropdown-menu.tsx): rounded-md, hairline border,
   soft shadow, small text, teal-tint hover/active items. */
.dropdown-menu {
    /* white like the reference cards/lists, not the off-white canvas */
    --bs-dropdown-bg: var(--pt-surface);
    background-color: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: 0 4px 6px -1px rgba(11, 37, 69, 0.10), 0 2px 4px -2px rgba(11, 37, 69, 0.10);   /* reference shadow-md */
    padding: 0.25rem;
    font-size: 0.875rem;
}
.dropdown-item {
    border-radius: 6px;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
}
.dropdown-item .bi-check2 {
    color: var(--pt-shell-accent) !important;   /* teal check, not blue */
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--pt-shell-accent);   /* reference: bg-accent (teal) */
    color: var(--pt-shell);                     /* accent-foreground (dark) */
}
.dropdown-item:hover .bi-check2,
.dropdown-item:focus .bi-check2 {
    color: var(--pt-shell) !important;          /* check stays visible on the teal fill */
}
.dropdown-header {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pt-text);                      /* reference label: navy semibold, not grey */
    text-transform: none;
}
/* Nav tabs — reference clean underline: muted inactive, teal active accent. */
.nav-tabs {
    border-bottom-color: var(--pt-border);
}
.nav-tabs .nav-link {
    color: var(--pt-text-muted);
    font-weight: 500;
    border: none;
    border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link:hover {
    color: var(--pt-text);
    border-bottom-color: var(--pt-border);
}
.nav-tabs .nav-link.active {
    color: var(--pt-text);
    background: transparent;
    border-bottom: 2px solid var(--pt-shell-accent);
}
.text-muted {
    color: var(--pt-text-muted) !important;
}
.bg-light {
    background-color: var(--pt-surface-2) !important;
}
.border-bottom {
    border-bottom: 1px solid var(--pt-border) !important;
}
/* Tags / status chips — reference uses rounded-md rectangles (badge.tsx:7),
   text-xs / medium, not full pills. */
.badge {
    border-radius: var(--pt-radius);   /* rounded-md 8px, was 999px pill */
    font-weight: 500;
    letter-spacing: 0.01em;
}
/* Chat: user question bubble — reference (client.tsx): light secondary fill,
   rounded-2xl with a squared top-right corner. Assistant answer is a full
   analysis panel, not a bubble — left as-is. */
.bubble-user {
    background-color: var(--pt-surface-2);
    border-radius: 16px 16px 4px 16px !important;
}
/* Ask bar — reference chat input (client.tsx): white rounded field, muted lead
   icon, navy send button with a teal paper-plane icon. */
.ask-bar {
    background-color: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: 14px;
    padding: 9px 10px 9px 14px;
    box-shadow: none;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.ask-bar > .input-group-text {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.ask-bar > .input-group-text .bi {
    color: var(--pt-text-muted) !important;
    font-size: 16px;
}
.ask-bar > .form-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 14px;
    padding: 0 4px;
}
.ask-bar > .btn.ask-send {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 8px !important;   /* beat Bootstrap input-group squaring the left corners */
    background-color: var(--pt-shell);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ask-bar > .btn.ask-send:hover,
.ask-bar > .btn.ask-send:focus {
    background-color: var(--pt-shell);
    opacity: 0.92;
}
.ask-bar > .btn.ask-send .bi {
    color: var(--pt-shell-accent) !important;
    font-size: 16px;
}
.ask-bar > .btn.ask-send .spinner-border {
    color: var(--pt-shell-accent);
    width: 1rem;
    height: 1rem;
}
/* Disabled nav links */
.nav-link.text-muted:hover {
    background-color: transparent !important;
}
/* ===========================================================================
   5. SHARED COMPONENTS
   =========================================================================== */
/* Alpine.js cloak — hide elements until Alpine initialises. */
/* Spinner — .spin (alerts, my-documents, doc-viewer refresh icon). */
/* HTMX: dim an element while its request is in flight (htmx adds .htmx-request). */
/* Toasts */
/* Conversation timeline (agent inspector) */
.turn-icon {
    border-radius: 50%;
    font-size: var(--pt-fs-xs);
}
.turn-icon-agent {
    background-color: var(--pt-primary);
    color: var(--pt-on-accent);
}
.turn-icon-recipient {
    background-color: #6c757d;
    color: var(--pt-on-accent);
}
.turn-icon-cfo {
    background-color: #6f42c1;
    color: var(--pt-on-accent);
}
.turn-icon-question {
    background-color: var(--pt-success);
    color: var(--pt-on-accent);
}
.turn-bubble {
    border-radius: var(--pt-radius-lg);
    font-size: var(--pt-fs-sm);
    line-height: 1.4;
}
.turn-bubble-agent {
    background-color: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-top-left-radius: 0;
}
.turn-bubble-recipient {
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    border-top-right-radius: 0;
}
.turn-bubble-cfo {
    background-color: #f3e8ff;
    border: 1px solid #d4b3ff;
    border-top-left-radius: 0;
}
.turn-bubble-question {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-top-right-radius: 0;
}
.turn-card {
    border-radius: var(--pt-radius);
    font-size: var(--pt-fs-sm);
}
.turn-card-answer {
    background-color: #fff3cd;
    border: 1px dashed #ffc107;
}
.turn-card-note {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}
.read-more-link {
    font-size: var(--pt-fs-xs);
    color: var(--pt-link);
}
.read-more-link:hover {
    text-decoration: underline;
}
.fact-card:hover {
    box-shadow: var(--pt-shadow);
}
.clickable-row:hover {
    background-color: var(--pt-surface-3);
}
/* Markdown answer styling (NL query — rendered by marked.js into .markdown-answer) */
.markdown-answer table {
    border-collapse: collapse;
}
.markdown-answer th, .markdown-answer td {
    border: 1px solid #dee2e6;
    font-size: 0.85rem;
}
.markdown-answer th {
    background-color: #e9ecef;
    font-weight: 600;
}
.markdown-answer code {
    background-color: #e9ecef;
    border-radius: 3px;
    font-size: 0.85em;
}
/* AI-analysis markdown — session inspector (alerts + department pages) */
.ai-analysis-content {
    color: var(--pt-text);
}
.ai-analysis-content strong {
    font-weight: 600;
    color: var(--pt-text-strong);
}
.ai-analysis-content blockquote {
    border-left: 3px solid var(--pt-border);
    color: var(--pt-text-muted);
    font-style: italic;
}
.ai-analysis-content code {
    background-color: var(--pt-surface-2);
    border-radius: var(--pt-radius);
    font-size: 0.85em;
    color: #d63384;
}
.ai-analysis-content pre {
    background-color: var(--pt-surface-2);
    border-radius: var(--pt-radius);
}
.ai-analysis-content pre code {
    background: none;
    color: inherit;
}
/* ===========================================================================
   6. PAGES
   =========================================================================== */
/* --- Login (standalone page; scoped so its gradient/body rules don't leak) - */
body.login-page {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.login-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
/* Login mark. The gradient carries the brand, so no colour is applied here —
   and the square box keeps the card from reflowing while the SVG loads. */
.brand-icon {
    display: inline-block;
    width: 88px;
    height: 88px;
}
.login-title {
    font-weight: 600;
}
.login-subtitle {
    color: #6c757d;
}
.divider::before, .divider::after {
    border-bottom: 1px solid #dee2e6;
}
.divider-text {
    color: #6c757d;
    font-size: 0.875rem;
}
.security-note {
    font-size: 0.8rem;
    color: #6c757d;
}
/* --- Dashboard (overview + customers) — tiles + BS4-leftover utilities ----- */
/* Stat tiles (KPI strip) — reference bk.tsx:74-77: tiny label, muted top-right
   icon (16px), big Space-Grotesk tabular number. */
.stat-label {
    font-size: 11px;
    letter-spacing: 0.08em;          /* tighter so labels fit on one line */
    text-transform: uppercase;
    font-weight: 400;
    color: var(--pt-text-muted);
    white-space: nowrap;             /* no unwanted mid-label line breaks */
    overflow: hidden;
    text-overflow: ellipsis;         /* long labels ellipsize (full text on hover) */
}
.stat-value {
    font-family: var(--pt-font-display);
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;   /* reference: leading-normal (51px @ 34px) */
    color: var(--pt-text);
    margin-top: 8px;
}
.card:has(.stat-value) .bi {
    color: var(--pt-text-muted) !important;
}
.text-gray-800 {
    color: #5a5c69 !important;
}
.text-gray-300 {
    color: #dddfeb !important;
}
/* --- Chat ----------------------------------------------------------------- */
.save-playbook-backdrop {
    background: rgba(0, 0, 0, 0.45);
}
/* Chat manages its own top padding (via p-2) — drop the layout's main padding.
   Scoped to the chat page so other pages keep their padding. */
.x-small {
    font-size: 0.75rem;
}
.sidebar-chat {
    background-color: var(--pt-surface);
}
.sidebar-chat .sidebar-kebab:hover {
    color: #0d6efd !important;
}
.bucket-header {
    background: var(--pt-surface-2);
    border-bottom: 1px solid var(--pt-border);
}
.bucket-header .bucket-rename:hover {
    color: #0d6efd !important;
}
.sidebar-chat-menu {
    border-radius: 0 !important;
    box-shadow: none !important;
}
.sidebar-chat-menu .dropdown-item, .sidebar-chat-submenu .dropdown-item {
    border-radius: 0 !important;
    background: transparent;
}
.sidebar-chat-menu .dropdown-item:hover, .sidebar-chat-submenu .dropdown-item:hover {
    background: var(--pt-surface-2) !important;
}
.sidebar-chat-menu .dropdown-item.submenu-open {
    background: var(--pt-surface-2) !important;
}
/* Compact inputs for the category picker AND the inline rename in the bucket
   header — Bootstrap's form-control-sm is still too tall for this dense sidebar. */
.bucket-header input.form-control, .sidebar-chat-submenu input.form-control, .chat-title-edit.form-control {
    font-size: 0.8rem;
    line-height: 1.3;
    background-color: var(--pt-surface);
}
/* Sidebar search input — match the New-chat button's type size; a class rule is
   needed because UA <input> font-size wins specificity over inline styles. */
input.sidebar-search-input, input.sidebar-search-input::placeholder {
    font-size: 0.875rem !important;
    line-height: 1.5;
    font-family: inherit;
}
.turn-table-header {
    background: var(--pt-surface-2);
}
.turn-table-header:hover {
    background: var(--pt-surface-3);
}
/* --- Document viewer ------------------------------------------------------ */
.entity-card:hover {
    background-color: var(--pt-surface-2);
}
/* PDF page container — the page itself is white paper in both themes. */
.pdf-page-container {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    background: #fff;
}
.text-layer {
    line-height: 1.0;
}
.text-layer > span {
    color: transparent;
}
/* Entity highlights — colours applied dynamically via JS (--highlight-color) */
.text-layer .entity-highlight {
    color: transparent;
    background: none;
    border-bottom: 2px solid var(--highlight-color, rgba(255, 200, 0, 0.8));
}
.text-layer .search-highlight {
    background: rgba(255, 230, 0, 0.45);
    border-radius: 2px;
}
.text-layer .search-highlight.search-current {
    background: rgba(255, 140, 0, 0.6);
}
/* Rich tooltip for highlights */
.entity-tooltip {
    background: var(--pt-surface);
    color: var(--pt-text);
    border-radius: 8px;
    font-size: 12px;
    box-shadow: var(--pt-shadow);
    border: 1px solid var(--pt-border);
}
.entity-tooltip .tooltip-type {
    font-size: 10px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--pt-on-accent);
}
.entity-tooltip .tooltip-label {
    font-weight: 600;
    font-size: 13px;
}
.entity-tooltip .tooltip-properties {
    font-size: 11px;
    color: var(--pt-text-muted);
    line-height: 1.4;
}
/* Property value formatting */
.prop-date {
    color: #198754;
}
.prop-amount {
    color: #6f42c1;
    font-weight: 500;
}
.prop-url {
    color: #0d6efd;
    text-decoration: underline;
}
/* Graph container */
#graph-container {
    background: var(--pt-surface);
    border-radius: 8px;
}
/* --- Personas ------------------------------------------------------------- */
.persona-row {
    background-color: var(--pt-surface-2);
}
.persona-row:hover {
    background-color: var(--pt-surface-3) !important;
}
.persona-row.active, .persona-row:active {
    --bs-table-bg-state: color-mix(in srgb, var(--pt-shell-accent) 22%, var(--pt-surface-2));
    --bs-table-accent-bg: color-mix(in srgb, var(--pt-shell-accent) 22%, var(--pt-surface-2));
    background-color: color-mix(in srgb, var(--pt-shell-accent) 22%, var(--pt-surface-2)) !important;
}
/* --- Playbook ------------------------------------------------------------- */
.entry-card:hover {
    border-color: var(--pt-link) !important;
}
/* --- Alerts (session inspector) — global list-group rule scoped to the page - */
body.alerts-page .list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
body.alerts-page .list-group-item.active .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}
/* --- Department list — global offcanvas rule scoped to the page ----------- */
/* ===========================================================================
   7. MODALS & PANELS
   =========================================================================== */
/* --- File-health modal (scoped to #fileHealthModal) ----------------------- */
#fileHealthModal .fh-pill {
    font-size: 12px;
}
#fileHealthModal .fh-dot {
    border-radius: 50%;
}
#fileHealthModal .fh-dot-ai {
    background: #0d6efd;
}
#fileHealthModal .fh-dot-recipe {
    background: #6f42c1;
}
#fileHealthModal .fh-dot-human {
    background: #198754;
}
#fileHealthModal .fh-st {
    font-size: 12px;
    border-radius: 10px;
}
#fileHealthModal .fh-st-ok {
    background: #e6f4ea;
    color: #198754;
}
#fileHealthModal .fh-st-col {
    background: #e7f0ff;
    color: #0d6efd;
}
#fileHealthModal .fh-st-rev {
    background: #fff3cd;
    color: #8a5a00;
}
#fileHealthModal .fh-funnel {
    font-size: 11px;
}
#fileHealthModal .fh-menu {
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: 6px;
    box-shadow: var(--pt-shadow);
    font-weight: 400;
}
#fileHealthModal .fh-menu-item {
    font-size: 12px;
    border-radius: 4px;
    color: var(--pt-text);
}
#fileHealthModal .fh-menu-item:hover {
    background: var(--pt-surface-2);
}
#fileHealthModal table.fh-tbl {
    font-size: 13px;
}
#fileHealthModal table.fh-tbl th {
    font-size: 12px;
    color: var(--pt-text-muted);
    font-weight: 600;
}
/* whole row opens the editor */
#fileHealthModal .nav-tabs .nav-link {
    color: var(--pt-text-muted);
}
/* tabs read as tabs, not links */
#fileHealthModal .nav-tabs .nav-link.active {
    color: var(--pt-text);
}
/* --- Structure-editor modal (scoped to #structureEditorRoot) --------------- */
#structureEditorRoot .sheet-detail-row {
    font-size: 13px;
}
#structureEditorRoot .editor-panel .form-label, #structureEditorRoot .editor-panel .form-select, #structureEditorRoot .editor-panel .form-control {
    font-size: 13px;
}
/* structure tab is a flex row (grid + panel); a plain class (not .d-flex's
   !important) so x-show can toggle it. */
/* the editor grid renders at full table width; its wrapper scrolls it. */
/* --- My-documents panel --------------------------------------------------- */
/* Name column stretches to fill; max-width:0 lets the inner flex truncate. */
/* ===========================================================================
   8. JSPREADSHEET GRID (chat result grids + sheet-preview + structure editor)
   =========================================================================== */
/* Host: width hugs the grid so the toolbar (100% block) aligns to grid edges. */
/* System font on grid bodies; icons keep Material Icons. */
.jss_container, .jss_container *, .jss_worksheet, .jss_worksheet *, .jss_toolbar {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif !important;
}
.jss_toolbar i {
    font-family: 'Material Icons' !important;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    font-feature-settings: 'liga';
    font-size: 18px !important;
    color: #495057 !important;
}
.jss_toolbar {
    background: #f8f9fa !important;
    border: 0 !important;
}
/* Force the toolbar's inner div to flex so margin-left:auto right-aligns Download. */
/* Cells */
.jss_worksheet > tbody > tr > td, .jss_worksheet > thead > tr > td {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #212529;
}
.jss_worksheet > thead > tr > td {
    background: #f1f3f5 !important;
    color: #495057 !important;
    font-weight: 600;
    border-color: #dee2e6 !important;
}
.jss_worksheet > tbody > tr > td {
    border-color: #e9ecef !important;
}
.jss_worksheet > tbody > tr:nth-child(even) > td {
    background: #fafbfc;
}
.jss_worksheet > tbody > tr > td.highlight {
    background-color: rgba(13, 110, 253, 0.08) !important;
}
.jss_worksheet > tbody > tr > td.highlight-selected, .jss_worksheet > tbody > tr > td.selected {
    background-color: rgba(13, 110, 253, 0.18) !important;
}
.jss_container, .jss_content, .jss_worksheet, .jss_toolbar {
    box-shadow: none !important;
}
/* Grouped financial-statement spreadsheet tiles (chart.type === 'spreadsheet').
   Group-header cells (the L1/L2 label columns) read as clickable collapse
   handles; the appended grand-totals row is emphasised. */
.dashboard-spreadsheet .jss_worksheet > tbody > tr > td,
.dashboard-spreadsheet .jss_worksheet > thead > tr > td {
    font-size: 0.72rem;               /* smaller, dense statement type */
    color: #1b1f24 !important;        /* black text (override readonly grey) */
    vertical-align: top;             /* merged L1/L2 labels sit at the top */
}
.dashboard-spreadsheet .jss_worksheet > tbody > tr > td.readonly {
    color: #1b1f24 !important;
}
.dashboard-spreadsheet .jss_worksheet > tbody > tr > td.sheet-total {
    font-weight: 700;
    background: #eef1f4 !important;
    border-top: 2px solid #ced4da !important;
}
/* A non-zero gap in a comparison column, in either direction. The colour has
   to beat the readonly-cell rule above, which is itself !important. */
.dashboard-spreadsheet .jss_worksheet > tbody > tr > td.sheet-diff,
.dashboard-spreadsheet .jss_worksheet > tbody > tr > td.sheet-diff.readonly {
    color: #d6112b !important;
    font-weight: 600;
}
.dashboard-spreadsheet .jss_worksheet > tbody > tr > td[data-x="0"],
.dashboard-spreadsheet .jss_worksheet > tbody > tr > td[data-x="1"] {
    cursor: pointer;
    font-weight: 600;
}
/* Belt-and-suspenders: hide the worksheet tab bar (also disabled via tabs:false). */
.dashboard-spreadsheet .jtabs-headers,
.dashboard-spreadsheet .jtabs-headers-container { display: none !important; }
/* Hide the row-number (index) column. jspreadsheet's `hideIndex` is a METHOD,
   not an init option, so replicate its .jss_hidden_index rule scoped here. */
.dashboard-spreadsheet .jss_worksheet > tbody > tr > td:first-child,
.dashboard-spreadsheet .jss_worksheet > thead > tr > td:first-child,
.dashboard-spreadsheet .jss_worksheet > tfoot > tr > td:first-child,
.dashboard-spreadsheet .jss_worksheet > colgroup > col:first-child { display: none !important; }
/* Chart drill-down breadcrumb (Expenses by Dept/Category pies, Drill-down bar).
   Anchored bottom-left as a readable chip so it never collides with the chart
   title/axes; truncates on one line instead of wrapping. */
.drill-breadcrumb {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e5e9ee;
    border-radius: 6px;
    padding: 1px 8px;
    max-width: calc(100% - 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drill-breadcrumb .drill-crumb { color: #2a7d7b; cursor: pointer; }
.drill-breadcrumb .drill-crumb:hover { text-decoration: underline; }
.drill-breadcrumb .drill-crumb.active { color: #1b1f24; font-weight: 600; cursor: default; }
.drill-breadcrumb .drill-crumb.active:hover { text-decoration: none; }
.drill-breadcrumb .drill-sep { color: #9aa5ad; }
/* Find overlay (Chrome-style, anchored under the toolbar search icon) */
.find-overlay {
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    font-size: 0.8125rem;
}
.find-overlay input {
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 0.8125rem;
}
.find-overlay .find-count {
    color: #6c757d;
    font-variant-numeric: tabular-nums;
    border-left: 1px solid #e9ecef;
}
td.find-match {
    background-color: rgba(255, 193, 7, 0.30) !important;
}
td.find-active {
    background-color: rgba(255, 152, 0, 0.55) !important;
    outline: 2px solid #ff6f00 !important;
    outline-offset: -2px;
}
/* Range-sum chip — floats bottom-right when a multi-cell numeric range is selected. */
.grid-sum-chip {
    background: #212529;
    color: #fff;
    border-radius: 4px;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
/* Dark theme: recolour grid surfaces onto the app tokens (blue selection tints
   and yellow find highlights read fine over a dark cell). */
[data-bs-theme="dark"] .jss_toolbar {
    background: var(--pt-surface-2) !important;
}
[data-bs-theme="dark"] .jss_toolbar i {
    color: var(--pt-text-muted) !important;
}
[data-bs-theme="dark"] .jss_worksheet > tbody > tr > td, [data-bs-theme="dark"] .jss_worksheet > thead > tr > td {
    color: var(--pt-text);
}
[data-bs-theme="dark"] .jss_worksheet > tbody > tr > td {
    background: var(--pt-surface);
    border-color: var(--pt-border) !important;
}
[data-bs-theme="dark"] .jss_worksheet > tbody > tr:nth-child(even) > td {
    background: var(--pt-surface-2);
}
[data-bs-theme="dark"] .jss_worksheet > thead > tr > td {
    background: var(--pt-surface-2) !important;
    color: var(--pt-text-muted) !important;
    border-color: var(--pt-border) !important;
}
[data-bs-theme="dark"] .find-overlay {
    background: var(--pt-surface);
    border-color: var(--pt-border);
    color: var(--pt-text);
}
[data-bs-theme="dark"] .find-overlay .find-count {
    color: var(--pt-text-muted);
    border-left-color: var(--pt-border);
}
[data-bs-theme="dark"] .grid-sum-chip {
    background: var(--pt-surface-3);
    color: var(--pt-text);
}