/* ============================================================
   THEME.CSS — Satu sumber design token, shim, komponen & tema.
   ============================================================ */

/* ---------- Radius / Shadow (FASE 1, 3) ---------- */
/* ---------- Mode Bentuk (FASE 9) ---------- */
:root, [data-shape="curve"] {
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px;
}
[data-shape="flat"] {
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px;
}
/* Elemen yang secara makna HARUS tetap bulat walau mode Flat aktif:
   dot warna kategori, avatar/inisial user, spinner loading, knob toggle. */
.radius-fixed-full { border-radius: 999px !important; }
:root {
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .18);
}

/* ====================== PALET TEMA ====================== */

/* LIGHT (default) */
:root,
[data-theme="light"] {
  --bg-page:#f8fafc; --bg-card:#ffffff; --bg-surface:#f1f5f9; --bg-nav:rgba(255,255,255,.92);
  --bg-input:#f1f5f9; --bg-hover:#e2e8f0;
  --text-main:#0f172a; --text-sub:#475569; --text-muted:#94a3b8;
  --border:#e2e8f0; --placeholder:#cbd5e1; --overlay:rgba(15,23,42,.45);
  --accent:#10b981; --accent-hover:#059669; --accent-bg:rgba(16,185,129,.12); --accent-text:#ffffff;
  --success:#16a34a; --success-bg:rgba(22,163,74,.12);
  --danger:#e11d48; --danger-hover:#be123c; --danger-bg:rgba(225,29,72,.12);
  --warning:#d97706; --warning-bg:rgba(217,119,6,.12);
  --chart-grid:#e2e8f0;
}

/* DARK (default) */
[data-theme="dark"] {
  --bg-page:#0f172a; --bg-card:#1e293b; --bg-surface:#182234; --bg-nav:rgba(15,23,42,.92);
  --bg-input:#1e293b; --bg-hover:#334155;
  --text-main:#f1f5f9; --text-sub:#cbd5e1; --text-muted:#64748b;
  --border:#334155; --placeholder:#475569; --overlay:rgba(0,0,0,.6);
  --accent:#10b981; --accent-hover:#34d399; --accent-bg:rgba(16,185,129,.16); --accent-text:#ffffff;
  --success:#22c55e; --success-bg:rgba(34,197,94,.16);
  --danger:#fb7185; --danger-hover:#f43f5e; --danger-bg:rgba(251,113,133,.16);
  --warning:#fbbf24; --warning-bg:rgba(251,191,36,.16);
  --chart-grid:#334155;
}

/* DRACULA */
[data-theme="dracula"] {
  --bg-page:#282a36; --bg-card:#2f3140; --bg-surface:#343746; --bg-nav:rgba(40,42,54,.92);
  --bg-input:#343746; --bg-hover:#44475a;
  --text-main:#f8f8f2; --text-sub:#c6c9e0; --text-muted:#6272a4;
  --border:#44475a; --placeholder:#6272a4; --overlay:rgba(0,0,0,.6);
  --accent:#bd93f9; --accent-hover:#caa5fa; --accent-bg:rgba(189,147,249,.16); --accent-text:#282a36;
  --success:#50fa7b; --success-bg:rgba(80,250,123,.14);
  --danger:#ff5555; --danger-hover:#ff6e6e; --danger-bg:rgba(255,85,85,.16);
  --warning:#ffb86c; --warning-bg:rgba(255,184,108,.16);
  --chart-grid:#44475a;
}

/* NORD */
[data-theme="nord"] {
  --bg-page:#2e3440; --bg-card:#3b4252; --bg-surface:#3b4252; --bg-nav:rgba(46,52,64,.92);
  --bg-input:#434c5e; --bg-hover:#4c566a;
  --text-main:#eceff4; --text-sub:#d8dee9; --text-muted:#7b88a1;
  --border:#434c5e; --placeholder:#4c566a; --overlay:rgba(0,0,0,.55);
  --accent:#88c0d0; --accent-hover:#8fbcbb; --accent-bg:rgba(136,192,208,.16); --accent-text:#2e3440;
  --success:#a3be8c; --success-bg:rgba(163,190,140,.16);
  --danger:#bf616a; --danger-hover:#d08770; --danger-bg:rgba(191,97,106,.18);
  --warning:#ebcb8b; --warning-bg:rgba(235,203,139,.16);
  --chart-grid:#434c5e;
}

/* UBUNTU (aubergine + orange) */
[data-theme="ubuntu"] {
  --bg-page:#2c001e; --bg-card:#3a0929; --bg-surface:#4d1039; --bg-nav:rgba(44,0,30,.92);
  --bg-input:#4d1039; --bg-hover:#5e2750;
  --text-main:#f7f2f5; --text-sub:#dcc2d3; --text-muted:#a4789a;
  --border:#5e2750; --placeholder:#8a6280; --overlay:rgba(0,0,0,.6);
  --accent:#e95420; --accent-hover:#ff6b32; --accent-bg:rgba(233,84,32,.18); --accent-text:#ffffff;
  --success:#38b44a; --success-bg:rgba(56,180,74,.16);
  --danger:#df382c; --danger-hover:#f04b3e; --danger-bg:rgba(223,56,44,.18);
  --warning:#efb73e; --warning-bg:rgba(239,183,62,.16);
  --chart-grid:#5e2750;
}

/* CYBERPUNK / MATRIX TERMINAL */
[data-theme="cyberpunk"] {
  --bg-page:#050806; --bg-card:#0a100b; --bg-surface:#0d150f; --bg-nav:rgba(5,8,6,.92);
  --bg-input:#0d150f; --bg-hover:#122016;
  --text-main:#4dff9e; --text-sub:#1fae5c; --text-muted:#0f6b39;
  --border:#123b22; --placeholder:#1f6b3f; --overlay:rgba(0,0,0,.75);
  --accent:#39ff14; --accent-hover:#6dff4d; --accent-bg:rgba(57,255,20,.14); --accent-text:#03110a;
  --success:#39ff14; --success-bg:rgba(57,255,20,.14);
  --danger:#ff2957; --danger-hover:#ff5478; --danger-bg:rgba(255,41,87,.16);
  --warning:#f5ff2e; --warning-bg:rgba(245,255,46,.14);
  --chart-grid:#123b22;
}

/* SOLARIZED DARK */
[data-theme="solarized"] {
  --bg-page:#002b36; --bg-card:#073642; --bg-surface:#0a4552; --bg-nav:rgba(0,43,54,.92);
  --bg-input:#073642; --bg-hover:#0a4552;
  --text-main:#93a1a1; --text-sub:#839496; --text-muted:#586e75;
  --border:#0a4552; --placeholder:#586e75; --overlay:rgba(0,0,0,.6);
  --accent:#268bd2; --accent-hover:#2aa198; --accent-bg:rgba(38,139,210,.16); --accent-text:#fdf6e3;
  --success:#859900; --success-bg:rgba(133,153,0,.16);
  --danger:#dc322f; --danger-hover:#e0574f; --danger-bg:rgba(220,50,47,.18);
  --warning:#b58900; --warning-bg:rgba(181,137,0,.18);
  --chart-grid:#0a4552;
}

/* GRUVBOX DARK */
[data-theme="gruvbox"] {
  --bg-page:#282828; --bg-card:#3c3836; --bg-surface:#32302f; --bg-nav:rgba(40,40,40,.92);
  --bg-input:#3c3836; --bg-hover:#504945;
  --text-main:#ebdbb2; --text-sub:#bdae93; --text-muted:#928374;
  --border:#504945; --placeholder:#7c6f64; --overlay:rgba(0,0,0,.6);
  --accent:#fe8019; --accent-hover:#fabd2f; --accent-bg:rgba(254,128,25,.16); --accent-text:#282828;
  --success:#b8bb26; --success-bg:rgba(184,187,38,.16);
  --danger:#fb4934; --danger-hover:#fe8019; --danger-bg:rgba(251,73,52,.18);
  --warning:#fabd2f; --warning-bg:rgba(250,189,47,.16);
  --chart-grid:#504945;
}

/* CATPPUCCIN MOCHA */
[data-theme="catppuccin"] {
  --bg-page:#1e1e2e; --bg-card:#313244; --bg-surface:#27273c; --bg-nav:rgba(24,24,37,.92);
  --bg-input:#313244; --bg-hover:#45475a;
  --text-main:#cdd6f4; --text-sub:#a6adc8; --text-muted:#6c7086;
  --border:#45475a; --placeholder:#585b70; --overlay:rgba(0,0,0,.6);
  --accent:#cba6f7; --accent-hover:#b4befe; --accent-bg:rgba(203,166,247,.16); --accent-text:#1e1e2e;
  --success:#a6e3a1; --success-bg:rgba(166,227,161,.16);
  --danger:#f38ba8; --danger-hover:#eba0ac; --danger-bg:rgba(243,139,168,.16);
  --warning:#f9e2af; --warning-bg:rgba(249,226,175,.16);
  --chart-grid:#45475a;
}

/* SAKURA (pastel terang) */
[data-theme="sakura"] {
  --bg-page:#fff5f7; --bg-card:#ffffff; --bg-surface:#ffe9ef; --bg-nav:rgba(255,255,255,.9);
  --bg-input:#ffe9ef; --bg-hover:#ffd9e4;
  --text-main:#4a2c3a; --text-sub:#8b5d6b; --text-muted:#c48fa0;
  --border:#ffd1dc; --placeholder:#e8b3c2; --overlay:rgba(74,44,58,.35);
  --accent:#ff6f91; --accent-hover:#e85d75; --accent-bg:rgba(255,111,145,.14); --accent-text:#ffffff;
  --success:#4caf7d; --success-bg:rgba(76,175,125,.14);
  --danger:#e0555f; --danger-hover:#c8434d; --danger-bg:rgba(224,85,95,.14);
  --warning:#e8a33d; --warning-bg:rgba(232,163,61,.14);
  --chart-grid:#ffd1dc;
}

/* ---------- Basis ---------- */
body {
  background: var(--bg-page);
  color: var(--text-main);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.tnum { font-variant-numeric: tabular-nums; }
::selection { background: var(--accent-bg); color: var(--accent); }

[data-theme] input, [data-theme] select, [data-theme] textarea {
  color-scheme: dark;
}
[data-theme="light"] input, [data-theme="sakura"] input,
[data-theme="light"] select, [data-theme="sakura"] select,
[data-theme="light"] textarea, [data-theme="sakura"] textarea {
  color-scheme: light;
}

/* ---------- Shim class ---------- */
.bg-page { background: var(--bg-page); }
.bg-card { background: var(--bg-card); }
.bg-surface { background: var(--bg-surface); }
.bg-nav { background: var(--bg-nav); }
.bg-input { background: var(--bg-input); }
.bg-overlay { background: var(--overlay); }
.bg-accent { background: var(--accent); color: var(--accent-text); }
.bg-danger { background: var(--danger); color: var(--accent-text); }
.bg-accent-subtle { background: var(--accent-bg); }
.bg-danger-subtle { background: var(--danger-bg); }
.hover-bg-accent:hover { background: var(--accent-hover); }
.hover-bg-hover:hover { background: var(--bg-hover); }
.text-main { color: var(--text-main); }
.text-sub { color: var(--text-sub); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-btn { color: var(--accent-text); }
.border-default { border-color: var(--border); }

/* ---------- Tipografi (FASE 2) ---------- */
.label-caps {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
/* alias: pemakaian lama di beberapa halaman/JS disamakan ke label-caps */
.sect-label, .section-title {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}

/* ---------- Peran tipografi (FASE 18 Round 3) — satu ukuran pasti per peran ---------- */
.tx-h1 { font-size: 20px; font-weight: 700; color: var(--text-main); }
.tx-sub { font-size: 15px; font-weight: 600; color: var(--text-main); }
.tx-caption { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.tx-body { font-size: 14px; font-weight: 500; color: var(--text-main); }
.rp { font-size: 16px; font-weight: 700; color: var(--accent); }
.tx-hero { font-size: 32px; font-weight: 800; color: var(--text-main); line-height: 1.2; }
.tx-hero .rp { font-size: 16px; font-weight: 700; color: var(--accent); }
input.tx-hero { min-width: 0; }
input.tx-hero:focus { outline: none; box-shadow: none; }
.tx-kpi { font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
@media (min-width: 768px) { .tx-kpi { font-size: 24px; } }
.tx-kpi .rp { font-size: 12px; font-weight: 600; color: var(--text-muted); }

.tx-kpi-sm { font-size: 15px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-main); }
@media (min-width: 768px) { .tx-kpi-sm { font-size: 16px; } }
.tx-list-amt { font-size: 15px; font-weight: 700; color: var(--text-main); }
.tx-num { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.tx-btn { font-size: 14px; font-weight: 700; }

/* ---------- Komponen (FASE 4) ---------- */
.btn-primary {
  background: var(--accent); color: var(--accent-text);
  font-weight: 700; font-size: 14px; padding: .85rem 1.25rem;
  border-radius: var(--radius-md); transition: background .15s;
  width: 100%; cursor: pointer;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  background: var(--bg-surface); color: var(--text-sub);
  font-weight: 600; font-size: 14px; padding: .85rem 1.25rem;
  border-radius: var(--radius-md);
}
.btn-secondary:hover { background: var(--bg-hover); }

.field {
  background: var(--bg-input); border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  color: var(--text-main); border-radius: var(--radius-md); padding: .75rem 1rem; font-size: 14px; width: 100%;
}
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.field::placeholder { color: var(--placeholder); }

.card {
  background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 1rem;
}

.modal-box {
  background: var(--bg-card); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); padding: 1.25rem;
}

/* List flat pengganti "kartu per baris" — dipakai di Riwayat, Pendapatan, Riwayat-di-Input */
.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.list-row:last-child { border-bottom: none; }

/* Grid tema & bentuk di Setting (FASE 10/12): tanpa garis tepi kontras */
.theme-opt { box-shadow: var(--shadow-sm); border: none; }
.theme-opt.active { box-shadow: 0 0 0 3px var(--accent-bg), var(--shadow-md); }

/* Chip kategori ringkas (FASE 12) */
.chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem; }
.chip {
  display: flex; align-items: center; gap: .5rem; background: var(--bg-surface);
  border-radius: var(--radius-md); padding: .55rem .75rem; font-size: 13px; position: relative;
}

.pill {
  border-radius: var(--radius-md); padding: .55rem .75rem;
  font-size: 13px; font-weight: 500; transition: all .15s;
}
.pill.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.pill:not(.active) { background: var(--bg-input); color: var(--text-sub); }

/* ---------- Layout adaptif (FASE 6, 11) ---------- */
.page-wrap { max-width: 42rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px)  { .page-wrap { max-width: 46rem; padding: 0 1.5rem; } }
@media (min-width: 1024px) { .page-wrap { max-width: 72rem; padding: 0 2.5rem; } }
@media (min-width: 1440px) { .page-wrap { max-width: 90rem; padding: 0 3rem; } }
@media (min-width: 1920px) { .page-wrap { max-width: 110rem; padding: 0 4rem; } }

/* Dashboard fullscreen (FASE 11.2) — mengikuti lebar layar, bukan page-wrap */
.dash-wrap { width: 100%; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 3rem); max-width: 2200px; }

@media (min-width: 1024px) {
  .two-col-desktop { display: grid; grid-template-columns: 420px 1fr; gap: 2rem; align-items: start; }
  .two-col-desktop > :first-child { position: sticky; top: 1.5rem; }
}

@media (min-width: 1024px) {
  .settings-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start;
    grid-template-areas:
      "tampilan kategori"
      "user     kategori"
      "aksi     aksi";
  }
  .area-tampilan { grid-area: tampilan; }
  .area-kategori { grid-area: kategori; }
  .area-user     { grid-area: user; }
  .area-aksi     { grid-area: aksi; }
}

@media (min-width: 1024px) {
  .hist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
}