/* ============================================================
   POLISH PASCA-TINJAUAN ZF (18 Sep 2026)
   ------------------------------------------------------------
   Berdasarkan screenshot Beranda dari ZF. Yang diperbaiki:
     1. Dua banner bantuan (Info + WhatsApp) digabung jadi satu baris.
     2. Chip pengguna di top bar disembunyikan di desktop — identitas sudah ada
        di sidebar dan di kartu sapaan (dulu tampil tiga kali).
     3. Kontras label kartu metrik dan kartu ringkasan dinaikkan.
     4. Jarak kartu ringkasan disamakan dengan kartu status.
     5. Footer sidebar diberi ruang bawah + label keluar.
     6. Kondisi ringkasan kosong diganti ajakan singkat (.summary-empty).
   ============================================================ */

/* 1. Banner bantuan gabungan: ikon + teks + tombol WhatsApp dalam satu baris */
.help-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #EAF3FF 0%, #E2EEFF 100%);
  border-radius: 18px; padding: 14px 16px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05);
}
.help-banner:hover { box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10); }
.help-banner .help-icon { font-size: 24px; color: #1553B8; flex: 0 0 auto; }
.help-banner .help-text { flex: 1 1 auto; min-width: 0; }
.help-banner .help-title { font-size: 14px; font-weight: 700; color: #14406F; }
.help-banner .help-sub { font-size: 12px; color: #3C5A7A; margin-top: 2px; }

/* 2. Top bar: di desktop cukup sidebar + kartu sapaan */
@media (min-width: 769px) { .topbar-right .user-chip { display: none; } }

/* 3. Kontras label: angka tetap menonjol, label tetap terbaca */
.status-counter .sc-label { color: #4A5462; }
.status-counter.sc-warm .sc-label { color: #7A3E1E; }
.summary-item .sm-label { color: #55606E; }
.summary-item { background: #F4F7FB; }

/* 4. Jarak kartu ringkasan = jarak kartu status */
.summary-grid { gap: 14px; }
.summary-item { padding: 14px 12px; }

/* 5. Footer sidebar tidak menempel ke bawah */
.sidebar-user { margin-top: auto; }
.logout-btn { margin: 4px 12px 14px; padding: 12px 16px; }
.sidebar-footer { padding-bottom: 8px; }

/* 6. Ringkasan kosong: satu ajakan singkat, bukan enam angka nol */
.summary-empty {
  display: flex; align-items: center; gap: 14px;
  background: #F4F7FB; border-radius: 16px; padding: 16px;
}
.summary-empty .material-symbols-rounded { font-size: 26px; color: #1553B8; flex: 0 0 auto; }
.summary-empty .se-title { font-size: 14px; font-weight: 700; color: var(--v2-ink, #16202E); }
.summary-empty .se-sub { font-size: 12px; color: #55606E; margin-top: 2px; }
.summary-empty .btn { flex: 0 0 auto; }
@media (max-width: 560px) {
  .summary-empty { flex-wrap: wrap; }
  .summary-empty .btn { width: 100%; margin-top: 6px; }
}
/* --- Tambahan setelah tinjauan kedua ------------------------------------ */

/* Tombol "Hubungi" kehilangan gayanya saat banner digabung (aturan lama khusus
   .wa-banner). Sekarang gayanya berdiri sendiri supaya konsisten dengan tombol
   utama aplikasi. */
.wa-btn, button.wa-btn {
  background: linear-gradient(135deg, #1E9D5C 0%, #17834C 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(23, 131, 76, 0.28);
  white-space: nowrap;
}
.wa-btn:hover { filter: brightness(1.06); }

/* Label kartu metrik: lebih gelap lagi supaya lolos kontras di latar pastel */
.status-counter .sc-label { color: #3A4351; font-weight: 600; }
.status-counter.sc-warm .sc-label { color: #6E3417; }

/* Jarak antar blok Beranda: kartu status -> Ringkasan Hari Ini tidak rapat */
.status-counters { margin-bottom: 22px; }
#page-beranda .card-header h3 { margin-top: 2px; }
#page-beranda .summary-grid, #page-beranda .summary-empty { margin-top: 4px; }

/* Kartu ringkasan kosong: beri batas yang terlihat, bukan blok pucat */
.summary-empty { background: #EEF3FA; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.05); }

/* ============================================================
   HALAMAN TAMBAH TRANSAKSI — perbaikan tata letak (permintaan ZF)
   ------------------------------------------------------------
   1. Baris pembayaran jadi grid dua kolom yang rapi: dropdown "Metode
      Pembayaran" dan toggle "Sudah Bayar" punya label masing-masing, tidak lagi
      ada ruang kosong menganggur di sisi kanan.
   2. Kartu ringkasan (Subtotal/Total + tombol Simpan) dibuat selebar kartu
      lainnya: sebelumnya bar-nya full-width (margin negatif) sehingga terlihat
      lebih lebar daripada kartu di atasnya.
   ============================================================ */

.tt-pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.tt-pay-grid .form-field select { width: 100%; }
@media (max-width: 560px) {
  .tt-pay-grid { grid-template-columns: 1fr; }   /* HP: bertumpuk, tetap rapi */
}

/* Toggle "Sudah Bayar" versi aplikasi ini */
.tt-toggle-box {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 12px 14px; border-radius: 14px; background: #F4F7FB;
  border: 1px solid rgba(16, 24, 40, 0.06);
}
.tt-toggle-box:hover { background: #EEF3FA; }
.tt-toggle-box input { position: absolute; opacity: 0; width: 0; height: 0; }
.tt-toggle-track {
  width: 46px; height: 26px; border-radius: 999px; background: #C9D2DE;
  position: relative; flex: 0 0 auto; transition: background 0.2s ease;
}
.tt-toggle-knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
  transition: transform 0.2s ease;
}
.tt-toggle-box input:checked + .tt-toggle-track { background: #1E9D5C; }
.tt-toggle-box input:checked + .tt-toggle-track .tt-toggle-knob { transform: translateX(20px); }
.tt-toggle-text { font-size: 13px; font-weight: 600; color: #3A4351; }

/* Kartu ringkasan: lebar sama dengan kartu lain, melayang di bawah */
.tt-summary {
  max-width: 640px;
  margin: 18px auto 0;
  padding: 16px;
  background: #FFFFFF;
  border: none;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12);
  position: sticky;
  bottom: 12px;
  z-index: 50;
}
.tt-summary-inner { max-width: none; margin: 0; }
.tt-summary-row { font-size: 14px; color: #4A5462; }
.tt-summary-row.total { font-size: 18px; color: var(--v2-ink, #16202E); border-top: 1px solid rgba(16, 24, 40, 0.08); }
.tt-summary .btn-block { width: 100%; margin-top: 12px; }
@media (max-width: 768px) {
  .tt-summary { margin: 16px 0 0; bottom: 84px; border-radius: 18px; }  /* di atas bottom nav */
}

/* --- Perbaikan setelah pengukuran langsung -------------------------------
   Dua sebab yang terbukti dari pengukuran elemen:
   1. `.form-field label { display:block }` di app.css lebih spesifik daripada
      `.tt-toggle-box`, jadi aturan flex-nya kalah -> label bertumpuk dan
      tombol toggle tidak sejajar teks. Sekarang selector dibuat spesifik.
   2. `.tt-toggle-track` adalah <span> (inline) sehingga `width` diabaikan:
      lebarnya 0 px dan tombol putihnya menimpa tulisan "Sudah Bayar".
      Ditambah display:inline-block + flex-shrink:0.
   ------------------------------------------------------------------------ */
.form-field .tt-toggle-box {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.form-field .tt-toggle-track {
  display: inline-block;
  flex: 0 0 46px;
  width: 46px;
  height: 26px;
  position: relative;
}
.form-field .tt-toggle-knob {
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
}
.form-field .tt-toggle-text { white-space: nowrap; }
/* --- Konsistensi kartu di halaman Tambah Transaksi -----------------------
   Kartu isi (Pelanggan, Layanan, Parfum, Pembayaran) dan kartu ringkasan
   sekarang memakai gaya yang sama: tanpa garis tepi, sudut membulat, bayangan
   lembut. Sebelumnya kartu isi bergaris tipis sedangkan ringkasan tidak.
   ------------------------------------------------------------------------ */
.tt-section {
  border: none !important;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
  background: #FFFFFF;
}
.tt-summary { box-shadow: 0 4px 18px rgba(16, 24, 40, 0.10); }/* --- Modal isian generik (pengganti popup bawaan browser) ---------------
   Selalu tampil di tengah layar, di atas latar gelap, dengan lebar nyaman.
   ---------------------------------------------------------------------- */
.ask-modal .modal-body { max-height: 65vh; overflow-y: auto; }
.ask-modal .form-field { margin-bottom: 14px; }
.ask-modal .form-field label { font-size: 12px; font-weight: 600; color: #4A5462; margin-bottom: 6px; display: block; }
.ask-modal .form-field input,
.ask-modal .form-field select,
.ask-modal .form-field textarea {
  width: 100%; border-radius: 14px; border: 1px solid rgba(16, 24, 40, 0.12);
  padding: 12px 14px; font-size: 14px; background: #fff;
}
.ask-modal .form-field input:focus,
.ask-modal .form-field select:focus,
.ask-modal .form-field textarea:focus {
  outline: none; border-color: #1553B8; box-shadow: 0 0 0 4px rgba(21, 83, 184, 0.12);
}
.ask-modal .ask-help { font-size: 11.5px; color: #5B6472; margin-top: 6px; }
.ask-modal .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid rgba(16, 24, 40, 0.06); }

/* --- Daftar pelanggan: kartu di HP, tabel rapi di desktop --------------- */
@media (min-width: 900px) {
  .cust-desktop-table { display: block; }
  .cust-mobile-list { display: none; }
  .cust-desktop-table table { width: 100%; border-collapse: collapse; }
  .cust-desktop-table th {
    text-align: left; font-size: 12px; font-weight: 600; color: #5B6472;
    padding: 10px 12px; background: #F4F7FB; border-radius: 10px;
  }
  .cust-desktop-table td { padding: 12px; font-size: 14px; border-bottom: 1px solid rgba(16, 24, 40, 0.05); }
  .cust-desktop-table tr:hover td { background: #FAFCFF; }
  .cust-desktop-table .ct-actions { white-space: nowrap; }
}
@media (max-width: 899px) {
  .cust-desktop-table { display: none; }
  .cust-mobile-list { display: block; }
}/* Halaman Data Pelanggan: di desktop dilebarkan supaya tabel muat */
@media (min-width: 900px) {
  #page-data-pelanggan { max-width: 1120px !important; }
  .cust-search .search-row { max-width: 420px; }
}
.cust-table-note { font-size: 12px; color: #5B6472; padding: 10px 4px 0; }