/* W365 — สไตล์หลัก (ไม่มีขั้นตอน build) */
:root {
  --pri: #0e7a3b; --pri-d: #0b6230; --nav: #043426; --nav-on: #17853e;
  --bg: #f6f8f7; --card: #fff; --tx: #0f172a; --mu: #475569; --br: #e2e8f0; --br2: #cbd5e1;
  --ok: #15803d; --ok-bg: #ecfdf5; --warn: #b45309; --warn-bg: #fffbeb; --err: #b91c1c; --err-bg: #fef2f2;
  --r: 10px; --font: "Kanit", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--tx); font: 300 15px/1.6 var(--font); }
b, strong, th { font-weight: 500; }
a { color: var(--pri); }
h1, h2 { margin: 0; }
small { color: var(--mu); font-weight: 400; }

/* โครงหน้า */
.shell { display: flex; min-height: 100vh; }
.nav { width: 240px; flex: 0 0 240px; background: var(--nav); color: #d7e7df; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px 12px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-logo { display: block; max-width: 100%; width: auto; height: auto; max-height: 44px; object-fit: contain; object-position: left center; }
.brand-name { font-size: 12px; color: #cfe3d8; line-height: 1.35; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.brand-name.big { font-size: 15px; font-weight: 500; color: #fff; }
.nav nav { flex: 1; overflow-y: auto; padding: 4px 10px; }
.nav-group { font-size: 12px; color: #8fb3a3; margin: 14px 10px 4px; letter-spacing: .3px; }
.nav-main { margin-top: 8px; color: #b9d4c7; font-weight: 500; }
.nav-toggle { display: flex; width: calc(100% - 20px); justify-content: space-between; align-items: center; background: none; border: 0; cursor: pointer; font: inherit; font-size: 12px; padding: 6px 0; text-align: left; }
.nav-toggle:hover { color: #fff; }
.nav-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s; }
.nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-ver { margin: 18px 10px 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.06); font-size: 12px; color: #b9d4c7; display: flex; flex-direction: column; }
.nav-ver small { color: #7fa192; font-size: 11px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: #d7e7df; text-decoration: none; }
.nav-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav-item:hover { background: rgba(255,255,255,.08); }
.nav-item.on { background: var(--nav-on); color: #fff; }
.me { border-top: 1px solid rgba(255,255,255,.12); padding: 10px; position: relative; }
.me-btn { width: 100%; text-align: left; background: none; border: 0; color: #fff; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; display: flex; flex-direction: column; }
.me-btn:hover { background: rgba(255,255,255,.08); }
.me-role { font-size: 12px; color: #8fb3a3; }
.me-menu { position: absolute; left: 10px; right: 10px; bottom: 64px; background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.25); overflow: hidden; }
.me-menu a, .me-menu button { display: block; width: 100%; padding: 11px 14px; color: var(--tx); text-decoration: none; background: none; border: 0; text-align: left; font: inherit; cursor: pointer; }
.me-menu a:hover, .me-menu button:hover { background: var(--bg); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--card); border-bottom: 1px solid var(--br); position: sticky; top: 0; z-index: 5; }
.top h1 { font-size: 19px; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-logo { display: inline-flex; flex: none; }
.plogo { display: block; }
.plogo-full { display: inline-flex; align-items: center; gap: 6px; }
.plogo-mark { height: 30px; width: auto; }
.plogo-word { height: 18px; width: auto; }
.plogo-stack { width: 220px; max-width: 64vw; height: auto; margin: 0 auto; }
.menu-btn { display: none; font-size: 20px; background: none; border: 1px solid var(--br2); border-radius: 8px; width: 40px; height: 40px; cursor: pointer; }
.content { padding: 20px 24px 40px; }
.nav-backdrop { display: none; }

/* การ์ด ฟอร์ม ปุ่ม */
.card { background: var(--card); border: 1px solid var(--br); border-radius: var(--r); padding: 18px; margin: 0 0 16px; }
.card.narrow { max-width: 560px; }
.card.flush { padding: 0; overflow: hidden; }
.card-title { font-size: 17px; font-weight: 500; margin-bottom: 12px; }
.pad { padding: 14px 18px; margin: 0; }
.field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; font-weight: 400; font-size: 14px; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  font: inherit; font-weight: 300; color: var(--tx); background: #fff; height: 40px; padding: 6px 10px;
  border: 1px solid var(--br2); border-radius: 8px; width: 100%;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
input:disabled, select:disabled { background: var(--bg); color: var(--mu); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--pri); }
.check { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--br2); background: #fff; color: var(--tx); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--bg); }
.btn:not(.primary):not(.danger) { background: #eaf5ee; border-color: #c6e0d0; color: var(--pri-d); box-shadow: 0 1px 2px rgba(4,52,38,.08); }
.btn:not(.primary):not(.danger):hover { background: #d9eee2; border-color: #a9d1ba; }
.btn.primary, .btn.danger { box-shadow: 0 1px 3px rgba(4,52,38,.25); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { background: #eef0f2 !important; border-color: #e2e5e9 !important; color: #9aa3ad !important; box-shadow: none !important; cursor: not-allowed; transform: none; }
.menu-btn { background: #eaf5ee !important; border-color: #c6e0d0 !important; color: var(--pri-d); }
.btn.primary { background: var(--pri); border-color: var(--pri); color: #fff; }
.btn.primary:hover { background: var(--pri-d); }
.btn.danger { background: var(--err); border-color: var(--err); color: #fff; }
.btn.block { width: 100%; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.hint { color: var(--mu); font-size: 13px; margin: 0 0 12px; }
.alert { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 11px 14px; margin: 0 0 16px; border: 1px solid; transition: opacity .4s, transform .4s; }
.alert > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.alert > div { flex: 1; min-width: 0; }
.alert.hide { opacity: 0; transform: translateY(-6px); }
.alert ul { margin: 0; padding-left: 18px; }
.alert.ok { background: var(--ok-bg); border-color: #a7f3d0; color: #065f46; }
.alert.warn { background: var(--warn-bg); border-color: #fde68a; color: #92400e; }
.alert.err { background: var(--err-bg); border-color: #fecaca; color: #991b1b; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; margin-right: 4px; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.off { background: #f1f5f9; color: var(--mu); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { background: var(--ok-bg); color: #065f46; border-radius: 999px; padding: 2px 10px; font-size: 13px; }

/* ตาราง */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--br); vertical-align: middle; }
.table thead th { font-size: 13px; color: var(--mu); background: #fafcfb; }
.table tr.group th { background: #f1f5f3; font-size: 13px; }
.table td.c { text-align: center; }
.table .empty { text-align: center; color: var(--mu); padding: 24px; }
.table.perm select { max-width: 160px; }
.matrix th, .matrix td { white-space: nowrap; }
.matrix td:first-child { white-space: normal; min-width: 220px; }
.scroll-x { overflow-x: auto; }
.toolbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.filters input { max-width: 280px; }
.filters select { max-width: 180px; }
.pager { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 14px 0; color: var(--mu); font-size: 14px; }
.pager .disabled { color: #94a3b8; }

/* หน้าล็อกอิน */
.guest { display: flex; min-height: 100vh; min-height: 100dvh; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(1200px 600px at 10% -10%, #dff5ea 0, transparent 60%), radial-gradient(900px 500px at 110% 110%, #dbeafe 0, transparent 55%), var(--bg); }
.guest-box { width: 100%; max-width: 420px; }
.guest-brand { text-align: center; margin-bottom: 18px; }
.login-card { padding: 26px 24px 18px; border-radius: 16px; box-shadow: 0 18px 40px rgba(4,52,38,.10); border-color: #e3ece7; }
.login-title { font-size: 22px; font-weight: 500; margin: 0; }
.login-sub { color: var(--mu); margin: 2px 0 16px; font-size: 14px; }
.login-help { color: var(--mu); font-size: 13px; text-align: center; margin: 14px 0 0; }
.login-card .btn.primary { height: 44px; font-size: 16px; margin-top: 4px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 64px; }
.pw-eye { position: absolute; right: 4px; top: 4px; height: 32px; padding: 0 10px; border: 0; background: none; color: var(--pri); font: inherit; font-size: 13px; cursor: pointer; border-radius: 6px; }
.pw-eye:hover { background: var(--ok-bg); }
.guest-foot { text-align: center; color: var(--mu); font-size: 12px; margin-top: 16px; }

/* กล่องยืนยัน */
.dlg { border: 0; border-radius: 16px; padding: 22px; max-width: 440px; width: calc(100% - 32px); box-shadow: 0 24px 60px rgba(4,52,38,.25); font: inherit; color: var(--tx); }
.dlg::backdrop { background: rgba(4,30,22,.45); backdrop-filter: blur(2px); }
.dlg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 500; font-size: 17px; }
.dlg-ic { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ok-bg); color: var(--pri); flex: none; }
.dlg-ic.danger { background: var(--err-bg); color: var(--err); }
.dlg-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dlg p { margin: 0 0 18px; color: var(--mu); }
.dlg .actions { justify-content: flex-end; }

/* จอเล็ก */
@media (max-width: 900px) {
  .nav { position: fixed; left: 0; top: 0; bottom: 0; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .nav { transform: none; }
  body.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 20; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .top { padding: 10px 16px; }
  .content { padding: 16px 16px 32px; }
}
@media (max-width: 640px) {
  .table:not(.matrix) thead { display: none; }
  .table:not(.matrix) tr { display: block; border-bottom: 1px solid var(--br); padding: 6px 0; }
  .table:not(.matrix) tr.group { padding: 0; }
  .table:not(.matrix) td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 14px; }
  .table:not(.matrix) td::before { content: attr(data-label); color: var(--mu); font-size: 13px; }
  .table:not(.matrix) td.empty::before { content: none; }
  .table.perm select { max-width: 150px; }
  .filters input, .filters select { max-width: none; flex: 1 1 140px; }
  .toolbar > .btn { width: 100%; }
}

/* ประวัติการแก้ไข */
.filters-card .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 12px; }
.filters-card .filters input, .filters-card .filters select { max-width: none; }
.nowrap { white-space: nowrap; }
.audit details summary { cursor: pointer; color: var(--pri); }
.diff { border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.diff th, .diff td { padding: 3px 6px; text-align: left; vertical-align: top; border: 0; }
.diff th { color: var(--mu); font-weight: 600; }
.diff .from { color: var(--err); text-decoration: line-through; }
.diff .to { color: var(--ok); }
.audit .hint { margin: 2px 0 0; }
@media (max-width: 640px) { .table.audit td { flex-wrap: wrap; } .diff { width: 100%; } }

/* ฟอร์มข้อมูลหลัก */
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
.grid2, .grid3, .grid4, .grid5 { display: grid; gap: 0 14px; }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
.span3 { grid-column: span 3; }
.radios { display: flex; gap: 16px; flex-wrap: wrap; min-height: 40px; align-items: center; }
.radios .check { margin: 0; font-weight: 400; }
input[type=radio] { width: 18px; height: 18px; accent-color: var(--pri); }
textarea { height: auto; min-height: 40px; resize: vertical; }
h3.sub { font-size: 15px; margin: 8px 0 10px; padding-top: 10px; border-top: 1px solid var(--br); }
.pick { max-height: 240px; overflow-y: auto; border: 1px solid var(--br2); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; }
.pick .check { margin: 4px 0; font-weight: 400; }
.pick-filter { margin-bottom: 8px; }
.rows .row-item { position: relative; padding: 14px 18px 4px; border-top: 1px solid var(--br); }
.rows .row-item .btn.sm { position: absolute; top: 10px; right: 14px; }
.rows .row-item:has(.btn.sm) .grid4, .rows .row-item:has(.btn.sm) .grid5 { margin-right: 56px; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.w-sm { max-width: 80px; }
.sticky-actions { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; z-index: 4; }
.card-title small { font-size: 13px; }
[hidden] { display: none !important; }
@media (max-width: 900px) {
  .grid4, .grid5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span3 { grid-column: span 2; }
}
@media (max-width: 640px) {
  .grid2, .grid3, .grid4, .grid5 { grid-template-columns: minmax(0, 1fr); }
  .span2, .span3 { grid-column: auto; }
  .rows .row-item:has(.btn.sm) .grid4, .rows .row-item:has(.btn.sm) .grid5 { margin-right: 0; margin-top: 26px; }
}
.badge.err { background: var(--err-bg); color: var(--err); }
ul.errs { margin: 0; padding-left: 18px; color: var(--err); font-size: 14px; }
.toolbar { align-items: flex-start; }
.toolbar > .btn { white-space: nowrap; }
.mono { font-family: Consolas, "Courier New", monospace; font-size: 13px; word-break: break-all; }

/* ราคา */
.r { text-align: right !important; }
.inline-form { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.inline-form input { width: auto; flex: 1 1 110px; height: 32px; }
tr.row-err td { background: #fff7f7; }
tr.row-warn td { background: #fffdf3; }
.err-text { color: var(--err); }
details > summary { cursor: pointer; color: var(--pri); }
.result-big { font-size: 28px; font-weight: 700; color: var(--pri); }

/* ใบสั่งขาย */
.so-lines input.num { text-align: right; max-width: 110px; }
.so-lines td { vertical-align: middle; }
.so-lines input[data-so-code] { max-width: 130px; }
.inline-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mu); }
.inline-label input { width: auto; }
@media (max-width: 640px) { .so-lines input.num, .so-lines input[data-so-code] { max-width: 150px; } }
.gr-lines input.num { text-align: right; max-width: 120px; }
.gr-lines input[readonly] { background: var(--bg); color: var(--mu); }
.gr-lines input[list] { max-width: 130px; }
tr.muted td { color: var(--mu); }
textarea.mono { width: 100%; }

/* จัดสรร */
.alloc-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.alloc-head .card-title { margin: 0; }
.table.alloc input.num { text-align: right; width: 90px; height: 34px; }
.table.alloc td, .table.alloc th { vertical-align: middle; }

/* KPI หน้าหลัก */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--card); border: 1px solid var(--br); border-radius: var(--r); color: inherit; text-decoration: none; }
.kpi b { font-size: 22px; }
.kpi span { font-size: 13px; color: var(--mu); }
.kpi:hover { border-color: var(--pri); }
.kpi.bad b { color: var(--err); }
.kpi.warn b { color: var(--warn); }

/* ไฟล์แนบ (สลิป) */
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.att { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--br); border-radius: var(--r); padding: 8px; background: var(--card); }
.att img { width: 100%; height: 140px; object-fit: cover; border-radius: 6px; background: var(--bg); }
.att-pdf { display: flex; align-items: center; justify-content: center; height: 140px; border-radius: 6px; background: var(--err-bg); color: var(--err); font-weight: 700; }
.att small { color: var(--mu); word-break: break-all; }


/* วันที่ไทยใต้ช่องวันที่ */
.dwrap { position: relative; display: block; flex: 1; min-width: 0; }
.field > .dwrap { flex: 0 0 auto; } /* ไม่ยืดสูงตามแถว (ข้อความวันที่จะเลื่อนลงล่างช่อง) */
.inline-label .dwrap { flex: 0 1 auto; min-width: 150px; }
.dwrap input { color: transparent !important; -webkit-text-fill-color: transparent; cursor: pointer; text-align: left; }
.dwrap input::-webkit-datetime-edit { color: transparent; }
.dval { position: absolute; left: 11px; right: 34px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dval.empty { color: #94a3b8; }
@supports (-webkit-touch-callout: none) { .dwrap input { -webkit-appearance: none; appearance: none; min-height: 40px; display: block; } }

.logo-preview { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.logo-preview figure { margin: 0; }
.logo-preview figcaption { font-size: 12px; color: var(--mu); margin-top: 4px; }
.logo-preview .on-nav { background: var(--nav); border-radius: 10px; padding: 14px 16px; width: 240px; }
.logo-preview .on-nav img { display: block; max-width: 100%; max-height: 44px; object-fit: contain; }
.logo-preview .on-paper { background: #fff; border: 1px dashed var(--br2); border-radius: 10px; padding: 12px; }
.logo-preview .on-paper img { display: block; max-width: 220px; max-height: 70px; object-fit: contain; }
.logo-preview .new { outline: 2px solid var(--warn); outline-offset: 2px; }

/* เปิดจากหน้าจอหลัก (PWA เต็มจอ): เว้นพื้นที่รอยบาก/แถบสถานะ */
@media (display-mode: standalone) {
  .top { padding-top: max(10px, env(safe-area-inset-top)); }
  .nav { padding-top: env(safe-area-inset-top); }
}
@media (max-width: 640px) {
  .plogo-word { display: none; } /* มือถือ: เฉพาะสัญลักษณ์ logo-mark */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi b { font-size: 18px; }
  .top h1 { font-size: 17px; }
}
@media (max-width: 400px) {
  .plogo-mark { height: 26px; }
  .top { gap: 8px; }
}

/* มือถือ: แถบเครื่องมือ/ตัวกรองเป็นตาราง 2 คอลัมน์ เต็มจอ ป้ายอยู่เหนือช่อง */
@media (max-width: 640px) {
  .toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .toolbar > .btn, .toolbar > a.btn { width: 100%; height: 44px; }
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: end; }
  .filters > * { min-width: 0; }
  .filters input, .filters select { max-width: none; width: 100%; height: 44px; }
  .filters .inline-label { display: flex; flex-direction: column; align-items: stretch; gap: 2px; font-size: 12px; }
  .filters .inline-label .dwrap { min-width: 0; }
  .filters .btn { width: 100%; height: 44px; }
  .filters > input:not([type=date]):not([type=month]) { grid-column: 1 / -1; }
  .filters > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .filters > input + .btn:last-child { grid-column: 1 / -1; }
  .btn { min-height: 44px; }
  .btn.sm { min-height: 34px; }
}

.demo-banner { background: #fff7ed; color: #9a3412; border-bottom: 1px solid #fed7aa; padding: 6px 16px; font-size: 13px; text-align: center; }

/* ป้ายเลขขั้นตอน Flow งานประจำวัน */
.nav-label { flex: 1; min-width: 0; }
.nav-step { flex: none; min-width: 20px; height: 20px; border-radius: 10px; background: rgba(255,255,255,.14); color: #d9f2e3; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; margin-left: 6px; }
.nav-item.on .nav-step { background: #fff; color: var(--pri-d); }
/* แท็บในหน้า */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line, #e2e8e4); margin: 0 0 14px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; border-radius: 8px 8px 0 0; color: var(--tx2, #475569); text-decoration: none; font-weight: 500; margin-bottom: -2px; border-bottom: 2px solid transparent; }
.tabs a.on { color: var(--pri-d); border-bottom-color: var(--pri); background: #eaf5ee; }
.tabs .cnt { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #f59e0b; color: #fff; font-size: 11px; line-height: 18px; text-align: center; margin-left: 4px; }

/* PL: เลือก SO */
.card-head-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.card-head-row .card-title { margin: 0; } .card-head-row .card-title small { font-weight: 400; color: var(--tx2, #475569); margin-left: 6px; }
.so-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 16px; margin: 10px 0 4px; }
.so-pick .check { align-items: flex-start; } .so-pick small { display: block; color: var(--tx2, #475569); }

.radio-row { display: flex; flex-wrap: wrap; gap: 6px 18px; min-height: 40px; align-items: center; }

/* PLK: แถบตั้งค่าปิดรอบ */
.round-bar { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; background: #fff; border: 1px solid var(--line, #e2e8e4); border-radius: 10px; padding: 8px 14px; margin: 0 0 12px; }
.round-bar .inline-form { margin: 0; } .round-bar .hint { margin: 0; }
.round-bar input[type=checkbox] { width: 18px; height: 18px; min-height: 0; flex: none; margin: 0; }
.round-bar .check { display: flex; gap: 8px; align-items: center; }

.qty-unit { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; } .qty-unit input { max-width: 130px; } .qty-unit span { min-width: 30px; text-align: left; }

/* ===== จอคอมพิวเตอร์: สัดส่วนเมนู ฟอร์ม และตาราง (2026-10-18) ===== */
@media (min-width: 901px) {
  .nav { width: 276px; flex-basis: 276px; }
  .nav-item { padding: 8px 10px; gap: 9px; font-size: 14px; line-height: 1.3; }
  .nav-group { font-size: 12px; }
}
/* ฟอร์มหลายคอลัมน์: ช่องกรอกในแถวเดียวกันตรงกันเสมอ (ป้ายที่มีคำอธิบายบรรทัดสองไม่ดันช่องลง) */
.grid2 > .field, .grid3 > .field, .grid4 > .field, .grid5 > .field { justify-content: flex-end; }
.grid2 > .field > small, .grid3 > .field > small, .grid4 > .field > small { margin-top: -2px; }
/* ตารางกรอกรายการ: ช่องเต็มความกว้างคอลัมน์ ความสูงเท่ากันทุกแถว */
.table td > :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select) { width: 100%; min-width: 96px; max-width: none; }
.so-lines input.num, .so-lines input[data-so-code], .gr-lines input.num, .gr-lines input[list] { max-width: none; }
.so-lines td, .gr-lines td, #po-lines td, #note-lines td { padding-top: 7px; padding-bottom: 7px; }
.so-lines th, .gr-lines th { white-space: nowrap; }
.table.alloc td > input.num { width: 96px; min-width: 0; }
/* จอกว้าง: ช่องตัวเลขในตารางไม่ยืดเกินจำเป็น (ชิดขวาของคอลัมน์) */
@media (min-width: 901px) {
  .so-lines td > input.num, .gr-lines td > input.num, #po-lines td > input, #note-lines td > input.num, .table td > input.num { max-width: 170px; margin-left: auto; display: block; }
  .so-lines td > input[data-so-code], .gr-lines td > input[list], #po-lines td > input[list] { max-width: 220px; margin-left: 0; }
  .gr-lines td > select { max-width: 150px; }
}
/* ช่องติ๊กในฟอร์มแบบแถวเดียว ไม่ยืดตามช่องกรอก */
.inline-form input[type=checkbox], .inline-form input[type=radio] { width: 18px; height: 18px; min-height: 0; flex: none; margin: 0; }
.inline-form .check { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }

/* ===== มือถือ: ตารางแบบการ์ด — ป้ายคอลัมน์กว้างเท่ากันทุกแถว ช่องกรอกเริ่มตรงกัน (2026-10-18) ===== */
@media (max-width: 640px) {
  /* เฉพาะช่องที่มีช่องกรอก: ป้ายกว้างคงที่ ช่องกรอกเริ่มตรงกันทุกแถว (ช่องข้อความปกติคงแบบเดิม ป้ายซ้าย-ค่าขวา) */
  .table:not(.matrix) td[data-label]:has(> input:not([type=hidden]):not([type=checkbox]):not([type=radio]), > select, > textarea, > .qty-unit, > .dwrap) { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 10px; }
  .table:not(.matrix) td[data-label]::before { text-align: left; line-height: 1.3; flex: none; max-width: 45%; }
  .table:not(.matrix) td[data-label] > :where(input:not([type=checkbox]):not([type=radio]), select, textarea, .qty-unit, .dwrap) { width: 100%; max-width: none; margin: 0; }
  .table:not(.matrix) td[data-label] > input:not(.num) { text-align: left; }
  .table:not(.matrix) td[data-label] { text-align: right; min-width: 0; overflow-wrap: anywhere; }
  .table:not(.matrix) td:not([data-label]) { display: flex; justify-content: flex-end; gap: 8px; }
  .table:not(.matrix) td.empty { display: block; text-align: center; }
  .qty-unit input { max-width: none; flex: 1; }
}
/* มือถือ: การ์ดตาราง — ตารางเป็นบล็อกเต็มกว้าง · ช่องข้อความ: ป้ายซ้ายคงที่ ค่าชิดขวาไหลต่อเนื่อง (ไม่แตกเป็นชิ้น) */
@media (max-width: 640px) {
  .table:not(.matrix), .table:not(.matrix) tbody, .table:not(.matrix) tfoot { display: block; width: 100%; }
  .table:not(.matrix) td[data-label]:not(:has(> input:not([type=hidden]):not([type=checkbox]):not([type=radio]), > select, > textarea, > .qty-unit, > .dwrap)) {
    display: block; position: relative; padding-left: calc(38% + 14px); text-align: right; min-height: 28px;
  }
  .table:not(.matrix) td[data-label]:not(:has(> input:not([type=hidden]):not([type=checkbox]):not([type=radio]), > select, > textarea, > .qty-unit, > .dwrap))::before {
    position: absolute; left: 14px; top: 4px; width: 36%; max-width: none; text-align: left;
  }
  .table:not(.matrix) tfoot tr { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; padding: 8px 14px; }
  .table:not(.matrix) tfoot td, .table:not(.matrix) tfoot th { display: inline; padding: 0; border: 0; }
}
/* ประวัติการแก้ไข: ค่ายาวตัดบรรทัด ไม่ดันตารางล้นจอ */
.table.audit { table-layout: fixed; width: 100%; }
.diff { width: 100%; table-layout: fixed; }
.diff td, .diff th, .table.audit td { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 640px) { .table:not(.matrix) td[data-label]:has(> input:not([type=hidden]):not([type=checkbox]):not([type=radio]), > select, > textarea, > .qty-unit, > .dwrap)::before { max-width: none; } }

/* ===== หน้าหลัก / ภาพรวมธุรกิจ (2026-10-18) ===== */
.dash-hello { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-hello h2 { margin: 0; font-size: 20px; font-weight: 500; }
.seg { display: inline-flex; background: var(--card); border: 1px solid var(--br2); border-radius: 999px; padding: 3px; gap: 2px; }
.seg a { padding: 6px 16px; border-radius: 999px; color: var(--mu); text-decoration: none; font-weight: 400; font-size: 14px; }
.seg a.on { background: var(--pri); color: #fff; }
.kpi .up { color: var(--ok); font-weight: 500; }
.kpi .down { color: var(--err); font-weight: 500; }
.kpi b.neg { color: var(--err); }
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-head .card-title { margin-bottom: 6px; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dash-grid > .card { margin-bottom: 16px; }
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--mu); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.sw.bar { background: #8fd1ad; }
.sw.line { height: 3px; border-radius: 2px; background: var(--nav); width: 16px; }
.chart { width: 100%; height: auto; display: block; }
.chart.chart-m { display: none; } /* ต้องอยู่หลัง .chart และเจาะจงกว่า ไม่งั้นจอคอมพิวเตอร์เห็นกราฟ 2 อัน */
.chart .grid { stroke: #e7ece9; stroke-width: 1; }
.chart .grid.zero { stroke: #b8c4bd; }
.chart .ax { font: 400 14px var(--font); fill: #7a8a82; }
.chart .bar { fill: #8fd1ad; }
.chart .pt:hover .bar { fill: var(--pri); }
.chart .pt.future .bar { fill: #e3ece7; }
.chart .hit { fill: transparent; }
.chart .line { fill: none; stroke: var(--nav); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.hbars { display: flex; flex-direction: column; gap: 8px; }
.hbar { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 14px; }
.hbar .hl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .ht { height: 12px; background: #eef3f0; border-radius: 6px; overflow: hidden; }
.hbar .ht i { display: block; height: 100%; border-radius: 6px; background: #8fd1ad; min-width: 2px; }
.hbar .hv { font-variant-numeric: tabular-nums; font-weight: 400; min-width: 90px; text-align: right; }
.hbar.ag-unbilled .ht i { background: #94a3b8; }
.hbar.ag-not_due .ht i { background: #34a56f; }
.hbar.ag-d30 .ht i { background: #f2b33d; }
.hbar.ag-d60 .ht i { background: #ec835a; }
.hbar.ag-d90 .ht i, .hbar.ag-d90p .ht i { background: #d03b3b; }
.hbar.cust .ht i { background: var(--pri); opacity: .75; }
.hbar.other { color: var(--mu); }
.plist, .todo { list-style: none; margin: 0; padding: 0; }
.plist li, .todo li a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--br); font-size: 14px; }
.plist li:first-child, .todo li:first-child a { border-top: 0; }
.plist li b, .todo li b { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plist li.good span { color: var(--ok); }
.plist li.low span, .plist li.neg b { color: var(--err); }
.todo li a { color: inherit; text-decoration: none; }
.todo li a:hover span { color: var(--pri); }
.todo li.bad b { color: var(--err); }
.ok-msg { color: var(--ok); margin: 4px 0; }
h3.sub { font-size: 15px; font-weight: 500; margin: 14px 0 8px; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (max-width: 640px) {
  .chart.chart-d { display: none; }
  .chart.chart-m { display: block; }
  .chart-m .ax { font-size: 13px; }
  .dash-hello .seg { width: 100%; }
  .seg a { flex: 1; text-align: center; padding: 8px 6px; }
  .hbar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .hbar .ht { grid-column: 1 / -1; grid-row: 2; }
  .hbar .hv { min-width: 0; }
}
.chart .dot { fill: var(--nav); stroke: #fff; stroke-width: 1.5; pointer-events: none; }
.demo-banner .demo-reset { margin-left: 10px; display: inline-block; padding: 1px 10px; border-radius: 999px; background: #c2410c; color: #fff; font-weight: 500; text-decoration: none; }
.demo-banner .demo-reset:hover { background: #9a3412; }

/* ชุดราคากลาง: ข้อความผิดใต้ช่อง, ช่องรหัสสินค้า, % เปลี่ยน */
small.err { display: block; color: var(--err); font-size: 12px; margin-top: 2px; }
.table td > input.w-code { min-width: 130px; }
.up { color: var(--ok); font-weight: 500; }
.down { color: var(--err); font-weight: 500; }
.table td[data-pl-name] { min-width: 200px; }

/* PL แบ่งซื้อตามร้าน */
.split-table tbody + tbody { border-top: 2px solid var(--br); }
.split-table td > select { min-width: 180px; }
.split-sup { margin: 0 0 14px; }
.split-sup-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--ok-bg); border-radius: 8px; }
.pad .split-sup-head { padding: 8px 12px; }
.split-sup-head .inline-label { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.so-lines td[data-so-name] { min-width: 150px; }

/* ช่องตัวเลข: แจ้งเตือนเมื่อพิมพ์ตัวอักษร */
.num-warn { display: block; color: var(--err); font-size: 12px; margin-top: 2px; font-weight: 500; text-align: left; }
input[aria-invalid="true"] { border-color: var(--err) !important; box-shadow: 0 0 0 2px var(--err-bg); }

/* ลูกค้า: สาขา → ครัว → ผู้รับ */
.kitchens { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--pri); background: var(--bg); border-radius: 8px; }
.kitchens .sub { margin: 0 0 6px; font-size: 14px; }
.kitchen-row { background: var(--card); border: 1px solid var(--br); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.kitchen-foot { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 6px; }
.receivers { margin-top: 6px; }
.sub-label { display: block; color: var(--mu); margin-bottom: 4px; }
.receiver-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; margin-bottom: 6px; padding: 0; border: 0; }
.receiver-row .err { grid-column: 1 / -1; }

/* ราคากลางในฟอร์มสินค้า */
.gp-box { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--br); }
.gp-now { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; padding: 10px 12px; background: var(--ok-bg); border-radius: 8px; margin-bottom: 10px; }
.gp-box .field .check { display: flex; margin-top: 6px; }

/* PL: เปิด PO ตามหมวด / รายงานตามลูกค้า / ใบจ่ายตลาด */
.po-pick tr.cat-row th { background: var(--ok-bg); text-align: left; font-weight: 500; }
.po-pick tr.cat-row .check { margin: 0; }
.po-pick tr.row-picked td { background: #f3faf5; }
.po-foot .field b { display: block; padding-top: 10px; }
details.so-group { border-top: 1px solid var(--br); }
details.so-group > summary { cursor: pointer; padding: 10px 16px; }
details.so-group > summary small { color: var(--mu); margin-left: 6px; }
.bid-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
/* ครัว/ผู้รับซ้อนในแถวสาขา: ปุ่มเพิ่ม/ลบอยู่ในตำแหน่งปกติ (ไม่ลอยมุมขวาบนแบบปุ่มลบแถวสาขา) */
.rows .row-item .kitchens .btn.sm, .rows .row-item .receivers .btn.sm, .rows .row-item .kitchen-foot .btn.sm { position: static; }
.rows .row-item .kitchens > .btn.sm, .rows .row-item .receivers > .btn.sm { margin-top: 4px; }
.kitchen-row .grid3 { margin-right: 0 !important; }
.receiver-row { margin-right: 0; }
.po-pick td:nth-child(2), .po-pick td:nth-child(3) { white-space: nowrap; }
.po-pick td:nth-child(3) { white-space: normal; min-width: 150px; }
.po-pick td > input.num { min-width: 90px; }
.so-lines td > input[name$="[note]"] { min-width: 130px; }
@media (min-width: 1200px) { .so-lines td > input.num { max-width: 110px; } }
@media (max-width: 640px) {
  .receiver-row { grid-template-columns: minmax(0, 1fr) auto; }
  .receiver-row > input[name$="[name]"] { grid-column: 1 / -1; }
}

/* PL แบบแท็บ (2026-10-24) */
.pl-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 6px; }
.pl-head .filters { margin: 0; }
.so-picker { position: relative; }
.so-picker > summary { list-style: none; cursor: pointer; }
.so-picker > summary::-webkit-details-marker { display: none; }
.so-picker[open] > summary { border-color: var(--pri); }
.so-picker-box { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(560px, 92vw); max-height: 70vh; overflow: auto; background: var(--card); border: 1px solid var(--br); border-radius: var(--r); padding: 12px 14px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
.subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--br); margin: 8px 0 14px; overflow-x: auto; scrollbar-width: thin; }
.subtabs a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; color: var(--mu); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.subtabs a:hover { color: var(--tx); }
.subtabs a.on { color: var(--pri); border-bottom-color: var(--pri); }
.tab-n { font-size: 12px; line-height: 1; padding: 3px 7px; border-radius: 999px; background: #f1f5f9; color: var(--mu); }
.tab-n.warn { background: var(--warn-bg); color: var(--warn); }
.pl-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi small { color: var(--mu); font-size: 13px; }
.kpi.kpi-warn { background: var(--warn-bg); border-color: #fde68a; }
.kpi.kpi-warn b, .kpi.kpi-warn small { color: var(--warn); }
.kpi.kpi-ok { background: var(--ok-bg); border-color: #bbf7d0; }
.kpi.kpi-ok b, .kpi.kpi-ok small { color: var(--ok); }
.badge.info { background: #e0edff; color: #1d4ed8; }
.badge.pro { background: #efeafd; color: #5b3fc4; }
.pl-status .badge { margin: 1px 4px 1px 0; }
@media (max-width: 640px) { .so-picker-box { position: fixed; left: 8px; right: 8px; width: auto; top: 120px; } }
@media (max-width: 640px) {
  .pl-head { display: grid; grid-template-columns: 1fr 1fr; }
  .pl-head .filters { grid-column: 1 / -1; display: block; }
  .pl-head .filters .inline-label, .pl-head .filters input[type=date] { width: 100%; }
  .pl-head .so-picker > summary, .pl-head > .btn { width: 100%; justify-content: center; text-align: center; }
  .subtabs { flex-wrap: wrap; overflow: visible; }
  .subtabs a { padding: 8px 10px; }
}
@media (min-width: 641px) { .so-picker-box { left: auto; right: 0; } }