/* RF / handheld screens */
body.rf { font-family: 'Noto Sans', 'Noto Sans Thai', sans-serif; background: #eef2f7; font-size: 1.05rem; min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); }
.rf-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; background: #0f172a; color: #fff; padding-top: calc(.5rem + env(safe-area-inset-top)); }
.rf-bar-btn { color: #fff; font-size: 1.5rem; line-height: 1; padding: .25rem .4rem; border-radius: .5rem; }
.rf-bar-btn:active { background: rgba(255, 255, 255, .15); }
.rf-bar-title { flex: 1; font-weight: 700; font-size: 1.15rem; }
.rf-bar-user { max-width: 40%; opacity: .75; }
.rf-main { max-width: 640px; margin: 0 auto; padding: .75rem; }

.rf-alert { border-radius: .75rem; padding: .75rem 1rem; margin-bottom: .75rem; font-weight: 600; font-size: 1.05rem; }
.rf-alert-success { background: #dcfce7; color: #14532d; border: 2px solid #22c55e; }
.rf-alert-danger { background: #fee2e2; color: #7f1d1d; border: 2px solid #ef4444; }
.rf-alert-warning { background: #fef3c7; color: #78350f; border: 2px solid #f59e0b; }
.rf-alert-info { background: #e0f2fe; color: #0c4a6e; border: 2px solid #38bdf8; }

/* home tiles */
.rf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.rf-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 7.5rem; border-radius: 1rem; background: #fff;
    color: #0f172a; text-decoration: none; font-weight: 700; font-size: 1.1rem; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); border: 2px solid transparent; text-align: center; padding: .5rem; }
.rf-tile i { font-size: 2.4rem; color: #2563eb; }
.rf-tile small { font-weight: 400; color: #64748b; font-size: .8rem; }
.rf-tile:active, .rf-tile:focus { border-color: #2563eb; background: #eff6ff; }

/* cards + scan field */
.rf-card { background: #fff; border-radius: 1rem; padding: 1rem; margin-bottom: .75rem; box-shadow: 0 1px 3px rgba(15, 23, 42, .1); }
.rf-step { font-size: .85rem; font-weight: 700; color: #2563eb; text-transform: uppercase; letter-spacing: .02em; margin-bottom: .35rem; }
.rf-scan .form-control { font-size: 1.35rem; height: 3.5rem; font-weight: 600; }
.rf-scan .btn { min-width: 3.5rem; font-size: 1.4rem; }
.rf-big { font-size: 2.4rem; font-weight: 800; line-height: 1.1; letter-spacing: .02em; }
.rf-qty { font-size: 1.6rem; font-weight: 800; }
.rf-btn { min-height: 3.5rem; font-size: 1.2rem; font-weight: 700; border-radius: .75rem; }
.rf .form-control, .rf .form-select { min-height: 3rem; font-size: 1.1rem; }
.rf-list { list-style: none; margin: 0; padding: 0; }
.rf-list > li, .rf-list > a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .7rem .25rem; border-bottom: 1px solid #e2e8f0; color: inherit; text-decoration: none; }
.rf-list > a:active, .rf-list > li[data-rf-fill]:active { background: #eff6ff; }
.rf-list > :last-child { border-bottom: 0; }
.rf-muted { color: #64748b; font-size: .9rem; }
.rf-task { border: 3px solid #2563eb; }
.rf-done { border: 3px solid #22c55e; }
.rf-progress { height: .6rem; border-radius: 1rem; background: #e2e8f0; overflow: hidden; }
.rf-progress > div { height: 100%; background: #22c55e; }

/* camera overlay */
.rf-cam { position: fixed; inset: 0; z-index: 50; background: #000; color: #fff; display: flex; flex-direction: column; }
.rf-cam-head { display: flex; justify-content: space-between; align-items: center; padding: .75rem; padding-top: calc(.75rem + env(safe-area-inset-top)); font-weight: 700; }
#rfCamReader { flex: 1; }
#rfCamReader video { object-fit: cover; }
.rf-cam-msg { padding: .75rem 1rem 1.5rem; text-align: center; opacity: .85; }

/* รูปหลักฐาน */
.att-thumb { width: 7.5rem; }
.att-thumb img { width: 7.5rem; height: 7.5rem; object-fit: cover; border-radius: .5rem; border: 1px solid #e2e8f0; background: #f8fafc; }
.att-thumb figcaption { font-size: .75rem; margin-top: .2rem; }
.rf-sign { width: 100%; height: 11rem; border: 2px dashed #94a3b8; border-radius: .75rem; background: #fff; touch-action: none; display: block; }

/* offline queue (scans saved on the device while Wi-Fi is down) */
.rf-queue { max-width: 640px; margin: .75rem auto 0; padding: 0 .75rem; }
.rf-queue-box { border-radius: .75rem; padding: .6rem .8rem; background: #fef3c7; border: 2px solid #f59e0b; color: #78350f; }
.rf-queue-box.rf-offline { background: #1e293b; border-color: #0f172a; color: #fff; }
.rf-queue-head { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.rf-queue-head .btn { margin-left: auto; }
.rf-queue ul { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .9rem; }
.rf-queue li { display: flex; gap: .5rem; align-items: flex-start; padding: .3rem 0; border-top: 1px solid rgba(0, 0, 0, .1); }
.rf-queue li .rf-q-msg { display: block; font-size: .8rem; opacity: .85; }
.rf-queue li.rf-q-failed { color: #991b1b; }
.rf-offline li.rf-q-failed { color: #fca5a5; }
.rf-queue li button { margin-left: auto; }

/* home tiles: a bit more compact + waiting-work badge in the corner */
.rf-tile { position: relative; min-height: 6.4rem; gap: .2rem; }
.rf-tile i { font-size: 2.1rem; }
.rf-count { position: absolute; top: .45rem; right: .55rem; min-width: 1.7rem; padding: .1rem .45rem; border-radius: 1rem; background: #dc2626; color: #fff; font-size: .85rem; font-weight: 700; line-height: 1.35; }
.rf-count.zero { background: #e2e8f0; color: #64748b; font-weight: 600; }
.rf-tile.has-work { border-color: #fecaca; }

/* hint box that the user can hide */
.rf-dismiss { position: relative; padding-right: 2.6rem; }
.rf-close { position: absolute; top: .35rem; right: .35rem; border: 0; background: transparent; color: inherit; font-size: 1.1rem; padding: .35rem .5rem; line-height: 1; }

/* drop-down lists use the page font */
select, select option, select optgroup { font-family: 'Noto Sans', 'Noto Sans Thai', sans-serif; }

/* instant updates (assets/realtime.js) on the RF screens */
.rt-area .rt-changed { position: sticky; top: .5rem; z-index: 1020; }
.rt-viewers { color: #64748b; }
.rt-toasts { position: fixed; right: .75rem; bottom: .75rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; max-width: calc(100vw - 1.5rem); }
.rt-toast { display: block; padding: .6rem .8rem; border-radius: .7rem; background: #fff; color: #0f172a; text-decoration: none; border-left: 4px solid #2563eb;
    opacity: 0; transform: translateY(.5rem); transition: opacity .3s ease, transform .3s ease; }
.rt-toast.show { opacity: 1; transform: none; }
.rt-status { position: fixed; left: .75rem; bottom: .75rem; z-index: 1090; padding: .35rem .7rem; border-radius: 2rem; font-size: .8rem; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* receive: way of receiving (normal / pallet), current pallet, tag sizes, chosen line */
.rf-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.rf-modes .btn { padding: .65rem .5rem; font-weight: 600; }
.rf-pallet { border-left: 4px solid #2563eb; }
.rf-tag-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.rf-tag-sizes .btn { padding: .6rem .25rem; font-weight: 600; }
.rf-list > a.rf-picked { background: #eff6ff; }