/* skin.css — หน้าตาแบบ Order Booking (v1.8: แถบบนน้ำตาลเข้ม · เมนูซ้ายขาว · การ์ดเงา · หัวตารางน้ำตาล · Roboto)
   ชั้นแสดงผลล้วน: โหลดหลัง <style> ของแต่ละหน้า (ทับค่าเดิม) · id/ปุ่ม/endpoint เดิมทุกตัว
   โครงเมนูซ้ายสร้างใน shared/app.js (scrShell) เฉพาะหน้าที่มี <body data-shell="nav"> */
:root{
  --bte:#7a5c3e; --bte-dark:#5d452e; --bte-soft:#f6efe2;
  --bg:#fafafa; --line:#ececec; --muted:#757575; --txt:#212121; --outline:#bdbdbd;
  --ok:#2e7d32; --err:#c62828; --warn:#ef6c00; --radius:6px; --shadow:0 1px 4px rgba(0,0,0,.12);
}
body{font-family:'Roboto','Segoe UI',system-ui,-apple-system,'Noto Sans Thai','Sarabun',sans-serif;background:var(--bg);color:var(--txt)}
[id]{scroll-margin-top:calc(var(--tbh,52px) + 12px)}
/* ของที่ติดจอในหน้า (top:0 เดิม) → ใต้แถบบนที่ติดจอ */
.actbar{top:var(--tbh,52px)!important}

/* ── แถบบน (ทุกหน้า) ── */
.topbar{position:sticky;top:0;z-index:60;background:#2a2118;color:#fff;min-height:52px;padding:6px 20px;gap:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);border-radius:0}
.topbar .bn{font-family:'Roboto Mono',ui-monospace,Menlo,monospace;font-weight:700;letter-spacing:1px;font-size:14px;white-space:nowrap}
.topbar .bt{font-size:13px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.topbar b{font-size:14px}
.topbar a,.topbar button{background:transparent;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.28);border-radius:5px;
  padding:6px 12px;font-size:12.5px;font-family:inherit}
.topbar a:hover,.topbar button:hover{background:rgba(255,255,255,.12);color:#fff}
.topbar #userbox{font-size:12px;color:rgba(255,255,255,.85)}
.topbar .sbtog{border:0;width:34px;height:34px;padding:0;margin:0 2px 0 -8px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.topbar .sbtog svg{width:20px;height:20px;fill:currentColor}
.blogo{border-color:rgba(255,255,255,.85)!important}

/* ── โครงเมนูซ้าย (หน้ารายการ/ตั้งค่า) ── */
.app{display:flex;min-height:calc(100vh - 52px)}
.sidebar{width:240px;background:#fff;border-right:1px solid #eee;box-shadow:2px 0 6px rgba(0,0,0,.05);padding:8px 0 0;
  position:sticky;top:var(--tbh,52px);height:calc(100vh - var(--tbh,52px));flex-shrink:0;display:flex;flex-direction:column}
.sidebar .nav{flex:1;overflow-y:auto}
.sidebar .sec{padding:14px 20px 5px;font-size:13.5px;font-weight:600;color:#212121}
.sidebar .nav a{display:flex;align-items:center;gap:12px;padding:9px 20px;color:#616161;text-decoration:none;font-size:13.2px;
  border-right:3px solid transparent}
.sidebar .nav a:hover{background:#f8f4ec;color:#4a3b28}
.sidebar .nav a.active{background:#f6efe2;color:#5d452e;border-right-color:#5d452e;font-weight:700}
.sidebar .ic{width:20px;display:flex;align-items:center;justify-content:center;color:#757575;flex:none}
.sidebar .ic svg{width:18px;height:18px;fill:currentColor}
.sidebar .nav a.active .ic{color:#5d452e}
.sidebar .foot{padding:12px 20px;font-size:10.5px;color:#9e9e9e;border-top:1px solid #eee}
.sidebar .foot a{color:#9e9e9e;text-decoration:none}
.sidebar .foot a:hover{color:#5d452e;text-decoration:underline}
.main{flex:1;min-width:0;padding:22px 30px 30px}
.main > .wrap{max-width:none;margin:0;padding:0}
.pagehead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 20px}
.pagehead h2{margin:0;font-size:24px;font-weight:400;color:#212121}
/* หุบ (ค่าเริ่มต้น · จอกว้าง): แถบไอคอน 78px + ชื่อสั้นใต้ไอคอน แบบ Order Booking */
.sidebar .lbs{display:none}
@media(min-width:1001px){
  body.navmini .sidebar{width:78px}
  body.navmini .sidebar .sec,body.navmini .sidebar .lb,body.navmini .sidebar .foot{display:none!important}
  body.navmini .sidebar .lbs{display:block;max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.navmini .sidebar .nav{padding-top:6px}
  body.navmini .sidebar .nav a{flex-direction:column;gap:4px;padding:9px 2px 8px;font-size:10.8px;line-height:1.2;text-align:center;
    justify-content:center;border-right:0}
  body.navmini .sidebar .ic{width:44px;height:30px;border-radius:15px}
  body.navmini .sidebar .nav a.active{background:transparent;color:#5d452e;font-weight:700}
  body.navmini .sidebar .nav a.active .ic,body.navmini .sidebar .nav a:hover .ic{background:#efe4d2;color:#5d452e}
  body.navmini .sidebar .nav a:hover{background:transparent}
}
@media(max-width:1000px){
  .sidebar{display:none}
  .main{padding:16px}
  body.sb-on .sidebar{display:flex;position:fixed;left:0;top:var(--tbh,52px);z-index:70;box-shadow:4px 0 16px rgba(0,0,0,.18)}
}

/* ── เนื้อหา: การ์ดเงา ไม่มีเส้นขอบ ── */
.card,.listcard,.toolbar{border:none!important;border-radius:var(--radius)!important;box-shadow:var(--shadow)!important;background:#fff}
h2{font-weight:500;color:#212121}
.phead h1{font-size:24px;font-weight:400;color:#212121;letter-spacing:0}
.phead .sub,.hint{color:var(--muted)}

/* ตาราง: หัวน้ำตาลเข้ม · แถวสลับสี · เส้นคั่นจาง */
table.li th{background:#3e2f20!important;color:#fff!important;font-weight:500;font-size:12.3px;letter-spacing:.2px;text-transform:none;
  border-bottom:none!important;padding:10px 13px}
table.li td{border-bottom:1px solid #f0f0f0}
:where(table.li tbody tr:nth-child(even)) td{background:#fafafa}
table.li tbody tr:hover td{background:#f6efe2}

/* ตารางในหน้าที่มีเมนูซ้าย (ราคากลาง · STD-BOM · ตรวจ QERP) — หัวน้ำตาลเหมือนตารางรายการ */
.main table.it{width:100%;border-collapse:collapse}
.main table.it th{background:#3e2f20;color:#fff;font-weight:500;padding:9px 10px;text-align:left;border:0}
.main table.it td{padding:7px 10px;border-bottom:1px solid #f0f0f0}
.main table.it tr:hover td{background:#f6efe2}

/* ช่องกรอกแบบ outlined */
input,select,textarea{border:1px solid var(--outline);border-radius:5px;color:#212121}
input:focus,select:focus,textarea:focus{outline:none;border-color:#5d452e;box-shadow:0 0 0 1px #5d452e}
input[type=checkbox],input[type=radio]{accent-color:#5d452e}

/* ปุ่ม */
.btn,.cta{border-radius:6px!important;box-shadow:none!important;transform:none!important}
.btn:hover,.cta:hover{background:var(--bte-dark)}
.btn.sec{background:#fff;color:#424242;border:1px solid var(--outline)}
.btn.sec:hover{background:#fff;color:#5d452e;border-color:#5d452e}
.pgbtn{border-color:var(--outline)!important;border-radius:5px!important}

/* ป้ายสถานะทึบ ตัวขาว (แบบ Order) */
.badge,.st{border-radius:4px!important;font-size:10.5px!important;font-weight:700;padding:2px 8px!important;letter-spacing:.2px}
.b-gray,.st-draft{background:#9e9e9e!important;color:#fff!important}
.b-green,.st-generated{background:#43a047!important;color:#fff!important}
.b-amber,.st-price_reviewed{background:#fb8c00!important;color:#fff!important}
.b-red,.st-cancelled{background:#e53935!important;color:#fff!important}
.b-blue,.st-priced{background:#1565c0!important;color:#fff!important}
.st-committed{background:#5d452e!important;color:#fff!important}

.banner{border-radius:var(--radius)}
#toast{background:#2d2418;border-radius:8px}
@media print{.sidebar,.topbar .sbtog{display:none!important}.main{padding:0}}