:root{color-scheme:light;font-family:Roboto,Segoe UI,system-ui,-apple-system,sans-serif;color:#172033;background:#f5f7fb;--primary: #1769aa;--primary-dark: #0d4778;--surface: #fff;--muted: #5f6b7a;--divider: #dfe4ec;--danger: #b3261e;--warning: #8a4b00;--success: #176b3a;--footer-height: 76px}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%}body{min-height:100vh;background:#f5f7fb}button,input{font:inherit}button{min-height:48px;border:0;border-radius:8px;padding:0 20px;color:#fff;background:var(--primary);font-weight:700;cursor:pointer;transition:background .15s ease,box-shadow .15s ease}button:hover{background:var(--primary-dark)}button:focus-visible,input:focus-visible{outline:3px solid #80bfff;outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.55}input{min-height:48px;width:100%;border:1px solid #aeb8c7;border-radius:8px;padding:0 14px;color:#172033;background:var(--surface)}label{display:block;margin-bottom:8px;font-weight:700}h1,h2,h3,p{margin-top:0}.login-container,.shipment-list-container{width:min(100% - 32px,720px);margin:0 auto;padding:32px 0}.login-container{min-height:100dvh;display:flex;flex-direction:column;justify-content:center}.login-container h1,.shipment-list-container>h1{margin-bottom:28px;color:#102a43;font-size:clamp(1.7rem,5vw,2.25rem)}#login-form{padding:24px;border-radius:12px;background:var(--surface);box-shadow:0 3px 14px #102a431f}.form-group{margin-bottom:20px}#login-form button{width:100%;margin-top:4px}.error-message{margin:14px 0 0;padding:12px 14px;border-radius:8px;color:#7f1d1d;background:#fde8e7}.shipment-list-header,.scan-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.shipment-list-header{margin-bottom:28px}.user-display-name{overflow:hidden;text-overflow:ellipsis;font-weight:700}.logout-button,.back-button{min-height:44px;padding:0 16px;background:#526174}.search-container{margin-bottom:20px}.shipment-list{display:grid;gap:12px}.shipment-item{padding:18px;border:1px solid var(--divider);border-radius:12px;background:var(--surface);cursor:pointer;box-shadow:0 2px 7px #102a4314}.shipment-item:hover,.shipment-item:focus-within{box-shadow:0 4px 14px #102a4326}.shipment-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.shipment-header h3{margin:0;color:#102a43;overflow-wrap:anywhere}.shipment-state{padding:5px 9px;border-radius:999px;color:#174a72;background:#e4f0fa;font-size:.78rem;font-weight:700;text-transform:capitalize}.shipment-details p{margin:5px 0;color:var(--muted)}.scan-container{display:flex;flex-direction:column;width:100%;height:100dvh;min-height:480px;padding:0 0 calc(var(--footer-height) + env(safe-area-inset-bottom))!important;overflow:hidden}.camera-preview{position:relative;flex:0 0 50%;height:auto!important;min-height:0;margin:0!important;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#101820}.camera-preview video{display:block;width:100%;height:100%;object-fit:contain}.camera-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;text-align:center;color:#fff}.camera-placeholder[hidden]{display:none}.camera-placeholder p{margin:0;font-weight:700}.camera-icon{margin-bottom:8px;font-size:42px}.shipment-items{flex:1 1 50%;height:auto!important;min-height:0;margin:0!important;padding:16px;overflow-y:auto;background:#f5f7fb}.scan-header{margin-bottom:14px}.shipment-name{margin:0;overflow-wrap:anywhere;color:#102a43;font-size:1.15rem}.items-list{display:flex;flex-direction:column;gap:10px}.shipment-item-row{display:flex;align-items:center;gap:12px;min-height:76px;padding:13px 12px!important;border-left:4px solid var(--primary);border-radius:10px;background:var(--surface);box-shadow:0 2px 7px #102a4314}.shipment-item-row.item-complete{border-left-color:var(--success);background:#eaf7ef}.shipment-item-row.item-has-issues,.shipment-item-row.item-missing-barcode,.shipment-item-row.item-incompatible-uom,.shipment-item-row.item-unsupported-quantity,.shipment-item-row.item-ambiguous-barcode{border-left-color:var(--danger);background:#fff1f0}.item-info{min-width:0;flex:1}.item-name{overflow-wrap:anywhere;font-weight:700}.item-barcode{margin-top:4px;overflow:hidden;color:var(--muted);font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.item-progress{flex:0 0 auto;font-weight:800;white-space:nowrap}.item-status-icon{margin-left:5px;font-size:1rem}.quantity-controls{display:flex;gap:6px}.quantity-controls button{width:44px;min-height:44px;padding:0;font-size:1.3rem;line-height:1}.quantity-decrement{background:#526174}.shipment-issue-warning{margin-bottom:12px;padding:12px 14px;border-left:4px solid #c77b00;border-radius:8px;color:#633600;background:#fff4d6}.shipment-blocker-list{margin:8px 0 0;padding-left:20px}.scanner-controls{position:fixed;z-index:10;right:0;bottom:0;left:0;display:flex;align-items:stretch;min-height:var(--footer-height);padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--divider);background:#fffffff7;box-shadow:0 -3px 12px #102a431f}.status-indicator,.scanner-button{flex:1 1 50%;min-width:0}.status-indicator{display:flex;align-items:center;justify-content:center;gap:9px;border-right:1px solid var(--divider);color:#7f1d1d;font-weight:800}.status-dot{width:14px;height:14px;flex:0 0 14px;border-radius:50%;background:var(--danger)}.status-indicator.scanning{color:var(--warning)}.status-indicator.scanning .status-dot{background:#c77b00}.status-indicator.complete,.status-indicator.completed{color:var(--success)}.status-indicator.complete .status-dot,.status-indicator.completed .status-dot{background:#1f8a4c}.status-indicator.error{color:var(--danger)}.scanner-button{margin-left:12px}.notification-toast{position:fixed;z-index:1000;top:max(16px,env(safe-area-inset-top));left:50%;width:min(calc(100% - 32px),520px);transform:translate(-50%);padding:14px 18px;border-radius:8px;color:#fff;font-weight:700;text-align:center;box-shadow:0 4px 14px #102a4338;opacity:0;transition:opacity .3s ease}.notification-toast.notification-error{background:var(--danger)}.notification-toast.notification-warning{color:#3d2400;background:#ffcf66}.notification-toast.notification-success{background:var(--success)}@media (min-width: 769px){.scan-container,.scanner-controls{width:min(100%,1100px);margin:0 auto}}@media (max-width: 430px){.shipment-items{padding:12px}.scan-header{align-items:flex-start}.back-button{padding:0 10px}.shipment-item-row{gap:8px;padding:10px 8px}.quantity-controls{gap:3px}.quantity-controls button{width:42px}}
