/* vista-design/theme.css : the Bootstrap 5 <-> Ink & Teal bridge.
   Maps Bootstrap's own CSS variables to tokens.css values and restyles the stock
   framework surfaces the app uses (buttons, cards, kartik grid panels, forms,
   Select2, tabs, navbar, badges, pagination, modals) so every view renders in the
   design system with zero per-view edits.

   Loaded LAST on the bsVersion=5 path (appended to AppAsset::$css after the legacy
   site.css/custom.css) so it wins the cascade. Never loaded on Bootstrap 3.

   Every mapping points at a token var, never a literal, so the dark theme in
   tokens.css keeps working the day it ships. The only literals are the -rgb
   triplets Bootstrap needs for its rgba() utilities; those get their own dark
   block at the bottom. */

/* ---------------------------------------------------------------- root bridge */
:root {
  /* rgb twins of the tokens (bootstrap utilities do rgba(var(--bs-*-rgb), a)) */
  --primary-rgb: 14, 124, 116;
  --success-rgb: 31, 157, 87;
  --warning-rgb: 201, 138, 21;
  --danger-rgb: 226, 55, 68;
  --info-rgb: 47, 118, 214;
  --text-rgb: 23, 37, 42;
  --surface-rgb: 255, 255, 255;

  /* palette */
  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-secondary: var(--text-muted);
  --bs-secondary-rgb: 87, 103, 107;
  --bs-success: var(--success);
  --bs-success-rgb: var(--success-rgb);
  --bs-danger: var(--danger);
  --bs-danger-rgb: var(--danger-rgb);
  --bs-warning: var(--warning);
  --bs-warning-rgb: var(--warning-rgb);
  --bs-info: var(--info);
  --bs-info-rgb: var(--info-rgb);
  --bs-light: var(--surface-2);
  --bs-light-rgb: 233, 240, 240;
  --bs-dark: var(--text);
  --bs-dark-rgb: var(--text-rgb);

  /* body + emphasis */
  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: 245, 248, 248;
  --bs-body-color: var(--text);
  --bs-body-color-rgb: var(--text-rgb);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--fs-base);
  --bs-body-line-height: var(--lh-body);
  --bs-emphasis-color: var(--text);
  --bs-emphasis-color-rgb: var(--text-rgb);
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-color-rgb: 87, 103, 107;
  --bs-secondary-bg: var(--surface-2);
  --bs-secondary-bg-rgb: 233, 240, 240;
  --bs-tertiary-color: var(--text-muted);
  --bs-tertiary-bg: var(--surface-3);
  --bs-tertiary-bg-rgb: 224, 233, 233;
  --bs-heading-color: var(--text);

  /* subtle/emphasis triads (5.3 alerts, list-group variants, etc.) */
  --bs-primary-text-emphasis: var(--teal-800);
  --bs-primary-bg-subtle: var(--primary-tint);
  --bs-primary-border-subtle: var(--teal-200);
  --bs-success-text-emphasis: #14683B;
  --bs-success-bg-subtle: var(--success-surface);
  --bs-success-border-subtle: #BCE5CB;
  --bs-warning-text-emphasis: #8A5E0D;
  --bs-warning-bg-subtle: var(--warning-surface);
  --bs-warning-border-subtle: #F0DCA8;
  --bs-danger-text-emphasis: #A31C28;
  --bs-danger-bg-subtle: var(--danger-surface);
  --bs-danger-border-subtle: #F5C2C7;
  --bs-info-text-emphasis: #1D4E93;
  --bs-info-bg-subtle: var(--info-surface);
  --bs-info-border-subtle: #BCD5F2;
  --bs-light-text-emphasis: var(--text);
  --bs-light-bg-subtle: var(--surface-2);
  --bs-light-border-subtle: var(--border);
  --bs-dark-text-emphasis: var(--text);
  --bs-dark-bg-subtle: var(--surface-3);
  --bs-dark-border-subtle: var(--border);

  /* links */
  --bs-link-color: var(--primary);
  --bs-link-color-rgb: var(--primary-rgb);
  --bs-link-hover-color: var(--primary-strong);
  --bs-link-hover-color-rgb: 12, 98, 92;
  --bs-link-decoration: none;

  /* shape + borders */
  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);

  /* focus + shadows */
  --bs-focus-ring-color: rgba(var(--primary-rgb), .25);
  --bs-focus-ring-width: .2rem;
  --bs-box-shadow: var(--elev-2);
  --bs-box-shadow-sm: var(--elev-1);
  --bs-box-shadow-lg: var(--elev-3);

  /* ---- legacy var compatibility ----
     main.php's old inline :root defined these in the blue palette; view CSS that
     still consumes them now resolves to Ink & Teal. */
  --primary-light: var(--primary-tint);
  --primary-dark: var(--primary-strong);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --border-dark: var(--surface-3);
  --shadow-sm: var(--elev-1);
  --shadow: var(--elev-2);
  --shadow-lg: var(--elev-3);
  --transition: var(--motion-base) var(--ease);
}

/* The design tokens are rem-based and assume a 16px root. A stray Bootstrap 3
   bootstrap.css (pulled in by legacy yii\bootstrap widgets like Modal on the
   VOS Incentive pages) sets html{font-size:10px}, silently scaling the whole
   page to 62.5%. theme.css loads last, so asserting the root here wins. */
html { font-size: 16px; }

/* Same BS3 bootstrap.css contamination: its `.fade{opacity:0}` only restores
   opacity via `.fade.in`, but the BS5 jQuery bridge shows modals with `.show`
   (not `.in`). So a legacy yii\bootstrap\Modal opens display:block but stuck at
   opacity:0 — invisible dialog + invisible backdrop, page scroll-locked (looks
   frozen, "nothing happens"). Restore opacity for shown fade elements; a no-op
   on clean BS5 pages, and theme.css loads last so it wins. */
.fade.show { opacity: 1; }
.modal-backdrop.show { opacity: .5; }

/* Legacy yii\bootstrap\Modal renders its close button as BS3's `.close` × (BS5
   uses `.btn-close`). With the BS3 sheet neutralized (assetManager bundles override)
   it would render as an unstyled bordered button top-left. Give it a clean top-right
   close affordance. Scoped to .modal-header, and `.close` is unused by BS5, so this
   touches only legacy modals. The bridge wires its data-dismiss so it also closes. */
.modal-header .close {
  order: 1;
  margin-left: auto;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text);
  opacity: .6;
  cursor: pointer;
  padding: .25rem .5rem;
}
.modal-header .close:hover { opacity: 1; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ type */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  color: var(--text);
}
h1, .h1 { font-weight: 650; letter-spacing: -0.01em; }
h2, .h2, h3, .h3 { font-weight: 600; }

/* ------------------------------------------------------------------ buttons */
/* Teal is THE action colour. btn-primary and btn-success are both used as the
   generic action button across the app (success 1,440x vs primary 812x), so both
   map to the teal action style; success stays green only as a *status* colour
   (badges, pills, alerts). */
.btn { font-family: var(--font-body); font-weight: 500; }
.btn:active { transform: translateY(1px); }

.btn-primary, .btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-strong);
  --bs-btn-hover-border-color: var(--primary-strong);
  --bs-btn-focus-shadow-rgb: var(--primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--teal-800);
  --bs-btn-active-border-color: var(--teal-800);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--teal-300);
  --bs-btn-disabled-border-color: var(--teal-300);
}
.btn-secondary, .btn-default {
  --bs-btn-color: var(--text);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-focus-shadow-rgb: var(--primary-rgb);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: var(--surface-3);
  --bs-btn-active-border-color: var(--border);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-bg: var(--surface-2);
  --bs-btn-disabled-border-color: var(--border);
}
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #C72833;
  --bs-btn-hover-border-color: #C72833;
  --bs-btn-focus-shadow-rgb: var(--danger-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #A31C28;
  --bs-btn-active-border-color: #A31C28;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #F0A9AF;
  --bs-btn-disabled-border-color: #F0A9AF;
}
.btn-outline-primary, .btn-outline-success {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--teal-300);
  --bs-btn-hover-color: var(--teal-800);
  --bs-btn-hover-bg: var(--primary-tint);
  --bs-btn-hover-border-color: var(--teal-400);
  --bs-btn-focus-shadow-rgb: var(--primary-rgb);
  --bs-btn-active-color: var(--teal-800);
  --bs-btn-active-bg: var(--teal-100);
  --bs-btn-active-border-color: var(--teal-400);
  --bs-btn-disabled-color: var(--teal-300);
  --bs-btn-disabled-border-color: var(--teal-200);
  background: var(--surface);
}
.btn-outline-secondary, .btn-outline-danger {
  --bs-btn-focus-shadow-rgb: var(--primary-rgb);
}
.btn-outline-secondary {
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: var(--surface-3);
  --bs-btn-active-border-color: var(--border);
  background: var(--surface);
}

/* warning/info: quiet tinted buttons — one saturated element per view */
.btn-warning {
  --bs-btn-color: var(--bs-warning-text-emphasis);
  --bs-btn-bg: var(--warning-surface);
  --bs-btn-border-color: var(--bs-warning-border-subtle);
  --bs-btn-hover-color: var(--bs-warning-text-emphasis);
  --bs-btn-hover-bg: #F5E3B8;
  --bs-btn-hover-border-color: var(--warning);
  --bs-btn-focus-shadow-rgb: var(--warning-rgb);
  --bs-btn-active-color: var(--bs-warning-text-emphasis);
  --bs-btn-active-bg: #F0DCA8;
  --bs-btn-active-border-color: var(--warning);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-bg: var(--surface-2);
  --bs-btn-disabled-border-color: var(--border);
}
.btn-info {
  --bs-btn-color: var(--bs-info-text-emphasis);
  --bs-btn-bg: var(--info-surface);
  --bs-btn-border-color: var(--bs-info-border-subtle);
  --bs-btn-hover-color: var(--bs-info-text-emphasis);
  --bs-btn-hover-bg: #D4E4F8;
  --bs-btn-hover-border-color: var(--info);
  --bs-btn-focus-shadow-rgb: var(--info-rgb);
  --bs-btn-active-color: var(--bs-info-text-emphasis);
  --bs-btn-active-bg: #BCD5F2;
  --bs-btn-active-border-color: var(--info);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-bg: var(--surface-2);
  --bs-btn-disabled-border-color: var(--border);
}
.btn-outline-primary, .btn-outline-success {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--primary-strong);
  --bs-btn-hover-bg: var(--primary-tint);
  --bs-btn-hover-border-color: var(--teal-200);
  --bs-btn-focus-shadow-rgb: var(--primary-rgb);
  --bs-btn-active-color: var(--primary-strong);
  --bs-btn-active-bg: var(--primary-tint);
  --bs-btn-active-border-color: var(--teal-300);
}
.btn-outline-secondary {
  --bs-btn-color: var(--text-muted);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-focus-shadow-rgb: var(--primary-rgb);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: var(--surface-3);
  --bs-btn-active-border-color: var(--border);
}
.btn-outline-danger {
  --bs-btn-color: var(--danger);
  --bs-btn-border-color: var(--bs-danger-border-subtle);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-focus-shadow-rgb: var(--danger-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #C72833;
  --bs-btn-active-border-color: #C72833;
}

/* ------------------------------------------------------------------ forms */
.form-control, .form-select {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
  font-size: var(--fs-base);
}
.form-control::placeholder { color: var(--text-muted); opacity: .8; }
.form-control:focus, .form-select:focus {
  border-color: var(--teal-400);
  box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .18);
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-check-input:focus {
  border-color: var(--teal-400);
  box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .18);
}
.form-label, label { color: var(--text); }
.form-text { color: var(--text-muted); }
.input-group-text {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-muted);
}

/* ------------------------------------------------------------------ admin forms */
.master-agent-form {
  --admin-form-gap: 22px;
  --admin-field-gap: 14px;
}
.master-agent-form .admin-form-title,
.master-agent-form > form > h1 {
  margin: 42px 0 42px !important;
  text-align: center;
  font-size: var(--fs-2xl) !important;
  font-weight: 700 !important;
  line-height: var(--lh-tight);
  letter-spacing: 0;
}
.master-agent-form .card {
  margin-bottom: var(--admin-form-gap);
  overflow: hidden;
}
.master-agent-form .card-header {
  min-height: 42px;
  padding: 11px 16px;
  background: var(--surface);
}
.master-agent-form .card-body {
  padding: 18px 16px;
}
.master-agent-form .card-body.container-subs > .row,
.master-agent-form .admin-form-section > .row {
  margin-bottom: var(--admin-field-gap);
}
.master-agent-form .card-body.container-subs > .row:last-child,
.master-agent-form .admin-form-section > .row:last-child {
  margin-bottom: 0;
}
.master-agent-form h5,
.master-agent-form .panel-title-address {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 650;
  line-height: 1.3;
  margin: 0;
  color: var(--text);
}
.master-agent-form .panel-title-address {
  font-size: var(--fs-sm);
}
.master-agent-form label {
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--text);
}
.master-agent-form .form-control,
.master-agent-form .form-select,
.master-agent-form .select2-container--krajee-bs5 .select2-selection,
.master-agent-form .select2-container--default .select2-selection--single {
  min-height: 38px;
}
.master-agent-form .card-body.container-subs .form-group,
.master-agent-form .card-body.container-subs .mb-3,
.master-agent-form .admin-form-section .form-group,
.master-agent-form .admin-form-section .mb-3 {
  margin-bottom: 0;
}
.master-agent-form .form-check-input {
  width: 17px;
  height: 17px;
  margin-top: .15rem;
}
.master-agent-form .form-check-label {
  font-size: var(--fs-sm);
  color: var(--text);
}
.master-agent-form .checkbox-label {
  min-height: 32px;
  margin: 0 0 8px;
}
.master-agent-form .admin-form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
  padding: 16px;
  margin-bottom: var(--admin-form-gap);
}
.master-agent-form .admin-form-divider {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--border);
  opacity: 1;
}
.master-agent-form .input-group-addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.master-agent-form .input-group-addon:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}
.master-agent-form .input-group-addon:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.master-agent-form .input-group-addon + .input-group-addon,
.master-agent-form .input-group-addon + .form-control,
.master-agent-form .form-control + .input-group-addon {
  margin-left: -1px;
}
.master-agent-form .file-caption-main {
  display: flex;
  align-items: stretch;
  gap: 10px;
  max-width: 820px;
}
.master-agent-form .file-caption-main .file-caption {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border-radius: var(--radius) !important;
}
.master-agent-form .file-caption-main .input-group-btn,
.master-agent-form .file-caption-main .input-group-append {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 8px;
}
.master-agent-form .file-caption-main .btn-file {
  min-width: 108px;
  border-radius: var(--radius) !important;
}
.master-agent-form .file-caption-main .btn-file svg,
.master-agent-form .file-caption-main .btn-file i {
  width: 16px;
  height: 16px;
}
@media (max-width: 767.98px) {
  .master-agent-form .card-body {
    padding: 16px 14px;
  }
  .master-agent-form .file-caption-main {
    display: grid;
    max-width: none;
  }
  .master-agent-form .file-caption-main .input-group-btn,
  .master-agent-form .file-caption-main .input-group-append {
    width: 100%;
  }
  .master-agent-form .file-caption-main .btn-file {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ cards */
.card {
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--radius);
  --bs-card-inner-border-radius: calc(var(--radius) - 1px);
  --bs-card-cap-bg: var(--surface);
  --bs-card-bg: var(--surface);
  box-shadow: var(--elev-1);
}
.card-header {
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 600;
}

/* kartik grid panels: the loud blue panel header becomes a quiet token header.
   kartik emits either `card border-primary kv-grid-panel` on one element or
   `.kv-grid-panel > .card > .card-header` nested — cover both, all tones. */
.kv-grid-panel { border-color: var(--border) !important; }
.kv-grid-panel .card { border-color: var(--border) !important; }
.kv-grid-panel .card-header.bg-primary,
.kv-grid-panel .card-header.bg-secondary,
.kv-grid-panel .card-header.bg-success,
.kv-grid-panel .card-header.bg-warning,
.kv-grid-panel .card-header.bg-danger,
.kv-grid-panel .card-header.bg-info {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border);
}
.kv-grid-panel .card-header .kv-panel-title { font-family: var(--font-display); font-weight: 600; }
.kv-grid-panel .card-footer { background: var(--surface); border-top: 1px solid var(--border); }

/* kartik page-summary rows arrive as table-warning (yellow): quiet totals instead */
.kv-page-summary.table-warning,
.kv-page-summary.table-warning > td,
.kv-page-summary.table-warning > th {
  --bs-table-bg: var(--surface-2);
  --bs-table-accent-bg: transparent;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
}

/* ------------------------------------------------------------------ tables */
.table {
  --bs-table-bg: var(--surface);
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--surface-2);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--surface-3);
  --bs-table-hover-color: var(--text);
  --bs-table-active-bg: var(--primary-tint);
  --bs-table-active-color: var(--text);
  font-size: var(--fs-base);
}
.table thead th {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 2px solid var(--border);
  padding: var(--row-pad-y) var(--row-pad-x);
  vertical-align: middle;
}
/* sort links: teal-600 on the surface-2 header lands 4.38:1 at 12px; -700 clears AA */
.table thead th a { color: var(--teal-700); }
/* quiet the kartik expand-row controls (they render saturated otherwise) */
.kv-expand-icon svg, .kv-expand-header-icon svg { width: 16px; height: 16px; color: var(--text-muted); }
.kv-expand-icon:hover svg { color: var(--primary); }
.table tbody td { padding: var(--row-pad-y) var(--row-pad-x); vertical-align: middle; }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--border); }
/* kartik grid table: the borderless ledger — horizontal hairlines only, no cell
   boxes. Zebra + row hover carry the structure. */
.kv-grid-table thead th { background: var(--surface-2); }
.kv-grid-table.table-bordered > :not(caption) > * > * {
  border-left: 0;
  border-right: 0;
  border-color: var(--border);
}
.kv-grid-table.table-bordered { border-left: 0; border-right: 0; border-top: 0; }
.kv-grid-container { border: 0; }

/* ------------------------------------------------------------------ badges */
/* Low-chroma status: tinted background + emphasised text, never solid saturated. */
.badge { font-family: var(--font-mono); font-weight: 500; letter-spacing: .02em; }
.badge.text-bg-primary, .badge.bg-primary {
  background-color: var(--primary-tint) !important;
  color: var(--teal-800) !important;
}
.badge.text-bg-success, .badge.bg-success {
  background-color: var(--success-surface) !important;
  color: var(--bs-success-text-emphasis) !important;
}
.badge.text-bg-warning, .badge.bg-warning {
  background-color: var(--warning-surface) !important;
  color: var(--bs-warning-text-emphasis) !important;
}
.badge.text-bg-danger, .badge.bg-danger {
  background-color: var(--danger-surface) !important;
  color: var(--bs-danger-text-emphasis) !important;
}
.badge.text-bg-info, .badge.bg-info {
  background-color: var(--info-surface) !important;
  color: var(--bs-info-text-emphasis) !important;
}
.badge.text-bg-secondary, .badge.bg-secondary {
  background-color: var(--surface-2) !important;
  color: var(--text-muted) !important;
}

/* ------------------------------------------------------------------ alerts */
.alert { border-radius: var(--radius); }
.alert-danger  { --bs-alert-color: var(--bs-danger-text-emphasis);  --bs-alert-bg: var(--danger-surface);  --bs-alert-border-color: var(--bs-danger-border-subtle); }
.alert-success { --bs-alert-color: var(--bs-success-text-emphasis); --bs-alert-bg: var(--success-surface); --bs-alert-border-color: var(--bs-success-border-subtle); }
.alert-warning { --bs-alert-color: var(--bs-warning-text-emphasis); --bs-alert-bg: var(--warning-surface); --bs-alert-border-color: var(--bs-warning-border-subtle); }
.alert-info    { --bs-alert-color: var(--bs-info-text-emphasis);    --bs-alert-bg: var(--info-surface);    --bs-alert-border-color: var(--bs-info-border-subtle); }

/* ------------------------------------------------------------------ nav-tabs */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--border);
  --bs-nav-tabs-link-active-color: var(--primary);
  --bs-nav-tabs-link-active-bg: var(--surface);
  --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface);
  --bs-nav-tabs-link-hover-border-color: var(--surface-2) var(--surface-2) var(--border);
}
.nav-tabs .nav-link { color: var(--text-muted); font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--text); }
.nav-tabs .nav-link.active {
  font-weight: 600;
  box-shadow: inset 0 2px 0 var(--primary);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--primary);
  --bs-nav-pills-link-active-color: #fff;
}
.nav { --bs-nav-link-color: var(--text-muted); --bs-nav-link-hover-color: var(--text); }

/* ------------------------------------------------------------------ navbar */
/* The app shell bar: calm surface, hairline rule, teal active underline. */
.navbar-crm {
  --bs-navbar-color: var(--text-muted);
  --bs-navbar-hover-color: var(--text);
  --bs-navbar-active-color: var(--primary);
  --bs-navbar-brand-color: var(--text);
  --bs-navbar-brand-hover-color: var(--text);
  --bs-navbar-toggler-border-color: var(--border);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--elev-1);
  min-height: 56px;
}
.navbar-crm .nav-link {
  font-weight: 500;
  font-size: var(--fs-sm);
  padding-top: .9rem;
  padding-bottom: .85rem;
  white-space: nowrap;
  transition: color var(--motion-fast) var(--ease);
}
.navbar-crm .nav-item > .nav-link.active,
.navbar-crm .nav-item.active > .nav-link {
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--primary);
}
.navbar-crm .dropdown-toggle::after { opacity: .5; }
.navbar-crm .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .18); }
/* BS 5.3 compiles a literal blue into .nav-link:focus-visible — replace app-wide */
.nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .22);
  border-radius: var(--radius-sm);
}
/* top-level menu glyphs injected by app-shell (decorative, hidden from AT) */
.navbar-crm .navbar-nav > .nav-item > .nav-link > svg.lucide {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -2px;
  opacity: .7;
}
/* identity + logout live in the avatar user menu on bs5; the 33 per-role
   "Logout (name)" tree items (POST forms) stay in the markup but are hidden */
.navbar-crm .navbar-nav form[action*="/site/logout"],
.navbar-crm .navbar-nav a[href*="/site/logout"] { display: none !important; }
/* BS3 role menus still emit navbar-right, but in BS5 those are the main menu,
   not the identity cluster. Keep them next to the brand so wide role menus do
   not get shoved into a cramped right-side strip. */
.navbar-crm .navbar-nav.navbar-right { margin-left: 0; }
.navbar-crm .navbar-nav.navbar-right ~ .navbar-nav.navbar-right { margin-left: 0; }
/* Fit the full menu on one line down to ~13" laptops (nav is expanded ≥992px).
   Items never break mid-word or drop to a second row; below 1550px we tighten
   padding and step the font down instead. A "More" overflow menu is the next
   step if ≤1350px still crowds. */
.navbar-crm .navbar-collapse,
.navbar-crm .navbar-nav { flex-wrap: nowrap; }
.navbar-crm .navbar-nav > .nav-item { flex-shrink: 0; }
@media (min-width: 992px) and (max-width: 1550px) {
  .navbar-crm .nav-link {
    font-size: var(--fs-xs);
    padding-left: .4rem;
    padding-right: .4rem;
  }
  .navbar-crm .navbar-nav > .nav-item > .nav-link > svg.lucide { margin-right: 4px; }
}

/* ------------------------------------------------------------------ dropdowns */
.dropdown-menu {
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: var(--radius-lg);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-color: var(--text);
  --bs-dropdown-link-hover-bg: var(--surface-2);
  --bs-dropdown-link-active-color: var(--teal-800);
  --bs-dropdown-link-active-bg: var(--primary-tint);
  --bs-dropdown-bg: var(--surface);
  box-shadow: var(--elev-2);
  font-size: var(--fs-sm);
  padding: 6px;
  min-width: 220px;
}
.dropdown-menu .dropdown-item {
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  line-height: 1.35;
  transition: background-color var(--motion-fast) var(--ease);
}
.dropdown-menu .dropdown-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.dropdown-menu .dropdown-divider { border-color: var(--border); margin: 6px 4px; }
.dropdown-menu .dropdown-header {
  font: 600 var(--fs-xs)/1.3 var(--font-body);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  padding: 8px 10px 4px;
}
@media (min-width: 992px) {
  .navbar-crm .navbar-nav.navbar-right .dropdown-menu[data-bs-popper] {
    left: auto;
    right: 0;
  }
}
/* open motion: one-shot rise, honors reduced-motion and the per-user Off gate */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .navbar-crm .dropdown-menu.show,
  html:not([data-motion="off"]) .dropdown-menu.show[data-bs-popper] {
    animation: dd-in 150ms var(--ease);
    transform-origin: top;
  }
}
@keyframes dd-in {
  from { opacity: 0; transform: translateY(-4px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ pagination */
.pagination {
  --bs-pagination-color: var(--text-muted);
  --bs-pagination-bg: var(--surface);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-color: var(--text);
  --bs-pagination-hover-bg: var(--surface-2);
  --bs-pagination-hover-border-color: var(--border);
  --bs-pagination-focus-color: var(--primary);
  --bs-pagination-focus-bg: var(--surface-2);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .18);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
  --bs-pagination-disabled-color: var(--text-muted);
  --bs-pagination-disabled-bg: var(--surface-2);
  --bs-pagination-disabled-border-color: var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------------ modals */
.modal {
  --bs-modal-border-color: var(--border);
  --bs-modal-border-radius: var(--radius-lg);
  --bs-modal-box-shadow: var(--elev-3);
  --bs-modal-header-border-color: var(--border);
  --bs-modal-footer-border-color: var(--border);
  --bs-modal-bg: var(--surface);
}
.modal-title { font-family: var(--font-display); font-weight: 600; }
.modal-backdrop { --bs-backdrop-bg: var(--scrim); --bs-backdrop-opacity: 1; }

/* ------------------------------------------------------------------ misc bootstrap */
.breadcrumb { --bs-breadcrumb-divider-color: var(--text-muted); font-size: var(--fs-sm); }
.breadcrumb-item.active { color: var(--text-muted); }
.list-group {
  --bs-list-group-border-color: var(--border);
  --bs-list-group-active-bg: var(--primary);
  --bs-list-group-active-border-color: var(--primary);
  --bs-list-group-action-hover-bg: var(--surface-2);
}
.progress { --bs-progress-bar-bg: var(--primary); }
.spinner-border, .spinner-grow { color: var(--primary); }
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }

/* ------------------------------------------------------------------ Select2 (krajee bs5) */
.modal .select2-hidden-accessible + .select2-container {
  width: 100% !important;
}

.select2-container--krajee-bs5 .select2-selection {
  border-color: var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  color: var(--text);
}
.select2-container--krajee-bs5.select2-container--focus .select2-selection,
.select2-container--krajee-bs5.select2-container--open .select2-selection {
  border-color: var(--teal-400);
  box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .18);
}
.select2-container--krajee-bs5 .select2-dropdown {
  border-color: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--elev-2);
}
.select2-container--krajee-bs5 .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary-tint);
  color: var(--teal-800);
}
.select2-container--krajee-bs5 .select2-results__option[aria-selected=true] {
  background-color: var(--surface-2);
  color: var(--text);
}
.select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice {
  background-color: var(--primary-tint);
  border: 1px solid var(--teal-200);
  color: var(--teal-800);
  border-radius: var(--radius-sm);
}
.select2-container--krajee-bs5 .select2-search--dropdown .select2-search__field {
  border-color: var(--border);
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------ kartik pickers */
.datepicker.dropdown-menu, .daterangepicker {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--elev-2);
  font-family: var(--font-body);
}
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active,
.daterangepicker td.active, .daterangepicker td.active:hover {
  background: var(--primary);
  border-color: var(--primary);
}
.datepicker table tr td.today {
  background: var(--warning-surface);
  border-color: var(--bs-warning-border-subtle);
}

/* ------------------------------------------------------------------ dark rgb twins */
:root[data-theme="dark"] {
  --primary-rgb: 47, 185, 172;
  --success-rgb: 52, 199, 122;
  --warning-rgb: 224, 169, 62;
  --danger-rgb: 242, 101, 113;
  --info-rgb: 91, 155, 234;
  --text-rgb: 230, 239, 238;
  --surface-rgb: 20, 34, 37;
  --bs-body-bg-rgb: 14, 23, 25;
  --bs-secondary-bg-rgb: 27, 45, 48;
  --bs-tertiary-bg-rgb: 32, 54, 58;
  --bs-light-rgb: 27, 45, 48;
}

/* legacy <select class="form-control"> has no affordance under BS5 (only .form-select
   gets the chevron) — give every single-select the same quiet chevron */
select.form-control:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2357676B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 32px;
}
/* native date/time inputs: temper the browser widget so it sits in the system */
input[type="date"].form-control, input[type="datetime-local"].form-control, input[type="time"].form-control {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: .9; }

/* ------------------------------------------------- legacy dashboard section toggles
   ~34 dashboard views render sections as
     <button style="width:100%;float:left" class="ripple btn btn-link" data-bs-toggle="collapse">
       <label style="font-size:20pt">Title</label>
     </button> ... <div class="clearfix"></div>
   index.php's inline `.ripple { height:100% }` + the float stretched each button to the height
   of its parent column (~2,000px) and every following .clearfix cleared that float into a giant
   void (81% of the SC dashboard was empty spacer). Neutralize the geometry and give the toggle an
   honest section-header affordance. !important is required to beat the inline styles. */
.ripple.btn.btn-link {
  float: none !important;
  height: auto !important;
  width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 18px !important;
  margin: 0 0 2px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  color: var(--text) !important;
  text-align: left;
  text-decoration: none !important;
  box-shadow: none;
  overflow: visible !important;
}
.ripple.btn.btn-link::before { display: none !important; } /* the old ripple overlay */
.ripple.btn.btn-link:hover { background: var(--surface-2) !important; }
.ripple.btn.btn-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ripple.btn.btn-link label {
  font-size: var(--fs-lg) !important;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin: 0;
  cursor: pointer;
  color: inherit;
}
.ripple.btn.btn-link::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--motion-base) var(--ease);
}
.ripple.btn.btn-link:not(.collapsed)::after { transform: rotate(225deg) translateY(-2px); }

/* NOTE: the .clearfix spacers themselves stay — with the toggle geometry fixed they
   clear only small legitimate floats (e.g. the followup-list tab chip). */