/* ReceiveRight — Components CSS: Buttons, Cards, Inputs, Scan Zones, PIN Pad */

/* ── APP HEADER ── */
.app-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 50px;
}

.header-logo {
  width: 28px;
  height: 28px;
  background: var(--primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
  letter-spacing: -1px;
}

.header-back {
  width: 28px;
  height: 28px;
  background: #f3f4f6;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-secondary);
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  margin-right: 2px;
  transition: background 0.15s;
}

.header-back:active { background: var(--border); }

.header-text {
  flex: 1;
}

.header-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.header-subtitle {
  font-size: 9px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.header-action {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* ── STEP PROGRESS BAR ── */
.stepper {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.stepper::-webkit-scrollbar { display: none; }

.step-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.step-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.2s;
}

.step-dot.done { background: var(--success); color: white; }
.step-dot.active { background: var(--primary); color: white; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
.step-dot.inactive { background: var(--border); color: var(--text-muted); }

.step-line {
  flex: 1;
  height: 1px;
  background: var(--border);
  margin-top: 11px;
  min-width: 20px;
}
.step-line.done { background: var(--success); }

.step-label {
  font-size: 8px;
  color: var(--text-muted);
  margin-top: 3px;
  white-space: nowrap;
}
.step-label.active { color: var(--primary); font-weight: 600; }
.step-label.done { color: var(--success); }

/* ── CARD ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.card-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

/* Info row inside card */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.info-label {
  font-size: 10px;
  color: var(--text-secondary);
}

.info-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}

.info-value.blue { color: var(--primary); }
.info-value.green { color: var(--success); }
.info-value.amber { color: var(--warning); }
.info-value.red { color: var(--danger); }
.info-value.purple { color: var(--manager); }

/* ── BUTTONS ── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  border: none;
  width: 100%;
  cursor: pointer;
  min-height: var(--touch-min);
  transition: all 0.15s;
  -webkit-user-select: none;
  user-select: none;
  letter-spacing: 0.1px;
  text-decoration: none;
}

.btn:active { transform: scale(0.98); opacity: 0.9; }

.btn-primary { background: var(--primary); color: white; }
.btn-primary:active { background: var(--primary-dark); }

.btn-success { background: #16a34a; color: white; }
.btn-success:active { background: #15803d; }

.btn-warning { background: var(--warning-dark); color: white; }
.btn-warning:active { background: #b45309; }

.btn-danger { background: var(--danger); color: white; }
.btn-danger:active { background: #b91c1c; }

.btn-purple { background: var(--manager); color: white; }
.btn-purple:active { background: #6d28d9; }

.btn-ghost {
  background: #f9fafb;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-ghost:active { background: var(--border); }

.btn-outline-primary {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}

.btn-row {
  display: flex;
  gap: 8px;
}
.btn-row .btn { flex: 1; }

.btn-sm {
  padding: 9px 12px;
  font-size: 11px;
  min-height: 36px;
}

.btn-lg {
  padding: 16px;
  font-size: 15px;
  font-weight: 800;
  min-height: 56px;
}

/* ── SCAN ZONE ── */
.scan-zone {
  background: #f9fafb;
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
}

.scan-zone.scanning {
  border-color: var(--primary);
  background: rgba(59,130,246,0.04);
  animation: scan-pulse 1.5s ease-in-out infinite;
}

.scan-zone.done {
  border-color: var(--success-border);
  background: var(--success-bg);
}

.scan-zone.error {
  border-color: var(--danger-border);
  background: var(--danger-bg);
}

@keyframes scan-pulse {
  0%, 100% { border-color: var(--primary); }
  50% { border-color: rgba(59,130,246,0.4); }
}

.scan-icon { font-size: 28px; margin-bottom: 6px; }
.scan-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.scan-sub {
  font-size: 10px;
  color: var(--text-secondary);
}

.scan-result {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 10px;
  text-align: left;
}

.scan-result-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--success);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.scan-result-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--success);
  font-family: 'Courier New', monospace;
}

/* ── PIN PAD ── */
.pin-display {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 0;
}

.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition: all 0.15s;
}

.pin-dot.empty { background: #e5e7eb; border: 1.5px solid #d1d5db; }
.pin-dot.filled { background: var(--primary); }
.pin-dot.filled-supervisor { background: var(--supervisor); }
.pin-dot.filled-manager { background: var(--manager); }

.pin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pin-key {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  width: 100%;
  height: var(--pin-key);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: all 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
}

.pin-key:active {
  background: #f3f4f6;
  transform: scale(0.95);
}

.pin-key.enter {
  background: var(--primary);
  color: white;
  font-size: 13px;
  font-weight: 700;
}
.pin-key.enter:active { background: var(--primary-dark); }

.pin-key.backspace {
  font-size: 18px;
  color: var(--text-secondary);
}

.pin-key.zero { background: var(--primary); color: white; }

.pin-wrapper {
  background: #f9fafb;
  border-radius: 14px;
  padding: 16px;
  border: 1px solid var(--border);
}

.pin-wrapper.supervisor {
  background: var(--supervisor-bg);
  border-color: rgba(245,158,11,0.3);
}
.pin-wrapper.supervisor .pin-key.enter { background: var(--supervisor-dark, #d97706); }
.pin-wrapper.supervisor .pin-dot.filled { background: var(--supervisor); }

.pin-wrapper.manager {
  background: var(--manager-bg);
  border-color: rgba(124,58,237,0.3);
}
.pin-wrapper.manager .pin-key.enter { background: var(--manager); }
.pin-wrapper.manager .pin-dot.filled { background: var(--manager); }

/* ── BANNER / ALERT ── */
.banner {
  border-radius: 10px;
  padding: 10px 12px;
  flex-shrink: 0;
}

.banner-title {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 3px;
}

.banner-body {
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.banner-warning {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
}
.banner-warning .banner-title { color: var(--warning-dark); }

.banner-danger {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
}
.banner-danger .banner-title { color: var(--danger); }

.banner-success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
}
.banner-success .banner-title { color: #15803d; }

.banner-info {
  background: var(--primary-light);
  border: 1px solid rgba(59,130,246,0.25);
}
.banner-info .banner-title { color: var(--primary-dark); }

.banner-purple {
  background: var(--manager-bg);
  border: 1px solid rgba(124,58,237,0.2);
}
.banner-purple .banner-title { color: var(--manager); }

/* ── CHIP / BADGE ── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.chip-blue {
  background: rgba(59,130,246,0.12);
  color: var(--primary-dark);
  border: 1px solid rgba(59,130,246,0.2);
}
.chip-green {
  background: rgba(34,197,94,0.12);
  color: #15803d;
  border: 1px solid rgba(34,197,94,0.2);
}
.chip-amber {
  background: rgba(245,158,11,0.12);
  color: var(--supervisor-text);
  border: 1px solid rgba(245,158,11,0.2);
}
.chip-red {
  background: rgba(220,38,38,0.12);
  color: var(--danger);
  border: 1px solid rgba(220,38,38,0.2);
}
.chip-purple {
  background: rgba(124,58,237,0.12);
  color: var(--manager);
  border: 1px solid rgba(124,58,237,0.2);
}
.chip-gray {
  background: #f3f4f6;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* ── PROGRESS BAR ── */
.progress-bar {
  background: var(--border);
  border-radius: var(--radius-full);
  height: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

/* ── UOM SELECTOR ── */
.uom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.uom-option {
  background: #f9fafb;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.uom-option.selected {
  border-color: var(--primary);
  background: rgba(59,130,246,0.06);
}

.uom-icon { font-size: 20px; margin-bottom: 4px; }
.uom-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.uom-option.selected .uom-label { color: var(--primary-dark); }

/* ── WORKER ROW ── */
.worker-row {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #f3f4f6;
  gap: 10px;
  cursor: pointer;
  transition: background 0.1s;
  min-height: var(--touch-min);
}
.worker-row:last-child { border-bottom: none; }
.worker-row:active { background: #f9fafb; }
.worker-row.selected { background: rgba(59,130,246,0.05); border-left: 3px solid var(--primary); }

.worker-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.worker-info { flex: 1; }
.worker-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.worker-role {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.worker-arrow {
  font-size: 16px;
  color: var(--text-muted);
}

/* ── PHOTO CAPTURE ── */
.photo-frame-wrap {
  position: relative;
  background: #111827;
  border-radius: 10px;
  overflow: hidden;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #374151;
  cursor: pointer;
}

.photo-frame-wrap.captured {
  border-color: var(--success);
  background: #052e16;
}

.photo-frame-box {
  border: 2px solid var(--success);
  border-radius: 8px;
  width: 72%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.photo-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--success);
  border-style: solid;
}

.pfc-tl { top: -2px; left: -2px; border-width: 3px 0 0 3px; border-radius: 2px 0 0 0; }
.pfc-tr { top: -2px; right: -2px; border-width: 3px 3px 0 0; border-radius: 0 2px 0 0; }
.pfc-bl { bottom: -2px; left: -2px; border-width: 0 0 3px 3px; border-radius: 0 0 0 2px; }
.pfc-br { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; border-radius: 0 0 2px 0; }

.photo-hint-text {
  font-size: 9px;
  color: #9ca3af;
  font-weight: 600;
  text-align: center;
}

.photo-frame-hint {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  color: #9ca3af;
  font-weight: 600;
}

.photo-icon-top {
  position: absolute;
  top: 8px;
  font-size: 16px;
}

.photo-count-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--success);
  color: white;
  border-radius: 12px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
}

/* ── LPN BOX ── */
.lpn-box {
  background: var(--primary-light);
  border: 2px solid rgba(59,130,246,0.3);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}

.lpn-label {
  font-size: 9px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.lpn-number {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 2px;
  font-family: 'Courier New', monospace;
  margin: 6px 0 4px;
}

.lpn-barcode {
  font-size: 24px;
  letter-spacing: 4px;
  color: var(--border);
  margin: 4px 0;
}

.lpn-sub {
  font-size: 10px;
  color: var(--text-secondary);
}

/* ── BIG STATUS ICON ── */
.big-icon-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 12px;
  flex: 1;
  padding: 24px 16px;
  background: var(--bg);
}

.big-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.big-icon.success { background: #f0fdf4; }
.big-icon.warning { background: #fffbeb; }
.big-icon.danger { background: #fef2f2; }

/* ── DIVIDER ── */
.divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

/* ── INPUT FIELD ── */
.input-field {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}

.input-field:focus-within {
  border-color: var(--primary);
}

.input-label {
  font-size: 9px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  font-weight: 600;
}

.input-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.input-placeholder {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.input-field.active { border-color: var(--primary); }
.input-field.filled { border-color: var(--success); }
.input-field.required { border-color: var(--danger); }

.required-mark { color: var(--danger); }

/* ── COMPARISON BLOCK ── */
.compare-block {
  background: #f3f4f6;
  border-radius: 10px;
  padding: 12px;
}

.compare-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.compare-col {
  flex: 1;
  background: var(--surface);
  border-radius: 8px;
  padding: 8px;
}

.compare-col-label {
  font-size: 9px;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.compare-col-value {
  font-size: 11px;
  font-weight: 700;
}

.compare-vs {
  font-size: 20px;
  color: var(--danger);
  flex-shrink: 0;
}

/* ── QUANTITY DISPLAY ── */
.qty-display {
  font-size: 36px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.qty-unit {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ── EXCEPTION TYPE CARDS ── */
.exception-option {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--touch-min);
}

.exception-option:active { transform: scale(0.99); }
.exception-option.selected { border-color: var(--primary); background: var(--primary-light); }

.exception-option .exc-icon { font-size: 22px; flex-shrink: 0; }
.exception-option .exc-title { font-size: 12px; font-weight: 700; color: var(--text); }
.exception-option .exc-desc { font-size: 10px; color: var(--text-secondary); }

/* ── SHIPMENT LIST ITEM ── */
.shipment-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
}

.shipment-item:active { background: #f9fafb; }
.shipment-item.open { border-left: 3px solid var(--success); }
.shipment-item.pending { border-left: 3px solid var(--text-muted); }
.shipment-item.exception { border-left: 3px solid var(--danger); }

.shipment-asn {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.shipment-details {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.shipment-status {
  font-size: 10px;
  font-weight: 700;
}
.shipment-status.open { color: var(--success); }
.shipment-status.pending { color: var(--text-secondary); }
.shipment-status.exception { color: var(--danger); }

/* ── NOTIFICATION CARD ── */
.notif-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.notif-header {
  background: #f9fafb;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.notif-app-icon {
  width: 24px;
  height: 24px;
  background: var(--primary);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: white;
}

.notif-app-name { font-size: 10px; font-weight: 600; color: var(--text-secondary); flex: 1; }
.notif-time { font-size: 10px; color: var(--text-muted); }

.notif-body { padding: 12px; }
.notif-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.notif-text { font-size: 11px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; }
.notif-link {
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
  cursor: pointer;
  display: block;
}

/* ── SYNC STATUS DOT ── */
.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.sync-dot.synced { background: var(--success); }
.sync-dot.pending { background: var(--warning); animation: blink 1s step-end infinite; }
.sync-dot.offline { background: var(--danger); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── DECISION OPTIONS ── */
.decision-option {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.decision-option:active { background: #f9fafb; }
.decision-option.selected { border-color: var(--success); background: var(--success-bg); }

.decision-option .dec-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.decision-option .dec-desc {
  font-size: 10px;
  color: var(--text-secondary);
}

/* ── NUMBER STEPPER ── */
.number-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.stepper-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 24px;
  font-weight: 300;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.stepper-btn:active { background: #f3f4f6; transform: scale(0.95); }

.stepper-value {
  font-size: 40px;
  font-weight: 800;
  color: var(--text);
  min-width: 80px;
  text-align: center;
}

/* ── VAS TYPE SELECTOR ── */
.vas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.vas-option {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.vas-option:active { transform: scale(0.97); }
.vas-option.selected { border-color: var(--primary); background: var(--primary-light); }

.vas-icon { font-size: 24px; }
.vas-label { font-size: 11px; font-weight: 700; color: var(--text); }
.vas-desc { font-size: 9px; color: var(--text-secondary); }