/* ==========================================================================
   LEGACY FEATURE COMPONENTS — token-based replacements for the parts of
   assets/css/developer-style.css that pages still use (tracking journey,
   status pills, node cards, tracking input, tenant badge, timeline).

   developer-style.css is NOT loaded on operation.* / admin.* any more: its global
   `!important` overrides (64px floating navbar, Inter body font, 0.75rem card
   padding, blue #3d4ef2 buttons, table/menu styles) fought the new design layer.
   ========================================================================== */

/* Old --lf-* variables mapped onto the Routerizon tokens, for any inline use */
:root {
  --lf-primary: var(--rz-primary);
  --lf-primary-light: var(--rz-primary-400);
  --lf-dark: var(--rz-text-primary);
  --lf-bg: var(--rz-surface-canvas);
  --lf-success: var(--rz-success-600);
  --lf-warning: var(--rz-warning-600);
  --lf-danger: var(--rz-danger-600);
  --lf-info: var(--rz-info-600);
  --lf-radius: var(--rz-radius);
  --lf-shadow: var(--rz-shadow-md);
  --lf-shadow-lg: var(--rz-shadow-lg);
}

/* Simple timeline */
.timeline { position: relative; padding-inline-start: 2rem; }
.timeline::before { content: ""; position: absolute; inset-inline-start: 0.6rem; top: 0; bottom: 0; width: 2px; background: var(--rz-border-subtle); border-radius: 2px; }
.timeline-item { position: relative; padding-bottom: 1.5rem; }
.timeline-indicator {
  position: absolute;
  inset-inline-start: -1.85rem;
  top: 0.2rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--rz-surface-raised);
  border: 3px solid var(--rz-primary);
  z-index: 2;
}

.tenant-badge {
  padding: 0.2rem 0.625rem;
  border-radius: var(--rz-radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  background: var(--rz-primary-50);
  color: var(--rz-primary-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Status pills (track order) */
.status-pill {
  padding: 0.3rem 0.75rem;
  border-radius: var(--rz-radius-pill);
  font-size: 0.71875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.status-out-for-delivery { background: var(--rz-primary-50); color: var(--rz-primary-700); border: 1px solid var(--rz-primary-100); }
.status-delivered { background: var(--rz-success-50); color: var(--rz-success-700); border: 1px solid var(--rz-success-100); }
.status-exception { background: var(--rz-danger-50); color: var(--rz-danger-700); border: 1px solid var(--rz-danger-100); }
.status-manifested { background: var(--rz-surface-sunken); color: var(--rz-text-secondary); border: 1px solid var(--rz-border-subtle); }

/* Logistic node card */
.node-card { border-inline-start: 3px solid var(--rz-primary) !important; padding: 1.25rem; }
.node-label { display: block; margin-bottom: 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rz-text-tertiary); }
.node-value { font-size: 0.875rem; font-weight: 600; color: var(--rz-text-primary); }

/* Shipment journey */
.journey-timeline { position: relative; padding: 1rem 0; }
.journey-step { display: flex; gap: 1.25rem; padding-bottom: 1.75rem; position: relative; }
.journey-step:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 8px; top: 24px; bottom: -8px; width: 2px; background: var(--rz-border-subtle); }
.step-marker { width: 18px; height: 18px; margin-top: 4px; flex-shrink: 0; z-index: 2; border-radius: 50%; background: var(--rz-surface-raised); border: 4px solid var(--rz-border-strong); }
.journey-step.completed .step-marker { border-color: var(--rz-primary); background: var(--rz-primary); box-shadow: 0 0 0 4px var(--rz-primary-50); }
.journey-step.active .step-marker { border-color: var(--rz-primary); animation: rz-marker-pulse 2s infinite; }
@keyframes rz-marker-pulse {
  0% { box-shadow: 0 0 0 0 rgba(24, 127, 101, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(24, 127, 101, 0); }
  100% { box-shadow: 0 0 0 0 rgba(24, 127, 101, 0); }
}
@media (prefers-reduced-motion: reduce) { .journey-step.active .step-marker { animation: none; } }
.step-content { flex-grow: 1; }
.step-time { font-size: 0.75rem; color: var(--rz-text-tertiary); margin-bottom: 0.25rem; }
.step-title { font-size: 0.90625rem; font-weight: 700; color: var(--rz-text-primary); margin-bottom: 0.125rem; }
.step-desc { font-size: 0.8125rem; color: var(--rz-text-secondary); }

/* Tracking input */
.tracking-input-wrapper {
  display: flex;
  gap: 0.75rem;
  padding: 0.625rem;
  background: var(--rz-surface-raised);
  border: 1px solid var(--rz-border-subtle);
  border-radius: var(--rz-radius);
  box-shadow: var(--rz-shadow-lg);
}
.tracking-input-wrapper input { border: 0 !important; box-shadow: none !important; font-size: 1.0625rem !important; font-weight: 600; padding-inline-start: 1rem !important; }
.tracking-input-wrapper .btn { padding-inline: 1.5rem; }

/* demo.css is not loaded on portal routes; these are the only helpers views still use from it */
.demo-vertical-spacing > * { margin-top: 1.25rem !important; margin-bottom: 0 !important; }
.demo-vertical-spacing.demo-only-element > :first-child { margin-top: 0 !important; }
.content-wrapper .navbar { z-index: auto; }

/* Thin scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rz-neutral-300); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--rz-neutral-400); }