/* =====================================================================
   AzimiCargo CRM — Premium Design System  (v4 · Navy & Gold)
   Restrained, flat, hairline borders. Inspired by Attio / Linear / Stripe.
   Navy primary, gold accent — per Azimi Cargo brand book. Light + dark.
   Loaded LAST to win cascade. Shell (sidebar + topbar) + all shared
   components are themed here, scoped under [data-theme] so rules beat
   per-page inline <style> blocks.
   ===================================================================== */

/* ----------------------------- TOKENS -------------------------------- */
:root,
[data-theme="light"] {
  --brand:        #1B2A4A;
  --brand-strong: #111C32;   /* primary actions / links on white */
  --brand-700:    #0D1526;
  --brand-400:    #C9A24B;
  --brand-soft:   #EEF1F5;
  --brand-soft-2: #E4E9F0;
  --brand-line:   #C9D2DE;
  --brand-grad:   linear-gradient(120deg, #111C32 0%, #0D1526 100%);
  --accent:       #f59e0b;
  --shadow-brand: 0 10px 30px -12px rgba(17, 28, 50,.5);

  --success: #059669;  --success-soft: #e7f6f0;
  --danger:  #dc2626;  --danger-soft:  #fdeced;
  --warning: #d97706;  --warning-soft: #fdf2e2;
  --info:    #0891b2;  --info-soft:    #e6f6fa;

  --bg:          #f4f8f7;
  --surface:     #ffffff;
  --surface-2:   #fafcfb;
  --surface-3:   #f1f6f4;
  --sidebar-bg:  #ffffff;
  --sidebar-border: #e7eeeb;
  --topbar-bg:   rgba(255,255,255,0.86);
  --border:      #e7eeeb;
  --border-2:    #dbe5e1;

  --text:        #0b2b33;
  --text-2:      #35505a;
  --text-muted:  #62787f;
  --text-faint:  #93a5aa;

  --shadow-xs: 0 1px 2px rgba(11,43,51,.04);
  --shadow-sm: 0 1px 3px rgba(11,43,51,.06), 0 1px 2px rgba(11,43,51,.04);
  --shadow-md: 0 4px 12px rgba(11,43,51,.06);
  --shadow-lg: 0 12px 32px -8px rgba(11,43,51,.14);
  --shadow-pop: 0 16px 40px -12px rgba(11,43,51,.22);

  --topbar-h:  62px;

  --radius:    14px;
  --radius-sm: 9px;
  --radius-lg: 18px;
  --ring: 0 0 0 3px rgba(27, 42, 74,.20);

  color-scheme: light;
}

[data-theme="dark"] {
  --brand:        #C9A24B;
  --brand-strong: #1B2A4A;
  --brand-700:    #D9BC7A;
  --brand-400:    #D9BC7A;
  --brand-soft:   rgba(166, 132, 44,.12);
  --brand-soft-2: rgba(166, 132, 44,.18);
  --brand-line:   rgba(166, 132, 44,.30);
  --brand-grad:   linear-gradient(120deg, #0D1526 0%, #080E1A 100%);
  --accent:       #fbbf24;
  --shadow-brand: 0 10px 30px -12px rgba(0,0,0,.55);

  --success: #34d399;  --success-soft: rgba(52,211,153,.14);
  --danger:  #f87171;  --danger-soft:  rgba(248,113,113,.14);
  --warning: #fbbf24;  --warning-soft: rgba(251,191,36,.14);
  --info:    #22d3ee;  --info-soft:    rgba(34,211,238,.14);

  --bg:          #0a1214;
  --surface:     #101c20;
  --surface-2:   #0d181c;
  --surface-3:   #17262b;
  --sidebar-bg:  #0b1619;
  --sidebar-border: #1d2e33;
  --topbar-bg:   rgba(11,22,25,0.82);
  --border:      #1e3036;
  --border-2:    #294047;

  --text:        #e6f0ef;
  --text-2:      #c0d2d0;
  --text-muted:  #8aa3a3;
  --text-faint:  #5c7476;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow-md: 0 6px 18px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 44px -12px rgba(0,0,0,.6);
  --shadow-pop: 0 22px 50px -14px rgba(0,0,0,.7);

  --ring: 0 0 0 3px rgba(166, 132, 44,.28);
  color-scheme: dark;
}

/* --------------------------- BASE / SHELL ---------------------------- */
[data-theme] body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Work Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.006em;
}
html[dir="rtl"][data-theme] body { font-family: 'Vazirmatn', 'Work Sans', Tahoma, sans-serif; }
[data-theme] .bg-light,
[data-theme] main.bg-light,
[data-theme] footer.bg-light { background: transparent !important; }
[data-theme] ::selection { background: var(--brand-soft-2); color: var(--text); }

[data-theme] h1,[data-theme] h2,[data-theme] h3,
[data-theme] h4,[data-theme] h5,[data-theme] h6 {
  color: var(--text); letter-spacing: -0.02em;
  font-family: 'Outfit', 'Work Sans', 'Vazirmatn', sans-serif;
}
html[dir="rtl"][data-theme] h1, html[dir="rtl"][data-theme] h2, html[dir="rtl"][data-theme] h3,
html[dir="rtl"][data-theme] h4, html[dir="rtl"][data-theme] h5, html[dir="rtl"][data-theme] h6 {
  font-family: 'Vazirmatn', Tahoma, sans-serif;
}

/* Headings inside a dark hero band must keep the band's own colour.
   `[data-theme] h1..h6 { color: var(--text) }` above is more specific than the
   band's inherited `color:#fff`, so every hero title on the app rendered dark
   navy text on a dark navy panel — near-invisible. Seen on Goods Management,
   Finance Dashboard, Create Warehouse Entry, Customer Overview and the
   container header. Listed explicitly rather than using a wildcard so a light
   panel is never accidentally forced to white. */
[data-theme] .gfc-hero h1, [data-theme] .gfc-hero h2, [data-theme] .gfc-hero h3,
[data-theme] .gfc-hero h4, [data-theme] .gfc-hero h5, [data-theme] .gfc-hero h6,
[data-theme] .dashboard-hero h1, [data-theme] .dashboard-hero h2,
[data-theme] .customer-hero h1, [data-theme] .customer-hero h2,
[data-theme] .container-hero h1, [data-theme] .container-hero h2,
[data-theme] .goods-hero h1, [data-theme] .goods-hero h2,
[data-theme] .company-hero h1, [data-theme] .company-hero h2,
[data-theme] .warehouse-hero h1, [data-theme] .warehouse-hero h2,
[data-theme] .finance-hero h1, [data-theme] .finance-hero h2,
[data-theme] .voucher-hero h1, [data-theme] .voucher-hero h2,
[data-theme] .op-head-icon + div h1,
[data-theme] .band h1, [data-theme] .band h2,
[data-theme] .rcpt-head h1, [data-theme] .rcpt-head h2 {
  color: #fff !important;
}

[data-theme] .stat-value,[data-theme] .modern-table td,[data-theme] .table td,
[data-theme] .money,[data-theme] [class*="text-end"] { font-variant-numeric: tabular-nums; }

[data-theme] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme] ::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: 8px;
  border: 3px solid transparent; background-clip: padding-box;
}
[data-theme] ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ======================================================================
   APP SHELL — TOPBAR
   ====================================================================== */
[data-theme] .top-navbar {
  background: var(--topbar-bg) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: .6rem 1.25rem !important;
  position: sticky; top: 0; z-index: 1030;
}
[data-theme] .top-navbar .navbar-brand { color: var(--text) !important; font-weight: 700; }
[data-theme] .brand-icon {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%) !important;
  box-shadow: 0 4px 12px -3px rgba(17, 28, 50,.5) !important;
  color:#fff !important; border-radius: 11px !important;
}
[data-theme] .menu-toggle, [data-theme] .theme-toggle, [data-theme] .nav-btn {
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  transition: all .18s ease;
}
[data-theme] .menu-toggle:hover, [data-theme] .theme-toggle:hover, [data-theme] .nav-btn:hover {
  background: var(--surface-2) !important; color: var(--text) !important;
  border-color: var(--border-2) !important; transform: none !important;
}
[data-theme] .nav-btn.logout { background: var(--danger-soft) !important; color: var(--danger) !important; border-color: transparent !important; }
[data-theme] .nav-btn.logout:hover { background: var(--danger-soft) !important; filter: brightness(.97); }
[data-theme] .theme-toggle .bi-sun-fill { color: var(--accent); }

/* Global search box in the topbar */
.topbar-search {
  display: flex; align-items: center; gap: .5rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: .5rem .8rem;
  min-width: 240px; max-width: 360px; flex: 1;
  color: var(--text-muted);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.topbar-search:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.topbar-search input {
  border: none; background: transparent; outline: none;
  color: var(--text); font-size: .9rem; width: 100%;
}
.topbar-search input::placeholder { color: var(--text-faint); }
.topbar-search kbd {
  font-size: .68rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: .1rem .4rem; color: var(--text-muted);
}
@media (max-width: 768px) { .topbar-search { display: none !important; } }

/* Topbar avatar */
.topbar-avatar {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; flex: 0 0 auto;
  box-shadow: 0 4px 12px -3px rgba(17, 28, 50,.45);
}

/* ======================================================================
   APP SHELL — SIDEBAR  (override the old dark-gradient/gold look)
   ====================================================================== */
[data-theme] .sidebar-custom {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: none !important;
}
/* The sidebar used to be min-height:100vh inside a stretching flex row, so it
   grew to the full height of the page — on a long page you scrolled past the
   content and were left looking at nav beside an empty column. Pinning it to
   the viewport keeps the brand and the user card in view and makes the nav
   scroll within itself instead of lengthening the document. */
@media (min-width: 992px) {
  [data-theme] .sidebar-custom {
    position: sticky !important;
    /* Under the sticky topbar, not behind it — top:0 slid the brand lockup
       beneath it as soon as the page scrolled. */
    top: var(--topbar-h) !important;
    height: calc(100vh - var(--topbar-h)) !important;
    min-height: 0 !important;
    align-self: flex-start !important;
    overflow: hidden !important;
  }
}

/* ---------- brand lockup ---------- */
[data-theme] .sidebar-header {
  background: transparent !important;
  border-bottom: 1px solid var(--sidebar-border) !important;
  padding: 1.15rem 1.05rem 1.05rem !important;
  position: relative;
  /* With the sidebar now a fixed-height flex column, the header and footer
     must keep their size — otherwise they get squeezed by the long nav and
     the brand lockup loses its subtitle. Only the nav should flex. */
  flex: 0 0 auto !important;
  margin-bottom: 0 !important;
}
[data-theme] .sidebar-custom .flex-grow-1.overflow-auto { min-height: 0 !important; }
[data-theme] .sidebar-header::after { display: none !important; }   /* kill shimmer */
[data-theme] .sidebar-header .text-white,
[data-theme] .sidebar-header span,
[data-theme] .sidebar-header small { color: var(--text) !important; text-shadow: none !important; }
[data-theme] .sidebar-header .fs-4 { font-size: 1.12rem !important; letter-spacing: -.02em !important; font-weight: 800 !important; }
[data-theme] .sidebar-header small {
  color: var(--text-faint) !important; font-size: .6rem !important;
  letter-spacing: .16em !important; font-weight: 700 !important;
}
/* The mark sits on brand navy in both themes so the gold A always reads. */
[data-theme] .sidebar-header .bg-white {
  background: linear-gradient(135deg,#1B2A4A,#0D1526) !important;
  border-radius: 11px !important; padding: .45rem !important;
  box-shadow: 0 4px 12px -6px rgba(17,28,50,.55) !important;
}
[data-theme] .sidebar-header .bg-white i { color:#fff !important; }

/* ---------- section headings ---------- */
[data-theme] .sidebar-custom .nav-section {
  color: var(--text-faint) !important;
  font-size: .625rem !important; letter-spacing: .15em !important;
  font-weight: 800 !important; padding: .45rem 1.15rem .3rem !important;
  margin-top: 1.15rem !important; position: relative;
}
/* Hairline above every group but the first — structure without extra chrome. */
[data-theme] .sidebar-custom .nav-section::after {
  display: block !important; content: "" !important;
  position: absolute !important; top: -.5rem !important;
  left: 1.15rem !important; right: 1.15rem !important;
  height: 1px !important; background: var(--sidebar-border) !important;
}
[data-theme] .sidebar-custom .flex-grow-1 > .nav-section:first-child { margin-top: .35rem !important; }
[data-theme] .sidebar-custom .flex-grow-1 > .nav-section:first-child::after { display: none !important; }

/* ---------- items ---------- */
[data-theme] .sidebar-custom .nav { padding: 0 .6rem !important; }
[data-theme] .sidebar-custom .nav-link {
  color: var(--text-2) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 9px !important;
  padding: .5rem .75rem !important;
  margin-bottom: .1rem !important;
  font-size: .855rem !important; font-weight: 500 !important;
  transform: none !important;
  transition: background-color .15s ease, color .15s ease !important;
  position: relative;
}
/* Gold rail on the active item. The previous rule hid this outright, which
   left 40 items in seven groups with no strong "you are here" marker. */
[data-theme] .sidebar-custom .nav-link::before {
  display: block !important; content: "" !important;
  position: absolute !important; left: -.6rem !important; top: 50% !important;
  width: 3px !important; height: 0 !important;
  background: linear-gradient(180deg,#C9A24B,#A6842C) !important;
  border-radius: 0 3px 3px 0 !important;
  transform: translateY(-50%) !important;
  transition: height .18s ease !important;
  box-shadow: none !important;
}
[data-theme] .sidebar-custom .nav-link i {
  font-size: 1.02rem !important; width: 1.35rem !important; height: auto !important;
  margin-right: .68rem !important; opacity: 1 !important;
  color: var(--text-faint) !important; background: transparent !important;
  transform: none !important; padding: 0 !important;
  transition: color .15s ease !important;
}
[data-theme] .sidebar-custom .nav-link:hover {
  background: var(--surface-3) !important; color: var(--text) !important; transform: none !important;
}
[data-theme] .sidebar-custom .nav-link:hover i { color: var(--text-2) !important; background: transparent !important; transform: none !important; }
[data-theme] .sidebar-custom .nav-link:hover::before { height: 40% !important; }

[data-theme] .sidebar-custom .nav-link.active {
  background: var(--brand-soft) !important;
  color: var(--brand-strong) !important;
  font-weight: 700 !important;
  border: none !important; box-shadow: none !important;
}
[data-theme] .sidebar-custom .nav-link.active::before { height: 62% !important; }
[data-theme="dark"] .sidebar-custom .nav-link.active { color: var(--brand) !important; }
[data-theme] .sidebar-custom .nav-link.active i { color: var(--brand-strong) !important; background: transparent !important; }
[data-theme="dark"] .sidebar-custom .nav-link.active i { color: var(--brand) !important; }

/* Keyboard users get the same orientation the mouse gets. */
[data-theme] .sidebar-custom .nav-link:focus-visible {
  outline: none !important; background: var(--surface-3) !important;
  box-shadow: var(--ring) !important;
}

/* The nav scrolls behind the header and footer; fade the cut so it reads as
   "more below" rather than a hard clip mid-row. */
[data-theme] .sidebar-custom .flex-grow-1.overflow-auto {
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
[data-theme] .sidebar-custom .flex-grow-1.overflow-auto::-webkit-scrollbar { width: 6px; }
[data-theme] .sidebar-custom .flex-grow-1.overflow-auto::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: 3px;
}
[data-theme] .sidebar-custom .flex-grow-1.overflow-auto::-webkit-scrollbar-track { background: transparent; }

/* ---------- footer ---------- */
[data-theme] .sidebar-footer {
  background: transparent !important;
  border-top: 1px solid var(--sidebar-border) !important;
  padding: .85rem .75rem !important;
  flex: 0 0 auto !important;
}
[data-theme] .sidebar-user {
  background: var(--surface-3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 11px !important; box-shadow: none !important;
  padding: .6rem .7rem !important; margin-bottom: .6rem !important;
}
[data-theme] .sidebar-user-avatar {
  background: linear-gradient(135deg,#1B2A4A,#0D1526) !important;
  border-radius: 9px !important; box-shadow: none !important;
  width: 2.1rem !important; height: 2.1rem !important;
  font-size: .82rem !important; margin-right: .6rem !important;
}
[data-theme] .sidebar-user-name { color: var(--text) !important; font-size: .85rem !important; font-weight: 700 !important; }
[data-theme] .sidebar-user-role { color: var(--text-faint) !important; font-size: .68rem !important; letter-spacing: .06em !important; }
[data-theme] .sidebar-logout {
  background: transparent !important; color: var(--text-muted) !important;
  border: 1px solid var(--border) !important; border-radius: 9px !important;
  font-size: .82rem !important; font-weight: 600 !important; padding: .5rem !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}
[data-theme] .sidebar-logout:hover {
  background: var(--danger-soft) !important; color: var(--danger) !important;
  border-color: transparent !important; filter: none !important;
  transform: none !important; box-shadow: none !important;
}

/* Collapsible sidebar (desktop) */
@media (min-width: 992px) {
  .app-sidebar-collapsed #sidebarMenu { flex: 0 0 76px !important; max-width: 76px !important; width: 76px !important; }
  .app-sidebar-collapsed main { flex: 1 1 auto !important; max-width: none !important; width: auto !important; }
  .app-sidebar-collapsed .sidebar-custom { width: 76px !important; min-width: 76px; overflow: hidden; }
  /* Everything that is text-only disappears; only the icon rail survives. */
  .app-sidebar-collapsed .nav-label,
  .app-sidebar-collapsed .sidebar-header .text-start,
  .app-sidebar-collapsed .sidebar-user-info { display: none !important; }
  .app-sidebar-collapsed .sidebar-custom .nav-section { font-size: 0 !important; padding: .4rem 0 !important; }
  .app-sidebar-collapsed .sidebar-custom .nav-link {
    justify-content: center; padding-left: .5rem !important; padding-right: .5rem !important;
    white-space: nowrap;
  }
  /* The expanded hover nudge would push the icon out of a 76px rail. */
  .app-sidebar-collapsed .sidebar-custom .nav-link:hover { transform: none !important; }
  .app-sidebar-collapsed .sidebar-custom .nav-link i,
  .app-sidebar-collapsed .sidebar-logout i,
  .app-sidebar-collapsed .sidebar-user-avatar { margin-right: 0 !important; margin-left: 0 !important; }
  .app-sidebar-collapsed .sidebar-footer { padding-left: .4rem !important; padding-right: .4rem !important; }
  .app-sidebar-collapsed .sidebar-user { justify-content: center; padding: .5rem !important; }
  .app-sidebar-collapsed .sidebar-logout { justify-content: center; padding: .6rem .25rem !important; }
  .app-sidebar-collapsed .sidebar-header { padding-top: 1rem !important; padding-bottom: 1rem !important; }
}

/* ======================================================================
   CARDS
   ====================================================================== */
[data-theme] .content-card,
[data-theme] .card,
[data-theme] .stat-card,
[data-theme] .table-card,
[data-theme] .filter-card,
[data-theme] .info-card,
[data-theme] .section,
[data-theme] .section-card,
[data-theme] .form-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
[data-theme] .content-card { padding: 1.6rem 1.75rem; }
[data-theme] .stat-card, [data-theme] .content-card, [data-theme] .table-card, [data-theme] .section-card {
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* Refined: lift with shadow/border, NO vertical jump */
[data-theme] .stat-card:hover,
[data-theme] .content-card:hover,
[data-theme] .section-card:hover {
  transform: none !important;
  box-shadow: var(--shadow-md);
  border-color: var(--border-2) !important;
}
[data-theme] .stat-card::before { display: none; } /* drop the accent bar — too busy */

[data-theme] .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
[data-theme] .card-footer {
  background: var(--surface-2) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-2) !important;
}
[data-theme] .stat-icon { border-radius: 12px; box-shadow: none; }
[data-theme] .stat-label { color: var(--text-muted) !important; font-weight: 600; }
[data-theme] .stat-value { color: var(--text) !important; letter-spacing: -.025em; }

/* Section header (list pages) */
[data-theme] .section-header {
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* ======================================================================
   HERO — refined, single soft brand wash (not loud gradient)
   ====================================================================== */
[data-theme] .dashboard-hero,
[data-theme] .customer-hero, [data-theme] .container-hero, [data-theme] .goods-hero,
[data-theme] .good-hero, [data-theme] .payment-hero,
[data-theme] .company-hero, [data-theme] .warehouse-hero, [data-theme] .finance-hero,
[data-theme] .voucher-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--brand-strong) 0%, var(--brand-700) 100%) !important;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px -12px rgba(17, 28, 50,.5);
  color: #fff;
  border: none !important;
}
[data-theme="dark"] .dashboard-hero,
[data-theme="dark"] .customer-hero, [data-theme="dark"] .container-hero, [data-theme="dark"] .goods-hero,
[data-theme="dark"] .good-hero, [data-theme="dark"] .payment-hero,
[data-theme="dark"] .company-hero, [data-theme="dark"] .warehouse-hero, [data-theme="dark"] .finance-hero,
[data-theme="dark"] .voucher-hero {
  background: linear-gradient(120deg, #0D1526 0%, #080E1A 100%) !important;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.7);
}
[data-theme] .dashboard-hero::after,
[data-theme] .finance-hero::after,
[data-theme] .container-hero::after,
[data-theme] .goods-hero::after,
[data-theme] .customer-hero::after {
  content:""; position:absolute; top:-70%; right:-6%;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 68%);
  pointer-events:none;
}

/* ======================================================================
   TABLES — crisp, hairline rows
   ====================================================================== */
[data-theme] .table, [data-theme] .modern-table { color: var(--text); border-color: var(--border); }
[data-theme] .modern-table thead th,
[data-theme] .table thead th {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .8rem 1rem;
}
[data-theme] .modern-table tbody td,
[data-theme] .table tbody td {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-2);
}
[data-theme] .modern-table tbody tr,
[data-theme] .table tbody tr { transition: background-color .13s ease; }
/* Many pages set ".modern-table tbody tr { background: white }" in their own
   <style>; that out-specifies the rule above and shows white rows in dark mode.
   modern-table rows are separated "cards" (border-spacing), so make them LIGHTER
   than the surface they sit on — otherwise they recede and merge into the page. */
[data-theme="dark"] .modern-table tbody tr { background: var(--surface-3) !important; }
[data-theme="dark"] .modern-table tbody td { background-color: transparent !important; }
[data-theme] .table-hover tbody tr:hover { background: var(--surface-3) !important; }
[data-theme] .modern-table tbody tr:hover { background: var(--surface-3) !important; }
[data-theme="dark"] .modern-table tbody tr:hover { box-shadow: 0 2px 12px rgba(0,0,0,.4) !important; }
[data-theme] .table-responsive { border-radius: var(--radius-sm); border: 1px solid var(--border); }
[data-theme] .table-card .table-responsive,
[data-theme] .section-card .table-responsive { border: none; }

/* Bootstrap table colour variables — keep cells transparent so the card surface
   shows through (fixes white rows in dark mode), and theme the .table-light
   header/footer rows used across the app. Works in both light + dark. */
[data-theme] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --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(--surface-3);
}
[data-theme] .table > :not(caption) > * > * { background-color: var(--bs-table-bg); }
[data-theme] .table-light,
[data-theme] thead.table-light th,
[data-theme] tfoot.table-light td,
[data-theme] tr.table-light > th,
[data-theme] tr.table-light > td {
  --bs-table-bg: var(--surface-2);
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ======================================================================
   DARK-MODE SAFETY NET — neutralise hardcoded light styles on every page.
   Many per-page views ship inline light backgrounds / dark text that look
   fine in light mode but break in dark mode. These rules are scoped to
   [data-theme="dark"] ONLY, so light mode is never touched. We flip opaque
   light surfaces to the dark surface and dark text to light text. Intentional
   white text on coloured heroes (color: white) and brand-blue buttons are
   left alone on purpose.
   ====================================================================== */

/* Opaque light backgrounds → dark surface */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="dark"] [style*="background: #f9fafb"],
[data-theme="dark"] [style*="background-color: #f9fafb"],
[data-theme="dark"] [style*="background: #f3f4f6"],
[data-theme="dark"] [style*="background:#f3f4f6"],
[data-theme="dark"] [style*="background: #f7fafc"],
[data-theme="dark"] [style*="background: #f3f5f9"],
[data-theme="dark"] [style*="#f1f5f9"],
[data-theme="dark"] [style*="#F1F5F9"] {
  background-color: var(--surface) !important;
  background-image: none !important;
}

/* Bootstrap light utilities */
[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }

/* Hardcoded dark body text → light text */
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color: #111"],
[data-theme="dark"] [style*="color: #212529"],
[data-theme="dark"] [style*="color: #1f2937"],
[data-theme="dark"] [style*="color:#1f2937"],
[data-theme="dark"] [style*="color: #374151"],
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color: #2c3e50"],
[data-theme="dark"] [style*="color: #4a5568"],
[data-theme="dark"] [style*="color: #495057"],
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color: #222"] {
  color: var(--text) !important;
}

/* Hardcoded muted/grey text → themed muted */
[data-theme="dark"] [style*="color: #6b7280"],
[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color: #6c757d"],
[data-theme="dark"] [style*="color:#6c757d"],
[data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color: #9ca3af"],
[data-theme="dark"] [style*="color: #94a3b8"],
[data-theme="dark"] [style*="color: #a0aec0"],
[data-theme="dark"] [style*="color: #475569"],
[data-theme="dark"] [style*="color:#475569"] {
  color: var(--text-muted) !important;
}

/* --- Per-page <style> class names (not inline) that hardcode light surfaces.
   These vary page to page but reuse a common vocabulary; we darken the common
   container classes. Higher specificity ([data-theme="dark"] .x) beats the
   page's own .x rule regardless of source order. Dark mode only. --- */
[data-theme="dark"] .form-section,
[data-theme="dark"] .form-card,
[data-theme="dark"] .field-card,
[data-theme="dark"] .balance-display,
[data-theme="dark"] .summary-card,
[data-theme="dark"] .summary-stat,
[data-theme="dark"] .voucher-card,
[data-theme="dark"] .payment-card,
[data-theme="dark"] .container-card,
[data-theme="dark"] .item-card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .info-item,
[data-theme="dark"] .info-box,
[data-theme="dark"] .progress-card,
[data-theme="dark"] .money-card,
[data-theme="dark"] .good-summary-card,
[data-theme="dark"] .goods-preview-card,
[data-theme="dark"] .table-container,
[data-theme="dark"] .panel,
[data-theme="dark"] .detail-item,
[data-theme="dark"] .meta-item,
[data-theme="dark"] .subtotal-row,
[data-theme="dark"] .invoice-meta,
[data-theme="dark"] .memo-box,
[data-theme="dark"] .no-photo,
[data-theme="dark"] .item-thumb-empty,
[data-theme="dark"] .photo-drop,
[data-theme="dark"] .passport-preview,
[data-theme="dark"] .stat-display,
[data-theme="dark"] .calc-card,
[data-theme="dark"] .qr-code {
  background-color: var(--surface-2) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  color: var(--text);
}

/* Charge-calculation rows (containers/goods) hardcode light borders + dark text */
[data-theme="dark"] .calc-row { border-bottom-color: var(--border) !important; }
[data-theme="dark"] .calc-row:last-child { color: var(--text) !important; }

/* Per-page label / value text classes that hardcode dark colours */
[data-theme="dark"] .section-title,
[data-theme="dark"] .form-label,
[data-theme="dark"] .info-label,
[data-theme="dark"] .summary-label,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .amount-label,
[data-theme="dark"] .meta {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .info-value,
[data-theme="dark"] .info-row,
[data-theme="dark"] .detail-item,
[data-theme="dark"] .company-info,
[data-theme="dark"] .customer-name,
[data-theme="dark"] .summary-value {
  color: var(--text) !important;
}

/* ======================================================================
   BADGES — soft tinted, both themes
   ====================================================================== */
[data-theme] .badge { font-weight: 600; letter-spacing: .01em; border-radius: 7px; padding: .38em .66em; font-size: .74em; }
[data-theme] .badge.rounded-pill { border-radius: 999px; }
[data-theme] .badge.bg-light { background: var(--surface-3) !important; color: var(--text-2) !important; border: 1px solid var(--border) !important; }
[data-theme] .badge.bg-success { background: var(--success-soft) !important; color: var(--success) !important; }
[data-theme] .badge.bg-danger  { background: var(--danger-soft)  !important; color: var(--danger)  !important; }
[data-theme] .badge.bg-warning { background: var(--warning-soft) !important; color: var(--warning) !important; }
[data-theme] .badge.bg-info    { background: var(--info-soft)    !important; color: var(--info)    !important; }
[data-theme] .badge.bg-primary { background: var(--brand-soft) !important; color: var(--brand-strong) !important; }
[data-theme="dark"] .badge.bg-primary { color: var(--brand) !important; }
[data-theme] .badge.bg-secondary { background: var(--surface-3) !important; color: var(--text-muted) !important; }
[data-theme] .badge.bg-dark { background: var(--surface-3) !important; color: var(--text) !important; }

/* ======================================================================
   BUTTONS — flat solid, subtle
   ====================================================================== */
[data-theme] .btn {
  border-radius: var(--radius-sm); font-weight: 600; letter-spacing: -.01em;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
[data-theme] .btn:active { transform: scale(.985); }
[data-theme] .btn-primary, [data-theme] .btn-add-container {
  background: var(--brand-strong) !important; border: 1px solid var(--brand-strong) !important;
  color: #fff !important; box-shadow: var(--shadow-xs);
}
[data-theme] .btn-primary:hover, [data-theme] .btn-add-container:hover {
  background: var(--brand-700) !important; border-color: var(--brand-700) !important;
  transform: none !important; box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-add-container { color: #051018 !important; }
[data-theme] .btn-action:hover { transform: none !important; }
[data-theme] .btn-light {
  background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border-2) !important;
}
[data-theme] .btn-light:hover { background: var(--surface-3) !important; }
[data-theme] .btn-outline-secondary { color: var(--text-2) !important; border-color: var(--border-2) !important; background: transparent !important; }
[data-theme] .btn-outline-secondary:hover { background: var(--surface-3) !important; color: var(--text) !important; }
[data-theme] .btn-outline-primary { color: var(--brand-strong) !important; border-color: var(--brand-line) !important; background: transparent !important; }
[data-theme="dark"] .btn-outline-primary { color: var(--brand) !important; }
[data-theme] .btn-outline-primary:hover { background: var(--brand-soft) !important; }
[data-theme] .btn-success { background: var(--success) !important; border-color: var(--success) !important; color:#fff !important; }
[data-theme] .btn-danger  { background: var(--danger)  !important; border-color: var(--danger)  !important; color:#fff !important; }
[data-theme] .btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; color:#fff !important; }

/* ======================================================================
   FORMS
   ====================================================================== */
[data-theme] .form-control, [data-theme] .form-select, [data-theme] .filter-input, [data-theme] .input-group-text {
  background-color: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm);
  transition: border-color .16s ease, box-shadow .16s ease;
}
[data-theme] .form-control::placeholder { color: var(--text-faint) !important; }
[data-theme] .form-control:focus, [data-theme] .form-select:focus, [data-theme] .filter-input:focus {
  border-color: var(--brand) !important; box-shadow: var(--ring) !important; background-color: var(--surface) !important;
}
[data-theme] .input-group-text { background-color: var(--surface-2) !important; color: var(--text-muted) !important; }
[data-theme] .form-label, [data-theme] .filter-label { color: var(--text-2) !important; font-weight: 600; }
/* Single, non-tiling dropdown arrow (overrides page background shorthands) */
[data-theme] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364788f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.9rem center !important;
  background-size: 15px 12px !important;
  padding-right: 2.5rem !important;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238e9bb0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
[dir="rtl"] [data-theme] .form-select,
[data-theme] [dir="rtl"] .form-select { background-position: left 0.9rem center !important; padding-right: 1rem !important; padding-left: 2.5rem !important; }

/* ── Tom Select (searchable dropdowns): mirror .form-select in both themes ── */
[data-theme] .ts-control {
  background-color: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  min-height: 46px;
  padding: 0.5rem 0.9rem;
}
[data-theme] .ts-control .item { color: var(--text) !important; }
[data-theme] .ts-control input { color: var(--text) !important; }
[data-theme] .ts-control input::placeholder,
[data-theme] .ts-wrapper .ts-control > input::placeholder { color: var(--text-faint) !important; }
[data-theme] .ts-wrapper.focus .ts-control { border-color: var(--brand) !important; box-shadow: var(--ring) !important; }
[data-theme] .ts-wrapper.disabled .ts-control { background-color: var(--surface-2) !important; opacity: .7; }
[data-theme] .ts-dropdown {
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  margin-top: 4px;
}
[data-theme] .ts-dropdown .option { color: var(--text) !important; }
[data-theme] .ts-dropdown .option:hover,
[data-theme] .ts-dropdown .option.active { background: var(--surface-3) !important; color: var(--text) !important; }
[data-theme] .ts-dropdown .no-results,
[data-theme] .ts-dropdown .optgroup-header { color: var(--text-muted) !important; }
/* Sit flush inside a Bootstrap input-group (icon prefix on the leading edge) */
.input-group > .ts-wrapper { flex: 1 1 auto; width: 1%; }
.input-group > .ts-wrapper:not(:first-child) .ts-control { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
[dir="rtl"] .input-group > .ts-wrapper:not(:first-child) .ts-control {
  border-top-left-radius: var(--radius-sm) !important; border-bottom-left-radius: var(--radius-sm) !important;
  border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
}
[data-theme] .section-title { color: var(--text) !important; border-bottom-color: var(--border) !important; font-weight: 700; }
[data-theme] .content-title { color: var(--text) !important; }
[data-theme] .content-header { border-bottom-color: var(--border) !important; }

/* ======================================================================
   TEXT / TINT HELPERS
   ====================================================================== */
[data-theme="dark"] .text-dark, [data-theme="dark"] .text-body { color: var(--text) !important; }
[data-theme="dark"] .text-muted, [data-theme="dark"] .text-secondary { color: var(--text-muted) !important; }
[data-theme] .text-primary { color: var(--brand-strong) !important; }
[data-theme="dark"] .text-primary { color: var(--brand) !important; }
[data-theme] .text-success { color: var(--success) !important; }
[data-theme] .text-danger  { color: var(--danger)  !important; }
[data-theme] .text-warning { color: var(--warning) !important; }
[data-theme] .text-info    { color: var(--info)    !important; }
[data-theme] .text-secondary { color: var(--text-muted) !important; }

[data-theme] .bg-primary.bg-opacity-10 { background: var(--brand-soft) !important; }
[data-theme] .bg-success.bg-opacity-10 { background: var(--success-soft) !important; }
[data-theme] .bg-danger.bg-opacity-10  { background: var(--danger-soft) !important; }
[data-theme] .bg-warning.bg-opacity-10 { background: var(--warning-soft) !important; }
[data-theme] .bg-info.bg-opacity-10    { background: var(--info-soft) !important; }
[data-theme] .bg-secondary.bg-opacity-10 { background: var(--surface-3) !important; }
[data-theme="dark"] .bg-white { background: var(--surface) !important; }

/* ======================================================================
   ALERTS / DROPDOWNS / PAGINATION / MODALS
   ====================================================================== */
[data-theme] .alert { border-radius: var(--radius-sm); border: 1px solid transparent; }
[data-theme] .alert-success { background: var(--success-soft) !important; color: var(--success) !important; }
[data-theme] .alert-danger  { background: var(--danger-soft)  !important; color: var(--danger)  !important; }
[data-theme] .alert-warning { background: var(--warning-soft) !important; color: var(--warning) !important; }
[data-theme] .alert-info    { background: var(--info-soft)    !important; color: var(--info)    !important; }

[data-theme] .dropdown-menu {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-pop) !important; padding: .4rem;
}
[data-theme] .dropdown-item { color: var(--text-2) !important; border-radius: 8px; }
[data-theme] .dropdown-item:hover { background: var(--surface-3) !important; color: var(--text) !important; }
[data-theme] .dropdown-item.active { background: var(--brand-soft) !important; color: var(--brand-strong) !important; }
[data-theme] .dropdown-divider { border-color: var(--border) !important; }

[data-theme] .pagination { gap: .3rem; }
[data-theme] .page-link {
  border: 1px solid var(--border) !important; color: var(--text-2) !important;
  background: var(--surface) !important; border-radius: var(--radius-sm) !important;
  min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
[data-theme] .page-link:hover { background: var(--surface-3) !important; color: var(--text) !important; border-color: var(--border-2) !important; }
[data-theme] .page-item.active .page-link { background: var(--brand-strong) !important; border-color: var(--brand-strong) !important; color:#fff !important; }
[data-theme] .page-item.disabled .page-link { background: var(--surface-2) !important; color: var(--text-faint) !important; }

[data-theme] .modal-content { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--radius); }
[data-theme] .modal-header, [data-theme] .modal-footer { border-color: var(--border) !important; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

[data-theme] footer .text-muted { color: var(--text-faint) !important; }

/* Theme toggle icon visibility */
.theme-toggle .bi-sun-fill { display: none; }
[data-theme="dark"] .theme-toggle .bi-moon-stars-fill { display: none; }
[data-theme="dark"] .theme-toggle .bi-sun-fill { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  [data-theme] *, [data-theme] *::before, [data-theme] *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

/* ======================================================================
   LEGACY STAT-CARD SAFETY NET
   Many older views build KPI cards as `.card.bg-{color}.bg-gradient.text-white`
   (or `.text-dark`). The card rules above force every .card to the surface
   colour, which strips the coloured fill and leaves the white text + white
   icon-circles invisible (white-on-white) in light mode. Rather than rewrite
   every view, normalise those cards here so they read in BOTH themes:
   dark/ink text, muted labels, and a visible neutral icon chip.
   ====================================================================== */
[data-theme] .card.text-white,
[data-theme] .card.bg-gradient.text-dark {
  color: var(--text) !important;
}
[data-theme] .card.text-white h1, [data-theme] .card.text-white h2,
[data-theme] .card.text-white h3, [data-theme] .card.text-white h4,
[data-theme] .card.text-white h5, [data-theme] .card.text-white h6,
[data-theme] .card.bg-gradient.text-dark h5 {
  color: var(--text) !important;
}
/* Labels / sub-text inside those cards */
[data-theme] .card.text-white small,
[data-theme] .card.text-white .opacity-75,
[data-theme] .card.text-white .opacity-50,
[data-theme] .card.bg-gradient.text-dark small {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}
/* The white translucent icon circle becomes a visible neutral chip */
[data-theme] .card.text-white .bg-white.bg-opacity-25,
[data-theme] .card.text-white .bg-white.bg-opacity-50,
[data-theme] .card.bg-gradient.text-dark .bg-white.bg-opacity-25,
[data-theme] .card.bg-gradient.text-dark .bg-white.bg-opacity-50 {
  background: var(--brand-soft, rgba(37,99,235,.12)) !important;
  color: var(--brand-strong, #1e40af) !important;
}
[data-theme] .card.text-white .bg-white.bg-opacity-25 i,
[data-theme] .card.text-white .bg-white.bg-opacity-50 i,
[data-theme] .card.bg-gradient.text-dark .bg-white .bi {
  color: var(--brand-strong, #1e40af) !important;
}

/* ==========================================================================
   Soft badges — readable contrast
   --------------------------------------------------------------------------
   Bootstrap's `badge bg-X bg-opacity-10 text-X` puts a raw contextual colour
   on a 10%-tinted (near-white) background. For the bright hues that is close
   to unreadable: text-warning #ffc107 on white is ~1.6:1 and text-info #0dcaf0
   ~1.9:1, against the 4.5:1 WCAG AA needs for body text — and these badges are
   `.small`. On the payment-voucher list the voucher type, shop number and bill
   number were all effectively invisible.

   The palette above already defines accessible versions of the same hues
   (--warning #d97706, --info #0891b2). This maps the Bootstrap pattern onto
   them, so every screen using it becomes legible without touching 20 views.
   A hairline border is added because a 10% fill alone barely separates the
   chip from the row it sits in.
   ========================================================================== */

/* THE ACTUAL CAUSE of the unreadable chips: resources/css/app.css redefined
   Bootstrap's `.bg-opacity-10` as `opacity: .1`, fading the whole element —
   text included — to 10%. Bootstrap means BACKGROUND opacity only. The source
   rule is removed, but this override restores correct rendering even when the
   compiled Vite bundle has not been rebuilt yet, since theme.css loads after it. */
[data-theme] .bg-opacity-10,
[data-theme] .bg-opacity-25,
[data-theme] .bg-opacity-50,
[data-theme] .bg-opacity-75 {
  opacity: 1;
}

[data-theme] .badge.bg-opacity-10,
[data-theme] .badge.bg-opacity-25 {
  border: 1px solid transparent;
  font-weight: 600;
}

/* --badge-amber / --badge-cyan are DARKER than --warning / --info. Those
   tokens are tuned for icons and borders on white; on a tinted chip at
   `.small` they measure only 2.9:1 and 3.3:1, still short of AA. These
   measure 6.4:1 and 6.6:1. */
:root { --badge-amber: #92400e; --badge-cyan: #155e75; }
[data-theme="dark"] { --badge-amber: #fbbf24; --badge-cyan: #67e8f9; }

[data-theme] .badge.bg-warning.bg-opacity-10.text-warning,
[data-theme] .badge.bg-warning.bg-opacity-25.text-warning {
  background: var(--warning-soft) !important;
  color: var(--badge-amber) !important;
  border-color: color-mix(in srgb, var(--warning) 28%, transparent);
}

[data-theme] .badge.bg-info.bg-opacity-10.text-info,
[data-theme] .badge.bg-info.bg-opacity-25.text-info {
  background: var(--info-soft) !important;
  color: var(--badge-cyan) !important;
  border-color: color-mix(in srgb, var(--info) 28%, transparent);
}

[data-theme] .badge.bg-success.bg-opacity-10.text-success,
[data-theme] .badge.bg-success.bg-opacity-25.text-success {
  background: var(--success-soft) !important;
  color: var(--success) !important;
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
}

[data-theme] .badge.bg-danger.bg-opacity-10.text-danger,
[data-theme] .badge.bg-danger.bg-opacity-25.text-danger {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}

[data-theme] .badge.bg-primary.bg-opacity-10.text-primary,
[data-theme] .badge.bg-primary.bg-opacity-25.text-primary {
  background: var(--brand-soft) !important;
  color: var(--brand-strong) !important;
  border-color: var(--brand-line);
}
[data-theme="dark"] .badge.bg-primary.bg-opacity-10.text-primary,
[data-theme="dark"] .badge.bg-primary.bg-opacity-25.text-primary {
  color: var(--brand) !important;
}

/* `text-secondary` is Bootstrap's #6c757d — passable on white, poor on the
   tinted fill and worse in dark mode. Route it through the body text token. */
[data-theme] .badge.bg-secondary.bg-opacity-10.text-secondary,
[data-theme] .badge.bg-secondary.bg-opacity-25.text-secondary {
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
  border-color: var(--border-2);
}