/*
 * app.css -- compact overrides on top of Sneat core.css, plus the few layout
 * rules Sneat keeps in demo.css. No SCSS build needed: the sidebar reads CSS
 * variables, and the rest is plain cascade.
 */

:root, [data-bs-theme] {
  /* Tighter sidebar */
  --bs-menu-width: 14.5rem;
  --bs-menu-collapsed-width: 4.5rem;
  --bs-menu-item-spacer: 0.0625rem;
  --bs-menu-vertical-link-padding-y: 0.3rem;
  --bs-menu-vertical-link-padding-x: 0.8rem;
  --bs-menu-vertical-menu-link-padding-y: 0.25rem;
  --bs-menu-vertical-menu-level-spacer: 0.5rem;
}

/* Base type one notch smaller than Sneat's 15px default */
html { font-size: 14px; }
body { font-size: 0.9286rem; line-height: 1.4; }
h1, .h1 { font-size: 1.85rem; } h2, .h2 { font-size: 1.55rem; } h3, .h3 { font-size: 1.3rem; }
h4, .h4 { font-size: 1.15rem; } h5, .h5 { font-size: 1rem; }   h6, .h6 { font-size: 0.9286rem; }

/* Compact controls */
.btn { padding: 0.36rem 0.9rem; font-size: 0.9286rem; }
.btn-sm { padding: 0.22rem 0.6rem; font-size: 0.8125rem; }
.btn-icon { width: calc(1.5em + 0.72rem + 2px); height: calc(1.5em + 0.72rem + 2px); }
.btn-icon.btn-sm { width: calc(1.5em + 0.44rem + 2px); height: calc(1.5em + 0.44rem + 2px); }
.btn:hover { transform: none; }
.form-control { padding: 0.4rem 0.75rem; font-size: 0.9286rem; }
.form-control-sm { padding: 0.25rem 0.6rem; font-size: 0.8125rem; }
/* Longhands only: the shorthand would reset the right gutter core.css reserves for the caret */
.form-select { padding-top: 0.4rem; padding-bottom: 0.4rem; padding-left: 0.75rem; font-size: 0.9286rem; }
.form-select-sm { padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.6rem; font-size: 0.8125rem; }
.form-label { margin-bottom: 0.25rem; font-size: 0.8571rem; }
.input-group-text { padding: 0.4rem 0.75rem; }
.card .card-header { padding: 0.9rem 1.25rem; }
.card .card-body { padding: 1.25rem; }
.card-title { margin-bottom: 0.5rem; }
.table > :not(caption) > * > * { padding: 0.5rem 0.9rem; }
.table-sm > :not(caption) > * > * { padding: 0.3rem 0.6rem; }

/* Data tables inside cards (.table-wrap / .app-table) */
.app-table { margin-bottom: 0; }
.app-table > :not(caption) > * > * { padding: 0.7rem 0.9rem; vertical-align: middle; }
.app-table > :not(caption) > * > :first-child { padding-left: 1.25rem; }
.app-table > :not(caption) > * > :last-child { padding-right: 1.25rem; }
.app-table > thead > tr > th {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--bs-secondary-color); background: color-mix(in srgb, var(--bs-body-color) 5%, transparent);
  border-bottom: 1px solid var(--bs-border-color);
  white-space: nowrap;
}
.app-table > tbody > tr:last-child > td { border-bottom: 0; }
.app-table > tbody > tr:hover > td { background: color-mix(in srgb, var(--bs-body-color) 3%, transparent); }
.app-table .table-serial { width: 3.25rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; text-align: right; }
.app-table .table-actions { width: 1%; text-align: right; }
.app-table .avatar.avatar-sm { width: 1.85rem; height: 1.85rem; }
.app-table .avatar.avatar-sm .avatar-initial { font-size: 0.7rem; }
.table-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--bs-border-color);
}
/* Caret pulled in and the right padding clearing it: the auto-width select's text never runs under the caret */
.table-filters .form-select-sm { width: auto; min-width: 9rem; padding-right: 2.1rem; background-position: right 0.6rem center; }
.table-filters-search { flex: 0 1 18rem; width: auto; }
.table-filters-search .input-group-text { padding-right: 0.25rem; color: var(--bs-secondary-color); }
.table-filters-search .input-group-text .bx { font-size: 1rem; }
.table-filters-search .form-control { padding-left: 0.4rem; }
/* Row count + rows-per-page sit at the right end of the filter row */
.table-filters-end { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-left: auto; }
.table-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem;
  padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--bs-border-color);
}
.table-count { font-size: 0.8571rem; color: var(--bs-secondary-color); }
.table-count strong { color: var(--bs-body-color); font-weight: 600; }
.table-page-size { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.8571rem; color: var(--bs-secondary-color); white-space: nowrap; }
.table-page-size .form-select-sm { min-width: 4.5rem; }
.table-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--bs-border-color); }
.card > .table-wrap:first-child .table-toolbar, .card > .table-toolbar:first-child, .card > .table-filters:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.dropdown-item { padding: 0.4rem 1rem; }
.alert { padding: 0.65rem 1rem; }
/* Impersonation / support-access notice at the top of every page */
.support-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.support-banner > .bx { font-size: 1.35rem; }
.support-banner form { margin: 0; }
.modal-header { padding: 1rem 1.25rem; }
.modal-body { padding: 1.25rem; }
.modal-footer { padding: 0.75rem 1.25rem; }
.badge { font-size: 0.75em; }
.breadcrumb { margin-bottom: 0.75rem; font-size: 0.8571rem; }

/* Menu chrome */
/* core.css positions the collapse pin for its own 16.25rem menu; follow ours */
.menu .app-brand .layout-menu-toggle { inset-inline-start: calc(var(--bs-menu-width) - 1.05rem); }
/* Icons inside buttons size from the button, not from .icon-base */
.btn .bx { font-size: 1.15em; vertical-align: -0.2em; }
.btn-icon .bx { font-size: 1.2rem; flex: none; inline-size: 1em; block-size: 1em; }
.btn-icon.btn-sm .bx { font-size: 1rem; }
.menu-vertical .menu-header { margin: 0.75rem 0 0.25rem; }
.menu-vertical .menu-header .menu-header-text { font-size: 0.75rem; }
.menu-vertical .menu-icon { font-size: 1.15rem; }
.menu .app-brand { height: 56px; margin-top: 8px; }
.app-brand-logo svg { width: 22px; height: 30px; }
.app-brand-text { font-size: 1.3rem; letter-spacing: -0.3px; }

/* Page gutter */
.container-p-y:not([class^="pb-"]):not([class*=" pb-"]) { padding-bottom: 1.25rem !important; }
.container-p-y:not([class^="pt-"]):not([class*=" pt-"]) { padding-top: 1.25rem !important; }

/* Keep the scrollbar track reserved so fixed elements never shift when a modal
   hides the page scrollbar; and restate the navbar inset for modal-open, because
   core.css hardcodes its own 16.25rem menu width there rather than the variable. */
html { scrollbar-gutter: stable; }
@media (min-width: 1200px) {
  .layout-menu-fixed.layout-navbar-fixed:not(.layout-menu-collapsed) .modal-open .layout-content-navbar:not(.layout-without-menu) .layout-navbar {
    inset-inline-start: var(--bs-menu-width);
  }
}

/* From Sneat demo.css: fixed navbar needs the page pushed down */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page { padding-top: 68px !important; }
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page { padding-top: 60px !important; }
.content-wrapper .navbar { z-index: auto; }
.layout-navbar { height: 3.6rem; }

/* Page header row: title left, actions right */
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; }
.page-header h4 { margin: 0; }

/* Toasts */
#toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: 0.5rem; }
#toast-container .toast { min-width: 18rem; }
/* app.js builds `.bs-toast.text-bg-<level>`, but Sneat paints every .bs-toast from
   --bs-toast-bg (!important; only its .bg-<level> modifiers set it): the level colour
   never showed and the forced white text vanished on the light paper. Keep the paper,
   use the heading colour, and mark the level with the icon and the leading edge. */
#toast-container .bs-toast { color: var(--bs-heading-color) !important; border-inline-start: 4px solid var(--toast-tone); }
#toast-container .bs-toast .bx { color: var(--toast-tone); font-size: 1.25rem; flex: none; }
#toast-container .text-bg-success { --toast-tone: var(--bs-success); }
#toast-container .text-bg-info { --toast-tone: var(--bs-info); }
#toast-container .text-bg-warning { --toast-tone: var(--bs-warning); }
#toast-container .text-bg-danger { --toast-tone: var(--bs-danger); }

/* htmx request state */
.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request .btn[type="submit"] { pointer-events: none; opacity: 0.7; }

/* Tables without DataTables: sortable headers and row actions */
th a.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
th a.sort-link .bx { font-size: 0.9em; vertical-align: -0.1em; }
.row-actions { white-space: nowrap; }
.row-actions .btn { margin-left: 0.15rem; }
.empty-state { padding: 3rem 1rem; text-align: center; color: var(--bs-secondary-color); }
/* The icon is a 1em masked box (icons.css): centre it; an icon inside a button keeps the button size */
.empty-state .bx { font-size: 2.5rem; margin: 0 auto 0.5rem; }
.empty-state .btn .bx { font-size: 1.15em; margin: 0; }
/* A wide table scrolls inside .table-responsive: keep absolutely positioned bits
   (.visually-hidden) inside the scroller so they never widen the page, and pin the
   empty-state message to the visible part of the scroller instead of the middle
   of a table wider than the screen. */
.table-responsive { position: relative; container-type: inline-size; }
.table-responsive .empty-state { position: sticky; left: 0; max-width: calc(100cqi - 2.5rem); }
/* Sneat capitalises every tab label; the rest of the UI is sentence case */
.nav-pills .nav-link { text-transform: none; }

/* Public site */
.site-nav .nav-link { padding: 0.5rem 0.8rem; }
.hero { padding: 4rem 0; }
.site-footer { padding: 2rem 0; font-size: 0.8571rem; }

/* ---------------------------------------------------------------------------
 * Owner identity: home hero (templates/web/home.html) and the split sign-in
 * layout (templates/layouts/auth.html). Text comes from settings.SITE_OWNER.
 * ------------------------------------------------------------------------- */
:root {
  --owner-grad: linear-gradient(135deg, #7c7fff 0%, #5f61e6 45%, #3b3dbb 100%);
}
.owner-hero { padding: 3.5rem 0 1.5rem; }
.owner-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .8rem; border-radius: 50rem; font-size: .8125rem; font-weight: 500;
  color: var(--bs-primary); background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
}
.owner-name { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.owner-role { font-size: 1.15rem; color: var(--bs-secondary-color); }
.owner-location, .owner-note { display: inline-flex; align-items: center; gap: .35rem; color: var(--bs-secondary-color); }
.owner-note { font-size: .875rem; }
.owner-lead { max-width: 36rem; }


.owner-card {
  position: relative; overflow: hidden; text-align: center; padding: 2.75rem 2rem 2.25rem;
  border-radius: 1.25rem; background: var(--bs-paper-bg, var(--bs-body-bg));
  border: 1px solid var(--bs-border-color); box-shadow: 0 1.25rem 3rem -1.5rem rgba(34, 48, 62, .35);
}
.owner-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: .4rem; background: var(--owner-grad);
}
.owner-card-name { margin-top: 0; font-size: 1.35rem; font-weight: 600; color: var(--bs-heading-color); }
.owner-card-role { color: var(--bs-primary); font-weight: 500; }
.owner-card-rule { margin: 1.25rem auto; width: 3rem; opacity: .25; }
.owner-facts { display: grid; gap: .65rem; text-align: left; max-width: 17rem; margin: 0 auto; }
.owner-facts li { display: flex; align-items: center; gap: .6rem; color: var(--bs-body-color); }
.owner-facts .bx { color: var(--bs-primary); font-size: 1.2rem; }

.owner-pillar { border: 1px solid var(--bs-border-color); transition: transform .2s ease, box-shadow .2s ease; }
.owner-pillar:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.75rem -1rem rgba(34, 48, 62, .35); }
.owner-pillar-icon {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem;
  color: var(--bs-primary); background: color-mix(in srgb, var(--bs-primary) 12%, transparent); font-size: 1.4rem;
}
.owner-quote { padding: 2rem 1rem; }
.owner-quote-mark { display: block; font-family: Georgia, serif; font-size: 3.5rem; line-height: 1; height: 2rem; color: color-mix(in srgb, var(--bs-primary) 45%, transparent); }
.owner-quote p { font-size: 1.25rem; font-style: italic; color: var(--bs-heading-color); }

/* Split sign-in: identity panel left, form right; the panel folds into a
   compact strip under 992px. */
.auth-split { display: grid; min-height: 100vh; grid-template-columns: 1fr; }
.auth-split-brand { display: none; }
.auth-split-form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1rem; }
.auth-split-inner { width: 100%; max-width: 27rem; }
.auth-split-card {
  padding: 2rem 1.75rem; border-radius: 1rem; background: var(--bs-paper-bg, var(--bs-body-bg));
  border: 1px solid var(--bs-border-color); box-shadow: 0 1.25rem 3rem -1.75rem rgba(34, 48, 62, .4);
}
.auth-split-card h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.25rem; }
.auth-split-compact {
  display: flex; align-items: center; gap: .75rem; padding-bottom: 1.25rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.auth-split-copy { margin: 2rem 0 0; text-align: center; font-size: .8125rem; color: var(--bs-secondary-color); }
@media (min-width: 992px) {
  .auth-split { grid-template-columns: minmax(22rem, 5fr) 7fr; }
  .auth-split-brand {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
    padding: 2.5rem 3rem; color: #fff; background: var(--owner-grad);
  }
  .auth-split-brand::after {
    content: ""; position: absolute; right: -8rem; bottom: -8rem; width: 22rem; height: 22rem; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%); pointer-events: none;
  }
  .auth-split-compact { display: none; }
}
.auth-split-home { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-size: 1.25rem; }
.auth-split-home:hover { color: #fff; opacity: .9; }
.auth-split-logo svg path { fill: #fff; }
.auth-split-owner { position: relative; z-index: 1; }
.auth-split-name { margin: 0 0 .5rem; color: #fff; font-size: 2.25rem; font-weight: 700; letter-spacing: -.02em; }
.auth-split-role { font-size: 1.1rem; line-height: 1.6; color: rgba(255, 255, 255, .88); margin-bottom: .75rem; }
.auth-split-location, .auth-split-foot { display: flex; align-items: center; gap: .4rem; color: rgba(255, 255, 255, .78); margin: 0; }
.auth-split-foot { position: relative; z-index: 1; font-size: .875rem; }

/* ---------------------------------------------------------------------------
 * Charts: inline SVG from apps/core/charts.py + templates/partials/charts/.
 * Colours are the dataviz reference palette, validated on the card surfaces
 * (#fff light, #2b2c40 dark). Marks take their colour from a tone class
 * (`chart-tone-s1`..`s8`, `-pos`, `-neg`) or a diverging bucket
 * (`chart-div-n3`..`p3`); nothing is styled inline.
 * ------------------------------------------------------------------------- */
:root, [data-bs-theme="light"] {
  --chart-surface: var(--bs-paper-bg, #fff);
  --chart-text: var(--bs-body-color);
  --chart-muted: var(--bs-secondary-color);
  --chart-grid: color-mix(in srgb, var(--bs-border-color) 70%, transparent);
  --chart-axis: var(--bs-border-color);
  --chart-s1: #2a78d6; --chart-s2: #eb6834; --chart-s3: #1baf7a; --chart-s4: #eda100;
  --chart-s5: #e87ba4; --chart-s6: #008300; --chart-s7: #4a3aa7; --chart-s8: #e34948;
  --chart-pos: #2a78d6; --chart-neg: #e34948;
  --chart-div-n3: #b43b3a; --chart-div-n2: #e7837c; --chart-div-n1: #f6c2bd; --chart-div-0: #f0efec;
  --chart-div-p1: #b7d3f6; --chart-div-p2: #6da7ec; --chart-div-p3: #256abf;
  --chart-ink-dark: #0b0b0b; --chart-ink-light: #fff;
}
[data-bs-theme="dark"] {
  --chart-s1: #3987e5; --chart-s2: #d95926; --chart-s3: #199e70; --chart-s4: #c98500;
  --chart-s5: #d55181; --chart-s6: #008300; --chart-s7: #9085e9; --chart-s8: #e66767;
  --chart-pos: #3987e5; --chart-neg: #e66767;
  /* Dark: magnitude brightens away from the surface (steps chosen, not flipped). */
  --chart-div-n3: #e7837c; --chart-div-n2: #b43b3a; --chart-div-n1: #8c2828; --chart-div-0: #383835;
  --chart-div-p1: #184f95; --chart-div-p2: #256abf; --chart-div-p3: #6da7ec;
}
.chart { margin: 0; }
.chart-frame { overflow-x: auto; }
.chart-svg { display: block; width: 100%; height: auto; min-width: 480px; overflow: visible; }
/* Phones: the 720-unit viewBox squeezed to a 350px card renders 11px labels at
   about 5px; keep them near 9px and let the frame scroll instead. */
@media (max-width: 575.98px) { .chart-svg { min-width: 600px; } }
.chart-svg text { font-size: 11px; fill: var(--chart-muted); font-variant-numeric: tabular-nums; }
.chart-grid line { stroke: var(--chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-axis { stroke: var(--chart-axis); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-reference line { stroke: var(--chart-muted); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.6; }
.chart-svg .chart-reference text, .chart-svg .chart-end-label, .chart-svg .chart-value, .chart-svg .chart-total { fill: var(--chart-text); }
.chart-svg .chart-row-label { fill: var(--chart-text); }
.chart-tone-s1 { --tone: var(--chart-s1); } .chart-tone-s2 { --tone: var(--chart-s2); }
.chart-tone-s3 { --tone: var(--chart-s3); } .chart-tone-s4 { --tone: var(--chart-s4); }
.chart-tone-s5 { --tone: var(--chart-s5); } .chart-tone-s6 { --tone: var(--chart-s6); }
.chart-tone-s7 { --tone: var(--chart-s7); } .chart-tone-s8 { --tone: var(--chart-s8); }
.chart-tone-pos { --tone: var(--chart-pos); } .chart-tone-neg { --tone: var(--chart-neg); }
.chart-line { fill: none; stroke: var(--tone); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-area { fill: var(--tone); fill-opacity: 0.1; stroke: none; }
.chart-dot { fill: var(--tone); stroke: var(--chart-surface); stroke-width: 2; }
.chart-bar { fill: var(--tone); }
/* CSS-only hover: a crosshair and dots per column, a lift per bar or cell. */
.chart-hit rect, .chart-hit-area { fill: transparent; }
.chart-hit line { stroke: var(--chart-muted); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.chart-hit circle { fill: var(--tone); stroke: var(--chart-surface); stroke-width: 2; opacity: 0; }
.chart-hit:hover line, .chart-hit:hover circle { opacity: 1; }
.chart-bar-group:hover .chart-bar { opacity: 0.8; }
.chart-cell rect { fill: var(--cell); }
.chart-svg .chart-cell text { fill: var(--cell-ink); font-weight: 600; }
.chart-cell:hover rect { stroke: var(--chart-text); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart-cell-empty rect { fill: none; stroke: var(--chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-div-n3 { --cell: var(--chart-div-n3); --cell-ink: var(--chart-ink-light); }
.chart-div-n2 { --cell: var(--chart-div-n2); --cell-ink: var(--chart-ink-dark); }
.chart-div-n1 { --cell: var(--chart-div-n1); --cell-ink: var(--chart-ink-dark); }
.chart-div-0 { --cell: var(--chart-div-0); --cell-ink: var(--chart-ink-dark); }
.chart-div-p1 { --cell: var(--chart-div-p1); --cell-ink: var(--chart-ink-dark); }
.chart-div-p2 { --cell: var(--chart-div-p2); --cell-ink: var(--chart-ink-dark); }
.chart-div-p3 { --cell: var(--chart-div-p3); --cell-ink: var(--chart-ink-light); }
[data-bs-theme="dark"] :is(.chart-div-n2, .chart-div-n1, .chart-div-0, .chart-div-p1, .chart-div-p2) { --cell-ink: var(--chart-ink-light); }
[data-bs-theme="dark"] :is(.chart-div-n3, .chart-div-p3) { --cell-ink: var(--chart-ink-dark); }
/* Legends and keys mirror the mark: a short line for lines, a cell for cells. */
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 0.5rem; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--chart-text); }
.chart-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.chart-legend-scale { margin: 0.5rem 0 0; gap: 0.25rem 0.75rem; color: var(--chart-muted); }
.chart-key { display: inline-block; flex: none; }
.chart-key-line { width: 1rem; height: 2px; border-radius: 1px; background: var(--tone); }
.chart-key-cell { width: 0.85rem; height: 0.85rem; border-radius: 2px; background: var(--cell); }
.chart-table { margin-top: 0.5rem; font-size: 0.8125rem; }
.chart-table > summary { color: var(--chart-muted); cursor: pointer; width: max-content; }
.chart-table table { margin-top: 0.5rem; font-variant-numeric: tabular-nums; }
.chart-table caption { caption-side: top; padding-top: 0; color: var(--chart-muted); }
@media (forced-colors: active) {
  .chart-line { stroke: CanvasText; }
  .chart-bar, .chart-dot { fill: CanvasText; }
}

/* Metric tiles (backtest results and other KPI rows) */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.75rem; }
.metric { padding: 0.75rem 1rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--bs-paper-bg); }
.metric-label { font-size: 0.8125rem; color: var(--bs-secondary-color); }
.metric-value { font-size: 1.25rem; font-weight: 600; color: var(--bs-heading-color); line-height: 1.3; }
.metric-note { font-size: 0.75rem; color: var(--bs-secondary-color); }