/* =====================================================================
   Mikode POS — UI/UX Fase 2: halaman Kelola Akun (akun.html) saja.
   Dimuat SETELAH css/mikode-theme.css dari akun.html. Semua warna, spasi,
   ukuran huruf & radius dari token design system — tidak ada hex baru.
   Selector dibatasi body.pg-akun agar halaman lain tidak terpengaruh.
   Menggantikan blok <style> lama di akun.html (.akun-table/.role-badge/
   .status-dot/.form-grid) yang kini memakai komponen .ui-* dari tema.
   ===================================================================== */

/* ---------- Kepala halaman ---------- */
body.pg-akun .akun-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-3,12px);
  margin-bottom:var(--sp-5,20px);
}
body.pg-akun .akun-title{margin:0}
body.pg-akun .akun-sub{
  margin:var(--sp-1,4px) 0 0;
  color:var(--faint,var(--text-faint,#5A6E82));
  font-size:var(--fs-14,14px);
}
body.pg-akun .akun-note{
  margin:var(--sp-2,8px) 0 0;
  color:var(--faint,var(--text-faint,#5A6E82));
  font-size:var(--fs-13,13px);
}

/* ---------- Tabel akun (.ui-table) ---------- */
body.pg-akun .akun-table{min-width:640px}
body.pg-akun .akun-self{
  color:var(--faint,var(--text-faint,#5A6E82));
  font-size:var(--fs-12,12px);
  font-weight:400;
}
body.pg-akun .akun-status{display:inline-flex;align-items:center;gap:var(--sp-2,8px)}
body.pg-akun .akun-status-dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:var(--r-full,999px);
  background:var(--line-strong,rgba(10,31,51,.20));
  flex:none;
}
body.pg-akun .akun-status-dot.is-aktif{background:var(--success,#17803D)}
body.pg-akun .akun-actions{display:flex;gap:var(--sp-2,8px);flex-wrap:wrap}
body.pg-akun .akun-cell-state{
  text-align:center;
  color:var(--faint,var(--text-faint,#5A6E82));
  padding:var(--sp-5,20px) var(--sp-4,16px);
}
body.pg-akun .akun-cell-state--error{color:var(--danger-text,var(--danger,#B42318))}
body.pg-akun .akun-skel-line{display:block;width:100%;height:14px}

/* ---------- Modal reset password ----------
   .ui-modal tema selalu display:flex (overlay UI.confirm), sedangkan
   modal halaman ini memakai pola lama .modal (display:none, dibuka JS
   lewat style.display) — pola yang sama seperti css/kasir-ui.css. */
body.pg-akun .modal.ui-modal{display:none}
body.pg-akun .akun-modal-card{max-width:420px}
body.pg-akun .akun-modal-title{margin:0}
body.pg-akun .akun-modal-info{
  margin:var(--sp-2,8px) 0 var(--sp-3,12px);
  color:var(--muted,var(--text-muted,#44596D));
  font-size:var(--fs-13,13px);
}
body.pg-akun .akun-form{display:grid;gap:var(--sp-3,12px)}
body.pg-akun .akun-field{margin-bottom:0}
body.pg-akun .akun-form-error{display:none;margin:0}
body.pg-akun .akun-form-error.is-visible{display:block}
body.pg-akun .akun-modal-actions{margin-top: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-akun .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-akun .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-akun .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-akun .ui-tenant-chip span:empty{display:none}
body.pg-akun .ui-tenant-chip:not(:has(span:not(:empty))){display:none}

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

/* Aksi kepala Kelola Akun: info kuota + tombol tambah (v26) */
body.pg-akun .akun-head-aksi{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
body.pg-akun .akun-kuota-info{margin:0;color:var(--faint,var(--text-faint,#5A6E82));font-size:var(--fs-13,13px)}
body.pg-akun .akun-field-note{margin:4px 0 0;color:var(--faint,var(--text-faint,#5A6E82));font-size:var(--fs-12,12px)}

/* ---------- HP: batalkan min-width tabel (mode kartu tema mengambil
   alih di <=640px; min-width 640 membuat kartu selebar 640px dan nilai
   akun terdorong keluar layar — akar "berantakan di HP"). ---------- */
@media (max-width:640px){
  body.pg-akun .akun-table{min-width:0}
  body.pg-akun .akun-table td{overflow-wrap:anywhere}
  body.pg-akun .akun-table td .akun-actions{justify-content:flex-end}
  body.pg-akun .akun-head-aksi{width:100%}
}