/* Mikode POS — UI/UX Fase 2: halaman Laporan (laporan.html) saja.
   Dimuat SETELAH css/mikode-theme.css dari laporan.html. Aturan layout
   grafik yang dulu berupa <style> inline di <head> laporan.html pindah
   ke sini (class lp-*). Semua warna dari token design system; tiga
   aksen terang di bawah khusus teks di atas baris total yang gelap
   (setara varian *-text mode gelap di mikode-theme.css).
   Selector dibatasi body.pg-laporan agar halaman lain tidak terpengaruh. */
body.pg-laporan{
  --lp-muted:var(--muted,var(--text-muted,#44596D));
  --lp-faint:var(--faint,var(--text-faint,#5A6E82));
  --lp-line:var(--line,rgba(10,31,51,.10));
  --lp-on-dark:#E2E8F0;
  --lp-amber-terang:#FBBF24;
  --lp-hijau-terang:#4ADE80;
}

/* ---------- Shell: harmonisasi pola .ui-side/.ui-topbar dengan CSS lama
   (dicerminkan dari css/dashboard-ui.css Fase 1) ---------- */
@media (min-width:768px) and (max-width:980px){
  body.pg-laporan .ui-side{position:sticky;transform:none}
}
body.pg-laporan .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-laporan .mobile-header.ui-topbar{display:none}
}
body.pg-laporan .ui-tenant-chip span:empty{display:none}
body.pg-laporan .ui-tenant-chip:not(:has(span:not(:empty))){display:none}
body.pg-laporan .btn-toggle-sidebar,
body.pg-laporan .btn-close-sidebar{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2,8px);
}
body.pg-laporan .btn-toggle-sidebar svg,
body.pg-laporan .btn-close-sidebar svg{width:18px;height:18px;flex-shrink:0}
body.pg-laporan .theme-toggle-btn svg{width:20px;height:20px;display:block}

/* ---------- Kepala & bilah filter (dulu inline style di HTML) ---------- */
body.pg-laporan .lp-page-title{
  font-size:var(--fs-20,20px);
  margin-bottom:var(--sp-3,12px);
}
body.pg-laporan .lp-filter{
  display:flex;
  gap:var(--sp-3,12px);
  padding:var(--sp-3,12px);
  flex-wrap:wrap;
  align-items:center;
  background:var(--card,#fff);
  border:1px solid var(--lp-line);
  border-radius:var(--r-md,12px);
  box-shadow:var(--sh-card,0 1px 2px rgba(10,31,51,.04));
  margin-bottom:var(--sp-4,16px);
}
body.pg-laporan .lp-filter-label{
  font-size:var(--fs-12,12px);
  font-weight:600;
  color:var(--lp-muted);
}
body.pg-laporan .lp-filter .ui-select{width:auto;min-width:130px}
body.pg-laporan .lp-filter .ui-field{margin-bottom:0}
body.pg-laporan .lp-export-btns{display:inline-flex;gap:var(--sp-2,8px);flex-wrap:wrap}
body.pg-laporan .lp-export-btns[hidden],
body.pg-laporan [data-fitur="export"][hidden]{display:none!important}

/* ---------- Kisi laporan & kartu grafik (dulu <style> inline di head) ---------- */
body.pg-laporan .lp-grid{display:flex;gap:var(--sp-4,16px);flex-wrap:wrap;margin-top:var(--sp-4,16px)}
body.pg-laporan .lp-chart-card{
  flex:1;
  min-width:280px;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:0;
}
body.pg-laporan .lp-summary-card{align-items:stretch;flex:1}
body.pg-laporan .lp-chart-title{
  margin:0;
  color:var(--ink,var(--text,#0A1F33));
  font-size:var(--fs-14,14px);
  display:flex;
  align-items:center;
  gap:var(--sp-2,8px);
}
body.pg-laporan .lp-summary-card .lp-chart-title{margin-bottom:var(--sp-3,12px)}
body.pg-laporan .lp-title-ikon{display:inline-flex;color:var(--brand-ink,var(--brand,#144262))}
body.pg-laporan .lp-title-ikon svg{width:18px;height:18px}
body.pg-laporan .lp-chart-wrap{width:100%;max-width:280px;margin-top:var(--sp-3,12px)}
body.pg-laporan .lp-chart-wrap-bar{width:100%;min-height:250px;margin-top:var(--sp-3,12px)}
@media (max-width:640px){
  body.pg-laporan .lp-chart-card{min-width:0;width:100%}
}

/* ---------- Ringkasan Rugi Laba (v46): statement kartu ----------
   Menggantikan tabel dua kolom lama: di HP kolom nilainya menyempit
   sampai angka membungkus per karakter. Struktur baru = panel total
   navy (hero laba bersih + bar komposisi) lalu blok per kategori.
   Semua warna dari token tema agar mode gelap tetap benar; angka
   TIDAK PERNAH membungkus (nowrap + tabular-nums). */
body.pg-laporan .lp-skel-line{display:block;width:100%;height:14px}
body.pg-laporan .lp-num{white-space:nowrap;font-variant-numeric:tabular-nums}
body.pg-laporan .lp-statement .lp-hpp{color:var(--danger-text,var(--danger,#B42318))}
body.pg-laporan .lp-statement .lp-laba{color:var(--success-text,var(--success,#17803D))}
body.pg-laporan .lp-statement .lp-rugi{color:var(--danger-text,var(--danger,#B42318))}

/* Panel total: blok brand-deep di semua mode (aksen terang khusus di
   atas navy memakai token --lp-* di kepala berkas ini). */
body.pg-laporan .lp-total{
  background:var(--brand-deep,#0A1F33);color:var(--lp-on-dark);
  border:1px solid var(--line,rgba(10,31,51,.10));border-radius:14px;
  padding:16px;margin-bottom:4px;
}
body.pg-laporan .lp-total-label{
  margin:0;font-size:var(--fs-12,12px);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--lp-on-dark);opacity:.75;
}
body.pg-laporan .lp-total-nilai{
  margin:4px 0 0;font-size:var(--fs-30,30px);line-height:1.15;font-weight:800;
  color:var(--lp-hijau-terang);letter-spacing:-.01em;
}
body.pg-laporan .lp-total-nilai.is-neg{color:#F87171}
body.pg-laporan .lp-total-margin{margin:2px 0 0;font-size:var(--fs-12,12px);color:var(--lp-on-dark);opacity:.75}
body.pg-laporan .lp-bar{
  display:flex;height:8px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.14);margin:12px 0 6px;
}
body.pg-laporan .lp-bar-hpp{background:var(--lp-amber-terang)}
body.pg-laporan .lp-bar-laba{background:var(--lp-hijau-terang)}

/* Baris uraian | nilai: label boleh membungkus, nilai tidak pernah. */
body.pg-laporan .lp-row{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding:7px 0;font-size:var(--fs-14,14px);
}
body.pg-laporan .lp-row>span{color:var(--muted,var(--text-muted,#44596D))}
body.pg-laporan .lp-row>b{font-weight:600;text-align:right}
body.pg-laporan .lp-row-gelap>span{color:var(--lp-on-dark);opacity:.85}
body.pg-laporan .lp-row-gelap>b{color:#fff}
body.pg-laporan .lp-row-gelap .lp-hpp-terang{color:var(--lp-amber-terang)}
body.pg-laporan .lp-row-laba{border-top:1px solid var(--line,rgba(10,31,51,.10));font-weight:700}
body.pg-laporan .lp-row-laba>span{color:var(--text,#0A1F33);font-weight:700}
body.pg-laporan .lp-row-laba>b{font-weight:800}

body.pg-laporan .lp-rincian-label{
  margin:18px 0 2px;text-align:center;font-size:var(--fs-12,12px);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted,var(--text-muted,#44596D));
}

/* Blok per kategori. */
body.pg-laporan .lp-kat{padding:12px 0 10px;border-bottom:1px solid var(--line,rgba(10,31,51,.10))}
body.pg-laporan .lp-kat:last-child{border-bottom:0}
body.pg-laporan .lp-kat-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:2px;
}
body.pg-laporan .lp-kat-nama{font-weight:800;font-size:var(--fs-15,15px);color:var(--text,#0A1F33)}
body.pg-laporan .lp-kat-laba{font-weight:800;font-size:var(--fs-15,15px);color:var(--success-text,var(--success,#17803D))}
body.pg-laporan .lp-kat-laba.is-neg{color:var(--danger-text,var(--danger,#B42318))}
body.pg-laporan .lp-margin{
  display:flex;justify-content:space-between;font-size:var(--fs-12,12px);
  color:var(--muted,var(--text-muted,#44596D));padding-top:2px;
}

/* Perbaikan QA visual: sama seperti transaksi — netralkan flex lama pada select
   di dalam .ui-field bilah filter agar tingginya normal (44px). */
body.pg-laporan .lp-filter .ui-field select { flex: 0 0 auto; }

/* Fase 3: banner peringatan HPP kosong. */
body.pg-laporan .lp-hpp-banner {
  display: flex;
  gap: var(--sp-3, 12px);
  align-items: flex-start;
  background: var(--warn-soft, #FEF3E2);
  color: var(--warn-text, #93370D);
  border: 1px solid var(--warn, #DC6803);
  border-radius: var(--r-md, 12px);
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  margin-bottom: var(--sp-4, 16px);
  font-size: var(--fs-13, 13px);
  line-height: 1.5;
}
body.pg-laporan .lp-hpp-banner[hidden] { display: none !important; }
body.pg-laporan .lp-hpp-banner a { color: inherit; font-weight: 700; }
body.pg-laporan .lp-hpp-ikon { display: inline-flex; flex-shrink: 0; margin-top: 2px; }
body.pg-laporan .lp-hpp-ikon svg { width: 18px; height: 18px; }

/* (Blok "pernyataan rapi" v37 untuk .lp-summary-table dihapus di v46 —
   struktur tabelnya digantikan .lp-statement di atas.) */
@media (max-width:640px){
  body.pg-laporan .lp-chart-card{flex:1 1 100%}
}

/* ---------- Modernisasi v47: legenda donat + daftar peringkat menu ---------- */
body.pg-laporan .lp-legend{margin-top:14px;display:flex;flex-direction:column}
body.pg-laporan .lp-legend-row{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line,rgba(10,31,51,.10));font-size:var(--fs-14,14px);
}
body.pg-laporan .lp-legend-row:last-child{border-bottom:0}
body.pg-laporan .lp-legend-dot{flex:none;width:10px;height:10px;border-radius:3px}
body.pg-laporan .lp-legend-nama{flex:1;min-width:0;font-weight:600;color:var(--text,#0A1F33)}
body.pg-laporan .lp-legend-val{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text,#0A1F33)}
body.pg-laporan .lp-legend-persen{
  flex:none;min-width:44px;text-align:center;padding:2px 8px;border-radius:99px;
  background:var(--surface,#EAF1F7);font-size:var(--fs-12,12px);font-weight:700;color:var(--muted,var(--text-muted,#44596D));
}

body.pg-laporan .lp-rank{display:flex;flex-direction:column}
body.pg-laporan .lp-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-laporan .lp-rank-row:last-child{border-bottom:0}
body.pg-laporan .lp-rank-no{
  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-laporan .lp-rank-row:nth-child(1) .lp-rank-no{background:var(--brand,#144262);color:#fff}
body.pg-laporan .lp-rank-row:nth-child(2) .lp-rank-no{background:var(--accent,#3E9BE6);color:#fff}
body.pg-laporan .lp-rank-row:nth-child(3) .lp-rank-no{background:var(--accent-soft,rgba(62,155,230,.14));color:var(--brand-ink,#144262)}
body.pg-laporan .lp-rank-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
body.pg-laporan .lp-rank-nama{font-weight:600;font-size:var(--fs-14,14px);color:var(--text,#0A1F33)}
body.pg-laporan .lp-rank-sub{font-size:var(--fs-12,12px);color:var(--muted,var(--text-muted,#44596D))}
body.pg-laporan .lp-rank-bar{height:5px;border-radius:99px;background:var(--surface,#EAF1F7);overflow:hidden;margin-top:3px}
body.pg-laporan .lp-rank-bar>span{display:block;height:100%;border-radius:99px;background:var(--accent,#3E9BE6)}
body.pg-laporan .lp-rank-val{font-weight:800;font-size:var(--fs-15,15px);white-space:nowrap;color:var(--text,#0A1F33)}