*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body{background:#f1f5f9;color:#1e293b;padding-top:56px}
.topbar{position:fixed;top:0;left:0;right:0;height:56px;background:#0f3d6e;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 12px;z-index:1000}
.topbar .brand{font-size:16px;font-weight:800;white-space:nowrap}
.topbar .menu{display:flex;gap:4px}
.topbar .menu a{color:#cbd5e1;text-decoration:none;font-size:18px;padding:8px 10px;border-radius:8px}
.topbar .menu a.active,.topbar .menu a:hover{background:rgba(255,255,255,.15);color:#fff}
.main{padding:16px 14px}
.main h1{font-size:22px;margin-bottom:6px}
.card{background:#fff;border-radius:14px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:16px;overflow-x:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{border-left:4px solid #2563eb;padding:12px}
.stat .v{font-size:22px;font-weight:700}
.stat .l{font-size:12px;color:#64748b}
.btn{display:inline-block;background:#2563eb;color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;border:none;cursor:pointer;font-size:14px}
.btn:hover{background:#1d4ed8}
.btn-red{background:#dc2626}.btn-red:hover{background:#b91c1c}
.btn-green{background:#16a34a}.btn-green:hover{background:#15803d}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid #e2e8f0}
th{background:#f8fafc;color:#475569;font-weight:600}
.alert{background:#dcfce7;color:#166534;padding:10px 14px;border-radius:8px;margin-bottom:14px}
input,select{padding:9px 11px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;width:100%}
label{display:block;font-size:13px;color:#475569;margin-bottom:4px;margin-top:10px}
.kasir-wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
@media (max-width:768px){
    .kasir-wrap{grid-template-columns:1fr}
    .grid{grid-template-columns:1fr 1fr}
    table{display:block;overflow-x:auto;white-space:nowrap}
    /* responsive topbar: wrap menu ke beberapa baris agar semua tombol kelihatan di HP */
    .topbar{height:auto;min-height:56px;flex-wrap:wrap;padding:6px 8px}
    .topbar .brand{width:100%;text-align:center;font-size:14px;margin-bottom:4px}
    .topbar .menu{width:100%;justify-content:center;flex-wrap:wrap;gap:6px}
    .topbar .menu a{padding:6px 9px;font-size:18px}
}