/* JAT Sales — CSS กลางของหน้าจอทั้งระบบ (สีและขนาดตามต้นแบบ docs/prototype และ HANDOFF.md §4) */

/* ฟอนต์เก็บในโฟลเดอร์ static/fonts ไม่โหลดจากอินเทอร์เน็ต (IBM Plex Sans Thai, สัญญาอนุญาต SIL OFL — ดู OFL-LICENSE.txt)
   แยกไฟล์ตัวอักษรไทย/ละติน ให้เบราว์เซอร์โหลดเฉพาะส่วนที่ใช้
   ถ้าไฟล์หาย ระบบจะใช้ Leelawadee UI / Tahoma ของ Windows แทนโดยอัตโนมัติ */
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-thai-thai-400-normal.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-thai-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-thai-thai-500-normal.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-thai-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-thai-thai-600-normal.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-thai-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #F5F4F0;
  --card: #FFFFFF;
  --line: #E2E0D9;
  --line-soft: #EFEDE7;
  --text: #1A2230;
  --text-2: #5B6372;
  --primary: #1E4E8C;
  --primary-hover: #163B6B;
  --primary-soft: #E7EEF7;
  --nav-bg: #1A2230;
  --nav-active: #2B3547;
  --nav-text: #E8EAEE;
  --border-btn: #C9CDD5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "IBM Plex Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--primary); }
a:hover { color: var(--primary-hover); }

/* โครงหน้า: เมนูซ้าย + เนื้อหา (จอแคบเมนูย้ายขึ้นบน) */
.layout { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; }

.sidebar {
  flex: 1 1 220px;
  max-width: 100%;
  background: var(--nav-bg);
  color: var(--nav-text);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brand { padding: 0 12px 20px; display: flex; flex-direction: column; gap: 2px; }
.brand-name { font-size: 18px; font-weight: 600; color: #FFFFFF; }
.brand-sub { font-size: 13px; color: #A9B0BC; }

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--nav-text);
  text-decoration: none;
  font-size: 15px;
}
.nav-link:hover { background: var(--nav-active); color: #FFFFFF; }
.nav-link.active { background: var(--nav-active); color: #FFFFFF; }
.nav-link.disabled { color: #8B93A1; cursor: default; }
.nav-link.disabled:hover { background: transparent; color: #8B93A1; }
.nav-soon { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: #2B3547; color: #A9B0BC; }

.nav-user {
  margin-top: auto;
  padding: 16px 12px 0;
  border-top: 1px solid #2B3547;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: #A9B0BC;
}
.nav-user strong { color: #FFFFFF; font-weight: 500; }
.nav-logout {
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid #3A4458;
  background: transparent;
  color: var(--nav-text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.nav-logout:hover { background: var(--nav-active); }

.content { flex: 999 1 560px; min-width: 0; padding: 32px 24px 48px; }
.content-inner { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }

@media (max-width: 800px) {
  .sidebar { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px; gap: 4px; }
  .brand { padding: 0 12px 0 4px; flex-basis: 100%; flex-direction: row; align-items: baseline; gap: 8px; }
  .nav-user { margin-top: 0; padding: 0; border-top: none; flex-direction: row; align-items: center; margin-left: auto; }
  .content { padding: 20px 16px 40px; }
}

/* หัวหน้า */
.page-head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; }
.page-head .eyebrow { font-size: 14px; color: var(--text-2); }
.page-head h1 { margin: 4px 0 0; font-size: 28px; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ปุ่ม (สูงอย่างน้อย 44px มุมโค้ง 8px) */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid var(--border-btn);
  background: #FFFFFF;
  color: var(--text);
  text-decoration: none;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.btn:hover { color: var(--text); background: #F8F7F4; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #FFFFFF; font-weight: 500; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #FFFFFF; }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* การ์ด */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.grid-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card h2 { margin: 0; font-size: 17px; font-weight: 600; }
.card-lg { padding: 20px; gap: 16px; }
.card-lg h2 { font-size: 19px; }

.stat { padding: 18px; gap: 6px; }
.stat-label { font-size: 14px; color: var(--text-2); }
.stat-value { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-note { font-size: 13px; color: var(--text-2); }
.stat-warn { background: #FBEFE3; border-color: #F0D3B6; }
.stat-warn .stat-label, .stat-warn .stat-value, .stat-warn .stat-note { color: #7A3505; }

/* ป้ายสถานะ */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; background: #EEEDEA; color: #4A505C; }
.badge-count { padding: 2px 10px; }
.badge-ok { background: #E8F1E6; color: #24532D; }
.badge-wait { background: #E7EEF7; color: #163B6B; }
.badge-warn { background: #FBEFE3; color: #7A3505; }
.badge-off { background: #EEEDEA; color: #4A505C; }
.badge-service { background: #EFEAF8; color: #4A2F8A; }

/* รายการในการ์ด + สถานะว่าง */
.list-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; background: var(--bg); color: var(--text); text-decoration: none; }
.list-item small { display: block; font-size: 13px; color: var(--text-2); }
.empty { padding: 16px; border-radius: 8px; background: var(--bg); color: var(--text-2); font-size: 14px; line-height: 1.6; text-align: center; }

/* ปุ่มกรองแบบแคปซูล */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--border-btn);
  background: #FFFFFF;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.pill[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: #FFFFFF; }

/* ตาราง */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
table.data th { text-align: left; color: var(--text-2); font-size: 13px; font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.data td { padding: 12px; border-bottom: 1px solid var(--line-soft); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }

/* หน้าล็อกอิน */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; }
.login-card h1 { margin: 0; font-size: 24px; font-weight: 600; }
.login-card .sub { margin: 4px 0 0; color: var(--text-2); font-size: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; color: var(--text-2); }
.field input { min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-btn); font: inherit; font-size: 16px; background: #FFFFFF; color: var(--text); }
.field input:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.form-error { padding: 10px 12px; border-radius: 8px; background: #FBEFE3; color: #7A3505; font-size: 14px; }

/* ===== เอกสารขาย: ฟอร์ม รายการ สรุปยอด ===== */
.messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.message { padding: 12px 16px; border-radius: 8px; font-size: 15px; background: var(--primary-soft); color: var(--primary-hover); }
.message.success { background: #E8F1E6; color: #24532D; }
.message.error { background: #FBEFE3; color: #7A3505; }

.input { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-btn); font: inherit; font-size: 15px; background: #FFFFFF; color: var(--text); }
.input:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.input.num { text-align: right; font-variant-numeric: tabular-nums; min-width: 90px; }
textarea.input { min-height: 80px; resize: vertical; }
.field-error { color: #7A3505; font-size: 14px; margin-top: 2px; }

.editor { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.editor-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.editor-side { flex: 1 1 320px; min-width: 0; }
.back-link { font-size: 14px; text-decoration: none; }

.cust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.cust-card { display: block; cursor: pointer; }
.cust-card input { position: absolute; opacity: 0; pointer-events: none; }
.cust-card .box { display: flex; flex-direction: column; gap: 2px; padding: 13px 15px; border-radius: 10px; border: 1px solid var(--border-btn); background: #FFFFFF; min-height: 44px; }
.cust-card .box small { font-size: 13px; color: var(--text-2); }
.cust-card input:checked + .box { border: 2px solid var(--primary); background: var(--primary-soft); padding: 12px 14px; }
.cust-card input:focus-visible + .box { outline: 2px solid var(--primary); outline-offset: 2px; }

/* รายการในเอกสาร: การ์ดต่อ 1 รายการ (ชื่อ / ตัวเลข / รายละเอียดกว้างเต็มแถว) */
.line-list { display: flex; flex-direction: column; gap: 14px; }
.line-card { border: 1px solid var(--line); border-radius: 10px; background: #FBFAF8; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.line-card[hidden] { display: none; }
.lc-top { display: flex; align-items: flex-end; gap: 10px; }
.lc-name { flex: 1; min-width: 0; }
.lc-name .input { font-size: 16px; font-weight: 500; }
.lc-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px 12px; align-items: end; }
.lc-amount .amount { min-height: 44px; display: flex; align-items: center; justify-content: flex-end; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ส่วนพับสำหรับข้อมูลภาษาอังกฤษ (ซ่อนไว้ ไม่รกหน้าจอ) */
details.lc-en { border-top: 1px dashed var(--border-btn); padding-top: 4px; display: flex; flex-direction: column; gap: 10px; }
details.lc-en > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--primary); font-size: 14px; }
details.lc-en[open] > summary { margin-bottom: 2px; }
.lc-desc .lc-hint { color: var(--text-2); font-size: 13px; }
textarea.desc-input { width: 100%; min-height: 96px; padding: 10px 12px; font-size: 15px; line-height: 1.6; resize: vertical; overflow: hidden; }
@media (max-width: 700px) {
  .lc-nums { grid-template-columns: 1fr 1fr; }
  .lc-kind { grid-column: 1 / -1; }
  .lc-amount { grid-column: 1 / -1; }
}
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; min-height: 44px; }
.check input { width: 20px; height: 20px; }
.btn-dashed { border-style: dashed; border-color: #9BA3B0; }
.btn-sm { min-height: 44px; padding: 0 14px; font-size: 14px; }
.btn-icon { min-width: 44px; padding: 0; justify-content: center; }
.picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.picker select { flex: 1 1 240px; }

.summary { display: flex; flex-direction: column; gap: 10px; font-variant-numeric: tabular-nums; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.summary-row.strong { font-weight: 500; }
.summary-total { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.summary-total .value { font-size: 24px; font-weight: 600; color: var(--primary); }
.hint { font-size: 13px; color: var(--text-2); line-height: 1.6; }

.doc-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; }
.doc-meta dt { font-size: 13px; color: var(--text-2); }
.doc-meta dd { margin: 2px 0 0; font-size: 15px; white-space: pre-line; }
.num-cell { text-align: right; font-variant-numeric: tabular-nums; }

/* กล่องถามยืนยัน (วาดเองในหน้าเว็บ ใช้กับฟอร์มที่มี data-confirm) */
.confirm-dialog { border: 1px solid var(--line); border-radius: 12px; padding: 24px; max-width: 420px; width: calc(100% - 32px); color: var(--text); background: var(--card); font-family: inherit; }
.confirm-dialog::backdrop { background: rgba(26, 34, 48, .45); }
.confirm-dialog p { margin: 0 0 20px; font-size: 16px; line-height: 1.6; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ===== การนำทาง (ปรับปรุง 17 ต.ค. 2026): เมนูซ้ายแบบกลุ่มยุบ/ขยาย, Breadcrumb, เมนูปุ่ม, แบ่งหน้า ===== */
@media (min-width: 801px) {
  .sidebar { position: sticky; top: 0; height: 100vh; align-self: flex-start; overflow-y: auto; }
  .nav-toggle { display: none; }
}
.brand { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.sidebar-panel { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-toggle {
  min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid #3A4458;
  background: transparent; color: var(--nav-text); font: inherit; font-size: 14px; cursor: pointer;
}
.nav-toggle:hover { background: var(--nav-active); }
.nav-section { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.nav-section-title, .nav-group-title { font-size: 12px; font-weight: 500; letter-spacing: .02em; color: #A9B0BC; padding: 8px 12px 4px; }
.nav-group { display: flex; flex-direction: column; border-radius: 8px; }
.nav-group-title { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 40px; border-radius: 8px; }
.nav-group-title::-webkit-details-marker { display: none; }
.nav-group-title:hover { background: var(--nav-active); color: #FFFFFF; }
.nav-chevron { width: 8px; height: 8px; border-right: 2px solid #A9B0BC; border-bottom: 2px solid #A9B0BC; transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
.nav-group[open] > .nav-group-title .nav-chevron { transform: rotate(-135deg); }
.nav-group-items { display: flex; flex-direction: column; gap: 2px; padding: 0 0 6px 8px; }
.nav-group-items .nav-link { font-size: 14px; min-height: 40px; }
.nav-link.active { box-shadow: inset 3px 0 0 #6FA3E0; font-weight: 500; }

@media (max-width: 800px) {
  .brand { flex-basis: 100%; padding: 0 4px; }
  .sidebar { padding: 12px; gap: 8px; }
  .sidebar-panel { display: none; flex-basis: 100%; }
  .sidebar.open .sidebar-panel { display: flex; }
  .nav-user { flex-direction: row; align-items: center; justify-content: space-between; margin-left: 0; padding: 12px 4px 0; }
}

.breadcrumb { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: #9BA3B0; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 500; }
.page-head .back-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; font-size: 14px; text-decoration: none; margin-bottom: 4px; }

.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 240px; padding: 6px;
  background: #FFFFFF; border: 1px solid #E2E0D9; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.14);
  display: flex; flex-direction: column; gap: 2px;
}
.menu-item {
  display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 8px; width: 100%;
  background: transparent; border: 0; font: inherit; font-size: 15px; color: var(--text); text-align: left; text-decoration: none; cursor: pointer;
}
.menu-item:hover { background: #F5F4F0; color: var(--text); }
.menu-list form { margin: 0; }
.menu-note { font-size: 12px; color: var(--text-2); padding: 6px 12px 4px; border-top: 1px solid #EEECE6; margin-top: 4px; }

.pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 14px; color: var(--text-2); }
.pager-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pager-links a, .pager-links span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 10px;
  border: 1px solid var(--border-btn); border-radius: 8px; text-decoration: none; color: var(--text); background: #FFFFFF;
}
.pager-links .current { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.pager-links .disabled { opacity: .45; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 12px 0; }
.filter-bar .field { min-width: 150px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0; }
.filter-row-label { font-size: 13px; color: var(--text-2); min-width: 64px; }
th a.sort { color: inherit; text-decoration: none; white-space: nowrap; }
th a.sort:hover { text-decoration: underline; }

/* ===== ทะเบียนลูกค้า: Tab รายละเอียด + ลงทะเบียน 3 ขั้น ===== */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 12px; border-bottom: 1px solid var(--line); }
.tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 15px; color: var(--text-2); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }
.customer-form fieldset.step { border: 1px solid var(--line); margin: 0 0 16px; padding: 20px; min-width: 0; }
.customer-form .step-title { font-size: 18px; font-weight: 600; padding: 0 6px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 20px; }
.form-grid .field.wide { grid-column: 1 / -1; }
.stepper { display: none; list-style: none; margin: 0 0 16px; padding: 0; gap: 8px; flex-wrap: wrap; }
.js-stepper .stepper { display: flex; }
.stepper li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #EEEDEA; color: var(--text-2); font-size: 14px; }
.stepper li.current { background: var(--primary); color: #FFFFFF; }
.stepper li.done { background: #E8F1E6; color: #24532D; }
.stepper .step-no { font-weight: 600; }
.step-nav { display: none; justify-content: space-between; gap: 10px; margin-top: 16px; }
.js-stepper .step-nav { display: flex; }
.js-stepper fieldset.step[hidden] { display: none; }
@media (max-width: 640px) { .tab { padding: 0 10px; } }
[hidden] { display: none !important; }

.field ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.field ul label { color: var(--text); display: inline-flex; gap: 6px; align-items: center; }
.nav-subhead { font-size: 11px; letter-spacing: .04em; color: #8A93A3; padding: 8px 12px 2px; text-transform: none; }
.nav-group-items .nav-subhead:first-child { padding-top: 2px; }

/* ===== เมนูซ้ายแบบแบน (ปรับ 19 ต.ค. 2026): หัวข้อกลุ่ม + ไอคอน + รายการเดียวคลิกเดียว ===== */
.nav-section { margin-bottom: 10px; }
.nav-section-title { font-size: 13px; font-weight: 600; color: #fff; padding: 10px 12px 4px; letter-spacing: 0; }
.nav-link { display: flex; align-items: center; justify-content: flex-start; gap: 12px; }
.nav-link .nav-icon { flex: 0 0 20px; color: #9FB3D1; }
.nav-link .nav-label { display: flex; flex-direction: column; line-height: 1.25; }
.nav-link .nav-label small { font-size: 12px; font-weight: 400; color: #B7C4DB; }
.nav-link.active { background: linear-gradient(90deg, #2F6FD6, #3B82F6); color: #fff; box-shadow: none; border-radius: 10px; }
.nav-link.active .nav-icon, .nav-link.active .nav-label small { color: #fff; }
.nav-link:not(.active):hover .nav-icon { color: #fff; }

/* ===== แดชบอร์ดแบบใหม่ (19 ต.ค. 2026): งานที่ต้องทำ · ตัวเลขสรุป · กราฟ · ลิงก์ด่วน ===== */
.dash-section { margin-bottom: 16px; }
.dash-title { font-size: 18px; font-weight: 600; margin: 0 0 14px; }
.todo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.todo-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; color: var(--text); transition: box-shadow .15s, border-color .15s; }
a.todo-card:hover { border-color: #9DB7E0; box-shadow: 0 2px 10px rgba(30, 78, 140, .12); }
.todo-label { font-size: 14px; color: var(--text-2); }
.todo-count { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.todo-note { font-size: 13px; color: var(--text-2); }
.todo-card.warn { background: #FFF7E8; border-color: #F3D9A4; }
.todo-card.warn .todo-count { color: #9A5B00; }
.todo-card.bad { background: #FEF0EF; border-color: #F2C3BF; }
.todo-card.bad .todo-count { color: #B3261E; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.kpi { padding: 16px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; }
.kpi-growth { font-size: 13px; font-weight: 600; }
.kpi-growth span { font-weight: 400; color: var(--text-2); }
.kpi-growth.up { color: #1E7A3C; }
.kpi-growth.down { color: #B3261E; }
.dash-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.dash-two.wide-left { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.dash-stack { display: flex; flex-direction: column; gap: 16px; }
.bars { display: flex; align-items: flex-end; gap: 12px; height: 220px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.bar-value { font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.bar { width: 100%; min-height: 2px; background: #5B9BF0; border-radius: 6px 6px 0 0; }
.bar-label { font-size: 12px; color: var(--text-2); }
.donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut { width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.donut-hole { width: 104px; height: 104px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.donut-hole strong { font-size: 26px; }
.donut-hole span { font-size: 12px; color: var(--text-2); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.donut-legend li { display: flex; align-items: center; gap: 8px; }
.donut-legend strong { margin-left: auto; padding-left: 14px; }
.donut-legend em { font-style: normal; color: var(--text-2); width: 38px; text-align: right; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.quick { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); }
.quick:hover { border-color: #9DB7E0; background: #F5F9FF; }
.quick .nav-icon { color: var(--primary); flex: 0 0 22px; }
.quick strong { display: block; font-size: 14px; }
.quick small { display: block; font-size: 12px; color: var(--text-2); }
@media (max-width: 800px) { .dash-two.wide-left { grid-template-columns: 1fr; } .bars { gap: 6px; } }
.nav-section-title .nav-en-title { font-size: 12px; font-weight: 400; color: #9FB3D1; }
.nav-link .nav-label small.nav-en { font-size: 12px; font-weight: 400; color: #9FB3D1; }
.nav-link.active .nav-label small.nav-en { color: #fff; }
.h1-en { font-size: .55em; font-weight: 400; color: var(--text-2); margin-left: 6px; }
.th-en { display: block; font-size: 11px; font-weight: 400; color: var(--text-2); letter-spacing: 0; }
table.data th.num .th-en { text-align: right; }


/* ===== แถบเมนูซ้ายแบบกลุ่มพับได้ + ซ่อน/ยืดขยาย + แถบบน (วันที่) + ช่องค้นหา (19 ต.ค. 2026 เจ้าของสั่ง) ===== */
html { --sidebar-w: 260px; }
.sidebar-panel { min-height: 0; }
.nav-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #3A4458 transparent; }
.nav-bottom { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; padding-top: 10px; margin-top: 6px; border-top: 1px solid #2B3547; }
.nav-bottom .nav-user { margin-top: 0; padding: 4px 4px 0; border-top: none; }
.nav-group-title { padding-right: 8px; }
.nav-group-items { padding: 0 0 6px 0; }
.nav-section.nav-group { margin-bottom: 4px; }
.sidebar-resizer { display: none; }
.sidebar-show { display: none; }
.sidebar-show, .sidebar-hide { min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text-2); font: inherit; font-size: 14px; cursor: pointer; align-items: center; }
.sidebar-show:hover, .sidebar-hide:hover { background: #F1F2F5; color: var(--text); }
.topbar { display: flex; align-items: center; gap: 10px; max-width: 1080px; margin: -14px auto 18px; }
.topbar-gap { flex: 1 1 auto; }
.topbar-date { font-size: 14px; color: var(--text-2); padding: 6px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
@media (min-width: 801px) {
  .layout { flex-wrap: nowrap; }
  .sidebar { position: sticky; top: 0; height: 100vh; align-self: flex-start; overflow: hidden; flex: 0 0 var(--sidebar-w); width: var(--sidebar-w); max-width: var(--sidebar-w); }
  html.sidebar-hidden .sidebar { display: none; }
  html.sidebar-hidden .sidebar-show { display: inline-flex; }
  .sidebar-hide { display: inline-flex; }
  html.sidebar-hidden .sidebar-hide { display: none; }
  .sidebar-resizer { display: block; position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; z-index: 5; }
  .sidebar-resizer:hover, .sidebar-resizer.dragging { background: rgba(111, 163, 224, .55); }
}
@media (max-width: 800px) {
  .sidebar-hide, .sidebar-show { display: none !important; }
  .nav-scroll { overflow: visible; }
  .nav-bottom { flex-basis: 100%; }
  .topbar { flex-wrap: wrap; }
  .topbar-search { order: 3; flex-basis: 100%; }
  .topbar { margin-top: 0; }
}
@media print { .topbar, .sidebar { display: none !important; } }

/* ตัวกรองรายการลูกค้า/ผู้ขาย: เห็นแค่ ค้นหา + สถานะ ที่เหลือซ่อนใน "ตัวกรองเพิ่มเติม" (เจ้าของบอกตัวเลือกเยอะเกินไป 19 ต.ค. 2026) */
.more-filters { flex: 1 1 100%; }
.more-filters > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text-2); font-size: 14px; list-style: none; }
.more-filters > summary::-webkit-details-marker { display: none; }
.more-filters > summary::after { content: "▾"; margin-left: 8px; font-size: 12px; }
.more-filters[open] > summary::after { content: "▴"; }
.more-filters-body { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

/* ช่องค้นหาทุกอย่างบนแถบบนของหน้าต่างหลัก (ไม่อยู่ในเมนูซ้าย) */
.topbar-search { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; max-width: 640px; margin: 0 auto 0 4px; }
.topbar-search-icon { position: absolute; margin-left: 12px; color: var(--text-2); pointer-events: none; display: inline-flex; }
.topbar-search input { flex: 1 1 auto; min-width: 0; min-height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); padding: 0 16px 0 40px; font: inherit; font-size: 14px; color: var(--text); }
.topbar-search input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.topbar-search .btn { min-height: 40px; }
.topbar-search-icon .nav-icon { width: 18px; height: 18px; }

/* สีประจำกลุ่มเมนูซ้าย (โทนอ่อน): แยกกลุ่มด้วยแถบสี + จุดสี + พื้นอ่อนมากตอนเปิด + รายการที่เลือกใช้สีกลุ่มแบบอ่อน (เจ้าของขอ 20 ต.ค. 2026) */
.nav-group { --g: #7FA6E6; border-left: 3px solid var(--g); border-radius: 0 10px 10px 0; }
.nav-group[data-nav-group="sales"] { --g: #6B93F5; }       /* งานขาย = น้ำเงิน */
.nav-group[data-nav-group="partners"] { --g: #5EEAD4; }    /* คู่ค้า = เขียวน้ำทะเล */
.nav-group[data-nav-group="purchasing"] { --g: #FCD34D; }  /* จัดซื้อ = เหลือง */
.nav-group[data-nav-group="inventory"] { --g: #86EFAC; }   /* คลังสินค้า = เขียวอ่อน */
.nav-group[data-nav-group="finance"] { --g: #F9A8D4; }     /* การเงิน = ชมพู */
.nav-group[data-nav-group="reports"] { --g: #7DD3FC; }     /* รายงาน = ฟ้า */
.nav-group > .nav-group-title { color: #fff; font-weight: 600; }
.nav-group > .nav-group-title > span:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--g); vertical-align: middle; }
.nav-group[open] { background: color-mix(in srgb, var(--g) 6%, transparent); }
.nav-group > .nav-group-title:hover { background: color-mix(in srgb, var(--g) 12%, transparent); }
.nav-group .nav-link .nav-icon { color: color-mix(in srgb, var(--g) 55%, #9FB3D1); }
.nav-group .nav-link:hover { background: color-mix(in srgb, var(--g) 12%, transparent); }
.nav-group .nav-link.active, .nav-group .nav-link.active:hover { background: color-mix(in srgb, var(--g) 26%, transparent); box-shadow: inset 3px 0 0 var(--g); color: #fff; }
.nav-group .nav-link.active .nav-icon { color: var(--g); }
.nav-group > .nav-group-title .nav-chevron { border-color: var(--g); }

/* ข้อมูลหลัก/ตั้งค่า (masterdata): การ์ดภาพรวม · แท็บสถานะ · แถวที่ปิดใช้งาน · โลโก้ · สีเมนูกลุ่มใหม่ */
.nav-group[data-nav-group="master"] { --g: #FDBA74; }    /* ข้อมูลหลัก = ส้ม */
.nav-group[data-nav-group="settings"] { --g: #CBD5E1; }  /* ตั้งค่า = เทาเงิน */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 18px; }
.hub-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); text-decoration: none; transition: box-shadow .15s, transform .15s, border-color .15s; }
.hub-card:hover { box-shadow: 0 6px 18px rgba(20, 35, 60, .10); transform: translateY(-2px); border-color: var(--primary); }
.hub-icon { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; background: #E7EEF7; color: var(--primary); }
.hub-icon .nav-icon { width: 22px; height: 22px; }
.hub-title { font-size: 17px; font-weight: 600; }
.hub-title small { font-size: 12px; font-weight: 400; color: var(--text-2); margin-left: 4px; }
.hub-text { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.hub-stats { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--text-2); border-top: 1px dashed var(--line); }
.hub-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text-2); font-size: 14px; text-decoration: none; }
.pill b { font-weight: 600; color: var(--text); }
.pill.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.pill.on b { color: #fff; }
.row-off td { color: var(--text-2); }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions .btn + .btn, .row-actions form { margin-left: 4px; }
.row-actions .btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
label.check { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.logo-edit { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.logo-preview { max-width: 200px; max-height: 90px; object-fit: contain; border: 1px dashed var(--line); border-radius: 10px; padding: 8px; background: #fff; }
.logo-preview.empty { display: flex; align-items: center; justify-content: center; width: 200px; height: 90px; color: var(--text-2); font-size: 13px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.chip { padding: 4px 12px; border-radius: 999px; background: #EEEDEA; color: #4A505C; font-size: 13px; }
.md-table td:first-child, .md-table .badge { white-space: nowrap; }