/**
 * ═══════════════════════════════════════════════════════════
 *  DIOKO MARCHAND — DESIGN SYSTEM
 *  Source of Truth for all UI tokens, components & animations
 *  Style: SaaS High-Tech Boutique (Fintech)
 * ═══════════════════════════════════════════════════════════
 */

/* ──────────────────────────────────────
   §1  FONTS
   ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ──────────────────────────────────────
   §2  CSS CUSTOM PROPERTIES — LIGHT
   ────────────────────────────────────── */
:root {
  /* ── Typography ── */
  --dk-font-display:  'Calistoga', Georgia, serif;
  --dk-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dk-font-mono:     'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* ── Type Scale ── */
  --dk-text-xs:    0.75rem;
  --dk-text-sm:    0.8125rem;
  --dk-text-base:  0.875rem;
  --dk-text-md:    1rem;
  --dk-text-lg:    1.125rem;
  --dk-text-xl:    1.25rem;
  --dk-text-2xl:   1.5rem;
  --dk-text-3xl:   1.875rem;
  --dk-text-4xl:   2.25rem;
  --dk-text-5xl:   3rem;

  /* ── Primary Palette ── */
  --dk-primary:          #0F172A;
  --dk-on-primary:       #FFFFFF;
  --dk-secondary:        #334155;
  --dk-accent:           #0369A1;
  --dk-accent-hover:     #025E8F;
  --dk-accent-subtle:    #E0F2FE;
  --dk-accent-rgb:       3, 105, 161;

  /* ── Backgrounds ── */
  --dk-bg:               #F8FAFC;
  --dk-surface:          #FFFFFF;
  --dk-muted:            #E8ECF1;
  --dk-foreground:       #020617;

  /* ── Borders ── */
  --dk-border:           #E2E8F0;
  --dk-border-strong:    #CBD5E1;
  --dk-ring:             #0F172A;

  /* ── Semantic — Success ── */
  --dk-success:          #22C55E;
  --dk-success-subtle:   #DCFCE7;
  --dk-success-text:     #15803D;

  /* ── Semantic — Warning ── */
  --dk-warning:          #F59E0B;
  --dk-warning-subtle:   #FEF3C7;
  --dk-warning-text:     #A16207;

  /* ── Semantic — Danger ── */
  --dk-danger:           #DC2626;
  --dk-danger-subtle:    #FEE2E2;
  --dk-danger-text:      #B91C1C;

  /* ── Semantic — Info ── */
  --dk-info:             #3B82F6;
  --dk-info-subtle:      #DBEAFE;
  --dk-info-text:        #1D4ED8;

  /* ── Gradients ── */
  --dk-gradient-primary: linear-gradient(135deg, #0052FF 0%, #4D7CFF 100%);
  --dk-gradient-success: linear-gradient(135deg, #22C55E 0%, #10B981 100%);
  --dk-gradient-accent:  linear-gradient(135deg, #0369A1 0%, #0284C7 100%);
  --dk-gradient-dark:    linear-gradient(135deg, #0F172A 0%, #1E293B 100%);

  /* ── Spacing (4px base) ── */
  --dk-space-1:   0.25rem;
  --dk-space-2:   0.5rem;
  --dk-space-3:   0.75rem;
  --dk-space-4:   1rem;
  --dk-space-5:   1.25rem;
  --dk-space-6:   1.5rem;
  --dk-space-8:   2rem;
  --dk-space-10:  2.5rem;
  --dk-space-12:  3rem;
  --dk-space-16:  4rem;

  /* ── Border Radius ── */
  --dk-radius-sm:    6px;
  --dk-radius-md:    8px;
  --dk-radius-lg:    12px;
  --dk-radius-xl:    16px;
  --dk-radius-2xl:   24px;
  --dk-radius-full:  9999px;

  /* ── Shadows ── */
  --dk-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
  --dk-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --dk-shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --dk-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.03);
  --dk-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
  --dk-shadow-glow: 0 0 20px rgba(var(--dk-accent-rgb), 0.15);

  /* ── Z-index ── */
  --dk-z-base:      0;
  --dk-z-dropdown:  10;
  --dk-z-sticky:    20;
  --dk-z-sidebar:   30;
  --dk-z-navbar:    40;
  --dk-z-modal:     50;
  --dk-z-toast:     60;
  --dk-z-tooltip:   70;

  /* ── Timing ── */
  --dk-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dk-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dk-dur-fast:    150ms;
  --dk-dur-normal:  200ms;
  --dk-dur-slow:    300ms;
}

/* ──────────────────────────────────────
   §3  CSS CUSTOM PROPERTIES — DARK
   ────────────────────────────────────── */
[data-bs-theme="dark"] {
  --dk-bg:               #0F1117;
  --dk-surface:          #1A1D27;
  --dk-muted:            #242833;
  --dk-foreground:       #E5E7EB;
  --dk-secondary:        #9CA3AF;
  --dk-border:           #2E3345;
  --dk-border-strong:    #3B4252;
  --dk-accent:           #38BDF8;
  --dk-accent-hover:     #7DD3FC;
  --dk-accent-subtle:    rgba(56, 189, 248, 0.1);
  --dk-accent-rgb:       56, 189, 248;
  --dk-success:          #4ADE80;
  --dk-success-subtle:   rgba(74, 222, 128, 0.12);
  --dk-success-text:     #86EFAC;
  --dk-warning:          #FBBF24;
  --dk-warning-subtle:   rgba(251, 191, 36, 0.12);
  --dk-warning-text:     #FDE68A;
  --dk-danger:           #F87171;
  --dk-danger-subtle:    rgba(248, 113, 113, 0.12);
  --dk-danger-text:      #FCA5A5;
  --dk-info:             #60A5FA;
  --dk-info-subtle:      rgba(96, 165, 250, 0.12);
  --dk-info-text:        #93BBFD;
  --dk-shadow-sm:        none;
  --dk-shadow-md:        none;
  --dk-shadow-lg:        none;
  --dk-shadow-xl:        0 0 0 1px var(--dk-border);
}

/* ──────────────────────────────────────
   §4  BASE TYPOGRAPHY
   ────────────────────────────────────── */
body {
  font-family: var(--dk-font-body);
  font-size: var(--dk-text-base);
  color: var(--dk-foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display headings — Calistoga */
.dk-display, .dk-h1 {
  font-family: var(--dk-font-display);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.dk-display { font-size: var(--dk-text-5xl); }
.dk-h1      { font-size: var(--dk-text-4xl); }

/* Standard headings — Inter bold */
.dk-h2 { font-size: var(--dk-text-3xl); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.dk-h3 { font-size: var(--dk-text-2xl); font-weight: 600; line-height: 1.3; }
.dk-h4 { font-size: var(--dk-text-xl);  font-weight: 600; line-height: 1.4; }
.dk-h5 { font-size: var(--dk-text-lg);  font-weight: 600; line-height: 1.4; }

/* Overline / Caption */
.dk-overline {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dk-secondary);
}
.dk-caption {
  font-size: var(--dk-text-xs);
  font-weight: 500;
  color: var(--dk-secondary);
}

/* Mono for financial data */
.dk-mono {
  font-family: var(--dk-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────
   §5  KEYFRAMES
   ────────────────────────────────────── */
@keyframes dk-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dk-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes dk-slide-in-right {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes dk-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}
@keyframes dk-skeleton {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@keyframes dk-spin {
  to { transform: rotate(360deg); }
}
@keyframes dk-count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger entrance helper */
.dk-stagger > *:nth-child(1) { animation-delay: 0ms; }
.dk-stagger > *:nth-child(2) { animation-delay: 60ms; }
.dk-stagger > *:nth-child(3) { animation-delay: 120ms; }
.dk-stagger > *:nth-child(4) { animation-delay: 180ms; }
.dk-stagger > *:nth-child(5) { animation-delay: 240ms; }
.dk-stagger > *:nth-child(6) { animation-delay: 300ms; }
.dk-stagger > * {
  animation: dk-fade-in var(--dk-dur-slow) var(--dk-ease-out) both;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ──────────────────────────────────────
   §6  KPI CARDS
   ────────────────────────────────────── */
.dk-kpi {
  background: var(--dk-surface);
  border: 1px solid var(--dk-border);
  border-radius: var(--dk-radius-lg);
  padding: var(--dk-space-6);
  position: relative;
  overflow: hidden;
  transition: transform var(--dk-dur-normal) var(--dk-ease-out),
              box-shadow var(--dk-dur-normal) var(--dk-ease-out);
}
.dk-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--dk-shadow-md);
}
.dk-kpi::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--dk-gradient-primary);
  opacity: 0;
  transition: opacity var(--dk-dur-normal) ease;
}
.dk-kpi:hover::after {
  opacity: 1;
}

/* KPI accent variants */
.dk-kpi.dk-kpi--success::after { background: var(--dk-gradient-success); }
.dk-kpi.dk-kpi--accent::after  { background: var(--dk-gradient-accent); }

.dk-kpi__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dk-secondary);
  margin-bottom: var(--dk-space-2);
}
.dk-kpi__value {
  font-family: var(--dk-font-display);
  font-size: var(--dk-text-3xl);
  color: var(--dk-foreground);
  line-height: 1.1;
  margin-bottom: var(--dk-space-2);
  animation: dk-count-up 0.5s var(--dk-ease-out) both;
}
.dk-kpi__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--dk-text-xs);
  font-weight: 500;
}
.dk-kpi__trend--up   { color: var(--dk-success-text); }
.dk-kpi__trend--down { color: var(--dk-danger-text); }
.dk-kpi__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--dk-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dk-accent-subtle);
  color: var(--dk-accent);
  font-size: 24px;
  flex-shrink: 0;
}

/* ──────────────────────────────────────
   §7  STATUS BADGES
   ────────────────────────────────────── */
.dk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--dk-radius-full);
  font-size: var(--dk-text-xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.dk-badge--success {
  background: var(--dk-success-subtle);
  color: var(--dk-success-text);
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.dk-badge--warning {
  background: var(--dk-warning-subtle);
  color: var(--dk-warning-text);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.dk-badge--danger {
  background: var(--dk-danger-subtle);
  color: var(--dk-danger-text);
  border: 1px solid rgba(220, 38, 38, 0.25);
}
.dk-badge--info {
  background: var(--dk-info-subtle);
  color: var(--dk-info-text);
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.dk-badge--neutral {
  background: var(--dk-muted);
  color: var(--dk-secondary);
  border: 1px solid var(--dk-border);
}

/* Animated status dot */
.dk-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.dk-dot--pulse {
  animation: dk-pulse-dot 2s ease-in-out infinite;
}

/* ──────────────────────────────────────
   §8  BUTTONS
   ────────────────────────────────────── */
.dk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dk-space-2);
  font-family: var(--dk-font-body);
  font-weight: 600;
  font-size: var(--dk-text-base);
  letter-spacing: 0.01em;
  border-radius: var(--dk-radius-md);
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: all var(--dk-dur-normal) var(--dk-ease-out);
  line-height: 1.4;
}
.dk-btn:active {
  transform: scale(0.98);
}
.dk-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--dk-accent-rgb), 0.3);
}

/* Primary */
.dk-btn--primary {
  background: var(--dk-accent);
  color: #fff;
}
.dk-btn--primary:hover {
  background: var(--dk-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--dk-shadow-md);
}

/* Secondary / Outlined */
.dk-btn--secondary {
  background: transparent;
  color: var(--dk-foreground);
  border: 1.5px solid var(--dk-border-strong);
}
.dk-btn--secondary:hover {
  background: var(--dk-muted);
  border-color: var(--dk-secondary);
}

/* Ghost */
.dk-btn--ghost {
  background: transparent;
  color: var(--dk-accent);
  padding: 8px 16px;
}
.dk-btn--ghost:hover {
  background: var(--dk-accent-subtle);
}

/* Destructive */
.dk-btn--danger {
  background: var(--dk-danger-subtle);
  color: var(--dk-danger);
  border: 1px solid transparent;
}
.dk-btn--danger:hover {
  background: var(--dk-danger);
  color: #fff;
}

/* Gradient CTA */
.dk-btn--gradient {
  background: var(--dk-gradient-primary);
  color: #fff;
  padding: 12px 28px;
}
.dk-btn--gradient:hover {
  box-shadow: var(--dk-shadow-glow);
  transform: translateY(-1px);
}

/* Size variants */
.dk-btn--sm { padding: 6px 14px; font-size: var(--dk-text-sm); }
.dk-btn--lg { padding: 14px 28px; font-size: var(--dk-text-md); }

/* Loading state */
.dk-btn--loading {
  pointer-events: none;
  opacity: 0.7;
}
.dk-btn--loading .dk-spinner {
  animation: dk-spin 0.8s linear infinite;
}

/* ──────────────────────────────────────
   §9  CARDS
   ────────────────────────────────────── */
.dk-card {
  background: var(--dk-surface);
  border: 1px solid var(--dk-border);
  border-radius: var(--dk-radius-lg);
  box-shadow: var(--dk-shadow-sm);
  transition: transform var(--dk-dur-normal) var(--dk-ease-out),
              box-shadow var(--dk-dur-normal) var(--dk-ease-out);
}
.dk-card--hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--dk-shadow-md);
}
.dk-card__header {
  padding: var(--dk-space-5) var(--dk-space-6);
  border-bottom: 1px solid var(--dk-border);
}
.dk-card__body {
  padding: var(--dk-space-6);
}
.dk-card__footer {
  padding: var(--dk-space-4) var(--dk-space-6);
  border-top: 1px solid var(--dk-border);
}

/* ──────────────────────────────────────
   §10  TABLES
   ────────────────────────────────────── */
.dk-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.dk-table thead th {
  background: var(--dk-bg);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dk-secondary);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--dk-border);
  position: sticky;
  top: 0;
  z-index: var(--dk-z-sticky);
}
.dk-table tbody td {
  padding: 12px 16px;
  font-size: var(--dk-text-base);
  color: var(--dk-foreground);
  border-bottom: 1px solid var(--dk-border);
  vertical-align: middle;
}
.dk-table tbody tr {
  transition: background var(--dk-dur-fast) ease;
}
.dk-table tbody tr:hover {
  background: var(--dk-accent-subtle);
}
.dk-table tbody tr:last-child td {
  border-bottom: none;
}
/* Monetary amounts */
.dk-table .dk-amount {
  font-family: var(--dk-font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ──────────────────────────────────────
   §11  FORMS
   ────────────────────────────────────── */
.dk-input {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--dk-border);
  border-radius: var(--dk-radius-sm);
  font-family: var(--dk-font-body);
  font-size: var(--dk-text-md);
  color: var(--dk-foreground);
  background: var(--dk-surface);
  transition: border-color var(--dk-dur-normal) ease,
              box-shadow var(--dk-dur-normal) ease;
}
.dk-input::placeholder { color: #94A3B8; }
.dk-input:hover { border-color: var(--dk-border-strong); }
.dk-input:focus {
  outline: none;
  border-color: var(--dk-accent);
  box-shadow: 0 0 0 3px rgba(var(--dk-accent-rgb), 0.12);
}
.dk-input--error {
  border-color: var(--dk-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.dk-label {
  display: block;
  font-size: var(--dk-text-sm);
  font-weight: 500;
  color: var(--dk-foreground);
  margin-bottom: var(--dk-space-1);
}
.dk-helper {
  font-size: var(--dk-text-xs);
  color: var(--dk-secondary);
  margin-top: var(--dk-space-1);
}
.dk-error {
  font-size: var(--dk-text-xs);
  color: var(--dk-danger);
  margin-top: var(--dk-space-1);
}

/* ──────────────────────────────────────
   §12  MODALS
   ────────────────────────────────────── */
.dk-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
.dk-modal {
  background: var(--dk-surface);
  border-radius: var(--dk-radius-xl);
  padding: var(--dk-space-8);
  box-shadow: var(--dk-shadow-xl);
  max-width: 500px;
  width: 90%;
  animation: dk-scale-in 250ms var(--dk-ease-out);
}

/* ──────────────────────────────────────
   §13  TOASTS
   ────────────────────────────────────── */
.dk-toast {
  padding: 12px 16px;
  border-radius: var(--dk-radius-md);
  display: flex;
  align-items: center;
  gap: var(--dk-space-3);
  font-size: var(--dk-text-base);
  animation: dk-slide-in-right var(--dk-dur-slow) var(--dk-ease-out);
  box-shadow: var(--dk-shadow-lg);
}
.dk-toast--success { background: var(--dk-success-subtle); color: var(--dk-success-text); border-left: 4px solid var(--dk-success); }
.dk-toast--danger  { background: var(--dk-danger-subtle);  color: var(--dk-danger-text);  border-left: 4px solid var(--dk-danger); }
.dk-toast--warning { background: var(--dk-warning-subtle); color: var(--dk-warning-text); border-left: 4px solid var(--dk-warning); }
.dk-toast--info    { background: var(--dk-info-subtle);    color: var(--dk-info-text);    border-left: 4px solid var(--dk-info); }

/* ──────────────────────────────────────
   §14  AVATARS
   ────────────────────────────────────── */
.dk-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dk-radius-full);
  font-family: var(--dk-font-body);
  font-weight: 600;
  color: var(--dk-on-primary);
  background: var(--dk-gradient-primary);
  text-transform: uppercase;
  flex-shrink: 0;
}
.dk-avatar--sm  { width: 32px; height: 32px; font-size: 12px; }
.dk-avatar--md  { width: 40px; height: 40px; font-size: 14px; }
.dk-avatar--lg  { width: 48px; height: 48px; font-size: 16px; }
.dk-avatar--xl  { width: 64px; height: 64px; font-size: 20px; }

/* ──────────────────────────────────────
   §15  SKELETON LOADING
   ────────────────────────────────────── */
.dk-skeleton {
  background: var(--dk-muted);
  border-radius: var(--dk-radius-sm);
  animation: dk-skeleton 2s ease-in-out infinite;
}
.dk-skeleton--text  { height: 14px; width: 80%; }
.dk-skeleton--title { height: 24px; width: 50%; }
.dk-skeleton--card  { height: 120px; width: 100%; border-radius: var(--dk-radius-lg); }
.dk-skeleton--avatar { width: 40px; height: 40px; border-radius: var(--dk-radius-full); }

/* ──────────────────────────────────────
   §16  EMPTY STATES
   ────────────────────────────────────── */
.dk-empty {
  text-align: center;
  padding: var(--dk-space-16) var(--dk-space-6);
}
.dk-empty__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--dk-space-4);
  border-radius: var(--dk-radius-full);
  background: var(--dk-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dk-secondary);
  font-size: 28px;
}
.dk-empty__title {
  font-size: var(--dk-text-lg);
  font-weight: 600;
  color: var(--dk-foreground);
  margin-bottom: var(--dk-space-2);
}
.dk-empty__text {
  font-size: var(--dk-text-base);
  color: var(--dk-secondary);
  margin-bottom: var(--dk-space-6);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ──────────────────────────────────────
   §17  GLOBAL OVERRIDES
   Bridges the design system into Bootstrap
   ────────────────────────────────────── */

/* Apply new font to all elements */
body,
.navbar-menu,
.page-content,
.dropdown-menu,
.modal-content,
.card {
  font-family: var(--dk-font-body);
}

/* Page background */
body,
.page-content {
  background-color: var(--dk-bg);
}

/* All cards get the new tokens */
.card {
  border-color: var(--dk-border);
  border-radius: var(--dk-radius-lg);
  box-shadow: var(--dk-shadow-sm);
  background: var(--dk-surface);
}
.card-header {
  border-bottom-color: var(--dk-border);
  background: var(--dk-bg);
}
.card-animate {
  transition: transform var(--dk-dur-normal) var(--dk-ease-out),
              box-shadow var(--dk-dur-normal) var(--dk-ease-out);
}
.card-animate:hover {
  transform: translateY(-2px);
  box-shadow: var(--dk-shadow-md);
}

/* Buttons */
.btn-primary {
  background-color: var(--dk-accent);
  border-color: var(--dk-accent);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--dk-accent-hover);
  border-color: var(--dk-accent-hover);
}

/* Forms */
.form-control:focus,
.form-select:focus {
  border-color: var(--dk-accent);
  box-shadow: 0 0 0 3px rgba(var(--dk-accent-rgb), 0.12);
}

/* Active sidebar item */
[data-sidebar="light"] .menu-link.active,
.menu-link.active {
  color: var(--dk-accent) !important;
  border-left-color: var(--dk-accent) !important;
}
[data-sidebar="light"] .menu-link:hover {
  color: var(--dk-accent) !important;
}

/* Pagination */
.pagination .page-item.active .page-link {
  background-color: var(--dk-accent);
  border-color: var(--dk-accent);
}

/* Nav tabs / pills */
.nav-pills .nav-link.active {
  background-color: var(--dk-accent);
}
.nav-tabs .nav-link.active {
  color: var(--dk-accent);
  border-bottom-color: var(--dk-accent);
}

/* Breadcrumb */
.breadcrumb-item.active {
  color: var(--dk-accent);
}

/* Alerts — refined */
.alert {
  border-radius: var(--dk-radius-md);
  border-width: 1px;
  border-left-width: 4px;
}
.alert-success { background: var(--dk-success-subtle); border-color: var(--dk-success); color: var(--dk-success-text); }
.alert-danger  { background: var(--dk-danger-subtle);  border-color: var(--dk-danger);  color: var(--dk-danger-text); }
.alert-warning { background: var(--dk-warning-subtle); border-color: var(--dk-warning); color: var(--dk-warning-text); }
.alert-info    { background: var(--dk-info-subtle);    border-color: var(--dk-info);    color: var(--dk-info-text); }

/* Dropdown menus */
.dropdown-menu {
  border-radius: var(--dk-radius-lg);
  border-color: var(--dk-border);
  box-shadow: var(--dk-shadow-lg);
  padding: var(--dk-space-2);
}
.dropdown-item {
  border-radius: var(--dk-radius-md);
  transition: background var(--dk-dur-fast) ease;
  padding: 8px 12px;
}
.dropdown-item:hover {
  background: var(--dk-accent-subtle);
  color: var(--dk-accent);
}

/* Focus visible for keyboard nav */
*:focus-visible {
  outline: 2px solid var(--dk-accent);
  outline-offset: 2px;
}
*:focus:not(:focus-visible) {
  outline: none;
}

/* ──────────────────────────────────────
   §18  KPI CARD OVERRIDES (Bootstrap)
   Upgrades existing card-animate + fs-22
   pattern to design system look
   ────────────────────────────────────── */

/* KPI value headings — use display font */
.card-animate .card-body h4.fs-22,
.card-animate .card-body .fs-22 {
  font-family: var(--dk-font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--dk-text-3xl);
  line-height: 1.1;
  color: var(--dk-foreground);
  animation: dk-count-up 0.5s var(--dk-ease-out) both;
}

/* KPI labels — overline style */
.card-animate .card-body > .d-flex > div > p.text-uppercase.fw-medium {
  font-family: var(--dk-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* KPI icon containers — refined */
.card-animate .avatar-sm .avatar-title {
  border-radius: var(--dk-radius-lg);
  transition: transform var(--dk-dur-normal) var(--dk-ease-out);
}
.card-animate:hover .avatar-sm .avatar-title {
  transform: scale(1.05);
}

/* Card-animate — gradient bottom accent on hover */
.card-animate {
  position: relative;
  overflow: hidden;
}
.card-animate::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--dk-gradient-primary);
  opacity: 0;
  transition: opacity var(--dk-dur-normal) ease;
}
.card-animate:hover::after {
  opacity: 1;
}

/* Trend indicators — keep existing classes but add refinement */
.card-animate .text-success.fs-12 {
  color: var(--dk-success-text) !important;
}
.card-animate .text-danger.fs-12 {
  color: var(--dk-danger-text) !important;
}

/* ──────────────────────────────────────
   §18b  FINANCIAL AMOUNTS
   ────────────────────────────────────── */
.dk-amount {
  font-variant-numeric: tabular-nums;
}

/* Currency formatting helper */
.dk-currency {
  font-family: var(--dk-font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.dk-currency--positive { color: var(--dk-success-text); }
.dk-currency--negative { color: var(--dk-danger-text); }

/* ──────────────────────────────────────
   §19  ENVIRONMENT SWITCH (refined)
   ────────────────────────────────────── */
.env-switch.env-test .env-slider {
  background: var(--dk-gradient-accent);
  box-shadow: 0 2px 8px rgba(var(--dk-accent-rgb), 0.4);
}
.env-switch.env-live .env-slider {
  background: var(--dk-gradient-success);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

/* ──────────────────────────────────────
   §19b  BOOTSTRAP BADGE OVERRIDES
   ────────────────────────────────────── */
.badge.bg-success-subtle { background: var(--dk-success-subtle) !important; color: var(--dk-success-text) !important; }
.badge.bg-danger-subtle  { background: var(--dk-danger-subtle) !important;  color: var(--dk-danger-text) !important; }
.badge.bg-warning-subtle { background: var(--dk-warning-subtle) !important; color: var(--dk-warning-text) !important; }
.badge.bg-info-subtle    { background: var(--dk-info-subtle) !important;    color: var(--dk-info-text) !important; }
.badge.bg-primary-subtle { background: var(--dk-accent-subtle) !important;  color: var(--dk-accent) !important; }

/* Text semantic colors */
.text-success { color: var(--dk-success-text) !important; }
.text-danger  { color: var(--dk-danger-text) !important; }
.text-warning { color: var(--dk-warning-text) !important; }
.text-info    { color: var(--dk-info-text) !important; }
.text-primary { color: var(--dk-accent) !important; }
.text-muted   { color: var(--dk-secondary) !important; }

/* Bg semantic colors */
.bg-primary-subtle  { background-color: var(--dk-accent-subtle) !important; }
.bg-success-subtle  { background-color: var(--dk-success-subtle) !important; }
.bg-danger-subtle   { background-color: var(--dk-danger-subtle) !important; }
.bg-warning-subtle  { background-color: var(--dk-warning-subtle) !important; }
.bg-info-subtle     { background-color: var(--dk-info-subtle) !important; }

/* ──────────────────────────────────────
   §20  SIDEBAR REFINEMENTS
   ────────────────────────────────────── */

/* ── Base ── */
.app-menu.navbar-menu {
  font-family: var(--dk-font-body);
  overflow-x: hidden;
}

/* Prevent horizontal overflow on the scrollable area */
.app-menu #scrollbar,
.app-menu #scrollbar .container-fluid {
  overflow-x: hidden;
}

/* ── Section titles — compact overline ── */
.navbar-nav .menu-title {
  font-family: var(--dk-font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 18px 20px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--dk-secondary);
  opacity: 0.6;
}
/* First section title needs less top space */
.navbar-nav .menu-title:first-child {
  padding-top: 10px;
}
/* Hide the ri-more-fill icon in section titles — cleaner look */
.navbar-nav .menu-title > i.ri-more-fill {
  display: none;
}

/* ── Menu items — fixed layout, no shift ── */
.navbar-nav .nav-link.menu-link {
  font-family: var(--dk-font-body);
  font-size: var(--dk-text-sm);
  font-weight: 500;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 0;
  margin: 0;
  padding: 10px 20px;
  transition: background var(--dk-dur-normal) var(--dk-ease-out),
              color var(--dk-dur-normal) var(--dk-ease-out);
  border-left: 3px solid transparent;
  /* Prevent long text from pushing sidebar wider */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

/* The text span inside menu links */
.navbar-nav .nav-link.menu-link > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

/* ── Icons — consistent 24px column ── */
.nav-link.menu-link i {
  font-size: 17px;
  width: 24px;
  min-width: 24px;
  text-align: center;
  margin-right: 10px;
  opacity: 0.7;
  transition: opacity var(--dk-dur-fast) ease,
              color var(--dk-dur-fast) ease;
  flex-shrink: 0;
}
.nav-link.menu-link:hover i,
.nav-link.menu-link.active i {
  opacity: 1;
}

/* ── Hover state ── */
[data-sidebar="light"] .nav-link.menu-link:hover,
.nav-link.menu-link:hover {
  background: rgba(var(--dk-accent-rgb), 0.06) !important;
  color: var(--dk-accent) !important;
}

/* ── Active state — left accent bar ── */
[data-sidebar="light"] .nav-link.menu-link.active,
.nav-link.menu-link.active {
  background: var(--dk-accent-subtle) !important;
  color: var(--dk-accent) !important;
  border-left: 3px solid var(--dk-accent) !important;
  font-weight: 600;
}

/* ── Collapse toggle links (parent with arrow) ── */
.navbar-nav .nav-link.menu-link[data-bs-toggle="collapse"] {
  position: relative;
  padding-right: 32px; /* space for chevron */
}
.navbar-nav .nav-link.menu-link[data-bs-toggle="collapse"]::after {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
}

/* ── Submenu items ── */
.menu-dropdown .nav-link {
  font-family: var(--dk-font-body);
  font-size: var(--dk-text-xs);
  font-weight: 450;
  padding: 7px 20px 7px 54px; /* 24px icon + 10px gap + 20px base padding */
  border-radius: 0;
  transition: color var(--dk-dur-fast) ease,
              background var(--dk-dur-fast) ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  color: var(--dk-secondary);
}
.menu-dropdown .nav-link:hover {
  color: var(--dk-accent) !important;
  background: rgba(var(--dk-accent-rgb), 0.04);
}
.menu-dropdown .nav-link.active {
  color: var(--dk-accent) !important;
  font-weight: 600;
  background: rgba(var(--dk-accent-rgb), 0.06);
  position: relative;
}
/* Active submenu indicator dot */
.menu-dropdown .nav-link.active::before {
  content: '';
  position: absolute;
  left: 38px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dk-accent);
}

/* Collapse animation smoothness */
.menu-dropdown {
  transition: max-height var(--dk-dur-slow) var(--dk-ease-in-out);
}

/* ── Collapsed sidebar — icon-only mode ── */
[data-sidebar-size="sm"] .navbar-nav .menu-title {
  display: none; /* hide section titles in collapsed mode */
}
[data-sidebar-size="sm"] .nav-link.menu-link > span {
  display: none;
}
[data-sidebar-size="sm"] .nav-link.menu-link {
  justify-content: center;
  padding: 12px 0;
  border-left: none;
}
[data-sidebar-size="sm"] .nav-link.menu-link i {
  margin-right: 0;
  font-size: 20px;
}
/* Tooltip on hover for collapsed sidebar */
[data-sidebar-size="sm"] .nav-link.menu-link {
  position: relative;
}

/* ── Sidebar bottom fade — subtle scroll indicator ── */
.app-menu #scrollbar::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to top, var(--dk-surface), transparent);
  pointer-events: none;
  display: block;
}
[data-bs-theme="dark"] .app-menu #scrollbar::after {
  background: linear-gradient(to top, var(--dk-bg), transparent);
}

/* ── Sidebar divider between sections ── */
.navbar-nav .menu-title + .nav-item > .nav-link.menu-link {
  /* no extra rule needed, spacing handled by title padding */
}

/* ──────────────────────────────────────
   §21  SCROLLBAR STYLING
   ────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--dk-border-strong);
  border-radius: var(--dk-radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--dk-secondary);
}