:root { --brand: #0d6efd; --bg: #f0f2f5; }
body { background: var(--bg); font-family: 'Sarabun', sans-serif; padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
.topbar { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); padding: 10px 0; position: sticky; top: 0; z-index: 20; }
.brand { font-weight: 700; color: var(--brand); text-decoration: none; font-size: 1.1rem; white-space: nowrap; }
#whoami { min-width: 0; cursor: pointer; }
.btn-logout { flex-shrink: 0; white-space: nowrap; }

input[readonly] { background-color: #e9ecef !important; color: #495057; font-weight: 500; }
.devbar { background: #fff3cd; padding: 6px 0; }
.card { border: none; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.06); margin-bottom: 14px; }
.card-header { background: #fff; border-bottom: 2px solid var(--bg); font-weight: 600; color: var(--brand); border-radius: 12px 12px 0 0 !important; }
.money { white-space: nowrap; font-weight: 700; }

/* แถบเมนูล่าง (มือถือ) */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; display: flex; box-shadow: 0 -1px 6px rgba(0,0,0,.08); padding-bottom: env(safe-area-inset-bottom); z-index: 30; }
.tabbar a { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; padding: 8px 0 6px; color: #6c757d; text-decoration: none; font-size: .75rem; position: relative; }
.tabbar a i { display: block; font-size: 1.35rem; line-height: 1.2; }
.tabbar a.active { color: var(--brand); font-weight: 600; }
.badge-dot { position: absolute; top: 4px; left: 50%; margin-left: 8px; background: #dc3545; color: #fff; border-radius: 10px; font-size: .7rem; padding: 0 6px; font-weight: 700; }

/* รายการในกล่องงาน */
.req-item { display: block; color: inherit; text-decoration: none; background: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.05); border-left: 4px solid var(--brand); }
.req-item:active { transform: scale(.99); }
.req-item .title { font-weight: 600; }
.req-item.demo { border-left-color: #ffc107; }
.empty { text-align: center; color: #6c757d; padding: 48px 16px; }
.empty .bi { font-size: 3rem; display: block; margin-bottom: 8px; }

/* ความคืบหน้าตามขั้น */
.track { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.track span { width: 20px; height: 20px; border-radius: 50%; font-size: .65rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; background: #e9ecef; color: #6c757d; }
.track .SIGNED { background: #198754; color: #fff; }
.track .PENDING { background: var(--brand); color: #fff; }
.track .REJECTED { background: #dc3545; color: #fff; }
.track .CANCELLED { background: #f8d7da; color: #dc3545; }

/* ลำดับการลงนามในหน้ารายละเอียด */
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #e9ecef; }
.steps li:last-child { border-bottom: 0; }
.steps .dot { flex: 0 0 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; background: #e9ecef; color: #6c757d; }
.steps .SIGNED .dot { background: #198754; color: #fff; }
.steps .PENDING .dot { background: var(--brand); color: #fff; box-shadow: 0 0 0 4px rgba(13,110,253,.18); }
.steps .REJECTED .dot { background: #dc3545; color: #fff; }
.steps .CANCELLED .dot { background: #f8d7da; color: #dc3545; }
.steps .me { background: #f1f6ff; border-radius: 8px; }
.steps img.sig { height: 34px; display: block; margin-top: 2px; }
.parallel-tag { font-size: .7rem; background: #e7f1ff; color: var(--brand); border-radius: 6px; padding: 0 6px; }

/* โต๊ะทำงาน */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.tile { border-radius: 10px; padding: 8px 10px; font-size: .8rem; }
.tile b { display: block; font-size: 1.5rem; line-height: 1.2; }
.tile.red { background: #fde8e8; color: #b42318; } .tile.amber { background: #fff4d6; color: #8a5a00; } .tile.green { background: #e3f6e9; color: #146c43; }
.lane { font-size: .85rem; color: #6c757d; margin: 14px 0 6px; font-weight: 600; }
.qno { display: inline-block; min-width: 26px; background: #e7f1ff; color: var(--brand); border-radius: 6px; font-size: .75rem; text-align: center; margin-right: 6px; }
.req-item.first { box-shadow: 0 0 0 2px rgba(13,110,253,.35); }
.req-item.upcoming { border-left-color: #ffc107; }
.req-item.done { border-left-color: #198754; }
.req-item.void { border-left-color: #dc3545; }
.pdf-host { background: #e9ecef; border-radius: 0 0 12px 12px; padding: 8px; max-height: 80vh; overflow: auto; }
.pdf-host .pg { position: relative; margin: 0 auto 8px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.pdf-host .pg canvas { display: block; width: 100%; height: auto; }
.pdf-host .pg .pgno { position: absolute; top: 4px; right: 6px; font-size: .7rem; color: #6c757d; background: rgba(255,255,255,.85); border-radius: 6px; padding: 0 6px; pointer-events: none; }
.pdf-host.placing .pg { cursor: crosshair; }

/* กรอบลายเซ็นบนเอกสาร */
.sigbox { position: absolute; border: 2px dashed #6c757d; background: rgba(108,117,125,.12); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: #495057; overflow: hidden; white-space: nowrap; pointer-events: none; }
.sigbox.active { border-color: var(--brand); background: rgba(13,110,253,.16); color: var(--brand); }
.sigbox.mine { border: 2px solid #dc3545; background: rgba(220,53,69,.12); color: #dc3545; animation: sigpulse 1.4s ease-in-out infinite; }
@keyframes sigpulse { 50% { box-shadow: 0 0 0 6px rgba(220,53,69,.18); } }
@media (prefers-reduced-motion: reduce) { .sigbox.mine { animation: none; } }

/* ตัวแก้ไขเส้นทางลงนาม */
.route-row { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dashed #e9ecef; flex-wrap: wrap; }
.route-row .no { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #e7f1ff; color: var(--brand); font-weight: 700; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.route-row select { flex: 1 1 200px; min-width: 0; }
.route-row.par { margin-left: 18px; border-left: 3px solid #e7f1ff; padding-left: 8px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid #ced4da; background: #fff; border-radius: 999px; padding: 4px 12px; font-size: .85rem; cursor: pointer; }
.chip.active { border-color: var(--brand); background: #e7f1ff; color: var(--brand); font-weight: 600; }
.chip.placed::after { content: " ✓"; color: #198754; }

.sticky-actions { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); padding: 16px 0 8px; z-index: 5; }
.reg-item .form-check { margin-bottom: 2px; }
.table-admin td, .table-admin th { vertical-align: middle; }
.act-item { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #e9ecef; color: inherit; text-decoration: none; font-size: .9rem; }
.act-item:last-of-type { border-bottom: 0; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* โซนหมวกในโต๊ะทำงาน */
.zone { margin-bottom: 18px; }
.zone-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.hat { display: inline-flex; align-items: center; gap: 4px; border-radius: 20px; padding: 3px 12px; font-weight: 600; font-size: .9rem; }
.hat.sign { background: #e7f1ff; color: var(--brand); }
.hat.own { background: #e3f6e9; color: #146c43; }
.zone-own .req-item { border-left-color: #198754; }
.track .SKIPPED, .steps .SKIPPED .dot { background: #f8f9fa; color: #adb5bd; border: 1px dashed #adb5bd; }

/* ลงทะเบียนลายมือชื่อ */
.enroll-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.enroll-shots .shot { position: relative; height: 64px; border: 1px solid #dee2e6; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.enroll-shots .shot img { max-width: 100%; max-height: 100%; }
.enroll-shots .shot span { position: absolute; top: 2px; left: 6px; font-size: .7rem; color: #6c757d; }
.enroll-shots .shot.empty { border-style: dashed; background: #f8f9fa; }