:root {
    --navy-dark: #0f172a;       /* Slate black - Google AI Studio primary */
    --navy-medium: #1e293b;     /* Card headings and text */
    --navy-light: #64748b;      /* Muted details */
    --gold-primary: #2d4fa3;    /* สีหลักกรมท่า (อ่อนลงจาก #1e3b8b ตามธีมใหม่ 2026-10) */
    --gold-hover: #243f86;      /* กรมท่าเข้มขึ้นตอน hover */
    --gold-light: rgba(45, 79, 163, 0.06); /* พื้นฟ้าอ่อนสำหรับเน้น */
    --gold-border: rgba(45, 79, 163, 0.14);
    --gray-bg: #f2f2f7;         /* พื้นเทาแบบ iOS (systemGroupedBackground) ให้การ์ดขาวลอยเป็นชั้น — ธีม Layered 2026-10 */
    --gray-card: #ffffff;       /* Pure white card container */
    --text-dark: #334155;       /* Charcoal gray text - gentle for eyes */
    --text-muted: #64748b;      /* Muted gray text */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --radius-sm: 10px;          /* ปุ่ม ช่องกรอก เมนู */
    --radius-md: 18px;          /* การ์ด/ตาราง */
    --radius-lg: 20px;          /* โมดอล */
    /* ธีม Layered แบบ iOS: การ์ดไม่มีขอบ ใช้เงา 2 ชั้น (เงาชิดขอบคม + เงากระจายนุ่ม) ให้ดูลอยเป็นชั้น */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 18px rgba(15, 23, 42, 0.07);
    --shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.11);
    --shadow-lg: 0 2px 6px rgba(15, 23, 42, 0.08), 0 20px 48px rgba(15, 23, 42, 0.16);
    /* ฟอนต์แบบ iOS: เครื่อง Apple ใช้ SF Pro + Sukhumvit Set ของจริงจากระบบ (-apple-system)
       เครื่องอื่นใช้ฟอนต์ฟรีที่หน้าตาใกล้เคียงที่สุด: Inter (อังกฤษ ~SF Pro) + Noto Sans Thai (ไทยไม่มีหัว ~Sukhumvit) */
    --font-head: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Sukhumvit Set', 'Noto Sans Thai', 'Segoe UI', Tahoma, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Sukhumvit Set', 'Noto Sans Thai', 'Segoe UI', Tahoma, sans-serif;
    /* ไม่ใช้ "all": ตอนย่อ/ขยายหน้าต่าง ความกว้าง/padding ของปุ่ม แถวตาราง การ์ด ฯลฯ จะค่อย ๆ เลื่อนตามทุกเฟรม = กระตุก (2026-10-14) */
    --transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.2s cubic-bezier(0.4, 0, 0.2, 1), fill 0.2s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== BASE STYLES & RESET ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--gray-bg);
    color: var(--text-dark);
    line-height: 1.5;
    overflow-x: hidden;
    font-size: 14px;
}

/* Custom Scrollbars styled like Google AI Studio */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--dk-line, #e2e8f0);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--dk-line, #cbd5e1);
}
/* แถบเลื่อนขึ้น-ลง หนาเท่าแถบเลื่อนแนวนอนลอยท้ายจอ (.floating-hscroll): ช่อง 14px ตัวจับ 8px (owner, 2026-10-13)
   แถบแนวนอนทั่วไปยังบาง 6px เหมือนเดิม */
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-thumb:vertical {
    background: #cbd5e1;
    border: 3px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:vertical:hover { background: #94a3b8; background-clip: padding-box; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    font-weight: 500;
    color: var(--navy-dark);
    letter-spacing: -0.01em;
}

/* Utility classes */
.hidden {
    display: none !important;
}

.text-gold { color: var(--gold-primary) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }

/* Buttons with micro-interactions */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
    white-space: nowrap; /* ข้อความในปุ่มอยู่บรรทัดเดียวเสมอ — แถวปุ่มที่แคบให้ห่อทั้งปุ่มลงบรรทัดใหม่แทน (flex-wrap) */
}
/* ปุ่มอื่นที่ไม่ใช้ .btn (สลับมุมมอง/แท็บ/ปุ่มในตาราง ฯลฯ) ก็ไม่ตัดคำกลางปุ่ม */
button {
    white-space: nowrap;
}
.btn:active {
    transform: scale(0.97);
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-gold {
    background-color: var(--gold-primary);
    color: var(--on-primary, #ffffff);
}

.btn-gold:hover {
    background-color: var(--gold-hover);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--dk-line, #e2e8f0);
    color: var(--text-dark);
}

.btn-outline:hover {
    background-color: var(--dk-subtle, #f8fafc);
    border-color: var(--dk-line, #cbd5e1);
    color: var(--navy-dark);
}

/* ปุ่มตัวหนังสือในคอลัมน์จัดการ (ปิดงาน / เปิดงาน / ไม่เรียกเก็บเงิน …): พื้นทึบ ไม่โปร่งทับข้อความในแถว
   ชี้เมาส์แล้วทึบขึ้นเป็นสีหลักอ่อน + ขอบ/ตัวอักษรสีหลัก (owner, 2026-10-13) */
td.actions-col .btn-outline { background-color: var(--dk-card, #ffffff); }
td.actions-col .btn-outline:hover {
    background-color: var(--dk-head, #e6ecf8);
    border-color: var(--gold-primary);
    color: var(--gold-primary);
    box-shadow: 0 2px 8px rgba(45, 79, 163, 0.18);
}

.btn-danger {
    background-color: var(--dk-bad-bg, #fef2f2);
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.1);
}

.btn-danger:hover {
    background-color: var(--danger);
    color: white;
    border-color: var(--danger);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13.5px;
}

/* ปุ่มแดงทึบ — ใช้เป็นปุ่ม "ลบ" ในหน้าต่างยืนยัน */
.btn-danger-solid {
    background-color: var(--danger);
    color: #ffffff;
}

.btn-danger-solid:hover {
    background-color: #dc2626;
}

/* ==================== หน้าต่างยืนยัน/แจ้งเตือนของระบบ (showUiDialog / uiConfirm / uiAlert / uiPrompt ใน app.js) ====================
   z-index สูงกว่าโมดัลอื่นทั้งหมด (ai-rejected 1100) เพราะเปิดซ้อนจากในฟอร์มได้ */
.ui-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: rgba(20, 32, 57, 0.45);
    animation: fadeIn 0.15s ease-out;
}

.ui-dialog {
    width: 100%;
    max-width: 420px;
    background-color: var(--dk-card, #ffffff);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 28px 28px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    animation: slideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ui-dialog-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.ui-dialog-icon .ico {
    width: 28px;
    height: 28px;
}

.ui-dialog-icon-blue  { background-color: var(--dk-subtle, #eaf0fb); }
.ui-dialog-icon-red   { background-color: var(--dk-bad-bg, #fde8e8); }
.ui-dialog-icon-amber { background-color: var(--dk-warn-bg, #fff3dd); }

.ui-dialog-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--navy-dark);
    margin: 0;
}

.ui-dialog-message {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-dark);
    white-space: pre-line;
    max-height: 50vh;
    overflow-y: auto;
    word-break: break-word;
}

/* การ์ดข้อมูลรายการที่กำลังจะลบ/แก้ไข (รูป + ชื่อ + รายละเอียด) */
.ui-dialog-card {
    width: 100%;
    margin-top: 6px;
    padding: 14px 16px;
    background-color: var(--gray-bg);
    border-radius: 14px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ui-dialog-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ui-dialog-card-pic {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--dk-card, #ffffff);
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px var(--dk-line, #d5dce8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-dialog-card-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-dialog-card-pic .ico {
    width: 28px;
    height: 28px;
}

.ui-dialog-card-names {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ui-dialog-card-names strong {
    font-size: 15px;
    color: var(--navy-dark);
    word-break: break-word;
}

.ui-dialog-card-names small {
    font-size: 13px;
    color: var(--text-muted);
}

.ui-dialog-card-rows {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 14px;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--dk-line, #e2e7ef);
    font-size: 13.5px;
}

.ui-dialog-card-rows dt {
    color: var(--text-muted);
    white-space: nowrap;
}

.ui-dialog-card-rows dd {
    margin: 0;
    color: var(--text-dark);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.ui-dialog-card-list {
    margin: 0;
    padding: 10px 0 0 18px;
    border-top: 1px solid var(--dk-line, #e2e7ef);
    font-size: 13.5px;
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ui-dialog-card-more {
    list-style: none;
    margin-left: -18px;
    color: var(--text-muted);
}

.ui-dialog-input {
    width: 100%;
    margin-top: 4px;
    padding: 10px 14px;
    border: 1px solid var(--dk-line, #d5dce8);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 15px;
    text-align: center;
}

.ui-dialog-input:focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 3px rgba(45, 79, 163, 0.12);
}

.ui-dialog-actions {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
}

/* 3 ปุ่ม (extraText): เรียงแนวตั้งแบบ iOS action sheet ข้อความยาวไม่ถูกบีบ */
.ui-dialog-actions.has-extra { flex-direction: column; }

.ui-dialog-actions .btn {
    flex: 1;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
}

.ui-dialog-actions .btn:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 2px;
}

/* ปุ่มสลับ "ตารางใบงาน / คัมบังบอร์ด" (หน้าระบบแจ้งงาน) — switchJobView() เปลี่ยน className ของปุ่มทุกครั้ง
   จึงกำหนดขนาดผ่านกล่องแม่ .view-toggle-bar แทน
   กรอบเป็นการ์ดขาวมีเงา (เดิมพื้นเทา #f1f5f9 กลืนกับพื้นหลังระบบ #f1f4f9 จนมองไม่เห็นกรอบ) */
.view-toggle-bar {
    display: flex;
    gap: 6px;
    width: fit-content;
    margin-bottom: 20px;
    padding: 6px;
    background-color: var(--dk-card, #ffffff);
    border-radius: 14px;
    box-shadow: var(--shadow-sm), 0 0 0 1px rgba(45, 79, 163, 0.08);
}

.view-toggle-bar .btn {
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    gap: 8px;
}

.view-toggle-bar .btn .ico {
    width: 18px;
    height: 18px;
}

/* ปุ่มสลับ "ตาราง / กราฟวงกลม" ในหน้าบัญชีและการเงิน (toggleChartView() สลับแค่ btn-gold/btn-outline) */
.btn-chart-toggle {
    font-size: 13.5px;
    padding: 7px 16px;
    gap: 6px;
    white-space: nowrap;
}

.btn-chart-toggle .ico {
    width: 16px;
    height: 16px;
}

/* เลขประจำตัวคนต่างด้าว / เลขใบอนุญาตทำงาน ในช่อง "เลขคนงาน / บัตร" (ตารางคนงาน + ต่ออายุ)
   และเลขบริษัท / เลขกรรมการ / เลขประจำตัว ใต้ชื่อนายจ้าง (buildEmployerIdLinesHtml — ตารางคนงาน, นายจ้าง, ใบงาน, วางบิล) */
.employer-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy-dark);
    margin-bottom: 2px;
}

.worker-id-line,
.employer-id-line {
    font-size: 13.5px;
    line-height: 1.6;
    white-space: nowrap;
}

.worker-id-line span,
.employer-id-line span {
    color: var(--text-muted);
    font-size: 13.5px;
}

.employer-id-line b,
.worker-id-line b {
    color: var(--navy-dark);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* ตัวกรองหน้าคนงานต่ออายุ/ทำเล่ม — ตัวกรองหลายตัว ให้ขึ้นบรรทัดใหม่ได้เมื่อจอแคบ */
.renewal-filters {
    flex-wrap: wrap;
}

.renewal-filter-clear {
    white-space: nowrap;
}

.renewal-filter-summary {
    margin: -6px 0 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gold-primary);
}

/* ป้าย "รอแจ้งเข้า" ใต้บรรทัดเพศ ในช่องชื่อคนงาน (ตารางคนงาน) */
.worker-notify-badge {
    margin-top: 4px;
}

/* admin เห็นป้าย "รอแจ้งเข้า" เป็นปุ่ม — มีส่วน "✓ ผ่าน" ต่อท้าย กดทีเดียวเพื่อข้ามการแจ้งเข้า */
.notify-skip-btn {
    font-family: inherit;
    cursor: pointer;
    gap: 6px;
    transition: var(--transition);
}

.notify-skip-action {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding-left: 6px;
    border-left: 1px solid rgba(161, 92, 0, 0.25);
    color: var(--dk-ok, #1f9254);
}

.notify-skip-btn:hover {
    background-color: var(--dk-ok-bg, #e5f5ed);
    border-color: rgba(31, 146, 84, 0.3);
}

.notify-skip-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ปุ่ม "เปิดแฟ้มเอกสาร" ในตารางนายจ้าง/คนงาน/แดชบอร์ด — ปุ่มหลักของแถว ให้ใหญ่กดง่าย */
.btn-open-folder {
    font-size: 13.5px;
    padding: 8px 16px;
    gap: 7px;
    white-space: nowrap;
}

.btn-open-folder .ico {
    width: 17px;
    height: 17px;
}

/* ปุ่ม "เปิดแฟ้มเอกสาร": ไอคอนแฟ้มสีเหลืองทึบ (ทุกธีม) แทนสีขาวตามตัวหนังสือปุ่ม */
.btn.btn-open-folder .ico {
    --ic: #e0a106;
}

.btn.btn-open-folder .ico svg .fl {
    fill: #fcc934;
}

/* ปุ่ม "ตรวจสอบรายชื่อ / แก้ไขนายจ้าง" ในตารางแจ้งเตือนวันหมดอายุบนแดชบอร์ด —
   เรียงซ้อนกัน กว้างเท่ากัน และห้ามตัดคำขึ้นบรรทัดใหม่ (คอลัมน์จัดการแคบ) */
.alert-row-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

.alert-row-actions .btn {
    white-space: nowrap;
    font-size: 13px;
    padding: 5px 12px;
}

/* Status Badges - Clean Pill Design */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* ป้ายขนาดใหญ่ — ใช้ในตารางที่ป้ายเป็นข้อมูลหลักของช่อง (เช่น จำนวนคนงานใกล้หมดอายุ, ประเภทกิจการ, วันหมดอายุหนังสือรับรอง) */
.badge-lg {
    padding: 5px 12px;
    font-size: 13.5px;
    font-weight: 600;
    gap: 5px;
}

.badge-gold {
    background-color: var(--dk-subtle, #f8fafc);
    color: var(--gold-primary);
    border-color: var(--gold-border);
}

.badge-danger {
    background-color: var(--dk-bad-bg, #fef2f2);
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.08);
}

.badge-success {
    background-color: var(--dk-ok-bg, #ecfdf5);
    color: var(--success);
    border-color: rgba(16, 185, 129, 0.08);
}

.badge-warning {
    background-color: var(--dk-warn-bg, #fffbeb);
    color: var(--warning);
    border-color: rgba(245, 158, 11, 0.08);
}

/* Form Controls */
.form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy-medium);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px 14px;
    border: 1px solid var(--dk-line, #cbd5e1);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    background-color: var(--dk-card, #ffffff);
    transition: var(--transition);
    color: var(--text-dark);
}

/* ช่องข้อความหลายบรรทัด (Note วางบิล, รายละเอียดรายจ่าย, บันทึกงาน, หมายเหตุปิดงาน)
   ลากมุมขวาล่างเพื่อขยายได้เฉพาะแนวตั้ง — กันลากกว้างจนดันฟอร์มเบี้ยว */
.form-group textarea {
    resize: vertical;
    min-height: 64px;
    line-height: 1.5;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 3px rgba(45, 79, 163, 0.08);
}

.form-row {
    display: flex;
    gap: 16px;
}

/* ==================== DROPDOWN (<select>) ทั้งระบบ ====================
   กล่องปิด: มุมโค้ง ขอบเทาอมฟ้า ลูกศรกรมท่า (ซ่อนลูกศรเดิมของเบราว์เซอร์)
   :not([multiple]):not([size]) ทำให้ specificity สูงกว่า .form-group select / .filter-box select
   จึงชนะเรื่อง padding-right (กันตัวหนังสือทับลูกศร) โดยไม่ต้องใช้ !important */
select:not([multiple]):not([size]) {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--dk-card, #ffffff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d4fa3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 38px;
    border: 1px solid var(--dk-line, #d5dce8);
    border-radius: var(--radius-sm);
    color: var(--text-dark);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* dropdown กรองข้อมูลที่อยู่เดี่ยว ๆ (ไม่อยู่ใน .form-group/.filter-box) เช่น ช่วงเวลาสรุปการเงิน,
   เดือนสถิติ, นายจ้าง/Agent งานสำเร็จ, สถานะบิล, หมวดรายจ่าย — padding-right มาจากกฎ select ด้านบน (กันทับลูกศร) */
.select-filter {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 16px;
    font-size: 14.5px;
    font-weight: 500;
    min-height: 44px;
}

select:not([multiple]):not([size]):hover {
    border-color: #a9b8d6;
}

select:not([multiple]):not([size]):focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 3px rgba(45, 79, 163, 0.12);
}

select:disabled {
    background-color: var(--gray-bg);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* รายการที่เปิดออกมา: เบราว์เซอร์ใหม่ (Chrome/Edge 135+) ปรับแต่งได้เต็มที่ผ่าน appearance: base-select
   → กล่องโค้ง มีเงา ตัวเลือกที่เลือกอยู่เป็นแถบกรมท่า; เบราว์เซอร์อื่นใช้รายการแบบเดิมของเครื่อง */
@supports (appearance: base-select) {
    select:not([multiple]):not([size]),
    select:not([multiple]):not([size])::picker(select) {
        appearance: base-select;
    }

    select:not([multiple]):not([size])::picker-icon {
        display: none; /* ใช้ลูกศรกรมท่าจาก background-image แทน */
    }

    select:not([multiple]):not([size])::picker(select) {
        border: none;
        border-radius: 14px;
        padding: 6px;
        margin-top: 6px;
        background-color: var(--dk-card, #ffffff);
        box-shadow: var(--shadow-lg), 0 0 0 1px rgba(45, 79, 163, 0.08);
        max-height: 320px;
    }

    select:not([multiple]):not([size]) option {
        padding: 9px 12px;
        border-radius: 10px;
        font-size: 14px;
        color: var(--text-dark);
        cursor: pointer;
    }

    select:not([multiple]):not([size]) option:hover,
    select:not([multiple]):not([size]) option:focus-visible {
        background-color: var(--gold-light);
        color: var(--navy-dark);
        outline: none;
    }

    select:not([multiple]):not([size]) option:checked {
        background-color: var(--gold-primary);
        color: var(--on-primary, #ffffff);
        font-weight: 600;
    }

    select:not([multiple]):not([size]) option::checkmark {
        display: none;
    }

    /* dropdown บัญชีธนาคาร: โลโก้ + ชื่อบัญชี + เลขบัญชี (ดู bankOptionHtml ใน app.js) */
    select:not([multiple]):not([size]) option:has(.opt-bank-text) {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .bank-select-head {
        all: unset;
        display: flex;
        align-items: center;
        min-width: 0;
        width: 100%;
    }

    .bank-select-head selectedcontent {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .opt-bank-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .opt-cash-icon {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        border-radius: 50%;
        background-color: var(--dk-ok-bg, #e5f5ed);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .opt-cash-icon .ico {
        width: 16px;
        height: 16px;
    }

    /* ตัวเลือกที่เลือกอยู่ (พื้นกรมท่า) — ให้วงกลมเงินสดยังเห็นชัด */
    select:not([multiple]):not([size]) option:checked .opt-cash-icon {
        background-color: var(--dk-card, #ffffff);
    }
}

/* เบราว์เซอร์ที่ไม่รองรับ base-select: ซ่อนปุ่มหัวที่ใส่ไว้ (เห็นแค่ข้อความในตัวเลือก) */
@supports not (appearance: base-select) {
    .bank-select-head { display: none; }
}

.col-6 { width: 50%; }
.col-4 { width: 33.33%; }
.col-12 { width: 100%; }

.required {
    color: var(--danger);
}

/* ==================== LOGIN VIEW ==================== */
#login-view,
#reset-password-view {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-bg);
    padding: 20px;
}

.login-container {
    width: 100%;
    max-width: 440px;
}

.login-card {
    background-color: var(--gray-card);
    border: none;
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-lg);
}

.login-header {
    text-align: center;
    margin-bottom: 28px;
}

.login-logo {
    display: block;
    height: 160px;
    width: auto;
    margin: 0 auto 16px auto;
}

.login-header h2 {
    color: var(--navy-dark);
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.login-header .subtitle {
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 500;
}

#login-form .form-group label,
#reset-password-form .form-group label {
    color: var(--navy-dark);
    font-weight: 600;
}

#login-form input,
#reset-password-form input {
    background-color: var(--dk-card, #ffffff);
    border-color: var(--dk-line, #cbd5e1);
    color: var(--text-dark);
}

#login-form input:focus,
#reset-password-form input:focus {
    border-color: var(--gold-primary);
    background-color: var(--dk-card, #ffffff);
    box-shadow: 0 0 0 3px rgba(45, 79, 163, 0.08);
}

.error-msg {
    color: var(--danger);
    background-color: var(--dk-bad-bg, #fef2f2);
    border: 1px solid rgba(239, 68, 68, 0.15);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    margin-bottom: 16px;
    display: none;
    font-weight: 500;
}

/* ==================== LAYOUT (SIDEBAR & MAIN) ==================== */
#main-layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar styling */
/* Sidebar styling */
.sidebar {
    width: 256px;
    background-color: var(--dk-card, #ffffff);
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--dk-line, #e2e8f0);
    flex-shrink: 0;
}

.sidebar-brand {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--dk-line, #f1f5f9);
}

.brand-logo-img {
    height: 94px;
    width: auto;
    display: block;
}

.sidebar-brand .brand-text {
    text-align: center;
}

.brand-text h3 {
    color: var(--navy-dark);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.brand-text span {
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 500;
}

.sidebar-user {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--dk-subtle, #f8fafc);
    border-bottom: 1px solid var(--dk-line, #f1f5f9);
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--dk-card, #ffffff);
    border: 1.5px solid var(--gold-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-primary);
    font-weight: 600;
    font-size: 15px;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    overflow: hidden;
}

/* รูปโปรไฟล์ผู้ใช้ (userAvatarHtml ใน app.js) — รูปเต็มวง ไม่มีรูป = ตัวอักษรแรกของชื่อ */
.user-avatar > span { display: contents; }
.user-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* รูปตัวเองที่แถบซ้าย: กดเพื่อเปลี่ยนรูป */
label.user-avatar { cursor: pointer; transition: var(--transition); }
label.user-avatar:hover { box-shadow: 0 0 0 3px rgba(45, 79, 163, 0.18); }
.user-avatar-sm { width: 30px; height: 30px; font-size: 13px; border-width: 1px; }
.user-name-cell { display: flex; align-items: center; gap: 10px; }
/* ออนไลน์อยู่ (Realtime Presence — startOnlinePresence ใน app.js): วงเขียวรอบรูป + ป้ายในช่องสถานะ */
.user-avatar.is-online { box-shadow: 0 0 0 2px var(--dk-card, #ffffff), 0 0 0 4px #22c55e; }
.user-online-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; color: var(--dk-ok, #15803d); background: var(--dk-ok-bg, #dcfce7);
}
.user-online-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
/* แทปเด้ง "… ออนไลน์แล้ว" มุมขวาล่าง — Admin เท่านั้น (showOnlineToast) */
#online-toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 3000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.online-toast {
    display: flex; align-items: center; gap: 12px; min-width: 230px; max-width: 320px; padding: 11px 16px 11px 12px;
    border-radius: 18px; background: var(--dk-card, #ffffff); color: var(--text-dark);
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 10px 30px rgba(0,0,0,.18); cursor: pointer; pointer-events: auto;
    opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .25s ease, transform .25s ease;
}
.online-toast.is-in { opacity: 1; transform: none; }
.online-toast-name { font-weight: 600; font-size: 14px; }
.online-toast-sub { font-size: 12.5px; color: var(--dk-muted, var(--text-muted)); }
@media (max-width: 640px) { #online-toast-stack { left: 16px; right: 16px; } .online-toast { max-width: none; } }
.user-avatar-field { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.user-avatar-preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--gold-primary);
    background-color: var(--dk-card, #ffffff);
    color: var(--gold-primary);
    font-size: 24px;
    font-weight: 600;
}
.user-avatar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.user-avatar-actions label.btn { cursor: pointer; }

.user-info h4 {
    color: var(--navy-dark);
    font-size: 14px;
    margin-bottom: 2px;
    font-weight: 600;
}

.sidebar-menu {
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-radius: 12px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    position: relative;
}

.menu-item svg {
    color: var(--dk-muted, #64748b);
    transition: var(--transition);
    width: 18px;
    height: 18px;
}

.menu-item:hover {
    background-color: var(--gold-light);
    color: var(--navy-dark);
}

/* เมนูที่เลือกอยู่: แถบกรมท่าทึบ ตัวหนังสือขาว */
.menu-item.active {
    background-color: var(--gold-primary);
    color: var(--on-primary, #ffffff);
    font-weight: 600;
}

.menu-item:hover svg {
    color: var(--navy-dark);
}

.menu-item.active svg {
    color: var(--on-primary, #ffffff);
}

.menu-badge {
    margin-left: auto;
    background-color: var(--danger);
    color: white;
    font-size: 12.5px;
    padding: 2px 7px;
    border-radius: 9999px;
    font-weight: 600;
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--dk-line, #f1f5f9);
}

/* แถบเตือน "กำลังดูหน้าจอแบบผู้ใช้อื่น" (startViewAs ใน app.js) — ลอยกลางบนจอ */
.view-as-bar {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2500;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    padding: 8px 8px 8px 16px;
    border-radius: 999px;
    background: #f59e0b;
    color: #1c1917;
    font-size: 13px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.view-as-bar .ico { width: 18px; height: 18px; flex-shrink: 0; }
.view-as-bar span { line-height: 1.35; }
.view-as-bar .btn { background: #1c1917; color: #fff; border: none; white-space: nowrap; flex-shrink: 0; }
.view-as-bar .btn:hover { background: #000; }

/* การ์ดผู้ใช้อยู่ท้ายแถบเมนู เหนือปุ่มออกจากระบบ รูปใหญ่ขึ้น (owner, 2026-10-13) */
.sidebar-footer .sidebar-user {
    padding: 0 0 14px;
    background: none;
    border-bottom: none;
}
.sidebar-footer .sidebar-user .user-avatar { width: 52px; height: 52px; font-size: 20px; border-width: 2px; }
.sidebar.sidebar-collapsed .sidebar-footer .sidebar-user { padding: 0 0 12px; justify-content: center; }
.sidebar.sidebar-collapsed .sidebar-footer .sidebar-user .user-avatar { width: 44px; height: 44px; }

/* ปุ่มย่อ/ขยายเมนูข้างที่แถบบนขวา (หน้าตาเหมือนปุ่มรีเฟรช .topbar-refresh-btn)
   ใช้ได้เฉพาะจอกว้าง — จอแคบเมนูเป็นลิ้นชักอยู่แล้ว ซ่อนปุ่มนี้ใน media query
   ตอนเมนูย่ออยู่ ลูกศรกลับด้านชี้ขวา (= กดเพื่อขยาย) */
.sidebar-collapse-btn svg {
    transition: transform 0.2s ease;
}

.sidebar-collapse-btn.is-collapsed svg {
    transform: rotate(180deg);
}

.sidebar {
    transition: width 0.2s ease;
}

/* สถานะย่อ: เหลือแต่ไอคอน ชี้เมาส์ที่เมนูจะเห็นชื่อจาก title (ตั้งใน applySidebarCollapsed)
   ใช้เฉพาะจอกว้าง — จอแคบ (<=1024px) เมนูเป็นลิ้นชักเต็มความกว้างเสมอ */
@media (min-width: 1025px) {
.sidebar.sidebar-collapsed {
    width: 72px;
}

.sidebar.sidebar-collapsed .brand-text,
.sidebar.sidebar-collapsed .user-info,
.sidebar.sidebar-collapsed .menu-item > span:not(.menu-badge),
.sidebar.sidebar-collapsed .btn-logout span {
    display: none;
}

.sidebar.sidebar-collapsed .sidebar-brand {
    padding: 16px 8px;
}

.sidebar.sidebar-collapsed .brand-logo-img {
    height: 40px;
}

.sidebar.sidebar-collapsed .sidebar-user {
    padding: 12px 8px;
    justify-content: center;
}

.sidebar.sidebar-collapsed .sidebar-menu {
    padding: 16px 8px;
}

.sidebar.sidebar-collapsed .menu-item {
    justify-content: center;
    padding: 10px 0;
}

.sidebar.sidebar-collapsed .menu-badge {
    position: absolute;
    top: 2px;
    right: 6px;
    margin-left: 0;
    padding: 1px 5px;
    font-size: 12.5px;
}

.sidebar.sidebar-collapsed .sidebar-footer {
    padding: 12px 8px;
}

.sidebar.sidebar-collapsed .btn-logout {
    padding-left: 0;
    padding-right: 0;
}
}

.btn-logout {
    border-color: #fee2e2;
    color: #ef4444;
    background-color: var(--dk-card, #ffffff);
}

.btn-logout:hover {
    background-color: var(--dk-bad-bg, #fef2f2);
    color: #ef4444;
    border-color: #fca5a5;
}

/* Main Panel styling */
.main-panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-y: auto;
}

/* Top Header Bar */
.top-bar {
    height: 70px;
    background-color: transparent; /* ธีมโค้งมน: แถบบนกลืนกับพื้นหลัง ปุ่มไอคอนเป็นวงกลมขาวลอยแทน */
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-title h2 {
    font-size: 20px;
    font-weight: 600;
}

/* ปุ่มแฮมเบอร์เกอร์เปิดเมนูข้าง — โชว์เฉพาะจอแคบ (มือถือ/iPad แนวตั้ง) ดู media query ด้านล่าง */
.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--dk-line, #e2e8f0);
    background-color: var(--dk-card, #ffffff);
    color: var(--navy-dark);
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 12px;
    transition: var(--transition);
}

.mobile-menu-btn:hover {
    background-color: var(--dk-subtle, #f8fafc);
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}

/* พื้นหลังมืดปิดทับเนื้อหาตอนลิ้นชักเมนูเปิดอยู่บนจอแคบ — แตะที่ไหนก็ได้เพื่อปิดเมนู */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.45);
    z-index: 998;
}

.sidebar-overlay.visible {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.topbar-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: var(--dk-card, #ffffff);
    box-shadow: var(--shadow-sm);
    color: var(--navy-light);
    cursor: pointer;
    transition: var(--transition);
}

.topbar-refresh-btn:hover {
    background-color: var(--gold-light);
    color: var(--gold-primary);
}
/* ปุ่มปฏิทินตอนอยู่หน้าปฏิทิน */
.topbar-refresh-btn.is-active { background-color: var(--gold-primary); color: var(--on-primary, #ffffff); }

.topbar-refresh-btn svg {
    width: 20px;
    height: 20px;
}

.topbar-refresh-btn.spinning svg {
    animation: topbar-refresh-spin 0.9s linear infinite;
}

@keyframes topbar-refresh-spin {
    to { transform: rotate(360deg); }
}

.notification-bell {
    position: relative;
    cursor: pointer;
    color: var(--navy-light);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dk-card, #ffffff);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.notification-bell:hover {
    background-color: var(--gold-light);
    color: var(--gold-primary);
}

.notification-bell svg {
    width: 20px;
    height: 20px;
}

/* ตัวเลขแจ้งเตือนบนกระดิ่ง — ใหญ่พอให้อ่านเลข 2-3 หลักได้ (ยืดเป็นแคปซูลตามจำนวนหลัก) */
.bell-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    box-sizing: border-box;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    background-color: var(--danger);
    color: white;
    border-radius: 999px;
    font-size: 13.5px;
    line-height: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--gray-bg);
}

.current-date {
    font-size: 14px;
    color: var(--text-muted);
}

/* Content Body */
.content-body {
    padding: 30px;
    flex-grow: 1;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

.content-section {
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== DASHBOARD VIEW ==================== */
/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stats-card {
    background-color: var(--gray-card);
    border-radius: var(--radius-md);
    padding: 24px;
    border: 1px solid transparent; /* ธีมโค้งมน: ไม่มีขอบ ใช้เงา (การ์ดแจ้งเตือนยังมีขอบแดง) */
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.stats-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: transparent;
    transition: var(--transition);
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stats-card:hover::after {
    background-color: var(--gold-primary);
}

/* แท็บหน้าการเงิน (สรุปการเงิน / ออกบิล / จัดการรายจ่าย / บัญชีธนาคาร) */
[id^="btn-finpage-tab-"] .ico {
    width: 18px;
    height: 18px;
}

/* Dashboard Panels */
.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    gap: 24px;
}

.dashboard-panel {
    background-color: var(--gray-card);
    border-radius: var(--radius-md);
    border: none;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--dk-line, #edf0f5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--dk-card, #ffffff);
}

.panel-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--navy-dark);
}

.panel-content {
    padding: 24px;
    flex-grow: 1;
}

/* Alert Notification List */
.panel-alerts .panel-content {
    max-height: 480px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
    text-align: center;
    font-size: 14px;
}

/* Charts Components (CSS Bars) */
.nationality-chart-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.chart-bar-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bar-info {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    font-weight: 500;
}

.bar-track {
    height: 10px;
    background-color: var(--dk-line, #e2e8f0);
    border-radius: 9999px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 1s ease-out;
}

.bar-fill.myanmar { background-color: var(--gold-primary); }
.bar-fill.cambodia { background-color: var(--navy-light); }
.bar-fill.laos { background-color: #38bdf8; }
.bar-fill.vietnam { background-color: #a855f7; }

/* Locations List */
.customer-locations-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.location-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: var(--gray-bg);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.location-name {
    font-weight: 500;
}

/* ==================== DATA TABLES ==================== */
/* แถบเครื่องมือเหนือตาราง: ช่องค้นหา + ตัวกรอง (dropdown) ชิดกันทางซ้าย, ปุ่มคำสั่งชิดขวา
   (เดิม space-between ทำให้ dropdown ในบางหน้าไปอยู่ไกลจากช่องค้นหา — owner 2026-10-15) */
.table-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 24px;
    gap: 12px 16px;
    flex-wrap: wrap;
}
.table-actions > .btn-add,
.table-actions > .action-buttons-group,
.table-actions > .btn:last-child:not(.renewal-filter-clear) { margin-left: auto; }

/* กลุ่มปุ่มบนแถบเครื่องมือ — ปุ่มไม่ตัดคำแล้ว จอแคบให้ปุ่มขึ้นแถวใหม่แทนการล้นจอ */
.action-buttons-group {
    flex-wrap: wrap;
}
#view-users .action-buttons-group { display: flex; align-items: center; gap: 10px; }

/* ปุ่ม "สร้างบัญชีนายจ้างที่ยังไม่มี" (หน้าจัดการบัญชีผู้ใช้งาน) — ขอบสีหลัก + ตัวเลขจำนวนที่ยังไม่มีบัญชี */
.btn-bulk-client {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    color: var(--gold-primary); border-color: color-mix(in srgb, var(--gold-primary) 45%, transparent);
    background: color-mix(in srgb, var(--gold-primary) 7%, var(--dk-card, #ffffff));
}
.btn-bulk-client:hover { background: color-mix(in srgb, var(--gold-primary) 14%, var(--dk-card, #ffffff)); }
.bulk-client-count {
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700; color: #ffffff; background: var(--gold-primary);
}
.bulk-client-count.hidden { display: none; }

/* ตัวกรองช่วงเวลา หน้าบิล / รายจ่าย / บัญชีธนาคาร (2026-10-27) — finPeriodRange / setFinPeriodSummary ใน app.js */
/* แบบที่ 1 (owner 2026-10-27): แถบปุ่มลัด + "เลือกช่วง" เปิดปฏิทิน 2 เดือน — renderFinRangeUi / openFinRangePicker */
.fin-range { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--dk-subtle, #eceef3); }
.fin-range > .tab-slider { border-radius: 999px; }
.fin-range-chip { position: relative; z-index: 1; border: 0; background: transparent; transition: color .2s ease, transform .18s var(--ios-spring, ease); color: var(--text-dark); font: inherit; font-size: 14px; padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.fin-range-chip:hover:not(.is-on) { opacity: .75; }
.fin-range-chip:active { transform: scale(.94); }
.fin-range-chip.is-on { font-weight: 600; } /* พื้นปุ่มที่เลือก = .tab-slider ที่เลื่อนแบบสปริง */
.fin-range-chip.is-pick { color: var(--gold-primary); font-weight: 600; }
.fin-range-pop {
    position: fixed; z-index: 1200; padding: 14px; border-radius: 20px;
    background: var(--dk-card, #ffffff); color: var(--text-dark);
    box-shadow: 0 12px 40px rgba(20, 30, 60, .2); border: 1px solid var(--dk-line, #e6e8ee);
}
.fin-range-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fin-range-hint { flex: 1; text-align: center; font-size: 13px; color: var(--dk-muted, #64748b); }
.fin-range-nav { width: 34px; height: 34px; border-radius: 999px; border: 0; background: var(--dk-subtle, #eceef3); color: var(--text-dark); font-size: 17px; cursor: pointer; }
.fin-range-months { display: flex; gap: 22px; }
.fin-range-month { width: 238px; }
.fin-range-mtitle { display: block; width: 100%; border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 14.5px; color: var(--text-dark); padding: 4px 0 8px; cursor: pointer; border-radius: 10px; }
.fin-range-mtitle:hover { color: var(--gold-primary); }
.fin-range-dow, .fin-range-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.fin-range-dow { font-size: 12.5px; color: var(--dk-muted, #8a93a5); margin-bottom: 4px; }
.fin-range-day { height: 30px; border: 0; background: transparent; color: var(--text-dark); font: inherit; font-size: 13px; border-radius: 8px; cursor: pointer; }
.fin-range-day:hover { background: color-mix(in srgb, var(--gold-primary) 12%, transparent); }
.fin-range-day.is-in { background: color-mix(in srgb, var(--gold-primary) 14%, transparent); border-radius: 4px; }
.fin-range-day.is-edge { background: var(--gold-primary); color: #fff; font-weight: 700; border-radius: 999px; }
.fin-range-day.is-today:not(.is-edge) { box-shadow: inset 0 0 0 1.5px var(--gold-primary); }
.fin-range-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
/* เอฟเฟค (owner 2026-10-27): ปฏิทินเด้งเปิดแบบสปริง, เดือนเลื่อนเข้า, วันที่กด/เลือกยุบ-เด้ง, ช่วงที่เลือกค่อย ๆ ระบาย */
.fin-range-pop:not(.hidden) { animation: finRangePopIn .32s var(--ios-spring, ease) both; transform-origin: top left; }
@keyframes finRangePopIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.fin-range-months.is-slide-next { animation: finRangeSlideNext .28s cubic-bezier(.32, .72, 0, 1) both; }
.fin-range-months.is-slide-prev { animation: finRangeSlidePrev .28s cubic-bezier(.32, .72, 0, 1) both; }
@keyframes finRangeSlideNext { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes finRangeSlidePrev { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.fin-range-day, .fin-range-mtitle, .fin-range-nav { transition: background-color .18s ease, color .18s ease, transform .18s var(--ios-spring, ease); }
.fin-range-day:active, .fin-range-mtitle:active, .fin-range-nav:active { transform: scale(.88); }
.fin-range-day.is-edge { animation: finRangeEdgePop .3s var(--ios-spring, ease); }
@keyframes finRangeEdgePop { from { transform: scale(.7); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .fin-range-pop:not(.hidden), .fin-range-months, .fin-range-day.is-edge { animation: none !important; }
}
@media (max-width: 620px) { .fin-range-months { flex-direction: column; gap: 10px; } .fin-range { flex-wrap: wrap; border-radius: 18px; } }
.fin-period-summary {
    margin: -8px 0 16px;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--dk-subtle, #eef2f8);
    color: var(--text-dark);
    font-size: 14px;
    line-height: 1.7;
}

/* รายการเดินบัญชี / โอนระหว่างบัญชี / เทียบ statement (2026-10-27) */
.modal-header-actions { display: flex; align-items: center; gap: 10px; }
.bank-card-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ledger-start-row td { background: var(--dk-subtle, #f3f5f9); color: var(--dk-muted, #64748b); }
.ledger-stmt-ok { color: var(--success, #16a34a); }
.stmt-upload { cursor: pointer; }
.stmt-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.stmt-table td:last-child { min-width: 280px; }
.stmt-sysonly { margin: 0 0 14px; font-size: 14px; }
.stmt-sysonly summary { cursor: pointer; color: var(--danger, #dc2626); font-weight: 600; }
.stmt-sysonly ul { margin: 8px 0 0; padding-left: 20px; line-height: 1.8; }
.stmt-rules { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; }
.stmt-rule { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 12px; border-radius: 999px; background: var(--dk-subtle, #eef2f8); }
.stmt-rule button { border: none; background: none; color: var(--dk-muted, #64748b); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; }

.search-filters-group {
    display: flex;
    gap: 16px;
    flex-grow: 1;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    width: 100%;
    max-width: 360px;
}

.search-box svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-box input {
    width: 100%;
    padding: 10px 14px 10px 42px;
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    background-color: var(--dk-card, #ffffff);
    transition: var(--transition);
}

.search-box input:focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.search-suggest-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--dk-card, #ffffff);
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    max-height: 280px;
    overflow-y: auto;
    z-index: 60;
}

.search-suggest-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13.5px;
}

.search-suggest-item:not(:last-child) {
    border-bottom: 1px solid var(--dk-line, #f1f5f9);
}

.search-suggest-item:hover,
.search-suggest-item.active {
    background-color: var(--dk-subtle, #fffdf7);
}

.search-suggest-label {
    color: var(--text-dark, #1e293b);
    font-weight: 500;
}

.search-suggest-sub {
    color: var(--text-muted);
    font-size: 13px;
}

/* ==================== JOB WORKER PICKER (ค้นหา + เลือกคนงานหลายคน แทน <select multiple>) ==================== */
.job-worker-picker {
    border: 1px solid var(--dk-line, #cbd5e1);
    border-radius: var(--radius-sm);
    background-color: var(--dk-card, #ffffff);
    overflow: hidden;
}

.job-worker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 10px 0 10px;
}

.job-worker-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--dk-subtle, #eef2ff);
    color: var(--gold-primary);
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    padding: 4px 6px 4px 12px;
    font-size: 13.5px;
    font-weight: 500;
}

.job-worker-chip button {
    border: none;
    background: none;
    color: var(--gold-primary);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
}

.job-worker-chip button:hover {
    background-color: rgba(30, 59, 139, 0.12);
}

.job-worker-search-input {
    width: 100%;
    border: none !important;
    border-bottom: 1px solid var(--dk-line, #e2e8f0) !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    font-size: 14px;
}

.job-worker-search-input:focus {
    box-shadow: none !important;
}

.job-worker-checklist {
    max-height: 220px;
    overflow-y: auto;
}

.job-worker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: normal;
    cursor: pointer;
    margin: 0;
}

.job-worker-row:not(:last-child) {
    border-bottom: 1px solid var(--dk-line, #f1f5f9);
}

.job-worker-row:hover {
    background-color: var(--dk-subtle, #fffdf7);
}

.job-worker-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.job-worker-row-name {
    color: var(--text-dark);
    flex: 1;
}

.job-worker-row-uid {
    color: var(--text-muted);
    font-size: 13px;
    font-family: monospace;
}

.job-worker-row-nat {
    color: var(--text-muted);
    font-size: 12.5px;
    background-color: var(--dk-subtle, #f1f5f9);
    border-radius: 999px;
    padding: 2px 8px;
}

.job-worker-empty {
    padding: 14px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

.filter-box {
    display: flex;
    gap: 10px;
}

/* หน้าคนงาน (2026-10-27): ตัวกรอง 6 ตัว + ช่องนายจ้าง + ปุ่มล้าง → ขึ้นบรรทัดใหม่เมื่อไม่พอ */
#view-workers .filter-box { flex-wrap: wrap; align-items: center; }
#view-workers .worker-employer-filter { min-width: 220px; flex: 0 1 240px; }
.worker-filter-summary { margin: -6px 0 12px; font-size: 13.5px; color: var(--dk-muted, #64748b); }

.filter-box select {
    padding: 10px 14px;
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: var(--radius-sm);
    background-color: var(--dk-card, #ffffff);
    font-family: inherit;
    font-size: 14px;
    outline: none;
}

/* ตัวกรองแบบเลือกได้หลายค่า (ดู setupMultiFilter ใน app.js) — หน้าตาเดียวกับ .filter-box select */
.multi-filter { position: relative; }
.multi-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 240px;
    padding: 10px 14px;
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: var(--radius-sm);
    background-color: var(--dk-card, #ffffff);
    color: var(--text-dark);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.multi-filter-btn > span { overflow: hidden; text-overflow: ellipsis; }
.multi-filter-btn .ico { width: 14px; height: 14px; flex: 0 0 auto; }
.multi-filter-btn.is-active { border-color: var(--gold-primary); color: var(--gold-primary); font-weight: 600; }
.multi-filter-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 70;
    min-width: 240px;
    max-height: 360px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 12px;
    background: var(--dk-card, #ffffff);
    border: 1px solid var(--dk-line, #e2e8f0);
    box-shadow: var(--shadow-lg);
}
.multi-filter-panel.hidden { display: none; }
.multi-filter-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    white-space: nowrap;
}
.multi-filter-opt:hover { background: var(--dk-subtle, #f1f5f9); }
.multi-filter-opt input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--gold-primary); }
.multi-filter-opt.is-all { border-bottom: 1px solid var(--dk-line, #e2e8f0); border-radius: 8px 8px 0 0; font-weight: 600; }

.table-container {
    background-color: var(--gray-card);
    border-radius: var(--radius-md);
    border: none;
    box-shadow: var(--shadow-sm);
    /* overflow-x: auto (ไม่ใช่ hidden) — จอแคบ/iPad ตารางคอลัมน์เยอะจะเลื่อนดูแนวนอนได้แทนที่จะถูกตัดขอบมองไม่เห็น
       ส่วน overflow-y: hidden ไว้เผื่อคุมมุมโค้ง (border-radius) ของ container เหมือนเดิม */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* แถบเลื่อนแนวนอนลอยท้ายจอ สำหรับตารางกว้างที่ขอบล่างยังอยู่นอกจอ (setupFloatingHScroll ใน app.js) */
.floating-hscroll {
    position: fixed;
    z-index: 3000;
    height: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--dk-card, #ffffff); /* พื้นทึบ ไม่เบลอ — ตารางเลื่อนผ่านใต้แถบ เบลอทำให้ต้องวาดใหม่ทุกเฟรม */
    border-top: 1px solid var(--dk-line, #e2e8f0);
}
.floating-hscroll.hidden { display: none; }
/* แถบเลื่อนทั่วระบบบางแค่ 6px — แถบลอยนี้ทำให้หนาขึ้น จับลากง่าย */
.floating-hscroll::-webkit-scrollbar { height: 14px; }
.floating-hscroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border: 3px solid transparent;
    background-clip: padding-box;
}
.floating-hscroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }
.floating-hscroll-inner { height: 1px; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13.5px;
}

.data-table th {
    background-color: var(--dk-card, #ffffff);
    color: var(--text-muted);
    font-weight: 600;
    padding: 14px 20px;
    border-bottom: 1px solid var(--dk-line, #edf0f5);
    font-size: 13px;
    letter-spacing: -0.01em;
}

.data-table td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--dk-line, #f1f5f9);
    color: var(--text-dark);
    vertical-align: middle;
}

.data-table tbody tr {
    transition: var(--transition);
}

.data-table tbody tr:hover {
    background-color: rgba(45, 79, 163, 0.02);
}

.data-table tbody tr.clickable-row {
    cursor: pointer;
}

.data-table tbody tr.clickable-row:hover {
    background-color: rgba(45, 79, 163, 0.05);
}

.actions-col {
    width: 180px;
    text-align: right;
}

.actions-cell {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

/* คอลัมน์ "จัดการ" แบบปุ่มลอยบนแถว (แบบ Gmail, owner 2026-10-13): บนจอที่ใช้เมาส์ ไม่มีคอลัมน์จัดการในตาราง
   (ได้ที่ว่างคืน) — ชี้เมาส์ที่แถวไหน ปุ่มของแถวนั้นลอยขึ้นมาทับขอบขวาของแถว สไลด์เข้าจากขวา
   ขอบขวา = ขอบที่มองเห็นของกล่องตาราง แม้ตารางกว้างแล้วเลื่อนแนวนอนอยู่ (--row-actions-right ตั้งจาก setupRowActionsOverlay ใน app.js)
   ไม่ใช้กับ: พอร์ทัลนายจ้าง (ปุ่มเปิดแฟ้มเป็นปุ่มหลักของลูกค้า) และตารางราคา (ต้องกดบันทึกหลังพิมพ์ในแถว)
   มือถือ/iPad ไม่มี hover → แสดงคอลัมน์จัดการตามปกติ */
@media (hover: hover) and (pointer: fine) {
    body:not(.is-client-portal) .data-table th.actions-col:not(.prices-table *) { display: none; }
    body:not(.is-client-portal) .data-table tr:has(> td.actions-col):not(.prices-table *) { position: relative; }
    /* แถบปุ่มอยู่ในทุกแถวตลอด (ลอยทับ ไม่กินที่ในตาราง) แต่ซ่อนไว้นอกขอบขวา — ชี้แถวแล้วสไลด์เข้ามาธรรมดา ไม่จาง
       เอาเมาส์ออกก็สไลด์กลับออกไป (owner 2026-10-13 — แบบจาง/display:none ดูกระตุก) */
    body:not(.is-client-portal) .data-table tr > td.actions-col:not(.prices-table *) {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        position: absolute;
        /* แบบ "ไล่สีจางแบบ Gmail" (owner เลือก 2026-10-13): สูงเต็มแถว ไม่มีกรอบ พื้นค่อยๆ จางจากใสไปทึบทางขวา
           ข้อความในแถวถูกกลืนนุ่มๆ ไม่ถูกตัดขาด — ชั้นบน = สีแถวตอนชี้เมาส์, ชั้นล่าง = สีการ์ด (ธีมมืด/ชมพูใช้ --dk-card) */
        top: 0;
        bottom: 1px; /* ไม่ทับเส้นคั่นแถว */
        right: var(--row-actions-right, 0px);
        width: auto;
        padding: 0 16px 0 90px;
        border: none;
        border-radius: 0;
        background:
            linear-gradient(to right, rgba(45, 79, 163, 0), rgba(45, 79, 163, 0.04) 70px),
            linear-gradient(to right, transparent, var(--dk-card, #ffffff) 70px);
        z-index: 5;
        white-space: nowrap;
        /* ส่วนที่จางทะลุคลิกได้ — กดปุ่มในแถวที่อยู่ใต้ส่วนจาง (เช่น "เปิดแฟ้มเอกสาร" ของนายจ้าง/คนงาน) ได้ */
        pointer-events: none;
        visibility: hidden;
        /* สไลด์ธรรมดา ไม่จาง: ตัวช่องอยู่กับที่และตัดขอบ (overflow: hidden) — ปุ่มกับพื้นไล่สีเลื่อนเข้ามาจากขวาภายในช่อง
           (ไม่ translate ตัวช่องเอง เพราะจะทำให้กล่องตารางมีแถบเลื่อนแนวนอนโผล่ทุกตาราง) */
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: 280px 0;
        transition: background-position 0.22s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.22s;
    }
    body:not(.is-client-portal) .data-table tr > td.actions-col:not(.prices-table *) > * {
        transform: translateX(280px);
        transition: transform 0.22s cubic-bezier(0.4, 0, 1, 1);
    }
    /* โผล่เฉพาะตอนเมาส์เลื่อนไปขวาสุดของแถว (แถบที่ปุ่มจะลอยมา) ทุกตารางในระบบ (owner 2026-10-14) — ชี้กลางแถวเฉยๆ ไม่โผล่
       .actions-edge-hover ใส่จาก setupRowActionsOverlay; กด Tab เข้าปุ่มในแถบด้วยคีย์บอร์ดก็โผล่ */
    body:not(.is-client-portal) .data-table tr:is(.actions-edge-hover, :has(> td.actions-col:focus-within)):not(.actions-dodge) > td.actions-col:not(.prices-table *) {
        visibility: visible;
        background-position: 0 0;
        transition: background-position 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
    }
    body:not(.is-client-portal) .data-table tr:is(.actions-edge-hover, :has(> td.actions-col:focus-within)):not(.actions-dodge) > td.actions-col:not(.prices-table *) > * {
        transform: none;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    body:not(.is-client-portal) .data-table tr > td.actions-col:not(.prices-table *) :is(button, a, input, select, .actions-cell) { pointer-events: auto; }
    /* ชี้ปุ่มอื่นในแถวอยู่ (เช่น เปิดแฟ้ม / ป้ายจำนวนคนงาน) → .actions-dodge (ใส่จาก setupRowActionsOverlay)
       แถบปุ่มลอยสไลด์หลบออกไปทางขวา ให้ปุ่มนั้นกดได้เต็มๆ */
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
    body:not(.is-client-portal) .data-table tr > td.actions-col:not(.prices-table *),
    body:not(.is-client-portal) .data-table tr > td.actions-col:not(.prices-table *) > * { transition: none !important; }
}

.action-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--dk-line, #cbd5e1);
    background-color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-muted);
}

.action-icon-btn:hover {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
    background-color: rgba(45, 79, 163, 0.04);
}

.action-icon-btn.delete-btn:hover {
    border-color: var(--danger);
    color: var(--danger);
    background-color: var(--dk-bad-bg, #fef2f2);
}

/* ==================== โมดัลเลือก "กรอกเอง / รอแนบใหม่" ตอน AI อ่านเอกสารไม่สำเร็จ ==================== */
.ai-rejected-backdrop {
    z-index: 1100; /* ต้องอยู่เหนือโมดัลอื่นที่เปิดค้างอยู่ เช่น Bulk Import (1050) ฟอร์มคนงาน/แฟ้มเอกสาร */
}

.ai-rejected-content {
    max-width: 480px;
}

.ai-rejected-file {
    font-weight: 600;
    color: var(--navy-dark);
    word-break: break-all;
    margin-bottom: 6px;
}

.ai-rejected-text {
    color: var(--text-dark);
    margin-bottom: 12px;
    line-height: 1.5;
}

.ai-rejected-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background-color: var(--gray-bg);
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.5;
}

.ai-rejected-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    cursor: pointer;
}

.ai-rejected-footer {
    display: flex;
    gap: 10px;
}

.ai-rejected-footer .btn {
    flex: 1;
}

/* ==================== คอลัมน์ "วันหมดอายุ" ในตารางคนงาน ==================== */
.worker-expiry-cell {
    min-width: 150px;
}

.worker-expiry-line {
    font-size: 13.5px;
    line-height: 1.6;
}

.worker-expiry-line + .worker-expiry-line {
    margin-top: 4px;
}

/* ==================== วางรายชื่อจาก e-WorkPermit ==================== */
.ewp-paste-body { padding-top: 10px; max-height: 70vh; overflow-y: auto; }
.ewp-paste-hint { font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.ewp-paste-text {
    width: 100%;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13.5px;
    resize: vertical;
}
.ewp-paste-table { box-shadow: none; border: 1px solid var(--dk-line, #e2e8f0); }
.ewp-paste-table .data-table { min-width: 100%; font-size: 13px; }
.ewp-paste-table tr.is-existing td { color: var(--text-muted); }

/* ==================== BULK IMPORT: นายจ้างของรอบนี้ (เลือกก่อนแนบไฟล์) ==================== */
.bulk-import-employer-group { margin-bottom: 12px; }
.bulk-import-employer-note { font-weight: normal; font-size: 13px; }
.bulk-import-allow-new { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 12px; cursor: pointer; }
.bulk-import-allow-new .text-muted { font-size: 13px; }
.bulk-split-btn { margin-right: 6px; vertical-align: middle; }

/* ==================== BULK IMPORT: คนงานใหม่ที่จะสร้าง ==================== */
.bulk-new-workers-wrap {
    border: 1px solid var(--gold-border);
    background-color: var(--gold-light);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-bottom: 14px;
}

.bulk-new-workers-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--gold-primary);
    margin-bottom: 10px;
}

.bulk-new-worker-card {
    background-color: var(--dk-card, #fff);
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: var(--radius-sm);
    padding: 10px;
    margin-top: 8px;
}

.bulk-new-worker-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.bulk-new-worker-photo {
    width: 40px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--dk-line, #e2e8f0);
}

.bulk-new-worker-discard {
    margin-left: auto;
    font-size: 12.5px;
    padding: 2px 10px;
}

.bulk-new-worker-fields {
    display: grid;
    grid-template-columns: 110px 1fr 1fr 120px 130px 150px;
    gap: 6px;
}

.bulk-new-worker-fields input,
.bulk-new-worker-fields select {
    font-size: 13.5px;
    padding: 5px 7px;
    border: 1px solid var(--dk-line, #cbd5e1);
    border-radius: var(--radius-sm);
    min-width: 0;
}

.bulk-new-worker-fields .bulk-new-worker-missing {
    border-color: var(--danger);
    background-color: var(--dk-bad-bg, #fef2f2);
}

@media screen and (max-width: 760px) {
    .bulk-new-worker-fields {
        grid-template-columns: 1fr 1fr;
    }
}

/* ช่องที่ต้องกรอกเองหลังเลือก "บันทึกไฟล์ กรอกเอง" (ดู focusManualEntryFields) */
.manual-entry-highlight {
    border-color: var(--warning) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
    background-color: var(--dk-warn-bg, #fffbeb) !important;
    transition: var(--transition);
}

/* ==================== ข้อความขอสลิปโอนเงินในใบวางบิล ==================== */
.invoice-slip-notice {
    font-size: 12px;
    font-weight: 600;
    color: var(--danger);
    margin-top: 8px;
    border-top: 1px dashed var(--dk-line, #e2e8f0);
    padding-top: 5px;
    -webkit-print-color-adjust: exact; /* ให้สีแดงติดตอนพิมพ์ด้วย */
    print-color-adjust: exact;
}

/* ==================== ปุ่มลบรายการในบิลอิสระ ==================== */
.inv-item-desc-cell {
    position: relative;
    padding-right: 34px !important;
}

.inv-item-remove-btn {
    position: absolute;
    top: 8px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--dk-line, #e2e8f0);
    background-color: var(--dk-card, #fff);
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}

.inv-item-remove-btn:hover {
    border-color: var(--danger);
    color: var(--danger);
    background-color: var(--dk-bad-bg, #fef2f2);
}

/* ==================== ช่อง ORDER NO. ในตารางใบงาน ==================== */
.order-no-field {
    display: inline-flex;
    align-items: stretch;
    width: 220px;
    height: 32px;
    border: 1px solid var(--dk-line, #cbd5e1);
    border-radius: 999px; /* ทรงแคปซูล (owner, 2026-10-13 — เดิมเหลี่ยมไป) */
    background-color: var(--dk-card, #fff);
    overflow: hidden;
    transition: var(--transition);
}

.order-no-field:focus-within {
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 3px rgba(45, 79, 163, 0.12);
}

.order-no-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 8px 0 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    background-color: var(--gray-bg);
    border-right: 1px solid var(--dk-line, #e2e8f0);
}

.order-no-field input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 0 8px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-dark);
    background: transparent;
}

.order-no-field input::placeholder {
    color: var(--dk-muted, #94a3b8);
}

.order-no-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    padding-right: 4px;
    border: none;
    background-color: var(--gold-primary);
    color: var(--on-primary, #fff);
    cursor: pointer;
    transition: var(--transition);
}

.order-no-btn:hover {
    background-color: var(--gold-hover);
}

/* โหมดล็อก (บันทึกแล้ว): แสดงเป็นป้ายเลขสีเขียว ปุ่มแก้ไขเป็นแบบเรียบ */
.order-no-field.is-locked {
    border-color: rgba(16, 185, 129, 0.35);
    background-color: var(--dk-ok-bg, #ecfdf5);
}

.order-no-field.is-locked .order-no-prefix {
    color: var(--success);
    background-color: transparent;
    border-right-color: rgba(16, 185, 129, 0.25);
}

.order-no-field.is-locked input {
    color: var(--dk-ok, #047857);
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: default;
    -webkit-text-fill-color: #047857; /* กัน Safari ทำตัวอักษรใน input disabled จาง */
    opacity: 1;
}

.order-no-field.is-locked .order-no-btn {
    background-color: transparent;
    color: var(--text-muted);
}

.order-no-field.is-locked .order-no-btn:hover {
    color: var(--gold-primary);
    background-color: rgba(45, 79, 163, 0.06);
}

/* ==================== MODALS ==================== */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-content {
    background-color: var(--gray-card);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 600px;
    max-height: 94vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    border: none;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* หน้าต่างข้อมูลเยอะ (ฟอร์มนายจ้าง/คนงาน/ใบงาน, นำเข้าเอกสาร, วางรายชื่อ e-WorkPermit) ขยายเต็มจอได้มากขึ้น (owner 2026-10-15)
   ใบแจ้งหนี้/ใบเสร็จ (.modal-sheet) ใช้ขนาดของตัวเองด้านล่าง (กว้างเกือบเต็มจอ ≤ 1640px — อย่าทับ, owner ชอบแบบนั้น) */
.modal-content.large:not(.modal-sheet) {
    max-width: min(1180px, 95vw);
}

.modal-header {
    padding: 20px 28px;
    border-bottom: 1px solid var(--dk-line, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--dk-card, #ffffff);
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy-dark);
}

.close-btn {
    font-size: 24px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.close-btn:hover {
    background-color: var(--dk-subtle, #f1f5f9);
    color: var(--navy-dark);
}

.modal-body {
    padding: 28px;
    overflow-y: auto;
    background-color: var(--dk-card, #ffffff);
}

.modal-footer {
    padding: 20px 28px;
    border-top: 1px solid var(--dk-line, #e2e8f0);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    background-color: var(--dk-subtle, #f8fafc);
}

.form-section-header {
    margin: 24px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--dk-line, #e2e8f0);
}

.form-section-header h4 {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--gold-primary);
}

/* ==================== ยุบ/กางหัวข้อ (setupCollapsibleSections ใน app.js) ==================== */
/* หัวข้อที่กดพับได้: ลูกศรท้ายหัวข้อ (ชี้ลง = กางอยู่, ชี้ขวา = พับอยู่) */
:is(.panel-header:not(.fin-period-bar), .form-section-header, .section-title-bar, .documents-section > h4) {
    cursor: auto; /* กดพับได้เฉพาะที่ลูกศร (::after) — owner 2026-10-20 */
    user-select: none;
}
.form-section-header, .documents-section > h4, .section-title-bar { display: flex; align-items: center; }
:is(.panel-header:not(.fin-period-bar), .form-section-header, .section-title-bar, .documents-section > h4)::after {
    content: '';
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-left: 10px;
    background-color: var(--text-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 4.5 5 8l3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 4.5 5 8l3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
    cursor: pointer;
    transition: transform 0.25s var(--ios-spring, cubic-bezier(0.32, 0.72, 0, 1));
}
.form-section-header::after, .documents-section > h4::after, .section-title-bar::after { margin-left: auto; }
.is-collapsed::after { transform: rotate(-90deg); }
:is(.panel-header, .form-section-header, .section-title-bar, .documents-section > h4):hover::after { background-color: var(--gold-primary); }
.sec-collapsed-away { display: none !important; }
/* การ์ดที่พับแล้วไม่ยืดสูงตามการ์ดข้างๆ ในแถวเดียวกัน */
.has-collapsed-header { height: auto !important; min-height: 0 !important; align-self: start; }
.has-collapsed-header > .panel-header { border-bottom: none; }
.widget:has(.has-collapsed-header) { align-self: start; }

/* ==================== BRANCHES ADDRESS UNIT ==================== */
.branch-card {
    background-color: var(--gray-bg);
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 12px;
    position: relative;
    /* ไม่มีแอนิเมชันเลื่อนลง: การ์ดสาขาถูกวาดใหม่ทุกครั้งที่เลือกจังหวัด/อำเภอ จะกระพริบทุกครั้ง (เจ้าของระบบขอเอาออก 2026-10-02) */
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.branch-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.branch-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy-medium);
}

.btn-remove-branch {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
    font-weight: 500;
}

.btn-remove-branch:hover {
    text-decoration: underline;
}

/* ==================== DRAG AND DROP DOCUMENT BOXES ==================== */
.documents-section {
    margin-top: 24px;
}

.documents-section h4 {
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 4px;
}

.section-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.doc-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.upload-box {
    border: 2px dashed var(--dk-line, #cbd5e1);
    background-color: var(--gray-bg);
    border-radius: var(--radius-sm);
    padding: 20px 14px;
    text-align: center;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 140px;
    transition: var(--transition);
    overflow: hidden;
}

.upload-box:hover,
.upload-box.dragover {
    border-color: var(--navy-light);
    background-color: rgba(48, 71, 94, 0.03);
}

.upload-box.highlight-box {
    border-color: var(--gold-primary);
    background-color: rgba(212, 175, 55, 0.02);
}

.upload-box.highlight-box:hover,
.upload-box.highlight-box.dragover {
    border-color: var(--gold-hover);
    background-color: rgba(212, 175, 55, 0.08);
}

.upload-box.success-upload {
    border-style: solid;
    border-color: var(--success);
    background-color: rgba(16, 185, 129, 0.02);
}

/* ครอบเฉพาะโซนไอคอน/คำอธิบายด้านบน (ไม่ครอบทั้งกล่อง) เพื่อไม่ให้ input[type=file] แบบล่องหนบัง
   คลิกไฟล์ที่แนบไปแล้ว/ปุ่มลบไฟล์ใน .ocr-status ด้านล่าง ซึ่งเดิม .file-input (position:absolute; 100%x100%)
   ครอบทับทั้ง .upload-box ทำให้คลิกอะไรในกล่องก็โดน input ดักไว้หมด กดดู/ลบไฟล์ที่แนบไม่ได้เลย */
.upload-box-trigger {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-icon {
    font-size: 28px;
    line-height: 1;
}

.upload-icon .ico {
    width: 34px;
    height: 34px;
}

/* ==================== ไอคอนสองโทน (ดู icon()/hydrateIcons() ใน app.js) ====================
   ขนาดตั้งต้น = ตามตัวหนังสือรอบข้าง (1.15em) — ใส่ในปุ่ม/ป้าย/ข้อความได้เลย
   สีมาจาก class ico-<สี> → ตัวแปร --ic ใช้ทั้งเส้น และสีอ่อนเติมด้านใน (.fl) */
.ico {
    --ic: var(--gold-primary);
    display: inline-flex;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    color: var(--ic);
    flex-shrink: 0;
}

.ico svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ico svg .fl {
    fill: color-mix(in srgb, var(--ic) 20%, transparent);
}

.ico-blue   { --ic: #2d6fd6; }
.ico-indigo { --ic: #5b5bd6; }
.ico-amber  { --ic: #c27c0e; }
.ico-pink   { --ic: #d6407f; }
.ico-green  { --ic: #1f9254; }
.ico-red    { --ic: #d13b3b; }
.ico-teal   { --ic: #0f8a83; }
.ico-violet { --ic: #7c4fd6; }
.ico-slate  { --ic: #5f6b80; }

/* ไอคอนเดี่ยว ๆ ในช่องตาราง (เช่น ✓/✗ เอกสารครบ/ขาด) ให้ใหญ่พอมองเห็นชัด */
td > .ico {
    width: 20px;
    height: 20px;
}

/* ในปุ่มสีทึบ (เช่น btn-danger ตอน hover) ให้ไอคอนเป็นสีเดียวกับตัวหนังสือ */
.btn .ico { --ic: currentColor; }

.doc-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy-dark);
}

.upload-hint {
    font-size: 12.5px;
    color: var(--text-muted);
}

/* AI OCR loader and output styles */
.ocr-status {
    width: 100%;
    font-size: 12.5px;
    font-weight: 500;
    text-align: center;
    min-height: 16px;
}

.ai-processing {
    color: var(--gold-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
}

.ai-processing::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid var(--gold-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.ai-success {
    color: var(--success);
    font-weight: 600;
}

@keyframes toastPop {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ==================== BANK ACCOUNT CARDS ==================== */
.bank-accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.bank-card {
    background-color: var(--dk-card, #ffffff);
    border-radius: var(--radius-md);
    border: 1px solid var(--dk-line, #e2e8f0);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
    position: relative;
    border-top: 4px solid var(--gold-primary);
    transition: var(--transition);
}

.bank-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-top-color: var(--gold-hover);
}

.bank-card-info h4 {
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--navy-dark);
}

.bank-card-acc-no {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--navy-medium);
    margin: 10px 0;
}

.bank-card-meta {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bank-card-actions {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 6px;
}

/* ที่จับลากสลับลำดับบัญชี (SortableJS) — แถบจุดกลางขอบบนการ์ด ไม่ทับโลโก้ (ซ้าย) และปุ่มแก้/ลบ (ขวา) */
.bank-drag-handle {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 22px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: grab;
    touch-action: none; /* นิ้วแตะที่จับ = ลาก ไม่ใช่เลื่อนหน้าจอ */
}

.bank-drag-handle:hover {
    background-color: var(--gold-light);
    color: var(--gold-primary);
}

.bank-drag-handle .ico {
    width: 18px;
    height: 18px;
    transform: rotate(90deg);
}

.bank-card-chosen .bank-drag-handle { cursor: grabbing; }

.bank-card-ghost {
    opacity: 0.4;
    outline: 2px dashed var(--gold-primary);
    outline-offset: -2px;
}

/* ==================== INVOICE STYLING ==================== */
.invoice-selector-bar {
    background-color: var(--gray-bg);
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* หน้าต่าง "รวมใบสั่งงานออกบิลชุด" — กว้างและสูงพอเห็นใบงานหลายใบพร้อมกัน */
.modal-content.combine-bills-content {
    max-width: 960px;
    width: 95%;
}
.combine-jobs-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.combine-jobs-head label { margin-bottom: 6px; }
.combine-select-all {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 500;
    color: var(--gold-primary);
}
.combine-select-all.hidden { display: none; }
.combine-select-all input { width: 16px; height: 16px; cursor: pointer; }
.combine-jobs-list {
    max-height: 55vh;
    overflow-y: auto;
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: var(--radius-sm);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--dk-subtle, #f8fafc);
}

/* หน้าสำรองข้อมูล: กล่อง "สำรองอัตโนมัติลง Google Drive" */
.drive-backup-card {
    background-color: var(--dk-subtle, #f8fafc);
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: var(--radius-sm);
    padding: 20px;
}
.drive-backup-card h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 8px; color: var(--navy-dark); display: flex; align-items: center; gap: 6px; }
.drive-backup-card p { font-size: 13px; color: var(--text-muted); margin-bottom: 15px; line-height: 1.5; }

/* ฟอร์มนายจ้าง: ช่องติ๊กแชร์โฟลเดอร์ Google Drive */
.cust-drive-share-group { display: flex; align-items: flex-end; }
.cust-drive-share-label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; margin-bottom: 10px; }
.cust-drive-share-label input { width: 16px; height: 16px; cursor: pointer; }

/* แนบเอกสารปิดงานไว้ก่อน: ธง 📎 ในตารางใบงาน + รายการไฟล์ที่แนบไว้แล้วในหน้าต่างปิดงาน */
.job-predocs-flag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
    padding: 1px 6px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 999px;
    background: var(--dk-ok-bg, #ecfdf5);
    color: var(--success);
}
.job-predocs-flag .ico { width: 12px; height: 12px; }
.job-close-existing {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: var(--radius-sm);
    background: var(--dk-ok-bg, #ecfdf5);
    border: 1px solid var(--dk-line, #bbf7d0);
    color: var(--text-dark);
}
.job-close-existing.hidden { display: none; }
.job-close-existing-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.job-close-existing-row a { min-width: 0; overflow-wrap: anywhere; }

/* ป้ายใบงาน: dropdown ใต้ช่องหมายเหตุ (สีพื้นตามป้ายที่เลือก) + หน้าต่างจัดการป้าย */
.job-tag-select {
    display: block;
    width: 100%;
    max-width: 180px;
    margin-top: 6px;
    padding: 3px 8px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px dashed var(--dk-line, #cbd5e1);
    background: var(--dk-card, #ffffff);
    color: var(--text-muted);
    cursor: pointer;
}
.job-tag-select.has-tag { border-style: solid; }
.job-tag-pill {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 10px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
}
.modal-content.job-tag-content { max-width: 760px; width: 95%; }
.job-tag-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 14px; }
.job-tag-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* ช่องชื่อป้ายใช้หน้าตาช่องกรอกมาตรฐาน (.form-group input) — แค่ตัด margin ล่างให้อยู่แถวเดียวกับสี */
.job-tag-row .form-group.job-tag-name { flex: 1 1 200px; min-width: 160px; margin-bottom: 0; }
.job-tag-preview {
    flex: 0 0 auto;
    min-width: 90px;
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    border-radius: 999px;
    border: 1px solid transparent;
}
.job-tag-swatches { display: flex; gap: 5px; flex-wrap: wrap; }
.job-tag-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}
.job-tag-swatch.is-active { border-color: var(--text-dark); box-shadow: 0 0 0 2px var(--dk-card, #ffffff) inset; }

/* pop-up "รับเงิน / มัดจำ" — เกือบเต็มจอ เห็นรายการบิลค้าง/ช่องกรอกครบโดยไม่ต้องเลื่อนมาก */
.modal-content.receive-money-content { max-width: 1280px; width: 96vw; height: 92vh; max-height: 92vh; }
.receive-money-content .modal-body { flex: 1; }

/* pop-up "เพิ่มงานเข้าชุดเดิม" */
/* เกือบเต็มจอ — เห็นชื่อคนงาน/เลขใบงาน/นายจ้าง และแท็บงานในชุดครบ */
.modal-content.add-batch-content { max-width: 1280px; width: 96vw; height: 92vh; max-height: 92vh; }
.add-batch-content .modal-body { flex: 1; }
/* รายการค้นหาแสดงต่อในหน้าต่างเลย (ไม่ลอยทับ) — เดิมลอยอยู่ในกล่องที่เลื่อนได้ เลยถูกตัดจนเห็นแค่ไม่กี่แถว */
.add-batch-content .search-suggest-dropdown {
    position: static;
    max-height: 55vh;
    margin-top: 6px;
    box-shadow: none;
}
.add-batch-content .search-suggest-item { white-space: normal; }
.add-batch-detail { margin-top: 4px; }
.add-batch-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: var(--radius-sm);
    background: var(--dk-subtle, #f8fafc);
}
.add-batch-card > div { display: flex; gap: 12px; align-items: baseline; }
.add-batch-card > div > span { flex: 0 0 120px; color: var(--text-muted); font-size: 13px; }
.add-batch-card > div > b { font-weight: 600; color: var(--text-dark); }
.add-batch-types-label { display: block; font-weight: 600; margin: 4px 0 8px; }
.add-batch-types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: var(--radius-sm);
    background: var(--dk-subtle, #f8fafc);
}
.add-batch-type { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: normal; cursor: pointer; }
.add-batch-type input { width: 16px; height: 16px; cursor: pointer; }
.add-batch-blocked { display: block; margin-top: 8px; }

/* ตารางแจ้งงาน: ประเภทงานตัวใหญ่ขึ้น (เจ้าของระบบขอ 2026-10-08) */
.badge.job-type-badge { font-size: 15.5px; padding: 6px 14px; line-height: 1.35; white-space: normal; }
/* หัวข้องานในตารางแจ้งงาน: พื้นกรมท่าอ่อน ตัวทองคลาสสิก (เจ้าของระบบเลือก 2026-10-09) — รูปทรงเดิม เปลี่ยนแค่สี */
.badge.badge-gold.job-type-badge {
    background-color: var(--jt-bg, #2d4fa3);
    color: var(--jt-fg, #f2cf63);
    border-color: var(--jt-bg, #2d4fa3);
}

/* ตารางแจ้งงาน: แท็บงานอื่นในชุดเดียวกัน (กดเปิดใบงานนั้น) */
.job-batch-tab {
    font: inherit;
    font-size: 12.5px;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid var(--dk-line, #e2e8f0);
    background: var(--dk-subtle, #f1f5f9);
    color: var(--dk-muted, #475569);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.job-batch-tab:hover { border-color: var(--gold-primary); color: var(--gold-primary); }
.job-batch-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

/* หน้าต่างใบวางบิล: ปุ่มพิมพ์ / คัดลอกเป็นรูป / คัดลอกลิงก์ */
.invoice-send-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }

/* แท็บรูปแบบใบวางบิล: แบบรวม / แบบรายคน */
.invoice-layout-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: -8px 0 16px;
}

/* ==================== ใบวางบิล / ใบแจ้งหนี้ / ใบเสร็จ (ออกแบบใหม่ 2026-10: โค้งมน + โลโก้ NKT Service) ====================
   ใช้ร่วมกันทั้ง #invoice-sheet-container (บิล) และ #receipt-sheet (ใบเสร็จ) — ดู ACCOUNTING MODULE ใน app.js */
/* บนจอแสดงเป็นแผ่น A4 (210 × 297 มม.) — ตอนพิมพ์ใช้ @page A4 ขอบ 10 มม. (INVOICE_PAGE_CSS ใน app.js)
   เนื้อหาออกแบบให้พอดี 1 หน้า A4 สำหรับบิลทั่วไป (ไม่เกิน ~8 รายการ) */
.invoice-sheet {
    position: relative;
    box-sizing: border-box;
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    background-color: var(--dk-card, #ffffff);
    border-radius: 18px;
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(45, 79, 163, 0.08);
    padding: 14mm 14mm 12mm;
    color: var(--dk-head, #1e293b);
    margin: 0 auto;
    overflow: hidden;
    font-size: 13px;
}

/* หน้าต่างพรีวิวใบแจ้งหนี้/ใบเสร็จ — กว้างเกือบเต็มจอ และขยายกระดาษ A4 บนจอให้อ่านง่าย
   (ขยายเฉพาะบนจอด้วย zoom — ตอนพิมพ์ยังเป็น A4 ขนาดจริง) */
.modal-content.modal-sheet {
    max-width: min(1640px, 97vw);
    max-height: 94vh;
}

/* บนจอมีคอลัมน์ "ค่าธรรมเนียมรัฐ" (no-print, 24มม.) + ปุ่มลบรายการ เพิ่มเข้ามา ทำให้คอลัมน์ "รายการ" แคบกว่าตอนพิมพ์
   จนรายชื่อคนงานตัดเป็น 2 บรรทัด — ขยายกระดาษบนจอเท่าคอลัมน์ที่เพิ่ม ให้คอลัมน์รายการกว้างเท่าตอนพิมพ์ A4 จริง */
@media screen {
    .modal-sheet #invoice-sheet-container { width: 245mm; }
}

@media screen and (min-width: 1280px) {
    .modal-sheet .invoice-sheet { zoom: 1.2; }
}

@media screen and (min-width: 1600px) {
    .modal-sheet .invoice-sheet { zoom: 1.35; }
}

.invoice-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--dk-line, #e6eaf2);
}

.invoice-brand {
    display: flex;
    gap: 16px;
    align-items: center;
    min-width: 0;
}

.invoice-logo-img {
    height: 72px;
    width: auto;
    flex-shrink: 0;
}

/* ใบเสร็จใช้หัวผู้ออกบิลชุดเดียวกับบิล แต่ขยายโลโก้ให้ใหญ่ขึ้นเล็กน้อย */
.receipt-sheet .invoice-logo-img {
    height: 86px;
}

.invoice-brand h2 {
    font-family: var(--font-head);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--navy-dark);
    margin-bottom: 4px;
}

.invoice-brand p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.invoice-meta-title {
    text-align: right;
    flex-shrink: 0;
}

.invoice-meta-title h1 {
    font-family: var(--font-head);
    font-size: 21px;
    font-weight: 600;
    color: var(--gold-primary);
    line-height: 1.2;
}

.invoice-meta-sub {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.invoice-meta-box {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 4px 14px;
    padding: 8px 12px;
    background-color: var(--dk-subtle, #f3f6fc);
    border-radius: 14px;
    font-size: 12px;
    text-align: left;
}

.invoice-meta-box > div {
    display: contents;
}

.invoice-meta-box span {
    color: var(--text-muted);
}

.invoice-meta-box strong {
    color: var(--navy-dark);
    font-variant-numeric: tabular-nums;
}

/* ตราประทับ "ชำระเงินครบแล้ว" / "ยกเลิก" — พิมพ์ติดไปด้วย */
.invoice-stamp {
    position: absolute;
    top: 218px;
    right: 48px;
    transform: rotate(-12deg);
    padding: 6px 18px;
    border: 3px solid currentColor;
    border-radius: 12px;
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.85;
    pointer-events: none;
}

.invoice-stamp.is-paid { color: #1f9254; }
.invoice-stamp.is-void { color: #d13b3b; }

.invoice-hr {
    display: none;
}

.invoice-addresses-row {
    margin-bottom: 14px;
    padding: 10px 14px;
    background-color: var(--dk-subtle, #f8fafd);
    border-radius: 16px;
    border: 1px solid var(--dk-line, #edf1f7);
}

.inv-addr-block h5 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.inv-addr-block p {
    font-size: 13px;
    line-height: 1.45;
}

.inv-editable {
    outline: none;
    border-bottom: 1px dashed transparent;
}

/* คำแนะนำในช่องที่ยังว่าง (เช่น "คลิกเพื่อพิมพ์") — แสดงเฉพาะบนจอ เป็นแค่ CSS จึงไม่ถูกบันทึกลงบิล และซ่อนตอนพิมพ์ */
.invoice-sheet [data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: #a3afc4;
    font-weight: 400;
    font-style: italic;
}

@media print {
    .invoice-sheet [data-placeholder]:empty::before {
        content: none;
    }
}

[contenteditable="true"].inv-editable:hover,
.invoice-sheet [contenteditable="true"]:hover {
    border-bottom-color: #a9b8d6;
}

/* ตารางรายการ — ขอบมนด้วย border-separate */
.invoice-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 14px;
    font-size: 13px;
    border: 1px solid var(--dk-line, #dfe5ef);
    border-radius: 16px;
    overflow: hidden;
}

.invoice-table th {
    background-color: var(--gold-primary);
    color: #ffffff;
    font-weight: 600;
    padding: 9px 10px;
    text-align: left;
}

.invoice-table td {
    padding: 8px 10px;
    border-top: 1px solid var(--dk-line, #edf1f7);
    vertical-align: top;
}

/* ความกว้างคอลัมน์ (มม.) ให้คอลัมน์ "รายการ" ได้พื้นที่มากที่สุดบน A4 */
.invoice-table .inv-col-no { width: 12mm; text-align: center; }
.invoice-table .inv-col-qty { width: 15mm; text-align: center; }
.invoice-table .inv-col-money { width: 27mm; text-align: right; white-space: nowrap; }

.invoice-table tbody tr:nth-child(even) td {
    background-color: var(--dk-subtle, #fafbfe);
}

.inv-item-title {
    font-weight: 600;
    color: var(--navy-dark);
    line-height: 1.35;
}

/* บิลแบบรายคน: ยอดของแต่ละรายการตัวเล็กใต้ชื่อคนงาน (buildInvoicePerWorkerRows, owner 2026-10-27) */
.inv-item-breakdown { margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: #6b7280; max-width: 420px; }
.inv-item-breakdown > div { display: flex; justify-content: space-between; gap: 16px; }
.inv-item-breakdown > div > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

.inv-item-desc {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: pre-line;
}

.inv-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.inv-amount {
    font-weight: 600;
}

/* ช่องราคาที่แก้ได้ (เฉพาะร่าง/บิลที่ยังไม่รับเงิน) */
.inv-price-cell {
    outline: none;
    background-color: var(--dk-subtle, #f3f6fc);
    box-shadow: inset 0 0 0 1px rgba(45, 79, 163, 0.25);
    cursor: text;
}

.inv-price-cell:focus {
    box-shadow: inset 0 0 0 2px var(--gold-primary);
    background-color: var(--dk-card, #ffffff);
}

/* ปุ่ม "เลือกคนงาน" ใต้รายการในบิลอิสระ (no-print) */
.inv-item-workers-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px dashed #9db0d8;
    border-radius: 999px;
    background-color: var(--dk-subtle, #f3f6fc);
    color: var(--gold-primary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.inv-item-workers-btn:hover {
    background-color: var(--dk-subtle, #eaf0fb);
    border-style: solid;
}

.item-workers-count {
    margin-right: auto;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gold-primary);
}

/* คอลัมน์ค่าธรรมเนียมรัฐ (ภายใน, no-print) */
.invoice-table th.inv-gov-col {
    background-color: #0f766e;
    text-align: right;
    font-size: 12px;
    width: 24mm;
    white-space: nowrap;
    line-height: 1.3;
}

.invoice-table th.inv-gov-col small {
    font-weight: 500;
    opacity: 0.85;
}

.invoice-table td.inv-gov-col {
    background-color: var(--dk-subtle, #f0f8f7) !important;
    text-align: right;
    color: color-mix(in srgb, #0d9488 70%, var(--text-dark));
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.inv-gov-input {
    width: 100%;
    max-width: 110px;
    padding: 6px 8px;
    border: 1px solid #b7dcd8;
    border-radius: 8px;
    text-align: right;
    font-family: inherit;
    font-size: 13.5px;
    color: color-mix(in srgb, #0d9488 70%, var(--text-dark));
    background-color: var(--dk-card, #ffffff);
}

.inv-gov-input:focus {
    outline: none;
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.inv-summary-row td {
    border-top: none;
    padding: 4px 10px;
    background-color: transparent !important;
}

.inv-summary-row:first-child td {
    border-top: 1px solid var(--dk-line, #dfe5ef);
    padding-top: 8px;
}

.inv-summary-row .sum-label {
    text-align: right;
    font-weight: 500;
    color: var(--text-muted);
}

.inv-summary-row .sum-value {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.inv-summary-row.grand-total td {
    padding: 9px 10px;
    background-color: var(--dk-subtle, #eef2fb) !important;
}

.inv-summary-row.grand-total .sum-label {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy-dark);
}

.inv-summary-row.grand-total .sum-value {
    font-size: 17px;
    font-weight: 700;
    color: var(--gold-primary);
}

.inv-paid-row .sum-value { color: #1f9254; }
.inv-balance-row .sum-label,
.inv-balance-row .sum-value { color: #d13b3b; font-weight: 700; }

.inv-words-row td {
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-dark);
    padding: 6px 10px 8px;
    background-color: transparent !important;
    border-top: 1px dashed var(--dk-line, #dfe5ef);
}

.invoice-payment-section {
    margin-top: 6px;
}

/* การ์ดบัญชีอยู่ซ้าย ข้อความ "กรุณาส่งสลิป" อยู่ขวา — ประหยัดความสูงให้พอดี A4 */
.payment-bank-details {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 16px;
}

.payment-bank-details h5 {
    grid-column: 1 / -1;
}

.payment-bank-details .invoice-slip-notice {
    margin: 0;
    border-top: none;
    padding: 0;
    line-height: 1.45;
}

.invoice-payment-section.hidden {
    display: none;
}

.payment-bank-details h5 {
    font-size: 13px;
    color: var(--navy-dark);
    margin-bottom: 8px;
    font-weight: 600;
}

.bank-info-card {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 320px;
    background-color: var(--dk-subtle, #f3f6fc);
    border-radius: 16px;
    padding: 9px 14px;
    font-size: 13px;
    line-height: 1.45;
}

.invoice-notes-row {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--text-muted);
    border-top: 1px dashed var(--dk-line, #dfe5ef);
    padding-top: 6px;
}

.invoice-signature-row {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 22px;
}

.invoice-signature-block {
    flex: 1;
    text-align: center;
    font-size: 12.5px;
    color: var(--navy-dark);
}

.invoice-signature-block .signature-line {
    border-bottom: 1px dashed #94a3b8;
    height: 34px;
    margin-bottom: 10px;
}

.invoice-signature-block p {
    margin: 2px 0;
}

.invoice-signature-block .signature-date {
    color: var(--text-muted);
    font-size: 11.5px;
}

/* ใบเสร็จ: ช่องทางชำระ */
.receipt-method {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    padding: 12px 16px;
    background-color: var(--dk-ok-bg, #e5f5ed);
    border-radius: 14px;
    font-size: 14px;
    color: #14532d;
}

.receipt-method span {
    color: #3f6b52;
}

.receipt-note {
    flex-basis: 100%;
    font-size: 13px;
}

/* ===== ส่วนภายในหน้าต่างบิล (no-print) ===== */
.invoice-internal-split {
    max-width: 210mm;
    margin: 16px auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.invoice-internal-split:empty {
    display: none;
}

.split-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 13.5px;
}

.split-item strong {
    font-family: var(--font-head);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

.split-gov { background-color: var(--dk-ok-bg, #e0f2ef); color: #0f766e; }
.split-service { background-color: var(--dk-subtle, #eaf0fb); color: var(--gold-primary); }

.split-note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 13.5px;
    color: var(--text-muted);
}

.invoice-payments-panel {
    max-width: 210mm;
    margin: 18px auto 0;
    padding: 20px 22px;
    background-color: var(--dk-card, #ffffff);
    border-radius: 20px;
    box-shadow: var(--shadow-sm), 0 0 0 1px rgba(45, 79, 163, 0.08);
}

.pay-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.pay-summary > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border-radius: 14px;
    background-color: var(--dk-subtle, #f3f6fc);
}

.pay-summary span {
    font-size: 13.5px;
    color: var(--text-muted);
}

.pay-summary strong {
    font-family: var(--font-head);
    font-size: 19px;
    font-variant-numeric: tabular-nums;
    color: var(--navy-dark);
}

.pay-summary .is-paid { background-color: var(--dk-ok-bg, #e5f5ed); }
.pay-summary .is-paid strong { color: #1f9254; }
.pay-summary .is-due { background-color: var(--dk-bad-bg, #fde8e8); }
.pay-summary .is-due strong { color: #d13b3b; }
.pay-summary .is-done { background-color: var(--dk-ok-bg, #e5f5ed); }
.pay-summary .is-done strong { color: #1f9254; }

.pay-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy-dark);
    margin: 4px 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pay-table-wrap {
    box-shadow: none;
    border: 1px solid var(--dk-line, #edf1f7);
    margin-bottom: 14px;
}

.pay-table td,
.pay-table th {
    padding: 10px 12px;
}

.pay-table tr.is-voided td {
    color: var(--text-muted);
    text-decoration: line-through;
}

.pay-table tr.is-voided td small {
    text-decoration: none;
    display: inline-block;
}

.pay-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    white-space: nowrap;
}

.pay-empty {
    margin: 0 0 14px;
    font-size: 13.5px;
}

.pay-form {
    padding: 16px;
    background-color: var(--dk-subtle, #f8fafd);
    border-radius: 16px;
    border: 1px dashed var(--dk-line, #c9d3e3);
}

.pay-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr 1.4fr;
    gap: 12px;
}

.pay-form-grid .form-group {
    margin-bottom: 0;
}

.pay-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 13px;
}

/* มัดจำ/เครดิตของนายจ้างในแผงรับเงินของบิล */
.pay-credit-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 12px 16px;
    border-radius: 14px;
    background-color: var(--dk-ok-bg, #e5f5ed);
    color: var(--dk-ok, #1f6b45);
    font-size: 14px;
}

.pay-credit-box small {
    display: block;
    margin-top: 2px;
}

.pay-multi-btn {
    margin-left: auto;
    font-weight: normal;
}

/* หน้าต่าง "รับเงิน / มัดจำ" */
.receive-list-label {
    display: block;
    margin: 4px 0 8px;
    font-weight: 600;
}

.receive-credit-note {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background-color: var(--dk-ok-bg, #e5f5ed);
    color: var(--dk-ok, #1f6b45);
    font-size: 13.5px;
}

.receive-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.receive-summary > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 12px;
    background-color: var(--dk-subtle, #f3f6fc);
}

.receive-summary span {
    font-size: 13.5px;
    color: var(--text-muted);
}

.receive-summary strong {
    font-family: var(--font-head);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    color: var(--navy-dark);
}

.receive-summary .is-deposit { background-color: var(--dk-warn-bg, #fff6e0); }
.receive-summary .is-deposit strong { color: #b7791f; }

.receive-summary > .receive-summary-error {
    grid-column: 1 / -1;
    display: block;
    background-color: var(--dk-bad-bg, #fde8e8);
    color: var(--dk-bad, #d13b3b);
    font-size: 13.5px;
}

/* แผงมัดจำคงค้างบนแท็บออกบิล */
.billing-credit-panel {
    margin-bottom: 18px;
    padding: 16px 18px;
    background-color: var(--gray-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 720px) {
    .receive-summary { grid-template-columns: minmax(0, 1fr); }
    .pay-multi-btn { margin-left: 0; }
}

.invoice-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.invoice-footer-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-muted);
}

.invoice-footer-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.btn-gold-outline {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}

.btn-danger-outline {
    border-color: #f3b4b4;
    color: var(--dk-bad, #d13b3b);
}

.btn-danger-outline:hover {
    background-color: var(--dk-bad-bg, #fde8e8);
    border-color: #d13b3b;
    color: var(--dk-bad, #b42323);
}

tr.is-voided-row td {
    opacity: 0.6;
}

/* เฉพาะบนจอ (screen) — หน้ากระดาษ A4 ตอนพิมพ์กว้าง ~718px ถ้าไม่ระบุ screen กฎนี้จะทำให้หัวบิลเรียงลงตอนพิมพ์ */
@media screen and (max-width: 720px) {
    .invoice-sheet { padding: 28px 18px 22px; }
    .invoice-sheet-header { flex-direction: column; }
    .invoice-meta-title { text-align: left; }
    .invoice-stamp { top: 210px; right: 18px; font-size: 16px; }
    .invoice-internal-split, .pay-summary { grid-template-columns: minmax(0, 1fr); }
    .pay-form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bank-info-card { min-width: 0; }
}

/* ==================== ระบบบัญชี: หน้าสรุปการเงิน / ลูกหนี้ / ยอดคงเหลือ / ค่าคอม / ราคามาตรฐาน ==================== */
.finance-export-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 16px 18px;
    background-color: var(--dk-card, #ffffff);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    font-size: 13.5px;
    color: var(--text-muted);
}

.finance-export-bar > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
}

.finance-internal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.fin-tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    border-radius: 16px;
    min-width: 0;
}

.fin-tile span {
    font-size: 13px;
    font-weight: 600;
}

.fin-tile strong {
    font-family: var(--font-head);
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.fin-tile small {
    font-size: 13px;
    opacity: 0.85;
}

.tile-service { background-color: var(--dk-subtle, #eaf0fb); color: var(--gold-primary); }
.tile-gov     { background-color: var(--dk-ok-bg, #e0f2ef); color: #0f766e; }
.tile-govpaid { background-color: #f1f4f9; color: var(--navy-dark); }
.tile-warn    { background-color: var(--dk-warn-bg, #fff3dd); color: #a15c00; }
.tile-ok      { background-color: var(--dk-ok-bg, #e5f5ed); color: #1f9254; }

.aging-table td,
.aging-table th {
    padding: 11px 16px;
}

.aging-critical {
    font-weight: 700;
}

.aging-total-row td {
    font-weight: 700;
    background-color: var(--dk-subtle, #f3f6fc);
    border-top: 2px solid var(--dk-line, #dfe5ef);
}

/* ยอดคงเหลือในการ์ดบัญชีธนาคาร */
.bank-balance {
    margin: 12px 0 10px;
    padding: 12px 14px;
    background-color: var(--dk-subtle, #f3f6fc);
    border-radius: 14px;
}

.bank-balance-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.bank-balance-main span {
    font-size: 13px;
    color: var(--text-muted);
}

.bank-balance-main strong {
    font-family: var(--font-head);
    font-size: 22px;
    color: var(--navy-dark);
    font-variant-numeric: tabular-nums;
}

.bank-balance-rows {
    display: grid;
    gap: 3px;
    font-size: 13px;
}

.bank-balance-rows > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.bank-balance-rows span { color: var(--text-muted); }
.bank-balance-rows b { font-variant-numeric: tabular-nums; }
.bank-balance-rows .is-in b { color: #1f9254; }
.bank-balance-rows .is-out b { color: #d13b3b; }

.cash-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--dk-ok-bg, #e5f5ed);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cash-badge .ico {
    width: 18px;
    height: 18px;
}

/* หน้าต่างจ่ายค่าคอม Agent */
.commission-job-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.commission-job-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--dk-line, #e3e8ef);
    border-radius: 12px;
    cursor: pointer;
    font-weight: normal;
}

.commission-job-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.commission-job-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
}

.commission-job-info small {
    color: var(--text-muted);
    font-size: 13px;
}

.commission-amount-input {
    width: 110px;
    padding: 6px 8px;
    border: 1px solid var(--dk-line, #d5dce8);
    border-radius: 8px;
    text-align: right;
    font-family: inherit;
}

.commission-total-row {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    color: var(--text-muted);
}

.commission-total-row strong {
    font-family: var(--font-head);
    font-size: 22px;
    color: var(--gold-primary);
}

/* ตารางราคามาตรฐาน */
.price-input {
    width: 130px;
    padding: 7px 10px;
    border: 1px solid var(--dk-line, #d5dce8);
    border-radius: 10px;
    text-align: right;
    font-family: inherit;
    font-size: 14px;
}

/* ต้นทุนต่องาน (แถวย่อยใต้ประเภทงาน) */
.price-cost-toggle.is-open {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}

.price-cost-row > td {
    background-color: var(--dk-subtle, #f8fafd);
}

.price-cost-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 4px 6px;
}

.price-cost-head {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--navy-dark);
}

.price-cost-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.price-cost-name {
    width: 260px;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--dk-line, #d5dce8);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
}

.price-cost-hint {
    font-size: 13.5px;
}

.price-input.price-gov {
    border-color: #b7dcd8;
    color: color-mix(in srgb, #0d9488 70%, var(--text-dark));
}

.price-input:focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 3px rgba(45, 79, 163, 0.12);
}

@media screen and (max-width: 1024px) {
    .finance-internal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==================== DELIVERY LABEL (ใบปะหน้า A5) ====================
   แผ่น = กระดาษ A5 จริง 148×210 มม. (ขอบ 12 มม. อยู่ในแผ่น, @page margin 0 — openDeliveryLabelModal)
   ขนาดตัวอักษรเป็น pt ให้พิมพ์ออกมาเท่าที่เห็นทุกเครื่อง: ผู้ส่งเล็กมุมบน, ผู้รับตัวใหญ่ในกรอบกลางแผ่น */
.delivery-label-sheet {
    width: 148mm;
    min-height: 210mm;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 12mm;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: 4px;
    color: #0f172a;
}
.delivery-label-sheet p { margin: 0; }

.delivery-label-from {
    padding-bottom: 4mm;
    border-bottom: 0.4mm solid #0f172a;
    font-size: 10pt;
    line-height: 1.45;
}

.delivery-label-from h5,
.delivery-label-to h5 {
    margin: 0 0 1.5mm;
    font-size: 9pt;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.03em;
}

.delivery-label-to {
    margin: 14mm 0 10mm;
    padding: 5mm 6mm;
    border: 0.5mm solid #0f172a;
    border-radius: 3mm;
}
.delivery-label-to h5 { font-size: 9.5pt; margin-bottom: 2mm; }

.delivery-label-recipient {
    font-size: 13pt;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
}

.delivery-label-company {
    margin-top: 1mm;
    font-size: 11pt;
    font-weight: 600;
    line-height: 1.35;
}

.delivery-label-address {
    margin-top: 4mm;
    font-size: 10.5pt;
    line-height: 1.5;
}

.delivery-label-phone {
    margin-top: 3mm;
    font-size: 10.5pt;
    font-weight: 700;
}

.delivery-label-notes {
    flex: 1;
    padding-top: 4mm;
    border-top: 0.3mm dashed #94a3b8;
    font-size: 11pt;
    line-height: 1.5;
    color: #334155;
}

.delivery-label-footer {
    text-align: right;
    font-size: 9pt;
    color: #64748b;
}
/* จอแคบ (มือถือ) — ย่อภาพตัวอย่างให้ทั้งแผ่นอยู่ในจอ ตอนพิมพ์ยังเป็นขนาดจริง */
@media screen and (max-width: 640px) {
    .delivery-label-sheet { zoom: 0.6; }
}

/* ==================== PRINT CSS STYLING ==================== */
@media print {
    body {
        background-color: white !important;
        color: black !important;
    }
    
    /* Hide layout sidebar, header and modal wrappers */
    #main-layout, 
    .modal-backdrop,
    .no-print,
    header.top-bar,
    aside.sidebar {
        display: none !important;
    }
    
    /* Display ONLY the currently-open printable modal, full sheet width.
       :not(.hidden) matters here — without it, this ID selector's higher
       specificity would force the modal visible even when it was never
       opened this session (it always exists in the DOM). */
    #invoice-modal:not(.hidden),
    #receipt-modal:not(.hidden),
    #delivery-label-modal:not(.hidden),
    #bt46-modal:not(.hidden) {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        background: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: auto !important;
    }

    #invoice-modal:not(.hidden) .modal-content,
    #receipt-modal:not(.hidden) .modal-content,
    #delivery-label-modal:not(.hidden) .modal-content,
    #bt46-modal:not(.hidden) .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
        display: block !important;
    }

    #invoice-modal:not(.hidden) .modal-body,
    #receipt-modal:not(.hidden) .modal-body,
    #delivery-label-modal:not(.hidden) .modal-body,
    #bt46-modal:not(.hidden) .modal-body {
        padding: 0 !important;
        overflow: visible !important;
    }

    .invoice-sheet {
        border: none !important;
        border-radius: 0 !important;
        /* ขอบ 10 มม. อยู่ในแผ่น (@page margin: 0 — INVOICE_PAGE_CSS) ไม่มีหัว/ท้ายกระดาษของเบราว์เซอร์ พิมพ์เหมือนกันทุกเบราว์เซอร์
           clone = เว้นขอบให้ทุกหน้า กรณีบิลยาวเกิน 1 หน้า */
        padding: 10mm !important;
        box-sizing: border-box !important;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        width: auto !important;
        min-height: 0 !important;
        max-width: 100% !important;
        box-shadow: none !important;
        /* ให้พื้นหลัง/หัวตารางสีกรมท่า/ตราประทับพิมพ์ออกมาด้วย (เบราว์เซอร์ปิดสีพื้นหลังตอนพิมพ์เป็นค่าเริ่มต้น) */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ไม่ตัดแถวรายการ/สรุปยอด/ลายเซ็นข้ามหน้า */
    .invoice-table tr,
    .invoice-signature-row,
    .invoice-payment-section,
    .receipt-method {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* เปิดใบเสร็จจากในหน้าต่างบิล — ตอนพิมพ์ใบเสร็จ ซ่อนบิลที่เปิดค้างอยู่ด้านหลัง */
    body:has(#receipt-modal:not(.hidden)) #invoice-modal {
        display: none !important;
    }

    /* พอดี 1 แผ่น A5 (@page margin 0) — สูงต่ำกว่า 210 มม. นิดหน่อยกันหน้าว่างหน้าที่ 2 */
    .delivery-label-sheet {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        min-height: 0 !important;
        height: 209mm !important;
        overflow: hidden !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ==================== RESPONSIVE STYLING ====================
   เบรกพอยต์หลักที่ 1024px ครอบคลุมทั้งมือถือและ iPad แนวตั้ง (768-834px) —
   ช่วงนี้เมนูข้างจะกลายเป็นลิ้นชักเลื่อนออกมาแทนที่จะแสดงค้างตลอด (ดู JS: toggleMobileSidebar)
   เกิน 1024px (iPad แนวนอน/คอมพิวเตอร์) ใช้เลย์เอาต์เดสก์ท็อปปกติ พื้นที่กว้างพอไม่ต้องพับเมนู */
@media screen and (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mobile-menu-btn {
        display: inline-flex;
    }

    /* เมนูข้างกลายเป็นลิ้นชักลอยเลื่อนออกจากซ้าย แทนที่จะเบียดพื้นที่เนื้อหาตลอดเวลา */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        max-width: 85vw;
        z-index: 999;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
    }

    .sidebar.sidebar-open {
        transform: translateX(0);
    }

    /* จอแคบเมนูเป็นลิ้นชักแล้ว ไม่ใช้โหมดย่อ — ซ่อนปุ่มย่อ */
    .sidebar-collapse-btn {
        display: none;
    }

    .sidebar-menu {
        flex-direction: column;
        overflow-x: visible;
    }

    .menu-item {
        padding: 12px 16px;
        white-space: normal;
        min-height: 44px;
    }

    /* เนื้อหาหลักกว้างเต็มจอ (ไม่มีเมนูข้างเบียดพื้นที่แล้ว) */
    .top-bar {
        padding: 0 16px;
    }

    .content-body {
        padding: 18px;
    }

    /* ป้องกัน iOS Safari ซูมหน้าจอเข้าเองทุกครั้งที่แตะช่องกรอกข้อมูล (เกิดเมื่อ font-size ช่องกรอก < 16px) */
    .form-group input,
    .form-group select,
    .form-group textarea,
    .search-box input,
    .filter-box select,
    .job-worker-search-input {
        font-size: 16px;
    }

    /* ปุ่มไอคอนจัดการในตาราง/การ์ด ขยายพื้นที่แตะให้กดง่ายขึ้นบนจอสัมผัส */
    .action-icon-btn {
        width: 38px;
        height: 38px;
    }

    .close-btn {
        width: 40px;
        height: 40px;
    }
}

@media screen and (max-width: 768px) {
    #main-layout {
        flex-direction: column;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .col-6, .col-4, .col-12 {
        width: 100%;
    }

    .doc-upload-grid {
        grid-template-columns: 1fr 1fr;
    }

    .filter-box {
        flex-wrap: wrap;
    }

    .filter-box select {
        flex: 1 1 140px;
    }

    /* โมดัลฟอร์มกรอกข้อมูลเต็มจอบนมือถือ — กรอกง่ายกว่ากล่องเล็กลอยกลางจอ */
    .modal-backdrop {
        padding: 0;
    }

    .modal-content,
    .modal-content.large {
        max-width: 100%;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .modal-header,
    .modal-footer {
        padding: 16px 18px;
    }

    .modal-body {
        padding: 18px;
    }
}

/* จอมือถือขนาดเล็ก (เช่น iPhone SE ~375px) — บีบช่องว่างอีกนิดให้ไม่อึดอัด */
@media screen and (max-width: 480px) {
    .doc-upload-grid {
        grid-template-columns: 1fr;
    }

    .top-bar-actions {
        gap: 10px;
    }

    .current-date {
        display: none;
    }
}

/* ==================== PAGINATION BAR ==================== */
.pagination-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    padding: 10px 0;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
}

/* ==================== ภาพย่อเอกสาร (drive-tile-thumb ใช้ในรายการแฟ้มเอกสาร) ==================== */

.drive-tile-thumb {
    position: relative;
    height: 170px;
    background-color: var(--dk-subtle, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    overflow: hidden;
}

.drive-tile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pagination-info {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ปุ่มลบรูปถ่ายคนงาน — โผล่แค่ตอนมีรูปแล้วเท่านั้น (ไม่โผล่ทับไอคอน 👤 ตอนยังไม่ได้อัปโหลด)
   กรอบรูปต้องไม่ใช้ overflow:hidden — มุมขวาบนอยู่นอกวงกลม ปุ่มจะถูกตัดหายจนกดไม่ได้ (ให้ <img> ใส่ border-radius เองแทน) */
.remove-photo-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--danger);
    color: #ffffff;
    border: 2px solid #ffffff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#worker-photo-preview-container:has(#worker-photo-preview:not(.hidden)) .remove-photo-btn {
    display: flex;
}

/* ==================== Backup page ==================== */
.backup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.backup-actions .btn {
    padding: 10px 20px;
}
.backup-last-info {
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-muted);
}
.backup-last-info.is-stale {
    color: var(--warning);
    font-weight: 600;
}
.backup-progress {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}

/* ช่องที่ระบบเติมให้เอง แก้ในฟอร์มนี้ไม่ได้ (เช่น สถานที่ทำงาน = ที่อยู่นายจ้าง) */
.locked-input {
    background-color: var(--gray-bg);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* ==================== WORKERS: เปลี่ยน "รอขึ้นทะเบียน" → "ปกติ" ทีละหลายคน (admin) ==================== */
.worker-bulk-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--gold-light);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
}
.worker-bulk-bar label,
.worker-bulk-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.worker-bulk-check {
    font-size: 12.5px;
    color: var(--gold-primary);
    margin-bottom: 4px;
}

/* ปุ่มเลือกธีมมุมขวาบน: พระจันทร์ (พระอาทิตย์ตอนอยู่โหมดมืด) → เมนู สว่าง / ชมพู / มืด */
.theme-toggle-btn .theme-icon-sun { display: none; }

.theme-picker {
    position: relative;
}

.theme-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1500;
    min-width: 200px;
    padding: 6px;
    background-color: var(--gray-card);
    border-radius: 14px;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--dk-line, #e2e8f0);
}

.theme-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.theme-menu button:hover { background-color: var(--gold-light); }
.theme-menu button.is-active { font-weight: 600; color: var(--gold-primary); }

.theme-swatch {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* ==================== สิทธิ์ตามตำแหน่ง (setupFormPermissions ใน app.js) ====================
   <body class="perm-no-xxx"> เมื่อผู้ใช้ไม่มีสิทธิ์ xxx → ซ่อนองค์ประกอบที่ติด class needs-xxx */
.perm-no-customers .needs-customers,
.perm-no-ops .needs-ops,
.perm-no-finance .needs-finance,
.perm-no-commission .needs-commission,
.perm-no-driveView .needs-driveView,
.perm-no-admin .needs-admin {
    display: none !important;
}

/* ==================== กระดิ่งแจ้งเตือนแยกตามตำแหน่ง (buildNotificationGroups ใน app.js) ==================== */
.bell-wrap {
    position: relative;
}

.bell-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: -60px;
    z-index: 1500;
    width: min(400px, calc(100vw - 24px));
    max-height: min(70vh, 620px);
    overflow-y: auto;
    padding: 8px;
    background-color: var(--gray-card);
    border-radius: 16px;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--dk-line, #e2e8f0);
}

.bell-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--dk-line, #edf1f7);
    margin-bottom: 6px;
}

.bell-panel-head strong {
    font-family: var(--font-head);
    font-size: 15px;
    color: var(--navy-dark);
}

.bell-panel-head span {
    font-size: 13.5px;
    color: var(--text-muted);
}

.bell-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--text-muted);
}

.bell-group + .bell-group {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--dk-line, #e2e8f0);
}

.bell-group-head,
.bell-item {
    display: flex;
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    color: var(--text-dark);
}

.bell-group-head {
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy-dark);
    white-space: normal;
}

.bell-group-head span { flex: 1; }

.bell-group-head b {
    min-width: 24px;
    padding: 1px 8px;
    border-radius: 999px;
    background-color: var(--danger);
    color: #ffffff;
    font-size: 13.5px;
    text-align: center;
}

.bell-group.is-info .bell-group-head b {
    background-color: var(--gold-light);
    color: var(--gold-primary);
}

.bell-item {
    flex-direction: column;
    gap: 1px;
    padding: 7px 10px 7px 34px;
    white-space: normal;
}

.bell-item-text {
    font-size: 13.5px;
    font-weight: 500;
}

.bell-item small {
    font-size: 13px;
    color: var(--text-muted);
}

.bell-group-head:hover,
.bell-item:hover {
    background-color: var(--gold-light);
}

/* ปุ่ม ✕ ปิดการแจ้งเตือนทีละรายการ / ทั้งหมวด (2026-10-14) — เมาส์: โผล่ตอนชี้แถว, จอสัมผัส: เห็นตลอด */
.bell-row { display: flex; align-items: center; gap: 2px; }
.bell-row > .bell-group-head, .bell-row > .bell-item { flex: 1; min-width: 0; }
.bell-dismiss {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.bell-dismiss .ico, .bell-dismiss svg { width: 14px; height: 14px; }
.bell-dismiss:hover { background-color: var(--dk-bad-bg, #fef2f2); color: var(--danger); }
@media (hover: hover) and (pointer: fine) {
    .bell-dismiss { opacity: 0; }
    .bell-row:hover .bell-dismiss, .bell-dismiss:focus-visible { opacity: 1; }
}
.bell-restore {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 9px 10px;
    border: none;
    border-top: 1px solid var(--dk-line, #edf1f7);
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--gold-primary);
    cursor: pointer;
    border-radius: 0 0 10px 10px;
}
.bell-restore:hover { background-color: var(--gold-light); }

.bell-more {
    padding: 4px 10px 6px 34px;
    font-size: 13px;
    color: var(--text-muted);
}

@media (max-width: 720px) {
    .bell-panel { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; }
}

/* ประเภทกิจการของนายจ้าง — เลือกได้หลายประเภท (ช่องติ๊ก) */
.bt-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 10px;
    max-height: 220px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--dk-line, #cbd5e1);
    border-radius: var(--radius-sm);
    background-color: var(--dk-subtle, #f8fafc);
}

.bt-option {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    margin: 0 !important;
    padding: 4px 2px;
    font-size: 13.5px;
    font-weight: normal !important;
    line-height: 1.35;
    cursor: pointer;
}

.cust-entity-choice {
    max-height: none;
}

.bt-option input {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}

.bt-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* ==================== สรุปงาน (ระบบแจ้งงาน → สรุปงาน) ดู renderJobsSummary ==================== */
.jobs-summary { margin-top: 10px; }

.js-card {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background-color: var(--gray-card);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.js-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--navy-dark);
}

.js-table { box-shadow: none; border: 1px solid var(--dk-line, #edf1f7); }
.js-table td, .js-table th { padding: 8px 10px; }

.js-list { display: flex; flex-direction: column; gap: 4px; }

.js-list-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    text-align: left;
    color: var(--text-dark);
    cursor: pointer;
    white-space: normal;
}

.js-list-item small { font-size: 13px; color: var(--text-muted); }
.js-list-item:hover { background-color: var(--gold-light); }

/* ==================== พอร์ทัลนายจ้าง (บัญชี Client) ดู renderClientPortal ==================== */
.client-portal-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background-color: var(--gray-card);
    box-shadow: var(--shadow-sm);
}

.cp-company h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 2px;
    font-size: 18px;
    color: var(--navy-dark);
}

.cp-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cp-stats > div {
    display: flex;
    flex-direction: column;
    min-width: 120px;
    padding: 10px 16px;
    border-radius: 14px;
    background-color: var(--dk-subtle, #f3f6fc);
}

.cp-stats span { font-size: 13.5px; color: var(--text-muted); }
.cp-stats strong { font-family: var(--font-head); font-size: 20px; font-weight: 500; color: var(--navy-dark); }
.cp-stats .is-due strong { color: var(--danger); }

.client-portal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.cp-card {
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background-color: var(--gray-card);
    box-shadow: var(--shadow-sm);
}

.cp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 12px;
    font-size: 13.5px;
}

.cp-toolbar .search-box { flex: 1; min-width: 220px; max-width: 420px; }
.cp-toolbar .btn { margin-left: auto; }
/* ปุ่มยุบ/กางทั้งหมด (พอร์ทัลนายจ้าง) — อยู่คู่กัน ไม่ถูก margin-left:auto ของ .cp-toolbar .btn ดันแยก */
.cp-toolbar .cp-collapse-btns { display: flex; gap: 6px; }
.cp-toolbar .cp-collapse-btns .btn { margin-left: 0; }

.cp-card .table-container { box-shadow: none; border: 1px solid var(--dk-line, #edf1f7); }

.cp-pay-hint {
    margin: 12px 0 0;
    font-size: 13px;
}
/* ==================== แฟ้มเอกสารคนงาน: รายการ + พรีวิวใหญ่ (renderWorkerFolderTiles / renderWorkerFolderPreview) ==================== */
/* ==================== แฟ้มเอกสารคนงาน/นายจ้าง (จัดใหม่ให้โล่ง owner 2026-10-15) ====================
   หัวแถวเดียว (.fv-top: รูป ชื่อ ปุ่มแชร์ ✕) → แถบเครื่องมือ (.fv-tools: แท็บ ค้นหา ZIP) → รายการซ้าย / พรีวิวขวา
   หัวหมวดเป็นตัวหนังสือเทาไม่มีพื้น, หมวดว่างเป็นแคปซูลเส้นประท้ายรายการ, ไฟล์หมดอายุพับไว้, คำสั่งที่ใช้น้อยอยู่ในเมนู ••• */
.modal-content.fv-modal {
    max-width: min(1440px, 96vw);
    height: 94vh;
    max-height: 94vh;
    overflow: hidden;
}

.fv-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px 18px;
    flex-wrap: wrap;
}
.fv-top .close-btn { margin-left: 2px; }

.fv-photo {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--dk-subtle, #f1f5f9);
    cursor: zoom-in;
}
.fv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fv-photo.is-active { box-shadow: 0 0 0 2px var(--gray-card), 0 0 0 4px var(--gold-primary); }
.fv-photo-icon { cursor: default; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }

.fv-person-text { flex: 1; min-width: 180px; }
.fv-person-text h4 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--navy-dark); }
.fv-person-text p { margin: 0; font-size: 14px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ปุ่มแคปซูล "แชร์" และปุ่มไอคอนกลม */
.fv-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background-color: var(--dk-subtle, #f1f3f7);
    color: var(--navy-dark);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.fv-pill:hover { background-color: var(--gold-light); }
.fv-ib {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
}
.fv-ib:hover, .fv-more.is-open > .fv-ib { background-color: var(--dk-subtle, #f1f3f7); color: var(--navy-dark); }
.fv-ib:disabled { opacity: 0.4; cursor: default; }
.fv-ib .ico, .fv-pill .ico, .fv-act .ico { width: 20px; height: 20px; }

/* เมนูเล็ก (แชร์ / •••) */
.fv-more { position: relative; }
.fv-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 240px;
    padding: 6px;
    border-radius: 16px;
    background-color: var(--dk-card, #ffffff);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--dk-line, #e4e8ef);
}
.fv-more.is-open > .fv-menu { display: grid; animation: slideUp 0.18s cubic-bezier(0.4, 0, 0.2, 1); }
.fv-menu > button,
.fv-menu > a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--navy-dark);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.fv-menu > button:hover, .fv-menu > a:hover { background-color: var(--dk-subtle, #f1f3f7); }
.fv-menu > .is-danger { color: var(--dk-bad, #c62828); }
.fv-menu > hr { border: none; border-top: 1px solid var(--dk-line, #e4e8ef); margin: 4px 6px; }
.fv-menu > hr:first-child, .fv-menu > hr:last-child { display: none; }

.fv-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px 12px;
    flex-wrap: wrap;
}
.fv-tools .view-toggle-bar { margin: 0; }
.fv-search { flex: 0 1 280px; max-width: 100%; margin: 0; }
.fv-spacer { flex: 1; }

.modal-body.fv-body {
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-top: 1px solid var(--dk-line, #e4e8ef);
}
.fv-layout {
    display: grid;
    grid-template-columns: minmax(250px, 300px) 1fr;
    height: 100%;
}

.fv-list {
    overflow-y: auto;
    padding: 6px 10px 14px;
    border-right: 1px solid var(--dk-line, #e4e8ef);
}
.fv-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 6px 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
}
.fv-group-head span { flex: 1; }
.fv-group-head em { font-style: normal; font-weight: 500; opacity: 0.75; }
.fv-add {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    opacity: 0.6;
}
.fv-add .ico { width: 18px; height: 18px; }
.fv-group-head:hover .fv-add, .fv-add:focus-visible { opacity: 1; }
.fv-add:hover { background-color: var(--dk-subtle, #f1f3f7); }
.fv-none { padding: 4px 8px 6px; font-size: 13px; color: var(--text-muted); }
/* แฟ้มคนงานฝั่งลูกค้า: เอกสารต่ออายุที่ยังไม่ชำระถูกซ่อน (clientLockedRenewalUrls) */
.fv-locked-note { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background-color: var(--dk-subtle, #f1f4f9); color: var(--text-muted); font-size: 13.5px; }

.fv-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 12px;
    cursor: pointer;
}
.fv-item:hover { background-color: var(--dk-subtle, #f1f3f7); }
.fv-item.is-active { background-color: var(--gold-light); }
.fv-item.is-active .fv-item-text b { color: var(--gold-primary); }
.fv-item.is-expired { opacity: 0.7; }
.fv-item .drive-tile-thumb {
    width: 36px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 5px;
    font-size: 14px;
}
.fv-item-text { min-width: 0; display: flex; flex-direction: column; }
.fv-item-text b { font-size: 14.5px; font-weight: 600; color: var(--navy-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-item-text small { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fv-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; }
.fv-dot.is-ok { background-color: var(--dk-ok, #2f8a5c); }
.fv-dot.is-warn { background-color: var(--dk-warn, #e08a12); }
.fv-dot.is-bad { background-color: var(--dk-bad, #c62828); }

/* หมวดที่ยังไม่มีไฟล์ */
.fv-empty-groups { margin-top: 10px; padding-top: 2px; border-top: 1px solid var(--dk-line, #e4e8ef); }
.fv-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 6px; }
.fv-chip {
    padding: 3px 11px;
    border: 1px dashed var(--dk-line, #cfd6e2);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
}
.fv-chip:hover { border-color: var(--gold-primary); color: var(--gold-primary); }
.fv-chip.is-static { cursor: default; }
.fv-chip.is-static:hover { border-color: var(--dk-line, #cfd6e2); color: var(--text-muted); }

/* ลากไฟล์จากเครื่องมาวาง: หมวดที่วางได้มีกรอบเส้นประ หมวดที่ชี้อยู่เป็นสีเน้น (fvFileDrag ใน app.js) */
.fv-modal.is-file-drag .fv-group[data-paste-target] {
    outline: 1.5px dashed var(--dk-line, #cfd6e2);
    outline-offset: -2px;
    border-radius: 12px;
}
.fv-modal.is-file-drag .fv-group.dragover,
.fv-modal.is-file-drag .fv-chip.dragover {
    outline: 2px dashed var(--gold-primary);
    border-color: var(--gold-primary);
    background-color: var(--gold-light);
    color: var(--gold-primary);
}

/* ไฟล์ที่หมดอายุ: พับไว้ */
.fv-expired { margin-top: 8px; }
.fv-fold {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.fv-fold span:first-child { flex: 1; }
.fv-fold:hover { background-color: var(--dk-subtle, #f1f3f7); }
.fv-fold .ico { transition: transform 0.2s ease; }
.fv-expired.is-folded .fv-fold .ico { transform: rotate(-90deg); }
.fv-expired.is-folded #worker-folder-expired-files-list { display: none; }
.fv-empty { text-align: center; padding: 20px; }

/* พรีวิว: แถบชื่อไฟล์ + เอกสารวางบนพื้นเทาอ่อนเหมือนกระดาษ */
.fv-view {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background-color: var(--dk-subtle, #f1f3f7);
}
.fv-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 8px 12px 8px 14px;
    background-color: var(--gray-card);
    border-bottom: 1px solid var(--dk-line, #e4e8ef);
}
.fv-bar-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fv-bar-title b { padding: 0 4px; font-size: 16px; color: var(--navy-dark); }
.fv-bar-title small { padding: 0 4px; font-size: 13.5px; color: var(--text-muted); }
.fv-name {
    max-width: 420px;
    padding: 3px 8px;
    border: 1px dashed var(--dk-line, #cbd5e1);
    border-radius: 8px !important;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--navy-dark);
}
.fv-name:hover, .fv-name:focus { border-color: var(--dk-line, #cbd5e1); background-color: var(--gray-card); outline: none; }
.fv-bar-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fv-act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background-color: var(--dk-subtle, #f1f3f7);
    color: var(--navy-dark);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.fv-act:hover { background-color: var(--gold-light); }
.fv-act.is-danger { color: var(--dk-bad, #c62828); background-color: var(--dk-bad-bg, #fde8e8); }
.fv-act.is-danger:hover { background-color: var(--dk-bad, #e5534b); color: #fff; }
.fv-act.is-danger:hover .ico { --ic: #fff; }

.fv-doc {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.fv-doc img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.12); background: #fff; }
.fv-doc iframe { width: 100%; height: 100%; border: none; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.12); }

.fv-placeholder { margin: auto; text-align: center; color: var(--text-muted); padding: 30px; }
.fv-placeholder .ico { width: 42px; height: 42px; }

@media (max-width: 860px) {
    .modal-content.fv-modal { height: auto; overflow-y: auto; }
    .modal-body.fv-body { overflow: visible; }
    .fv-layout { grid-template-columns: 1fr; height: auto; }
    .fv-list { max-height: 40vh; border-right: none; border-bottom: 1px solid var(--dk-line, #e4e8ef); }
    .fv-doc { min-height: 60vh; }
    .fv-doc iframe { height: 60vh; }
}

/* ==================== หน้าโหลดตอนเปิดระบบ (แบบ iOS) ==================== */
/* บังฟอร์มล็อกอินไว้ระหว่างเช็กว่าล็อกอินค้างอยู่ไหม/โหลดข้อมูล — hideAppSplash() ใน app.js ค่อย ๆ จางออก */
#app-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background-color: var(--gray-bg);
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

#app-splash.is-done {
    opacity: 0;
    visibility: hidden;
}

.app-splash-logo {
    width: 88px;
    height: 88px;
    object-fit: contain;
    border-radius: 22px; /* มุมโค้งแบบไอคอนแอป iOS */
    background-color: var(--dk-card, #ffffff);
    box-shadow: var(--shadow-md);
    padding: 10px;
    animation: app-splash-in 0.5s ease both;
}

.app-splash-text {
    font-size: 13.5px;
    color: var(--text-muted);
    letter-spacing: 0.2px;
}

@keyframes app-splash-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* วงหมุนแบบ iOS: 12 ขีดรอบวง ค่อย ๆ จางตามกัน */
.ios-spinner {
    position: relative;
    width: 28px;
    height: 28px;
}

.ios-spinner i {
    position: absolute;
    left: 12.5px;
    top: 0;
    width: 3px;
    height: 8px;
    border-radius: 2px;
    background-color: var(--text-muted);
    transform-origin: 1.5px 14px;
    animation: ios-spinner-fade 1s linear infinite;
}

.ios-spinner i:nth-child(1)  { transform: rotate(0deg);   animation-delay: -0.917s; }
.ios-spinner i:nth-child(2)  { transform: rotate(30deg);  animation-delay: -0.833s; }
.ios-spinner i:nth-child(3)  { transform: rotate(60deg);  animation-delay: -0.75s; }
.ios-spinner i:nth-child(4)  { transform: rotate(90deg);  animation-delay: -0.667s; }
.ios-spinner i:nth-child(5)  { transform: rotate(120deg); animation-delay: -0.583s; }
.ios-spinner i:nth-child(6)  { transform: rotate(150deg); animation-delay: -0.5s; }
.ios-spinner i:nth-child(7)  { transform: rotate(180deg); animation-delay: -0.417s; }
.ios-spinner i:nth-child(8)  { transform: rotate(210deg); animation-delay: -0.333s; }
.ios-spinner i:nth-child(9)  { transform: rotate(240deg); animation-delay: -0.25s; }
.ios-spinner i:nth-child(10) { transform: rotate(270deg); animation-delay: -0.167s; }
.ios-spinner i:nth-child(11) { transform: rotate(300deg); animation-delay: -0.083s; }
.ios-spinner i:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; }

@keyframes ios-spinner-fade {
    from { opacity: 1; }
    to   { opacity: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
    .ios-spinner i, .app-splash-logo { animation: none; }
}

/* ==================== Dropdown เด้งลงแบบ iOS ==================== */
/* เมนูพวกนี้เปิด/ปิดด้วย .hidden (display:none) — พอ .hidden หลุด animation จะเล่นใหม่ทุกครั้งเอง ไม่ต้องแก้ JS */
.theme-menu,
.bell-panel,
.search-suggest-dropdown {
    animation: ios-dropdown-in 0.28s cubic-bezier(0.32, 1.25, 0.6, 1) both;
}

.theme-menu,
.bell-panel { transform-origin: top right; }
.search-suggest-dropdown { transform-origin: top center; }

@keyframes ios-dropdown-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .theme-menu, .bell-panel, .search-suggest-dropdown { animation: none; }
}

/* ==================== แท็บแบบ iOS (segmented control + ตัวเลือกเลื่อนไหล) ==================== */
/* setupSlidingTabs() ใน app.js ใส่ .seg-host ให้กลุ่มแท็บทุกกลุ่ม (.dashboard-tabs / .view-toggle-bar / ปุ่มตาราง-กราฟ)
   แล้วเพิ่ม .tab-slider 1 ชิ้นที่เลื่อนไปอยู่ใต้ปุ่มที่เลือก (ปุ่มที่มี .btn-gold) — โค้ดเดิมที่สลับ btn-gold/btn-outline ไม่ต้องแก้ */
:root {
    --seg-rail: #e3e3e9;
    --seg-thumb: #ffffff;
    --seg-text: #1c1c1e;
}

.seg-host {
    position: relative;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    width: fit-content;
    max-width: 100%;
    padding: 3px !important;
    border: none !important;
    border-radius: 12px;
    background-color: var(--seg-rail);
    box-shadow: none !important;
    overflow-x: auto;
    scrollbar-width: none;
}
.seg-host::-webkit-scrollbar { display: none; }

.seg-host > .btn {
    position: relative;
    z-index: 1;
    border: none !important;
    border-radius: 9px !important;
    background-color: transparent !important;
    color: var(--seg-text) !important;
    box-shadow: none !important;
    transition: color 0.25s ease, opacity 0.2s ease;
}
.seg-host > .btn:hover { opacity: 0.75; }
.seg-host > .btn.btn-gold { color: var(--gold-primary) !important; font-weight: 600; }
.seg-host > .btn.btn-gold:hover { opacity: 1; }

.tab-slider {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 9px;
    background-color: var(--seg-thumb);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.04);
    pointer-events: none;
    opacity: 0;
}
.tab-slider.is-on { opacity: 1; }
/* Spring animation แบบ iOS ใช้ทั้งระบบ (เจ้าของระบบกำหนด 2026-10-08): เลยเป้านิดหนึ่งแล้วเด้งกลับ
   ใช้กับ ตัวเลื่อนแท็บ / เนื้อหาแท็บที่สลับ (Fade-up) / หน้าต่างป๊อปอัป / คำอธิบายปุ่ม — ยกเว้นเมนูข้าง (คงแบบเดิม) */
:root { --ios-spring: cubic-bezier(0.3, 1.25, 0.5, 1); }

/* ตัวเลื่อนแท็บ: สปริง + ยุบตอนกดค้าง (scale แยกจาก transform ที่ใช้เลื่อน) */
.tab-slider.is-animated {
    transition: transform 0.5s var(--ios-spring), width 0.5s var(--ios-spring),
                height 0.42s cubic-bezier(0.32, 0.72, 0, 1), scale 0.22s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
}
/* เมนูข้าง: คงการเลื่อนนุ่ม ๆ แบบเดิม ไม่เด้ง */
.sidebar-menu > .tab-slider.is-animated {
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), width 0.42s cubic-bezier(0.32, 0.72, 0, 1),
                height 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
}
.tab-slider.is-pressed { scale: 0.95; }
/* กดแท็บที่ยังไม่ได้เลือก: ตัวอักษรจางลงระหว่างกด (เหมือน iOS) */
.seg-host > .btn.is-pressing { opacity: 0.45 !important; transition: opacity 0.08s ease; }
.seg-host { touch-action: pan-x; -webkit-user-select: none; user-select: none; }

/* มาตรฐานเดียวทุกกลุ่มแท็บ (เจ้าของระบบขอ 2026-10-08): ขนาดปุ่ม/ตัวอักษร/ไอคอน/ระยะห่างเท่ากันทั้งระบบ
   — เดิมแต่ละกลุ่มตั้งเอง (แจ้งงาน 9×20/14px, แดชบอร์ด-การเงินใช้ขนาดปุ่มปกติ, ฟอร์มนายจ้าง inline 8×18, ตาราง/กราฟ 7×16/13.5px) */
.seg-host > .btn {
    padding: 8px 18px !important;
    font-size: 14px !important;
    line-height: 1.3;
    gap: 8px;
    white-space: nowrap;
}
.seg-host > .btn .ico { width: 17px !important; height: 17px !important; }
.seg-host > .btn:not(.btn-gold) { font-weight: 500; }
/* ระยะห่างใต้กลุ่มแท็บหลักของหน้า/หน้าต่าง (ไม่รวมปุ่มตาราง/กราฟที่อยู่ในหัวการ์ด) */
.dashboard-tabs.seg-host, .view-toggle-bar.seg-host { margin-bottom: 20px !important; }
/* กลุ่มแท็บที่อยู่ในแถบเดียวกับปุ่มอื่น (ใบวางบิล: แบบรวม/รายคน, แฟ้มคนงาน: หมวด/ทั้งหมด) — แถบแม่คุมระยะเอง */
.invoice-layout-bar > .seg-host, .fv-tools > .seg-host { margin-bottom: 0 !important; }

/* แถบเมนูข้าง: เมนูที่เลือกเป็นตัวเลื่อนไหลเหมือนกัน */
.sidebar-menu { position: relative; }
.sidebar-menu > .menu-item { z-index: 1; }
.sidebar-menu.has-slider > .menu-item.active,
.sidebar-menu.has-slider > .menu-item.active:hover {
    background-color: transparent !important;
    box-shadow: none !important;
}
.sidebar-menu > .tab-slider {
    border-radius: 12px;
    background-color: var(--gold-primary);
    box-shadow: 0 6px 16px rgba(45, 79, 163, 0.30);
}

/* ==================== Dropdown (<select>) แบบ iOS ==================== */
/* เครื่องที่ใช้เมาส์: openIosSelect() ใน app.js เปิดเมนูนี้แทนรายการของเบราว์เซอร์ — <select> ตัวจริงยังอยู่ที่เดิม
   ค่า/onchange/validation เดิมทำงานเหมือนเดิมทุกอย่าง  มือถือ/แท็บเล็ตใช้ตัวเลือกของเครื่อง (ของ iPhone เป็นแบบ iOS อยู่แล้ว) */
.ios-select-menu {
    position: fixed;
    z-index: 10000;
    min-width: 160px;
    max-width: min(420px, calc(100vw - 16px));
    overflow-y: auto;
    padding: 6px;
    background-color: var(--gray-card);
    border-radius: 14px;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--dk-line, #e2e8f0);
    transform-origin: top center;
    animation: ios-dropdown-in 0.28s cubic-bezier(0.32, 1.25, 0.6, 1) both;
    font-size: 14px;
}
.ios-select-menu.is-above { transform-origin: bottom center; }

.ios-select-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 30px;
    border-radius: 9px;
    color: var(--text-dark);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ios-select-option.is-active { background-color: var(--gold-light); }
.ios-select-option.is-selected { color: var(--gold-primary); font-weight: 600; }
.ios-select-option.is-selected::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 5px;
    height: 10px;
    margin-top: -7px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ios-select-option.is-disabled { opacity: 0.4; cursor: default; }
.ios-select-group {
    padding: 8px 12px 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

/* ==================== รายละเอียดอื่น ๆ แบบ iOS ==================== */
/* กดปุ่มแล้วยุบลงนิดหนึ่ง */
.btn:active:not(:disabled),
.action-icon-btn:active:not(:disabled) {
    transform: scale(0.97);
}

/* หน้าต่างป๊อปอัปเด้งขึ้นแบบ sheet ของ iOS */
.modal-content {
    animation: ios-sheet-in 0.5s var(--ios-spring);
}
@keyframes ios-sheet-in {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* เปลี่ยนหน้า: เนื้อหาไหลขึ้นนุ่ม ๆ */
.content-section {
    animation: ios-page-in 0.38s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes ios-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* checkbox / radio / slider ใช้สีหลักของธีม */
input[type="checkbox"], input[type="radio"], input[type="range"] {
    accent-color: var(--gold-primary);
}

@media (prefers-reduced-motion: reduce) {
    .tab-slider.is-animated { transition: none; }
    .ios-select-menu, .modal-content, .content-section { animation: none; }
    .btn:active, .action-icon-btn:active { transform: none; }
}

/* ==================== หน้าเข้าสู่ระบบแบบ iOS ==================== */
/* ไม่มีการ์ดครอบ (แบบหน้า Sign in ของ iOS) — โลโก้เป็นไอคอนแอปมุมโค้ง หัวข้อตัวใหญ่หนา
   ช่องกรอกเป็นกล่องกลุ่ม (ป้ายซ้าย ช่องกรอกขวา คั่นด้วยเส้นบาง) และปุ่มหลักสูงเต็มความกว้าง */
#login-view .login-container,
#reset-password-view .login-container {
    max-width: 400px;
}

#login-view .login-card,
#reset-password-view .login-card {
    background: transparent;
    box-shadow: none;
    padding: 0;
    animation: ios-page-in 0.5s cubic-bezier(0.32, 0.72, 0, 1) both;
}

#login-view .login-header,
#reset-password-view .login-header {
    margin-bottom: 30px;
}

#login-view .login-logo,
#reset-password-view .login-logo {
    width: 104px;
    height: 104px;
    object-fit: contain;
    margin: 0 auto 22px;
    padding: 10px;
    border-radius: 24px;  /* มุมโค้งแบบไอคอนแอป */
    background-color: var(--gray-card);
    box-shadow: var(--shadow-md);
}

#login-view .login-header h2,
#reset-password-view .login-header h2 {
    font-family: var(--font-head);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}

#login-view .login-header .subtitle,
#reset-password-view .login-header .subtitle {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.ios-field-group {
    margin-bottom: 16px;
    border-radius: 14px;
    background-color: var(--gray-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ios-field {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 16px;
    position: relative;
}

/* เส้นคั่นบางแบบ iOS เว้นระยะซ้ายเท่ากับขอบข้อความ */
.ios-field + .ios-field::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 0;
    height: 1px;
    background-color: var(--dk-line, rgba(60, 60, 67, 0.14));
}

.ios-field label {
    flex: 0 0 74px;
    font-size: 15px;
    font-weight: 500;
    color: var(--navy-dark);
}

#login-form .ios-field input,
#reset-password-form .ios-field input {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: inherit;
    font-size: 15px;   /* ≥16px บน iPhone ด้านล่าง กัน Safari ซูมเข้าเองตอนแตะ */
    color: var(--text-dark);
}

#login-form .ios-field input::placeholder,
#reset-password-form .ios-field input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* แถวที่กำลังพิมพ์: ป้ายเปลี่ยนเป็นสีหลัก (แบบ iOS ไม่มีกรอบ/พื้นไฮไลต์) */
.ios-field:focus-within label {
    color: var(--gold-primary);
}

#login-view .error-msg,
#reset-password-view .error-msg {
    border: none;
    border-radius: 12px;
    text-align: center;
}

#btn-login,
#btn-reset-password {
    height: 52px;
    margin-top: 4px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
}

.login-footnote {
    margin-top: 28px;
    text-align: center;
    font-size: 13.5px;
    color: var(--text-muted);
}

@media (max-width: 600px) {
    #login-form .ios-field input,
    #reset-password-form .ios-field input { font-size: 16px; }
}

/* Chrome/Safari ทาพื้นฟ้าให้ช่องที่กรอกอัตโนมัติ (รหัสที่จำไว้) — ทับด้วยเงาทึบสีเดียวกับกล่อง ช่องจะกลืนกับแถว */
#login-form .ios-field input:-webkit-autofill,
#reset-password-form .ios-field input:-webkit-autofill {
    -webkit-text-fill-color: var(--text-dark);
    -webkit-box-shadow: 0 0 0 100px var(--gray-card) inset !important;
    box-shadow: 0 0 0 100px var(--gray-card) inset !important;
    caret-color: var(--text-dark);
}

/* ==================== แถบเมนูข้างแบบลอย (ทุกธีม) ==================== */
/* เดิมแถบเมนูติดขอบจอซ้ายและยาวตามหน้า — ตอนนี้เป็นการ์ดลอยมุมโค้ง เว้นขอบรอบตัว มีเงาเหมือนการ์ดอื่น
   และค้างอยู่กับที่ตอนเลื่อนหน้า (sticky) เมนูยาวเกินจอให้เลื่อนในตัวแถบเอง */
@media (min-width: 1025px) {
    .sidebar {
        position: sticky;
        top: 12px;
        align-self: flex-start;
        height: calc(100vh - 24px);
        margin: 12px 0 12px 12px;
        border-right: none !important;
        border-radius: 22px;
        box-shadow: var(--shadow-md);
        overflow: hidden;
    }

    .sidebar-menu {
        overflow-y: auto;
        min-height: 0;   /* ให้เมนูหดแล้วเลื่อนในตัว ไม่ดันปุ่มออกจากระบบด้านล่างหลุดกรอบ */
        scrollbar-width: none;
    }
    .sidebar-menu::-webkit-scrollbar { display: none; }
}

/* จอแคบ: ลิ้นชักเมนูก็ลอยเว้นขอบ มุมโค้ง */
@media (max-width: 1024px) {
    .sidebar {
        top: 10px;
        left: 10px;
        height: calc(100vh - 20px);
        border-radius: 22px;
        transform: translateX(calc(-100% - 20px));
    }
}

/* ==================== การ์ดสถิติแบบ Wallet (เลือก 2026-10-02) ==================== */
/* แดชบอร์ด: แคปซูลพื้นสีอ่อนตามความเร่งด่วน (น้ำเงิน/เขียวอมฟ้า/ม่วง = ข้อมูลทั่วไป, แดง/ส้ม = ต้องจัดการ) */
:root {
    --pill-navy-bg: #e6ecfa;   --pill-navy-fg: #1d3a85;   --pill-navy-sub: #2b3a63;
    --pill-teal-bg: #e0f3f5;   --pill-teal-fg: #0b5f69;   --pill-teal-sub: #1f4f55;
    --pill-purple-bg: #eee9fb; --pill-purple-fg: #4e34a6; --pill-purple-sub: #3f3263;
    --pill-red-bg: #fbe6e6;    --pill-red-fg: #a52a2a;    --pill-red-sub: #6b2b2b;
    --pill-orange-bg: #fdeedd; --pill-orange-fg: #9a4a06; --pill-orange-sub: #6b3d12;
    --wallet-bg: #1d3a85;
}

.stat-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 26px;
}

.stat-pill {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 12px 22px;
    border-radius: 999px;
    background-color: var(--pill-navy-bg);
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.stat-pill:hover { transform: translateY(-2px); }

.stat-pill h3 {
    margin: 0;
    font-family: var(--font-head);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--pill-navy-fg);
}

.stat-pill p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--pill-navy-sub);
}

.stat-pill.tone-teal   { background-color: var(--pill-teal-bg); }
.stat-pill.tone-teal h3 { color: var(--pill-teal-fg); }
.stat-pill.tone-teal p  { color: var(--pill-teal-sub); }
.stat-pill.tone-purple   { background-color: var(--pill-purple-bg); }
.stat-pill.tone-purple h3 { color: var(--pill-purple-fg); }
.stat-pill.tone-purple p  { color: var(--pill-purple-sub); }
.stat-pill.tone-red   { background-color: var(--pill-red-bg); }
.stat-pill.tone-red h3 { color: var(--pill-red-fg); }
.stat-pill.tone-red p  { color: var(--pill-red-sub); }
.stat-pill.tone-orange   { background-color: var(--pill-orange-bg); }
.stat-pill.tone-orange h3 { color: var(--pill-orange-fg); }
.stat-pill.tone-orange p  { color: var(--pill-orange-sub); }

/* แคปซูลที่ตัวเลขยาว (เช่น "3 ใบ · 12,000.00") ตัวเล็กลงหน่อย */
.widget-board[data-board="finance"] .stat-pill h3 { font-size: 20px; }

/* สรุปการเงิน: บัตรสีกรมท่าแบบ Apple Card + การ์ดกำไร + รายการอันดับ */
.fin-wallet-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 16px;
}

.wallet-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
    border-radius: 26px;
    background-color: var(--wallet-bg);
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(29, 58, 133, 0.32);
}
/* วงแหวนจาง ๆ มุมขวาบน ให้ดูเป็นบัตร */
.wallet-card::before {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 30px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.wallet-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.wallet-brand { font-size: 15px; font-weight: 600; }
.wallet-period { font-size: 13.5px; color: #c9d6f7; }

.wallet-label { margin: 0; font-size: 14px; color: #c9d6f7; }
.wallet-amount {
    margin: 6px 0 0;
    font-family: var(--font-head);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.8px;
    line-height: 1.1;
    color: #ffffff;
}

.wallet-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    color: #c9d6f7;
    white-space: nowrap;
}
.wallet-progress-bar {
    flex-grow: 1;
    height: 8px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}
.wallet-progress-fill {
    height: 100%;
    min-width: 0;
    border-radius: 999px;
    background-color: #7fe0b0;
    transition: width 0.8s cubic-bezier(0.32, 0.72, 0, 1);
}

.wallet-sub {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.wallet-sub p { margin: 0; font-size: 13px; line-height: 1.35; color: #c9d6f7; }
.wallet-sub h3 { margin: 4px 0 0; font-size: 19px; font-weight: 700; color: #ffffff; }
.wallet-sub h3.wallet-warn { color: #ffb4b4; }

.fin-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fin-profit-card,
.fin-list-card {
    border-radius: 22px;
    background-color: var(--gray-card);
    box-shadow: var(--shadow-md);
}

.fin-profit-card { padding: 22px; }
.fin-profit-card p { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.fin-profit-card h3 {
    margin: 6px 0 0;
    font-family: var(--font-head);
    font-size: 32px;
    font-weight: 700;
}

.fin-list-card {
    flex-grow: 1;
    padding: 4px 0;
}
.fin-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 13px 20px;
    font-size: 14px;
}
.fin-row + .fin-row { border-top: 1px solid var(--dk-line, #e5e5ea); }
.fin-row span { color: var(--text-muted); flex-shrink: 0; }
.fin-row strong { font-weight: 600; color: var(--text-dark); text-align: right; }

@media (max-width: 900px) {
    .fin-wallet-grid { grid-template-columns: 1fr; }
    .wallet-amount { font-size: 32px; }
}
@media (max-width: 560px) {
    .wallet-sub { grid-template-columns: 1fr; }
    .stat-pill { border-radius: 20px; }
}

/* ==================== วิดเจ็ตแบบ iPad (กริด 12 ช่อง) ==================== */
/* setupWidgetBoards() ใน app.js ห่อการ์ดเดิมเป็น .widget ในกริด 12 ช่อง — ขนาด = จำนวนช่อง (--span) */
.widget-board {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 25px;
    align-items: stretch;
}

.widget {
    grid-column: span var(--span, 12);
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.widget[data-kind="pill"] { align-self: start; }
.widget > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.widget > .dashboard-panel,
.widget > .wallet-card,
.widget > .fin-side { flex-grow: 1; }
/* panel-alerts/panel-charts เคยมี flex: 1.8/1.2 จากแถวเดิม — ในวิดเจ็ตไม่ใช้แล้ว */
.widget > .dashboard-panel { flex-basis: auto; }

/* จอแคบ (iPad แนวตั้ง/มือถือ): การ์ดเต็มแถว แคปซูลครึ่งแถว — ขนาดที่เลือกไว้ใช้กับจอกว้าง */
@media (max-width: 900px) {
    .widget { grid-column: span 12; }
    .widget[data-kind="pill"] { grid-column: span 6; }
}
@media (max-width: 480px) {
    .widget[data-kind="pill"] { grid-column: span 12; }
}
/* ครึ่งจอ (901–1280px, owner 2026-10-28): แคปซูลเล็ก 6 ตัวต่อแถวแคบจนตัวเลข/ชื่อซ้อน → 3 ตัวต่อแถว,
   การ์ดเล็ก (กราฟวงกลม) 3 ใบต่อแถว → 2 ใบ */
@media (min-width: 901px) and (max-width: 1280px) {
    .widget[data-kind="pill"][data-size="s"] { grid-column: span 4; }
    .widget[data-kind="block"][data-size="s"] { grid-column: span 6; }
}

/* ==================== ปรับแต่งเพิ่ม (2026-10-02) ==================== */
#login-view .login-logo,
#reset-password-view .login-logo { padding: 10px; } /* ไฟล์โลโก้จัด NKT/Service ให้อยู่กลางภาพแล้ว (2026-10-02) */

/* แถบ "ช่วงเวลาที่ต้องการดูสรุป" (หน้าสรุปการเงิน): การ์ดโค้งลอยแบบเดียวกับการ์ดอื่น */
.fin-period-bar {
    padding: 12px 14px 12px 22px !important;
    border: none;
    border-radius: 18px;
    background-color: var(--gray-card);
    box-shadow: var(--shadow-sm);
}
.fin-period-bar select {
    border-radius: 12px;
}

/* ปุ่มลบ (ถังขยะ) แบบ iOS: ปุ่มมนพื้นแดงอ่อน ไอคอนแดง ชี้แล้วเป็นแดงทึบ ไอคอนขาว (systemRed) */
.action-icon-btn.delete-btn {
    border: none;
    border-radius: 10px;
    background-color: rgba(255, 59, 48, 0.12);
    color: #d70015;
    box-shadow: none;
}
.action-icon-btn.delete-btn .ico { --ic: currentColor; }
.action-icon-btn.delete-btn .ico svg .fl { fill: none; }
.action-icon-btn.delete-btn:hover {
    border: none;
    background-color: #ff3b30;
    color: #ffffff;
}

/* หน้าสรุปงาน (ระบบแจ้งงาน) แบบเดียวกับแดชบอร์ด/บัญชี: บัตรหลัก Wallet + การ์ดสถานะ + แคปซูล + การ์ดย่อย (วิดเจ็ต) */
.jobs-summary .js-hint { margin: 0 0 4px; font-size: 13px; }
.widget > .js-card,
.widget > .fin-list-card { flex-grow: 1; }
.widget > .js-card { border-radius: 22px; box-shadow: var(--shadow-md); padding: 16px 18px; }
.wallet-unit { font-size: 0.5em; font-weight: 600; color: #c9d6f7; }
.wallet-brand .ico { --ic: #ffffff; vertical-align: -0.15em; }

/* ช่องค้นหาคนงานในฟอร์มแจ้งงาน: ไอคอนแว่นขยายแทนอีโมจิ (เดิม "🔍" ใน placeholder) */
.job-worker-search-input {
    padding-left: 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 17px 17px;
}

/* ==================== ย่อ/ขยายแถบเมนูแบบลื่น (แก้อาการกระตุก 2026-10-02) ==================== */
/* เดิม: ชื่อเมนู/โลโก้/ข้อความผู้ใช้หายทันที (display:none) แล้วไอคอนกระโดดไปกลาง ขณะที่ความกว้างยังค่อย ๆ หด
   ตอนนี้: ไอคอนอยู่ตำแหน่งเดิมตลอด (ซ้าย ~27px ทั้งสองสถานะ) ข้อความค่อย ๆ จางและถูกตัดตามความกว้างที่หด */
@media (min-width: 1025px) {
    .sidebar { transition: width 0.32s cubic-bezier(0.32, 0.72, 0, 1); }

    .sidebar .sidebar-brand,
    .sidebar .sidebar-user,
    .sidebar .sidebar-menu,
    .sidebar .sidebar-footer,
    .sidebar .menu-item { transition: padding 0.32s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.2s ease, color 0.2s ease; }

    .sidebar .brand-logo-img { transition: height 0.32s cubic-bezier(0.32, 0.72, 0, 1); }

    .sidebar .menu-item { white-space: nowrap; overflow: hidden; }
    .sidebar .menu-item > span:not(.menu-badge) { transition: opacity 0.2s ease; }

    .sidebar .brand-text {
        max-height: 60px;
        overflow: hidden;
        transition: opacity 0.2s ease, max-height 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .sidebar .user-avatar { flex-shrink: 0; }
    .sidebar .user-info { min-width: 0; overflow: hidden; white-space: nowrap; transition: opacity 0.2s ease; }
    .sidebar .btn-logout span {
        display: inline-block;
        max-width: 180px;
        overflow: hidden;
        white-space: nowrap;
        vertical-align: bottom;
        transition: opacity 0.2s ease, max-width 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .sidebar.sidebar-collapsed .menu-item > span:not(.menu-badge) { display: inline; opacity: 0; }
    .sidebar.sidebar-collapsed .brand-text { display: block; opacity: 0; max-height: 0; }
    .sidebar.sidebar-collapsed .user-info { display: block; opacity: 0; }
    .sidebar.sidebar-collapsed .btn-logout span { display: inline-block; opacity: 0; max-width: 0; }
    .sidebar.sidebar-collapsed .btn-logout { gap: 0; }

    .sidebar.sidebar-collapsed .sidebar-menu { padding: 20px 12px; }
    .sidebar.sidebar-collapsed .menu-item { justify-content: flex-start; padding: 11px 0 11px 15px; }
    .sidebar.sidebar-collapsed .sidebar-user { justify-content: flex-start; padding: 16px 17px; }
}
/* ไอคอนเมนูห้ามหด (ชื่อเมนูที่จางอยู่ยังกินที่ ถ้าไม่ล็อกไว้ไอคอนจะถูกบีบจนหาย) */
.sidebar .menu-item > svg,
.sidebar .menu-item > .ico { flex-shrink: 0; }

/* ==================== ข้อความแนะนำปุ่ม (tooltip) แบบ iOS — ดู setupIosTooltips() ใน app.js ==================== */
.ios-tooltip {
    position: fixed;
    z-index: 10001;
    max-width: 280px;
    padding: 6px 11px;
    border-radius: 9px;
    background-color: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    color: #1c1c1e;
    font-size: 13.5px;
    line-height: 1.4;
    white-space: pre-line;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.16), 0 0 0 0.5px rgba(60, 60, 67, 0.18);
    pointer-events: none;
    transform-origin: bottom center;
    animation: ios-tooltip-in 0.26s var(--ios-spring) both;
}
.ios-tooltip.is-below { transform-origin: top center; }
@keyframes ios-tooltip-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .ios-tooltip { animation: none; }
}

/* แคปซูลสถิติที่กดเข้าไปดูได้ (data-go → openStatTarget() ใน app.js) — มีลูกศร › แบบ iOS */
.stat-pill[data-go] { cursor: pointer; }
.stat-pill[data-go]::after {
    content: "›";
    margin-left: auto;
    padding-left: 6px;
    font-size: 22px;
    line-height: 1;
    opacity: 0.45;
    color: inherit;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.stat-pill[data-go]:hover::after { opacity: 0.8; transform: translateX(2px); }
.stat-pill[data-go]:active { transform: scale(0.98); }
.stat-pill[data-go]:focus-visible { outline: 2px solid var(--gold-primary); outline-offset: 2px; }
.stat-pill.tone-navy[data-go]::after { color: var(--pill-navy-fg); }
.stat-pill.tone-teal[data-go]::after { color: var(--pill-teal-fg); }
.stat-pill.tone-purple[data-go]::after { color: var(--pill-purple-fg); }
.stat-pill.tone-red[data-go]::after { color: var(--pill-red-fg); }
.stat-pill.tone-orange[data-go]::after { color: var(--pill-orange-fg); }

/* เลื่อนไปที่การ์ดแล้วกระพริบขอบให้เห็นว่าอยู่ตรงไหน */
.widget.is-flash > :first-child { animation: widget-flash 1.2s ease; }
@keyframes widget-flash {
    0%, 100% { box-shadow: var(--shadow-md); }
    25%, 60% { box-shadow: 0 0 0 3px var(--gold-primary), var(--shadow-md); }
}

/* คนงานแยกรายจังหวัด */
.province-bars { display: flex; flex-direction: column; gap: 12px; }
.province-bars .bar-info .ico { --ic: var(--gold-primary); }
.province-total { margin: 4px 0 0; font-size: 13.5px; text-align: right; }

/* แดชบอร์ด > สรุปงานที่แจ้งสำเร็จ (แบบเดียวกับหน้าอื่น) */
.completed-wallet { justify-content: space-between; min-height: 150px; }
.completed-month-card { display: flex; flex-direction: column; justify-content: center; }
.completed-month-card h3 { font-size: 40px; color: var(--gold-primary); }
.widget > .fin-profit-card { flex-grow: 1; }

/* ==================== เปลี่ยนหน้า/แท็บแบบ Fade-up ทั้งระบบ (เหมือนตอนเปลี่ยนเมนูใน sidebar) ==================== */
/* กล่องเหล่านี้สลับด้วย .hidden (display:none) — พอแสดง animation จะเล่นเองทุกครั้ง ไม่ต้องแก้ JS
   แท็บแดชบอร์ด/การเงิน, มุมมองงาน ตาราง/Kanban/สรุป, ตาราง↔กราฟวงกลม, แท็บในฟอร์มนายจ้าง
   กล่องที่เปลี่ยนเนื้อหาด้วย innerHTML (พอร์ทัลนายจ้าง) ใช้ replayPageTransition() ใส่ .page-transition-in */
.db-tab-content,
#jobs-table-container,
#jobs-kanban-container,
#jobs-summary-container,
[id^="db-finance-"][id$="-table-wrap"],
[id^="db-finance-"][id$="-chart-wrap"],
#cust-tab-general,
#cust-tab-delivery,
.page-transition-in {
    animation: ios-page-in 0.48s var(--ios-spring);
}

@media (prefers-reduced-motion: reduce) {
    .db-tab-content, #jobs-table-container, #jobs-kanban-container, #jobs-summary-container,
    [id^="db-finance-"][id$="-table-wrap"], [id^="db-finance-"][id$="-chart-wrap"],
    #cust-tab-general, #cust-tab-delivery, .page-transition-in { animation: none; }
}

/* ==================== iPad / มือถือ (ปรับขนาดเฉพาะจอ 2026-10-02) ==================== */

/* ---------- iPad (แนวตั้ง ~768–1024px และแนวนอน ~1024–1366px) ---------- */
@media (max-width: 1024px) {
    /* ตาราง: ไม่ให้คอลัมน์ถูกบีบจนชื่อขึ้นบรรทัดใหม่ทีละคำ — กว้างขั้นต่ำต่อคอลัมน์ แล้วเลื่อนแนวนอนในกล่องตารางแทน */
    .data-table th { white-space: nowrap; }
    .data-table td { min-width: 96px; }
    .data-table td:first-child { min-width: 150px; }
    .table-container, .panel-content { -webkit-overflow-scrolling: touch; }
}
/* iPad แนวตั้ง / จอกลาง: แคปซูลแถวละ 3 */
@media (min-width: 641px) and (max-width: 900px) {
    .widget[data-kind="pill"] { grid-column: span 4; }
    .stat-pill { padding: 12px 16px; gap: 10px; }
    .stat-pill h3 { font-size: 22px; }
    .stat-pill p { font-size: 13.5px; }
}

/* ---------- มือถือ (แนวตั้ง ≤640px, แนวนอน = จอเตี้ย ≤500px) ---------- */
@media (max-width: 640px), (max-height: 500px) and (max-width: 950px) {
    /* หัวข้อหน้าบรรทัดเดียว ยาวเกินตัด … */
    .page-title { min-width: 0; flex: 1; }
    .page-title h2 {
        font-size: 17px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #header-date { display: none; }

    /* แคปซูล: แถวละ 2 ตัวเลขอยู่บน ชื่ออยู่ล่าง (ประหยัดพื้นที่แนวตั้ง) */
    .widget[data-kind="pill"] { grid-column: span 6; }
    .widget-board { gap: 10px; }
    .stat-pill {
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-height: 0;
        padding: 12px 14px;
        border-radius: 18px;
    }
    .stat-pill h3 { font-size: 22px; }
    .stat-pill p { font-size: 13px; line-height: 1.3; }
    .stat-pill[data-go]::after { position: absolute; top: 10px; right: 12px; font-size: 18px; }
    .widget-board[data-board="finance"] .stat-pill h3 { font-size: 16px; }

    /* ตัวกรอง/ช่องเลือก: ตัวหนังสือบรรทัดเดียว */
    select, .select-filter { font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; }

    /* บัตร Wallet ให้พอดีจอ */
    .wallet-card { padding: 20px; gap: 14px; border-radius: 22px; }
    .wallet-amount { font-size: 30px; }
    .wallet-sub { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .wallet-sub h3 { font-size: 15px; }
    .wallet-sub p { font-size: 12.5px; }

    /* ---------- ตารางเป็นการ์ดรายการแบบ iOS (ชื่อคอลัมน์ทางซ้ายจาก data-label — ดู labelTableCells() ใน app.js) ---------- */
    .data-table,
    .data-table > tbody,
    .data-table > tfoot,
    .data-table > tbody > tr,
    .data-table > tfoot > tr,
    .data-table > tbody > tr > td,
    .data-table > tfoot > tr > td { display: block; width: 100%; }
    .data-table { min-width: 0 !important; background: transparent; box-shadow: none; border: none; }
    .data-table > thead { display: none; }
    .data-table > tbody > tr,
    .data-table > tfoot > tr {
        margin: 0 0 10px;
        padding: 6px 14px;
        border-radius: 16px;
        background-color: var(--gray-card);
        box-shadow: var(--shadow-sm);
    }
    .data-table > tbody > tr > td,
    .data-table > tfoot > tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-width: 0 !important;
        padding: 8px 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--dk-line, rgba(60, 60, 67, 0.1)) !important;
        text-align: right !important;
        white-space: normal;
        background: transparent !important;
    }
    .data-table > tbody > tr > td:last-child,
    .data-table > tfoot > tr > td:last-child { border-bottom: none !important; }
    .data-table > tbody > tr > td::before,
    .data-table > tfoot > tr > td::before {
        content: attr(data-label);
        flex-shrink: 0;
        max-width: 42%;
        color: var(--text-muted);
        font-size: 13.5px;
        font-weight: 500;
        text-align: left;
    }
    .data-table > tbody > tr > td[data-label=""]::before { display: none; }
    .data-table > tbody > tr > td[data-label=""] { justify-content: flex-end; }
    /* แถวข้อความ "ไม่พบข้อมูล" (colspan) */
    .data-table > tbody > tr > td[colspan] { display: block; text-align: center !important; }
    .data-table > tbody > tr > td[colspan]::before { display: none; }
    /* กล่องรอบตารางไม่ต้องเป็นการ์ด/เลื่อนแนวนอนแล้ว */
    .table-container { background: transparent !important; box-shadow: none !important; overflow: visible !important; border-radius: 0 !important; }
    .dashboard-panel .panel-content { overflow-x: visible !important; }
    .dashboard-panel .data-table > tbody > tr { box-shadow: none; background-color: var(--dk-subtle, #f6f7fa); }
}

/* แคปซูลปรับตาม "ความกว้างจริงของกระดาน" (container query) ไม่ใช่ความกว้างจอ —
   iPad แนวนอนมีแถบเมนูกินที่ กระดานเหลือ ~900px ถ้ายังแถวละ 6 ตัวหนังสือจะแตกเป็นแนวตั้ง */
.widget-board { container-type: inline-size; container-name: board; }
@container board (max-width: 1100px) {
    .widget[data-kind="pill"] { grid-column: span 4; }
}
@container board (max-width: 620px) {
    .widget[data-kind="pill"] { grid-column: span 6; }
}
@container board (max-width: 1100px) {
    .widget[data-kind="block"] { grid-column: span max(6, var(--span, 12)); }
}
@container board (max-width: 760px) {
    .widget[data-kind="block"] { grid-column: span 12; }
}

/* แก้การ์ดตารางบนมือถือ: ช่องที่มีหลายบรรทัด (เลขบัตร/นายจ้าง) ต้องเรียงลงด้านขวา ไม่ใช่ต่อกันแนวนอนจนล้น
   ป้ายชื่อคอลัมน์ลอยซ้าย 40% ส่วนเนื้อหาอยู่ฝั่งขวา 60% ชิดขวา */
@media (max-width: 640px), (max-height: 500px) and (max-width: 950px) {
    .data-table > tbody > tr > td,
    .data-table > tfoot > tr > td {
        display: block;
        position: relative;
        min-height: 34px;
        padding: 8px 0 8px 42% !important;
        overflow-wrap: anywhere;
    }
    .data-table > tbody > tr > td::before,
    .data-table > tfoot > tr > td::before {
        position: absolute;
        left: 0;
        top: 8px;
        width: 40%;
        max-width: none;
    }
    .data-table > tbody > tr > td[data-label=""],
    .data-table > tbody > tr > td[colspan] { padding-left: 0 !important; }
    .data-table > tbody > tr > td > * { max-width: 100%; }
    .data-table > tbody > tr > td .employer-id-line,
    .data-table > tbody > tr > td div { justify-content: flex-end; }
}
@media (max-width: 640px), (max-height: 500px) and (max-width: 950px) {
    /* เลขบัตร/เลขนายจ้างยาว ๆ ในการ์ดตาราง: ให้ตัดบรรทัดได้ ไม่ล้นขอบการ์ด (ป้าย/badge ยังบรรทัดเดียว) */
    .data-table > tbody > tr > td div,
    .data-table > tbody > tr > td span:not(.badge):not(.ico) { white-space: normal !important; }
}

/* ==================== ฟอร์มรับเงิน: ช่องหมายเหตุไม่ล้นกรอบ ==================== */
/* ชื่อบัญชีธนาคารยาว ๆ ในช่อง "รับเงินทาง" ดันคอลัมน์จนช่องหมายเหตุหลุดกรอบ — ให้คอลัมน์หดได้ (minmax 0) */
.pay-form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.4fr); }
.pay-form-grid input:not([type="checkbox"]):not([type="radio"]),
.pay-form-grid select,
.form-row select,
.form-row input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-width: 0; max-width: 100%; } /* ช่องติ๊กห้ามยืด (เคยทำให้รายการประเภทกิจการเพี้ยน) */
@media (max-width: 900px) {
    .pay-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .pay-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* เมนู dropdown แบบ iOS: ตัวเลือกบัญชีธนาคาร/เงินสดมีโลโก้ */
.ios-select-option > span:first-child[title],
.ios-select-option > .ico { flex-shrink: 0; }
.ios-select-option > span:first-child[title] { width: 22px !important; height: 22px !important; }
.ios-select-text { overflow: hidden; text-overflow: ellipsis; }

/* ==================== ปฏิทินเลือกวันที่แบบ iOS — ดู setupIosDatePickers() ใน app.js ==================== */
.ios-calendar {
    position: fixed;
    z-index: 10000;
    width: 300px;
    padding: 14px 12px 10px;
    border-radius: 18px;
    background-color: var(--gray-card);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--dk-line, #e2e8f0);
    transform-origin: top left;
    animation: ios-dropdown-in 0.28s cubic-bezier(0.32, 1.25, 0.6, 1) both;
    user-select: none;
}
.ios-calendar.is-above { transform-origin: bottom left; }
.ios-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 10px;
}
.ios-cal-head strong { font-size: 16px; font-weight: 600; color: var(--navy-dark); }
.ios-cal-head .ios-cal-be { font-size: 12.5px; font-weight: 400; color: var(--text-muted, #8a8f98); margin-left: 4px; }
.ios-cal-nav { display: flex; gap: 2px; }
.ios-cal-nav button {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background-color: var(--calm-bg, var(--gold-light));
    color: var(--gold-primary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.ios-cal-nav button:hover { background-color: var(--gold-light); }
.ios-cal-week,
.ios-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    text-align: center;
}
.ios-cal-week span {
    padding: 4px 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}
.ios-cal-day {
    justify-self: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 14.5px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.ios-cal-day:hover:not(:disabled) { background-color: var(--gold-light); }
.ios-cal-day.is-other { color: var(--text-muted); opacity: 0.45; }
.ios-cal-day.is-today { color: var(--gold-primary); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--gold-border); }
.ios-cal-day.is-selected {
    background-color: var(--gold-primary);
    color: var(--on-primary, #ffffff);
    font-weight: 600;
    opacity: 1;
    box-shadow: 0 4px 12px var(--btn-glow, rgba(45, 108, 246, 0.28));
}
.ios-cal-day:disabled { opacity: 0.2; cursor: default; }
.ios-cal-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    padding: 8px 4px 0;
    border-top: 1px solid var(--dk-line, #e5e5ea);
}
.ios-cal-foot button {
    padding: 5px 14px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--gold-primary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.ios-cal-foot button[data-act="clear"] { color: var(--text-muted); font-weight: 500; }
.ios-cal-foot button[data-act="today"] { background-color: var(--gold-light); }
.ios-cal-foot button:hover { background-color: var(--gold-light); }

/* ช่องพิมพ์วันที่ (วัน/เดือน/ปี) + ปุ่มปฏิทินในช่อง */
.date-text-wrap { position: relative; display: block; width: 100%; }
.date-text-wrap > input { width: 100%; padding-right: 42px !important; }
.date-text-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
}
.date-text-btn:hover { background-color: var(--gold-light); }

/* ==================== ช่องแนบไฟล์/รูปแบบ iOS (ทุก input type="file" ในระบบ) ==================== */
/* แทนหน้าตา "Choose File / No file chosen" ของเบราว์เซอร์: กรอบเส้นประมุมโค้ง + ปุ่มสีหลักโค้งมน */
input[type="file"] {
    width: 100%;
    max-width: 100%;
    padding: 10px !important;
    border: 1.5px dashed var(--dk-line, #c9d3e3) !important;
    border-radius: 14px !important;
    background-color: var(--dk-subtle, #f7f8fb) !important;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
input[type="file"]:hover {
    border-color: var(--gold-primary) !important;
    background-color: var(--gold-light) !important;
}
input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 16px;
    border: none;
    border-radius: 999px;
    background-color: var(--gold-primary);
    color: var(--on-primary, #ffffff);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}
input[type="file"]::file-selector-button:hover { filter: brightness(1.08); }
input[type="file"]:active::file-selector-button { transform: scale(0.97); }
/* ช่องไฟล์ที่ซ่อนไว้ (ใช้ปุ่มอื่นสั่งเปิด) ยังซ่อนเหมือนเดิม */
input[type="file"].hidden,
input[type="file"][style*="display: none"],
input[type="file"][style*="display:none"] { display: none !important; }

/* ==================== กรอบไอคอนโลโก้ (หน้า login / ตั้งรหัสใหม่ / หน้าโหลด) ตามธีม ==================== */
/* โลโก้ยังหลายสีเหมือนเดิม — กรอบเป็นสีอ่อนของสีหลักธีม + เส้นขอบบาง (กรมท่า / ชมพู / มืด) */
:root {
    --logo-tile-bg: #ffffff; /* ธีมสว่าง: กรอบขาวล้วน (owner's request 2026-10-08) */
    --logo-tile-ring: rgba(0, 0, 0, 0.08);
    --logo-tile-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}
#login-view .login-logo,
#reset-password-view .login-logo,
.app-splash-logo {
    background: var(--logo-tile-bg);
    box-shadow: var(--logo-tile-shadow), inset 0 0 0 1.5px var(--logo-tile-ring);
}

/* กราฟวงกลมในแดชบอร์ด (สัญชาติ / จังหวัด / สถานะงาน) */
.dash-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 6px 0;
}
.dash-pie svg { width: 180px; height: 180px; }
#db-nationality-table-wrap,
#db-nationality-chart-wrap,
#db-provinces-table-wrap,
#db-provinces-chart-wrap { animation: ios-page-in 0.48s var(--ios-spring); }

/* ชื่อสาขา (เช่น "สำนักงานใหญ่") ในฟอร์มนายจ้าง: ช่องมนแบบ iOS แทนกรอบเส้นประสี่เหลี่ยม */
.branch-name-input {
    width: 260px;
    max-width: 100%;
    padding: 7px 14px !important;
    border: 1px solid var(--gold-border) !important;
    border-radius: 999px !important;
    background-color: var(--dk-card, #ffffff) !important;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.branch-name-input:focus {
    outline: none;
    border-color: var(--gold-primary) !important;
    box-shadow: 0 0 0 3px var(--gold-light);
}

/* ==================== หน้าต่างตรวจสอบข้อมูลก่อนบันทึก (confirmBeforeSave ใน app.js) ==================== */
.ui-dialog:has(.ui-dialog-summary) { width: min(560px, calc(100vw - 32px)); max-width: none; }
.ui-dialog-summary {
    width: 100%;
    max-height: min(52vh, 460px);
    overflow-y: auto;
    margin: 4px 0 6px;
    padding: 4px 14px;
    border-radius: 14px;
    background-color: var(--dk-subtle, #f6f7fa);
    text-align: left;
}
.ui-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--dk-line, rgba(60, 60, 67, 0.1));
    font-size: 13.5px;
}
.ui-sum-row:last-child { border-bottom: none; }
.ui-sum-label { flex: 0 0 42%; color: var(--text-muted); }
.ui-sum-value {
    flex: 1;
    min-width: 0;
    color: var(--text-dark);
    font-weight: 600;
    text-align: right;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.ui-sum-heading {
    padding: 12px 0 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gold-primary);
}

/* ==================== ปุ่มถ่ายรูปเอกสาร (เฉพาะ iPad/มือถือ — setupCameraButtons ใน app.js) ==================== */
.camera-btn {
    position: relative;
    z-index: 2;               /* อยู่เหนือช่องเลือกไฟล์ที่โปร่งใสคลุมกล่องแนบเอกสาร */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 9px 16px;
    min-height: 40px;
    border: none;
    border-radius: 999px;
    background-color: var(--gold-primary);
    color: var(--on-primary, #ffffff);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(45, 79, 163, 0.25);
    -webkit-tap-highlight-color: transparent;
}
.camera-btn .ico { --ic: currentColor; }
.camera-btn:active { transform: scale(0.96); }
/* ในรายการแฟ้มเอกสารคนงาน: ปุ่มเล็กต่อจากปุ่ม "แนบ" */
.camera-btn.fv-cam { margin: 0 0 0 6px; padding: 5px 12px; min-height: 32px; font-size: 13px; }
/* บนเครื่องที่มีกล้อง: ข้อความ "กด Ctrl+V วางภาพ" ไม่เกี่ยว ซ่อนไว้ให้กล่องโล่ง */
body.has-camera .upload-hint { display: none; }

/* ==================== โน้ตจากนายจ้าง (พอร์ทัล → เจ้าหน้าที่) ==================== */
.client-note-box {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 14px;
    background-color: var(--pill-navy-bg, #e6ecfa);
    color: var(--pill-navy-sub, #2b3a63);
}
.client-note-head { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.client-note-head small { font-weight: 400; opacity: 0.75; margin-left: 6px; }
.client-note-text { font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.client-note-badge .ico { --ic: currentColor; }
.cp-note-cell { max-width: 260px; }
.cp-note-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
    font-size: 13px;
}
.client-note-dialog { width: min(480px, calc(100vw - 32px)); max-width: none; }
.client-note-input {
    width: 100%;
    margin: 4px 0 10px;
    padding: 12px 14px;
    border: 1px solid var(--dk-line, #d8dee9);
    border-radius: 14px;
    background-color: var(--dk-card, #ffffff);
    color: var(--text-dark);
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.5;
    resize: vertical;
}
.client-note-input:focus { outline: none; border-color: var(--gold-primary); box-shadow: 0 0 0 3px var(--gold-light); }

/* ==================== แบบ บต.46 หนังสือรับรองการจ้าง (openBt46Modal ใน app.js) — กระดาษขาวเสมอ ==================== */
.bt46-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 12.5px;
}

.bt46-sheet {
    background: #ffffff;
    color: #111111;
    padding: 28px 34px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.75;
}

.bt46-sheet p { margin: 0 0 4px; }
.bt46-sheet h4 { margin: 10px 0 4px; font-size: 14.5px; color: #111111; }
.bt46-head { position: relative; text-align: center; margin-bottom: 8px; }
.bt46-formno { position: absolute; left: 0; top: 0; text-align: left; font-weight: 600; }
.bt46-title { font-size: 17px; font-weight: 700; }
.bt46-en { font-size: 11.5px; color: #444444; font-weight: 400; }
.bt46-ind { padding-left: 32px; }

.bt46-f {
    display: inline-block;
    border-bottom: 1px dotted #555555;
    padding: 0 4px;
    min-height: 1.4em;
    vertical-align: bottom;
    outline: none;
}

.bt46-f:hover, .bt46-f:focus { background: #fff8db; }
.bt46-box { cursor: pointer; font-size: 15px; user-select: none; }

.bt46-table { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
.bt46-table th, .bt46-table td { border: 1px solid #333333; padding: 4px 8px; text-align: center; color: #111111; }
.bt46-table td { height: 34px; outline: none; }

.bt46-certify { text-align: center; margin: 16px 0 10px; font-weight: 600; }
.bt46-sign { margin-left: 45%; display: grid; gap: 6px; }
.bt46-sigline { display: inline-block; width: 200px; height: 48px; border-bottom: 1px dotted #555555; vertical-align: bottom; text-align: center; }
.bt46-sigline img { max-height: 46px; max-width: 196px; }
.bt46-note { margin-top: 18px; font-size: 12px; }

@media print {
    .bt46-sheet { padding: 0; border-radius: 0; font-size: 12.5px; line-height: 1.6; }
    .bt46-f:hover, .bt46-f:focus { background: none; }
}

/* ใบงาน "ไม่เรียกเก็บเงิน" (isJobNoCharge ใน app.js) — โทนเทาอมเขียว แยกจาก "ชำระแล้ว" */
.badge-nocharge {
    font-size: 12.5px;
    padding: 2px 6px;
    background-color: var(--dk-subtle, #f1f5f9);
    color: var(--dk-muted, #475569);
    border: 1px dashed var(--dk-line, #cbd5e1);
}

/* เอกสารที่แนบตอนปิดงาน — ในแบนเนอร์ "ปิดงานแล้ว" ของหน้าต่างใบงาน (jobCloseDocsHtml) */
.job-close-docs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 8px;
    font-size: 13px;
}
.job-close-docs small { flex-basis: 100%; }

/* สลิปรับเงิน (หน้าบิล / รับเงิน-มัดจำ) — paymentSlipBoxHtml ใน app.js */
.payment-slip-box { padding: 14px; }
.payment-slip-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.payment-slip-list:empty { display: none; }
.payment-slip-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 8px 12px;
    background-color: var(--dk-subtle, #f8fafc);
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: var(--radius-sm);
    font-size: 13px;
}
.payment-slip-item a { font-weight: 500; color: var(--navy-dark); }
.payment-slip-item small { flex: 1; min-width: 160px; }
.payment-slip-item .btn { padding: 3px 8px; font-size: 12.5px; }

/* ป้ายผลตรวจ QR บนสลิป (slipQrBadgeHtml) */
.slip-qr-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.slip-qr-ok   { color: var(--dk-ok, #047857);   background-color: var(--dk-ok-bg, #ecfdf5); }
.slip-qr-warn { color: var(--dk-warn, #92400e); background-color: var(--dk-warn-bg, #fffbeb); }
.slip-qr-none { color: var(--dk-muted, #64748b); background-color: var(--dk-subtle, #f1f5f9); }

/* งานต่ออายุ (renderRenewalCases, owner 2026-10-20): แท็บ ถึงรอบ / กำลังทำ / เสร็จแล้ว + จุดขั้นตอน */
.renewal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.rn-count:empty { display: none; }
.rn-count {
    display: inline-block;
    min-width: 22px;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    background-color: var(--dk-subtle, #e3e8f0);
    color: var(--text-dark);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}
.btn-gold .rn-count { background-color: rgba(255, 255, 255, .25); color: #fff; }
.rn-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.rn-table td, .rn-table th { vertical-align: middle; }
.rn-table .rn-check { width: 36px; text-align: center; }
.rn-table .rn-check input, .rn-book-pick input { width: 18px; height: 18px; accent-color: var(--gold-primary); }
.rn-book-pick { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.rn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 20px 14px; }
/* ตัวกรองจังหวัด ใช้หน้าตา .select-filter มาตรฐาน (ความสูง/ระยะขอบ/ลูกศรเท่าตัวกรองอื่นในระบบ) แค่กำหนดความกว้าง */
.rn-toolbar .rn-province { width: 300px; max-width: 100%; text-overflow: ellipsis; }
/* ถึงรอบ: ทุกตารางนายจ้างกว้างคอลัมน์เท่ากัน (owner 2026-10-20) */
.rn-due-table { table-layout: fixed; width: 100%; }
.rn-due-table .rd-check { width: 52px; }
.rn-due-table .rd-exp, .rn-due-table .rd-pass { width: 170px; }
.rn-due-table .rd-book { width: 170px; }
.rn-visa-pick { width: 100%; max-width: 160px; font-size: 13.5px; padding: 5px 8px; }
.rn-due-table .rd-act { width: 150px; }
.rn-due-table td { overflow: hidden; text-overflow: ellipsis; }
/* ช่องติ๊กไม่ต้องมี padding/จุดไข่ปลา (เคยขึ้น ".." หลังช่องติ๊ก) */
.rn-due-table th.rn-check, .rn-due-table td.rn-check { padding-left: 0; padding-right: 0; text-overflow: clip; overflow: visible; }
.rn-groups { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 18px; }
.rn-prov-head { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--text-dark); }
.rn-prov-head .text-muted { font-size: 13.5px; font-weight: 500; margin-left: 6px; }
.rn-emp { margin-bottom: 12px; }
.rn-emp-head { display: flex; align-items: center; gap: 10px; padding: 6px 4px 8px; font-size: 14.5px; }
.rn-emp-head input { width: 18px; height: 18px; accent-color: var(--gold-primary); }

/* แท็บ "กำลังทำ" แบบ A (owner 2026-10-20): กลุ่มนายจ้าง แถวละคน แถบความคืบหน้า + แถบคำสั่งลอยด้านล่าง */
.rn-agroup { border-radius: 18px; overflow: hidden; background-color: var(--dk-card, #ffffff); box-shadow: var(--shadow-sm); }
.rn-agroup-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--dk-line, #e3e6ec); font-size: 15px; }
.rn-agroup-head input, .rn-arow input { width: 18px; height: 18px; accent-color: var(--gold-primary); }
.rn-arow {
    display: grid;
    grid-template-columns: 30px 260px minmax(0, 1fr) 140px 170px 200px; /* ทุกคอลัมน์กว้างคงที่ ทุกแถวจึงตรงกัน (owner 2026-10-28) */
    gap: 14px;
    align-items: center;
    padding: 11px 16px;
    border-top: 1px solid var(--dk-line, #eef0f4);
}
.rn-agroup-head + .rn-arow { border-top: 0; }
.rn-arow.is-selected { background-color: color-mix(in srgb, var(--gold-primary) 8%, transparent); }
.rn-arow-name { display: flex; flex-direction: column; min-width: 0; }
.rn-arow-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-uid { font-variant-numeric: tabular-nums; letter-spacing: .2px; color: var(--text-dark); }
.rn-arow-progress { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rn-arow-appt { font-size: 13.5px; }
.rn-arow-bill { min-width: 0; }
.rn-bill-pill { border: 0; cursor: pointer; font: inherit; font-size: 12.5px; }
.rn-bill-pill:hover { filter: brightness(.95); }
.rn-bar { display: flex; gap: 4px; }
.rn-seg { flex: 1; height: 9px; padding: 0; border: 0; border-radius: 999px; background-color: var(--dk-line, #dde1e8); cursor: pointer; }
.rn-seg.is-done { background-color: var(--gold-primary); }
.rn-seg.is-next { background-color: color-mix(in srgb, var(--gold-primary) 40%, transparent); }
.rn-seg.is-book { flex: .6; }
/* ความคืบหน้าแบบวงแหวน (owner 2026-10-27, แบบที่ 5) — renewalRingHtml / showRenewalStepsPop
   สายต่ออายุ/ขึ้นทะเบียน = สีหลักของธีม (ธีมชมพูใช้น้ำเงินแบบธีมสว่าง), สายทำเล่ม = เขียว (สีสถานะ เหมือนกันทุกธีม) */
/* 2 ช่องคงที่: ต่ออายุ | ทำเล่ม — แถวที่ไม่มีทำเล่มเว้นช่องขวาว่าง วงแหวนต่ออายุจึงตรงกันทุกแถว */
.rn-rings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.rn-rings > .rn-ring-btn { justify-self: start; max-width: 100%; }
.rn-ring-btn {
    --rn-c: var(--gold-primary);
    display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 10px 4px 4px;
    border: 0; border-radius: 16px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer;
    transition: background-color .18s ease, transform .18s var(--ios-spring, ease);
}
.rn-ring-btn.is-book { --rn-c: #2f9a5a; }
.rn-ring-btn:hover { background-color: color-mix(in srgb, var(--rn-c) 8%, transparent); }
.rn-ring-btn:active { transform: scale(.97); }
.rn-ring {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    background: conic-gradient(var(--rn-c) var(--deg), var(--dk-line, #e1e5ed) 0);
}
.rn-ring-in { width: 34px; height: 34px; border-radius: 999px; background: var(--dk-card, #ffffff); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; }
.rn-ring-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.rn-ring-txt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-ring-name { font-size: 12.5px; font-weight: 600; color: var(--rn-c); }
.rn-steps-pop {
    position: fixed; z-index: 1150; width: 340px; padding: 6px 0 8px; border-radius: 18px;
    background: var(--dk-card, #ffffff); color: var(--text-dark); border: 1px solid var(--dk-line, #e6e8ee);
    box-shadow: 0 12px 40px rgba(20, 30, 60, .2); pointer-events: none;
}
.rn-steps-pop.is-pinned { pointer-events: auto; width: 400px; }
.rn-steps-pop:not(.hidden) { animation: finRangePopIn .26s var(--ios-spring, ease) both; transform-origin: top left; }
.rn-steps-pop { --rn-c: var(--gold-primary); }
.rn-steps-pop.is-book { --rn-c: #2f9a5a; }
.rn-sp-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 16px; font-size: 13.5px; color: var(--rn-c); }
.rn-sp-head > div { flex: 1; }
.rn-sp-head small { display: block; color: var(--dk-muted, #5b6475); font-size: 12.5px; }
.rn-sp-close { width: 30px; height: 30px; border-radius: 999px; border: 0; background: var(--dk-subtle, #eceef3); color: var(--text-dark); font-size: 17px; cursor: pointer; }
.rn-sp-row { display: flex; align-items: center; gap: 10px; padding: 6px 16px; font-size: 14px; }
.rn-sp-dot { width: 20px; height: 20px; flex-shrink: 0; border-radius: 999px; box-sizing: border-box; border: 2px solid var(--dk-line, #cfd4de); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.rn-sp-row.is-done .rn-sp-dot { background: var(--rn-c); border-color: var(--rn-c); }
.rn-sp-row.is-next .rn-sp-dot { border-color: var(--rn-c); }
.rn-sp-row.is-skipped .rn-sp-dot, .rn-sp-row.is-ext .rn-sp-dot { background: var(--dk-line, #cfd4de); color: var(--dk-muted, #5b6475); }
.rn-sp-label { flex: 1; min-width: 0; }
.rn-sp-row.is-next .rn-sp-label { font-weight: 700; }
.rn-sp-row.is-todo .rn-sp-label { color: var(--dk-muted, #8a93a5); }
.rn-sp-when { font-size: 12.5px; color: var(--dk-muted, #5b6475); white-space: nowrap; }
.rn-sp-row.is-next .rn-sp-when { color: var(--rn-c); font-weight: 600; }
.rn-sp-act { padding: 3px 10px; font-size: 13px; border: 0; background: var(--dk-subtle, #eceef3); color: var(--text-dark); white-space: nowrap; }
.rn-sp-act.is-primary { background: var(--rn-c); color: #fff; }
.rn-book-btn { background-color: color-mix(in srgb, #2f9a5a 14%, transparent); color: #1e6b3a; }
.rn-next-stack { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.rn-next-stack:empty { display: none; }
.rn-book-appt { display: block; color: #1e6b3a; }
.rn-next-btn { background-color: color-mix(in srgb, var(--gold-primary) 12%, transparent); color: var(--gold-primary); border: 0; font-weight: 600; white-space: nowrap; }
.rn-head-count { font-size: 15px; font-weight: 500; }
.rn-selbar {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 20px;
    border-radius: 999px;
    background-color: #1b2230;
    color: #fff;
    box-shadow: 0 12px 32px rgba(10, 20, 40, .3);
}
.rn-selbar .rn-selbar-btn { background-color: rgba(255, 255, 255, .14); color: #fff; border: 0; }
.rn-selbar .rn-selbar-clear { background: transparent; color: #c9d0dc; border: 0; }
.rn-selbar .rn-selbar-danger { background-color: rgba(255, 107, 94, .18); color: #ff9b91; border: 0; }
.rn-selbar .btn:disabled { opacity: .45; }
/* ครึ่งจอ (owner 2026-10-28: สถานะซ้อนกัน) — 2 บรรทัดต่อคน: ชื่อ | วงแหวน | ปุ่ม / วันนัด | บิล ใต้วงแหวนและปุ่ม,
   วงแหวนต่ออายุ/ทำเล่มเรียงบนลงล่าง (ยังตรงกันทุกแถว) */
@media (max-width: 1400px) {
    .rn-arow { grid-template-columns: 30px minmax(150px, 210px) minmax(0, 1fr) 170px; row-gap: 6px; }
    .rn-arow > input, .rn-arow > span:first-child { grid-row: 1 / span 2; }
    .rn-arow-name { grid-column: 2; grid-row: 1 / span 2; }
    .rn-arow-progress { grid-column: 3; grid-row: 1; }
    .rn-arow .rn-actions { grid-column: 4; grid-row: 1; }
    .rn-arow-appt { grid-column: 3; grid-row: 2; }
    .rn-arow-bill { grid-column: 4; grid-row: 2; }
    .rn-rings { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .rn-arow { grid-template-columns: 30px minmax(0, 1fr); }
    .rn-arow-name, .rn-arow-progress, .rn-arow-appt, .rn-arow-bill, .rn-arow .rn-actions { grid-row: auto; }
    .rn-arow-progress, .rn-arow-appt, .rn-arow-bill, .rn-arow .rn-actions { grid-column: 2; }
}

/* ฐานข้อมูลรอขึ้นทะเบียน (owner 2026-10-20) */
.reg-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px 0; font-size: 13.5px; }
.reg-views { margin: 0 !important; }
.reg-row {
    display: grid;
    grid-template-columns: 26px 46px minmax(180px, 1fr) minmax(260px, 2fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid var(--dk-line, #eef0f4);
}
.rn-agroup-head + .reg-row { border-top: 0; }
.reg-row.is-selected { background-color: color-mix(in srgb, var(--gold-primary) 8%, transparent); }
.reg-row > input { width: 18px; height: 18px; accent-color: var(--gold-primary); }
.rn-selbar .reg-selbar-round { min-height: 38px; padding: 0 34px 0 14px; border-radius: 999px; border: 0; background-color: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: 14px; }
.rn-selbar .reg-selbar-round option { color: #1b2230; }
.reg-avatar { width: 42px; height: 42px; }
.reg-name { display: flex; flex-direction: column; min-width: 0; }
.reg-added { font-size: 13px; }
.reg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.reg-chip { padding: 2px 9px; border-radius: 999px; background-color: var(--dk-subtle, #eef0f4); color: var(--text-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.reg-chip.is-ok { background-color: var(--dk-ok-bg, #e6f2ea); color: var(--dk-ok, #1f6a3b); }
.reg-chip.is-miss { background-color: var(--dk-bad-bg, #fbe6e3); color: var(--dk-bad, #a62e22); }
.reg-head-add { margin-left: auto; }
.reg-del-round { display: block; margin-top: 8px; }
.reg-body .reg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.reg-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.reg-slots-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reg-slot {
    position: relative;
    min-height: 96px;
    padding: 10px;
    border: 2px dashed var(--dk-line, #cfd4dd);
    border-radius: 16px;
    background: transparent;
    color: var(--text-dark);
    font: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}
.reg-slot.is-filled { border-style: solid; border-color: color-mix(in srgb, var(--gold-primary) 40%, transparent); background-color: color-mix(in srgb, var(--gold-primary) 6%, transparent); }
.reg-slot img { width: 100%; max-height: 70px; object-fit: cover; border-radius: 10px; }
.reg-slot strong { font-size: 13.5px; }
.reg-slot small { color: var(--text-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.reg-sub { margin: 4px 0 8px; color: var(--text-muted); font-size: 13.5px; }
.reg-dup { padding: 10px 14px; border-radius: 12px; background-color: var(--dk-warn-bg, #fdf0dc); color: var(--dk-warn, #8a4600); font-size: 13.5px; }
.reg-round-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 8px; }
.reg-round-list { max-height: 46vh; overflow-y: auto; border-radius: 14px; background-color: var(--dk-card, #fff); }
.reg-round-emp { padding: 8px 14px 4px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.reg-round-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--dk-line, #eef0f4); cursor: pointer; }
.reg-round-row input { width: 18px; height: 18px; accent-color: var(--gold-primary); }
.reg-round-row > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.cp-reg-row { grid-template-columns: 40px minmax(160px, 1fr) minmax(0, 2fr); }
.cp-reg-progress { flex: 1 1 260px; min-width: 200px; }
/* ครึ่งจอ (owner 2026-10-28): แถวรอขึ้นทะเบียนกว้างขั้นต่ำ ~650px — เรียงลงล่างตั้งแต่จอ ≤ 1100px */
@media (max-width: 1100px) {
    .reg-row { grid-template-columns: 26px 46px minmax(0, 1fr); }
    .reg-row > :nth-child(n+4) { grid-column: 3; }
}
@media (max-width: 760px) {
    .reg-slots { grid-template-columns: 1fr 1fr; }
}

/* ฝั่งเจ้าหน้าที่: รอบที่นายจ้างเปิดเองจากพอร์ทัล (owner 2026-10-20) */
.rn-client-tag {
    align-self: flex-start;
    margin-top: 3px;
    padding: 1px 9px;
    border-radius: 999px;
    background-color: color-mix(in srgb, #7c3aed 15%, transparent);
    color: color-mix(in srgb, #7c3aed 75%, var(--text-dark));
    font-size: 12.5px;
    font-weight: 700;
}
.rn-client-note { color: var(--text-muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ต่อที่อื่น / ทำเล่มที่อื่น (owner 2026-10-20) */
.rn-ext-tag, .rn-done-tag {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.rn-ext-tag { background-color: var(--dk-subtle, #eceff4); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--dk-line, #d5dae3); }
.rn-done-tag { background-color: color-mix(in srgb, var(--gold-primary) 12%, transparent); color: var(--gold-primary); }
.rn-seg.is-ext { background: repeating-linear-gradient(45deg, var(--dk-line, #cfd4dd) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--dk-line, #cfd4dd); }
.cp-rn-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* พอร์ทัลลูกค้า แท็บ "ต่ออายุ" */
.cp-tab-badge:empty { display: none; }
.cp-tab-badge { margin-left: 4px; padding: 0 7px; border-radius: 999px; background-color: var(--danger, #c0392b); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 19px; }
.cp-rn-card { margin-bottom: 14px; padding: 0; overflow: hidden; }
.cp-rn-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--dk-line, #e3e6ec); }
.cp-rn-head h3 { margin: 0; font-size: 16.5px; }
/* ปุ่มส่งคำขออยู่บน "เลือกทั้งหมด" (owner 2026-10-20) */
.cp-rn-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cp-rn-head h3 .text-muted { font-weight: 500; font-size: 14px; }
.cp-rn-empty { margin: 0; padding: 16px 18px; }
.cp-rn-row { display: grid; grid-template-columns: 26px 40px minmax(160px, 1fr) 170px 190px 120px; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--dk-line, #eef0f4); font-size: 14px; }
.cp-rn-row:first-of-type { border-top: 0; }
.cp-rn-row.is-selected { background-color: color-mix(in srgb, var(--gold-primary) 8%, transparent); }
.cp-rn-row > input { width: 18px; height: 18px; accent-color: var(--gold-primary); }
.cp-rn-active { grid-template-columns: minmax(160px, 240px) minmax(0, 1fr) 170px 150px auto; }
.cp-rn-done { grid-template-columns: minmax(160px, 1fr) 160px 220px 140px; }
.cp-rn-name { display: flex; flex-direction: column; min-width: 0; }
.cp-rn-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* พอร์ทัลลูกค้า แท็บต่ออายุ: แถวกว้างขั้นต่ำ ~700–770px — ครึ่งจอ (≤ 1000px) เรียงลงล่าง (owner 2026-10-28) */
@media (max-width: 1000px) {
    .cp-rn-row, .cp-rn-active, .cp-rn-done { grid-template-columns: 26px minmax(0, 1fr); }
    .cp-rn-row > :nth-child(n+3) { grid-column: 2; }
    .cp-rn-active > *, .cp-rn-done > * { grid-column: 1 / -1; }
}

/* หน้าออกบิล: แถวของงานต่ออายุ สีเขียวอมฟ้า แยกจากใบงานทั่วไป (owner 2026-10-20) */
.data-table tr.is-renewal-row > td { background-color: color-mix(in srgb, #0d9488 10%, transparent); }
.data-table tr.is-renewal-row > td:first-child { box-shadow: inset 3px 0 0 #0d9488; }
/* แท็บ ใบงานทั่วไป / งานต่ออายุ ในหน้าออกบิลและหน้าต่างรวมบิล */
.billing-kind-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
/* หน้าต่าง "รวมใบสั่งงานออกบิลชุด" — รายการงานต่ออายุสีเดียวกัน */
.is-renewal-item { background-color: color-mix(in srgb, #0d9488 10%, transparent); box-shadow: inset 3px 0 0 #0d9488; }
.is-renewal-item .rn-bill-tag { margin: 0 0 0 6px; }
.rn-bill-tag {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 9px;
    border-radius: 999px;
    background-color: color-mix(in srgb, #0d9488 18%, transparent);
    color: color-mix(in srgb, #0d9488 70%, var(--text-dark));
    font-size: 12.5px;
    font-weight: 700;
}
.rn-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.rn-empty { text-align: center; padding: 24px !important; color: var(--text-muted); }

/* รูปคนงานในตารางหน้าต่ออายุ/ทำเล่ม (renderRenewalGroups) — วงกลมแบบเดียวกับตารางคนงาน */
.renewal-worker-cell { display: flex; align-items: center; gap: 10px; }
.renewal-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dk-subtle, #f1f5f9);
    border: 1px solid var(--dk-line, #cbd5e1);
    color: var(--text-muted);
}
.renewal-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ช่องชื่อต้นทุนในราคามาตรฐาน — ใช้ dropdown แบบ .search-suggest-dropdown (bindCostNameSuggest) แต่ไม่มีไอคอนแว่นขยาย */
.search-box.price-cost-name-box { width: 260px; max-width: 100%; }
.search-box.price-cost-name-box input.price-cost-name { width: 100%; padding: 7px 10px; border-radius: 10px; }

/* ตารางหน้าต่ออายุ/ทำเล่ม — แต่ละกลุ่มเป็นตารางแยก จึงล็อกความกว้างคอลัมน์ให้ทุกกลุ่มตรงกัน (renderRenewalGroups) */
.renewal-table { table-layout: fixed; width: 100%; min-width: 1080px; }
.renewal-table td, .renewal-table th { overflow-wrap: anywhere; }
.renewal-table .rc-id { width: 17%; }
.renewal-table .rc-name { width: 19%; }
.renewal-table .rc-nat { width: 8%; }
.renewal-table .rc-emp { width: 16%; }
.renewal-table .rc-exp { width: 9%; }
.renewal-table .rc-status { width: 9%; }
.renewal-table .rc-book { width: 13%; }
.renewal-table .rc-bookexp { width: 9%; }
/* ครึ่งจอ: คอลัมน์เลขประจำตัวแคบ — ให้หัวข้อขึ้นบรรทัดใหม่ได้ (ตัวเลขไม่ตัดกลาง) แทนการล้นไปทับรูปคนงาน */
.renewal-table .worker-id-line { white-space: normal; }
.renewal-table .worker-id-line b { white-space: nowrap; }

/* พอร์ทัลนายจ้าง > คนงานของฉัน — กลุ่มตามวันหมดอายุใบอนุญาต ตารางแบบหน้าข้อมูลคนงาน (renderClientWorkersTab) */
.cp-worker-group { margin-top: 16px; }
.cp-worker-group .panel-header h3 { margin: 0; font-size: 15px; }
.cp-worker-group-meta { display: inline-flex; gap: 10px; font-size: 13px; color: var(--text-muted); }
.cp-workers-table { table-layout: fixed; width: 100%; min-width: 1100px; }
.cp-workers-table td, .cp-workers-table th { overflow-wrap: anywhere; }
.cp-workers-table .cw-id { width: 17%; }
.cp-workers-table .cw-name { width: 19%; }
.cp-workers-table .cw-nat { width: 8%; }
.cp-workers-table .cw-pp { width: 10%; }
.cp-workers-table .cw-exp { width: 13%; }
.cp-workers-table .cw-status { width: 9%; }
.cp-workers-table .cw-note { width: 11%; }
.cp-workers-table .cw-act { width: 13%; }
/* พอร์ทัลนายจ้าง > งานที่แจ้ง — แต่ละกลุ่มสถานะเป็นตารางแยก ความกว้างคอลัมน์ตายตัวให้ตรงกันทุกกลุ่ม (renderClientJobsTab) */
.cp-jobs-table { table-layout: fixed; width: 100%; min-width: 900px; }
.cp-jobs-table td, .cp-jobs-table th { overflow-wrap: anywhere; }
.cp-jobs-table .cj-no { width: 14%; }
.cp-jobs-table .cj-type { width: 20%; }
.cp-jobs-table .cj-worker { width: 20%; }
.cp-jobs-table .cj-date { width: 12%; }
.cp-jobs-table .cj-status { width: 14%; }
.cp-jobs-table .cj-docs { width: 20%; }
.cp-worker-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
/* ปุ่มแจ้งออกคนงาน (clientExitButtonHtml) */
.cp-worker-actions .cp-exit-btn { color: var(--dk-bad, #dc2626); }
.cp-badge-archived { background-color: #64748b; color: #ffffff; }

/* หน้าต่างแบบกว้าง (showUiDialog wide) — เช่น ข้อมูลคนงานในพอร์ทัลนายจ้าง: หัวข้อเรียงเป็นคอลัมน์ ไม่ต้องเลื่อนลง */
.ui-dialog.ui-dialog-wide { max-width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.ui-dialog-wide .ui-dialog-card { flex-direction: row; align-items: center; }
.ui-dialog-wide .ui-dialog-card-pic { width: 88px; height: 88px; }
.ui-dialog-wide .ui-dialog-summary {
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 4px 24px;
    padding: 8px 16px 12px;
}
.ui-dialog-wide .ui-sum-row { padding: 6px 0; }
@media (max-width: 720px) {
    /* จอมือถือแคบเกินจะวางหลายคอลัมน์ — ให้เลื่อนในหน้าต่างได้ตามปกติ */
    .ui-dialog.ui-dialog-wide { overflow-y: auto; }
}
.ui-dialog-wide .ui-dialog-icon { display: none; } /* หน้าต่างดูข้อมูล ไม่ใช่คำเตือน — ไม่ต้องมีไอคอนเตือน */

/* ระบบจัดการแจ้งงาน: อีเมลใต้ชื่อคนงาน + ช่องหมายเหตุสั้น ≤ 20 ตัวอักษร (saveJobRemark) */
.job-worker-email { font-size: 13px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; }
.job-remark-input {
    width: 100%;
    min-width: 120px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: 999px; /* ทรงแคปซูลเหมือนช่อง Order No. */
    font-family: inherit;
    font-size: 13px;
    background-color: var(--dk-card, #ffffff);
    color: var(--text-dark);
}
.job-remark-input:focus { outline: none; border-color: var(--gold-primary); box-shadow: 0 0 0 3px rgba(45, 79, 163, 0.12); }
.job-close-add-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }

/* หัวคอลัมน์ที่คลิกเรียงได้ (ตารางระบบจัดการแจ้งงาน — sortJobsBy) */
th.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
/* ลูกศรเรียงคอลัมน์แบบ iOS (chevron เส้นบาง) — ใช้ mask ให้สีตามตัวอักษรของหัวคอลัมน์ทุกธีม */
th.sortable-th::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 12px;
    margin-left: 5px;
    vertical-align: -1px;
    background-color: currentColor;
    opacity: 0.35;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4.5 5 1.5l3 3M2 7.5l3 3 3-3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4.5 5 1.5l3 3M2 7.5l3 3 3-3'/%3E%3C/svg%3E") center / contain no-repeat;
}
th.sortable-th.is-sorted { color: var(--gold-primary); }
th.sortable-th.is-sorted[data-dir="asc"]::after {
    opacity: 1;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 7.5 5 4l3.5 3.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 7.5 5 4l3.5 3.5'/%3E%3C/svg%3E");
}
th.sortable-th.is-sorted[data-dir="desc"]::after {
    opacity: 1;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 4.5 5 8l3.5-3.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 4.5 5 8l3.5-3.5'/%3E%3C/svg%3E");
}
th.sortable-th:hover::after { opacity: 0.8; }

/* ปุ่ม × ทุกแบบ (ปิดหน้าต่าง / ลบรูป / ลบไฟล์ / เอาชิปออก / ปิดการ์ดสถานะ) → กากบาทเส้นแบบ iOS (xmark)
   ซ่อนตัวอักษร × เดิม (font-size: 0) แล้ววาดกากบาทด้วย mask สีตาม currentColor ของปุ่มนั้น ๆ */
.close-btn, .remove-photo-btn, .job-worker-chip button, .inv-item-remove-btn, .file-x-btn { font-size: 0 !important; }
.close-btn::before, .remove-photo-btn::before, .job-worker-chip button::before, .inv-item-remove-btn::before, .file-x-btn::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M2 2l8 8M10 2l-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M2 2l8 8M10 2l-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ปุ่มปิดหน้าต่าง: วงกลมเทาจางแบบปุ่มปิดของ iOS */
.close-btn { width: 30px; height: 30px; background-color: var(--dk-subtle, rgba(120, 120, 128, 0.12)); }
.close-btn::before { width: 11px; height: 11px; }
.file-x-btn {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--danger);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.file-x-btn:hover { background-color: var(--dk-bad-bg, #fef2f2); }
.job-worker-chip button { display: inline-flex; align-items: center; }
/* ปุ่มที่ไม่ได้กำหนด display เอง: จัดกากบาทให้อยู่กลางวงกลม (ปุ่มลบรูป/ปิดการ์ดสถานะ มีกฎแสดง/ซ่อนของตัวเองอยู่แล้ว) */
.inv-item-remove-btn { display: inline-flex; align-items: center; justify-content: center; }

/* ไอคอน SVG ที่เขียนตรงใน index.html (ช่องค้นหา / ปุ่มเพิ่ม / รีเฟรช) ใช้รูปทรงชุดเดียวกับ icon() — ส่วนทึบสีจาง */
.ios-glyph .fl { fill: color-mix(in srgb, currentColor 16%, transparent); }

/* ==================== แก้ไขรูปในแฟ้มเอกสาร (openImageEditor ใน app.js) ==================== */
.img-editor-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.img-editor-backdrop.hidden { display: none; }
.img-editor {
    background: var(--dk-card, #ffffff);
    color: var(--text-dark);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 18px 48px rgba(0, 0, 0, 0.22);
    width: min(960px, 100%);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.img-editor-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dk-line, #e2e8f0);
}
.img-editor-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.img-editor-stage {
    flex: 1;
    min-height: 240px;
    height: 58vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dk-subtle, #f1f5f9);
    padding: 12px;
    overflow: hidden;
}
.img-editor-stage canvas { max-width: 100%; max-height: 100%; cursor: crosshair; touch-action: none; border-radius: 4px; }
.img-editor-hint { padding: 6px 16px 0; font-size: 13px; }
.img-editor-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 10px 16px;
}
.img-editor-slider { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.img-editor-slider input { width: 120px; }
.img-editor-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--dk-line, #e2e8f0);
}

/* เอกสารปิดงาน: ชื่อไฟล์ + ปุ่มแก้ชื่อ (renameJobCloseDoc) */
.job-close-doc { display: inline-flex; align-items: center; gap: 2px; }
.job-close-doc .job-close-rename { width: 24px; height: 24px; }
/* ไอคอนหมุนซ้าย = ไอคอน refresh กลับด้าน */
.img-editor-rot-left { display: inline-flex; transform: scaleX(-1); }

/* DOE-LINK (ทดลอง): ผลจับคู่สลิปจ่ายบิล ↔ ใบเสร็จกรมการจัดหางาน ในหน้าแนบสลิปรายจ่าย */
.doe-match { margin-top: 6px; font-size: 13.5px; color: var(--dk-ok, #047857); display: flex; gap: 4px; align-items: flex-start; }
.doe-match.is-none { color: var(--text-muted); }

/* ==================== รอแนบไฟล์แบบ iOS (beginUploadUi ใน app.js — แบบที่ 1, owner 2026-10-13) ==================== */
/* ช่องที่กำลังแนบไฟล์: ทับด้วยพื้นทึบ + ตัวหมุนแบบ iOS (12 ก้าน) + ขั้นตอน แล้วเป็นติ๊กเขียว "แนบแล้ว" */
.upl-host { position: relative; }
.upl-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border-radius: inherit;
    background: var(--dk-card, rgba(255, 255, 255, 0.94));
    text-align: center;
    animation: upl-in 0.25s ease;
    cursor: progress;
}
@keyframes upl-in { from { opacity: 0; } to { opacity: 1; } }
.upl-label { font-size: 13px; font-weight: 600; color: var(--text-dark); line-height: 1.3; }
.upl-sub {
    max-width: 100%;
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.upl-sub:empty { display: none; }
.ios-spin { position: relative; width: 26px; height: 26px; flex-shrink: 0; display: inline-block; }
.ios-spin i {
    position: absolute;
    left: 46%;
    top: 0;
    width: 8%;
    height: 28%;
    border-radius: 2px;
    background: var(--text-muted);
    transform-origin: 50% 178%;
    animation: ios-spin-fade 1s linear infinite;
}
@keyframes ios-spin-fade { from { opacity: 1; } to { opacity: 0.15; } }
.upl-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--success, #34c759);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: upl-pop 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.upl-check svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: upl-draw 0.35s 0.12s ease forwards;
}
@keyframes upl-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes upl-draw { to { stroke-dashoffset: 0; } }
/* ปุ่มเล็ก (เช่น "แนบไฟล์" ในแถว): เหลือแต่ตัวหมุน/ติ๊ก ไม่มีข้อความ */
.btn > .upl-overlay, label:not(.upload-box) > .upl-overlay { flex-direction: row; gap: 6px; padding: 0 8px; }
.btn > .upl-overlay .upl-sub, label:not(.upload-box) > .upl-overlay .upl-sub { display: none; }
.btn > .upl-overlay .ios-spin, .btn > .upl-overlay .upl-check { width: 18px; height: 18px; }
.btn > .upl-overlay .upl-label { font-size: 13px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
    .ios-spin i { animation-duration: 2s; }
    .upl-check, .upl-check svg { animation: none; stroke-dashoffset: 0; }
}

/* แคปซูลแจ้งเตือนตอนอัปไฟล์ (showUploadPill ใน app.js — แบบที่ 3 ขึ้นกลางจอ, owner 2026-10-13) */
.upload-pill {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 10px 18px 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(15, 23, 42, 0.18);
    color: var(--text-dark);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 24px)) scale(0.96);
    transition: opacity 0.22s ease, transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.upload-pill.show { opacity: 1; transform: translate(-50%, -50%); }
.upload-pill .ios-spin { width: 20px; height: 20px; }
.upill-ic {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.upill-ic svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.upload-pill.is-ok .upill-ic { background: #34c759; }
.upload-pill.is-warn .upill-ic { background: #ff9f0a; }
.upload-pill.is-bad .upill-ic { background: #ff3b30; }
.upill-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.upill-tx b { font-size: 13.5px; font-weight: 600; }
.upill-tx small { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upill-tx small:empty { display: none; }
/* ข้อความเตือน/ผิดพลาดยาวได้ (เช่นเหตุผลที่ AI อ่านไม่ได้) → ขึ้นบรรทัดใหม่ แคปซูลกลายเป็นมุมโค้ง */
.upload-pill.is-warn, .upload-pill.is-bad { border-radius: 22px; }
.upload-pill.is-warn small, .upload-pill.is-bad small { white-space: normal; }

/* ==================== ปฏิทินของฉัน (renderCalendarNotes ใน app.js, owner 2026-10-13) ==================== */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.cal-panel, .cal-editor { padding: 18px; }
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cal-head h3 { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: var(--navy-dark); }
.cal-head .btn { min-width: 34px; justify-content: center; }
.cal-today-btn { margin-left: 4px; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-weekdays span { text-align: center; font-size: 13px; font-weight: 600; color: var(--text-muted); padding-bottom: 4px; }
.cal-day {
    min-height: 86px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 7px 8px;
    border: 1px solid var(--dk-line, #e5e7eb);
    border-radius: 12px;
    background: var(--dk-card, #ffffff);
    color: var(--text-dark);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    overflow: hidden;
}
.cal-day:hover { border-color: var(--gold-primary); }
.cal-day.is-out { opacity: 0.45; }
.cal-num {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}
.cal-day.is-today .cal-num { background: #ff3b30; color: #fff; }
.cal-day.is-selected { border-color: var(--gold-primary); box-shadow: 0 0 0 3px rgba(45, 79, 163, 0.15); }
.cal-day.has-note { background: var(--dk-subtle, #f4f7fd); }
.cal-note {
    width: 100%;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.cal-day.has-note .cal-note::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-primary); margin-right: 5px; vertical-align: 1px; }
.cal-editor h3 { font-size: 16px; font-weight: 600; color: var(--navy-dark); }
.cal-editor-hint { font-size: 13px; margin: 2px 0 10px; }
.cal-form textarea {
    width: 100%;
    resize: vertical;
    padding: 10px 12px;
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: 12px;
    font-family: inherit;
    font-size: 13.5px;
    background: var(--dk-card, #ffffff);
    color: var(--text-dark);
}
.cal-form textarea:focus { outline: none; border-color: var(--gold-primary); box-shadow: 0 0 0 3px rgba(45, 79, 163, 0.12); }
.cal-upcoming-title { margin: 20px 0 8px; font-size: 13.5px; font-weight: 600; color: var(--navy-dark); }
.cal-up-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 10px;
    margin-bottom: 6px;
    border: none;
    border-radius: 10px;
    background: var(--dk-subtle, #f4f6fa);
    color: var(--text-dark);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.cal-up-item:hover { background: var(--dk-head, #e9eef9); }
.cal-up-item b { font-size: 13.5px; color: var(--gold-primary); }
.cal-up-item span { font-size: 13.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ปฏิทินทีม (2026-10-14): วันหยุดราชการ (แดง), หลายโน้ตต่อวัน + เวลา */
.cal-day.is-weekend .cal-num, .cal-day.is-holiday .cal-num { color: var(--dk-bad, #d92d20); }
.cal-day.is-today .cal-num { color: #fff; }
.cal-day.is-holiday { background: var(--dk-bad-bg, #fff4f3); }
.cal-holiday {
    width: 100%;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dk-bad, #d92d20);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-note { -webkit-line-clamp: 2; }
.cal-note b { color: var(--gold-primary); font-weight: 600; }
.cal-more { font-size: 12.5px; color: var(--gold-primary); font-weight: 600; }
.cal-editor-holiday { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--dk-bad, #d92d20); }
.cal-day-notes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.cal-empty { font-size: 13.5px; margin: 0; }
.cal-day-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 6px 8px 10px;
    border-radius: 10px;
    background: var(--dk-subtle, #f4f6fa);
    border: 1px solid transparent;
}
.cal-day-note.is-editing { border-color: var(--gold-primary); }
.cal-day-note-time { flex-shrink: 0; min-width: 40px; font-size: 13.5px; font-weight: 600; color: var(--gold-primary); padding-top: 1px; }
.cal-day-note-body { flex: 1; min-width: 0; }
.cal-day-note-body p { margin: 0; font-size: 13px; color: var(--text-dark); word-break: break-word; white-space: pre-wrap; }
.cal-day-note-body small { font-size: 12.5px; color: var(--text-muted); }
/* หน้าต่างใส่โน้ต (#cal-note-modal) + กด/ลากวันในปฏิทิน (owner 2026-10-15) */
.cal-note-modal-content { max-width: 460px; }
.cal-note-modal-content .modal-header h3 small { margin-left: 6px; font-size: 13.5px; font-weight: 500; color: var(--text-muted); }
.cal-form { display: flex; flex-direction: column; }
.cal-note-counter { align-self: flex-end; margin-top: 4px; font-size: 13px; }
.cal-note-modal-foot { display: flex; justify-content: flex-end; gap: 8px; }
.cal-add-btn { width: 100%; justify-content: center; }
.cal-grid { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cal-grid-hint { margin: 10px 2px 0; font-size: 13px; }
.cal-day.is-dragsel { background: var(--gold-light); border-color: var(--gold-primary); }
.cal-time-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--text-muted); }
.cal-time-label input {
    padding: 6px 10px;
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    background: var(--dk-card, #ffffff);
    color: var(--text-dark);
}
.cal-up-item.is-holiday b { color: var(--dk-bad, #d92d20); }
/* โน้ตหลายวัน (เช่น คนลา) — แถบสีซ้าย ให้เห็นว่าเป็นช่วงต่อเนื่อง */
.cal-range-row { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cal-note.is-range { padding-left: 5px; border-left: 3px solid var(--dk-warn, #f59e0b); }
.cal-day.has-note .cal-note.is-range::before { display: none; }
.cal-day-note.is-range { border-left: 3px solid var(--dk-warn, #f59e0b); }
.cal-day-note-body small.cal-range { display: block; color: var(--dk-warn, #b45309); font-weight: 600; }
@media (max-width: 1024px) {
    .cal-layout { grid-template-columns: 1fr; }
    .cal-day { min-height: 64px; padding: 5px; }
    .cal-note { -webkit-line-clamp: 2; }
}
@media (max-width: 640px) {
    .cal-weekdays, .cal-grid { gap: 3px; }
    .cal-day { min-height: 46px; align-items: center; }
    .cal-note, .cal-holiday, .cal-more { display: none; }
    .cal-day.has-note::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-primary); }
}

/* สัดส่วนความคืบหน้าและการชำระเงิน: กราฟวงกลม 2 อันอยู่บรรทัดเดียวกัน (owner, 2026-10-13) */
.fin-pies-row { padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fin-pie-card {
    background-color: var(--dk-subtle, #f8fafc);
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: var(--radius-sm);
    padding: 14px;
    min-width: 0;
}
.fin-pie-card h5 { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; color: var(--navy-dark); }
.fin-pie-box { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fin-pie-box > div { width: 100%; }
@media (max-width: 640px) { .fin-pies-row { grid-template-columns: 1fr; } }

/* ไฟล์ขนาดใหญ่ผิดปกติ (หน้าสำรองข้อมูล — openLargeFilesTool ใน app.js) */
.large-files-card .backup-actions { align-items: center; flex-wrap: wrap; }
.large-files-list { margin-top: 10px; max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.lf-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--dk-line, #e5e7eb);
    border-radius: 10px;
    background: var(--dk-card, #ffffff);
}
.lf-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold-primary); }
.lf-main { min-width: 0; display: flex; flex-direction: column; }
.lf-main a { font-weight: 600; font-size: 13px; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-main a:hover { color: var(--gold-primary); }
.lf-main small { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-size { font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.lf-state { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; max-width: 220px; }
.lf-state .ios-spin { width: 16px; height: 16px; }
.lf-ok { color: var(--success, #16a34a); font-weight: 600; }
@media (max-width: 760px) {
    .lf-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .lf-state { grid-column: 2 / 4; max-width: none; }
    .lf-row .btn { grid-column: 3; grid-row: 1; }
}

/* Note วางบิลตอนออกบิล/รวมบิล (renderBillingNoteBox ใน app.js) — เห็นเฉพาะเจ้าหน้าที่ แก้ได้โดยการเงิน/ปฏิบัติการ */
.billing-note-box {
    background-color: var(--dk-warn-bg, #fffbeb);
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 13.5px;
    color: var(--dk-warn, #92400e);
}
.billing-note-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.billing-note-box p { margin: 6px 0 0; white-space: pre-line; line-height: 1.5; }
.billing-note-input {
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    background: var(--dk-card, #ffffff);
    color: var(--text-dark);
    resize: vertical;
}
.billing-note-input:focus { outline: none; border-color: var(--gold-primary); box-shadow: 0 0 0 3px rgba(45, 79, 163, 0.12); }
.billing-note-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.billing-note-actions small { flex: 1; font-size: 12.5px; opacity: 0.85; }
.billing-note-add { color: var(--dk-warn, #92400e); border-style: dashed; }

/* สำเนาแผ่นบิลนอกจอสำหรับ "คัดลอกเป็นรูป" (buildPrintLikeClone ใน app.js) — จัดหน้าเหมือนตอนบันทึก PDF/พิมพ์:
   A4 กว้าง 210 มม. ขอบ 10 มม. ไม่มี zoom/เงา/มุมโค้ง พื้นขาว (ตรงกับ .invoice-sheet ใน @media print) */
.inv-snapshot-holder { position: fixed; left: -10000px; top: 0; width: 210mm; background: #ffffff; pointer-events: none; z-index: -1; }
.inv-snapshot-holder .invoice-sheet.inv-snapshot {
    width: 210mm !important;
    max-width: none !important;
    min-height: 297mm !important;
    margin: 0 !important;
    padding: 10mm !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    zoom: 1 !important;
    background-color: #ffffff !important;
    overflow: visible !important;
}
.inv-snapshot-value { white-space: pre-wrap; }

/* กำลังย่อ/ขยายหน้าต่าง (app.js ใส่ class นี้ระหว่างลาก) → ปิด transition ทั้งหน้า ไม่ให้แถบเมนู/ตัวเลื่อนแท็บ/กราฟวิ่งไล่ตามขนาดใหม่ */
html.is-resizing *, html.is-resizing *::before, html.is-resizing *::after { transition: none !important; }

/* บิลฝั่งลูกค้า (client): เห็นแค่ตัวบิล ไม่โชว์แผงใต้บิล — renderInvoiceStatusUi() ใส่ .is-client-view (owner, 2026-10-14) */
#invoice-modal.is-client-view #invoice-internal-split,
#invoice-modal.is-client-view #invoice-payments-panel,
#invoice-modal.is-client-view #invoice-footer-status,
#invoice-modal.is-client-view .inv-gov-col { /* คอลัมน์ "ค่าธรรมเนียมรัฐ (ภายใน)" — ลูกค้าต้องไม่เห็น (owner 2026-10-15) */
    display: none !important;
}

/* ป้าย "รอแจ้งเข้า" ใต้สถานะเอกสารในพอร์ทัลนายจ้าง (owner, 2026-10-14) */
.cp-notify-badge { margin-top: 4px; }

/* ฟอร์มแจ้งงาน: แท็บ คนงานรอแจ้งเข้า / คนงานต่างด้าวที่เกี่ยวข้อง (setJobWorkerTab) */
.job-worker-tabs { margin-bottom: 8px; }
.job-worker-tab-count { color: var(--dk-muted, var(--text-muted)); font-weight: 500; }
.job-worker-notify-tag { font-size: 12.5px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }

/* ==================== คัมบังระบบแจ้งงาน (renderJobsKanban) — สีจากตัวแปรธีม ไม่เขียนสีตายตัวใน HTML/JS (2026-10-15) ==================== */
.kanban-board {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
}
.kanban-column {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: calc(100vh - 260px);
    background-color: var(--dk-subtle, #f8fafc);
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: var(--radius-md);
}
.kanban-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--dk-line, #e2e8f0);
}
.kanban-column-header h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--navy-dark); }
.kanban-column-header .badge { font-size: 12.5px; padding: 2px 9px; }
.kanban-head-badges { display: flex; gap: 4px; align-items: center; }
.kanban-cards-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 200px;
    padding: 12px;
    overflow-y: auto;
}

.kanban-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 14px;
    background-color: var(--dk-card, #ffffff);
    border: 1px solid var(--dk-line, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    cursor: grab;
}
.kanban-card.is-closed-unpaid {
    background-color: var(--dk-bad-bg, #fef2f2);
    border-color: var(--dk-bad, #fca5a5);
}
.kc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kc-no { font-size: 13px; font-weight: 700; color: var(--gold-primary); }
.kc-badge { font-size: 12.5px; padding: 1px 8px; }
.kc-billed { background-color: #3b82f6; color: #ffffff; }
.kc-worker { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--navy-dark); }
.kc-sub { font-size: 13px; color: var(--text-muted); }
.kc-faint { font-size: 12.5px; color: var(--text-muted); opacity: 0.85; }
.kc-uid { margin-top: -4px; }
.kc-batch { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12.5px; color: var(--gold-primary); }
.kc-batch span { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 8px; background-color: var(--gold-light); }
.kc-batch i { width: 6px; height: 6px; border-radius: 50%; }
.kc-batch i.is-open { background-color: #f59e0b; }
.kc-batch i.is-done { background-color: #22c55e; }
.kc-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--dk-line, #f1f5f9);
}
.kc-fee { font-size: 14px; font-weight: 700; color: var(--navy-dark); white-space: nowrap; }
.kc-foot-right { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.kc-actions { display: flex; gap: 2px; margin-left: 4px; }
.kc-actions button {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.kc-actions button:hover { background-color: var(--dk-subtle, #f1f5f9); }

/* ======================================================================================================
   ระบบธีม (รวมไว้ที่เดียว 2026-10-14) — Liquid Glass + โหมดสบายตา + มุมโค้งแคปซูล ใช้ร่วมทั้ง 3 ธีม
   ------------------------------------------------------------------------------------------------------
   - ค่าของแต่ละธีมอยู่ในตัวแปรด้านล่าง (สว่าง = <html> ไม่มี data-theme / pink / dark) กฎหน้าตาเขียนครั้งเดียวใช้ทุกธีม
   - แสงสีด้านหลังเป็นเลเยอร์ fixed ชั้นเดียว (body::before) — ไม่ใช้ background-attachment: fixed ที่ทำให้ทั้งหน้าวาดใหม่ทุกครั้งที่เลื่อน
   - เบลอ (backdrop-filter) เฉพาะสิ่งที่ลอยทับเนื้อหา: หน้าต่าง/ป๊อปอัป/เมนูเลือก — แถบเมนูซ้ายไม่ทับอะไรจึงไม่เบลอ (กระจกโปร่งบนแสงก็พอ)
   - การ์ด/ตารางพื้นทึบ, สีเหลือเฉพาะเรื่องที่ต้องจัดการ, ข้อมูลรองจาง, หัวข้อประเภทงาน (.job-type-badge) คงกรมท่า-ทอง
   - กระดาษที่พิมพ์ (.invoice-sheet / .delivery-label-sheet) ยังเป็นสีกรมท่า-ขาวเดิมทุกธีม
   ====================================================================================================== */

/* ---------- ค่าของธีมสว่าง ---------- */
:root:not([data-theme]) {
    --gray-bg: #e7eaf0;
    --gray-card: #f8f9fb;
    --dk-card: #f8f9fb;
    --text-dark: #2f3a4d;
    --text-muted: #6b7489;
    --gold-primary: #2d6cf6;
    --gold-hover: #1f5be0;
    --gold-light: rgba(45, 108, 246, 0.08);
    --gold-border: rgba(45, 108, 246, 0.18);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 18px rgba(15, 23, 42, 0.07);
    --seg-rail: rgba(15, 23, 42, 0.06);
    --pill-navy-bg: #f1f3f7;   --pill-navy-fg: #0f172a;   --pill-navy-sub: #475569;
    --pill-teal-bg: #f1f3f7;   --pill-teal-fg: #0f172a;   --pill-teal-sub: #475569;
    --pill-purple-bg: #f1f3f7; --pill-purple-fg: #0f172a; --pill-purple-sub: #475569;
    --glow-1: rgba(110, 160, 255, 0.22); --glow-2: rgba(150, 175, 255, 0.16); --glow-3: rgba(120, 220, 190, 0.16); /* มุมขวาบนเคยเป็นส้มพีช ดูเป็นชมพู → ฟ้าอ่อน (owner 2026-10-15) */
    --glass-side: rgba(250, 251, 253, 0.60);
    --glass-pop: rgba(248, 249, 251, 0.88);
    --glass-edge: rgba(255, 255, 255, 0.85);
    --glass-hi: rgba(255, 255, 255, 0.95);
    --side-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 28px rgba(15, 23, 42, 0.08);
    --pill-on: rgba(255, 255, 255, 0.85);
    --pill-on-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    --menu-on-ink: #2d4fa3;
    --menu-on-icon: #2d4fa3;
    --menu-hover: rgba(255, 255, 255, 0.55);
    --btn-glow: rgba(45, 108, 246, 0.28);
    --calm-bg: #f1f3f7;
    --calm-ink: #475569;
    --zebra: rgba(15, 23, 42, 0.018);
    --row-hover: rgba(15, 23, 42, 0.03);
    --card-border: #e4e8ef;
}
/* ---------- ค่าของธีมชมพู (ชมพูหม่น dusty rose) ---------- */
:root[data-theme="pink"] {
    --gray-bg: #f3eef0;
    --gray-card: #fcfafb;
    --dk-card: #fcfafb;
    --gold-primary: #b8607f;
    --gold-hover: #a5536f;
    --gold-light: rgba(184, 96, 127, 0.08);
    --gold-border: rgba(184, 96, 127, 0.18);
    --text-muted: #85707a;
    --seg-rail: rgba(184, 96, 127, 0.07);
    --pill-navy-bg: #f3ecef;   --pill-navy-fg: #3b1f2b;   --pill-navy-sub: #6f4b5a;
    --pill-teal-bg: #f3ecef;   --pill-teal-fg: #3b1f2b;   --pill-teal-sub: #6f4b5a;
    --pill-purple-bg: #f3ecef; --pill-purple-fg: #3b1f2b; --pill-purple-sub: #6f4b5a;
    --logo-tile-bg: linear-gradient(160deg, #fdfafb 0%, #f2e6eb 100%);
    --logo-tile-ring: rgba(184, 96, 127, 0.18);
    --logo-tile-shadow: 0 10px 24px rgba(120, 70, 90, 0.10);
    --glow-1: rgba(220, 150, 175, 0.14); --glow-2: rgba(235, 200, 180, 0.14); --glow-3: rgba(200, 180, 225, 0.12);
    --glass-side: rgba(252, 249, 250, 0.62);
    --glass-pop: rgba(253, 248, 251, 0.88);
    --glass-edge: rgba(255, 255, 255, 0.85);
    --glass-hi: rgba(255, 255, 255, 0.95);
    --side-shadow: 0 1px 2px rgba(120, 70, 90, 0.05), 0 10px 28px rgba(120, 70, 90, 0.08);
    --pill-on: rgba(255, 255, 255, 0.85);
    --pill-on-shadow: 0 2px 10px rgba(184, 96, 127, 0.12);
    --menu-on-ink: #a5536f;
    --menu-on-icon: #a5536f;
    --menu-hover: rgba(255, 255, 255, 0.55);
    --btn-glow: rgba(184, 96, 127, 0.22);
    --calm-bg: #f3ecef;
    --calm-ink: #6f4b5a;
    --zebra: rgba(120, 80, 95, 0.02);
    --row-hover: rgba(120, 80, 95, 0.035);
    --card-border: #ece3e7;
    --shadow-sm: 0 4px 14px rgba(214, 69, 122, 0.08);
    --shadow-md: 0 6px 18px rgba(214, 69, 122, 0.10);
    --shadow-lg: 0 12px 28px rgba(70, 25, 45, 0.14);
    --dk-subtle: #fcf4f7;
    --dk-line: #f1dfe6;
    --seg-thumb: #ffffff;
    --seg-text: #4a2a37;
}
/* ---------- ค่าของธีมมืด ---------- */
:root[data-theme="dark"] {
    --gray-bg: #0b0e16;
    --gray-card: #171b26;
    --dk-card: #171b26;
    --gold-primary: #3d7bff;
    --gold-hover: #5a90ff;
    --gold-light: rgba(61, 123, 255, 0.16);
    --gold-border: rgba(61, 123, 255, 0.32);
    --text-dark: #d9dde7;
    --text-muted: #8b93a7;
    --navy-light: #8b93a7;
    --success: #30d158;
    --warning: #ffc15e;
    --danger: #ff7a7a;
    --dk-subtle: rgba(255, 255, 255, 0.06);
    --dk-line: rgba(255, 255, 255, 0.07);
    --dk-muted: #8b93a7;
    --dk-ok: #5fe08f;     --dk-ok-bg: rgba(48, 209, 88, 0.16);
    --dk-warn: #ffc15e;   --dk-warn-bg: rgba(255, 159, 10, 0.18);
    --dk-bad: #ff8a8a;    --dk-bad-bg: rgba(255, 99, 99, 0.15);
    --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.32);
    --shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 34px rgba(0, 0, 0, 0.38);
    --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 10px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.5);
    --seg-rail: rgba(255, 255, 255, 0.07);
    --seg-thumb: rgba(255, 255, 255, 0.16);
    --seg-text: #e4e8f1;
    --wallet-bg: #2d5fd6;
    --pill-navy-bg: rgba(255, 255, 255, 0.05);   --pill-navy-fg: #e4e8f1;   --pill-navy-sub: #a3abbf;
    --pill-teal-bg: rgba(255, 255, 255, 0.05);   --pill-teal-fg: #e4e8f1;   --pill-teal-sub: #a3abbf;
    --pill-purple-bg: rgba(255, 255, 255, 0.05); --pill-purple-fg: #e4e8f1; --pill-purple-sub: #a3abbf;
    --logo-tile-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%);
    --logo-tile-ring: rgba(255, 255, 255, 0.18);
    --glow-1: rgba(47, 95, 214, 0.14); --glow-2: rgba(176, 67, 143, 0.10); --glow-3: rgba(31, 143, 122, 0.09);
    --glass-side: rgba(26, 30, 42, 0.62);
    --glass-pop: rgba(30, 34, 47, 0.88);
    --glass-edge: rgba(255, 255, 255, 0.09);
    --glass-hi: rgba(255, 255, 255, 0.14);
    --side-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.32);
    --pill-on: rgba(255, 255, 255, 0.13);
    --pill-on-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);
    --menu-on-ink: #ffffff;
    --menu-on-icon: #8fb3ff;
    --menu-hover: rgba(255, 255, 255, 0.06);
    --btn-glow: rgba(61, 123, 255, 0.35);
    --calm-bg: rgba(255, 255, 255, 0.06);
    --calm-ink: #c3c9d6;
    --zebra: rgba(255, 255, 255, 0.018);
    --row-hover: rgba(255, 255, 255, 0.04);
    --card-border: rgba(255, 255, 255, 0.07);
    color-scheme: dark;
    --navy-dark: #eef2fa;
    --navy-medium: #e2e7ef;
    --on-primary: #ffffff;
    --dk-head: #eef2fa;
    --jt-bg: #3a5cb5; --jt-fg: #f5d675;
    --pill-red-bg: rgba(245, 138, 138, 0.15);   --pill-red-fg: #f7a3a3;    --pill-red-sub: #f3c9c9;
    --pill-orange-bg: rgba(246, 170, 91, 0.15); --pill-orange-fg: #f6be7f; --pill-orange-sub: #f2d5b3;
    --logo-tile-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* ---------- กฎเฉพาะธีมของแต่ละส่วน (ย้ายมาจากหลายจุดในไฟล์ 2026-10-15 ลำดับเดิม) ----------
   โลโก้ตามธีม, สีแถบเลื่อน, ช่องกรอก/ข้อความในธีมมืด, ทับ style="" ที่เขียนสีตายตัว, กระดาษพิมพ์คงขาว, ปุ่มลบ, tooltip, upload pill */
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:vertical { background: #56637f; background-clip: padding-box; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:vertical:hover { background: #6b7896; background-clip: padding-box; }
:root[data-theme="pink"] ::-webkit-scrollbar-thumb:vertical { background: #e2b9ca; background-clip: padding-box; }
:root[data-theme="pink"] ::-webkit-scrollbar-thumb:vertical:hover { background: #d49bb3; background-clip: padding-box; }

:root[data-theme="dark"] .floating-hscroll::-webkit-scrollbar-thumb { background: #56637f; background-clip: padding-box; }
:root[data-theme="pink"] .floating-hscroll::-webkit-scrollbar-thumb { background: #e2b9ca; background-clip: padding-box; }

/* เมนูข้าง + ช่องกรอก */
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    color: var(--text-dark);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #7d889b; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #44506a; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #56637f; }

/* โลโก้ไฟล์เดิมมีพื้นขาวในตัว → ใช้ logo-dark.png (พื้นโปร่งใส ตัวหนังสือ Service สีอ่อน) แทน
   ใบแจ้งหนี้/ใบเสร็จยังใช้ logo.png เดิมเพราะเป็นกระดาษขาว */
:root[data-theme="dark"] .brand-logo-img,
:root[data-theme="dark"] .login-logo {
    content: url("assets/logo-dark.png");
}

/* ตัวเลข/ข้อความสีเขียว-แดงตายตัวที่ไม่ได้แปลงเป็นตัวแปร */
:root[data-theme="dark"] .pay-summary .is-paid strong,
:root[data-theme="dark"] .pay-summary .is-done strong,
:root[data-theme="dark"] .tile-ok,
:root[data-theme="dark"] .bank-balance-rows .is-in b { color: var(--dk-ok); }
:root[data-theme="dark"] .pay-summary .is-due strong,
:root[data-theme="dark"] .bank-balance-rows .is-out b { color: var(--dk-bad); }
:root[data-theme="dark"] .receive-summary .is-deposit strong,
:root[data-theme="dark"] .tile-warn { color: var(--dk-warn); }
:root[data-theme="dark"] .tile-gov,
:root[data-theme="dark"] .split-gov { color: #5fd3c5; }
:root[data-theme="dark"] .tile-govpaid { background-color: var(--dk-subtle); }

/* สไตล์ที่เขียนไว้ใน HTML/JS โดยตรง (style="...") — ทับเฉพาะพื้นขาว/เส้นเทาอ่อน/ตัวหนังสือเข้มที่พบบ่อย */
:root[data-theme="dark"] [style*="background: #ffffff"], :root[data-theme="dark"] [style*="background:#ffffff"],
:root[data-theme="dark"] [style*="background-color: #ffffff"], :root[data-theme="dark"] [style*="background: #fff;"],
:root[data-theme="dark"] [style*="background-color: #fff;"], :root[data-theme="dark"] [style*="background: white"] {
    background-color: var(--dk-card, #ffffff) !important;
}
:root[data-theme="dark"] [style*="background-color: #f8fafc"], :root[data-theme="dark"] [style*="background: #f8fafc"],
:root[data-theme="dark"] [style*="background-color: #f1f5f9"], :root[data-theme="dark"] [style*="background: #f1f5f9"],
:root[data-theme="dark"] [style*="background-color: #eef2ff"], :root[data-theme="dark"] [style*="background: #eef2ff"] {
    background-color: var(--dk-subtle, #f8fafc) !important;
}
:root[data-theme="dark"] [style*="background-color: #fffbeb"], :root[data-theme="dark"] [style*="background: #fffbeb"] {
    background-color: var(--dk-warn-bg, #fffbeb) !important;
    border-color: rgba(246, 195, 91, 0.35) !important;
    color: var(--dk-warn, #92400e) !important;
}
:root[data-theme="dark"] [style*="background-color: #fef2f2"], :root[data-theme="dark"] [style*="background: #fef2f2"] {
    background-color: var(--dk-bad-bg, #fef2f2) !important;
}
:root[data-theme="dark"] [style*="border: 1px solid #e2e8f0"], :root[data-theme="dark"] [style*="border-color: #e2e8f0"],
:root[data-theme="dark"] [style*="border-bottom: 1px solid #e2e8f0"], :root[data-theme="dark"] [style*="border-top: 1px solid #e2e8f0"],
:root[data-theme="dark"] [style*="border: 1px solid #f1f5f9"], :root[data-theme="dark"] [style*="border-bottom: 1px solid #f1f5f9"] {
    border-color: var(--dk-line, #e2e8f0) !important;
}
:root[data-theme="dark"] [style*="color: #0f172a"], :root[data-theme="dark"] [style*="color: #1e293b"],
:root[data-theme="dark"] [style*="color: #334155"] { color: var(--dk-head, #0f172a) !important; }
:root[data-theme="dark"] [style*="color: #64748b"], :root[data-theme="dark"] [style*="color: #94a3b8"] { color: var(--dk-muted, #64748b) !important; }
:root[data-theme="dark"] [style*="color: #92400e"] { color: var(--dk-warn, #92400e) !important; }

/* กระดาษที่พิมพ์ (ใบแจ้งหนี้/ใบเสร็จ/ใบปะหน้า) — คงพื้นขาวตัวหนังสือเข้มเหมือนธีมสว่าง */
:root[data-theme="dark"] .invoice-sheet, :root[data-theme="pink"] .invoice-sheet,
:root[data-theme="pink"] .delivery-label-sheet,
:root[data-theme="dark"] .delivery-label-sheet {
    color-scheme: light;
    --navy-dark: #0f172a;
    --navy-medium: #1e293b;
    --navy-light: #64748b;
    --gold-primary: #2d4fa3;
    --gold-hover: #243f86;
    --gold-light: rgba(45, 79, 163, 0.06);
    --gold-border: rgba(45, 79, 163, 0.14);
    --gray-bg: #f1f4f9;
    --gray-card: #ffffff;
    --text-dark: #334155;
    --text-muted: #64748b;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --on-primary: #ffffff;
    --dk-card: initial; --dk-subtle: initial; --dk-line: initial; --dk-head: initial; --dk-muted: initial;
    --dk-ok: initial; --dk-ok-bg: initial; --dk-bad: initial; --dk-bad-bg: initial; --dk-warn: initial; --dk-warn-bg: initial;
    color: var(--text-dark);
}
:root[data-theme="dark"] .invoice-sheet input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
:root[data-theme="dark"] .invoice-sheet select {
    background-color: #ffffff;
    color: #334155;
    border-color: #d5dce8;
}

/* ==================== ธีมชมพู ("ชมพู 1 — โรสอ่อน") — ชมพูเฉพาะพื้นหลัง/พื้นผิว ====================
   ปุ่มทุกปุ่ม เมนูที่เลือก แท็บ ป้ายสถานะ กราฟ และตัวเลข/ตัวหนังสือข้อมูล ใช้สีปกติ (กรมท่า) เหมือนธีมสว่างทุกอย่าง
   — ธีมนี้เปลี่ยนแค่พื้นหลังหน้า พื้นเมนูข้าง เส้นขอบ พื้นอ่อนในตาราง/กล่อง และเงา ให้เป็นโทนชมพู
   (จึงไม่แตะ --gold-* / --navy-* / --text-* / --dk-head / --dk-muted) */
/* โลโก้ไฟล์เดิมมีพื้นขาว → ใช้ logo-transparent.png (พื้นโปร่งใส ตัวหนังสือสีเดิม) ให้กลืนกับพื้นชมพู */
:root[data-theme="pink"] .brand-logo-img,
:root[data-theme="pink"] .login-logo { content: url("assets/logo-transparent.png"); }
/* ปุ่ม/ป้าย/แถบกราฟ ใช้สีปกติ — ยกเลิก --dk-* (initial → ใช้สีเดิมที่เป็นค่า fallback) เฉพาะในองค์ประกอบเหล่านี้ */
:root[data-theme="pink"] :is(button, .btn, .badge, .bar-track, .bar-fill, .job-worker-chip, .action-icon-btn) {
    --dk-card: initial;
    --dk-subtle: initial;
    --dk-line: initial;
}
:root[data-theme="pink"] input:focus,
:root[data-theme="pink"] select:focus,
:root[data-theme="pink"] textarea:focus { border-color: var(--gold-primary); }
:root[data-theme="pink"] ::-webkit-scrollbar-thumb { background: #ecd3dd; }
:root[data-theme="pink"] [style*="border: 1px solid #e2e8f0"], :root[data-theme="pink"] [style*="border-color: #e2e8f0"],
:root[data-theme="pink"] [style*="border-bottom: 1px solid #e2e8f0"] { border-color: var(--dk-line) !important; }
:root[data-theme="pink"] [style*="background-color: #f8fafc"], :root[data-theme="pink"] [style*="background: #f8fafc"],
:root[data-theme="pink"] [style*="background-color: #f1f5f9"], :root[data-theme="pink"] [style*="background: #f1f5f9"] { background-color: var(--dk-subtle) !important; }

:root[data-theme="dark"] .theme-toggle-btn .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle-btn .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle-btn { color: #f6c35b; }

/* พิมพ์จากธีมมืด/ชมพู → พิมพ์เป็นสีปกติ (กรมท่า-ขาว) เสมอ */
@media print {
    :root[data-theme="dark"], :root[data-theme="pink"] {
        color-scheme: light;
        --navy-dark: #0f172a; --navy-medium: #1e293b; --navy-light: #64748b;
        --gold-primary: #2d4fa3; --gray-bg: #ffffff; --gray-card: #ffffff;
        --text-dark: #334155; --text-muted: #64748b; --on-primary: #ffffff;
        --dk-card: initial; --dk-subtle: initial; --dk-line: initial; --dk-head: initial; --dk-muted: initial;
        --dk-ok: initial; --dk-ok-bg: initial; --dk-bad: initial; --dk-bad-bg: initial; --dk-warn: initial; --dk-warn-bg: initial;
    }
}

/* ธีมสว่าง: โลโก้ในแถบเมนูใช้ไฟล์พื้นโปร่งใส (สีแถบเมนู/เมนูที่เลือก ดูหัวข้อ "ระบบธีม" ท้ายไฟล์) */
:root:not([data-theme="dark"]):not([data-theme="pink"]) .sidebar .brand-logo-img {
    content: url("assets/logo-transparent.png");  /* โลโก้เดิมพื้นขาว จะเป็นกล่องขาวบนพื้นเทา */
}

:root[data-theme="dark"] .action-icon-btn.delete-btn {
    background-color: rgba(255, 69, 58, 0.18);
    color: #ff6961;
}
:root[data-theme="dark"] .action-icon-btn.delete-btn:hover {
    background-color: #ff453a;
    color: #ffffff;
}

:root[data-theme="dark"] .ios-tooltip {
    background-color: rgba(58, 66, 88, 0.88);
    color: #eef2fa;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}

/* ธีมสว่าง: ใช้ไฟล์พื้นโปร่งใส (logo.png มีพื้นขาวทึบ จะเป็นกล่องขาวบนกรอบสี) */
:root:not([data-theme="dark"]):not([data-theme="pink"]) #login-view .login-logo,
:root:not([data-theme="dark"]):not([data-theme="pink"]) #reset-password-view .login-logo,
:root:not([data-theme="dark"]):not([data-theme="pink"]) .app-splash-logo { content: url("assets/logo-transparent.png"); }
:root[data-theme="pink"] .app-splash-logo { content: url("assets/logo-transparent.png"); }
:root[data-theme="dark"] .app-splash-logo { content: url("assets/logo-dark.png"); }

:root[data-theme="dark"] .upload-pill { background: rgba(44, 50, 66, 0.92); }
:root[data-theme="pink"] .upload-pill { background: rgba(255, 247, 250, 0.92); }

/* ---------- พื้นหลัง: สีพื้น + แสงสีเลเยอร์เดียว (fixed, ไม่วาดใหม่ตอนเลื่อน) ---------- */
body { background: var(--gray-bg); }
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42vw 42vw at 6% 20%, var(--glow-1), transparent 70%),
        radial-gradient(34vw 34vw at 94% 4%, var(--glow-2), transparent 70%),
        radial-gradient(38vw 38vw at 62% 100%, var(--glow-3), transparent 70%);
}
@media print { body { background: #ffffff; } body::before { display: none; } }

/* ---------- แถบเมนูซ้าย: กระจกโปร่ง (ไม่เบลอ) ---------- */
:root .sidebar {
    background-color: var(--glass-side);
    border: 1px solid var(--glass-edge);
    box-shadow: inset 0 1px 0 var(--glass-hi), var(--side-shadow);
}
@media (min-width: 1025px) { :root .sidebar { border-radius: 26px; } }
:root .sidebar-menu > .tab-slider,
:root .sidebar-menu:not(.has-slider) > .menu-item.active {
    background-color: var(--pill-on);
    box-shadow: inset 0 1px 0 var(--glass-hi), var(--pill-on-shadow);
}
:root .menu-item.active { color: var(--menu-on-ink); }
:root .menu-item.active svg { color: var(--menu-on-icon); }
:root .menu-item:hover:not(.active) { background-color: var(--menu-hover); }

/* ---------- หน้าต่าง/ป๊อปอัป: กระจกเบลอ (ลอยทับเนื้อหา) ---------- */
:root .modal-content,
:root .ui-dialog-card,
:root .bell-panel,
:root .ios-select-menu,
:root .ios-calendar,
:root .upload-pill {
    background-color: var(--glass-pop);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-edge);
}
:root[data-theme="dark"] .modal-backdrop { background-color: rgba(4, 6, 12, 0.5); }

/* ---------- การ์ด/ตาราง: พื้นทึบ ขอบบาง ---------- */
:root .dashboard-panel,
:root .table-container,
:root .stats-card,
:root .cp-card,
:root .billing-credit-panel { border: 1px solid var(--card-border); }

/* ---------- ปุ่ม/ช่องกรอก ---------- */
:root .btn-gold { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px var(--btn-glow); }
:root .btn-gold:hover { background-color: var(--gold-hover); }
:root[data-theme="dark"] .btn-outline {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

/* ---------- คัมบังในธีมมืด: โทนสงบไม่แสบตา (owner 2026-10-15) ----------
   คอลัมน์พื้นจางเกือบกลืนพื้นหลัง, การ์ดพื้นทึบเทาเข้ม, ตัวเลขนับในหัวคอลัมน์เป็นสีกลาง,
   ป้ายสถานะ/ชำระเงินลดความสด, การ์ด "ปิดงานแล้วยังไม่ชำระ" ใช้แถบแดงซ้ายแทนพื้นแดงทั้งใบ */
:root[data-theme="dark"] .kanban-column { background-color: rgba(255, 255, 255, 0.025); border-color: rgba(255, 255, 255, 0.05); }
:root[data-theme="dark"] .kanban-column-header { border-bottom-color: rgba(255, 255, 255, 0.05); }
:root[data-theme="dark"] .kanban-column-header h4 { color: #c3c9d6; }
:root[data-theme="dark"] .kanban-column-header .badge:not(#count-kanban-completed-unbilled) { background-color: var(--calm-bg); color: var(--calm-ink); border-color: transparent; }
:root[data-theme="dark"] .kanban-card {
    background-color: #1c2130;
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .kanban-card.is-closed-unpaid {
    background-color: #1c2130;
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: inset 3px 0 0 #c96a6a, 0 1px 2px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .kc-no { color: #8fa9e6; }
:root[data-theme="dark"] .kc-worker,
:root[data-theme="dark"] .kc-fee { color: #dfe3ec; }
:root[data-theme="dark"] .kanban-board .kc-badge { background-color: rgba(255, 255, 255, 0.06); color: #b8bfcd; border-color: transparent; }
:root[data-theme="dark"] .kanban-board .kc-badge.badge-danger { background-color: rgba(201, 106, 106, 0.14); color: #e3a3a3; }
:root[data-theme="dark"] .kanban-board .kc-badge.badge-warning { background-color: rgba(224, 180, 94, 0.12); color: #d9bd85; }
:root[data-theme="dark"] .kanban-board .kc-badge .ico { opacity: 0.8; }
:root[data-theme="dark"] .kc-batch { color: #9fb2de; }
:root[data-theme="dark"] .kc-batch span { background-color: rgba(255, 255, 255, 0.05); }
/* ธีมชมพู: แถบความคืบหน้าสายต่ออายุ / ขึ้นทะเบียน ใช้สีน้ำเงินแบบธีมสว่าง (owner 2026-10-27) — สายทำเล่มคงสีเขียว */
:root[data-theme="pink"] .rn-bar:not(.is-book-track) .rn-seg.is-done { background-color: #2d6cf6; }
:root[data-theme="pink"] .rn-ring-btn.is-main, :root[data-theme="pink"] .rn-steps-pop:not(.is-book) { --rn-c: #2d6cf6; }
:root[data-theme="pink"] .rn-bar:not(.is-book-track) .rn-seg.is-next { background-color: color-mix(in srgb, #2d6cf6 40%, transparent); }
/* สายทำเล่ม (หน้าต่ออายุ): ตัวอักษรเขียวสว่างขึ้นบนพื้นมืด */
:root[data-theme="dark"] .rn-ring-btn.is-book .rn-ring-name,
:root[data-theme="dark"] .rn-book-btn,
:root[data-theme="dark"] .rn-book-appt { color: #6fd39a; }

/* ---------- โหมดสบายตา: ป้ายทั่วไปสีกลาง, ข้อมูลรองจาง, แถวสลับสีจางมาก ---------- */
:root .badge-success,
:root .badge-gold:not(.job-type-badge) {
    background-color: var(--calm-bg);
    color: var(--calm-ink);
    border-color: transparent;
}
:root .data-table td { font-variant-numeric: tabular-nums; }
:root .data-table td small,
:root .worker-id-line,
:root .worker-id-line span,
:root .worker-id-line b { color: var(--text-muted); font-weight: 500; }
:root .data-table tbody tr:nth-child(even) { background-color: var(--zebra); }
:root .data-table tbody tr:hover { background-color: var(--row-hover); }

/* ---------- มุมโค้ง: แคปซูล ---------- */
:root {
    --radius-sm: 12px;
    --radius-md: 22px;
    --radius-lg: 26px;
}
:root .btn { border-radius: 999px; }
:root .action-icon-btn { border-radius: 50%; }
:root input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
:root select { border-radius: 999px; }
:root textarea { border-radius: 16px; }
:root .menu-item,
:root .sidebar-menu > .tab-slider,
:root .seg-host { border-radius: 999px; }
:root .seg-host > .btn,
:root .seg-host > .tab-slider { border-radius: 999px !important; }
:root .ios-select-menu,
:root .ios-calendar,
:root .bell-panel { border-radius: 20px; }

/* ---------- กระดาษที่พิมพ์: คงแบบเดิม (กรมท่า-ขาว มุมเล็ก) ---------- */
:root .invoice-sheet,
:root .delivery-label-sheet {
    --gold-primary: #2d4fa3;
    --gold-hover: #243f86;
    --gold-light: rgba(45, 79, 163, 0.06);
    --gold-border: rgba(45, 79, 163, 0.14);
    --text-muted: #64748b;
    --gray-bg: #f1f4f9;
    --gray-card: #ffffff;
}
:root .invoice-sheet .btn-gold { box-shadow: none; }
:root .invoice-sheet input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
:root .invoice-sheet select { border-radius: 6px; }
:root[data-theme="dark"] .invoice-sheet input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
:root[data-theme="dark"] .invoice-sheet select { background-color: #ffffff; border-color: #e2e8f0; }

/* ---------- ตัวอย่างสีในเมนูเลือกธีม ---------- */
.theme-swatch-light { background: linear-gradient(135deg, #e7eaf0 50%, #2d6cf6 50%); }
.theme-swatch-pink  { background: linear-gradient(135deg, #f3eef0 50%, #b8607f 50%); }
.theme-swatch-dark  { background: linear-gradient(135deg, #141a2a 50%, #3d7bff 50%); }

/* ---------- หน้า Login / ตั้งรหัสผ่านใหม่: ไม่มีการ์ด ฟอร์มลอยบนแสงสีของธีม โลโก้ 150px ไม่มีกรอบ ---------- */
#login-view, #reset-password-view { background-color: transparent; }
#login-view .login-card,
#reset-password-view .login-card {
    background: none;
    border: none;
    box-shadow: none;
}
#login-view .login-logo,
#reset-password-view .login-logo {
    width: 150px;
    height: 150px;
    padding: 0;
    background: none;
    box-shadow: none;
    border: none;
}
.login-card .btn { border-radius: 999px; }

/* ======================================================================================================
   เลื่อนในหน้าต่าง/กล่องรายการแล้วไม่ไปเลื่อนฉากหลัง (owner 2026-10-15)
   - เฉพาะกล่องที่เลื่อนขึ้นลงเองได้ (หน้าต่าง เมนู รายการ dropdown แถบเมนูซ้าย) — ไม่ใส่กับตาราง/แผงในหน้า
     (.table-container / .panel-content เลื่อนแนวนอน ถ้าใส่ไว้ ลูกกลิ้งบนตารางจะเลื่อนหน้าไม่ได้)
   - เปิดหน้าต่างอยู่ → หน้าข้างหลังล็อก ไม่เลื่อนเลย; scrollbar-gutter กันหน้าขยับซ้ายขวาตอนแถบเลื่อนหาย
   ====================================================================================================== */
.modal-content,
.modal-body,
.fv-list,
.fv-menu,
.ui-dialog-message,
.ui-dialog-summary,
.ui-dialog.ui-dialog-wide,
.sidebar,
.sidebar-menu,
.bell-panel,
.ios-select-menu,
.ios-calendar,
.search-suggest-dropdown,
.multi-filter-panel,
.job-worker-checklist,
.combine-jobs-list,
.commission-job-list,
.bt-checklist,
.ewp-paste-body,
.large-files-list,
.panel-alerts .panel-content { overscroll-behavior-y: contain; }
html { scrollbar-gutter: stable; }
html:has(.modal-backdrop:not(.hidden)),
html:has(.ui-dialog-backdrop) { overflow: hidden; }

/* เส้นกระพริบตอนพิมพ์ (caret) ใช้สีหลักของธีม ให้เห็นชัดทุกช่องพิมพ์ทุกธีม (owner 2026-10-19: มองไม่เห็นในช่องค้นหา) */
input, textarea, [contenteditable="true"] { caret-color: var(--gold-primary); }

/* ปุ่ม ✕ ล้างข้อความในช่องค้นหา (attachSearchClear ใน app.js, owner 2026-10-15) — แสดงเมื่อช่องมีข้อความ */
.search-clear-wrap { position: relative; display: block; width: 100%; }
.has-clear > input[type="text"],
.has-clear > input[type="search"] { padding-right: 40px !important; }
.search-clear-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--dk-subtle, rgba(120, 120, 128, 0.12));
    cursor: pointer;
    z-index: 2;
}
.search-clear-btn.is-shown { display: inline-flex; }
.search-clear-btn:hover { background-color: var(--gold-light); }
.search-clear-btn .ico { width: 14px; height: 14px; }
.search-box .search-clear-btn svg { position: static; transform: none; } /* .search-box svg (ไอคอนแว่นขยาย) ถูกจัดตำแหน่งไว้ซ้าย — ไม่ให้กระทบไอคอน ✕ */

/* หน้าต่างสรุปใบงาน (openJobQuickView) — แบบรายการ iOS (owner เลือกแบบ 3, 2026-10-19)
   พื้นเทาแบบ grouped + กลุ่มแถวการ์ดมน ชื่อช่องซ้าย ค่าขวา เส้นคั่นบาง; อยู่ใน .modal-backdrop จึงซ้อนหน้าต่างอื่นด้านบนได้ */
.jq-sheet {
    position: relative;
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 26px;
    background-color: var(--gray-bg);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12), 0 24px 60px rgba(15, 23, 42, 0.28), 0 0 0 1px var(--dk-line, transparent);
}
.jq-close { position: absolute; top: 14px; right: 14px; z-index: 1; }
.jq-head { padding: 24px 52px 14px; text-align: center; }
.jq-no { font-size: 13px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.jq-title { margin: 2px 0 8px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--text-dark); overflow-wrap: anywhere; }
.jq-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background-color: var(--dk-subtle, rgba(120, 120, 128, 0.12));
}
.jq-pill.is-ok { color: var(--dk-ok, #1f9254); background-color: var(--dk-ok-bg, #e5f5ed); }
.jq-pill.is-warn { color: var(--dk-warn, #b45309); background-color: var(--dk-warn-bg, #fffbeb); }
.jq-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 4px 16px 16px; }
.jq-sec { margin: 16px 16px 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.jq-group {
    display: block;
    width: 100%;
    border-radius: 14px;
    background-color: var(--dk-card, #ffffff);
    overflow: hidden;
}
.jq-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-left: 16px;
    padding: 11px 16px 11px 0;
    font-size: 14.5px;
}
.jq-row + .jq-row { border-top: 1px solid var(--dk-line, #e4e8ef); }
.jq-row > span { flex-shrink: 0; color: var(--text-dark); }
.jq-row > b { min-width: 0; font-weight: 500; color: var(--text-muted); text-align: right; overflow-wrap: anywhere; }
.jq-row.is-block { flex-direction: column; gap: 4px; }
.jq-row.is-block > b { text-align: left; white-space: pre-wrap; color: var(--text-dark); }
.jq-worker {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: none;
    font: inherit;
    text-align: left;
    color: inherit;
}
button.jq-worker { cursor: pointer; }
button.jq-worker:hover { background-color: var(--gold-light); }
.jq-avatar {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    color: var(--gold-primary);
    background-color: var(--gold-light);
}
.jq-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jq-worker-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jq-worker-text b { font-size: 16px; font-weight: 600; color: var(--text-dark); overflow-wrap: anywhere; }
.jq-worker-text small { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.jq-chev { font-size: 24px; line-height: 1; color: var(--text-muted); }
.jq-foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid var(--dk-line, #e4e8ef); }
.jq-foot .btn { flex: 1 1 0; min-width: 120px; justify-content: center; }

/* หน้ารายจ่าย: คนงานของใบงานที่รายจ่ายผูกไว้ (expenseWorkersLine) */
.expense-workers { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 12.5px; color: var(--text-muted); }
.expense-workers .ico { width: 13px; height: 13px; }

/* แผงข้อมูลคนงานด้านขวา (openWorkerQuickView — owner เลือกแบบ 3 + หัวเข้ม 2026-10-15)
   ไม่ใช่ .modal-backdrop: ตาราง/หน้าเลื่อนได้ตามปกติ, หน้าต่างที่เปิดจากแผงอยู่บนสุด (แผง 950 < หน้าต่าง 1000)
   หัวแผง = สีหลักของธีมผสมกรมท่าเข้ม จึงเข้มในทุกธีมโดยไม่ต้องมีกฎแยกธีม */
.worker-panel {
    position: fixed;
    top: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 950;
    width: min(440px, calc(100vw - 24px));
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    overflow: hidden;
    border-radius: 24px;
    background-color: var(--dk-card, #ffffff);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12), 0 24px 60px rgba(15, 23, 42, 0.28), 0 0 0 1px var(--dk-line, #e4e8ef);
    transform: translateX(calc(100% + 24px));
    visibility: hidden;
    transition: transform 0.15s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.15s;
}
.worker-panel.is-open { transform: none; visibility: visible; transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1); }
@media (prefers-reduced-motion: reduce) { .worker-panel, .worker-panel.is-open { transition: none; } }

.wp-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 54px 18px 20px;
    color: #ffffff;
    background: color-mix(in srgb, var(--gold-primary) 55%, #0b1020);
}
.wp-avatar {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background-color: rgba(255, 255, 255, 0.16);
    font-size: 24px;
    font-weight: 700;
}
.wp-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wp-head-text { min-width: 0; }
.wp-head-text h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: #ffffff; overflow-wrap: anywhere; }
.wp-head-text p { margin: 2px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.78); font-variant-numeric: tabular-nums; }
.wp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.wp-pill { padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #ffffff; background-color: rgba(255, 255, 255, 0.18); }
.wp-pill.is-ok { background-color: #2f8a5c; }
.wp-pill.is-warn { background-color: #e08a12; }
.wp-pill-inline { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle; }
.wp-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.wp-close:hover { background-color: rgba(255, 255, 255, 0.3); }

.wp-tabs { display: flex; gap: 4px; margin: 14px 18px 0; padding: 3px; border-radius: 999px; background-color: var(--dk-subtle, #eef1f6); }
.wp-tab {
    flex: 1;
    padding: 7px 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}
.wp-tab:hover { color: var(--navy-dark); }
.wp-tab.is-on { background-color: var(--gold-primary); color: #ffffff; font-weight: 600; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2); }

.wp-body { overflow-y: auto; overscroll-behavior-y: contain; padding: 6px 20px 16px; display: grid; gap: 16px; align-content: start; }
.wp-sec h4 {
    margin: 10px 0 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--dk-line, #e4e8ef);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy-dark);
}
.wp-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.wp-kv dt { color: var(--text-muted); }
.wp-kv dd { margin: 0; min-width: 0; text-align: right; font-weight: 600; color: var(--navy-dark); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wp-exp { display: inline-flex; align-items: center; gap: 6px; }
.wp-note { margin: 0; font-size: 14px; color: var(--navy-dark); white-space: pre-wrap; }
.wp-empty { margin: 18px 0; text-align: center; color: var(--text-muted); }

.wp-list { display: grid; gap: 2px; }
.wp-row {
    display: grid;
    gap: 1px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 12px;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.wp-row:hover { background-color: var(--dk-subtle, #f1f3f7); }
.wp-row b { font-size: 14px; font-weight: 600; color: var(--navy-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-row small { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wp-row.is-dim { opacity: 0.6; }
.wp-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.wp-row-top em { flex-shrink: 0; font-style: normal; font-weight: 700; color: var(--navy-dark); font-variant-numeric: tabular-nums; }
.wp-row .fv-dot:not(.is-ok):not(.is-warn):not(.is-bad) { background-color: var(--dk-line, #cfd6e2); }
.wp-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--text-muted); }

.wp-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 18px; border-top: 1px solid var(--dk-line, #e4e8ef); }
.wp-foot .btn { flex: 1 1 0; min-width: 110px; }

/* แถวในตารางของคนที่เปิดอยู่ในแผง */
.data-table tr.is-panel-row > td { background-color: var(--gold-light); }

/* เมนูคลิกขวา (openCtxMenu — แถวคนงาน / ใบงาน / การ์ด Kanban, owner 2026-10-15): หน้าตาเดียวกับ .fv-menu วางตรงเมาส์ */
.fv-menu.ctx-menu {
    display: grid;
    position: fixed;
    top: 0;
    right: auto;
    z-index: 3000;
    min-width: 220px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    animation: fadeIn 0.12s ease-out;
}

/* แถบ "แสดงเฉพาะจากการแจ้งเตือน" บนหน้าแจ้งงาน/ออกบิล (openBellGroup / renderBellFilterBar) */
.bell-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 8px 10px 8px 14px;
    border-radius: 14px;
    background-color: var(--gold-light);
    color: var(--navy-dark);
    font-size: 14px;
}
.bell-filter-bar > span:not(.ico) { flex: 1; min-width: 200px; }