/* ============================================================
   JD Accounting — design tokens + component classes (ตาม HANDOFF.md 14/09/2026)
   แนวทาง: flat, ไม่มีมุมโค้ง, ไม่มีเงา (ยกเว้น modal), เส้นคั่นทำหน้าที่จัดระเบียบ
   Layout อ้างอิง Odoo: แถบเมนู navy, พื้นที่เนื้อหาขาว, control panel เหนือตาราง, list view แถวแน่น
   ============================================================ */
:root {
  --jd-navy: #163a6b;   /* แถบเมนู, หัวตาราง, เส้นคั่นหลัก */
  --jd-navy-d: #0f2b50;
  --jd-blue: #1e4e9a;   /* ปุ่มหลัก, chip ที่เลือก, ลิงก์ */
  --jd-sky: #3b9de8;    /* accent เล็ก ๆ, badge ข้อมูลสด */
  --jd-bg: #f3f6fb;     /* พื้นหลังหน้า */
  --jd-surface: #fff;
  --jd-line: #dfe6f1;   /* เส้นคั่นแถว 1px */
  --jd-line-2: #c9d6e8; /* ขอบ input */
  --jd-ink: #14243c;    /* ตัวอักษรหลัก */
  --jd-muted: #5b6d87;  /* label, ข้อความรอง */
  --jd-tint: #eaf1fb;   /* พื้นแถวกลุ่ม / hover */
  --jd-neg: #c62828;    /* ค่าลบ, ปุ่มลบ */
  --jd-ok: #0f7a52;     /* ✓ ตรง */
  --jd-warn: #8a5d00;   /* ⚠ ต่าง */
  --jd-radius: 0;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
  /* ให้ Bootstrap ใช้ค่าเดียวกัน */
  --bs-body-bg: var(--jd-bg); --bs-body-color: var(--jd-ink); --bs-border-color: var(--jd-line);
  --bs-link-color: var(--jd-blue); --bs-link-hover-color: var(--jd-navy);
  --bs-primary: var(--jd-blue); --bs-primary-rgb: 30, 78, 154;
}
html { font-size: 16px; }
body { font-family: 'Sarabun', 'Noto Sans Thai', sans-serif; background: var(--jd-bg); color: var(--jd-ink); -webkit-font-smoothing: antialiased; }
a { color: var(--jd-blue); text-decoration: none; }
a:hover { color: var(--jd-navy); text-decoration: underline; }
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 { outline: 2px solid var(--jd-blue); outline-offset: 2px; }
.form-control:focus, .form-select:focus, .btn:focus-visible { outline: 2px solid var(--jd-blue); outline-offset: 2px; box-shadow: none; border-color: var(--jd-line-2); }

/* ---------- ตัดมุมโค้ง/เงาของ Bootstrap ทั้งระบบ ---------- */
.btn, .form-control, .form-select, .card, .modal-content, .alert, .badge, .dropdown-menu, .input-group-text, .progress, .progress-bar, .form-check-input, .form-switch .form-check-input, .toast, .list-group-item {
  border-radius: 0 !important; box-shadow: none !important;
}

/* ---------- แถบเมนู ---------- */
.navbar-jd { background: var(--jd-navy); padding: 0; min-height: 56px; border-bottom: 2px solid var(--jd-navy-d); }
.navbar-jd .container-fluid { min-height: 56px; }
.navbar-jd .navbar-brand { font-weight: 700; color: #fff; display: flex; align-items: center; gap: .5rem; font-size: 17px; margin-right: var(--sp-6); }
.navbar-jd .navbar-brand img { height: 24px; }
.navbar-jd .nav-link { color: rgba(255,255,255,.82); padding: 0 var(--sp-3) !important; height: 56px; display: flex; align-items: center; border-bottom: 3px solid transparent; font-weight: 600; }
.navbar-jd .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.navbar-jd .nav-link.active { color: #fff; border-bottom-color: var(--jd-sky); }
.navbar-jd .nav-user { color: rgba(255,255,255,.7); font-size: 13.5px; margin-right: var(--sp-3); }
.navbar-jd .btn-outline-light { border-color: rgba(255,255,255,.5); color: #fff; height: 30px; padding: 0 10px; font-size: 13.5px; }
.navbar-jd .btn-outline-light:hover { background: #fff; color: var(--jd-navy); }
.navbar-jd .navbar-toggler { border-radius: 0; border-color: rgba(255,255,255,.4); }
.page-title { font-size: 30px; font-weight: 700; margin: 0 0 var(--sp-3); }

/* ---------- ปุ่ม ---------- */
.btn { height: 34px; 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; }
.btn-sm { height: 32px; line-height: 30px; padding: 0 12px; font-size: 14px; }
.btn-lg { height: 42px; line-height: 40px; font-size: 16px; }
.btn-primary { background: var(--jd-blue); border-color: var(--jd-blue); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--jd-navy) !important; border-color: var(--jd-navy) !important; color: #fff; }
.btn-outline-secondary { background: var(--jd-surface); border-color: var(--jd-line-2); color: var(--jd-ink); }
.btn-outline-secondary:hover, .btn-outline-secondary:active { background: var(--jd-tint) !important; border-color: var(--jd-blue) !important; color: var(--jd-ink) !important; }
.btn-outline-primary { background: var(--jd-surface); border-color: var(--jd-blue); color: var(--jd-blue); }
.btn-outline-primary:hover, .btn-check:checked + .btn-outline-primary, .btn-outline-primary:active { background: var(--jd-blue) !important; border-color: var(--jd-blue) !important; color: #fff !important; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--jd-blue); }
.btn-ghost:hover { background: var(--jd-tint); color: var(--jd-navy); }
.btn-outline-danger, .btn-danger { border-color: var(--jd-neg); color: var(--jd-neg); background: var(--jd-surface); }
.btn-outline-danger:hover, .btn-danger, .btn-danger:hover { background: var(--jd-neg) !important; color: #fff !important; border-color: var(--jd-neg) !important; }
.btn-icon { width: 34px; padding: 0; justify-content: center; }
.btn:disabled { opacity: .55; }

/* ---------- ฟอร์ม ---------- */
.form-control, .form-select { height: 34px; padding: 0 10px; border: 1px solid var(--jd-line-2); font-size: 15px; color: var(--jd-ink); background-color: var(--jd-surface); }
.form-control-sm, .form-select-sm { height: 32px; font-size: 14.5px; }
textarea.form-control { height: auto; padding: 8px 10px; }
.form-control:disabled, .form-control[readonly] { background: var(--jd-bg); color: var(--jd-muted); }
label, .form-label { font-size: 12.5px; font-weight: 600; color: var(--jd-muted); margin-bottom: 3px; display: block; }
.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-blue); border-color: var(--jd-blue); }
.form-check-label { font-size: 14.5px; color: var(--jd-ink); font-weight: 400; display: inline; }
/* switch สี่เหลี่ยม 38×20 */
.form-switch .form-check-input { width: 38px; height: 20px; margin-top: 0; background-image: none; position: relative; background-color: var(--jd-line-2); border-color: var(--jd-line-2); }
.form-switch .form-check-input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: #fff; transition: left .12s; }
.form-switch .form-check-input:checked { background-color: var(--jd-blue); border-color: var(--jd-blue); }
.form-switch .form-check-input:checked::after { left: 21px; }
.form-switch { display: flex; align-items: center; gap: 8px; padding-left: 0; }
.form-switch .form-check-label { font-size: 14px; }

/* ---------- 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-start; 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-bg); }
.ctrl-row.bar > div { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ctrl label { margin-bottom: 3px; }
.ctrl-hint { font-size: 13px; color: var(--jd-muted); padding: 6px var(--sp-4); border-top: 1px solid var(--jd-line); }
/* กลุ่มตัวกรองพับได้ */
.ctrl-group { border-top: 1px solid var(--jd-line); }
.ctrl-group > .cg-head { display: flex; align-items: center; gap: 8px; padding: 8px var(--sp-4); cursor: pointer; user-select: none; font-size: 14px; font-weight: 600; color: var(--jd-ink); }
.ctrl-group > .cg-head:hover { background: var(--jd-tint); }
.ctrl-group > .cg-head .caret { color: var(--jd-blue); width: 1em; display: inline-block; }
.ctrl-group > .cg-body { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); padding: 0 var(--sp-4) var(--sp-3); }
.ctrl-group.collapsed > .cg-body { display: none; }
.cg-count { background: var(--jd-blue); color: #fff; font-size: 12px; font-weight: 700; padding: 1px 7px; margin-left: 4px; }
.cg-count:empty { display: none; }
.co-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.co-chips .btn { height: 32px; line-height: 30px; padding: 0 12px; font-size: 14px; font-weight: 600; }

/* ---------- segmented control ---------- */
.seg { display: inline-flex; border: 1px solid var(--jd-blue); }
.seg .btn { border: 0; border-radius: 0 !important; height: 32px; line-height: 32px; padding: 0 14px; background: var(--jd-surface); color: var(--jd-blue); font-weight: 600; }
.seg .btn + .btn, .seg .btn-check + .btn { border-left: 1px solid var(--jd-blue); }
.seg .btn-check + .btn { margin: 0; }
.seg .btn-check:first-child + .btn { border-left: 0; }
.seg .btn-check:checked + .btn { background: var(--jd-blue) !important; color: #fff !important; }
.seg .btn-outline-danger, .seg .btn-outline-warning, .seg .btn-outline-success { color: var(--jd-ink); }

/* ---------- chips (ตัวเลือกหลายค่า) ---------- */
.mpick { min-width: 240px; border: 1px solid var(--jd-line-2); background: var(--jd-surface); padding: 3px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 34px; }
.mpick input.form-control { border: 0; height: 26px; min-width: 140px; flex: 1; padding: 0 6px; font-size: 14.5px; }
.mpick input.form-control:focus { outline: none; }
.mpick .chips { display: contents; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; background: var(--jd-blue); color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.chip .x { cursor: pointer; font-weight: 700; opacity: .8; }
.chip .x:hover { opacity: 1; color: #fff; }

/* ---------- badge (พื้นอ่อน + เส้นซ้าย 3px) ---------- */
.src-badge, .jd-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; font-size: 12.5px; font-weight: 600; border-left: 3px solid var(--jd-muted); background: #edf0f4; color: var(--jd-ink); white-space: nowrap; }
.src-badge:empty, .jd-badge:empty { display: none; }
.src-live { background: #e6f2fc; border-left-color: var(--jd-sky); color: #17456f; }
.src-snapshot, .src-frozen, .st-closed { background: #e8ecf3; border-left-color: var(--jd-navy); color: var(--jd-navy); }
.src-mixed, .bs-partial, .st-warn { background: #fbf1dc; border-left-color: var(--jd-warn); color: var(--jd-warn); }
.st-open, .bs-paid, .st-ok { background: #e4f3ec; border-left-color: var(--jd-ok); color: var(--jd-ok); }
.bs-open, .st-bad { background: #fdecec; border-left-color: var(--jd-neg); color: var(--jd-neg); }
.st-future, .st-na, .st-gray { background: #edf0f4; border-left-color: #9aa8bb; color: var(--jd-muted); }

/* ---------- card / panel ---------- */
.card { border: 1px solid var(--jd-line); background: var(--jd-surface); }
.card-header { background: var(--jd-surface); border-bottom: 2px solid var(--jd-navy); font-weight: 700; font-size: 17px; 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-bg); border-top: 1px solid var(--jd-line); }
.kpi { background: var(--jd-surface); border: 1px solid var(--jd-line); border-top: 2px solid var(--jd-navy); padding: 10px 14px; }
.kpi .k { font-size: 12.5px; font-weight: 600; color: var(--jd-muted); }
.kpi .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .v.fs-6 { font-size: 16px; }
.alert { border-width: 1px; border-left-width: 4px; padding: 8px 12px; }
.alert-danger { background: #fdecec; border-color: var(--jd-neg); color: #7a1c1c; }
.alert-warning { background: #fbf1dc; border-color: var(--jd-warn); color: #5d3f00; }
.alert-success { background: #e4f3ec; border-color: var(--jd-ok); color: #0b5a3c; }
.alert-light { background: var(--jd-bg); border-color: var(--jd-line-2); color: var(--jd-ink); }

/* ---------- ตาราง list view ---------- */
.table { font-size: 15px; margin-bottom: 0; --bs-table-bg: transparent; border-color: var(--jd-line); }
.table > :not(caption) > * > * { padding: 7px 10px; border-bottom: 1px solid var(--jd-line); background: transparent; }
.table thead th { background: var(--jd-navy); color: #fff; font-weight: 600; font-size: 13.5px; white-space: nowrap; position: sticky; top: 0; z-index: 3; border-bottom: 0; vertical-align: middle; }
.table.table-hover > tbody > tr:hover > * { background: #f7faff; color: inherit; }
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { background: var(--jd-navy-d); }
th[data-sort].asc::after { content: " ▲"; font-size: .7em; color: var(--jd-sky); }
th[data-sort].desc::after { content: " ▼"; font-size: .7em; color: var(--jd-sky); }
td.num, th.num { text-align: right; white-space: nowrap; }
td.neg { color: var(--jd-neg); }
td.nowrap, .text-nowrap { white-space: nowrap; }
tr.total td { font-weight: 700; border-top: 2px solid var(--jd-navy); background: var(--jd-surface); }
tr.grp td { background: var(--jd-tint); font-weight: 600; cursor: pointer; }
tr.grp.lv2 td { background: #f3f7fc; }
.grp .caret, .caret { display: inline-block; width: 1.1em; color: var(--jd-blue); }
.grp .cnt { color: var(--jd-muted); font-weight: 400; font-size: .86em; margin-left: .4em; }
tr.sub td, tr.member td, tr.match td { background: #fbfcfe; }
tr.sub td:first-child, tr.member td:first-child, tr.match td:first-child { box-shadow: inset 3px 0 0 var(--jd-line-2); }
tr.match td { font-size: 13.5px; color: var(--jd-muted); }
tr.opening td { background: var(--jd-tint); color: var(--jd-muted); }
tr.table-light td { background: var(--jd-bg); }
tr.table-warning td { background: #fbf1dc; }
.tbl-wrap { max-height: calc(100vh - 230px); overflow: auto; border-top: 1px solid var(--jd-line); }
.tbl-note { font-size: 12.5px; color: var(--jd-muted); padding: 4px var(--sp-4); border-top: 1px solid var(--jd-line); display: none; }
.mono { font-family: 'IBM Plex Mono', Consolas, monospace; font-size: .92em; }
.link { color: var(--jd-blue); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; }
a.odoo-link { color: var(--jd-blue); font-family: 'IBM Plex Mono', Consolas, monospace; font-size: .92em; }
a.odoo-link::after { content: " ↗"; font-size: .8em; color: var(--jd-sky); }
.exp { cursor: pointer; color: var(--jd-blue); display: inline-block; width: 1.1em; font-weight: 700; }
.indent-1 { padding-left: 31px !important; }
.indent-2 { padding-left: 56px !important; }
/* state: ว่าง / กำลังโหลด */
.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, #edf0f4 25%, #f7f9fc 50%, #edf0f4 75%); background-size: 200% 100%; animation: skel 1.1s infinite; }
@keyframes skel { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* ---------- pager (มุมบนขวา) ---------- */
.pager { display: flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
.pager input { width: 56px; text-align: center; height: 30px; }
.pager .btn { height: 30px; line-height: 28px; padding: 0 10px; }
.tbl-head { 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-navy); background: var(--jd-surface); }
.tbl-head .title { font-size: 17px; font-weight: 700; }
.tbl-head .right { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.tbl-head .sums { font-size: 13.5px; color: var(--jd-muted); font-variant-numeric: tabular-nums; }

/* ---------- ตารางงวด ---------- */
.pgrid td { text-align: center; cursor: pointer; padding: 6px 4px; }
.pgrid td.future, .pgrid td.na { cursor: default; }
.pgrid .cell { display: inline-block; min-width: 3.4rem; padding: 4px 6px; font-size: 13.5px; font-weight: 600; border-left: 3px solid transparent; }
.pgrid .cell.closed { background: #e8ecf3; border-left-color: var(--jd-navy); color: var(--jd-navy); }
.pgrid .cell.open { background: #e4f3ec; border-left-color: var(--jd-ok); color: var(--jd-ok); }
.pgrid .cell.future, .pgrid .cell.na { background: #f1f3f6; color: #9aa8bb; }

/* ---------- modal ---------- */
.modal-content { border: 2px solid var(--jd-ink); box-shadow: 0 12px 32px rgba(20,36,60,.22) !important; }
.modal-header { border-bottom: 2px solid var(--jd-navy); padding: 12px var(--sp-4); }
.modal-title { font-size: 17px; font-weight: 700; }
.modal-body { padding: var(--sp-4); }
.modal-footer { background: var(--jd-bg); 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; }
.btn-close { border-radius: 0; }

/* ---------- progress ---------- */
.progress { height: 10px; background: var(--jd-line); }
.progress-bar { background: var(--jd-blue); background-image: linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%); background-size: 28px 28px; animation: jdbar 1s linear infinite; }
@keyframes jdbar { 0% { background-position: 0 0 } 100% { background-position: 28px 0 } }

/* ---------- login ---------- */
.login-card { width: 380px; background: var(--jd-surface); border: 1px solid var(--jd-line); border-top: 4px solid var(--jd-navy); padding: var(--sp-8) var(--sp-8) var(--sp-6); }
.login-card .brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; color: var(--jd-navy); margin-bottom: var(--sp-6); }
.login-card .brand img { height: 32px; }

/* ---------- toast / fav bar ---------- */
#toastBox .alert { min-width: 260px; }
.fav-bar, .ctrl-row.bar > .fav-bar { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.fav-bar label { display: inline; white-space: nowrap; margin: 0 4px 0 0; }
.fav-bar select { max-width: 240px; min-width: 160px; }
.fav-bar .btn-icon { flex: 0 0 auto; }

/* ---------- เพิ่มเติม: label hint, กลุ่มตัวกรอง, pager box, modal ซ้อน, login ---------- */
label .hint { color: var(--jd-blue); font-weight: 400; }
.ctrl-hint:empty { display: none; }
.cg-note { font-size: 13px; font-weight: 400; color: var(--jd-muted); }
.ctrl > .d-flex { padding: var(--sp-3) var(--sp-4); }
.pg-box { display: inline-flex; align-items: stretch; height: 30px; border: 1px solid var(--jd-line-2); background: var(--jd-surface); }
.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-tint); }
.pg-box button:disabled { color: #b8c3d3; }
.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); }
.co-chips .btn .x { margin-left: 2px; opacity: .85; }
.table td.small { font-size: 14px; }
.jd-confirm { z-index: 1070; }
.modal-backdrop ~ .modal-backdrop { z-index: 1065; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-6); }
.login-card .form-control { height: 40px; }
.login-card .btn { height: 42px; }

/* ---------- layout fixes (ตรวจ 14/09/2026) ---------- */
/* select: เว้นที่ให้ลูกศร ข้อความไม่ถูกทับ */
.form-select { padding: 0 30px 0 10px; background-position: right 9px center; background-size: 12px 10px; }
#pp_type { min-width: 124px; }
#pp_year, #year, #bkYear { min-width: 92px; }
#pp_num, #bkMonth { min-width: 96px; }
#perPage { min-width: 76px; }
#bkCo { min-width: 180px; }
.ctrl input[type="date"] { width: 156px; }
/* switch: Bootstrap ดึง input ไปซ้าย -2.5em ทำให้ทับปุ่มข้างหน้า / หลุดขอบ modal */
.form-switch .form-check-input { margin-left: 0; float: none; flex: 0 0 auto; }
.form-switch { min-height: 32px; }
/* กลุ่มตัวกรองรอง: grid ความกว้างเท่ากันทุกช่อง */
.ctrl-group > .cg-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-3) var(--sp-4); }
.ctrl-group.collapsed > .cg-body { display: none; }
.cg-body > div { min-width: 0 !important; }
.cg-body .form-control, .cg-body .form-select, .cg-body .mpick { width: 100% !important; min-width: 0; }
.mpick { min-height: 34px; }
/* ตาราง: ข้อความยาวไม่ตกบรรทัด — ตัดด้วย … ดูเต็มได้จาก tooltip */
.table td.clip, .table td.clip-s, .table td.clip-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* max-width:0 + width% = คอลัมน์ข้อความหดตามความกว้างตาราง (คอลัมน์ตัวเลขไม่ถูกดันตกขอบ) · min-width กันแคบเกิน */
.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; }
.acc-name { color: var(--jd-muted); font-size: 14px; }
/* ช่อง date แสดง DD/MM/YYYY (overlay ทับข้อความ native ที่เป็นรูปแบบตามเครื่อง) */
.jd-dt-wrap { position: relative; display: inline-block; }
input.jd-dt:not(:focus), input.jd-dt:not(:focus)::-webkit-datetime-edit { color: transparent; }
.jd-dt-ov { position: absolute; left: 0; top: 0; bottom: 0; padding-left: 10px; display: flex; align-items: center; pointer-events: none; font-size: 14.5px; color: var(--jd-ink); font-variant-numeric: tabular-nums; }
input.jd-dt:disabled + .jd-dt-ov { color: var(--jd-muted); }
input.jd-dt:focus + .jd-dt-ov { display: none; }
/* หัวตาราง: ส่วนขวาอยู่แถวเดียวบนจอกว้าง */
.tbl-head .right { flex-wrap: nowrap; }
@media (max-width: 1200px) { .tbl-head .right { flex-wrap: wrap; } }
/* ปุ่มใน card ชิดซ้ายตามมาตรฐาน */
.card-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
/* ปิดงวด */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pgrid td:first-child { text-align: left; width: 90px; font-weight: 600; cursor: default; }

/* ---------- หน้าสิทธิ์การใช้งาน ---------- */
.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: #fbf1dc !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-navy); }
.perm-tbl.table-hover > tbody > tr:hover > td:first-child { background: #f7faff; }
.perm-tbl .btn-reset { padding: 2px 8px; font-size: 13px; }
.perm-yes { color: var(--jd-ok); font-weight: 700; }
.perm-no { color: #b8c3d3; }
.dirty-note { font-size: 13.5px; font-weight: 600; color: var(--jd-warn); }
.dirty-note:empty { display: none; }

/* ---------- จอแคบ ≤1024 ---------- */
@media (max-width: 1024px) {
  .navbar-jd, .navbar-jd .container-fluid { min-height: 48px; }
  .navbar-jd .nav-link { height: 48px; padding: 0 10px !important; }
  .navbar-jd .navbar-brand { font-size: 15px; }
  .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-navy); }
  .tbl-wrap table tr.grp td:first-child { background: var(--jd-tint); }
  .tbl-wrap table tr.total td:first-child { background: var(--jd-surface); }
  .tbl-note { display: block; }
  .container-fluid.px-4 { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ---------- ยอดขาย/ต้นทุน: หัวตาราง 2 ชั้น (ประเภทลูกค้า → Sales/KG/Cost/Margin) ---------- */
.sales-tbl.two-head thead tr:first-child th { height: 36px; }
.sales-tbl.two-head thead tr:nth-child(2) th { top: 36px; }
.sales-tbl thead th.grp-h { text-align: center; }
.sales-tbl thead th.first { box-shadow: inset 2px 0 0 rgba(255, 255, 255, .35); }
.sales-tbl tbody td.first { box-shadow: inset 2px 0 0 var(--jd-line); }
.sales-tbl td.num, .sales-tbl th.num { white-space: nowrap; }
.sales-tbl td.clip-l { max-width: 0; width: 26%; min-width: 180px; }
/* เมนู 8 รายการ: ห้ามตัดบรรทัด · จอ < 1200 ซ่อนชื่อผู้ใช้ + บีบระยะ ให้พอในแถวเดียว */
.navbar-jd .nav-link, .navbar-jd .nav-user, .navbar-jd .btn-outline-light { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1199.98px) {
  .navbar-jd .nav-user { display: none; }
  .navbar-jd .navbar-brand { margin-right: var(--sp-3); font-size: 16px; }
  .navbar-jd .nav-link { padding: 0 9px !important; font-size: 14.5px; }
}
.sales-tbl.two-head td.clip-l { width: 15%; min-width: 130px; }
.sales-tbl.two-head td.num, .sales-tbl.two-head th.num { padding-left: 6px !important; padding-right: 8px !important; }
.sales-tbl th:first-child, .sales-tbl td:first-child { position: sticky; left: 0; z-index: 2; box-shadow: inset -1px 0 0 var(--jd-line); }
.sales-tbl tbody td:first-child { background: var(--jd-surface); }
.sales-tbl tbody tr.grp td:first-child { background: var(--jd-tint); }
.sales-tbl tbody tr.sub td:first-child { background: #fbfcfe; }
.sales-tbl thead th:first-child { z-index: 4; }
/* ---------- มูลค่าสต็อก ---------- */
.stock-tbl td.clip-l { max-width: 0; width: 38%; min-width: 220px; }
.stock-tbl td.num, .stock-tbl th.num { white-space: nowrap; }
/* ---------- เมนูหลัก → เมนูย่อย + เมนูผู้ใช้ ---------- */
.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; border: 1px solid var(--jd-line-2); border-top: 2px solid var(--jd-sky); box-shadow: 0 6px 16px rgba(15, 43, 80, .16); min-width: 200px; }
.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-tint); color: var(--jd-navy); text-decoration: none; }
.navbar-jd .dropdown-item.active, .navbar-jd .dropdown-item:active { background: var(--jd-tint); color: var(--jd-navy); box-shadow: inset 3px 0 0 var(--jd-sky); }
.navbar-jd .dropdown-item-text { padding: 6px 16px; white-space: nowrap; }
.navbar-jd .nav-link.nav-user { margin-right: 0; font-size: 14.5px; color: rgba(255, 255, 255, .88); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) and (max-width: 1199.98px) { .navbar-jd .nav-link.nav-user { display: flex; max-width: 150px; } }
@media (min-width: 768px) and (max-width: 991.98px) { .navbar-jd .navbar-brand { font-size: 0; margin-right: 4px; } .navbar-jd .nav-link { padding: 0 7px !important; font-size: 14px; } }
@media (max-width: 767.98px) {
  .navbar-jd .nav-link { height: 44px; }
  .navbar-jd .dropdown-menu { border: 0; border-left: 2px solid var(--jd-sky); box-shadow: none; background: var(--jd-navy-d); margin: 0 0 4px 12px; }
  .navbar-jd .dropdown-item, .navbar-jd .dropdown-item-text { color: rgba(255, 255, 255, .88) !important; }
  .navbar-jd .dropdown-item:hover, .navbar-jd .dropdown-item:focus, .navbar-jd .dropdown-item:active, .navbar-jd .dropdown-item.active { background: rgba(255, 255, 255, .08); color: #fff !important; }
}
/* ปุ่มกลุ่ม (seg) หลายตัวเลือกบนจอแคบ: ตัดขึ้นบรรทัดใหม่ทั้งปุ่ม ไม่ตัดกลางคำ / ไม่ล้นจอ */
.seg .btn { white-space: nowrap; }
@media (max-width: 767.98px) { .seg { display: flex; flex-wrap: wrap; row-gap: 4px; border: 0; } .seg .btn { border: 1px solid var(--jd-blue) !important; margin-right: -1px; } }