*/
.ui-kpi{display:flex;flex-direction:column;gap:var(--sp-1);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:var(--sp-4) var(--sp-5)}
.ui-kpi-label{font-size:var(--fs-12);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ui-kpi-value{font-family:var(--font-display);font-size:var(--fs-30);font-weight:700;line-height:var(--lh-heading);color:var(--ink);font-variant-numeric:tabular-nums}
.ui-kpi-delta{font-size:var(--fs-13);font-weight:600;color:var(--muted)}
.ui-kpi-delta--success{color:var(--success-text)}
.ui-kpi-delta--danger{color:var(--danger-text)}
/* ---------- Tabel: .ui-table ----------
Bungkus dengan .ui-table-wrap bila perlu scroll/sticky di area terbatas.
Kolom angka: beri class .ui-num pada
/
(rata kanan + tabular-nums).
Di <=640px tabel berubah jadi daftar kartu: setiap
tampil sebagai
baris label:nilai memakai atribut data-label pada
*/
.ui-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-2);padding:var(--sp-10) var(--sp-6);color:var(--muted)}
.ui-empty-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--r-full);background:var(--neutral-soft);color:var(--faint)}
.ui-empty-icon svg{width:28px;height:28px}
.ui-empty-title{font-family:var(--font-display);font-size:var(--fs-16);font-weight:600;line-height:var(--lh-heading);color:var(--ink);margin:var(--sp-2) 0 0}
.ui-empty-text{font-size:var(--fs-14);margin:0;max-width:40ch}
/* ---------- Skeleton loading: .ui-skeleton ----------
Varian: --text (baris) | --title (judul) | --card (blok besar).
Animasi shimmer dimatikan bila prefers-reduced-motion. */
.ui-skeleton{display:block;min-height:var(--sp-4);background:var(--skeleton);border-radius:var(--r-sm);position:relative;overflow:hidden}
.ui-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--skeleton-shine),transparent);animation:ui-shimmer 1.4s ease infinite}
.ui-skeleton--text{height:14px}
.ui-skeleton--title{height:24px;width:55%}
.ui-skeleton--card{height:120px;border-radius:var(--r-lg)}
@keyframes ui-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
.ui-skeleton::after{animation:none}
.ui-modal-card,.ui-toast{animation:none}
.ui-btn,.ui-nav-item,.ui-side{transition:none}
}
/* ==========================================================================
3. APP SHELL SERAGAM (DESIGN-SPEC.md bagian 3)
--------------------------------------------------------------------------
Pola sidebar + header yang SAMA untuk semua halaman aplikasi. Struktur
yang diharapkan (markup statis per halaman, identik antarhalaman —
pertahankan id/handler lama seperti #sidebarMenu, #sidebarOverlay,
.theme-toggle-btn, #btnLogoutSidebar bila JS existing memakainya):
(HP saja)
Judul Halaman
... tombol tema/keluar ...
... konten halaman ...
State aktif nav (.is-active, alias .active agar cocok markup lama):
latar accent-soft + garis kiri brand (::before) + teks tebal 600.
Di <=980px sidebar jadi drawer geser: sembunyi di luar kiri, tampil bila
.ui-side.is-open (alias .active seperti class lama .sidebar.active).
========================================================================== */
.ui-shell{display:flex;min-height:100vh;min-height:100dvh;background:var(--bg-tint);color:var(--ink)}
.ui-shell-main{flex:1;min-width:0;display:flex;flex-direction:column}
.ui-side{position:sticky;top:0;height:100vh;height:100dvh;width:260px;flex:none;display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--sp-5) var(--sp-4);padding-top:max(var(--sp-5),env(safe-area-inset-top));background:var(--side-bg);color:var(--side-ink);overflow-y:auto;z-index:1000}
.ui-side-brand{display:flex;align-items:center;gap:var(--sp-2);padding-bottom:var(--sp-4);border-bottom:1px solid var(--side-line)}
.ui-side-logo{display:flex;align-items:center;margin-right:auto;font-family:var(--font-display);font-size:var(--fs-20);font-weight:700;line-height:var(--lh-heading);color:var(--side-ink);text-decoration:none}
.ui-side-logo img{height:28px;width:auto;display:block}
.ui-side .ui-icon-btn{color:var(--side-ink)}
.ui-side .ui-icon-btn:hover{background:var(--side-chip-bg)}
.ui-nav{display:flex;flex-direction:column;gap:var(--sp-1);list-style:none;margin:0;padding:0;flex:1}
.ui-nav-spacer{margin-top:auto}
.ui-nav-item{position:relative;display:flex;align-items:center;gap:var(--sp-3);min-height:44px;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);color:var(--side-muted);font-size:var(--fs-14);font-weight:500;line-height:var(--lh-text);text-decoration:none;transition:background-color .2s ease,color .2s ease}
.ui-nav-item svg{width:20px;height:20px;flex:none}
.ui-nav-item::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:0;border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--side-active-line);transition:height .2s ease}
.ui-nav-item:hover{background:var(--side-chip-bg);color:var(--side-ink)}
.ui-nav-item:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ui-nav-item.is-active,.ui-nav-item.active,.ui-nav-item[aria-current="page"]{background:var(--side-active-bg);color:var(--side-ink);font-weight:600}
.ui-nav-item.is-active::before,.ui-nav-item.active::before,.ui-nav-item[aria-current="page"]::before{height:60%}
.ui-side-foot{margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--side-line)}
.ui-tenant-chip{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3);border:1px solid var(--side-line);border-radius:var(--r-md);background:var(--side-chip-bg);color:var(--side-ink);font-size:var(--fs-13);line-height:var(--lh-text)}
.ui-tenant-name{font-weight:600;font-size:var(--fs-14)}
.ui-tenant-plan{color:var(--side-muted);font-size:var(--fs-12)}
.ui-topbar{position:sticky;top:0;z-index:900;display:flex;align-items:center;gap:var(--sp-4);min-height:var(--mk-nav-h);padding:var(--sp-3) var(--sp-5);padding-top:max(var(--sp-3),env(safe-area-inset-top));background:var(--topbar-bg);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.ui-topbar-title{font-family:var(--font-display);font-size:var(--fs-20);font-weight:600;line-height:var(--lh-heading);color:var(--ink);margin:0}
.ui-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.ui-main{flex:1;min-width:0;width:100%;padding:var(--sp-6)}
@media (max-width:980px){
.ui-main{padding:var(--sp-4)}
.ui-side{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--sh-pop);z-index:10001}
.ui-side.is-open,.ui-side.active{transform:none}
}
@media (max-width:640px){
.ui-main{padding:var(--sp-3)}
.ui-topbar{padding:var(--sp-2) var(--sp-3);padding-top:max(var(--sp-2),env(safe-area-inset-top));gap:var(--sp-2)}
.ui-card{padding:var(--sp-4)}
.ui-modal-card{padding:var(--sp-5)}
}
/* ================= Fase 2 — perbaikan shell global =================
Tombol "Tutup" sidebar hanya untuk mode drawer (<=980px); di desktop
sidebar selalu terlihat sehingga tombol disembunyikan. !important
dipakai karena CSS per halaman Fase 1 memberi display:inline-flex
tanpa media query dan urutan muatnya sesudah file ini. */
@media (min-width:981px){
.btn-close-sidebar{display:none!important}
}
/* Ikon SVG tombol tema (digambar terpusat oleh js/theme-toggle.js)
harus terlihat jelas di dalam tombol 34px milik style.css. */
.theme-toggle-btn svg{width:20px;height:20px;display:block}
/* Ukuran bawaan ikon SVG UI.ikon: tanpa aturan konteks, SVG tanpa atribut
width/height akan melebar mengikuti wadahnya (bug tombol dapur raksasa).
Aturan konteks yang lebih spesifik tetap menang dari nilai bawaan ini. */
.ui-ikon { width: 20px; height: 20px; flex-shrink: 0; }
/* UI.prompt (Fase 3): field di dalam modal tidak perlu margin bawah bawaan
.ui-field — jarak sudah diatur .ui-modal-card. */
.ui-modal .ui-field { margin-bottom: 0; }
/* Atribut hidden HARUS selalu menang atas display komponen (.ui-btn,
.ui-card, dll.) — tanpa aturan ini tombol ber-atribut hidden tetap
tampil (kasus nyata: tombol Hapus Data Contoh Fase 3). */
[hidden] { display: none !important; }
/* Perbaikan HP (23 Okt 2026): tombol CTA nav disembunyikan di layar kecil di SEMUA
halaman (aturan ini sebelumnya hanya ada di publik-ui.css yang tidak dimuat
halaman login, sehingga CTA meluber ke kanan di sana). Menu tetap menyediakan
jalan ke trial/harga. */
@media (max-width:560px){.pub-cta{display:none}}
/* Penguat anti-geser (23 Okt 2026, menyusul laporan form login tidak center):
halaman tidak boleh bisa melebar menyamping hanya karena satu elemen nav —
overflow-x:clip di body menahan luapan tanpa merusak position:sticky. */
body{overflow-x:clip}
@supports not (overflow:clip){body{overflow-x:hidden}}
@media (max-width:560px){.pub-menu{gap:1rem}.pub-nav-inner{gap:1rem}}
/* ================= PWA & sentuh (semua perangkat) =================
- text-size-adjust 100%: iOS tidak membesarkan teks sendiri saat HP miring.
- tap-highlight transparan + touch-action manipulation: tidak ada kedip
abu-abu dan tidak ada jeda/zoom dobel-tap saat kasir mengetuk cepat.
- Bidang isian minimal 16px di layar sentuh: iOS berhenti auto-zoom
setiap kali kasir menyentuh kolom (PIN, cari produk, dsb). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{-webkit-tap-highlight-color:transparent}
a,button,[role="button"],input,select,textarea,label{touch-action:manipulation}
@media (pointer:coarse){
.ui-field input,.ui-field select,.ui-field textarea,.ui-input,.ui-select,.ui-textarea{font-size:16px}
}