:root{
  --primary:#1F2933; --secondary:#8C6A3B; --accent:#C9A66B;
  --bg:#F7F5F0; --card:#fff; --text:#222; --muted:#6B6B6B; --border:#E5E1D8;
  --ok:#2E7D4F; --okbg:#E6F4EC; --warn:#9A6B00; --warnbg:#FFF4D6; --bad:#B42318; --badbg:#FDECEA;
  --font:"Noto Sans Lao","Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg);line-height:1.5}
a{color:var(--secondary);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:22px;margin:0 0 4px}
h2{font-size:17px;margin:0 0 12px}
h3{font-size:15px;margin:0 0 8px}
.small{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}
.r{text-align:right}
.c{text-align:center}

.topbar{position:fixed;top:0;left:0;right:0;height:54px;background:var(--primary);color:#fff;display:flex;align-items:center;gap:14px;padding:0 16px;z-index:20}
.brand{color:#fff;display:flex;align-items:center;gap:10px;font-size:15px}
.brand:hover{text-decoration:none}
.logo{width:32px;height:32px;border-radius:8px;background:var(--accent);color:var(--primary);display:grid;place-items:center;font-weight:700;font-family:Georgia,serif;font-size:18px}
.userbox{margin-left:auto;font-size:13px;display:flex;gap:8px;align-items:center}
.userbox a{color:var(--accent)}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
.sidenav{position:fixed;top:54px;bottom:0;left:0;width:200px;background:#fff;border-right:1px solid var(--border);padding:10px 0;overflow-y:auto;z-index:15}
.sidenav a{display:flex;align-items:center;gap:6px;padding:9px 18px;color:var(--text);border-left:3px solid transparent}
.sidenav a:hover{background:var(--bg);text-decoration:none}
.sidenav a.on{border-left-color:var(--secondary);background:#FBF8F2;color:var(--secondary);font-weight:600}
.dot{background:var(--bad);color:#fff;border-radius:10px;font-size:11px;padding:0 7px;margin-left:auto}
.main{margin:54px 0 0 200px;padding:20px 24px 60px;max-width:1400px}
.main.nologin{margin:0 auto;padding-top:60px;max-width:420px}

.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:16px}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.kpi .v{font-size:22px;font-weight:700;font-family:Inter,var(--font)}
.kpi .l{font-size:12px;color:var(--muted)}
.kpi.bad .v{color:var(--bad)} .kpi.warn .v{color:var(--warn)} .kpi.good .v{color:var(--ok)}

.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
th{background:#FBF8F2;font-weight:600;font-size:12px;color:#5a4a33;text-align:left;white-space:nowrap;position:sticky;top:0}
tbody tr:hover{background:#FDFBF7}
td.num,th.num{text-align:right;font-family:Inter,var(--font);font-variant-numeric:tabular-nums}
tr.total td{font-weight:700;background:#FBF8F2}

.badge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;white-space:nowrap}
.b-ok{background:var(--okbg);color:var(--ok)} .b-warn{background:var(--warnbg);color:var(--warn)}
.b-urgent{background:var(--badbg);color:var(--bad)} .b-mute{background:#EEE;color:#555}
.b-star{background:#E6F4EC;color:#1d6b40} .b-horse{background:#E7EEF9;color:#24508f} .b-puzzle{background:#FFF4D6;color:#8a5d00} .b-dog{background:#FDECEA;color:#9b1c13}

.flash{padding:10px 14px;border-radius:8px;margin-bottom:12px}
.f-ok{background:var(--okbg);color:var(--ok)} .f-err{background:var(--badbg);color:var(--bad)} .f-warn{background:var(--warnbg);color:var(--warn)}

form.inline{display:inline}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
input,select,textarea{font-family:inherit;font-size:14px;padding:7px 9px;border:1px solid #D5CFC2;border-radius:6px;background:#fff;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
input.qty{width:90px;text-align:right}
.fields{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:12px}
.filters>div{min-width:140px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:6px;border:1px solid var(--primary);background:var(--primary);color:#fff;cursor:pointer;font-family:inherit;font-size:14px;white-space:nowrap}
.btn:hover{text-decoration:none;opacity:.92}
.btn.gold{background:var(--secondary);border-color:var(--secondary)}
.btn.ghost{background:#fff;color:var(--primary);border-color:#cfc8b8}
.btn.danger{background:#fff;color:var(--bad);border-color:#f0b4ad}
.btn.sm{padding:4px 9px;font-size:12px}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:14px;flex-wrap:wrap}
.tabs a{padding:8px 14px;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;color:var(--muted)}
.tabs a.on{background:#fff;border-color:var(--border);color:var(--primary);font-weight:600;margin-bottom:-1px}
.bar{height:8px;background:#EEE;border-radius:4px;overflow:hidden;min-width:60px}
.bar>span{display:block;height:100%;background:var(--secondary)}
.loginbox{background:#fff;border:1px solid var(--border);border-radius:12px;padding:28px}
.loginbox .logo{width:48px;height:48px;font-size:26px;margin:0 auto 10px}
.hint{background:#FBF8F2;border:1px dashed #D9CBB0;padding:10px 12px;border-radius:8px;font-size:13px}
.row-off td{opacity:.5}
.search-pop{position:absolute;z-index:30;background:#fff;border:1px solid var(--border);border-radius:6px;max-height:260px;overflow:auto;box-shadow:0 6px 18px rgba(0,0,0,.1);min-width:280px}
.search-pop div{padding:7px 10px;cursor:pointer;border-bottom:1px solid #f2eee6}
.search-pop div:hover,.search-pop div.hl{background:#FBF8F2}
.rel{position:relative}

@media (max-width:900px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
}
@media (max-width:760px){
  .menu-btn{display:block}
  .userbox{display:none}
  .sidenav{transform:translateX(-100%);transition:transform .2s;width:240px;box-shadow:4px 0 16px rgba(0,0,0,.1)}
  body.nav-open .sidenav{transform:none}
  body:not(.nav-open) .sidenav{box-shadow:none}
  .main{margin-left:0;padding:16px 12px 60px}
  th,td{padding:7px 7px}
  .hide-sm{display:none}
  input.qty{width:72px}
}
@media print{
  .topbar,.sidenav,.no-print,.filters{display:none!important}
  .main{margin:0;padding:0}
  .card{border:0;padding:0}
}