/* ===========================================================================
   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.80 0.08 195);   /* teal — accents on the shell */
    /* 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.11 195);           /* teal — links on light surfaces */
    /* 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-heading: oklch(0.45 0.03 240);
    --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);
    /* Radius / elevation */
    --pt-radius: 0.5rem;
    --pt-radius-lg: 0.625rem;
    --pt-shadow-sm: 0 1px 2px 0 oklch(0.24 0.04 245 / 0.06);
    --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);
}
/* 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-text: oklch(0.95 0.008 220);
    --pt-text-strong: oklch(0.98 0.008 220);
    --pt-text-heading: oklch(0.72 0.02 230);
    --pt-text-muted: oklch(0.66 0.025 230);
    --pt-shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.5);
    --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;
}
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: 1.25rem;
    font-family: var(--pt-font-display);
}
.navbar .navbar-nav .nav-link {
    color: var(--pt-shell-foreground);
    font-weight: 600;
}
.navbar .navbar-text {
    color: var(--pt-shell-muted);
}
.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);
}
.sidebar {
    background-color: var(--pt-shell) !important;
    border-right: 1px solid var(--pt-shell-border);
}
.sidebar .nav-link {
    color: var(--pt-shell-foreground);
    font-weight: 400;
    border-left: 3px solid transparent;
}
.sidebar .nav-link:hover {
    background-color: var(--pt-shell-border);
    color: var(--pt-shell-accent);
}
.sidebar .nav-link.active {
    color: var(--pt-shell-accent);
    background-color: var(--pt-shell-border);
    border-left-color: var(--pt-shell-accent);
    font-weight: 600;
}
.sidebar .nav-link .badge {
    font-size: 0.7rem;
}
/* ===========================================================================
   4. BOOTSTRAP COMPONENT OVERRIDES
   =========================================================================== */
.card {
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-sm);
}
.card-header {
    background-color: var(--pt-surface-2);
    border-bottom: 1px solid var(--pt-border);
    font-weight: 600;
}
.btn {
    border-radius: var(--pt-radius);
    font-weight: 400;
    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);
}
.table thead th {
    background-color: var(--pt-surface-3);
    color: var(--pt-text-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--pt-fs-xs);
    border-bottom: 1px solid var(--pt-border);
}
.table tbody td {
    border-bottom: 1px solid var(--pt-border);
}
.table-hover tbody tr:hover {
    background-color: var(--pt-surface-3);
}
.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;
}
/* 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);
}
.brand-icon {
    font-size: 3.5rem;
    color: var(--bs-primary);
}
.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 ----- */
.border-left-primary {
    border-left: 0.25rem solid #4e73df !important;
}
.border-left-success {
    border-left: 0.25rem solid #1cc88a !important;
}
.border-left-info {
    border-left: 0.25rem solid #36b9cc !important;
}
.border-left-warning {
    border-left: 0.25rem solid #f6c23e !important;
}
.border-left-danger {
    border-left: 0.25rem solid #e74a3b !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 {
    background-color: rgba(1, 118, 211, 0.14) !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 (scoped to #doc-categories-content) --------------- */
.border-dashed {
    border: 2px dashed var(--pt-border);
    border-radius: 0.5rem;
}
#doc-categories-content .table tbody tr {
    background-color: var(--pt-surface-2) !important;
}
#doc-categories-content .table tbody tr td {
    background-color: var(--pt-surface-2) !important;
}
#doc-categories-content .table tbody tr:hover td {
    background-color: var(--pt-surface-3) !important;
}
#doc-categories-content .table tbody tr.table-active td {
    background-color: rgba(1, 118, 211, 0.14) !important;
}
/* 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;
}
/* 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);
}