/* erp-meddinah — tampilan admin meniru erp sekolah mode Cards (repo erp, public/tampilan/app.css, 1 Okt 2026).
   Bagian 1–4 disalin dari erp sekolah dengan token navy yayasan langsung di :root (erp-meddinah satu instans, tanpa
   bagian/warna). Bagian 5 = kelas lama erp-meddinah (.borang, .aksi-atas, .angka, .utama, .k, .galat, …) digaya ulang
   supaya 120+ tampilan ikut berubah tanpa disunting. Susunan menu tetap Accurate (config/menu.php); warna kartu = jenis
   ubin Accurate (transaksi hijau · data biru · laporan ungu · pengaturan oranye). Halaman mitra & toko tetap wadah.css,
   POS tetap pos.css. Aturan: satu tombol navy per halaman, kendali 40 px, tabel dalam .gulir, isian HP 16 px. */

/* ---------- 1. token ---------- */
:root{
  --aksen:#1a4789; --aksen-gelap:#0d2950; --aksen-tipis:#eef4ff; --aksen-terang:#3b6fb6;
  --teks:#1e293b; --latar:#f4f6fa; --abu:#94a3b8; --abu-terang:#e2e8f2;
  --line:#e2e8f2; --mut:#64748b; --red:#dc2626; --ok:#16a34a; --hijau:#16a34a; --biru:#2563eb; --gold:#f5b400;
  --bilah-latar:#123a6b; --bilah-teks:#fff; --bilah-redup:rgba(255,255,255,.72); --bilah-garis:rgba(255,255,255,.16);
  --bilah-pisah:rgba(255,255,255,.25); --bilah-tombol:rgba(255,255,255,.12); --bilah-tombol-hover:rgba(255,255,255,.26);
  --bilah-bayang:0 12px 34px rgba(7,26,54,.35),inset 0 1px 0 rgba(255,255,255,.1);
  /* nama lama erp-meddinah yang dipakai di style="" tampilan */
  --navy:var(--aksen); --navy-dd:var(--aksen-gelap); --txt:var(--teks); --bg:var(--latar);
  --garis:var(--line); --tinta:var(--teks); --redup:var(--mut); --rel:var(--aksen-gelap);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--latar);color:var(--teks);font:14.5px/1.6 'Poppins',system-ui,-apple-system,sans-serif}
a{color:var(--aksen);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- 2. bilah atas & kerangka (erp sekolah) ---------- */
.atas{background:var(--bilah-latar);color:var(--bilah-teks);padding:0 18px;height:58px;display:flex;align-items:center;gap:14px;
  position:sticky;top:10px;z-index:30;margin:10px 16px 0;border-radius:16px;border:1px solid var(--bilah-garis);box-shadow:var(--bilah-bayang)}
.atas a:hover{text-decoration:none}
.atas .tombol-aplikasi{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;flex:none;background:var(--bilah-tombol);border:1px solid var(--bilah-garis)}
.atas .tombol-aplikasi:hover{background:var(--bilah-tombol-hover)}
.atas .tombol-aplikasi svg{width:20px;height:20px;stroke:var(--bilah-teks);stroke-width:3.4;stroke-linecap:round;fill:none}
.atas a.logo{display:flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border-radius:10px;background:var(--gold)}
.atas a.logo svg{width:22px;height:22px;stroke:var(--aksen-gelap);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.atas .nama{font-weight:600;font-size:16px;letter-spacing:.2px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.atas .unit{font-size:12.5px;color:var(--bilah-redup);border-left:1px solid var(--bilah-pisah);padding-left:14px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.atas .kanan{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;min-width:0}
.atas form{margin:0}
.atas .siapa{color:var(--bilah-redup);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.atas .siapa:hover .sp-n{text-decoration:underline}
.atas .siapa .sp-n{color:var(--bilah-teks)}
.atas .siapa .sp-p::before{content:"·";margin:0 6px}
/* Keluar dikunci 34 px = tinggi tombol 💬/🔔 di sebelahnya (diukur erp sekolah: satu deret, bahan sama). */
.atas .keluar{color:var(--bilah-teks);background:var(--bilah-tombol);border:1px solid var(--bilah-garis);padding:0 12px;height:34px;min-height:0;display:inline-flex;align-items:center;border-radius:8px;font:inherit;font-size:13px;cursor:pointer;box-shadow:none}
.atas .keluar:hover{background:var(--bilah-tombol-hover)}
@media (min-width:761px) and (max-width:1000px){.atas .siapa .sp-p{display:none}}
.atas .unit,.atas .kanan{flex-shrink:.2}

.rangka{display:flex;align-items:flex-start;min-height:calc(100vh - 68px)}
aside{width:222px;flex:none;background:#fff;border-right:1px solid var(--line);padding:16px 12px;position:sticky;top:68px;height:calc(100vh - 68px);overflow:auto}
aside .grup{font-size:10.5px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--abu);margin:16px 10px 6px}
aside .grup:first-child{margin-top:0}
aside a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:#475569;font-size:14px;font-weight:500;margin-bottom:2px;line-height:1.35}
aside a:hover{background:var(--aksen-tipis);color:var(--aksen-gelap);text-decoration:none}
aside svg{width:17px;height:17px;flex:none;stroke:var(--abu);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
aside a:hover svg{stroke:var(--aksen-gelap)}
aside a.on{background:var(--aksen);color:#fff;box-shadow:0 2px 8px rgba(26,71,137,.3)}
aside a.on svg{stroke:#fff}
aside .singkat{width:17px;flex:none;font-size:10px;font-weight:700;color:var(--abu);text-align:center}
aside a.on .singkat{color:#fff}
main{flex:1;padding:22px 26px 32px;min-width:0}

/* Cards: kelompok Accurate di menu samping + panel kartu berwarna (gaya erp sekolah / erp-modulkeuangan) */
aside details.kel-d summary{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;cursor:pointer;list-style:none;
  font-size:11.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:#64748b;margin-bottom:2px;white-space:nowrap}
aside details.kel-d summary::-webkit-details-marker{display:none}
aside details.kel-d summary span{overflow:hidden;text-overflow:ellipsis}
aside details.kel-d summary:hover,aside details.kel-d[open] summary{background:var(--aksen-tipis);color:var(--aksen-gelap)}
aside details.kel-d.on summary{color:var(--aksen-gelap);background:var(--aksen-tipis)}
aside details.kel-d.on summary svg,aside details.kel-d[open] summary svg{stroke:var(--aksen-gelap)}
aside details.kel-d summary .anak{margin-left:auto;flex:none;width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg)}
aside details.kel-d[open] summary .anak{transform:rotate(45deg)}
.lembar-d{position:fixed;z-index:45;width:600px;max-width:calc(100vw - 16px)}
details.kel-d>.ubin-d{display:none}
.ubin-d{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 36px rgba(15,23,42,.16);padding:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ubin-d-judul{grid-column:1/-1;font-weight:600;font-size:15px;padding:0 2px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.ubin-d a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:68px;padding:10px 8px;border-radius:10px;
  border:1px solid;font-size:13.5px;font-weight:500;text-align:center;white-space:normal;margin:0;box-shadow:none;line-height:1.3}
.ubin-d a:hover{filter:brightness(.97);text-decoration:none}
.ubin-d a svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ubin-d a .singkat{font-size:11px;font-weight:700;width:auto;color:inherit}
.ubin-d a.hijau{background:#e6f4dc;border-color:#8cc05a;color:#2f5f1a}
.ubin-d a.biru{background:#e1ecf7;border-color:#9dbfe3;color:#2c4f75}
.ubin-d a.ungu{background:#efe0f7;border-color:#b889d9;color:#5b2d82}
.ubin-d a.oranye{background:#fdebd8;border-color:#f0b27a;color:#8a4b12}
.ubin-d a.netral{background:#f1f5f9;border-color:var(--line);color:#475569}
.ubin-d a.on{outline:2px solid currentColor;outline-offset:1px}
.ubin-d a[hidden]{display:none}
aside .ubin-d a svg{stroke:currentColor}

/* Semua Menu (⋮⋮⋮): semua kelompok Accurate berurutan, tiap kelompok satu panel kartu */
.semua-menu{max-width:980px}
.semua-menu #cari-menu{width:100%;min-height:46px;font-size:15px;border-radius:12px;margin:0 0 18px}
.semua-menu section{margin-bottom:16px;scroll-margin-top:80px}
.semua-menu section[hidden]{display:none}
.semua-menu .ubin-d{box-shadow:0 1px 2px rgba(15,23,42,.04);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.semua-menu .ubin-d-judul{display:flex;align-items:center;gap:8px}
.semua-menu .ubin-d-judul svg{width:18px;height:18px;stroke:var(--aksen);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Akun Saya: pilihan tampilan menu */
.pilih-tampilan{display:grid;gap:8px;max-width:620px}
.pilih-tampilan label{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:11px;cursor:pointer;background:#fff}
.pilih-tampilan label:has(input:checked){border-color:var(--aksen);background:var(--aksen-tipis)}
.pilih-tampilan input{margin-top:4px}
.pilih-tampilan b{display:block;font-weight:600}
.pilih-tampilan small{display:block;color:var(--mut);font-size:12.5px}

/* ---------- 3. judul, kartu, tabel, pil, tombol, isian (erp sekolah) ---------- */
h1,h2,h3{line-height:1.3}
main h1{font-size:20px;font-weight:600;margin:0 0 14px}
main h2{font-size:15.5px;font-weight:600;margin:24px 0 10px}
.jejak{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--abu);margin:0 0 2px}
.subjudul{color:var(--mut);font-size:13.5px;margin:-10px 0 18px}

.gulir{overflow:auto;touch-action:pan-x pan-y;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04);margin:0 0 16px}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13.8px;background:#fff;font-variant-numeric:tabular-nums}
.gulir table{min-width:max-content;width:100%}
th,td{padding:10px 13px;border-bottom:1px solid #eef2f7;text-align:left;vertical-align:middle}
thead th{position:sticky;top:0;background:#f5f7fb;z-index:1;font-size:11.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#fafbfd}
/* Kolom pertama menempel di kiri saat tabel digeser (aturan UI/UX modulkeuangan & panduan Meddinah §4). Kalau isinya teks
   panjang yang memakan hampir seluruh kotak di HP, tabel itu harus dijadikan kartu — lebar kolom pertama ikut diukur. */
.gulir th:first-child,.gulir td:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 #eef2f7}
.gulir thead th:first-child{z-index:3;background:#f5f7fb}
.gulir tbody th:first-child,.gulir tfoot th:first-child{background:#f5f7fb}
.gulir tbody tr:hover td:first-child{background:#fafbfd}
/* Kolom centang (pilih baris) bukan penanda baris: tidak ikut menempel. Kalau menempel, nama di kolom kedua yang tergeser
   dan terpotong (terukur di Barang & Jasa 360 px, 1 Okt 2026). */
.gulir table:has(tbody td:first-child input[type=checkbox]) :is(th,td):first-child{position:static;box-shadow:none}
tfoot th,tbody th{font-weight:600;background:#f5f7fb}
td.n,th.n,td.angka,th.angka{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Tanda urut = panah teks ↑ ↓ (Apink 1 Okt 2026). JANGAN ↕: di iPhone tampil sebagai emoji kotak biru. Diam = ↑↓ samar (di HP
   tanpa kursor, ini satu-satunya tanda kolom bisa diurutkan); kolom yang diurutkan = satu panah tebal aksen + judul aksen.
   Lebar tanda tetap supaya kolom tidak melompat. Disalin persis dari erp sekolah — jangan ditimpa di halaman. */
th.bisa-urut{cursor:pointer;user-select:none;white-space:nowrap}
th.bisa-urut::after{content:"\2191\2193";display:inline-block;width:1.4em;margin-left:5px;color:var(--abu);font-size:11px;font-weight:500;letter-spacing:-1px;font-variant-emoji:text;font-family:system-ui,-apple-system,sans-serif}
th.bisa-urut.naik::after{content:"\2191";color:var(--aksen);font-size:13px;font-weight:800}
th.bisa-urut.turun::after{content:"\2193";color:var(--aksen);font-size:13px;font-weight:800}
th.bisa-urut.naik,th.bisa-urut.turun{color:var(--aksen-gelap)}

.pil{display:inline-block;padding:3px 10px;border-radius:9px;font-size:11.5px;font-weight:500;background:#f1f5f9;color:#475569;white-space:nowrap;line-height:1.5}
.pil.hijau{background:#dcfce7;color:#166534}
.pil.merah{background:#fee2e2;color:#991b1b}
.pil.kuning,.pil.emas{background:#fef3c7;color:#92400e}
.pil.biru{background:#e1ecf7;color:#2c4f75}

/* Tombol: bawaan putih bergaris; .utama navy (satu per halaman); .abu = Cetak; .merah = Batal/Hapus; .emas = aksi sangat penting. */
button,.tombol{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;padding:0 15px;min-height:40px;
  border:1px solid #cbd5e1;background:#fff;color:var(--teks);border-radius:9px;font:inherit;font-size:13.5px;font-weight:500;text-align:center;text-decoration:none;line-height:1.3}
button:hover,.tombol:hover{background:#f8fafc;text-decoration:none}
button.utama,.tombol.utama{background:var(--aksen);color:#fff;border-color:var(--aksen);box-shadow:0 1px 2px rgba(26,71,137,.3)}
button.utama:hover,.tombol.utama:hover{background:var(--aksen-gelap);border-color:var(--aksen-gelap)}
button.abu,.tombol.abu{background:#64748b;border-color:#64748b;color:#fff}
button.abu:hover,.tombol.abu:hover{background:#4d5b6d}
button.merah,.tombol.merah{background:#b91c1c;border-color:#b91c1c;color:#fff}
button.merah:hover,.tombol.merah:hover{background:#991b1b}
button.emas,.tombol.emas{background:var(--gold);border-color:var(--gold);color:var(--teks)}
button:disabled{opacity:.5;cursor:not-allowed}
a>button{vertical-align:middle}

input:not(:where([type=checkbox],[type=radio],[type=file],[type=submit],[type=button],[type=reset],[type=hidden],[type=range],[type=color])),
select,textarea{padding:8px 11px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:13.8px;line-height:1.35;background-color:#fff;color:var(--teks);max-width:100%;min-height:40px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--aksen);box-shadow:0 0 0 3px rgba(26,71,137,.16)}
button:focus-visible,a:focus-visible{outline:2px solid rgba(26,71,137,.45);outline-offset:2px}
textarea{min-height:64px;resize:vertical;line-height:1.55}
input[type=checkbox],input[type=radio]{width:17px;height:17px;accent-color:var(--aksen)}
td input,td select{min-height:34px;padding:5px 9px;font-size:13px}
/* Kotak isian angka rata kanan dan menempel di tepi kanan selnya, sejajar judul kolom .angka (Apink 2 Okt 2026: "kok gak lurus" —
   kotak qty/harga dulu menempel kiri di bawah judul rata kanan, bergeser 12–98 px; angkanya pun rata kiri). */
input.angka{text-align:right}
td:has(>input.angka){text-align:right}

.kosong{padding:34px 20px;text-align:center;color:var(--abu);font-size:13.5px}

/* Dasbor beranda: kartu berikon (pola Sneat ditiru erp sekolah) */
.wadah-kartu{container-type:inline-size}
.kartu{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:13px;margin:0 0 18px}
.kartu .k{display:flex;align-items:center;gap:14px}
.kartu .k .lambang{width:44px;height:44px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--aksen-tipis)}
.kartu .k .lambang svg{width:22px;height:22px;stroke:var(--aksen-gelap);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.kartu .k .lambang.hijau{background:#dcfce7}.kartu .k .lambang.hijau svg{stroke:#166534}
.kartu .k .lambang.merah{background:#fee2e2}.kartu .k .lambang.merah svg{stroke:#991b1b}
.kartu .k .lambang.emas{background:#fef3c7}.kartu .k .lambang.emas svg{stroke:#92400e}
.kartu .k .lambang.ungu{background:#efe0f7}.kartu .k .lambang.ungu svg{stroke:#5b2d82}
.kartu .k .isi{min-width:0}
.wadah-kartu .kartu{grid-template-columns:1fr}
.wadah-kartu .kartu .angka{white-space:nowrap}
@container (min-width:520px){.wadah-kartu .kartu{grid-template-columns:repeat(2,1fr)}}
@container (min-width:770px){.wadah-kartu .kartu{grid-template-columns:repeat(3,1fr)}}
@container (min-width:1100px){.wadah-kartu .kartu{grid-template-columns:repeat(4,1fr)}}

/* Kotak, rincian, judul beraksi, tombol sekunder & aksi baris (erp sekolah) */
.judul{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.judul .aksi{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.judul .aksi form{margin:0}
.kotak{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px;margin-bottom:16px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.rinci{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 18px;margin:0}
.rinci .lebar{grid-column:1/-1}
.rinci dt{font-size:11.5px;color:var(--mut);font-weight:500}
.rinci dd{margin:0;font-size:14px;min-height:1.4em}
.niy{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:600;color:var(--aksen-gelap);white-space:nowrap}
button.biru,.tombol.biru{background:#e1ecf7;color:#2c4f75;border-color:#b6cfe8;font-weight:600}
button.biru:hover,.tombol.biru:hover{background:#d2e2f2;border-color:#8fb2d9}
/* .pilaksi — aksi berulang di baris tabel/kartu; lembut supaya dua puluh baris tidak berteriak bersamaan. 32 px (HP 36 px). */
.pilaksi{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 11px;border-radius:7px;font:inherit;font-size:12px;font-weight:600;
  line-height:1.4;white-space:nowrap;border:1px solid transparent;cursor:pointer;background:#f1f5f9;color:#475569;text-decoration:none}
.pilaksi:hover{text-decoration:none;filter:brightness(.97)}
.pilaksi.biru{background:#e8effb;color:#2c4f75;border-color:#c9dbf5}
.pilaksi.hijau{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.pilaksi.merah{background:#fdecec;color:#991b1b;border-color:#f3c9c9}
.readme{font-size:13.8px;line-height:1.65;overflow-x:auto}
.readme h1{font-size:18px}.readme h2{font-size:15.5px}.readme h1:first-child{margin-top:0}
.readme code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:#f5f7fb;padding:1px 5px;border-radius:5px}
.readme pre{background:#f5f7fb;border-radius:9px;padding:12px 14px;overflow:auto}.readme pre code{background:none;padding:0}

/* Pengaturan → Modul (pola layar "Apps" Odoo, disalin dari erp sekolah) */
.apps{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start}
.apps-isi{min-width:0}
.apps-kiri{background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 8px;position:sticky;top:84px}
.apps-judul{font-size:10.5px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--abu);margin:2px 10px 8px}
.apps-kiri a,.apps-status a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;color:#475569;font-size:13.5px;font-weight:500;min-height:36px}
.apps-kiri a span,.apps-status a span{margin-left:auto;font-size:11.5px;color:var(--mut);font-weight:500}
.apps-kiri a:hover,.apps-status a:hover{background:var(--aksen-tipis);color:var(--aksen-gelap);text-decoration:none}
.apps-kiri a.on,.apps-status a.on{background:var(--aksen-tipis);color:var(--aksen-gelap);font-weight:600}
.apps-cari{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.apps-cari input[type=search]{flex:1 1 220px;max-width:340px}
.apps-status{display:flex;gap:4px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:11px;padding:3px}
.apps-status a{padding:5px 10px}
.apps-status a span{margin-left:4px}
.apps-kartu{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.app{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px;display:grid;grid-template-columns:56px 1fr;gap:4px 14px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.app:hover{border-color:var(--abu)}
.app-ikon{width:56px;height:56px;border-radius:14px;background:var(--aksen-tipis);display:flex;align-items:center;justify-content:center;flex:none}
.app-ikon svg{width:30px;height:30px;stroke:var(--aksen-gelap);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.app.terpasang .app-ikon{background:#dcfce7}.app.terpasang .app-ikon svg{stroke:#166534}
.app-teks{min-width:0}
.app-nama{display:block;font-weight:600;font-size:15px;color:var(--teks)}
.app-nama:hover{color:var(--aksen-gelap)}
.app-ringkas{font-size:12.8px;color:var(--mut);line-height:1.5;margin-top:2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.app-kode{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--abu);margin-top:6px;overflow-wrap:anywhere}
.app-aksi{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;padding-top:12px;border-top:1px solid #eef2f7}
.app-aksi form{margin:0}
.app-judul{display:flex;gap:14px;align-items:center}
.app-judul .subjudul{margin:0}

/* ---------- 4. halaman masuk (kartu putih di atas gradasi navy, pola erp sekolah) ---------- */
body.masuk{background:linear-gradient(135deg,var(--aksen-terang) 0%,var(--aksen) 45%,var(--aksen-gelap) 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.kotak-masuk{background:#fff;width:370px;max-width:100%;border-radius:18px;padding:32px 28px 24px;box-shadow:0 20px 60px rgba(7,26,54,.35);display:grid;gap:12px;text-align:center}
.kotak-masuk .lambang{width:60px;height:60px;border-radius:16px;background:var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto}
.kotak-masuk .lambang svg{width:32px;height:32px;stroke:var(--aksen-gelap);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.kotak-masuk .garis{width:44px;height:3px;border-radius:99px;background:var(--aksen);margin:2px auto 0}
.kotak-masuk h1{font-size:18px;margin:0;font-weight:600}
.kotak-masuk .sub{font-size:12.5px;color:var(--mut);margin:-6px 0 6px}
.kotak-masuk label{display:grid;gap:4px;text-align:left;font-size:11.5px;color:var(--mut);font-weight:500}
.kotak-masuk input{background-color:var(--aksen-tipis)}
.kotak-masuk button{background:var(--aksen);border-color:var(--aksen);color:#fff;width:100%;margin-top:4px}
.kotak-masuk button:hover{background:var(--aksen-gelap)}
.kotak-masuk p{margin:0;font-size:12.5px}

/* ---------- 5. kelas lama erp-meddinah digaya ulang ---------- */
/* Formulir: kotak putih bersudut 13 px seperti .kotak erp sekolah; label kecil di atas isian. */
.borang{display:grid;gap:12px;max-width:560px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px;box-shadow:0 1px 2px rgba(15,23,42,.04);margin-bottom:16px}
.borang label{display:grid;gap:4px;font-size:11.5px;color:var(--mut);font-weight:500}
.borang label.baris{display:flex;align-items:center;gap:8px;color:var(--teks);font-weight:400;font-size:13.8px}
.borang h2{margin:6px 0 0;font-size:14px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.borang p{margin:2px 0}
.borang>*,.aksi-atas>*,.aksi-atas label{min-width:0}
.borang input,.borang select,.borang textarea{width:100%;max-width:100%}
.borang input[type=checkbox],.borang input[type=radio],.aksi-atas input[type=checkbox]{width:17px;flex:none}
/* Bilah aksi/saringan di atas tabel: baris seperti .tools erp sekolah. */
.aksi-atas{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.aksi-atas label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut);font-weight:500;flex:1 1 auto}
.aksi-atas form{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.aksi-atas label>input,.aksi-atas label>select{min-width:0;max-width:100%}
.borang .aksi-atas{margin-bottom:0;align-items:end}
.borang .aksi-atas label{display:grid;font-size:11.5px}
.borang .aksi-atas label.baris{display:flex;align-items:center}
label.baris{justify-content:flex-start}
/* Pesan: pola .msg erp sekolah. */
.pesan,.galat{border-radius:11px;padding:12px 14px;font-size:13px;margin:0 0 16px;border:1px solid}
.pesan{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.galat{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
/* Kartu angka lama (.kartu-grid > .k) — tampilannya disamakan dengan kartu dasbor. */
.kartu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:13px;margin:0 0 18px}
.k{background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px 16px;box-shadow:0 1px 2px rgba(15,23,42,.04);color:inherit;display:block}
a.k:hover{border-color:var(--aksen);text-decoration:none}
.k .label{display:block;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--abu)}
.k .angka{display:block;font-size:21px;font-weight:600;letter-spacing:-.3px;line-height:1.25;font-variant-numeric:tabular-nums}
.k .sub{display:block;font-size:12.5px;color:var(--mut)}
.k.sorot{background:var(--aksen);border-color:var(--aksen);color:#fff}
.k.sorot .label,.k.sorot .sub{color:rgba(255,255,255,.8)}
.k.sorot .lambang{background:rgba(255,255,255,.16)}.k.sorot .lambang svg{stroke:#fff}
.k.awas .angka{color:var(--red)}
.pintasan{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.pintasan a{display:inline-flex;align-items:center;gap:7px;padding:0 14px;min-height:40px;background:#fff;border:1px solid var(--line);border-radius:10px;font-weight:500;font-size:13.5px;color:var(--teks)}
.pintasan a:hover{text-decoration:none;border-color:var(--aksen);color:var(--aksen)}
.pintasan a svg{width:18px;height:18px;fill:none;stroke:var(--aksen);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Daftar Laporan: kategori kiri, kartu laporan ungu (warna Laporan Accurate). */
.laporan-rangka{display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:start}
.laporan-nav{position:sticky;top:84px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:8px}
.laporan-nav a{display:block;padding:8px 10px;border-radius:8px;color:#475569;font-size:13.5px}
.laporan-nav a:hover{background:var(--aksen-tipis);color:var(--aksen-gelap);text-decoration:none}
.laporan-kartu{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:16px}
.laporan-kartu a{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #e2d6f3;background:#f7f2fd;border-radius:11px;color:#4c2a78;font-weight:500;font-size:13.5px}
.laporan-kartu a:hover{background:#efe5fb;text-decoration:none}

/* ---------- 6. layar sempit (erp sekolah) ---------- */
@media (max-width:820px){
  .rangka{flex-direction:column;align-items:stretch}
  main{width:100%;max-width:100%;padding:16px}
  aside{width:100%;height:auto;position:static;border-right:0;border-bottom:1px solid var(--line);display:flex;gap:6px;overflow-x:auto;padding:10px;scrollbar-width:none}
  aside::-webkit-scrollbar{display:none}
  aside .grup,aside .sub-grup{display:none}
  aside a{white-space:nowrap;margin:0;flex:0 0 auto}
  aside details.kel-d{flex:0 0 auto}
  aside details.kel-d summary{border:1px solid var(--line);background:#fff;margin:0;min-height:40px}
  .lembar-d{position:static;width:auto;max-width:none;margin:8px 8px 0}
  .ubin-d{box-shadow:0 4px 14px rgba(15,23,42,.08)}
  .atas .unit{display:none}
  input:not(:where([type=checkbox],[type=radio],[type=file],[type=submit],[type=button],[type=reset],[type=hidden],[type=range],[type=color])),select,textarea{font-size:16px}
  .borang{max-width:100%!important;padding:14px}
  .aksi-atas>form>label,.borang .aksi-atas>label{flex:1 1 100%}
  .kartu-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .k .angka{font-size:18px}
  .laporan-rangka{grid-template-columns:1fr}
  .laporan-nav{position:static;display:flex;gap:4px;overflow-x:auto}
  .laporan-nav a{white-space:nowrap}
  main table{font-size:13px}
  .apps{grid-template-columns:1fr}
  .apps-kiri{position:static;display:flex;gap:4px;overflow-x:auto;padding:6px}
  .apps-judul{display:none}
  .apps-kiri a{white-space:nowrap;flex:0 0 auto}
  .apps-kartu{grid-template-columns:1fr}
  .pilaksi{min-height:36px}
}
/* Bilah atas HP (≤ 760): baris 1 ⋮⋮⋮ + logo + nama; baris 2 nama pengguna di kiri, Keluar di kanan (34 px, pola erp sekolah). */
@media (max-width:760px){
  .atas{padding:8px 12px;gap:8px 10px;height:auto;flex-wrap:wrap;margin:8px 8px 0;top:8px;border-radius:14px}
  .atas .nama{font-size:14.5px}
  .atas .kanan{flex:1 0 100%;margin-left:0;gap:6px}
  .atas .siapa{display:block;flex:1 1 auto;line-height:1.25}
  .atas .siapa .sp-n{display:block;font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis}
  .atas .siapa .sp-p{display:block;font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
  .atas .siapa .sp-p::before{content:none;margin:0}
  .atas .keluar{flex:0 0 auto;padding:0 16px}
  .rangka{min-height:0}
  .ubin-d{grid-template-columns:repeat(2,1fr)}
}
@media print{
  .atas,aside,.lembar-d,.aksi-atas,.pintasan{display:none!important}
  body{background:#fff}
  .rangka{display:block}
  main{padding:0}
  .gulir,.borang,.k{border:0;box-shadow:none}
  .gulir{overflow:visible}
}

/* ---------- 7. Lonceng & 💬 Diskusi di bilah atas + panel Diskusi per dokumen (disalin dari erp sekolah 1 Okt 2026) ----------
   Warna hangat PKBM di sumbernya diganti slate yayasan. Laptop: panel melayang di bawah tombol; HP ≤ 560: layar penuh,
   Tutup lebar di bawah. Pengukuran asli (Keluar 34 px → tombol 34×34) ada di komentar sumber erp sekolah. */
@keyframes turun{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
/* ---------- Tombol bilah atas: lonceng (App\Pemberitahuan) & 💬 Diskusi (App\Diskusi\Percakapan), Apink 25 Sep 2026 ----------
   Satu bentuk untuk keduanya (.tombol-bilah + .panel-bilah, perilaku tampilan/bilah.js). Diukur Playwright, bukan
   ditebak: Keluar 34 px tinggi (laptop & HP) → tombol kotak 34×34, sudut 8 px, bahan sama dengan Keluar (--bilah-tombol +
   garis --bilah-garis) — tetangga terdekat, jadi terbaca satu deret; kisi "Semua Aplikasi" 38 px ada di ujung lain bilah.
   Ikon 18 px, stroke 2 (viewBox 24) = 1,5 px, sama dengan panah pemilih lembaga. Jarak antar-tombol = gap .kanan (10 px
   laptop, 6 px HP). Lencana merah melayang (absolute) di pojok kanan atas, cincin warna bilah — ukuran tombol tidak
   berubah. Laptop: 💬 · lonceng · nama pengguna · Keluar. HP ≤ 760: nama pengguna · 💬 · lonceng · Keluar (order). */
.atas .tombol-bilah{position:relative;flex:none;min-height:0;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  border-radius:8px;background:var(--bilah-tombol);border:1px solid var(--bilah-garis);color:var(--bilah-teks);cursor:pointer;font-family:inherit}
.atas .tombol-bilah:hover,.atas .tombol-bilah[aria-expanded="true"]{background:var(--bilah-tombol-hover)}
.atas .tombol-bilah:focus-visible{outline:2px solid var(--bilah-teks);outline-offset:2px}
.atas .tombol-bilah svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.atas .tombol-bilah .lencana{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#dc2626;color:#fff;
  font-size:10.5px;font-weight:600;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--bilah-latar);pointer-events:none}
.atas .tombol-bilah .lencana[hidden]{display:none}
@media (max-width:760px){.atas .tombol-bilah{order:1}.atas .kanan>form{order:2}}
.panel-bilah{position:fixed;z-index:60;width:360px;max-width:calc(100vw - 16px);max-height:min(560px,calc(100vh - 96px));display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--abu-terang);border-radius:14px;box-shadow:0 14px 34px rgba(15,23,42,.16);animation:turun .22s;overflow:hidden}
.panel-bilah[hidden]{display:none}
.lp-kepala{padding:12px 16px;border-bottom:1px solid var(--line)}
.lp-kepala h2{margin:0;font-size:15px;font-weight:600}
.lp-isi{overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto}
.lp-bagian+.lp-bagian{border-top:6px solid var(--latar)}
.lp-bagian-kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px 4px}
.lp-bagian-kepala h3{margin:0;font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--mut)}
.lp-baca-semua{background:none;border:0;padding:6px 0;min-height:32px;font:inherit;font-size:12.5px;font-weight:500;color:var(--aksen-gelap);cursor:pointer}
.lp-butir{display:flex;gap:10px;align-items:flex-start;padding:10px 16px;min-height:48px;color:var(--teks);border-top:1px solid #eef2f7}
.lp-butir:hover,.lp-butir:focus-visible{background:var(--aksen-tipis);outline:0}
.lp-butir::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;margin-top:7px;background:transparent}
.lp-butir.tindakan::before,.lp-butir.kabar.belum::before{background:var(--aksen)}
.lp-butir.kuning::before{background:#d97706}.lp-butir.merah::before{background:#dc2626}
.lp-butir.merah small{color:#b91c1c}
.lp-teks{min-width:0}
.lp-teks b{display:block;font-size:13.5px;font-weight:500;line-height:1.4}
.lp-butir.kabar.belum b{font-weight:600}
.lp-butir.kabar:not(.belum) b{color:var(--mut)}
.lp-teks small{display:block;font-size:12px;color:var(--mut);line-height:1.45;margin-top:2px}
.lp-kosong{margin:0;padding:8px 16px 14px;font-size:13px;color:var(--mut)}
.lp-kaki{display:none}
/* HP: layar penuh; Tutup lebar di bawah (jalur jempol), halaman di belakang tidak ikut bergulir. */
@media (max-width:560px){
  .panel-bilah{inset:0;top:0 !important;left:0 !important;width:auto;max-width:none;max-height:none;border:0;border-radius:0;box-shadow:none}
  .lp-kepala{padding:16px}
  .lp-kaki{display:block;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
  .lp-tutup{width:100%;min-height:48px;border-radius:12px;border:1px solid var(--abu-terang);background:#f5f7fb;color:var(--teks);font:inherit;font-weight:600;cursor:pointer}
  body.panel-bilah-buka{overflow:hidden}
}
/* Baris percakapan — pop-up 💬 dan halaman /diskusi memakai bentuk yang sama (bagian/diskusi-baris). Belum dibaca: titik
   aksen + judul tebal + angka pesan belum dibaca; teks satu baris, dipotong elipsis (tidak pernah melebarkan layar HP). */
.dk-baris{display:flex;gap:10px;align-items:flex-start;padding:10px 16px;min-height:56px;color:var(--teks);border-top:1px solid #eef2f7}
.dk-baris:first-child{border-top:0}
.dk-baris:hover,.dk-baris:focus-visible{background:var(--aksen-tipis);outline:0}
.dk-baris::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;margin-top:7px;background:transparent}
.dk-baris.belum::before{background:var(--aksen)}
.dk-baris-teks{flex:1 1 auto;min-width:0}
.dk-baris-judul{display:block;font-size:13.5px;font-weight:500;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-baris.belum .dk-baris-judul{font-weight:600}
.dk-baris:not(.belum) .dk-baris-judul{color:var(--mut)}
.dk-baris-potong{display:block;font-size:12.5px;color:var(--mut);line-height:1.45;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-baris.belum .dk-baris-potong{color:var(--teks)}
.dk-baris-sisi{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:11.5px;line-height:1.4;color:var(--mut);white-space:nowrap;padding-top:1px}
.dk-baris-tanda{display:flex;gap:4px}
.dk-baris-jml,.dk-baris-sebut{min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:11px;font-weight:600;line-height:20px;text-align:center}
.dk-baris-jml{background:var(--aksen-tipis);color:var(--aksen-gelap)}
.dk-baris-sebut{background:#e1ecf7;color:#2c4f75}
.lp-semua{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-top:1px solid var(--line);font-size:13px;font-weight:500;color:var(--aksen-gelap)}
.lp-semua:hover,.lp-semua:focus-visible{background:var(--aksen-tipis);outline:0}
.dk-halaman .dk-baris{padding:12px 16px}
.dk-halaman .dk-cari{flex:1 1 200px;max-width:320px;min-width:0}
.halaman-nomor{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 4px}
.halaman-nomor a,.halaman-nomor span{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid var(--abu-terang);background:#fff;padding:0 10px;font-size:13px;color:var(--teks)}
.halaman-nomor .on{background:var(--aksen-tipis);color:var(--aksen-gelap);border-color:var(--aksen);font-weight:600}
.halaman-nomor span{color:var(--abu)}

/* ---------- Diskusi per dokumen (App\Diskusi, Apink 25 Sep 2026) ----------
   Gaya chat Microsoft Teams: pesan orang lain di kiri dengan inisial + gelembung abu, pesan sendiri rata kanan dengan
   gelembung warna aksen tipis (tanpa inisial & nama). Laptop: panel di bawah isi dokumen selebar isi; HP: satu kolom,
   kotak tulis 16 px (iPhone tidak memperbesar halaman), tombol ≥ 44 px untuk jempol. Saran @mention melayang DI ATAS
   kotak tulis — di HP keyboard menutup bagian bawah layar. Balas/Hapus selalu tampil (tidak bergantung hover — HP). */
.diskusi{margin-top:26px}
.diskusi .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dk-daftar{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:13px 13px 0 0;padding:16px}
.dk-kosong{margin:0;font-size:13px;color:var(--mut)}
.dk-kosong[hidden]{display:none}
.dk-pesan{display:flex;gap:10px;align-items:flex-start;min-width:0;scroll-margin-top:96px;border-radius:12px}
.dk-pesan.sendiri{flex-direction:row-reverse}
.dk-avatar{flex:none;width:32px;height:32px;border-radius:50%;background:var(--abu-terang);color:var(--teks);font-size:11.5px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;letter-spacing:.3px}
.dk-pesan.sendiri>.dk-avatar{display:none}
.dk-badan{min-width:0;max-width:min(620px,86%)}
.dk-pesan.sendiri .dk-badan{display:flex;flex-direction:column;align-items:flex-end}
.dk-kepala{font-size:12px;color:var(--mut);line-height:1.4;margin-bottom:3px}
.dk-kepala b{color:var(--teks);font-weight:600;margin-right:4px}
.dk-pesan.sendiri .dk-kepala b{display:none}
.dk-kepala time{cursor:default}
.dk-gelembung{background:#f1f5f9;border-radius:4px 12px 12px 12px;padding:8px 12px;overflow-wrap:anywhere;word-break:break-word;max-width:100%}
.dk-pesan.sendiri .dk-gelembung{background:var(--aksen-tipis);border-radius:12px 4px 12px 12px}
.dk-isi{font-size:14px;line-height:1.55}
.dk-isi a{text-decoration:underline;text-underline-offset:2px}
.dk-sebut{color:var(--aksen-gelap);font-weight:600}
.dk-terhapus{margin:0;font-style:italic;color:var(--mut)}
.dk-pesan.dihapus .dk-gelembung{background:transparent;border:1px dashed var(--abu-terang)}
.dk-kutip{display:block;border-left:3px solid var(--abu);padding:2px 8px;margin:0 0 6px;font-size:12.5px;line-height:1.45;color:var(--mut);
  background:rgba(255,255,255,.65);border-radius:4px;max-width:100%}
.dk-kutip b{display:block;color:var(--teks);font-weight:600}
.dk-kutip span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-aksi{display:flex;gap:2px;margin-top:2px}
.dk-aksi form{margin:0}
.dk-balas,.dk-hapus{background:none;border:0;padding:4px 8px;min-height:32px;border-radius:6px;font:inherit;font-size:12.5px;color:var(--mut);cursor:pointer}
.dk-balas:hover,.dk-balas:focus-visible{color:var(--aksen-gelap);background:var(--aksen-tipis);outline:0}
.dk-hapus:hover,.dk-hapus:focus-visible{color:#b91c1c;background:#fef2f2;outline:0}
.dk-pesan:target,.dk-pesan.dk-sorot{animation:dk-sorot 2.4s ease-out}
@keyframes dk-sorot{0%,35%{background:var(--aksen-tipis);box-shadow:0 0 0 6px var(--aksen-tipis)}100%{background:transparent;box-shadow:0 0 0 6px transparent}}
.dk-tulis{background:#fff;border:1px solid var(--line);border-radius:0 0 13px 13px;padding:12px 16px 14px;border-top:1px solid var(--line)}
.dk-membalas{display:flex;align-items:center;gap:8px;border-left:3px solid var(--aksen);background:var(--aksen-tipis);border-radius:4px;padding:4px 4px 4px 10px;
  margin-bottom:8px;font-size:12.5px;color:var(--mut);min-width:0}
.dk-membalas[hidden]{display:none}
.dk-membalas-teks{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-membalas-teks b{color:var(--teks);font-weight:600;margin:0 4px}
.dk-batal-balas{flex:none;width:32px;height:32px;border:0;background:none;border-radius:6px;font-size:20px;line-height:1;color:var(--mut);cursor:pointer}
.dk-batal-balas:hover{background:#fff;color:var(--teks)}
.dk-kotak{position:relative}
.dk-kotak textarea{display:block;width:100%;min-height:64px;max-height:40vh}
.dk-saran{position:absolute;left:0;bottom:calc(100% + 6px);z-index:25;list-style:none;margin:0;padding:4px;background:#fff;border:1px solid var(--abu-terang);
  border-radius:10px;box-shadow:0 10px 28px rgba(15,23,42,.16);width:300px;max-width:100%;max-height:264px;overflow-y:auto;overscroll-behavior:contain}
.dk-saran[hidden]{display:none}
.dk-saran li{display:flex;align-items:center;gap:10px;padding:6px 10px;min-height:44px;border-radius:8px;cursor:pointer;font-size:13.5px}
.dk-saran li .dk-avatar{width:28px;height:28px;font-size:11px}
.dk-saran li.aktif,.dk-saran li:hover{background:var(--aksen-tipis)}
.dk-kaki{display:flex;align-items:center;gap:10px;margin-top:8px}
.dk-petunjuk,.dk-sisa{font-size:12px;color:var(--mut)}
.dk-kaki .tombol{margin-left:auto;min-width:96px}
.dk-galat{margin:6px 0 0;font-size:13px;color:#b91c1c}
.dk-galat[hidden]{display:none}
@media (max-width:560px){
  .dk-daftar{padding:12px}
  .dk-tulis{padding:10px 12px 12px}
  .dk-badan{max-width:88%}
  .dk-kotak textarea{font-size:16px}
  .dk-petunjuk{display:none}
  .dk-kaki .tombol{min-height:44px;min-width:110px}
  .dk-saran{width:100%}
}

/* Baris panel & daftar adalah tautan blok: tanpa garis bawah saat disentuh (aturan lama a:hover{underline} di bagian 1). */
.lp-butir:hover,.dk-baris:hover,.lp-semua:hover,.dk-kutip:hover{text-decoration:none}
/* Mulai Diskusi: baris paling atas pop-up 💬; di halaman Diskusi satu tombol utama di ujung kanan. */
.lp-mulai{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;font-size:13.5px;font-weight:600;color:var(--aksen);border-bottom:1px solid var(--line)}
.lp-mulai span{font-size:18px;line-height:1}
.lp-mulai:hover,.lp-mulai:focus-visible{background:var(--aksen-tipis);text-decoration:none;outline:0}
.dk-alat .dk-mulai{margin-left:auto}
/* Hasil Mulai Diskusi: daftar dokumen, bukan percakapan — judul warna teks biasa, tanpa titik "belum dibaca". */
.dk-pilih .dk-baris::before{display:none}
.dk-pilih .dk-baris .dk-baris-judul{color:var(--teks)}
/* Halaman Diskusi (erp-meddinah): pil saringan memakai .apps-status (bentuk layar Modul); daftar dalam .kotak tanpa padding. */
.dk-alat{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.dk-alat form{margin:0}
.kotak.dk-halaman{padding:0;overflow:hidden}
.dk-cari-baris{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:#fafbfd}
.dk-jumlah{margin-left:auto;font-size:12.5px;color:var(--mut);font-weight:500}
.dk-daftar-percakapan .kosong{margin:0}

/* ── Persetujuan (langkah 1c, docs/PERSETUJUAN.md): Kotak Persetujuan, rincian pengajuan, catatan di Kas & Bank. ──
   Warna tombol ikut makna (panduan UI/UX): hijau = setujui, merah = tolak, .pilaksi biru = buka rincian. */
button.hijau,.tombol.hijau{background:#15803d;border-color:#15803d;color:#fff}
button.hijau:hover,.tombol.hijau:hover{background:#166534;border-color:#166534}
.catatan{color:var(--mut);font-size:13px;line-height:1.5;margin:0 0 12px;max-width:80ch}
.dk-alat .ps-terpilih{margin-left:auto}
.ps-aksi{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ps-aksi form,.ps-putus form{margin:0}
.ps-tolak{display:flex;gap:6px;align-items:center;min-width:0}   /* min-width:0: boleh menyusut di bawah lebar isian + tombol */
.ps-tolak input{width:150px;min-width:0;min-height:32px;padding:0 8px;font-size:12.5px}
.ps-putus{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* Teks panjang di sel tabel (nama pemasok, uraian): boleh turun baris — .gulir table = max-content, tanpa ini satu nama panjang
   mendorong kolom kanan keluar kotak di laptop. docs/TAMPILAN-TABEL.md */
.bungkus{min-width:110px;max-width:140px;white-space:normal}
.ps-daftar{margin:0;padding-left:1.1rem}
.ps-daftar li{margin:.15rem 0}
.ps-putus .ps-tolak{flex:1 1 320px}
.ps-putus .ps-tolak input{flex:1;width:auto;min-height:40px;font-size:14px}
@media (max-width:760px){
  .ps-tolak input{min-height:36px}
  .ps-putus>form{flex:1 1 100%}
  .ps-putus>form>button{width:100%}
  .ps-putus .ps-tolak>button{width:auto;flex:none}
}
.ps-uraian{min-width:220px;max-width:300px;white-space:normal}   /* .gulir table = max-content: tanpa batas ini uraian panjang mendorong Nilai keluar layar */
.ps-uraian small,.ps-sub{display:block;color:var(--mut);font-size:12px}

/* .gulir.kartukan — tabel jadi kartu di HP ≤ 560 px (panduan UI/UX Meddinah §4, pola aplikasi Meddinah lama 13 Agu 2026;
   pertama di erp-meddinah: Kotak Persetujuan, 2 Okt 2026). Untuk tabel yang kolom terpentingnya di kanan (nilai, tombol
   putus) — di HP tidak boleh perlu digeser. Pakai: <div class="gulir kartukan"> membungkus tabel (menu.js tidak
   membungkus ulang), tiap <td data-l="Nama kolom">, judul kartu td.utama, angka terpenting td.n, kotak centang td.pilih
   (sebaris dengan judul), tombol td.aksi. Di atas 560 px tetap tabel biasa. Rincian: docs/TAMPILAN-TABEL.md.
   Kekuatan selektor: reset & sel berlabel sama-sama (0,2,1) — :where() tidak menambah — supaya td.utama/.n/.pilih/.aksi
   (0,3,1) selalu menang tanpa !important. */
@media (max-width:560px){
  .gulir.kartukan{overflow:visible;border:0;background:transparent;border-radius:0;box-shadow:none}
  .gulir.kartukan table{min-width:0;width:100%;display:block}
  .gulir.kartukan thead{display:none}
  .gulir.kartukan tbody,.gulir.kartukan tfoot{display:block}
  .gulir.kartukan tr{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 14px;margin-bottom:10px}
  .gulir.kartukan tfoot tr{background:#f8fafc}
  .gulir.kartukan tbody tr:hover td:first-child{background:transparent}
  .gulir.kartukan td{display:block;flex:1 1 100%;min-width:0;position:static;left:auto;background:transparent;box-shadow:none;border:0;padding:0;white-space:normal;text-align:left}
  .gulir.kartukan td:where(:not(.utama):not(.n)){order:3;display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:13.5px}
  .gulir.kartukan td:where(:not(.utama))::before{content:attr(data-l);color:var(--mut);font-size:11px;font-weight:600;text-transform:uppercase;
    letter-spacing:.4px;flex:0 0 auto;white-space:nowrap}
  .gulir.kartukan td.utama{order:1;flex:1 1 0;min-width:0;font-size:15px;line-height:1.45}
  .gulir.kartukan td.n{order:2;display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:10px 0;padding:9px 0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:19px;font-weight:700;color:var(--aksen-gelap)}
  .gulir.kartukan td.pilih{order:0;flex:none;display:block}
  .gulir.kartukan td.aksi{order:4;display:block;margin-top:8px}
  .gulir.kartukan td.kosong{display:block;text-align:center}
  .gulir.kartukan :is(td.aksi,td.pilih,td.kosong)::before{display:none}
  .gulir.kartukan .ps-uraian{min-width:0;max-width:none;text-align:right}
  .gulir.kartukan .ps-aksi>form:last-child{flex:1 1 100%}
  .gulir.kartukan .ps-tolak input{flex:1;width:auto}
}

/* Semua Aplikasi (⋮⋮⋮) ala Odoo/erp sekolah, 2 Okt 2026 — disalin dari layar Aplikasi erp sekolah (public/tampilan/app.css),
   dicakup .layar-apl supaya tidak bentrok dengan .ubin-ikon halaman Modul (wadah.css). */
.layar-apl{max-width:880px;margin:10px auto 0}
.layar-apl #cari-apl{width:100%;min-height:46px;font-size:15px;border-radius:12px;margin-bottom:22px}
.kisi-apl{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:22px 12px}
.kisi-apl[hidden],.hasil-cari a[hidden],.hasil-cari .kosong[hidden]{display:none}
.kisi-apl .ubin{display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--teks);font-size:13.5px;font-weight:500;text-align:center;padding:6px;border-radius:14px}
.kisi-apl .ubin:hover{background:#fff;color:var(--aksen-gelap);text-decoration:none}
.kisi-apl .ubin-ikon{width:72px;height:72px;border-radius:18px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);box-shadow:0 2px 6px rgba(15,23,42,.08)}
.kisi-apl .ubin-ikon svg{width:36px;height:36px;stroke:var(--aksen-gelap);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hasil-cari{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.hasil-cari a{display:block;padding:11px 16px;border-bottom:1px solid #eef2f7;color:var(--teks)}
.hasil-cari a:hover{background:var(--aksen-tipis);text-decoration:none}
.hasil-cari .un{color:var(--mut)}
.hasil-cari .kosong{padding:14px 16px;color:var(--mut)}
aside .sub-grup{font-size:11.5px;font-weight:600;color:var(--mut);margin:10px 11px 3px}
@media (max-width:820px){
  .kisi-apl{grid-template-columns:repeat(3,1fr);gap:18px 6px}
  .kisi-apl .ubin-ikon{width:62px;height:62px}
}

/* ── Mode Kasir (layouts/kasir.blade.php, App\Support\ModeKasir; docs/MODE-KASIR.md) — layar kasir layar penuh ala
   Accurate POS: bilah atas + menu (rel kiri ≥ 900 px, bilah bawah di HP), latar putih. Acuan tampilan:
   docs/riset/2026-10-02-pratinjau-mode-kasir.html. Komponen bersama mk-*; gaya per modul di bagiannya sendiri di bawah. ── */
body.mode-kasir{background:#fff}
/* Bilah atas = bilah .atas Accurate Link / ERP Sekolah (Apink 2 Okt 2026: "buatkan mirip seperti erp-sekolah headernya …
   tanpa gradasi"): polos --bilah-latar, melayang (jarak 10/16 px, sudut 16, garis & bayang sama), tinggi 58, logo 38,
   Keluar 34. Tinggi MINIMAL, bukan tetap: chip POS (offline, belum terkirim) boleh membuatnya membungkus. Rel menu dan
   panel bayar POS menempel di bawahnya (10 + 58 = 68 px). HP ≤ 760 px: dua baris seperti .atas (merek | chip … Keluar). */
.mk-atas{position:sticky;top:10px;top:max(10px,env(safe-area-inset-top));z-index:20;display:flex;align-items:center;gap:14px;min-height:58px;padding:0 18px;
  margin:10px 16px 0;margin-top:max(10px,env(safe-area-inset-top));background:var(--bilah-latar);color:var(--bilah-teks);border:1px solid var(--bilah-garis);
  border-radius:16px;box-shadow:var(--bilah-bayang)}
.mk-logo{width:38px;height:38px;border-radius:10px;background:var(--gold);display:grid;place-items:center;flex:none}
.mk-logo svg{width:22px;height:22px;stroke:var(--aksen-gelap);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mk-merk{display:grid;line-height:1.2;min-width:0}
.mk-merk b{font-size:16px;font-weight:600;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-merk span{font-size:12px;color:var(--bilah-redup);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-kanan{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.mk-kanan form{margin:0}
.mk-chip{font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;white-space:nowrap}
a.mk-chip{display:inline-flex;align-items:center;min-height:32px}   /* tautan (Accurate Link) = sasaran jari HP ≥ 32 px (diukur 29 px, tahap 2) */
a.mk-chip:hover{text-decoration:none;background:rgba(255,255,255,.24)}
.mk-chip.hijau{background:#dcfce7;color:#166534}
.mk-chip.kuning{background:#fff3d6;color:#8a5a00}
.mk-keluar{height:34px;min-height:0;padding:0 12px;border-radius:8px;background:var(--bilah-tombol);border:1px solid var(--bilah-garis);color:var(--bilah-teks);
  font-size:13px;font-weight:400;box-shadow:none}
.mk-keluar:hover{background:var(--bilah-tombol-hover)}
@media (max-width:760px){
  .mk-atas{flex-wrap:wrap;gap:8px 10px;padding:8px 12px;margin:8px 8px 0;margin-top:max(8px,env(safe-area-inset-top));top:8px;top:max(8px,env(safe-area-inset-top));border-radius:14px}
  .mk-merk b{font-size:14.5px}
  .mk-kanan{flex:1 0 100%;margin-left:0;gap:6px}
  .mk-kanan form:last-child{margin-left:auto}
}
.mk-rangka{display:flex;min-height:calc(100vh - 68px)}
.mk-menu{display:flex}
.mk-menu a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--mut);font-size:12px;font-weight:600;min-height:56px;text-align:center;min-width:0}
.mk-menu a:hover{text-decoration:none;color:var(--aksen)}
.mk-menu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mk-menu a[aria-current="page"]{color:var(--aksen)}
.mk-menu a[aria-current="page"] svg{stroke-width:2.2}
main.mk-isi{flex:1;min-width:0;padding:16px 16px 96px}
main.mk-isi>h1{font-size:20px;margin:0 0 12px}
@media (min-width:900px){
  .mk-menu{flex-direction:column;flex:none;width:92px;border-right:1px solid var(--line);padding-top:10px;position:sticky;top:68px;align-self:flex-start;height:calc(100vh - 68px)}
  .mk-menu a{padding:10px 4px}
  .mk-menu a[aria-current="page"]{background:#e8effb;box-shadow:inset -3px 0 0 var(--aksen)}
  main.mk-isi{padding:20px 24px 40px}
}
@media (max-width:899px){
  .mk-menu{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .mk-menu a{flex:1}
}
/* komponen bersama: kartu, baris angka, lembar aksi (<dialog class="mk-lembar">, dari bawah di HP, tengah di laptop), stepper */
.mk-kartu{border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:10px;background:#fff;min-width:0}
.mk-baris{display:flex;justify-content:space-between;gap:12px;padding-block:4px;border-bottom:1px dotted var(--line)}
.mk-baris:last-child{border-bottom:0}
.mk-baris.besar{font-weight:700;font-size:16px}
dialog.mk-lembar{border:0;padding:18px 16px calc(16px + env(safe-area-inset-bottom,0px));width:100%;max-width:100%;max-height:92vh;margin:auto auto 0;border-radius:18px 18px 0 0;overflow:auto}
dialog.mk-lembar::backdrop{background:rgba(15,23,42,.45)}
dialog.mk-lembar[open]{display:grid;gap:14px}
dialog.mk-lembar h2{font-size:17px;margin:0}
@media (min-width:640px){dialog.mk-lembar{max-width:520px;margin:auto;border-radius:18px}}
.mk-stepper{display:flex;align-items:center;gap:6px;flex:none}
.mk-stepper button{width:44px;height:44px;min-height:0;padding:0;border-radius:10px;font-size:20px;font-weight:600}
.mk-stepper input{width:64px;height:44px;text-align:center;font-weight:600;font-size:16px}

/* ── Mode Kasir · modul Kasir (Jual, Laci, Riwayat, Cek Harga) — tahap 2 ── */

/* Halaman Blade modul Kasir di layouts/kasir (Laci, Hitung & kunci, Riwayat, Retur, Cek Harga) dan POS React di kerangka
   yang sama (Pages/Kasir/Pos.jsx). Awalan mkk- = milik modul Kasir; komponen bersama mk-* tidak ditimpa di sini. Tombol
   kasir 44 px (jari), isian 16 px (iPhone tidak memperbesar), jarak antartombol 12 px (panduan UI/UX Meddinah §5). */
.mkk-hal{display:grid;gap:14px;min-width:0;max-width:1180px}
.mkk-hal>*{margin:0;min-width:0}
.mode-kasir .mkk-sub{margin:0;color:var(--mut);font-size:13.5px;line-height:1.5}
.mode-kasir .mkk-catatan{margin:0;color:var(--mut);font-size:13px;line-height:1.5}
.mkk-awas{margin:0;background:#fff3d6;color:#8a5a00;border:1px solid #f1d58f;border-radius:11px;padding:10px 12px;font-size:13px;line-height:1.5}
.mkk-pas{color:#166534}.mkk-selisih{color:#b91c1c}
.mkk-aksi{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.mkk-aksi>button,.mkk-aksi>.tombol{min-height:44px}
/* Laci: kartu per laci (pratinjau tab Laci, max 620 px), dua kolom di layar lebar bila ada dua laci */
.mkk-laci-daftar{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))}
.mkk-laci{align-content:start}
.mkk-kepala{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mkk-kepala h2{margin:0;font-size:17px;min-width:0}
.mkk-status{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:#f1f5f9;color:#475569;white-space:nowrap}
.mkk-status.kuning{background:#fff3d6;color:#8a5a00}
.mkk-status.hijau{background:#dcfce7;color:#166534}
.mkk-angka{display:grid}
.mkk-angka h3{margin:4px 0 2px;font-size:13px;font-weight:600;color:var(--mut)}
.mkk-angka .mk-baris>span{min-width:0}
.mkk-angka .mk-baris>b{white-space:nowrap}
.mkk-angka small,.mkk-brg small,.mkk-harga small{display:block;color:var(--mut);font-size:12px;font-weight:400}
.mode-kasir .mkk-tunggu{margin:0}
.mkk-buka{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.mkk-buka label{display:grid;gap:4px;font-size:12px;color:var(--mut);font-weight:500;flex:1 1 200px}
.mkk-buka input{min-height:44px;font-size:16px}
.mkk-buka button{min-height:44px}
/* borang Mode Kasir (Hitung & kunci, Retur, lembar aksi): label kecil di atas isian lebar */
.mkk-borang{display:grid;gap:12px}
.mkk-borang>p{margin:0}
.mkk-borang label{display:grid;gap:4px;font-size:12px;color:var(--mut);font-weight:500}
.mkk-borang label>input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.mkk-borang label>select{width:100%;min-height:44px;font-size:16px}
.mkk-borang label.mkk-cek{display:flex;align-items:center;gap:8px;color:var(--teks);font-size:14px;font-weight:400}
.mkk-borang select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;padding-right:34px;background-repeat:no-repeat;background-position:right 14px center;background-size:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.mkk-segmen{display:inline-flex;flex-wrap:wrap;gap:4px;padding:3px;border:1px solid var(--line);border-radius:11px;background:#fff;max-width:100%}
.mkk-segmen a,.mkk-borang .mkk-segmen label{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border-radius:8px;
  font-size:14px;font-weight:500;color:var(--teks);cursor:pointer;white-space:nowrap}
.mkk-segmen a:hover{text-decoration:none;background:var(--aksen-tipis)}
.mkk-segmen a[aria-current="page"],.mkk-segmen label:has(input:checked){background:var(--aksen);color:#fff}
.mkk-segmen input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.mkk-segmen label:has(input:focus-visible){outline:2px solid rgba(26,71,137,.45);outline-offset:2px}
/* Hitung & kunci: pecahan = nilai + jumlah (kiri) · stepper (kanan), muat 360 px */
.mkk-pecahan{display:grid;gap:8px}
.mkk-pecahan-baris{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.mkk-pecahan .mkk-pecahan-nilai{display:grid;gap:0;min-width:0;font-size:15px;color:var(--teks);font-variant-numeric:tabular-nums}
.mkk-pecahan .mkk-pecahan-nilai small{font-size:12px;font-weight:400;color:var(--mut)}
.mode-kasir .mkk-koin{width:164px;min-height:44px;font-size:16px;text-align:right;flex:none}
/* Riwayat & Retur */
.mkk-alat{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mkk-alat h2{margin:0;font-size:16px}
.mkk-saring{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mkk-saring label{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--mut);font-weight:500}
.mkk-saring input{min-height:40px;font-size:16px}
.mkk-cari-struk{display:flex;gap:12px;flex-wrap:wrap}
.mkk-cari-struk input{flex:1 1 240px;min-height:44px;font-size:16px}
.mkk-cari-struk button{min-height:44px}
.mkk-pil-deret{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.mkk-batal td{opacity:.6}.mkk-batal td.utama a{text-decoration:line-through}
.mkk-isian{display:grid;gap:8px}
.mkk-brg{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.mkk-brg>div:first-child{min-width:0}
.mkk-ringkas{font-size:14px;font-weight:500}
.mkk-ringkas:empty{display:none}
.mkk-pin{display:grid;gap:12px;background:#fff7e6;border:1px solid #f0d9a8;border-radius:12px;padding:12px}
/* Cek Harga: harga besar di kanan kartu, tidak pernah perlu digeser */
.mode-kasir .mkk-cari-besar{width:100%;max-width:640px;min-height:52px;font-size:18px;padding:10px 14px}
.mkk-harga-daftar{display:grid;gap:10px;max-width:720px}
.mkk-harga{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.mkk-harga small{overflow-wrap:anywhere}
.mkk-harga-angka{font-size:20px;font-weight:700;white-space:nowrap;color:var(--aksen-gelap)}
/* HP: bilah menu bawah disembunyikan saat papan ketik naik (kasir::_skrip / Kasir/Rangka.jsx menandai body) */
@media (max-width:899px){body.mkk-papan-ketik .mk-menu{display:none}}
@media (max-width:560px){.mkk-aksi>button,.mkk-aksi>.tombol{flex:1 1 100%}}
/* POS (React) di kerangka Mode Kasir — app.css dimuat sebelum pos.css, jadi aturan umum app.css (kepala tabel kapital
   menempel, isian sel 13 px, margin pesan) ditiadakan di sini untuk elemen POS; panel bayar menempel di bawah bilah atas. */
.mode-kasir .pos .bayar{top:84px}   /* bilah atas 68 + 16 */
/* rel menu 92 px memakan lebar: 900–999 px keranjang (≥ 430 px) tidak muat di samping panel bayar 380 px → bertumpuk
   seperti HP (terukur meluap 920–960 px, 2 Okt 2026) */
@media (min-width:900px) and (max-width:999px){.mode-kasir .pos .pos-isi{grid-template-columns:1fr}.mode-kasir .pos .bayar{position:static}}
.pos .mk-atas{line-height:1.6}   /* = halaman Blade (body 1.6), chip & Keluar sama tingginya */
.pos .keranjang thead th{position:static;text-transform:none;letter-spacing:0;background:transparent;white-space:normal}
.pos .qty input{font-size:16px}
.pos .galat,.pos .sukses{margin:0}
.pos .mkk-pos-info{margin:0;color:var(--mut);font-size:13px}
.pos .mkk-daftar-perangkat{display:flex;gap:12px;flex-wrap:wrap}
.pos .mkk-daftar-perangkat input{flex:1 1 220px;width:auto}
.pos .mkk-daftar-perangkat .simpan{flex:0 0 auto}
.mk-atas .mkk-kirim{min-height:32px;padding:0 12px;border:0;border-radius:999px;background:#ffd166;color:#3a2a00;font-size:12px;font-weight:600;white-space:nowrap}
.mk-chip.mkk-luring{background:#ffd166;color:#3a2a00}
.pos .mkk-online{color:#166534}.pos .mkk-offline{color:#b45309;font-weight:600}
@media (max-width:480px){.mkk-sembunyi-hp{display:none}}
.mk-chip.mkk-gagal{background:#fee2e2;color:#991b1b}
.mkk-stok-titipan{font-style:normal;color:#166534}
.mkk-stok-titipan.habis{color:#b91c1c;font-weight:600}

/* ── akhir Mode Kasir · modul Kasir ── */


/* ── Mode Kasir · modul Konsinyasi (Titipan) — tahap 3 ── */
/* Titipan (plugins/meddinah/konsinyasi/resources/views/titipan/, acuan pratinjau Mode Kasir): langkah Pagi → Sore → Laci →
   Bayar → Tutup, saringan, kartu per pedagang (satu aksi utama), penutup hari, isi lembar aksi, dan kertas 80 mm
   (kwitansi & Laporan Harian) yang dipakai lembar maupun halaman cetak. Awalan tt-. Saringan aktif biru muda, bukan
   navy — navy hanya Tutup hari (satu tombol navy per halaman). Teks langkah boleh dua baris, tidak dipotong. */
.tt-hal{display:grid;gap:14px;max-width:1100px}
.tt-hal h2{font-size:15.5px;margin:0;line-height:1.3}
.tt-tanggal{margin:-6px 0 0;color:var(--mut);font-size:13.5px}
.tt-kembali{margin:0}
.tt-langkah{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.tt-langkah li{background:#f5f7fb;border:1px solid var(--line);border-radius:10px;padding:7px 4px;text-align:center;min-width:0}
.tt-langkah b{display:block;font-size:13px;line-height:1.3}
.tt-langkah span{display:block;font-size:11.5px;line-height:1.3;color:var(--mut);overflow-wrap:anywhere}
.tt-langkah .beres{background:#dcfce7;border-color:#bbf7d0}
.tt-langkah .beres span{color:#166534}
.tt-langkah .kini{background:#fff;border-color:var(--aksen);box-shadow:inset 0 0 0 1px var(--aksen)}
.tt-saring{display:flex;flex-wrap:wrap;gap:8px}
.tt-saring button{border-radius:999px;padding:0 14px}
.tt-saring button[aria-pressed="true"]{background:#e8effb;border-color:var(--aksen);color:var(--aksen-gelap);font-weight:600;box-shadow:inset 0 0 0 1px var(--aksen)}
.tt-daftar{display:grid;gap:12px}
@media (min-width:900px){.tt-daftar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1300px){.tt-daftar{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tt-kartu{align-content:start}
.tt-kartu[hidden]{display:none}
.tt-kepala{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tt-kepala h2{min-width:0;overflow-wrap:anywhere}
.tt-kepala small{color:var(--mut);font-weight:400;font-size:12.5px}
.tt-kepala .pil{flex:none}
.pil.tt-lunas{background:#16a34a;color:#fff}
.tt-angka3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tt-angka3 div{background:#f5f7fb;border-radius:9px;padding:6px 8px;min-width:0}
.tt-angka3 span{display:block;font-size:11.5px;color:var(--mut)}
.tt-angka3 b{font-size:16px;font-variant-numeric:tabular-nums}
.tt-uang{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-top:1px dashed var(--line);padding-top:8px;font-size:13.5px}
.tt-uang span{min-width:0}
.tt-uang b{font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tt-ket{margin:0;font-size:13px;color:var(--mut)}
.tt-ket.tt-merah{color:#b91c1c}
.tt-ket.tt-ingat{background:#fff3d6;color:#8a5a00;border-radius:9px;padding:8px 10px}
.tt-lebih{margin:0;font-size:13px;background:#fff3d6;color:#8a5a00;border-radius:9px;padding:7px 10px}
.tt-aksi{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.tt-aksi:empty{display:none}
.tt-aksi form{margin:0}
.tt-aksi button.hijau,.tt-lembar button.hijau{background:#dcfce7;color:#166534;border-color:#bbf7d0;font-weight:600}
.tt-aksi button.hijau:hover{background:#ccf5da}
.tt-aksi button.biru,.tt-aksi button.abu{font-weight:600}
.tt-lain ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tt-lain li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--mut)}
.tt-penutup{gap:12px}
.tt-cek{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tt-cek li{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.tt-cek li::before{content:"○";color:var(--mut);flex:none}
.tt-cek li.ya::before{content:"✓";color:var(--ok);font-weight:700}
.tt-ditutup{margin:0;background:#dcfce7;color:#166534;border-radius:12px;padding:12px 14px;font-weight:600;font-size:14px}
/* isi lembar aksi */
dialog.mk-lembar .tt-lembar{display:grid;gap:14px;margin:0}
dialog.mk-lembar .galat{margin:0}
dialog.mk-lembar textarea{width:100%;font-size:16px}
.tt-isian{display:grid;gap:8px}
.tt-brg{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.tt-nama{min-width:0;overflow-wrap:anywhere;line-height:1.35}
.tt-nama small{display:block;color:var(--mut)}
.tt-ringkas{background:#f5f7fb;border-radius:12px;padding:10px 12px;display:grid;gap:2px}
.tt-ringkas .mk-baris span:first-child{min-width:0}
.tt-ringkas .mk-baris span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.tt-alasan{display:flex;gap:8px;flex-wrap:wrap}
.tt-alasan button{border-radius:999px;padding:0 12px}
.tt-tombol{display:flex;gap:12px;flex-wrap:wrap}
.tt-tombol>*{flex:1 1 140px}
/* kertas 80 mm: kwitansi & Laporan Harian — lembar dan halaman cetak (@page bernama, tidak mengubah cetak halaman lain) */
.tt-kertas{width:100%;max-width:302px;margin:0 auto;border:1px dashed #94a3b8;padding:12px;font:12px/1.45 "Courier New",ui-monospace,monospace;color:#000;background:#fff}
.tt-kertas .tt-tengah{text-align:center}
.tt-kertas .tt-garis{border-top:1px dashed #000;margin:6px 0}
.tt-kertas .tt-b{display:flex;justify-content:space-between;gap:8px}
.tt-kertas .tt-b>*{min-width:0;overflow-wrap:anywhere}
.tt-kertas .tt-b>:last-child{text-align:right}
.tt-kertas .tt-redup{color:#334155;padding-left:1ch;overflow-wrap:anywhere}
.tt-kertas .tt-cap{border:2px solid #000;text-align:center;font-weight:700;letter-spacing:.2em;padding:3px;margin-top:8px}
.tt-kertas .tt-ttd{height:28px}
body.tt-cetak{background:#fff}
.tt-cetak-isi{padding:12px}
.tt-alat{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 0 12px}
@page tt-80mm{size:80mm auto;margin:3mm}
@media print{
  body.tt-cetak .tt-alat{display:none}
  body.tt-cetak .tt-cetak-isi{padding:0}
  body.tt-cetak .tt-kertas{page:tt-80mm;border:0;max-width:none;width:72mm;padding:0}
}
/* ── akhir Mode Kasir · modul Konsinyasi ── */