/* ===== ระบบควบคุมสต็อกสินค้า — สไตล์หลัก ===== */
:root{
  --bg:#f4f6fa; --card:#fff; --ink:#16202e; --muted:#6b7a90; --line:#e2e7f0;
  --brand:#0f5a8f; --brand-dark:#0b466f; --brand-soft:#e8f1f9;
  --green:#1a7f4b; --green-soft:#e6f5ed; --red:#c0392b; --red-soft:#fdecea;
  --amber:#b7791f; --amber-soft:#fdf3e2; --violet:#6b3fa0; --violet-soft:#f1ebfa;
  --radius:10px; --shadow:0 1px 3px rgba(16,32,56,.08), 0 8px 24px rgba(16,32,56,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:"Noto Sans Thai","IBM Plex Sans Thai",-apple-system,BlinkMacSystemFont,"Sarabun","Thonburi","Segoe UI",sans-serif;
  background:var(--bg); color:var(--ink); font-size:14.5px; line-height:1.55;
}
#app{display:flex; min-height:100vh}

/* ---------- Sidebar ---------- */
.sidebar{width:246px; flex:0 0 246px; background:#0d2136; color:#c9d6e5; display:flex; flex-direction:column; position:sticky; top:0; height:100vh}
.brand{display:flex; gap:10px; align-items:center; padding:18px 16px; border-bottom:1px solid rgba(255,255,255,.08)}
.brand-icon{font-size:26px}
.brand-title{color:#fff; font-weight:700; font-size:16px; line-height:1.2}
.brand-sub{font-size:11.5px; color:#8fa5bd; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:170px}
#nav{flex:1; overflow-y:auto; padding:10px 8px}
.nav-group{font-size:11px; letter-spacing:.06em; color:#6f88a3; padding:12px 10px 5px; text-transform:uppercase}
#nav a{display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:8px; color:#c9d6e5; text-decoration:none; font-size:14px; margin-bottom:1px}
#nav a span{width:18px; text-align:center}
#nav a:hover{background:rgba(255,255,255,.07); color:#fff}
#nav a.active{background:var(--brand); color:#fff; font-weight:600}
.sidebar-foot{padding:12px 14px; border-top:1px solid rgba(255,255,255,.08)}
.sidebar-foot label{display:block; font-size:11px; color:#8fa5bd; margin-bottom:4px}
.sidebar-foot select{width:100%; background:#16304a; color:#fff; border:1px solid #27455f; border-radius:7px; padding:6px 8px; font-family:inherit; font-size:13px}

/* ---------- Main ---------- */
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding:18px 26px 14px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.topbar h1{margin:0; font-size:20px; font-weight:700}
.crumb{font-size:12.5px; color:var(--muted); margin-top:2px}
.topbar-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.view{padding:20px 26px 60px; flex:1}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:7px 13px; border-radius:8px; font-size:13.5px; font-family:inherit; cursor:pointer; text-decoration:none; white-space:nowrap}
.btn:hover{background:#f5f8fc; border-color:#c9d4e3}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600}
.btn-primary:hover{background:var(--brand-dark); border-color:var(--brand-dark)}
.btn-success{background:var(--green); border-color:var(--green); color:#fff; font-weight:600}
.btn-success:hover{filter:brightness(.92)}
.btn-danger{background:#fff; border-color:#e6b7b1; color:var(--red)}
.btn-danger:hover{background:var(--red-soft)}
.btn-sm{padding:4px 9px; font-size:12.5px; border-radius:6px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-link{background:none;border:none;color:var(--brand);cursor:pointer;font-family:inherit;font-size:13px;padding:2px 4px;text-decoration:underline}

/* ---------- Cards / layout ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:18px}
.card-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.card-head h2{margin:0; font-size:15.5px; font-weight:700}
.card-head .sub{font-size:12px; color:var(--muted); font-weight:400}
.card-body{padding:16px}
.card-body.tight{padding:0}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.g2,.g3,.g4{grid-template-columns:1fr} .sidebar{display:none}}

/* ---------- Stat tiles ---------- */
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow)}
.stat .label{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px}
.stat .value{font-size:26px; font-weight:700; margin-top:6px; letter-spacing:-.5px}
.stat .foot{font-size:12px; color:var(--muted); margin-top:2px}
.stat.warn .value{color:var(--amber)} .stat.bad .value{color:var(--red)} .stat.good .value{color:var(--green)}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
table.tbl th{background:#f7f9fc; text-align:left; font-weight:600; color:#475869; padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0}
table.tbl td{padding:8px 10px; border-bottom:1px solid #eef2f7; vertical-align:middle}
table.tbl tbody tr:hover{background:#f9fbfe}
table.tbl td.num, table.tbl th.num{text-align:right; font-variant-numeric:tabular-nums}
table.tbl td.ctr, table.tbl th.ctr{text-align:center}
table.tbl tfoot td{font-weight:700; background:#f7f9fc; border-top:2px solid var(--line)}
.empty{padding:36px; text-align:center; color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px}

/* ---------- Forms ---------- */
.field{display:flex; flex-direction:column; gap:4px; margin-bottom:12px}
.field label{font-size:12.5px; color:#44566b; font-weight:600}
.field .hint{font-size:11.5px; color:var(--muted); font-weight:400}
input,select,textarea{font-family:inherit; font-size:13.5px; padding:7px 9px; border:1px solid #ccd6e2; border-radius:7px; background:#fff; color:var(--ink); width:100%}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,90,143,.12)}
input[readonly]{background:#f4f6fa; color:#5b6b7d}
textarea{resize:vertical; min-height:60px}
.req::after{content:" *"; color:var(--red)}
.form-grid{display:grid; gap:0 14px}
.filters{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.filters .field{margin-bottom:0; min-width:130px}
.chk{display:flex; align-items:center; gap:7px; font-size:13.5px}
.chk input{width:auto}

/* ---------- Badges ---------- */
.badge{display:inline-block; padding:2px 8px; border-radius:20px; font-size:11.5px; font-weight:600; white-space:nowrap}
.b-draft{background:#eef1f6; color:#5b6b7d}
.b-posted{background:var(--green-soft); color:var(--green)}
.b-cancel{background:var(--red-soft); color:var(--red)}
.b-in{background:var(--brand-soft); color:var(--brand)}
.b-out{background:var(--amber-soft); color:var(--amber)}
.b-adj{background:var(--violet-soft); color:var(--violet)}
.b-low{background:var(--red-soft); color:var(--red)}
.b-ok{background:var(--green-soft); color:var(--green)}
.b-cat{background:#eef1f6; color:#44566b}
.text-red{color:var(--red)} .text-green{color:var(--green)} .text-amber{color:var(--amber)} .text-muted{color:var(--muted)}

/* ---------- Modal ---------- */
.modal-bg{position:fixed; inset:0; background:rgba(13,33,54,.45); display:flex; align-items:flex-start; justify-content:center; padding:36px 16px; z-index:100; overflow-y:auto}
.modal{background:#fff; border-radius:12px; width:100%; max-width:900px; box-shadow:0 20px 60px rgba(0,0,0,.25); animation:pop .12s ease-out}
.modal.sm{max-width:480px} .modal.lg{max-width:1150px}
@keyframes pop{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line)}
.modal-head h3{margin:0; font-size:16px}
.modal-body{padding:18px; max-height:calc(100vh - 220px); overflow-y:auto}
.modal-foot{display:flex; justify-content:flex-end; gap:8px; padding:13px 18px; border-top:1px solid var(--line); background:#fafbfd; border-radius:0 0 12px 12px}
.x{background:none; border:none; font-size:22px; cursor:pointer; color:var(--muted); line-height:1; padding:0 4px}

/* ---------- Toast ---------- */
.toasts{position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:200}
.toast{background:#0d2136; color:#fff; padding:11px 15px; border-radius:9px; box-shadow:0 8px 26px rgba(0,0,0,.28); font-size:13.5px; max-width:420px; white-space:pre-line; animation:slide .16s ease-out}
.toast.ok{background:var(--green)} .toast.err{background:var(--red)} .toast.warn{background:var(--amber)}
@keyframes slide{from{transform:translateX(16px);opacity:0}to{transform:none;opacity:1}}

/* ---------- Section / misc ---------- */
.section-title{font-size:13px; font-weight:700; color:#44566b; margin:16px 0 8px; padding-bottom:5px; border-bottom:1px solid var(--line)}
.section-title:first-child{margin-top:0}
.bar{height:8px; background:#eef1f6; border-radius:5px; overflow:hidden}
.bar>span{display:block; height:100%; background:var(--brand)}
.pill-row{display:flex; gap:6px; flex-wrap:wrap}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:14px; flex-wrap:wrap}
.tabs button{background:none; border:none; border-bottom:2px solid transparent; padding:8px 13px; font-family:inherit; font-size:13.5px; cursor:pointer; color:var(--muted)}
.tabs button.active{color:var(--brand); border-bottom-color:var(--brand); font-weight:700}
.alert{padding:10px 13px; border-radius:8px; font-size:13px; margin-bottom:12px; white-space:pre-line}
.alert-warn{background:var(--amber-soft); color:#7a5312; border:1px solid #f0dcb4}
.alert-info{background:var(--brand-soft); color:var(--brand-dark); border:1px solid #cfe2f0}
.alert-err{background:var(--red-soft); color:var(--red); border:1px solid #f2c8c2}

/* ---------- Print (แบบฟอร์มตามระบบ ISO) ---------- */
.print-only{display:none}
@media print{
  body{background:#fff; font-size:12px}
  .no-print,.sidebar,.topbar{display:none !important}
  #view{display:none}
  .print-only{display:block}
  @page{size:A4; margin:12mm 10mm}
}
.doc-sheet{color:#000; font-size:12px}
.doc-sheet+.doc-sheet{page-break-before:always}
.iso-head{width:100%; border-collapse:collapse; margin-bottom:10px}
.iso-head td{border:1px solid #000; padding:5px 8px; vertical-align:middle}
.iso-head .co{font-size:14px; font-weight:700}
.iso-head .ti{font-size:15px; font-weight:700; text-align:center}
.iso-head .meta{font-size:11px; white-space:nowrap}
.doc-info{width:100%; border-collapse:collapse; margin-bottom:8px; font-size:11.5px}
.doc-info td{padding:2px 6px; vertical-align:top}
.doc-info .lb{color:#333; width:90px}
table.print-tbl{width:100%; border-collapse:collapse; font-size:11px}
table.print-tbl th,table.print-tbl td{border:1px solid #000; padding:4px 5px}
table.print-tbl th{background:#eee; text-align:center; font-weight:700}
table.print-tbl td.num{text-align:right}
table.print-tbl td.ctr{text-align:center}
.sign-row{display:flex; gap:14px; margin-top:26px}
.sign-box{flex:1; text-align:center; font-size:11px}
.sign-line{border-bottom:1px dotted #000; height:34px; margin-bottom:4px}
.iso-foot{margin-top:12px; font-size:10px; color:#333; display:flex; justify-content:space-between; border-top:1px solid #999; padding-top:4px}

/* ---------- หน้าเข้าสู่ระบบ ---------- */
.login-screen{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(145deg,#0d2136 0%,#14395c 60%,#0f5a8f 100%); z-index:300; overflow-y:auto}
.login-card{background:#fff; border-radius:14px; padding:30px 28px 22px; width:100%; max-width:380px;
  box-shadow:0 24px 70px rgba(0,0,0,.32); text-align:center}
.login-logo{font-size:40px; line-height:1}
.login-card h1{font-size:20px; margin:8px 0 2px}
.login-sub{font-size:12px; color:var(--muted); letter-spacing:.04em; margin-bottom:20px}
.login-card .field{text-align:left}
.login-card .field label{font-size:13px}
.login-card input{padding:9px 11px; font-size:14.5px}
.login-foot{margin-top:16px; font-size:11.5px; color:var(--muted); line-height:1.5}

/* ---------- แถบผู้ใช้งาน ---------- */
.user-row{display:flex; gap:9px; align-items:center; margin-bottom:9px}
.user-avatar{width:32px; height:32px; flex:0 0 32px; border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px}
.user-name{color:#fff; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.user-role{color:#8fa5bd; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.user-actions{display:flex; gap:6px}
.user-actions .btn{flex:1; justify-content:center; background:#16304a; border-color:#27455f; color:#c9d6e5; font-size:11.5px; padding:5px 4px}
.user-actions .btn:hover{background:#1d3d5e; color:#fff}