/* Jiwater Loyalty — sistem desain.
 *
 * Ditulis tangan dari token di docs/design/01-design-system.md. Tanpa
 * Tailwind, tanpa PostCSS, tanpa langkah build (ADR-009).
 *
 * Urutan berkas: token, dasar, tata letak, komponen, utilitas. Komponen baru
 * ditambahkan di bagian komponen, bukan di akhir berkas.
 */

/* =============================================================== font ==== */

/* Plus Jakarta Sans, di-self-host (ADR-009).
 *
 * Bukan dari CDN: CSP aplikasi ini menyetel `font-src 'self'`, jadi font dari
 * fonts.gstatic.com akan diblokir tanpa pesan apa pun dan halaman diam-diam
 * jatuh ke font sistem — persis yang terjadi sebelum berkas ini ada.
 *
 * Satu berkas variabel (bobot 400–800) menggantikan empat berkas statis, dan
 * subsetnya hanya latin dasar karena seluruh antarmuka berbahasa Indonesia.
 * 27 KB, sudah terkompresi — woff2 tidak mengecil lagi oleh gzip.
 *
 * `font-display: swap` disengaja: distributor di 4G gudang melihat teks
 * seketika dengan font sistem, lalu berganti. Menunggu font sebelum
 * menampilkan angka progres adalah pertukaran yang salah.
 */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

/* ============================================================== token ==== */

:root {
  /* Merek */
  --forest-deep:      #0A1C18;
  --forest-surface:   #1D352F;
  --royal:            #0B4FB3;
  --royal-hover:      #083C88;
  --royal-subtle:     #EAF1FD;
  --emerald:          #126B54;
  --mint-tint:        #EEF7F4;
  --mint-border:      #C7E6DC;
  --gold:             #C8AA82;
  --gold-soft:        #FBF6EE;
  --gold-border:      #FDE6BA;

  /* Permukaan */
  --canvas:           #F4F8F6;
  --card:             #FFFFFF;
  --surface-sunken:   #F6FAF8;
  --surface-container:#E3F1EC;

  /* Teks */
  --text:             #0A1C18;
  --text-muted:       #5A6763;
  --text-subtle:      #737784;
  --text-invert:      #FFFFFF;

  /* Status */
  --success:          #16A34A;
  --success-soft:     #EAFBF1;
  --warning:          #D97706;
  --warning-soft:     #FFF8EC;
  --warning-border:   #FDE68A;
  --error:            #DC2626;
  --error-soft:       #FEF2F2;
  --error-border:     #FCA5A5;
  --error-text:       #991B1B;
  --info:             #0B4FB3;
  --info-soft:        #EAF1FD;

  /* Garis */
  --border:           #DCE6E2;
  --border-strong:    #C3C6D5;

  /* Radius */
  --r-sm: .25rem; --r-md: .75rem; --r-lg: 1rem; --r-xl: 1.5rem; --r-full: 9999px;

  /* Jarak — irama 8pt */
  --s-2xs: .25rem; --s-xs: .5rem; --s-sm: .75rem; --s-md: 1rem;
  --s-lg: 1.25rem; --s-xl: 1.5rem; --s-2xl: 2rem; --s-3xl: 2.5rem;

  /* Bayangan — cahaya yang disaring, bukan gelap yang ditumpuk */
  --shadow-1: 0 4px 16px -2px rgba(10,28,24,.05), 0 1px 3px 0 rgba(10,28,24,.02);
  --shadow-2: 0 12px 28px -4px rgba(11,79,179,.08), 0 4px 10px -2px rgba(10,28,24,.03);
  --shadow-cta: 0 4px 14px rgba(11,79,179,.25);

  /* Wadah: aplikasi ini mobile-first, jadi lebarnya dibatasi bahkan di
     desktop. Baris teks selebar 1400px tidak lebih terbaca. */
  --app-width: 480px;

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================== dasar ==== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--royal); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Fokus terlihat, selalu. Menghapusnya membuat aplikasi tidak bisa dipakai
   dengan papan ketik, dan itu bukan pertukaran estetika yang sah. */
:focus-visible {
  outline: 2px solid var(--royal);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ========================================================= tata letak ==== */

.app {
  width: 100%;
  max-width: var(--app-width);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  padding-left: var(--s-md);
  padding-right: var(--s-md);
  padding-top: env(safe-area-inset-top, 0px);
  /* Batang beranda iOS memakan ruang di bawah viewport. Tanpa ini, tombol
     terakhir duduk persis di bawah gestur geser. */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-md));
}

.stack       { display: flex; flex-direction: column; gap: var(--s-sm); }
.stack-tight { display: flex; flex-direction: column; gap: var(--s-xs); }
.stack-loose { display: flex; flex-direction: column; gap: var(--s-md); }

.row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-xs);
}
.row-start { display: flex; align-items: center; gap: var(--s-xs); }

/* Dua kolom di ponsel reguler, satu kolom di ponsel ringkas. 390px adalah
   batas tempat dua kartu berhenti terbaca. */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--s-sm); }
@media (min-width: 391px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

.spacer { flex: 1; }

/* ========================================================== komponen ===== */

/* --- Kartu --------------------------------------------------------------- */

.card {
  background: var(--card);
  border-radius: var(--r-lg);
  border: 1px solid rgba(199,230,220,.5);
  box-shadow: var(--shadow-1);
  padding: var(--s-md);
}
.card-raised { box-shadow: var(--shadow-2); }
.card-sunken {
  background: var(--surface-sunken);
  border: 1px solid var(--mint-border);
  border-radius: var(--r-md);
  padding: var(--s-sm);
  box-shadow: none;
}

/* --- Tipografi ----------------------------------------------------------- */

.t-hero    { font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -.03em; }
.t-metric  { font-size: 26px; line-height: 32px; font-weight: 800; letter-spacing: -.02em; }
.t-metric-sm{font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -.02em; }
.t-title   { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.01em; }
.t-subhead { font-size: 15px; line-height: 20px; font-weight: 600; }
.t-body    { font-size: 14px; line-height: 20px; font-weight: 400; }
.t-body-em { font-size: 14px; line-height: 20px; font-weight: 600; }
.t-sm      { font-size: 12px; line-height: 16px; font-weight: 400; }
.t-caption { font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.t-status  { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.muted  { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.accent { color: var(--royal); }
.emerald{ color: var(--emerald); }

/* Angka rupiah dan galon harus sejajar antar baris di daftar. */
.tabular { font-variant-numeric: tabular-nums; }

/* --- Bilah progres ------------------------------------------------------- */

.progress-track {
  width: 100%; height: 10px;
  background: var(--surface-container);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--royal), #2563EB);
  transition: width .8s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .progress-fill { transition: none; }
}

/* --- Tombol -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2xs);
  min-height: 48px;               /* target ibu jari, bukan kursor */
  padding: 0 var(--s-md);
  border-radius: var(--r-md);
  border: none;
  font-family: var(--font);
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer;
  width: 100%;
  transition: background-color .15s ease, transform .05s ease;
}
.btn:active { transform: scale(.99); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--royal); color: var(--text-invert);
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover:not(:disabled) { background: var(--royal-hover); }

.btn-secondary {
  min-height: 44px;
  background: var(--card); color: var(--royal);
  border: 1.5px solid var(--royal);
  box-shadow: none;
}
.btn-secondary:hover:not(:disabled) { background: var(--royal-subtle); }

.btn-ghost {
  min-height: 44px;
  background: transparent; color: var(--text-muted);
  border: 1.5px solid var(--border);
  box-shadow: none;
}

.btn-sm { min-height: 32px; font-size: 12px; width: auto; padding: 0 var(--s-sm); }

/* --- Chip status --------------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px var(--s-xs);
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip-warning { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning-border); }
.chip-success { background: var(--success-soft); color: var(--success); border: 1px solid rgba(22,163,74,.25); }
.chip-error   { background: var(--error-soft);   color: var(--error);   border: 1px solid var(--error-border); }
.chip-info    { background: var(--info-soft);    color: var(--info);    border: 1px solid rgba(11,79,179,.2); }
.chip-neutral { background: var(--mint-tint);    color: var(--emerald); border: 1px solid var(--mint-border); }

/* --- Formulir ------------------------------------------------------------ */

.field { display: flex; flex-direction: column; gap: 6px; }

.label { font-size: 13px; font-weight: 600; color: var(--text); }

.input, .select, .textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  /* 16px, bukan 15px: di bawah 16px Safari iOS memperbesar halaman sendiri
     saat kolom disentuh, dan seluruh tata letak melompat. */
  font-size: 16px;
  font-family: var(--font);
  color: var(--text);
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  appearance: none;
}
.textarea { padding: 12px 14px; min-height: 88px; line-height: 20px; resize: vertical; }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--royal);
  box-shadow: 0 0 0 3px rgba(11,79,179,.12);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--error);
}

/* Lencana satuan yang menempel di kanan kolom jumlah galon. */
.input-affix { position: relative; }
.input-affix .input { padding-right: 68px; }
.input-affix .affix {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-subtle); pointer-events: none;
}

.field-error { color: var(--error); font-size: 12px; font-weight: 600; }
.field-hint  { color: var(--text-subtle); font-size: 12px; }

/* --- Area unggah --------------------------------------------------------- */

.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 24px 16px;
  border: 2px dashed #93C5BA;
  border-radius: 14px;
  background: var(--surface-sunken);
  cursor: pointer;
  text-align: center;
}
.dropzone:hover { border-color: var(--royal); background: var(--royal-subtle); }
.dropzone input[type="file"] { display: none; }

/* --- Spanduk ------------------------------------------------------------- */

.banner {
  display: flex; align-items: flex-start; gap: var(--s-xs);
  padding: var(--s-sm);
  border-radius: var(--r-md);
  font-size: 13px; line-height: 18px;
}
.banner-warning { background: var(--warning-soft); color: #92400E; border: 1px solid var(--warning-border); }
.banner-error   { background: var(--error-soft);   color: var(--error-text); border: 1px solid var(--error-border); }
.banner-success { background: var(--success-soft); color: #14532D; border: 1px solid rgba(22,163,74,.25); }
.banner-info    { background: var(--info-soft);    color: #1E3A8A; border: 1px solid rgba(11,79,179,.2); }

/* --- Baris daftar -------------------------------------------------------- */

.list { display: flex; flex-direction: column; }
.list-item {
  display: flex; align-items: center; gap: var(--s-xs);
  padding: var(--s-sm) 0;
  border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: none; }
.list-item .grow { flex: 1; min-width: 0; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Lencana level ------------------------------------------------------- */

.tier-badge {
  width: 36px; height: 36px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #FFF4D9;
  background: linear-gradient(135deg, #F5D49B, #C88A4E 45%, #7B461D);
  border: 1px solid rgba(253,230,186,.5);
  flex-shrink: 0;
}

/* --- Laci navigasi ------------------------------------------------------- */

/* Dibuka lewat :target sehingga tetap berfungsi tanpa JavaScript. */
.drawer {
  position: fixed; inset: 0; z-index: 50;
  visibility: hidden; opacity: 0;
  transition: opacity .2s ease, visibility .2s ease;
}
.drawer:target { visibility: visible; opacity: 1; }

.drawer-scrim { position: absolute; inset: 0; background: rgba(10,28,24,.45); }

.drawer-panel {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: min(280px, 82vw);
  background: var(--card);
  box-shadow: var(--shadow-2);
  padding: var(--s-md);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--s-md));
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-md));
  display: flex; flex-direction: column; gap: var(--s-xs);
  transform: translateX(-100%);
  transition: transform .22s cubic-bezier(.16,1,.3,1);
  overflow-y: auto;
}
.drawer:target .drawer-panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-panel { transition: none; }
}

.drawer-link {
  display: flex; align-items: center; gap: var(--s-xs);
  min-height: 44px; padding: 0 var(--s-sm);
  border-radius: var(--r-md);
  color: var(--text); font-size: 14px; font-weight: 600;
}
.drawer-link:hover { background: var(--mint-tint); text-decoration: none; }
.drawer-link[aria-current="page"] { background: var(--royal-subtle); color: var(--royal); }

/* --- Header -------------------------------------------------------------- */

.appbar {
  display: flex; align-items: center; gap: var(--s-xs);
  padding: var(--s-sm) 0;
}
.icon-btn {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  border: none; background: transparent; color: var(--forest-deep);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-container); }

.avatar {
  width: 36px; height: 36px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--royal); color: var(--text-invert);
  font-weight: 700; font-size: 13px; flex-shrink: 0;
}

/* ========================================================== utilitas ===== */

.hidden { display: none !important; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.full   { width: 100%; }

.mt-xs { margin-top: var(--s-xs); }
.mt-sm { margin-top: var(--s-sm); }
.mt-md { margin-top: var(--s-md); }
.mb-sm { margin-bottom: var(--s-sm); }

/* Hanya untuk pembaca layar — dipakai pada label yang secara visual sudah
   jelas dari konteks tetapi tetap dibutuhkan teknologi bantu. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Indikator HTMX: tampil hanya selama permintaan berjalan. */
.htmx-indicator { opacity: 0; transition: opacity .15s ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }