:root { --brand: #1f3a5f; --brand-2: #2f6690; }
body { font-family: 'Sarabun', system-ui, sans-serif; background: #f4f6f9; font-size: 15px; }
.bg-brand { background: var(--brand); }
.bg-login { background: linear-gradient(135deg, var(--brand), var(--brand-2)); min-height: 100vh; }
.card { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card-header { background: #fff; font-weight: 600; }
.stat { border-left: 4px solid var(--brand-2); }
.stat .num { font-size: 1.6rem; font-weight: 600; }
.table th { white-space: nowrap; font-weight: 600; background: #f8f9fb; }
.table td { vertical-align: middle; }
.page-title { font-size: 1.35rem; font-weight: 600; margin: 0; }
label.required::after, .form-label.required::after { content: ' *'; color: #dc3545; }
.pre-wrap { white-space: pre-wrap; }
.privacy-note { font-size: .85rem; color: #6c757d; }
.bulk-bar { position: sticky; bottom: 0; background: #fff; border-top: 1px solid #dee2e6; padding: .75rem; z-index: 5; }
@media (max-width: 576px) { .table { font-size: 13px; } }

/* ปฏิทินวันที่ไทย */
.thai-date-group .thai-date-btn { padding-left: .6rem; padding-right: .6rem; }
.thai-cal { position: absolute; z-index: 2000; display: none; width: 280px; background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; padding: .5rem; font-size: 14px; }
.thai-cal .tc-head { display: flex; gap: .25rem; align-items: center; margin-bottom: .4rem; }
.thai-cal .tc-head select { flex: 1; border: 1px solid #dee2e6; border-radius: .3rem; padding: .15rem .25rem; font: inherit; background: #fff; }
.thai-cal .tc-head button, .thai-cal .tc-foot button { border: 0; background: #f1f3f5; border-radius: .3rem; padding: .2rem .55rem; font: inherit; cursor: pointer; }
.thai-cal .tc-head button:hover, .thai-cal .tc-foot button:hover { background: #e2e6ea; }
.thai-cal .tc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.thai-cal .tc-dow { font-size: 12px; color: #6c757d; padding: .15rem 0; }
.thai-cal .tc-day { border: 0; background: transparent; border-radius: .3rem; padding: .3rem 0; font: inherit; cursor: pointer; }
.thai-cal .tc-day:hover { background: #e7f1ff; }
.thai-cal .tc-sun { color: #dc3545; }
.thai-cal .tc-today { outline: 1px solid var(--brand-2); }
.thai-cal .tc-sel, .thai-cal .tc-sel:hover { background: var(--brand-2); color: #fff; }
.thai-cal .tc-foot { display: flex; gap: .25rem; justify-content: flex-end; margin-top: .4rem; }

/* รูปโปรไฟล์ */
.avatar { border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar-sm { width: 24px; height: 24px; font-size: 12px; }
.avatar-xl { width: 112px; height: 112px; font-size: 44px; }
.avatar-initial { background: var(--brand-2); color: #fff; font-weight: 600; }

/* ช่องเลือกแบบค้นหาได้ (Tom Select) */
.ts-wrapper.form-select { padding: 0; }
.ts-wrapper .ts-control { min-height: calc(1.5em + .75rem + 2px); }
.input-group > .ts-wrapper { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .ts-wrapper:not(:last-child) .ts-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ts-dropdown { z-index: 1060; font-size: .95rem; }
.ts-dropdown .no-results { padding: .5rem .75rem; color: #6c757d; }

/* ที่อยู่ไทยอัตโนมัติ */
.addr-menu { position: absolute; z-index: 2000; display: none; max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid #dee2e6; border-radius: .4rem; font-size: 14px; }
.addr-item { padding: .4rem .75rem; cursor: pointer; white-space: nowrap; }
.addr-item:hover, .addr-item.active { background: #e7f1ff; }

.ts-wrapper.single .ts-control { flex-wrap: nowrap; overflow: hidden; }
.ts-wrapper.single.input-active .ts-control > .item { display: none; }
.ts-wrapper.single .ts-control > .item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 1.5rem); }

/* หน้า Log */
.log-table td { vertical-align: top; }
.log-detail { max-width: 420px; word-break: break-word; }
.table-danger-subtle > td { background: #fff5f5; }

/* ปฏิทินการเข้าพบ (หน้าแรก) */
.visit-cal .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.visit-cal .cal-dow { padding: .4rem .6rem; font-size: .85rem; color: #6c757d; border-bottom: 1px solid #dee2e6; background: #fafbfc; }
.visit-cal .cal-day { min-height: 118px; padding: .25rem .35rem .4rem; border-right: 1px solid #eef0f2; border-bottom: 1px solid #eef0f2; display: flex; flex-direction: column; gap: 3px; }
.visit-cal .cal-day:nth-child(7n) { border-right: 0; }
.visit-cal .cal-add { cursor: pointer; }
.visit-cal .cal-add:hover { background: #f5f9ff; }
.visit-cal .cal-out { background: #fafafa; }
.visit-cal .cal-out .cal-date { color: #adb5bd; }
.visit-cal .cal-date { text-align: right; font-size: .85rem; color: #495057; }
.visit-cal .cal-today { box-shadow: inset 0 0 0 2px #0d6efd; }
.visit-cal .cal-today .cal-date { color: #0d6efd; font-weight: 600; }
.visit-cal .cal-ev { display: block; padding: 2px 6px; border-radius: 3px; font-size: .82rem; line-height: 1.35; color: #fff; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid transparent; }
.visit-cal .cal-ev:hover { filter: brightness(.92); color: #fff; }
.visit-cal .ev-mine { border-left-color: rgba(0,0,0,.45); font-weight: 600; }
.visit-cal .cal-more { font-size: .78rem; color: #495057; padding-left: 4px; }
.visit-cal .list-group .cal-ev { margin-top: 3px; white-space: normal; }
.visit-cal .cal-today-row { background: #f5f9ff; }
.ev-planned { background: #1e88e5; }
.ev-done { background: #2e9d4f; }
.ev-overdue { background: #e8890c; }
.ev-cancelled { background: #dc3545; text-decoration: line-through !important; }
.cal-legend { font-size: .8rem; color: #495057; display: inline-flex; align-items: center; gap: 4px; }
.cal-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }

/* ประวัติการเข้าพบ (หน้ารายงาน) */
.history { max-height: 70vh; overflow-y: auto; }
.hist-item { display: block; position: relative; padding: .5rem .25rem .6rem 1.1rem; border-bottom: 1px solid #eef0f3; color: inherit; text-decoration: none; }
.hist-item:last-child { border-bottom: 0; }
.hist-item:hover { background: #f6f8fb; }
.hist-item::before { content: ""; position: absolute; left: .25rem; top: .8rem; width: .55rem; height: .55rem; border-radius: 50%; background: #adb5bd; }
.hist-item.ev-planned-line::before { background: #1e88e5; }
.hist-item.ev-done-line::before { background: #2e9d4f; }
.hist-item.ev-overdue-line::before { background: #e8890c; }
.hist-item.current { background: #fff8e1; }
.hist-what { white-space: pre-line; font-size: .92rem; }

/* ประวัติสถานะค่าใช้จ่าย: แถบสีด้านซ้ายตามสถานะ */
.text-bg-orange { background-color: #fd7e14 !important; color: #fff !important; }
.status-timeline .list-group-item { border-left: 4px solid #adb5bd; }
.status-timeline .st-draft { border-left-color: #6c757d; }
.status-timeline .st-submitted { border-left-color: #ffc107; }
.status-timeline .st-mgr_approved { border-left-color: #fd7e14; }
.status-timeline .st-approved { border-left-color: #0dcaf0; }
.status-timeline .st-verified { border-left-color: #0d6efd; }
.status-timeline .st-paid { border-left-color: #198754; }
.status-timeline .st-rejected { border-left-color: #dc3545; background: #fff5f5; }
.status-timeline .st-rejected .st-note { color: #b02a37; font-weight: 600; }
.st-note { margin-top: .15rem; white-space: pre-line; }

/* เกรดการเข้าพบ */
.grade-badge { color: #fff; min-width: 1.6em; font-weight: 700; }
.grade-pick { display: flex; flex-wrap: wrap; gap: .5rem; }
.grade-pick .grade-opt { flex: 1 1 200px; margin: 0; cursor: pointer; }
.grade-pick .grade-opt input { position: absolute; opacity: 0; pointer-events: none; }
.grade-pick .grade-opt .box { display: block; border: 2px solid #dee2e6; border-radius: .5rem; padding: .45rem .65rem; height: 100%; background: #fff; transition: border-color .1s, box-shadow .1s; }
.grade-pick .grade-opt:hover .box { border-color: #adb5bd; }
.grade-pick .grade-opt input:checked + .box { border-color: var(--g); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--g) 25%, transparent); background: color-mix(in srgb, var(--g) 6%, #fff); }
.grade-pick .grade-opt input:focus-visible + .box { outline: 2px solid #0d6efd; outline-offset: 2px; }
.customer-short { font-size: .8rem; color: #6c757d; }

/* ป้ายทะเบียนรถ */
.plate { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; border: 2px solid #212529; border-radius: .35rem;
  background: #fff; padding: .1rem .55rem; font-weight: 700; font-size: 1rem; min-width: 7.5rem; }
.plate small { font-size: .62rem; font-weight: 600; }

/* ลายเซ็น */
.sig-box { width: 260px; height: 100px; border: 1px dashed #adb5bd; border-radius: .5rem; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(#f8f9fa 0% 25%, #fff 0% 50%) 0 0 / 16px 16px; }
.sig-box img { max-width: 240px; max-height: 88px; }
.sig-stamp { display: inline-block; text-align: center; min-width: 170px; margin: .25rem 1rem .25rem 0; vertical-align: top; }
.sig-stamp img { max-width: 170px; max-height: 64px; display: block; margin: 0 auto -6px; }
.sig-stamp .sig-line { border-top: 1px dotted #6c757d; padding-top: 2px; font-size: .8rem; }
.sig-stamp .sig-none { height: 58px; display: flex; align-items: flex-end; justify-content: center; color: #adb5bd; font-size: .75rem; }

/* รูปเช็คอิน/เช็คเอาท์ */
.check-photos { display: flex; flex-wrap: wrap; gap: .5rem; }
.check-photo { position: relative; }
.check-photo img { width: 168px; height: 126px; object-fit: contain; background: #111; border-radius: .4rem; border: 1px solid #dee2e6; display: block; }
.check-photo form { position: absolute; top: 4px; right: 4px; }
.check-photo .btn { padding: 0 .4rem; line-height: 1.4; }

/* แผนที่เช็คอินในหน้ารายงาน */
.check-map { position: relative; height: 200px; border-radius: .5rem; overflow: hidden; border: 1px solid #dee2e6; background: #eef1f4 center/cover no-repeat; cursor: zoom-in; }
.check-map > .check-map-hint { position: absolute; right: .5rem; bottom: .5rem; z-index: 5; background: rgba(255,255,255,.92); border-radius: 1rem; padding: .1rem .6rem; font-size: .8rem; box-shadow: 0 1px 3px rgba(0,0,0,.2); pointer-events: none; }
.check-map .check-map-shield { position: absolute; inset: 0; z-index: 4; }
.check-map-big { height: 70vh; min-height: 360px; }
@media (max-width: 575.98px) { .check-map-big { height: calc(100vh - 140px); } }
.lmk { white-space: nowrap; font: 600 12px/1 Sarabun, sans-serif; color: #fff; padding: 4px 8px; border-radius: 12px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.lmk-in { background: #198754; } .lmk-out { background: #f59e0b; }
.lmk-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .3rem; vertical-align: -1px; }
.lmk-dot.lmk-in { background: #198754; } .lmk-dot.lmk-out { background: #f59e0b; }
/* หมุดบนแผนที่ Longdo: ตัวหมุด 34x46 (ปลายชี้พิกัด) + ป้ายเวลาใต้หมุด */
.lmk-pin { position: relative; width: 34px; height: 46px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.lmk-pin svg { display: block; }
.lmk-pin .lmk-label { position: absolute; top: 48px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #fff; border: 2px solid; border-radius: 1rem;
  padding: 0 .45rem; font: 600 11px/1.5 system-ui, sans-serif; color: #212529; pointer-events: none; }

/* โลโก้บริษัท */
.logo-box { width: 220px; height: 110px; border: 1px dashed #adb5bd; border-radius: .5rem; display: flex; align-items: center; justify-content: center; padding: .4rem;
  background: repeating-conic-gradient(#f8f9fa 0% 25%, #fff 0% 50%) 0 0 / 16px 16px; }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-thumb { height: 32px; max-width: 80px; object-fit: contain; }
.logo-slot { width: 64px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }
.logo-slot img { max-width: 64px; max-height: 36px; object-fit: contain; }
.nav-logo { height: 26px; max-width: 70px; object-fit: contain; background: #fff; border-radius: 4px; padding: 2px 4px; }

/* ขั้นตอนการขาย */
.stage-badge { background: #1d3557; color: #fff; font-weight: 700; letter-spacing: .03em; }
.stage-flow { display: flex; flex-wrap: wrap; gap: .5rem; }
.stage-step { flex: 1 1 140px; background: #fff; border: 1px solid #dee2e6; border-left: 4px solid #8fa6c2; border-radius: .5rem; padding: .5rem .65rem; }
.stage-step.must { border-left-color: #1d3557; }
.stage-progress { height: .45rem; }

/* เมนูด้านบนไม่ตัดบรรทัด (เมนูเยอะสำหรับหัวหน้า/ผู้ดูแล) */
.navbar .nav-link, .navbar-text { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1440px) { .navbar .nav-link { padding-left: .4rem !important; padding-right: .4rem !important; font-size: .95rem; } }

/* สถานะรายงาน: แถบสี กำลังใช้งาน = เขียว, ยกเลิก = แดง */
tr.row-active > td:first-child { box-shadow: inset 4px 0 0 #198754; }
tr.row-cancelled > td:first-child { box-shadow: inset 4px 0 0 #dc3545; }
tr.row-cancelled > td { background: #fff5f5; color: #6c757d; }
.status-pill { display: inline-block; padding: .15rem .6rem; border-radius: 1rem; font-size: .85rem; font-weight: 600; }
.status-pill.active { background: #d1e7dd; color: #0f5132; }
.status-pill.cancelled { background: #f8d7da; color: #842029; }
.hist-item.ev-cancelled-line::before { background: #dc3545; }
.cal-legend .ev-cancelled { text-decoration: none !important; }

/* เมนูด้านบนแบบกลุ่ม */
.navbar .nav-link .bi { margin-right: .2rem; opacity: .85; }
.navbar .nav-link.active { background: rgba(255,255,255,.12); border-radius: .4rem; }
.nav-count { font-size: .7rem; vertical-align: 1px; }
.nav-menu { min-width: 230px; padding: .4rem; border: 0; box-shadow: 0 .5rem 1.5rem rgba(16,30,54,.18); border-radius: .6rem; }
.nav-menu .dropdown-item { border-radius: .4rem; padding: .45rem .7rem; }
.nav-menu .dropdown-item .bi { color: var(--brand-2); width: 1.1rem; text-align: center; }
.nav-menu .dropdown-item.active, .nav-menu .dropdown-item:active { background: var(--brand-2); color: #fff; }
.nav-menu .dropdown-item.active .bi, .nav-menu .dropdown-item:active .bi { color: #fff; }
.nav-menu .dropdown-header { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: #8a94a3; padding: .5rem .7rem .2rem; }
@media (max-width: 991.98px) { .nav-menu { box-shadow: none; background: rgba(255,255,255,.06); } .nav-menu .dropdown-item, .nav-menu .dropdown-header { color: #e9eef5; } .nav-menu .dropdown-item:hover { background: rgba(255,255,255,.1); } .nav-menu .dropdown-item .bi { color: #9fc3e6; } .nav-menu .dropdown-divider { border-color: rgba(255,255,255,.15); } }