/* =============================================================================
   Astryx design system — token semantic (tema: neutral) + komponen dashboard
   Sumber token: https://astryx.atmeta.com/docs/tokens
   Aturan: JANGAN hardcode warna/ukuran — selalu pakai var(--token).
   ============================================================================= */

:root {
  color-scheme: light dark;

  /* ---- Surface hierarchy: body -> surface -> card -> popover ---- */
  --color-background-body: light-dark(#f7f7f8, #131315);
  --color-background-surface: light-dark(#ffffff, #1b1b1f);
  --color-background-card: light-dark(#ffffff, #202024);
  --color-background-popover: light-dark(#ffffff, #26262b);
  --color-background-muted: light-dark(#f1f1f3, #2a2a30);
  --color-background-inverted: light-dark(#1b1b1f, #f2f2f4);

  /* ---- Teks ---- */
  --color-text-primary: light-dark(#17171a, #f4f4f6);
  --color-text-secondary: light-dark(#5a5a63, #a9a9b3);
  --color-text-disabled: light-dark(#9a9aa4, #6c6c76);
  --color-text-inverted: light-dark(#ffffff, #17171a);
  --color-text-accent: light-dark(#2f5bd7, #93aaff);

  /* ---- Accent ---- */
  --color-accent: light-dark(#2f5bd7, #6f8cf0);
  --color-accent-muted: light-dark(#e8edfc, #262d45);
  --color-on-accent: light-dark(#ffffff, #10131c);

  /* ---- Border ---- */
  --color-border: light-dark(#e2e2e6, #33333a);
  --color-border-emphasized: light-dark(#c9c9d0, #4a4a53);

  /* ---- Status ---- */
  --color-success: light-dark(#1f7a44, #62c98b);
  --color-success-muted: light-dark(#e6f5eb, #1d3327);
  --color-warning: light-dark(#96650a, #e3b158);
  --color-warning-muted: light-dark(#fdf3e2, #3a2f1b);
  --color-error: light-dark(#b3261e, #f08b84);
  --color-error-muted: light-dark(#fdecea, #3b2321);
  --color-info-muted: light-dark(#eef1fb, #232838);

  /* ---- Ikon ---- */
  --color-icon-primary: light-dark(#3a3a42, #c9c9d2);
  --color-icon-secondary: light-dark(#75757f, #9a9aa5);

  /* ---- Tipografi (base 14px, rasio 1.2) ---- */
  --font-family-base: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.35rem;
  --font-size-2xl: 1.62rem;
  --font-size-3xl: 1.95rem;
  --text-heading-1-size: var(--font-size-2xl);
  --text-heading-2-size: var(--font-size-xl);
  --text-heading-3-size: var(--font-size-lg);
  --text-body-leading: 1.55;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* ---- Spacing / radius / shadow / motion ---- */
  --spacing-1: 4px;  --spacing-2: 8px;  --spacing-3: 12px; --spacing-4: 16px;
  --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px; --spacing-10: 40px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px;
  --border-width: 1px;
  --shadow-sm: 0 1px 2px light-dark(rgba(16,16,20,.06), rgba(0,0,0,.4));
  --shadow-md: 0 4px 12px light-dark(rgba(16,16,20,.08), rgba(0,0,0,.5));
  --shadow-lg: 0 12px 32px light-dark(rgba(16,16,20,.12), rgba(0,0,0,.6));
  --motion-fast: 120ms; --motion-base: 200ms;
  --motion-easing: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Warna grafik ---- */
  --chart-1: light-dark(#2f5bd7, #6f8cf0);
  --chart-2: light-dark(#1f7a44, #62c98b);
  --chart-3: light-dark(#96650a, #e3b158);
  --chart-4: light-dark(#8a3ab9, #c08ce0);
  --chart-5: light-dark(#0d7f8c, #5cc9d4);
  --chart-grid: light-dark(#e6e6ea, #2e2e35);
}

/* ---- Paksa tema (toggle terang/gelap manual) ---- */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-background-body);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--text-body-leading);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Layout ---------- */
.page { max-width: 1560px; margin: 0 auto; padding: var(--spacing-6); }
.row { display: flex; gap: var(--spacing-3); align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: var(--spacing-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--spacing-3); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--spacing-3); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--spacing-3); }
.stack { display: flex; flex-direction: column; gap: var(--spacing-3); }

/* ---------- Card ---------- */
.card {
  background: var(--color-background-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  box-shadow: var(--shadow-sm);
}
.card h2, .card h3 { margin: 0 0 var(--spacing-2); font-weight: var(--font-weight-semibold); }
h1 { font-size: var(--text-heading-1-size); margin: 0 0 var(--spacing-1); font-weight: var(--font-weight-semibold); }
h2 { font-size: var(--text-heading-2-size); }
h3 { font-size: var(--text-heading-3-size); }
.muted { color: var(--color-text-secondary); }
.small { font-size: var(--font-size-sm); }
.xs { font-size: var(--font-size-xs); }
.mono { font-family: var(--font-family-mono); }
.stat-value { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
.stat-label { font-size: var(--font-size-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Form ---------- */
label.field { display: flex; flex-direction: column; gap: var(--spacing-1); font-size: var(--font-size-xs); color: var(--color-text-secondary); }
input[type="text"], input[type="number"], select {
  background: var(--color-background-surface);
  color: var(--color-text-primary);
  border: var(--border-width) solid var(--color-border-emphasized);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-base);
  font-family: inherit;
  min-width: 120px;
}
input:focus-visible, select:focus-visible, button:focus-visible, .chip:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}

/* ---------- Button ---------- */
button, .btn {
  font-family: inherit; font-size: var(--font-size-base); font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm); border: var(--border-width) solid var(--color-border-emphasized);
  background: var(--color-background-surface); color: var(--color-text-primary);
  padding: var(--spacing-2) var(--spacing-3); cursor: pointer;
  transition: background var(--motion-fast) var(--motion-easing);
  text-decoration: none; display: inline-flex; align-items: center; gap: var(--spacing-1);
}
button:hover, .btn:hover { background: var(--color-background-muted); }
button.primary { background: var(--color-accent); color: var(--color-on-accent); border-color: transparent; }
button.ghost { border-color: transparent; background: transparent; color: var(--color-text-accent); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--spacing-1); border-bottom: var(--border-width) solid var(--color-border); margin-bottom: var(--spacing-4); overflow-x: auto; }
.tab {
  border: none; background: none; border-radius: 0; padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 2px solid transparent; color: var(--color-text-secondary); white-space: nowrap; font-weight: var(--font-weight-medium);
}
.tab[aria-selected="true"] { color: var(--color-text-accent); border-bottom-color: var(--color-accent); }
.panel[hidden] { display: none; }

/* ---------- Chip / badge ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--spacing-1);
  border: var(--border-width) solid var(--color-border-emphasized); border-radius: var(--radius-full);
  padding: 2px var(--spacing-3); font-size: var(--font-size-xs);
  background: var(--color-background-surface); color: var(--color-text-secondary); cursor: pointer; user-select: none;
}
.chip[aria-pressed="true"] { background: var(--color-accent-muted); border-color: var(--color-accent); color: var(--color-text-accent); }
.badge { display: inline-block; border-radius: var(--radius-full); padding: 1px var(--spacing-2); font-size: var(--font-size-xs); border: var(--border-width) solid var(--color-border); white-space: nowrap; }
.badge.ok { background: var(--color-success-muted); color: var(--color-success); border-color: transparent; }
.badge.warn { background: var(--color-warning-muted); color: var(--color-warning); border-color: transparent; }
.badge.err { background: var(--color-error-muted); color: var(--color-error); border-color: transparent; }
.badge.info { background: var(--color-accent-muted); color: var(--color-text-accent); border-color: transparent; }
.badge.baru { background: var(--color-success); color: var(--color-on-accent); border-color: transparent; font-weight: var(--font-weight-semibold); }

/* ---------- Tabel ---------- */
.table-wrap { overflow-x: auto; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-background-card); }
table { border-collapse: collapse; width: 100%; font-size: var(--font-size-sm); }
th, td { padding: var(--spacing-2) var(--spacing-3); text-align: left; border-bottom: var(--border-width) solid var(--color-border); vertical-align: top; }
th { position: sticky; top: 0; background: var(--color-background-muted); font-weight: var(--font-weight-semibold); white-space: nowrap; z-index: 1; }
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--color-text-accent); }
tbody tr:hover { background: var(--color-background-muted); cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { padding: var(--spacing-8); text-align: center; color: var(--color-text-secondary); }

/* ---------- Drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: light-dark(rgba(16,16,20,.4), rgba(0,0,0,.6)); display: none; z-index: 40; }
.drawer-backdrop.open { display: block; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(720px, 100%);
  background: var(--color-background-popover); border-left: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-lg); transform: translateX(100%);
  transition: transform var(--motion-base) var(--motion-easing);
  z-index: 41; overflow-y: auto; padding: var(--spacing-6);
}
.drawer.open { transform: none; }

/* ---------- Ikon SVG (pengganti emoji) ---------- */
.ikon {
  width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em;
  flex: 0 0 auto; pointer-events: none;
}
button .ikon, .btn .ikon, .tab .ikon { width: 16px; height: 16px; }
.badge .ikon { width: 12px; height: 12px; vertical-align: -0.1em; }

/* ---------- Utilitas ---------- */
.divider { height: var(--border-width); background: var(--color-border); margin: var(--spacing-4) 0; }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: var(--spacing-1) var(--spacing-3); font-size: var(--font-size-sm); }
.kv dt { color: var(--color-text-secondary); }
.kv dd { margin: 0; }
.scenario-card { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-3); margin-bottom: var(--spacing-2); }
.scenario-card.best { border-color: var(--color-accent); background: var(--color-accent-muted); }
.scenario-card.syariah { border-color: var(--color-success); background: var(--color-success-muted); }
a { color: var(--color-text-accent); }
.sticky-filters { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px); }
details.filters > summary { cursor: pointer; font-weight: var(--font-weight-semibold); }

/* ---------- Kartu peringkat (Top 5) ---------- */
.rank-card { display: flex; gap: var(--spacing-3); align-items: flex-start; }
.rank-num {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-full);
  display: grid; place-items: center; font-weight: var(--font-weight-semibold);
  background: var(--color-accent-muted); color: var(--color-text-accent);
}
.rank-num.gold { background: var(--color-warning-muted); color: var(--color-warning); }
.bar-track { height: 8px; border-radius: var(--radius-full); background: var(--color-background-muted); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--radius-full); background: var(--color-accent); }

/* ---------- Grafik ---------- */
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--color-text-secondary); font-size: 11px; }
.chart .axis { stroke: var(--chart-grid); stroke-width: 1; }
.chart .bar { fill: var(--chart-1); }
.chart .bar:hover { opacity: .8; }
.chart .line { stroke: var(--chart-grid); stroke-dasharray: 3 3; }
.chart .dot { fill: var(--chart-1); opacity: .55; }
.chart .dot:hover { opacity: 1; fill: var(--chart-3); }
.legend { display: flex; gap: var(--spacing-4); flex-wrap: wrap; font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.legend span::before { content: "■"; margin-right: 4px; color: var(--chart-1); }
.legend span.c2::before { color: var(--chart-2); }
.legend span.c3::before { color: var(--chart-3); }
.legend span.c4::before { color: var(--chart-4); }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .page { padding: var(--spacing-3); }
  h1 { font-size: var(--font-size-xl); }
  .grid-stats { grid-template-columns: repeat(2, 1fr); }
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dt { margin-top: var(--spacing-2); }
  .drawer { width: 100%; padding: var(--spacing-4); }
  table { font-size: var(--font-size-xs); }
  th, td { padding: var(--spacing-1) var(--spacing-2); }
  /* tabel jadi kartu di mobile */
  table.cards thead { display: none; }
  table.cards tbody tr { display: block; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--spacing-2); padding: var(--spacing-2); }
  table.cards tbody td { display: flex; justify-content: space-between; gap: var(--spacing-2); border: none; padding: 2px 0; text-align: right; }
  table.cards tbody td::before { content: attr(data-label); color: var(--color-text-secondary); text-align: left; font-size: var(--font-size-xs); }
  table.cards { display: block; }
  .sticky-filters { position: static; }
}