/* LAPOR GAS — tata letak desktop (plan.md Fase 5 & 6.9, standar desain #9). Dimuat dengan
   media="(min-width: 1024px)", jadi HP sama sekali tidak menerapkannya.

   POLA (jangan kembali ke "grid otomatis" — tumpukan HP yang dipecah jadi 2–3 kolom membuat daftar
   terbaca zig-zag, baris terlalu lebar, dan sel kosong):
   1. Halaman daftar ber-ringkasan  → DUA PANEL: .lg-panel (ringkasan + tombol, kiri, lengket) dan
      .lg-utama (daftar satu kolom, kanan, dibaca atas→bawah). Pembungkus ini display:contents di HP.
   2. Halaman lain (daftar saja, menu, laporan, admin) → SATU KOLOM di tengah, maks 1120 px.
   3. Form & detail → satu kolom 760 px di tengah.
   4. Ubin menu & statistik → mendatar (ikon kiri, teks rata kiri), bukan ikon kecil di tengah kotak besar. */

:root { --lg-sidebar: 248px; --lg-kepala: 65px; }

/* ── Sidebar: nav bawah HP menjadi menu kiri ─────────────────────────── */
.lg-bottomnav, .lg-bottomnav--desktop {
  display: flex !important; flex-direction: column; justify-content: flex-start; gap: 4px;
  top: var(--lg-kepala); bottom: 0; left: 0; right: auto; width: var(--lg-sidebar);
  padding: 20px 14px; border-top: 0; border-right: 1px solid var(--lg-border); background: #fff; overflow-y: auto;
}
.lg-bottomnav__item { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 14px; width: 100%;
  padding: 12px 16px; border-radius: 12px; font-size: 15px; font-weight: 700; }
.lg-bottomnav__item .material-symbols-outlined { font-size: 22px; }
.lg-bottomnav__item.is-active { background: var(--lg-primary-soft); color: var(--lg-primary); }
.lg-bottomnav__item:hover { background: var(--lg-neutral); }
.lg-bottomnav__item.is-active:hover { background: var(--lg-primary-soft); }
.lg-bottomnav__ikon .lg-notif__jumlah { right: -10px; }

/* ── Area isi di kanan sidebar ───────────────────────────────────────── */
.lg-header__row { max-width: none; padding: 0 28px; }
.lg-main--tab, .lg-main--form, .lg-main--admin.lg-main--tab {
  max-width: none; margin: 0 0 0 var(--lg-sidebar); padding: 32px 40px 56px !important;
}
body:has(.lg-bottomnav) .lg-toast { left: calc(50% + var(--lg-sidebar) / 2); bottom: 28px; }

/* 2. Bawaan: satu kolom di tengah area isi. */
/* Lebar halaman: lihat STANDAR #18 (lg-tata--…) di bagian bawah berkas. */
.lg-main > .lg-stack > .lg-daylabel { margin: 10px 0 -4px; }

/* 1. Dua panel: ringkasan & tombol kiri (lengket saat daftar digulir), daftar kanan. */
.lg-main > .lg-stack:has(> .lg-panel) {
  display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); gap: 24px 32px; align-items: start; }
.lg-stack > .lg-panel { grid-column: 1; display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--lg-kepala) + 24px); }
.lg-stack > .lg-utama { grid-column: 2; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lg-stack:has(> .lg-panel) > :not(.lg-panel, .lg-utama, dialog) { grid-column: 1 / -1; }
.lg-utama > .lg-daylabel { margin: 10px 0 -2px; }
.lg-utama > .lg-daylabel:first-child, .lg-utama > .lg-tabs + .lg-daylabel { margin-top: 0; }
.lg-utama > .lg-section > .lg-section__head h2, .lg-utama > .lg-section > .lg-h2 { margin-top: 0; }
/* Isi panel sempit: kartu uang 2 kolom, ringkasan tidak dipecah. */
.lg-panel .lg-wadahgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-panel .lg-wadahgrid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.lg-panel .lg-hero .lg-display { font-size: 34px; }

.lg-totalbar { left: var(--lg-sidebar); }

/* Ringkasan (hero) selebar halaman: angka besar kiri, kartu kecil berjajar kanan. */
.lg-main > .lg-stack > .lg-hero:has(.lg-hero__grid) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 32px; align-items: center; }
.lg-main > .lg-stack > .lg-hero:has(.lg-hero__grid) > .lg-hero__grid { grid-column: 2; grid-row: 1 / span 4; border-top: 0; padding-top: 0; }
.lg-main > .lg-stack > .lg-hero:has(.lg-hero__grid) > :not(.lg-hero__grid) { grid-column: 1; }

/* 4. Ubin menu & tombol cepat mendatar: ikon berlatar kiri, judul + keterangan rata kiri. */
.lg-menugrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lg-menugrid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lg-main--form .lg-menugrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-menugrid .lg-quick, .lg-quickrow .lg-quick {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 1px; align-content: center;
  justify-items: start; text-align: left; min-height: 76px; padding: 14px 18px; font-size: 14.5px; font-weight: 700; }
.lg-menugrid .lg-quick > .material-symbols-outlined, .lg-quickrow .lg-quick > .material-symbols-outlined {
  grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; background: var(--lg-primary-soft);
  display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.lg-menugrid .lg-quick > small { grid-column: 2; margin-top: 0; font-size: 12.5px; }
.lg-quick:not(:has(small)) { align-items: center; }
.lg-quick:not(:has(small)) > .material-symbols-outlined { grid-row: auto; }
.lg-quickrow { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

/* Statistik mendatar: ikon kiri, label + angka. */
.lg-statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.lg-stat--ikon { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; }
.lg-stat--ikon strong { font-size: 20px; }

.lg-usergrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.lg-wadahgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lg-chart { height: 220px; }

/* ── Beranda: dasbor 2 kolom (penempatan eksplisit) ─────────────────── */
.lg-main > .lg-stack.lg-beranda { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px 28px; align-items: start; max-width: 1440px; }
.lg-main > .lg-stack.lg-beranda > .lg-alert { grid-column: 1 / -1; grid-row: 1; }
.lg-main > .lg-stack.lg-beranda > .lg-hero { grid-column: 1; grid-row: 2; display: block; }
.lg-main > .lg-stack.lg-beranda > .lg-hero > .lg-hero__grid { border-top: 1px solid var(--lg-border); padding-top: 16px; }
.lg-main > .lg-stack.lg-beranda > .lg-quickrow { grid-column: 1; grid-row: 3; }
.lg-main > .lg-stack.lg-beranda > .lg-btn { grid-column: 2; grid-row: 2; align-self: start; width: 100%; }
.lg-main > .lg-stack.lg-beranda > .lg-section { grid-column: 2; grid-row: 2 / span 3; margin-top: 88px; }
.lg-beranda .lg-quickrow .lg-quick { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 8px; }
.lg-beranda .lg-quickrow .lg-quick > .material-symbols-outlined { grid-row: auto; }

/* ── Sheet = dialog tengah; kolom isian tidak terlalu lebar ─────────── */
.lg-sheet { max-width: 560px; border-radius: 22px; margin: auto; max-height: 86vh; }
.lg-sheet .lg-sheet__pegangan { display: none; }

/* ── Hover (desktop punya kursor) ───────────────────────────────────── */
@media (hover: hover) {
  .lg-quick:hover, .lg-aksi:hover, a.lg-txitem:hover, .lg-txitem--tombol:hover, .lg-usertile:hover, .lg-pel:hover, a.lg-timeline-item:hover { background: #FAFBFB; border-color: var(--lg-primary-line); }
  .lg-btn--primary:hover { filter: brightness(1.06); }
  .lg-header__cari:hover { background: var(--lg-primary-soft); }
}

/* ── Landing: 2 kolom, tombol di hero (bukan bar bawah) ──────────────── */
.lg-main--landing { max-width: 1120px; padding: 32px 36px 64px !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "atas atas" "hero fitur" "cta fitur" "ulasan ulasan" "janji janji" "kaki kaki"; gap: 24px 48px; align-items: start;
  grid-template-rows: auto auto 1fr auto auto auto; }
.lg-main--landing > .lg-land-top { grid-area: atas; }
.lg-main--landing > .lg-land-hero { grid-area: hero; padding-top: 24px; }
.lg-main--landing > .lg-land-grid { grid-area: fitur; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-main--landing > .lg-land-ulasan { grid-area: ulasan; }
.lg-main--landing > .lg-land-janji { grid-area: janji; }
.lg-main--landing > .lg-land-foot { grid-area: kaki; }
.lg-land-title { font-size: 44px; }
.lg-land-aksi { position: static; grid-area: cta; align-self: start; max-width: 440px; margin: 0; padding: 20px 0 0; background: transparent; border: 0; }
.lg-main--landing:has(.lg-land-aksi) { padding-bottom: 64px !important; }

/* ── Admin ──────────────────────────────────────────────────────────── */
.lg-admin-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lg-admin-list { display: flex; flex-direction: column; gap: 10px; }
.lg-kbd { display: inline-block; margin-left: auto; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--lg-border); background: #fff; font: inherit; font-size: 12px; font-weight: 700; color: var(--lg-text-muted); }

/* Halaman satu-alur (nota bagikan dll.): satu kolom sempit, semua tombol ikut lebar yang sama. */
.lg-main > .lg-stack.lg-stack--sempit { max-width: 520px; }
.lg-stack--sempit > :not(.lg-sr-only) { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }

/* Navigasi halaman: tombol seukuran isinya, nomor di tengah. */
.lg-halaman > .lg-btn { width: auto; min-width: 180px; }
.lg-halaman > :last-child { justify-self: end; }
.lg-halaman > :first-child { justify-self: start; }

/* ── Halaman masuk/daftar/lupa sandi: layar terbelah (panel ilustrasi kiri, formulir kanan) ── */
.lg-main--modal:has(> .lg-auth-samping), .lg-admin-login:has(> .lg-auth-samping) {
  max-width: 1080px; margin: 0 auto; padding: clamp(32px, 7vh, 72px) 40px 48px !important;
  display: grid; grid-template-columns: minmax(0, 1fr) 440px; column-gap: 72px; align-content: start; }
:is(.lg-main--modal, .lg-admin-login) > .lg-auth-samping { display: flex; flex-direction: column; justify-content: center; gap: 22px;
  grid-column: 1; grid-row: 1 / span 30; align-self: stretch; min-height: 520px; padding: 40px; border-radius: 28px; background: #fff; }
:is(.lg-main--modal, .lg-admin-login):has(> .lg-auth-samping) > :not(.lg-auth-samping) { grid-column: 2; margin-top: 0; }
:is(.lg-main--modal, .lg-admin-login):has(> .lg-auth-samping) > * + :not(.lg-auth-samping) { margin-top: 14px; }
.lg-auth-samping .lg-gambar { width: min(300px, 80%); margin: 0; }
.lg-auth-samping__judul { font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.lg-auth-samping ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lg-auth-samping li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--lg-text-muted); }
.lg-auth-samping li .material-symbols-outlined { width: 36px; height: 36px; font-size: 20px; border-radius: 10px; background: var(--lg-primary-soft); color: var(--lg-primary); display: inline-flex; align-items: center; justify-content: center; }
:is(.lg-main--modal, .lg-admin-login):has(> .lg-auth-samping) > .lg-auth-hero { padding-top: 12px; }
.lg-main--admin:has(.lg-admin-login) { max-width: none; } .lg-admin-login:has(> .lg-auth-samping) { width: 100%; }
.lg-auth-samping .lg-gambar svg { max-height: 250px; width: auto; max-width: 100%; }

/* Ulasan admin: isi kiri, aksi bertumpuk di kanan (satu kolom daftar 1120 px). */
.lg-ulasan-adm { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px 28px; align-items: start; }
.lg-ulasan-adm > :not(.lg-ulasan-adm__aksi) { grid-column: 1; }
.lg-ulasan-adm > .lg-ulasan-adm__aksi { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: 1fr; align-self: center; }
/* Ulasan landing: carousel juga di desktop — 3 kartu terlihat, bergeser satu per satu. */
.lg-land-ulasan__rel { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 24px) / 3); overflow-x: auto; }
.lg-ulasan-adm > .lg-ulasan-adm__aksi { grid-template-columns: 1fr; }
.lg-land-ulasan__rel:has(> :only-child) { grid-auto-columns: min(100%, 460px); justify-content: center; }
/* Standar #3: isi kartu 24 px di desktop. */
:root { --lg-pad: 24px; }
/* Admin: kartu warung & pendaftar 2 kolom (bukan daftar kronologis), ringkasan + mendesak berdampingan. */
.lg-admin-list:has(> .lg-adm-warung) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lg-main > .lg-stack > .lg-section:has(> .lg-adm-daftar) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.lg-main > .lg-stack > .lg-section:has(> .lg-adm-daftar) > :not(.lg-adm-daftar) { grid-column: 1 / -1; }
.lg-main--admin .lg-stack { max-width: 1120px; }
/* Halaman tanpa sidebar (mis. Panduan sebelum masuk): isi di tengah, tidak tergeser lebar sidebar. */
body:not(:has(.lg-bottomnav)) .lg-main--form { margin-left: auto; margin-right: auto; }
/* Panduan di desktop: gambar layar di kanan, penjelasan di kiri. */
.lg-pand-langkah { flex-direction: row; align-items: flex-start; gap: 32px; }
.lg-pand-langkah__teks { flex: 1; }
.lg-pand-layar { width: 280px; flex-shrink: 0; margin: 0; }
.lg-pand-alur { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-menugrid > :last-child:nth-child(odd) { grid-column: auto; }
.lg-menugrid:not(:has(> :nth-child(4):last-child)) > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.lg-main > .lg-stack.lg-beranda > .lg-panduan-ajak { grid-column: 1; grid-row: 4; }
.lg-main > .lg-stack.lg-beranda > .lg-persiapan { grid-column: 1 / -1; grid-row: 1; }
.lg-persiapan__daftar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* ══ Fase 11 — kerangka desktop baru: sidebar berkelompok (260 px, setinggi layar) + header 72 px dengan kolom cari ══
   Hanya untuk halaman aplikasi yang punya .lg-sidebar (admin tetap memakai kerangka lama di atas). */
body:has(.lg-sidebar) { --lg-sidebar: 260px; --lg-kepala: 73px; }
html.lg-sb-tutup body:has(.lg-sidebar) { --lg-sidebar: 0px; }
body:has(.lg-sidebar) .lg-bottomnav { display: none !important; }
body:has(.lg-sidebar) .lg-header { margin-left: var(--lg-sidebar); transition: margin-left .22s ease; }
body:has(.lg-sidebar) .lg-main { transition: margin-left .22s ease; }
body:has(.lg-sidebar) .lg-header__row { height: 72px; gap: 14px; padding: 0 24px; }

/* Sidebar */
.lg-sidebar { display: flex !important; flex-direction: column; gap: 14px; position: fixed; z-index: 55; top: 0; bottom: 0; left: 0;
  width: 260px; padding: 16px 14px 14px; background: var(--lg-surface-card); border-right: 1px solid var(--lg-border);
  transition: transform .22s ease; }
html.lg-sb-tutup .lg-sidebar { transform: translateX(-100%); }
.lg-sidebar__merek { display: flex; align-items: center; gap: 10px; padding: 2px 6px; }
.lg-sidebar__merek img { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; }
.lg-sidebar__nama { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; text-align: left; }
.lg-sidebar__nama strong { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-sidebar__nama small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--lg-text-muted); }
.lg-sidebar__nama small.is-buka { color: var(--lg-primary); }
.lg-sidebar__nama small.is-tutup .lg-dot { background: var(--lg-text-muted); }
.lg-sidebar__jual { height: 48px; font-size: 15px; flex-shrink: 0; }
.lg-sidebar__menu { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin: 0 -6px; padding: 0 6px;
  scrollbar-width: thin; }
.lg-sidebar__grup { display: flex; flex-direction: column; }
.lg-sidebar__judul { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 32px; padding: 0 10px; margin-top: 4px;
  border: 0; background: none; border-radius: 8px; font: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lg-text-muted); cursor: pointer; }
.lg-sidebar__judul:hover { background: var(--lg-neutral); }
.lg-sidebar__judul .material-symbols-outlined { font-size: 18px; transition: transform .2s ease; }
.lg-sidebar__grup.is-lipat .lg-sidebar__judul .material-symbols-outlined { transform: rotate(-90deg); }
.lg-sidebar__isi { display: flex; flex-direction: column; gap: 2px; }
.lg-sidebar__grup.is-lipat .lg-sidebar__isi { display: none; }
.lg-sidebar__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 10px; border: 0; border-radius: 11px;
  background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--lg-text); text-align: left; text-decoration: none; cursor: pointer; }
.lg-sidebar__item > .material-symbols-outlined { font-size: 21px; color: var(--lg-text-muted); flex-shrink: 0; }
.lg-sidebar__item > span:not(.material-symbols-outlined):not(.lg-sidebar__angka):not(.lg-sidebar__titik) { flex: 1; min-width: 0; }
.lg-sidebar__item:hover { background: var(--lg-neutral); }
.lg-sidebar__item.is-active { background: var(--lg-primary-soft); color: var(--lg-primary); font-weight: 800; }
.lg-sidebar__item.is-active > .material-symbols-outlined { color: var(--lg-primary); }
.lg-sidebar__grup--utama .lg-sidebar__item { min-height: 46px; font-size: 15px; }
.lg-sidebar__angka { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--lg-warn-bg); color: var(--lg-warn);
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.lg-sidebar__titik { width: 9px; height: 9px; border-radius: 50%; background: var(--lg-danger); box-shadow: 0 0 0 3px var(--lg-danger-bg); }
.lg-sidebar__profil { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid var(--lg-border); border-radius: 14px;
  background: var(--lg-surface); font: inherit; color: inherit; cursor: pointer; flex-shrink: 0; }
.lg-sidebar__profil:hover { border-color: var(--lg-primary-line); }
.lg-sidebar__profil .lg-sidebar__nama { flex: 1; }
.lg-sidebar__profil > .material-symbols-outlined { color: var(--lg-text-muted); font-size: 20px; }

/* Header desktop: [lipat] [kembali] [kelompok / judul] [— kolom cari —] [tanggal] [lonceng] [?] [profil] */
body:has(.lg-sidebar) .lg-hdesk { display: inline-flex !important; }
body:has(.lg-sidebar) .lg-header__logo, body:has(.lg-sidebar) .lg-header--tab .lg-header__cari[data-lg-buka="lg-cari"] { display: none; }
.lg-sbtoggle { align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 11px;
  background: var(--lg-neutral); color: var(--lg-text); cursor: pointer; }
.lg-sbtoggle .material-symbols-outlined { font-size: 22px; }
html.lg-sb-tutup .lg-sbtoggle .material-symbols-outlined { transform: scaleX(-1); }
body:has(.lg-sidebar) .lg-header__brand, body:has(.lg-sidebar) .lg-header__center { flex: 0 1 auto; min-width: 0; }
body:has(.lg-sidebar) .lg-header__center { align-items: flex-start; text-align: left; }
.lg-header__crumb { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lg-text-muted); line-height: 1.2; }
body:has(.lg-sidebar) .lg-header__brandtext, body:has(.lg-sidebar) .lg-header__center { display: flex; flex-direction: column; justify-content: center; }
body:has(.lg-sidebar) .lg-header__title { font-size: 19px; }
.lg-hcari { position: relative; flex: 1 1 520px; max-width: 560px; margin: 0 auto; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 14px;
  border: 1.5px solid var(--lg-border); border-radius: 14px; background: var(--lg-surface-card); }
.lg-hcari:focus-within { border-color: var(--lg-primary); box-shadow: var(--lg-focus); }
.lg-hcari > .material-symbols-outlined { color: var(--lg-primary); font-size: 22px; }
.lg-hcari input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--lg-text); }
.lg-hcari__hasil { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: min(70vh, 560px); overflow-y: auto; padding: 8px;
  background: var(--lg-surface-card); border: 1px solid var(--lg-border); border-radius: 16px; box-shadow: 0 18px 44px rgba(15,41,30,.16); z-index: 70; }
.lg-hcari__hasil[hidden] { display: none; }
.lg-hcari__grup { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lg-text-muted); }
.lg-hcari__item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 11px; color: inherit; text-decoration: none; outline: 0; }
.lg-hcari__item:hover, .lg-hcari__item:focus { background: var(--lg-primary-soft); }
.lg-hcari__item > .material-symbols-outlined { width: 36px; height: 36px; border-radius: 10px; background: var(--lg-neutral); color: var(--lg-primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.lg-hcari__item > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.lg-hcari__item strong { font-size: 14.5px; }
.lg-hcari__item small { font-size: 12.5px; color: var(--lg-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-hcari__info { padding: 12px 10px; font-size: 13.5px; color: var(--lg-text-muted); }
.lg-htgl { align-items: center; gap: 6px; flex-shrink: 0; font-size: 13.5px; font-weight: 600; color: var(--lg-text-muted); white-space: nowrap; }
.lg-htgl .material-symbols-outlined { font-size: 18px; }
/* Pita offline mengikuti kanvas (di kanan sidebar). */
body:has(.lg-sidebar) .lg-pita { left: calc(var(--lg-sidebar) + 16px); top: calc(80px + env(safe-area-inset-top, 0px)); }
/* Layar 1024–1279: tanggal disembunyikan supaya kolom cari tetap lega. */
@media (max-width: 1279px) { .lg-htgl { display: none !important; } }
/* Header form di desktop: satu baris (di HP berupa grid 3 kolom). */
body:has(.lg-sidebar) .lg-header--form .lg-header__row { display: flex; align-items: center; }
body:has(.lg-sidebar) .lg-header--form .lg-btn-back { width: auto; padding: 0 14px; font-size: 14px; gap: 6px; }
body:has(.lg-sidebar) .lg-header__side { gap: 8px; }
/* Judul halaman tidak pernah terpotong: kolom cari yang mengalah (min. 240 px); tanggal disembunyikan < 1366 px. */
body:has(.lg-sidebar) .lg-header__brand, body:has(.lg-sidebar) .lg-header__center { flex: 0 0 auto; max-width: 38%; }
body:has(.lg-sidebar) .lg-header__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-hcari { flex: 1 1 320px; min-width: 240px; }
@media (max-width: 1365px) { .lg-htgl { display: none !important; } }
@media (max-width: 1365px) { body:has(.lg-sidebar) .lg-htgl { display: none !important; } }
@media (max-width: 1279px) { body:has(.lg-sidebar) .lg-header--form .lg-btn-back { width: 44px; padding: 0; font-size: 0; gap: 0; } }

/* ══ Fase 11 tahap 2 — Beranda desktop: kiri 7 / kanan 5, muat satu layar 1080p ══ */
.lg-main > .lg-stack.lg-beranda { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; max-width: 1480px; }
.lg-main > .lg-stack.lg-beranda > .lg-beranda__kiri, .lg-main > .lg-stack.lg-beranda > .lg-beranda__kanan { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.lg-main > .lg-stack.lg-beranda > .lg-beranda__kanan { position: sticky; top: calc(var(--lg-kepala) + 24px); }
/* Batalkan penempatan baris lama (sebelum Fase 11). */
.lg-main > .lg-stack.lg-beranda > * > * { grid-column: auto; grid-row: auto; margin-top: 0; }
/* Kartu sapaan: angka uang besar, stok & bon kembar. */
.lg-beranda .lg-hero { padding: 24px 28px; }
.lg-beranda .lg-hero .lg-minicard--uang strong { font-size: 36px; letter-spacing: -.01em; }
.lg-beranda .lg-hero .lg-minicard { min-height: 112px; padding: 16px 18px; }
.lg-beranda .lg-hero .lg-minicard strong { font-size: 24px; }
/* Pintasan: 80 px, ikon kiri + judul + keterangan. */
.lg-beranda .lg-quickrow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lg-beranda .lg-quickrow .lg-quick { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 1px; justify-items: start;
  text-align: left; align-content: center; min-height: 80px; padding: 14px 16px; }
.lg-beranda .lg-quickrow .lg-quick > .material-symbols-outlined { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px;
  background: var(--lg-primary-soft); display: inline-flex; align-items: center; justify-content: center; }
.lg-beranda .lg-quickrow .lg-quick > small { grid-column: 2; font-size: 12.5px; font-weight: 500; color: var(--lg-text-muted); }
/* Kanan: tombol jual 64 px dengan keterangan, lalu perhatian & penjualan terakhir. */
.lg-beranda__jual { height: 72px; justify-content: flex-start; padding: 0 24px; gap: 14px; font-size: 18px; }
.lg-beranda__jual > .material-symbols-outlined { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.18); display: inline-flex;
  align-items: center; justify-content: center; font-size: 24px !important; }
.lg-beranda__jualteks small { display: block !important; font-size: 13px; font-weight: 500; opacity: .85; }
.lg-perhatian { display: flex !important; flex-direction: column; gap: 6px; padding: 18px 18px 12px; }
.lg-perhatian .lg-h2 { margin: 0 0 4px; font-size: 16px; }
.lg-perhatian__item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; color: inherit; text-decoration: none; }
.lg-perhatian__item:hover { background: var(--lg-neutral); }
.lg-perhatian__item > .material-symbols-outlined:first-child { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: inline-flex;
  align-items: center; justify-content: center; font-size: 20px; background: var(--lg-warn-bg); color: var(--lg-warn); }
.lg-perhatian__item.is-bad > .material-symbols-outlined:first-child { background: var(--lg-danger-bg); color: var(--lg-danger); }
.lg-perhatian__item > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lg-perhatian__item strong { font-size: 14.5px; }
.lg-perhatian__item small { font-size: 12.5px; color: var(--lg-text-muted); }
.lg-perhatian__item > .material-symbols-outlined:last-child { color: var(--lg-text-muted); font-size: 20px; }
.lg-beranda .lg-section > .lg-txitem:nth-of-type(n+4) { display: flex; }
.lg-beranda .lg-section { gap: 10px; }
.lg-main > .lg-stack.lg-beranda > * > * { order: 0; } /* urutan HP (order) tidak berlaku di kolom desktop */
.lg-beranda__kanan > .lg-beranda__jual { order: -1; }

/* ══ STANDAR #18 — sistem lebar halaman desktop (menggantikan lebar per halaman yang dulu berserakan 380–1480 px) ══
   <main class="lg-tata--…"> dipasang header.php dari $lg_header['tata'] (bawaan: tab → grid, form → form).
   Semua jenis DI TENGAH kanvas (kanan sidebar), padding kanvas 28/32 px, jarak antar-kartu 20 px, antar-kolom 24 px.
     dasbor 1360 · belah 1360 (panel 360 px + daftar; otomatis bila ada .lg-panel) · grid 1360 · daftar 960 · form 760 */
body:has(.lg-sidebar) .lg-main.lg-main--tab, body:has(.lg-sidebar) .lg-main.lg-main--form { padding: 28px 32px 48px !important; }
.lg-main[class*="lg-tata--"] > :not(dialog):not(.lg-totalbar):not(script) { width: 100%; margin-left: auto; margin-right: auto; }
.lg-main.lg-tata--dasbor > :not(dialog), .lg-main.lg-tata--grid > :not(dialog) { max-width: 1360px; }
.lg-main.lg-tata--daftar > :not(dialog) { max-width: 960px; }
.lg-main.lg-tata--form > :not(dialog):not(.lg-totalbar) { max-width: 760px; }
/* belah: halaman ber-panel ringkasan, apa pun jenis header-nya */
.lg-main[class*="lg-tata--"] > .lg-stack:has(> .lg-panel) { max-width: 1360px; grid-template-columns: 360px minmax(0, 1fr); gap: 20px 24px; }
.lg-main[class*="lg-tata--"] > .lg-stack { gap: 20px; }
.lg-stack > .lg-panel { gap: 16px; }

/* Tombol Kembali disembunyikan di desktop pada halaman yang sendiri adalah menu sidebar. */
body:has(.lg-sidebar) .lg-btn-back--menu { display: none !important; }

/* ══ Fase 11 — layar masuk (masuk / daftar / lupa sandi / petugas) di desktop: DUA KOLOM SETARA, di tengah layar ══
   Kiri: panel ilustrasi hijau lembut setinggi kolom. Kanan: judul + formulir, tegak di tengah (baris 1fr di atas & bawah). */
.lg-main--modal:has(> .lg-auth-samping), .lg-admin-login:has(> .lg-auth-samping) {
  max-width: 1180px; min-height: 100vh; min-height: 100dvh; padding: 40px !important; margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr repeat(8, auto) 1fr; column-gap: 64px; align-content: stretch; }
:is(.lg-main--modal, .lg-admin-login) > .lg-auth-samping { grid-row: 1 / -1; align-self: center; min-height: min(680px, calc(100vh - 80px));
  padding: 48px; border-radius: 28px; background: var(--lg-primary-soft); justify-content: center; }
:is(.lg-main--modal, .lg-admin-login):has(> .lg-auth-samping) > :not(.lg-auth-samping):not(dialog) { grid-column: 2; width: 100%; max-width: 480px; justify-self: center; }
.lg-auth-samping .lg-gambar { width: min(340px, 85%); }
.lg-auth-samping .lg-gambar svg { max-height: 300px; }
.lg-auth-samping__judul { font-size: 28px; }
.lg-auth-samping li .material-symbols-outlined { background: #fff; }

/* ══ Pilih pengguna di desktop: kisi lebar 4 kolom, ubin besar, di tengah layar ══ */
.lg-main--modal:has(> .lg-pilih) { max-width: 1040px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  padding: 40px !important; margin: 0 auto; }
.lg-pilih { gap: 28px; }
.lg-pilih__kepala .lg-h1, .lg-pilih__kepala h1 { font-size: 30px; }
.lg-pilih .lg-usergrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lg-pilih .lg-usertile { height: 168px; min-height: 168px; gap: 10px; border-radius: 20px; font-size: 17px; }
.lg-pilih .lg-usertile .lg-avatar { width: 72px; height: 72px; font-size: 28px; }
.lg-pilih .lg-usertile:hover { border-color: var(--lg-primary); transform: translateY(-2px); }
.lg-pilih > .lg-auth-card { width: 100%; max-width: 480px; margin: 0 auto; }
.lg-pilih__kepala { justify-content: center; }
/* Ubin pintasan di panel sempit (360 px): ikon di atas, label di bawah — tidak pernah meluber (dulu "Koreksi Stok" terpotong). */
.lg-panel .lg-quickrow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lg-panel .lg-quickrow .lg-quick { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 8px; min-height: 96px; padding: 14px 8px; font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; }
.lg-panel .lg-quickrow .lg-quick > .material-symbols-outlined { grid-row: auto; }
.lg-panel .lg-quickrow .lg-quick > small { display: none; }
/* Kolom kanan: tiap elemen baris sendiri sesuai urutan dokumen (baris 1 & terakhir = spasi 1fr → isi tegak di tengah). */
:is(.lg-main--modal, .lg-admin-login):has(> .lg-auth-samping) > :nth-child(2):not(.lg-auth-samping) { grid-row: 2; }
:is(.lg-main--modal, .lg-admin-login):has(> .lg-auth-samping) > :nth-child(3):not(.lg-auth-samping) { grid-row: 3; }
:is(.lg-main--modal, .lg-admin-login):has(> .lg-auth-samping) > :nth-child(4):not(.lg-auth-samping) { grid-row: 4; }
:is(.lg-main--modal, .lg-admin-login):has(> .lg-auth-samping) > :nth-child(5):not(.lg-auth-samping) { grid-row: 5; }
:is(.lg-main--modal, .lg-admin-login):has(> .lg-auth-samping) > :nth-child(6):not(.lg-auth-samping) { grid-row: 6; }
:is(.lg-main--modal, .lg-admin-login):has(> .lg-auth-samping) > :nth-child(7):not(.lg-auth-samping) { grid-row: 7; }
:is(.lg-main--modal, .lg-admin-login):has(> .lg-auth-samping) > :nth-child(8):not(.lg-auth-samping) { grid-row: 8; }
:is(.lg-main--modal, .lg-admin-login):has(> .lg-auth-samping) > :nth-child(9):not(.lg-auth-samping) { grid-row: 9; }

/* Tanpa dobel di desktop (nama warung, profil, tanggal, status toko, tombol jual sudah ada di sidebar/header). */
.lg-hp-saja { display: inline; }
body:has(.lg-sidebar) .lg-hp-saja { display: none; }
body:has(.lg-sidebar) .lg-header .lg-header__chip { display: none; }
body:has(.lg-sidebar) .lg-beranda .lg-sapa__baris { display: none; }
body:has(.lg-beranda) .lg-sidebar__jual { display: none; }
.lg-sidebar__avatar { position: relative; flex-shrink: 0; display: inline-flex; }
.lg-sidebar__avatar .lg-conn { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border: 2px solid #fff; }
.lg-sidebar__avatar .lg-avatar { width: 36px; height: 36px; font-size: 15px; }
.lg-beranda .lg-quickrow .lg-quick > small { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-beranda .lg-quickrow .lg-quick { min-width: 0; }
/* Layar pendek (laptop 768 px): 4 penjualan terakhir supaya Beranda muat tanpa gulir. */

body:has(.lg-sidebar) .lg-main.lg-tata--dasbor { padding-bottom: 24px !important; }

/* ══ Fase 11.7 — komponen desktop bersama (acuan dev/demo-school2): kepala halaman, kartu angka, tabel + paginasi,
   tab segmen, sidebar pil aktif. Markup .lg-desk hanya tampil di sini; .lg-hp = blok khusus HP (disembunyikan). ══ */
body:has(.lg-sidebar) .lg-desk { display: block !important; }
body:has(.lg-sidebar) .lg-hp { display: none !important; }

/* Jejak header: "Kelompok / Halaman" bila ada kepala halaman (judul besar pindah ke kanvas, tidak dobel). */
.lg-crumb__hal { display: none; }
body:has(.lg-khal) .lg-crumb__hal { display: inline; }
body:has(.lg-khal) .lg-header .lg-header__title { display: none; }
body:has(.lg-khal) .lg-header__crumb { font-size: 13px; }
body:not(:has(.lg-khal)) .lg-header__crumb.is-utama { display: none !important; }

/* Kepala halaman */
body:has(.lg-sidebar) .lg-khal.lg-desk { display: flex !important; align-items: flex-end; justify-content: space-between; gap: 24px; }
.lg-khal__teks { min-width: 0; }
.lg-khal__judul { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -.015em; }
.lg-khal__ket { margin: 6px 0 0; font-size: 14.5px; color: var(--lg-text-muted); }
.lg-khal__aksi { display: flex; gap: 12px; flex-shrink: 0; }
.lg-khal__aksi .lg-btn { height: 48px; padding: 0 20px; font-size: 15px; }

/* Kartu angka */
body:has(.lg-sidebar) .lg-kpi.lg-desk { display: grid !important; grid-template-columns: repeat(var(--kolom, 4), minmax(0, 1fr)); gap: 20px; }
.lg-kpi__kartu { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 112px; padding: 20px 22px;
  border-radius: 16px; background: var(--lg-surface-card); border: 1px solid var(--lg-border); color: inherit; text-decoration: none; }
a.lg-kpi__kartu:hover { border-color: var(--lg-primary-line); }
.lg-kpi__teks { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lg-kpi__label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lg-text-muted); }
.lg-kpi__nilai { font-size: 26px; line-height: 1.15; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-kpi__ket { font-size: 12.5px; color: var(--lg-text-muted); }
.lg-kpi__ikon { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--lg-primary-soft); color: var(--lg-primary); }
.lg-kpi__ikon .material-symbols-outlined { font-size: 26px; }
.lg-kpi__kartu.is-ok .lg-kpi__nilai { color: var(--lg-primary); }
.lg-kpi__kartu.is-warn .lg-kpi__nilai { color: var(--lg-warn); }
.lg-kpi__kartu.is-warn .lg-kpi__ikon { background: var(--lg-warn-bg); color: var(--lg-warn); }
.lg-kpi__kartu.is-bad .lg-kpi__nilai { color: var(--lg-danger); }
.lg-kpi__kartu.is-bad .lg-kpi__ikon { background: var(--lg-danger-bg); color: var(--lg-danger); }
.lg-kpi__kartu.is-info .lg-kpi__ikon { background: var(--lg-info-bg); color: var(--lg-info); }

/* Tabel dalam kartu */
.lg-tabel { border-radius: 16px; background: var(--lg-surface-card); border: 1px solid var(--lg-border); overflow: hidden; }
.lg-tabel__kepala { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--lg-border); }
.lg-tabel__kepala h2 { margin: 0; font-size: 17px; font-weight: 800; }
.lg-tabel__info { font-size: 13px; color: var(--lg-text-muted); }
.lg-tabel table { width: 100%; border-collapse: collapse; }
.lg-tabel thead th { padding: 12px 24px; text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lg-text-muted); background: var(--lg-neutral); white-space: nowrap; }
.lg-tabel td { padding: 12px 24px; height: 64px; border-top: 1px solid var(--lg-border); font-size: 14px; vertical-align: middle; }
.lg-tabel tbody tr[data-href] { cursor: pointer; }
.lg-tabel tbody tr[data-href]:hover td { background: color-mix(in srgb, var(--lg-primary-soft) 45%, transparent); }
.lg-tabel tbody tr[data-href]:focus-visible { outline: 2px solid var(--lg-primary); outline-offset: -2px; }
.lg-tabel .lg-tabel__grup th { padding: 10px 24px; text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lg-text-muted); background: var(--lg-surface); border-top: 1px solid var(--lg-border); }
.lg-tabel .is-angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-tabel .is-tengah { text-align: center; }
.lg-tabel .is-redup { color: var(--lg-text-muted); white-space: nowrap; }
.lg-tabel__kosong { padding: 24px; }
.lg-tabel__halaman { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; border-top: 1px solid var(--lg-border); }
.lg-tabel__halaman[hidden] { display: none; }
.lg-tabel__halaman > span { font-size: 13px; color: var(--lg-text-muted); }
.lg-tabel__halaman .lg-btn-kecil { margin-top: 0; }
.lg-tabel__halaman .lg-btn-kecil:disabled { opacity: .4; cursor: default; }
.lg-sel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lg-sel > .lg-baris__ikon, .lg-sel > .lg-avatar { flex-shrink: 0; }
.lg-sel__teks { display: flex; flex-direction: column; min-width: 0; }
.lg-sel__teks strong { font-size: 14.5px; }
.lg-sel__teks small { font-size: 12.5px; color: var(--lg-text-muted); }

/* Tab = kontrol segmen */
body:has(.lg-sidebar) .lg-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--lg-surface-card); border: 1px solid var(--lg-border); width: auto; }
body:has(.lg-sidebar) .lg-tab { min-height: 40px; padding: 0 16px; border-radius: 10px; flex: 0 0 auto; }

/* Sidebar: item aktif = pil solid warna utama */
.lg-sidebar__item.is-active { background: var(--lg-primary); color: #fff; }
.lg-sidebar__item.is-active > .material-symbols-outlined { color: #fff; }
.lg-sidebar__item.is-active .lg-sidebar__angka { background: rgba(255,255,255,.22); color: #fff; }
.lg-sidebar__grup:not(.lg-sidebar__grup--utama) .lg-sidebar__isi { margin-left: 18px; padding-left: 8px; border-left: 1.5px solid var(--lg-border); }
.lg-deskstack { display: flex; flex-direction: column; gap: 20px; }
.lg-deskstack > .lg-tabs { align-self: flex-start; margin: 0; }
/* KPI v2: ikon kecil + label di atas, angka selebar kartu di bawah (tidak terpotong di 1366 px). */
.lg-kpi__kartu { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; min-height: 0; padding: 16px 20px; }
.lg-kpi__atas { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lg-kpi__ikon { width: 36px; height: 36px; border-radius: 10px; }
.lg-kpi__ikon .material-symbols-outlined { font-size: 20px; }
.lg-kpi__nilai { font-size: clamp(20px, 1.7vw, 26px); max-width: 100%; }
/* Tabel lebih ramping; tab segmen di kepala kartu. */
.lg-tabel td { height: 58px; padding: 8px 24px; }
.lg-tabel__kepala { padding: 12px 16px 12px 16px; min-height: 64px; }
.lg-tabel__kepala .lg-tabs { margin: 0; border: 0; padding: 0; background: none; }
.lg-tabel__kepala .lg-tabel__info { padding-right: 8px; }
.lg-crumb__hal { margin-left: 6px; }
.lg-deskstack { gap: 16px; }
/* Siapkan Warung: langkah berikutnya selebar kartu (dulu menyusut jadi kotak kecil dengan teks terlipat). */
.lg-persiapan__daftar, .lg-persiapan__daftar > li { width: 100%; }
.lg-persiapan__daftar > li > a, .lg-persiapan__daftar > li > div { width: 100%; box-sizing: border-box; min-height: 56px; }
.lg-persiapan__berikut > li > a { padding: 12px 16px; }
.lg-persiapan__berikut .lg-persiapan__teks strong { font-size: 15.5px; }
/* Sidebar tanpa buka-tutup: semua menu terlihat, ringkas supaya muat tanpa gulir (label kelompok bukan tombol). */
.lg-sidebar { gap: 12px; }
.lg-sidebar__menu { gap: 2px; }
.lg-sidebar__judul { height: 26px; margin-top: 8px; padding: 0 10px; cursor: default; font-size: 11px; }
.lg-sidebar__judul:hover { background: none; }
.lg-sidebar__item { min-height: 38px; font-size: 14px; }
.lg-sidebar__grup--utama .lg-sidebar__item { min-height: 42px; }
.lg-sidebar__grup:not(.lg-sidebar__grup--utama) .lg-sidebar__isi { margin-left: 0; padding-left: 0; border-left: 0; }
.lg-sidebar__grup.is-lipat .lg-sidebar__isi { display: flex; }
@media (max-height: 820px) { .lg-sidebar__item { min-height: 34px; } .lg-sidebar__judul { margin-top: 4px; height: 22px; } .lg-sidebar__jual { height: 42px; } }
/* Sidebar muat tanpa gulir di semua tinggi layar: menu merapat mengikuti tinggi (semua tetap terlihat). */
.lg-sidebar__profil { padding: 8px 10px; }
@media (max-height: 960px) {
  .lg-sidebar { gap: 10px; padding-top: 12px; padding-bottom: 10px; }
  .lg-sidebar__item, .lg-sidebar__grup--utama .lg-sidebar__item { min-height: 32px; }
  .lg-sidebar__judul { height: 22px; margin-top: 6px; }
  .lg-sidebar__jual { height: 42px; }
}
@media (max-height: 800px) {
  .lg-sidebar__item, .lg-sidebar__grup--utama .lg-sidebar__item { min-height: 28px; font-size: 13.5px; }
  .lg-sidebar__item > .material-symbols-outlined { font-size: 19px; }
  .lg-sidebar__judul { height: 18px; margin-top: 4px; font-size: 10.5px; }
  .lg-sidebar__merek img { width: 34px; height: 34px; }
  .lg-sidebar__jual { height: 38px; font-size: 14px; }
  .lg-sidebar__profil { padding: 6px 8px; }
  .lg-sidebar__avatar .lg-avatar { width: 30px; height: 30px; }
}
/* Pindah halaman server (30 catatan) di bawah tabel desktop. */
.lg-halaman--desk { display: flex !important; justify-content: space-between; margin-top: -4px; }
.lg-halaman--desk .lg-btn-kecil { margin-top: 0; }
/* Catat Jual Gas di header utama (desktop) — satu-satunya tempat selain tombol besar Beranda. */
.lg-hjual.lg-btn { height: 42px; padding: 0 16px; font-size: 14.5px; gap: 6px; flex-shrink: 0; white-space: nowrap; }
.lg-hjual.lg-btn > .material-symbols-outlined { font-size: 20px; }
/* Keterangan (subtitle) pindah ke kepala halaman — header tidak mengulangnya. */
body:has(.lg-khal) .lg-header .lg-header__sub { display: none; }
.lg-main > .lg-khal { margin-bottom: 20px; }
.lg-main > .lg-khal:only-of-type { }
/* Siapkan Warung: "langkah berikutnya" satu kolom penuh (aturan grid 3 kolom hanya untuk daftar lengkap). */
.lg-persiapan__daftar.lg-persiapan__berikut { display: flex; flex-direction: column; }
.lg-persiapan__semua .lg-persiapan__daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Header desktop TANPA judul halaman (judul ada di kanvas): hanya jejak "Kelompok / Halaman", selalu lengkap. */
body:has(.lg-sidebar) .lg-header .lg-header__title, body:has(.lg-sidebar) .lg-header .lg-header__sub { display: none !important; }
body:has(.lg-sidebar) .lg-crumb__hal { display: inline !important; }
body:has(.lg-sidebar) .lg-header__crumb.is-utama { display: inline-flex !important; }
body:has(.lg-sidebar) .lg-header__crumb { font-size: 13px; }
/* Halaman yang panel ringkasannya khusus HP (.lg-panel.lg-hp): di desktop daftar memakai satu kolom penuh,
   ringkasan pindah ke kartu angka (lg_kpi) di atasnya. */
.lg-main[class*="lg-tata--"] > .lg-stack:has(> .lg-panel.lg-hp) { display: flex; flex-direction: column; max-width: 1360px; }
.lg-stack:has(> .lg-panel.lg-hp) > .lg-utama { width: 100%; }
.lg-main > .lg-kpi { margin-bottom: 20px; }
.lg-main > .lg-khal + .lg-kpi { margin-top: 0; }
/* STANDAR #18 (revisi pengguna): SATU lebar isi untuk semua halaman aplikasi — batas kiri-kanan sama dengan Jualan,
   Belum Bayar, Riwayat (maks 1360 px di tengah kanvas). Lebar 960/760 dihapus karena menyisakan latar kosong. */
.lg-main.lg-tata--daftar > :not(dialog), .lg-main.lg-tata--form > :not(dialog):not(.lg-totalbar),
.lg-main.lg-tata--grid > :not(dialog), .lg-main.lg-tata--dasbor > :not(dialog) { max-width: 1360px; }
/* Area kosong tetap berkartu putih (tidak ada latar abu-abu bolong). */
.lg-main .lg-utama > .lg-emptybox, .lg-main .lg-stack > .lg-emptybox, .lg-main .lg-section > .lg-emptybox {
  background: var(--lg-surface-card); border: 1px solid var(--lg-border); border-radius: 16px; padding: 40px 24px; }
.lg-stack > .lg-utama { min-height: 100%; }
.lg-main > .lg-tabel { margin-top: 0; }
.lg-tabel .lg-delta { display: inline-flex; }
/* Kartu tabel = kolom fleksibel yang mengisi sampai bawah layar; bilah paginasi menempel di dasar kartu. */
body:has(.lg-sidebar) .lg-tabel.lg-desk { display: flex !important; flex-direction: column; }
.lg-tabel > table { flex: 0 0 auto; }
.lg-tabel > .lg-tabel__kosong { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.lg-tabel > .lg-tabel__kosong .lg-emptybox { border: 0; background: none; }
.lg-tabel > .lg-tabel__halaman { margin-top: auto; }
/* Header desktop tanpa judul maupun jejak: judul ada di halaman, posisi terlihat dari menu aktif di sidebar. */
body:has(.lg-sidebar) .lg-header .lg-header__crumb { display: none !important; }
body:has(.lg-sidebar) .lg-header__brand, body:has(.lg-sidebar) .lg-header__center { display: none !important; }
/* Baris tabel yang membuka sheet detail (Agen, Pengeluaran, Posisi Uang, Pelanggan, Tabung) — rasa sama dengan baris tautan. */
.lg-tabel tbody tr[data-lg-buka] { cursor: pointer; }
.lg-tabel tbody tr[data-lg-buka]:hover td { background: color-mix(in srgb, var(--lg-primary-soft) 45%, transparent); }
.lg-tabel tbody tr[data-lg-buka]:focus-visible { outline: 2px solid var(--lg-primary); outline-offset: -2px; }
.lg-tabel tbody tr.is-deleted td { color: var(--lg-text-muted); }
.lg-tabel tbody tr.is-deleted td strong { text-decoration: line-through; }
.lg-tabel .lg-badge { white-space: nowrap; }
/* Merek sidebar: nama warung + "LAPOR GAS" di bawahnya; status buka/tutup jadi pil kecil di kanan (tanpa kata "Warung" dobel). */
.lg-sidebar__merek .lg-sidebar__nama { flex: 1; }
.lg-sidebar__merek .lg-sidebar__nama small { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--lg-text-muted); }
.lg-sidebar__status { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: var(--lg-primary-soft); color: var(--lg-primary); }
.lg-sidebar__status.is-tutup { background: var(--lg-neutral); color: var(--lg-text-muted); }
.lg-sidebar__status.is-tutup .lg-dot { background: var(--lg-text-muted); }
/* KPI: huruf berekor (g, j, p, y) tidak terpotong oleh overflow elipsis. */
.lg-kpi__nilai { line-height: 1.3; padding-bottom: 2px; }
/* Laporan: tab jenis laporan + pemilih periode sebaris (kiri tab, kanan periode) — tidak ada ruang kosong lebar. */
.lg-lap-alat { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lg-lap-alat > .lg-tabs { margin: 0; flex: 0 0 auto; }
.lg-lap-alat > .lg-periode { margin: 0; flex: 0 1 460px; width: auto; }
/* Beranda: kartu "7 hari terakhir" di bawah Penjualan Terakhir; disembunyikan bila layar pendek (tanpa gulir). */
.lg-minggu { display: flex !important; flex-direction: column; gap: 10px; padding: 18px 22px; margin: 0; }
.lg-minggu__kepala { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lg-minggu__kepala .lg-h2 { margin: 0; font-size: 16px; }
.lg-minggu__kepala .lg-muted { font-size: 13px; }
.lg-minggu .lg-chart { height: 120px; }
.lg-minggu .lg-chart__col { gap: 3px; }
.lg-minggu__n { font-size: 11px; font-weight: 800; color: var(--lg-text-muted); min-height: 14px; }
.lg-minggu .lg-link { align-self: flex-end; font-size: 13.5px; }
/* Laporan: halaman mengisi tinggi layar — kartu grafik membesar sampai sisa ruang di bawah hanya jarak tepi biasa. */
.lg-laporan > .lg-laporan__grafik { display: flex; flex-direction: column; }
.lg-laporan__grafik > .lg-chart { flex: 1 1 auto; height: auto; min-height: 140px; }
.lg-laporan__grafik > .lg-emptybox, .lg-laporan__grafik > .lg-kosong { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* Beranda: 3 penjualan terakhir di desktop saat kartu 7 hari tampil (semua muat satu layar tanpa gulir). */
/* (baris Penjualan Terakhir di desktop diatur js: sebanyak yang muat di kartu) */
/* Pengaturan & Panduan: kartu menu lapang yang mengisi layar (tinggi dari data-lg-isi-sisa, baris dibagi rata). */
body:has(.lg-sidebar) .lg-setmenu { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: 1fr; gap: 18px; }
body:has(.lg-sidebar) .lg-setmenu > :last-child { grid-column: auto !important; }
body:has(.lg-sidebar) .lg-setmenu .lg-quick, body:has(.lg-sidebar) .lg-pand-alur > .lg-aksi {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-content: center; align-items: center;
  min-height: 96px; height: 100%; padding: 20px 26px; border-radius: 16px; font-size: 17px; font-weight: 800; text-align: left; }
body:has(.lg-sidebar) .lg-setmenu .lg-quick > .material-symbols-outlined { grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 16px; font-size: 28px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--lg-primary-soft); color: var(--lg-primary); }
body:has(.lg-sidebar) .lg-setmenu .lg-quick > small { grid-column: 2; font-size: 14px; font-weight: 500; color: var(--lg-text-muted); }
body:has(.lg-sidebar) .lg-pand-alur { grid-auto-rows: 1fr; gap: 18px; }
body:has(.lg-sidebar) .lg-pand-alur > .lg-aksi { grid-template-columns: 56px minmax(0, 1fr) 24px; }
body:has(.lg-sidebar) .lg-pand-alur > .lg-aksi .lg-aksi__ikon { width: 56px; height: 56px; border-radius: 16px; }
body:has(.lg-sidebar) .lg-pand-alur > .lg-aksi .lg-aksi__ikon .material-symbols-outlined { font-size: 28px; }
body:has(.lg-sidebar) .lg-pand-alur > .lg-aksi .lg-aksi__teks strong { font-size: 17px; }
body:has(.lg-sidebar) .lg-pand-alur > .lg-aksi .lg-aksi__teks small { font-size: 14px; line-height: 1.45; margin-top: 4px; }
/* Merek sidebar v2: nama warung lebar penuh (boleh 2 baris, tidak terpotong), pil status di bawahnya; menu diberi jarak. */
.lg-sidebar__merek { align-items: center; padding-bottom: 6px; }
.lg-sidebar__merek .lg-sidebar__nama { gap: 5px; align-items: flex-start; }
.lg-sidebar__merek .lg-sidebar__nama strong { white-space: normal; overflow: visible; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lg-sidebar__merek .lg-sidebar__status { height: 22px; padding: 0 8px; font-size: 11.5px; }
.lg-sidebar__menu { margin-top: 8px; }
@media (max-height: 820px) { .lg-sidebar__menu { margin-top: 0; } .lg-sidebar__merek { padding-bottom: 0; } .lg-sidebar__merek img { width: 36px; height: 36px; } }
/* Beranda v3: kedua kolom setinggi layar (min); kolom kanan = Catat Jual Gas, perhatian, lalu kartu putih Penjualan Terakhir
   yang memanjang sampai bawah (baris sebanyak yang muat, js), kartu 7 hari di dasar bila masih lega. */
.lg-main > .lg-stack.lg-beranda { align-items: stretch; }
.lg-main > .lg-stack.lg-beranda > .lg-beranda__kanan { position: static; }
.lg-beranda__terakhir { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px; border-radius: 16px; background: var(--lg-surface-card); border: 1px solid var(--lg-border); }
.lg-beranda__terakhir > .lg-section__head { margin: 0 2px 4px; }
.lg-beranda__terakhir > .lg-txitem { box-shadow: none; border: 1px solid var(--lg-border); flex-shrink: 0; }
.lg-beranda__terakhir > .lg-txitem:nth-of-type(n+4) { display: flex; }
.lg-beranda__terakhir > .lg-emptybox { flex: 1 1 auto; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* Kolom kanan tidak ikut menentukan tinggi baris grid: setinggi kolom kiri / layar (data-lg-isi-min), isinya menyesuaikan. */
.lg-main > .lg-stack.lg-beranda > .lg-beranda__kanan { height: 0; min-height: 100%; }
.lg-main > .lg-stack.lg-beranda > .lg-beranda__kanan > .lg-panduan-ajak { order: -2; }
/* Bantuan v2: setinggi layar (data-lg-isi-sisa). Kiri = ulasan (kotak tulis memanjang), kanan = masalah + belajar.
   Kepala kartu: ikon kecil + judul + satu baris keterangan; isi mulai sejajar di bawahnya. */
.lg-bantuan { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto minmax(0, 1fr); gap: 20px; }
.lg-bantuan__ulasan { grid-row: 1 / span 2; }
.lg-bantuan__kartu { display: flex; flex-direction: column; gap: 18px; padding: 26px 28px; margin: 0; min-height: 0; }
.lg-bantuan__kepala { display: flex; align-items: center; gap: 14px; }
.lg-bantuan__kepala .lg-h2 { margin: 0; font-size: 18px; }
.lg-bantuan__kepala .lg-muted { margin: 3px 0 0; font-size: 13.5px; }
.lg-bantuan__ikon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--lg-primary-soft); color: var(--lg-primary); }
.lg-bantuan__ikon .material-symbols-outlined { font-size: 26px; }
.lg-bantuan__ulasan > .lg-form { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.lg-bantuan__nilai { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 14px; background: var(--lg-neutral); }
.lg-bantuan__label { font-size: 14.5px; font-weight: 700; }
.lg-bantuan__nilai .lg-bintang__b { font-size: 34px; }
.lg-bantuan__tulis { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.lg-bantuan__tulis .lg-textarea { flex: 1 1 auto; min-height: 110px; resize: none; }
.lg-bantuan__ulasan .lg-btn { margin-top: 0; }

/* Kartu 7 hari kini di dasar kolom kiri, memanjang mengisi sisa tinggi kolom (kanan = Penjualan Terakhir penuh). */
.lg-beranda__kiri > .lg-minggu { flex: 1 1 auto; min-height: 190px; }
.lg-beranda__kiri > .lg-minggu > .lg-chart { flex: 1 1 auto; height: auto; min-height: 100px; }
/* Panduan desktop: bila ada gambar versi desktop (lanskap 1440×900), penjelasan di kiri dan layar lebar di kanan. */
.lg-pand-langkah:has(.lg-pand-layar--ganda) { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2.2fr); gap: 32px; align-items: start; }
.lg-pand-layar--ganda { width: 100%; padding: 8px; border-radius: 16px; }
.lg-pand-layar--ganda img { border-radius: 10px; }
/* Layar desktop pendek (laptop 1280×720 / 1366×768): kerapatan vertikal dikurangi supaya halaman tetap muat tanpa gulir.
   Lebar & gaya sama; hanya jarak atas-bawah, tinggi kartu angka, dan tinggi baris tabel yang menyusut. */
@media (max-height: 820px) {
  body:has(.lg-sidebar) .lg-main.lg-main--tab, body:has(.lg-sidebar) .lg-main.lg-main--form { padding: 20px 32px 24px !important; }
  body:has(.lg-sidebar) .lg-main { gap: 14px; }
  .lg-deskstack { gap: 14px; }
  .lg-khal__judul { font-size: 24px; }
  .lg-khal__ket { margin-top: 3px; font-size: 13.5px; }
  .lg-khal__aksi .lg-btn { height: 42px; }
  .lg-kpi__kartu { min-height: 0; padding: 14px 18px; gap: 6px; }
  body:has(.lg-sidebar) .lg-kpi.lg-desk { gap: 14px; }
  .lg-kpi__nilai { font-size: 21px; }
  .lg-tabel__kepala { padding: 12px 20px; }
  .lg-tabel thead th { padding: 9px 20px; }
  .lg-tabel td { height: 54px; padding: 8px 20px; }
  .lg-tabel .lg-tabel__grup th { padding: 7px 20px; }
  .lg-tabel__halaman { padding: 8px 20px; }
  .lg-bantuan__kartu { padding: 20px 22px; gap: 12px; }
  .lg-bantuan__nilai .lg-bintang__b { font-size: 28px; }
}
/* Siapkan Warung → "Lihat semua langkah" (2 kolom): semua langkah sama padding & tepi kiri (selesai maupun bisa diketuk);
   langkah penutup "Catat jual pertama" selebar dua kolom di bawah garis pemisah. */
.lg-persiapan__semua .lg-persiapan__daftar > li > a, .lg-persiapan__semua .lg-persiapan__daftar > li > div { padding: 12px 16px; border-radius: 12px; }
.lg-persiapan__semua .lg-persiapan__daftar > li.lg-persiapan__akhir { grid-column: 1 / -1; margin-top: 4px; padding-top: 12px; }
/* Kolom kanan Beranda maksimal setinggi layar & menempel saat kolom kiri (mis. Siapkan Warung terbuka) lebih panjang. */
.lg-main > .lg-stack.lg-beranda > .lg-beranda__kanan { max-height: calc(100vh - 72px - 52px); position: sticky; top: 100px; }
.lg-beranda__terakhir > .lg-emptybox { border: 0 !important; background: none !important; box-shadow: none !important; padding: 12px; }
/* Admin desktop = bingkai aplikasi warung: konten 1360 (bukan 1120), judul di kanvas, avatar header diganti profil sidebar. */
body:has(.lg-sidebar) .lg-main--admin .lg-stack { max-width: 1360px; width: 100%; margin-left: auto; margin-right: auto; }
body:has(.lg-sidebar) .lg-main--admin { max-width: none; }
.lg-hcari input[type=search] { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font: inherit; }
/* Kartu Panduan/Pengaturan: hanya judul yang tebal; keterangan normal & redup seperti halaman lain. */
body:has(.lg-sidebar) .lg-pand-alur > .lg-aksi { font-weight: 500; }
body:has(.lg-sidebar) .lg-pand-alur > .lg-aksi .lg-aksi__teks strong { font-weight: 800; }
body:has(.lg-sidebar) .lg-pand-alur > .lg-aksi .lg-aksi__teks small { font-weight: 500; color: var(--lg-text-muted); letter-spacing: 0; }
/* Paginasi kartu admin: kartu 2 kolom rapi, bilah halaman = kartu putih seperti dasar tabel. */
.lg-kartu-hal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.lg-kartu-hal > [hidden] { display: none !important; }
.lg-kartu-hal > .lg-card { margin: 0; }
.lg-kartu-hal__nav { border: 1px solid var(--lg-border); border-radius: 14px; background: var(--lg-surface-card); margin-top: 4px; }
/* Halaman panjang satu kolom → dua kolom rapi di desktop (tanpa gulir panjang). */
body:has(.lg-sidebar) .lg-nota-grid { display: block; columns: 2; column-gap: 20px; }
body:has(.lg-sidebar) .lg-nota-grid > * { break-inside: avoid; margin: 0 0 20px; }
body:has(.lg-sidebar) .lg-nota-grid > .lg-btn { column-span: all; }
body:has(.lg-sidebar) .lg-bagikan { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; max-width: none; }
body:has(.lg-sidebar) .lg-bagikan > .lg-nota { grid-column: 1; grid-row: 1 / span 6; margin: 0; }
body:has(.lg-sidebar) .lg-bagikan > :not(.lg-nota) { grid-column: 2; margin: 0; }
body:has(.lg-sidebar) .lg-bagikan > .lg-grid2 { grid-template-columns: 1fr; }
body:has(.lg-sidebar) .lg-adm-detail { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; align-items: start; }
body:has(.lg-sidebar) .lg-adm-detail > .lg-tabel { grid-column: 1; grid-row: 1 / span 8; }
body:has(.lg-sidebar) .lg-adm-detail > :not(.lg-tabel) { grid-column: 2; }
body:has(.lg-sidebar) .lg-adm-detail > * { margin: 0; }
body:has(.lg-sidebar) .lg-hitung-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
body:has(.lg-sidebar) .lg-hitung-form > :not(section) { grid-column: 1 / -1; }
body:has(.lg-sidebar) .lg-hitung-form > section { margin: 0; }
/* Admin desktop — tab segmen tidak melebar penuh; Pengaturan: grup jadi grid kartu (integrasi 3 kolom 1 baris). */
body:has(.lg-sidebar) .lg-stack > .lg-tabs { align-self: flex-start; }
body:has(.lg-sidebar) .lg-adm-grup__isi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0; background: none; border: 0; box-shadow: none; }
body:has(.lg-sidebar) .lg-adm-grup__isi > .lg-aksi { min-height: 84px; padding: 16px 18px; border-radius: 14px !important; border: 1px solid var(--lg-border) !important; background: var(--lg-surface-card); }
body:has(.lg-sidebar) .lg-adm-grup__isi > .lg-aksi.lg-aksi--datar .lg-badge { align-self: flex-start; }
body:has(.lg-sidebar) .lg-adm-keluar { display: flex; justify-content: flex-end; }
body:has(.lg-sidebar) .lg-adm-keluar .lg-btn { width: auto; padding: 0 24px; }
/* Persetujuan: pendaftaran & reset kata sandi berdampingan, masing-masing ber-paginasi. */
body:has(.lg-sidebar) .lg-adm-setuju { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; align-items: start; }
body:has(.lg-sidebar) .lg-adm-setuju > :not(.lg-section) { grid-column: 1 / -1; }
body:has(.lg-sidebar) .lg-adm-setuju > .lg-section { display: flex !important; flex-direction: column; gap: 12px; margin: 0; }
body:has(.lg-sidebar) .lg-adm-setuju .lg-kartu-hal--2 { grid-template-columns: 1fr; }
/* Ulasan admin (2 kolom ber-paginasi): kutipan selebar kartu, tombol aksi sebaris di dasar kartu. */
.lg-kartu-hal > .lg-ulasan-adm { display: flex; flex-direction: column; gap: 12px; height: 100%; align-self: stretch; }
.lg-kartu-hal > .lg-ulasan-adm > .lg-ulasan-adm__aksi { display: flex; gap: 10px; margin-top: auto; align-self: stretch; }
.lg-kartu-hal > .lg-ulasan-adm > .lg-ulasan-adm__aksi > form { flex: 1 1 0; }
.lg-kartu-hal:has(> .lg-ulasan-adm) { align-items: stretch; }
body:has(.lg-sidebar) .lg-adm-detail .lg-hero__top { display: none; }
/* Header admin: tombol Keluar di pojok kanan (desktop). */
body:has(.lg-sidebar) .lg-hkeluar { display: flex !important; margin: 0; }
.lg-hkeluar__btn { border: 0; cursor: pointer; }
.lg-hkeluar__btn:hover { background: var(--lg-danger-bg); color: var(--lg-danger); }
.lg-kartu-hal:empty { display: block; }
.lg-kartu-hal { align-content: start; }
/* Sheet QRIS (admin donasi): gambar di kiri, isian & tombol di kanan — muat satu layar tanpa gulir. */
.lg-sheet--qris[open] { max-width: 820px; width: 820px; }
.lg-sheet--qris:has(> img)[open] { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: center; }
.lg-sheet--qris > img.lg-qris-toko { width: 100%; max-height: 62vh; object-fit: contain; margin: 0; }
.lg-sheet--qris__isi { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lg-sheet--qris__isi .lg-h2, .lg-sheet--qris__isi .lg-hint { margin: 0; }
/* Statistik admin: pemilih bulan di atas, ringkasan & warung teraktif berdampingan. */
body:has(.lg-sidebar) .lg-adm-rekap-hal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
body:has(.lg-sidebar) .lg-adm-rekap-hal > .lg-periode { grid-column: 1 / -1; justify-self: start; width: 460px; margin: 0; }
body:has(.lg-sidebar) .lg-adm-rekap-hal > .lg-card { margin: 0; }
/* Header admin: kolom cari tepat di tengah header (kiri hanya tombol lipat/Kembali, kanan tanggal + lonceng + Keluar). */
body.lg-admin:has(.lg-sidebar) .lg-header__row { position: relative; }
body.lg-admin:has(.lg-sidebar) .lg-header .lg-hcari { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 560px)); margin: 0; }
body.lg-admin:has(.lg-sidebar) .lg-header__side { margin-left: auto; }
/* Statistik: judul tabel + pemilih bulan sebaris di kepala tabel; batang porsi tabung per warung. */
.lg-tabel__kepala:has(> .lg-periode--alat) > h2 { margin-right: auto; }
.lg-periode--alat { width: 340px; margin: 0; height: 44px; }
.lg-tabel__kepala:has(> .lg-periode--alat) > .lg-tabel__info { order: 3; }
.lg-adm-batang { display: block; height: 10px; border-radius: 999px; background: var(--lg-neutral); overflow: hidden; }
.lg-adm-batang > span { display: block; height: 100%; border-radius: inherit; background: var(--lg-primary); }