/* Pack — mobile-first UI */
body { font-family: 'Sarabun', 'Padauk', system-ui, -apple-system, sans-serif; background: #f3f5f9; padding-bottom: 40px; }
.pack-wrap { max-width: 720px; margin: 0 auto; padding: 12px 10px; }
.pack-nav .navbar-brand { font-size: 1.15rem; }
@media (max-width: 991.98px) {
    .pack-nav .navbar-collapse { background: #fff; margin: 0 -12px; padding: 8px 12px 12px; border-radius: 0 0 10px 10px; }
    .pack-nav .navbar-collapse .nav-link { color: #212529; }
    .pack-nav .navbar-collapse .nav-link.active { color: #0d6efd; font-weight: 600; }
    .pack-nav .navbar-collapse .nav-link.dropdown-toggle { color: #212529; }
    .pack-nav .navbar-collapse .navbar-nav .nav-item:not(:last-child) { border-bottom: 1px solid #eef0f4; }
}
@media (min-width: 992px) {
    .pack-nav .navbar-nav .nav-item:not(:last-child) { border-right: 1px solid rgba(255,255,255,.25); }
}

.step-card { border: 0; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: 14px; overflow: hidden; }
.step-card .card-header { background: #fff; border-bottom: 1px solid #eef0f4; font-weight: 700; display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.step-card .card-header .step-no { width: 28px; height: 28px; border-radius: 50%; background: #e9efff; color: #0d6efd; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; flex: none; }
.step-card.done .card-header .step-no { background: #198754; color: #fff; }
.step-card .card-body { padding: 12px 14px; }

.media-preview { width: 100%; max-width: 360px; border-radius: 10px; border: 1px solid #dee2e6; background: #111; display: block; }
.media-preview.hidden, .hidden { display: none !important; }
.thumb-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.thumb-item { flex: 0 0 auto; width: 160px; }
.thumb-item img { width: 160px; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid #dee2e6; display: block; }
.thumb-item .thumb-tools { display: flex; gap: 4px; margin-top: 4px; }

.btn-cam { font-size: 1.05rem; padding: 10px 16px; border-radius: 12px; }
.btn-capture { font-size: 1.2rem; padding: 14px 18px; border-radius: 14px; width: 100%; max-width: 360px; }
.scan-input { font-size: 1.15rem; padding: 12px; border-radius: 12px; }

.progress-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.progress-chips .chip { font-size: .8rem; padding: 4px 10px; border-radius: 20px; background: #eef0f4; color: #6c757d; }
.progress-chips .chip.on { background: #d1e7dd; color: #0f5132; }

.link-box { width: 100%; font-size: .8rem; font-family: ui-monospace, Menlo, monospace; border-radius: 8px; }
.rec-log { white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: #0b1220; color: #c7d2fe; padding: 10px; border-radius: 10px; max-height: 180px; overflow: auto; }
.rec-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #dc3545; animation: blink 1s infinite; vertical-align: middle; margin-right: 6px; }
@keyframes blink { 50% { opacity: .2; } }

#qr-reader { width: 100%; max-width: 360px; border-radius: 12px; overflow: hidden; }
#busy-overlay { position: fixed; inset: 0; background: rgba(255,255,255,.75); z-index: 2000; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 12px; font-weight: 600; }
#busy-overlay.show { display: flex; }

.ref-row { display: flex; gap: 6px; margin-bottom: 6px; }
.ref-row input { flex: 1; }
.table-pack td, .table-pack th { vertical-align: middle; }
html[lang='my'] body, html[lang='ksw'] body { font-family: 'Padauk', 'Sarabun', sans-serif; line-height: 1.7; }
.lang-menu .dropdown-item.active { font-weight: 700; }
@media (max-width: 480px) { .pack-wrap { padding: 8px 6px; } .step-card .card-body { padding: 10px; } }

.sync-table th, .sync-table td { padding: 4px 6px; font-size: .9rem; }
.sync-table thead th { font-weight: 600; color: #6c757d; border-bottom-width: 1px; }

/* floating camera box (shared by every photo step) */
#cam-overlay { position: fixed; inset: 0; z-index: 2100; background: rgba(0,0,0,.82); display: none; align-items: center; justify-content: center; padding: 14px; }
#cam-overlay.show { display: flex; }
#rec-overlay { position: fixed; inset: 0; z-index: 2100; background: rgba(0,0,0,.82); display: none; align-items: center; justify-content: center; padding: 14px; }
#rec-overlay.show { display: flex; }
.cam-box { width: 100%; max-width: 420px; background: #111; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.cam-box-label { color: #fff; text-align: center; padding: 10px 12px 0; font-weight: 600; font-size: .95rem; }
.cam-box video { width: 100%; max-height: 60vh; background: #000; display: block; margin-top: 8px; }
.cam-box-actions { display: flex; gap: 10px; padding: 12px; }
.cam-box-actions .btn-capture { flex: 1; margin: 0; }

/* floating video-recording box (shares .cam-box styling with the photo camera box) */
.rec-status-row { color: #fff; padding: 10px 14px 0; }
.rec-log-summary { color: rgba(255,255,255,.65); cursor: pointer; }
.rec-box video { background: #000; }