:root{
  --bg:#f2f3f1; --surface:#fff; --text:#181c1d; --muted:#5c6467; --border:#dde0dc;
  --accent:#276b66; --good:#2e8b57; --good-soft:#e6f3ec; --warn:#b9791e; --warn-soft:#faf0dd;
  --critical:#b53d34; --critical-soft:#fbe8e6;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;}
main{max-width:1180px; margin:0 auto; padding:20px;}
a{color:var(--accent);}
.muted{color:var(--muted);}
.small{font-size:12px;}
.inline{display:inline;}
.link{background:none;border:none;color:var(--accent);cursor:pointer;padding:0;font:inherit;text-decoration:underline;}

.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--border);}
.brand{font-weight:700;}
.topbar nav a{margin-right:16px; text-decoration:none; font-weight:600;}
.who{display:flex; align-items:center; gap:8px; font-size:13px;}
.role{background:var(--border); padding:2px 8px; border-radius:999px; font-size:11px; text-transform:uppercase;}

.login-wrap{display:flex; justify-content:center; padding-top:60px;}
.login-card{width:320px; padding:24px; display:flex; flex-direction:column; gap:12px;}
.login-card h1{margin:0; font-size:20px;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:10px;}
label{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600;}
input, select, button{font:inherit; padding:8px 10px; border:1px solid var(--border); border-radius:6px;}
button{cursor:pointer; background:var(--accent); color:#fff; border:none; font-weight:600;}
button.small{padding:5px 9px; font-size:12px;}
button.good{background:var(--good);}
button.warn{background:var(--critical);}
.error{color:var(--critical); font-weight:600;}

.kpis{display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 16px; min-width:140px;}
.kpi .label{font-size:11px; text-transform:uppercase; color:var(--muted); font-weight:700;}
.kpi .value{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums;}

.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.filters input[type=text]{flex:1; min-width:180px;}

.table-wrap{overflow-x:auto; background:var(--surface); border:1px solid var(--border); border-radius:10px;}
table{width:100%; border-collapse:collapse; font-size:13px;}
thead th{text-align:left; font-size:11px; text-transform:uppercase; color:var(--muted); padding:10px; border-bottom:1px solid var(--border); white-space:nowrap;}
tbody td{padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
.num{text-align:right; font-variant-numeric:tabular-nums;}
.item-code{font-weight:700;}
.adjust-form{display:flex; gap:6px;}
.adjust-form input{width:80px;}
.actions{display:flex; gap:6px;}
.empty{color:var(--muted); text-align:center; padding:24px;}

.pill{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase;}
.pill.pending{background:var(--warn-soft); color:var(--warn);}
.pill.approved{background:var(--good-soft); color:var(--good);}
.pill.rejected{background:var(--critical-soft); color:var(--critical);}
tr.approved{background:var(--good-soft);}
tr.rejected{background:var(--critical-soft); opacity:.7;}