* { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, sans-serif; }
body { background: #f4f6f9; color: #111827; }
a { color: inherit; text-decoration: none; }
header { background: #111827; color: #fff; padding: 16px 24px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
header h1 { font-size:20px; }
.user-info { font-size:14px; color:#d1d5db; margin-bottom:8px; }
.container { display:flex; min-height:calc(100vh - 70px); }
aside { width:240px; background:#1f2937; color:#fff; padding:20px 12px; }
aside a { display:block; width:100%; padding:12px; margin-bottom:8px; border-radius:8px; background:#374151; color:#fff; font-size:14px; }
aside a:hover, aside a.active { background:#2563eb; }
main { flex:1; padding:24px; overflow-x:auto; }
.card { background:#fff; padding:20px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.08); margin-bottom:20px; }
.card h2 { margin-bottom:15px; font-size:20px; }
.card h3 { margin-bottom:10px; font-size:17px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-bottom:20px; }
.stat { padding:18px; border-radius:12px; background:#fff; border-left:6px solid #2563eb; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.stat h3 { font-size:14px; color:#555; margin-bottom:8px; }
.stat p { font-size:28px; font-weight:bold; }
label { display:block; font-weight:bold; margin-bottom:6px; font-size:14px; }
input, select, textarea { width:100%; padding:10px; border:1px solid #d1d5db; border-radius:8px; margin-bottom:14px; font-size:14px; background:#fff; }
textarea { min-height:80px; resize:vertical; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; }
.btn { border:none; padding:10px 14px; border-radius:8px; cursor:pointer; font-size:14px; margin:3px; display:inline-block; text-align:center; }
.btn-primary { background:#2563eb; color:#fff; }
.btn-success { background:#16a34a; color:#fff; }
.btn-danger { background:#dc2626; color:#fff; }
.btn-warning { background:#f59e0b; color:#fff; }
.btn-dark { background:#111827; color:#fff; }
.btn-light { background:#e5e7eb; color:#111827; }
.btn-block { width:100%; }
table { width:100%; border-collapse:collapse; margin-top:15px; font-size:14px; background:#fff; }
th, td { padding:12px; border-bottom:1px solid #e5e7eb; text-align:left; vertical-align:top; }
th { background:#f3f4f6; font-weight:bold; }
tr:hover { background:#f9fafb; }
.badge { padding:5px 9px; border-radius:999px; font-size:12px; font-weight:bold; display:inline-block; }
.habis { background:#fee2e2; color:#991b1b; }
.kritikal { background:#ffedd5; color:#9a3412; }
.rendah { background:#fef9c3; color:#854d0e; }
.cukup { background:#dcfce7; color:#166534; }
.imported, .adjust { background:#dbeafe; color:#1e40af; }
.hidden { display:none !important; }
.login-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:linear-gradient(135deg,#111827,#2563eb); }
.login-box { width:100%; max-width:420px; background:white; padding:28px; border-radius:16px; box-shadow:0 10px 25px rgba(0,0,0,.2); }
.login-box h1 { margin-bottom:8px; text-align:center; }
.login-box p { text-align:center; color:#555; margin-bottom:18px; font-size:14px; }
.note { background:#eff6ff; border-left:5px solid #2563eb; padding:12px; border-radius:8px; font-size:14px; margin-bottom:15px; }
.alert { padding:12px; border-radius:8px; margin-bottom:15px; background:#ecfdf5; border-left:5px solid #16a34a; }
.alert-error { background:#fef2f2; border-left-color:#dc2626; }
.search-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; align-items:center; }
.search-row input, .search-row select { max-width:300px; margin-bottom:0; }
.small { font-size:12px; color:#6b7280; }
.right { text-align:right; }
.item-selector { position:relative; margin-bottom:14px; }
.item-selected { width:100%; background:#fff; border:2px solid #d1d5db; border-radius:12px; padding:14px; text-align:left; cursor:pointer; display:flex; justify-content:space-between; gap:10px; align-items:center; }
.item-selected strong { display:block; font-size:16px; margin-bottom:4px; }
.item-selected span { color:#6b7280; font-size:13px; }
.item-selected:after { content:"▼"; font-size:12px; color:#6b7280; }
.item-dropdown { border:1px solid #d1d5db; border-radius:12px; background:#fff; padding:10px; margin-top:8px; box-shadow:0 10px 25px rgba(0,0,0,.12); z-index:10; }
.item-options { max-height:320px; overflow-y:auto; display:grid; gap:8px; }
.item-option { width:100%; border:1px solid #e5e7eb; background:#fff; border-radius:10px; padding:12px; text-align:left; cursor:pointer; }
.item-option:hover, .item-option.selected { border-color:#2563eb; background:#eff6ff; }
.item-option strong { display:block; margin-bottom:5px; }
.item-option span { color:#6b7280; font-size:13px; }
.item-filter { margin-bottom:10px; }
.table-wrap { overflow-x:auto; }
@media (max-width:800px) {
  .container { flex-direction:column; }
  aside { width:100%; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:12px; }
  aside a { margin-bottom:0; text-align:center; }
  main { padding:15px; }
  header { padding:14px 18px; }
  .form-grid { grid-template-columns:1fr; gap:8px; }
  table { font-size:13px; min-width:700px; }
  th, td { padding:8px; }
  .search-row input, .search-row select { max-width:100%; }
  .item-options { max-height:360px; }
}
@media print {
  header, aside, .no-print, button, .btn { display:none !important; }
  main { padding:0; }
  .card { box-shadow:none; border:1px solid #ddd; }
}