/* ============================================
   Pintar Uang — Design Tokens
   Indonesian Personal Finance App
   ============================================
   A design token file defines the visual
   language for the entire application: colors,
   typography, spacing, shadows, borders, and
   more. All values live here as CSS custom
   properties so components reference tokens
   instead of hard-coded values.
   ============================================ */

:root {
  /* ------------------------------------------
     COLOR PALETTE
     ------------------------------------------ */

  /* Brand — Primary: Navy Blue (trust, authority) */
  --color-primary-900: #0A1628;
  --color-primary-800: #112240;
  --color-primary-700: #1E3A5F;   /* base primary */
  --color-primary-600: #2C5282;
  --color-primary-500: #3B6FA0;
  --color-primary-400: #5A8ABF;
  --color-primary-300: #7EADDB;
  --color-primary-200: #A8CBE8;
  --color-primary-100: #D1E4F5;
  --color-primary-50:  #EBF3FA;

  /* Brand — Accent: Vibrant Blue (CTAs, links, highlights) */
  --color-accent-900: #1E3A8A;
  --color-accent-800: #1E40AF;
  --color-accent-700: #1D4ED8;
  --color-accent-600: #2563EB;
  --color-accent-500: #3B82F6;   /* base accent */
  --color-accent-400: #60A5FA;
  --color-accent-300: #93C5FD;
  --color-accent-200: #BFDBFE;
  --color-accent-100: #DBEAFE;
  --color-accent-50:  #EFF6FF;

  /* Semantic — Success (savings, income, goals met) */
  --color-success-900: #064E3B;
  --color-success-700: #047857;
  --color-success-500: #10B981;   /* base success */
  --color-success-300: #6EE7B7;
  --color-success-100: #D1FAE5;
  --color-success-50:  #ECFDF5;

  /* Semantic — Warning (overspending, due dates) */
  --color-warning-900: #78350F;
  --color-warning-700: #B45309;
  --color-warning-500: #F59E0B;   /* base warning */
  --color-warning-300: #FCD34D;
  --color-warning-100: #FEF3C7;
  --color-warning-50:  #FFFBEB;

  /* Semantic — Error / Danger (failed payments, alerts) */
  --color-error-900: #7F1D1D;
  --color-error-700: #B91C1C;
  --color-error-500: #EF4444;    /* base error */
  --color-error-300: #FCA5A5;
  --color-error-100: #FEE2E2;
  --color-error-50:  #FEF2F2;

  /* Neutral / Slate (text, borders, backgrounds) */
  --color-neutral-900: #0F172A;
  --color-neutral-800: #1E293B;
  --color-neutral-700: #334155;
  --color-neutral-600: #475569;
  --color-neutral-500: #64748B;
  --color-neutral-400: #94A3B8;
  --color-neutral-300: #CBD5E1;
  --color-neutral-200: #E2E8F0;
  --color-neutral-100: #F1F5F9;
  --color-neutral-50:  #F8FAFC;
  --color-white:       #FFFFFF;

  /* ------------------------------------------
     SEMANTIC ALIASES
     These map raw palette values to
     intent-based names used in components.
     ------------------------------------------ */

  /* Backgrounds */
  --bg-primary:     var(--color-primary-700);
  --bg-secondary:   var(--color-neutral-50);
  --bg-card:        var(--color-white);
  --bg-overlay:     rgba(10, 22, 40, 0.6);

  /* Text */
  --text-primary:   var(--color-neutral-800);
  --text-secondary: var(--color-neutral-500);
  --text-tertiary:  var(--color-neutral-400);
  --text-inverse:   var(--color-white);
  --text-link:      var(--color-accent-500);
  --text-success:   var(--color-success-500);
  --text-warning:   var(--color-warning-500);
  --text-error:     var(--color-error-500);

  /* Interactive */
  --interactive-primary:       var(--color-accent-500);
  --interactive-primary-hover: var(--color-accent-600);
  --interactive-primary-active:var(--color-accent-700);
  --interactive-primary-light: var(--color-accent-100);
  --interactive-secondary:     var(--color-primary-700);
  --interactive-secondary-hover:var(--color-primary-600);
  --interactive-disabled:      var(--color-neutral-300);

  /* Borders */
  --border-default:  var(--color-neutral-200);
  --border-strong:   var(--color-neutral-300);
  --border-focus:    var(--color-accent-500);
  --border-error:    var(--color-error-500);
  --border-success:  var(--color-success-500);

  /* ------------------------------------------
     TYPOGRAPHY
     ------------------------------------------ */

  /* Font families */
  --font-sans:  'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
                'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  --font-money: 'Inter', 'Plus Jakarta Sans', monospace; /* amounts */

  /* Font sizes — modular scale (1.250 — Major Third) */
  --text-xs:   0.75rem;    /* 12px — captions, labels */
  --text-sm:   0.875rem;   /* 14px — secondary text */
  --text-base: 1rem;       /* 16px — body */
  --text-md:   1.125rem;   /* 18px — sub-headings */
  --text-lg:   1.25rem;    /* 20px — section titles */
  --text-xl:   1.5rem;     /* 24px — page headings */
  --text-2xl:  1.875rem;   /* 30px — hero / balance */
  --text-3xl:  2.25rem;    /* 36px — hero desktop */
  --text-4xl:  3rem;       /* 48px — splash / marketing */

  /* Font weights */
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Letter spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;

  /* ------------------------------------------
     SPACING SCALE (4px base)
     ------------------------------------------ */
  --space-0:   0;
  --space-0-5: 0.125rem;   /*  2px */
  --space-1:   0.25rem;    /*  4px */
  --space-1-5: 0.375rem;   /*  6px */
  --space-2:   0.5rem;     /*  8px */
  --space-2-5: 0.625rem;   /* 10px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */

  /* ------------------------------------------
     BORDER RADIUS
     ------------------------------------------ */
  --radius-none: 0;
  --radius-sm:   0.375rem;   /*  6px — tags, badges */
  --radius-md:   0.5rem;     /*  8px — inputs */
  --radius-lg:   0.75rem;    /* 12px — cards */
  --radius-xl:   1rem;       /* 16px — modals */
  --radius-2xl:  1.5rem;     /* 24px — sheets */
  --radius-full: 9999px;     /* pill shape */

  /* ------------------------------------------
     BOX SHADOWS
     ------------------------------------------ */
  --shadow-xs:    0 1px 2px rgba(30, 58, 95, 0.05);
  --shadow-sm:    0 1px 3px rgba(30, 58, 95, 0.08),
                  0 1px 2px rgba(30, 58, 95, 0.06);
  --shadow-md:    0 4px 6px -1px rgba(30, 58, 95, 0.08),
                  0 2px 4px -2px rgba(30, 58, 95, 0.06);
  --shadow-lg:    0 10px 15px -3px rgba(30, 58, 95, 0.08),
                  0 4px 6px -4px rgba(30, 58, 95, 0.06);
  --shadow-xl:    0 20px 25px -5px rgba(30, 58, 95, 0.10),
                  0 8px 10px -6px rgba(30, 58, 95, 0.06);
  --shadow-card:  0 4px 20px rgba(30, 58, 95, 0.08);
  --shadow-card-hover: 0 8px 30px rgba(30, 58, 95, 0.12);
  --shadow-nav:   0 1px 3px rgba(30, 58, 95, 0.06);

  /* ------------------------------------------
     TRANSITIONS & ANIMATION
     ------------------------------------------ */
  --duration-fast:    100ms;
  --duration-normal:  200ms;
  --duration-slow:    300ms;
  --duration-slower:  500ms;

  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ------------------------------------------
     BREAKPOINTS (for reference; Bootstrap
     handles actual responsive rules)
     ------------------------------------------ */
  --bp-sm:  576px;
  --bp-md:  768px;
  --bp-lg:  992px;
  --bp-xl:  1200px;
  --bp-2xl: 1400px;

  /* ------------------------------------------
     Z-INDEX SCALE
     ------------------------------------------ */
  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-fixed:     1030;
  --z-offcanvas: 1045;
  --z-modal:     1055;
  --z-popover:   1060;
  --z-tooltip:   1070;
  --z-toast:     1080;

  /* ------------------------------------------
     CONTAINER WIDTHS
     ------------------------------------------ */
  --container-sm:  540px;
  --container-md:  720px;
  --container-lg:  960px;
  --container-xl:  1140px;
  --container-xxl: 1320px;
}

/* ============================================
   DARK MODE OVERRIDES
   Add class="dark" to <html> or
   prefers-color-scheme: dark media query.
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary:     var(--color-primary-900);
    --bg-secondary:   var(--color-neutral-900);
    --bg-card:        var(--color-neutral-800);
    --bg-overlay:     rgba(0, 0, 0, 0.7);

    --text-primary:   var(--color-neutral-100);
    --text-secondary: var(--color-neutral-400);
    --text-tertiary:  var(--color-neutral-500);

    --border-default: var(--color-neutral-700);
    --border-strong:  var(--color-neutral-600);

    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:    0 4px 6px rgba(0, 0, 0, 0.35);
    --shadow-lg:    0 10px 15px rgba(0, 0, 0, 0.4);
    --shadow-card:  0 4px 20px rgba(0, 0, 0, 0.3);
  }
}

/* ============================================
   SKELETON LOADING
   ============================================ */
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-neutral-200) 25%,
    var(--color-neutral-100) 50%,
    var(--color-neutral-200) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

.skeleton-text {
  height: 1rem;
  margin-bottom: var(--space-2);
}

.skeleton-title {
  height: 1.5rem;
  width: 60%;
  margin-bottom: var(--space-4);
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
}

.skeleton-card {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

/* ============================================
   AUTO BUDGET MODAL
   ============================================ */

.btn-auto-budget {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, var(--color-accent-500), var(--color-primary-500));
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: var(--space-3);
}

.btn-auto-budget:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
}

.modal-content {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.modal-header h3 {
  margin: 0;
  font-size: var(--text-xl);
  color: var(--color-text-primary);
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: var(--space-2);
}

.modal-body {
  padding: var(--space-6);
}

.modal-description {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

.auto-budget-input {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-4);
  align-items: end;
  margin-bottom: var(--space-6);
}

.btn-generate {
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent-500);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-generate:hover {
  background: var(--color-accent-600);
}

.loading-spinner {
  text-align: center;
  padding: var(--space-8);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-accent-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-4);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.summary-card {
  background: var(--color-bg-secondary);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  text-align: center;
  border-left: 4px solid var(--color-primary-500);
}

.summary-card.tetap { border-left-color: var(--color-danger-500); }
.summary-card.tabungan { border-left-color: var(--color-success-500); }
.summary-card.variabel { border-left-color: var(--color-warning-500); }
.summary-card.sisa { border-left-color: var(--color-accent-500); }

.summary-label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.summary-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary);
}

.items-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
}

.items-table th,
.items-table td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.items-table th {
  background: var(--color-bg-secondary);
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.items-table td.increase { color: var(--color-danger-500); }
.items-table td.decrease { color: var(--color-success-500); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.badge-tetap { background: #FEE2E2; color: #DC2626; }
.badge-utang { background: #FEF3C7; color: #D97706; }
.badge-tabungan { background: #D1FAE5; color: #059669; }
.badge-variabel { background: #DBEAFE; color: #2563EB; }

.invest-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.invest-card {
  background: var(--color-bg-secondary);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--color-accent-500);
}

.invest-type {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.invest-name {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.invest-nominal {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-accent-600);
  margin-bottom: var(--space-2);
}

.invest-return {
  font-size: var(--text-sm);
  color: var(--color-success-500);
  margin-bottom: var(--space-1);
}

.invest-risk {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.invest-desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.insight-list {
  margin-bottom: var(--space-6);
}

.insight-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-lg);
}

.insight-positive { background: #D1FAE5; }
.insight-warning { background: #FEF3C7; }
.insight-danger { background: #FEE2E2; }
.insight-neutral { background: #DBEAFE; }

.insight-icon { font-size: 18px; }
.insight-text { font-size: var(--text-sm); line-height: 1.5; }

.modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.btn-apply {
  padding: var(--space-3) var(--space-6);
  background: var(--color-success-500);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
}

.btn-cancel {
  padding: var(--space-3) var(--space-6);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
}

@media (max-width: 640px) {
  .auto-budget-input {
    grid-template-columns: 1fr;
  }
  .summary-grid {
    grid-template-columns: 1fr 1fr;
  }
  .invest-cards {
    grid-template-columns: 1fr;
  }
}