html, body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===== Layar memuat (selama aplikasi diunduh pertama kali) ===== */
#siposko-memuat {
    position: fixed; inset: 0; z-index: 2000; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff;
    background: radial-gradient(120% 90% at 50% 0%, #0f3d38 0%, #08201d 55%, #041210 100%);
    transition: opacity .4s ease, visibility .4s ease;
}
/* Cahaya berdenyut di belakang logo dan kisi halus yang memudar ke tepi. */
#siposko-memuat::before {
    content: ""; position: absolute; width: 640px; height: 640px; left: 50%; top: 44%; transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 212, 191, .26), rgba(45, 212, 191, 0) 62%); animation: sm-denyut 2.6s ease-in-out infinite;
}
#siposko-memuat::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0, transparent 60%); mask-image: radial-gradient(circle at 50% 45%, #000 0, transparent 60%);
}
#siposko-memuat.selesai { opacity: 0; visibility: hidden; }
.siposko-memuat-isi { position: relative; z-index: 1; width: 260px; text-align: center; }
.siposko-memuat-cincin { position: relative; width: 108px; height: 108px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
/* Cincin berputar: gradasi kerucut yang dipotong menjadi garis melingkar. */
.siposko-memuat-cincin::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 3px;
    background: conic-gradient(from 0deg, transparent 0 30%, #fbbf24 65%, #ffffff 78%, transparent 79%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: sm-putar 1.1s linear infinite;
}
.siposko-memuat-cincin::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); }
.siposko-memuat-cincin img { border-radius: 15px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); animation: sm-napas 2.6s ease-in-out infinite; }
.siposko-memuat-judul { margin-top: 20px; padding-left: 7px; font-size: 16px; font-weight: 800; letter-spacing: 7px; }
.siposko-memuat-bar { position: relative; height: 4px; margin-top: 16px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.siposko-memuat-progres {
    position: relative; height: 100%; overflow: hidden; border-radius: 99px;
    width: var(--blazor-load-percentage, 8%); min-width: 8%;
    background: linear-gradient(90deg, #2dd4bf, #fbbf24); transition: width .25s ease;
}
.siposko-memuat-progres::after {
    content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
    animation: sm-kilau 1.4s ease-in-out infinite;
}
.siposko-memuat-teks { margin-top: 12px; font-size: 12.5px; color: rgba(255, 255, 255, .66); letter-spacing: .2px; font-variant-numeric: tabular-nums; }
/* Persentase unduhan dari Blazor (--blazor-load-percentage-text), mis. "64%". */
.siposko-memuat-persen::after { content: var(--blazor-load-percentage-text, ""); color: #fff; font-weight: 600; margin-right: 6px; }
@keyframes sm-putar { to { transform: rotate(360deg); } }
@keyframes sm-kilau { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes sm-denyut { 0%, 100% { opacity: .6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.07); } }
@keyframes sm-napas { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Pemuat kecil di dalam aplikasi (mis. saat memeriksa hak akses halaman). */
.pemuat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 60vh; color: #6b7280; font-size: 13px; }
.pemuat-cincin { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.pemuat-cincin::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 3px;
    background: conic-gradient(from 0deg, transparent 0 30%, #14b8a6 65%, #f59e0b 80%, transparent 81%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: sm-putar 1s linear infinite;
}
.pemuat-cincin img { border-radius: 10px; box-shadow: 0 6px 18px rgba(15, 118, 110, .25); }
/* Di dalam kartu (mis. daftar barang yang sedang dimuat), pemuat tidak perlu setinggi layar. */
.mud-paper .pemuat { min-height: 180px; }

@media (prefers-reduced-motion: reduce) {
    #siposko-memuat::before, .siposko-memuat-cincin::before, .siposko-memuat-cincin img, .siposko-memuat-progres::after, .pemuat-cincin::before { animation: none; }
}

#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 3000;
}
#blazor-error-ui .reload { margin-left: 8px; }

.angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tanggal { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Nilai negatif di laporan: merah tua (penandanya dipasang siposko.js). Juga untuk tautan/teks tebal di dalam selnya. */
.area-cetak [data-negatif], .area-cetak [data-negatif] * { color: #b71c1c !important; }
/* Aturan sel tabel MudBlazor (text-align: start) lebih spesifik daripada .angka/.tanggal saja; tanpa ini angka tetap rata kiri. */
.mud-simple-table table * tr > td.angka, .mud-simple-table table * tr th.angka, .mud-table-cell.angka { text-align: right; }
/* Judul kolom yang bisa diurutkan: kolom yang sedang dipakai berwarna zamrud (panah bawaan MudBlazor tipis dan sewarna teks). */
.mud-main-content .mud-table-sort-label:hover { color: #0f766e; }
.mud-main-content .mud-table-sort-label:has(.mud-direction-asc, .mud-direction-desc) { color: #0f766e; }
.mud-main-content .mud-table-sort-label-icon.mud-direction-asc, .mud-main-content .mud-table-sort-label-icon.mud-direction-desc { color: #0f766e; opacity: 1; }
/* MudTable mode kartu (layar kecil: sel bertumpuk per baris): tiap baris dipisah jelas seperti kartu, label kolom diredupkan
   agar nilainya menonjol. Batas lebar sama dengan MudBlazor (Sm < 960 px, Xs < 600 px). */
@media screen and (max-width: 960px) {
    .mud-main-content .mud-sm-table .mud-table-body .mud-table-row > .mud-table-cell:first-child { padding-top: 12px; }
    .mud-main-content .mud-sm-table .mud-table-body .mud-table-row > .mud-table-cell:last-child { border-bottom: 8px solid #eef3f2; padding-bottom: 12px; }
    .mud-main-content .mud-sm-table .mud-table-body .mud-table-row:last-child > .mud-table-cell:last-child { border-bottom: 0; }
    .mud-main-content .mud-sm-table .mud-table-cell::before { color: #6b7280; font-weight: 600; font-size: 12px; }
}
@media screen and (max-width: 600px) {
    .mud-main-content .mud-xs-table .mud-table-body .mud-table-row > .mud-table-cell:first-child { padding-top: 12px; }
    .mud-main-content .mud-xs-table .mud-table-body .mud-table-row > .mud-table-cell:last-child { border-bottom: 8px solid #eef3f2; padding-bottom: 12px; }
    .mud-main-content .mud-xs-table .mud-table-body .mud-table-row:last-child > .mud-table-cell:last-child { border-bottom: 0; }
    .mud-main-content .mud-xs-table .mud-table-cell::before { color: #6b7280; font-weight: 600; font-size: 12px; }
}
/* Toolbar MudTable di HP: tinggi bawaannya tetap 64 px sehingga isi (pencarian, tombol, sakelar) terpotong; di sini boleh turun baris. */
@media screen and (max-width: 600px) {
    .mud-main-content .mud-table-toolbar { flex-wrap: wrap; height: auto; min-height: 56px; gap: 4px 8px; padding-top: 8px; padding-bottom: 8px; }
}
/* Tabel sederhana di HP: judul kolom angka (mis. rentang periode) boleh terlipat agar kolom nama tidak terdesak; sel teks punya lebar
   minimum agar tidak terlipat per huruf (tabel digulir ke samping). Hanya layar: hasil cetak tidak berubah. */
@media screen and (max-width: 600px) {
    .mud-main-content .mud-simple-table th.angka { white-space: normal; }
    .mud-main-content .mud-simple-table td:not(.angka):not(:empty) { min-width: 8em; }
    /* Kolom pertama biasanya nama barang/akun/pelanggan: diberi ruang lebih. */
    .mud-main-content .mud-simple-table td:first-child:not(.angka):not(:empty) { min-width: 12em; }
}
.mud-simple-table table * tr > td.tanggal, .mud-simple-table table * tr th.tanggal, .mud-table-cell.tanggal { text-align: center; }
/* Baris akun header (Bagan Akun): tebal dengan latar zamrud tipis. */
.baris-header td { font-weight: 700; color: #134e4a; }
@media screen { .mud-main-content .baris-header td { background: rgba(15, 118, 110, .045); } }

/* Pohon akun (Bagan Akun): tombol buka/tutup per induk, jarak sejajar untuk akun tanpa anak. */
.pohon-akun { display: flex; align-items: center; gap: 4px; min-height: 30px; }
.pohon-akun .pohon-tombol.mud-icon-button { padding: 3px; color: #0f766e; }
.pohon-jarak { flex: 0 0 30px; }
.pohon-jumlah { margin-left: 6px; font-size: 11.5px; font-weight: 600; color: #6b7280; padding: 1px 8px; border-radius: 999px; background: #f1f5f4; }

/* Tipe akun sebagai kapsul berwarna. */
.tipe-akun { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
    color: rgb(var(--nada)); background: rgba(var(--nada), .1); border: 1px solid rgba(var(--nada), .2); }
.tipe-aset { --nada: 37, 99, 235; }
.tipe-kewajiban { --nada: 106, 63, 181; }
.tipe-ekuitas { --nada: 217, 119, 6; }
.tipe-pendapatan { --nada: 21, 128, 61; }
.tipe-beban { --nada: 198, 40, 40; }
@media print { .tipe-akun { border: none; background: none; color: #000; padding: 0; } }
.teks-redup { color: #78909c; }

/* Fokus otomatis ke judul halaman (untuk pembaca layar) tanpa garis tepi yang mengganggu. */
h1:focus { outline: none; }

/* ===== Label barcode ===== */
.lembar-label { display: flex; flex-wrap: wrap; gap: 2mm; }
.label-barcode {
    box-sizing: border-box; border: 1px dashed #b0bec5; background: #fff; padding: 1.5mm;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden;
    break-inside: avoid; page-break-inside: avoid;
}
.label-kecil { width: 38mm; height: 25mm; font-size: 6.5pt; }
.label-sedang { width: 50mm; height: 30mm; font-size: 7.5pt; }
.label-besar { width: 70mm; height: 40mm; font-size: 9pt; }
.label-nama { width: 100%; text-align: center; font-weight: 600; line-height: 1.15; max-height: 2.4em; overflow: hidden; }
.label-gambar { width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.label-gambar svg { width: 100%; height: 100%; }
.label-kode { font-family: monospace; }
.label-harga { font-weight: 700; font-size: 1.25em; }

/* Lembar yang hanya muncul saat dicetak (misalnya kwitansi). */
.hanya-cetak { display: none; }

@media print {
    @page { margin: 5mm; }
    /* Kertas tetap putih: latar abu-abu aplikasi (tema MudBlazor) ikut tercetak bila "Grafis latar" di dialog cetak aktif. */
    html, body, .mud-layout, .mud-main-content, .area-cetak { background: #fff !important; }
    .hanya-cetak { display: block; }
    body * { visibility: hidden; }
    .area-cetak, .area-cetak * { visibility: visible; }
    /* Rata tengah: sisa lebar kertas dibagi sama kiri-kanan (dokumen A4 selebar 190 mm, laporan selebar kertas). */
    .area-cetak { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; }
    .label-barcode { border-color: transparent; }
    .area-cetak button, .area-cetak .mud-table-pagination { display: none !important; }
    .area-cetak .mud-paper { box-shadow: none !important; }
}

/* ===== Nota / struk penjualan (NotaCetak) ===== */
/* Di layar: kertas struk di atas "meja"; lebar = lebar kertas. Saat dicetak: lebar = area cetak printer (80 mm -> 72 mm, 58 mm -> 48 mm). */
.nt-tata { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
@media (max-width: 960px) { .nt-tata { grid-template-columns: minmax(0, 1fr); } }
.nt-meja { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px 16px 40px; border-radius: 16px; border: 1px solid #e3ebe9;
    background: radial-gradient(circle at 1px 1px, rgba(15, 118, 110, .09) 1px, transparent 0) 0 0 / 18px 18px, linear-gradient(180deg, #f2f7f6, #e9f1ef); }
.nt-sukses { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px; padding: 12px 16px; border-radius: 14px;
    color: #14532d; background: linear-gradient(135deg, #ecfdf5, #d1fae5); border: 1px solid #a7f3d0; box-shadow: 0 6px 18px rgba(21, 128, 61, .12); }
.nt-sukses > .mud-icon-root { font-size: 30px; color: #16a34a; }
.nt-sukses b { display: block; font-size: 14.5px; }
.nt-sukses span { font-size: 12.5px; color: #166534; }
.nt-bayang { filter: drop-shadow(0 10px 18px rgba(12, 36, 33, .16)) drop-shadow(0 1px 2px rgba(12, 36, 33, .08)); }
.nt-kertas { box-sizing: border-box; background: #fff; color: #000; font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums;
    /* Tepi bawah bergerigi seperti struk yang disobek. */
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 5px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 5px repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 5px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 5px repeat-x; }
.nt-80 { width: 80mm; padding: 6mm 4mm 9mm; }
.nt-58 { width: 58mm; padding: 5mm 5mm 8mm; font-size: 10.5px; }
.nt-kop { text-align: center; }
.nt-logo { display: block; max-width: 40mm; max-height: 16mm; margin: 0 auto 2mm; object-fit: contain; filter: grayscale(1) contrast(1.15); }
.nt-58 .nt-logo { max-width: 30mm; max-height: 12mm; }
.nt-toko { font-size: 1.35em; font-weight: 800; line-height: 1.25; }
.nt-alamat { white-space: pre-line; }
.nt-judul { display: flex; align-items: center; gap: 2mm; margin: 3mm 0 2mm; font-size: .95em; font-weight: 700; letter-spacing: 1.5px; }
.nt-judul::before, .nt-judul::after { content: ""; flex: 1; border-top: 1px dashed #000; }
.nt-info { display: grid; grid-template-columns: auto 1fr; gap: .4mm 3mm; margin: 0; }
.nt-info dt { color: #333; }
.nt-info dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.nt-garis { border-top: 1px dashed #000; margin: 2.5mm 0; }
.nt-item + .nt-item { margin-top: 1.6mm; }
.nt-nama { font-weight: 600; overflow-wrap: anywhere; }
.nt-baris { display: flex; justify-content: space-between; gap: 2mm; }
.nt-baris > span:last-child { white-space: nowrap; text-align: right; }
.nt-diskon { font-style: italic; }
.nt-redup { color: #333; font-size: .92em; }
.nt-tebal { font-weight: 800; }
.nt-ringkas { margin: 1.5mm 0; }
.nt-total { display: flex; justify-content: space-between; gap: 2mm; margin: 1.5mm 0; padding: 1.6mm 0; font-size: 1.4em; font-weight: 800;
    border-top: 1.5px solid #000; border-bottom: 1.5px solid #000; }
.nt-lunas { width: fit-content; margin: 2.5mm auto 0; padding: .6mm 4mm; border: 1.5px solid #000; border-radius: 1.5mm; font-weight: 800; letter-spacing: 3px; }
.nt-batal { margin-top: 2.5mm; text-align: center; font-size: 1.1em; font-weight: 800; letter-spacing: 1px; }
.nt-kaki { display: flex; flex-direction: column; align-items: center; gap: .8mm; text-align: center; }
.nt-kaki span { font-size: .92em; }
.nt-kaki small { margin-top: 1.2mm; font-size: .8em; color: #444; }
/* Panel samping (hanya layar). */
.nt-label { margin-bottom: 6px; font-size: 12px; font-weight: 600; color: #6b7280; }
.nt-pilih { width: 100%; }
.nt-tips { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.5;
    color: #92400e; background: #fff8eb; border: 1px solid #fde7c2; }
.nt-tips .mud-icon-root { margin-top: 2px; color: #d97706; }
.nt-sisi { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; font-size: 14px; border-bottom: 1px solid #eef2f1; }
.nt-sisi:last-child { border-bottom: 0; }
.nt-sisi > span:first-child { color: #6b7280; }
@media print {
    /* Margin 0: lebar kertas sepenuhnya diatur printer kasir; nota sudah selebar area cetaknya. */
    @page nota { margin: 0; }
    body:has(.area-cetak.nota) { page: nota; }
    .nt-bayang { filter: none !important; }
    .nt-kertas { -webkit-mask: none !important; mask: none !important; padding: 1mm 0 6mm !important; }
    .nt-80 { width: 72mm; }
    .nt-58 { width: 48mm; }
    .nt-kertas, .nt-kertas * { color: #000 !important; }
}

/* ===== Halaman galat (404 tidak ditemukan, 403 tidak punya akses) ===== */
/* --nada (kelas br-nada-*) mewarnai cincin, ikon, angka kode, dan strip aksen: zamrud untuk 404, amber untuk 403. */
.halaman-status { display: flex; justify-content: center; align-items: center; min-height: 72vh; padding: 24px 16px; }
.halaman-status.hs-penuh { min-height: calc(100vh - 70px); padding-bottom: 48px; }
/* Halaman 404 berdiri sendiri (LayoutPolos): latar zamrud lembut berpola titik, senada halaman masuk. */
body:has(.hs-penuh) {
    background: radial-gradient(circle at 1px 1px, rgba(15, 118, 110, .10) 1px, transparent 0) 0 0 / 22px 22px,
        radial-gradient(60% 50% at 15% 10%, rgba(20, 184, 166, .18), transparent 70%),
        radial-gradient(50% 45% at 90% 90%, rgba(245, 158, 11, .12), transparent 70%),
        linear-gradient(180deg, #f3faf8, #e8f2ef) fixed; }
.hs-kartu { position: relative; width: 100%; max-width: 600px; text-align: center; border-radius: 22px; padding: 40px 34px 24px; overflow: hidden;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); border: 1px solid rgba(var(--nada), .14);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 24px 60px -18px rgba(var(--nada), .35); }
.hs-kartu::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px;
    background: linear-gradient(90deg, rgba(var(--nada), .55), rgb(var(--nada)), #f59e0b); }
.hs-ilustrasi { position: relative; width: 128px; height: 128px; margin: 0 auto 6px; border-radius: 50%;
    background: radial-gradient(circle, #fff 0 54%, transparent 55%), conic-gradient(from 210deg, rgba(var(--nada), .28), rgba(var(--nada), .06), rgba(var(--nada), .28)); }
.hs-inti { position: absolute; inset: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--nada), .12), rgba(var(--nada), .04)); box-shadow: inset 0 0 0 1px rgba(var(--nada), .12); }
.hs-ilustrasi .hs-ikon { font-size: 46px; width: 46px; height: 46px; color: rgb(var(--nada)); }
/* Titik amber mengorbit cincin; diam bila pengguna memilih "kurangi gerakan". */
.hs-orbit { position: absolute; inset: 0; border-radius: 50%; animation: hs-putar 9s linear infinite; }
.hs-orbit::before { content: ""; position: absolute; top: 6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
    background: #f59e0b; box-shadow: 0 0 0 5px rgba(245, 158, 11, .18); }
@keyframes hs-putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hs-orbit { animation: none; transform: rotate(40deg); } }
.hs-kode { font-size: 78px; font-weight: 800; line-height: 1; letter-spacing: 3px; margin-top: 6px;
    background: linear-gradient(135deg, rgba(var(--nada), .65), rgb(var(--nada)) 55%, rgba(var(--nada), .85));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
.hs-judul { font-size: 24px; font-weight: 700; color: #111827; margin: 10px 0 8px; }
.hs-pesan { color: #4b5563; font-size: 15px; line-height: 1.6; }
.hs-pesan p { margin: 0 0 8px; }
.hs-alamat { background: rgba(var(--nada), .08); color: rgb(var(--nada)); padding: 2px 8px; border-radius: 6px; font-size: 14px; word-break: break-all;
    border: 1px solid rgba(var(--nada), .14); }
.hs-izin { text-align: left; background: #fff8eb; border: 1px solid #fde7c2; border-radius: 12px; padding: 12px 16px; margin: 14px 0; }
.hs-izin ul { margin: 6px 0 0; padding-left: 20px; color: #7c2d12; }
.hs-aksi { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 22px 0 6px; }
.hs-aksi .mud-button-root { border-radius: 12px; text-transform: none; font-weight: 600; }
.hs-aksi .mud-button-filled-primary { background: linear-gradient(135deg, #14a394, #115e59); box-shadow: 0 8px 18px rgba(15, 118, 110, .25); }
.hs-aksi .mud-button-outlined { background: #fff; }
.hs-pintasan { border-top: 1px dashed #dfe7e5; margin-top: 22px; padding-top: 18px; }
.hs-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px; color: #6b7280; font-weight: 700; margin-bottom: 10px; }
.hs-izin .hs-label { color: #9a3412; margin-bottom: 0; }
.hs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.hs-tautan { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid #e6eeec; text-align: left;
    color: #1f2937; text-decoration: none; font-size: 13.5px; font-weight: 600; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.hs-tautan > span:nth-child(2) { flex: 1; min-width: 0; }
.hs-tautan-ikon { flex: 0 0 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 9px;
    color: rgb(var(--nada)); background: rgba(var(--nada), .1); }
.hs-panah { color: #cbd5e1; transition: color .15s, transform .15s; }
.hs-tautan:hover { border-color: rgba(var(--nada), .35); box-shadow: 0 8px 20px -10px rgba(var(--nada), .45); transform: translateY(-1px); }
.hs-tautan:hover .hs-panah { color: rgb(var(--nada)); transform: translateX(2px); }
.hs-kaki { margin-top: 20px; font-size: 12px; color: #9ca3af; }
.hs-merek { padding: 18px 24px 0; }
.hs-merek-teks { font-weight: 800; font-size: 20px; letter-spacing: 1.5px; color: #0f766e; }
@media (max-width: 600px) {
    .hs-kartu { padding: 32px 18px 18px; border-radius: 18px; }
    .hs-kode { font-size: 60px; }
    .hs-judul { font-size: 20px; }
    .hs-aksi .mud-button-root { flex: 1 1 100%; }
}

/* ===== Halaman masuk ===== */
.masuk { display: flex; min-height: 100vh; background: #f3f6f5; }
.masuk-merek { position: relative; overflow: hidden; flex: 0 0 46%; max-width: 640px; display: flex; flex-direction: column; justify-content: space-between;
    padding: 40px 56px 32px; color: #fff; background: linear-gradient(150deg, #0d9488 0%, #115e59 45%, #062a26 100%); }
/* Bentuk dekoratif lembut di belakang teks. */
.masuk-merek::before, .masuk-merek::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.masuk-merek::before { width: 520px; height: 520px; right: -220px; top: -180px; background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 70%); }
.masuk-merek::after { width: 420px; height: 420px; left: -160px; bottom: -200px; background: radial-gradient(circle, rgba(245,158,11,.22), rgba(245,165,36,0) 70%); }
.masuk-merek > * { position: relative; z-index: 1; }
.masuk-logo { display: flex; align-items: center; gap: 14px; }
.masuk-logo img { border-radius: 14px; box-shadow: 0 8px 24px rgba(2, 30, 27, .4); }
.masuk-nama { font-size: 26px; font-weight: 800; letter-spacing: 2px; line-height: 1.1; }
.masuk-slogan { font-size: 14px; opacity: .8; letter-spacing: .3px; }
.masuk-judul-merek { font-size: 30px; font-weight: 700; line-height: 1.25; margin: 36px 0 22px; max-width: 520px; letter-spacing: -.3px; }
.masuk-judul-merek span { color: #fbbf24; }
/* Alur kerja (Komponen/AlurMasuk): lima langkah menyala berurutan; selesai bertanda ✓, penghubung ke langkah berikutnya terisi
   selama langkah aktif (2,4 detik, sama dengan ketukan di komponen). */
.alur { max-width: 528px; }
.alur-label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 5px 12px 5px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fde68a;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.alur-denyut { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; animation: alur-denyut 1.8s ease-out infinite; }
@keyframes alur-denyut { 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, .55); } 100% { box-shadow: 0 0 0 9px rgba(251, 191, 36, 0); } }
.alur-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.alur-langkah { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 10px 14px 10px 12px; border-radius: 14px;
    border: 1px solid transparent; transition: background-color .45s, border-color .45s, opacity .45s, box-shadow .45s; }
.alur-langkah.nanti { opacity: .5; }
.alur-langkah.aktif { background: rgba(255, 255, 255, .09); border-color: rgba(251, 191, 36, .35); box-shadow: 0 10px 30px rgba(2, 30, 27, .25); }
/* Penghubung: dari bawah ikon langkah ini ke atas ikon langkah berikutnya (ikon 40 px, padding atas 10 px, jarak antar-langkah 6 px). */
.alur-langkah:not(:last-child)::before, .alur-langkah:not(:last-child)::after { content: ""; position: absolute; left: 31px; top: 52px; bottom: -14px;
    width: 2px; border-radius: 2px; }
.alur-langkah:not(:last-child)::before { background: rgba(255, 255, 255, .16); }
.alur-langkah:not(:last-child)::after { background: linear-gradient(#fbbf24, #5eead4); transform-origin: top; transform: scaleY(0); }
.alur-langkah.selesai::after { transform: scaleY(1); transition: transform .3s; }
.alur-langkah.aktif::after { animation: alur-isi 2.4s linear forwards; }
@keyframes alur-isi { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.alur-ikon { position: relative; z-index: 1; flex: 0 0 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #ccfbf1; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .2); transition: background .45s, color .45s, border-color .45s; }
.alur-ikon .mud-icon-root { font-size: 20px; }
.aktif .alur-ikon { color: #422006; background: linear-gradient(135deg, #fcd34d, #f59e0b); border-color: transparent;
    box-shadow: 0 0 0 6px rgba(251, 191, 36, .18), 0 8px 18px rgba(245, 158, 11, .35); animation: alur-ikon 1.2s ease-in-out infinite alternate; }
@keyframes alur-ikon { to { box-shadow: 0 0 0 11px rgba(251, 191, 36, .06), 0 8px 18px rgba(245, 158, 11, .35); } }
.selesai .alur-ikon { color: #5eead4; background: rgba(94, 234, 212, .16); border-color: rgba(94, 234, 212, .45); }
.alur-cek { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; background: #14b8a6; border: 2px solid #0b4f49; transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.alur-cek .mud-icon-root { font-size: 12px; }
.selesai .alur-cek { transform: scale(1); }
.alur-teks { min-width: 0; }
.alur-teks small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.aktif .alur-teks small { color: #fbbf24; }
.alur-teks b { display: block; margin: 1px 0 2px; font-size: 15px; }
.alur-teks span { display: block; font-size: 13px; line-height: 1.5; opacity: .78; }
.alur-selesai { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; color: #ccfbf1;
    background: rgba(94, 234, 212, .12); border: 1px solid rgba(94, 234, 212, .3); opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.alur-selesai.tampil { opacity: 1; transform: none; }
.alur-selesai .mud-icon-root { color: #5eead4; }
.alur-selesai b { color: #fff; }
/* Layar laptop pendek: judul lebih kecil, langkah lebih rapat, keterangan hanya untuk langkah aktif & ringkasan disembunyikan. */
@media (max-height: 860px) {
    .masuk-judul-merek { font-size: 25px; margin: 24px 0 16px; }
    .alur-label { margin-bottom: 10px; }
    .alur-daftar { gap: 2px; }
    .alur-langkah { padding: 7px 14px 7px 12px; }
    .alur-langkah:not(:last-child)::before, .alur-langkah:not(:last-child)::after { top: 49px; bottom: -7px; }
}
@media (max-height: 760px) {
    .masuk-merek { padding-top: 28px; }
    .alur-langkah:not(.aktif) .alur-teks span, .alur-langkah:not(.aktif) .alur-teks small { display: none; }
    .alur-langkah:not(.aktif) { align-items: center; }
    .alur-selesai { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .alur *, .alur *::before, .alur *::after { animation: none !important; transition: none !important; }
    .alur-langkah.aktif::after { transform: scaleY(1); }
}
.masuk-merek-kaki { font-size: 12.5px; opacity: .65; margin-top: 24px; }
.masuk-panel { position: relative; isolation: isolate; overflow: hidden; flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 32px 20px; }
/* Latar bertema teknologi: jalur sirkuit dengan denyut data yang mengalir (animasi SVG di dalam pola), kisi titik, tanpa berkas luar;
   lebih samar di tengah agar kartu tetap menonjol. */
.masuk-panel::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%230f766e' stroke-opacity='.24' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 40h50l20 20v40h40'/%3E%3Cpath d='M160 18v32l20 20h22'/%3E%3Cpath d='M40 170v-25l20-20h28'/%3E%3Cpath d='M118 200v-20l20-20h45'/%3E%3Cpath d='M14 205h36'/%3E%3Cpath d='M150 100h30l14 14v26'/%3E%3Crect x='96' y='18' width='30' height='20' rx='3'/%3E%3Cpath d='M103 18v-6M111 18v-6M119 18v-6M103 38v6M111 38v6M119 38v6'/%3E%3C/g%3E%3Cg fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 40h50l20 20v40h40' stroke='%23f59e0b' stroke-opacity='.85' pathLength='100' stroke-dasharray='12 188' stroke-dashoffset='200'%3E%3Canimate attributeName='stroke-dashoffset' from='200' to='0' dur='3.2s' begin='0s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M160 18v32l20 20h22' stroke='%2314b8a6' stroke-opacity='.85' pathLength='100' stroke-dasharray='12 188' stroke-dashoffset='200'%3E%3Canimate attributeName='stroke-dashoffset' from='200' to='0' dur='2.6s' begin='1.1s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M40 170v-25l20-20h28' stroke='%2314b8a6' stroke-opacity='.85' pathLength='100' stroke-dasharray='12 188' stroke-dashoffset='200'%3E%3Canimate attributeName='stroke-dashoffset' from='200' to='0' dur='2.8s' begin='0.4s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M118 200v-20l20-20h45' stroke='%23f59e0b' stroke-opacity='.85' pathLength='100' stroke-dasharray='12 188' stroke-dashoffset='200'%3E%3Canimate attributeName='stroke-dashoffset' from='200' to='0' dur='3.6s' begin='1.8s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M150 100h30l14 14v26' stroke='%23f59e0b' stroke-opacity='.85' pathLength='100' stroke-dasharray='12 188' stroke-dashoffset='200'%3E%3Canimate attributeName='stroke-dashoffset' from='200' to='0' dur='2.4s' begin='2.3s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M14 205h36' stroke='%2314b8a6' stroke-opacity='.85' pathLength='100' stroke-dasharray='12 188' stroke-dashoffset='200'%3E%3Canimate attributeName='stroke-dashoffset' from='200' to='0' dur='2s' begin='0.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3Cg fill='%23ffffff' stroke='%230f766e' stroke-opacity='.42' stroke-width='1.3'%3E%3Ccircle cx='20' cy='40' r='3.5'/%3E%3Ccircle cx='130' cy='100' r='3.5'/%3E%3Ccircle cx='160' cy='18' r='3.5'/%3E%3Ccircle cx='202' cy='70' r='3.5'/%3E%3Ccircle cx='40' cy='170' r='3.5'/%3E%3Ccircle cx='88' cy='125' r='3.5'/%3E%3Ccircle cx='118' cy='200' r='3.5'/%3E%3Ccircle cx='183' cy='160' r='3.5'/%3E%3Ccircle cx='14' cy='205' r='3'/%3E%3Ccircle cx='50' cy='205' r='3'/%3E%3Ccircle cx='194' cy='140' r='3'/%3E%3C/g%3E%3Cg fill='%23f59e0b'%3E%3Ccircle cx='130' cy='100' r='3' opacity='0'%3E%3Canimate attributeName='opacity' values='0;.9;0' keyTimes='0;.15;1' dur='3.2s' begin='1.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='202' cy='70' r='3' opacity='0'%3E%3Canimate attributeName='opacity' values='0;.9;0' keyTimes='0;.15;1' dur='2.6s' begin='2.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='88' cy='125' r='3' opacity='0'%3E%3Canimate attributeName='opacity' values='0;.9;0' keyTimes='0;.15;1' dur='2.8s' begin='1.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='183' cy='160' r='3' opacity='0'%3E%3Canimate attributeName='opacity' values='0;.9;0' keyTimes='0;.15;1' dur='3.6s' begin='3.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='194' cy='140' r='3' opacity='0'%3E%3Canimate attributeName='opacity' values='0;.9;0' keyTimes='0;.15;1' dur='2.4s' begin='3.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='50' cy='205' r='3' opacity='0'%3E%3Canimate attributeName='opacity' values='0;.9;0' keyTimes='0;.15;1' dur='2s' begin='1.9s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3Cg fill='%23f59e0b' fill-opacity='.6'%3E%3Ccircle cx='90' cy='60' r='2'/%3E%3Ccircle cx='180' cy='70' r='2'/%3E%3Ccircle cx='60' cy='125' r='2'/%3E%3C/g%3E%3Ccircle cx='111' cy='28' r='2.2' fill='%2314b8a6'%3E%3Canimate attributeName='opacity' values='.2;1;.2' dur='1.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E"),
        radial-gradient(circle, rgba(15, 118, 110, .22) 1px, transparent 1.4px);
    background-size: 220px 220px, 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0, 0, 0, .25) 0, #000 100%);
    mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0, 0, 0, .25) 0, #000 100%);
}
/* Cahaya zamrud dan amber yang bergerak sangat pelan. */
.masuk-panel::after {
    content: ""; position: absolute; inset: -20%; z-index: -2; pointer-events: none;
    background:
        radial-gradient(38% 34% at 82% 18%, rgba(20, 184, 166, .20), transparent 70%),
        radial-gradient(34% 30% at 14% 86%, rgba(245, 158, 11, .14), transparent 70%),
        radial-gradient(30% 26% at 20% 18%, rgba(15, 118, 110, .08), transparent 70%);
    animation: masuk-cahaya 18s ease-in-out infinite alternate;
}
@keyframes masuk-cahaya { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(-3%, 2%, 0) rotate(6deg); } }
/* Tanpa animasi bila pengguna mematikannya di perangkat: pola sirkuit diam. */
@media (prefers-reduced-motion: reduce) {
    .masuk-panel::after { animation: none; }
    .masuk-panel::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%230f766e' stroke-opacity='.24' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 40h50l20 20v40h40'/%3E%3Cpath d='M160 18v32l20 20h22'/%3E%3Cpath d='M40 170v-25l20-20h28'/%3E%3Cpath d='M118 200v-20l20-20h45'/%3E%3Cpath d='M14 205h36'/%3E%3Cpath d='M150 100h30l14 14v26'/%3E%3Crect x='96' y='18' width='30' height='20' rx='3'/%3E%3Cpath d='M103 18v-6M111 18v-6M119 18v-6M103 38v6M111 38v6M119 38v6'/%3E%3C/g%3E%3Cg fill='%23ffffff' stroke='%230f766e' stroke-opacity='.42' stroke-width='1.3'%3E%3Ccircle cx='20' cy='40' r='3.5'/%3E%3Ccircle cx='130' cy='100' r='3.5'/%3E%3Ccircle cx='160' cy='18' r='3.5'/%3E%3Ccircle cx='202' cy='70' r='3.5'/%3E%3Ccircle cx='40' cy='170' r='3.5'/%3E%3Ccircle cx='88' cy='125' r='3.5'/%3E%3Ccircle cx='118' cy='200' r='3.5'/%3E%3Ccircle cx='183' cy='160' r='3.5'/%3E%3Ccircle cx='14' cy='205' r='3'/%3E%3Ccircle cx='50' cy='205' r='3'/%3E%3Ccircle cx='194' cy='140' r='3'/%3E%3C/g%3E%3Cg fill='%23f59e0b' fill-opacity='.6'%3E%3Ccircle cx='90' cy='60' r='2'/%3E%3Ccircle cx='180' cy='70' r='2'/%3E%3Ccircle cx='60' cy='125' r='2'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle, rgba(15, 118, 110, .22) 1px, transparent 1.4px); }
}
/* Kartu login: gradasi putih → mint lembut, cahaya zamrud di pojok, garis aksen zamrud-amber di tepi atas. */
.masuk-kartu { position: relative; overflow: hidden; width: 100%; max-width: 420px; border-radius: 20px; padding: 40px 36px 32px;
    background:
        radial-gradient(90% 55% at 100% 0%, rgba(20, 184, 166, .13), transparent 62%),
        radial-gradient(70% 40% at 0% 100%, rgba(245, 158, 11, .07), transparent 60%),
        linear-gradient(165deg, rgba(255, 255, 255, .96) 0%, rgba(246, 252, 250, .94) 55%, rgba(236, 248, 245, .93) 100%);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 18px 50px rgba(12, 36, 33, .12), 0 0 0 1px rgba(15, 118, 110, .07); }
.masuk-kartu::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #14b8a6, #0f766e 55%, #f59e0b); }
.masuk-judul { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
.masuk-lencana { flex: 0 0 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg, #2dd4bf, #0f766e); box-shadow: 0 8px 18px rgba(15, 118, 110, .3), inset 0 1px 0 rgba(255, 255, 255, .35); }
.masuk-lencana .mud-icon-root { font-size: 24px; }
.masuk-logo-hp { display: none; align-items: center; gap: 10px; margin-bottom: 24px; }
.masuk-logo-hp b { font-size: 20px; font-weight: 800; letter-spacing: 1.5px; color: #0f766e; }
.masuk-sapa { font-size: 26px; font-weight: 700; color: #111827; margin: 0 0 6px; letter-spacing: -.2px; }
.masuk-sub { color: #6b7280; font-size: 14px; margin: 0; line-height: 1.5; }
.masuk-captcha { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid #cfe7e2; border-radius: 12px; margin-bottom: 10px;
    background: linear-gradient(135deg, #f0faf8, #fff8eb); }
.masuk-captcha .mud-icon-button { color: #0f766e; border-color: #cfe7e2; }
.masuk-captcha img { display: block; flex: 1; min-width: 0; max-width: 100%; height: auto; border-radius: 8px; background: #fff; }
.masuk-tombol.mud-button-filled-primary:not(:disabled) {
    background: linear-gradient(135deg, #14a394, #115e59); box-shadow: 0 8px 20px rgba(15, 118, 110, .28); }
.masuk-tombol.mud-button-filled-primary:not(:disabled):hover { background: linear-gradient(135deg, #0f8a7d, #0d5c54); }
.masuk-tombol { height: 50px; border-radius: 12px !important; font-size: 15.5px !important; font-weight: 600 !important; letter-spacing: .3px; text-transform: none !important; }
.masuk-bantuan { margin: 22px 0 0; text-align: center; font-size: 13px; color: #6b7280; line-height: 1.5; }
.masuk-kaki-hp { display: none; margin-top: 20px; font-size: 12px; color: #9ca3af; }
.masuk .mud-input.mud-input-outlined { background: #fff; border-radius: 10px; transition: box-shadow .15s ease; }
.masuk .mud-input-outlined-border { border-radius: 10px; border-color: #d3e3e0; }
.masuk .mud-input.mud-input-outlined:focus-within { box-shadow: 0 0 0 4px rgba(20, 184, 166, .14); }
/* Ikon di kolom isian berwarna zamrud (ikon depan) dan zamrud keabuan (tombol lihat password). */
.masuk .mud-input-adornment-start .mud-icon-root { color: #0f766e; }
.masuk .mud-input-adornment-end .mud-icon-root { color: #5b8f88; }
@media (max-width: 959.98px) {
    .masuk-merek { display: none; }
    .masuk-logo-hp, .masuk-kaki-hp { display: flex; }
}
@media (max-width: 480px) {
    .masuk-panel { justify-content: flex-start; padding-top: 24px; }
    .masuk-kartu { padding: 28px 20px 24px; border-radius: 16px; }
    .masuk-sapa { font-size: 22px; }
    .masuk-lencana { flex-basis: 42px; height: 42px; border-radius: 12px; }
}

/* ===== Dialog konfirmasi ===== */
.dk-isi { text-align: center; padding: 12px 8px 4px; }
.dk-ikon { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
.dk-ikon .mud-icon-root { font-size: 30px; }
.dk-ikon-bahaya { background: #fdecec; color: #c62828; box-shadow: 0 0 0 8px #fef5f5; }
.dk-ikon-utama { background: #dcf3ef; color: #0f766e; box-shadow: 0 0 0 8px #effaf8; }
.dk-judul { font-size: 20px; font-weight: 700; color: #111827; margin-bottom: 8px; }
.dk-pesan { font-size: 14.5px; color: #4b5563; line-height: 1.55; }
.dk-rincian { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 14px; border-radius: 12px;
    background: #f6f8fb; border: 1px solid #edf0f5; text-align: left; max-width: 100%; }
.dk-avatar { flex: 0 0 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #14b8a6, #115e59); color: #fff; font-weight: 700; font-size: 14px; }
.dk-rincian b { display: block; font-size: 14px; color: #111827; }
.dk-rincian span { font-size: 12.5px; color: #6b7280; }
.dk-aksi { display: flex; gap: 10px; width: 100%; padding: 4px 8px 8px; }
.dk-aksi .mud-button-root { flex: 1; height: 44px; border-radius: 10px; text-transform: none; font-weight: 600; font-size: 14.5px; }
/* Isian di bawah pesan konfirmasi (alasan batal, tanggal pembatalan jurnal): rata kiri, sedikit berjarak dari teks. */
.dk-alasan { margin: 18px 8px 0; text-align: left; }

/* ===== Beranda ===== */
.br-kepala { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.br-kepala-kiri { display: flex; align-items: center; gap: 14px; min-width: 0; }
.br-sapa { font-size: 26px; font-weight: 700; color: #111827; margin: 0; letter-spacing: -.3px; }
.br-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; color: #6b7280; font-size: 13.5px; }
.br-pil { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid #e6e9ef; color: #374151; }
.br-pil .mud-icon-root { font-size: 16px; color: #0f766e; }
.br-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.br-aksi .mud-button-root { border-radius: 10px; text-transform: none; font-weight: 600; }
.br-diperbarui { font-size: 12.5px; color: #9ca3af; margin-right: 4px; }
.br-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* Kartu ringkasan bergradasi transparan sesuai warna ikonnya (--nada = warna dalam RGB, diatur kelas br-nada-*). */
.br-kartu { position: relative; overflow: hidden; display: block; border-radius: 16px; padding: 18px 18px 16px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(var(--nada), .16), transparent 55%),
        linear-gradient(155deg, rgba(var(--nada), .09) 0%, rgba(255, 255, 255, .6) 60%),
        #fff;
    border: 1px solid rgba(var(--nada), .16); box-shadow: 0 1px 2px rgba(16,24,40,.04);
    color: inherit; text-decoration: none; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
/* Lingkaran samar di pojok kanan bawah. */
.br-kartu::after { content: ""; position: absolute; width: 120px; height: 120px; right: -42px; bottom: -48px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(var(--nada), .14), rgba(var(--nada), 0) 70%); }
a.br-kartu:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(var(--nada), .16); border-color: rgba(var(--nada), .34); }
.br-kartu .br-ikon { color: #fff; background: linear-gradient(135deg, rgba(var(--nada), .78), rgba(var(--nada), 1));
    box-shadow: 0 6px 14px rgba(var(--nada), .28), inset 0 1px 0 rgba(255, 255, 255, .3); }
/* Warna bawaan lewat :where (spesifisitas nol), sehingga kelas br-nada-* selalu menang tanpa bergantung urutan di berkas ini. */
:where(.br-kartu, .lp-kelompok, .lp-judul-ikon) { --nada: 15, 118, 110; }
.br-nada-utama { --nada: 15, 118, 110; }
.br-nada-biru { --nada: 37, 99, 235; }
.br-nada-hijau { --nada: 21, 128, 61; }
.br-nada-kuning { --nada: 217, 119, 6; }
.br-nada-ungu { --nada: 106, 63, 181; }
.br-nada-merah { --nada: 198, 40, 40; }
.br-kartu-kosong { --nada: 148, 163, 184; }
.br-kartu-atas { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-right: 20px; }
.br-kartu-judul { font-size: 13.5px; font-weight: 600; color: #4b5563; }
.br-kartu-nilai { font-size: 24px; font-weight: 700; color: #111827; letter-spacing: -.3px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.br-kartu-kecil .br-kartu-nilai { font-size: 20px; }
.br-kartu-ket { font-size: 12.5px; color: #6b7280; margin-top: 6px; line-height: 1.45; }
.br-kartu-ket.br-teks-merah { color: #c62828; font-weight: 600; }
.br-kartu-panah { position: absolute; right: 14px; top: 18px; color: #c3cad6; transition: color .18s ease, transform .18s ease; }
a.br-kartu:hover .br-kartu-panah { color: rgb(var(--nada)); transform: translateX(2px); }
.br-ikon { flex: 0 0 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.br-ikon .mud-icon-root { font-size: 20px; }
.br-utama { background: #dcf3ef; color: #0f766e; }
.br-biru { background: #e6eeff; color: #2563eb; }
.br-hijau { background: #e6f5ec; color: #2e7d32; }
.br-kuning { background: #fff3dc; color: #b26a00; }
.br-ungu { background: #efe9fb; color: #6a3fb5; }
.br-merah { background: #fdecec; color: #c62828; }
.br-baris { display: grid; gap: 16px; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); margin-top: 16px; }
.br-panel { background: radial-gradient(80% 50% at 100% 0%, rgba(20, 184, 166, .06), transparent 60%), #fff; border-radius: 16px; border: 1px solid #e6eeec;
    box-shadow: 0 1px 2px rgba(16,24,40,.04); padding: 20px; min-width: 0; }
.br-grafik-kosong { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    color: #6b7280; font-size: 13px; text-align: center; }
.br-grafik-kosong .mud-icon-root { color: #94a3b8; font-size: 32px; }
.br-panel-judul { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.br-panel-judul h2 { font-size: 16px; font-weight: 700; color: #111827; margin: 0; }
.br-panel-judul span { font-size: 12.5px; color: #6b7280; }
.br-ringkas { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 22px; }
.br-ringkas div { font-size: 12.5px; color: #6b7280; }
.br-ringkas b { display: block; font-size: 18px; color: #111827; font-variant-numeric: tabular-nums; margin-top: 2px; }
.br-grafik { position: relative; height: 200px; margin-left: 56px; }
.br-garis { position: absolute; left: 0; right: 0; border-top: 1px dashed #e5e7eb; }
.br-garis span { position: absolute; right: calc(100% + 8px); top: -8px; font-size: 11px; color: #9ca3af; white-space: nowrap; }
.br-batang-wadah { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 4px; }
.br-batang { position: relative; flex: 1; min-width: 3px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #5eead4, #14b8a6);
    transition: filter .15s ease; }
.br-batang.br-hari-ini { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.br-batang:hover { filter: brightness(.9); }
/* Keterangan saat batang disentuh/ditunjuk (isi dari atribut data-tip). */
.br-batang::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: pre;
    background: #111827; color: #fff; font-size: 12px; line-height: 1.4; padding: 6px 9px; border-radius: 8px; pointer-events: none; opacity: 0;
    transition: opacity .12s ease; z-index: 2; text-align: center; }
.br-batang:hover::after { opacity: 1; }
.br-batang:first-child::after { left: 0; transform: none; }
.br-batang:last-child::after { left: auto; right: 0; transform: none; }
.br-sumbu-x { position: relative; height: 22px; margin-left: 56px; margin-top: 8px; }
.br-sumbu-x span { position: absolute; transform: translateX(-50%); font-size: 11px; color: #9ca3af; white-space: nowrap; }
.br-perhatian { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.br-perhatian a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: inherit;
    border: 1px solid #f0f2f6; transition: background .15s ease, border-color .15s ease; }
.br-perhatian a:hover { background: #f8fafc; border-color: #e3e8f0; }
.br-perhatian-teks { flex: 1; min-width: 0; }
.br-perhatian-teks b { display: block; font-size: 13.5px; color: #111827; font-weight: 600; }
.br-perhatian-teks span { font-size: 12.5px; color: #6b7280; }
.br-perhatian .mud-icon-root.br-chevron { color: #c3cad6; font-size: 20px; }
.br-aman { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 8px; color: #6b7280; font-size: 13.5px; }
.br-aman .br-ikon { width: 52px; height: 52px; flex-basis: 52px; border-radius: 50%; }
.br-aman b { color: #111827; font-size: 14.5px; }
.br-subjudul { font-size: 12.5px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .7px; margin: 28px 0 12px; }
.br-kosong { text-align: center; padding: 48px 16px; color: #6b7280; }
@media (max-width: 1100px) { .br-baris { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
    .br-sapa { font-size: 22px; }
    .br-grafik, .br-sumbu-x { margin-left: 44px; }
    .br-batang-wadah { gap: 2px; }
    .br-kartu-nilai { font-size: 21px; }
}

/* ===== Kerangka aplikasi: bilah atas putih, menu samping gelap ===== */
.bilah-atas.mud-appbar { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid #e6ebea; }
.bilah-merek { font-weight: 800; letter-spacing: 1.5px; color: #0f766e; font-size: 16px; }
.bilah-pil.mud-button-root { border: 1px solid #e3e8e7; border-radius: 999px; text-transform: none; font-weight: 600; padding: 4px 14px; }
.bilah-pil .mud-button-icon-start { color: #0f766e; }
.bilah-ikon.mud-icon-button { color: #0f766e !important; border: 1px solid #e3e8e7; padding: 6px; }
.bilah-ikon.mud-icon-button:hover { background: #effaf8; border-color: #b9e3dc; }
.bilah-pengguna.mud-button-root { text-transform: none; border-radius: 999px; padding: 3px 8px 3px 4px; }
.bilah-avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    margin-right: 8px; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg, #14b8a6, #0f766e); }
.bilah-nama { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.bilah-nama b { font-size: 13.5px; font-weight: 600; }
.bilah-nama small { font-size: 11.5px; color: #6b7280; }
@media (max-width: 600px) {
    .bilah-nama, .bilah-merek { display: none; }
    .bilah-pil.mud-button-root { max-width: 130px; padding: 4px 10px; }
    /* Nama cabang satu baris, dipotong dengan "…" (sebelumnya terlipat dan mendorong tombol profil keluar layar). */
    .bilah-pil .mud-button-label { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bilah-pil .mud-button-icon-start, .bilah-pil .mud-button-icon-end { display: none; }
    .bilah-pengguna.mud-button-root { padding: 3px; min-width: 0; }
    .bilah-pengguna .mud-button-icon-end { display: none; }
    .bilah-avatar { margin-right: 0; }
}
.menu-samping.mud-drawer { background: linear-gradient(180deg, #0c2421 0%, #091c19 100%); border-right: 0; }
.menu-merek { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px; text-decoration: none; color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .06); }
.menu-merek img { border-radius: 9px; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.menu-merek b { display: block; font-size: 15.5px; letter-spacing: 2px; font-weight: 800; line-height: 1.2; }
.menu-merek small { display: block; font-size: 11px; color: rgba(255, 255, 255, .55); }
.menu-samping .mud-navmenu { padding: 8px 10px; }
.menu-samping .mud-nav-link { border-radius: 10px; margin: 1px 0; color: rgba(255, 255, 255, .78); }
.menu-samping .mud-nav-link:hover:not(.mud-nav-link-disabled) { background-color: rgba(255, 255, 255, .06) !important; color: #fff; }
.menu-samping .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: rgba(45, 212, 191, .14) !important; color: #fff !important; font-weight: 600; box-shadow: inset 3px 0 0 #f59e0b; }
.menu-samping .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { color: #5eead4 !important; }
/* Logo & kotak cari tetap di atas; hanya daftar menu (MudNavMenu langsung di bawah drawer, lihat MenuNavigasi) yang bergulir. */
.menu-samping .mud-drawer-content { display: flex; flex-direction: column; overflow: hidden; }
.menu-samping .mud-drawer-content > :is(.menu-merek, .menu-cari) { flex: none; }
.menu-samping .mud-drawer-content > .mud-navmenu { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }

/* Menu samping: cari menu, label bagian, ikon grup berwarna modul, garis panduan sub-menu (MenuNavigasi). */
.menu-cari { display: flex; align-items: center; gap: 8px; height: 38px; margin: 12px 12px 2px; padding: 0 10px; border-radius: 10px;
    color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); transition: border-color .15s, background .15s; }
.menu-cari:focus-within { color: #5eead4; background: rgba(255, 255, 255, .09); border-color: rgba(94, 234, 212, .5); }
.menu-cari input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 13.5px; }
.menu-cari input::placeholder { color: rgba(255, 255, 255, .42); }
.menu-cari input::-webkit-search-cancel-button { filter: invert(1); opacity: .55; cursor: pointer; }
.menu-cari kbd { flex: 0 0 auto; padding: 3px 6px; border-radius: 6px; font-family: inherit; font-size: 10.5px; font-weight: 600; line-height: 1; color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }
.menu-bagian { padding: 14px 12px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255, 255, 255, .36); }
.menu-kosong { padding: 14px 12px; font-size: 13px; color: rgba(255, 255, 255, .5); }
.menu-samping :is(.menu-grup, .menu-atas, .menu-hasil) .mud-nav-link-icon { box-sizing: content-box; width: 18px; height: 18px; padding: 5px; border-radius: 8px;
    color: color-mix(in srgb, rgb(var(--nada)) 42%, #fff) !important; background: rgba(var(--nada), .24); }
.menu-samping .menu-grup .mud-nav-link-text { font-weight: 600; }
.menu-samping .menu-grup-aktif { color: #fff; }
/* Grup halaman aktif yang sedang ditutup diberi titik amber agar posisi tetap terlihat. */
.menu-samping .menu-grup-aktif:not(.mud-expanded) .mud-nav-link-text::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px;
    border-radius: 50%; vertical-align: middle; background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .2); }
.menu-samping .mud-navgroup-collapse .mud-navmenu { margin-left: 22px; padding: 2px 0 6px 8px; border-left: 1px solid rgba(255, 255, 255, .09); }
.menu-samping .mud-navgroup-collapse .mud-nav-link { padding-left: 12px !important; min-height: 34px; font-size: 13.5px; }
.menu-hasil-teks small { display: block; font-size: 11px; color: rgba(255, 255, 255, .45); }

/* Popover bilah atas: pindah cabang & profil pengguna. */
.menu-bilah.mud-popover { min-width: 270px; border-radius: 14px !important; border: 1px solid #e6ebea; overflow: hidden;
    box-shadow: 0 18px 48px rgba(12, 36, 33, .18), 0 2px 6px rgba(12, 36, 33, .06) !important; }
.menu-bilah .mud-list { padding: 6px; }
.menu-bilah .mud-menu-item { border-radius: 9px; min-height: 38px; }
.menu-bilah .mud-menu-item:hover { background-color: #f1f7f6; }
.menu-bilah .mud-menu-item:not(.mb-keluar) .mud-menu-item-icon { color: #0f766e; }
.mb-kepala { padding: 8px 10px 10px; }
.mb-kepala b { display: block; font-size: 13.5px; color: #111827; }
.mb-kepala span { font-size: 12px; color: #6b7280; }
.mb-cabang .mud-menu-item-text { display: flex; align-items: center; gap: 10px; }
.mb-kode { flex: 0 0 auto; min-width: 48px; text-align: center; padding: 2px 7px; border-radius: 6px; font: 600 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; color: #0f766e; background: #e6f4f1; }
.mb-teks { flex: 1; min-width: 0; }
.mb-centang { color: #0f766e; }
.menu-bilah .mb-cabang-aktif { background-color: #effaf8; font-weight: 600; }
.mb-profil { display: flex; align-items: center; gap: 12px; padding: 12px 10px 10px; }
.mb-profil > div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.mb-profil b { font-size: 14.5px; color: #111827; }
.mb-profil > div > span:not(.status) { font-size: 12.5px; color: #6b7280; }
.mb-avatar { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700;
    font-size: 16px; color: #fff; background: linear-gradient(135deg, #14b8a6, #0f766e); box-shadow: 0 0 0 4px #e6f4f1; }
.mb-cabang-info { display: flex; align-items: center; gap: 8px; margin: 0 6px 6px; padding: 7px 10px; border-radius: 9px; font-size: 12.5px; color: #374151; background: #f4f8f7; }
.mb-cabang-info .mud-icon-root { color: #0f766e; }
.menu-bilah .mb-keluar { color: #c62828; }
.menu-bilah .mb-keluar:hover { background-color: #fdecec; }

/* Dialog akun: Ganti Password & Atur PIN Supervisor. */
.ak-kepala { text-align: center; padding: 10px 8px 2px; }
.ak-kepala .dk-ikon { width: 56px; height: 56px; margin-bottom: 14px; }
.ak-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.ak-syarat { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 14px 0 0; padding: 10px 12px; list-style: none; border-radius: 12px;
    background: #f6f9f8; border: 1px solid #e6eeec; }
.ak-syarat li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6b7280; transition: color .15s; }
.ak-syarat li .mud-icon-root { font-size: 17px; color: #cbd5e1; transition: color .15s; }
.ak-syarat li.ak-ok { color: #0f766e; font-weight: 600; }
.ak-syarat li.ak-ok .mud-icon-root { color: #14b8a6; }
.ak-catatan { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45;
    color: #92400e; background: #fff8eb; border: 1px solid #fde7c2; }
.ak-catatan .mud-icon-root { margin-top: 1px; color: #d97706; }
.ak-pin { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ak-pin-isian input { text-align: center; letter-spacing: 6px; font-weight: 700; }
.ak-titik { display: flex; align-items: center; gap: 7px; margin-top: -4px; }
.ak-titik i { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; transition: background .15s, transform .15s; }
.ak-titik i.isi { background: linear-gradient(135deg, #14b8a6, #0f766e); transform: scale(1.1); }
.ak-titik span { margin-left: 6px; font-size: 12px; color: #6b7280; }
@media (max-width: 480px) {
    .ak-syarat, .ak-pin { grid-template-columns: 1fr; }
}

/* ===== Halaman laporan ===== */
.br-nada-langit { --nada: 2, 132, 199; }
.br-nada-abu { --nada: 71, 85, 105; }
/* Hub "Semua Laporan" */
.lp-cari { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; max-width: 560px; }
.lp-cari .mud-input-control { margin: 0; }
.lp-cari .mud-input.mud-input-outlined { background: #fff; border-radius: 12px; }
.lp-cari .mud-input-outlined-border { border-radius: 12px; border-color: #d3e3e0; }
.lp-cari .mud-input-adornment-start .mud-icon-root { color: #0f766e; }
.lp-jumlah { flex: 0 0 auto; font-size: 12.5px; color: #6b7280; padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid #e3ece9; }
/* Setiap baris kartu adalah satu grid; grid-auto-rows 1fr membuat semua kartu di grid itu setinggi kartu tertingginya,
   juga bila kartunya turun ke baris berikut (2 kolom di laptop, 4 kolom di layar lebar, 1 kolom di HP). */
.lp-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; align-items: stretch; margin-bottom: 18px; }
@media (min-width: 900px) { .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .lp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-kelompok { position: relative; overflow: hidden; border-radius: 18px; padding: 18px 14px 12px; border: 1px solid rgba(var(--nada), .16);
    background:
        radial-gradient(110% 70% at 100% 0%, rgba(var(--nada), .14), transparent 55%),
        linear-gradient(170deg, rgba(var(--nada), .07) 0%, rgba(255, 255, 255, .7) 45%),
        #fff;
    box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.lp-kepala { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 6px 14px; margin-bottom: 6px; }
/* Pemisah di bawah judul kelompok: garis berwarna kelompok yang memudar ke kanan. */
.lp-kepala::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--nada), .55), rgba(var(--nada), .14) 55%, rgba(var(--nada), 0)); }
.lp-kepala h2 { margin: 0; font-size: 16px; font-weight: 700; color: #111827; }
.lp-kepala span:not(.lp-ikon) { font-size: 12px; color: #6b7280; }
.lp-ikon { flex: 0 0 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg, rgba(var(--nada), .75), rgba(var(--nada), 1)); box-shadow: 0 8px 18px rgba(var(--nada), .28), inset 0 1px 0 rgba(255,255,255,.3); }
.lp-ikon .mud-icon-root { font-size: 22px; }
.lp-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lp-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; text-decoration: none; color: inherit;
    border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.lp-item:hover { background: rgba(255, 255, 255, .85); border-color: rgba(var(--nada), .22); transform: translateX(2px); }
.lp-item-ikon { flex: 0 0 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--nada), .1); color: rgb(var(--nada)); }
.lp-item-ikon .mud-icon-root { font-size: 19px; }
.lp-item-teks { flex: 1; min-width: 0; }
.lp-item-teks b { display: block; font-size: 14px; font-weight: 600; color: #111827; }
.lp-item-teks small { display: block; font-size: 12px; color: #6b7280; line-height: 1.4; margin-top: 1px; }
.lp-chevron.mud-icon-root { color: #c3cad6; font-size: 20px; transition: color .15s ease; }
.lp-item:hover .lp-chevron.mud-icon-root { color: rgb(var(--nada)); }

/* Kepala tiap laporan: jejak + ikon */
.lp-remah { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #6b7280; margin-bottom: 8px; }
.lp-remah a { display: inline-flex; align-items: center; gap: 5px; color: #0f766e; text-decoration: none; font-weight: 600; }
.lp-remah a:hover { text-decoration: underline; }
.lp-remah .mud-icon-root { font-size: 16px; }
.lp-remah-pemisah.mud-icon-root { color: #c3cad6; }
.lp-judul-ikon { flex: 0 0 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg, rgba(var(--nada), .75), rgba(var(--nada), 1)); box-shadow: 0 8px 18px rgba(var(--nada), .26), inset 0 1px 0 rgba(255,255,255,.3); }
.lp-judul-ikon .mud-icon-root { font-size: 24px; }
.judul-halaman-teks.mud-typography { font-weight: 700; letter-spacing: -.2px; color: #111827; }
/* Blok judul mulai dari 320px lalu melebar; keterangan panjang turun baris, tombol tetap di kanan sejajar judul. */
.judul-halaman > .flex-grow-1 { flex: 1 1 320px; }
.tombol-laporan.mud-button-root { text-transform: none; font-weight: 600; border-radius: 10px; background: #fff; border-color: #d3e3e0; color: #134e4a; }
.tombol-laporan.mud-button-root:hover { background: #f0faf8; border-color: #9fd8cd; }
.tombol-excel .mud-button-icon-start { color: #15803d; }

/* Panel filter */
.panel-filter.mud-paper { border-radius: 16px; border: 1px solid #e3ece9; box-shadow: 0 1px 2px rgba(16,24,40,.04);
    background: radial-gradient(70% 120% at 100% 0%, rgba(20, 184, 166, .07), transparent 60%), linear-gradient(135deg, #ffffff, #f8fcfb); }
.panel-filter .mud-input.mud-input-outlined { background: #fff; border-radius: 10px; }
.panel-filter .mud-input-outlined-border { border-radius: 10px; }
.panel-filter .mud-button-filled-primary:not(:disabled) { background: linear-gradient(135deg, #14a394, #115e59); box-shadow: 0 6px 14px rgba(15, 118, 110, .25); }
.panel-filter .mud-button-filled.mud-button-root { text-transform: none; font-weight: 600; border-radius: 10px; height: 40px; }
/* Peringatan cabang tanpa gudang (PeringatanGudang): judul tebal di baris sendiri, keterangan di bawahnya. */
.peringatan-gudang.mud-alert { border-radius: 12px; margin-bottom: 12px; }
.peringatan-gudang b { display: block; margin-bottom: 2px; }
.peringatan-gudang span { font-size: 13.5px; }
/* Penerimaan Barang: panel PO yang menunggu diterima (PoMenungguDiterima), warna modul Pembelian (ungu). */
.mud-main-content .mud-paper.mt-panel { overflow: hidden; border-top: 3px solid rgba(106, 63, 181, .55); }
.mt-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px 12px; }
.mt-ikon { flex: 0 0 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: #6a3fb5; background: rgba(106, 63, 181, .1); }
.mt-judul { min-width: 0; }
.mt-judul b { display: block; font-size: 15px; color: #111827; }
.mt-judul span { font-size: 12.5px; color: #6b7280; }
.mt-kosong { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px 16px; border-top: 1px solid #edf2f1; }
.mt-kosong-teks { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #15803d; }
.mt-subjudul { display: flex; align-items: center; gap: 8px; margin: 18px 2px 10px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #6b7280; }
.mt-subjudul::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #dfeae7, transparent); }
/* Dialog Terima Barang: daftar PO yang bisa dipilih. */
.tp-kepala { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.tp-kepala b { display: block; font-size: 17px; color: #111827; }
.tp-kepala span:not(.mt-ikon) { font-size: 13px; color: #6b7280; }
.tp-daftar { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; overflow-x: hidden; padding: 2px; }
.tp-po { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
    border: 1px solid #e6eeec; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tp-po:hover, .tp-po:focus-visible { border-color: rgba(106, 63, 181, .4); box-shadow: 0 8px 20px -12px rgba(106, 63, 181, .5); transform: translateY(-1px); }
.tp-po-utama { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tp-po-utama b { font-size: 14.5px; color: #111827; overflow-wrap: anywhere; }
.tp-po-utama span { font-size: 13px; color: #374151; }
.tp-po-utama small { font-size: 12px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-po-sisi { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12.5px; color: #374151; text-align: right; white-space: nowrap; }
.tp-panah { color: #cbd5e1; }
.tp-po:hover .tp-panah { color: #6a3fb5; }
.tp-kosong { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 20px 12px 8px; color: #6b7280; font-size: 13.5px; }
.tp-kosong > .mud-icon-root { font-size: 40px; color: #6a3fb5; padding: 10px; border-radius: 50%; background: rgba(106, 63, 181, .08); box-sizing: content-box; }
.tp-kosong b { color: #111827; font-size: 15px; }
/* HP: isi kartu PO disusun ke bawah, panah tetap di kanan. */
@media (max-width: 600px) {
    .tp-po { flex-wrap: wrap; position: relative; padding-right: 36px; }
    .tp-po-utama { flex-basis: 100%; }
    .tp-po-sisi { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; text-align: left; }
    .tp-panah { position: absolute; right: 10px; top: 50%; translate: 0 -50%; }
}
.mt-tabel.mud-simple-table { border-radius: 0; border-top: 1px solid #edf2f1; }
.mt-tabel td { vertical-align: middle; }
.mt-kecil { font-size: 12px; }
.mt-lagi { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 16px; font-size: 13px; color: #6b7280;
    border-top: 1px solid #edf2f1; background: #fafcfc; }
/* Kartu Stok: baris filter (tanggal ringkas, barang & gudang berbagi sisa ruang) dan barang terpilih di bawahnya. */
.ksk-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ksk-filter > div { min-width: 0; }
.ksk-f-luas { flex: 1 1 200px; }
.ksk-f-tanggal { flex: 0 1 165px; min-width: 150px !important; }
.ksk-f-tombol { flex: 0 0 auto; }
@media (max-width: 600px) {
    .ksk-f-tanggal { flex: 1 1 140px; }
    .ksk-f-tombol { flex: 1 1 100%; }
}
.ksk-terpilih { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid #e3ece9; }
.ksk-ikon { flex: 0 0 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px;
    color: rgb(var(--nada)); background: rgba(var(--nada), .1); }
.ksk-teks { min-width: 0; }
.ksk-teks b { display: block; font-size: 14.5px; color: #111827; }
.ksk-teks span { font-size: 12.5px; color: #6b7280; }
.ksk-saldo { margin-left: auto; text-align: right; }
.ksk-saldo span { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: #6b7280; }
.ksk-saldo b { font-size: 20px; font-variant-numeric: tabular-nums; color: #15803d; }

/* Kerangka memuat */
.kerangka-laporan { background: #fff; border: 1px solid #e6eeec; border-radius: 16px; padding: 16px 18px; }
.kl-kepala, .kl-baris { display: flex; align-items: center; gap: 16px; }
.kl-kepala { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid #edf2f1; }
.kl-baris { padding: 11px 0; border-bottom: 1px solid #f3f6f5; }
.kl-kepala span, .kl-baris span { display: block; height: 11px; border-radius: 6px;
    background: linear-gradient(90deg, #edf3f2 0%, #dcebe8 40%, #edf3f2 80%); background-size: 300% 100%; animation: kl-kilau 1.4s ease-in-out infinite; }
.kl-kepala span { height: 9px; background-image: linear-gradient(90deg, #dfeeeb 0%, #c9e4df 40%, #dfeeeb 80%); }
.kl-baris .kl-angka { width: 14%; margin-left: auto; }
.kl-baris .kl-angka + .kl-angka { margin-left: 0; }
.kl-teks { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: #6b7280; }
.kl-titik { width: 8px; height: 8px; border-radius: 50%; background: #14b8a6; box-shadow: 0 0 0 0 rgba(20, 184, 166, .5); animation: kl-denyut 1.4s ease-out infinite; }
@keyframes kl-kilau { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes kl-denyut { to { box-shadow: 0 0 0 8px rgba(20, 184, 166, 0); } }
@media (prefers-reduced-motion: reduce) { .kl-kepala span, .kl-baris span, .kl-titik { animation: none; } }

/* Tabel laporan di layar (cetakan tetap hitam-putih polos). */
.lk-judul td { font-weight: 600; }
.lk-subtotal td { font-weight: 600; border-top: 1px solid #dfe7e5; }
.lk-total td { font-weight: 700; border-top: 2px solid #cfdcd9; }
@media screen {
    .area-cetak .mud-paper { border-radius: 16px; border: 1px solid #e6eeec; box-shadow: 0 1px 2px rgba(16,24,40,.04) !important; overflow: hidden; }
    .area-cetak .mud-simple-table table thead th, .area-cetak .mud-table-head .mud-table-cell {
        background: #f3f8f7; color: #3f5f5a; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid #dfeae7; }
    .area-cetak .mud-simple-table table tfoot td, .area-cetak .mud-table-foot .mud-table-cell {
        background: linear-gradient(180deg, #e7f6f2, #d9f0eb); color: #134e4a; border-top: 2px solid #9fd8cd; font-weight: 700; }
    .lk-judul td { color: #0f5f58; font-size: 12.5px; letter-spacing: .5px; background: rgba(15, 118, 110, .035); }
    .lk-total td { color: #134e4a; background: linear-gradient(180deg, #e7f6f2, #d9f0eb); border-top-color: #9fd8cd; }
}
@media print {
    .lk-total td { border-top-color: #000; }
}

/* ===== Halaman transaksi (berlaku di seluruh isi aplikasi) ===== */
@media screen {
    /* Kartu & tabel: sudut membulat, garis tepi halus, bayangan tipis. */
    .mud-main-content .mud-paper.mud-elevation-1 { border-radius: 16px; border: 1px solid #e6eeec; box-shadow: 0 1px 2px rgba(16,24,40,.04) !important; }
    .mud-main-content .mud-table.mud-paper { overflow: hidden; }
    .mud-main-content .mud-simple-table table thead th, .mud-main-content .mud-table-head .mud-table-cell {
        background: #f3f8f7; color: #3f5f5a; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid #dfeae7; }
    .mud-main-content .mud-simple-table table tfoot td, .mud-main-content .mud-table-foot .mud-table-cell {
        background: linear-gradient(180deg, #e7f6f2, #d9f0eb); color: #134e4a; border-top: 2px solid #9fd8cd; font-weight: 700; }
    .mud-main-content .mud-table-pagination { border-top: 1px solid #edf2f1; }
    /* Tombol utama bergradasi zamrud. */
    .mud-main-content .mud-button-filled-primary:not(:disabled) {
        background: linear-gradient(135deg, #14a394, #115e59); box-shadow: 0 6px 14px rgba(15, 118, 110, .22); }
    .mud-main-content .mud-button-filled-primary:not(:disabled):hover { background: linear-gradient(135deg, #0f8a7d, #0d5c54); }
    .mud-main-content .mud-button-root:not(.mud-icon-button) { border-radius: 10px; }
    .mud-main-content .mud-button-outlined:not(:disabled):not([class*="mud-button-outlined-error"]):not([class*="mud-button-outlined-warning"]) { background: #fff; }
}

/* Tabel berkepala tetap: tabelnya bergulir sendiri setinggi layar (dikurangi --atas = tinggi isi di atasnya), kepala tabel menempel.
   Hanya di layar lebar; di HP tabel berubah jadi kartu dan halaman bergulir seperti biasa. */
@media screen and (min-width: 600px) {
    .tabel-gulir .mud-table-container { max-height: max(320px, calc(100vh - var(--atas, 260px))); overflow-y: auto; }
    .tabel-gulir .mud-table-head .mud-table-cell { position: sticky; top: 0; z-index: 2; }
}

/* Hutang & piutang (RingkasJatuhTempo, LabelJatuhTempo, BilahLunas): bilah komposisi jatuh tempo, label jatuh tempo, bagian terbayar. */
.hs-umur { margin: -4px 0 16px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid #e6eeec; }
.hs-umur-bilah { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #eef3f2; }
.hs-umur-bilah span { height: 100%; transition: width .3s; }
.hs-umur-ket { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 12.5px; color: #475569; }
.hs-umur-ket span { display: inline-flex; align-items: center; gap: 6px; }
.hs-umur-ket i { width: 10px; height: 10px; border-radius: 3px; }
.hs-merah { background: #ef4444; }
.hs-kuning { background: #f59e0b; }
.hs-biru { background: #3b82f6; }
.sel-nama.hs-pihak { flex-wrap: nowrap; gap: 8px; }
.hs-pihak > span:last-child { min-width: 0; }
.hs-tempo { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.hs-lunas { width: 88px; height: 4px; margin: 5px 0 0 auto; border-radius: 999px; overflow: hidden; background: #e2e8f0; }
.hs-lunas span { display: block; height: 100%; background: #14a394; }
@media print { .area-cetak .avatar, .area-cetak .hs-lunas, .area-cetak .hs-aksi { display: none; } }

/* Label status: kapsul lembut dengan titik warna. */
.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
    line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.status-netral { background: #f1f5f4; color: #4b5563; border-color: #e2e8e6; }
.status-proses { background: #e6eeff; color: #1d4ed8; border-color: #cfdcfd; }
.status-selesai { background: #e3f6ec; color: #15803d; border-color: #c4ead4; }
.status-batal { background: #fdecec; color: #c62828; border-color: #f7cfcf; }
.status-peringatan { background: #fff4e0; color: #b45309; border-color: #fbdca8; }

/* Bagian yang hanya untuk layar (mis. kartu ringkasan di atas laporan) tidak ikut tercetak. */
@media print { .hanya-layar { display: none !important; } }

/* Bilah kemajuan (mis. hitung stok opname). */
.progres-hitung { flex: 1; min-width: 80px; height: 8px; border-radius: 99px; background: #e6eeec; overflow: hidden; }
.progres-hitung span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #14b8a6, #0f766e); transition: width .3s ease; }

/* Pilihan kelompok berbentuk kapsul (mis. Monitoring Giro): putih bergaris tepi, terpilih diberi latar warnanya sendiri. */
.pilih-kelompok .mud-chip { border-radius: 999px; font-weight: 600; }
/* Yang belum dipilih putih bergaris tepi; yang terpilih tetap memakai warna isi bawaan MudBlazor (teksnya putih). */
.pilih-kelompok .mud-chip:not(.mud-chip-selected) { background: #fff; border: 1px solid #e3ece9; }
.pilih-kelompok .mud-chip.mud-chip-selected { box-shadow: 0 4px 10px rgba(15, 118, 110, .2); }

/* Keadaan kosong pada daftar dokumen. */
.daftar-kosong { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 16px 40px; text-align: center; color: #6b7280; font-size: 13px; }
.daftar-kosong span { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
    background: radial-gradient(circle at 30% 30%, #eef7f5, #d9efea); color: #0f766e; box-shadow: 0 0 0 8px #f5fbfa; }
.daftar-kosong b { color: #111827; font-size: 14.5px; }

/* Pita filter di atas tabel (ToolBarContent MudTable), senada dengan panel filter. */
@media screen {
    .mud-main-content .mud-table-toolbar { height: auto; padding: 12px 16px; border-bottom: 1px solid #edf2f1;
        background: radial-gradient(70% 140% at 100% 0%, rgba(20, 184, 166, .07), transparent 60%), linear-gradient(135deg, #fff, #f8fcfb); }
}
@media print { .status { border-color: #999; background: none; color: #000; } }

/* Pasangan label–nilai di rincian dokumen. */
/* Info: ikon bernada di kiri label & nilai; kartu yang berisi Info diberi latar lembut. */
.info { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.info-ikon { flex: none; width: 28px; height: 28px; margin-top: 2px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    color: #0f766e; background: #ecf7f5; border: 1px solid #d5ebe6; }
.info-ikon .mud-icon-root { font-size: 16px; }
.info-isi { min-width: 0; flex: 1; }
@media screen { .mud-main-content .mud-paper:has(> .mud-grid .info) { background: linear-gradient(180deg, #ffffff, #f7fbfa); } }
@media print { .info-ikon { display: none; } }
.info-label { font-size: 11.5px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.info-nilai { font-size: 14.5px; color: #111827; font-weight: 500; line-height: 1.45; word-break: break-word; }

/* ===== Kasir ===== */
.ks-shift { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    color: #134e4a; background: #e3f5f1; border: 1px solid #c4e9e1; }
.ks-shift i { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); animation: kl-denyut 1.6s ease-out infinite; }
/* Panel bayar ikut melebar di layar lebar (420 px pada 1920 px), tetap 350 px di laptop agar keranjang tidak terlalu sempit. */
.ks { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) clamp(350px, 22vw, 420px); align-items: start; }
@media (max-width: 1100px) { .ks { grid-template-columns: minmax(0, 1fr); } }
.ks-keranjang { background: #fff; border: 1px solid #e6eeec; border-radius: 18px; box-shadow: 0 1px 2px rgba(16,24,40,.04); overflow: hidden; }
.ks-cari { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; border-bottom: 1px solid #edf2f1;
    background: radial-gradient(70% 140% at 100% 0%, rgba(20, 184, 166, .08), transparent 60%), linear-gradient(135deg, #fff, #f8fcfb); }
.ks-cari .mud-input.mud-input-outlined { background: #fff; border-radius: 10px; }
/* Isian boleh menyempit di bawah lebar teksnya, agar gudang tetap sebaris dengan pencarian. Pencarian ±60%, gudang ±40% (nama
   gudang beserta keterangannya cukup panjang); di layar sempit keduanya turun menjadi dua baris. */
.ks-cari > div { min-width: 0; }
.ks-cari-barang { flex: 3 1 280px; }
.ks-cari-gudang { flex: 2 1 260px; }
.ks-kosong { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 56px 16px 64px; color: #6b7280; font-size: 13.5px; }
.ks-kosong b { color: #111827; font-size: 15px; }
.ks-kosong-ikon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
    background: radial-gradient(circle at 30% 30%, #e6f7f3, #cdeee7); color: #0f766e; box-shadow: 0 0 0 10px #f3faf8; }
.ks-kosong-ikon .mud-icon-root { font-size: 34px; }
.ks-tabel.mud-simple-table { border-radius: 0; }
.ks-tabel td { vertical-align: middle; }
/* Kolom nama barang diberi ruang; kolom isian angka dibuat ringkas (di layar sempit tabel bisa digeser). */
.ks-tabel { overflow-x: auto; }
.ks-tabel td:first-child { min-width: 210px; }
.ks-tabel th:nth-child(2) { width: 72px !important; }
.ks-tabel th:nth-child(3) { width: 118px !important; }
.ks-tabel th:nth-child(4) { width: 104px !important; }
.ks-tabel th, .ks-tabel td { padding-left: 8px !important; padding-right: 8px !important; }
.ks-barang { display: flex; align-items: center; gap: 10px; }
.ks-barang b { font-weight: 600; color: #111827; }
.ks-inisial { flex: 0 0 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
    font-size: 13px; color: #0f766e; background: linear-gradient(135deg, #e6f7f3, #cdeee7); }
.ks-ringkas { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; font-size: 12.5px; color: #6b7280; border-top: 1px solid #edf2f1; background: #fafcfc; }
/* Satu kolom selebar panel (minmax 0): tanpa ini isian yang teksnya panjang (mis. "Masuk ke" + nomor rekening) melebarkan isi
   melampaui panel lalu terpotong oleh overflow: hidden. */
.ks-bayar { position: sticky; top: 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: 18px; overflow: hidden; border: 1px solid #e6eeec;
    box-shadow: 0 12px 32px rgba(12, 36, 33, .08); background: #fff; }
.ks-total { position: relative; overflow: hidden; padding: 20px 22px; color: #fff; display: flex; flex-direction: column; gap: 2px;
    background: radial-gradient(90% 120% at 100% 0%, rgba(45, 212, 191, .35), transparent 60%), linear-gradient(140deg, #0f766e, #0b3b36 70%, #072a26); }
.ks-total::after { content: ""; position: absolute; width: 160px; height: 160px; right: -50px; bottom: -80px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, .28), transparent 70%); }
.ks-total span { font-size: 12.5px; letter-spacing: .5px; text-transform: uppercase; opacity: .78; font-weight: 600; }
.ks-total b { font-size: 32px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ks-total small { font-size: 12.5px; opacity: .7; }
.ks-panel { padding: 18px; min-width: 0; }
.ks-subjudul { margin: 18px 0 10px; font-size: 11.5px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .6px; display: flex; align-items: center; gap: 10px; }
.ks-subjudul::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #dfeae7, transparent); }
.ks-cepat { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ks-cepat button { cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: #134e4a; padding: 5px 11px; border-radius: 999px;
    background: #f0faf8; border: 1px solid #cfe7e2; transition: background .15s ease, border-color .15s ease; }
.ks-cepat button:hover { background: #dcf3ef; border-color: #9fd8cd; }
.ks-nontunai { margin-top: 10px; padding: 10px 8px; border-radius: 12px; background: #f8fbfa; border: 1px solid #e6eeec; }
.ks-hasil { margin-top: 14px; border-radius: 12px; overflow: hidden; border: 1px solid #e6eeec; }
.ks-hasil > div { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 12px; font-size: 13.5px; color: #4b5563; }
.ks-hasil > div + div { border-top: 1px solid #edf2f1; }
.ks-hasil b { font-variant-numeric: tabular-nums; color: #111827; }
.ks-kembalian { background: linear-gradient(90deg, #e3f6ec, #f2fbf6); }
.ks-kembalian b { font-size: 20px; color: #15803d !important; }
.ks-kurang { background: #fdf1f1; }
.ks-kurang span, .ks-kurang b { color: #c62828 !important; }
.ks-tombol.mud-button-root { height: 52px; border-radius: 12px; font-size: 16px; }

/* ===== Master data: avatar inisial & sel nama ===== */
.avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700; letter-spacing: .3px; color: rgb(var(--nada)); background: rgba(var(--nada), .13);
    box-shadow: inset 0 0 0 1px rgba(var(--nada), .18); }
.sel-nama { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ===== Dialog (tambah/ubah data, dll.) ===== */
.mud-dialog { border-radius: 18px !important; overflow: hidden; box-shadow: 0 24px 64px rgba(12, 36, 33, .22) !important; }
/* Nada dialog: <MudDialog Class="br-nada-..."> mewarnai kepala, ikon, judul bagian, dan sakelar; bawaannya zamrud. */
.mud-dialog:not([class*="br-nada-"]) { --nada: 15, 118, 110; }
/* Kepala dialog: gradasi bernada transparan dari kiri memudar ke putih, sentuhan amber tipis di pojok kanan atas. */
.mud-dialog:not(.dialog-pratinjau) .mud-dialog-title { padding: 18px 24px 14px; border-bottom: 1px solid rgba(var(--nada), .12);
    background:
        radial-gradient(60% 140% at 100% 0%, rgba(245, 158, 11, .10), transparent 60%),
        linear-gradient(100deg, rgba(var(--nada), .16) 0%, rgba(var(--nada), .07) 40%, rgba(var(--nada), 0) 78%),
        #fff; }

/* KepalaDialog: ikon bergradasi bernada, judul, keterangan. Ruang kanan untuk tombol tutup. */
.kd { display: flex; align-items: center; gap: 14px; min-width: 0; padding-right: 28px; }
.kd-ikon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg, rgba(var(--nada), .78), rgb(var(--nada)));
    box-shadow: 0 6px 14px rgba(var(--nada), .28), inset 0 1px 0 rgba(255, 255, 255, .25); }
.kd-ikon .mud-icon-root { font-size: 22px; }
.kd-teks { min-width: 0; }
.kd-judul { font-weight: 700; font-size: 17.5px; line-height: 1.25; color: #111827; }
.kd-ket { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: #64748b; }

/* KepalaBagian: judul bagian di dalam kartu halaman, sejalan dengan KepalaDialog tetapi lebih ringkas. */
.kb { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 14px; }
.kb-ikon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    color: rgb(var(--nada)); background: rgba(var(--nada), .1); border: 1px solid rgba(var(--nada), .18); }
.kb-ikon .mud-icon-root { font-size: 20px; }
.kb-teks { flex: 1; min-width: 0; }
.kb-judul { font-weight: 700; font-size: 15.5px; line-height: 1.3; color: #111827; }
.kb-ket { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: #64748b; }
.kb-aksi { flex: none; display: flex; align-items: center; gap: 8px; }

/* Periode akuntansi: pemilih tahun + kisi 12 kartu bulan. */
.pr-tahun { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px; border-radius: 12px; background: #fff; border: 1px solid #e3ebe9; }
.pr-tahun b { min-width: 48px; text-align: center; font-size: 16px; color: #0f766e; font-variant-numeric: tabular-nums; }
.pr-ringkas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pr-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pr-bulan { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #e3ebe9;
    box-shadow: 0 4px 14px rgba(12, 36, 33, .04); transition: box-shadow .15s, transform .15s; }
.pr-bulan:hover { box-shadow: 0 10px 24px rgba(12, 36, 33, .08); transform: translateY(-1px); }
.pr-atas { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pr-nama { font-weight: 700; font-size: 16px; color: #111827; }
.pr-ket { flex: 1; font-size: 12.5px; line-height: 1.45; color: #64748b; }
.pr-tutup { background: #f8fafc; }
.pr-tutup .pr-nama { color: #475569; }
.pr-kini { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15, 118, 110, .12); }
.pr-bulan .mud-button-root { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .pr-bulan, .pr-bulan:hover { transition: none; transform: none; } }

/* BagianDialog: judul bagian formulir, huruf kapital kecil bernada dengan garis memudar. */
.bd { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: rgb(var(--nada)); }
.bd::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--nada), .28), transparent); }
.bd .mud-icon-root { font-size: 16px; }
.mud-grid > .bd { flex: 0 0 100%; max-width: 100%; margin: 0; padding: 14px 8px 0; }
.mud-grid > .bd:first-child, .mud-dialog-content > .bd:first-child, form > .bd:first-child { padding-top: 4px; margin-top: 0; }

/* SakelarKartu: kartu berbingkai, seluruhnya bisa diklik; bernada saat aktif. */
.sk { display: flex; align-items: center; gap: 12px; padding: 8px 6px 8px 14px; border: 1px solid #e2eae8; border-radius: 12px; background: #fff;
    cursor: pointer; user-select: none; transition: border-color .15s, background-color .15s; }
.sk:hover { border-color: rgba(var(--nada), .38); }
.sk-aktif { border-color: rgba(var(--nada), .42); background: rgba(var(--nada), .05); }
.sk-mati { opacity: .65; cursor: not-allowed; }
.sk-teks { flex: 1; min-width: 0; }
.sk-teks b { display: block; font-size: 14px; font-weight: 600; color: #1f2937; }
.sk-teks small { display: block; margin-top: 1px; font-size: 12px; line-height: 1.4; color: #64748b; }
.sk .mud-switch { margin: 0; }

/* Dialog formulir (berkepala KepalaDialog): isi lebih lega, bilah tombol bawah berlatar lembut, cincin fokus bernada. */
.mud-dialog:has(.kd) .mud-dialog-content { padding: 18px 24px 22px; }
.mud-dialog:has(.kd) .mud-dialog-actions { padding: 12px 20px; background: #f8fbfa; border-top: 1px solid #edf2f1; }
.mud-dialog:has(.kd) .mud-input-outlined:focus-within .mud-input-outlined-border { box-shadow: 0 0 0 3px rgba(var(--nada), .13); }
.mud-dialog .ad-utama { min-width: 112px; }

/* TombolIkon: pembungkus tooltip sebaris dengan tombol lain; sel tabel berisi tombol ikon tidak dipotong ke baris baru. */
.tombol-ikon.mud-tooltip-root { display: inline-flex; vertical-align: middle; }
td:has(> .tombol-ikon) { white-space: nowrap; }
.mud-dialog .mud-dialog-title .mud-typography { font-weight: 700; font-size: 18px; color: #111827; }
.mud-dialog .mud-dialog-content { padding-top: 16px; }
.mud-dialog .mud-dialog-actions { padding: 12px 20px 18px; gap: 8px; }
.mud-dialog .mud-button-root:not(.mud-icon-button) { border-radius: 10px; }
.mud-dialog .mud-button-filled-primary:not(:disabled) { background: linear-gradient(135deg, #14a394, #115e59); box-shadow: 0 6px 14px rgba(15, 118, 110, .22); }
.mud-dialog .mud-input.mud-input-outlined, .mud-dialog .mud-input-outlined-border { border-radius: 10px; }
.mud-dialog .pemuat { min-height: 160px; }

/* ===== Tombol kembali ke atas ===== */
/* Ruang di bawah isi halaman: tombol kembali ke atas (pojok kanan bawah) tidak menutupi tombol terakhir, mis. "Simpan" atau paginasi. */
@media screen { .mud-main-content > .mud-container { padding-bottom: 88px !important; } }
/* Posisi & animasi muncul/hilang dari MudScrollToTop (kelas visible/hidden); di sini hanya letak dan rupanya. */
.mud-scroll-to-top.ke-atas-wadah { right: 24px; bottom: 24px; z-index: 1200; }
.ke-atas { position: relative; width: 48px; height: 48px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; color: #fff;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #14b8a6, #0f766e); box-shadow: 0 10px 24px rgba(15, 118, 110, .35);
    transition: transform .18s ease, box-shadow .18s ease; }
.ke-atas:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 118, 110, .42); }
.ke-atas:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
.ke-atas .mud-icon-root { font-size: 28px; position: relative; z-index: 1; }
/* Cincin kemajuan gulir: busur amber yang terisi seiring halaman digulir (browser yang belum mendukung tetap menampilkan tombol biasa). */
@property --gulir { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.ke-atas::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; padding: 3px;
    background: conic-gradient(#f59e0b var(--gulir), rgba(15, 118, 110, .18) 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@supports (animation-timeline: scroll()) {
    .ke-atas::before { animation: ke-atas-gulir linear both; animation-timeline: scroll(root block); }
}
@keyframes ke-atas-gulir { from { --gulir: 0%; } to { --gulir: 100%; } }
@media print { .ke-atas-wadah { display: none !important; } }
@media (max-width: 600px) { .mud-scroll-to-top.ke-atas-wadah { right: 16px; bottom: 16px; } }

/* ===== Gambar produk ===== */
.gp-galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, calc(50% - 7px)), 1fr)); gap: 14px; }
.gp-ubin { position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: repeating-conic-gradient(#f4f7f6 0 25%, #fff 0 50%) 0 0 / 16px 16px; border: 1px solid #e3ece9; transition: box-shadow .2s, border-color .2s; }
.gp-ubin img { width: 100%; height: 100%; object-fit: contain; }
.gp-buka { all: unset; position: absolute; inset: 0; display: flex; cursor: zoom-in; }
.gp-buka:focus-visible { outline: 3px solid rgba(15,118,110,.45); outline-offset: -3px; border-radius: 14px; }
.gp-kaca { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(12,36,33,.28);
    opacity: 0; transition: opacity .18s; color: #fff; pointer-events: none; }
.gp-kaca .mud-icon-root { font-size: 34px; padding: 8px; border-radius: 50%; background: rgba(12,36,33,.45); }
.gp-buka:hover .gp-kaca, .gp-buka:focus-visible .gp-kaca { opacity: 1; }
/* Foto & tanda tangan bukti serah terima (DetailPengiriman) yang membuka pratinjau. */
.bukti-buka { all: unset; position: relative; display: block; cursor: zoom-in; border-radius: 6px; overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--mud-palette-lines-default); }
.bukti-buka img { display: block; }
.bukti-buka .gp-kaca .mud-icon-root { font-size: 24px; padding: 6px; }
.bukti-buka:hover .gp-kaca, .bukti-buka:focus-visible .gp-kaca { opacity: 1; }
.bukti-buka:focus-visible { outline: 3px solid rgba(15,118,110,.45); }
.gp-ubin:hover { box-shadow: 0 8px 22px -12px rgba(15,118,110,.45); }
.gp-utama { border: 2px solid var(--mud-palette-primary); }
.gp-lencana { z-index: 1; position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px 2px 6px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #0f766e, #14b8a6); box-shadow: 0 2px 6px rgba(15,118,110,.35); }
.gp-lencana .mud-icon-root { font-size: 14px; color: #fde68a; }
.gp-aksi { z-index: 1; position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px; }
.gp-aksi .mud-icon-button { background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(15,23,42,.18); }
.gp-aksi .mud-icon-button:hover { background: #fff; }
.gp-tambah { flex-direction: column; gap: 4px; cursor: pointer; color: var(--mud-palette-primary); background: rgba(15,118,110,.04);
    border: 2px dashed rgba(15,118,110,.35); }
.gp-tambah:hover { background: rgba(15,118,110,.08); border-color: var(--mud-palette-primary); }
.gp-tambah .mud-icon-root { font-size: 34px; }
.gp-tambah span { font-weight: 600; font-size: 13.5px; }
.gp-tambah small { font-size: 12px; color: #94a3b8; }
.gp-tambah.gp-sibuk { cursor: default; color: #94a3b8; border-color: #e3ece9; background: #f8faf9; box-shadow: none; }
/* ===== Pratinjau gambar (DialogPratinjauGambar + zoom-gambar.js) ===== */
.pg-latar { background: rgba(6, 18, 16, .78) !important; backdrop-filter: blur(4px); }
.mud-dialog.dialog-pratinjau { background: #0b1715; color: #e2e8f0; box-shadow: 0 30px 80px rgba(0,0,0,.5) !important; }
.mud-dialog.dialog-pratinjau .mud-dialog-content { padding: 0; margin: 0; }
.pg-wadah { display: flex; flex-direction: column; }
.pg-kepala { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pg-judul { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.pg-judul span { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-judul small { flex: 0 0 auto; font-size: 12px; color: #94a3b8; }
.pg-alat { display: flex; align-items: center; gap: 2px; }
.pg-alat .mud-icon-button { color: #e2e8f0; }
.pg-alat .mud-icon-button:hover { background: rgba(255,255,255,.08); }
.pg-alat .mud-icon-button.mud-disabled { color: rgba(226,232,240,.3); }
.pg-persen { all: unset; min-width: 52px; text-align: center; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
    padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.07); }
.pg-persen:hover { background: rgba(255,255,255,.14); }
.pg-pemisah { width: 1px; height: 20px; margin: 0 6px; background: rgba(255,255,255,.12); }
.pg-panggung { position: relative; height: clamp(240px, calc(100dvh - 230px), 680px); overflow: hidden; display: flex; align-items: center; justify-content: center;
    touch-action: none; cursor: zoom-in; user-select: none;
    background: radial-gradient(circle at 50% 40%, #16302b 0, #0b1715 70%); }
.pg-panggung.pg-diperbesar { cursor: grab; }
.pg-panggung.pg-diperbesar:active { cursor: grabbing; }
/* Latar kotak terang: gambar transparan (tanda tangan, PNG/WebP) tetap terbaca di panggung gelap. */
.pg-panggung > img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; will-change: transform;
    background: repeating-conic-gradient(#eef2f1 0 25%, #fff 0 50%) 0 0 / 16px 16px;
    -webkit-user-drag: none; pointer-events: none; }
.pg-navigasi { all: unset; position: absolute; top: 50%; translate: 0 -50%; width: 42px; height: 42px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; cursor: pointer; color: #fff; background: rgba(12,36,33,.55); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.14); transition: background .15s; }
.pg-navigasi:hover { background: rgba(15,118,110,.85); }
.pg-navigasi:focus-visible { outline: 2px solid #5eead4; }
.pg-navigasi .mud-icon-root { font-size: 28px; }
.pg-kiri { left: 14px; }
.pg-kanan { right: 14px; }
.pg-petunjuk { position: absolute; bottom: 12px; left: 50%; translate: -50% 0; padding: 4px 12px; border-radius: 999px; font-size: 11.5px;
    color: #cbd5e1; background: rgba(12,36,33,.55); pointer-events: none; white-space: nowrap; transition: opacity .2s; }
.pg-diperbesar .pg-petunjuk { opacity: 0; }
.pg-jempol { display: flex; justify-content: center; gap: 10px; padding: 12px; border-top: 1px solid rgba(255,255,255,.08); overflow-x: auto; }
.pg-jempol button { all: unset; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; cursor: pointer; opacity: .55;
    background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.12); transition: opacity .15s, box-shadow .15s; }
.pg-jempol button img { width: 100%; height: 100%; object-fit: contain; }
.pg-jempol button:hover { opacity: .85; }
.pg-jempol button.pg-aktif { opacity: 1; box-shadow: 0 0 0 2px #14b8a6; }
.pg-jempol button:focus-visible { box-shadow: 0 0 0 2px #5eead4; }
@media (max-width: 600px) {
    .mud-dialog.dialog-pratinjau { width: calc(100% - 16px) !important; max-width: calc(100% - 16px) !important; margin: 8px; }
    .pg-kepala { padding-left: 14px; gap: 6px; }
    .pg-panggung { height: clamp(240px, calc(100dvh - 200px), 560px); }
    .pg-navigasi { width: 36px; height: 36px; }
    .pg-kiri { left: 8px; }
    .pg-kanan { right: 8px; }
    .pg-petunjuk { display: none; }
}

.avatar-gambar { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; object-fit: cover; background: #f4f7f6; box-shadow: inset 0 0 0 1px #e3ece9; }
.ks-gambar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; object-fit: cover; background: #f4f7f6; box-shadow: 0 0 0 1px #e3ece9; }

/* ===== Label QR: kode persegi di kiri, teks di kanan ===== */
.label-barcode.label-qr { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1.5mm; }
/* QR maksimal 48% lebar label agar teks (terutama harga) punya ruang; gambar QR tetap persegi di dalamnya (xMidYMid meet). */
.label-qr-gambar { flex: 0 0 auto; height: 100%; aspect-ratio: 1 / 1; max-width: 48%; display: flex; }
.label-qr-gambar svg { width: 100%; height: 100%; }
.label-qr-teks { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: .6mm; text-align: left; overflow: hidden;
    container-type: inline-size; }
.label-qr .label-nama { text-align: left; max-height: 3.6em; }
.label-qr .label-kode { font-size: .85em; word-break: break-all; }
/* Harga tidak boleh terpotong: hurufnya mengecil mengikuti lebar kolom teks ("Rp 13.800.000" ±7,8 em). */
.label-qr .label-harga { font-size: min(1.05em, 12cqi); white-space: nowrap; }

/* ===== Virtual Company (Pages/Laporan/VirtualCompany.razor + wwwroot/virtual-company.js) ===== */
.vc { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: stretch; }
.vc-panggung { position: relative; overflow: hidden; height: calc(100vh - 200px); min-height: 520px; border-radius: 18px;
    background: #e8f1ee; border: 1px solid #d5e5df; box-shadow: 0 10px 30px rgba(12, 36, 33, .08); }
.vc-kanvas, .vc-kanvas canvas, .vc-label-lapis { position: absolute; inset: 0; }
.vc-kanvas canvas { display: block; width: 100%; height: 100%; }
.vc-label-lapis { z-index: 1; cursor: grab; touch-action: none; }   /* z-index: label (z-index besar dari CSS2DRenderer) tetap di bawah panel aksi */
.vc-atas, .vc-legenda, .vc-petunjuk, .vc-tanpa3d { z-index: 2; }
.vc-label-lapis:active { cursor: grabbing; }
.vc-label { pointer-events: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; font-size: 12px;
    color: #0f172a; background: rgba(255, 255, 255, .92); border: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 4px 12px rgba(15, 23, 42, .12); white-space: nowrap; }
.vc-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vc-warna); }
.vc-label b { font-weight: 700; }
.vc-label[data-zona] { pointer-events: auto; cursor: pointer; transition: transform .15s; }
.vc-label[data-zona]:hover { transform: translateY(-2px); }
.vc-label[data-zona]:focus-visible, .vc-label-pilih { outline: 3px solid var(--vc-warna); outline-offset: 3px; }
/* Panel aksi bangunan: muncul di pojok kanan atas miniatur saat bangunan diklik. */
.vc-aksi { position: absolute; top: 12px; right: 12px; z-index: 3; width: min(340px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto;
    padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .97); border: 1px solid #e3ebe9; box-shadow: 0 18px 40px rgba(12, 36, 33, .16);
    animation: vc-aksi-masuk .18s ease-out; }
@keyframes vc-aksi-masuk { from { opacity: 0; transform: translateY(-6px); } }
.vc-aksi header { display: flex; align-items: center; gap: 10px; }
.vc-aksi-titik { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--vc-warna);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--vc-warna) 20%, transparent); }
.vc-aksi header > div { flex: 1; display: grid; min-width: 0; }
.vc-aksi header b { font-size: 15.5px; color: #111827; }
.vc-aksi header small { font-size: 12px; color: #64748b; }
.vc-aksi-status { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.vc-aksi-sub { margin: 12px 2px 2px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #64748b; }
.vc-aksi .vc-proyeksi-stok { padding: 6px 2px; }
.vc-aksi-po { margin-top: 8px; }
.vc-aksi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.vc-aksi-tombol { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; border: 1px solid #e3ebe9; background: #fff;
    color: #0f172a; font-size: 12.5px; font-weight: 600; line-height: 1.25; text-decoration: none; transition: border-color .15s, background .15s; }
.vc-aksi-tombol:hover { border-color: var(--vc-warna); background: color-mix(in srgb, var(--vc-warna) 8%, #fff); }
.vc-aksi-tombol .mud-icon-root { flex: none; font-size: 19px; color: var(--vc-warna); }
.vc-label span { min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--vc-warna); }
.vc-denyut { animation: vc-denyut .6s ease-out; }
@keyframes vc-denyut { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* Tokoh tim (pelaku kejadian) di miniatur: inisial berwarna + nama depan; menyala saat sedang mengerjakan kejadian. */
.vc-tokoh { pointer-events: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border-radius: 999px; font-size: 11px;
    font-weight: 600; color: #1f2937; background: rgba(255, 255, 255, .9); box-shadow: 0 3px 10px rgba(15, 23, 42, .15); white-space: nowrap;
    opacity: .78; transition: transform .25s, box-shadow .25s, opacity .25s; }
.vc-tokoh i { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal;
    font-size: 9.5px; font-weight: 700; color: #fff; background: var(--vc-warna); }
/* Menganggur: cukup lingkaran inisial (tokoh di pos yang sama tidak saling menutupi); nama muncul saat beraksi. */
.vc-tokoh:not(.vc-tokoh-sibuk) { padding-right: 2px; }
.vc-tokoh:not(.vc-tokoh-sibuk) span { display: none; }
.vc-tokoh-sibuk { opacity: 1; transform: translateY(-3px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vc-warna) 35%, transparent), 0 6px 14px rgba(15, 23, 42, .2); }
/* Label sopir di atas truk pengantar. */
.vc-kurir { pointer-events: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px;
    font-weight: 700; color: #fff; background: #0f766e; box-shadow: 0 3px 10px rgba(15, 23, 42, .25); white-space: nowrap; }
.vc-kurir i { width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; animation: alur-denyut 1.4s ease-out infinite; }
/* Label bangunan: baris angka utama (stok, saldo) dan status kondisi (cincin merah/amber + tanda seru). */
.vc-label em { font-style: normal; font-size: 11px; color: #64748b; }
.vc-label em:empty { display: none; }
/* Status berwarna bangunannya sendiri: Perhatian = cincin tipis berdenyut pelan, Masalah = cincin tebal berdenyut cepat. */
.vc-label-perhatian { animation: vc-status 2.4s ease-in-out infinite; }
.vc-label-masalah { animation: vc-status-kuat 1.1s ease-in-out infinite; }
@keyframes vc-status { 0%, 100% { box-shadow: 0 0 0 2px var(--vc-warna), 0 4px 12px rgba(15, 23, 42, .12); }
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vc-warna) 45%, transparent), 0 4px 12px rgba(15, 23, 42, .12); } }
@keyframes vc-status-kuat { 0%, 100% { box-shadow: 0 0 0 3px var(--vc-warna), 0 4px 14px color-mix(in srgb, var(--vc-warna) 45%, transparent); }
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--vc-warna) 40%, transparent), 0 4px 18px color-mix(in srgb, var(--vc-warna) 55%, transparent); } }
.vc-label-perhatian::after, .vc-label-masalah::after { content: "!"; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--vc-warna); }
@media (prefers-reduced-motion: reduce) { .vc-label-perhatian, .vc-label-masalah { animation: none; box-shadow: 0 0 0 3px var(--vc-warna); } }
/* Pelanggan: label bergaris putus-putus agar beda dari tim. */
.vc-tamu { pointer-events: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border-radius: 999px; font-size: 11px;
    font-weight: 600; color: #1f2937; background: rgba(255, 255, 255, .92); border: 1.5px dashed var(--vc-warna); white-space: nowrap; }
.vc-tamu i { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 9px;
    font-weight: 700; color: #fff; background: var(--vc-warna); }
/* Panel Kondisi toko di atas Aktivitas terbaru. */
.vc-kondisi { padding: 12px 12px 10px; border-bottom: 1px solid #edf2f1; }
.vc-kondisi-kepala { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 8px; }
.vc-kondisi-kepala b { font-size: 15px; color: #111827; }
.vc-kondisi-kepala span { font-size: 12.5px; color: #64748b; }
.vc-sehat, .vc-catatan { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; margin-top: 6px; border-radius: 10px; font-size: 12.5px;
    line-height: 1.45; text-decoration: none; }
.vc-sehat { color: #166534; background: #ecfdf3; }
.vc-sehat .mud-icon-root, .vc-catatan .mud-icon-root { flex: none; font-size: 18px; }
.vc-catatan b { color: inherit; }
.vc-catatan-masalah { color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }
.vc-catatan-perhatian { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.vc-catatan-baik { color: #0f766e; background: #ecf7f5; border: 1px solid #cfe7e2; }
a.vc-catatan:hover { filter: brightness(.97); }
/* Proyeksi: kartu kas 14 hari + barang yang segera habis. */
.vc-proyeksi-kas { display: grid; gap: 2px; padding: 10px 12px; margin-top: 6px; border-radius: 12px; background: linear-gradient(135deg, #ecf7f5, #f8fafc);
    border: 1px solid #cfe7e2; }
.vc-proyeksi-kas span { font-size: 12px; color: #64748b; }
.vc-proyeksi-kas b { font-size: 18px; color: #0f766e; font-variant-numeric: tabular-nums; }
.vc-proyeksi-kas small { font-size: 11.5px; color: #64748b; line-height: 1.4; }
.vc-proyeksi-kas.vc-proyeksi-minus { background: linear-gradient(135deg, #fef2f2, #fff7ed); border-color: #fecaca; }
.vc-proyeksi-kas.vc-proyeksi-minus b { color: #b91c1c; }
.vc-proyeksi-stok { display: flex; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px dashed #edf2f1; font-size: 12.5px; }
.vc-proyeksi-stok:last-child { border-bottom: 0; }
.vc-proyeksi-stok > span:last-child { display: grid; min-width: 0; }
.vc-proyeksi-stok b { color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-proyeksi-stok small { color: #64748b; font-size: 11.5px; }
.vc-proyeksi-hari { flex: none; min-width: 58px; padding: 3px 8px; border-radius: 999px; text-align: center; font-weight: 700; font-size: 11.5px;
    color: #0f766e; background: #ecf7f5; }
.vc-proyeksi-hari.vc-proyeksi-segera { color: #92400e; background: #fef3c7; }
.vc-atas { position: absolute; top: 12px; left: 12px; pointer-events: none; }
.vc-langsung.vc-mode-ulang { color: #b45309; border-color: #fde68a; }
.vc-langsung.vc-mode-ulang i { background: #f59e0b; }
/* Bilah putar ulang di atas miniatur. */
.vc-ulang { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; padding: 10px 14px; border-radius: 14px; background: #fff;
    border: 1px solid #e3ebe9; box-shadow: 0 6px 18px rgba(12, 36, 33, .05); }
.vc-ulang-tanggal { flex: 0 0 170px; }
.vc-ulang-jam { flex: none; min-width: 64px; font-size: 22px; font-weight: 700; color: #0f766e; font-variant-numeric: tabular-nums; }
.vc-ulang-geser { flex: 1 1 220px; min-width: 180px; }
.vc-ulang-cepat { flex: 0 0 170px; }
.vc-ulang-info { flex: none; font-size: 12.5px; color: #64748b; }
.vc-langsung { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #0f766e;
    background: rgba(255, 255, 255, .9); border: 1px solid #cfe7e2; }
.vc-langsung i { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; animation: alur-denyut 1.8s ease-out infinite; }
.vc-legenda { position: absolute; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.vc-legenda span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: #334155;
    background: rgba(255, 255, 255, .9); border: 1px solid #e2e8f0; }
.vc-legenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--w); border: 1px solid rgba(15, 23, 42, .15); }
.vc-petunjuk { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: #64748b;
    background: rgba(255, 255, 255, .85); pointer-events: none; }
.vc-tanpa3d { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px;
    text-align: center; color: #475569; }
.vc-tanpa3d .mud-icon-root { font-size: 44px; color: #0f766e; }
.vc-daftar { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 200px); border-radius: 18px; background: #fff;
    border: 1px solid #e3ebe9; box-shadow: 0 10px 30px rgba(12, 36, 33, .06); overflow: hidden; }
.vc-daftar-kepala { padding: 14px 16px 10px; border-bottom: 1px solid #edf2f1;
    background: linear-gradient(100deg, rgba(15, 118, 110, .10), rgba(15, 118, 110, 0) 75%), #fff; }
.vc-daftar-kepala b { display: block; font-size: 15px; color: #111827; }
.vc-daftar-kepala span { font-size: 12.5px; color: #64748b; }
.vc-baris { list-style: none; margin: 0; padding: 6px; overflow-y: auto; scrollbar-width: thin; }
.vc-baris li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 8px; border-radius: 12px; animation: vc-masuk .45s ease-out; }
.vc-baris li:hover { background: #f6faf9; }
@keyframes vc-masuk { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.vc-ikon { flex: 0 0 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.vc-ikon .mud-icon-root { font-size: 18px; }
.vc-muatan-barang { color: #92400e; background: #fbeee0; }
.vc-muatan-uang { color: #a16207; background: #fef3c7; }
.vc-muatan-dokumen { color: #334155; background: #eef2f6; }
.vc-batal .vc-ikon { color: #b91c1c; background: #fdecec; }
.vc-batal .vc-isi b { text-decoration: line-through; }
.vc-isi { flex: 1; min-width: 0; }
.vc-isi-atas { display: flex; justify-content: space-between; gap: 8px; }
.vc-isi b { font-size: 13.5px; color: #111827; }
.vc-isi time { flex: none; font-size: 11.5px; color: #94a3b8; }
.vc-isi > span { display: block; font-size: 12.5px; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-isi small { display: block; font-size: 11.5px; color: #94a3b8; }
.vc-pelaku { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; color: #64748b; }
.vc-pelaku .avatar { flex: 0 0 18px; width: 18px; height: 18px; font-size: 9px; }
.vc-buka { flex: none; align-self: center; font-size: 11px; font-weight: 600; color: #0f766e; text-decoration: none; padding: 3px 8px; border-radius: 8px;
    background: #ecf7f5; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-buka:hover { background: #d7efeb; }
.vc-buka-teks { color: #64748b; background: #f1f5f9; }
.vc-kosong { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 20px; text-align: center; color: #64748b; font-size: 13px; }
.vc-kosong .mud-icon-root { font-size: 36px; color: #94a3b8; }
.vc-kosong b { color: #334155; }
@media (max-width: 1100px) {
    .vc { grid-template-columns: minmax(0, 1fr); }
    .vc-panggung { height: 60vh; min-height: 380px; }
    .vc-daftar { max-height: none; }
    .vc-petunjuk { display: none; }
}