:root{--bg:#eef2ff;--card:#ffffff;--text:#111827;--muted:#6b7280;--primary:#4f46e5;--primary2:#7c3aed;--success:#16a34a;--danger:#dc2626;--warning:#f59e0b;--border:#e5e7eb;--shadow:0 18px 45px rgba(15,23,42,.10)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:radial-gradient(circle at top left,#dbeafe,transparent 30%),linear-gradient(135deg,#f8fafc,#eef2ff);color:var(--text);min-height:100vh}a{color:inherit}.sidebar{position:fixed;inset:0 auto 0 0;width:270px;background:linear-gradient(180deg,#111827,#1e1b4b);color:#fff;padding:22px;box-shadow:8px 0 30px rgba(15,23,42,.18);z-index:5}.brand-wrap{display:flex;gap:12px;align-items:center;margin-bottom:26px}.brand-icon,.auth-logo{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,#60a5fa,#a78bfa);display:grid;place-items:center;font-weight:900;box-shadow:0 10px 30px rgba(96,165,250,.35)}.brand{font-size:19px;font-weight:800}.brand-wrap small{color:#c7d2fe}.menu{display:grid;gap:9px}.menu a{display:flex;align-items:center;gap:10px;text-decoration:none;padding:12px 14px;border-radius:14px;color:#e5e7eb;transition:.2s}.menu a:hover,.menu a.active{background:rgba(255,255,255,.13);color:#fff;transform:translateX(3px)}.app-shell{margin-left:270px;min-height:100vh}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px);border-bottom:1px solid rgba(229,231,235,.8);position:sticky;top:0;z-index:3}.topbar h1{margin:0;font-size:24px}.topbar p{margin:5px 0 0;color:var(--muted);font-size:13px}.user-pill{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:8px 9px 8px 14px;box-shadow:0 8px 20px rgba(15,23,42,.06)}.user-pill a{background:#111827;color:#fff;border-radius:999px;padding:7px 12px;text-decoration:none;font-size:13px}.container{max-width:1180px;margin:28px auto;padding:0 22px}.card{background:rgba(255,255,255,.92);border:1px solid rgba(229,231,235,.9);border-radius:22px;padding:22px;box-shadow:var(--shadow);margin-bottom:20px}.card h2{margin-top:0;font-size:22px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.stat{font-size:31px;font-weight:900;margin-top:10px;letter-spacing:-.03em}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;padding:10px 15px;border-radius:13px;text-decoration:none;cursor:pointer;font-weight:700;box-shadow:0 10px 24px rgba(79,70,229,.25);transition:.2s}.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}.btn-danger{background:linear-gradient(135deg,#ef4444,#b91c1c)}.btn-secondary{background:linear-gradient(135deg,#64748b,#334155)}.btn-success{background:linear-gradient(135deg,#22c55e,#15803d)}.btn-block{width:100%;margin-top:6px}.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.table-wrap{overflow:auto;border-radius:16px;border:1px solid var(--border)}table{width:100%;border-collapse:collapse;background:#fff;overflow:hidden}th,td{padding:13px 14px;border-bottom:1px solid #eef2f7;text-align:left;vertical-align:top}th{background:#f8fafc;color:#475569;font-size:13px;text-transform:uppercase;letter-spacing:.04em}tr:hover td{background:#fafafa}label{display:block;font-weight:700;font-size:13px;color:#374151;margin-bottom:4px}input,select{width:100%;padding:11px 12px;border:1px solid #d1d5db;border-radius:13px;margin:4px 0 14px;background:#fff;outline:none;transition:.2s}input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(79,70,229,.12)}.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}.alert{padding:12px 14px;border-radius:14px;margin-bottom:16px;font-weight:600}.alert-success{background:#dcfce7;color:#166534}.alert-error{background:#fee2e2;color:#991b1b}.right{text-align:right}.footer{text-align:center;padding:24px;color:#64748b}.muted{color:var(--muted)}.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,#c7d2fe,transparent 34%),linear-gradient(135deg,#0f172a,#312e81)}.auth-card{width:min(430px,100%);background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.3);border-radius:28px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.32)}.auth-logo{margin-bottom:18px;color:#fff}.auth-card h1{margin:0;font-size:30px;letter-spacing:-.04em}.login-demo{margin-top:18px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:16px;padding:13px;color:#475569;line-height:1.7}code{background:#e0e7ff;color:#3730a3;padding:2px 6px;border-radius:7px}.print-only{display:none}
@media(max-width:860px){.sidebar{position:static;width:auto}.app-shell{margin-left:0}.topbar{height:auto;align-items:flex-start;gap:14px;flex-direction:column}.container{padding:0 14px}.user-pill{width:100%;justify-content:space-between}}
@media print{body{background:#fff}.sidebar,.topbar,.footer,.no-print{display:none!important}.app-shell{margin-left:0}.container{max-width:none;margin:0;padding:0}.card{box-shadow:none;border:0}.print-only{display:block}}

/* Pencarian produk transaksi */
.transaksi-card .muted{color:#64748b;margin-top:-8px;margin-bottom:18px}
.product-picker{position:relative}
.produk-search{width:100%;padding:12px 14px;border:1px solid #dbe3ef;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.produk-search:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 4px rgba(79,70,229,.12)}
.produk-results{display:none;position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #dbe3ef;border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.18);max-height:310px;overflow:auto;padding:6px}
.produk-result-item{display:block;width:100%;text-align:left;border:0;background:#fff;padding:11px 12px;border-radius:10px;cursor:pointer;color:#0f172a}
.produk-result-item:hover{background:#eef2ff}
.produk-result-item small{color:#64748b}
.produk-empty{padding:12px;color:#ef4444}
.transaksi-table th{white-space:nowrap}

.alert-success{background:#dcfce7;color:#166534;border:1px solid #86efac;padding:12px;border-radius:14px;margin:10px 0}
.form-card{max-width:560px}
.receipt-page{background:#f1f5f9;min-height:100vh;padding:24px;font-family:Arial, sans-serif;color:#111827}
.receipt-actions{max-width:320px;margin:0 auto 16px;display:flex;gap:8px;justify-content:center}
.receipt{width:300px;margin:0 auto;background:#fff;padding:14px 12px;border-radius:10px;box-shadow:0 15px 40px rgba(15,23,42,.18);font-size:12px;line-height:1.45}
.receipt-header{text-align:center}.receipt-header h2{font-size:18px;margin:0 0 4px;letter-spacing:1px}.receipt-header p{margin:0;color:#475569}.receipt-line{border-top:1px dashed #111827;margin:10px 0}.receipt-item{margin:7px 0}.receipt-row{display:flex;justify-content:space-between;gap:12px}.receipt-total{font-weight:800;font-size:14px}.receipt-footer{text-align:center;margin-top:10px}.receipt-footer p{margin:0 0 3px;font-weight:700}
@media print{body.receipt-page{background:#fff;padding:0}.receipt{box-shadow:none;border-radius:0;width:58mm;margin:0;padding:0 4mm;font-size:11px}.receipt-actions,.no-print{display:none!important}@page{size:58mm auto;margin:4mm}}

/* Fix dropdown pencarian produk tertutupi elemen lain */
.transaksi-card,
.transaksi-card form,
.transaksi-card .table-wrap,
.transaksi-table,
.transaksi-table tbody,
.transaksi-table tr,
.transaksi-table td{
  overflow: visible !important;
}
.transaksi-table .item-row td{
  position: relative;
}
.transaksi-table .item-row:focus-within{
  position: relative;
  z-index: 999;
}
.product-picker{
  position: relative;
  z-index: 1000;
}
.product-picker:focus-within{
  z-index: 9999;
}
.produk-results{
  z-index: 99999 !important;
  top: calc(100% + 8px);
  min-width: 100%;
  box-shadow: 0 24px 60px rgba(15,23,42,.24);
}
.produk-result-item{
  position: relative;
  z-index: 100000;
}