/* ============================================================
   JD Production — design tokens + components (ตาม design/HANDOFF.md 21/09/2026)
   flat · มุม 2px (modal/dropdown/toast 4px) · ไม่มีเงา ยกเว้น modal/dropdown/toast · แถบเมนู gradient (จุดเดียวที่ไม่ flat)
   ทุกคู่สีตัวอักษร/พื้นผ่าน WCAG AA — ดูตาราง contrast ใน HANDOFF ข้อ 3
   ============================================================ */
:root {
  --jd-bar-1: #FBBF24; --jd-bar-2: #F59E0B; --jd-bar-3: #F0820F;
  --jd-bar-ink: #3A1D00; --jd-bar-edge: #C96A0A;
  --jd-navbar-bg: linear-gradient(90deg, var(--jd-bar-1), var(--jd-bar-2), var(--jd-bar-3));
  --jd-bar-on: rgba(255,255,255,.4); --jd-bar-hover: rgba(255,255,255,.22);
  --jd-primary: #B54708; --jd-primary-h: #93370D; --jd-primary-tint: #FFF4E0;
  --jd-head: #8B3E0A; --jd-head-ink: #FFFFFF;
  --jd-bg: #FFFAF1; --jd-surface: #FFFFFF; --jd-sunken: #FBF3E4; --jd-calc: #FFF7E6;
  --jd-line: #EEDDC0; --jd-line-2: #D6B98C; --jd-field: #A07A4A;
  --jd-ink: #2B1D0E; --jd-ink-2: #5A4630; --jd-muted: #6B5840;
  --jd-hover: #FFF1D6; --jd-selected: #FFE3AE;
  --jd-ok: #0E6B47; --jd-ok-bg: #E6F4EC;
  --jd-warn: #7A4A00; --jd-warn-bg: #FFF1C7;
  --jd-danger: #B42318; --jd-danger-bg: #FDECEA;
  --jd-info: #1E4E8C; --jd-info-bg: #E7EFFA;
  --jd-neutral: #574A3A; --jd-neutral-bg: #EFE9E0;
  --jd-custom: #5B2C83; --jd-custom-bg: #F1E9F8;
  --jd-brand-red: #E8402F; --jd-brand-brown: #3D3527;
  --jd-r: 2px; --jd-r-lg: 4px;
  --jd-h: 34px; --jd-h-sm: 32px; --jd-h-lg: 42px; --jd-row: 38px;
  --jd-fs: 16px; --jd-fs-td: 15px; --jd-fs-th: 13.5px; --jd-fs-lb: 13px; --jd-fs-h1: 24px; --jd-fs-h2: 18px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  /* ชื่อเดิมที่หน้าเว็บอ้างถึง — ชี้ไป token ใหม่ */
  --jd-navy: var(--jd-head); --jd-navy-d: var(--jd-primary-h); --jd-blue: var(--jd-primary); --jd-sky: var(--jd-bar-2);
  --jd-tint: var(--jd-hover); --jd-neg: var(--jd-danger);
  /* Bootstrap */
  --bs-body-bg: var(--jd-bg); --bs-body-color: var(--jd-ink);
  --bs-body-font-family: 'Sarabun', sans-serif; --bs-body-font-weight: 500;
  --bs-border-color: var(--jd-line); --bs-border-radius: var(--jd-r);
  --bs-link-color: var(--jd-primary); --bs-link-hover-color: var(--jd-primary-h);
  --bs-primary: var(--jd-primary); --bs-primary-rgb: 181, 71, 8;
  --bs-btn-border-radius: var(--jd-r);
}
html { font-size: var(--jd-fs); }
body { font-family: 'Sarabun', sans-serif; font-weight: 500; background: var(--jd-bg); color: var(--jd-ink); -webkit-font-smoothing: antialiased; }
a { color: var(--jd-primary); text-decoration: none; }
a:hover { color: var(--jd-primary-h); text-decoration: none; }
h1, h2, h3, h4, h5 { font-weight: 700; color: var(--jd-ink); }
.num, td.num, th.num, .tabular { font-variant-numeric: tabular-nums; }
:focus-visible, .form-control:focus, .form-select:focus, .btn:focus-visible { outline: 2px solid var(--jd-primary); outline-offset: 1px; box-shadow: none !important; }
.form-control:focus, .form-select:focus { border-color: var(--jd-line-2); }
.btn, .form-control, .form-select, .card, .alert, .badge, .input-group-text, .form-check-input, .list-group-item { border-radius: var(--jd-r) !important; box-shadow: none !important; }
.modal-content, .dropdown-menu, .toast, #toastBox .alert { border-radius: var(--jd-r-lg) !important; }

/* ---------- แถบเมนู (gradient — อนุมัติ 21/09/2026) ---------- */
.navbar-jd { background: var(--jd-navbar-bg); padding: 0; min-height: 52px; border-bottom: 2px solid var(--jd-bar-edge); }
.navbar-jd .container-fluid { min-height: 52px; }
.navbar-jd .navbar-brand { font-weight: 700; color: var(--jd-bar-ink); display: flex; align-items: center; gap: 8px; font-size: 17px; margin-right: var(--sp-5); padding: 0; }
.navbar-jd .navbar-brand:hover { color: var(--jd-bar-ink); }
.navbar-jd .brand-chip { background: transparent; padding: 0 6px 0 0; display: inline-flex; align-items: center; }
.navbar-jd .brand-chip img { height: 28px; }
.navbar-jd .nav-link { color: var(--jd-bar-ink); padding: 0 var(--sp-3) !important; height: 52px; display: flex; align-items: center; border-bottom: 3px solid transparent; font-weight: 600; white-space: nowrap; }
.navbar-jd .nav-link:hover { background: var(--jd-bar-hover); color: var(--jd-bar-ink); }
.navbar-jd .nav-link.active { background: var(--jd-bar-on); border-bottom-color: var(--jd-bar-ink); font-weight: 700; color: var(--jd-bar-ink); }
.navbar-jd .nav-link.nav-user { font-size: 14.5px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.navbar-jd .navbar-toggler { border-radius: var(--jd-r); border-color: rgba(58,29,0,.45); }
.navbar-jd .navbar-toggler-icon { filter: invert(1) brightness(.35); }
.navbar-jd .dropdown-toggle::after { margin-left: 6px; vertical-align: 2px; border-top-width: 5px; border-left-width: 4px; border-right-width: 4px; opacity: .8; }
.navbar-jd .dropdown-menu { margin-top: 0; padding: 4px 0; background: #fff; color: var(--jd-ink); border: 1px solid var(--jd-line-2); border-top: 2px solid var(--jd-bar-edge); box-shadow: 0 6px 16px rgba(43,29,14,.18); min-width: 220px; }
.navbar-jd .dropdown-item { padding: 8px 16px; font-weight: 600; color: var(--jd-ink); font-size: 15px; }
.navbar-jd .dropdown-item:hover, .navbar-jd .dropdown-item:focus { background: var(--jd-hover); color: var(--jd-primary-h); text-decoration: none; }
.navbar-jd .dropdown-item.active, .navbar-jd .dropdown-item:active { background: var(--jd-hover); color: var(--jd-primary-h); box-shadow: inset 3px 0 0 var(--jd-primary); }
.navbar-jd .dropdown-item-text { padding: 6px 16px; white-space: nowrap; color: var(--jd-muted); }
@media (min-width: 768px) and (max-width: 1199.98px) { .navbar-jd .nav-link.nav-user { max-width: 150px; } .navbar-jd .navbar-brand { margin-right: var(--sp-3); font-size: 16px; } .navbar-jd .nav-link { padding: 0 9px !important; font-size: 14.5px; } }
@media (max-width: 767.98px) {
  .navbar-jd .nav-link { height: 44px; }
  .navbar-jd .dropdown-menu { border: 0; border-left: 2px solid var(--jd-bar-ink); box-shadow: none; background: rgba(255,255,255,.35); margin: 0 0 4px 12px; }
  .navbar-jd .dropdown-item, .navbar-jd .dropdown-item-text { color: var(--jd-bar-ink) !important; }
  .navbar-jd .dropdown-item:hover, .navbar-jd .dropdown-item.active { background: rgba(255,255,255,.4); }
}
.page-title { font-size: var(--jd-fs-h1); font-weight: 700; margin: 0 0 var(--sp-3); }

/* ---------- ปุ่ม ---------- */
.btn { height: var(--jd-h); padding: 0 14px; font-size: 15px; font-weight: 600; line-height: 32px; text-align: left; border-width: 1px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn-sm { height: var(--jd-h-sm); line-height: 30px; padding: 0 12px; font-size: 14px; }
.btn-lg { height: var(--jd-h-lg); line-height: 40px; font-size: 16px; }
.btn-primary { background: var(--jd-primary); border-color: var(--jd-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--jd-primary-h) !important; border-color: var(--jd-primary-h) !important; color: #fff; }
.btn-outline-secondary, .btn-outline-jd { background: var(--jd-surface); border-color: var(--jd-line-2); color: var(--jd-ink); }
.btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-jd:hover { background: var(--jd-hover) !important; border-color: var(--jd-primary) !important; color: var(--jd-ink) !important; }
.btn-outline-primary { background: var(--jd-surface); border-color: var(--jd-primary); color: var(--jd-primary); }
.btn-outline-primary:hover, .btn-check:checked + .btn-outline-primary, .btn-outline-primary:active { background: var(--jd-primary) !important; border-color: var(--jd-primary) !important; color: #fff !important; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--jd-primary); }
.btn-ghost:hover { background: var(--jd-hover); color: var(--jd-primary-h); }
.btn-outline-danger, .btn-danger { border-color: var(--jd-danger); color: var(--jd-danger); background: var(--jd-surface); }
.btn-outline-danger:hover, .btn-danger, .btn-danger:hover { background: var(--jd-danger) !important; color: #fff !important; border-color: var(--jd-danger) !important; }
/* ปุ่มเซ็นรับรอง — ใช้ที่เดียวในระบบ */
.btn-sign { background: var(--jd-ok); border-color: var(--jd-ok); color: #fff; height: var(--jd-h-lg); line-height: 40px; font-size: 16px; font-weight: 700; padding: 0 18px; }
.btn-sign:hover, .btn-sign:focus { background: #0B563A !important; border-color: #0B563A !important; color: #fff; }
.btn-icon { width: var(--jd-h); padding: 0; justify-content: center; }
.btn:disabled { opacity: .55; }

/* ---------- ฟอร์ม ---------- */
.form-control, .form-select { height: var(--jd-h); padding: 0 10px; border: 1px solid var(--jd-line-2); font-size: 15px; color: var(--jd-ink); background-color: var(--jd-surface); }
.form-select { padding-right: 32px; background-position: right 9px center; background-size: 12px 10px; --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235A4630' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-control-sm, .form-select-sm { height: var(--jd-h-sm); font-size: 14.5px; }
textarea.form-control { height: auto; padding: 8px 10px; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background: var(--jd-sunken); color: var(--jd-ink-2); }
.form-control.is-invalid { border-color: var(--jd-danger); background-image: none; }
.invalid-feedback { font-size: 13px; color: var(--jd-danger); }
label, .form-label { font-size: var(--jd-fs-lb); font-weight: 600; color: var(--jd-muted); margin-bottom: 3px; display: block; }
label .hint { color: var(--jd-primary); font-weight: 400; }
.form-check-input { border: 1px solid var(--jd-line-2); width: 16px; height: 16px; margin-top: .2em; }
.form-check-input:checked { background-color: var(--jd-primary); border-color: var(--jd-primary); }
.form-check-label { font-size: 14.5px; color: var(--jd-ink); font-weight: 500; display: inline; }
.form-switch { display: flex; align-items: center; gap: 8px; padding-left: 0; min-height: 32px; }
.form-switch .form-check-input { width: 40px; height: 22px; margin: 0; float: none; flex: 0 0 auto; background-image: none; position: relative; background-color: var(--jd-line-2); border-color: var(--jd-line-2); border-radius: 11px !important; }
.form-switch .form-check-input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .12s; }
.form-switch .form-check-input:checked { background-color: var(--jd-primary); border-color: var(--jd-primary); }
.form-switch .form-check-input:checked::after { left: 21px; }
.form-switch .form-check-label { font-size: 14px; }
.grid-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); }
.grid-form .w2 { grid-column: span 2; } .grid-form .w3 { grid-column: span 3; } .grid-form .w4 { grid-column: span 4; }
.grid-form .form-control, .grid-form .form-select { width: 100%; }
@media (max-width: 767.98px) { .grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-form .w3, .grid-form .w4 { grid-column: span 2; } }

/* ช่องวันที่ DD/MM/YYYY (custom — ไม่ใช้ input type=date) */
.date-jd { position: relative; display: block; }
.date-jd .form-control { padding-right: 34px; font-variant-numeric: tabular-nums; width: 100%; }
.date-jd__btn { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 30px; border: 0; background: transparent; color: var(--jd-ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--jd-r); }
.date-jd__btn:hover { background: var(--jd-hover); color: var(--jd-primary); }
.date-cal { position: absolute; z-index: 1080; top: calc(100% + 4px); left: 0; width: 272px; background: #fff; border: 1px solid var(--jd-line-2); border-radius: var(--jd-r-lg); box-shadow: 0 8px 20px rgba(43,29,14,.2); padding: 8px; }
.date-cal .dc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.date-cal .dc-head b { font-size: 15px; }
.date-cal .dc-head button { border: 0; background: transparent; width: 28px; height: 28px; font-size: 16px; color: var(--jd-ink); border-radius: var(--jd-r); }
.date-cal .dc-head button:hover { background: var(--jd-hover); }
.date-cal .dc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-cal .dc-grid span { text-align: center; font-size: 12px; color: var(--jd-muted); font-weight: 600; padding: 2px 0; }
.date-cal .dc-grid button { border: 1px solid transparent; background: transparent; height: 32px; font-size: 14px; color: var(--jd-ink); border-radius: var(--jd-r); font-variant-numeric: tabular-nums; }
.date-cal .dc-grid button:hover { background: var(--jd-hover); }
.date-cal .dc-grid button.other { color: #B8A88F; }
.date-cal .dc-grid button.today { border-color: var(--jd-primary); }
.date-cal .dc-grid button.sel { background: var(--jd-primary); color: #fff; }
.date-cal .dc-foot { display: flex; justify-content: space-between; margin-top: 6px; }
.date-cal .dc-foot button { border: 0; background: transparent; color: var(--jd-primary); font-size: 13.5px; font-weight: 600; }
.ctrl .date-jd { width: 156px; }

/* ---------- control panel ---------- */
.ctrl { background: var(--jd-surface); border: 1px solid var(--jd-line); margin-bottom: var(--sp-3); }
.ctrl-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-4); padding: var(--sp-3) var(--sp-4); }
.ctrl-row + .ctrl-row { border-top: 1px solid var(--jd-line); }
.ctrl-row.bar { align-items: center; justify-content: space-between; background: var(--jd-sunken); }
.ctrl-row.bar > div { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ctrl .form-select, .ctrl .form-control { min-width: 150px; }
.ctrl .w-search { min-width: 240px; }
.ctrl-hint { font-size: 13px; color: var(--jd-muted); padding: 6px var(--sp-4); border-top: 1px solid var(--jd-line); }
.ctrl-hint:empty { display: none; }
/* segmented (ตัวกรองสถานะ) + ตัวนับ */
.seg { display: inline-flex; border: 1px solid var(--jd-primary); border-radius: var(--jd-r); overflow: hidden; }
.seg .btn { border: 0; border-radius: 0 !important; height: 32px; line-height: 32px; padding: 0 14px; background: var(--jd-surface); color: var(--jd-primary); font-weight: 600; }
.seg .btn + .btn { border-left: 1px solid var(--jd-primary); }
.seg .btn.active, .seg .btn-check:checked + .btn { background: var(--jd-primary) !important; color: #fff !important; }
.seg .count { display: inline-block; min-width: 20px; padding: 0 6px; height: 20px; line-height: 20px; font-size: 12.5px; font-weight: 700; border-radius: 10px; background: var(--jd-neutral-bg); color: var(--jd-neutral); text-align: center; }
.seg .count.is-warn { background: var(--jd-warn-bg); color: var(--jd-warn); }
.seg .btn.active .count { background: rgba(255,255,255,.9); color: var(--jd-primary); }
.seg .count:empty { display: none; }

/* ---------- badge (สถานะ) ---------- */
.jd-badge, .badge-status { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; font-size: 12.5px; font-weight: 600; border-left: 3px solid var(--jd-neutral); background: var(--jd-neutral-bg); color: var(--jd-neutral); white-space: nowrap; border-radius: var(--jd-r); }
.jd-badge:empty { display: none; }
.jd-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.st-draft, .is-draft { background: var(--jd-warn-bg); border-left-color: var(--jd-bar-2); color: var(--jd-warn); }
.st-signed, .is-signed, .st-ok, .is-ready, .is-active { background: var(--jd-ok-bg); border-left-color: var(--jd-ok); color: var(--jd-ok); }
.st-warn, .is-check { background: var(--jd-warn-bg); border-left-color: var(--jd-warn); color: var(--jd-warn); }
.st-bad, .is-bad { background: var(--jd-danger-bg); border-left-color: var(--jd-danger); color: var(--jd-danger); }
.st-gray, .is-off { background: var(--jd-neutral-bg); border-left-color: #B3A48C; color: var(--jd-muted); }
.st-info, .is-moisture { background: var(--jd-info-bg); border-left-color: var(--jd-info); color: var(--jd-info); }
.st-custom, .is-custom { background: var(--jd-custom-bg); border-left-color: var(--jd-custom); color: var(--jd-custom); }

/* ---------- card / panel / alert ---------- */
.card { border: 1px solid var(--jd-line); background: var(--jd-surface); }
.card-header { background: var(--jd-surface); border-bottom: 2px solid var(--jd-head); font-weight: 700; font-size: var(--jd-fs-h2); padding: 10px var(--sp-4); }
.card-header .small, .card-header .text-muted { font-weight: 400; }
.card-body { padding: var(--sp-4); }
.card-footer { background: var(--jd-sunken); border-top: 1px solid var(--jd-line); }
.card-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.card-actions .btn { flex: 0 0 auto; }
.alert { border-width: 1px; border-left-width: 4px; padding: 8px 12px; }
.alert-danger { background: var(--jd-danger-bg); border-color: var(--jd-danger); color: #7A1C14; }
.alert-warning { background: var(--jd-warn-bg); border-color: var(--jd-warn); color: var(--jd-warn); }
.alert-success { background: var(--jd-ok-bg); border-color: var(--jd-ok); color: var(--jd-ok); }
.alert-info { background: var(--jd-info-bg); border-color: var(--jd-info); color: var(--jd-info); }
.alert-light { background: var(--jd-sunken); border-color: var(--jd-line-2); color: var(--jd-ink); }
.text-muted { color: var(--jd-muted) !important; }
.text-danger { color: var(--jd-danger) !important; }
/* ค่าที่ระบบคำนวณ (เส้นประ + "= อัตโนมัติ") · ข้อความอ่านอย่างเดียว (พื้นครีม + กุญแจ) */
.calc-box { background: var(--jd-calc); border: 1px dashed var(--jd-line-2); border-radius: var(--jd-r); padding: 8px 12px; }
.calc-box .k { font-size: 12.5px; font-weight: 600; color: var(--jd-muted); display: flex; align-items: center; gap: 6px; }
.calc-box .auto-tag, .auto-tag { font-size: 11px; font-weight: 700; color: var(--jd-primary); background: var(--jd-primary-tint); padding: 0 5px; border-radius: var(--jd-r); }
.calc-box .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; min-height: 24px; }
.ro-text, .readonly-block { font-size: 14.5px; white-space: pre-wrap; background: var(--jd-sunken); border: 1px solid var(--jd-line); border-radius: var(--jd-r); padding: 6px 10px; min-height: 34px; }
label.ro::before { content: "🔒 "; font-size: 11px; }

/* ---------- ตาราง list view ---------- */
.table { font-size: var(--jd-fs-td); margin-bottom: 0; border-color: var(--jd-line); --bs-table-bg: transparent; --bs-table-hover-bg: var(--jd-hover); --bs-table-hover-color: var(--jd-ink); --bs-table-active-bg: var(--jd-selected); }
.table > :not(caption) > * > * { padding: 7px 10px; border-bottom: 1px solid var(--jd-line); background: transparent; height: var(--jd-row); vertical-align: middle; }
.table thead th { background: var(--jd-head); color: var(--jd-head-ink); font-weight: 600; font-size: var(--jd-fs-th); white-space: nowrap; position: sticky; top: 0; z-index: 3; border-bottom: 0; }
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { background: var(--jd-primary-h); }
th[data-sort]::after { content: " ▲▼"; font-size: .55em; letter-spacing: -1px; opacity: .45; }
th[data-sort].asc::after { content: " ▲"; font-size: .7em; opacity: 1; color: #FDE68A; }
th[data-sort].desc::after { content: " ▼"; font-size: .7em; opacity: 1; color: #FDE68A; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.neg { color: var(--jd-danger); }
td.nowrap, .text-nowrap { white-space: nowrap; }
tr.total td { font-weight: 700; border-top: 2px solid var(--jd-head); background: var(--jd-surface); }
tr.grp td { background: var(--jd-hover); font-weight: 600; cursor: pointer; }
tr.grp.open td { background: var(--jd-selected); }
.grp .caret, .caret { display: inline-block; width: 1.1em; color: var(--jd-primary); }
.grp .cnt { color: var(--jd-muted); font-weight: 400; font-size: .86em; margin-left: .4em; }
tr.sub td { background: #FFFDF8; }
tr.sel td { background: var(--jd-selected) !important; }
tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--jd-primary); }
tr.clickable { cursor: pointer; }
tr.inactive td { color: var(--jd-muted); }
tr.blocked td { background: var(--jd-danger-bg); }
.tbl-wrap { max-height: calc(100vh - 230px); overflow: auto; border-top: 1px solid var(--jd-line); }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.link { color: var(--jd-primary); cursor: pointer; display: inline-block; transition: transform .12s; }
.link:hover { color: var(--jd-primary-h); transform: translateY(-1px); }
.btn { transition: transform .12s, box-shadow .12s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 2px 5px rgba(58,29,0,.18); }
.navbar-jd .nav-link { transition: transform .12s, background .12s; }
.navbar-jd .nav-link:hover { transform: translateY(-1px); }
a.odoo-link { color: var(--jd-primary); font-variant-numeric: tabular-nums; }
a.odoo-link::after { content: " ↗"; font-size: .8em; color: var(--jd-bar-2); }
.table td.clip, .table td.clip-s, .table td.clip-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table td.clip { max-width: 0; width: 22%; min-width: 140px; }
.table td.clip-s { max-width: 0; width: 13%; min-width: 100px; }
.table td.clip-l { max-width: 0; width: 45%; min-width: 160px; }
.table td.chk, .table th.chk { width: 36px; text-align: center; padding-left: 6px; padding-right: 6px; }
.table td.chk .form-check-input, .table th.chk .form-check-input { margin: 0; float: none; width: 17px; height: 17px; vertical-align: middle; cursor: pointer; }
.table td.act { white-space: nowrap; text-align: right; width: 1%; }
.table td.act .btn { height: 28px; line-height: 26px; padding: 0 9px; font-size: 13.5px; }
.table td.small { font-size: 14px; }
.tbl-empty { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--jd-muted); }
.tbl-empty .btn { margin-top: var(--sp-2); }
.skel { display: block; height: 14px; background: linear-gradient(90deg, #F4EDE2 25%, #FBF6EE 50%, #F4EDE2 75%); background-size: 200% 100%; animation: skel 1.1s infinite; }
@keyframes skel { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
@media (max-width: 1199.98px) { .table .hide-narrow, .table .col-opt { display: none; } }
/* ตารางแก้ในแถว */
.edit-rows td { vertical-align: middle; }
.edit-rows .form-control, .edit-rows .form-select { width: 100%; }

/* ---------- หัวตาราง + pager ---------- */
.tbl-head, .table-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2) var(--sp-4); padding: 10px var(--sp-4); border-bottom: 2px solid var(--jd-head); background: var(--jd-surface); }
.tbl-head .title { font-size: var(--jd-fs-h2); font-weight: 700; white-space: nowrap; }
.tbl-head .right { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: nowrap; }
.tbl-head .left { display: flex; align-items: center; gap: var(--sp-4); }
.tbl-head .btn-main { height: 36px; padding: 0 18px; font-weight: 700; box-shadow: 0 1px 3px rgba(58,29,0,.25); }
.tbl-head .btn-icon.btn-ghost { border: 0; box-shadow: none; }
.tbl-head .right .btn, .tbl-head .right .form-select { flex: 0 0 auto; width: auto; }
@media (max-width: 1200px) { .tbl-head .right { flex-wrap: wrap; } }
.tbl-head .sums { font-size: 13.5px; color: var(--jd-muted); font-variant-numeric: tabular-nums; }
.pager { display: flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
.pg-box { display: inline-flex; align-items: stretch; height: 30px; border: 1px solid var(--jd-line-2); background: var(--jd-surface); border-radius: var(--jd-r); overflow: hidden; }
.pg-box button { border: 0; background: transparent; width: 30px; color: var(--jd-ink); font-size: 16px; line-height: 1; padding: 0; }
.pg-box button:hover:not(:disabled) { background: var(--jd-hover); }
.pg-box button:disabled { color: #CDBFA8; }
.pg-box button:last-child { border-left: 1px solid var(--jd-line-2); }
.pg-box input { border: 0; width: 52px; height: 28px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.pg-of { padding: 0 8px; line-height: 28px; color: var(--jd-muted); border-left: 1px solid var(--jd-line-2); }

/* ---------- modal / toast ---------- */
.modal { --bs-backdrop-bg: #2B1D0E; --bs-backdrop-opacity: .48; }
.modal-content { border: 1px solid var(--jd-line-2); box-shadow: 0 12px 32px rgba(43,29,14,.24) !important; }
.modal-header { border-bottom: 2px solid var(--jd-head); padding: 12px var(--sp-4); }
.modal-title { font-size: var(--jd-fs-h2); font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modal-body { padding: var(--sp-4); }
.modal-footer { background: var(--jd-sunken); border-top: 1px solid var(--jd-line); padding: 10px var(--sp-4); justify-content: flex-start; gap: var(--sp-2); }
.modal-footer .ms-auto, .modal-footer .btn-danger, .modal-footer .btn-outline-danger { margin-left: auto !important; }
.modal-footer .btn { flex: 0 0 auto; }
@media (max-width: 1200px) { .modal-footer { flex-wrap: wrap; } }
.modal-wide .modal-dialog { max-width: 960px; }
.modal-xwide .modal-dialog { max-width: 1240px; }
.btn-close { border-radius: var(--jd-r); }
.jd-confirm { z-index: 1070; }
.modal-backdrop ~ .modal-backdrop { z-index: 1065; }
#toastBox .alert { min-width: 260px; box-shadow: 0 6px 16px rgba(43,29,14,.18) !important; }

/* ---------- แถบขั้นตอน (ฉบับร่าง → QA เซ็น → พิมพ์ได้) ---------- */
.stepper { display: flex; align-items: stretch; border: 1px solid var(--jd-line); border-radius: var(--jd-r); overflow: hidden; margin-bottom: var(--sp-4); }
.stepper .step { flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--jd-sunken); color: var(--jd-muted); font-size: 14px; font-weight: 600; }
.stepper .step + .step { border-left: 1px solid var(--jd-line); }
.stepper .step .n { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--jd-line-2); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; background: #fff; flex: 0 0 auto; }
.stepper .step .sub { display: block; font-size: 12.5px; font-weight: 500; }
.stepper .step.done { background: var(--jd-ok-bg); color: var(--jd-ok); }
.stepper .step.done .n { background: var(--jd-ok); border-color: var(--jd-ok); color: #fff; }
.stepper .step.cur { background: var(--jd-warn-bg); color: var(--jd-warn); }
.stepper .step.cur .n { border-color: var(--jd-bar-2); color: var(--jd-warn); }
.stepper .step .sub.warn { color: var(--jd-danger); }

/* ---------- ประวัติเอกสาร ---------- */
.doc-history td, .doc-history th { font-size: 14px; height: auto; padding: 5px 10px; }
.doc-history tr.ev-unsign td, .doc-history tr.ev-unconfirm td { background: var(--jd-danger-bg); }
.doc-history .who { font-weight: 600; }
.doc-history .role { color: var(--jd-muted); font-size: 12.5px; }

/* ---------- ยืนยันเซ็น ---------- */
.sign-sheet { border: 1px solid var(--jd-line-2); border-radius: var(--jd-r); background: #fff; padding: var(--sp-4); }
.sign-sheet .sig-line { border-bottom: 1px solid var(--jd-ink); height: 80px; display: flex; align-items: flex-end; justify-content: center; }
.sign-sheet .sig-line img { max-height: 76px; max-width: 260px; }
.sign-sheet .sig-name { text-align: center; margin-top: 6px; font-weight: 600; }
.sign-sheet .sig-title { text-align: center; color: var(--jd-muted); font-size: 13.5px; }
.sig-prev, .sig-preview { max-height: 70px; max-width: 220px; border: 1px dashed var(--jd-line-2); background: repeating-conic-gradient(#F4EDE2 0% 25%, #fff 0% 50%) 50% / 16px 16px; padding: 4px; }

/* ---------- master-detail / แท็บ / login ---------- */
.split, .split-master { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
@media (max-width: 1024px) { .split, .split-master { grid-template-columns: minmax(0, 1fr); } }
.tabs-jd { display: flex; gap: 0; border-bottom: 2px solid var(--jd-head); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.tabs-jd button { border: 0; background: transparent; padding: 9px 16px; font-weight: 700; font-size: 15px; color: var(--jd-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs-jd button:hover { color: var(--jd-ink); background: var(--jd-hover); }
.tabs-jd button.active { color: var(--jd-primary-h); border-bottom-color: var(--jd-bar-2); background: var(--jd-surface); }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-6); }
.login-card { width: 380px; background: var(--jd-surface); border: 1px solid var(--jd-line); border-top: 4px solid var(--jd-bar-2); padding: var(--sp-8) var(--sp-8) var(--sp-6); border-radius: var(--jd-r-lg); }
.login-card .brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; color: var(--jd-primary-h); margin-bottom: var(--sp-6); }
.login-card .brand img { height: 32px; }
.login-card .form-control { height: 40px; }
.login-card .btn { height: var(--jd-h-lg); justify-content: center; }

/* ---------- หน้าสิทธิ์การใช้งาน ---------- */
.perm-hint { border-top: 0; border-bottom: 1px solid var(--jd-line); }
.perm-tbl td, .perm-tbl th { vertical-align: middle; }
.perm-tbl thead tr:first-child th { height: 36px; }
.perm-tbl thead tr:nth-child(2) th { top: 36px; height: 40px; font-size: 13px; white-space: normal; line-height: 1.2; }
.perm-tbl thead th.grp-h { text-align: center; }
.perm-tbl th.pc, .perm-tbl td.pc { text-align: center; width: 76px; min-width: 70px; padding-left: 4px !important; padding-right: 4px !important; }
.perm-tbl td.clip { max-width: 0; width: 18%; min-width: 150px; }
.perm-tbl thead th.first { box-shadow: inset 2px 0 0 rgba(255,255,255,.35); }
.perm-tbl tbody td.first { box-shadow: inset 2px 0 0 var(--jd-line); }
.perm-tbl td.pc .form-check-input { width: 18px; height: 18px; margin: 0; float: none; cursor: pointer; vertical-align: middle; }
.perm-tbl td.pc .form-check-input:disabled { opacity: .5; cursor: not-allowed; }
.perm-tbl td.pc.chg { background: var(--jd-warn-bg) !important; }
.perm-tbl tr.inactive td:not(.pc) { color: var(--jd-muted); }
.perm-tbl th:first-child, .perm-tbl td:first-child { position: sticky; left: 0; z-index: 2; background: var(--jd-surface); box-shadow: inset -1px 0 0 var(--jd-line); }
.perm-tbl thead th:first-child { z-index: 4; background: var(--jd-head); }
.perm-tbl.table-hover > tbody > tr:hover > td:first-child { background: var(--jd-hover); }
.perm-tbl .btn-reset { padding: 2px 8px; font-size: 13px; }
.perm-yes { color: var(--jd-ok); font-weight: 700; }
.perm-no { color: #CDBFA8; }
.dirty-note { font-size: 13.5px; font-weight: 600; color: var(--jd-warn); }
.dirty-note:empty { display: none; }

/* ---------- จอแคบ ≤1024 ---------- */
@media (max-width: 1024px) {
  .tbl-wrap { overflow-x: auto; }
  .tbl-wrap table th:first-child, .tbl-wrap table td:first-child { position: sticky; left: 0; z-index: 2; background: var(--jd-surface); box-shadow: inset -1px 0 0 var(--jd-line); }
  .tbl-wrap table thead th:first-child { z-index: 4; background: var(--jd-head); }
  .tbl-wrap table tr.grp td:first-child { background: var(--jd-hover); }
  .container-fluid.px-4 { padding-left: 12px !important; padding-right: 12px !important; }
}

/* group by หลายชั้น (กฎ 17): เลขลำดับบนปุ่มมิติ · แถบชั้นนอกเข้ม ชั้นในอ่อน · คอลัมน์ที่จัดกลุ่มซ่อน */
.seg .ord { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; font-size: 12px; font-weight: 700; background: var(--jd-primary); color: #fff; text-align: center; }
.seg .ord:empty { display: none; }
.seg .btn.active .ord { background: #fff; color: var(--jd-primary); }
.gb-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gb-cell .btn-ghost { height: 32px; padding: 0 8px; }
tr.grp.lv0 td, tr.grp.lv0.open td { background: #FFD98A; }
tr.grp.lv1 td, tr.grp.lv1.open td { background: var(--jd-selected); }
tr.grp.lv2 td, tr.grp.lv2.open td { background: var(--jd-hover); }
tr.grp td.num { font-weight: 700; }
tr.grp td.gl { font-weight: 700; }
.gb-hide { display: none !important; }