:root {
  --bg: #eff2f5;
  --surface: #ffffff;
  --text: #0f2e40;
  --accent: #00548e;
  --accent-2: #c96628;
  --divider: color-mix(in srgb, #0f2e40 14%, transparent);

  --accent-100: #eaf2f9; --accent-200: #cde1f0; --accent-300: #a5c8e3;
  --accent-400: #6ea8d3; --accent-500: #4185c0; --accent-600: #1b6bab;
  --accent-700: #00548e; --accent-800: #073f68; --accent-900: #0f2e40;

  --accent2-100: #fdf3e8; --accent2-200: #fae0c4; --accent2-300: #f6c891;
  --accent2-400: #edaf33; --accent2-500: #e08a2e; --accent2-600: #c96628;
  --accent2-700: #a5501d; --accent2-800: #7d3c15; --accent2-900: #56290f;

  --neutral-100: #f7f8fa; --neutral-200: #e7eaee; --neutral-300: #d3d8de;
  --neutral-400: #b3bbc4; --neutral-500: #939ca7; --neutral-600: #6e7883;
  --neutral-700: #4e5964; --neutral-800: #2b3a45; --neutral-900: #0f2e40;

  --sukses-text: #0f6b3f; --sukses-bg: #e7f4ec;

  --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}
a { color: var(--accent-700); text-decoration: none; }
a:hover { color: var(--accent-900); }
button { font-family: var(--font-body); }
input, textarea {
  font-family: var(--font-body);
  border: 1px solid var(--divider);
  background: #fff;
  color: var(--text);
  padding: 9px 11px;
  font-size: 13.5px;
  outline: none;
}
input:focus, textarea:focus { border-color: var(--accent-500); }
.input { width: 100%; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--neutral-700); }

table.table { border-collapse: collapse; font-size: 13px; }
table.table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-600);
  font-weight: 500;
  padding: 8px 10px;
  border-bottom: 1px solid var(--divider);
}
table.table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--divider);
}

.card { background: var(--surface); border: 1px solid var(--divider); }

#app { min-height: 100vh; }

::placeholder { color: var(--neutral-500); }

/* scrollbars minimal, browser default is fine */

/* ================= Animasi tombol "Salin" =================
   Umpan balik singkat saat link masuk papan klip: tombol memantul sekali dan
   chip link-nya berkedip hijau. Keduanya dihormati prefers-reduced-motion. */
@keyframes wa-copy-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.09); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@keyframes wa-copy-flash {
  0%   { background: var(--sukses-bg); box-shadow: inset 0 0 0 1px var(--sukses-text); }
  100% { background: var(--accent-100); box-shadow: inset 0 0 0 1px transparent; }
}

.copy-btn.is-copied { animation: wa-copy-pop 320ms cubic-bezier(.34, 1.56, .64, 1); }
.copy-flash { animation: wa-copy-flash 1100ms ease-out; }

/* Sasaran sentuh tombol salin di ponsel jangan terlalu kecil. */
@media (max-width: 620px) {
  .copy-btn { padding: 7px 13px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .copy-btn.is-copied, .copy-flash { animation: none; }
}

/* ================= Responsif (mobile & tablet) =================
   Sebagian besar tata letak ditulis sebagai style inline di js/views.js, jadi override
   di sini perlu !important. Yang disentuh hanya properti tata letak (kolom, padding,
   ukuran judul) — warna dan komponen tetap sama seperti desktop. */

/* Tablet & bawah: sidebar berubah jadi strip menu horizontal di atas konten. */
@media (max-width: 900px) {
  .shell { flex-direction: column !important; }
  .sidebar {
    width: 100% !important; flex: 0 0 auto !important; height: auto !important;
    position: static !important; padding: 12px 0 0 !important; gap: 10px !important;
  }
  .side-head img { width: 104px !important; }
  .side-foot { display: none !important; }
  .sidenav {
    flex-direction: row !important; gap: 4px !important;
    padding: 0 10px 6px !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .sidenav button {
    flex: 0 0 auto; width: auto !important;
    grid-template-columns: 3px auto !important;
    gap: 8px !important; padding: 9px 14px 9px 0 !important; font-size: 13px !important;
  }
  /* nomor urut menu (01, 02, …) tidak muat di strip horizontal */
  .sidenav button > span:last-child { display: none !important; }

  .topbar { padding: 14px 16px !important; gap: 12px !important; }
  .page-title { font-size: 27px !important; }
  .page-body { padding: 16px 16px 40px !important; }

  /* item yang di desktop memakai 2 kolom grid harus ikut menyempit */
  .span2 { grid-column: auto !important; }
}

/* Ponsel */
@media (max-width: 620px) {
  /* iOS auto-zoom saat fokus ke input dengan font < 16px */
  input, textarea, select { font-size: 16px !important; }

  /* Semua grid responsif memakai pola repeat(auto-fit, minmax(Npx, 1fr)) dengan N 190–420px.
     Di layar < N, track minimum itu lebih lebar dari layar dan memicu scroll horizontal —
     jadi di ponsel dipaksa satu kolom (kartu statistik tetap dua kolom biar ringkas). */
  [style*="auto-fit"] { grid-template-columns: minmax(0, 1fr) !important; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .auth-hero { padding: 28px 20px !important; gap: 22px !important; }
  .auth-hero img { width: 132px !important; }
  .auth-h2 { font-size: 31px !important; max-width: none !important; }
  .auth-pane { padding: 24px 16px 40px !important; }
  .auth-pane > div { padding: 22px 18px 24px !important; }

  /* Header cukup tinggi di ponsel (link + tombol simulasi + akun); kalau tetap sticky,
     layar terpakai hampir seperempat. Biarkan ikut ter-scroll. */
  .topbar { padding: 12px 14px !important; position: static !important; }
  .page-title { font-size: 23px !important; }
  .page-body { padding: 14px 14px 36px !important; }
  .card { padding: 16px 14px 18px !important; }

  /* link rotator di header: biarkan melebar penuh & terpotong rapi, jangan dorong layar */
  .topbar-link { width: 100% !important; min-width: 0 !important; }

  .stat-cell { padding: 14px 16px 12px !important; }
  .stat-value { font-size: 34px !important; }

  /* Distribusi per agen: bar pindah ke baris sendiri agar nama tidak terhimpit */
  .dist-row { grid-template-columns: 30px minmax(0, 1fr) 40px !important; gap: 10px !important; }
  .dist-bar { grid-column: 1 / -1 !important; }

  /* Pengikatan jemaah–sales: 2 kolom + status di baris bawah */
  .bind-row { grid-template-columns: 30px minmax(0, 1fr) !important; gap: 10px !important; }
  .bind-row > span:nth-child(3) { grid-column: 1 / -1 !important; }
  .bind-status { grid-column: 1 / -1 !important; text-align: left !important; }

  /* 24 batang jam: rapatkan & tampilkan label tiap 2 jam saja */
  .hours-grid { gap: 2px !important; height: 150px !important; }
  .hour-label { font-size: 8.5px !important; }
  .hour-col:nth-child(even) .hour-label { visibility: hidden; }

  table.table th, table.table td { padding: 8px 8px !important; }
}