/* ST Express UI mockups — shared tokens & utilities */

:root {
  /* Brand */
  --stx-navy: #1E3A8A;
  --stx-navy-dark: #172554;
  --stx-navy-light: #3B5BBA;
  --stx-red: #E11D2C;
  --stx-red-dark: #B8141F;
  --stx-bg: #F8FAFC;
  --stx-surface: #FFFFFF;
  --stx-border: #E2E8F0;
  --stx-text: #0F172A;
  --stx-muted: #64748B;
  /* RGB triples — used by alpha-suffix utility fallbacks below */
  --stx-navy-rgb: 30 58 138;
  --stx-navy-dark-rgb: 23 37 84;
  --stx-navy-light-rgb: 59 91 186;
  --stx-red-rgb: 225 29 44;
  --stx-red-dark-rgb: 184 20 31;

  /* Status pill colors */
  --stx-status-draft: #94A3B8;
  --stx-status-confirmed: #3B82F6;
  --stx-status-warehouse: #8B5CF6;
  --stx-status-transit: #0EA5E9;
  --stx-status-delivered: #10B981;
  --stx-status-returned: #F59E0B;
  --stx-status-failed: #EF4444;
  --stx-status-cancelled: #64748B;
}

html { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--stx-text); -webkit-font-smoothing: antialiased; }
body { background: var(--stx-bg); }

/* Headline font */
.font-display { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; letter-spacing: -0.01em; }

/* ---- Brand surfaces (survive Tailwind CDN race) ---- */
.section-navy      { background: var(--stx-navy);      color: #fff; }
.section-navy-dark { background: var(--stx-navy-dark); color: #fff; }
.section-navy a, .section-navy-dark a { color: #fff; }

/* ---- Brand utility fallbacks (mirror tw-config.js so pages render
       correctly even if the Tailwind CDN config loses the load race) ---- */
.bg-stx-navy        { background-color: var(--stx-navy); }
.bg-stx-navy-dark   { background-color: var(--stx-navy-dark); }
.bg-stx-navy-light  { background-color: var(--stx-navy-light); }
.bg-stx-red         { background-color: var(--stx-red); }
.bg-stx-red-dark    { background-color: var(--stx-red-dark); }
.bg-stx-bg          { background-color: var(--stx-bg); }
.text-stx-navy      { color: var(--stx-navy); }
.text-stx-red       { color: var(--stx-red); }
.border-stx-navy    { border-color: var(--stx-navy); }
.border-stx-red     { border-color: var(--stx-red); }

/* Alpha-suffix variants actually used in markup */
.bg-stx-navy\/5     { background-color: rgb(var(--stx-navy-rgb) / 0.05); }
.bg-stx-navy\/10    { background-color: rgb(var(--stx-navy-rgb) / 0.10); }
.bg-stx-red\/10     { background-color: rgb(var(--stx-red-rgb) / 0.10); }
.text-stx-navy\/15  { color: rgb(var(--stx-navy-rgb) / 0.15); }
.border-stx-navy\/10{ border-color: rgb(var(--stx-navy-rgb) / 0.10); }
.border-stx-navy\/30{ border-color: rgb(var(--stx-navy-rgb) / 0.30); }
.border-stx-red\/20 { border-color: rgb(var(--stx-red-rgb) / 0.20); }
.border-stx-red\/30 { border-color: rgb(var(--stx-red-rgb) / 0.30); }
.ring-stx-navy\/10  { --tw-ring-color: rgb(var(--stx-navy-rgb) / 0.10); }
.ring-stx-red\/20   { --tw-ring-color: rgb(var(--stx-red-rgb) / 0.20); }

/* Important variant — used in invoice table cells */
.\!bg-stx-navy\/10  { background-color: rgb(var(--stx-navy-rgb) / 0.10) !important; }

/* ---- Brand logo chip (preserves brand colors on dark surfaces) ---- */
.logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; padding: .375rem .625rem; border-radius: .625rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px rgba(255,255,255,.06);
}
.logo-chip img { display: block; height: 1.75rem; width: auto; }
.logo-chip-sm { padding: .25rem .5rem; border-radius: .5rem; }
.logo-chip-sm img { height: 1.25rem; }
.logo-chip-lg img { height: 2.25rem; }

/* ---- Status pills ---- */
.pill { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; line-height: 1; }
.pill::before { content: ''; width: .375rem; height: .375rem; border-radius: 9999px; background: currentColor; }
.pill-draft { background: #F1F5F9; color: #475569; }
.pill-confirmed { background: #DBEAFE; color: #1D4ED8; }
.pill-warehouse { background: #EDE9FE; color: #6D28D9; }
.pill-transit { background: #E0F2FE; color: #0369A1; }
.pill-delivered { background: #D1FAE5; color: #047857; }
.pill-returned { background: #FEF3C7; color: #B45309; }
.pill-failed { background: #FEE2E2; color: #B91C1C; }
.pill-cancelled { background: #E2E8F0; color: #475569; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 1rem; border-radius: .5rem; font-weight: 600; font-size: .875rem; line-height: 1.25; transition: all .15s; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--stx-navy); color: #fff; }
.btn-primary:hover { background: var(--stx-navy-dark); }
.btn-accent { background: var(--stx-red); color: #fff; }
.btn-accent:hover { background: var(--stx-red-dark); }
.btn-outline { background: #fff; color: var(--stx-navy); border-color: var(--stx-border); }
.btn-outline:hover { border-color: var(--stx-navy); }
.btn-ghost { background: transparent; color: var(--stx-text); }
.btn-ghost:hover { background: #F1F5F9; }
.btn-sm { padding: .375rem .625rem; font-size: .8125rem; }
.btn-lg { padding: .875rem 1.5rem; font-size: 1rem; }

/* ---- Cards & surfaces ---- */
.card { background: var(--stx-surface); border: 1px solid var(--stx-border); border-radius: .75rem; }
.card-pad { padding: 1.25rem; }
.shadow-soft { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06); }

/* ---- Inputs ---- */
.input, .select, .textarea {
  width: 100%; padding: .625rem .75rem; border: 1px solid var(--stx-border); border-radius: .5rem; background: #fff;
  font-size: .875rem; color: var(--stx-text); transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--stx-navy); box-shadow: 0 0 0 3px rgba(30,58,138,.12); }
.input::placeholder { color: #94A3B8; }
.label { display: block; font-size: .8125rem; font-weight: 600; color: #334155; margin-bottom: .375rem; }
.help { font-size: .75rem; color: var(--stx-muted); margin-top: .25rem; }

/* ---- Tables ---- */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.tbl thead th { text-align: left; padding: .75rem 1rem; background: #F8FAFC; color: #475569; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--stx-border); }
.tbl tbody td { padding: .875rem 1rem; border-bottom: 1px solid #F1F5F9; }
.tbl tbody tr:hover { background: #F8FAFC; }

/* ---- Sidebar nav (web-app shell) ---- */
.side-link { display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; border-radius: .5rem; color: #CBD5E1; font-size: .875rem; font-weight: 500; }
.side-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.side-link.active { background: rgba(255,255,255,.10); color: #fff; }
.side-link svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.side-section { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: #64748B; padding: 1rem .75rem .5rem; }

/* ---- Phone frame for mobile screens ---- */
.phone {
  width: 390px; height: 844px; background: #000; border-radius: 48px; padding: 14px; position: relative;
  box-shadow: 0 40px 80px -20px rgba(15,23,42,.45), 0 10px 20px -8px rgba(15,23,42,.25);
}
.phone-screen { width: 100%; height: 100%; background: #fff; border-radius: 36px; overflow: hidden; position: relative; }
.phone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 110px; height: 28px; background: #000; border-radius: 14px; z-index: 50; }

/* ---- Step indicator ---- */
.step { display: flex; align-items: center; gap: .625rem; }
.step-dot { width: 1.75rem; height: 1.75rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8125rem; background: #E2E8F0; color: #475569; }
.step.active .step-dot { background: var(--stx-navy); color: #fff; }
.step.done .step-dot { background: #10B981; color: #fff; }
.step-line { flex: 1; height: 2px; background: #E2E8F0; }
.step.done + .step-line, .step.active + .step-line { background: var(--stx-navy); }

/* ---- Timeline ---- */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content: ''; position: absolute; left: .375rem; top: .25rem; bottom: .25rem; width: 2px; background: #E2E8F0; }
.timeline-item { position: relative; padding-bottom: 1.25rem; }
.timeline-item::before { content: ''; position: absolute; left: -1.5rem; top: .375rem; width: .875rem; height: .875rem; border-radius: 9999px; background: #fff; border: 3px solid #CBD5E1; }
.timeline-item.done::before { border-color: var(--stx-navy); background: var(--stx-navy); }
.timeline-item.current::before { border-color: var(--stx-red); background: var(--stx-red); box-shadow: 0 0 0 4px rgba(225,29,44,.15); }

/* ---- Misc ---- */
.kbd { font-family: ui-monospace, SFMono-Regular, monospace; font-size: .75rem; padding: .125rem .375rem; border-radius: .25rem; border: 1px solid var(--stx-border); background: #F8FAFC; color: #475569; }
.divider { height: 1px; background: var(--stx-border); margin: 1rem 0; }
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }

/* ---- Tables: zebra, hover lift, sortable, density ---- */
.tbl tbody tr:nth-child(even) { background: #FCFDFE; }
.tbl tbody tr { transition: background .12s ease, box-shadow .12s ease; }
.tbl tbody tr:hover { background: #F1F5F9; box-shadow: inset 3px 0 0 var(--stx-navy); }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable::after { content: ' \2195'; opacity: .35; font-size: .75rem; }
.tbl th.sort-asc::after  { content: ' \2191'; opacity: 1; color: var(--stx-navy); }
.tbl th.sort-desc::after { content: ' \2193'; opacity: 1; color: var(--stx-navy); }
.tbl-compact tbody td { padding: .5rem .75rem; }
.tbl tbody tr.is-selected { background: rgba(30,58,138,.06); }

/* ---- Form states ---- */
.input.is-invalid, .select.is-invalid, .textarea.is-invalid {
  border-color: var(--stx-red); box-shadow: 0 0 0 3px rgba(225,29,44,.12);
}
.input.is-valid, .select.is-valid, .textarea.is-valid {
  border-color: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.help-error {
  font-size: .75rem; color: var(--stx-red); margin-top: .375rem;
  display: inline-flex; align-items: center; gap: .375rem;
}
.help-error::before { content: '⚠'; font-size: .75rem; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 9999px; animation: stx-spin .6s linear infinite;
  color: #fff;
}
@keyframes stx-spin { to { transform: rotate(360deg); } }

/* ---- Focus polish (keyboard-only) ---- */
:focus-visible { outline: 2px solid var(--stx-navy); outline-offset: 2px; border-radius: 3px; }
.btn:focus-visible { outline-offset: 3px; }
.btn-accent:focus-visible { outline-color: var(--stx-red); }

/* ---- Empty state ---- */
.empty { text-align: center; padding: 3rem 1.5rem; color: var(--stx-muted); }
.empty-icon {
  width: 3rem; height: 3rem; margin: 0 auto 1rem; border-radius: 9999px;
  background: #F1F5F9; display: grid; place-items: center; color: #94A3B8;
}
.empty-title { color: var(--stx-text); font-weight: 600; font-size: 1rem; margin-bottom: .25rem; }
.empty-body { font-size: .875rem; max-width: 28rem; margin: 0 auto; }

/* ---- Skeleton loader ---- */
.skeleton {
  background: linear-gradient(90deg, #EEF2F7 0%, #F8FAFC 50%, #EEF2F7 100%);
  background-size: 200% 100%; animation: stx-shimmer 1.4s ease-in-out infinite;
  border-radius: .375rem; color: transparent !important;
}
@keyframes stx-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Page header (consistent dashboard chrome) ---- */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--stx-border);
}
.page-head h1 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em;
  line-height: 1.2;
}
.page-head .page-sub { color: var(--stx-muted); font-size: .875rem; margin-top: .25rem; }
.page-head .crumbs { font-size: .75rem; color: var(--stx-muted); margin-bottom: .25rem; }
.page-head .page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---- Card hover lift ---- */
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(15,23,42,.18); }

/* Print styles for receipt/label/invoice */
@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .print-page { box-shadow: none !important; border: none !important; padding: 0 !important; }
}

/* ---- Modal dialog ---- */
.modal-root {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4rem 1rem 1rem;
  opacity: 0; transition: opacity .15s ease;
  overflow-y: auto;
}
.modal-root.is-open { opacity: 1; }
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px);
}
.modal-wrap { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; }
.modal-card {
  width: 100%; max-width: 560px; background: #fff; border-radius: .875rem;
  box-shadow: 0 25px 50px -12px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.05);
  transform: translateY(-8px); transition: transform .15s ease;
  overflow: hidden;
}
.modal-card.modal-lg { max-width: 760px; }
.modal-card.modal-sm { max-width: 420px; }
.modal-root.is-open .modal-card { transform: translateY(0); }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--stx-border);
}
.modal-head h3 { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 1.0625rem; font-weight: 700; }
.modal-head .modal-close {
  width: 2rem; height: 2rem; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center;
  color: #64748B; cursor: pointer; background: transparent; border: 0;
}
.modal-head .modal-close:hover { background: #F1F5F9; color: #0F172A; }
.modal-body { padding: 1.25rem; max-height: calc(100vh - 12rem); overflow-y: auto; }
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
  padding: .875rem 1.25rem; border-top: 1px solid var(--stx-border); background: #F8FAFC;
}
.modal-foot .modal-foot-left { margin-right: auto; }

/* ---- Multi-step (paired with .step / .step-dot already defined) ---- */
[data-step] { display: none; }
[data-step].is-active { display: block; animation: stx-step-in .2s ease; }
@keyframes stx-step-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
[data-step-dot] { cursor: pointer; }
[data-step-dot].is-done .step-dot { background: #10B981; color: #fff; }
[data-step-dot].is-active .step-dot { background: var(--stx-navy); color: #fff; }
[data-step-dot].is-active + .step-line,
[data-step-dot].is-done + .step-line { background: var(--stx-navy); }

/* ---- Form polish ---- */
.field { margin-bottom: 1rem; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }
.input-group { display: flex; }
.input-group .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .input-addon {
  display: inline-flex; align-items: center; padding: .625rem .875rem;
  background: #F1F5F9; color: #475569; border: 1px solid var(--stx-border); border-left: 0;
  border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; font-size: .875rem; font-weight: 600;
}
.checkbox-row {
  display: flex; gap: .75rem; padding: .75rem; border: 1px solid var(--stx-border);
  border-radius: .5rem; cursor: pointer; transition: border-color .12s, background .12s;
}
.checkbox-row:hover { border-color: var(--stx-navy); background: #F8FAFC; }
.checkbox-row input[type="checkbox"] { margin-top: .25rem; }
.checkbox-row.is-selected { border-color: var(--stx-navy); background: rgb(var(--stx-navy-rgb) / 0.04); }

/* Carrier selector card — selection driven by the radio inside */
.carrier-card { border: 2px solid transparent; transition: border-color .12s, background .12s, box-shadow .12s; }
.carrier-card:hover { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 10px rgba(15,23,42,.06); }
.carrier-card:has(input[type="radio"]:checked) {
  border-color: var(--stx-navy);
  background: rgb(var(--stx-navy-rgb) / 0.05);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
}
.toggle {
  appearance: none; -webkit-appearance: none; width: 2.25rem; height: 1.25rem; border-radius: 9999px;
  background: #CBD5E1; position: relative; cursor: pointer; transition: background .15s; flex-shrink: 0;
}
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 9999px;
  background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.toggle:checked { background: var(--stx-navy); }
.toggle:checked::after { transform: translateX(1rem); }