/* ========== Theme tokens ========== */
:root {
  --ez-bg: #f5f7fb;
  --ez-card: #ffffff;
  --ez-card-border: #e7ecf3;
  --ez-muted: #6b7280;
  --ez-heading: #0f172a;
  --ez-accent: #2563eb;
  --ez-accent-soft: rgba(37,99,235,.1);
  --ez-green: #059669;
  --ez-amber: #d97706;
  --ez-red:   #dc2626;
  --ez-purple:#7c3aed;
  --ez-sky:   #0ea5e9;
  --ez-rose:  #e11d48;
  --ez-nav-bg: #1e3a8a;
  --ez-nav-fg: #ffffff;
  --ez-nav-fg-muted: rgba(255,255,255,.72);
  --ez-nav-hover: rgba(255,255,255,.12);
}
[data-bs-theme="dark"] {
  --ez-bg: #0b1220;
  --ez-card: #111a2c;
  --ez-card-border: #1f2a40;
  --ez-muted: #9aa5b8;
  --ez-heading: #f1f5f9;
  --ez-accent: #60a5fa;
  --ez-accent-soft: rgba(96,165,250,.18);
  --ez-nav-bg: #0f172a;
  --ez-nav-fg: #e2e8f0;
  --ez-nav-fg-muted: rgba(226,232,240,.7);
  --ez-nav-hover: rgba(255,255,255,.08);
}

body { background: var(--ez-bg); color: var(--ez-heading); overflow-x: hidden; }

/* ========== App shell (sidebar + main) ========== */
.app-shell { margin: 0; padding: 0; }

.app-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 232px;
  background: var(--ez-nav-bg);
  color: var(--ez-nav-fg);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: transform .22s ease;
  box-shadow: 1px 0 0 rgba(0,0,0,.05);
}
.sidebar-brand {
  display: flex; align-items: center; gap: .65rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand .brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.14);
  display: inline-grid; place-items: center;
  color: #fff; font-size: 1.15rem;
}
.sidebar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.sidebar-brand .brand-name { color: #fff; font-weight: 700; letter-spacing: .02em; }
.sidebar-brand .brand-sub { color: var(--ez-nav-fg-muted); font-size: .75rem; font-weight: 500; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .6rem .55rem; }
.sidebar-nav ul { list-style: none; padding: 0; margin: 0 0 .4rem; display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav-group-label {
  padding: .5rem .7rem .3rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ez-nav-fg-muted);
  opacity: .8;
}
.sidebar-nav-group-label:first-child { padding-top: .1rem; }
.sidebar-nav-group-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: none; border: 0;
  cursor: pointer;
}
.sidebar-nav-group-toggle:hover,
.sidebar-nav-group-toggle:focus-visible { color: var(--ez-nav-fg); opacity: 1; }
.nav-group-chevron { font-size: .7rem; transition: transform .15s ease; }
.sidebar-nav-group-toggle.is-collapsed .nav-group-chevron { transform: rotate(-90deg); }
.sidebar-nav ul.is-collapsed { display: none; }
.sidebar-nav .nav-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .7rem;
  border-radius: 8px;
  color: var(--ez-nav-fg-muted);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  transition: background-color .12s, color .12s;
}
.sidebar-nav .nav-item i { font-size: 1rem; width: 18px; text-align: center; opacity: .85; }
.sidebar-nav .nav-item:hover,
.sidebar-nav .nav-item:focus-visible { background: var(--ez-nav-hover); color: var(--ez-nav-fg); }
.sidebar-nav .nav-item.is-active {
  background: rgba(255,255,255,.14);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--ez-accent);
  padding-left: calc(.7rem - 3px + 3px);
}
.sidebar-nav .nav-item.is-active i { opacity: 1; }

.sidebar-foot {
  padding: .7rem 1rem 1rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.data-range-mini {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem;
  color: var(--ez-nav-fg-muted);
  background: rgba(255,255,255,.06);
  padding: .3rem .55rem;
  border-radius: 6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.4);
  z-index: 1035; display: none;
}
.sidebar-backdrop.is-open { display: block; }

/* Mobile/tablet: sidebar hides off-canvas */
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-sidebar.is-open { transform: translateX(0); }
  .app-main { margin-left: 0 !important; }
}

/* Main column offset */
.app-main {
  margin-left: 232px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  /* Must stay above .filter-bar (z-index: 1021) -- the topbar's own dropdowns
     (e.g. the Administrator menu) hang down past the bar's own height into
     the filter-bar's screen area, and .filter-bar is its own stacking context,
     so this value, not the dropdown's higher local z-index, decides who wins
     there. Previously 1020, tied with Bootstrap's .sticky-top -- raising
     .filter-bar past that to fix the request-type dropdown (see its own
     comment below) put it above the topbar too until this was also raised. */
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .9rem;
  background: #f5f7fa; /* fallback for Safari < 16.2 */
  background: color-mix(in oklab, var(--ez-card) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--ez-card-border);
}
.topbar-title { display: flex; flex-direction: column; line-height: 1.1; flex: 1; min-width: 0; }
.topbar-title h1 { color: var(--ez-heading); }
.topbar-subtitle { font-variant-numeric: tabular-nums; }
.topbar-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.user-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ez-accent); color: #fff;
  display: inline-grid; place-items: center;
  font-size: .72rem; font-weight: 700;
}

.app-content {
  padding: .9rem 1rem 1.1rem;
  flex: 1;
}
.app-footer {
  padding: .8rem 1rem;
  color: var(--ez-muted);
  font-size: .75rem;
  text-align: center;
  border-top: 1px solid var(--ez-card-border);
  background: var(--ez-card);
}

/* Compact card chrome */
.card-report .card-header { padding: .55rem .85rem; }
.card-report .card-header .fw-semibold { font-size: .9rem; }
.card-report .card-header .small { font-size: .7rem !important; }
.card-report .card-body { padding: .7rem .85rem; }
.row.g-3 { --bs-gutter-y: .6rem; --bs-gutter-x: .7rem; }
.row.mt-3 { margin-top: .6rem !important; }

/* ========== Legacy Navbar (kept for non-shell pages like login) ========== */
.navbar.bg-primary { background: var(--ez-nav-bg) !important; }
.navbar .navbar-brand { letter-spacing: .02em; white-space: nowrap; }
.navbar .navbar-nav { flex-wrap: nowrap; }
.navbar .nav-link {
  white-space: nowrap;
  padding: .45rem .7rem;
  border-radius: 8px;
  color: var(--ez-nav-fg-muted);
  transition: background-color .12s, color .12s;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible { background: var(--ez-nav-hover); color: var(--ez-nav-fg); }
.navbar .nav-link.active { color: var(--ez-nav-fg); background: var(--ez-nav-hover); }
.navbar .nav-link i { font-size: 1rem; }
.navbar .nav-link .nav-label { line-height: 1; }

/* Data-range pill in navbar — never wraps */
.navbar .data-range {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--ez-nav-fg-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.navbar .data-range i { opacity: .8; }

/* Theme toggle — give it a bit of room + focus outline */
.navbar #themeToggle {
  border-color: rgba(255,255,255,.3);
  color: var(--ez-nav-fg);
  line-height: 1;
  padding: .3rem .55rem;
}
.navbar #themeToggle:hover { background: var(--ez-nav-hover); border-color: rgba(255,255,255,.5); }

/* Viewport-based label compaction — show full labels only ≥1200px */
.navbar .nav-label-full { display: inline; }
.navbar .nav-label-short { display: none; }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar .nav-label-full { display: none; }
  .navbar .nav-label-short { display: inline; }
  .navbar .nav-link { padding: .4rem .55rem; }
}

/* Below lg: mobile collapse — labels full width, single column */
@media (max-width: 991.98px) {
  .navbar .navbar-nav { flex-wrap: wrap; }
  .navbar .navbar-nav .nav-link { white-space: normal; }
  .navbar .nav-actions {
    width: 100%;
    margin-top: .5rem;
    justify-content: space-between !important;
    padding-top: .5rem;
    border-top: 1px solid rgba(255,255,255,.1);
  }
}

/* ========== Filter bar (inside .app-main, under topbar) ========== */
.filter-bar {
  position: sticky;
  top: 46px;                 /* just below the topbar */
  /* Must beat Bootstrap's own .sticky-top utility (z-index: 1020 !important,
     used on in-page table headers like #cartItemsTable's <thead>). .filter-bar
     is its own stacking context (sticky + z-index), so a dropdown opened inside
     it -- e.g. the request-type filter -- is capped at THIS z-index against
     outside content, regardless of the dropdown's own higher z-index; at 1015
     it lost to any sticky table header it visually overlapped. */
  z-index: 1021;
  background: #f7f8fb; /* fallback for Safari < 16.2 */
  background: color-mix(in oklab, var(--ez-card) 96%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--ez-card-border);
  padding: .55rem .9rem;
}
[data-bs-theme="dark"] .filter-bar { background: #131b2d; /* fallback for Safari < 16.2 */ background: color-mix(in oklab, var(--ez-card) 92%, transparent); }

/* Filter form — always wrap-friendly so items never fall off-screen */
.filter-bar .filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  row-gap: .45rem;
}

/* Preset dropdown */
.preset-select { flex: 0 0 auto; width: 9.5rem; max-width: 9.5rem; }

/* Date range group — fixed width, no stretch */
.filter-bar .date-range { flex: 0 0 auto; width: auto; }
.filter-bar .date-range .form-control {
  width: 7.2rem;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  padding: .25rem .4rem;
}
.filter-bar .date-range .input-group-text { padding: .25rem .45rem; }
/* Calendar icon wrapper — custom JS picker opens on click */
.cal-btn-wrap { position: relative; overflow: hidden; cursor: pointer; padding: 0 !important; }
.cal-btn-wrap > i { padding: .25rem .45rem; display: block; pointer-events: none; }
/* Hidden overlay — carries min/max/data-target metadata; pointer-events:none so native picker never opens */
.cal-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* ===== Custom date picker dropdown ===== */
.ez-dp {
  position: absolute;
  display: none;
  width: 252px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.18);
  font-size: .82rem;
  z-index: 1060;
  overflow: hidden;
  user-select: none;
}
[data-bs-theme="dark"] .ez-dp { box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.5); }
.ez-dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem .55rem;
  background: var(--bs-secondary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
.ez-dp-title { font-weight: 600; color: var(--bs-body-color); font-size: .83rem; }
.ez-dp-nav {
  background: none;
  border: none;
  border-radius: var(--bs-border-radius-sm);
  color: var(--bs-secondary-color);
  cursor: pointer;
  padding: .05rem .38rem;
  font-size: 1.25rem;
  line-height: 1;
  transition: background .12s;
}
.ez-dp-nav:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.ez-dp-body { padding: .3rem .4rem .25rem; }
.ez-dp-weekdays, .ez-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.ez-dp-weekdays { margin-bottom: .18rem; }
.ez-dp-weekdays span {
  text-align: center;
  font-size: .68rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  padding: .08rem 0;
}
.ez-dp-grid { gap: 1px; }
.ez-dp-day {
  background: none;
  border: none;
  border-radius: var(--bs-border-radius-sm);
  color: var(--bs-body-color);
  cursor: pointer;
  padding: .27rem 0;
  text-align: center;
  width: 100%;
  font-size: .79rem;
  transition: background .1s;
}
.ez-dp-day:hover:not([disabled]):not(.ez-dp-sel) { background: var(--bs-tertiary-bg); }
.ez-dp-dim { color: var(--bs-secondary-color); }
.ez-dp-off { opacity: .3; cursor: not-allowed; }
.ez-dp-sel { background: var(--bs-primary); color: #fff !important; font-weight: 600; border-radius: var(--bs-border-radius-sm); }
.ez-dp-now { font-weight: 700; color: var(--bs-primary); }
.ez-dp-foot {
  display: flex;
  justify-content: space-between;
  padding: .28rem .55rem;
  background: var(--bs-secondary-bg);
  border-top: 1px solid var(--bs-border-color);
}
.ez-dp-action {
  background: none;
  border: none;
  color: var(--bs-primary);
  cursor: pointer;
  font-size: .79rem;
  padding: .08rem .25rem;
  border-radius: var(--bs-border-radius-sm);
}
.ez-dp-action:hover { text-decoration: underline; }

/* Select filters — uniform narrow width + ellipsis */
.filter-bar .filter-select {
  flex: 0 0 auto;
  width: 9rem;
  max-width: 9rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.filter-bar .filter-select option { white-space: normal; }

/* Action button cluster — never wraps internally */
.filter-bar .filter-actions,
.filter-bar .export-actions {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.filter-bar .filter-actions .btn,
.filter-bar .export-actions .btn { white-space: nowrap; padding: .25rem .55rem; }
.filter-bar .export-actions { margin-left: auto; }

/* At narrower widths the export actions wrap to a new line naturally */
@media (max-width: 1199.98px) {
  .filter-bar .export-actions { margin-left: 0; }
}

/* vertical rule tweak so it hugs row height */
.filter-bar .vr { opacity: .3; align-self: stretch; }

/* Active filter chip row */
.filter-bar .active-chips { margin-top: .5rem; font-size: .8rem; }
.filter-bar .active-chips .badge { padding: .4rem .55rem; font-weight: 500; }

/* Inline event-section filter bar — matches top bar visual style */
.ev-filter-bar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-end; }
.ev-filter-bar .date-range .input-group-text { padding: .25rem .45rem; }
.ev-date-in { width: 96px; min-width: 80px; flex: 0 0 auto; }
.ev-part-in { width: 148px; flex: 0 0 auto; }

/* ========== KPI cards ========== */
.kpi {
  --kpi-value-size: 1.1rem; --kpi-value-size: clamp(.95rem, 1.6cqi + .6rem, 1.35rem);
  border-radius: 10px;
  padding: .65rem .8rem;
  background: var(--ez-card);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  border: 1px solid var(--ez-card-border);
  height: 100%;
  min-height: 72px;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  container-name: kpi;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15,23,42,.06);
  border-color: color-mix(in oklab, var(--ez-accent) 25%, var(--ez-card-border));
}
.kpi .kpi-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .9rem;
}
.kpi .kpi-body { flex: 1 1 auto; min-width: 0; }
.kpi .label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ez-muted);
  line-height: 1.1;
  margin: 0 0 .15rem 0;
  font-weight: 600;
  /* Allow up to 2 lines, consistent min-height so cards align */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.9em;
}
.kpi .kpi-help {
  font-size: .78rem;
  color: var(--ez-muted);
  opacity: .7;
  cursor: help;
  margin-left: .15rem;
  vertical-align: middle;
}
.kpi .kpi-help:hover,
.kpi .kpi-help:focus-visible { opacity: 1; color: var(--ez-accent); }
.kpi .value {
  font-size: var(--kpi-value-size);
  font-weight: 700;
  color: var(--ez-heading);
  margin-top: .05rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  /* Do NOT wrap — ellipsis if truly too long */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.01em;
}
/* Longer values get progressively smaller buckets via JS helper class */
.kpi .value.value--long   { --kpi-value-size: 1rem; --kpi-value-size: clamp(.95rem, 1.3cqi + .55rem, 1.25rem); }
.kpi .value.value--xlong  { --kpi-value-size: .9rem; --kpi-value-size: clamp(.85rem, 1.1cqi + .45rem, 1.1rem); }
.kpi .value.value--xxlong { --kpi-value-size: .82rem; --kpi-value-size: clamp(.78rem, .9cqi + .4rem, 1rem); }

.kpi .delta {
  font-size: .72rem;
  font-weight: 600;
  margin-top: .25rem;
  color: var(--ez-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi .delta.up   { color: var(--ez-green); }
.kpi .delta.down { color: var(--ez-red); }
.kpi .empty { font-size: .72rem; color: var(--ez-muted); font-style: italic; margin-top: .25rem; line-height: 1.25; }

/* Narrow container fallback — stack icon above body */
@container kpi (max-width: 180px) {
  .kpi { flex-direction: column; align-items: flex-start; gap: .4rem; padding: .75rem .8rem; }
  .kpi .kpi-icon { width: 30px; height: 30px; font-size: .9rem; }
}

/* Color accents */
.kpi.c-blue   .kpi-icon { background: rgba(37,99,235,.12);  color: var(--ez-accent); }
.kpi.c-green  .kpi-icon { background: rgba(5,150,105,.12);  color: var(--ez-green); }
.kpi.c-amber  .kpi-icon { background: rgba(217,119,6,.12);  color: var(--ez-amber); }
.kpi.c-red    .kpi-icon { background: rgba(220,38,38,.12);  color: var(--ez-red); }
.kpi.c-purple .kpi-icon { background: rgba(124,58,237,.12); color: var(--ez-purple); }
.kpi.c-sky    .kpi-icon { background: rgba(14,165,233,.12); color: var(--ez-sky); }
.kpi.c-rose   .kpi-icon { background: rgba(225,29,72,.12);  color: var(--ez-rose); }

[data-bs-theme="dark"] .kpi.c-blue   .kpi-icon { background: rgba(96,165,250,.18); }
[data-bs-theme="dark"] .kpi.c-green  .kpi-icon { background: rgba(52,211,153,.18); }
[data-bs-theme="dark"] .kpi.c-amber  .kpi-icon { background: rgba(251,191,36,.18); }
[data-bs-theme="dark"] .kpi.c-red    .kpi-icon { background: rgba(248,113,113,.18); }
[data-bs-theme="dark"] .kpi.c-purple .kpi-icon { background: rgba(167,139,250,.2); }
[data-bs-theme="dark"] .kpi.c-sky    .kpi-icon { background: rgba(56,189,248,.18); }
[data-bs-theme="dark"] .kpi.c-rose   .kpi-icon { background: rgba(251,113,133,.2); }

/* ========== Report cards ========== */
.card-report {
  border-radius: 12px;
  border: 1px solid var(--ez-card-border);
  background: var(--ez-card);
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.card-report .card-header {
  background: transparent;
  border-bottom: 1px solid var(--ez-card-border);
  font-weight: 600;
  color: var(--ez-heading);
  display: flex; align-items: center; gap: .5rem;
}
.card-report .card-body { padding: 1rem 1.15rem; }

.chart-wrap { position: relative; height: 220px; }
.chart-wrap.tall { height: 280px; }
.chart-wrap.waterfall { height: 420px; }
.chart-wrap canvas { max-height: 100%; }

/* ========== Funnel view toggle + legend panel (BRD v1.2 §10.5) ========== */
.funnel-toggle { display: inline-flex; gap: 0; }
.funnel-toggle .btn {
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  line-height: 1.2;
  border-radius: 0;
}
.funnel-toggle .btn:first-child { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; }
.funnel-toggle .btn:last-child  { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }
.funnel-toggle .btn.active { background: var(--bs-primary, #2563eb); color: #fff; border-color: var(--bs-primary, #2563eb); }
.funnel-view.d-none { display: none !important; }
.funnel-legend { font-size: 0.8rem; padding-top: 0.25rem; }
.funnel-legend-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  column-gap: 0.55rem;
  align-items: start;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.funnel-legend-row:last-child { border-bottom: 0; }
.funnel-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.funnel-legend-label {
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--bs-body-color, #1f2937);
}
.funnel-legend-count {
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bs-body-color, #1f2937);
  text-align: right;
}
.funnel-legend-meta {
  grid-column: 2 / -1;
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--bs-secondary-color, #6c757d);
}
.funnel-legend-meta .pct {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.funnel-legend-meta .pct.good { color: #16a34a; }
.funnel-legend-meta .pct.warn { color: #d97706; }
.funnel-legend-meta .pct.bad  { color: #dc2626; }
.funnel-legend-meta .drop    { color: #dc2626; font-variant-numeric: tabular-nums; }
.funnel-legend-note {
  grid-column: 2 / -1;
  color: var(--bs-secondary-color, #6c757d);
  font-style: italic;
  font-size: 0.7rem;
  margin-top: 0.1rem;
}

/* ========== At-a-glance funnel comparison strip ========== */
.funnel-overview {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 1199.98px) { .funnel-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px)  { .funnel-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.funnel-overview-cell {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--ez-card-border, #e7ecf3);
  border-left: 3px solid var(--ez-funnel-color, var(--ez-accent));
  border-radius: 8px;
  background: var(--ez-card, #fff);
  color: inherit;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.funnel-overview-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  text-decoration: none;
  color: inherit;
}
.funnel-overview-head { display: flex; align-items: baseline; gap: 0.4rem; }
.funnel-overview-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ez-funnel-color, var(--ez-accent));
  letter-spacing: 0.04em;
}
.funnel-overview-name {
  font-size: 0.78rem;
  color: var(--ez-muted);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.funnel-overview-pct {
  font-size: 1.55rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.funnel-overview-pct .unit { font-size: 0.85rem; font-weight: 600; opacity: 0.7; margin-left: 0.05rem; }
.funnel-overview-pct.pct-good { color: #16a34a; }
.funnel-overview-pct.pct-warn { color: #d97706; }
.funnel-overview-pct.pct-bad  { color: #dc2626; }

.funnel-overview-bars { display: flex; flex-direction: column; gap: 3px; padding: 0.1rem 0; }
.funnel-overview-bars .bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--ez-funnel-color, var(--ez-accent));
  opacity: 0.85;
}
.funnel-overview-bars .bar + .bar { opacity: 0.55; }
.funnel-overview-bars .bar + .bar + .bar { opacity: 0.4; }
.funnel-overview-bars .bar:nth-child(n+4) { opacity: 0.3; }

.funnel-overview-foot {
  font-size: 0.7rem;
  color: var(--ez-muted);
  font-variant-numeric: tabular-nums;
}

/* Tighten the legend rows inside the compact (2-col grid) funnel cards so
   the legend + chart layout stacks comfortably without the chart shrinking. */
.col-lg-6 > .funnel-card .funnel-legend-row { padding: 0.32rem 0; }
.col-lg-6 > .funnel-card .funnel-legend-label { font-size: 0.78rem; }
.col-lg-6 > .funnel-card .funnel-legend-count { font-size: 0.82rem; }

/* ========== Tables — unified report-table look (BRD v1.2 visual polish) ========== */
.card-report .table,
.table.table-report {
  --bs-table-bg: transparent;
  font-size: 0.86rem;
  margin-bottom: 0;
  color: var(--ez-heading);
  border-collapse: separate;
  border-spacing: 0;
}

/* Header band */
.card-report .table thead th,
.table.table-report thead th {
  background: color-mix(in oklab, var(--ez-bg) 60%, var(--ez-card));
  color: var(--ez-muted);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--ez-card-border);
  border-top: 0;
  white-space: nowrap;
  position: relative;
  vertical-align: middle;
}
.card-report .table thead th:first-child,
.table.table-report thead th:first-child { border-top-left-radius: 8px; }
.card-report .table thead th:last-child,
.table.table-report thead th:last-child  { border-top-right-radius: 8px; }

/* Body cells */
.card-report .table tbody td,
.table.table-report tbody td {
  padding: 0.65rem 0.85rem;
  border-top: 0;
  border-bottom: 1px solid rgba(231,236,243,.6); border-bottom: 1px solid color-mix(in oklab, var(--ez-card-border) 60%, transparent);
  vertical-align: middle;
  line-height: 1.4;
}
.card-report .table tbody tr:last-child td,
.table.table-report tbody tr:last-child td { border-bottom: 0; }

/* First column = primary identifier — slightly bolder */
.card-report .table tbody td:first-child,
.table.table-report tbody td:first-child {
  font-weight: 500;
  color: var(--ez-heading);
}

/* Numeric (right-aligned) columns */
.card-report .table .text-end,
.table.table-report .text-end {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.card-report .table tbody td.text-end,
.table.table-report tbody td.text-end {
  font-weight: 600;
  color: var(--ez-heading);
}

/* Hover */
.card-report .table tbody tr:hover td,
.table.table-report tbody tr:hover td {
  background: rgba(37,99,235,.05); background: color-mix(in oklab, var(--ez-accent) 5%, var(--ez-card));
  cursor: default;
}

/* Subtle zebra striping for >5-row tables */
.card-report .table tbody tr:nth-child(odd) td,
.table.table-report tbody tr:nth-child(odd) td {
  background: rgba(245,247,251,.35); background: color-mix(in oklab, var(--ez-bg) 35%, transparent);
}
.card-report .table tbody tr:nth-child(odd):hover td,
.table.table-report tbody tr:nth-child(odd):hover td {
  background: rgba(37,99,235,.06); background: color-mix(in oklab, var(--ez-accent) 6%, var(--ez-card));
}

/* Dash / em-dash placeholder colour */
.card-report .table .text-muted,
.table.table-report .text-muted {
  color: rgba(107,114,128,.55) !important; color: color-mix(in oklab, var(--ez-muted) 55%, transparent) !important;
}

/* Secondary CONTENT in report tables — part descriptions, brand names, the
   technician under a customer. These are real data, not placeholders, so they
   must not inherit the 55%-faded .text-muted rule above, which washed them out
   to the point of being hard to read in one pass. Still visibly secondary to
   the part number, just legible. Use INSTEAD OF .text-muted, not alongside
   it: the faded rule above is the more specific selector and would win. */
.ez-sub {
  color: #374151 !important;
  color: color-mix(in oklab, var(--ez-muted) 78%, var(--ez-heading)) !important;
}
[data-bs-theme="dark"] .ez-sub { color: #cbd5e1 !important; }

/* Tables inside .card-report should look like part of the card, not a
   separate frame — strip the wrapping table-responsive's default border. */
.card-report .table-responsive {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ez-card-border);
  background: var(--ez-card);
}

/* Badge polish inside table cells — keep them compact */
.card-report .table .badge,
.table.table-report .badge {
  font-weight: 600;
  font-size: 0.7rem;
  padding: 0.25em 0.5em;
  border-radius: 0.35rem;
}

/* Long sticky-header tables (use class="table table-sticky") */
.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Dark-mode header band */
[data-bs-theme="dark"] .card-report .table thead th,
[data-bs-theme="dark"] .table.table-report thead th {
  background: #131b2d; background: color-mix(in oklab, var(--ez-card) 80%, var(--ez-bg));
  color: var(--ez-muted);
}
[data-bs-theme="dark"] .card-report .table tbody td:first-child,
[data-bs-theme="dark"] .table.table-report tbody td:first-child,
[data-bs-theme="dark"] .card-report .table tbody td.text-end,
[data-bs-theme="dark"] .table.table-report tbody td.text-end {
  color: var(--ez-heading);
}
[data-bs-theme="dark"] .card-report .table tbody tr:hover td,
[data-bs-theme="dark"] .table.table-report tbody tr:hover td {
  background: rgba(96,165,250,.14); background: color-mix(in oklab, var(--ez-accent) 14%, var(--ez-card));
}

/* Backwards-compat selector kept for any legacy tables outside .card-report */
.table-sm th {
  background: transparent;
  font-size: .7rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ez-muted);
  font-weight: 600; border-bottom: 1px solid var(--ez-card-border);
}
.table > :not(caption) > * > * { border-bottom-color: var(--ez-card-border); }

/* Drill-down links */
a.drill { text-decoration: none; color: var(--ez-accent); font-weight: 500; }
a.drill:hover { text-decoration: underline; }

.badge-soft { background: var(--ez-accent-soft); color: var(--ez-accent); font-weight: 500; }

/* Alerts */
.alert-stack .alert { padding: .55rem .85rem; font-size: .85rem; margin-bottom: .4rem; border-radius: 10px; }

/* Dark mode adjustments for Bootstrap tables */
[data-bs-theme="dark"] .table { color: var(--ez-heading); }
[data-bs-theme="dark"] .card-report { background: var(--ez-card); }
[data-bs-theme="dark"] .kpi         { background: var(--ez-card); }
[data-bs-theme="dark"] .bg-light    { background: var(--ez-card) !important; }
[data-bs-theme="dark"] .text-bg-light { background: var(--ez-card) !important; color: var(--ez-heading) !important; }

/* Active filter chips (close links) */
.badge a { color: inherit; }

/* Focus ring consistency */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid rgba(37,99,235,.6); outline: 2px solid color-mix(in oklab, var(--ez-accent) 60%, transparent);
  outline-offset: 2px;
}

/* ========== Shared spinner keyframes ========== */
@keyframes ez-spin   { to { transform: rotate(360deg); } }
@keyframes ez-pop-in { from { opacity:0; transform:scale(.88); } to { opacity:1; transform:scale(1); } }

/* ========== Page-transition popup loader ========== */
#page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.38);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .22s ease;
}
#page-loader.ez-fade { opacity: 0; pointer-events: none; }

.ez-loader-card {
  background: var(--ez-card);
  border: 1px solid var(--ez-card-border);
  border-radius: 18px;
  padding: 2rem 2.4rem;
  min-width: 220px;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.12);
  animation: ez-pop-in .22s ease both;
}

/* Dual-ring spinner */
.ez-ring-wrap { position: relative; width: 58px; height: 58px; }
.ez-ring-outer {
  position: absolute; inset: 0;
  border: 4px solid var(--ez-accent-soft);
  border-top-color: var(--ez-accent);
  border-radius: 50%;
  animation: ez-spin .8s linear infinite;
}
.ez-ring-inner {
  position: absolute; inset: 9px;
  border: 3px solid transparent;
  border-bottom-color: rgba(37,99,235,.45); border-bottom-color: color-mix(in oklab, var(--ez-accent) 45%, transparent);
  border-radius: 50%;
  animation: ez-spin .55s linear infinite reverse;
}

.ez-loader-label {
  font-size: .82rem; font-weight: 600;
  color: var(--ez-muted); letter-spacing: .02em;
  text-align: center;
}
.ez-loader-pct {
  font-size: 1.45rem; font-weight: 700;
  color: var(--ez-accent); font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ========== Refresh popup modal ========== */
#ez-refresh-popup {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.42);
  display: none; align-items: center; justify-content: center;
}
#ez-refresh-popup.is-open { display: flex; }

.ez-refresh-card {
  background: var(--ez-card);
  border: 1px solid var(--ez-card-border);
  border-radius: 20px;
  padding: 2rem 2.2rem 1.6rem;
  width: 340px; max-width: 94vw;
  box-shadow: 0 24px 64px rgba(0,0,0,.26), 0 4px 20px rgba(0,0,0,.14);
  animation: ez-pop-in .22s ease both;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}

.ez-refresh-title {
  font-size: 1rem; font-weight: 700;
  color: var(--ez-heading); text-align: center;
}
.ez-refresh-subtitle {
  font-size: .78rem; color: var(--ez-muted);
  text-align: center; min-height: 1.1rem;
  transition: opacity .2s;
}

/* Large ring for the refresh popup */
.ez-refresh-ring-wrap { position: relative; width: 72px; height: 72px; }
.ez-refresh-ring-outer {
  position: absolute; inset: 0;
  border: 5px solid var(--ez-accent-soft);
  border-top-color: var(--ez-accent);
  border-radius: 50%;
  animation: ez-spin .85s linear infinite;
}
.ez-refresh-ring-inner {
  position: absolute; inset: 11px;
  border: 3px solid transparent;
  border-bottom-color: rgba(37,99,235,.4); border-bottom-color: color-mix(in oklab, var(--ez-accent) 40%, transparent);
  border-radius: 50%;
  animation: ez-spin .6s linear infinite reverse;
}
/* Success state: rings turn green */
#ez-refresh-popup.is-success .ez-refresh-ring-outer {
  border-top-color: var(--ez-green);
  animation-duration: 1.6s;
}
#ez-refresh-popup.is-success .ez-refresh-ring-inner {
  border-bottom-color: rgba(5,150,105,.45); border-bottom-color: color-mix(in oklab, var(--ez-green) 45%, transparent);
  animation-duration: 1.1s;
}
/* Error state: rings turn red */
#ez-refresh-popup.is-error .ez-refresh-ring-outer {
  border-top-color: var(--ez-red);
  animation: none;
  border-color: rgba(220,38,38,.25);
  border-top-color: var(--ez-red);
}
#ez-refresh-popup.is-error .ez-refresh-ring-inner { animation: none; }

.ez-refresh-pct-row {
  width: 100%; display: flex;
  justify-content: space-between; align-items: center;
  font-size: .75rem; color: var(--ez-muted);
}
.ez-refresh-pct-num {
  font-weight: 800; font-size: 1.05rem;
  color: var(--ez-accent); font-variant-numeric: tabular-nums;
  transition: color .3s;
}
#ez-refresh-popup.is-success .ez-refresh-pct-num { color: var(--ez-green); }
#ez-refresh-popup.is-error   .ez-refresh-pct-num { color: var(--ez-red); }

.ez-refresh-bar-track {
  width: 100%; height: 6px;
  background: var(--ez-accent-soft);
  border-radius: 99px; overflow: hidden;
}
.ez-refresh-bar-fill {
  height: 100%; width: 0%;
  background: var(--ez-accent);
  border-radius: 99px;
  transition: width .5s ease, background-color .4s;
}
#ez-refresh-popup.is-success .ez-refresh-bar-fill { background: var(--ez-green); }
#ez-refresh-popup.is-error   .ez-refresh-bar-fill { background: var(--ez-red); }

.ez-refresh-dismiss {
  margin-top: .3rem;
  font-size: .78rem; font-weight: 600;
  color: var(--ez-accent); cursor: pointer;
  background: none; border: none; padding: .3rem .6rem;
  border-radius: 8px; transition: background .15s;
  display: none;
}
.ez-refresh-dismiss:hover { background: var(--ez-accent-soft); }
#ez-refresh-popup.is-success .ez-refresh-dismiss,
#ez-refresh-popup.is-error   .ez-refresh-dismiss { display: inline-block; }

/* ========== Topbar ETL progress bar ========== */
#topbar-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--ez-accent-soft); display: none;
}
#topbar-progress-bar {
  height: 100%; width: 0;
  background: var(--ez-accent);
  border-radius: 0 2px 2px 0;
  transition: width .5s ease, background-color .3s;
}

/* ========== Inline ETL progress (journeys refresh card) ========== */
.ez-etl-progress { margin-top: .75rem; display: none; }
.ez-etl-progress.show { display: block; }
.ez-pct-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .72rem; color: var(--ez-muted); margin-bottom: .3rem;
}
.ez-pct-row .ez-pct-num {
  font-weight: 700; color: var(--ez-accent);
  font-variant-numeric: tabular-nums;
}

/* ========== Upload progress ========== */
.ez-upload-progress { display: none; margin-top: 1rem; }
.ez-upload-progress.show { display: block; }

/* ========== CSP-safe progress bar height helpers ========== */
.ez-progress-3  { height: 3px; }
.ez-progress-4  { height: 4px; }
.ez-progress-5  { height: 5px; }
.ez-progress-6  { height: 6px; }
.ez-progress-14 { height: 14px; }
.ez-mw-50  { max-width: 50px; }
.ez-mw-60  { max-width: 60px; }
.ez-mw-120 { max-width: 120px; }
.ez-scroll-420 { max-height: 420px; overflow-y: auto; }
.ez-scroll-480 { max-height: 480px; overflow-y: auto; }
.ez-fs-65  { font-size: .65rem; }
.ez-fs-68  { font-size: .68rem; }
.ez-fs-70  { font-size: .70rem; }
.ez-fs-100 { font-size: 1rem; }
.ez-fs-110 { font-size: 1.1rem; }
.ez-nowrap { white-space: nowrap; }
.ez-ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.ez-max-220 { max-width: 220px; }
.ez-max-200 { max-width: 200px; }

/* ========== Custom dropdown button sizing (replaces inline styles — CSP safe) ========== */
.ez-dd-btn  { text-align: left; }
.ez-dd-90   { min-width: 90px; }
.ez-dd-120  { min-width: 120px; }
.ez-dd-130  { min-width: 130px; }
.ez-dd-160  { min-width: 160px; }
.ez-dd-280  { min-width: 280px; }
.ez-callout-blue    { background: rgba(37,99,235,.06); }
.ez-callout-red     { background: rgba(239,68,68,.08); }
.ez-callout-warn-lb { border-left: 4px solid #f59e0b; }
.ez-cursor-pointer  { cursor: pointer; }
.ez-maxw-280 { max-width: 280px; }
.ez-maxw-340 { max-width: 340px; }
.ez-fs-78    { font-size: .78em; }
.ez-scroll-300 { max-height: 300px; overflow-y: auto; }
.ez-flex-fixed  { flex: 0 0 auto; }
.ez-flex-search { flex: 1 1 180px; min-width: 150px; }
.ez-brtl-0      { border-top-left-radius: 0 !important; }
.ez-fs-72 { font-size: .72rem; }
.ez-fs-75 { font-size: .75rem; }
.ez-fs-78 { font-size: .78rem; }
.ez-fs-80 { font-size: .80rem; }
.ez-fs-82 { font-size: .82rem; }
.ez-json-pre { max-height: 65vh; overflow: auto; }
.ez-w-1 { width: 1%; }

/* Drill-modal stat tile that jumps to a section further down the modal. */
.ez-stat-link { transition: background-color .15s ease, border-color .15s ease; }
.ez-stat-link:hover,
.ez-stat-link:focus-visible {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-primary) !important;
}

/* ========== Global dropdown redesign ========== */
/* Trigger buttons — match form-select look */
.dropdown-toggle,
.btn.dropdown-toggle {
  background: var(--ez-card);
  border: 1px solid var(--ez-card-border);
  color: var(--ez-heading);
  border-radius: .5rem;
  font-size: .875rem;
  padding: .35rem .75rem;
  transition: border-color .15s, box-shadow .15s;
}
.dropdown-toggle:hover,
.dropdown-toggle:focus,
.btn.dropdown-toggle:hover,
.btn.dropdown-toggle:focus {
  border-color: var(--ez-accent);
  box-shadow: 0 0 0 3px var(--ez-accent-soft);
  background: var(--ez-card);
  color: var(--ez-heading);
}
.dropdown-toggle.show,
.btn.dropdown-toggle.show {
  border-color: var(--ez-accent);
  box-shadow: 0 0 0 3px var(--ez-accent-soft);
  background: var(--ez-card);
  color: var(--ez-accent);
}
/* Keep outline-secondary style consistent */
.btn-outline-secondary.dropdown-toggle {
  background: var(--ez-card);
  border-color: var(--ez-card-border);
  color: var(--ez-heading);
}
.btn-outline-secondary.dropdown-toggle:hover,
.btn-outline-secondary.dropdown-toggle.show {
  background: var(--ez-card);
  border-color: var(--ez-accent);
  color: var(--ez-accent);
}

/* Dropdown menu panel */
.dropdown-menu {
  background: var(--ez-card) !important;
  border: 1px solid var(--ez-card-border) !important;
  border-radius: .625rem !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.10) !important;
  padding: .375rem !important;
  min-width: 160px;
  margin-top: .25rem !important;
  z-index: 1025 !important;
}

/* Dropdown items */
.dropdown-item {
  border-radius: .375rem !important;
  font-size: .875rem;
  padding: .45rem .75rem !important;
  color: var(--ez-heading) !important;
  background: transparent !important;
  transition: background .12s, color .12s;
  font-weight: 400;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--ez-accent-soft) !important;
  color: var(--ez-accent) !important;
}
.dropdown-item.active,
.dropdown-item:active {
  background: var(--ez-accent-soft) !important;
  color: var(--ez-accent) !important;
  font-weight: 600;
}
.dropdown-item.disabled,
.dropdown-item:disabled {
  color: var(--ez-muted) !important;
  background: transparent !important;
}

/* Divider */
.dropdown-divider {
  border-color: var(--ez-card-border);
  margin: .25rem .5rem;
}

/* Dropdown header */
.dropdown-header {
  font-size: .75rem;
  font-weight: 600;
  color: var(--ez-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .4rem .75rem .2rem;
}

/* Checkboxes inside dropdowns (type-dropdown-menu in data_log) */
.type-dropdown-menu {
  max-height: 280px;
  overflow-y: auto;
  min-width: 200px;
}
.type-dropdown-menu .form-check {
  padding: .3rem .75rem .3rem 2rem;
  margin: 0;
  border-radius: .375rem;
  transition: background .1s;
}
.type-dropdown-menu .form-check:hover {
  background: var(--ez-accent-soft);
}
.type-dropdown-menu .form-check-label {
  font-size: .875rem;
  color: var(--ez-heading);
  cursor: pointer;
}

/* Dark mode */
[data-bs-theme="dark"] .dropdown-toggle,
[data-bs-theme="dark"] .btn.dropdown-toggle,
[data-bs-theme="dark"] .btn-outline-secondary.dropdown-toggle {
  background: var(--ez-card);
  border-color: var(--ez-card-border);
  color: var(--ez-heading);
}
[data-bs-theme="dark"] .dropdown-menu {
  background: var(--ez-card);
  border-color: var(--ez-card-border);
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
[data-bs-theme="dark"] .dropdown-item {
  color: var(--ez-heading);
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus,
[data-bs-theme="dark"] .dropdown-item.active {
  background: var(--ez-accent-soft);
  color: var(--ez-accent);
}

/* ========== Pagination — always right-aligned project-wide ========== */
.pagination { justify-content: flex-end; }