/* Rainas Shipping Hub — Design System */

:root {
  --primary: #2563EB;
  --primary-hover: #1d4ed8;
  --primary-light: #eff6ff;
  --success: #16a34a;
  --success-light: #f0fdf4;
  --success-border: #bbf7d0;
  --warning: #f59e0b;
  --warning-light: #fffbeb;
  --warning-border: #fde68a;
  --danger: #dc2626;
  --danger-light: #fef2f2;
  --danger-border: #fecaca;
  --info: #0ea5e9;
  --info-light: #f0f9ff;
  --info-border: #bae6fd;
  --text: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --bg: #f8fafc;
  --surface: #ffffff;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --transition: 150ms ease;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Navbar ──────────────────────────────────────────────── */

.navbar {
  background: #0f172a;
  height: 56px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all var(--transition);
}

.nav-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* ── Page ────────────────────────────────────────────────── */

.page {
  display: flex;
  justify-content: center;
  padding: 32px 20px 64px;
}

.page-content {
  width: 100%;
  max-width: 960px;
}

/* ── Workflow Steps ──────────────────────────────────────── */

.workflow-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  padding: 0 20px;
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all var(--transition);
}

.step-active {
  color: var(--primary);
  background: var(--primary-light);
  border-color: #bfdbfe;
  font-weight: 600;
}

.step-done {
  color: var(--success);
  background: var(--success-light);
  border-color: var(--success-border);
}

.step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--border);
  color: var(--text-muted);
}

.step-active .step-num {
  background: var(--primary);
  color: #fff;
}

.step-done .step-num {
  background: var(--success);
  color: #fff;
}

.step-connector {
  width: 40px;
  height: 2px;
  background: var(--border);
  flex-shrink: 0;
}

.connector-done {
  background: var(--success);
}

/* ── Card ────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  color: var(--text);
}

.card-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.card-subtitle {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 0 0 20px;
}

.card-import {
  max-width: 620px;
}

.card-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 10;
  border-radius: inherit;
  cursor: wait;
}

/* ── Tabs ─────────────────────────────────────────────── */

.tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: -1px;
}

.tab-btn:hover {
  color: var(--text);
}

.tab-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab-content {
  animation: fade-in 200ms ease-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Forms ────────────────────────────────────────────────── */

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

textarea,
input[type="text"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="tel"] {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

textarea:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

input:disabled, textarea:disabled {
  background: var(--border-light);
  color: var(--text-muted);
  cursor: not-allowed;
}

.field-row {
  display: flex;
  gap: 12px;
}

.flex-1 { flex: 1; }
.mt-4 { margin-top: 4px; }

/* ── Buttons ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  line-height: 1.4;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.btn-book {
  background: var(--success);
  color: #fff;
  padding: 10px 24px;
  font-weight: 600;
  font-size: 14px;
}

.btn-book:hover:not(:disabled) {
  background: #15803d;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 5px;
}

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

.btn-outline:hover {
  background: var(--primary-light);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-danger:hover:not(:disabled) {
  background: #b91c1c;
}

.btn-danger:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

.btn-danger-outline {
  border-color: var(--danger);
  color: var(--danger);
}
.btn-danger-outline:hover {
  background: var(--danger);
  color: #fff;
}

/* Required-field marker. Carries a label, not just colour, so it survives
   both colour-blindness and a greyscale print. */
.req {
  color: var(--danger);
  font-weight: 700;
  margin-left: 2px;
}

/* Inline field error, sits directly under its input. */
.field-error {
  color: var(--danger);
  font-size: 11px;
  line-height: 1.4;
  min-height: 0;
  margin-top: 3px;
}
.field-error:empty {
  display: none;
}

input.has-error,
input.has-error:focus {
  border-color: var(--danger);
  outline-color: var(--danger);
}

/* Armed state for a click-twice destructive action. Filled rather than
   outlined so an armed button is unmistakable against its idle neighbours. */
.btn-danger-outline.is-armed {
  background: var(--danger);
  color: #fff;
  font-weight: 600;
}

.btn-download-all {
  background: var(--primary);
  color: #fff;
  padding: 10px 20px;
  font-weight: 500;
}

.btn-download-all:hover {
  background: var(--primary-hover);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-icon {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.btn-icon:hover {
  background: var(--danger-light);
  color: var(--danger);
}

.btn-import {
  width: 100%;
  justify-content: center;
  padding: 10px;
  font-size: 14px;
}

/* ── Spinner ─────────────────────────────────────────────── */

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Alerts ──────────────────────────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.alert svg { flex-shrink: 0; margin-top: 1px; }

.alert-error {
  background: var(--danger-light);
  border: 1px solid var(--danger-border);
  color: #991b1b;
}

.alert-warning {
  background: var(--warning-light);
  border: 1px solid var(--warning-border);
  color: #92400e;
}

.alert-success {
  background: var(--success-light);
  border: 1px solid var(--success-border);
  color: #166534;
}

.alert-info {
  background: var(--info-light);
  border: 1px solid var(--info-border);
  color: #0c4a6e;
}

/* ── Summary Bar ─────────────────────────────────────────── */

.summary-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.summary-stat {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.summary-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ── Courier banner + dropdown ────────────────────────────── */
.courier-banner {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(180deg, #fdf8f8 0%, #faf2f2 100%);
  border: 1px solid #f0d8d8;
  border-left: 4px solid #8B1A1A;
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.courier-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.courier-banner-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.courier-banner-hint {
  font-size: 13px;
  color: #64748b;
}
.courier-banner-hint strong {
  color: #8B1A1A;
  font-weight: 700;
}

.courier-dropdown {
  position: relative;
  display: inline-block;
}
.courier-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 2px solid #8B1A1A;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #8B1A1A;
  cursor: pointer;
  min-width: 160px;
  min-height: 44px;
  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
  box-shadow: 0 1px 2px rgba(139, 26, 26, 0.08);
}
.courier-dropdown-trigger:hover {
  background: #fdf2f2;
  box-shadow: 0 2px 6px rgba(139, 26, 26, 0.15);
}
.courier-dropdown-trigger:focus-visible {
  outline: 2px solid #8B1A1A;
  outline-offset: 2px;
}
.courier-dropdown-trigger.is-disabled,
.courier-dropdown-trigger[disabled] {
  pointer-events: none;
  opacity: 0.55;
}
.courier-dropdown-name {
  flex: 1;
  text-align: left;
}
.courier-dropdown-caret {
  transition: transform 0.18s ease;
}
.courier-dropdown.is-open .courier-dropdown-caret {
  transform: rotate(180deg);
}

.courier-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  padding: 4px;
  z-index: 1000;
  display: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.courier-dropdown.is-open .courier-dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.courier-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  transition: background 0.12s ease;
}
.courier-dropdown-item:hover {
  background: #f8fafc;
}
.courier-dropdown-item.is-selected {
  background: #fdf2f2;
  color: #8B1A1A;
}
.courier-dropdown-check {
  opacity: 0;
  color: #8B1A1A;
}
.courier-dropdown-item.is-selected .courier-dropdown-check {
  opacity: 1;
}

/* Mobile: banner stacks; dropdown still works */
@media (max-width: 640px) {
  .courier-banner {
    flex-direction: column;
    align-items: stretch;
  }
  .courier-banner-hint {
    text-align: center;
  }
  .courier-dropdown-trigger {
    width: 100%;
  }
  .courier-dropdown-menu {
    min-width: 100%;
  }
}

/* ── Courier chip (on booked rows) ───────────────────────── */
.courier-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 4px;
}
.courier-chip-bluedart {
  background: #e0f2fe;
  color: #0369a1;
}
.courier-chip-dtdc {
  background: #fef3c7;
  color: #92400e;
}
.courier-chip-delhivery {
  background: #fee2e2;
  color: #b91c1c;
}

/* ── Order Cards ─────────────────────────────────────────── */

.order-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  overflow: hidden;
}

.order-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow);
}

.order-booked {
  border-color: var(--success-border) !important;
  background: var(--success-light);
}

.order-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--border-light);
  border-bottom: 1px solid var(--border);
}

.order-select {
  cursor: pointer;
}

.order-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary);
}

.order-id {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.order-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}

.order-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-cod {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.badge-prepaid {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.badge-draft {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
}

.order-amount {
  text-align: right;
  margin-right: 8px;
}

.amount-label {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.amount-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.order-status {
  min-width: 0;
}

.order-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 16px 20px;
}

.order-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Inline Edit ─────────────────────────────────────────── */

.edit-input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  width: 100%;
  background: var(--surface);
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.edit-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.edit-saved {
  border-color: var(--success) !important;
  background: var(--success-light);
}

.save-indicator {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.save-indicator.show {
  opacity: 1;
}

.edit-error {
  border-color: var(--danger) !important;
  background: var(--danger-light);
}

/* ── Payment Toggle ──────────────────────────────────────── */

.payment-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--success);
  border-radius: 20px;
  transition: background var(--transition);
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--danger);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}

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

.cod-amount-input {
  width: 90px !important;
}

/* ── Item Chips ──────────────────────────────────────────── */

.items-section label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.items-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.item-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  background: var(--border-light);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  transition: all var(--transition);
}

.item-chip:hover {
  border-color: #cbd5e1;
}

.chip-sku {
  font-weight: 600;
  color: var(--text);
}

.chip-title {
  color: var(--text-secondary);
}

.chip-qty {
  color: var(--text-muted);
  font-size: 11px;
}

.chip-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all var(--transition);
}

.chip-remove:hover {
  background: var(--danger-light);
  color: var(--danger);
}

/* ── Notes ────────────────────────────────────────────────── */

.notes-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  background: #fff3cd;
  border-left: 3px solid #f59e0b;
  padding: 8px 12px;
  border-radius: 4px;
  line-height: 1.5;
}

/* ── Booking Results ─────────────────────────────────────── */

.booking-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.awb-number {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--success);
  letter-spacing: 0.02em;
}

.booking-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.tag-success {
  background: var(--success-light);
  color: var(--success);
  border: 1px solid var(--success-border);
}

.tag-warning {
  background: var(--warning-light);
  color: #b45309;
  border: 1px solid var(--warning-border);
  white-space: normal;
}

.tag-error {
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid var(--danger-border);
  white-space: normal;
}

.tag-cancelled {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #d1d5db;
}

.tag-fulfilling,
.tag-notifying {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

/* ── Empty State ─────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.empty-state p {
  margin-top: 12px;
  font-size: 14px;
}

/* ── Progress Bar ────────────────────────────────────────── */

.progress-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.progress-bar-track {
  width: 100%;
  height: 8px;
  background: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--success));
  border-radius: 4px;
  transition: width 300ms ease-out;
}

.progress-log {
  margin-top: 12px;
  max-height: 120px;
  overflow-y: auto;
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.progress-log-entry {
  padding: 3px 0;
  border-bottom: 1px solid var(--border-light);
}

.log-success { color: var(--success); }
.log-error { color: var(--danger); }

/* ── Wallet Balance Meter ─────────────────────────────────── */

.wallet-meter {
  background: var(--border-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  min-width: 220px;
}

.wallet-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.wallet-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wallet-values {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.wallet-balance,
.wallet-available {
  display: flex;
  flex-direction: column;
}

.wallet-amount {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-family: 'SF Mono', 'Fira Code', monospace;
  line-height: 1.2;
}

.wallet-amount-green {
  color: var(--success);
}

.wallet-sublabel {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}

.wallet-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
}

.wallet-bar-track {
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.wallet-bar-fill {
  height: 100%;
  background: var(--success);
  border-radius: 2px;
  transition: width 400ms ease-out, background 300ms ease;
  width: 0%;
}

.wallet-last-txn {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 6px;
}

.wallet-last-txn strong {
  color: var(--text-secondary);
}

/* ── Sticky Summary Bar ──────────────────────────────────── */

.summary-bar {
  position: sticky;
  top: 56px;
  z-index: 50;
}

/* ── Reduced Motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .progress-bar-fill {
    transition: none;
  }
}

/* ── Order Card Entrance Animation ───────────────────────── */

.order-card {
  animation: card-enter 250ms ease-out both;
}

@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger each card */
.order-card:nth-child(1) { animation-delay: 0ms; }
.order-card:nth-child(2) { animation-delay: 40ms; }
.order-card:nth-child(3) { animation-delay: 80ms; }
.order-card:nth-child(4) { animation-delay: 120ms; }
.order-card:nth-child(5) { animation-delay: 160ms; }
.order-card:nth-child(n+6) { animation-delay: 200ms; }

/* ── Button Active Press Feedback ────────────────────────── */

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-icon:active {
  transform: scale(0.9);
}

/* ── Page Header Row ─────────────────────────────────────── */

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

/* ── Shipments Filters ───────────────────────────────────── */

.shipments-filters {
  margin-bottom: 20px;
  padding: 20px 24px;
}

.filter-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--border-light);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
}

.filter-chip:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.filter-chip.chip-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.date-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-sep {
  color: var(--text-muted);
  font-size: 14px;
}

.filter-form {
  margin: 0;
}

.awb-link {
  text-decoration: none;
}

.awb-link:hover code {
  text-decoration: underline;
}

.filter-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-group label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.filter-group input[type="text"],
.filter-group input[type="date"] {
  padding: 7px 10px;
  font-size: 13px;
  width: 140px;
}

.filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Shipments Table ─────────────────────────────────────── */

.shipments-summary {
  position: static;
}

.shipments-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.shipments-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.shipments-table thead {
  background: var(--border-light);
  border-bottom: 1px solid var(--border);
}

.shipments-table th {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  white-space: nowrap;
}

.shipments-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}

.shipments-table tbody tr:last-child td {
  border-bottom: none;
}

.shipments-table tbody tr:hover {
  background: var(--primary-light);
}

.col-check {
  width: 40px;
  text-align: center;
}

.col-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.col-order {
  white-space: nowrap;
}

.col-awb code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 6px;
  border-radius: 4px;
}

.col-amount {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

/* Pinned to the right edge. The table is wider than a laptop viewport, and
   every per-shipment action — label, WhatsApp, rebook, reverse pickup, cancel —
   lives in this column; unpinned it scrolls off-screen with nothing to hint
   that it exists. */
.col-actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
  padding-right: 12px;
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.18);
}

.shipments-table thead .col-actions {
  background: var(--border-light);
  z-index: 3;
}

/* Row hover has to be repainted on the pinned cell — it has its own opaque
   background, so the tr:hover rule underneath never shows through. */
.shipments-table tbody tr:hover .col-actions {
  background: var(--primary-light);
}

.col-resend-alt {
  width: 1%;
  text-align: center;
  white-space: nowrap;
  padding: 0 10px;
}

.btn-resend-alt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #0d4f3c;
  background: #d4f1e0;
  border: 1px solid #76c89c;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.btn-resend-alt:hover {
  background: #b9e7cc;
  border-color: #4ea87b;
}

.btn-resend-alt:active {
  transform: translateY(1px);
}

.btn-resend-alt svg {
  display: block;
}

/* Row actions: a "communicate" group (download, whatsapp) clearly
   separated from a "modify" group (rebook, cancel) so an accidental
   tap can't take a destructive action. */
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.row-actions .action-group {
  display: inline-flex;
  gap: 6px;
}

.row-actions .action-separator {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: #e5e7eb;
  margin: 0 12px;
}

.row-actions form { display: inline-flex; }

/* 40px square = comfortable thumb tap target, fits within table density */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid #d1d5db;
  color: #374151;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn-icon:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
}
.btn-icon:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-icon svg { display: block; }

.btn-icon-wa {
  color: #1f8e44;
  border-color: #b5ddc2;
  background: #f1fbf5;
}
.btn-icon-wa:hover:not(:disabled) {
  background: #d8f1e2;
  border-color: #1f8e44;
}

.btn-icon-danger {
  color: var(--danger);
  border-color: #f1c2c2;
}
.btn-icon-danger:hover:not(:disabled) {
  background: #fee2e2;
  border-color: var(--danger);
  color: var(--danger);
}

/* ── Navbar active link ──────────────────────────────────── */

.nav-link-active {
  color: #fff !important;
  background: rgba(255,255,255,0.1);
}

/* ── Scan & Book Page ────────────────────────────────────── */

.scan-card {
  max-width: 620px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

.scan-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scan-icon {
  color: var(--primary);
  flex-shrink: 0;
}

.scan-field {
  flex: 1;
  padding: 12px 16px !important;
  font-size: 18px !important;
  font-weight: 500;
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.scan-field:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

.scan-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--primary);
  color: #fff;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.scan-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* Scan toasts */
.scan-toasts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.scan-toast {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  animation: toast-enter 200ms ease-out;
}

.scan-toast-success {
  background: var(--success-light);
  border: 1px solid var(--success-border);
  color: #166534;
}

.scan-toast-error {
  background: var(--danger-light);
  border: 1px solid var(--danger-border);
  color: #991b1b;
}

.scan-toast-warning {
  background: var(--warning-light);
  border: 1px solid var(--warning-border);
  color: #92400e;
}

.scan-toast-loading {
  background: var(--info-light);
  border: 1px solid var(--info-border);
  color: #0c4a6e;
  display: flex;
  align-items: center;
  gap: 8px;
}

.scan-toast-exit {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms, transform 200ms;
}

@keyframes toast-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.spinner-dark {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(14, 165, 233, 0.3);
  border-top-color: #0ea5e9;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* Scan order cards in queue */
.scan-queue {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scan-order-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  animation: card-enter 200ms ease-out;
}

.scan-order-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow);
}

.scan-card-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}

.scan-card-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.scan-card-consignee {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scan-card-city {
  font-size: 12px;
  color: var(--text-muted);
}

.scan-card-right {
  text-align: right;
  min-width: 100px;
}

.scan-card-amount-label {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.scan-card-amount {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.scan-card-remove {
  flex-shrink: 0;
}

.scan-card-exit {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 200ms, transform 200ms;
}

/* Bottom sticky bar */
.scan-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 100;
}

.scan-bottom-stats {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.scan-bottom-stats strong {
  color: var(--text);
}

.scan-bottom-sep {
  color: var(--border);
}

/* ── Navbar nav items ────────────────────────────────────── */

.navbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 768px) {
  .page { padding: 20px 12px 48px; }

  .workflow-steps { gap: 0; padding: 0; }
  .step { padding: 6px 10px; font-size: 12px; }
  .step-label { display: none; }
  .step-connector { width: 24px; }

  .card { padding: 20px; }

  .summary-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .summary-actions { margin-left: 0; width: 100%; }
  .btn-book { width: 100%; justify-content: center; }

  .order-body {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .order-header { flex-wrap: wrap; }

  .filter-row { flex-direction: column; align-items: stretch; }
  .filter-group input[type="text"],
  .filter-group input[type="date"] { width: 100%; }
  .filter-actions { width: 100%; }

  .shipments-table-wrap { overflow-x: auto; }
  .shipments-table { min-width: 900px; }

  .page-header-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── UI busy lock — disables all interactions during API calls ──── */
.ui-busy {
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.scan-busy {
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

/* ── Accessibility utility ───────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Bigger, higher-contrast courier chips ───────────── */
.courier-chip {
  font-size: 11px;
  padding: 3px 9px;
}
.courier-chip-bluedart {
  background: #dbeafe;
  color: #1e40af;
  font-weight: 700;
}
.courier-chip-dtdc {
  background: #fde68a;
  color: #78350f;
  font-weight: 700;
}

/* ── Responsive shipments table ───────────────────────── */
.shipments-table-wrap {
  overflow-x: auto;
}
@media (max-width: 1400px) {
  .shipments-table .col-weight,
  .shipments-table .col-weight-h {
    display: none;
  }
}
@media (max-width: 1100px) {
  .shipments-table .col-shipchg,
  .shipments-table .col-shipchg-h {
    display: none;
  }
}

/* ── Order search (reverse pickups) ──────────────────────── */
/* A combobox, not a plain input: the listbox below is keyboard-navigable and
   announced via aria-activedescendant, so the packer never has to reach for
   the mouse mid-flow. */

.order-search {
  position: relative;
}

.order-search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.order-search-field > .order-search-icon {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
}

/* 48px tall: comfortably over the 44px touch minimum, and tall enough to read
   as the primary action on the page rather than one more form field. */
input[type="text"].order-search-input {
  height: 48px;
  padding: 8px 84px 8px 42px;
  font-size: 15px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
}

input[type="text"].order-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.order-search-actions {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.order-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  /* Visually 28px, but padded out to a 44px hit area via the ::before below —
     a small glyph must not mean a small target. */
  width: 28px;
  height: 28px;
  position: relative;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border-light);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.order-search-clear::before {
  content: "";
  position: absolute;
  top: -8px; right: -8px; bottom: -8px; left: -8px;
}

.order-search-clear:hover { background: var(--border); color: var(--text); }
.order-search-clear:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.order-search.has-query .order-search-clear { display: inline-flex; }

.spinner-muted {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: none;
}

.order-search.is-loading .spinner-muted { display: block; }

.order-search-hint {
  margin-top: 6px;
  font-size: 12px;
  /* --text-muted is only ~2.6:1 on white; --text-secondary clears AA. */
  color: var(--text-secondary);
}

/* ── Suggestion list ─────────────────────────────────────── */

.search-listbox {
  display: none;
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 380px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.order-search.is-open .search-listbox { display: block; }

.search-option {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition);
}

.search-option:hover,
.search-option.is-active {
  background: var(--primary-light);
}

.search-option.is-active {
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

.search-option[aria-disabled="true"] {
  cursor: not-allowed;
  background: transparent;
  opacity: 0.65;
}

.search-option[aria-disabled="true"]:hover { background: var(--border-light); }

.search-option-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.search-option-order {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.search-option-awb {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-secondary);
}

.search-option-amount {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  /* Tabular figures so the rupee column stays aligned down the list. */
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.search-option-sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.search-option-meta {
  margin-top: 2px;
  font-size: 11.5px;
  /* Carries the pincode, AWB and ship date — readable, not decorative. */
  color: var(--text-secondary);
}

.search-option mark {
  background: #fef08a;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

.search-empty {
  padding: 16px 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.search-empty strong { color: var(--text); }

.search-skeleton {
  height: 14px;
  margin: 10px 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 37%, var(--border-light) 63%);
  background-size: 400% 100%;
  animation: skeleton-sweep 1.2s ease-in-out infinite;
}

.search-skeleton.w-60 { width: 60%; }
.search-skeleton.w-40 { width: 40%; }

@keyframes skeleton-sweep {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ── Selected order summary ──────────────────────────────── */

.selected-order {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--success-border);
  background: var(--success-light);
  border-radius: var(--radius);
}

.selected-order.is-manual {
  border-color: var(--border);
  background: var(--border-light);
}

.selected-order-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--success);
}

.selected-order.is-manual .selected-order-icon { color: var(--text-secondary); }

.selected-order-body { flex: 1; min-width: 0; }

.selected-order-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: 14px;
}

.selected-order-line {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.selected-order-line .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.status-pill-ok      { background: #dcfce7; color: #166534; }
.status-pill-warn    { background: var(--warning-light); color: #92400e; }
.status-pill-muted   { background: var(--border-light); color: #475569; }
.status-pill-danger  { background: var(--danger-light); color: #991b1b; }
.status-pill-info    { background: var(--primary-light); color: #1e40af; }

/* Section divider inside the booking form. */
.form-section-title {
  margin: 4px 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-section + .form-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}

@media (max-width: 640px) {
  /* Scoped to this form, not .field-row globally — the booking pages share the
     class and stacking them all is a change nobody asked for. */
  #reverse-form .field-row { flex-direction: column; gap: 0; }
  .search-option-amount { margin-left: 0; width: 100%; }
  input[type="text"].order-search-input { font-size: 16px; } /* stops iOS zoom-on-focus */

  /* The header lays the title and its subtitle side by side. At 375px that
     squeezed "Find the Order" into a 74px column — two lines of heading next
     to a subtitle with no room either — so the card opened on a mangled title.
     Stacked, the title gets the full width and the subtitle reads beneath it,
     which is the order it is meant to be read in anyway.
     Used only on this page (3 instances), so the change is contained here. */
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* The summary card takes its colour from the parcel's real status — a green
   "confirmed" card wrapped around a red "already returned" warning is mixed
   signalling, and the card is the thing read first. */
.selected-order.is-warn {
  border-color: var(--warning-border);
  background: var(--warning-light);
}
.selected-order.is-warn .selected-order-icon { color: #b45309; }

.selected-order.is-danger {
  border-color: var(--danger-border);
  background: var(--danger-light);
}
.selected-order.is-danger .selected-order-icon { color: var(--danger); }

/* ── Reverse pickup tracking list ────────────────────────── */
/* A table forced nine columns onto one row and still had nowhere to put the
   live courier status. A card list gives each pickup a status rail, the last
   scan in plain words, and room for the actions — and it stacks on a phone
   without a horizontal scrollbar. */

.track-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.track-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 34px + the 6px gap keeps neighbouring chips clear of each other; the
     ::before below pads the hit area out to the 44px minimum. */
  min-height: 34px;
  position: relative;
  padding: 6px 12px;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.filter-chip::before {
  content: "";
  position: absolute;
  top: -5px; right: 0; bottom: -5px; left: 0;
}

.filter-chip:hover { background: var(--border-light); color: var(--text); }
.filter-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.filter-chip[aria-pressed="true"] {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}

.filter-chip[aria-pressed="true"] .chip-count { background: rgba(255,255,255,0.22); color: #fff; }

.filter-chip:disabled { opacity: 0.45; cursor: not-allowed; }

.chip-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--border-light);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.track-updated {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── Pickup rows ─────────────────────────────────────────── */

.pickup-list { display: flex; flex-direction: column; gap: 8px; }

.pickup-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.pickup-row:hover { border-color: #cbd5e1; box-shadow: var(--shadow-sm); }

/* The rail repeats the stage as colour; the pill repeats it as words. Neither
   is load-bearing on its own. */
.pickup-rail { width: 4px; flex-shrink: 0; background: var(--border); }

.pickup-row[data-stage="failed"]     .pickup-rail { background: var(--danger); }
.pickup-row[data-stage="awaiting"]   .pickup-rail { background: var(--warning); }
.pickup-row[data-stage="in_transit"] .pickup-rail { background: var(--info); }
.pickup-row[data-stage="returned"]   .pickup-rail { background: var(--success); }
.pickup-row[data-stage="cancelled"]  .pickup-rail { background: var(--text-muted); }

.pickup-body {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.pickup-main { flex: 1 1 260px; min-width: 0; }

.pickup-line1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.pickup-order { font-weight: 600; font-size: 14px; }

.pickup-awb {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-secondary);
}

.pickup-line2 { font-size: 12.5px; color: var(--text-secondary); }

.pickup-scan {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}

.pickup-scan .scan-text { color: var(--text); }
.pickup-scan .scan-meta { color: var(--text-secondary); }

.pickup-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.pickup-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.pickup-age { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }

/* Stage pill — same shape as .status-pill but sized for the row header. */
.stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.stage-pill .chip-dot { width: 6px; height: 6px; }

.stage-failed     { background: var(--danger-light);  color: #991b1b; }
.stage-awaiting   { background: var(--warning-light); color: #92400e; }
.stage-in_transit { background: var(--info-light);    color: #075985; }
.stage-returned   { background: var(--success-light); color: #166534; }
.stage-cancelled  { background: var(--border-light);  color: #475569; }
.stage-unknown    { background: var(--border-light);  color: #475569; }

.stage-loading {
  background: var(--border-light);
  color: var(--text-secondary);
  /* Pulses only while the status is genuinely in flight. */
  animation: stage-pulse 1.1s ease-in-out infinite;
}

@keyframes stage-pulse { 50% { opacity: 0.45; } }

.pickup-scans {
  border-top: 1px dashed var(--border);
  margin: 10px 14px 12px;
  padding-top: 10px;
  font-size: 12px;
}

.pickup-scans ul { margin: 0; padding-left: 16px; }
.pickup-scans li { margin-bottom: 3px; color: var(--text-secondary); }

@media (max-width: 700px) {
  .pickup-body { flex-direction: column; gap: 10px; }
  /* flex-basis resolves against the main axis — once the row stacks, the
     260px basis becomes a 260px minimum HEIGHT and blows a hole in the card. */
  .pickup-main { flex: 0 0 auto; }
  .pickup-side { align-items: flex-start; width: 100%; }
  .pickup-actions { justify-content: flex-start; }
  .track-toolbar { flex-direction: column; align-items: stretch; }
  .track-updated { white-space: normal; }
}

/* ── Recent shipments (browse instead of type) ───────────── */
/* Rows reuse .search-option so a browsed row and a searched row are the same
   object visually and behaviourally — they also share one selection path. */

.recent-panel {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}

.recent-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.recent-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.recent-hint { font-size: 12px; color: var(--text-secondary); }

/* Capped rather than paginated: 20 rows is a scan, not a dataset, and a
   scroll keeps the booking form reachable without a "show more" click. */
.recent-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
}

button.search-option {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
}

button.search-option:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

button.search-option[aria-disabled="true"] { opacity: 0.6; }

.recent-empty {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Booked-under-a-different-number note in the progress log */
.log-note {
  color: var(--text-muted);
}

/* An order that Shopify says no longer exists. Its checkbox is disabled
   server-side too — this is the visible half of that refusal. */
.order-card.order-unverified {
  border-color: #b91c1c;
}
.verify-warning {
  background: #fef2f2;
  color: #7f1d1d;
  border-bottom: 1px solid #fecaca;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.45;
}

/* Shopify is unreachable: the review page renders no orders at all rather than
   orders nobody has checked. */
.shopify-down {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 20px;
  color: #7f1d1d;
}
.shopify-down h2 {
  margin: 0 0 8px;
  font-size: 18px;
}
.shopify-down p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
}
.shopify-down-detail {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  opacity: 0.75;
  word-break: break-word;
}

/* ── Touch targets & mobile legibility ──────────────────────────────────
   Apple HIG asks 44pt, Material 48dp. Before this every tappable element on
   the public tracking page was under it: "Track another" 27px, the courier
   link 29px, nav links 28px.

   Scoped to `pointer: coarse` rather than a width breakpoint, deliberately.
   The staff shipment tables are dense by design and a mouse does not need a
   44px target — a thumb does, on any screen size. A width query would both
   miss touch laptops and wreck the desktop tables.
*/
@media (pointer: coarse) {
  .btn,
  .nav-link {
    min-height: 44px;
  }

  .btn {
    padding: 11px 18px;
  }

  /* btn-sm exists for dense desktop rows. On touch it keeps the smaller type
     but must still be tappable, so only the padding grows. */
  .btn-sm {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }

  .nav-link {
    padding: 11px 12px;
  }

  /* 8px minimum between adjacent targets so a thumb cannot hit two. */
  .navbar-nav {
    gap: 8px;
  }

  /* Body copy floor. The scan history is the densest text on the page and is
     read outdoors, one-handed, by someone waiting for a parcel. */
  body {
    font-size: 15px;
  }

  /* track.html carries its own <style> block for page-specific type; its
     coarse-pointer overrides live there, because an inline block after this
     stylesheet wins at equal specificity. */
}

/* The two actions under the scan history: stack on narrow screens so neither
   gets squeezed below its minimum width. */
.track-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.track-actions .btn {
  flex: 1 1 auto;
  justify-content: center;
}

/* A wordmark for signed-out customers — same look as the linked brand, but
   not clickable, because it leads into the employee area. */
span.navbar-brand {
  cursor: default;
}

/* Quiet tertiary action. Used for "Need help?" on the tracking page, which
   must be findable but must not compete with the tracking content itself. */
.btn-ghost {
  background: transparent;
  color: var(--text-muted, #64748b);
  border: 1px solid var(--border, #e2e8f0);
}

.btn-ghost:hover {
  background: var(--surface-alt, #f8fafc);
  color: var(--text, #0f172a);
}

/* ── Responsive navbar ──────────────────────────────────────────────────
   The navbar was never made responsive: fixed 56px height, nowrap on both
   .navbar-inner and .navbar-nav. Measured at 390px, .navbar-nav rendered
   500px wide and ran 227px past the bar's right edge, so "Reverse Pickups"
   was clipped and "Devices" and "Logout" were entirely off-screen — with the
   overflow hidden rather than scrollable, they could not be reached at all.
   Staff work these screens on phones, so that is three dead nav items.

   Wrapping rather than a horizontal-scroll strip, deliberately: a scroll
   strip hides items behind a gesture with no affordance, and "Logout" is not
   something to make people discover by swiping. Everything stays visible.

   The bar also stops being sticky here. Wrapped to two rows it is ~100px
   tall, and surrendering that much of an 844px screen permanently costs more
   than it gives — it scrolls away instead.

   Breakpoint is 1024px, not 768px. Measured 2026-09-22: brand (93px) + seven
   nav items (732px) + inner padding (48px) = 873px needed for a single row.
   At 768px that left a 105px dead zone where the bar silently overflowed and
   Logout was unreachable — and every landscape phone (812, 844, 896) sits
   inside it. Adding the Exceptions link is what pushed the total past 812.
   1024 clears the measured requirement with ~150px spare, which is roughly
   one more nav item before this needs revisiting. If you add two, re-measure.
*/
@media (max-width: 1024px) {
  .navbar {
    height: auto;
    position: static;
  }

  .navbar-inner {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 8px 16px;
    gap: 4px 8px;
  }

  /* Without this the brand breaks onto three lines ("Rainas / Shipping /
     Hub") and drags the whole bar taller. */
  .navbar-brand {
    white-space: nowrap;
    flex: 1 0 auto;
  }

  .navbar-nav {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
  }

  /* The logout form is a flex item in its own right; without this it can be
     squeezed narrower than its button. */
  .nav-logout-form {
    flex: 0 0 auto;
  }
}

/* Logout is a <button> inside a POST form (a GET logout can be fired by any
   image tag on any page). A bare button inherits the browser's chrome — grey
   fill, border, system font — so next to the anchor-based nav links it read
   as a stray dialog button. This makes it identical to its siblings. */
.nav-link-button {
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.nav-logout-form {
  display: flex;
  margin: 0;
}

/* Touch sizing, round two. The first pass covered .btn and .nav-link, which
   was all the public tracking page had. The staff screens carry three more
   kinds of control that were still under the minimum at 390px:
     · .filter-chip date range selectors — 34px
     · text inputs — 42px
     · row checkboxes — 16x16, and these are how orders get selected for
       booking, so a mis-tap here picks the wrong customer's parcel
   Still scoped to coarse pointers: the desktop tables stay dense. */
@media (pointer: coarse) {
  .filter-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
  }

  input[type="text"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    min-height: 44px;
    /* 16px prevents iOS Safari zooming the page on focus, which on a wide
       table view leaves the operator scrolled somewhere they did not ask
       to be. */
    font-size: 16px;
  }

  /* A 16px checkbox cannot be hit reliably with a thumb. 24px glyph inside a
     >=44px row is the data-table compromise (Material specifies 18-24dp
     checkboxes in 48dp rows) -- a literal 44x44 checkbox in a 12-column table
     would force the column wider than the data in it.

     Explicit width/height rather than transform: scale() -- a transform does
     not change the element's hit area, so a scaled 16px box still only
     accepts taps on the original 16px. */
  input[type="checkbox"],
  input[type="radio"] {
    width: 24px;
    height: 24px;
  }

  /* The cell padding is what lifts the row to a thumb-sized band around the
     glyph. */
  .col-check {
    padding: 10px 8px;
  }

  .shipments-table tbody tr,
  .orders-table tbody tr {
    min-height: 44px;
  }
}