/* Scanner UI — slow Android devices: no animations, no shadows, big targets. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 18px; }
body { font-family: system-ui, Roboto, sans-serif; background: #f2f4f6; color: #14202c;
       min-height: 100vh; }
.top { display: flex; justify-content: space-between; align-items: center;
       background: #1d3a56; color: #fff; padding: 10px 12px; gap: 10px; }
.backbtn { color: #fff; text-decoration: none; font-size: 24px; line-height: 1;
       border: 1px solid rgba(255,255,255,.5); border-radius: 8px;
       padding: 6px 14px; flex: none; }
.backbtn:active { background: rgba(255,255,255,.15); }
.brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; }
.top-actions { display: flex; gap: 8px; }
.top-actions form { display: inline; }
.ghost { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff;
         border-radius: 6px; padding: 8px 12px; font-size: 14px; }
main { padding: 16px 14px 90px; max-width: 560px; margin: 0 auto; }

h1 { font-size: 24px; margin-bottom: 16px; }
.center-text { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.center { align-items: stretch; margin-top: 10vh; }
.err { background: #b3261e; color: #fff; padding: 12px; border-radius: 8px;
       font-weight: 600; text-align: center; }

.bigin, .qtyin { font-size: 28px; padding: 14px; border: 2px solid #9fb0c0;
       border-radius: 10px; width: 100%; text-align: center; background: #fff; }
.bigin:focus, .qtyin:focus { outline: 3px solid #1d6fd1; border-color: #1d6fd1; }

button.primary { background: #1d6fd1; color: #fff; border: 0; border-radius: 10px;
       font-size: 24px; font-weight: 700; padding: 18px; width: 100%; }
button.primary:active { background: #14508f; }
.wide { width: 100%; }
main .ghost { color: #44576a; border-color: #9fb0c0; font-size: 18px; padding: 14px;
       border-radius: 10px; background: #fff; margin-top: 10px; }

.name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.name-btn { width: 100%; font-size: 22px; font-weight: 700; padding: 26px 8px;
       background: #fff; color: #14202c; border: 2px solid #c6d0da; border-radius: 12px; }
.name-btn:active { background: #dce8f5; border-color: #1d6fd1; }

.menu { display: grid; gap: 14px; margin-top: 6vh; }
.menu-btn { display: block; text-align: center; text-decoration: none; font-size: 30px;
       font-weight: 800; letter-spacing: .04em; padding: 30px 10px; border-radius: 14px;
       background: #1d6fd1; color: #fff; }
.menu-btn:active { background: #14508f; }
.menu-btn.disabled { background: #c2ccd6; color: #7d8b99; pointer-events: none; }
.menu-btn.alt { background: #fff; color: #1d6fd1; border: 3px solid #1d6fd1; }
.menu-btn.alt:active { background: #dce8f5; }
.donebtn { flex: 1; background: #167a3d; color: #fff; border: 0; border-radius: 10px;
       font-size: 17px; font-weight: 800; padding: 12px; }
.donebtn:active { background: #0f5c2c; }
.carton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
       gap: 10px; margin-top: 14px; }
.carton { aspect-ratio: 1; font-size: 24px; font-weight: 800; border-radius: 12px;
       border: 2px solid #9fb0c0; background: #fff; color: #14202c; }
.carton.got { background: #167a3d; border-color: #167a3d; color: #fff; }
.carton:active { border-color: #1d6fd1; }
.done-header { font-weight: 800; color: #167a3d; margin: 20px 0 8px; font-size: 17px; }
.task.done-item { opacity: .7; border-color: #bfe3cc; background: #f3faf5; }

.prompt { font-size: 30px; font-weight: 800; text-align: center; margin: 26px 0 6px;
       text-wrap: balance; }
.sub { text-align: center; color: #44576a; font-size: 17px; margin-bottom: 16px; }
.cards { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.card { display: flex; justify-content: space-between; align-items: center; width: 100%;
       background: #fff; border: 2px solid #c6d0da; border-radius: 12px; padding: 16px;
       font-size: 20px; }
.card:active { border-color: #1d6fd1; background: #dce8f5; }
.card-main { font-weight: 700; font-family: ui-monospace, monospace; }
.card-sub { color: #44576a; }
.qtyin { margin: 8px 0 14px; }

/* hidden scan input keeps focus without showing a keyboard caret in the way */
#scanin { position: fixed; top: -60px; left: 0; width: 10px; height: 10px; opacity: 0; }

.manual-bar { display: flex; gap: 8px; margin-bottom: 14px; position: relative;
       flex-wrap: wrap; }
.manual-drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0;
       background: #fff; border: 2px solid #9fb0c0; border-radius: 10px;
       z-index: 30; max-height: 46vh; overflow-y: auto; }
.manual-sug { display: flex; flex-direction: column; align-items: flex-start;
       width: 100%; text-align: left; background: none; border: 0;
       border-bottom: 1px solid #e3e8ee; padding: 10px 12px; font-size: 16px; }
.manual-sug:last-child { border-bottom: 0; }
.manual-sug:active { background: #dce8f5; }
.ms-main { font-family: ui-monospace, monospace; font-weight: 700; }
.ms-sub { color: #44576a; font-size: 13px; }
.manual-in { flex: 1; font-size: 18px; padding: 12px; border: 2px solid #9fb0c0;
       border-radius: 10px; background: #fff; min-width: 0; }
.manual-in:focus { outline: 3px solid #1d6fd1; border-color: #1d6fd1; }
.manual-go { background: #1d6fd1; color: #fff; border: 0; border-radius: 10px;
       font-size: 17px; font-weight: 700; padding: 0 22px; }
.choices-overlay { position: fixed; inset: 0; background: rgba(20, 32, 44, .55);
       z-index: 40; display: flex; align-items: flex-start; justify-content: center;
       overflow-y: auto; padding: 30px 14px; }
.choices-box { background: #f2f4f6; border-radius: 14px; padding: 18px 14px;
       width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 10px; }
.choices-box .prompt { margin: 0 0 6px; font-size: 24px; }

.card.link { text-decoration: none; color: #14202c; display: flex; }
.card.run { border-color: #b7791f; background: #fdf3e0; }
.pick-head { display: flex; justify-content: space-between; align-items: baseline;
       margin-bottom: 6px; gap: 10px; }
.pick-name { font-weight: 800; font-size: 19px; word-break: break-all; }
.pick-progress { color: #44576a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.task { background: #fff; border: 2px solid #c6d0da; border-radius: 12px;
       padding: 12px 14px; margin-bottom: 10px; }
.task.tap { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.task.tap:active { border-color: #1d6fd1; background: #eef4fb; }
.task.skipped { border-style: dashed; background: #f8f4ea; }
.prompt.small { font-size: 22px; margin: 8px 0 2px; }
.skipped-head { font-weight: 800; color: #8a5a00; margin: 20px 0 8px; font-size: 17px; }
.btnrow { display: flex; gap: 8px; margin-top: 10px; }
.skipbtn { background: #fff; color: #44576a; border: 2px solid #9fb0c0; border-radius: 10px;
       font-size: 15px; font-weight: 700; padding: 8px 16px; }
.skipbtn:active { background: #dce8f5; }
.bigbin { text-align: center; font-family: ui-monospace, monospace; font-size: 26px;
       font-weight: 800; background: #dce8f5; color: #14508f; border-radius: 10px;
       padding: 12px; margin-bottom: 8px; }
.otherbtn { width: 100%; background: #fff; color: #8a5a00; border: 2px solid #d3a44a;
       border-radius: 10px; font-size: 16px; font-weight: 700; padding: 12px;
       margin-top: 14px; }
.otherbtn:active { background: #fdf3e0; }
.task-top { display: flex; justify-content: space-between; align-items: baseline; }
.task-sku { font-family: ui-monospace, monospace; font-weight: 700; font-size: 19px; }
.task-qty { font-size: 38px; font-weight: 800; color: #1d6fd1; line-height: 1; }
.task-desc { color: #44576a; font-size: 14px; margin: 2px 0 4px; }
.task-bin { font-weight: 800; font-size: 24px; font-family: ui-monospace, monospace; }
.task-bin.warn { color: #b3261e; }
.shortbtn { flex: 1; background: #fff; color: #b3261e;
       border: 2px solid #b3261e; border-radius: 10px; font-size: 16px;
       font-weight: 700; padding: 10px; }
.shortbtn:active { background: #fbe9e7; }
.donebox { background: #167a3d; color: #fff; border-radius: 14px; text-align: center;
       font-size: 26px; font-weight: 800; padding: 40px 16px; margin: 20px 0; }

.flash { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
       font-size: 34px; font-weight: 800; color: #fff; text-align: center; padding: 24px;
       z-index: 50; text-wrap: balance; }
.flash.ok { background: rgba(22, 122, 61, .96); }
.flash.err { background: rgba(179, 38, 30, .96); }

.day-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.day-chip { font-size: 13px; font-weight: 700; color: #fff; border-radius: 6px; padding: 4px 10px; }
.day-0, .carton.got.day-0 { background: #167a3d; border-color: #167a3d; }
.day-1, .carton.got.day-1 { background: #1d6fd1; border-color: #1d6fd1; }
.day-2, .carton.got.day-2 { background: #7c3aed; border-color: #7c3aed; }
.day-3, .carton.got.day-3 { background: #d97706; border-color: #d97706; }
.day-4, .carton.got.day-4 { background: #db2777; border-color: #db2777; }
.day-5, .carton.got.day-5 { background: #0f766e; border-color: #0f766e; }

/* bin-move recommendation cards */
.movebins { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px;
            flex-wrap: wrap; }
.movebins .lbl { font-size: 12px; color: #5b6b7a; text-transform: uppercase;
                 letter-spacing: .05em; margin-right: 4px; }
.binbig { font-family: ui-monospace, Consolas, monospace; font-size: 26px;
          font-weight: 800; letter-spacing: .02em; }
.movebins .arrow { font-size: 24px; font-weight: 800; }
.qtyin { width: 84px; font-size: 22px; font-weight: 700; text-align: center;
         padding: 10px 6px; border-radius: 10px; border: 2px solid #b9c4cf;
         background: #fff; color: #14202c; }

/* wide receive-all action under the carton grid */
.bigbtn { display: block; width: 100%; margin-top: 18px; padding: 16px;
          font-size: 19px; font-weight: 800; border-radius: 12px; border: 0; }
.warnbtn { background: #b45309; color: #fff; }
.warnbtn:disabled { opacity: .6; }