/* Mikode POS — UI/UX Fase 1: halaman Dashboard (dashboard.html) saja.
   Dimuat SETELAH css/mikode-theme.css dari dashboard.html. Semua warna,
   spasi, ukuran huruf & radius dari token design system (dengan fallback
   ke nama token lama --mk-* / --text-* yang sudah ada sebelumnya).
   Selector dibatasi body.pg-dashboard agar halaman lain tidak terpengaruh. */
body.pg-dashboard{
  --dash-muted:var(--muted,var(--text-muted,#44596D));
  --dash-faint:var(--faint,var(--text-faint,#5A6E82));
  --dash-line:var(--line,rgba(10,31,51,.10));
}

/* ---------- Kepala halaman ---------- */
body.pg-dashboard .dash-head{margin-bottom:var(--sp-6,24px)}
body.pg-dashboard .dash-head h1{
  margin:0;
  font-family:var(--font-display,'Space Grotesk',sans-serif);
  font-size:var(--fs-24,24px);
  line-height:1.25;
  color:var(--ink,var(--text,#0A1F33));
}
body.pg-dashboard .dash-head p{
  margin:var(--sp-1,4px) 0 0;
  color:var(--dash-muted);
  font-size:var(--fs-14,14px);
  line-height:1.5;
}
body.pg-dashboard .dash-section{margin-top:var(--sp-6,24px)}

/* ---------- KPI (.ui-kpi) ---------- */
body.pg-dashboard .ui-kpi{
  display:flex;
  flex-direction:column;
  gap:var(--sp-1,4px);
  justify-content:center;
}
body.pg-dashboard .ui-kpi-label{
  font-size:var(--fs-12,12px);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--dash-muted);
}
body.pg-dashboard .ui-kpi-value{
  font-family:var(--font-display,'Space Grotesk',sans-serif);
  font-size:var(--fs-30,30px);
  line-height:1.25;
  font-weight:700;
  color:var(--ink,var(--text,#0A1F33));
}
/* Delta memakai modifier baku .ui-kpi-delta--success/--danger dari
   mikode-theme.css; halaman ini tidak mengarang angka delta sendiri
   karena API ringkasan tidak mengirim data perbandingan. */

/* ---------- Modernisasi v47: ikon KPI, pil delta, daftar peringkat ---------- */
body.pg-dashboard .ui-kpi{position:relative}
body.pg-dashboard .kpi-ikon{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
}
body.pg-dashboard .kpi-ikon svg{width:20px;height:20px}
body.pg-dashboard .kpi-ikon--accent{background:var(--accent-soft,rgba(62,155,230,.14));color:var(--accent,#3E9BE6)}
body.pg-dashboard .kpi-ikon--success{background:var(--success-soft,#ECFDF5);color:var(--success-text,var(--success,#17803D))}
body.pg-dashboard .kpi-ikon--warn{background:var(--warn-soft,#FEF3E2);color:var(--warn-text,#B54708)}
body.pg-dashboard .ui-kpi-delta{
  align-self:flex-start;padding:2px 9px;border-radius:99px;
  background:var(--surface,#EAF1F7);font-size:var(--fs-12,12px);font-weight:600;
}
body.pg-dashboard .ui-kpi-delta--success{background:var(--success-soft,#ECFDF5)}
body.pg-dashboard .ui-kpi-delta--danger{background:var(--danger-soft,#FEE2E2)}

body.pg-dashboard .dash-list{display:flex;flex-direction:column}
body.pg-dashboard .dash-rank-row{
  display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line,rgba(10,31,51,.10));
}
body.pg-dashboard .dash-rank-row:last-child{border-bottom:0}
body.pg-dashboard .dash-rank{
  flex:none;width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-13,13px);font-weight:800;background:var(--surface,#EAF1F7);color:var(--muted,var(--text-muted,#44596D));
}
body.pg-dashboard .dash-rank-row:nth-child(1) .dash-rank{background:var(--brand,#144262);color:#fff}
body.pg-dashboard .dash-rank-row:nth-child(2) .dash-rank{background:var(--accent,#3E9BE6);color:#fff}
body.pg-dashboard .dash-rank-row:nth-child(3) .dash-rank{background:var(--accent-soft,rgba(62,155,230,.14));color:var(--brand-ink,#144262)}
body.pg-dashboard .dash-rank-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
body.pg-dashboard .dash-rank-nama{font-weight:600;font-size:var(--fs-14,14px);color:var(--ink,var(--text,#0A1F33))}
body.pg-dashboard .dash-rank-bar{height:5px;border-radius:99px;background:var(--surface,#EAF1F7);overflow:hidden}
body.pg-dashboard .dash-rank-bar>span{display:block;height:100%;border-radius:99px;background:var(--accent,#3E9BE6)}
body.pg-dashboard .dash-rank-val{font-weight:800;font-size:var(--fs-14,14px);color:var(--success-text,var(--success,#17803D));white-space:nowrap}

body.pg-dashboard .dash-tx-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line,rgba(10,31,51,.10));
}
body.pg-dashboard .dash-tx-row:last-child{border-bottom:0}
body.pg-dashboard .dash-tx-main{display:flex;flex-direction:column;gap:1px;min-width:0}
body.pg-dashboard .dash-tx-main b{font-size:var(--fs-14,14px);color:var(--ink,var(--text,#0A1F33))}
body.pg-dashboard .dash-tx-main .dash-muted{font-size:var(--fs-12,12px)}
body.pg-dashboard .dash-tx-row .dash-total{font-weight:800;font-size:var(--fs-14,14px);color:var(--ink,var(--text,#0A1F33));white-space:nowrap}

/* ---------- Kartu & judul seksi ---------- */
body.pg-dashboard .dash-card-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-dashboard .dash-chart-wrap{position:relative;width:100%;height:300px}
body.pg-dashboard .dash-double{display:flex;gap:var(--sp-5,20px);flex-wrap:wrap}
body.pg-dashboard .dash-grow{flex:1;min-width:300px}
@media (max-width:640px){
  body.pg-dashboard .dash-grow{min-width:0;width:100%}
  body.pg-dashboard .dash-chart-wrap{height:240px}
}

/* ---------- Kartu di dalam <main>: rapatkan margin bawah bawaan .ui-card ---------- */
body.pg-dashboard main .ui-card{margin-bottom:0}

/* ---------- Tabel (.ui-table; angka memakai .ui-num dari mikode-theme) ---------- */
body.pg-dashboard .dash-center{text-align:center}
body.pg-dashboard .dash-item-name{font-weight:700}
body.pg-dashboard .dash-sold{color:var(--success,#17803D);font-weight:700}
body.pg-dashboard .dash-total{font-weight:700}
body.pg-dashboard .dash-nota{
  font-family:var(--font-mono,ui-monospace,monospace);
  font-weight:700;
  color:var(--brand,#144262);
}
body.pg-dashboard .dash-muted{color:var(--dash-muted)}

/* ---------- State kosong & skeleton ---------- */
body.pg-dashboard .ui-empty{
  text-align:center;
  color:var(--dash-muted);
  padding:var(--sp-5,20px) var(--sp-3,12px);
}
body.pg-dashboard .ui-empty .ui-empty-icon{display:inline-flex;color:var(--dash-faint)}
body.pg-dashboard .ui-empty .ui-empty-icon svg{width:28px;height:28px}
body.pg-dashboard .ui-empty-title{
  margin:var(--sp-2,8px) 0 0;
  font-weight:700;
  color:var(--ink,var(--text,#0A1F33));
  font-size:var(--fs-14,14px);
}
body.pg-dashboard .ui-empty-text{margin:var(--sp-1,4px) 0 0;font-size:var(--fs-13,13px)}
body.pg-dashboard .dash-skel-value{display:block;width:130px;max-width:70%;height:28px}
body.pg-dashboard .dash-skel-line{display:block;width:100%;height:14px}

/* ---------- Shell: harmonisasi pola .ui-side/.ui-topbar dengan CSS lama ----------
   .ui-side dari mikode-theme.css menjadi drawer fixed tersembunyi pada
   <=980px, sedangkan tata letak lama halaman ini (dan handleSidebarToggle)
   memakai sidebar statis pada >=768px dan drawer .active pada <=767px.
   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-dashboard .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-dashboard .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-dashboard .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-dashboard .ui-tenant-chip span:empty{display:none}
body.pg-dashboard .ui-tenant-chip:not(:has(span:not(:empty))){display:none}

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

/* ---------- Fase 3: checklist onboarding ---------- */
body.pg-dashboard .dash-onboarding{margin-bottom:var(--sp-6,24px)}
body.pg-dashboard .dash-onboarding-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3,12px)}
body.pg-dashboard .dash-onboarding-langkah{list-style:none;margin:var(--sp-3,12px) 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2,8px)}
body.pg-dashboard .ob-langkah{display:flex;align-items:center;gap:var(--sp-3,12px);font-size:var(--fs-14,14px);color:var(--ink,var(--text,#0A1F33))}
body.pg-dashboard .ob-langkah-ikon{display:inline-flex;width:24px;height:24px;border-radius:var(--r-full,999px);border:1px solid var(--dash-line);align-items:center;justify-content:center;color:var(--dash-faint);flex-shrink:0}
body.pg-dashboard .ob-langkah-ikon svg{width:14px;height:14px}
body.pg-dashboard .ob-langkah.is-selesai{color:var(--dash-muted)}
body.pg-dashboard .ob-langkah.is-selesai .ob-langkah-ikon{background:var(--success,#17803D);border-color:var(--success,#17803D);color:#fff}
body.pg-dashboard .dash-onboarding-aksi{display:flex;align-items:center;gap:var(--sp-3,12px);flex-wrap:wrap}
body.pg-dashboard .dash-onboarding-catatan{font-size:var(--fs-13,13px);color:var(--dash-muted)}

/* ---------- Fase 3: kartu wawasan ---------- */
body.pg-dashboard .dash-wawasan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5,20px)}
@media (max-width:860px){body.pg-dashboard .dash-wawasan-grid{grid-template-columns:1fr}}
body.pg-dashboard .dash-wawasan-label{font-size:var(--fs-12,12px);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dash-muted)}
body.pg-dashboard .dash-wawasan-nilai{margin:var(--sp-1,4px) 0 0;font-size:var(--fs-14,14px);line-height:1.5;color:var(--ink,var(--text,#0A1F33))}
body.pg-dashboard .dash-wawasan-stok{margin:0;padding-left:var(--sp-5,20px)}
body.pg-dashboard .ob-langkah-teks{flex:1}
body.pg-dashboard .ob-aksi{flex-shrink:0}
body.pg-dashboard .ob-langkah.is-aktif{background:var(--accent-soft,#EAF2F9);border-radius:var(--r-md,12px);padding:6px 8px;margin:0 -8px}
body.pg-dashboard .ob-panah{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;background:var(--accent,#144262);color:#fff;font-size:var(--fs-12,12px);font-weight:700;padding:4px 9px;border-radius:var(--r-full,999px);animation:obPanahGerak 1.1s ease-in-out infinite}
@keyframes obPanahGerak{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* ---------- Rombak HP (v39): panel dashboard menumpuk 1 kolom ----------
   Akar masalah dari rekaman tenant: .dash-grow memakai flex:1
   (flex-basis 0%) sehingga dua panel selalu berbagi baris 50/50 dan
   tidak pernah membungkus ke bawah — teks tabel di dalamnya terjepit
   dan tumpang tindih di layar HP. Di mode ringkas panel WAJIB
   menumpuk penuh. */
@media (max-width:767px), (max-height:520px) and (min-width:768px) and (max-width:1180px){
  body.pg-dashboard .dash-double{flex-direction:column}
  body.pg-dashboard .dash-grow{flex:none;width:100%;min-width:0}
  body.pg-dashboard .dashboard-cards-grid{gap:12px}
  body.pg-dashboard .dash-chart-wrap{height:220px}
  body.pg-dashboard .table-card{overflow:hidden}
}

/* ---------- Kartu Shift Kasir di dashboard (v42) ---------- */
body.pg-dashboard .dash-shift-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
body.pg-dashboard .dash-shift-info{min-width:0}
body.pg-dashboard .dash-shift-status{margin:2px 0 0;color:var(--dash-muted);font-size:var(--fs-14,14px)}
body.pg-dashboard .dash-shift-status b{color:var(--ink,var(--text,#0A1F33))}
body.pg-dashboard .dash-shift-aksi{display:flex;gap:10px;flex:none}
body.pg-dashboard .dash-shift-aksi .ui-btn{min-height:44px}
body.pg-dashboard .dash-shift-msg-ok{color:var(--mk-success,#17803D)}