/* ============================================================
   Papan Bunga Manager — VibeCoder theme
   ============================================================ */
:root{
  --ink:#1F1B3A;
  --muted:#635F82;
  --accent:#4F46E5;
  --accent2:#8B5CF6;
  --line:rgba(99,95,130,.16);
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.82);
  --ok:#0F9D58;
  --warn:#C77700;
  --bad:#D93025;
  --radius:16px;
  --shadow:0 12px 32px rgba(79,70,229,.10), 0 2px 6px rgba(31,27,58,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);
  background:#F3F0FF;
  min-height:100vh;
  font-size:14.5px;
  line-height:1.5;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 520px at 8% -6%, rgba(139,92,246,.30), transparent 60%),
    radial-gradient(680px 480px at 100% 0%, rgba(56,189,248,.22), transparent 58%),
    radial-gradient(720px 620px at 60% 108%, rgba(236,72,153,.16), transparent 60%),
    linear-gradient(180deg,#F7F5FF 0%,#F3F0FF 55%,#EFEBFF 100%);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{
  width:262px;flex:0 0 262px;padding:22px 18px;display:flex;flex-direction:column;gap:22px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-right:1px solid rgba(255,255,255,.7);
  position:sticky;top:0;height:100vh;overflow:auto;z-index:30;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{
  width:44px;height:44px;flex:0 0 44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:20px;
  box-shadow:0 8px 18px rgba(79,70,229,.35)}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-text strong{font-size:14.5px;line-height:1.25}
.brand-text span{font-size:11.5px;color:var(--muted)}
/* Logo program hasil unggahan (halaman Program): gambar menggantikan ikon bunga di kotak logo. */
.brand-logo-img{background:rgba(255,255,255,.92);padding:0;overflow:hidden}
.brand-logo-img img{width:100%;height:100%;object-fit:contain;display:block;border-radius:inherit}
.nav{display:flex;flex-direction:column;gap:6px;flex:1}
.nav a{
  display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:12px;
  color:var(--muted);font-weight:500;transition:.18s;text-decoration:none}
.nav a:hover{background:rgba(255,255,255,.72);color:var(--ink);text-decoration:none}
.nav a.active{
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  box-shadow:0 8px 20px rgba(79,70,229,.28)}
.ic{width:18px;height:18px;flex:0 0 18px}
/* Nama pengguna & tombol Keluar sekarang di ATAS sidebar (di bawah logo toko),
   supaya selalu terlihat tanpa perlu menggulir menu. */
.sidebar-user{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--glass-strong);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.sidebar-user .btn{flex:0 0 auto}
/* Blok nama user = tautan ke halaman Profil (permintaan pemilik). Avatar memakai foto profil
   bila ada, kalau belum inisial nama dalam lingkaran gradien. */
.sidebar-user .who{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;
  color:var(--ink);text-decoration:none;border-radius:10px;transition:.18s}
.sidebar-user .who:hover{color:var(--accent);text-decoration:none}
.sidebar-user .who:hover strong{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}
.who-ava{width:34px;height:34px;flex:0 0 34px;border-radius:50%;object-fit:cover;display:block;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:700;font-size:14px;
  box-shadow:0 6px 14px rgba(79,70,229,.28)}
.who-ava-inisial{display:grid;place-items:center}
.who-teks{display:flex;flex-direction:column;min-width:0}
.who-teks strong{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-teks span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Halaman Profil: dua foto (profil & KTP) berdampingan dengan pratinjau besar. */
.profil-foto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.profil-foto{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:16px;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85)}
.profil-foto-bingkai{width:100%;border-radius:14px;overflow:hidden;background:rgba(99,95,130,.1);
  border:1px solid var(--line);display:grid;place-items:center;min-height:150px}
.profil-foto-bingkai img{width:100%;max-height:240px;object-fit:contain;display:block}
.profil-foto-bingkai span{font-size:12.5px;color:var(--muted);padding:16px;text-align:center}
.profil-kepala{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.profil-ava-besar{width:76px;height:76px;flex:0 0 76px;border-radius:50%;object-fit:cover;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:700;font-size:28px;
  box-shadow:0 10px 22px rgba(79,70,229,.3)}
.profil-kunci{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;
  background:rgba(99,95,130,.08);border:1px dashed rgba(99,95,130,.28);font-size:12.5px;color:var(--muted)}
/* Halaman Program: pratinjau logo program. */
.program-logo-bingkai{width:100%;max-width:230px;aspect-ratio:1/1;border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,.9);border:1px solid var(--line);display:grid;place-items:center}
.program-logo-bingkai img{width:100%;height:100%;object-fit:contain;display:block}
.program-logo-bingkai span{font-size:44px;color:var(--accent)}
@media (max-width: 520px){
  .profil-foto-grid{grid-template-columns:minmax(0,1fr)}
  .profil-ava-besar{width:64px;height:64px;flex:0 0 64px;font-size:24px}
}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:14px;padding:22px 30px 6px}
.topbar h1{font-size:22px}
.topbar .sub{margin:2px 0 0;color:var(--muted);font-size:13px}
.menu-toggle{display:none;background:var(--glass-strong);border:1px solid var(--line);border-radius:12px;
  font-size:18px;line-height:1;padding:9px 12px;cursor:pointer;color:var(--ink)}
.content{padding:22px 30px 60px;display:flex;flex-direction:column;gap:26px;max-width:1320px;width:100%}
.overlay{display:none}

/* ---------- Card & grid ---------- */
.card{
  background:var(--glass);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.75);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;
}
.card.pad-0{padding:0;overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.card-head h2{font-size:16.5px}
.card-head p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.grid{display:grid;gap:20px}
.grid > *{min-width:0}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Dashboard: 5 kartu ringkasan (Penjualan, Pengeluaran, Laba/Selisih, Piutang, Absensi). */
.grid.stats-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid.span-2{grid-column:span 2}

.stat{display:flex;flex-direction:column;gap:8px}
.stat-label{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.stat-value{font-size:23px;font-weight:700;letter-spacing:-.02em}
.stat-value.sm{font-size:18px}
.stat-hint{font-size:12px;color:var(--muted)}
.stat.accent{background:linear-gradient(135deg,rgba(79,70,229,.96),rgba(139,92,246,.94));color:#fff;border-color:rgba(255,255,255,.35)}
.stat.accent .stat-label,.stat.accent .stat-hint{color:rgba(255,255,255,.85)}
.trend-up{color:var(--ok);font-weight:600}
.trend-bad{color:var(--bad);font-weight:600}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:10px 16px;border-radius:12px;border:1px solid transparent;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  box-shadow:0 8px 18px rgba(79,70,229,.26);transition:.18s}
.btn:hover{filter:brightness(1.06);text-decoration:none;color:#fff}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:rgba(255,255,255,.75);color:var(--ink);border-color:var(--line);box-shadow:none}
.btn-ghost:hover{background:#fff;color:var(--ink)}
.btn-danger{background:linear-gradient(135deg,#EF4444,#D93025);box-shadow:0 8px 18px rgba(217,48,37,.24)}
.btn-ok{background:linear-gradient(135deg,#10B981,#059669);box-shadow:0 8px 18px rgba(5,150,105,.24)}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:10px}
.btn-block{width:100%}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border-radius:14px}
/* Tujuan gulir tombol aksi tabel ("Ambil Sekarang" / "Ubah jadi"): setelah halaman
   dialihkan ke #tabel-…, tabelnya berhenti sedikit di bawah tepi atas layar
   supaya judul kolomnya tidak menempel/tertutup. */
#tabel-nota,#tabel-agenda,#tabel-new,#tabel-pending,#tabel-standby{scroll-margin-top:88px}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  padding:12px 14px;background:rgba(255,255,255,.6);border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl th.kol-no{width:42px}
/* Kolom checklist (hapus baris satu per satu di menu Database) */
table.tbl th.kol-pilih,table.tbl td.kol-pilih{width:34px;text-align:center;padding-left:8px;padding-right:8px}
table.tbl td.kol-pilih input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}
/* Judul kolom yang bisa diklik untuk sort by (halaman Penjualan) */
table.tbl th a.th-sort{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:3px;
  border-radius:6px;transition:color .15s ease}
table.tbl th a.th-sort:hover,table.tbl th a.th-sort:focus-visible{color:var(--accent);text-decoration:underline}
table.tbl th a.th-sort.aktif{color:var(--accent);font-weight:700}
/* Tanggal acara di bawah Nomor Invoice (halaman Antrian) bisa diklik untuk sort by Tgl Acara */
a.tgl-sort{text-decoration:none;border-bottom:1px dashed rgba(99,95,130,.45);transition:color .15s ease}
a.tgl-sort:hover,a.tgl-sort:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}
/* Tabel yang judul kolomnya boleh turun baris — dipakai halaman Pelanggan supaya seluruh
   kolom muat di layar laptop (permintaan pemilik: "Tampilan Tabel yang di tampilkan
   Terpotong (versi Laptop)"). Tanpa ini min-width tabel ~1050 px, sedangkan isi kartu di
   layar 1280–1366 px hanya ~960–1040 px sehingga kolom terakhir terpotong. */
table.tbl.tbl-kepala-lipat th{white-space:normal}
table.tbl td{padding:12px 14px;border-bottom:1px solid rgba(99,95,130,.09);vertical-align:middle}
table.tbl tbody tr:hover{background:rgba(255,255,255,.5)}
table.tbl tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Baris judul kelompok pada tabel Agenda (sort by group lokasi). */
table.tbl tbody tr.grup-head td{background:rgba(79,70,229,.07);color:#3b32c9;font-weight:700;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;padding:9px 14px}
table.tbl tbody tr.grup-head td .muted{font-weight:600;text-transform:none;letter-spacing:0}
/* Subtotal kelompok piutang per pelanggan (rata kanan di baris judul kelompok). */
table.tbl tbody tr.grup-head td .grup-total{float:right;text-transform:none;letter-spacing:0;color:#1F1B3A}
/* Tombol "Cetak Detail" di baris judul kelompok piutang (mencetak 1 pelanggan saja). */
table.tbl tbody tr.grup-head td .grup-aksi{float:right;text-transform:none;letter-spacing:0;margin-left:14px}
table.tbl tbody tr.grup-head td .grup-aksi .btn{font-size:11.5px;padding:4px 10px;border-radius:9px}
table.tbl tbody tr.grup-head td .badge{text-transform:none;letter-spacing:0;margin-left:6px;vertical-align:middle}
/* Warna per Group Lokasi di halaman Agenda (permintaan pemilik: "Tabel per Lokasi di bedain warna").
   Variabel --grup-row / --grup-row-hover diisi inline per baris dari palet warna group. */
table.tbl tbody tr.baris-lokasi td{background:var(--grup-row,transparent)}
table.tbl tbody tr.baris-lokasi:hover td{background:var(--grup-row-hover,var(--grup-row,transparent))}
/* Catatan: sel nomor (td.td-warna) memakai inline style warna jenis papan, jadi warnanya
   tidak tertimpa latar group di atas (inline style selalu menang atas aturan kelas). */

/* Kartu & tabel per status pesanan di menu List Pending (permintaan pemilik:
   "Tabel per Status di bedain warna"). PENDING = kuning/oranye, STANDBY = biru, NEW = ungu. */
.kartu-status{position:relative;border-left:5px solid var(--status-warna)}
.kartu-status::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--status-warna)}
.kartu-status table.tbl thead th{background:var(--status-latar);color:var(--status-teks);border-bottom-color:var(--status-garis)}
.kartu-status table.tbl tfoot td{background:var(--status-latar)}
.kartu-status table.tbl tbody tr:hover td{background:rgba(255,255,255,.55)}
.kartu-status-pending{--status-warna:#C77700;--status-latar:rgba(245,158,11,.13);--status-teks:#8a5306;--status-garis:rgba(245,158,11,.35)}
.kartu-status-standby{--status-warna:#0A6C9A;--status-latar:rgba(14,165,233,.12);--status-teks:#0a6c9a;--status-garis:rgba(14,165,233,.32)}
.kartu-status-new{--status-warna:#6D28D9;--status-latar:rgba(139,92,246,.13);--status-teks:#6d28d9;--status-garis:rgba(139,92,246,.32)}
tfoot td{font-weight:700;background:rgba(255,255,255,.55)}
.tbl-actions{display:flex;gap:6px;flex-wrap:wrap}
/* Form tarif lembur per baris di halaman Lembur (input + tombol Simpan sebaris). */
form.lembur-tarif{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
form.lembur-tarif .lembur-tarif-input{width:96px;min-width:80px;padding:6px 8px;font-size:12.5px;border-radius:9px;height:auto}
@media (max-width:520px){
  form.lembur-tarif{width:100%}
  form.lembur-tarif .lembur-tarif-input{flex:1 1 auto;width:auto}
}
/* Kolom nomor di daftar penjualan diwarnai sesuai jenis papan (Papan Hitam, Merah, Kayu, …). */
table.tbl td.td-warna{width:52px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
/* Ringkasan di ATAS tabel Penjualan: total penjualan / belum bayar / sudah bayar + rekap papan. */
.nota-ringkas{margin-top:18px;padding:0 22px}
.ringkas-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ringkas-stat{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:14px;
  background:rgba(255,255,255,.62);border:1px solid var(--line)}
.ringkas-stat .stat-value{font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ringkas-stat.belum .stat-value{color:#a01f16}
.ringkas-stat.sudah .stat-value{color:#05704f}
.ringkas-papan{margin-top:14px;padding:12px 16px;border-radius:14px;
  background:rgba(79,70,229,.05);border:1px solid var(--line)}
/* Rekap "Jumlah Papan" + titik warna jenis papan (warnanya sama dengan kolom nomor). */
.papan-rekap{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.papan-rekap-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-right:2px}
.papan-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.75);border:1px solid var(--line);font-size:12px;font-weight:600;white-space:nowrap}
.papan-pill i{width:10px;height:10px;border-radius:3px;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.papan-pill b{font-variant-numeric:tabular-nums}
.papan-total{background:linear-gradient(135deg,#4f46e5,#8b5cf6);border-color:transparent;color:#fff}

/* Dashboard — rincian jumlah papan per jenis (kartu Penjualan & kartu Rincian Stok Barang).
   Tulisan nama papan memakai warna papannya sendiri (warna terang digelapkan supaya terbaca),
   sedangkan label status memakai warna status masing-masing. */
.papan-rincian{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.stok-baris .papan-rincian{margin-top:0}
.papan-mini{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid var(--line);font-size:11.5px;font-weight:600;white-space:nowrap}
.papan-mini i{width:9px;height:9px;border-radius:2px;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.papan-mini b{font-variant-numeric:tabular-nums}
.stok-list{display:flex;flex-direction:column}
.stok-baris{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 0;
  border-top:1px dashed rgba(31,27,58,.14)}
.stok-baris:first-child{border-top:0;padding-top:4px}
.stok-judul{min-width:150px;font-weight:700;font-size:13px;letter-spacing:-.01em}
.stok-angka{min-width:52px;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stok-semua .stok-judul,.stok-semua .stok-angka{color:#4f46e5}
.stok-tersedia{border-bottom:1px solid rgba(31,27,58,.22);padding-bottom:12px}
.stok-tersedia .stok-judul,.stok-tersedia .stok-angka{color:#0f766e}
.stok-tersedia .stok-angka{font-size:19px}
/* Satu baris per jenis papan: nama & angkanya diwarnai warna papannya (inline style dari PHP). */
.stok-jenis .stok-judul{display:inline-flex;align-items:center;gap:7px}
.stok-titik{width:10px;height:10px;border-radius:3px;display:inline-block;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
/* Label status di rincian stok: Online hijau, Pending oranye, Standby biru. */
.papan-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.status-mini{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.status-mini b{font-variant-numeric:tabular-nums}
.status-online{color:#05704f;background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.25)}
.status-pending{color:#8a5306;background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.28)}
.status-standby{color:#0a6c9a;background:rgba(14,165,233,.14);border-color:rgba(14,165,233,.25)}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600}
.badge-ok{background:rgba(16,185,129,.14);color:#05704f}
.badge-warn{background:rgba(245,158,11,.16);color:#92560a}
.badge-bad{background:rgba(217,48,37,.13);color:#a01f16}
.badge-info{background:rgba(79,70,229,.13);color:#3b32c9}
.badge-muted{background:rgba(99,95,130,.12);color:var(--muted)}
/* Badge yang bisa diklik (mis. "Belum Bayar" di kolom STATUS menuju bagian Pembayaran). */
a.badge:hover{text-decoration:none;filter:brightness(.96);box-shadow:0 0 0 1px rgba(79,70,229,.25) inset}
a.badge.badge-bad{color:#a01f16}

/* ---------- Forms ---------- */
.form-grid{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%}
.field.span-2{grid-column:span 2}
.field.span-3{grid-column:span 3}
.field.span-4{grid-column:span 4}
.field label{font-size:12.5px;font-weight:600;color:var(--muted)}
.field .hint{font-size:11.5px;color:var(--muted)}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],input[type=tel],input[type=search],select,textarea{
  width:100%;max-width:100%;padding:10px 12px;border-radius:11px;border:1px solid var(--line);
  background:rgba(255,255,255,.8);font-family:inherit;font-size:13.5px;color:var(--ink);transition:.16s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79,70,229,.15);background:#fff}
textarea{min-height:78px;resize:vertical}
/* Field wajib yang belum diisi (mis. Nama Pengirim di form nota) — disorot merah muda
   saat tombol Save diklik, lihat assets/app.js + nota_form.php. */
input.input-salah,select.input-salah,textarea.input-salah{
  background:#fde2ea!important;border-color:#e07a9c!important;color:#7d1030}
input.input-salah:focus,select.input-salah:focus,textarea.input-salah:focus{
  box-shadow:0 0 0 3px rgba(224,122,156,.28)!important}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Kolom kata sandi dengan ikon MATA (permintaan pemilik: "gambar mata di password
   utk bisa lihat password yang di isi"). Diklik = tampilkan / sembunyikan isi.
   Markup: bungkus input dengan class .sandi-bungkus lalu tambahkan tombol dari
   helper tombol_mata_sandi() (inc/helpers.php).
   Logika klik: assets/app.js (blok "Ikon mata"). */
.sandi-bungkus{position:relative;display:block}
.sandi-bungkus input{padding-right:44px}
.sandi-mata{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;transition:.15s}
.sandi-mata:hover{background:rgba(79,70,229,.10);color:var(--accent)}
.sandi-mata:focus-visible{outline:2px solid rgba(79,70,229,.55);outline-offset:1px}
.sandi-mata svg{width:18px;height:18px;display:block;pointer-events:none}
.sandi-mata .mata-tutup{display:none}
.sandi-bungkus.terlihat .sandi-mata{color:var(--accent)}
.sandi-bungkus.terlihat .sandi-mata .mata-buka{display:none}
.sandi-bungkus.terlihat .sandi-mata .mata-tutup{display:block}

/* Baris centang "Ingat password saya di perangkat ini" di halaman masuk. */
.ingat-cek{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink);cursor:pointer;margin:-4px 0 0}
.ingat-cek input[type=checkbox]{width:16px;height:16px;flex:0 0 auto;margin:0;accent-color:var(--accent);cursor:pointer}
.ingat-cek span{line-height:1.35}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.toolbar .field{min-width:150px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--muted)}
.chip.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
/* Titik warna jenis papan di dalam chip "Jenis Papan" (halaman Penjualan). */
.chip .chip-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;
  vertical-align:middle;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none}

/* ---------- Alerts ---------- */
.alert{padding:12px 16px;border-radius:13px;font-size:13.5px;font-weight:500}
.alert-ok{background:rgba(16,185,129,.13);color:#046c4b;border:1px solid rgba(16,185,129,.25)}
.alert-error{background:rgba(217,48,37,.11);color:#9c1d14;border:1px solid rgba(217,48,37,.22)}
.alert-info{background:rgba(79,70,229,.10);color:#3a31b8;border:1px solid rgba(79,70,229,.2)}
.alert-warn{background:rgba(245,158,11,.14);color:#8a5309;border:1px solid rgba(245,158,11,.25)}

/* ---------- Bar chart sederhana ---------- */
.bars{display:flex;align-items:flex-end;gap:10px;height:180px;padding-top:8px}
.bars .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;min-width:0}
.bars .bar .fill{width:100%;max-width:46px;border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg,var(--accent2),var(--accent));min-height:3px;transition:.2s}
.bars .bar .cap{font-size:10.5px;color:var(--muted);white-space:nowrap}
.bars .bar .val{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.list-plain{display:flex;flex-direction:column;gap:12px}
.list-item{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 15px;border-radius:13px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.7)}
.list-item .li-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.list-item strong{font-size:13.5px}
.list-item span{font-size:12px;color:var(--muted)}
.empty{padding:26px;text-align:center;color:var(--muted);font-size:13.5px}
.muted{color:var(--muted)}
.mono{font-variant-numeric:tabular-nums}
.divider{height:1px;background:var(--line);margin:4px 0}
.nowrap{white-space:nowrap}
.right{text-align:right}
/* Nominal & Total di form nota di tengah (permintaan pemilik:
   "Nominal, Total dan Total di bawah: Alignmentnya Center aja"). */
.center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}

/* ---------- Halaman item nota (form) ---------- */
.item-row{display:grid;grid-template-columns:2.6fr .6fr 1.2fr 1fr auto;gap:10px;align-items:center;
  padding:10px;border-radius:12px;background:rgba(255,255,255,.5);margin-bottom:10px}
.item-row .row-total{font-size:12.5px;font-weight:700;text-align:center}
.icon-btn{border:none;background:rgba(217,48,37,.12);color:#a01f16;border-radius:10px;
  width:34px;height:34px;cursor:pointer;font-size:16px;line-height:1}
.totals-box{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:14px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.8)}
/* Nilai uang di Ringkasan ("Total di bawah") dibuat rata tengah dalam kolom lebarnya
   sendiri, bukan menempel di tepi kanan. */
/* Ringkasan uang: ANGKA-nya benar-benar di tengah kartu (permintaan pemilik:
   "Angka Nominal Harga dan Total belum center allignment"). Kolom 1fr–nilai–1fr membuat
   pusat angka tepat di tengah kartu, label tetap rapi rata kanan di sebelahnya. */
.totals-box .row{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:baseline;font-size:13.5px}
.totals-box .row > span:first-child{text-align:right}
.totals-box .row > b,.totals-box .row > span:last-child{grid-column:2;text-align:center;white-space:nowrap}
.totals-box .row.grand{font-size:16px;font-weight:700;padding-top:10px;border-top:1px dashed var(--line)}
/* Baris "Contoh Perhitungan" di Pengaturan berisi kalimat panjang (durasi kerja + lembur −
   potongan), jadi nilainya BOLEH turun baris — jangan memakai nowrap seperti baris uang di
   Ringkasan (dulu itu yang membuat kartu ini melebar keluar layar HP). */
.totals-box .row.contoh-lembur{grid-template-columns:max-content minmax(0,1fr);gap:8px 12px}
.totals-box .row.contoh-lembur > span:first-child{text-align:left;white-space:nowrap}
.totals-box .row.contoh-lembur > b{grid-column:2;text-align:left;white-space:normal;font-weight:600}
/* Baris berisi TEKS PANJANG (nama toko / alamat di halaman Program): nilainya boleh turun
   baris — kalau ikut nowrap seperti baris uang, kartunya melebar keluar layar HP. */
.totals-box .row.baris-teks{grid-template-columns:max-content minmax(0,1fr);gap:8px 12px}
.totals-box .row.baris-teks > span:first-child{text-align:left;white-space:nowrap}
.totals-box .row.baris-teks > b{grid-column:2;text-align:left;white-space:normal;font-weight:600;word-break:break-word}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:100%;max-width:400px;padding:32px;display:flex;flex-direction:column;gap:20px}
.login-card .brand-logo{width:52px;height:52px;flex:0 0 52px;font-size:24px;border-radius:16px;margin:0 auto}
.login-card h1{font-size:20px;text-align:center}
.login-card p.sub{text-align:center;color:var(--muted);margin:0;font-size:13px}

/* ============================================================
   NOTA CETAK — KWITANSI A5 (permintaan pemilik, mengikuti lampiran):
   kepala toko di kiri + "Tanggal" di kanan, judul KWITANSI di tengah,
   kotak "Kepada" di kanan, No. Nota, lalu tabel
   Banyaknya / Nama Acara / Harga / Jumlah, baris rekening + Jumlah,
   dan "Hormat Kami" + tanda tangan di kanan bawah.
   Blok tambahan (info pengiriman, ucapan, DP & sisa) disembunyikan tapi
   bisa dimunculkan lewat kartu "Tampilan Nota Cetak" di nota_cetak.php.
   Ukuran: A5 mendatar (210 x 148 mm) — bisa diubah ke tegak lewat
   pilihan "Orientasi Kertas" (kelas .kwit-portrait + @page di halaman).
   ============================================================ */
.nota-page{display:flex;flex-direction:column;align-items:center;gap:18px;overflow-x:auto;max-width:100%;padding-bottom:6px}
.kwit-sheet{
  width:210mm;min-height:148mm;background:#fff;color:#111;padding:9mm 10mm;
  box-shadow:0 14px 40px rgba(31,27,58,.18);border-radius:8px;
  font-size:11px;line-height:1.4;display:flex;flex-direction:column;gap:3.5mm}
.kwit-sheet.kwit-portrait{width:148mm;min-height:210mm;font-size:10px;padding:8mm}
/* Ukuran lembar DI LAYAR = ukuran lembar saat dicetak (A5, separuh kertas A4),
   berapa pun pilihan "Ukuran Kertas" — jadi pratinjau sama dengan hasil cetak.
   Penempatannya di kertas A4 (separuh atas / separuh kiri) diatur oleh aturan
   @page di nota_cetak.php. */
/* --- kepala: identitas toko (kiri) & tanggal (kanan) --- */
.kwit-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8mm}
.kwit-brand{min-width:0}
.kwit-logo{font-size:19pt;font-weight:800;letter-spacing:.01em;line-height:1;white-space:nowrap}
.kwit-logo .de{color:#2E9E4F}
.kwit-logo .fl{color:#5A3A2E}
/* Logo gambar di kepala kwitansi (menggantikan teks judul bila diunggah).
   Tinggi maksimal 14 mm supaya kepala kwitansi tetap ringkas. */
.kwit-logo-img{line-height:0}
.kwit-logo-img img{max-height:14mm;max-width:64mm;object-fit:contain;display:block}
.kwit-web{font-size:8pt;color:#2E9E4F;font-weight:700;margin-top:1.5mm}
.kwit-addr{font-size:8.5pt;color:#222;line-height:1.35;margin-top:1.5mm}
.kwit-tanggal{font-size:10pt;font-weight:700;white-space:nowrap;padding-top:1mm}
/* --- baris judul KWITANSI + kotak Kepada --- */
.kwit-mid{display:flex;align-items:center;gap:6mm}
.kwit-judul{flex:1;text-align:center;font-family:Georgia,'Times New Roman',serif;
  font-size:24pt;font-weight:700;letter-spacing:.02em;text-transform:uppercase;line-height:1;padding-left:0}
.kwit-kepada{border:2px solid #111;padding:2mm 3mm;min-width:62mm;min-height:14mm;
  display:flex;flex-direction:column;justify-content:center;font-size:10pt;line-height:1.35}
.kwit-kepada .nama{font-weight:700;font-size:10.5pt}
.kwit-nonota{font-size:10.5pt;font-weight:700}
/* --- tabel rincian: Banyaknya / Nama Acara / Harga / Jumlah --- */
table.kwit-tbl{width:100%;border-collapse:collapse;font-size:10.5pt}
table.kwit-tbl th,table.kwit-tbl td{border:1px solid #111;padding:1.8mm 2.2mm;vertical-align:top}
table.kwit-tbl th{text-align:center;font-weight:700;background:#fff}
table.kwit-tbl td.banyak{text-align:center;width:22mm;white-space:nowrap}
/* Nominal (Harga & Jumlah) rata TENGAH — permintaan pemilik: "Kolom Nominal yang
   150rb saat cetak Nota ini saja di buat allignment center". Berlaku juga untuk
   baris Total Harga Jual dan sel total di bawah (kolom yang sama). */
table.kwit-tbl td.harga,table.kwit-tbl td.jumlah{text-align:center;width:26mm;
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.kwit-tbl tr.isi td{height:16mm}
table.kwit-tbl tr.isi:first-child td{height:20mm}
table.kwit-tbl td.rek{font-style:italic;font-size:9.5pt;line-height:1.35}
table.kwit-tbl td.rek b{font-style:normal}
table.kwit-tbl td.lbl-jumlah{text-align:center;font-weight:700}
table.kwit-tbl td.total{text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
/* --- penutup: Hormat Kami + stempel & tanda tangan (tengah blok) ---
   `margin-top` sengaja TETAP (bukan `auto`): permintaan pemilik, stempel harus
   menempel tepat di bawah tulisan "Hormat Kami", bukan terdorong ke dasar
   halaman. Dengan cara ini sisa ruang kosong (kalau isi nota pendek) ada di
   bawah blok tanda tangan, bukan menyebar di antaranya. */
.kwit-foot{margin-top:4mm;display:flex;justify-content:flex-end;align-items:flex-end;gap:6mm}
.kwit-sign{text-align:center;font-size:10pt;min-width:66mm}
.kwit-sign .nama-ttd{margin-top:2mm;font-weight:700}
/* Kotak stempel & tanda tangan: dua-duanya DI TENGAH, tepat di bawah
   tulisan "Hormat Kami" (permintaan pemilik: stempel kurang besar &
   kurang ke kanan). Stempel dibuat besar (maks 52 x 22 mm). */
.kwit-ttd-box{position:relative;height:22mm;margin:1mm auto 0}
.kwit-ttd-box img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  object-fit:contain;display:block}
.kwit-ttd-box img.stempel{max-height:22mm;max-width:52mm;opacity:.92}
.kwit-ttd-box img.ttd{max-height:20mm;max-width:46mm;z-index:2}
.kwit-sign img{max-height:20mm;max-width:52mm;object-fit:contain;display:block;margin:1mm auto 0}
.kwit-sign .garis{border-top:1px solid #666;padding-top:1mm;font-size:9pt;min-width:46mm}
.kwit-ttd-box .garis{position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
/* --- blok opsional (dimunculkan lewat centang di halaman cetak) --- */
.kwit-opsi{border:1px dashed #999;border-radius:3mm;padding:1.8mm 2.5mm;font-size:9pt}
.kwit-opsi b{display:block;font-size:8pt;text-transform:uppercase;letter-spacing:.05em;color:#555;margin-bottom:1mm}
.kwit-opsi-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1mm 6mm;font-size:9.5pt}
.kwit-opsi-grid div span{color:#555}
.kwit-stamp{display:inline-block;padding:1mm 3mm;border:1px solid #999;border-radius:1mm;font-size:9pt;font-weight:700}
.kwit-stamp.lunas{border-color:#0F9D58;color:#0F9D58}
.kwit-stamp.belum{border-color:#D93025;color:#D93025}
.kwit-bayar{display:flex;gap:6mm;justify-content:flex-end;font-size:9.5pt}

@media print{
  /* Kwitansi dicetak di kertas A4 (bawaan) dengan lembar hanya setengah halaman.
     Aturan ukuran kertas (@page) dan ukuran lembar yang presisi ada di
     nota_cetak.php (dimasukkan ke <head>), karena aturan di sini masih bisa
     kalah urutan. Yang di sini hanya jaring pengaman supaya kerangka halaman
     tidak ikut tercetak. */
  html,body{background:#fff!important;margin:0!important;padding:0!important}
  body::before{display:none!important}
  .app{display:block;min-height:0}
  .sidebar,.topbar,.no-print,.overlay{display:none!important}
  .main,.content{display:block!important;padding:0!important;margin:0!important;gap:0!important;max-width:none!important}
  .card{background:#fff!important;box-shadow:none!important;border:none!important;backdrop-filter:none!important;padding:0!important}
  .nota-page{display:block;gap:0;overflow:visible;padding:0;max-width:none}
  /* Jangan memakai width:auto/min-height:auto di sini: lembar jadi hanya
     sepanjang isinya (dulu itu yang membuat hasil cetak tidak penuh).
     Ukuran lembar yang presisi + aturan @page ada di nota_cetak.php (dimasukkan
     ke <head>), karena aturan di sini masih bisa kalah urutan. */
  .kwit-sheet{box-shadow:none;border-radius:0;
    page-break-after:always;break-after:page}
  .kwit-sheet:last-child{page-break-after:auto;break-after:auto}
}

/* ---------- Thumbnail & unggah gambar ---------- */
.thumb-mini{width:40px;height:40px;flex:0 0 40px;border-radius:10px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(139,92,246,.18));color:var(--accent);
  border:1px solid rgba(255,255,255,.8);font-size:16px;text-decoration:none}
.thumb-mini img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-mini.kosong{font-size:15px;opacity:.75}
.thumb-besar{width:82px;height:82px;flex:0 0 82px;border-radius:14px;font-size:26px}
/* Keterangan pengeluaran + thumbnail foto kwitansi sebaris di tabel */
.ket-foto{display:flex;align-items:center;gap:10px}
.ket-foto>span{min-width:0}
.ket-foto .thumb-mini{width:34px;height:34px;flex:0 0 34px;border-radius:9px}
.unggah-bar{display:flex;gap:14px;align-items:flex-start}
.unggah-bar input[type=file]{width:100%;padding:9px 11px;border-radius:11px;border:1px dashed rgba(99,95,130,.42);
  background:rgba(255,255,255,.72);font-family:inherit;font-size:12.5px;color:var(--muted)}
.unggah-bar input[type=file]::file-selector-button{margin-right:10px;padding:7px 12px;border:none;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-family:inherit;font-weight:600;font-size:12.5px;cursor:pointer}
.cek-inline{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);cursor:pointer;font-weight:500}
.cek-inline input{width:auto}
/* Pilihan kolom pada halaman cetak piutang (permintaan pemilik: kolom bisa dipilih satu per satu). */
.cetak-kolom{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(99,95,130,.16);background:rgba(255,255,255,.6)}
.cetak-kolom .cek-inline{font-size:12.5px}
@media (max-width:520px){.cetak-kolom{gap:8px 14px}}
.pilih-bar{display:flex;gap:8px;align-items:center}
.pilih-bar select{flex:1;min-width:0}
.stok-hint{font-size:11.5px;color:var(--muted)}
.stok-hint.kurang{color:var(--bad);font-weight:600}
.produk-pilih{display:flex;gap:10px;align-items:center}
.produk-pilih .thumb-mini{width:44px;height:44px;flex:0 0 44px}

/* ---------- Foto pesanan (foto rangkai & foto lokasi) ---------- */
.unggah-foto-bar{display:grid;grid-template-columns:200px minmax(0,1fr) 220px auto;gap:16px;align-items:end;
  padding:16px;border-radius:15px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8)}
.unggah-foto-bar .field{gap:5px}
.unggah-foto-bar input[type=file]{width:100%;padding:9px 11px;border-radius:11px;border:1px dashed rgba(99,95,130,.42);
  background:rgba(255,255,255,.72);font-family:inherit;font-size:12.5px;color:var(--muted)}
.unggah-foto-bar input[type=file]::file-selector-button{margin-right:10px;padding:7px 12px;border:none;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-family:inherit;font-weight:600;font-size:12.5px;cursor:pointer}
.foto-blok{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.foto-judul{margin:0;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink);text-transform:uppercase}
.foto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.foto-item{margin:0;border-radius:15px;overflow:hidden;background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 6px 18px rgba(31,27,58,.07);display:flex;flex-direction:column}
.foto-item a{display:block;line-height:0}
.foto-item img{width:100%;height:132px;object-fit:cover;display:block;background:rgba(99,95,130,.1)}
.foto-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;
  font-size:11.5px;color:var(--muted);line-height:1.35}
.foto-meta span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.foto-meta form{margin:0;flex:0 0 auto}
.foto-meta .btn{padding:5px 10px;font-size:11.5px}
@media (max-width: 860px){
  .unggah-foto-bar{grid-template-columns:minmax(0,1fr)}
  .foto-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

/* ---------- Absen selfie & jendela kamera (halaman Absensi) ---------- */
.selfie-kotak{display:flex;flex-direction:column;gap:6px;padding:9px 10px;border-radius:12px;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.8);min-width:0;width:100%}
.selfie-baris{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.selfie-pilih{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--accent);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;position:relative}
/* input berkas disembunyikan secara visual (label tetap membuka pemilih berkas),
   supaya baris tombol tetap ringkas di layar HP maupun desktop */
.selfie-pilih input{position:absolute;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none}
.selfie-pratinjau{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);min-width:0}
.selfie-pratinjau img{width:38px;height:38px;flex:0 0 38px;border-radius:9px;object-fit:cover;
  border:1px solid rgba(255,255,255,.9)}
.selfie-pratinjau .btn{padding:4px 9px;font-size:11px}
.selfie-thumb{display:flex;gap:6px;margin-bottom:3px}
.selfie-thumb .thumb-mini{width:34px;height:34px;flex:0 0 34px;border-radius:9px}
.absen-cepat .list-item{align-items:flex-start;flex-wrap:wrap;row-gap:10px}
.absen-cepat .list-item .li-main{flex:1 1 240px}
/* Tombol absen + kotak foto dibuat SATU BARIS supaya daftar karyawan tetap ringkas:
   [Ambil Foto Selfie] [pilih foto] [mini thumbnail] [Absen Masuk] */
.absen-cepat .list-item .form-actions{flex-direction:column;align-items:stretch;gap:8px;flex:0 1 470px}
.absen-cepat .list-item .form-actions form{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.absen-cepat .selfie-kotak{flex-direction:row;align-items:center;gap:8px;width:auto;padding:5px 8px;flex:0 1 auto}
.absen-cepat .selfie-pratinjau{flex:0 1 auto;max-width:170px;white-space:nowrap}
/* teks "siap dikirim" disembunyikan di baris ringkas — cukup thumbnail + tombol Hapus */
.absen-cepat .selfie-pratinjau>span{display:none}
.absen-cepat .selfie-pratinjau img{width:30px;height:30px;flex:0 0 30px}
.absen-cepat .selfie-pratinjau .btn{padding:3px 7px;font-size:10.5px}
.modal-selfie{max-width:460px}
.selfie-kamera{position:relative;border-radius:14px;overflow:hidden;background:#14111f;aspect-ratio:4/3;
  display:grid;place-items:center}
.selfie-kamera video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}
.selfie-kamera-info{position:absolute;left:0;right:0;bottom:0;margin:0;padding:7px 10px;
  font-size:11.5px;line-height:1.35;color:#fff;background:rgba(20,17,31,.62)}
@media (max-width:520px){
  .absen-cepat .list-item .form-actions{min-width:0}
}

/* ---------- Blok "Kemarin" di kartu Absen Saya Hari Ini ---------- */
/* Permintaan pemilik: "Halaman Absen Saya Hari ini tambahkan Kemarin" — read-only, dipisah
   garis putus-putus supaya tidak tertukar dengan absen hari ini yang tombolnya aktif. */
.absen-kemarin{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px}
.absen-kemarin-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px;font-size:13px}
.absen-kemarin .list-item{background:rgba(99,95,130,.05);border-color:rgba(99,95,130,.14)}
.absen-kemarin .hint{margin-left:auto}
@media (max-width:520px){
  .absen-kemarin .hint{margin-left:0}
}

/* ---------- Isian manual jam makan siang / izin keluar (di kartu absen per jam) ---------- */
/* Kartu "Absen Makan Siang Hari Ini" & "Absen Izin Keluar Hari Ini" punya tombol satu-tekan;
   isian jam manualnya dilipat di dalam <details> supaya tabelnya tetap rapi. */
.ubah-jam{margin-top:16px;border-top:1px dashed var(--line);padding-top:12px}
.ubah-jam summary{font-size:12.5px;color:var(--muted);cursor:pointer}
.ubah-jam summary:hover{color:var(--accent)}
.ubah-jam form{margin-top:12px}
.ubah-jam .form-actions{margin-top:2px}
/* Baris tombol kartu absen per jam: kotak foto satu baris penuh, tombol Mulai & Selesai
   berdampingan di bawahnya supaya rapi (tidak menumpuk satu per satu). */
.absen-cepat .list-item .form-actions form.alur-jam{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.absen-cepat .list-item .form-actions form.alur-jam .selfie-kotak{grid-column:1 / -1}
.absen-cepat .list-item .form-actions form.alur-jam .btn[type=submit]{justify-content:center;min-width:0}
@media (max-width:520px){
  .absen-cepat .list-item .form-actions form.alur-jam{grid-template-columns:1fr}
}

/* ---------- Galeri stempel kwitansi (boleh beberapa, dipilih salah satu) ---------- */
.stempel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin-top:12px}
.stempel-item{margin:0;padding:11px;border-radius:15px;background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 6px 18px rgba(31,27,58,.07);
  display:flex;flex-direction:column;gap:9px}
.stempel-item.aktif{border-color:rgba(79,70,229,.55);box-shadow:0 0 0 2px rgba(79,70,229,.16),0 6px 18px rgba(31,27,58,.07)}
.stempel-item img{width:100%;height:92px;object-fit:contain;background:#fff;border-radius:10px;
  border:1px solid var(--line);display:block}
.stempel-item figcaption{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);line-height:1.35}
.stempel-item figcaption b{color:var(--ink);font-size:12.5px;word-break:break-word}
.stempel-aksi{display:flex;flex-wrap:wrap;gap:7px}
.stempel-aksi form{margin:0}
.stempel-nama summary{font-size:11.5px;color:var(--muted);cursor:pointer}
.stempel-nama form{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.stempel-nama input[type=text]{flex:1 1 100%;min-width:0;padding:7px 10px;font-size:12.5px}
@media (max-width: 860px){
  .stempel-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* ---------- Daftar rekening pembayaran kwitansi (boleh lebih dari satu) ---------- */
.rek-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:14px}
.rek-item{margin:0;padding:13px 14px;border-radius:15px;background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 6px 18px rgba(31,27,58,.07);
  display:flex;flex-direction:column;gap:10px}
.rek-item.aktif{border-color:rgba(79,70,229,.5);box-shadow:0 0 0 2px rgba(79,70,229,.14),0 6px 18px rgba(31,27,58,.07)}
.rek-item figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:12.5px;color:var(--ink)}
.rek-teks{font-size:12.5px;color:var(--ink);line-height:1.45;word-break:break-word;
  background:rgba(99,95,130,.07);border-radius:10px;padding:9px 11px}
.rek-aksi{display:flex;flex-wrap:wrap;gap:7px}
.rek-aksi form{margin:0}
.rek-ubah summary{font-size:11.5px;color:var(--muted);cursor:pointer}
.rek-ubah form{display:grid;gap:7px;margin-top:9px}
.rek-ubah label{font-size:11.5px;color:var(--muted)}
.rek-ubah input[type=text],.rek-ubah textarea,.rek-tambah input[type=text],.rek-tambah textarea{
  width:100%;padding:8px 10px;font-size:12.5px;font-family:inherit}
.rek-centang{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink)}
.rek-centang input{width:auto}
.rek-tambah{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
/* Catatan rekening di lembar kwitansi (satu baris per rekening yang dicetak). */
.kwit-rek{margin:0}
.kwit-rek + .kwit-rek{margin-top:1mm}
@media (max-width: 860px){
  .rek-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Peringkat absensi bulanan ---------- */
.rank-list{display:flex;flex-direction:column;gap:12px}
.rank-row{display:grid;grid-template-columns:40px minmax(0,1fr) 118px;gap:14px;align-items:center;
  padding:12px 15px;border-radius:13px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.75)}
.rank-no{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-weight:700;
  background:rgba(99,95,130,.12);color:var(--muted);font-variant-numeric:tabular-nums}
.rank-no.top1{background:linear-gradient(135deg,#FBBF24,#D97706);color:#fff}
.rank-no.top2{background:linear-gradient(135deg,#CBD5E1,#64748B);color:#fff}
.rank-no.top3{background:linear-gradient(135deg,#F0A76A,#B45309);color:#fff}
.rank-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.rank-main .nm{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rank-track{height:8px;border-radius:999px;background:rgba(99,95,130,.14);overflow:hidden}
.rank-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:.25s}
.rank-fill.alfa{background:linear-gradient(90deg,#FB923C,#DC2626)}
.rank-val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rank-val span{display:block;font-size:11px;color:var(--muted);font-weight:500}
.bars-scroll{overflow-x:auto;padding-bottom:6px}
.bars-scroll .bars{min-width:640px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .grid.stats,.grid.stats-5,.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field.span-3,.field.span-4{grid-column:span 2}
}
@media (max-width:820px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-105%);transition:.22s;box-shadow:0 20px 50px rgba(31,27,58,.25)}
  .sidebar.open{transform:none}
  .overlay.show{display:block;position:fixed;inset:0;background:rgba(31,27,58,.35);z-index:25}
  .menu-toggle{display:inline-block}
  .content{padding:18px 16px 50px}
  .topbar{padding:16px 16px 4px}
  .grid.cols-2,.grid.cols-3,.grid.stats,.grid.stats-5,.grid.cols-4{grid-template-columns:minmax(0,1fr)}
  /* form 2 kolom (termasuk yang diatur lewat style inline) jadi 1 kolom di HP */
  .form-grid{grid-template-columns:minmax(0,1fr)!important}
  .field.span-2,.field.span-3,.field.span-4{grid-column:auto!important}
  .grid.span-2{grid-column:auto}
  .item-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .item-row .icon-btn{align-self:end}
  .rank-row{grid-template-columns:34px minmax(0,1fr);gap:10px}
  .rank-val{grid-column:2;text-align:left}
  .unggah-bar{flex-direction:column}
  .card{padding:18px}
}

/* ---------- Jendela konfirmasi (kata sandi sebelum hapus) ---------- */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(31,27,58,.42);backdrop-filter:blur(3px) saturate(140%)}
.modal[hidden]{display:none}
.modal-box{width:100%;max-width:400px;display:flex;flex-direction:column;gap:18px;
  padding:24px;border-radius:18px;background:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 24px 60px rgba(31,27,58,.28)}
.modal-head{display:flex;flex-direction:column;gap:8px;min-width:0}
.modal-head h3{margin:0;font-size:16.5px;color:var(--ink)}
.modal-pesan{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.modal-info{margin:0;font-size:12.5px;font-weight:600;color:#9c1d14;min-height:0}
.modal-info:empty{display:none}
.modal-actions{display:flex;justify-content:flex-end;gap:10px}
@media (max-width:520px){.modal-actions{flex-direction:column}.modal-actions .btn{width:100%}}

/* ---------- Tombol panah "naik ke halaman atas" & "turun ke halaman bawah" ---------- */
.to-top,.to-bottom{position:fixed;right:22px;z-index:55;width:46px;height:46px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,#4f46e5,#8b5cf6);color:#fff;border:1px solid rgba(255,255,255,.5);
  box-shadow:0 12px 26px rgba(79,70,229,.34);opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
/* Panah "naik ke atas" di ATAS panah "turun ke bawah" (permintaan pemilik). */
.to-top{bottom:78px}
.to-bottom{bottom:22px}
.to-top svg,.to-bottom svg{width:20px;height:20px}
.to-top.tampil,.to-bottom.tampil{opacity:.94;visibility:visible;transform:translateY(0)}
.to-top:hover{opacity:1;transform:translateY(-2px)}
.to-bottom:hover{opacity:1;transform:translateY(2px)}
/* Tombol MUAT ULANG: TEPAT DI ATAS tombol naik ke atas, dan SELALU terlihat (permintaan pemilik:
   "Kasih Icon Refresh diatas Icon Scroll to Top") — warnanya lebih netral supaya tidak
   bersaing dengan tombol panah. */
.to-refresh{position:fixed;right:22px;bottom:134px;z-index:55;width:46px;height:46px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.9);color:#4F46E5;border:1px solid rgba(79,70,229,.28);
  box-shadow:0 10px 24px rgba(79,70,229,.2);opacity:.94;visibility:visible;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:opacity .18s ease,transform .18s ease,background .18s ease}
.to-refresh svg{width:20px;height:20px}
.to-refresh:hover{opacity:1;transform:rotate(-30deg) translateY(-1px);background:#fff}
.to-refresh:active{transform:scale(.94)}
@media (max-width:520px){.to-top{right:14px;bottom:64px;width:42px;height:42px}
  .to-refresh{right:14px;bottom:114px;width:42px;height:42px}
  .to-bottom{right:14px;bottom:14px;width:42px;height:42px}}

/* ---------- Bar "Tampilkan: 100 / 200 / Semua" + navigasi halaman ---------- */
.pager-baris{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:12px 22px;
  border-bottom:1px solid rgba(99,95,130,.09);font-size:13px;color:var(--muted)}
.pager-per{display:flex;align-items:center;gap:8px;margin:0}
.pager-label{font-weight:600;color:var(--ink)}
.pager-select{font:inherit;font-size:13px;padding:6px 10px;border-radius:10px;border:1px solid rgba(99,95,130,.22);
  background:rgba(255,255,255,.85);color:var(--ink);cursor:pointer}
.pager-info{font-variant-numeric:tabular-nums}
.pager-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.pager-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:9px;text-decoration:none;
  border:1px solid rgba(99,95,130,.2);background:rgba(255,255,255,.85);color:#4f46e5;font-weight:600;
  font-size:12.5px;white-space:nowrap}
.pager-btn:hover{background:#4f46e5;color:#fff;border-color:#4f46e5}
.pager-btn.mati{opacity:.38;color:var(--muted);pointer-events:none}
.pager-posisi{padding:0 4px;font-size:12.5px;white-space:nowrap;font-weight:600;color:var(--ink)}
@media (max-width:640px){.pager-nav{margin-left:0;width:100%}
  .pager-baris{padding:12px 16px;gap:10px}
  .pager-per{width:100%}}

/* ---------- Riwayat cetak nota ---------- */
.btn-hist-cetak{border:none;cursor:pointer;font-family:inherit;line-height:1.25;text-align:left}
.btn-hist-cetak:hover{background:rgba(245,158,11,.3)}
/* Tombol AKSI "Sudah Cetak" (dulu "Cetak") untuk nota yang riwayat cetaknya sudah ada.
   Tetap bisa diklik untuk mencetak ulang — hanya namanya yang berubah. */
.btn-sudah-cetak{background:rgba(16,185,129,.14);color:#05704f;border-color:rgba(16,185,129,.34);
  box-shadow:none;font-weight:700}
.btn-sudah-cetak:hover{background:rgba(16,185,129,.24);color:#04613f;text-decoration:none}
.cetak-info{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;
  padding:12px 14px;border-radius:12px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.22)}
.cetak-hist{font-size:12.5px}
.cetak-hist summary{cursor:pointer;font-weight:600;color:#92560a}
.cetak-hist-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;
  font-size:12.5px;color:var(--ink);max-height:220px;overflow-y:auto}
.cetak-hist-list li{background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:10px;padding:7px 11px}
.cetak-hist-modal{max-height:280px;margin-top:2px}
/* Petunjuk pengaturan printer di halaman cetak nota. */
.cetak-tip{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:12.5px;line-height:1.5;
  background:rgba(79,70,229,.06);border:1px solid rgba(79,70,229,.18)}
.cetak-tip b{color:#3b32c9}
.cetak-tip-item{display:inline-block;margin:4px 10px 0 0;padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.8);border:1px solid var(--line);white-space:nowrap}

/* ---------- Menu Database (daftar tabel, struktur kolom, isi data) ---------- */
.db-kode{display:block;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;
  line-height:1.6;color:#3b32c9;overflow-x:auto;white-space:nowrap}
.db-kolom-nama{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;font-weight:600}
.db-nilai{display:inline-block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.db-file{width:100%;padding:9px 11px;border-radius:11px;border:1px dashed rgba(99,95,130,.42);
  background:rgba(255,255,255,.72);font-family:inherit;font-size:12.5px;color:var(--muted)}
.db-file::file-selector-button{margin-right:10px;padding:7px 12px;border:none;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-family:inherit;
  font-weight:600;font-size:12.5px;cursor:pointer}

/* ---------- Tombol "Ambil Sekarang" (kolom Tgl Ambil di Penjualan & Agenda) ---------- */
/* Permintaan pemilik: di bawah Tgl Ambil muncul tombol Ambil Sekarang bila status pesanan
   masih ONLINE (status -> CLOSE + Tgl Ambil hari ini); selain ONLINE cukup tulisannya saja. */
.ambil-form{margin:0;display:inline-block}
.btn-ambil{padding:5px 10px;font-size:11.5px;border-radius:9px;
  background:linear-gradient(135deg,#10B981,#059669);box-shadow:0 6px 14px rgba(5,150,105,.22)}
.ambil-status{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.2px}
/* Badge status pesanan di bawah Nomor Invoice / Tanggal (Penjualan & Agenda). */
.badge-nota-status{margin-top:4px;padding:3px 8px;font-size:10.5px}

/* ---------- Kolom ACTION di daftar Penjualan ---------- */
/* Permintaan pemilik: di samping kolom Invoice ada kolom ACTION berisi tombol
   Ambil Sekarang (hanya bila status masih ONLINE) dan Edit; Cetak & Duplikat
   ada di kolom AKSI (menggantikan kolom Tgl Ambil). */
.td-aksi{white-space:nowrap;vertical-align:top}
.td-aksi .ambil-form{margin-bottom:6px}
.aksi-baris{display:flex;flex-wrap:wrap;gap:6px}
.aksi-baris .btn{padding:5px 10px;font-size:11.5px;border-radius:9px}

/* Kolom "Jumlah Papan" (angka + nama jenis papannya) di daftar Penjualan. */
.papan-sel{white-space:nowrap}
.papan-sel span.muted{display:block;max-width:110px;overflow:hidden;text-overflow:ellipsis}

/* Kolom "QTY/ACTION" di daftar Penjualan: kolom ACTION & Jumlah Papan digabung.
   Isinya HANYA angka qty (permintaan pemilik: nama jenis papan tidak ditampilkan)
   lalu tombol Ambil Sekarang / Ubah status / Edit. */
.td-qty-aksi{min-width:118px}
.qty-angka{font-size:15px;font-weight:700;line-height:1.1;margin-bottom:6px;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.td-qty-aksi .ambil-form{margin:0 0 6px}
/* Tombol cepat naik status pesanan: warna dibedakan per status tujuan
   (permintaan pemilik: "Ubah Jadi PENDING, STANDBY dan ONLINE bedakan warna").
   PENDING = kuning/oranye, STANDBY = biru, ONLINE = hijau. */
.btn-status-cepat{padding:5px 9px;font-size:11px;border-radius:9px;background:rgba(79,70,229,.10);
  color:#3a31b8;border:1px solid rgba(79,70,229,.28);box-shadow:none;font-weight:700}
.btn-status-cepat:hover{background:rgba(79,70,229,.18)}
.btn-status-cepat.btn-status-ke-pending{background:rgba(245,158,11,.16);color:#8a5306;border-color:rgba(245,158,11,.45)}
.btn-status-cepat.btn-status-ke-pending:hover{background:rgba(245,158,11,.28)}
.btn-status-cepat.btn-status-ke-standby{background:rgba(14,165,233,.14);color:#0a6c9a;border-color:rgba(14,165,233,.42)}
.btn-status-cepat.btn-status-ke-standby:hover{background:rgba(14,165,233,.26)}
.btn-status-cepat.btn-status-ke-online{background:rgba(16,185,129,.15);color:#05704f;border-color:rgba(16,185,129,.42)}
.btn-status-cepat.btn-status-ke-online:hover{background:rgba(16,185,129,.27)}

/* ---------- Riwayat pembayaran: baris ubah (Edit) ---------- */
/* Input dihubungkan ke form lewat atribut form="..." karena <form> tidak boleh
   membungkus <td> di dalam tabel. */
.td-ubah-bayar{background:rgba(79,70,229,.05)}
.ubah-bayar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ubah-bayar-grid .field label{font-size:11.5px}
.ubah-bayar-grid input,.ubah-bayar-grid select{width:100%;min-width:0}
@media (max-width:900px){.ubah-bayar-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ubah-bayar-grid{grid-template-columns:1fr}}

/* ---------- Hak Akses Halaman per User (akses.php) ---------- */
.akses-kelompok{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 8px}
.akses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.akses-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:13px;
  background:rgba(255,255,255,.7);border:1px solid var(--line);cursor:pointer;transition:.15s;min-width:0}
.akses-item:hover{border-color:rgba(79,70,229,.35)}
.akses-item.aktif{background:rgba(79,70,229,.08);border-color:rgba(79,70,229,.4)}
.akses-item.tetap{opacity:.72;cursor:not-allowed;background:rgba(255,255,255,.5)}
.akses-item input[type=checkbox]{width:auto;flex:0 0 auto;margin:2px 0 0}
.akses-ikon{flex:0 0 18px;color:var(--accent-2,#4F46E5);margin-top:1px}
.akses-ikon .ic{width:17px;height:17px}
.akses-teks{display:flex;flex-direction:column;gap:1px;min-width:0}
.akses-teks b{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.35}
.akses-teks small{font-size:10.5px;color:var(--muted);font-family:ui-monospace,monospace}
.akses-warn{color:#b45309;font-size:12px}
a.list-item{transition:.15s}
a.list-item:hover{border-color:rgba(79,70,229,.35)}
@media (max-width:520px){.akses-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Gambar loading saat halaman dimuat (semua halaman) ---------- */
/* Permintaan pemilik: "Semua Halaman, kasih Gambar Loading saat Loading page".
   Lapisan ini ditulis langsung di HTML (inc/layout.php) sehingga sudah tampil sebelum
   halaman selesai dimuat/digambar, lalu ditutup assets/app.js. */
.memuat{
  /* z-index 58: menutupi sidebar (30), tombol panah (55) & isi halaman, tapi tetap DI BAWAH
     jendela modal (60) supaya jendela kata sandi / riwayat cetak tidak pernah tertutup lapisan ini. */
  position:fixed;inset:0;z-index:58;display:grid;place-items:center;
  background:radial-gradient(620px 460px at 50% 34%,rgba(139,92,246,.16),transparent 62%),
             rgba(243,240,255,.92);
  -webkit-backdrop-filter:blur(9px) saturate(170%);backdrop-filter:blur(9px) saturate(170%);
  opacity:1;visibility:visible;transition:opacity .22s ease,visibility .22s ease}
.memuat.sembunyi{opacity:0;visibility:hidden;pointer-events:none}
.memuat-box{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:26px 34px;border-radius:22px;background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 18px 46px rgba(79,70,229,.16);min-width:210px}
.memuat-lingkar{position:relative;width:64px;height:64px;display:grid;place-items:center}
.memuat-ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(79,70,229,0) 0deg,rgba(79,70,229,.25) 90deg,#4F46E5 260deg,#8B5CF6 360deg);
  animation:memuat-putar .95s linear infinite;box-shadow:0 10px 24px rgba(79,70,229,.22)}
.memuat-ikon{position:absolute;inset:7px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:#4F46E5;font-size:20px;line-height:1;
  animation:memuat-denjut 1.35s ease-in-out infinite}
.memuat-teks{font-size:13.5px;color:var(--ink);letter-spacing:.01em}
.memuat-sub{font-size:11.5px;color:var(--muted)}
/* Tombol "Muat Ulang" di lapisan loading (permintaan pemilik: "Kasih icon Refresh di Halaman Loading") */
.memuat-refresh{margin-top:4px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:8px 15px;border-radius:11px;font-size:12.5px;font-weight:700;font-family:inherit;
  color:var(--accent);background:rgba(79,70,229,.08);border:1px solid rgba(79,70,229,.28);
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease}
.memuat-refresh svg{width:15px;height:15px}
.memuat-refresh:hover{background:rgba(79,70,229,.14);transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(79,70,229,.18)}
.memuat-refresh:active{transform:translateY(0)}
@keyframes memuat-putar{to{transform:rotate(360deg)}}
@keyframes memuat-denjut{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){
  .memuat-ring{animation:none;background:#4F46E5}
  .memuat-ikon{animation:none}
}

/* ---------- Kartu "User Online" di Dashboard ---------- */
/* Daftar akun yang sedang membuka aplikasi (dari users.last_aktif). */
.online-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;padding:0 22px 2px}
.online-item{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:14px;
  background:rgba(255,255,255,.7);border:1px solid var(--line);min-width:0}
.online-item.online-saya-baris{background:rgba(79,70,229,.07);border-color:rgba(79,70,229,.32)}
.online-ava{position:relative;width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:700;font-size:15px;
  box-shadow:0 8px 18px rgba(79,70,229,.26)}
.online-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  background:#0F9D58;border:2px solid #fff;box-shadow:0 0 0 2px rgba(15,157,88,.18)}
.online-teks{display:flex;flex-direction:column;gap:1px;min-width:0}
.online-teks b{font-size:13.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.online-teks small{font-size:11.5px;color:var(--muted);line-height:1.35}
.online-teks .online-waktu{color:var(--ok);font-weight:600}
.online-anda{color:var(--accent);font-weight:600}
@media (max-width:520px){.online-list{grid-template-columns:minmax(0,1fr);padding:0 16px 2px}}

/* ---------- Backup & Restore seluruh database (menu Database) ---------- */
.bk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.bk-box{background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.bk-box h3{font-size:13.5px;margin:0 0 8px}
.bk-box .hint{margin:0 0 10px}
.bk-box .form-actions{margin-top:2px}
#restoreStatus{background:rgba(79,70,229,.07);border:1px solid rgba(79,70,229,.2);border-radius:10px;padding:8px 11px}
@media (max-width:900px){.bk-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Menu WEBSITE (halaman publik toko) — kartu pengelolaan foto ---------- */
/* Dipakai web_kelola.php: daftar foto terpilih + pemilih gambar dari foto nota / gambar barang. */
.web-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px}
.web-foto{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.72);box-shadow:0 10px 24px -20px rgba(31,27,58,.5)}
.web-foto-sembunyi{opacity:.72;border-style:dashed}
.web-foto-gambar{display:block;aspect-ratio:4/3;background:rgba(99,95,130,.08);overflow:hidden}
.web-foto-gambar img{width:100%;height:100%;object-fit:cover;display:block}
.web-foto-isi{padding:13px 14px 14px;display:flex;flex-direction:column;gap:10px}
.web-foto-info{display:flex;flex-direction:column;gap:5px;min-width:0}
.web-foto-info b{font-size:13.5px;line-height:1.3;overflow-wrap:anywhere}
.web-foto-info .muted{display:flex;flex-wrap:wrap;gap:5px}
.web-foto-aksi{display:flex;flex-wrap:wrap;gap:6px}
.web-foto-aksi form{margin:0}
.web-ubah{margin-top:2px}
.web-ubah summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--accent);padding:4px 0}
.web-ubah .field{margin-top:10px}
.web-ubah .field label{font-size:12px}

.web-pilih-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.web-pilih{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.72)}
.web-pilih-gambar{display:block;aspect-ratio:1/1;background:rgba(99,95,130,.08);overflow:hidden}
.web-pilih-gambar img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.web-pilih:hover .web-pilih-gambar img{transform:scale(1.05)}
.web-pilih-isi{padding:11px 12px 12px;display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.web-pilih-isi b{font-size:12.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.web-pilih-isi .muted{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.web-pilih-aksi{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.web-pilih-aksi form{margin:0;flex:1 1 auto}
.web-pilih-aksi .btn{width:100%}

/* Unggah foto langsung dari perangkat (permintaan pemilik: foto Produk & Gallery bisa upload + delete) */
.web-unggah{border:1px dashed var(--line);border-radius:14px;padding:13px 15px 12px;margin:0 0 18px;
  background:rgba(255,255,255,.55)}
.web-unggah-baris{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.web-unggah-berkas{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 14px;border-radius:11px;border:1px solid var(--line);background:#fff;
  font-size:13px;font-weight:600;color:var(--accent)}
.web-unggah-berkas:hover{border-color:var(--accent)}
.web-unggah-berkas input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.web-unggah-berkas .ikon{width:16px;height:16px;fill:currentColor}
.web-unggah-berkas.ada-berkas{border-color:var(--accent);background:rgba(79,70,229,.08)}
.web-unggah-berkas .nama-berkas{font-weight:500;color:var(--muted);max-width:260px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.web-unggah-judul{flex:1 1 220px;min-width:0}
.web-unggah .hint{display:block;margin-top:8px}
@media (max-width:520px){
  .web-grid,.web-pilih-grid{grid-template-columns:minmax(0,1fr)}
  .web-foto-aksi .btn{padding:6px 9px}
  .web-unggah-baris{gap:8px}
  .web-unggah-baris .btn,.web-unggah-berkas,.web-unggah-judul{width:100%}
  .web-unggah-berkas{justify-content:center}
}