/* File: common.css */

/* ==== Palet warna (light - default) ==== */
:root {
  --bg: #f8fafc;
  --box: #ffffff;
  --line: #e5e7eb;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #0ea5e9;
  --accent: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;
  --zscore-severe: #dc2626;
  --zscore-moderate: #f97316;
  --zscore-normal: #16a34a;
  --zscore-risk: #eab308;
  --tick: #334155;
}

/* ==== Palet warna (dark - di-toggle oleh JS dengan class 'html.dark') ==== */
html.dark {
  --bg: #0b1220;
  --box: #0f172a;
  --line: #1f2937;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --primary: #38bdf8;
  --accent: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;
  --zscore-severe: #ef4444;
  --zscore-moderate: #fb923c;
  --zscore-normal: #22c55e;
  --zscore-risk: #eab308;
  --tick: #9ca3af;
}

/* ==== Design Tokens (tipografi, spacing, radius, shadow) ==== */
:root {
  --fs-xs: 12.5px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 17.5px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --lh-tight: 1.3;
  --lh-normal: 1.6;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .06);
  --container-w: 880px;
  --grid-gap: 14px;
  --control-pad-y: 12px;
  --control-pad-x: 14px;
  --control-font: var(--fs-base);
}

/* ==== Global base ==== */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  padding: var(--sp-4);
  /* Transisi halus untuk dark mode */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Layout umum untuk .wrap (index) dan .container (stunting) */
.container,
.wrap {
  max-width: var(--container-w);
  margin: 0 auto;
}
.container {
  background: var(--box);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Top-nav (konsisten) */
.topnav {
  display: flex;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
  flex-wrap: wrap; /* <-- Perbaikan untuk mobile */
}

.btnlink {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--box);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer; /* Untuk tombol/button */
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btnlink.primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.btnlink:not(.primary):hover {
  background-color: var(--line);
}

a {
  color: var(--primary);
  text-underline-offset: 2px;
}

/* Print */
@media print {
  body { background: #fff; }
  .container, .card { box-shadow: none; border-color: #ddd; }
  .btnlink, .btn-primary, .actions, .topnav, .input-stack { display: none; }
}