/**
 * base-components.css
 * Primitive UI dasar (tombol & form field) yang dipakai BERSAMA oleh builder
 * (app.css / index.html) dan admin (admin.css / admin.html).
 *
 * Sengaja dipisah dari app.css: sebelumnya file ini definisinya nyempil di
 * app.css (file khusus layout builder), padahal admin.html juga memakainya
 * (tombol "Keluar", "Simpan Paket", field form paket langganan, dsb).
 * Akibatnya perubahan tampilan builder di app.css bisa tidak sengaja
 * mengubah/merusak tampilan admin.
 *
 * ATURAN: file ini HANYA boleh berisi primitive generik (tombol, input,
 * textarea, field wrapper) yang benar-benar dipakai kedua sisi. Style yang
 * spesifik untuk builder (canvas, sidebar, block system, dst) tetap di
 * app.css. Style yang spesifik untuk admin (tabel, kartu paket, dst) tetap
 * di admin.css. Kalau ragu suatu class dipakai builder-only, taruh di
 * app.css, bukan di sini.
 *
 * Dipakai oleh: tokens.css (variabel warna/spacing) harus sudah dimuat
 * sebelum file ini.
 */

/* ============== BUTTON ============== */
.btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--elevation-1);
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.btn:hover { background: var(--panel-alt); box-shadow: var(--elevation-2); transform: translateY(-1px); }
.btn:active { transform: scale(0.97) translateY(0); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary {
  background: var(--gradient-signal);
  border-color: var(--signal-deep);
  color: white;
  box-shadow: var(--elevation-signal);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--signal-2), var(--signal-deep) 65%, var(--signal-deep));
  box-shadow: 0 10px 22px rgba(255,106,26,0.34), 0 3px 8px rgba(255,106,26,0.24);
}
/* Alternatif "outline" ke btn-primary: dipakai buat CTA yang perlu jelas
   ketahuan bisa di-tap tapi bukan pilihan utama yang mau ditonjolkan
   (mis. tombol paket Free/Pro di pricingScreen.js/planCards.js, yang
   sebelumnya cuma pakai .btn polos sehingga nyaris tidak kelihatan beda
   dari background kartunya). Border+teks pakai warna aksen supaya tetap
   terbaca sebagai tombol, tanpa bersaing dengan .btn-primary. */
.btn-secondary {
  background: transparent;
  border-color: var(--signal);
  color: var(--signal);
}
.btn-secondary:hover {
  background: color-mix(in srgb, var(--signal) 12%, transparent);
  border-color: var(--signal-deep);
  color: var(--signal-deep);
}
.btn-icon {
  padding: 7px 8px;
  width: 32px;
  justify-content: center;
}
.btn-sm { padding: 5px 9px; font-size: 12px; }
.btn-ghost { background: none; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--panel-alt); box-shadow: none; transform: none; }

/* ============== FORM FIELD ============== */
.field { margin-bottom: var(--sp-4); }
.field label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  margin-bottom: 6px;
}
/* Override supaya label saklar on/off (.switch-row) tetap sejajar (bukan
   numpuk ke bawah) walau dibungkus `.field` — lihat app.css untuk detail
   kasus builder yang melatarbelakangi override ini. */
.field label.switch-row {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.field input[type="text"],
.field input[type="number"],
.field input[type="time"],
.field textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 13.5px;
  box-shadow: var(--elevation-1);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.field input[type="text"]:hover,
.field input[type="number"]:hover,
.field input[type="time"]:hover,
.field textarea:hover { border-color: var(--text-faint); }
.field input[type="text"]:focus,
.field input[type="number"]:focus,
.field input[type="time"]:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--signal);
  background: var(--panel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 16%, transparent), var(--elevation-1);
}
.field input[type="text"]::placeholder,
.field input[type="number"]::placeholder,
.field textarea::placeholder {
  color: var(--text-hint);
  opacity: 0.85;
}
.field input[type="number"] { width: 100%; }
.field textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
/* Jam operasional toko (storeInfoPanel.js): tiap grup (hari kerja/akhir
   pekan) dibungkus jadi kartu kecil sendiri — bukan cuma dipisah garis
   tipis seperti sebelumnya — supaya keduanya kebaca sebagai satu unit
   yang setara & lebih "berisi" secara visual di dalam card sidebar. */
.store-hours-group {
  background: var(--panel-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  transition: opacity var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.store-hours-group:last-child { margin-bottom: 0; }

/* Saklar "Tutup" di dalam kartu grup tidak lagi butuh garis pembatas
   sendiri (kartunya sudah jadi pembatas), jadi override .switch-row umum
   supaya rapat ke bagian atas kartu. */
.store-hours-group .switch-row {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  gap: var(--sp-2);
}
/* Lencana ikon kecil di depan label saklar — bedakan grup hari kerja
   (koper, warna signal) vs akhir pekan (matahari, warna spark) tanpa
   menambah palet warna baru di luar token yang sudah ada. */
.switch-row-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  color: var(--signal);
  border: 1px solid var(--border-soft);
}
.store-hours-group[data-group="weekend"] .switch-row-icon { color: var(--spark); }

/* Grid 2 kolom (bukan flex-wrap) supaya BUKA & TUTUP SELALU sejajar satu
   baris, konsisten di kedua grup (hari kerja & akhir pekan) di semua lebar
   layar — sebelumnya pakai flex-wrap + flex-basis 100px, yang bisa
   "jatuh"/tumpuk jadi 2 baris di grup satu tapi tidak di grup lain
   (tergantung lebar render native time-input), jadi terlihat tidak
   konsisten padahal markup-nya identik. Kolom tengah (sep) auto-width,
   dua field kiri-kanan berbagi rata via minmax(0, 1fr) supaya bisa
   menyusut tanpa memicu wrap. */
.store-hours-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.store-hours-time { min-width: 0; margin-bottom: 0; }
.store-hours-time input { width: 100%; min-width: 0; }
.store-hours-time label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-hint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Pemisah visual "–" antara jam Buka & Tutup — disejajarkan ke tinggi
   input (bukan ke label) lewat align-items: flex-end di .store-hours-row
   + padding-bottom di sini, supaya kelihatan center terhadap kotak jam. */
.store-hours-sep {
  padding-bottom: 10px;
  color: var(--text-faint);
  font-weight: 600;
}

/* Catatan "Tutup di hari kerja/akhir pekan" — muncul menggantikan baris
   jam waktu saklar diaktifkan, supaya kartu tidak terasa "kosong" begitu
   saja saat togglenya nyala (sebelumnya baris jam cuma hilang polos). */
.store-hours-closed-note {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-3);
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-hint);
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
.store-hours-group.is-closed { background: var(--panel); }
.store-hours-group.is-closed .switch-row-icon { opacity: 0.6; }
.store-hours-group.is-closed .store-hours-closed-note { display: flex; }
.char-count {
  display: table;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-hint);
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 2px 8px;
  margin-top: 6px;
}
.char-count.over { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border-soft)); }
.field-hint {
  font-size: 11px;
  color: var(--text-hint);
  margin-top: 6px;
  line-height: 1.5;
  min-height: 14px;
}
.field-hint:empty { display: none; }