/* =====================================================================
   Aplikasi Purchasing - Stylesheet global
   Prinsip: rapat/compact, minim ruang kosong, responsif.
   ===================================================================== */
:root{
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --bg:#f4f5f7;
    --card:#ffffff;
    --text:#1f2430;
    --muted:#6b7280;
    --border:#e5e7eb;
    --danger:#dc2626;
    --success:#16a34a;
    --warning:#d97706;
    --radius:8px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:13.5px;
    line-height:1.35;
}
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{margin:0 0 8px 0;line-height:1.2;}
h1{font-size:1.3rem;}
h2{font-size:1.1rem;}
h3{font-size:1rem;}
p{margin:0 0 6px 0;}

/* ---------- Topbar ---------- */
.topbar{
    display:flex;align-items:center;gap:14px;
    background:var(--card);
    border-bottom:3px solid transparent;
    border-image:linear-gradient(90deg,var(--primary),var(--primary-dark)) 1;
    box-shadow:0 1px 6px rgba(0,0,0,.06);
    padding:8px 14px;
    position:sticky;top:0;z-index:50;
    flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:7px;font-weight:800;color:var(--text);font-size:1.02rem;white-space:nowrap;padding:6px 8px;border-radius:8px;transition:background .15s ease;}
.brand:hover{background:var(--bg);text-decoration:none;}
.brand-dot{
    width:10px;height:10px;border-radius:50%;display:inline-block;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.topnav{display:flex;gap:3px;flex:1;flex-wrap:wrap;}
.topnav a{
    display:flex;align-items:center;gap:5px;
    color:var(--muted);padding:6px 11px;border-radius:20px;
    font-size:.84rem;font-weight:600;white-space:nowrap;
    transition:background .15s ease,color .15s ease;
}
.topnav-ico{font-size:.95rem;line-height:1;}
.topnav a:hover{background:var(--bg);color:var(--text);text-decoration:none;}
.topnav a.active{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
    box-shadow:0 2px 6px rgba(37,99,235,.35);
}
.topnav a.active:hover{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;}
.topuser{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:.85rem;}
.uname{color:var(--muted);white-space:nowrap;}
.icon-link{border:1px solid var(--border);border-radius:6px;padding:3px 7px;font-size:.95rem;color:var(--text);}
.icon-link:hover{background:var(--bg);text-decoration:none;}

/* ---------- Layout ---------- */
.page-wrap{max-width:1180px;margin:0 auto;padding:12px 14px 30px;}
.section{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;margin-bottom:10px;}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.row{display:flex;gap:8px;flex-wrap:wrap;}
.row > *{flex:1;min-width:160px;}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.spacer{flex:1;}
.hint{color:var(--muted);font-size:.8rem;margin:0 0 5px;}

/* ---------- Flash ---------- */
.flash{padding:8px 12px;border-radius:6px;margin-bottom:10px;font-size:.88rem;}
.flash-success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0;}
.flash-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;}
.flash-info{background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe;}

/* ---------- Dashboard cards ---------- */
/* Dashboard: hero kecil/compact (badge + ikon), pakai basis .page-hero */
.page-hero.dash-hero{padding:11px 16px;}
.page-hero .hero-badge{display:inline-block;background:rgba(255,255,255,.18);color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.06em;padding:2px 8px;border-radius:20px;margin-bottom:4px;}
.page-hero .hero-ico{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:1.02rem;flex-shrink:0;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
.dash-card{
    position:relative;
    background:var(--card);border:1px solid var(--border);border-radius:14px;
    padding:30px 26px;display:flex;flex-direction:column;gap:10px;
    min-height:180px;justify-content:center;
    transition:transform .12s ease, box-shadow .12s ease;
}
.dash-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.09);text-decoration:none;}
.dash-card .ico{font-size:2.8rem;line-height:1;}
.dash-card .title{font-weight:700;color:var(--text);font-size:1.25rem;}
.dash-card .desc{color:var(--muted);font-size:.9rem;}
.dash-badge{
    position:absolute;top:14px;right:14px;
    background:var(--danger);color:#fff;font-size:.8rem;font-weight:700;
    min-width:26px;height:26px;border-radius:13px;display:flex;align-items:center;justify-content:center;
    padding:0 6px;
}
.dash-badge.pulse{animation:badgePulse 1.4s infinite;}
@keyframes badgePulse{
    0%{box-shadow:0 0 0 0 rgba(220,38,38,.55);}
    70%{box-shadow:0 0 0 8px rgba(220,38,38,0);}
    100%{box-shadow:0 0 0 0 rgba(220,38,38,0);}
}

/* ---------- Recap / stat tiles ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:12px;}
.stat-tile{background:var(--card);border:1px solid var(--border);border-top:3px solid var(--border);border-radius:10px;padding:12px 14px;}
.stat-tile .stat-label{color:var(--muted);font-size:.78rem;margin-bottom:4px;}
.stat-tile .stat-value{font-size:1.35rem;font-weight:700;}
.stat-tile.belum{border-top-color:var(--danger);background:linear-gradient(180deg,#fef2f2,var(--card) 40%);}
.stat-tile.belum .stat-value{color:var(--danger);}
.stat-tile.lunas{border-top-color:var(--success);background:linear-gradient(180deg,#f0fdf4,var(--card) 40%);}
.stat-tile.lunas .stat-value{color:var(--success);}
.stat-tile .stat-note{font-size:.72rem;color:var(--muted);margin-top:2px;}

/* ---------- Tabel ---------- */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:.86rem;}
th,td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;}
th{background:#f8f9fb;font-weight:600;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.02em;}
tbody tr:hover{background:#fafbfc;}
td.wrap,th.wrap{white-space:normal;}
.text-right{text-align:right;}
.text-center{text-align:center;}

/* Tabel rapat dengan scroll vertikal + header sticky (dipakai di halaman
   dengan data sangat banyak, mis. Cek Harga Barang) */
.table-scroll{
    max-height:68vh;overflow-y:auto;overflow-x:auto;
    border:1px solid var(--border);border-radius:8px;
}
.table-scroll table{margin:0;}
.table-scroll thead th{
    position:sticky;top:0;z-index:5;
    background:#f8f9fb;box-shadow:0 1px 0 var(--border);
}
.table-compact th,.table-compact td{padding:4px 7px;font-size:.8rem;}
.barang-link{background:none;border:none;padding:0;margin:0;font:inherit;color:var(--text);font-weight:600;cursor:pointer;text-align:left;}
.barang-link:hover{color:var(--primary);text-decoration:underline;}
.price-date{display:block;color:var(--muted);font-size:.72rem;font-weight:400;}

/* Header tabel yang bisa diklik untuk sorting */
th.sortable{cursor:pointer;user-select:none;}
th.sortable:hover{color:var(--primary);}
.sort-icon{font-size:.65rem;opacity:.35;margin-left:2px;}
.sort-icon.active{opacity:1;color:var(--primary);}

/* ---------- Date picker kustom (tampilan Indonesia: 02 Agustus 2026) ---------- */
.dp-wrap{position:relative;}
.dp-input{cursor:pointer;padding-right:30px;background:#fff;}
.dp-icon{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:.85rem;opacity:.7;}
.dp-panel{
    position:absolute;top:calc(100% + 4px);left:0;z-index:60;
    background:#fff;border:1px solid var(--border);border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.16);padding:8px;width:236px;
}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.dp-label{font-weight:600;font-size:.84rem;color:var(--text);}
.dp-nav{background:none;border:none;font-size:1.1rem;cursor:pointer;padding:2px 8px;border-radius:6px;color:var(--muted);}
.dp-nav:hover{background:#f1f2f5;color:var(--text);}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.dp-dow{font-size:.66rem;color:var(--muted);text-align:center;padding:2px 0;font-weight:600;}
.dp-day{background:none;border:none;font-size:.78rem;padding:5px 0;border-radius:6px;cursor:pointer;text-align:center;color:var(--text);}
.dp-day:hover{background:#eef1ff;}
.dp-day-empty{cursor:default;}
.dp-day-empty:hover{background:none;}
.dp-day-today{font-weight:700;color:var(--primary);}
.dp-day-selected{background:var(--primary);color:#fff;}
.dp-day-selected:hover{background:var(--primary-dark);}
.dp-foot{display:flex;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid var(--border);}
.dp-today-btn,.dp-clear-btn{background:none;border:none;font-size:.72rem;color:var(--primary);cursor:pointer;padding:2px 4px;}
.dp-today-btn:hover,.dp-clear-btn:hover{text-decoration:underline;}

/* ---------- Pembelian: tampilan modern & berwarna ---------- */
.page-hero{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;border-radius:14px;padding:13px 18px;margin-bottom:10px;
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    box-shadow:0 8px 24px rgba(37,99,235,.22);
}
.page-hero h1{color:#fff;margin:0;font-size:1.22rem;}
.page-hero .hero-sub{color:rgba(255,255,255,.85);font-size:.8rem;margin-top:2px;}
.page-hero .toolbar{margin:0;}
.page-hero .btn{background:#fff;color:var(--primary);}
.page-hero .btn:hover{background:#f1f5f9;}
.page-hero .btn-outline{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.6);}
.page-hero .btn-outline:hover{background:rgba(255,255,255,.26);color:#fff;}

.section-accent{border-top:3px solid var(--primary);}

/* Kotak pencarian responsif di atas tabel */
.search-wrap{position:relative;flex:1;min-width:180px;max-width:320px;}
.search-wrap input[type=search]{padding-left:30px;}
.search-wrap .search-ico{position:absolute;left:9px;top:50%;transform:translateY(-50%);opacity:.5;font-size:.85rem;pointer-events:none;}
.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.table-toolbar .count-info,.toolbar .count-info{color:var(--muted);font-size:.82rem;}

/* Aksi (tombol Detail/Edit/Cetak) di tiap baris tabel -- dirapatkan supaya
   tidak melebar & tidak banyak jarak antar tombol */
.aksi-cell{display:flex;gap:4px;flex-wrap:wrap;}
.btn-icon{padding:4px 8px;line-height:1;}

/* Aksen warna di sisi kiri baris tabel sesuai status pembayaran */
tbody tr.row-belum{box-shadow:inset 3px 0 0 var(--danger);}
tbody tr.row-lunas{box-shadow:inset 3px 0 0 var(--success);}

/* Kartu hero untuk halaman Detail Pembelian & Edit Harga (gaya invoice) */
.invoice-hero{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;border-radius:14px;padding:14px 20px;margin-bottom:10px;
    box-shadow:0 8px 24px rgba(37,99,235,.22);
}
.invoice-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.invoice-hero .kode{font-size:1.4rem;font-weight:800;letter-spacing:.01em;}
.invoice-hero .kode-label{color:rgba(255,255,255,.75);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:1px;}
.invoice-hero .meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:9px;}
.invoice-hero .meta-item{font-size:.78rem;color:rgba(255,255,255,.75);}
.invoice-hero .meta-item b{display:block;color:#fff;font-size:.95rem;font-weight:700;margin-top:1px;}
.invoice-hero .badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.invoice-hero .badge{background:rgba(255,255,255,.2);color:#fff;}
.invoice-hero .toolbar{margin:0;}
.invoice-hero .btn{background:#fff;color:var(--primary);}
.invoice-hero .btn:hover{background:#f1f5f9;}
.invoice-hero .btn-outline{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.6);}
.invoice-hero .btn-outline:hover{background:rgba(255,255,255,.26);color:#fff;}
.invoice-total-row td,.invoice-total-row th{background:#eef2ff;font-size:1rem;}

/* Kartu status hutang berwarna */
.hutang-card{border-radius:12px;padding:11px 14px;margin-bottom:10px;}
.hutang-card.belum{background:#fef2f2;border:1px solid #fecaca;}
.hutang-card.lunas{background:#f0fdf4;border:1px solid #bbf7d0;}
.progress-bar{background:#e5e7eb;border-radius:20px;height:8px;overflow:hidden;margin-top:6px;}
.progress-fill{background:var(--success);height:100%;border-radius:20px;transition:width .3s ease;}

/* Baris rekap yang bisa diklik utk expand/collapse (halaman Monitoring) */
.mon-toggle{cursor:pointer;}
.mon-toggle:hover{background:#f5f7fb;}
.mon-chevron{display:inline-block;transition:transform .15s ease;color:var(--muted);font-size:.75rem;}
.mon-detail-row{display:none;}
.mon-detail-row.show{display:table-row;}
.mon-detail-row td{background:#f8f9fc;padding:0;}
.mon-detail-wrap{padding:10px 14px;}
.mon-summary-card{
    background:var(--card);border:1px solid var(--border);border-radius:10px;
    padding:12px 14px;margin-bottom:8px;
}

/* Kartu statistik kecil berwarna (dipakai di header halaman Monitoring) */
.mini-stat-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.mini-stat{
    flex:1;min-width:140px;background:var(--card);border:1px solid var(--border);
    border-radius:10px;padding:10px 12px;
}
.mini-stat .lbl{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;}
.mini-stat .val{font-size:1.2rem;font-weight:700;margin-top:2px;}

/* Navigasi halaman (dipakai di tabel besar seperti Master Barang) */
.pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;flex-wrap:wrap;}
.pagination .page-info{color:var(--muted);font-size:.85rem;}
.btn-disabled{pointer-events:none;opacity:.4;}

/* ---------- Badge status ---------- */
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.72rem;font-weight:600;}
.badge-lunas{background:#dcfce7;color:#166534;}
.badge-belum{background:#fee2e2;color:#991b1b;}
.badge-tunai{background:#e0e7ff;color:#3730a3;}
.badge-mundur{background:#fef3c7;color:#92400e;}
.badge-masuk{background:#e0f2fe;color:#075985;}
.badge-pakai{background:#f3e8ff;color:#6b21a8;}

/* ---------- Form ---------- */
label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:3px;}
input[type=text],input[type=number],input[type=date],input[type=password],input[type=search],input[type=color],select,textarea{
    width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-size:.86rem;
    background:#fff;color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:0;border-color:var(--primary);}
.field{margin-bottom:8px;}
fieldset{border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin:0 0 10px;}
legend{padding:0 4px;font-size:.82rem;color:var(--muted);}

.btn{
    display:inline-flex;align-items:center;gap:5px;justify-content:center;
    background:var(--primary);color:#fff;border:none;border-radius:6px;
    padding:7px 13px;font-size:.85rem;cursor:pointer;font-weight:600;
    transition:background .12s ease;
}
.btn:hover{background:var(--primary-dark);text-decoration:none;color:#fff;}
.btn-sm{padding:4px 9px;font-size:.78rem;}
.btn-outline{background:transparent;color:var(--primary);border:1px solid var(--primary);}
.btn-outline:hover{background:var(--primary);color:#fff;}
.btn-danger{background:var(--danger);}
.btn-danger:hover{background:#b91c1c;}
.btn-success{background:var(--success);}
.btn-success:hover{background:#15803d;}
.btn-secondary{background:#6b7280;}
.btn-secondary:hover{background:#4b5563;}

/* ---------- Item repeater (form pembelian) ---------- */
.item-row{display:grid;grid-template-columns:2.2fr 1fr .8fr 1fr 1fr auto;gap:6px;align-items:end;margin-bottom:6px;}
.item-row .field{margin-bottom:0;}
.item-total{font-weight:600;}
.grand-total{text-align:right;font-size:1.05rem;font-weight:700;margin-top:6px;}

/* Judul kolom (Barang/Qty/Satuan/dst) cuma ditampilkan 1x di baris header di
   atas, bukan diulang di tiap baris item -- label per-field disembunyikan di
   layar besar. Di layar kecil (grid pecah jadi 2 kolom & urutan berubah),
   label per-field ditampilkan lagi supaya tetap jelas field mana yang mana. */
.item-row-header{margin-bottom:4px;}
.item-row-header .field-label{font-size:.8rem;color:var(--muted);font-weight:600;}
.item-row:not(.item-row-header) label{display:none;}

/* ---------- Lengkapi Belanja (pengajuan -> isi toko/harga per barang) ---------- */
.lengkapi-item{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:var(--card);}
.lengkapi-item-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:700;font-size:.92rem;}
.lengkapi-item .row{margin-bottom:0;}
.lengkapi-item .row + .row{margin-top:8px;}

/* ---------- Modal (popup cetak / bayar) ---------- */
.modal-overlay{
    position:fixed;inset:0;background:rgba(15,18,25,.45);
    display:none;align-items:center;justify-content:center;z-index:200;padding:14px;
}
.modal-overlay.show{display:flex;}
.modal-box{
    background:#fff;border-radius:10px;padding:16px;max-width:420px;width:100%;
    box-shadow:0 10px 30px rgba(0,0,0,.2);
    animation:modalPop .15s ease;
}
@keyframes modalPop{from{transform:scale(.94);opacity:0;}to{transform:scale(1);opacity:1;}}
.modal-box h3{margin-bottom:10px;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;}
.modal-box.modal-wide{max-width:760px;max-height:85vh;display:flex;flex-direction:column;}
.modal-box.modal-wide .modal-scroll-body{overflow-y:auto;max-height:60vh;}

/* Modal besar berisi iframe (mis. popup "Pembelian Baru") */
.modal-box.modal-xl{max-width:960px;width:96vw;height:88vh;padding:0;display:flex;flex-direction:column;overflow:hidden;}
.modal-embed-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 14px;border-bottom:1px solid var(--border);flex:0 0 auto;
}
.modal-embed-head h3{margin:0;font-size:1rem;}
.modal-embed-close{
    background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer;
    color:var(--muted);padding:2px 8px;border-radius:6px;
}
.modal-embed-close:hover{background:#f1f2f5;color:var(--text);}
.modal-iframe{flex:1 1 auto;width:100%;border:0;display:block;}

/* Modal iframe yang tingginya menyesuaikan isi konten (mis. popup Detail
   Pembelian) -- tidak memaksa tinggi penuh 88vh spt modal-xl, supaya tidak
   ada ruang kosong besar kalau isinya pendek. Tinggi iframe diatur oleh JS
   setelah kontennya selesai dimuat. */
.modal-box.modal-fit{max-width:900px;width:94vw;max-height:88vh;padding:0;display:flex;flex-direction:column;overflow:hidden;}
.modal-box.modal-fit .modal-iframe{flex:0 0 auto;width:100%;border:0;display:block;height:160px;transition:height .15s ease;}

/* Tampilan rapat untuk halaman yang dibuka sebagai popup (lewat iframe modal,
   header.php diset $hide_topbar=true) -- baris & kolom lebih rapat drpd
   tampilan halaman penuh. */
body.modal-embed .page-wrap{max-width:100%;padding:10px 12px 14px;}
body.modal-embed .section{padding:8px 10px;margin-bottom:8px;}
body.modal-embed .section-title{margin-bottom:6px;}
body.modal-embed h1{font-size:1.02rem;}
body.modal-embed h3{font-size:.9rem;margin-bottom:5px;}
body.modal-embed .row{gap:6px;}
body.modal-embed .field{margin-bottom:5px;}
body.modal-embed label{margin-bottom:2px;font-size:.75rem;}
body.modal-embed .hint{font-size:.73rem;margin:3px 0 6px;}
body.modal-embed .item-row{gap:5px;margin-bottom:4px;}
body.modal-embed .grand-total{margin-top:4px;font-size:.95rem;}
body.modal-embed .flash{padding:6px 10px;font-size:.8rem;margin-bottom:8px;}

/* ---------- Login page ---------- */
.login-wrap{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--primary),#0f172a);
    padding:16px;
}
.login-box{
    background:#fff;border-radius:12px;padding:28px 26px;width:100%;max-width:340px;
    box-shadow:0 12px 40px rgba(0,0,0,.25);text-align:center;position:relative;
}
.login-box .brand-lg{font-weight:800;font-size:1.15rem;margin-bottom:2px;}
.login-box .sub{color:var(--muted);font-size:.8rem;margin-bottom:16px;}
.login-box .field{text-align:left;}
.login-error{color:var(--danger);font-size:.82rem;margin:6px 0 0;min-height:1em;}
.login-box .btn{width:100%;margin-top:6px;padding:9px;}
.turnstile-wrap{margin:10px 0 4px;display:flex;justify-content:center;}

/* Success check animation overlay */
.success-overlay{
    position:absolute;inset:0;background:#fff;border-radius:12px;
    display:none;align-items:center;justify-content:center;flex-direction:column;gap:8px;
}
.success-overlay.show{display:flex;}
.check-circle{
    width:64px;height:64px;border-radius:50%;background:var(--success);
    display:flex;align-items:center;justify-content:center;
    animation:popIn .35s cubic-bezier(.34,1.56,.64,1);
}
.check-circle svg{width:32px;height:32px;stroke:#fff;stroke-width:3;fill:none;}
.check-circle path{stroke-dasharray:48;stroke-dashoffset:48;animation:drawCheck .35s .1s forwards ease-out;}
@keyframes popIn{from{transform:scale(0);}to{transform:scale(1);}}
@keyframes drawCheck{to{stroke-dashoffset:0;}}
.success-text{font-weight:600;color:var(--success);font-size:.92rem;}
.shake{animation:shake .35s;}
@keyframes shake{
    10%,90%{transform:translateX(-1px);}
    20%,80%{transform:translateX(2px);}
    30%,50%,70%{transform:translateX(-4px);}
    40%,60%{transform:translateX(4px);}
}

/* ---------- Pagination-ish, empty state ---------- */
.empty-state{text-align:center;color:var(--muted);padding:24px 10px;font-size:.86rem;}

/* ---------- Print ---------- */
.print-only{display:none;}
@media print{
    .topbar,.no-print{display:none !important;}
    body{background:#fff;font-size:12px;}
    .page-wrap{max-width:100%;padding:0;}
    .section{border:none;padding:0;}
    .print-only{display:block;}
}

/* ---------- Responsive ---------- */
@media (max-width:720px){
    .topnav{order:3;width:100%;}
    .item-row{grid-template-columns:1fr 1fr;}
    .item-row-header{display:none;}
    .item-row:not(.item-row-header) label{display:block;}
    .card-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
    .dash-card{padding:22px 18px;min-height:140px;}
    .dash-card .ico{font-size:2.2rem;}
    .dash-card .title{font-size:1.05rem;}
    th,td{font-size:.78rem;padding:5px 6px;}
}