/* [BPI] BulkPurchaseIndia brand layer for the admin, seller, hub and vendor panels.
 *
 * Colours are NOT set here: they come from the --bpi-* variables that
 * layouts/partials/_bpi_theme.blade.php prints from Settings → Appearance
 * (App\Support\Theme\ThemeTokens). This file only maps Tabler / Bootstrap,
 * DataTables and the legacy --aznow-* variables onto those tokens and applies
 * the square-edged, border-first component treatment.
 */


:root, :root[data-bs-theme-primary], :root[data-bs-theme-base], [data-bs-theme=light], html[data-bs-theme="dark"], body[data-bs-theme="dark"] {
  --tblr-font-sans-serif: var(--bpi-font-sans);
  --tblr-font-monospace: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --tblr-primary: var(--bpi-primary);
  --tblr-primary-rgb: var(--bpi-primary-rgb);
  --tblr-primary-fg: var(--bpi-on-primary);
  --tblr-primary-darken: var(--bpi-primary-hover);
  --tblr-primary-lt: var(--bpi-primary-subtle);
  --tblr-primary-bg-subtle: var(--bpi-primary-subtle);
  --tblr-primary-text-emphasis: var(--bpi-primary-active);
  --tblr-link-color: var(--bpi-primary);
  --tblr-link-color-rgb: var(--bpi-primary-rgb);
  --tblr-link-hover-color: var(--bpi-primary-hover);
  --tblr-success: var(--bpi-success); --tblr-success-rgb: var(--bpi-success-rgb); --tblr-success-lt: var(--bpi-success-subtle); --tblr-success-fg: var(--bpi-on-success);
  --tblr-warning: var(--bpi-warning); --tblr-warning-rgb: var(--bpi-warning-rgb); --tblr-warning-lt: var(--bpi-warning-subtle); --tblr-warning-fg: var(--bpi-on-error);
  --tblr-danger: var(--bpi-error); --tblr-danger-rgb: var(--bpi-error-rgb); --tblr-danger-lt: var(--bpi-error-subtle); --tblr-danger-fg: var(--bpi-on-error);
  --tblr-info: var(--bpi-info); --tblr-info-rgb: var(--bpi-info-rgb); --tblr-info-lt: var(--bpi-info-subtle);
  --tblr-azure: var(--bpi-info); --tblr-azure-lt: var(--bpi-info-subtle);
  --tblr-blue: var(--bpi-primary); --tblr-blue-rgb: var(--bpi-primary-rgb); --tblr-blue-lt: var(--bpi-primary-subtle);
  /* Tabler's named palette: the old blues / purples become the brand colour,
     status hues become the state tokens, so bg-green, text-red, badge
     bg-orange-lt etc. follow Settings → Appearance too. Pink and lime stay Tabler's. */
  --tblr-azure-rgb: var(--bpi-info-rgb);
  --tblr-indigo: var(--bpi-primary); --tblr-indigo-rgb: var(--bpi-primary-rgb); --tblr-indigo-lt: var(--bpi-primary-subtle);
  --tblr-purple: var(--bpi-primary); --tblr-purple-rgb: var(--bpi-primary-rgb); --tblr-purple-lt: var(--bpi-primary-subtle);
  --tblr-teal: var(--bpi-primary); --tblr-teal-rgb: var(--bpi-primary-rgb); --tblr-teal-lt: var(--bpi-primary-subtle);
  --tblr-cyan: var(--bpi-info); --tblr-cyan-rgb: var(--bpi-info-rgb); --tblr-cyan-lt: var(--bpi-info-subtle);
  --tblr-green: var(--bpi-success); --tblr-green-rgb: var(--bpi-success-rgb); --tblr-green-lt: var(--bpi-success-subtle);
  --tblr-red: var(--bpi-error); --tblr-red-rgb: var(--bpi-error-rgb); --tblr-red-lt: var(--bpi-error-subtle);
  --tblr-orange: var(--bpi-warning); --tblr-orange-rgb: var(--bpi-warning-rgb); --tblr-orange-lt: var(--bpi-warning-subtle);
  --tblr-yellow: var(--bpi-warning); --tblr-yellow-rgb: var(--bpi-warning-rgb); --tblr-yellow-lt: var(--bpi-warning-subtle);
  --tblr-dark: var(--bpi-secondary); --tblr-dark-rgb: var(--bpi-secondary-rgb); --tblr-dark-lt: var(--bpi-surface-secondary);
  --tblr-gray-300: var(--bpi-border);
  --tblr-primary-border-subtle: var(--bpi-primary);
  --tblr-success-bg-subtle: var(--bpi-success-subtle); --tblr-success-text-emphasis: var(--bpi-success);
  --tblr-danger-bg-subtle: var(--bpi-error-subtle); --tblr-danger-text-emphasis: var(--bpi-error);
  --tblr-warning-bg-subtle: var(--bpi-warning-subtle); --tblr-warning-text-emphasis: var(--bpi-warning);
  --tblr-info-bg-subtle: var(--bpi-info-subtle); --tblr-info-text-emphasis: var(--bpi-info);
  --tblr-secondary-bg: var(--bpi-surface-secondary); --tblr-tertiary-bg: var(--bpi-surface-secondary);
  --tblr-form-valid-color: var(--bpi-success); --tblr-form-valid-border-color: var(--bpi-success);
  --tblr-form-invalid-color: var(--bpi-error); --tblr-form-invalid-border-color: var(--bpi-error);
  --tblr-highlight-bg: var(--bpi-accent-subtle); --tblr-highlight-color: var(--bpi-text-primary);
  --tblr-active-bg: var(--bpi-primary-subtle);
  /* SweetAlert2 (v11 CSS variables) */
  --swal2-background: var(--bpi-surface); --swal2-color: var(--bpi-text-primary);
  --swal2-confirm-button-background-color: var(--bpi-primary); --swal2-deny-button-background-color: var(--bpi-error);
  --swal2-cancel-button-background-color: var(--bpi-secondary);
  --tblr-body-bg: var(--bpi-background);
  --tblr-body-bg-rgb: var(--bpi-background-rgb);
  --tblr-body-color: var(--bpi-text-primary);
  --tblr-body-color-rgb: var(--bpi-text-primary-rgb);
  --tblr-emphasis-color: var(--bpi-text-primary);
  --tblr-secondary: var(--bpi-text-secondary);
  --tblr-secondary-rgb: var(--bpi-text-secondary-rgb);
  --tblr-secondary-color: var(--bpi-text-secondary);
  --tblr-muted: var(--bpi-text-muted);
  --tblr-bg-surface: var(--bpi-surface);
  --tblr-bg-surface-secondary: var(--bpi-surface-secondary);
  --tblr-bg-surface-tertiary: var(--bpi-surface-secondary);
  --tblr-border-color: var(--bpi-border);
  --tblr-border-color-translucent: var(--bpi-border);
  --tblr-border-radius: var(--bpi-radius);
  --tblr-border-radius-sm: calc(var(--bpi-radius) / 2);
  --tblr-border-radius-lg: calc(var(--bpi-radius) + 2px);
  --tblr-border-radius-pill: var(--bpi-radius);
  --tblr-card-cap-bg: var(--bpi-surface-secondary);
  --tblr-box-shadow: var(--bpi-shadow-md, none);
  --tblr-box-shadow-card: var(--bpi-shadow-sm, none);
  --tblr-shadow-card: var(--bpi-shadow-sm, none);
  --tblr-box-shadow-dropdown: var(--bpi-shadow-md, none);
  /* [BPI appearance] typography + component metrics (Settings → Appearance) */
  --tblr-body-font-size: var(--bpi-font-size-body, .875rem);
  --tblr-body-line-height: var(--bpi-line-height-body, 1.4285714286);
  --tblr-body-font-weight: var(--bpi-font-weight-body, 400);
  --tblr-border-width: var(--bpi-border-width, 1px);
  --tblr-btn-font-weight: var(--bpi-font-weight-button, 600);
  /* legacy --aznow-* (workspace + ops dashboards) and --amz-hub-* (hub panel) aliases */
  --aznow-canvas: var(--bpi-background);
  --aznow-surface: var(--bpi-surface);
  --aznow-border: var(--bpi-border);
  --aznow-text: var(--bpi-text-primary);
  --aznow-muted: var(--bpi-text-muted);
  --aznow-accent: var(--bpi-primary);
  --aznow-accent-soft: var(--bpi-primary-subtle);
  --amz-hub-band: var(--bpi-secondary); --amz-hub-band-2: var(--bpi-secondary); --amz-hub-accent: var(--bpi-primary);
  --amz-hub-border: var(--bpi-border); --amz-hub-muted: var(--bpi-text-muted);
  --aznow-good: var(--bpi-success);
  --aznow-warn: var(--bpi-warning);
  --aznow-bad: var(--bpi-error);
  /* DataTables */
  --dt-text: var(--bpi-text-primary);
  --dt-text-muted: var(--bpi-text-muted);
  --dt-row-hover: var(--bpi-primary-subtle);
  --dt-head-bg: var(--bpi-surface-secondary);
  --dt-border: var(--bpi-border);
  --dt-border-strong: var(--bpi-border-strong);
}

body { font-family: var(--bpi-font-sans); font-variant-numeric: tabular-nums; background: var(--bpi-background); color: var(--bpi-text-primary); font-size: var(--bpi-font-size-body, .875rem); line-height: var(--bpi-line-height-body, 1.4285714286); font-weight: var(--bpi-font-weight-body, 400); }
html { font-size: var(--bpi-font-size-base, 16px); }

/* [BPI appearance] Heading scale and weights. */
h1, .h1 { font-size: var(--bpi-font-size-h1, 1.5rem); }
h2, .h2 { font-size: var(--bpi-font-size-h2, 1.25rem); }
h3, .h3, .page-title { font-size: var(--bpi-font-size-h3, 1rem); }
h4, .h4, .card-title { font-size: var(--bpi-font-size-h4, .875rem); }
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .page-title, .card-title { font-weight: var(--bpi-font-weight-heading, 600); line-height: var(--bpi-line-height-heading, 1.25); }
small, .small, .form-hint { font-size: var(--bpi-font-size-small, .8125rem); }
.text-caption, .page-pretitle, .subheader { font-size: var(--bpi-font-size-caption, .75rem); }
/* Header light/dark switch hidden when the admin turned switching off. */
.bpi-no-mode-toggle [onclick="toggleTheme()"] { display: none !important; }
code, kbd, pre, .font-monospace { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; }

/* Buttons: square, weighted, no shadow; primary has a darker bottom edge. */
.btn { border-radius: var(--bpi-radius-button, var(--bpi-radius)); font-weight: var(--bpi-font-weight-button, 600); font-size: var(--bpi-font-size-button, .875rem); border-width: var(--bpi-button-border-width, 1px); box-shadow: none; }
.btn:not(.btn-sm):not(.btn-lg):not(.btn-icon):not(.btn-link):not(.btn-close) { min-height: calc(var(--bpi-button-height, 44px) - 8px); padding: var(--bpi-button-padding-y, .375rem) var(--bpi-button-padding-x, 1rem); }
.btn-icon:not(.btn-sm):not(.btn-lg) { min-height: calc(var(--bpi-button-height, 44px) - 8px); min-width: calc(var(--bpi-button-height, 44px) - 8px); }
.btn-pill, .rounded-pill { border-radius: var(--bpi-radius-button, var(--bpi-radius)) !important; }
.btn-primary { box-shadow: inset 0 -2px 0 var(--bpi-primary-active); }
.btn-primary:active { box-shadow: none; }
.btn-secondary { --tblr-btn-bg: var(--bpi-secondary); --tblr-btn-color: var(--bpi-on-secondary); --tblr-btn-hover-bg: var(--bpi-secondary-hover); --tblr-btn-hover-color: var(--bpi-on-secondary); --tblr-btn-active-bg: var(--bpi-secondary-hover); --tblr-btn-border-color: transparent; }
.btn-outline-primary { --tblr-btn-color: var(--bpi-primary); --tblr-btn-border-color: var(--bpi-primary); --tblr-btn-hover-bg: var(--bpi-primary); --tblr-btn-hover-color: var(--bpi-on-primary); }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus { outline: 2px solid var(--bpi-primary); outline-offset: 2px; box-shadow: none; }

/* Forms: controls meet 3:1 with border-strong. */
.form-control, .form-select, .input-group-text { border-color: var(--bpi-border-strong); border-radius: var(--bpi-radius-input, var(--bpi-radius)); border-width: var(--bpi-border-width, 1px); font-size: var(--bpi-font-size-input, .875rem); }
.form-control:not(.form-control-sm):not(.form-control-lg):not(.form-control-color), .form-select:not(.form-select-sm):not(.form-select-lg) { padding-top: var(--bpi-input-padding-y, .375rem); padding-bottom: var(--bpi-input-padding-y, .375rem); padding-left: var(--bpi-input-padding-x, .75rem); }
.form-control:not(.form-control-sm):not(.form-control-lg):not(.form-control-color) { padding-right: var(--bpi-input-padding-x, .75rem); }
.form-label { font-weight: 600; font-size: var(--bpi-font-size-small, 13px); }
.form-check-input:checked { background-color: var(--bpi-primary); border-color: var(--bpi-primary); }

/* Cards: flat, bordered, header strip. */
.card { box-shadow: var(--bpi-shadow-sm, none); border: var(--bpi-border-width, 1px) solid var(--bpi-border); border-radius: var(--bpi-radius-card, var(--bpi-radius)); }
.card > .card-header:first-child { border-radius: calc(var(--bpi-radius-card, var(--bpi-radius)) - 1px) calc(var(--bpi-radius-card, var(--bpi-radius)) - 1px) 0 0; }
.card-body { padding: var(--bpi-card-padding, 1rem); }
.card-header, .card-footer { padding-left: var(--bpi-card-padding, 1rem); padding-right: var(--bpi-card-padding, 1rem); }
.modal-content { border-radius: var(--bpi-radius-modal, var(--bpi-radius)); box-shadow: var(--bpi-shadow-lg, none); border-width: var(--bpi-border-width, 1px); }
.dropdown-menu, .popover { box-shadow: var(--bpi-shadow-md, none); }
.card-header { background: var(--bpi-surface-secondary); }
.card-stamp-icon { border-radius: var(--bpi-radius); }

/* Tables: uppercase heads on surface-secondary, primary tint on hover. */
.table thead th, table.dataTable thead th { background: var(--bpi-surface-secondary); color: var(--bpi-text-muted); font-size: var(--bpi-font-size-caption, 12px); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--bpi-border-strong); }
.table-hover > tbody > tr:hover > * { --tblr-table-bg-state: var(--bpi-primary-subtle); }

/* Badges: square, uppercase. */
.badge { border-radius: var(--bpi-radius-badge, calc(var(--bpi-radius) / 2)); letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }

/* Sidebar — DealerSideNav treatment on Tabler's vertical navbar.
   The <aside> carries data-bs-theme="dark", which makes Tabler load its own
   dark palette (navy #111827 grounds, blue links) inside the rail. Re-point
   those variables at the sidebar tokens so the rail is graphite in light mode
   and a raised surface in dark mode (see ThemeTokens::css). */
.navbar-vertical, .navbar-vertical[data-bs-theme=dark] {
  --tblr-navbar-bg: var(--bpi-sidebar);
  --tblr-body-bg: var(--bpi-sidebar);
  --tblr-bg-surface: var(--bpi-sidebar);
  --tblr-body-color: var(--bpi-on-sidebar);
  --tblr-navbar-color: rgba(var(--bpi-on-sidebar-rgb), .86);
  --tblr-navbar-hover-color: var(--bpi-on-sidebar);
  --tblr-navbar-active-color: var(--bpi-on-sidebar);
  --tblr-navbar-brand-color: var(--bpi-on-sidebar);
  --tblr-navbar-active-border-color: var(--bpi-accent);
  --tblr-link-color: var(--bpi-on-sidebar);
  --tblr-link-color-rgb: var(--bpi-on-sidebar-rgb);
  --tblr-border-color: rgba(var(--bpi-on-sidebar-rgb), .12);
  --tblr-secondary: rgba(var(--bpi-on-sidebar-rgb), .7);
  --tblr-dropdown-link-color: rgba(var(--bpi-on-sidebar-rgb), .86);
  --tblr-dropdown-link-hover-color: var(--bpi-on-sidebar);
  --tblr-dropdown-link-hover-bg: rgba(var(--bpi-on-sidebar-rgb), .08);
  --tblr-dropdown-link-active-color: var(--bpi-on-sidebar);
  --tblr-dropdown-link-active-bg: rgba(var(--bpi-on-sidebar-rgb), .10);
  background: var(--bpi-sidebar) !important;
  color: var(--bpi-on-sidebar);
  border-right: 1px solid var(--bpi-border);
  font-family: var(--bpi-font-sans);
}
.navbar-vertical .nav-link, .navbar-vertical .navbar-brand, .navbar-vertical .dropdown-item { color: rgba(var(--bpi-on-sidebar-rgb), .86); }
.navbar-vertical .navbar-nav .nav-link { font-size: var(--bpi-font-size-nav, 14px); font-weight: var(--bpi-font-weight-nav, 500); border-left: 3px solid transparent; border-radius: 0; }
.navbar-vertical .nav-link:hover, .navbar-vertical .dropdown-item:hover { color: var(--bpi-on-sidebar); background: rgba(var(--bpi-on-sidebar-rgb), .08); }
/* Only the CURRENT PAGE carries the amber edge; an open parent is just bold. */
.navbar-vertical .nav-item.active::after, .navbar-vertical .nav-item.active:after { display: none !important; }
.navbar-vertical .nav-item.active > .nav-link.dropdown-toggle { color: var(--bpi-on-sidebar) !important; font-weight: 600; background: transparent; border-left-color: transparent; }
.navbar-vertical .nav-item.active > .nav-link:not(.dropdown-toggle),
.navbar-vertical .dropdown-item.active {
  color: var(--bpi-on-sidebar) !important;
  border-left-color: var(--bpi-accent);
  background: rgba(var(--bpi-on-sidebar-rgb), .10);
  font-weight: 600;
  box-shadow: none;
}
.navbar-vertical .dropdown-item.active { box-shadow: inset 3px 0 0 var(--bpi-accent); border-left-color: transparent; }
.navbar-vertical .nav-link-title, .navbar-vertical .nav-link-icon { color: inherit; }
.navbar-vertical .nav-link-icon .ti { font-size: 20px !important; }
.navbar-vertical .dropdown-menu .dropdown-item { font-size: calc(var(--bpi-font-size-nav, 14px) - 1px); padding-top: 6px; padding-bottom: 6px; border-radius: 0; }
.navbar-vertical .dropdown-menu .dropdown-item .ti { font-size: 14px !important; opacity: .6; margin-right: 6px; }
.navbar-vertical .dropdown-toggle::after { border-color: currentColor; opacity: .7; }
.navbar-vertical .nav-link:focus-visible, .navbar-vertical .dropdown-item:focus-visible { outline: 2px solid var(--bpi-accent); outline-offset: -2px; }
/* Group labels (config/menu.php 'type' => 'section') */
.navbar-vertical .bpi-nav-grp {
  display: block;
  padding: 16px 0 4px;
  font: 500 11px/14px var(--bpi-font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(var(--bpi-on-sidebar-rgb), .7);
}
.navbar-vertical .navbar-brand .bpi-logo-required { color: var(--bpi-on-sidebar); }
.navbar-vertical .bpi-version { color: rgba(var(--bpi-on-sidebar-rgb), .6); font-size: 12px; }
#sidebar-collapse-toggle { color: var(--bpi-on-sidebar); background: transparent; border-color: rgba(var(--bpi-on-sidebar-rgb), .24); }

/* Top header on panels */
.page-header .page-pretitle { color: var(--bpi-text-muted); letter-spacing: .06em; }
.navbar:not(.navbar-vertical) { background: var(--bpi-surface); border-bottom: 1px solid var(--bpi-border); }

/* Alerts */
.alert { border-radius: var(--bpi-radius); box-shadow: none; }

/* Logo placeholder until the final BulkPurchaseIndia logo is supplied. */
.bpi-logo-required { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border: 1px dashed currentColor; border-radius: 2px; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

/* Badges: -lt variants read as state tints; pills are square. */
.badge.bg-success-lt, .badge.bg-green-lt { background: var(--bpi-success-subtle) !important; color: var(--bpi-success) !important; }
.badge.bg-danger-lt, .badge.bg-red-lt { background: var(--bpi-error-subtle) !important; color: var(--bpi-error) !important; }
.badge.bg-warning-lt, .badge.bg-yellow-lt, .badge.bg-orange-lt { background: var(--bpi-warning-subtle) !important; color: var(--bpi-warning) !important; }
.badge.bg-info-lt, .badge.bg-azure-lt, .badge.bg-cyan-lt { background: var(--bpi-info-subtle) !important; color: var(--bpi-info) !important; }
.badge.bg-primary-lt, .badge.bg-blue-lt, .badge.bg-indigo-lt, .badge.bg-purple-lt, .badge.bg-teal-lt { background: var(--bpi-primary-subtle) !important; color: var(--bpi-primary) !important; }
.badge-pill, .rounded-pill, .badge.rounded-pill { border-radius: calc(var(--bpi-radius) / 2) !important; }

/* Links, tabs, pagination, progress, switches */
.nav-tabs .nav-link.active { border-bottom-color: var(--bpi-primary); color: var(--bpi-text-primary); }
.nav-pills .nav-link { border-radius: var(--bpi-radius); }
.page-item.active .page-link { background: var(--bpi-primary); border-color: var(--bpi-primary); color: var(--bpi-on-primary); }
.progress { border-radius: calc(var(--bpi-radius) / 2); background: var(--bpi-surface-sunken); }
.progress-bar { background-color: var(--bpi-primary); }
.form-switch .form-check-input:checked { background-color: var(--bpi-primary); border-color: var(--bpi-primary); }
.dropdown-menu { border-radius: var(--bpi-radius); border-color: var(--bpi-border); }
.modal-content { border-radius: calc(var(--bpi-radius) + 2px); }
.avatar { border-radius: var(--bpi-radius); }
.avatar.rounded-circle, .avatar-rounded { border-radius: 50%; }

/* KPI cards (component-KpiCard) — usable in any panel dashboard. */
.bpi-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.bpi-kpi { background: var(--bpi-surface); border: 1px solid var(--bpi-border); border-top: 4px solid var(--bpi-secondary); border-radius: 0 0 var(--bpi-radius) var(--bpi-radius); padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.bpi-kpi--attention { border-top-color: var(--bpi-warning); }
.bpi-kpi--good { border-top-color: var(--bpi-success); }
.bpi-kpi--brand { border-top-color: var(--bpi-primary); }
.bpi-kpi__label { font: 500 12px/16px var(--bpi-font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--bpi-text-muted); }
.bpi-kpi__value { font: 700 28px/32px var(--bpi-font-sans); font-variant-numeric: tabular-nums; color: var(--bpi-text-primary); }
.bpi-kpi__delta { font-size: 13px; line-height: 18px; color: var(--bpi-text-secondary); }
.bpi-kpi__delta.up { color: var(--bpi-success); }
.bpi-kpi__delta.down { color: var(--bpi-error); }

/* Data tables (component-DataTable) */
.table { --tblr-table-color: var(--bpi-text-primary); --tblr-table-bg: var(--bpi-surface); --tblr-table-border-color: var(--bpi-border); font-size: 14px; }
.table td.num, .table th.num, .table .text-end { font-variant-numeric: tabular-nums; }
.bpi-table-wrap { overflow-x: auto; border: 1px solid var(--bpi-border); border-radius: var(--bpi-radius); background: var(--bpi-surface); }
.bpi-mono, .order-id, .sku, .hsn, .gstin { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; }
table.dataTable tbody tr:hover > * { box-shadow: inset 0 0 0 9999px var(--bpi-primary-subtle) !important; }
div.dt-container .dt-paging .dt-paging-button.current { background: var(--bpi-primary) !important; color: var(--bpi-on-primary) !important; border-color: var(--bpi-primary) !important; border-radius: var(--bpi-radius); }

/* Dark mode: Tabler's html[data-bs-theme=dark] switch flips every --bpi-*
   token (ThemeTokens::css). Components that paint a fixed light ground get
   the token ground back here. */
html[data-bs-theme="dark"] .card, html[data-bs-theme="dark"] .dropdown-menu, html[data-bs-theme="dark"] .modal-content,
body[data-bs-theme="dark"] .card, body[data-bs-theme="dark"] .dropdown-menu, body[data-bs-theme="dark"] .modal-content { background-color: var(--bpi-surface); color: var(--bpi-text-primary); }
html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select,
body[data-bs-theme="dark"] .form-control, body[data-bs-theme="dark"] .form-select { background-color: var(--bpi-surface); color: var(--bpi-text-primary); }
html[data-bs-theme="dark"] .btn-primary { box-shadow: none; }

/* Print: dark text on white whatever the screen theme. */
@media print {
  :root, html[data-bs-theme="dark"], body[data-bs-theme="dark"] { --bpi-background: #FFFFFF; --bpi-surface: #FFFFFF; --bpi-text-primary: #000000; }
  .navbar-vertical, .navbar:not(.navbar-vertical) { display: none !important; }
}

/* Dark mode: state and brand fills turn light, so "text-white" on them would
   drop below 3:1. Use the paired on-* token instead. */
html[data-bs-theme="dark"] .bg-primary.text-white, html[data-bs-theme="dark"] .bg-primary .text-white,
html[data-bs-theme="dark"] .bg-blue.text-white, html[data-bs-theme="dark"] .bg-teal.text-white { color: var(--bpi-on-primary) !important; }
html[data-bs-theme="dark"] .bg-success.text-white, html[data-bs-theme="dark"] .bg-green.text-white,
html[data-bs-theme="dark"] .bg-warning.text-white, html[data-bs-theme="dark"] .bg-orange.text-white,
html[data-bs-theme="dark"] .bg-info.text-white, html[data-bs-theme="dark"] .bg-azure.text-white { color: var(--bpi-on-success) !important; }
html[data-bs-theme="dark"] .bg-danger.text-white, html[data-bs-theme="dark"] .bg-red.text-white { color: var(--bpi-on-error) !important; }