/* ========================================================================
 * ATAP FINANSIAL — DESIGN SYSTEM v4.0
 * Modern Banking App Style (BCA / Superbank / Jenius inspired)
 *
 * Light mode default — clean, trustworthy, premium
 * Dark mode toggle — deep navy, professional
 * ======================================================================== */

/* ======================================================================
   LIGHT MODE (DEFAULT) — Banking App Style
   ====================================================================== */
:root,
[data-mode="light"] {
  /* === Backgrounds === */
  --bg-base:        #F0F3F8;
  --bg-elevated:    #FFFFFF;
  --bg-overlay:     #F7F9FC;
  --bg-surface:     rgba(255, 255, 255, 0.95);
  --bg-glass:       rgba(255, 255, 255, 0.80);
  --bg-input:       #FFFFFF;
  --bg-sidebar:     #FFFFFF;

  /* === Borders === */
  --border:         #E4E9F0;
  --border-hover:   #C8D3E0;
  --border-focus:   var(--accent);

  /* === Text === */
  --text-primary:   #0A1628;
  --text-secondary: #5A6A7E;
  --text-muted:     #9BA8B5;
  --text-inverse:   #FFFFFF;

  /* === Primary Accent — Banking Blue === */
  --accent:         #0052CC;
  --accent-light:   #2B7BE5;
  --accent-dark:    #003A8C;
  --accent-glow:    rgba(0, 82, 204, 0.15);
  --accent-bg:      rgba(0, 82, 204, 0.07);

  /* === Gold / Premium === */
  --gold:           #F59E0B;
  --gold-light:     #FCD34D;
  --gold-dark:      #B45309;
  --gold-glow:      rgba(245, 158, 11, 0.15);
  --gold-bg:        rgba(245, 158, 11, 0.08);

  /* === Semantic Colors === */
  --success:        #059669;
  --success-light:  #10B981;
  --success-bg:     rgba(5, 150, 105, 0.08);
  --danger:         #DC2626;
  --danger-light:   #EF4444;
  --danger-bg:      rgba(220, 38, 38, 0.08);
  --warning:        #D97706;
  --warning-bg:     rgba(217, 119, 6, 0.08);

  /* === Shadows (soft, banking-style) === */
  --shadow-xs:  0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-sm:  0 1px 4px rgba(10, 22, 40, 0.06), 0 2px 8px rgba(10, 22, 40, 0.04);
  --shadow-md:  0 4px 12px rgba(10, 22, 40, 0.08), 0 2px 6px rgba(10, 22, 40, 0.05);
  --shadow-lg:  0 8px 24px rgba(10, 22, 40, 0.10), 0 4px 12px rgba(10, 22, 40, 0.06);
  --shadow-xl:  0 16px 40px rgba(10, 22, 40, 0.12), 0 8px 20px rgba(10, 22, 40, 0.08);
  --shadow-card: 0 2px 8px rgba(10, 22, 40, 0.06), 0 0 1px rgba(10, 22, 40, 0.08);

  /* === Radius === */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  18px;
  --radius-xl:  22px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* === Sidebar === */
  --sidebar-width:  260px;
  --sidebar-border: #E4E9F0;

  /* === Scrollbar === */
  --scrollbar-thumb: rgba(10, 22, 40, 0.12);

  /* Backward compat */
  --black:          var(--bg-base);
  --black-deep:     #E8EDF5;
  --black-elevated: var(--bg-elevated);
  --white:          var(--text-primary);
  --gray-400:       var(--text-secondary);
  --gray-500:       var(--text-muted);
}

/* ======================================================================
   DARK MODE
   ====================================================================== */
[data-mode="dark"] {
  --bg-base:        #080D18;
  --bg-elevated:    #0F1623;
  --bg-overlay:     #162030;
  --bg-surface:     rgba(15, 22, 35, 0.92);
  --bg-glass:       rgba(15, 22, 35, 0.75);
  --bg-input:       rgba(10, 18, 32, 0.8);
  --bg-sidebar:     #0B1120;

  --border:         rgba(255, 255, 255, 0.08);
  --border-hover:   rgba(255, 255, 255, 0.15);

  --text-primary:   #EBF0F8;
  --text-secondary: #8094AB;
  --text-muted:     #4A5A6E;
  --text-inverse:   #0A1628;

  --accent:         #3B82F6;
  --accent-light:   #60A5FA;
  --accent-dark:    #1D4ED8;
  --accent-glow:    rgba(59, 130, 246, 0.20);
  --accent-bg:      rgba(59, 130, 246, 0.10);

  --success:        #10B981;
  --success-light:  #34D399;
  --success-bg:     rgba(16, 185, 129, 0.12);
  --danger:         #F87171;
  --danger-light:   #FCA5A5;
  --danger-bg:      rgba(248, 113, 113, 0.12);
  --warning:        #FBBF24;
  --warning-bg:     rgba(251, 191, 36, 0.12);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);

  --sidebar-border: rgba(255, 255, 255, 0.06);
  --scrollbar-thumb: rgba(255, 255, 255, 0.10);

  --black:          var(--bg-base);
  --black-deep:     #050A14;
  --black-elevated: var(--bg-elevated);
  --white:          var(--text-primary);
  --gray-400:       var(--text-secondary);
  --gray-500:       var(--text-muted);
}

/* ======================================================================
   COLOR THEMES — Only accent colors change
   ====================================================================== */

/* 1. Banking Blue (default) */
:root,
[data-theme="banking-blue"],
[data-theme="blue-gold"] {
  --accent:       #0052CC;
  --accent-light: #2B7BE5;
  --accent-dark:  #003A8C;
  --accent-glow:  rgba(0, 82, 204, 0.15);
  --accent-bg:    rgba(0, 82, 204, 0.07);
}

[data-mode="dark"][data-theme="banking-blue"],
[data-mode="dark"][data-theme="blue-gold"],
[data-mode="dark"] {
  --accent:       #3B82F6;
  --accent-light: #60A5FA;
  --accent-dark:  #1D4ED8;
  --accent-glow:  rgba(59, 130, 246, 0.20);
  --accent-bg:    rgba(59, 130, 246, 0.10);
}

/* 2. Midnight Gold */
[data-theme="midnight-gold"] {
  --accent:       #B8860B;
  --accent-light: #D4A017;
  --accent-dark:  #8B6508;
  --accent-glow:  rgba(184, 134, 11, 0.15);
  --accent-bg:    rgba(184, 134, 11, 0.07);
}

[data-mode="dark"][data-theme="midnight-gold"] {
  --accent:       #F59E0B;
  --accent-light: #FCD34D;
  --accent-dark:  #B45309;
  --accent-glow:  rgba(245, 158, 11, 0.20);
  --accent-bg:    rgba(245, 158, 11, 0.10);
}

/* 3. Emerald */
[data-theme="midnight-emerald"] {
  --accent:       #047857;
  --accent-light: #059669;
  --accent-dark:  #035F47;
  --accent-glow:  rgba(4, 120, 87, 0.15);
  --accent-bg:    rgba(4, 120, 87, 0.07);
}

[data-mode="dark"][data-theme="midnight-emerald"] {
  --accent:       #10B981;
  --accent-light: #34D399;
  --accent-dark:  #047857;
  --accent-glow:  rgba(16, 185, 129, 0.20);
  --accent-bg:    rgba(16, 185, 129, 0.10);
}

/* 4. Amethyst */
[data-theme="midnight-amethyst"] {
  --accent:       #6D28D9;
  --accent-light: #7C3AED;
  --accent-dark:  #5B21B6;
  --accent-glow:  rgba(109, 40, 217, 0.15);
  --accent-bg:    rgba(109, 40, 217, 0.07);
}

[data-mode="dark"][data-theme="midnight-amethyst"] {
  --accent:       #A78BFA;
  --accent-light: #C4B5FD;
  --accent-dark:  #7C3AED;
  --accent-glow:  rgba(167, 139, 250, 0.20);
  --accent-bg:    rgba(167, 139, 250, 0.10);
}

/* 5. Rose */
[data-theme="midnight-rose"] {
  --accent:       #BE185D;
  --accent-light: #DB2777;
  --accent-dark:  #9D174D;
  --accent-glow:  rgba(190, 24, 93, 0.15);
  --accent-bg:    rgba(190, 24, 93, 0.07);
}

[data-mode="dark"][data-theme="midnight-rose"] {
  --accent:       #F472B6;
  --accent-light: #F9A8D4;
  --accent-dark:  #BE185D;
  --accent-glow:  rgba(244, 114, 182, 0.20);
  --accent-bg:    rgba(244, 114, 182, 0.10);
}

/* 6. Ocean Teal */
[data-theme="ocean-teal"] {
  --accent:       #0E7490;
  --accent-light: #0891B2;
  --accent-dark:  #0C5F75;
  --accent-glow:  rgba(14, 116, 144, 0.15);
  --accent-bg:    rgba(14, 116, 144, 0.07);
}

[data-mode="dark"][data-theme="ocean-teal"] {
  --accent:       #22D3EE;
  --accent-light: #67E8F9;
  --accent-dark:  #0E7490;
  --accent-glow:  rgba(34, 211, 238, 0.20);
  --accent-bg:    rgba(34, 211, 238, 0.10);
}

/* 7. Slate */
[data-theme="charcoal-platinum"] {
  --accent:       #334155;
  --accent-light: #475569;
  --accent-dark:  #1E293B;
  --accent-glow:  rgba(51, 65, 85, 0.15);
  --accent-bg:    rgba(51, 65, 85, 0.07);
}

[data-mode="dark"][data-theme="charcoal-platinum"] {
  --accent:       #94A3B8;
  --accent-light: #CBD5E1;
  --accent-dark:  #475569;
  --accent-glow:  rgba(148, 163, 184, 0.20);
  --accent-bg:    rgba(148, 163, 184, 0.10);
}

/* 8. Sapphire */
[data-theme="midnight-sapphire"] {
  --accent:       #1D4ED8;
  --accent-light: #2563EB;
  --accent-dark:  #1E40AF;
  --accent-glow:  rgba(29, 78, 216, 0.15);
  --accent-bg:    rgba(29, 78, 216, 0.07);
}

[data-mode="dark"][data-theme="midnight-sapphire"] {
  --accent:       #60A5FA;
  --accent-light: #93C5FD;
  --accent-dark:  #3B82F6;
  --accent-glow:  rgba(96, 165, 250, 0.20);
  --accent-bg:    rgba(96, 165, 250, 0.10);
}

/* 9. Forest */
[data-theme="forest-elite"] {
  --accent:       #166534;
  --accent-light: #15803D;
  --accent-dark:  #14532D;
  --accent-glow:  rgba(22, 101, 52, 0.15);
  --accent-bg:    rgba(22, 101, 52, 0.07);
}

[data-mode="dark"][data-theme="forest-elite"] {
  --accent:       #4ADE80;
  --accent-light: #86EFAC;
  --accent-dark:  #16A34A;
  --accent-glow:  rgba(74, 222, 128, 0.20);
  --accent-bg:    rgba(74, 222, 128, 0.10);
}

/* 10. Sunset */
[data-theme="sunset-bronze"] {
  --accent:       #C2410C;
  --accent-light: #EA580C;
  --accent-dark:  #9A3412;
  --accent-glow:  rgba(194, 65, 12, 0.15);
  --accent-bg:    rgba(194, 65, 12, 0.07);
}

[data-mode="dark"][data-theme="sunset-bronze"] {
  --accent:       #FB923C;
  --accent-light: #FDBA74;
  --accent-dark:  #EA580C;
  --accent-glow:  rgba(251, 146, 60, 0.20);
  --accent-bg:    rgba(251, 146, 60, 0.10);
}

/* ======================================================================
   SMOOTH TRANSITIONS
   ====================================================================== */
*,
body,
.sidebar,
.main-content,
.panel,
.stat-card,
.modal,
.netmoney-card,
.bank-card,
input,
select,
textarea,
.nav-item,
.data-card,
.akun-item,
.filter-item input,
.filter-item select,
.btn-primary,
.btn-ghost {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}