/* =====================================================================
   Mikode POS — UI/UX Fase 2: halaman Pengaturan (pengaturan.html) saja.
   Dimuat SETELAH css/mikode-theme.css dari pengaturan.html. Semua warna,
   spasi, ukuran huruf & radius dari token design system — tidak ada hex
   baru. Selector dibatasi body.pg-pengaturan agar halaman lain tidak
   terpengaruh. Menggantikan blok <style> lama di pengaturan.html
   (.setting-box/.setting-row/.toggle-container/.input-pct).
   ===================================================================== */

/* ---------- Panel pengaturan (.ui-card) ---------- */
body.pg-pengaturan .setting-card{max-width:500px}
body.pg-pengaturan .setting-title{
  margin:0 0 var(--sp-4,16px);
  font-size:var(--fs-16,16px);
  line-height:1.25;
  color:var(--ink,var(--text,#0A1F33));
}
body.pg-pengaturan .setting-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3,12px);
  margin-bottom:var(--sp-4,16px);
  padding-bottom:var(--sp-3,12px);
  border-bottom:1px dashed var(--line,rgba(10,31,51,.10));
}
body.pg-pengaturan .setting-check{
  min-height:44px;
  font-weight:600;
  font-size:var(--fs-14,14px);
}
body.pg-pengaturan .setting-check label{cursor:pointer}
body.pg-pengaturan .setting-pct{
  display:flex;
  align-items:center;
  gap:var(--sp-2,8px);
  flex:none;
}
body.pg-pengaturan .input-pct{
  width:70px;
  min-height:44px;
  text-align:center;
  padding:var(--sp-1,4px) var(--sp-2,8px);
}

/* ---------- Shell: harmonisasi pola .ui-side/.ui-topbar dengan CSS lama ----------
   Dicerminkan dari css/dashboard-ui.css: .ui-side tema menjadi drawer
   fixed pada <=980px, sedangkan tata letak lama memakai sidebar statis
   pada >=768px dan drawer .active pada <=767px (handleSidebarToggle).
   Rentang 768-980px dikembalikan ke perilaku lama agar navigasi tidak
   hilang; di <=767px kedua pola sama-sama menampilkan lewat .active. */
@media (min-width:768px) and (max-width:980px){
  body.pg-pengaturan .ui-side{position:sticky;transform:none}
}
/* Header mobile lama tetap gelap (logo putih) & tetap tersembunyi di
   desktop seperti sebelumnya, walau membawa class pola .ui-topbar. */
body.pg-pengaturan .mobile-header.ui-topbar{
  background:var(--side-bg,#0A1F33);
  color:var(--side-ink,#fff);
  border-bottom:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  min-height:0;
}
@media (min-width:768px){
  body.pg-pengaturan .mobile-header.ui-topbar{display:none}
}

/* Chip tenant di kaki sidebar (.ui-side-foot/.ui-tenant-chip dari
   mikode-theme.css) diisi role-guard.js lewat #namaPerusahaanBadge,
   #userRoleBadge & #infoLangganan; sembunyikan bagian yang masih kosong. */
body.pg-pengaturan .ui-tenant-chip span:empty{display:none}
body.pg-pengaturan .ui-tenant-chip:not(:has(span:not(:empty))){display:none}

/* Ikon SVG pada tombol shell (menu / tutup / tema). */
body.pg-pengaturan .btn-toggle-sidebar,
body.pg-pengaturan .btn-close-sidebar{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2,8px);
}
body.pg-pengaturan .btn-toggle-sidebar svg,
body.pg-pengaturan .btn-close-sidebar svg{width:18px;height:18px;flex-shrink:0}
body.pg-pengaturan .theme-toggle-btn svg{width:20px;height:20px;display:block}

/* Fase 3: kartu Kelola Outlet. */
body.pg-pengaturan .pg-outlet-note{font-size:var(--fs-14,14px);line-height:1.5;color:var(--muted,#44596D);margin:0 0 var(--sp-4,16px)}
body.pg-pengaturan .pg-outlet-list{list-style:none;margin:0 0 var(--sp-5,20px);padding:0;display:flex;flex-direction:column;gap:var(--sp-3,12px)}
body.pg-pengaturan .pg-outlet-item{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3,12px);border:1px solid var(--line,rgba(10,31,51,.10));border-radius:var(--r-md,12px);padding:var(--sp-3,12px) var(--sp-4,16px)}
body.pg-pengaturan .pg-outlet-info{display:flex;flex-direction:column;gap:var(--sp-1,4px);font-size:var(--fs-14,14px)}
body.pg-pengaturan .pg-outlet-info>span:not(.ui-badge){color:var(--muted,#44596D);font-size:var(--fs-13,13px)}
body.pg-pengaturan .pg-outlet-aksi{display:flex;gap:var(--sp-2,8px);flex-shrink:0}
body.pg-pengaturan .pg-outlet-kosong{font-size:var(--fs-14,14px);color:var(--muted,#44596D)}
body.pg-pengaturan .pg-outlet-form .ui-field{margin-bottom:var(--sp-3,12px)}

/* Kartu Paket & Masa Berlaku (v26) */
body.pg-pengaturan .paket-info-row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3,12px);padding:8px 0;border-bottom:1px dashed var(--line,rgba(10,31,51,.12))}
body.pg-pengaturan .paket-info-row>span{color:var(--faint,var(--text-faint,#5A6E82))}
body.pg-pengaturan .paket-info-sisa{color:var(--faint,var(--text-faint,#5A6E82));font-weight:400}
body.pg-pengaturan .paket-info-cta{margin-top:14px}

/* ---------- QRIS statis milik tenant (v37) ---------- */
.pg-pengaturan .qris-statis-img { width: 180px; height: 180px; object-fit: contain; background: #fff; border: 1px solid var(--k-line, rgba(10,31,51,.12)); border-radius: 12px; }
.pg-pengaturan .qris-editor-frame { position: relative; width: min(320px, 82vw); aspect-ratio: 1/1; overflow: hidden; border: 2px dashed var(--brand); border-radius: 12px; background: #0A1F33; touch-action: none; margin-top: 10px; }
.pg-pengaturan .qris-editor-frame img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; }