/* Shared presentation contract. Load after legacy CSS in both Twig layouts. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter/InterVariable.woff2') format('woff2');
}

:root, [data-bs-theme="light"] {
  color-scheme: light;
  --surface: #f7fafc;
  --surface-rgb: 247, 250, 252;
  --surface-low-rgb: 241, 244, 246;
  --surface-dim: #d7dadc;
  --surface-bright: #f7fafc;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f1f4f6;
  --surface-container: #ebeef0;
  --surface-container-high: #e5e9eb;
  --surface-container-highest: #e0e3e5;
  --on-surface: #181c1e;
  --on-surface-rgb: 24, 28, 30;
  --on-surface-variant: #414751;
  --outline: #717782;
  --outline-variant: #c0c7d3;
  --primary: #005ea1;
  --primary-rgb: 0, 94, 161;
  --primary-hover: #00497e;
  --on-primary: #ffffff;
  --primary-container: #d2e4ff;
  --on-primary-container: #001d37;
  --primary-fixed: #d2e4ff;
  --primary-fixed-dim: #9fcaff;
  --on-primary-fixed: #001d37;
  --on-primary-fixed-variant: #00497e;
  --secondary: #585e6c;
  --on-secondary: #ffffff;
  --secondary-container: #dde2f3;
  --on-secondary-container: #414754;
  --tertiary: #565d63;
  --on-tertiary: #ffffff;
  --tertiary-container: #dde3eb;
  --on-tertiary-container: #41474e;
  --semantic-success-rgb: 25, 135, 84;
  --semantic-danger-rgb: 186, 26, 26;
  --semantic-warning-rgb: 180, 83, 9;
  --semantic-info-rgb: 0, 94, 161;
  --success-container: #e8f5ed;
  --on-success-container: #145c38;
  --warning-container: #fff0d6;
  --on-warning-container: #754300;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --overlay-surface: rgba(247, 250, 252, 0.86);
  --shadow-card: 0 1px 3px rgba(24, 28, 30, 0.05);
  --shadow-popover: 0 12px 36px rgba(24, 28, 30, 0.14);
  --shadow-filter-expanded: 0 3px 6px rgba(24, 28, 30, 0.22), 0 18px 40px rgba(24, 28, 30, 0.28);
  --chart-series-1: #005ea1;
  --chart-series-2: #198754;
  --chart-series-3: #a65b08;
  --chart-series-4: #7554ac;
  --chart-series-5: #ab426d;
  --chart-series-6: #177b87;
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --surface: #10161d;
  --surface-rgb: 16, 22, 29;
  --surface-low-rgb: 29, 41, 53;
  --surface-dim: #0b1016;
  --surface-bright: #1b2631;
  --surface-container-lowest: #17212b;
  --surface-container-low: #1d2935;
  --surface-container: #24323f;
  --surface-container-high: #2b3a49;
  --surface-container-highest: #334555;
  --on-surface: #e6edf3;
  --on-surface-rgb: 230, 237, 243;
  --on-surface-variant: #b6c3d0;
  --outline: #889bad;
  --outline-variant: #435769;
  --primary: #9fcaff;
  --primary-rgb: 159, 202, 255;
  --primary-hover: #c7e1ff;
  --on-primary: #08213a;
  --primary-container: #234366;
  --on-primary-container: #d2e4ff;
  --primary-fixed: #234366;
  --primary-fixed-dim: #30577e;
  --on-primary-fixed: #e0efff;
  --on-primary-fixed-variant: #c7e1ff;
  --secondary: #c1c6d7;
  --on-secondary: #202937;
  --secondary-container: #303d4f;
  --on-secondary-container: #dde2f3;
  --tertiary: #c1c7cf;
  --on-tertiary: #25303b;
  --tertiary-container: #354250;
  --on-tertiary-container: #dde3eb;
  --semantic-success-rgb: 105, 211, 153;
  --semantic-danger-rgb: 255, 161, 153;
  --semantic-warning-rgb: 244, 190, 103;
  --semantic-info-rgb: 159, 202, 255;
  --success-container: #173d30;
  --on-success-container: #b4efcc;
  --warning-container: #45361d;
  --on-warning-container: #ffdda3;
  --error-container: #492a2c;
  --on-error-container: #ffd0cb;
  --overlay-surface: rgba(16, 22, 29, 0.86);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.18);
  --shadow-popover: 0 12px 36px rgba(0, 0, 0, 0.38);
  --shadow-filter-expanded: 0 3px 6px rgba(0, 0, 0, 0.5), 0 18px 40px rgba(0, 0, 0, 0.6);
  --chart-series-1: #9fcaff;
  --chart-series-2: #69d399;
  --chart-series-3: #f4be67;
  --chart-series-4: #bca5ef;
  --chart-series-5: #f1a0c4;
  --chart-series-6: #78d0dc;
}

/* Inverse surfaces and application chrome deliberately retain their own contrast. */
:root {
  --font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --inverse-surface: #202d3a;
  --inverse-on-surface: #eef1f3;
  --chrome-surface: #111d2b;
  --chrome-surface-raised: #1c2d40;
  --chrome-text: #eef3f9;
  --chrome-muted: #bac8d7;
  --chrome-border: #41546a;
  --radius-control: 6px;
  --radius-card: 12px;
  --space-page: 24px;
}

:root, [data-bs-theme] {
  --border-color: var(--outline-variant);
  --highlight-background: var(--surface-container-low);
  --primary-color: var(--primary);
  --error: rgb(var(--semantic-danger-rgb));
  --on-error: var(--on-primary);
  --background: var(--surface);
  --on-background: var(--on-surface);
  --surface-variant: var(--surface-container-highest);
  --surface-tint: var(--primary);
  --bs-font-sans-serif: var(--font-family);
  --bs-body-font-family: var(--font-family);
  --bs-body-font-size: 0.875rem;
  --bs-body-color: var(--on-surface);
  --bs-body-color-rgb: var(--on-surface-rgb);
  --bs-body-bg: var(--surface);
  --bs-body-bg-rgb: var(--surface-rgb);
  --bs-emphasis-color: var(--on-surface);
  --bs-emphasis-color-rgb: var(--on-surface-rgb);
  --bs-secondary-color: var(--on-surface-variant);
  --bs-secondary-bg: var(--surface-container);
  --bs-secondary-bg-rgb: var(--surface-container-rgb, 235, 238, 240);
  --bs-tertiary-color: var(--on-surface-variant);
  --bs-tertiary-bg: var(--surface-container-low);
  --bs-tertiary-bg-rgb: var(--surface-low-rgb);
  --bs-border-color: var(--outline-variant);
  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-link-color: var(--primary);
  --bs-link-color-rgb: var(--primary-rgb);
  --bs-link-hover-color: var(--primary-hover);
  --bs-link-hover-color-rgb: var(--primary-rgb);
  --bs-success-rgb: var(--semantic-success-rgb);
  --bs-danger-rgb: var(--semantic-danger-rgb);
  --bs-warning-rgb: var(--semantic-warning-rgb);
  --bs-info-rgb: var(--semantic-info-rgb);
  --bs-light-rgb: var(--surface-container-rgb, 235, 238, 240);
}
[data-bs-theme="light"] { --surface-container-rgb: 235, 238, 240; }
[data-bs-theme="dark"] { --surface-container-rgb: 36, 50, 63; }

body { background: var(--surface); color: var(--on-surface); font-family: var(--font-family); font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font-family: inherit; }
h1, .h1 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; }
h2, .h2, .chart-title { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
h3, .h3 { font-size: 16px; line-height: 24px; font-weight: 600; }
small, .small { font-size: 12px; line-height: 1.4; }
code, pre, .font-monospace { font-family: var(--font-mono); }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
:where(.btn, .nav-link, .dropdown-item):focus-visible { box-shadow: none; }
::selection { background: var(--primary-fixed); color: var(--on-primary-fixed); }

.app-main { padding: var(--space-page); }
.app-main > [data-vue], .app-main > [data-vue-component] { min-width: 0; }
.card, .modal-content, .offcanvas, .dropdown-menu, .toast, .list-group-item {
  --bs-card-bg: var(--surface-container-lowest);
  --bs-card-color: var(--on-surface);
  --bs-card-border-color: var(--outline-variant);
  --bs-card-border-radius: var(--radius-card);
  --bs-modal-bg: var(--surface-container-lowest);
  --bs-modal-color: var(--on-surface);
  --bs-modal-border-color: var(--outline-variant);
  --bs-offcanvas-bg: var(--surface-container-lowest);
  --bs-offcanvas-color: var(--on-surface);
  --bs-dropdown-bg: var(--surface-container-lowest);
  --bs-dropdown-color: var(--on-surface);
  --bs-dropdown-link-color: var(--on-surface);
  --bs-dropdown-link-hover-bg: var(--surface-container-low);
  --bs-dropdown-link-hover-color: var(--on-surface);
  --bs-dropdown-link-active-bg: var(--primary);
  --bs-dropdown-link-active-color: var(--on-primary);
  --bs-toast-bg: var(--surface-container-lowest);
  --bs-toast-color: var(--on-surface);
  --bs-list-group-bg: var(--surface-container-lowest);
  --bs-list-group-color: var(--on-surface);
  --bs-list-group-border-color: var(--outline-variant);
}
.card {
  /* Keep header/footer backgrounds inside the rounded outer border. */
  --bs-card-inner-border-radius: max(0px, calc(var(--bs-card-border-radius) - var(--bs-card-border-width)));
  box-shadow: var(--shadow-card);
}
.card-header, .card-footer { background: var(--surface-container-low); border-color: var(--outline-variant); }
.card-body { padding: 24px; }
.modal-content, .dropdown-menu { box-shadow: var(--shadow-popover); }
.modal-header, .modal-footer, .offcanvas-header { border-color: var(--outline-variant); }
.modal-title, .offcanvas-title { font-size: 18px; font-weight: 600; }
.form-label, .form-group label { font-size: 12px; font-weight: 600; color: var(--on-surface-variant); }
.form-control, .form-select, .input-group-text {
  min-height: 40px;
  border-color: var(--outline-variant);
  border-radius: var(--radius-control);
  background-color: var(--surface-container-lowest);
  color: var(--on-surface);
  font-size: 14px;
}
.form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .form-select { min-height: 32px; font-size: 13px; }
textarea.form-control { min-height: 96px; }
.form-control::placeholder { color: var(--on-surface-variant); opacity: 0.8; }
.form-control:focus, .form-select:focus { background-color: var(--surface-container-lowest); color: var(--on-surface); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.16); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--surface-container-low); color: var(--on-surface-variant); }
.form-control.is-invalid, .form-select.is-invalid { border-color: rgb(var(--semantic-danger-rgb)); }
.invalid-feedback { color: rgb(var(--semantic-danger-rgb)); }
.form-check-input { background-color: var(--surface-container-lowest); border-color: var(--outline); accent-color: var(--primary); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.16); }

.btn { --bs-btn-border-radius: var(--radius-control); --bs-btn-font-size: 14px; --bs-btn-font-weight: 600; min-height: 40px; }
.btn-sm, .btn-group-sm > .btn { --bs-btn-font-size: 13px; min-height: 32px; }
.btn-primary, .btn-primary-taugo, .user-management-primary-action {
  --bs-btn-color: var(--on-primary); --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--on-primary); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-color: var(--on-primary); --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-disabled-color: var(--on-primary); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary);
}
.btn.btn-primary, .btn-primary-taugo, .user-management-primary-action { background: var(--bs-btn-bg); color: var(--bs-btn-color); border: 1px solid var(--bs-btn-border-color); }
.btn.btn-primary:hover, .btn-primary-taugo:hover, .user-management-primary-action:hover { background: var(--bs-btn-hover-bg); color: var(--bs-btn-hover-color); border-color: var(--bs-btn-hover-border-color); }
.btn-outline-secondary, .btn-outline-taugo, .btn-outline-dark, .btn-light, .user-management-secondary-action {
  --bs-btn-color: var(--on-surface); --bs-btn-bg: var(--surface-container-lowest); --bs-btn-border-color: var(--outline-variant);
  --bs-btn-hover-color: var(--on-surface); --bs-btn-hover-bg: var(--surface-container-low); --bs-btn-hover-border-color: var(--outline);
  --bs-btn-active-color: var(--on-primary-fixed); --bs-btn-active-bg: var(--primary-fixed); --bs-btn-active-border-color: var(--primary);
  --bs-btn-disabled-color: var(--on-surface-variant); --bs-btn-disabled-bg: var(--surface-container-low); --bs-btn-disabled-border-color: var(--outline-variant);
  color: var(--bs-btn-color); background: var(--bs-btn-bg); border-color: var(--bs-btn-border-color);
}
.btn-outline-taugo:hover, .user-management-secondary-action:hover { background: var(--bs-btn-hover-bg); color: var(--bs-btn-hover-color); border-color: var(--bs-btn-hover-border-color); }
.btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-color: var(--on-primary); --bs-btn-active-bg: var(--primary); --bs-btn-active-color: var(--on-primary); }
.btn-danger { --bs-btn-bg: var(--error-container); --bs-btn-color: var(--on-error-container); --bs-btn-border-color: rgb(var(--semantic-danger-rgb)); --bs-btn-hover-bg: var(--error-container); --bs-btn-hover-color: var(--on-error-container); --bs-btn-hover-border-color: var(--on-error-container); }
.btn-outline-danger { --bs-btn-color: rgb(var(--semantic-danger-rgb)); --bs-btn-border-color: rgb(var(--semantic-danger-rgb)); --bs-btn-hover-bg: var(--error-container); --bs-btn-hover-color: var(--on-error-container); }
.btn:disabled { cursor: not-allowed; }
.btn .fa-solid, .btn .fa-regular { font-size: 1em; }
.orders-filters__btn-primary:hover, .orders-filters__btn-secondary:hover { transform: none; box-shadow: none; }

.nav-tabs { gap: 4px; border-color: var(--outline-variant); }
.nav-tabs .nav-link, .nav-pills .nav-link { padding: 10px 16px; color: var(--on-surface-variant); font-size: 14px; font-weight: 600; border-radius: var(--radius-control); }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: var(--radius-control) var(--radius-control) 0 0; }
.nav-tabs .nav-link:hover, .nav-pills .nav-link:hover { background: var(--surface-container-low); color: var(--on-surface); }
.nav-tabs .nav-link.active { background: transparent; border-bottom-color: var(--primary); color: var(--primary); }
.nav-pills .nav-link.active { background: var(--primary-fixed); color: var(--on-primary-fixed); }
.nav-tabs .nav-link:disabled, .nav-pills .nav-link:disabled { opacity: 0.5; cursor: not-allowed; }

.table {
  --bs-table-color: var(--on-surface); --bs-table-bg: var(--surface-container-lowest);
  --bs-table-border-color: var(--outline-variant); --bs-table-striped-bg: var(--surface-container-low);
  --bs-table-striped-color: var(--on-surface); --bs-table-hover-bg: var(--surface-container-low);
  --bs-table-hover-color: var(--on-surface); --bs-table-active-bg: var(--primary-fixed); --bs-table-active-color: var(--on-primary-fixed);
  font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums;
}
.table > thead > tr > th { padding: 12px; background: var(--surface-container); color: var(--on-surface-variant); font-size: 12px; font-weight: 600; vertical-align: middle; }
.table > tbody > tr > td { padding: 12px; vertical-align: middle; }
/* Bootstrap leaves hidden captions in table flow, creating a trailing pixel of overflow. */
.table > caption.visually-hidden { position: absolute !important; top: 0; left: 0; }
.table-sm > tbody > tr > td, .table-sm > thead > tr > th { padding: 8px; }
.table > thead.sticky-top { z-index: 1000; }
.table thead.sticky-top th, .table .sticky-header { position: sticky; top: var(--table-sticky-top, 0); z-index: 2; background: var(--surface-container); }
.table-responsive { margin-top: 0; }
.table-success { --bs-table-bg: var(--success-container); --bs-table-color: var(--on-success-container); }
.table-danger { --bs-table-bg: var(--error-container); --bs-table-color: var(--on-error-container); }
.table-warning { --bs-table-bg: var(--warning-container); --bs-table-color: var(--on-warning-container); }
.table-info { --bs-table-bg: var(--primary-fixed); --bs-table-color: var(--on-primary-fixed); }
.table-secondary { --bs-table-bg: var(--surface-container); --bs-table-color: var(--on-surface); }

.alert { border-radius: var(--radius-control); }
.alert-danger { --bs-alert-bg: var(--error-container); --bs-alert-color: var(--on-error-container); --bs-alert-border-color: rgb(var(--semantic-danger-rgb)); }
.alert-success { --bs-alert-bg: var(--success-container); --bs-alert-color: var(--on-success-container); --bs-alert-border-color: rgb(var(--semantic-success-rgb)); }
.alert-warning { --bs-alert-bg: var(--warning-container); --bs-alert-color: var(--on-warning-container); --bs-alert-border-color: rgb(var(--semantic-warning-rgb)); }
.alert-info, .alert-primary { --bs-alert-bg: var(--primary-fixed); --bs-alert-color: var(--on-primary-fixed); --bs-alert-border-color: var(--primary); }
.alert-secondary, .alert-light { --bs-alert-bg: var(--surface-container-low); --bs-alert-color: var(--on-surface); --bs-alert-border-color: var(--outline-variant); }
.badge { font-weight: 600; line-height: 1.4; }
.badge.text-bg-primary { color: var(--on-primary) !important; }
.badge.text-bg-light, .badge.bg-light { color: var(--on-surface) !important; background: var(--surface-container-low) !important; }
.bg-white { background-color: var(--surface-container-lowest) !important; }
.text-dark, .text-black, .link-dark { color: var(--on-surface) !important; }
.text-muted { color: var(--on-surface-variant) !important; }
.loading-overlay { background: var(--overlay-surface); }

/* Global header controls use the same accessible anatomy in either application theme. */
.context-selector-control { min-height: 36px; }
.app-header-meta > .theme-selector { flex-basis: 168px; }
.app-header-meta > .context-selector { max-width: 180px; }
.theme-selector .context-selector-select { min-width: 64px; }
.app-header-meta .context-selector-control { background: var(--chrome-surface-raised); border-color: var(--chrome-border); color: var(--chrome-text); }
.app-header-meta .context-selector-label, .app-header-meta .context-selector-icon { color: var(--chrome-muted); }
.app-header-meta .context-selector-select { color: var(--chrome-text); color-scheme: dark; }
.app-header-meta .context-selector-control:hover { border-color: var(--chrome-muted); }
.app-header-meta .context-selector-control:focus-within { outline-color: #9fcaff; }

/* A shared anatomy for list/detail pages, including the older nested wrappers. */
.app-page-header { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.app-page-back { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--outline-variant); border-radius: var(--radius-control); background: var(--surface-container-lowest); color: var(--on-surface); flex-shrink: 0; }
.app-page-back:hover { background: var(--surface-container-low); color: var(--primary); }
.app-page-section { margin-bottom: 24px; min-width: 0; }
.app-filter-panel { border: 1px solid var(--outline-variant); border-radius: var(--radius-card); background: var(--surface-container-lowest); box-shadow: var(--shadow-card); }
.app-filter-panel .card-body { padding: 16px; }
.app-filter-panel .form-label { margin-bottom: 6px; }
.global-filter-panel { border-left: 3px solid var(--primary); }
.app-filter-panel.global-filter-panel--expanded {
  border-color: var(--outline);
  box-shadow: var(--shadow-filter-expanded);
}
.global-filter-panel--expanded .global-filter-toolbar {
  background: var(--surface-container-low);
  border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}


@media (max-width: 767.98px) {
  :root { --space-page: 8px; }
  .card { --bs-card-spacer-x: 12px; --bs-card-spacer-y: 12px; }
  .card-body, .app-filter-panel .card-body { padding: 12px; }
  .app-main > .container, .app-main > .container-fluid,
  .app-main > [data-vue] > .container, .app-main > [data-vue-component] > .container { padding-inline: 0; }
  .app-main .sales-analytics, .app-main .dashboard-page, .app-main .profile-workspace { padding: 0; }
  .analytics-table-card .card-header { padding: 12px; }
  .analytics-tables { gap: 12px; }
  .table-responsive { max-height: none; overflow-x: auto; }
  .table-responsive > .table { min-width: 640px; }
  .adaptive-table-content { min-width: 0; overflow-x: auto; }
  .adaptive-table-content table { min-width: 640px; table-layout: auto; }
  .adaptive-table-content table { display: table; }
  .adaptive-table-content thead { display: table-header-group; }
  .adaptive-table-content tbody { display: table-row-group; }
  .adaptive-table-content tbody tr { display: table-row; }
  .adaptive-table-content tbody td { display: table-cell; }
  .adaptive-table-content td[data-label]::before { content: none; }
  .adaptive-table-content td { white-space: nowrap; }
  .adaptive-table-content td[data-label] { text-align: end !important; }
  .app-header-meta { justify-content: flex-start; }
  .app-header-meta > .context-selector, .app-header-region-select { flex: 1 1 130px; }
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; }
  .nav-tabs .nav-link { white-space: nowrap; flex-shrink: 0; }
  .app-page-header { gap: 12px; margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .nav-link, .context-selector-control, .app-page-back { transition: none; }
}
@media (forced-colors: active) {
  .nav-tabs .nav-link.active { border-bottom: 2px solid Highlight; }
  .nav-pills .nav-link.active { outline: 2px solid Highlight; }
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-bar a, .leaflet-control-layers { background: var(--surface-container-lowest); color: var(--on-surface); }
.leaflet-bar a:hover { background: var(--surface-container-low); color: var(--primary); }
.leaflet-container { background: var(--surface-container); }

/* Semantic badges retain readable pairs when the semantic channels become lighter. */
.badge.bg-success, .badge.text-bg-success { background: var(--success-container) !important; color: var(--on-success-container) !important; border: 1px solid rgb(var(--semantic-success-rgb)); }
.badge.bg-danger, .badge.text-bg-danger { background: var(--error-container) !important; color: var(--on-error-container) !important; border: 1px solid rgb(var(--semantic-danger-rgb)); }
.badge.bg-warning, .badge.text-bg-warning { background: var(--warning-container) !important; color: var(--on-warning-container) !important; border: 1px solid rgb(var(--semantic-warning-rgb)); }
.badge.bg-info, .badge.text-bg-info { background: var(--primary-fixed) !important; color: var(--on-primary-fixed) !important; border: 1px solid var(--primary); }
.toast.bg-success { background: var(--success-container) !important; color: var(--on-success-container) !important; }
.toast.bg-danger { background: var(--error-container) !important; color: var(--on-error-container) !important; }
.btn.btn-primary:active, .btn.btn-primary.active, .btn-primary-taugo:active { background: var(--primary-hover); color: var(--on-primary); border-color: var(--primary-hover); }
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2308213a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
[data-bs-theme="dark"] .form-check-input:checked[type="radio"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2308213a'/%3e%3c/svg%3e"); }

.app-confirmation { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--outline-variant); border-radius: var(--radius-card); background: var(--surface-container-lowest); color: var(--on-surface); box-shadow: var(--shadow-popover); overflow-y: auto; }
.app-confirmation::backdrop { background: rgb(0 0 0 / 55%); }
.app-confirmation h2 { margin: 0 0 12px; }
.app-confirmation p { margin: 0 0 24px; white-space: pre-line; overflow-wrap: anywhere; }
.app-confirmation-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* Horizontal tables have an explicit bounded scroll region, so sticky headers stick
   to that region rather than an unbounded overflow ancestor. */
.table-responsive { max-height: 70vh; max-height: 70dvh; overflow: auto; scrollbar-color: var(--outline) var(--surface-container-low); }
@media (max-width: 767.98px) { .table-responsive { max-height: none; } }
.table-responsive > .table > thead { z-index: 2; }
.table > thead { --bs-table-bg: var(--surface-container); }

.notification-count { background: var(--warning-container); color: var(--on-warning-container); border-color: var(--chrome-surface-raised); }
.upload-section button { background: var(--success-container); color: var(--on-success-container); border: 1px solid rgb(var(--semantic-success-rgb)); }
.upload-section button:hover:not(:disabled), .upload-section button:active:not(:disabled) { background: var(--success-container); color: var(--on-success-container); border-color: var(--on-success-container); }

/* Compatibility for legacy utility classes without losing selected navigation. */
.nav-tabs .nav-link.link-dark { color: var(--on-surface-variant) !important; }
.nav-tabs .nav-link.link-dark.active { color: var(--primary) !important; }
.app-main h1 { font-size: 24px; line-height: 32px; letter-spacing: -0.02em; }
.app-main .card .chart-title { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }