/* ═══════════════════════════════════════════════════════════════════════════
   UDHARO — Heaven-Grade Design System v5.0
   Dopamine-inducing · Zero broken layouts · Perfect dark mode
   Mobile-first + Landscape-safe · Production ready
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   CORE TOKENS (override only what we need)
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --primary:         #5b5fcf;
  --primary-hover:   #4a4ec0;
  --primary-light:   rgba(91,95,207,.10);
  --primary-border:  rgba(91,95,207,.22);
  --grad-primary:    linear-gradient(135deg,#5b5fcf 0%,#7c3aed 100%);
  --grad-hero:       linear-gradient(160deg,#1a1060 0%,#2d1b6e 45%,#3d1477 100%);
  --shadow-card:     0 1px 4px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.07);
  --shadow-float:    0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  --r-card: 20px;
  --r-pill: 100px;
  --bnav-h: 72px;

  /* surface-2: chips, secondary cards — MUST be defined so fallback #f8fafc never fires */
  --surface-2:      #f1f5f9;

  /* HIGH-CONTRAST text for dark mode readiness */
  --text-primary:   #0f172a;
  --text-secondary: #374151;
  --text-muted:     #6b7280;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MIDNIGHT SLATE — softer, premium dark theme (Linear/Vercel-grade)
   Less harsh than near-black; higher contrast; forgiving for all text.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --surface-2:      #232b3a !important;
  --primary:         #818cf8;
  --primary-hover:   #6366f1;
  --primary-light:   rgba(129,140,248,.16);
  --primary-border:  rgba(129,140,248,.32);
  --grad-primary:    linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
  --grad-hero:       linear-gradient(160deg,#1e1b4b 0%,#312e81 50%,#3b0764 100%);

  /* High-contrast slate text (GitHub/Linear dark style) */
  --text-primary:   #e6edf3 !important;
  --text-secondary: #b6c2cf !important;
  --text-muted:     #8b97a5 !important;
  --text-faint:     #5b6573 !important;

  /* Soft slate surfaces — not pure black */
  --bg-page:    #0d1117 !important;
  --bg-surface: #161b26 !important;
  --bg-elevated:#1c2230 !important;
  --bg-glass:   rgba(22,27,38,.85) !important;
  --bg-overlay: rgba(0,0,0,.7) !important;
  --border:     rgba(255,255,255,.10) !important;
  --border-strong: rgba(255,255,255,.16) !important;

  --success:        #3fb950 !important;
  --danger:         #f85149 !important;
  --warning:        #d29922 !important;
  --info:           #58a6ff !important;
  --success-light:  rgba(63,185,80,.16) !important;
  --danger-light:   rgba(248,81,73,.15) !important;
  --warning-light:  rgba(210,153,34,.16) !important;
  --info-light:     rgba(88,166,255,.15) !important;

  --shadow-card:    0 1px 4px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.35);
  --shadow-float:   0 8px 28px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL BASE
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden;
  /* Prevent layout shift on rotate */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  overflow-x: hidden;
}

/* Fix all text colors in dark mode globally */
[data-theme="dark"] body,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] label {
  color: inherit;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .td-muted,
[data-theme="dark"] .kpi-label,
[data-theme="dark"] .customer-phone,
[data-theme="dark"] .txn-date,
[data-theme="dark"] .debtor-phone {
  color: var(--text-muted) !important;
}

/* Table header text always readable */
[data-theme="dark"] thead th {
  color: #94a3b8 !important;
  background: #162035 !important;
}

[data-theme="dark"] tbody td {
  color: #f1f5f9 !important;
}

[data-theme="dark"] tbody tr {
  border-color: rgba(255,255,255,.06) !important;
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .page-header-left h1,
[data-theme="dark"] .page-header-left p,
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-outline {
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.2) !important;
}
[data-theme="dark"] .btn-ghost {
  color: #94a3b8 !important;
}

/* Topbar dark */
[data-theme="dark"] .topbar {
  background: rgba(15,22,41,.95) !important;
  border-color: rgba(255,255,255,.07) !important;
}
[data-theme="dark"] .topbar-title { color: #f1f5f9 !important; }

/* Bottom nav dark */
[data-theme="dark"] .bottom-nav {
  background: rgba(10,15,28,.97) !important;
  border-color: rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .bnav-item { color: #64748b !important; }
[data-theme="dark"] .bnav-item.active { color: var(--primary) !important; }

/* Settings dark */
[data-theme="dark"] .settings-row-info h5 { color: #f1f5f9 !important; }
[data-theme="dark"] .settings-row-info p  { color: #94a3b8 !important; }
[data-theme="dark"] .settings-card h4     { color: #f1f5f9 !important; }

/* Inputs dark */
[data-theme="dark"] .input {
  color: #f1f5f9 !important;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
}
[data-theme="dark"] .input::placeholder { color: #475569 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   PAGE LAYOUT — mobile-first, landscape-safe
   ═══════════════════════════════════════════════════════════════════════════ */
.page {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-page);
  padding: 0 !important;
  /* Safe area for notches and bottom bars */
  padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom)) !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Non-dashboard content gets proper padding */
.page-content {
  padding: 20px 16px 8px;
}

@media (min-width: 600px)  { .page-content { padding: 24px 20px 8px; } }
@media (min-width: 768px)  { .page-content { padding: 28px 28px 8px; } }
@media (min-width: 1024px) { .page-content { padding: 32px 40px 8px; } }

/* Landscape on phones */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --bnav-h: 56px; }
  .bottom-nav { height: var(--bnav-h) !important; padding: 4px 8px !important; }
  .bnav-item span { display: none; }
  .bnav-item { font-size: 0 !important; padding: 4px !important; }
  .dash-hero { padding: 20px 20px 24px !important; }
  .dash-hero-balance { font-size: 28px !important; }
  .dash-hero-stats { grid-template-columns: repeat(4,1fr) !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM TOPBAR
   ═══════════════════════════════════════════════════════════════════════════ */
.topbar {
  height: 60px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--text-primary) !important;
}

.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad-primary); color: #fff;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(91,95,207,.35);
  cursor: pointer;
}

.icon-btn {
  width: 38px; height: 38px; border-radius: 12px;
  color: var(--text-secondary);
  transition: background 120ms, color 120ms;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--bg-elevated); }


/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM BOTTOM NAV
   ═══════════════════════════════════════════════════════════════════════════ */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--bnav-h) !important;
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--border) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  z-index: 40;
  padding: 0 4px !important;
  padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  justify-content: space-around;
  gap: 0 !important;
  align-items: flex-start;
  padding-top: 6px !important;
}

@media (max-width: 767px) { .bottom-nav { display: flex; } }

.bnav-item {
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 6px 4px 4px !important;
  border-radius: 0 !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: color 200ms ease !important;
  text-decoration: none;
  position: relative;
  min-height: 48px;
}

.bnav-item::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 50% !important;
  transform: translateX(-50%) scaleX(0) !important;
  width: 32px !important; height: 3px !important;
  background: var(--grad-primary) !important;
  border-radius: 0 0 6px 6px !important;
  transition: transform 250ms cubic-bezier(.34,1.56,.64,1) !important;
}

.bnav-item.active { color: var(--primary) !important; }
.bnav-item.active::before { transform: translateX(-50%) scaleX(1) !important; }
.bnav-item.active svg { transform: translateY(-1px) scale(1.08); }

.bnav-item svg { transition: transform 250ms cubic-bezier(.34,1.56,.64,1); flex-shrink: 0; }
.bnav-item:active { transform: scale(.9); }
.bnav-item span { line-height: 1; }


/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD HERO — Dopamine-level gradient
   ═══════════════════════════════════════════════════════════════════════════ */
.dash-hero {
  position: relative;
  background: var(--grad-hero);
  padding: 28px 20px 36px;
  overflow: hidden;
  color: #fff;
  flex-shrink: 0;
}

/* Ambient glows */
.dash-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 85% -10%, rgba(160,100,255,.38) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 5% 110%, rgba(80,50,200,.22) 0%, transparent 60%);
  pointer-events: none;
}

/* Decorative ring */
.dash-hero::after {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 260px; height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
}

.dash-hero-inner { position: relative; z-index: 1; }

.dash-hero-greeting {
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.80);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 3px;
}

.dash-hero-name {
  font-size: 22px; font-weight: 800;
  color: #fff;
  margin-bottom: 28px; line-height: 1.2;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 8px rgba(0,0,0,.2);
}

.dash-hero-balance-label {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.75);
  text-transform: uppercase; letter-spacing: 0.10em;
  margin-bottom: 8px;
}

.dash-hero-balance {
  font-size: 40px; font-weight: 900;
  color: #fff; line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 16px rgba(0,0,0,.25);
}

.dash-hero-balance-sub {
  font-size: 12px; color: rgba(255,255,255,.70);
  margin-bottom: 24px;
}

/* 2-col stats grid */
.dash-hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dash-hero-stat {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 14px 14px 12px;
  backdrop-filter: blur(6px);
  transition: background 150ms;
}
.dash-hero-stat:active { background: rgba(255,255,255,.14); }

.dash-hero-stat-label {
  font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,.72);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.dash-hero-stat-value {
  font-size: 20px; font-weight: 800;
  color: #fff; line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.dash-hero-stat-value.positive { color: #6ee7b7; }
.dash-hero-stat-value.negative { color: #fca5a5; }
.dash-hero-stat-value.warning  { color: #fcd34d; }

.dash-hero-stat-change {
  font-size: 10px; color: rgba(255,255,255,.4);
  margin-top: 3px;
}

/* Action buttons below hero */
.dash-hero-actions {
  display: flex; gap: 10px;
  margin-top: 22px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.dash-hero-actions::-webkit-scrollbar { display: none; }

.dash-hero-action {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 7px;
}

.dash-hero-action-btn {
  width: 52px; height: 52px;
  border-radius: 18px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 200ms cubic-bezier(.34,1.56,.64,1);
  backdrop-filter: blur(4px);
  flex-shrink: 0;
}
.dash-hero-action-btn:active { transform: scale(.88); background: rgba(255,255,255,.22); }
.dash-hero-action-btn:hover  { background: rgba(255,255,255,.20); transform: translateY(-2px); }

.dash-hero-action-label {
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,.80);
  white-space: nowrap;
}

/* Responsive hero */
@media (min-width: 600px) {
  .dash-hero { padding: 32px 28px 40px; }
  .dash-hero-balance { font-size: 44px; }
  .dash-hero-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px) {
  .dash-hero { padding: 40px 40px 44px; }
  .dash-hero-balance { font-size: 52px; }
  .dash-hero-name { font-size: 26px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD SECTION WRAPPER
   ═══════════════════════════════════════════════════════════════════════════ */
.dash-section { padding: 20px 16px 0; }
@media (min-width: 600px)  { .dash-section { padding: 24px 20px 0; } }
@media (min-width: 768px)  { .dash-section { padding: 28px 28px 0; } }
@media (min-width: 1024px) { .dash-section { padding: 32px 40px 0; } }


/* ═══════════════════════════════════════════════════════════════════════════
   KPI CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (min-width: 768px)  { .kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (max-width: 350px)  { .kpi-grid { gap: 8px; } }

.kpi-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  padding: 16px 14px 14px !important;
  box-shadow: var(--shadow-card) !important;
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease !important;
  cursor: default;
}

.kpi-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 18px 18px 0 0;
  opacity: 0;
  transition: opacity 200ms;
}
.kpi-card.indigo::before { background: linear-gradient(90deg, #5b5fcf, #7c3aed); }
.kpi-card.green::before  { background: linear-gradient(90deg, #10b981, #059669); }
.kpi-card.red::before    { background: linear-gradient(90deg, #ef4444, #dc2626); }
.kpi-card.amber::before  { background: linear-gradient(90deg, #f59e0b, #d97706); }
.kpi-card::after { display: none !important; }

.kpi-card:hover { transform: translateY(-3px) !important; box-shadow: var(--shadow-float) !important; }
.kpi-card:hover::before { opacity: 1; }

.kpi-top {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 12px;
}

.kpi-icon {
  width: 38px !important; height: 38px !important;
  border-radius: 12px !important;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.kpi-label {
  font-size: 10px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted) !important;
}

.kpi-value {
  font-size: 22px !important; font-weight: 900 !important;
  color: var(--text-primary) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em;
  margin-top: 4px !important;
  font-variant-numeric: tabular-nums;
}

.kpi-value span {
  font-size: 11px !important; font-weight: 500 !important;
  color: var(--text-muted) !important;
}

.kpi-change {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 10px !important; font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 100px !important; margin-top: 6px !important;
}

/* Dark mode KPI */
[data-theme="dark"] .kpi-card { background: var(--bg-surface) !important; }
[data-theme="dark"] .kpi-value { color: #f1f5f9 !important; }
[data-theme="dark"] .kpi-label { color: #94a3b8 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   CARDS (generic)
   ═══════════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
}

.card-header { padding: 18px 18px 0 !important; }
.card-body   { padding: 14px 18px 18px !important; }
.card-footer { padding: 12px 18px 14px !important; border-top: 1px solid var(--border); }

.card-title {
  font-size: 14px !important; font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em;
}

[data-theme="dark"] .card { background: var(--bg-surface) !important; border-color: var(--border) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   TRANSACTION ROWS
   ═══════════════════════════════════════════════════════════════════════════ */
.txn-list { gap: 0 !important; }
.txn-row  {
  padding: 12px 18px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--border);
  transition: background 120ms !important;
  cursor: pointer;
}
.txn-row:last-child { border-bottom: none; }
.txn-row:hover      { background: var(--bg-elevated) !important; }

.txn-icon {
  width: 38px !important; height: 38px !important;
  border-radius: 12px !important; font-size: 0 !important;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.txn-icon.credit  { background: var(--danger-light)  !important; color: var(--danger)  !important; }
.txn-icon.payment { background: var(--success-light) !important; color: var(--success) !important; }
.txn-icon::after  { font-size: 16px; font-weight: 800; line-height: 1; }
.txn-icon.credit::after  { content: '↑'; color: var(--danger); }
.txn-icon.payment::after { content: '↓'; color: var(--success); }

.txn-name   { font-size: 14px !important; font-weight: 600 !important; color: var(--text-primary) !important; }
.txn-date   { font-size: 11px !important; color: var(--text-muted) !important; margin-top: 1px !important; }
.txn-amount { font-size: 14px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; }
.txn-amount.credit  { color: var(--danger)  !important; }
.txn-amount.payment { color: var(--success) !important; }

[data-theme="dark"] .txn-name { color: #f1f5f9 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   CUSTOMER CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.customer-grid { gap: 10px !important; }

.customer-card {
  padding: 16px !important;
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-card) !important;
  background: var(--bg-surface) !important;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms !important;
  gap: 14px !important;
  cursor: pointer;
}

.customer-card:hover  { transform: translateY(-2px) !important; box-shadow: var(--shadow-float) !important; border-color: var(--primary-border) !important; }
.customer-card:active { transform: scale(.98) !important; }

.customer-avatar {
  width: 44px !important; height: 44px !important;
  border-radius: 15px !important;
  font-size: 16px !important; font-weight: 800 !important;
}

.customer-name  { font-size: 14px !important; font-weight: 700 !important; color: var(--text-primary) !important; }
.customer-phone { font-size: 12px !important; color: var(--text-muted) !important; margin-top: 2px !important; }
.customer-bal   { font-size: 15px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; }
.customer-bal-label { font-size: 11px !important; color: var(--text-muted) !important; }

[data-theme="dark"] .customer-name { color: #f1f5f9 !important; }
[data-theme="dark"] .customer-card { background: var(--bg-surface) !important; border-color: var(--border) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   UDHARO PAGE — Premium card layout (NO tables on mobile)
   ═══════════════════════════════════════════════════════════════════════════ */
.udharo-card-list {
  display: flex; flex-direction: column; gap: 10px;
}

.udharo-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
}

/* Danger accent left border */
.udharo-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--danger);
  border-radius: 18px 0 0 18px;
}

.udharo-card:hover  { transform: translateY(-2px); box-shadow: var(--shadow-float); border-color: rgba(239,68,68,.3); }
.udharo-card:active { transform: scale(.98); }

.udharo-card-avatar {
  width: 46px; height: 46px; border-radius: 15px;
  font-size: 16px; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.udharo-card-info { flex: 1; min-width: 0; }

.udharo-card-name {
  font-size: 15px; font-weight: 700;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.udharo-card-sub {
  font-size: 12px; color: var(--text-muted);
  margin-top: 2px;
}

.udharo-card-right { text-align: right; flex-shrink: 0; }

.udharo-card-amount {
  font-size: 18px; font-weight: 900;
  color: var(--danger);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.udharo-card-sub-amount {
  font-size: 11px; color: var(--text-muted);
  margin-top: 2px;
}

.udharo-card-btn {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--success-light);
  color: var(--success);
  border: 1px solid rgba(16,185,129,.25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 150ms;
  flex-shrink: 0;
  font-weight: 800; font-size: 14px;
}
.udharo-card-btn:hover { background: var(--success); color: #fff; transform: scale(1.1); }

[data-theme="dark"] .udharo-card { background: var(--bg-surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .udharo-card-name { color: #f1f5f9 !important; }
[data-theme="dark"] .udharo-card-sub  { color: #94a3b8 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   UDHARO HEADER BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.udharo-header-bar {
  border-radius: 18px !important;
  padding: 20px !important;
  border: 1px solid rgba(239,68,68,.2) !important;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(239,68,68,.07) 0%, rgba(220,38,38,.03) 100%) !important;
}

.udharo-total-label {
  font-size: 10px !important; font-weight: 700 !important;
  color: var(--danger) !important; text-transform: uppercase; letter-spacing: 0.08em;
}

.udharo-total-val {
  font-size: 32px !important; font-weight: 900 !important;
  color: var(--danger) !important; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}

/* SMS/WA usage pills */
.udharo-msg-pills {
  display: flex; gap: 10px;
  margin-bottom: 16px; flex-wrap: wrap;
}

.udharo-msg-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  flex: 1; min-width: 140px;
  border: 1px solid;
  font-size: 12px; font-weight: 600;
}

.udharo-msg-pill.sms {
  background: var(--primary-light);
  border-color: var(--primary-border);
  color: var(--primary);
}

.udharo-msg-pill.wa {
  background: rgba(37,211,102,.09);
  border-color: rgba(37,211,102,.25);
  color: #128C7E;
}
[data-theme="dark"] .udharo-msg-pill.wa { color: #25D366 !important; }

.udharo-msg-pill-count {
  font-size: 18px; font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.udharo-msg-pill-bar {
  flex: 1; height: 4px;
  background: rgba(255,255,255,.2);
  border-radius: 100px; overflow: hidden;
}

.udharo-msg-pill-fill {
  height: 100%; border-radius: 100px;
  transition: width .5s ease;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HEADER (all pages)
   ═══════════════════════════════════════════════════════════════════════════ */
.page-header {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}

.page-header-left h1 {
  font-size: 22px !important; font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
}

.page-header-left p {
  font-size: 13px !important; color: var(--text-muted) !important;
  margin-top: 3px !important;
}

@media (min-width: 768px) { .page-header-left h1 { font-size: 26px !important; } }

.page-header-right { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

[data-theme="dark"] .page-header-left h1 { color: #f1f5f9 !important; }
[data-theme="dark"] .page-header-left p  { color: #94a3b8 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.btn {
  border-radius: 14px !important; font-size: 14px !important;
  font-weight: 600 !important; letter-spacing: -0.01em;
  min-height: 46px !important;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; white-space: nowrap;
  transition: all 150ms ease; cursor: pointer;
}

.btn-primary {
  background: var(--grad-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 14px rgba(91,95,207,.38) !important;
  border: none !important;
}
.btn-primary:hover  { filter: brightness(1.08) !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(91,95,207,.5) !important; }
.btn-primary:active { transform: scale(.97) !important; filter: brightness(.97) !important; }

.btn-success {
  background: linear-gradient(135deg,#10b981,#059669) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 2px 10px rgba(16,185,129,.3) !important;
}
.btn-success:hover { filter: brightness(1.06) !important; transform: translateY(-1px) !important; }

.btn-outline {
  border: 1.5px solid var(--border-strong) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
}
.btn-outline:hover { border-color: var(--primary) !important; color: var(--primary) !important; background: var(--primary-light) !important; }

.btn-ghost { background: transparent !important; color: var(--text-muted) !important; padding: 9px 14px; min-height: 38px !important; }
.btn-ghost:hover { background: var(--bg-elevated) !important; color: var(--text-primary) !important; }

.btn-sm { min-height: 36px !important; padding: 7px 14px !important; font-size: 12.5px !important; border-radius: 10px !important; }
.btn-lg { min-height: 54px !important; padding: 14px 28px !important; font-size: 16px !important; border-radius: 16px !important; }
.btn-block { width: 100% !important; justify-content: center !important; }

.btn:active { transform: scale(.97); }


/* ═══════════════════════════════════════════════════════════════════════════
   FORM INPUTS
   ═══════════════════════════════════════════════════════════════════════════ */
.input {
  border-radius: 14px !important; padding: 13px 16px !important;
  font-size: 15px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  min-height: 48px !important;
  transition: border-color 150ms, box-shadow 150ms !important;
  width: 100%;
}
.input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3.5px var(--primary-light) !important; outline: none; }
.input::placeholder { color: var(--text-faint) !important; }

.form-label {
  font-size: 11.5px !important; font-weight: 700 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 6px; display: block;
}

.search-wrap { position: relative; }
.search-wrap .input { padding-left: 40px !important; }
.search-wrap svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }

.input-group .input { padding-left: 44px !important; }
.input-group .input-prefix { position: absolute; left: 14px; color: var(--text-muted); font-size: 14px; font-weight: 600; pointer-events: none; top: 50%; transform: translateY(-50%); }


/* ═══════════════════════════════════════════════════════════════════════════
   MODALS — Bottom sheet on mobile
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 !important;
  animation: fadeIn 200ms ease both;
}

@media (min-width: 500px) {
  .modal-backdrop { align-items: center; padding: 20px !important; }
  .modal-box { border-radius: 20px !important; }
}

.modal-box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 24px 24px 0 0 !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,.20) !important;
  width: 100%; max-width: 500px;
  max-height: 92vh;
  overflow: hidden; display: flex; flex-direction: column;
  animation: modalUp 280ms cubic-bezier(.22,1,.36,1) both;
  position: relative;
}

/* Drag handle */
.modal-header::before {
  content: '';
  display: block;
  width: 38px; height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
}

.modal-header {
  padding: 26px 20px 14px !important;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  position: relative; flex-shrink: 0;
}

.modal-header h3 { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.01em; color: var(--text-primary) !important; }
.modal-body  { padding: 20px !important; overflow-y: auto; display: flex; flex-direction: column; gap: 16px !important; }
.modal-footer { padding: 14px 20px 20px !important; border-top: 1px solid var(--border); display: flex; gap: 10px !important; flex-shrink: 0; }

[data-theme="dark"] .modal-box { background: #0f1629 !important; border-color: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .modal-header h3 { color: #f1f5f9 !important; }

@keyframes modalUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }


/* ═══════════════════════════════════════════════════════════════════════════
   TOASTS
   ═══════════════════════════════════════════════════════════════════════════ */
#toasts { position: fixed; top: 16px; right: 16px; z-index: 999; display: flex; flex-direction: column; gap: 8px; max-width: 300px; width: calc(100vw - 32px); }
.toast {
  border-radius: 14px !important; padding: 14px 16px !important;
  font-size: 13.5px !important; font-weight: 500 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.20) !important;
  gap: 10px !important; display: flex; align-items: center;
  animation: toastIn 300ms cubic-bezier(.34,1.56,.64,1) both !important;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(24px) scale(.96); } to { opacity: 1; transform: translateX(0) scale(1); } }


/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON LOADERS
   ═══════════════════════════════════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--border) 37%, var(--bg-elevated) 63%) !important;
  background-size: 500px 100% !important;
  animation: shimmer 1.8s ease infinite !important;
  border-radius: 10px !important;
}
@keyframes shimmer { 0% { background-position: -500px 0; } 100% { background-position: 500px 0; } }


/* ═══════════════════════════════════════════════════════════════════════════
   SALES — Summary chips
   ═══════════════════════════════════════════════════════════════════════════ */
.sales-summary-bar {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 18px;
}

.summary-chip {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  padding: 16px 14px !important;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.summary-chip .val {
  font-size: 18px !important; font-weight: 900 !important;
  line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.summary-chip .lbl {
  font-size: 9px !important; font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase; letter-spacing: 0.07em; margin-top: 5px;
}
.summary-chip.green .val { color: var(--success) !important; }
.summary-chip.red   .val { color: var(--danger) !important; }
.summary-chip.amber .val { color: var(--warning) !important; }

@media (max-width: 400px) { .sales-summary-bar { grid-template-columns: 1fr !important; } }

[data-theme="dark"] .summary-chip .val { color: inherit; }
[data-theme="dark"] .summary-chip { background: var(--bg-surface) !important; border-color: var(--border) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   TABLE — desktop only, proper dark mode
   ═══════════════════════════════════════════════════════════════════════════ */
.table-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  -webkit-overflow-scrolling: touch;
}

table { width: 100%; border-collapse: collapse; background: var(--bg-surface); }
thead tr { border-bottom: 1px solid var(--border); background: var(--bg-elevated); }
thead th {
  padding: 12px 14px; text-align: left;
  font-size: 10.5px; font-weight: 700;
  color: var(--text-muted) !important;
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}
tbody tr  { border-bottom: 1px solid var(--border); transition: background 120ms; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg-elevated) !important; cursor: pointer; }
tbody td  { padding: 14px 14px; font-size: 13.5px; color: var(--text-primary) !important; vertical-align: middle; }
.td-name  { font-weight: 700 !important; color: var(--text-primary) !important; }
.td-muted { color: var(--text-muted) !important; font-size: 11.5px !important; }

/* Hide extra columns on mobile for Sales table */
@media (max-width: 600px) {
  .hide-mobile { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ANALYTICS — Premium charts
   ═══════════════════════════════════════════════════════════════════════════ */
.analytics-grid { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 768px) { .analytics-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 18px; } }

.chart-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
}

.chart-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 14px !important;
  border-bottom: 1px solid var(--border);
}

.chart-title { font-size: 14px !important; font-weight: 700 !important; color: var(--text-primary) !important; letter-spacing: -0.01em; }
.chart-sub   { font-size: 11px !important; color: var(--text-muted) !important; margin-top: 2px; }
.chart-body  { padding: 14px 14px 18px !important; }
.chart-body svg { display: block; width: 100%; height: auto; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); font-weight: 500; }
.legend-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

[data-theme="dark"] .chart-card   { background: var(--bg-surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .chart-title  { color: #f1f5f9 !important; }
[data-theme="dark"] .legend-item  { color: #94a3b8 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   ANALYTICS STAT ROW (shown even on free plan — basic summary)
   ═══════════════════════════════════════════════════════════════════════════ */
.analytics-stats-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 16px;
}
@media (min-width: 600px) { .analytics-stats-row { grid-template-columns: repeat(4, 1fr); } }

.analytics-stat-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 14px;
  box-shadow: var(--shadow-card);
}

.analytics-stat-chip .label {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px;
}

.analytics-stat-chip .value {
  font-size: 22px; font-weight: 900;
  color: var(--text-primary); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.analytics-stat-chip .change {
  font-size: 11px; font-weight: 600; margin-top: 4px;
  display: flex; align-items: center; gap: 3px;
}
.analytics-stat-chip .change.up   { color: var(--success); }
.analytics-stat-chip .change.down { color: var(--danger); }

[data-theme="dark"] .analytics-stat-chip { background: var(--bg-surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .analytics-stat-chip .value { color: #f1f5f9 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS
   ═══════════════════════════════════════════════════════════════════════════ */
.settings-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  padding: 20px !important;
  box-shadow: var(--shadow-card);
}

.settings-card h4 {
  font-size: 14px !important; font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--border);
}

.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 !important; border-bottom: 1px solid var(--border); gap: 12px;
}
.settings-row:last-child { border-bottom: none; padding-bottom: 0 !important; }
.settings-row-info h5 { font-size: 14px !important; font-weight: 600 !important; color: var(--text-primary) !important; }
.settings-row-info p  { font-size: 12px !important; color: var(--text-muted) !important; margin-top: 2px !important; }

/* Toggle */
.toggle { width: 48px !important; height: 28px !important; border-radius: 100px !important; flex-shrink: 0; }
.toggle::after { width: 22px !important; height: 22px !important; top: 3px !important; left: 3px !important; }
.toggle.on::after { transform: translateX(20px) !important; }

[data-theme="dark"] .settings-card { background: var(--bg-surface) !important; border-color: var(--border) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR — Desktop
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar { background: var(--bg-surface) !important; border-color: var(--border) !important; }
.brand-name { font-size: 16px !important; font-weight: 800 !important; letter-spacing: -0.02em; color: var(--text-primary) !important; }
.brand-sub  { color: var(--text-muted) !important; }

.nav-link {
  padding: 10px 12px !important; border-radius: 12px !important;
  font-size: 13.5px !important; font-weight: 500 !important;
  color: var(--text-secondary) !important;
}
.nav-link:hover { color: var(--text-primary) !important; }
.nav-link.active { font-weight: 600 !important; color: var(--primary) !important; }

[data-theme="dark"] .sidebar    { background: #0d1223 !important; border-color: rgba(255,255,255,.07) !important; }
[data-theme="dark"] .brand-name { color: #f1f5f9 !important; }
[data-theme="dark"] .nav-link   { color: #64748b !important; }
[data-theme="dark"] .nav-link:hover  { color: #f1f5f9 !important; background: rgba(255,255,255,.05) !important; }
[data-theme="dark"] .nav-link.active { color: var(--primary) !important; background: var(--primary-light) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════════════════ */
.badge {
  border-radius: 8px !important; padding: 3px 9px !important;
  font-size: 11px !important; font-weight: 600 !important;
}
.badge::before { display: none !important; }

.badge-green  { background: var(--success-light) !important; color: var(--success) !important; }
.badge-red    { background: var(--danger-light)  !important; color: var(--danger)  !important; }
.badge-amber  { background: var(--warning-light) !important; color: var(--warning) !important; }
.badge-indigo { background: var(--primary-light) !important; color: var(--primary) !important; }
.badge-gray   { background: var(--bg-elevated)   !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; }
.badge-muted  { background: var(--bg-elevated)   !important; color: var(--text-muted) !important; }

[data-theme="dark"] .badge-green  { color: #34d399 !important; }
[data-theme="dark"] .badge-red    { color: #f87171 !important; }
[data-theme="dark"] .badge-amber  { color: #fbbf24 !important; }
[data-theme="dark"] .badge-gray   { color: #94a3b8 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════════════════════ */
.empty { padding: 56px 24px !important; gap: 12px !important; }
.empty-icon {
  width: 64px !important; height: 64px !important; border-radius: 22px !important;
  background: var(--primary-light) !important;
  border: 1px solid var(--primary-border) !important;
  color: var(--primary) !important;
}
.empty h3 { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.01em; color: var(--text-primary) !important; }
.empty p  { font-size: 14px !important; color: var(--text-muted) !important; max-width: 260px !important; }

[data-theme="dark"] .empty h3 { color: #f1f5f9 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   BILLING PLANS
   ═══════════════════════════════════════════════════════════════════════════ */
.plan-card { border-radius: 22px !important; }
.plan-price { font-size: 28px !important; font-weight: 900 !important; letter-spacing: -0.03em; }

.billing-ch-btn { font-size: 13px !important; min-height: 40px !important; }
.billing-ch-btn.active { background: var(--bg-surface) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-card) !important; }
[data-theme="dark"] .billing-ch-btn.active { background: var(--bg-elevated) !important; color: #f1f5f9 !important; }

.billing-hero h2 { color: var(--text-primary) !important; }
[data-theme="dark"] .billing-hero h2 { color: #f1f5f9 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   UPGRADE LOCK
   ═══════════════════════════════════════════════════════════════════════════ */
.upgrade-lock { border-radius: 22px !important; }
.upgrade-lock h3 { color: var(--text-primary) !important; }
.upgrade-lock p  { color: var(--text-muted) !important; }
[data-theme="dark"] .upgrade-lock h3 { color: #f1f5f9 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   DASH GRID
   ═══════════════════════════════════════════════════════════════════════════ */
.dash-grid { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) { .dash-grid { display: grid !important; grid-template-columns: 1fr 300px; gap: 20px; } }
@media (min-width: 1100px){ .dash-grid { grid-template-columns: 1fr 340px !important; } }
.dash-main { display: flex; flex-direction: column; gap: 14px; }

/* Top debtors */
.debtor-row { padding: 12px 18px !important; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 120ms; }
.debtor-row:last-child { border-bottom: none; }
.debtor-row:hover { background: var(--bg-elevated) !important; }
.debtor-avatar { width: 36px !important; height: 36px !important; border-radius: 12px !important; font-size: 12px !important; font-weight: 800 !important; }
.debtor-name { font-size: 13.5px !important; font-weight: 600 !important; color: var(--text-primary) !important; }
.debtor-phone { font-size: 11px !important; color: var(--text-muted) !important; }
.debtor-bal   { font-size: 14px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; }

[data-theme="dark"] .debtor-name { color: #f1f5f9 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   WELCOME ANIMATION
   ═══════════════════════════════════════════════════════════════════════════ */
.page > * { animation: pageIn 350ms cubic-bezier(.22,1,.36,1) both; }
.page > *:nth-child(1) { animation-delay: 0ms; }
.page > *:nth-child(2) { animation-delay: 60ms; }
.page > *:nth-child(3) { animation-delay: 110ms; }
.page > *:nth-child(4) { animation-delay: 150ms; }

.dash-hero { animation: heroSlide 450ms cubic-bezier(.22,1,.36,1) both; }
.dash-hero-stat { animation: statPop 400ms cubic-bezier(.34,1.56,.64,1) both; }
.dash-hero-stat:nth-child(1) { animation-delay: 150ms; }
.dash-hero-stat:nth-child(2) { animation-delay: 200ms; }
.dash-hero-stat:nth-child(3) { animation-delay: 250ms; }
.dash-hero-stat:nth-child(4) { animation-delay: 300ms; }
.dash-hero-action { animation: actionPop 400ms cubic-bezier(.34,1.56,.64,1) both; }
.dash-hero-action:nth-child(1) { animation-delay: 200ms; }
.dash-hero-action:nth-child(2) { animation-delay: 240ms; }
.dash-hero-action:nth-child(3) { animation-delay: 280ms; }
.dash-hero-action:nth-child(4) { animation-delay: 320ms; }
.dash-hero-action:nth-child(5) { animation-delay: 360ms; }
.kpi-card { animation: cardFloat 400ms cubic-bezier(.34,1.56,.64,1) both; }
.kpi-card:nth-child(1) { animation-delay: 100ms; }
.kpi-card:nth-child(2) { animation-delay: 140ms; }
.kpi-card:nth-child(3) { animation-delay: 180ms; }
.kpi-card:nth-child(4) { animation-delay: 220ms; }

@keyframes heroSlide { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pageIn    { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes statPop   { from { opacity: 0; transform: scale(.85) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes actionPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes cardFloat { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  50%      { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FOCUS & INTERACTION
   ═══════════════════════════════════════════════════════════════════════════ */
:focus-visible { outline: 2.5px solid var(--primary) !important; outline-offset: 3px !important; border-radius: 6px !important; }
button:focus:not(:focus-visible) { outline: none; }
::selection { background: rgba(91,95,207,.15) !important; color: var(--primary) !important; }
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 100px; }

/* Pinch-zoom friendly */
@media (pointer: coarse) {
  .btn, .bnav-item, button, a { -webkit-tap-highlight-color: transparent; }
}

/* Small screen adjustments */
@media (max-width: 360px) {
  .dash-hero-balance { font-size: 32px !important; }
  .dash-hero-stat-value { font-size: 16px !important; }
  .kpi-value { font-size: 18px !important; }
  .dash-hero-name { font-size: 18px !important; }
}

/* LARGE screens — sidebar visible, no bottom nav padding */
@media (min-width: 768px) {
  .page { padding-bottom: 0 !important; }
  .bottom-nav { display: none !important; }
  .sidebar { position: relative; transform: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE NUCLEAR FIX — covers every hardcoded light-color element
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SMS / WA banners ────────────────────────────────────────────────────── */
[data-theme="dark"] .sms-banner {
  background: var(--bg-surface) !important;
  border-color: rgba(255,255,255,.10) !important;
}
[data-theme="dark"] .sms-banner.success { background: rgba(52,211,153,.08) !important; border-color: rgba(52,211,153,.20) !important; }
[data-theme="dark"] .sms-banner.warning { background: rgba(251,191,36,.08) !important; border-color: rgba(251,191,36,.20) !important; }
[data-theme="dark"] .sms-banner.danger  { background: rgba(248,113,113,.08) !important; border-color: rgba(248,113,113,.22) !important; }
[data-theme="dark"] .sms-banner.no-plan { background: var(--bg-elevated) !important; border-color: rgba(255,255,255,.08) !important; border-style: dashed !important; }
[data-theme="dark"] .sms-banner-title   { color: #e2e8f0 !important; }
[data-theme="dark"] .sms-banner-sub     { color: #94a3b8 !important; }
[data-theme="dark"] .sms-pct           { color: #94a3b8 !important; }
[data-theme="dark"] .sms-progress-bar  { background: rgba(255,255,255,.10) !important; }

/* ── KPI sparklines: force SVG polyline stroke to be visible ──────────────── */
[data-theme="dark"] .kpi-sparkline polyline,
[data-theme="dark"] .kpi-sparkline path { opacity: 0.85; }

/* ── KPI card color classes ───────────────────────────────────────────────── */
[data-theme="dark"] .kpi-card.indigo { background: #111827 !important; }
[data-theme="dark"] .kpi-card.green  { background: #0d1f16 !important; }
[data-theme="dark"] .kpi-card.red    { background: #1f0d0d !important; }
[data-theme="dark"] .kpi-card.amber  { background: #1a150a !important; }

/* ── Customer detail drawer inline stat chips (var(--surface-2,#f8fafc)) ── */
[data-theme="dark"] [style*="--surface-2"],
[data-theme="dark"] [style*="#f8fafc"],
[data-theme="dark"] [style*="f8fafc"] {
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
}

/* Force ALL inline background #f8fafc/f1f5f9 to dark in dark mode */
[data-theme="dark"] .drawer-body [style*="background"],
[data-theme="dark"] .modal-body [style*="background:#f"] {
  background: var(--bg-elevated) !important;
}

/* ── Analytics stat blocks ────────────────────────────────────────────────── */
[data-theme="dark"] .analytics-stat-chip { background: var(--bg-surface) !important; }
[data-theme="dark"] .analytics-stat-chip .label { color: #94a3b8 !important; }
[data-theme="dark"] .analytics-stat-chip .value { color: #f1f5f9 !important; }
[data-theme="dark"] .analytics-stat-chip .change { }

/* ── Chart SVG text labels ────────────────────────────────────────────────── */
[data-theme="dark"] .chart-body text,
[data-theme="dark"] .chart-body tspan { fill: #94a3b8 !important; }
[data-theme="dark"] .chart-body line,
[data-theme="dark"] .chart-body .grid-line { stroke: rgba(255,255,255,.06) !important; }

/* ── Page header ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .page-header-left h1 { color: #f1f5f9 !important; }
[data-theme="dark"] .page-header-left p  { color: #94a3b8 !important; }

/* ── Upgrade lock / nudge ─────────────────────────────────────────────────── */
[data-theme="dark"] .upgrade-lock  { background: #0f1629 !important; border-color: var(--primary-border) !important; }
[data-theme="dark"] .upgrade-nudge { background: rgba(15,22,41,.96) !important; border-color: var(--primary-border) !important; }
[data-theme="dark"] .upgrade-nudge-text strong { color: #f1f5f9 !important; }
[data-theme="dark"] .upgrade-nudge-text p { color: #94a3b8 !important; }

/* ── Free plan limit bar ──────────────────────────────────────────────────── */
[data-theme="dark"] .free-limit-bar { background: rgba(251,191,36,.08) !important; border-color: rgba(251,191,36,.20) !important; }
[data-theme="dark"] .free-limit-bar.danger { background: rgba(248,113,113,.08) !important; border-color: rgba(248,113,113,.22) !important; }
[data-theme="dark"] .free-limit-text { color: #cbd5e1 !important; }

/* ── Billing page ─────────────────────────────────────────────────────────── */
[data-theme="dark"] .billing-toggle { background: var(--bg-elevated) !important; border-color: var(--border) !important; }
[data-theme="dark"] .billing-ch-note { color: #94a3b8 !important; }
[data-theme="dark"] .active-sub-card { background: var(--bg-surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .asc-title { /* color set inline via --ac */ }
[data-theme="dark"] .asc-exp   { color: #94a3b8 !important; }
[data-theme="dark"] .asc-unit  { color: #94a3b8 !important; }
[data-theme="dark"] .asc-bar   { background: rgba(255,255,255,.10) !important; }
[data-theme="dark"] .no-plan-notice { background: var(--bg-elevated) !important; border-color: rgba(255,255,255,.10) !important; }
[data-theme="dark"] .no-plan-notice h3 { color: #f1f5f9 !important; }
[data-theme="dark"] .no-plan-notice p  { color: #94a3b8 !important; }
[data-theme="dark"] .plan-card { background: var(--bg-surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .plan-card.popular { border-color: var(--primary) !important; }
[data-theme="dark"] .plan-name  { color: #94a3b8 !important; }
[data-theme="dark"] .plan-price .plan-price-amount { color: #f1f5f9 !important; }
[data-theme="dark"] .plan-price-period { color: #64748b !important; }
[data-theme="dark"] .plan-feature { color: #cbd5e1 !important; }
[data-theme="dark"] .plan-feature.locked { color: #334155 !important; }
[data-theme="dark"] .plan-header { border-color: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .billing-hero h2 span { -webkit-text-fill-color: transparent !important; }
[data-theme="dark"] .current-tier-banner { background: rgba(52,211,153,.06) !important; border-color: rgba(52,211,153,.18) !important; }
[data-theme="dark"] .current-tier-title  { color: #f1f5f9 !important; }
[data-theme="dark"] .current-tier-sub    { color: #94a3b8 !important; }

/* ── Settings ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] .settings-nav-item         { color: #94a3b8 !important; }
[data-theme="dark"] .settings-nav-item:hover   { color: #f1f5f9 !important; background: rgba(255,255,255,.05) !important; }
[data-theme="dark"] .settings-nav-item.active  { color: var(--primary) !important; background: var(--primary-light) !important; }
[data-theme="dark"] .usage-card                { background: var(--bg-surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .usage-card h4             { color: #f1f5f9 !important; }
[data-theme="dark"] .usage-label               { color: #cbd5e1 !important; }
[data-theme="dark"] .usage-nums                { color: #f1f5f9 !important; }
[data-theme="dark"] .usage-row                 { border-color: rgba(255,255,255,.06) !important; }

/* ── Table general ────────────────────────────────────────────────────────── */
[data-theme="dark"] .table-wrap table { background: var(--bg-surface) !important; }
[data-theme="dark"] .table-wrap { border-color: var(--border) !important; }
[data-theme="dark"] .approve-pay-btn { background: rgba(52,211,153,.12) !important; color: #34d399 !important; border-color: rgba(52,211,153,.25) !important; }

/* ── Udharo header bar ─────────────────────────────────────────────────────── */
[data-theme="dark"] .udharo-header-bar { background: rgba(239,68,68,.06) !important; border-color: rgba(239,68,68,.15) !important; }

/* ── Udharo cleared section labels ───────────────────────────────────────── */
[data-theme="dark"] [style*="color:var(--text-primary)"] { color: #f1f5f9 !important; }
[data-theme="dark"] [style*="color:var(--text-secondary)"] { color: #cbd5e1 !important; }
[data-theme="dark"] [style*="color:var(--text-muted)"] { color: #94a3b8 !important; }

/* ── Dashboard SMS/WA banners ─────────────────────────────────────────────── */
[data-theme="dark"] .msg-balance-row .sms-banner { }

/* ── Sidebar divider ──────────────────────────────────────────────────────── */
[data-theme="dark"] .sidebar-divider { background: rgba(255,255,255,.07) !important; }
[data-theme="dark"] .sidebar-bottom .theme-btn { color: #64748b !important; }
[data-theme="dark"] .sidebar-bottom .theme-btn:hover { color: #f1f5f9 !important; background: rgba(255,255,255,.05) !important; }
[data-theme="dark"] .brand-sub { color: #64748b !important; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .empty-icon { background: var(--primary-light) !important; }
[data-theme="dark"] .empty p { color: #94a3b8 !important; }

/* ── Topbar icon-btn ──────────────────────────────────────────────────────── */
[data-theme="dark"] .icon-btn { color: #64748b !important; }
[data-theme="dark"] .icon-btn:hover { color: #f1f5f9 !important; background: rgba(255,255,255,.06) !important; }

/* ── Modal backdrop text ──────────────────────────────────────────────────── */
[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,.7) !important; }
[data-theme="dark"] .modal-footer .btn-ghost { color: #94a3b8 !important; }

/* ── Badges in dark ────────────────────────────────────────────────────────── */
[data-theme="dark"] .badge-success { background: rgba(52,211,153,.12) !important; color: #34d399 !important; }
[data-theme="dark"] .badge-warning { background: rgba(251,191,36,.12) !important; color: #fbbf24 !important; }
[data-theme="dark"] .badge-danger  { background: rgba(248,113,113,.12) !important; color: #f87171 !important; }
[data-theme="dark"] .badge-gray    { background: rgba(255,255,255,.07) !important; color: #94a3b8 !important; border-color: rgba(255,255,255,.10) !important; }

/* ── Nav badge ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] .nav-badge { background: var(--danger) !important; color: #fff !important; }

/* ── Pulse dot ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] .pulse-dot { box-shadow: 0 0 0 0 rgba(52,211,153,.5); }

/* ── Progress bars ─────────────────────────────────────────────────────────── */
[data-theme="dark"] .progress-bar { background: rgba(255,255,255,.10) !important; }
[data-theme="dark"] .progress-fill { }
[data-theme="dark"] .sms-progress-bar { background: rgba(255,255,255,.10) !important; }

/* ── PDF download button (outline) ───────────────────────────────────────── */
[data-theme="dark"] .pdf-access-banner { background: rgba(91,95,207,.08) !important; border-color: var(--primary-border) !important; }
[data-theme="dark"] .pdf-access-title { color: #f1f5f9 !important; }
[data-theme="dark"] .pdf-access-sub   { color: #94a3b8 !important; }

/* ── Info grid in drawer ────────────────────────────────────────────────────── */
[data-theme="dark"] .info-item .lbl { color: #64748b !important; }
[data-theme="dark"] .info-item .val { color: #f1f5f9 !important; }

/* ── Detail drawer ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .detail-drawer { background: #0f1629 !important; border-color: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .drawer-header h3 { color: #f1f5f9 !important; }

/* ── Chart card text ───────────────────────────────────────────────────────── */
[data-theme="dark"] .chart-sub { color: #94a3b8 !important; }

/* ── Section title / label ─────────────────────────────────────────────────── */
[data-theme="dark"] .section-title { color: #64748b !important; }
[data-theme="dark"] .section-label::after { background: rgba(255,255,255,.07) !important; }

/* ── Skeleton loaders ───────────────────────────────────────────────────────── */
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg,#162035 25%,#1e2a3f 37%,#162035 63%) !important;
  background-size: 500px 100% !important;
}

/* ── Toggle switch ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .toggle { background: #334155 !important; }
[data-theme="dark"] .toggle.on { background: var(--success) !important; }

/* ── Input group prefix ─────────────────────────────────────────────────────── */
[data-theme="dark"] .input-group .input-prefix { color: #64748b !important; }
[data-theme="dark"] .search-wrap svg { color: #64748b !important; }
[data-theme="dark"] .form-label { color: #94a3b8 !important; }

/* ── Sales page table ───────────────────────────────────────────────────────── */
[data-theme="dark"] .td-actions .btn-icon { color: #64748b !important; }
[data-theme="dark"] .td-actions .btn-icon:hover { color: #f87171 !important; background: rgba(248,113,113,.12) !important; }

/* ── Debtor rows in dashboard card ─────────────────────────────────────────── */
[data-theme="dark"] .debtor-row:hover { background: #162035 !important; }
[data-theme="dark"] .debtor-bal { color: #f87171 !important; }

/* ── Transaction list ───────────────────────────────────────────────────────── */
[data-theme="dark"] .txn-row:hover  { background: #162035 !important; }
[data-theme="dark"] .card           { background: #0f1629 !important; border-color: rgba(255,255,255,.07) !important; }
[data-theme="dark"] .card-footer    { border-color: rgba(255,255,255,.07) !important; }

/* ── Udharo card cleared section ───────────────────────────────────────────── */
[data-theme="dark"] .udharo-card { background: #0f1629 !important; border-color: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .udharo-card-name { color: #f1f5f9 !important; }
[data-theme="dark"] .udharo-card-sub  { color: #94a3b8 !important; }
[data-theme="dark"] .udharo-card-sub-amount { color: #94a3b8 !important; }
[data-theme="dark"] .udharo-card-btn { background: rgba(52,211,153,.12) !important; color: #34d399 !important; border-color: rgba(52,211,153,.20) !important; }

/* ── SMS usage bar ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .sms-usage-bar  { background: rgba(91,95,207,.10) !important; border-color: rgba(91,95,207,.20) !important; color: #94a3b8 !important; }
[data-theme="dark"] .sms-usage-bar strong { color: var(--primary) !important; }

/* ── Msg balance row ────────────────────────────────────────────────────────── */
[data-theme="dark"] .udharo-msg-pill.sms { background: rgba(91,95,207,.12) !important; border-color: rgba(91,95,207,.25) !important; color: #818cf8 !important; }
[data-theme="dark"] .udharo-msg-pill.wa  { background: rgba(37,211,102,.08) !important; border-color: rgba(37,211,102,.20) !important; color: #34d399 !important; }
[data-theme="dark"] .udharo-msg-pill-bar { background: rgba(255,255,255,.10) !important; }

/* ── Customer card ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .customer-card { background: #0f1629 !important; }

/* ── General: every var(--bg-surface) div should be dark ──────────────────── */
[data-theme="dark"] .summary-chip { background: #0f1629 !important; border-color: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .summary-chip .val { }  /* color set by .green/.red/.amber class */
[data-theme="dark"] .summary-chip .lbl { color: #94a3b8 !important; }

/* ── Billing active row ──────────────────────────────────────────────────────── */
[data-theme="dark"] .billing-active-section .billing-active-label { color: #64748b !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   LANGUAGE SELECTOR — clean, single label, smooth transition
   ═══════════════════════════════════════════════════════════════════════════ */
.lang-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 2px solid var(--border);
  background: var(--bg-surface);
  cursor: pointer;
  transition: all 250ms cubic-bezier(.22,1,.36,1);
  font-family: inherit;
  text-align: left;
  width: 100%;
}

.lang-option:hover {
  border-color: var(--primary-border);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.lang-option:active { transform: scale(.97); }

.lang-option.active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.lang-flag { font-size: 26px; line-height: 1; flex-shrink: 0; }

.lang-name {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.lang-check {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  color: #fff;
  background: var(--primary);
  transition: all 200ms cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
.lang-check:empty { background: transparent; }

[data-theme="dark"] .lang-option { background: var(--bg-surface) !important; border-color: rgba(255,255,255,.12) !important; }
[data-theme="dark"] .lang-option.active { border-color: var(--primary) !important; background: var(--primary-light) !important; }
[data-theme="dark"] .lang-name { color: #f1f5f9 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS DARK MODE — fix all remaining washed-out areas
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .settings-pay-section {
  background: var(--bg-elevated) !important;
  border-color: rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .settings-pay-heading,
[data-theme="dark"] .settings-pay-heading strong { color: #f1f5f9 !important; }
[data-theme="dark"] .settings-card p { color: #94a3b8 !important; }
[data-theme="dark"] .settings-card label { color: #cbd5e1 !important; }
[data-theme="dark"] .settings-card select.input,
[data-theme="dark"] .settings-card input.input {
  background: rgba(255,255,255,.05) !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,.12) !important;
}
[data-theme="dark"] .settings-card select.input option {
  background: #0f1629 !important;
  color: #f1f5f9 !important;
}
/* Any leftover inline-styled muted text in settings */
[data-theme="dark"] .settings-grid [style*="color:var(--text-muted)"],
[data-theme="dark"] .settings-grid [style*="color: var(--text-muted)"] { color: #94a3b8 !important; }
[data-theme="dark"] .settings-grid [style*="#64748b"] { color: #94a3b8 !important; }
[data-theme="dark"] .settings-grid [style*="#1e293b"],
[data-theme="dark"] .settings-grid [style*="#0f172a"] { color: #f1f5f9 !important; }
/* Danger zone card in dark */
[data-theme="dark"] .settings-card[style*="danger"] { background: rgba(239,68,68,.08) !important; }
/* SMS usage history table in settings */
[data-theme="dark"] .settings-card table { background: transparent !important; }
[data-theme="dark"] .settings-card thead th { background: rgba(255,255,255,.04) !important; color: #94a3b8 !important; }
[data-theme="dark"] .settings-card tbody td { color: #e2e8f0 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   HERO TEXT — white ONLY in dark mode (hero is dark slate in dark theme).
   In light mode the hero is white, so light-mode text rules (below) apply.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .dash-hero .dash-hero-name        { color: #ffffff !important; }
[data-theme="dark"] .dash-hero .dash-hero-balance     { color: #ffffff !important; }
[data-theme="dark"] .dash-hero .dash-hero-balance-label { color: rgba(255,255,255,.82) !important; }
[data-theme="dark"] .dash-hero .dash-hero-balance-sub { color: rgba(255,255,255,.72) !important; }
[data-theme="dark"] .dash-hero .dash-hero-greeting    { color: rgba(255,255,255,.85) !important; }
[data-theme="dark"] .dash-hero .dash-hero-action-label{ color: rgba(255,255,255,.85) !important; }
[data-theme="dark"] .dash-hero .dash-hero-stat-label  { color: rgba(255,255,255,.88) !important; }
[data-theme="dark"] .dash-hero .dash-hero-stat-value  { color: #ffffff !important; }
[data-theme="dark"] .dash-hero .dash-hero-stat-value.positive { color: #6ee7b7 !important; }
[data-theme="dark"] .dash-hero .dash-hero-stat-value.negative { color: #fca5a5 !important; }
[data-theme="dark"] .dash-hero .dash-hero-stat-value.warning  { color: #fcd34d !important; }
[data-theme="dark"] .dash-hero .dash-hero-action-btn svg { color: #ffffff !important; stroke: #ffffff !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   CHART SVG TEXT — axis labels readable in BOTH themes
   (SVG fill="var(...)" attributes don't resolve, so force via stylesheet)
   ═══════════════════════════════════════════════════════════════════════════ */
.card svg text,
.chart-body svg text,
.chart-card svg text {
  fill: #64748b !important;
}
[data-theme="dark"] .card svg text,
[data-theme="dark"] .chart-body svg text,
[data-theme="dark"] .chart-card svg text {
  fill: #94a3b8 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME — UNIVERSAL CATCH-ALL (maps EVERY hardcoded inline color)
   This is the safety net: any inline style using a known light-mode color
   gets remapped so text/background NEVER mismatches the dark theme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dark TEXT colors → light (these become invisible on dark otherwise) ── */
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#0f172a"],
[data-theme="dark"] [style*="color: #0f172a"],
[data-theme="dark"] [style*="color:#1e1b4b"],
[data-theme="dark"] [style*="color: #1e1b4b"],
[data-theme="dark"] [style*="color:#334155"],
[data-theme="dark"] [style*="color: #334155"],
[data-theme="dark"] [style*="color:#1a1a2e"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:black"] {
  color: #e6edf3 !important;
}

/* ── Mid-gray text → lighter muted ── */
[data-theme="dark"] [style*="color:#475569"],
[data-theme="dark"] [style*="color: #475569"],
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #64748b"] {
  color: #8b97a5 !important;
}

/* ── Light BACKGROUNDS → dark elevated (these stay white otherwise) ── */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background: #f1f5f9"],
[data-theme="dark"] [style*="background:#fafbfc"],
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="dark"] [style*="background:#eef0fb"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background:var(--surface-2"] {
  background: #1c2230 !important;
}

/* ── Light tinted backgrounds → keep tint but dark ── */
[data-theme="dark"] [style*="background:#fef3c7"],
[data-theme="dark"] [style*="background:#fef9c3"] { background: rgba(210,153,34,.16) !important; }
[data-theme="dark"] [style*="background:#dcfce7"],
[data-theme="dark"] [style*="background:#d1fae5"] { background: rgba(63,185,80,.16) !important; }
[data-theme="dark"] [style*="background:#fee2e2"],
[data-theme="dark"] [style*="background:#fef2f2"] { background: rgba(248,81,73,.15) !important; }
[data-theme="dark"] [style*="background:#e0e7ff"],
[data-theme="dark"] [style*="background:#eef2ff"] { background: rgba(129,140,248,.16) !important; }

/* ── Light border colors → dark borders ── */
[data-theme="dark"] [style*="border:1px solid #e2e8f0"],
[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
[data-theme="dark"] [style*="border-color:#e2e8f0"],
[data-theme="dark"] [style*="border-bottom:1px solid #f1f5f9"] {
  border-color: rgba(255,255,255,.10) !important;
}

/* ── Universal inheritance safety net ──
   Any leaf element with no explicit color inherits readable text.       */
[data-theme="dark"] #page,
[data-theme="dark"] #page * {
  /* don't override elements that set their own non-black color */
}
[data-theme="dark"] #page div:not([style*="color"]):not([class*="badge"]),
[data-theme="dark"] #page span:not([style*="color"]):not([class*="badge"]),
[data-theme="dark"] #page p:not([style*="color"]),
[data-theme="dark"] #page td:not([style*="color"]),
[data-theme="dark"] #page h1:not([style*="color"]),
[data-theme="dark"] #page h2:not([style*="color"]),
[data-theme="dark"] #page h3:not([style*="color"]),
[data-theme="dark"] #page h4:not([style*="color"]),
[data-theme="dark"] #page h5:not([style*="color"]),
[data-theme="dark"] #page strong:not([style*="color"]),
[data-theme="dark"] #page label:not([style*="color"]) {
  color: var(--text-primary);
}

/* Hero text stays white regardless (it's on gradient) */
[data-theme="dark"] .dash-hero,
[data-theme="dark"] .dash-hero * { color: inherit; }

/* Modals also covered */
[data-theme="dark"] #modal [style*="color:#1e293b"],
[data-theme="dark"] #modal [style*="color:#0f172a"],
[data-theme="dark"] #modal [style*="color:#334155"] { color: #e6edf3 !important; }
[data-theme="dark"] #modal [style*="background:#f8fafc"],
[data-theme="dark"] #modal [style*="background:#fff"] { background: #1c2230 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   PROFESSIONAL REFINEMENT v6 — formal, restrained, enterprise-grade
   Loads last → wins. Color only for meaning. Subtle, confident motion.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Single restrained accent — professional indigo */
  --primary:        #4f46e5;
  --primary-hover:  #4338ca;
  --primary-light:  rgba(79,70,229,.07);
  --primary-border: rgba(79,70,229,.18);
  /* Flat — no rainbow gradients */
  --grad-primary:   #4f46e5;
  /* Formal slate hero (statement-header feel, no purple) */
  --grad-hero:      linear-gradient(135deg,#1e293b 0%,#0f172a 100%);
  /* Restrained, desaturated semantic colors */
  --success:        #15803d;
  --success-light:  rgba(21,128,61,.08);
  --danger:         #b91c1c;
  --danger-light:   rgba(185,28,28,.07);
  --warning:        #b45309;
  --warning-light:  rgba(180,83,9,.08);
  /* Quieter shadows */
  --shadow-card:    0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-float:   0 4px 12px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.05);
}

[data-theme="dark"] {
  --primary:        #818cf8;
  --primary-hover:  #6366f1;
  --primary-light:  rgba(129,140,248,.12);
  --primary-border: rgba(129,140,248,.26);
  --grad-primary:   #6366f1;
  --grad-hero:      linear-gradient(135deg,#1c2230 0%,#11151d 100%);
  --success:        #4ade80;
  --success-light:  rgba(74,222,128,.12);
  --danger:         #f87171;
  --danger-light:   rgba(248,113,113,.12);
  --warning:        #fbbf24;
  --warning-light:  rgba(251,191,36,.12);
}

/* ── HERO: formal slate statement header (no glow, no rainbow) ───────────── */
.dash-hero { animation: heroFade 350ms ease both; }
.dash-hero::before {
  background: radial-gradient(ellipse 60% 50% at 88% 0%, rgba(255,255,255,.05) 0%, transparent 60%) !important;
}
.dash-hero::after {
  border-color: rgba(255,255,255,.05) !important;
}
.dash-hero-balance { text-shadow: none !important; font-weight: 800 !important; }
.dash-hero-name { text-shadow: none !important; font-weight: 700 !important; }
/* Hero action buttons: quiet, uniform */
.dash-hero-action-btn {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;
  transition: background 180ms ease, transform 180ms ease !important;
}
.dash-hero-action-btn:active { transform: scale(.95) !important; }
.dash-hero-action-btn:hover  { background: rgba(255,255,255,.16) !important; transform: none !important; }

/* ── BUTTONS: flat, solid, confident ────────────────────────────────────── */
.btn { border-radius: 10px !important; font-weight: 600 !important; transition: background 160ms ease, border-color 160ms ease, transform 120ms ease !important; }
.btn-primary {
  background: var(--primary) !important;
  box-shadow: none !important;
  border: 1px solid var(--primary) !important;
}
.btn-primary:hover  { background: var(--primary-hover) !important; transform: none !important; box-shadow: none !important; }
.btn-primary:active { transform: scale(.98) !important; }
.btn-success { background: var(--success) !important; box-shadow: none !important; border: 1px solid var(--success) !important; }
.btn-success:hover { filter: brightness(.95) !important; transform: none !important; }
.btn-outline { border-radius: 10px !important; }
.btn-sm { border-radius: 8px !important; }
.btn-lg { border-radius: 12px !important; }

/* ── CARDS: flat, hairline borders, minimal shadow ──────────────────────── */
.card, .kpi-card, .customer-card, .udharo-card, .chart-card,
.settings-card, .summary-chip, .analytics-stat-chip, .plan-card {
  border-radius: 12px !important;
  box-shadow: var(--shadow-card) !important;
}
/* No coloured accent bars / lift bounces on KPI */
.kpi-card::before { display: none !important; }
.kpi-card:hover, .customer-card:hover, .udharo-card:hover {
  transform: none !important;
  box-shadow: var(--shadow-float) !important;
  border-color: var(--border-strong) !important;
}
.udharo-card::before { width: 2px !important; opacity: .6; }

/* ── KPI icons: monochrome, restrained ──────────────────────────────────── */
.kpi-icon { border-radius: 9px !important; }
.kpi-value { font-weight: 700 !important; }

/* ── Avatars: square-ish, neutral, no heavy shadow ──────────────────────── */
.customer-avatar, .udharo-card-avatar, .debtor-avatar {
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* ── Inputs: clean, formal focus ────────────────────────────────────────── */
.input { border-radius: 9px !important; }
.input:focus { box-shadow: 0 0 0 3px var(--primary-light) !important; }

/* ── Bottom nav: flat indicator ─────────────────────────────────────────── */
.bnav-item::before { background: var(--primary) !important; border-radius: 0 0 3px 3px !important; }
.bnav-item.active svg { transform: none !important; }
.bnav-item svg { transition: none !important; }

/* ── Language / lang selector: formal ───────────────────────────────────── */
.lang-option { border-radius: 10px !important; transition: border-color 160ms ease, background 160ms ease !important; }
.lang-option:hover { transform: none !important; box-shadow: none !important; }
.lang-option.active { box-shadow: none !important; }
.lang-check { border-radius: 6px !important; }

/* ── MOTION: replace bouncy springs with smooth professional easing ─────── */
@keyframes heroFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pageIn   { from { opacity: 0; transform: translateY(6px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes statPop  { from { opacity: 0; } to { opacity: 1; } }
@keyframes actionPop{ from { opacity: 0; } to { opacity: 1; } }
@keyframes cardFloat{ from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.page > * { animation: pageIn 280ms ease both; }
.kpi-card { animation: cardFloat 300ms ease both; }
.dash-hero-stat, .dash-hero-action { animation: statPop 320ms ease both; }
/* Kill glow/pulse decorative animations */
.pulse-dot { animation: none !important; box-shadow: 0 0 0 2px rgba(74,222,128,.25) !important; }

/* ── Modals & toasts: calmer entrance ───────────────────────────────────── */
.modal-box { animation: pageIn 220ms ease both !important; border-radius: 14px !important; }
@media (max-width:767px){ .modal-box { border-radius: 16px 16px 0 0 !important; } }
.toast { animation: pageIn 220ms ease both !important; border-radius: 10px !important; }

/* ── Badges: quiet, no glow ─────────────────────────────────────────────── */
.badge { border-radius: 6px !important; font-weight: 600 !important; }

/* ── Section labels & headings: formal weight ───────────────────────────── */
.page-header-left h1 { font-weight: 700 !important; letter-spacing: -0.01em !important; }
.card-title { font-weight: 600 !important; }

/* ── Reduce-motion respect ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE HERO — clean light header (not dark) in light theme
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .dash-hero {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .dash-hero::before { display: none !important; }
[data-theme="light"] .dash-hero::after  { display: none !important; }

[data-theme="light"] .dash-hero .dash-hero-name        { color: #0f172a !important; text-shadow: none !important; }
[data-theme="light"] .dash-hero .dash-hero-greeting    { color: #64748b !important; }
[data-theme="light"] .dash-hero .dash-hero-balance     { color: #0f172a !important; text-shadow: none !important; }
[data-theme="light"] .dash-hero .dash-hero-balance-label { color: #64748b !important; }
[data-theme="light"] .dash-hero .dash-hero-balance-sub { color: #94a3b8 !important; }

/* Stat boxes: light gray cards with dark text */
[data-theme="light"] .dash-hero .dash-hero-stat {
  background: #f8fafc !important;
  border: 1px solid var(--border) !important;
}
[data-theme="light"] .dash-hero .dash-hero-stat-label { color: #64748b !important; }
[data-theme="light"] .dash-hero .dash-hero-stat-value { color: #0f172a !important; }
[data-theme="light"] .dash-hero .dash-hero-stat-value.positive { color: #15803d !important; }
[data-theme="light"] .dash-hero .dash-hero-stat-value.negative { color: #b91c1c !important; }
[data-theme="light"] .dash-hero .dash-hero-stat-value.warning  { color: #b45309 !important; }

/* Action buttons: light tinted */
[data-theme="light"] .dash-hero .dash-hero-action-btn {
  background: var(--primary-light) !important;
  border: 1px solid var(--primary-border) !important;
  color: var(--primary) !important;
}
[data-theme="light"] .dash-hero .dash-hero-action-btn svg { color: var(--primary) !important; stroke: var(--primary) !important; }
[data-theme="light"] .dash-hero .dash-hero-action-label { color: #64748b !important; }