/* =====================================================================
   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);

  --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;
}

[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;
  min-height: 100vh;
}
[data-theme] .sidebar-header {
  background: transparent !important;
  border-bottom: 1px solid var(--sidebar-border) !important;
  padding: 1.1rem 1rem !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 small { color: var(--text-muted) !important; }
[data-theme] .sidebar-header .bg-white { background: linear-gradient(135deg,var(--brand),var(--brand-700)) !important; }
[data-theme] .sidebar-header .bg-white i { color:#fff !important; }

[data-theme] .sidebar-custom .nav-section {
  color: var(--text-faint) !important;
  font-size: .67rem !important; letter-spacing: .09em !important;
  font-weight: 700 !important; padding: .5rem 1.1rem !important; margin-top: .9rem !important;
}
[data-theme] .sidebar-custom .nav-section::after { display: none !important; }
[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: 10px !important;
  padding: .6rem .75rem !important;
  margin-bottom: .12rem !important;
  font-size: .88rem !important; font-weight: 500 !important;
  transform: none !important;
  transition: background-color .16s ease, color .16s ease !important;
}
[data-theme] .sidebar-custom .nav-link::before { display: none !important; } /* kill gold bar */
[data-theme] .sidebar-custom .nav-link i {
  font-size: 1.05rem !important; width: 1.4rem !important; height: auto !important;
  margin-right: .7rem !important; opacity: 1 !important;
  color: var(--text-muted) !important; background: transparent !important;
  transform: none !important; padding: 0 !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.active {
  background: var(--brand-soft) !important;
  color: var(--brand-strong) !important;
  font-weight: 600 !important;
  border: none !important; box-shadow: none !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; }

[data-theme] .sidebar-footer {
  background: transparent !important;
  border-top: 1px solid var(--sidebar-border) !important;
}
[data-theme] .sidebar-user {
  background: var(--surface-3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important; box-shadow: none !important;
}
[data-theme] .sidebar-user-avatar {
  background: linear-gradient(135deg,var(--brand),var(--brand-700)) !important;
  border-radius: 10px !important; box-shadow: none !important;
}
[data-theme] .sidebar-user-name { color: var(--text) !important; }
[data-theme] .sidebar-user-role { color: var(--text-muted) !important; }
[data-theme] .sidebar-logout {
  background: var(--danger-soft) !important; color: var(--danger) !important;
  border: 1px solid transparent !important; border-radius: 10px !important;
}
[data-theme] .sidebar-logout:hover { filter: brightness(.97); 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; }
  .app-sidebar-collapsed .sidebar-custom .nav-section,
  .app-sidebar-collapsed .sidebar-custom .nav-link span,
  .app-sidebar-collapsed .sidebar-custom .nav-link,
  .app-sidebar-collapsed .sidebar-header .text-start,
  .app-sidebar-collapsed .sidebar-user-info,
  .app-sidebar-collapsed .sidebar-logout span { white-space: nowrap; }
  .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; }
  .app-sidebar-collapsed .sidebar-custom .nav-link i { margin-right: 0 !important; }
  .app-sidebar-collapsed .sidebar-header .text-start,
  .app-sidebar-collapsed .sidebar-user-info { display: none !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; }
[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;
}