/* ระบบภายในบริษัท ระบบ - ออกแบบให้ใช้งานง่ายที่สุด ตัวอักษรใหญ่ ปุ่มใหญ่ */
/* โทนสีอ้างอิงจากเว็บ J&T Express Thailand (แดง-ขาว) เพราะ ระบบ เป็นพาร์ทเนอร์ขนส่ง J&T */
:root {
    --jt-red: #e60000;
    --jt-red-dark: #b30000;
    --jt-red-tint: #fdeaea;
}
* { box-sizing: border-box; }
body {
    font-family: "Sarabun", "Tahoma", sans-serif;
    background: #f2f4f7;
    margin: 0;
    color: #222;
    font-size: 18px;
}
.topbar {
    background: #fff;
    color: #222;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 4px solid var(--jt-red);
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}
.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.brand-mark-img {
    height: 48px;
    width: auto;
    flex-shrink: 0;
}
.brand-mark-custom {
    padding-left: 12px;
    border-left: 2px solid #eee;
}
.brand-tagline {
    color: #777;
    font-size:14px;
    line-height: 1.3;
    border-left: 2px solid #eee;
    padding-left: 12px;
    margin-left: 4px;
}
.topbar-btn {
    background: var(--jt-red);
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 999px;
    transition: 0.15s;
}
.topbar-btn:hover { background: var(--jt-red-dark); }
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.logout-form { margin: 0; }
.layout {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
}
.sidebar {
    width: 200px;
    flex-shrink: 0;
    background: #fff;
    min-height: calc(100vh - 78px);
    padding: 20px 0;
    box-shadow: 1px 0 6px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
}
.sidebar-link {
    display: block;
    padding: 14px 24px;
    color: #444;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-left: 4px solid transparent;
}
.sidebar-link:hover { background: var(--jt-red-tint); }
.sidebar-link.active {
    color: var(--jt-red);
    border-left-color: var(--jt-red);
    background: var(--jt-red-tint);
}
.sidebar-group-title {
    margin: 16px 0 4px;
    padding: 0 24px;
    font-size:14px;
    font-weight: bold;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    flex: 1;
}
.nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 24px 0;
}
.nav-btn {
    display: block;
    background: #fff;
    border: 3px solid var(--jt-red);
    border-radius: 14px;
    padding: 28px 12px;
    text-align: center;
    text-decoration: none;
    color: var(--jt-red);
    font-size: 22px;
    font-weight: bold;
    transition: 0.15s;
}
.nav-btn:hover {
    background: var(--jt-red);
    color: #fff;
}
.card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.card h2 { margin-top: 0; }
table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 17px;
}
th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}
th { background: var(--jt-red-tint); }
tr:nth-child(even) { background: #fafafa; }
.btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 8px;
    border: none;
    background: var(--jt-red);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { background: var(--jt-red-dark); }
.btn-secondary { background: #757575; }
.btn-secondary:hover { background: #545454; }
.btn-danger { background: var(--jt-red-dark); }
.btn-small { padding: 6px 12px; font-size: 14px; }
.employee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
}
.employee-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    text-decoration: none;
    color: #222;
    display: block;
    transition: 0.15s;
    border: 1px solid #eee;
}
.employee-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.16);
    transform: translateY(-2px);
}
.employee-photo-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--jt-red-tint);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.employee-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.employee-photo-placeholder {
    font-size: 48px;
    color: var(--jt-red);
    opacity: 0.5;
}
.employee-card-body {
    padding: 12px 14px;
}
.employee-card-code {
    font-size:14px;
    color: #888;
}
.employee-card-name {
    font-size: 17px;
    font-weight: bold;
    margin: 2px 0 4px;
    line-height: 1.25;
}
.employee-card-nickname {
    font-weight: normal;
    color: #1F4E79;
}
.employee-card-position {
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
    min-height: 1.2em;
}
.employee-badge {
    display: inline-block;
    font-size:14px;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 999px;
}
.employee-badge-active { background: #d4edda; color: #155724; }
.employee-badge-probation { background: #fff3cd; color: #856404; }
.employee-badge-inactive { background: #f8d7da; color: #721c24; }
form label {
    display: block;
    margin-top: 14px;
    font-weight: bold;
}
form input, form select, form textarea {
    width: 100%;
    padding: 10px;
    font-size: 17px;
    margin-top: 4px;
    border: 1px solid #ccc;
    border-radius: 6px;
}
form .checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}
form .checkbox-row input { width: auto; }
.autocomplete-wrap { position: relative; }
.autocomplete-list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.ac-item {
    padding: 10px 12px;
    font-size: 16px;
    cursor: pointer;
}
.ac-item:hover { background: var(--jt-red-tint); }
.form-actions { margin-top: 20px; }
.form-actions-sticky {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 14px 0;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
    z-index: 10;
}
.flash {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: bold;
}
.flash-success { background: #d4edda; color: #155724; }
.flash-danger { background: #f8d7da; color: #721c24; }
.flash-warning { background: #fff3cd; color: #856404; }
/* กล่อง "ตัวช่วย" (flash_help) */
.help-box { background: #fff; border: 1px solid #e3e7ec; border-left: 8px solid #d9534f; border-radius: 12px; padding: 16px 20px; margin-bottom: 18px; box-shadow: 0 2px 8px rgba(16,24,40,.07); font-size: 17px; line-height: 1.6; color: #2b2f36; }
.help-warning { border-left-color: #f0ad4e; }
.help-success { border-left-color: #2e9e5b; }
.help-head { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: bold; margin-bottom: 6px; }
.help-ico { font-size: 26px; }
.help-why { margin: 4px 0 8px; }
.help-steps { margin: 6px 0 14px 4px; padding-left: 24px; }
.help-steps li { margin-bottom: 4px; }
.help-box .btn { text-decoration: none; display: inline-block; }
.help-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.help-generic .help-title { color: #b30000; }
@media (max-width: 600px) { .help-actions .btn-lg { flex: 1 1 100%; text-align: center; } }
.summary-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.summary-box .item {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.summary-box .item .num {
    font-size: 32px;
    font-weight: bold;
    color: var(--jt-red);
}
/* ตัวเลขสรุปที่กดได้ (หน้าฝ่ายบุคคล) — กดแล้วไปที่รายการข้อมูลของตัวเลขนั้น */
.summary-box a.item-link {
    display: block;
    color: inherit;
    text-decoration: none;
    border: 2px solid transparent;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.summary-box a.item-link:hover,
.summary-box a.item-link:focus-visible {
    border-color: var(--jt-red);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}
.summary-box .item-more {
    margin-top: 6px;
    font-size: 14px;
    color: var(--jt-red);
    font-weight: bold;
}
.dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 28px 0;
}
.dept-card {
    background: #fff;
    border: 3px solid var(--jt-red);
    border-radius: 16px;
    padding: 32px 20px;
    text-align: center;
    text-decoration: none;
    color: #222;
    transition: 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.dept-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.16);
    transform: translateY(-3px);
}
.dept-card-icon { font-size: 44px; margin-bottom: 8px; }
.dept-card-title {
    font-size: 22px;
    font-weight: bold;
    color: var(--jt-red);
    margin-bottom: 8px;
}
.dept-card-desc {
    font-size: 15px;
    color: #666;
    min-height: 2.6em;
    margin-bottom: 12px;
}
.dept-card-stat {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    background: var(--jt-red-tint);
    color: var(--jt-red-dark);
    padding: 6px 16px;
    border-radius: 999px;
}
.dept-card-soon {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    background: #fff3cd;
    color: #856404;
    padding: 6px 16px;
    border-radius: 999px;
}
.search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.search-row input, .search-row select {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
}
.back-link {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--jt-red);
    text-decoration: none;
    font-weight: bold;
}
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f4f7;
}
.login-box {
    width: 100%;
    max-width: 360px;
    text-align: center;
}
.login-logo {
    height: 48px;
    margin-bottom: 12px;
}
.login-logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.login-logo-row .login-logo { margin-bottom: 0; }
.login-box h2 {
    margin-top: 0;
}
.login-box form {
    text-align: left;
}
.login-box .btn {
    width: 100%;
}
.payslip-sheet {
    max-width: 600px;
    margin: 0 auto;
}
@media print {
    .topbar, .sidebar, .no-print, .flash { display: none !important; }
    .layout, .container { max-width: 100%; margin: 0; padding: 0; display: block; }
    body { background: #fff; }
    .card { box-shadow: none; }
}

/* ---------- บัญชีการเงิน: ตรวจสอบเงินหน้าร้าน / ลูกค้าค้างชำระ ---------- */
.fin-alert { padding: 14px 18px; border-radius: 10px; margin-bottom: 14px; font-size: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.fin-alert-ok { background: #d4edda; color: #155724; }
.fin-alert-bad { background: #f8d7da; color: #721c24; }
.fin-alert-warn { background: #fff3cd; color: #856404; }
.fin-chips { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.fin-chip { background: #fff; color: #721c24; border: 1px solid currentColor; border-radius: 16px; padding: 4px 12px; font-size: 16px; text-decoration: none; display: inline-block; }
.fin-matrix th, .fin-matrix td { text-align: center; }
.fin-td { padding: 4px; }
.fin-cell { display: block; border-radius: 8px; padding: 8px 6px; font-size: 16px; font-weight: bold; text-decoration: none; line-height: 1.35; }
.fin-legend .fin-cell { display: inline-block; margin-right: 6px; }
.fin-cell small { display: block; font-weight: normal; font-size:14px; }
.fin-ok { background: #d4edda; color: #155724; }
.fin-bad { background: #f8d7da; color: #721c24; }
.fin-warn { background: #fff3cd; color: #856404; }
.fin-missing { background: #ffe0b2; color: #8a4b00; border: 2px dashed #e67e00; }
.fin-pending { background: #eceff1; color: #546e7a; }
.fin-step h2 small { font-weight: normal; font-size: 15px; color: #666; }
.fin-big { font-size: 34px; font-weight: bold; margin: 8px 0; }
.fin-big small { font-size: 16px; font-weight: normal; }
.fin-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.fin-row input { width: auto; flex: 1 1 150px; }
.fin-row .btn { flex: 0 0 auto; }
/* แถวลูกค้าค้างชำระ (หน้าปิดยอด): จอกว้างให้ปุ่ม ✕ อยู่ข้างแถวเสมอ ไม่ตกบรรทัดใต้ช่องยอด */
@media (min-width: 800px) {
    .ctr .credit-holder .fin-row { flex-wrap: nowrap; }
    .ctr .credit-holder .fin-row input { min-width: 0; flex: 1 1 80px; }
}
/* ตาราง "ตรวจรายเคาน์เตอร์" บนมือถือ: แต่ละเคาน์เตอร์เป็นการ์ด ไม่ถูกตัด */
@media (max-width: 700px) {
    .ctr-tbl, .ctr-tbl tbody, .ctr-tbl tr, .ctr-tbl td { display: block; width: 100%; }
    .ctr-tbl tr:first-child { display: none; }
    .ctr-tbl tr { border: 1px solid #d9dee5; border-radius: 12px; margin-bottom: 12px; padding: 8px 12px; background: #fff; }
    .ctr-tbl td { display: flex; justify-content: space-between; gap: 12px; text-align: right !important; border: none; padding: 4px 0; font-size: 17px; }
    .ctr-tbl td::before { content: attr(data-label); color: #667085; font-weight: normal; text-align: left; }
}
.fin-sum { width: 100%; font-size: 19px; }
.fin-sum td:last-child { text-align: right; white-space: nowrap; }
.fin-sum-total td { font-weight: bold; background: var(--jt-red-tint); }
.fin-live { border: 3px solid #ccc; }
.fin-live-ok { border-color: #2e9e4f; background: #f1fbf4; }
.fin-live-bad { border-color: var(--jt-red); background: #fff5f5; }
.fin-live-ok .fin-big { color: #155724; }
.fin-live-bad .fin-big { color: #b30000; }
.fin-slips { display: flex; flex-wrap: wrap; gap: 12px; }
.fin-slip { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: inherit; }
.fin-slip img { max-height: 180px; max-width: 160px; border: 1px solid #ccc; border-radius: 6px; }
.topbar-btn.fin-alert-btn { background: #f39c12; color: #fff; }
.topbar-btn.petty-alert-btn { background: #c0392b; color: #fff; animation: petty-pulse 2s ease-in-out infinite; }
@keyframes petty-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,.5); } 50% { box-shadow: 0 0 0 6px rgba(192,57,43,0); } }
@media (prefers-reduced-motion: reduce) { .topbar-btn.petty-alert-btn { animation: none; } }
.petty-home-alert { position: relative; border-left: 6px solid #c0392b; background: #fff5f4; }
.petty-home-alert ul { list-style: none; margin: 8px 0 0; padding: 0; }
.petty-home-alert li { padding: 6px 0; border-top: 1px solid #f0d4d1; font-size: 17px; }

/* สต็อกกล่อง */
.fin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fin-tab { padding: 10px 18px; border-radius: 22px; background: #fff; border: 2px solid var(--jt-red); color: var(--jt-red); font-size: 17px; font-weight: bold; text-decoration: none; }
.fin-tab.active, .fin-tab:hover { background: var(--jt-red); color: #fff; }
.fin-stock-num { font-size: 26px; font-weight: bold; }

/* คลังอุปกรณ์แพ็ก: ขายปลีก/ส่ง + ฟอร์มสินค้า */
.item-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 14px; }
.item-grid label { font-size: 15px; font-weight: bold; }
.item-grid label input { font-weight: normal; }
.item-card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; background: #fff; }
.item-card summary { cursor: pointer; font-size: 17px; padding: 4px 0; }
.sale-line { display: grid; grid-template-columns: minmax(180px, 3fr) minmax(120px, 1.4fr) 90px 120px 110px auto; gap: 8px; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed #ddd; }
.sale-line select, .sale-line input { margin-top: 0; }
.fin-catrow { background: var(--jt-red-tint); font-weight: bold; text-align: left !important; }
@media (max-width: 800px) { .sale-line { grid-template-columns: 1fr 1fr; } }

.fin-nav-h { margin: 18px 0 6px; font-size: 19px; color: var(--jt-red-dark); }

/* ---------- หน้าสต็อก (accounting_stock.html): โทนนุ่ม อ่านง่าย ไม่แน่นเกินไป ---------- */
.stk { --stk-text: #1f2933; --stk-muted: #667382; --stk-line: #e8ebf0; }
.stk-title { font-size: 28px; margin: 6px 0 16px; color: var(--stk-text); }
.stk-title small { font-size: 16px; font-weight: normal; color: var(--stk-muted); margin-left: 8px; }
.stk h2 { font-size: 20px; margin: 0; color: var(--stk-text); }
.stk h2 small { font-size: 15px; font-weight: normal; color: var(--stk-muted); }
.stk small { color: var(--stk-muted); }
.stk-hint { font-size: 15px; color: var(--stk-muted); margin: 0; }
.stk-count { font-size: 15px; color: var(--stk-muted); font-weight: normal; }

/* แท็บสาขา */
.stk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.stk-tabs a { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid #d5dbe3; color: #3e4c59; font-size: 16px; font-weight: 600; text-decoration: none; }
.stk-tabs a:hover { background: var(--jt-red-tint); border-color: #f3b4b4; color: var(--jt-red-dark); }
.stk-tabs a.active { background: var(--jt-red); border-color: var(--jt-red); color: #fff; }

/* ป้ายสถานะ / ชิป */
.stk-tag { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.stk-neg { background: #fdecec; color: #b42318; }
.stk-low { background: #fff3d1; color: #8a5a00; }
.stk-okt { background: #e6f5ea; color: #1e6b36; }
.stk-nonet { background: #eef1f4; color: #667382; }

/* กล่องแจ้งเตือน */
.stk-alert { background: #fff; border: 1px solid #f4cccc; border-left: 5px solid #e35d5d; border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.stk-alert-ok { border-color: #bfe3c8; border-left-color: #3aa35b; background: #f3fbf5; color: #1e6b36; font-weight: 600; }
.stk-alert-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 19px; }
.stk-alert .stk-hint { margin: 6px 0 8px; }
.stk-det { border-top: 1px solid var(--stk-line); padding: 8px 0; }
.stk-det summary { cursor: pointer; font-size: 17px; padding: 4px 0; list-style-position: outside; margin-left: 18px; }
.stk-det summary:hover { color: var(--jt-red-dark); }
.stk-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 6px 18px; }
.stk-chip { border-radius: 8px; padding: 5px 12px; font-size: 15px; text-decoration: none; line-height: 1.4; }
.stk-chip b { margin-left: 4px; }
.stk-chip:hover { filter: brightness(0.95); text-decoration: underline; }

/* เมนูลัด */
.stk-menu { padding: 6px 20px; }
.stk-menu-row { display: flex; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--stk-line); }
.stk-menu-row:last-child { border-bottom: 0; }
.stk-menu-label { flex: 0 0 130px; font-weight: 700; font-size: 17px; color: #3e4c59; }
.stk-menu-btns { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.stk-act { display: inline-block; padding: 10px 16px; border-radius: 10px; background: #f6f8fa; border: 1px solid #dde2e8; color: #26323f; font-size: 17px; font-weight: 600; text-decoration: none; transition: 0.15s; }
.stk-act small { display: block; font-size:14px; font-weight: normal; }
.stk-act:hover { background: var(--jt-red-tint); border-color: #f3b4b4; color: var(--jt-red-dark); }
.stk-act-main { background: var(--jt-red); border-color: var(--jt-red); color: #fff; }
.stk-act-main small { color: #ffe3e3; }
.stk-act-main:hover { background: var(--jt-red-dark); border-color: var(--jt-red-dark); color: #fff; }
.stk-btn { display: inline-block; padding: 7px 14px; border-radius: 8px; border: 1px solid #d5dbe3; background: #fff; color: #3e4c59; font-size: 15px; font-weight: 600; text-decoration: none; }
.stk-btn:hover { background: #f6f8fa; }

/* หัวการ์ด / แถบค้นหา */
.stk-cardhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.stk-toolbar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-bottom: 10px; }
.stk-toolbar input[type=search] { flex: 1 1 260px; max-width: 380px; width: auto; margin: 0; padding: 10px 14px; font-size: 17px; border: 1px solid #ccd3db; border-radius: 10px; background: #fff; }
.stk-toolbar input[type=search]:focus { outline: 2px solid #f3b4b4; border-color: var(--jt-red); }
.stk-check { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; cursor: pointer; }
.stk-check input { width: 18px; height: 18px; margin: 0; }
.stk-legend { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 12px; }
.stk-empty { text-align: center; color: var(--stk-muted); padding: 24px 0 8px; }

/* ตาราง: หัวตารางค้างบน + คอลัมน์ชื่อสินค้าค้างซ้าย */
.stk-scroll { max-height: 72vh; overflow: auto; border: 1px solid var(--stk-line); border-radius: 12px; }
.stk-scroll-short { max-height: 55vh; }
.stk-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 16px; background: #fff; }
.stk-table tr:nth-child(even) { background: transparent; }
.stk-table th, .stk-table td { border: 0; border-bottom: 1px solid #f0f2f5; padding: 10px 14px; text-align: left; vertical-align: middle; background: #fff; }
.stk-table thead th { position: sticky; top: 0; z-index: 3; background: #f4f6f9; color: #3e4c59; font-size: 15px; font-weight: 700; border-bottom: 1px solid #dfe4ea; }
.stk-table thead th a { color: #3e4c59; text-decoration: none; }
.stk-table thead th a:hover { color: var(--jt-red); text-decoration: underline; }
.stk-table tbody tr:hover td { background: #f6f9ff; }
.stk-c { text-align: center !important; }
.stk-nowrap { white-space: nowrap; }
.stk-matrix { min-width: 900px; }
.stk-matrix th:first-child, .stk-matrix td:first-child { position: sticky; left: 0; z-index: 2; min-width: 230px; box-shadow: 1px 0 0 #e8ebf0; }
.stk-matrix thead th:first-child { z-index: 4; }
.stk-matrix .stk-c { min-width: 88px; padding-left: 6px; padding-right: 6px; }
.stk-table .stk-cat td { background: #fdf1f1; color: var(--jt-red-dark); font-weight: 700; font-size: 16px; text-align: left; padding: 8px 14px; }
.stk-table tbody tr.stk-cat:hover td { background: #fdf1f1; }
.stk-name b { font-weight: 600; color: var(--stk-text); }
.stk-name small { display: block; font-size:14px; margin-top: 1px; }
.stk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #f0a030; margin-right: 8px; vertical-align: middle; }
.stk-matrix .stk-name small { margin-left: 16px; }

/* ตัวเลขในช่อง */
.stk-n { display: inline-block; min-width: 46px; padding: 3px 10px; border-radius: 8px; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stk-n.stk-ok { color: var(--stk-text); }
.stk-n.stk-zero { color: #7b8794; font-weight: normal; }
.stk-n.stk-none { color: #b5bdc8; font-weight: normal; }
.stk-n.stk-neg { background: #fdecec; color: #b42318; }
.stk-n.stk-low { background: #fff3d1; color: #8a5a00; }
.stk-table small { color: var(--stk-muted); }
.stk-plus { color: #1e7a3a; }
.stk-minus { color: #b42318; }
.stk-zero0 { color: #7b8794; font-weight: normal; }
.stk-void td { opacity: .45; text-decoration: line-through; }

@media (max-width: 700px) {
    .stk-menu-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .stk-menu-label { flex-basis: auto; }
    .stk-title small { display: block; margin: 4px 0 0; }
}

/* ───────── ฟอร์มพนักงานแบบแท็บ (employee_form.html) ───────── */
.ef-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.ef-sub { color: #666; margin-top: 2px; }
.ef-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #eee; flex: none; }
.ef-avatar-lg { width: 96px; height: 96px; }
.ef-avatar-empty { display: inline-flex; align-items: center; justify-content: center; font-size: 30px; color: #999; }
.ef-alert { border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; line-height: 1.5; }
.ef-alert-warn { background: #fff3cd; color: #7a5c00; border: 1px solid #ffe08a; }
.ef-alert-ok { background: #d4edda; color: #155724; border: 1px solid #b7dfc1; }
.ef-tabs { display: flex; gap: 6px; overflow-x: auto; border-bottom: 3px solid var(--jt-red); margin-bottom: 18px; padding-bottom: 0; }
.ef-tab { flex: none; border: none; background: #eef0f3; color: #333; font: inherit; font-size: 17px; font-weight: bold; padding: 12px 16px; border-radius: 10px 10px 0 0; cursor: pointer; white-space: nowrap; }
.ef-tab:hover { background: var(--jt-red-tint); }
.ef-tab.active { background: var(--jt-red); color: #fff; }
.ef-badge { display: inline-block; min-width: 22px; margin-left: 8px; padding: 1px 6px; border-radius: 999px; background: #ffc107; color: #5c4400; font-size: 14px; text-align: center; }
.ef-tab.active .ef-badge { background: #fff; color: var(--jt-red-dark); }
.ef-panel { display: none; }
.ef-panel.on { display: block; }
.ef-group { background: #fafbfc; border: 1px solid #e6e9ee; border-radius: 12px; padding: 14px 18px 18px; margin-bottom: 16px; }
.ef-group h3 { margin: 4px 0 4px; }
.ef-group h3 small, .ef-f label small { font-weight: normal; color: #777; font-size: 14px; }
.ef-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.ef-full { grid-column: 1 / -1; }
.ef-f label { display: block; margin-top: 14px; font-weight: bold; }
.ef-f input[type=text], .ef-f input[type=tel], .ef-f input[type=email], .ef-f input[type=date], .ef-f input[type=time], .ef-f input[type=number], .ef-f select { width: 100%; padding: 12px; font-size: 18px; border: 2px solid #d5dae1; border-radius: 10px; background: #fff; margin-top: 4px; }
.ef-f input:focus, .ef-f select:focus { outline: none; border-color: var(--jt-red); box-shadow: 0 0 0 3px #f9caca; }
.ef-hint { color: #777; font-size: 14px; margin-top: 3px; }
.ef-hint-bad { color: #b30000; font-weight: bold; }
.ef-chip { display: none; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: #ffc107; color: #5c4400; font-size:14px; font-weight: bold; vertical-align: middle; }
.ef-doc-miss .ef-chip { display: inline-block; }
.ef-f.ef-empty[data-need] .ef-chip { display: inline-block; }
.ef-f.ef-empty[data-need] input[type=text], .ef-f.ef-empty[data-need] input[type=tel], .ef-f.ef-empty[data-need] input[type=date] { border-color: #ffc107; background: #fffdf3; }
.ef-photo-row { display: flex; align-items: center; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.ef-photo-row input[type=file] { width: auto; max-width: 100%; font-size: 16px; }
.ef-days { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ef-day { margin: 0 !important; font-weight: normal !important; cursor: pointer; }
.ef-day input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ef-day span { display: inline-block; padding: 9px 16px; border: 2px solid #d5dae1; border-radius: 999px; background: #fff; }
.ef-day input:checked + span { background: var(--jt-red); border-color: var(--jt-red); color: #fff; font-weight: bold; }
.ef-day input:focus-visible + span { box-shadow: 0 0 0 3px #f9caca; }
.ef-check { display: flex !important; align-items: center; gap: 10px; font-size: 18px; margin-top: 26px !important; }
.ef-check input { width: 22px; height: 22px; margin: 0; }
.ef-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ef-spacer { flex: 1; }
.ef-doc { border: 2px solid #e6e9ee; border-radius: 12px; padding: 12px 16px; margin: 12px 0; background: #fff; }
.ef-doc-ok { border-color: #b7dfc1; }
.ef-doc-miss { border-color: #ffe08a; background: #fffdf3; }
.ef-doc-title { font-weight: bold; font-size: 19px; }
.ef-doc ul { margin: 8px 0; padding-left: 22px; }
.ef-upload { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ef-upload input[type=file], .ef-upload select { width: auto; max-width: 100%; min-width: 260px; }
.ef-dirty { background: #fff3cd; border: 1px solid #ffe08a; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.ef-checklist { list-style: none; padding: 0; margin: 6px 0 12px; line-height: 1.9; }
@media (max-width: 700px) {
    .ef-grid { grid-template-columns: 1fr; }
    .ef-tab { font-size: 16px; padding: 10px 12px; }
}

/* ───────── แจ้งเตือนข้อมูล/เอกสารไม่ครบ (หน้ารายชื่อพนักงาน) ───────── */
.inc-banner { background: #fff3cd; border: 1px solid #ffe08a; color: #6b4e00; border-radius: 12px; padding: 14px 18px; margin: 4px 0 16px; }
.inc-banner-ok { background: #d4edda; border-color: #b7dfc1; color: #155724; }
.inc-banner-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.inc-banner-sub { font-size: 16px; margin-top: 2px; }
.inc-details { margin-top: 10px; }
.inc-details summary { cursor: pointer; font-weight: bold; padding: 4px 0; }
.inc-table { font-size: 16px; margin-top: 8px; }
.employee-badge-warn { background: #ffc107; color: #5c4400; }
.employee-card-missing { margin-top: 8px; font-size:14px; color: #7a5c00; line-height: 1.4; }


/* ===== หน้าฝ่ายบุคคล (/hr): ตัวเลขที่กดได้ + กล่องแจ้งเตือนการตั้งค่า/ความผิดปกติ ===== */
.hint-click { color: #666; font-size: 15px; margin: 4px 0 10px; }
a.num-link {
    color: inherit;
    font-weight: bold;
    text-decoration: underline dotted;
    text-underline-offset: 4px;
    padding: 2px 8px;
    border-radius: 6px;
}
a.num-link:hover, a.num-link:focus-visible {
    background: var(--jt-red-tint);
    color: var(--jt-red-dark);
    text-decoration: underline;
}
a.num-link:focus-visible { outline: 2px solid var(--jt-red); outline-offset: 1px; }
td.cell-absent, td.cell-absent a.num-link { color: var(--jt-red-dark); }
tr.row-total th, tr.row-total td { background: #f4f4f4; font-weight: bold; border-top: 2px solid #ccc; }

.hr-alerts {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    margin-bottom: 24px;
    border-left: 8px solid #999;
}
.hr-alerts-bad { border-left-color: var(--jt-red); }
.hr-alerts-warn { border-left-color: #f39c12; }
.hr-alerts-ok { border-left-color: #1e8f2b; }
.hr-alerts > summary { cursor: pointer; padding: 16px 20px; font-size: 20px; font-weight: bold; }
.hr-alerts-sum { font-size: 16px; font-weight: normal; color: #555; }
.hr-alerts-none { margin: 0; padding: 0 20px 16px; color: #555; }
.hr-alert-list { list-style: none; margin: 0; padding: 0 20px 8px; }
.hr-alert { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 10px; border-top: 1px solid #eee; border-radius: 8px; transition: background 0.12s; }
.hr-alert:hover { background: #f7f7f7; }
.hr-alert-stretched-link { position: absolute; inset: 0; z-index: 1; border-radius: 8px; }
.hr-alert-stretched-link:focus-visible { outline: 2px solid var(--jt-red); outline-offset: -2px; }
.hr-alert-icon { font-size: 24px; line-height: 1.2; }
.hr-alert-body { flex: 1; min-width: 0; }
.hr-alert-title { font-weight: bold; }
.hr-alert-tag { display: inline-block; font-size:14px; padding: 1px 9px; border-radius: 10px; margin-right: 6px; vertical-align: middle; }
.hr-alert-bad .hr-alert-tag { background: var(--jt-red); color: #fff; }
.hr-alert-warn .hr-alert-tag { background: #ffe8b3; color: #7a4b00; }
.hr-alert-count { display: inline-block; min-width: 26px; text-align: center; background: #eee; border-radius: 12px; padding: 0 8px; font-size: 15px; margin-left: 4px; }
.hr-alert-detail { font-size: 16px; color: #444; margin-top: 2px; }
.hr-alert-extras { position: relative; z-index: 2; margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.hr-alert-extras a { font-size: 14px; padding: 2px 10px; border: 1px solid #ccc; border-radius: 14px; text-decoration: none; color: #222; background: #fafafa; }
.hr-alert-extras a:hover, .hr-alert-extras a:focus-visible { border-color: var(--jt-red); color: var(--jt-red-dark); }
.hr-alert-go { position: relative; z-index: 2; align-self: center; white-space: nowrap; }
tr:target, [id]:target { animation: hr-target-flash 2.2s ease-out; }
@keyframes hr-target-flash {
    0% { background: #fff3cd; }
    100% { background: transparent; }
}
@media (max-width: 640px) {
    .hr-alert { flex-wrap: wrap; }
    .hr-alert-go { margin-left: 36px; }
}
.hr-alert-dialog { border: 0; border-radius: 14px; padding: 24px 28px; max-width: 560px; width: calc(100% - 32px); box-shadow: 0 10px 40px rgba(0,0,0,0.35); }
.hr-alert-dialog::backdrop { background: rgba(0,0,0,0.45); }
.hr-alert-dialog h2 { margin-top: 0; color: var(--jt-red-dark); }
.hr-alert-dialog ul { padding-left: 22px; }
.hr-alert-dialog li { margin: 6px 0; }
.hr-alert-dialog-actions { text-align: right; margin-top: 16px; }

/* หน้ารายการที่กดจากตัวเลขบน /hr */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
a.chip {
    display: inline-block; padding: 6px 14px; border-radius: 20px; background: #fff;
    border: 2px solid #ddd; color: #222; text-decoration: none; font-weight: bold;
}
a.chip:hover, a.chip:focus-visible { border-color: var(--jt-red); }
a.chip.active { border-color: var(--jt-red); background: var(--jt-red-tint); color: var(--jt-red-dark); }
.badge { display: inline-block; padding: 1px 10px; border-radius: 12px; font-size: 15px; font-weight: bold; white-space: nowrap; }
.badge-ok { background: #d4edda; color: #155724; }
.badge-warn { background: #fff3cd; color: #7a4b00; }
.badge-bad { background: #f8d7da; color: #721c24; }
.badge-off { background: #e9ecef; color: #495057; }

/* ===== ตรวจเงินหน้าร้านหลายขนส่ง: การ์ดแยกเจ้า อ่านง่าย ตัวใหญ่ ===== */
.cc-drop { display: block; border: 3px dashed #9db4d4; background: #f5f9ff; border-radius: 16px; padding: 26px 18px; text-align: center; cursor: pointer; transition: .15s; }
.cc-drop:hover { background: #eaf3ff; border-color: #4a7fc1; }
.cc-drop b { display: block; font-size: 24px; color: #1f4e8c; margin-bottom: 4px; }
.cc-drop span { font-size: 16px; color: #56708f; }
.cc-drop input[type=file] { display: none; }
.cc-carriers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 14px 0; }
.cc-card { background: #fff; border-radius: 14px; border-left: 8px solid var(--c, #999); padding: 16px 18px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.cc-card h3 { margin: 0 0 6px; font-size: 21px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cc-amt { font-size: 34px; font-weight: bold; line-height: 1.1; color: #1d2b3a; }
.cc-amt small { font-size: 16px; font-weight: normal; color: #667; }
.cc-sub { color: #667; font-size: 16px; margin-top: 4px; }
.cc-todo { background: #fafafa; border-left-color: #cfd4da; }
.cc-todo .cc-amt { color: #99a; }
.cc-ask { background: #fff8e1; border: 2px solid #ffd54f; border-radius: 10px; padding: 10px 12px; margin-top: 10px; font-size: 16px; }
.cc-ask input { font-size: 22px; font-weight: bold; margin-top: 6px; }
.cc-none { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 18px; cursor: pointer; }
.cc-none input { width: 24px; height: 24px; flex: 0 0 auto; }
.cc-pill { display: inline-block; border-radius: 20px; padding: 2px 12px; font-size: 15px; font-weight: bold; white-space: nowrap; }
.cc-pill-ok { background: #d4edda; color: #155724; }
.cc-pill-wait { background: #eceff1; color: #546e7a; }
.cc-pill-warn { background: #fff3cd; color: #7a4b00; }
.cc-total { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; background: #eef5ee; border-radius: 12px; padding: 14px 20px; font-size: 20px; }
.cc-total b { font-size: 34px; color: #17663a; }
.cc-file-card { background: #fff; border-radius: 12px; padding: 14px 18px; margin-bottom: 12px; border-left: 8px solid var(--c, #999); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.cc-days a { display: inline-block; padding: 6px 16px; border-radius: 18px; background: #eceff1; color: #37474f; text-decoration: none; margin-right: 6px; font-size: 16px; }
.cc-days a.on { background: #37474f; color: #fff; font-weight: bold; }
.cc-hero { border-radius: 16px; padding: 20px 24px; font-size: 24px; font-weight: bold; margin-bottom: 16px; }
.cc-hero small { display: block; font-weight: normal; font-size: 16px; margin-top: 4px; }

.fin-row .slip-status { flex: 1 1 100%; font-size: 14px; }
.slip-status.slip-ok, .slip-badge.slip-ok { color: #1b7f3b; }
.slip-status.slip-bad, .slip-badge.slip-bad { color: #c62828; font-weight: 600; }
.slip-status.slip-wait, .slip-badge.slip-wait { color: #9a6a00; }
.slip-status.slip-warn, .slip-badge.slip-warn { color: #856404; font-weight: 600; background: #fff3cd; padding: 6px 10px; border-radius: 8px; display: inline-block; }
.slip-badge { font-size:14px; }
.slip-badge.slip-none { color: #888; }

/* ---------- รีวิวสลิปเบลอ (ฝ่ายบัญชีตรวจ ผ่าน/ไม่ผ่าน) ---------- */
.slip-review-img-wrap { text-align: center; background: #111; border-radius: 10px; padding: 10px; overflow: auto; }
.slip-review-img-wrap img { max-width: 100%; cursor: zoom-in; transition: transform .2s; touch-action: pinch-zoom; }
.slip-review-img-wrap img.zoomed { max-width: none; width: 220%; cursor: zoom-out; }
.slip-review-amount { font-size: 46px; font-weight: bold; text-align: center; margin: 16px 0; color: #1a1a1a; }
.slip-review-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.btn-approve, .btn-reject { flex: 1 1 220px; font-size: 22px; padding: 22px 10px; border-radius: 12px; font-weight: bold; border: none; color: #fff; cursor: pointer; }
.btn-approve { background: #1b7f3b; }
.btn-approve:hover { background: #166a31; }
.btn-reject { background: #c62828; }
.btn-reject:hover { background: #a91f1f; }
.reason-btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.reason-btn { flex: 1 1 150px; font-size: 17px; padding: 14px 8px; border-radius: 10px; border: 2px solid #c62828; background: #fff; color: #c62828; font-weight: bold; cursor: pointer; }
.reason-btn.picked, .reason-btn:hover { background: #c62828; color: #fff; }
.slip-review-card { border: 1px solid #eee; border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.slip-review-thumb { width: 100%; max-height: 160px; object-fit: contain; background: #f5f5f5; border-radius: 8px; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

.ef-title-row { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-start; }
.ef-title-col select { min-width: 140px; }

/* เอกสารรวมไฟล์เดียว (employee_form แท็บเอกสาร) */
.ef-combined { border: 3px solid #1e63d6; border-radius: 16px; padding: 18px 20px; background: #f2f7ff; margin-bottom: 22px; }
.ef-combined-ok { border-color: #2e9b4f; background: #f1fbf4; }
.ef-combined h3 { font-size: 24px; margin-top: 0; }
.ef-combined-file { background: #fff; border: 2px solid #b7dfc1; border-radius: 12px; padding: 12px 16px; margin: 10px 0; }
.ef-combined-name { font-weight: bold; font-size: 19px; word-break: break-all; }
.ef-combined-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ef-combined-btns .btn { font-size: 18px; padding: 12px 20px; }
.ef-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; border: 3px dashed #1e63d6; border-radius: 16px; background: #fff; padding: 26px 16px; cursor: pointer; transition: background .15s; }
.ef-dropzone:hover, .ef-dropzone.drag { background: #e3eeff; }
.ef-dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.ef-dropzone-icon { font-size: 40px; }
.ef-dropzone-title { font-size: 21px; font-weight: bold; }
.ef-dropzone-sub { font-size: 16px; color: #555; }
.ef-dropzone-picked { font-size: 18px; font-weight: bold; color: #1b7a38; }
.ef-combined-submit { display: block; width: 100%; margin-top: 12px; font-size: 21px; padding: 14px; }
.ef-merge-box { margin-top: 16px; padding-top: 14px; border-top: 2px dashed #c5d3ea; }
.ef-merge-btn { font-size: 19px; padding: 14px 22px; }
.ef-merge-skip { color: #a35a00; font-weight: bold; }

/* สลิปที่ระบบเตือนว่าอาจซ้ำ: ปุ่มส่งให้บัญชีตรวจ (ไม่บล็อกพนักงาน) */
.slip-dupbox { flex: 1 1 100%; margin-top: 8px; padding: 12px 14px; border: 3px solid #e65100; background: #fff8f0; border-radius: 12px; font-size: 17px; }
.slip-dupbox .slip-dupmsg { margin-bottom: 8px; color: #bf360c; font-weight: bold; }
.slip-dupbox .slip-dupwhy { width: 100%; font-size: 17px; padding: 10px; margin-bottom: 8px; box-sizing: border-box; }
.slip-dupbox .slip-dupbtn { width: 100%; font-size: 20px; padding: 14px; background: #e65100; color: #fff; border: 0; border-radius: 10px; font-weight: bold; cursor: pointer; }
.slip-dupbox .slip-duphint { margin-top: 6px; font-size: 14px; color: #666; }
.slip-status.slip-warn { color: #bf360c; font-weight: bold; }

/* ───────── เมนูซ้ายหุบเป็นลิ้นชักบนจอเล็ก (<=768px) — เดสก์ท็อปไม่ได้รับผลกระทบ ───────── */
.nav-toggle, .nav-overlay, .nav-close { display: none; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 768px) {
    .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 46px; height: 46px; flex: 0 0 auto; margin-right: 8px;
        font-size: 26px; line-height: 1; background: var(--jt-red); color: #fff;
        border: 0; border-radius: 12px; cursor: pointer;
    }
    .topbar { padding: 10px 12px; gap: 8px; }
    .brand-tagline, .brand-mark-custom { display: none; }
    .topbar-actions { flex-wrap: wrap; gap: 6px; }
    .topbar-btn { font-size: 14px; padding: 8px 12px; }
    .layout { display: block; max-width: 100%; }
    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: 270px; max-width: 82vw; min-height: 0;
        overflow-y: auto; z-index: 1001; padding: 16px 0 40px;
        transform: translateX(-105%); transition: transform .2s ease; box-shadow: none;
    }
    body.nav-open .sidebar { transform: translateX(0); box-shadow: 4px 0 18px rgba(0,0,0,.3); }
    .nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000; }
    body.nav-open .nav-overlay { display: block; }
    body.nav-open { overflow: hidden; }
    .container { max-width: 100%; width: 100%; padding: 14px 12px; }
    body { overflow-x: hidden; }
    .nav-close {
        display: block; width: calc(100% - 24px); margin: 0 12px 12px; padding: 14px;
        font-size: 20px; font-weight: bold; color: #fff; background: var(--jt-red);
        border: 0; border-radius: 12px; cursor: pointer;
    }
}


/* ---- เมนูเรียงตามที่ใช้บ่อย + แถบ "เมนูที่คุณใช้บ่อย" ---- */
.fav-bar { background: #fff8e6; border: 2px solid #f5c542; border-radius: 16px; padding: 14px 18px 18px; margin: 18px 0 8px; }
.fav-bar-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fav-bar-title { font-size: 22px; font-weight: bold; color: #8a5a00; }
.fav-bar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.fav-btn { display: flex; align-items: center; gap: 12px; background: #fff; border: 3px solid var(--jt-red); border-radius: 14px; padding: 18px 16px; text-decoration: none; color: #222; box-shadow: 0 1px 4px rgba(0,0,0,.08); transition: .15s; }
.fav-btn:hover { box-shadow: 0 6px 16px rgba(0,0,0,.16); transform: translateY(-2px); background: var(--jt-red-tint); }
.fav-btn-icon { font-size: 34px; line-height: 1; }
.fav-btn-label { font-size: 19px; font-weight: bold; }
.menu-reset-btn { background: transparent; border: 1px solid #c9c9c9; color: #777; border-radius: 8px; font-size:14px; padding: 4px 10px; cursor: pointer; font-family: inherit; }
.menu-reset-btn:hover { background: #f1f1f1; color: #333; }
.menu-reset-form { margin: 14px 24px 0; }

/* ───────── ป๊อปอัปเตือนข้อมูลพนักงาน + แถบสรุป 2 กลุ่ม ───────── */
.prob-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 4px 0 16px; }
.prob-card { border-radius: 14px; padding: 16px 20px; border: 2px solid #ffe08a; background: #fff8e1; color: #6b4e00; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.prob-card.prob-ok { background: #e6f6ea; border-color: #b7dfc1; color: #155724; }
.prob-card.prob-on { box-shadow: 0 0 0 3px #1f6feb55; }
.prob-num { font-size: 40px; font-weight: bold; line-height: 1; }
.prob-title { font-size: 20px; font-weight: bold; }
.prob-sub { font-size: 16px; }
.employee-badge-pay { background: #ffe0cc; color: #8a3b00; }
.ea-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ea-box { background: #fff; border-radius: 18px; max-width: 460px; width: 100%; padding: 28px 26px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.ea-icon { font-size: 52px; }
.ea-box h2 { margin: 6px 0 4px; font-size: 26px; }
.ea-lead { font-size: 17px; color: #555; margin: 0 0 16px; }
.ea-row { display: flex; align-items: center; gap: 16px; background: #fff3cd; border-radius: 12px; padding: 10px 16px; margin: 8px 0; text-align: left; font-size: 18px; }
.ea-n { font-size: 38px; font-weight: bold; color: #c0392b; min-width: 70px; text-align: center; }
.ea-go { display: block; margin-top: 18px; background: #d3202c; color: #fff; font-size: 22px; font-weight: bold; padding: 16px; border-radius: 12px; text-decoration: none; }
.ea-go:hover { background: #b51b25; }
.ea-later { margin-top: 10px; background: none; border: 0; color: #666; font-size: 17px; padding: 10px 20px; cursor: pointer; text-decoration: underline; }
.ea-note { font-size: 14px; color: #888; margin-top: 4px; }

/* ==========================================================================
   ชุดสไตล์ปุ่มกลาง (Button System) - ใช้ทั่วทั้งระบบ  [8 ต.ค.]
   ปุ่มหลัก = .btn (แดง ระบบ)   ปุ่มรอง = .btn-secondary (ขาวขอบเทา)
   ปุ่มอันตราย = .btn-danger (แดงอ่อน ตัวหนังสือแดง)   ปุ่มสำเร็จ = .btn-success (เขียว)
   ขนาด: .btn-small / .btn-lg / .btn-block    แถวปุ่ม: .btn-group, .form-actions
   ========================================================================== */
:root {
    --btn-h: 44px;
    --btn-h-sm: 36px;
    --btn-h-lg: 54px;
    --btn-radius: 10px;
    --btn-gap: 10px;
    --btn-ink: #2b2f36;
    --btn-line: #cfd4da;
    --btn-shadow: 0 1px 2px rgba(16,24,40,.12);
    --btn-ok: #15803d;
    --btn-ok-dark: #116532;
    --btn-danger: #c62828;
}
.btn, a.btn, button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: var(--btn-h);
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    background: var(--jt-red);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: var(--btn-shadow);
    transition: background-color .15s, border-color .15s, box-shadow .15s, transform .05s;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--jt-red-dark); color: #fff; box-shadow: 0 2px 6px rgba(16,24,40,.18); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.btn:disabled, .btn[disabled], .btn.disabled, .btn[aria-disabled="true"] {
    background: #e5e7eb; color: #9aa0a8; border-color: #e5e7eb;
    box-shadow: none; cursor: not-allowed; pointer-events: none; transform: none;
}
/* ปุ่มรอง */
.btn-secondary, a.btn-secondary, button.btn-secondary {
    background: #fff; color: var(--btn-ink); border-color: var(--btn-line);
}
.btn-secondary:hover { background: #f3f5f8; color: var(--btn-ink); border-color: #aeb5be; }
/* ปุ่มอันตราย (ลบ/ปฏิเสธ/ยกเลิกรายการ) */
.btn-danger, a.btn-danger, button.btn-danger {
    background: #fdeaea; color: var(--btn-danger); border-color: #f1b5b5;
}
.btn-danger:hover { background: var(--btn-danger); color: #fff; border-color: var(--btn-danger); }
/* ปุ่มสำเร็จ/อนุมัติ */
.btn-success, a.btn-success, button.btn-success {
    background: var(--btn-ok); color: #fff; border-color: var(--btn-ok);
}
.btn-success:hover { background: var(--btn-ok-dark); color: #fff; }
/* ขนาด */
.btn-small, a.btn-small, button.btn-small {
    min-height: var(--btn-h-sm); padding: 0 14px; font-size: 15px; border-radius: 8px; gap: 6px;
}
.btn-lg, a.btn-lg, button.btn-lg {
    min-height: var(--btn-h-lg); padding: 0 30px; font-size: 19px; border-radius: 12px;
}
.btn-block { display: flex; width: 100%; }
/* แถวปุ่ม: สูงเท่ากัน ระยะห่างเท่ากัน ขึ้นบรรทัดใหม่อัตโนมัติ */
.btn-group, .form-actions, .ef-actions, .viz-actions, .pc-actions, .slip-review-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--btn-gap);
}
.btn-group form, .form-actions form { margin: 0; display: inline-flex; }
.btn-group-end { justify-content: flex-end; }
td .btn, td form { vertical-align: middle; }
/* ปุ่มอนุมัติ/ปฏิเสธขนาดใหญ่ (หน้าตรวจสลิป) ให้เข้ากับชุดเดียวกัน */
.btn-approve, .btn-reject {
    min-height: var(--btn-h-lg); padding: 0 20px; font-size: 20px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--btn-shadow);
}
.reason-btn { min-height: var(--btn-h); display: inline-flex; align-items: center; justify-content: center; }
/* ปุ่มเปล่า (ไม่มี class) ที่หน้าไม่ได้ตกแต่งเอง - สไตล์พื้นฐานให้ดูเป็นปุ่มรอง (ความเฉพาะเจาะจงต่ำสุด) */
:where(button:not([class]):not([style])) {
    min-height: var(--btn-h-sm); padding: 0 14px; border: 1px solid var(--btn-line);
    border-radius: 8px; background: #fff; color: var(--btn-ink);
    font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
/* มือถือ: ปุ่มกดง่าย สูงอย่างน้อย 44px */
@media (max-width: 768px) {
    .btn, a.btn, button.btn { min-height: 46px; font-size: 17px; }
    .btn-small, a.btn-small, button.btn-small { min-height: 44px; font-size: 16px; padding: 0 16px; }
    .btn-lg, a.btn-lg, button.btn-lg { min-height: 54px; }
    .form-actions .btn, .btn-group.btn-stack .btn { flex: 1 1 100%; }
    .form-actions-sticky { padding-left: 12px; padding-right: 12px; }
    .btn-approve, .btn-reject { flex: 1 1 100%; }
    :where(button:not([class]):not([style])) { min-height: 44px; }
}

/* ===== หน้าแรกตามตำแหน่ง (Role Home) — templates/role_home_block.html ===== */
.rh-hero { display: flex; align-items: center; gap: 18px; background: linear-gradient(135deg, #fff 0%, var(--jt-red-tint) 100%); border: 2px solid var(--jt-red); border-radius: 18px; padding: 18px 24px; margin-bottom: 14px; }
.rh-hero-icon { font-size: 54px; line-height: 1; }
.rh-title { margin: 0 0 4px; font-size: 30px; color: var(--jt-red-dark); }
.rh-sub { margin: 0; font-size: 18px; color: #555; }
.rh-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #fff8e1; border: 1px dashed #e0b400; border-radius: 12px; padding: 8px 14px; margin-bottom: 14px; font-size: 16px; }
.rh-tab { padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid #ccc; color: #333; text-decoration: none; font-weight: bold; }
.rh-tab.on { background: var(--jt-red); border-color: var(--jt-red); color: #fff; }
.rh-preview-note { color: #8a6d00; font-size: 14px; }
.rh-h2 { font-size: 22px; margin: 22px 0 10px; }
.rh-h2 small { font-size: 15px; font-weight: normal; color: #777; }
.rh-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.rh-card { display: block; background: #fff; border-radius: 16px; padding: 16px 18px; text-decoration: none; color: #222; border: 2px solid #e3e6ea; border-left-width: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.07); transition: .15s; }
.rh-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.rh-card-top { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: bold; color: #444; min-height: 2.6em; }
.rh-card-icon { font-size: 28px; }
.rh-card-num { font-size: 44px; font-weight: bold; line-height: 1.1; margin: 6px 0 4px; }
.rh-card-unit { font-size: 18px; font-weight: normal; color: #666; }
.rh-card-note { font-size: 14px; color: #666; min-height: 1.3em; }
.rh-warn { border-color: #f0b14a; border-left-color: #e67e22; background: #fffaf0; }
.rh-warn .rh-card-num { color: #c25e00; }
.rh-ok { border-left-color: #2e9e5b; }
.rh-ok .rh-card-num { color: #2e9e5b; }
.rh-info { border-left-color: #2b7bd6; }
.rh-info .rh-card-num { color: #1f5fae; }
.rh-shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-bottom: 18px; }
.rh-short { display: flex; align-items: center; gap: 14px; background: #fff; border: 2px solid var(--jt-red); border-radius: 14px; padding: 16px 18px; text-decoration: none; color: #222; min-height: 76px; transition: .15s; }
.rh-short:hover { background: var(--jt-red-tint); transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.14); }
.rh-short-icon { font-size: 36px; }
.rh-short-text { flex: 1; display: flex; flex-direction: column; }
.rh-short-text b { font-size: 20px; color: var(--jt-red-dark); }
.rh-short-text small { font-size: 14px; color: #666; }
.rh-short-go { font-size: 34px; color: var(--jt-red); }
.rh-qc-banner { border-radius: 14px; padding: 14px 18px; margin: 4px 0 6px; font-size: 18px; border: 2px solid; }
.rh-qc-bad { background: #fff5f5; border-color: #d9534f; }
.rh-qc-ok { background: #f1fbf4; border-color: #2e9e5b; }
.rh-qc-date { display: block; margin-top: 4px; font-size: 14px; color: #666; }
.rh-more { margin-top: 24px; }
.rh-more > summary { cursor: pointer; font-size: 18px; font-weight: bold; padding: 12px 16px; background: #fff; border: 1px solid #ccd; border-radius: 12px; }
@media (max-width: 600px) { .rh-hero { padding: 14px; } .rh-title { font-size: 24px; } .rh-card-num { font-size: 38px; } }
/* ปุ่มแถบบน: ความสูงเท่ากัน ข้อความไม่ตัดบรรทัดกลางคำ แถวเรียบ */
.topbar-actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.topbar-btn, .topbar .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 0 16px; font-size: 15px; white-space: nowrap; box-sizing: border-box;
}
.topbar .btn { box-shadow: none; }
@media (max-width: 768px) {
    .topbar-btn, .topbar .btn { min-height: 40px; padding: 0 12px; font-size: 14px; }
}
@media (max-width: 768px) { .topbar-actions { justify-content: center; width: 100%; } }

/* alias ชื่อเก่าที่ใช้คู่กับ .btn (กันปุ่มเทา/เขียว/เล็กกลายเป็นปุ่มแดงหลัก) */
.btn.gray, .btn.grey, .btn.outline, .btn.ghost, .btn.line, .btn.out, .btn.light {
    background: #fff; color: var(--btn-ink); border-color: var(--btn-line);
}
.btn.gray:hover, .btn.grey:hover, .btn.outline:hover, .btn.ghost:hover, .btn.line:hover, .btn.out:hover, .btn.light:hover {
    background: #f3f5f8; color: var(--btn-ink); border-color: #aeb5be;
}
.btn.green, .btn.ok, .btn.success { background: var(--btn-ok); color: #fff; border-color: var(--btn-ok); }
.btn.green:hover, .btn.ok:hover, .btn.success:hover { background: var(--btn-ok-dark); color: #fff; }
.btn.red, .btn.danger { background: #fdeaea; color: var(--btn-danger); border-color: #f1b5b5; }
.btn.red:hover, .btn.danger:hover { background: var(--btn-danger); color: #fff; border-color: var(--btn-danger); }
.btn.small, .btn.sm, .btn.b-sm { min-height: var(--btn-h-sm); padding: 0 14px; font-size: 15px; border-radius: 8px; gap: 6px; }
.btn.big, .btn.lg { min-height: var(--btn-h-lg); padding: 0 30px; font-size: 19px; border-radius: 12px; }
@media (max-width: 768px) { .btn.small, .btn.sm, .btn.b-sm { min-height: 44px; font-size: 16px; padding: 0 16px; } .btn.big, .btn.lg { min-height: 54px; } }

/* ===== แถบบนสุด: มาตรฐานเดียว (8 ต.ค.) ===== */
.topbar { gap: 10px 16px; }
.topbar-actions { align-items: center; gap: 8px; }
.topbar-btn {
    box-sizing: border-box; height: 38px; min-height: 38px; padding: 0 14px;
    border: 1px solid transparent; border-radius: 999px;
    font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    position: relative; text-decoration: none; cursor: pointer;
}
/* ลิงก์ปกติ (แจ้งเตือน/ข้อมูลของฉัน/ตั้งค่า) = ปุ่มรองสีกลาง ไม่แย่งสายตา */
.topbar-btn:not([style]):not(.petty-alert-btn):not(.fin-alert-btn):not(.logout-btn) {
    background: #fff; color: var(--btn-ink); border-color: var(--btn-line);
}
.topbar-btn:not([style]):not(.petty-alert-btn):not(.fin-alert-btn):not(.logout-btn):hover {
    background: #f3f5f8; border-color: #aeb5be; color: var(--btn-ink);
}
/* ป้ายเตือนสีเข้ม (มี style สี) ให้เล็กลงนิดและนุ่มขึ้น */
.topbar-btn[style], .topbar-btn.petty-alert-btn, .topbar-btn.fin-alert-btn { font-size: 14px; box-shadow: none; }
.topbar-btn[style]:hover, .topbar-btn.petty-alert-btn:hover, .topbar-btn.fin-alert-btn:hover { filter: brightness(.92); }
/* ป้ายตัวเลขกระดิ่ง */
.tb-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: var(--jt-red); color: #fff; font-size:14px; font-weight: 800; line-height: 1;
}
/* ปุ่มออกจากระบบ: สุภาพ โปร่ง ไม่แย่งสายตา */
.logout-form { margin: 0; display: inline-flex; }
.topbar-btn.btn-secondary, .logout-form .topbar-btn {
    background: transparent; color: #6b7280; border: 1px solid #d5d9df; box-shadow: none; font-weight: 600;
}
.topbar-btn.btn-secondary:hover, .logout-form .topbar-btn:hover { background: #f3f5f8; color: var(--btn-ink); border-color: #aeb5be; }
@media (max-width: 768px) {
    .topbar-actions { gap: 6px; }
    .topbar-btn { height: 40px; min-height: 40px; padding: 0 12px; font-size: 14px; }
    .topbar-btn[style], .topbar-btn.petty-alert-btn, .topbar-btn.fin-alert-btn { font-size:14px; }
}

/* ป้ายเตือนแถบบน: 2 สีเท่านั้น  ส้ม = ควรดู (tb-warn)   แดง = ด่วน (tb-urgent) */
.topbar-btn.tb-warn { background: #e8820c !important; color: #fff !important; border-color: #e8820c !important; box-shadow: none; }
.topbar-btn.tb-urgent { background: #d3202c !important; color: #fff !important; border-color: #d3202c !important; box-shadow: none; }
.topbar-btn.tb-warn:hover { background: #c96d05 !important; }
.topbar-btn.tb-urgent:hover { background: #a9161f !important; }
.topbar-btn.tb-warn, .topbar-btn.tb-urgent { font-size: 14px; }

/* ===== แถบบนแบบใหม่ (8 ต.ค.): โลโก้ | กระดิ่งอันเดียว | เมนูผู้ใช้ — ป้ายเตือนทั้งหมดอยู่ในแผงกระดิ่ง ===== */
.topbar { position: relative; z-index: 900; flex-wrap: nowrap; }
.topbar-actions { flex-wrap: nowrap; justify-content: flex-end; gap: 10px; width: auto; align-items: center; }
.tb-menu { position: relative; }
.tb-icon-btn, .tb-user-btn {
    box-sizing: border-box; height: 44px; display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--btn-line); border-radius: 12px; color: var(--btn-ink);
    font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; padding: 0 12px;
    transition: background-color .15s, border-color .15s;
}
.tb-icon-btn { width: 44px; justify-content: center; padding: 0; position: relative; }
.tb-icon-btn:hover, .tb-user-btn:hover, .tb-icon-btn[aria-expanded="true"], .tb-user-btn[aria-expanded="true"] { background: #f3f5f8; border-color: #aeb5be; }
.tb-icon-btn:focus-visible, .tb-user-btn:focus-visible, .bp-item:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.tb-bell-ic { font-size: 21px; line-height: 1; }
.tb-icon-btn.has-urgent { border-color: #f1b5b5; background: #fff7f7; }
.tb-icon-btn.has-warn { border-color: #f6cf9b; background: #fffaf3; }
.tb-badge {
    position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
    color: #fff; font-size:14px; font-weight: 800; line-height: 1; border: 2px solid #fff;
}
.tb-badge-red { background: #d3202c; }
.tb-badge-orange { background: #e8820c; }
.tb-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--jt-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.tb-user-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-caret { font-size:14px; color: #8a919b; }
.tb-panel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 950; background: #fff;
    border: 1px solid #e1e5ea; border-radius: 14px; box-shadow: 0 10px 30px rgba(16,24,40,.18);
    padding: 8px; box-sizing: border-box;
}
.tb-panel[hidden] { display: none; }
.tb-panel-bell { width: 400px; max-height: 70vh; overflow-y: auto; }
.tb-panel-user { width: 230px; }
.tb-panel-title { padding: 6px 10px 8px; font-size: 15px; font-weight: 800; color: #6b7280; }
.bp-item {
    display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 10px;
    border: 0; border-radius: 10px; background: transparent; color: var(--btn-ink); text-decoration: none;
    font-family: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; line-height: 1.3;
}
.bp-item:hover { background: #f3f5f8; }
.bp-ic { flex: 0 0 26px; text-align: center; font-size: 19px; }
.bp-tx { flex: 1 1 auto; min-width: 0; }
.bp-n { flex: 0 0 auto; min-width: 26px; height: 24px; padding: 0 8px; box-sizing: border-box; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size:14px; font-weight: 800; color: #fff; }
.bp-u .bp-n { background: #d3202c; }
.bp-w .bp-n { background: #e8820c; }
.bp-u { background: #fff5f5; }
.bp-u:hover { background: #ffe9e9; }
.bp-item + .bp-item { margin-top: 2px; }
.bp-empty { padding: 14px 10px; color: #6b7280; font-size: 16px; }
.bp-all { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; border-top: 1px solid #eef0f3; color: var(--jt-red); font-weight: 700; text-decoration: none; font-size: 15px; }
.logout-form { display: block; margin: 0; }
.bp-logout { color: #b42318; border-top: 0; }
.bp-logout:hover { background: #fdeaea; }
.tb-panel-user .bp-logout { margin-top: 4px; border-top: 1px solid #eef0f3; border-radius: 0 0 10px 10px; }
@media (max-width: 768px) {
    .topbar { flex-wrap: nowrap; }
    .brand-logo { flex: 1 1 auto; min-width: 0; }
    .topbar-actions { flex: 0 0 auto; width: auto; gap: 8px; justify-content: flex-end; }
    .tb-user-name, .tb-caret { display: none; }
    .tb-user-btn { width: 44px; padding: 0; justify-content: center; }
    .tb-menu { position: static; }
    .tb-panel { position: fixed; left: 10px; right: 10px; top: 70px; width: auto; }
    .tb-panel-bell { width: auto; max-height: 75vh; }
}

/* ป้ายตัวเลขในเมนูซ้าย: เล็ก สีส้มตามกติกาเดียวกับกระดิ่ง ไม่แย่งสายตาเนื้อหา */
.sidebar-link span[style*="border-radius"] {
    background: #e8820c !important; color: #fff !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 6px !important; border-radius: 999px !important;
    font-size:14px !important; font-weight: 800; line-height: 1; vertical-align: middle; margin-left: 4px;
}

/* กระดิ่งมีคำว่า "แจ้งเตือน" กำกับเสมอ (คอม+มือถือ) */
.tb-icon-btn { width: auto; padding: 0 14px; gap: 6px; }
.tb-bell-tx { font-size: 16px; font-weight: 700; white-space: nowrap; }
.tb-badge { top: -8px; right: -6px; }
@media (max-width: 768px) {
    .tb-icon-btn { padding: 0 10px; gap: 4px; }
    .tb-bell-tx { font-size: 14px; }
    .tb-bell-ic { font-size: 18px; }
    .topbar-actions { gap: 10px; }
}
@media (max-width: 360px) { .tb-bell-tx { font-size:14px; } .tb-icon-btn { padding: 0 8px; } }

/* ===== ปรับหน้าตาบนมือถือ (<=768px เท่านั้น จอคอมไม่เปลี่ยน) 8 ต.ค. ===== */
@media (max-width: 768px) {
    /* เมนูซ้ายแบบลิ้นชัก: แถวสูง 48px อ่านง่าย */
    .sidebar-link { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 48px; padding: 10px 20px; font-size: 17px; line-height: 1.3; }
    .nav-close { min-height: 48px; font-size: 18px; }
    .container { padding: 14px 14px 90px; }
    .card { padding: 16px; margin-bottom: 14px; }
    h1 { font-size: 26px; line-height: 1.3; }
    h2 { font-size: 22px; line-height: 1.3; }

    /* ตารางกว้าง: เลื่อนข้างในกรอบของตัวเอง ไม่ให้ทั้งหน้าเลื่อน */
    .container table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .container table.fin-sum, .container table.no-scroll { display: table; }
    .container table th, .container table td { white-space: normal; }

    /* ฟอร์ม: ช่องกรอกสูง >=44px ตัวอักษร >=16px (กัน iPhone ซูมเอง) */
    input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
    select, textarea { font-size: 16px; min-height: 44px; max-width: 100%; box-sizing: border-box; }
    textarea { min-height: 88px; }
    input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
    label { line-height: 1.4; }
    .form-group, .ef-f, .item-grid > * { margin-bottom: 12px; }

    /* ปุ่มบันทึกในฟอร์มยาว: เต็มความกว้าง ติดล่างจอ */
    .form-actions-sticky { position: sticky; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); margin: 0 -14px; background: #fff; }
    .form-actions-sticky .btn, .form-actions-sticky button { flex: 1 1 100%; width: 100%; }
    .form-actions { gap: 10px; }

    /* ป้องกันข้อความ/กล่องล้นจอ */
    .pf-share, .pf-people, .pf-person { max-width: 100%; box-sizing: border-box; min-width: 0; word-break: break-word; }
    img, video { max-width: 100%; height: auto; }
}
@media (max-width: 768px) {
    .brand-logo { flex: 0 1 auto; gap: 8px; }
    .brand-mark-img { height: 34px; width: auto; flex: 0 0 auto; }
    .topbar { justify-content: space-between; }
}
@media (max-width: 768px) { .pn-col { min-width: 0; } }
@media (max-width: 768px) { .brand-mark-img { height: 42px; } .sidebar-link + .sidebar-link { margin-top: 2px; } }

/* ===== รอบแก้ 1 (8 ต.ค.): มือถือ ===== */
@media (max-width: 768px) {
    /* A. ฟอร์มพนักงาน: แถบติดล่างเหลือ "บันทึก" ปุ่มเดียว ปุ่มอื่นอยู่ในเนื้อฟอร์ม */
    .ef-actions.form-actions-sticky { position: static; display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 0; margin: 0; box-shadow: none; border-top: 1px solid #eee; background: transparent; }
    .ef-actions.form-actions-sticky .ef-spacer { display: none; }
    .ef-actions.form-actions-sticky #ef-prev, .ef-actions.form-actions-sticky #ef-next { flex: 1 1 calc(50% - 5px); width: auto; }
    .ef-actions.form-actions-sticky a.btn { flex: 1 1 100%; width: 100%; }
    .ef-actions.form-actions-sticky button[type=submit] {
        position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60;
        width: auto; min-height: 52px; font-size: 18px; box-shadow: 0 6px 18px rgba(16,24,40,.28);
    }
    /* B. ช่องกรองหัวตาราง: กว้าง>=96px สูง>=44px */
    .container table thead input, .container table thead select, .container table th input, .container table th select { min-width: 96px; min-height: 44px; }
    /* C. เมนูลัดชุด pickup: กริด 2 คอลัมน์ สูงเท่ากัน */
    .pk-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .pk-tab { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 8px 10px; font-size: 15px; line-height: 1.25; box-sizing: border-box; }
    .pk-tab-rider { grid-column: 1 / -1; margin-left: 0; }
    /* D. โลโก้/แถบบน: ย่อกระดิ่ง+โปรไฟล์ให้โลโก้ใหญ่ขึ้น */
    .nav-toggle { width: 44px; height: 44px; margin-right: 4px; }
    .tb-user-btn { width: 40px; height: 44px; }
    .tb-icon-btn { padding: 0 8px; gap: 3px; }
    .topbar-actions { gap: 6px; }
    .topbar { padding-left: 8px; padding-right: 8px; gap: 6px; }
    .brand-mark-img { height: 40px; }
    /* ข้อเล็ก */
    .menu-reset-btn { min-height: 44px; font-size: 15px; padding: 0 14px; }
    .container button:not(.tb-icon-btn):not(.tb-user-btn) { min-height: 40px; }
}
@media (max-width: 370px) { .brand-mark-img { height: 32px; } .tb-bell-tx { font-size:14px; } }
/* จอคอม: แท็บ pickup สูงเท่ากันเรียบร้อย */
.pk-tab { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
@media (max-width: 768px) { .container table input:not([type=checkbox]):not([type=radio]), .container table select { font-size: 16px; } }
@media (max-width: 768px) { .container table input[style*="font-size"]:not([type=checkbox]):not([type=radio]), .container table select[style*="font-size"] { font-size: 16px !important; } }
@media (max-width: 768px) {
    body .pk-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    body .pk-tab { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 8px 10px; font-size: 15px; line-height: 1.25; box-sizing: border-box; margin: 0; }
    body .pk-tab-rider { grid-column: 1 / -1; margin-left: 0; }
    input[type=file] { width: 100%; max-width: 100%; box-sizing: border-box; font-size: 16px; }
}
@media (max-width: 768px) {
    .ef-photo-row, .ef-upload { flex-wrap: wrap; min-width: 0; }
    .ef-photo-row input[type=file], .ef-upload input[type=file], .ef-upload select { width: 100%; min-width: 0; max-width: 100%; }
    .ef-f, .ef-grid > *, .ef-panel { min-width: 0; }
}
@media (max-width: 768px) { .pb-optform, .pb-optform label { max-width: 100%; min-width: 0; } .pb-optform input, .pb-optform select { width: 100%; max-width: 100%; } }

/* ==========================================================================
   สเกลตัวอักษรกลาง (ทั้งเว็บ): หัวเรื่อง 28 / หัวข้อ 21 / เนื้อหา 16-17 / รอง 14 / ปุ่มหลัก 18 / ปุ่มรอง 15
   ใช้ :where() เพื่อให้ความเฉพาะเจาะจงต่ำ — หน้าที่กำหนดขนาดเองด้วย class ยังคงเดิม
   ========================================================================== */
:root {
    --fs-title: 28px;
    --fs-h2: 21px;
    --fs-h3: 18px;
    --fs-body: 17px;
    --fs-table: 16px;
    --fs-small: 14px;
    --fs-btn: 18px;
    --fs-btn-sm: 15px;
    --space-section: 20px;
}
:where(.container) h1 { font-size: var(--fs-title); line-height: 1.3; margin: 6px 0 10px; }
:where(.container) h2 { font-size: var(--fs-h2); line-height: 1.35; }
:where(.container) h3 { font-size: var(--fs-h3); line-height: 1.4; }
:where(.container) small { font-size: var(--fs-small); }
table { font-size: var(--fs-table); }
th { font-size: var(--fs-table); }
:where(.container) :is(input[type=text],input[type=number],input[type=date],input[type=password],input[type=search],input[type=tel],input[type=email],select,textarea) { font-size: var(--fs-table); }
.btn, a.btn, button.btn { font-size: var(--fs-btn); }
.btn-secondary, a.btn-secondary, button.btn-secondary, .btn-small, a.btn-small, button.btn-small { font-size: var(--fs-btn-sm); }
.btn-lg, a.btn-lg, button.btn-lg { font-size: var(--fs-btn); }
.card { margin-bottom: var(--space-section); }

/* ==========================================================================
   ขยายเต็มจอ + ตัวอักษรใหญ่ขึ้นบนจอคอมพิวเตอร์ (14 ต.ค. 69) — มือถือไม่กระทบ
   ========================================================================== */
@media (min-width: 901px) {
    :root {
        --fs-title: 32px; --fs-h2: 24px; --fs-h3: 20px; --fs-body: 19px;
        --fs-table: 18px; --fs-small: 15px; --fs-btn: 19px; --fs-btn-sm: 16px;
    }
    body { font-size: 19px; }
    .layout { max-width: none; width: 100%; margin: 0; }
    .sidebar { width: 240px; }
    .container { max-width: none; width: 100%; padding: 24px 32px; }
}
@media (min-width: 1600px) {
    :root { --fs-table: 19px; --fs-body: 20px; }
    body { font-size: 20px; }
}

/* ===== UI spec ชูรี 14 ต.ค. : ฟอนต์ในเครื่อง + tokens + ปรับการ์ด/ตาราง/เมนู ===== */
@font-face{font-family:"Sarabun";font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/Sarabun-400.ttf) format("truetype")}
@font-face{font-family:"Sarabun";font-weight:600;font-style:normal;font-display:swap;src:url(/static/fonts/Sarabun-600.ttf) format("truetype")}
@font-face{font-family:"Sarabun";font-weight:700;font-style:normal;font-display:swap;src:url(/static/fonts/Sarabun-700.ttf) format("truetype")}
:root{
  --c-bg:#f5f6f8; --c-card:#fff; --c-line:#e5e8ec; --c-text:#1f2933; --c-muted:#5f6b7a;
  --c-ok:#15803d; --c-warn:#b45309; --c-info:#1d4ed8;
  --font:"Sarabun","Noto Sans Thai",Tahoma,sans-serif;
  --fs-body:17px; --fs-small:15px; --fs-tag:14px; --fs-h1:28px; --fs-h2:22px; --fs-h3:18px; --lh:1.6;
  --r-card:12px; --r-input:10px; --ctl-h:44px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --r-s:8px; --r-m:10px; --r-l:12px; --btn-h:44px; --btn-h-lg:54px;
  --shadow-card:0 1px 3px rgba(16,24,40,.08);
}
body{font-family:var(--font);background:var(--c-bg);color:var(--c-text);font-size:var(--fs-body);line-height:var(--lh)}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
.card{border-radius:var(--r-card);box-shadow:var(--shadow-card);border:1px solid var(--c-line)}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),select{min-height:var(--ctl-h);border-radius:var(--r-input)}
.btn{min-height:var(--ctl-h)}
.sidebar-group-title{font-size:14px;color:var(--c-muted)}
.menu-tag{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--jt-red-tint);color:var(--jt-red-dark);font-size:14px;font-weight:700;line-height:20px;vertical-align:middle}
.menu-tag.wip{background:#fff4e0;color:var(--c-warn)}
.nav-btn{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-card);box-shadow:var(--shadow-card);color:var(--c-text);padding:24px 12px}
.nav-btn:hover{background:var(--jt-red-tint);color:var(--c-text);box-shadow:0 4px 12px rgba(16,24,40,.12)}
.rh-hero{border:1px solid var(--c-line);border-radius:var(--r-card);box-shadow:var(--shadow-card);background:#fff}
.rh-short{border:1px solid var(--c-line);border-radius:var(--r-card);box-shadow:var(--shadow-card);color:var(--c-text)}
.rh-short-text b{color:var(--c-text)} .rh-short-text small{font-size:15px;color:var(--c-muted)}
table th,table td{border:0;border-bottom:1px solid var(--c-line)}
table th{background:#f3f5f8;font-weight:700}
tr:nth-child(even){background:transparent}

/* ===== ภาคผนวกขนาด (ชูรี) ===== */
h1,h2,h3{font-weight:700} h1,h2{line-height:1.3} h3{line-height:1.4}
table{font-size:var(--fs-body)} th,td{padding:8px 12px}
.card{padding:20px;margin-bottom:16px}
.btn{border-radius:var(--r-m)} .btn-small{min-height:40px}
.btn-lg{min-height:var(--btn-h-lg);border-radius:var(--r-l)}
textarea{min-height:96px;border-radius:var(--r-m)}
.nav-btn,.rh-hero,.rh-short,.card{border-radius:var(--r-l)}
.container{max-width:1060px;padding:24px}
.nav-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.topbar{min-height:64px;padding:8px 24px;border-bottom-width:3px}
.topbar-actions{gap:8px}
.tb-icon-btn,.tb-user-btn,.topbar-btn,.topbar .btn{min-height:44px}
.tb-icon-btn:not(.tb-user-btn){width:auto;min-width:44px;padding:0 14px}
.tb-bell-ic{font-size:20px}.tb-bell-tx{font-size:15px}
.tb-badge{min-width:22px;height:22px;line-height:22px;font-size:14px;top:-6px;right:-6px}
.tb-pending{box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:var(--r-m);background:#b45309;color:#fff;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;animation:tbPendBlink 1.6s ease-in-out infinite}
.tb-pending.over{background:#c00000}
.tb-pending>span:first-child{font-size:20px;line-height:1}
.tb-pending b{background:#fff;color:#1f2933;border-radius:999px;min-width:22px;height:22px;line-height:22px;padding:0 6px;text-align:center;font-size:14px}
@keyframes tbPendBlink{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.tb-pending{animation:none}}
@media print{.tb-pending{display:none!important}}
.sidebar-link{min-height:44px;font-size:16px}
@media (max-width:768px){
  body{font-size:16px} h1{font-size:24px} h2{font-size:20px}
  .topbar{min-height:60px;padding:8px 12px;gap:6px} .topbar-actions{gap:6px;flex-wrap:nowrap}
  .container{padding:14px} .card{padding:16px;margin-bottom:12px}
  .tb-pending,.tb-icon-btn:not(.tb-user-btn){padding:0 10px}
  .tb-pending-tx{display:none} .tb-bell-tx{font-size:14px}
  .sidebar-link{min-height:48px}
}
@media (max-width:360px){.tb-bell-tx{display:none}}

/* ===== รอบ 2 (14 ต.ค.): เต็มจอ + ลดความลายตา ===== */
.layout{max-width:none!important;width:100%;margin:0}
.container{max-width:none!important;width:auto;flex:1;min-width:0;padding:24px}
@media (min-width:1600px){.container{padding:24px 32px}}
.sidebar{width:240px}
form.form-narrow,.card form{max-width:none}
.card form input:not([type=checkbox]):not([type=radio]):not([type=file]),.card form select{max-width:720px}
body{background:#f7f8fa}
.rh-hero{background:#fff}
.card,.rh-short,.nav-btn,.rh-hero{border:1px solid var(--c-line);box-shadow:none}
.rh-short:hover,.nav-btn:hover{transform:none;box-shadow:none;background:#f3f5f8}
.nav-btn{font-weight:700;font-size:19px}
.rh-short-text b{font-size:18px}
.rh-short-go{font-size:26px;color:var(--c-muted)}
h1{color:var(--c-text);margin:0 0 16px}
.sidebar{box-shadow:none;border-right:1px solid var(--c-line)}
.topbar{box-shadow:none}
.menu-tag{background:#eef1f5;color:var(--c-muted)} .menu-tag.wip{background:#eef1f5;color:var(--c-muted)}
/* ปุ่มแชทลอย: เล็กลง ไม่บังเนื้อหา */
#np-fab{min-height:44px!important;width:44px;height:44px;padding:0!important;font-size:20px!important;opacity:.85;box-shadow:0 2px 6px rgba(0,0,0,.2)!important}
#np-fab .np-lbl{display:none}
body.np-pad{padding-bottom:0!important}
/* ลดการกะพริบอื่นให้เหลืองานค้างอันเดียว */
.petty-alert-btn,.topbar-btn.petty-alert-btn{animation:none!important}
/* ตารางมือถือ: เลื่อนข้างในกรอบตัวเอง ไม่ดันหน้า */
@media (max-width:768px){.container{padding:12px}.container table{display:block;overflow-x:auto;max-width:100%}.sidebar{width:270px}}
.login-box form label{display:block;margin:16px 0 4px;font-weight:700}
.login-box form .btn{width:100%;min-height:54px;font-size:18px;border-radius:12px}
.login-box form input{width:100%;box-sizing:border-box}