/* ============================================================
   SHIPFLOW — Main Stylesheet
   ============================================================ */

/* Variables */
:root {
  --blue-600:   #2563EB;
  --blue-700:   #1D4ED8;
  --blue-100:   #DBEAFE;
  --blue-50:    #EFF6FF;
  --gray-900:   #111827;
  --gray-800:   #1F2937;
  --gray-700:   #374151;
  --gray-500:   #6B7280;
  --gray-300:   #D1D5DB;
  --gray-100:   #F3F4F6;
  --gray-50:    #F9FAFB;
  --green-600:  #16A34A;
  --green-100:  #DCFCE7;
  --red-600:    #DC2626;
  --red-100:    #FEE2E2;
  --yellow-500: #EAB308;
  --yellow-100: #FEF9C3;
  --white:      #FFFFFF;
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.06);
  --shadow:     0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --font:       'Inter', system-ui, -apple-system, sans-serif;
  --transition: .18s ease;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font); color: var(--gray-800); background: var(--gray-50); line-height: 1.6; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }

/* Container */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-300);
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-sm);
}
.navbar__inner {
  display: flex; align-items: center; gap: 1rem;
  height: 64px;
}
.navbar__brand {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.2rem; font-weight: 700; color: var(--gray-900);
  text-decoration: none; flex-shrink: 0;
}
.navbar__logo { width: 36px; height: 36px; }
.navbar__links {
  display: flex; align-items: center; gap: .25rem;
  list-style: none; margin-left: auto;
}
.navbar__links a {
  padding: .45rem .85rem; border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 500; color: var(--gray-700);
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
}
.navbar__links a:hover,
.navbar__links a.active { background: var(--blue-50); color: var(--blue-600); }
.navbar__hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: .5rem;
}
.navbar__hamburger span { display: block; width: 22px; height: 2px; background: var(--gray-700); border-radius: 2px; transition: var(--transition); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem 1.25rem; border-radius: var(--radius-sm);
  font-weight: 600; font-size: .9rem; cursor: pointer;
  border: 2px solid transparent; transition: all var(--transition);
  text-decoration: none; white-space: nowrap;
}
.btn--primary   { background: var(--blue-600); color: var(--white); border-color: var(--blue-600); }
.btn--primary:hover { background: var(--blue-700); border-color: var(--blue-700); text-decoration: none; }
.btn--outline   { background: transparent; color: var(--blue-600); border-color: var(--blue-600); }
.btn--outline:hover { background: var(--blue-50); text-decoration: none; }
.btn--danger    { background: var(--red-600); color: var(--white); border-color: var(--red-600); }
.btn--success   { background: var(--green-600); color: var(--white); border-color: var(--green-600); }
.btn--ghost     { background: transparent; color: var(--gray-700); border-color: var(--gray-300); }
.btn--ghost:hover { background: var(--gray-100); text-decoration: none; }
.btn--sm  { padding: .4rem .9rem; font-size: .82rem; }
.btn--lg  { padding: .85rem 1.75rem; font-size: 1rem; }
.btn--full { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: linear-gradient(135deg, var(--blue-700) 0%, #1e40af 60%, #1d4ed8 100%);
  color: var(--white); padding: 5rem 0 4rem;
  text-align: center;
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; line-height: 1.15; margin-bottom: 1rem; }
.hero p  { font-size: 1.15rem; opacity: .88; max-width: 560px; margin: 0 auto 2rem; }
.hero__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* Tracking bar in hero */
.track-bar {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 1.5rem; max-width: 600px; margin: 2.5rem auto 0;
  box-shadow: var(--shadow-lg);
}
.track-bar h2 { font-size: 1rem; font-weight: 600; color: var(--gray-700); margin-bottom: .75rem; text-align: left; }
.track-bar__row { display: flex; gap: .5rem; }
.track-bar input {
  flex: 1; padding: .7rem 1rem; border: 2px solid var(--gray-300); border-radius: var(--radius-sm);
  font-size: .95rem; transition: border-color var(--transition);
}
.track-bar input:focus { outline: none; border-color: var(--blue-600); }

/* ============================================================
   FEATURES / SERVICES GRID
   ============================================================ */
.section { padding: 4rem 0; }
.section__header { text-align: center; margin-bottom: 3rem; }
.section__header h2 { font-size: 1.9rem; font-weight: 700; color: var(--gray-900); }
.section__header p  { color: var(--gray-500); margin-top: .5rem; font-size: 1rem; }

.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 1.75rem; border: 1px solid var(--gray-300);
  box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card__icon {
  width: 48px; height: 48px; border-radius: var(--radius);
  background: var(--blue-50); display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; font-size: 1.4rem;
}
.card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: .4rem; }
.card p  { font-size: .9rem; color: var(--gray-500); line-height: 1.55; }

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-weight: 500; font-size: .875rem; color: var(--gray-700); margin-bottom: .35rem; }
.form-control {
  width: 100%; padding: .65rem .95rem;
  border: 2px solid var(--gray-300); border-radius: var(--radius-sm);
  font-size: .95rem; background: var(--white); color: var(--gray-900);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.form-control.is-invalid { border-color: var(--red-600); }
.form-error { font-size: .8rem; color: var(--red-600); margin-top: .3rem; }
.form-hint  { font-size: .8rem; color: var(--gray-500); margin-top: .3rem; }

.form-row { display: grid; gap: 1rem; }
.form-row--2 { grid-template-columns: 1fr 1fr; }
.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row--4 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: .5rem; }

/* Fieldset section */
.fieldset {
  border: 1px solid var(--gray-300); border-radius: var(--radius);
  padding: 1.5rem; margin-bottom: 1.5rem;
}
.fieldset legend {
  font-weight: 600; font-size: .9rem; color: var(--gray-700);
  padding: 0 .5rem; margin-left: -.25rem;
}

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap {
  overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--gray-300);
  /* Block 40: subtle inset shadow hint on the right edge when content
     overflows horizontally — tells the user "there's more, scroll →".
     The gradients are pinned to the scroll container via background-attachment:
     local so they only show when actually scrollable. */
  background:
    linear-gradient(to right, var(--white) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--white) 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(0,0,0,.10), rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), rgba(0,0,0,0)) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
table { width: 100%; border-collapse: collapse; background: var(--white); }
thead th {
  background: var(--gray-50); padding: .85rem 1rem;
  text-align: left; font-size: .82rem; font-weight: 600;
  color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--gray-300);
}
tbody td { padding: .85rem 1rem; font-size: .9rem; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
tbody tr { transition: background-color .12s ease; }
tbody tr:last-child td { border-bottom: none; }

/* Block 40: global zebra striping — every table in the app gets it for free.
   Very subtle (1.8% black) so it reads as gentle banding, not loud stripes.
   Order matters: zebra first, hover after, so hover always wins. */
tbody tr:nth-child(even) { background: rgba(17, 24, 39, .022); }
tbody tr:hover { background: var(--blue-50, rgba(37,99,235,.07)); }

/* Opt-out for small/grouped tables that look better plain (add class on <table>). */
table.table--plain tbody tr:nth-child(even) { background: transparent; }

/* ── Floating (sticky) column headers ──────────────────────────────────────
   On desktop the whole page scrolls and the admin topbar is sticky (60px), so
   a table's header row sticks just under it. With several tables stacked, each
   header floats while its table is on screen; when you reach the next table its
   header pushes the previous one up and takes over — so you always know which
   columns you're reading. Add class `no-stick` on a <table> to opt out.
   (Mobile keeps horizontal scroll + the card layout, where this can't apply.) */
@media (min-width: 769px) {
  /* .table-wrap's overflow-x:auto makes it its own scroll box, which would pin a
     sticky header to that box instead of the page. Let the window be the scroller
     on desktop so the header floats below the topbar. */
  body.admin-body .table-wrap { overflow-x: visible; }
  /* Big page-level data tables only. EXCLUDE .rtable — those are small inline detail
     tables (e.g. the per-parcel "money split" inside a card); a sticky header there
     detaches and leaves an empty band + hides the first row. */
  body.admin-body table:not(.verify-table):not(.no-stick):not(.rtable) thead th {
    position: sticky; top: 60px; z-index: 5;
    /* border-collapse can drop a sticky cell's bottom border — repaint it and add
       a soft lift so the floating header stays cleanly separated from the rows. */
    box-shadow: inset 0 -1px 0 var(--gray-300), 0 4px 6px -4px rgba(16, 24, 40, .18);
  }
  /* Same for the DFP worktable legend (Collector flow, Distribution, VAT Staging,
     VAT KRA) — it's a CSS-grid header row, not a <thead>, and isn't inside an
     overflow box, so it sticks to the page directly. Needs a solid background so
     parcel cards scroll cleanly underneath it. */
  body.admin-body .dfp__legend {
    position: sticky; top: 60px; z-index: 5;
    background: var(--gray-50); margin-bottom: 0;
    padding-top: .55rem; border-radius: 8px 8px 0 0;
    box-shadow: 0 4px 6px -4px rgba(16, 24, 40, .18);
  }
  /* Per-parcel "money split" matrix. The first column holds the (long) description,
     so give it the width; every OTHER column is just a short numeric value, so make
     them COMPACT — small header text that may wrap onto 2 lines, and short values
     that stay on one line with tight padding. This stops the description wrapping
     into many rows on parcels with lots of leg columns. */
  body.admin-body .dfp__matrix table.rtable th:first-child,
  body.admin-body .dfp__matrix table.rtable td:first-child { width: 34%; min-width: 260px; }
  body.admin-body .dfp__matrix table.rtable th:not(:first-child) {
    white-space: normal; font-size: .58rem; line-height: 1.1; letter-spacing: 0; padding: .3rem .25rem;
  }
  body.admin-body .dfp__matrix table.rtable td:not(:first-child) {
    white-space: nowrap; font-size: .68rem; padding: .3rem .3rem;
  }
}

/* ============================================================
   PAGINATION (Block 40)
   ============================================================ */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-top: 1rem;
}
.pager__info { font-size: .82rem; color: var(--gray-500); }
.pager__info strong { color: var(--gray-700); }
.pager__controls { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.pager__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 .6rem;
  border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
  background: var(--white); color: var(--gray-700);
  font-size: .85rem; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: all .12s ease;
}
.pager__btn:hover { background: var(--gray-50); border-color: var(--gray-400, #9CA3AF); text-decoration: none; }
.pager__btn--active {
  background: var(--blue-600); border-color: var(--blue-600); color: var(--white);
  box-shadow: 0 1px 4px rgba(37,99,235,.35);
}
.pager__btn--active:hover { background: var(--blue-700); }
.pager__btn--disabled { opacity: .4; pointer-events: none; }
.pager__ellipsis { padding: 0 .35rem; color: var(--gray-400, #9CA3AF); align-self: center; }
.pager__per { font-size: .8rem; color: var(--gray-500); display: inline-flex; align-items: center; gap: .35rem; }
.pager__per select { padding: .3rem .5rem; font-size: .8rem; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); }

/* ============================================================
   RESPONSIVE TABLE POLISH (Block 40)
   ============================================================ */
@media (max-width: 768px) {
  thead th { padding: .6rem .65rem; font-size: .72rem; }
  tbody td { padding: .6rem .65rem; font-size: .84rem; }
  .pager { justify-content: center; }
  .pager__info { width: 100%; text-align: center; order: 2; }
  /* On phones, page-number buttons get cramped — keep Prev/Next + active
     only by hiding the numbered buttons that aren't current. */
  .pager__btn--num:not(.pager__btn--active) { display: none; }
}
@media (max-width: 480px) {
  thead th { padding: .5rem .5rem; font-size: .68rem; letter-spacing: .02em; }
  tbody td { padding: .5rem .5rem; font-size: .8rem; }
  .pager__per { display: none; }   /* per-page selector hidden on tiny screens */
}

/* ============================================================
   MOBILE: full-width content + card-tables (NO horizontal scroll)
   feedback_layout_math_first: a 10-column matrix can't shrink to 375px, so it
   RESTRUCTURES — any table tagged .rtable collapses to one stacked card per row
   (each cell becomes a "Label : value" line, label from data-label).
   ============================================================ */
@media (max-width: 768px) {
  .admin-content { padding: .8rem .65rem; }   /* use the full screen width */
  .panel__body   { padding: .9rem; }
  .panel__header { padding: .75rem .9rem; flex-wrap: wrap; gap: .35rem; }
  .admin-topbar  { padding: 0 .8rem; }
}
@media (max-width: 640px) {
  /* container must stop scrolling + fill width */
  .rtable-wrap { overflow-x: visible !important; min-width: 0 !important; border: none !important; background: none !important; padding: 0 !important; }
  .rtable, .rtable thead, .rtable tbody, .rtable tfoot, .rtable tr, .rtable th, .rtable td {
    display: block !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box;
  }
  .rtable { min-width: 0 !important; font-size: .85rem !important; }
  .rtable thead { position: absolute; left: -9999px; top: -9999px; }   /* hide the header row */
  .rtable tbody tr, .rtable > tr {
    border: 1px solid var(--gray-200) !important; border-radius: 8px !important;
    margin: 0 0 .55rem !important; padding: .2rem .15rem !important; background: var(--white) !important;
  }
  .rtable td {
    display: flex !important; justify-content: space-between; align-items: baseline; gap: .9rem;
    text-align: right !important; padding: .35rem .55rem !important;
    border: none !important; border-bottom: 1px dashed var(--gray-100) !important;
    white-space: normal !important; word-break: break-word;
  }
  .rtable tr td:last-child { border-bottom: none !important; }
  .rtable td::before {
    content: attr(data-label); flex: 1 1 auto; text-align: left;
    font-weight: 600; color: var(--gray-500); font-size: .78rem;
    text-transform: none; letter-spacing: 0;
  }
  .rtable td[data-label=""] { display: block !important; text-align: left !important; }
  .rtable td[data-label=""]::before { content: none; }
  .rtable td.rt-empty { display: none !important; }    /* hide zero/blank matrix cells */
  .rtable td.rt-head {                                  /* a card's title line */
    display: block !important; text-align: left !important;
    background: var(--gray-50) !important; font-weight: 700; border-radius: 6px;
    border-bottom: none !important;
  }
  .rtable td.rt-head::before { content: none; }
  .rtable tfoot td { font-weight: 700; }
  /* JS-collapsed branch rows: keep them hidden even though the card rule forces
     trs to display:block. The higher-specificity rule + .df-show class wins. */
  .rtable tr.df-off { display: none !important; }
  .rtable tr.df-off.df-show { display: block !important; }
}
/* Branch drill-down rows (distribution matrix) — collapsed by default, shown
   when the JS adds .df-show. Desktop = table-row; mobile override above. */
tr.df-off { display: none; }
tr.df-off.df-show { display: table-row; }

/* ============================================================
   DISTRIBUTION-FLOW PARCEL CARDS (Block 79.1)
   Each parcel is its own card so you never confuse which money row /
   expanded matrix belongs to which parcel. Columns stay aligned down the
   page because the legend strip and every card head share one grid template
   (--dfp-cols). A status-coloured left rail + tinted header read at a glance.
   ============================================================ */
.dfp { --dfp-cols: minmax(150px,1.9fr) minmax(110px,1.5fr) minmax(116px,1.6fr) .85fr .85fr .85fr .95fr 44px; }
.dfp__legend {
  display: grid; grid-template-columns: var(--dfp-cols); gap: .5rem;
  padding: .25rem 1rem .55rem; margin-bottom: .5rem;
  border-bottom: 2px solid var(--gray-300);
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500);
}
.dfp__legend > div, .dfp__head > div { min-width: 0; }   /* let cells shrink, never spill into the next */
.dfp__legend .r { text-align: right; }
.dfp__legend .c { text-align: center; }

.dfp__card {
  --rail: var(--gray-300);
  border: 1px solid var(--gray-200, #E5E7EB);
  border-left: 5px solid var(--rail);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  margin-bottom: .7rem; overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.dfp__card:hover { box-shadow: var(--shadow); }
.dfp__card.is-selected { box-shadow: 0 0 0 2px var(--blue-600), var(--shadow); }

.dfp__head {
  display: grid; grid-template-columns: var(--dfp-cols); gap: .5rem; align-items: center;
  padding: .65rem 1rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rail) 9%, var(--white)) 0%, var(--white) 38%);
}
.dfp__head .r { text-align: right; }
.dfp__head .c { text-align: center; }
.dfp__money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dfp__num {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 700;
  font-size: .88rem; color: var(--gray-900); text-decoration: none; overflow-wrap: break-word;
}
.dfp__num:hover { text-decoration: underline; }
.dfp__pill {
  display: inline-block; font-size: .7rem; font-weight: 700; padding: .2rem .5rem;
  border-radius: 8px; line-height: 1.2; white-space: normal;   /* wrap inside the cell, never overlap money */
}

/* the expandable distribution drawer */
.dfp__dist { border-top: 1px dashed var(--gray-200, #E5E7EB); }
.dfp__dist > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: .5rem 1rem; font-size: .8rem; font-weight: 600; color: var(--gray-700);
  display: flex; align-items: center; gap: .45rem; background: var(--gray-50);
}
.dfp__dist > summary::-webkit-details-marker { display: none; }
.dfp__dist > summary::before { content: '▸'; color: var(--gray-500); transition: transform .15s ease; }
.dfp__dist[open] > summary::before { transform: rotate(90deg); }
.dfp__dist > summary:hover { background: var(--gray-100); }
.dfp__dist > summary .dfp__dist-num { font-family: ui-monospace, monospace; font-weight: 700; color: var(--gray-900); }
.dfp__matrix { padding: .7rem 1rem 1rem; }

@media (max-width: 768px) {
  .dfp__legend { display: none; }                 /* labels move into each cell */
  .dfp__head { grid-template-columns: 1fr 1fr; gap: .45rem .8rem; padding: .7rem .85rem; }
  .dfp__head > div { display: flex; flex-direction: column; gap: .1rem; text-align: left !important; min-width: 0; }
  .dfp__head > div::before {
    content: attr(data-l); font-size: .62rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--gray-500);
  }
  .dfp__head > div[data-l="Parcel"] { grid-column: 1 / -1; }
  .dfp__head > div[data-l=""]::before { content: none; }
  .dfp__head .r, .dfp__head .c { text-align: left !important; }
}

/* ============================================================
   BADGES / STATUS PILLS
   ============================================================ */
.badge {
  display: inline-block; padding: .25rem .65rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.badge--blue   { background: var(--blue-100);   color: var(--blue-700); }
.badge--green  { background: var(--green-100);  color: var(--green-600); }
.badge--red    { background: var(--red-100);    color: var(--red-600); }
.badge--yellow { background: var(--yellow-100); color: #92400E; }
.badge--gray   { background: var(--gray-100);   color: var(--gray-700); }

/* ============================================================
   ALERT / FLASH
   ============================================================ */
.flash {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.25rem; border-radius: var(--radius-sm);
  margin: 1rem auto; max-width: 900px; font-size: .9rem; font-weight: 500;
}
.flash--success { background: var(--green-100); color: var(--green-600); border: 1px solid #86EFAC; }
.flash--error   { background: var(--red-100);   color: var(--red-600);   border: 1px solid #FCA5A5; }
.flash--info    { background: var(--blue-100);  color: var(--blue-700);  border: 1px solid #93C5FD; }
.flash--warning { background: var(--yellow-100); color: #92400E;         border: 1px solid #FDE68A; }
.flash__close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: inherit; line-height: 1; }

/* ============================================================
   TRACKING PAGE
   ============================================================ */
.tracking-result { max-width: 800px; margin: 2rem auto; }
.tracking-header {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--gray-300); padding: 1.75rem;
  margin-bottom: 1.5rem; box-shadow: var(--shadow-sm);
}
.tracking-header__top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; }
.tracking-number { font-size: 1.4rem; font-weight: 700; color: var(--gray-900); }
.tracking-route  { font-size: .9rem; color: var(--gray-500); margin-top: .25rem; }

.tracking-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--gray-100); }
.tracking-meta__item label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); }
.tracking-meta__item span  { display: block; font-size: .95rem; font-weight: 600; color: var(--gray-900); margin-top: .15rem; }

/* Timeline */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content: ''; position: absolute; left: .55rem; top: 0; bottom: 0; width: 2px; background: var(--gray-300); }
.timeline__item { position: relative; padding: 0 0 1.5rem 1.5rem; }
.timeline__item::before {
  content: ''; position: absolute; left: -1.5rem; top: .3rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gray-300); border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--gray-300);
}
.timeline__item.is-current::before { background: var(--blue-600); box-shadow: 0 0 0 2px var(--blue-600); }
.timeline__item.is-delivered::before { background: var(--green-600); box-shadow: 0 0 0 2px var(--green-600); }
.timeline__status { font-weight: 600; font-size: .95rem; color: var(--gray-900); }
.timeline__location { font-size: .875rem; color: var(--gray-500); margin-top: .15rem; }
.timeline__time { font-size: .8rem; color: var(--gray-400); margin-top: .1rem; }

/* ============================================================
   ADMIN LAYOUT
   ============================================================ */
body.admin-body { display: flex; min-height: 100vh; background: var(--gray-100); }

.sidebar {
  width: 240px; flex-shrink: 0; background: var(--gray-900);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 200;
  transition: transform var(--transition);
}
.sidebar__brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.25rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--white); font-weight: 700; font-size: 1.05rem; text-decoration: none;
}
.sidebar__brand svg { width: 30px; height: 30px; }
.sidebar__nav { padding: 1rem 0; flex: 1; }
.sidebar__section { padding: .4rem 1rem .2rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.35); }
.sidebar__link {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem 1rem; color: rgba(255,255,255,.7); font-size: .88rem; font-weight: 500;
  text-decoration: none; transition: background var(--transition), color var(--transition);
  border-radius: 0; margin: .05rem .5rem; border-radius: var(--radius-sm);
}
.sidebar__link:hover, .sidebar__link.active { background: rgba(255,255,255,.08); color: var(--white); text-decoration: none; }
.sidebar__link.active { background: var(--blue-600); color: var(--white); }
.sidebar__link svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar__footer { padding: 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar__user { font-size: .82rem; color: rgba(255,255,255,.6); }
.sidebar__user strong { display: block; color: var(--white); }

.admin-main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.admin-topbar {
  background: var(--white); border-bottom: 1px solid var(--gray-300);
  padding: 0 1.5rem; height: 60px; display: flex; align-items: center;
  justify-content: space-between; position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-sm);
}
.admin-topbar h1 { font-size: 1.1rem; font-weight: 600; color: var(--gray-900); }
.admin-topbar__right { display: flex; align-items: center; gap: .75rem; }

.admin-content { padding: 1.75rem; flex: 1; }

/* Stats cards */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.stat-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem; border: 1px solid var(--gray-300);
  box-shadow: var(--shadow-sm);
}
.stat-card__label { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); }
.stat-card__value { font-size: 2rem; font-weight: 700; color: var(--gray-900); line-height: 1.1; margin-top: .25rem; }
.stat-card__sub   { font-size: .8rem; color: var(--gray-500); margin-top: .2rem; }
.stat-card--blue   .stat-card__value { color: var(--blue-600); }
.stat-card--green  .stat-card__value { color: var(--green-600); }
.stat-card--red    .stat-card__value { color: var(--red-600); }
.stat-card--yellow .stat-card__value { color: var(--yellow-500); }

/* Panel — distinct, elevated cards so each section reads as its own block.
   The header gets a soft tinted band + rounded top; the card lifts off the page
   with a real shadow so adjacent sections (Sender / Recipient / Charges / Parcels /
   Route / Revenue Plan …) are clearly separate rather than one continuous sheet. */
.panel {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--gray-200, #E5E7EB);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 16px -6px rgba(16,24,40,.10);
  margin-bottom: 1.5rem;
  transition: box-shadow .18s ease, transform .18s ease;
}
.panel:hover { box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 12px 26px -10px rgba(16,24,40,.16); }
.panel__header {
  padding: .9rem 1.4rem;
  border-bottom: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, var(--gray-50, #F9FAFB), var(--white));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.panel__header h2 { font-size: .98rem; font-weight: 700; letter-spacing: -.01em; color: var(--gray-900); }
.panel__body { padding: 1.35rem 1.4rem; }

/* Barcode scan area */
.scan-area {
  border: 2px dashed var(--gray-300); border-radius: var(--radius-lg);
  padding: 2.5rem; text-align: center; background: var(--gray-50);
  transition: border-color var(--transition), background var(--transition);
}
.scan-area:focus-within { border-color: var(--blue-600); background: var(--blue-50); }
.scan-area__icon { font-size: 2.5rem; margin-bottom: .75rem; }
.scan-area h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: .35rem; }
.scan-area p  { font-size: .875rem; color: var(--gray-500); margin-bottom: 1rem; }

/* Busy overlay shown while a scan form is being submitted. Prevents the
   "did my scan register?" anxiety + stops accidental double-submits. */
.scan-busy-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9999;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 1.1rem;
}
.scan-busy-overlay.is-active { display: flex; }
.scan-busy-spinner {
  width: 72px; height: 72px;
  border: 6px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: scanSpin .85s linear infinite;
}
.scan-busy-text {
  color: #fff; font-weight: 600; font-size: 1rem;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
@keyframes scanSpin { to { transform: rotate(360deg); } }

/* Step indicator */
.steps { display: flex; align-items: center; margin-bottom: 2rem; }
.step { display: flex; align-items: center; gap: .5rem; flex: 1; }
.step:not(:last-child)::after { content: ''; flex: 1; height: 2px; background: var(--gray-300); margin: 0 .5rem; }
.step__num {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700; border: 2px solid var(--gray-300);
  background: var(--white); color: var(--gray-500); flex-shrink: 0;
}
.step.is-active .step__num  { border-color: var(--blue-600); color: var(--blue-600); }
.step.is-done   .step__num  { border-color: var(--green-600); background: var(--green-600); color: var(--white); }
.step__label { font-size: .8rem; font-weight: 500; color: var(--gray-500); }
.step.is-active .step__label { color: var(--blue-600); font-weight: 600; }

/* Pagination */
.pagination { display: flex; gap: .35rem; justify-content: center; margin-top: 1.25rem; }
.pagination a, .pagination span {
  padding: .4rem .75rem; border-radius: var(--radius-sm); font-size: .875rem;
  border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-700);
  text-decoration: none; transition: all var(--transition);
}
.pagination a:hover  { background: var(--blue-50); border-color: var(--blue-600); color: var(--blue-600); }
.pagination .current { background: var(--blue-600); border-color: var(--blue-600); color: var(--white); }

/* Login page */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); padding: 2rem; }
.login-card { background: var(--white); border-radius: var(--radius-lg); padding: 2.5rem; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); }
.login-card__logo { display: flex; align-items: center; gap: .6rem; font-size: 1.3rem; font-weight: 700; color: var(--gray-900); margin-bottom: 1.75rem; }
.login-card h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: .4rem; }
.login-card p  { color: var(--gray-500); font-size: .9rem; margin-bottom: 1.75rem; }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-sm { font-size: .875rem; }
.text-xs { font-size: .75rem; }
.text-muted { color: var(--gray-500); }
.text-danger { color: var(--red-600); }
.text-success { color: var(--green-600); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.w-100 { width: 100%; }
.hidden { display: none !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .navbar__links { display: none; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--gray-300); padding: 1rem; gap: .25rem; box-shadow: var(--shadow); }
  .navbar__links.open { display: flex; }
  .navbar__hamburger { display: flex; margin-left: auto; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .form-row--2, .form-row--3 { grid-template-columns: 1fr; }
  .form-row--4 { grid-template-columns: 1fr 1fr; }
  .steps { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .step::after { display: none; }
  .admin-main { margin-left: 0; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .tracking-header__top { flex-direction: column; }
}

@media (max-width: 480px) {
  .grid--4 { grid-template-columns: 1fr; }
  .hero { padding: 3rem 0 2.5rem; }
  .track-bar__row { flex-direction: column; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
 * Inline action feedback — chip + row highlight
 * Pattern: feedback_inline_action_feedback.md
 * ============================================================ */
.inline-result {
  display: inline-block;
  padding: .25rem .65rem;
  margin-left: .5rem;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
  animation: inline-result-fade 4.5s ease-in-out forwards;
  pointer-events: none;
}
.inline-result--success { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
.inline-result--error   { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.inline-result--info    { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }
.inline-result--block {
  display: block;
  width: fit-content;
  margin: .75rem 1.25rem;
}
@keyframes inline-result-fade {
  0%   { opacity: 0; transform: translateY(-4px); }
  10%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2px); }
}
.just-changed {
  animation: just-changed-pulse 2s ease-in-out;
}
@keyframes just-changed-pulse {
  0%   { background-color: #DBEAFE; }
  60%  { background-color: #EFF6FF; }
  100% { background-color: transparent; }
}

/* ============================================================
 * Inline confirmation popover (replaces native window.confirm)
 * Pattern: feedback_inline_confirm_popover.md
 * ============================================================ */
.confirm-popover {
  position: absolute;
  z-index: 1100;
  width: 280px;
  max-width: 92vw;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.06);
  animation: confirm-pop-in .16s ease-out;
}
.confirm-popover--exiting { animation: confirm-pop-out .14s ease-in forwards; }
@keyframes confirm-pop-in {
  0%   { opacity: 0; transform: translateY(4px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes confirm-pop-out {
  to { opacity: 0; transform: translateY(2px); }
}
.confirm-popover__body {
  padding: .85rem 1rem .75rem;
}
.confirm-popover__message {
  margin: 0 0 .8rem;
  font-size: .875rem;
  color: #1F2937;
  line-height: 1.45;
}
.confirm-popover__actions {
  display: flex;
  gap: .4rem;
  justify-content: flex-end;
}
.confirm-popover__btn {
  font: inherit;
  font-size: .82rem;
  font-weight: 500;
  padding: .35rem .85rem;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s ease;
}
.confirm-popover__btn--cancel {
  background: #fff;
  border-color: #E5E7EB;
  color: #4B5563;
}
.confirm-popover__btn--cancel:hover { background: #F9FAFB; }
.confirm-popover__btn--confirm {
  background: #DC2626;
  color: #fff;
  border-color: #DC2626;
}
.confirm-popover__btn--confirm:hover { background: #B91C1C; border-color: #B91C1C; }
.confirm-popover[data-tone="primary"] .confirm-popover__btn--confirm {
  background: #2563EB; border-color: #2563EB;
}
.confirm-popover[data-tone="primary"] .confirm-popover__btn--confirm:hover {
  background: #1D4ED8; border-color: #1D4ED8;
}
.confirm-popover__arrow {
  position: absolute;
  width: 10px; height: 10px;
  background: #fff;
  left: 50%; margin-left: -5px;
}
.confirm-popover[data-arrow="bottom"] .confirm-popover__arrow {
  bottom: -6px;
  border-right: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
  transform: rotate(45deg);
}
.confirm-popover[data-arrow="top"] .confirm-popover__arrow {
  top: -6px;
  border-left: 1px solid #E5E7EB;
  border-top: 1px solid #E5E7EB;
  transform: rotate(45deg);
}
@media (max-width: 480px) {
  .confirm-popover { width: 92vw; max-width: 340px; }
}

/* ============================================================
   STATUS THEMING — status-driven colors for customer pages.
   Apply .st-<STATUS_CODE> to a parent; child rules pick up
   the right --st-* tokens (primary, accent, soft bg, ink).
   ============================================================ */
.st-CREATED            { --st-c1:#64748B; --st-c2:#94A3B8; --st-soft:#F1F5F9; --st-ink:#334155; }
.st-DROPPED_OFF        { --st-c1:#2563EB; --st-c2:#60A5FA; --st-soft:#EFF6FF; --st-ink:#1E3A8A; }
.st-PROCESSING         { --st-c1:#4F46E5; --st-c2:#818CF8; --st-soft:#EEF2FF; --st-ink:#312E81; }
.st-IN_TRANSIT         { --st-c1:#D97706; --st-c2:#FBBF24; --st-soft:#FFFBEB; --st-ink:#92400E; }
.st-AT_HUB             { --st-c1:#7C3AED; --st-c2:#A78BFA; --st-soft:#F5F3FF; --st-ink:#5B21B6; }
.st-OUT_FOR_DELIVERY   { --st-c1:#0284C7; --st-c2:#38BDF8; --st-soft:#F0F9FF; --st-ink:#0C4A6E; }
.st-DELIVERED          { --st-c1:#059669; --st-c2:#34D399; --st-soft:#ECFDF5; --st-ink:#065F46; }
.st-ATTEMPTED_DELIVERY { --st-c1:#D97706; --st-c2:#FBBF24; --st-soft:#FFFBEB; --st-ink:#92400E; }
.st-HELD_AT_OFFICE     { --st-c1:#D97706; --st-c2:#FBBF24; --st-soft:#FFFBEB; --st-ink:#92400E; }
.st-RETURNED           { --st-c1:#DC2626; --st-c2:#F87171; --st-soft:#FEF2F2; --st-ink:#991B1B; }
.st-EXCEPTION          { --st-c1:#DC2626; --st-c2:#F87171; --st-soft:#FEF2F2; --st-ink:#991B1B; }
.st-CANCELLED          { --st-c1:#6B7280; --st-c2:#9CA3AF; --st-soft:#F9FAFB; --st-ink:#374151; }

/* Hero header at the top of the shipment detail */
.status-hero {
  position: relative;
  background: linear-gradient(135deg, var(--st-c1) 0%, var(--st-c2) 100%);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  color: var(--white);
  box-shadow: 0 14px 36px rgba(15,23,42,.18);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.status-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 88% 30%, rgba(255,255,255,.22) 0%, transparent 55%),
    radial-gradient(circle at 12% 110%, rgba(0,0,0,.18) 0%, transparent 45%);
}
.status-hero > * { position: relative; }
.status-hero__back { color: rgba(255,255,255,.85); font-size: .85rem; }
.status-hero__back:hover { color: var(--white); text-decoration: underline; }
.status-hero__num {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em;
  margin: .3rem 0 .15rem; word-break: break-all;
}
.status-hero__meta { color: rgba(255,255,255,.92); font-size: .9rem; }
.status-hero__pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem; background: rgba(255,255,255,.95);
  color: var(--st-ink); border-radius: 999px;
  font-size: .85rem; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.status-hero__row {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 1rem;
}
.status-hero__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.status-hero__btn {
  padding: .45rem .9rem; border-radius: var(--radius-sm);
  font-size: .85rem; font-weight: 600;
  background: rgba(255,255,255,.18); color: var(--white);
  border: 1px solid rgba(255,255,255,.4);
  text-decoration: none; transition: background var(--transition);
  cursor: pointer;
}
.status-hero__btn:hover { background: rgba(255,255,255,.3); text-decoration: none; }
.status-hero__btn--danger { background: rgba(0,0,0,.25); }
.status-hero__btn--danger:hover { background: rgba(0,0,0,.4); }

/* My Shipments — themed rows */
.status-rows tr { transition: background var(--transition); }
.status-rows tr.status-row > td:first-child {
  border-left: 4px solid var(--st-c1);
}
.status-rows tr.status-row:nth-child(odd) { background: rgba(0,0,0,.018); }
.status-rows tr.status-row:hover { background: var(--st-soft); }

/* Timeline (vertical) */
.timeline { list-style: none; padding: .25rem 0 0; margin: 0; position: relative; }
.timeline::before {
  content: ''; position: absolute;
  left: 9px; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(180deg, var(--gray-300) 0%, var(--gray-200, #E5E7EB) 100%);
}
.timeline__item { position: relative; padding: 0 0 1.25rem 2rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute; left: 1px; top: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--st-c1, var(--blue-600));
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--st-c1, var(--blue-600)), 0 2px 6px rgba(0,0,0,.1);
}
.timeline__head  { font-weight: 600; font-size: .92rem; color: var(--gray-900); }
.timeline__where { font-size: .85rem; color: var(--gray-700); margin-top: .15rem; }
.timeline__notes { font-size: .82rem; color: var(--gray-500); margin-top: .15rem; font-style: italic; }
.timeline__when  { font-size: .76rem; color: var(--gray-500); margin-top: .35rem; }

/* Envelope card — recipient / sender */
.envelope {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.envelope__lbl {
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .7rem; font-weight: 700; color: var(--gray-500);
  margin-bottom: .5rem;
}
.envelope__name { font-size: 1.05rem; font-weight: 700; color: var(--gray-900); }
.envelope__line { font-size: .88rem; color: var(--gray-700); margin-top: .25rem; }
.envelope__line code { font-size: .8rem; background: var(--gray-100); padding: .05rem .35rem; border-radius: 3px; }

/* Cost panel */
.cost-panel {
  background: linear-gradient(180deg, var(--white) 0%, var(--blue-50) 100%);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.cost-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .35rem 0; font-size: .88rem;
}
.cost-row__lbl { color: var(--gray-600); }
.cost-row__val { font-variant-numeric: tabular-nums; }
.cost-total {
  margin-top: .55rem; padding-top: .9rem;
  border-top: 2px solid var(--gray-300);
  display: flex; justify-content: space-between; align-items: baseline;
}
.cost-total__lbl { font-weight: 700; color: var(--gray-900); font-size: 1rem; }
.cost-total__val {
  font-weight: 700; font-size: 1.7rem; color: var(--gray-900);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* Booking flow — steps header */
.bk-steps { display: flex; gap: .75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.bk-step {
  flex: 1; min-width: 200px;
  background: var(--white);
  border: 1px solid var(--gray-300); border-left: 4px solid var(--gray-300);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  transition: all var(--transition);
  display: flex; align-items: center; gap: .75rem;
}
.bk-step__num {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gray-100); color: var(--gray-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem;
}
.bk-step__title { font-weight: 600; font-size: .92rem; color: var(--gray-900); }
.bk-step__desc  { font-size: .78rem; color: var(--gray-500); margin-top: .1rem; }
.bk-step--active { border-left-color: var(--blue-600); background: var(--blue-50); box-shadow: 0 4px 14px rgba(37,99,235,.1); }
.bk-step--active .bk-step__num { background: var(--blue-600); color: var(--white); }
.bk-step--done   { border-left-color: var(--green-600); }
.bk-step--done   .bk-step__num { background: var(--green-600); color: var(--white); }

/* Booking flow — colored section panels */
.panel--accent { border-top: 4px solid var(--accent, var(--blue-600)); }
.panel--accent .panel__header h2 { color: var(--accent-ink, var(--blue-700)); }
.accent-blue   { --accent: var(--blue-600);  --accent-ink: var(--blue-700); }
.accent-purple { --accent: #8B5CF6;          --accent-ink: #6D28D9; }
.accent-amber  { --accent: #F59E0B;          --accent-ink: #92400E; }
.accent-rose   { --accent: #EC4899;          --accent-ink: #BE185D; }

/* Sticky summary on booking page */
.bk-summary {
  position: sticky; top: 20px;
  background: linear-gradient(160deg, #ECFEFF 0%, #DBEAFE 60%, #EDE9FE 100%);
  border: 1px solid #A5F3FC;
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 36px rgba(8,145,178,.16);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.bk-summary__header {
  padding: 1rem 1.25rem;
  background: linear-gradient(90deg, #0891B2 0%, #2563EB 100%);
  color: var(--white);
  display: flex; justify-content: space-between; align-items: center;
}
.bk-summary__header h2 { color: var(--white); font-size: 1.05rem; }
.bk-summary__body { padding: 1.1rem 1.25rem 0; }
.bk-summary__meta { font-size: .88rem; color: #0C4A6E; margin-bottom: .5rem; }
.bk-summary__total {
  margin: .75rem -1.25rem 0;
  padding: 1rem 1.25rem;
  background: var(--white);
  border-top: 1px dashed #A5F3FC;
  display: flex; justify-content: space-between; align-items: baseline;
}
.bk-summary__total strong {
  font-size: 1.55rem; font-weight: 700; color: var(--gray-900);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.bk-summary__confirm {
  padding: 1.25rem;
  background: linear-gradient(180deg, var(--white) 0%, #ECFDF5 100%);
  border-top: 1px solid #A5F3FC;
}
.bk-summary__confirm .btn { width: 100%; font-size: 1.05rem; padding: .85rem; }

/* ============================================================
   PAGE-LEVEL BACK BUTTON — rendered by layouts above page content.
   Behavior: real browser back when same-origin, otherwise falls
   back to data-fallback URL. See app.js .js-back handler.
   ============================================================ */
.page-back-row {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 1rem; flex-wrap: wrap;
}
.page-back {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .8rem;
  background: var(--white);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: .82rem; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.page-back:hover {
  background: var(--gray-50);
  color: var(--gray-900);
  border-color: var(--gray-500);
  text-decoration: none;
  transform: translateX(-2px);
  box-shadow: var(--shadow);
}
.page-back__arrow {
  display: inline-block;
  transition: transform var(--transition);
  font-weight: 700;
}
.page-back:hover .page-back__arrow { transform: translateX(-2px); }

/* ============================================================
   VERIFY & ACCEPT — live-quote UI
   ============================================================ */
.verify-row { transition: background var(--transition), opacity var(--transition); position: relative; }
.verify-row.is-loading { opacity: .55; pointer-events: none; }
.verify-row.is-loading input { background: var(--gray-100); }
.verify-row.is-flash      { background: #ECFDF5; }
.verify-row .verify-row__cost {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  transition: color var(--transition), background var(--transition);
  display: inline-block;
  padding: .25rem .55rem;
  border-radius: var(--radius-sm);
}
.verify-row.delta-up   .verify-row__cost { color: #92400E; background: #FEF3C7; }
.verify-row.delta-down .verify-row__cost { color: #065F46; background: #D1FAE5; }
.verify-row.delta-same .verify-row__cost { color: var(--gray-700); background: var(--gray-100); }

/* Tiny inline spinner shown next to each row that's recalculating */
.verify-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--gray-300);
  border-top-color: var(--blue-600);
  border-radius: 50%;
  animation: verify-spin .8s linear infinite;
  vertical-align: middle;
  margin-left: .35rem;
}
@keyframes verify-spin { to { transform: rotate(360deg); } }

/* Live summary card at the bottom — animates totals */
.verify-summary {
  margin-top: 1.25rem;
  background: linear-gradient(135deg, #FAFBFC 0%, #EFF6FF 100%);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.verify-summary__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .35rem 0;
}
.verify-summary__lbl  { color: var(--gray-600); font-size: .9rem; }
.verify-summary__val  { font-variant-numeric: tabular-nums; font-weight: 600; }
.verify-summary__total { padding-top: .8rem; border-top: 2px solid var(--gray-300); margin-top: .4rem; }
.verify-summary__total .verify-summary__val {
  font-size: 1.7rem; font-weight: 700; color: var(--gray-900);
  transition: color .25s ease;
}
.verify-summary.is-up      .verify-summary__total .verify-summary__val { color: #92400E; }
.verify-summary.is-down    .verify-summary__total .verify-summary__val { color: #065F46; }
.verify-summary__delta {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .8rem;
  background: var(--gray-100);
  color: var(--gray-700);
  border-radius: 999px;
  font-size: .85rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background .25s ease, color .25s ease;
}
.verify-summary.is-up   .verify-summary__delta { background: #FEF3C7; color: #92400E; }
.verify-summary.is-down .verify-summary__delta { background: #D1FAE5; color: #065F46; }
.verify-summary.is-loading::after {
  /* progress bar slides across while quoting */
  content: '';
  position: absolute; left: 0; top: 0; height: 3px; width: 30%;
  background: linear-gradient(90deg, transparent, var(--blue-600), transparent);
  animation: verify-progress 1.1s ease-in-out infinite;
}
@keyframes verify-progress { 0% { left: -30%; } 100% { left: 100%; } }

/* Submit button disabled state */
.verify-submit:disabled { opacity: .5; cursor: not-allowed; }

/* Compact inputs in the actuals columns so all 4 fit on one row */
.verify-table th { vertical-align: middle; }
.verify-table td input.verify-input {
  width: 100%;
  min-width: 64px;
  padding: .4rem .55rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.verify-table thead tr:first-child th { font-size: .82rem; }
.verify-table thead tr:nth-child(2) th {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: #92400E; padding: .35rem .5rem;
}

/* ============================================================
   DEEP-LINK SECTION FOCUS — fired when a #hash navigates here
   ============================================================ */
.section-focused {
  animation: section-glow 1.8s ease-out;
  scroll-margin-top: 1rem;
}
@keyframes section-glow {
  0%   { box-shadow: 0 0 0 0    rgba(37,99,235,.0); }
  15%  { box-shadow: 0 0 0 6px  rgba(37,99,235,.18); }
  100% { box-shadow: 0 0 0 0    rgba(37,99,235,.0); }
}

/* ============================================================
   SAVED-RECIPIENTS PICKER — booking form
   ============================================================ */
.recip-picker {
  background: linear-gradient(135deg, #F0F9FF 0%, #ECFEFF 100%);
  border: 1px solid #BAE6FD;
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.recip-picker__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap;
}
.recip-picker__title { font-size: .92rem; font-weight: 700; color: #0C4A6E; }
.recip-picker__search {
  flex: 1; min-width: 140px;
  max-width: 240px;
  padding: .35rem .65rem;
  border: 1px solid #BAE6FD;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  background: var(--white);
}
.recip-grid {
  display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.recip-card {
  position: relative;
  text-align: left;
  background: var(--white);
  border: 1px solid #BAE6FD;
  border-radius: var(--radius-sm);
  padding: .65rem .75rem;
  cursor: pointer;
  font: inherit;
  transition: all var(--transition);
}
.recip-card:hover {
  border-color: #0284C7;
  box-shadow: 0 4px 12px rgba(2,132,199,.15);
  transform: translateY(-1px);
}
.recip-card__name { font-weight: 600; font-size: .9rem; color: var(--gray-900); }
.recip-card__meta { font-size: .78rem; color: var(--gray-600); margin-top: .15rem; }
.recip-card__route {
  display: inline-block; margin-top: .35rem;
  font-size: .72rem; color: #0C4A6E;
  background: #E0F2FE; padding: .12rem .5rem; border-radius: 999px;
}
.recip-card__use { font-size: .8rem; color: #075985; font-weight: 600; }
.recip-toggle-all {
  background: none; border: none; padding: 0;
  color: #0369A1; font-size: .82rem; font-weight: 500;
  cursor: pointer; text-decoration: underline;
}
.recip-empty { font-size: .85rem; color: #0C4A6E; padding: .5rem 0; }
.recip-hidden { display: none !important; }

/* ============================================================
   BOOKING WIZARD — vertical stepwise accordion
   ============================================================ */
.booking-intro {
  background: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%);
  border: 1px solid #C7D2FE;
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: .92rem;
  color: #312E81;
}
.booking-intro strong { color: #1E3A8A; }

.booking-flow { display: flex; flex-direction: column; gap: .85rem; padding-bottom: 6rem; }

.booking-step {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
/* Per-step palette — drives the number circle, the current-step header band + glow */
.booking-step[data-color="blue"]   { --step: var(--blue-600); --step-tint: #EFF6FF; --step-glow: rgba(37,99,235,.16); }
.booking-step[data-color="purple"] { --step: #8B5CF6;          --step-tint: #F5F3FF; --step-glow: rgba(139,92,246,.16); }
.booking-step[data-color="amber"]  { --step: #D97706;          --step-tint: #FFFBEB; --step-glow: rgba(217,119,6,.16); }
.booking-step[data-color="green"]  { --step: var(--green-600); --step-tint: #F0FDF4; --step-glow: rgba(22,163,74,.16); }

.booking-step__head {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.15rem;
  cursor: pointer; user-select: none;
  transition: background var(--transition);
}
.booking-step__num {
  flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--gray-100); color: var(--gray-500);
  border: 2px solid var(--gray-200);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.02rem;
  transition: all var(--transition);
}
.booking-step__title { font-weight: 700; font-size: 1.06rem; color: var(--gray-900); letter-spacing: -.01em; }
.booking-step__summary {
  flex: 1; min-width: 0;
  font-size: .88rem; color: var(--gray-600);
  text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.booking-step__edit {
  margin-left: .25rem;
  background: var(--white); border: 1px solid var(--gray-300);
  padding: .35rem .85rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; cursor: pointer; color: var(--gray-700);
  transition: all var(--transition);
}
.booking-step__edit:hover { background: var(--step-tint); border-color: var(--step); color: var(--step); }
.booking-step__body {
  padding: .5rem 1.15rem 1.25rem;
  max-height: 6000px; opacity: 1;
  transition: max-height .3s ease, opacity .2s ease, padding .2s ease;
}
.booking-step--collapsed .booking-step__body {
  max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0;
}

/* ── CURRENT step — the one you're on: tinted header band, glow ring, badge ── */
.booking-step--current {
  border-color: var(--step);
  box-shadow: 0 0 0 3px var(--step-glow), 0 8px 22px rgba(0,0,0,.07);
}
.booking-step--current .booking-step__head { cursor: default; background: var(--step-tint); }
.booking-step--current .booking-step__num {
  background: var(--step); color: var(--white); border-color: var(--step);
  box-shadow: 0 0 0 4px var(--step-glow);
}
.booking-step--current .booking-step__edit { display: none; }
/* a small colored "active" dot before the title so the open section is unmistakable */
.booking-step--current .booking-step__title::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: .5rem; height: .5rem; margin-right: .45rem; border-radius: 50%;
  background: var(--step); box-shadow: 0 0 0 3px var(--step-glow);
}

/* ── DONE step — collapsed, green check, hover to re-open ── */
.booking-step--done { background: var(--gray-50); }
.booking-step--done .booking-step__head:hover { background: #F0FDF4; }
.booking-step--done .booking-step__num { background: var(--green-600); color: var(--white); border-color: var(--green-600); font-size: 0; }
.booking-step--done .booking-step__num::before { content: '✓'; font-size: 1.15rem; }

/* ── LOCKED step — not reachable yet ── */
.booking-step--locked { background: var(--gray-50); opacity: .6; }
.booking-step--locked .booking-step__head { cursor: not-allowed; }
.booking-step--locked .booking-step__num { background: var(--gray-200); color: var(--gray-400); border-color: var(--gray-200); font-size: 0; }
.booking-step--locked .booking-step__num::before { content: '🔒'; font-size: .9rem; }

/* ── FILLED step (edit page) — data already present; collapsed by default with a
   COLORED number (so the customer sees "4 numbered sections"), expands on click and
   lights up in its own colour while open. Mirrors the wizard's waterfall look. ── */
.booking-step--filled .booking-step__num { background: var(--step-tint); color: var(--step); border-color: var(--step); }
.booking-step--filled .booking-step__head:hover { background: var(--step-tint); }
.booking-step--filled:not(.booking-step--collapsed) {
  border-color: var(--step);
  box-shadow: 0 0 0 3px var(--step-glow), 0 8px 22px rgba(0,0,0,.07);
}
.booking-step--filled:not(.booking-step--collapsed) .booking-step__head { background: var(--step-tint); }
.booking-step--filled:not(.booking-step--collapsed) .booking-step__num {
  background: var(--step); color: var(--white); box-shadow: 0 0 0 4px var(--step-glow);
}
.booking-step--filled:not(.booking-step--collapsed) .booking-step__summary,
.booking-step--filled:not(.booking-step--collapsed) .booking-step__edit { display: none; }
.booking-step--filled:not(.booking-step--collapsed) .booking-step__title::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: .5rem; height: .5rem; margin-right: .45rem; border-radius: 50%;
  background: var(--step); box-shadow: 0 0 0 3px var(--step-glow);
}

/* ============================================================
   COMPANY NAME — ONE standard, distinctive treatment platform-wide.
   Whenever a company name appears in running text (Easy Coach Ltd,
   Mololine Services, …) wrap it in <span class="co-name"> so it reads
   as a named PARTY, not plain prose. Use the --platform modifier for
   the platform itself, so "us" vs "them" is instant on money screens.
   Helper: src/util/Html.php → Html::co($name) / Html::co($name, true).
   ============================================================ */
.co-name {
  font-weight: 700;
  color: #3730A3;                 /* deep indigo — the standard for any company */
  letter-spacing: -.005em;
  white-space: nowrap;            /* keep a multi-word name on one line */
}
.co-name--platform { color: #B45309; }   /* warm amber — the platform (us), distinct from partners */

/* ============================================================
   PARCEL CARDS — one card per parcel, rotating soft colors
   so each is visually distinct at a glance
   ============================================================ */
.parcel-stack { display: flex; flex-direction: column; gap: .65rem; margin-top: 1rem; }

.parcel-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-left: 6px solid var(--gray-400);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  scroll-margin-top: 90px;   /* leave room for the topbar when anchored via #parcel-{token} */
  transition: box-shadow var(--transition), transform var(--transition);
}
.parcel-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.05); }

/* Color rotation — 6 distinct soft palettes, indexed via data-color */
.parcel-card[data-color="0"] { background: #EFF6FF; border-left-color: #2563EB; }
.parcel-card[data-color="1"] { background: #ECFDF5; border-left-color: #10B981; }
.parcel-card[data-color="2"] { background: #FFFBEB; border-left-color: #F59E0B; }
.parcel-card[data-color="3"] { background: #FDF2F8; border-left-color: #DB2777; }
.parcel-card[data-color="4"] { background: #F5F3FF; border-left-color: #8B5CF6; }
.parcel-card[data-color="5"] { background: #ECFEFF; border-left-color: #0891B2; }

/* View (compact) state */
.parcel-card__view {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 1rem;
  align-items: center;
}
.parcel-card__num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--white);
  color: var(--gray-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.parcel-card__main { min-width: 0; }
.parcel-card__what { font-weight: 600; color: var(--gray-900); font-size: .95rem; }
.parcel-card__meta { font-size: .8rem; color: var(--gray-600); margin-top: .15rem; font-variant-numeric: tabular-nums; }
.parcel-card__cost {
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--gray-900); white-space: nowrap; font-size: 1rem;
}
.parcel-card__btn {
  background: var(--white); border: 1px solid var(--gray-300);
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .9rem;
  transition: all var(--transition);
}
.parcel-card__btn:hover { background: var(--gray-50); border-color: var(--gray-700); }
.parcel-card__btn--danger:hover { background: #FEE2E2; border-color: #DC2626; color: #DC2626; }
/* Block 34.d: active edit-toggle gets a strong blue ring + filled background
   so the customer sees which editor is open without needing to scroll down. */
.parcel-card__btn--active {
    background: var(--blue-600);
    color: #fff;
    border-color: var(--blue-700);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .22);
}
.parcel-card__btn--active:hover { background: var(--blue-700); color: #fff; }
/* Block 38.b: addon-availability toggle. Used by the customer wizard JS
   when the origin/destination company changes — toggling a class beats
   inline display ONLY if no inline `display` competes. So we move the
   picker's flex layout INTO the class itself; the inline style attribute
   is now empty for the picker, and .addon-hidden's `!important` wins
   cleanly without specificity drama. */
.parcel-addon-card {
    display: flex;
    gap: .5rem;
    padding: .55rem .65rem;
    background: #fff;
    border: 1px solid #BBF7D0;
    border-radius: 6px;
    cursor: pointer;
    align-items: flex-start;
}
.addon-hidden { display: none !important; }

/* Block 38.h — softer route-transition feedback. Removed Block 38.f's
   red border + pulse + shake. The inline "ghost" rows in the addons
   panel are now the only visual signal; total updates reflect the
   removal automatically. See .parcel-addon-ghost styling below. */
.parcel-addon-ghost {
    transition: opacity .2s ease;
}
.parcel-addon-ghost:hover {
    opacity: .85;
}

/* Block 38.g — "+ Add" inline addon row in the parcel-card add-ons panel.
   Hover gives it a clear filled state so customers see it's interactive,
   not just informational. */
.parcel-addon-inline-add:hover {
    background: rgba(16, 185, 129, 0.18) !important;
    border-color: #10B981 !important;
    border-style: solid !important;
}
.parcel-addon-inline-add:active {
    background: rgba(16, 185, 129, 0.28) !important;
}
.parcel-addon-inline-add:focus-visible {
    outline: 2px solid #10B981;
    outline-offset: 1px;
}

/* Block 34.e: inline mini chip that sits next to a price label */
.parcel-card__btn--mini {
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: .85rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Block 34.g: unsaved-change visualisation — appears inside an editor when
   the live-computed price differs from the saved one. Designed so a non-tech
   customer immediately gets "the NEW price is the one waiting for save". */
.unsaved-hint {
    margin-top: .55rem;
    padding: .55rem .8rem;
    border-radius: 6px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 1px solid #F59E0B;
    color: #78350F;
    font-size: .8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .4rem;
    animation: unsaved-slide .25s ease-out;
}
@keyframes unsaved-slide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Pulse the Save button while the editor is dirty so customers know
   they have an action waiting. */
.parcel-card__edit-panel.is-dirty .btn--primary {
    animation: save-pulse 1.5s ease-in-out infinite;
}
@keyframes save-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .6); }
    50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

/* Edit state (expanded) */
.parcel-card__edit {
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px dashed var(--gray-400);
}
.parcel-card__edit-actions {
  display: flex; gap: .5rem; justify-content: flex-end;
  margin-top: .5rem;
}

/* Add-another button — dashed empty placeholder */
.parcel-add-btn {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: 1.1rem 1rem;
  background: transparent;
  border: 2px dashed var(--gray-400);
  border-radius: var(--radius);
  color: var(--gray-700);
  font-weight: 600; font-size: .95rem;
  cursor: pointer;
  transition: all var(--transition);
}
.parcel-add-btn:hover {
  border-color: var(--blue-600);
  color: var(--blue-700);
  background: var(--blue-50);
}
.parcel-add-btn .parcel-add-btn__plus {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gray-200); color: var(--gray-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem;
  transition: all var(--transition);
}
.parcel-add-btn:hover .parcel-add-btn__plus {
  background: var(--blue-600); color: var(--white);
}

/* New-parcel form (expanded from the add button) */
.parcel-add-form {
  background: var(--blue-50);
  border: 2px dashed var(--blue-600);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.parcel-add-form__title {
  font-weight: 700; font-size: .95rem; color: var(--blue-700);
  margin-bottom: .65rem;
}

/* Sticky bottom action bar */
.booking-actionbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--white); border-top: 1px solid var(--gray-300);
  box-shadow: 0 -8px 24px rgba(0,0,0,.06);
  padding: .85rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  z-index: 50;
}
.booking-actionbar__total { font-size: .85rem; color: var(--gray-700); }
.booking-actionbar__total strong { color: var(--gray-900); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.booking-actionbar__hint  { font-size: .82rem; color: var(--gray-500); }
.booking-actionbar .btn--success:disabled,
.booking-actionbar .btn--success[disabled] { opacity: .5; cursor: not-allowed; }

/* Reset-to-default button on the return address field */
.return-addr-row { display: flex; align-items: center; gap: .5rem; }
.return-addr-row input { flex: 1; }
.btn-reset-default {
  font-size: .8rem; padding: .35rem .7rem;
  background: var(--white); color: var(--blue-700);
  border: 1px solid var(--blue-600);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
}
.btn-reset-default:hover { background: var(--blue-50); }

/* Parcels table on detail — themed barcode column */
.parcels-table .parcel-bc {
  font-family: monospace; font-size: .82rem;
  background: var(--gray-100); padding: .2rem .45rem; border-radius: 3px;
  color: var(--gray-800);
}

/* ───────── Live field validation (live-validate.js) ───────── */
.lv-wrap { position: relative; display: block; }
.lv-field { padding-right: 2.1rem; transition: border-color .15s, box-shadow .15s; }
.lv-field.lv-invalid { border-color: #DC2626 !important; box-shadow: 0 0 0 2px rgba(220,38,38,.15); }
.lv-field.lv-valid   { border-color: #16A34A !important; box-shadow: 0 0 0 2px rgba(22,163,74,.18); }
.lv-mark {
  position: absolute; right: .65rem; top: 50%; transform: translateY(-50%);
  color: #16A34A; font-weight: 800; font-size: 1rem; line-height: 1; pointer-events: none;
}
.lv-rules { list-style: none; margin: .35rem 0 0; padding: 0; font-size: .74rem; line-height: 1.5; }
.lv-rules li { display: flex; align-items: center; transition: color .15s; }
.lv-rules li.lv-pending { color: #B91C1C; }
.lv-rules li.lv-ok      { color: #15803D; font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════════
   Block 88 — compact + mobile refresh (clean, Yahoo-Finance-like density).
   Less gap BETWEEN blocks, less padding INSIDE blocks, clear readable type,
   images inline (no long scroll), tight legible mobile layout. Appended last
   so these win over the earlier rules.
   ════════════════════════════════════════════════════════════════════════ */

/* Images never force a long scroll or horizontal overflow. */
img { max-width: 100%; height: auto; }

/* ── Tighter gaps BETWEEN blocks ── */
.panel { margin-bottom: .9rem; }
.grid--2, .grid--3, .grid--4 { gap: .85rem; }
.mb-3 { margin-bottom: 1rem; }

/* ── Less padding INSIDE blocks ── */
.panel__header { padding: .72rem 1rem; }
.panel__body   { padding: 1rem; }
.card          { padding: 1.15rem; }
.stat-card     { padding: .9rem 1.05rem; }

/* Global customer search bar (added to the customer layout). */
.cust-search { display: flex; gap: .5rem; margin-bottom: .9rem; }
.cust-search input[type="search"] { flex: 1 1 auto; min-width: 0; }

/* ── Phones / small tablets: clear + compact (the Yahoo-Finance feel) ── */
@media (max-width: 640px) {
  body { line-height: 1.5; }
  h1 { font-size: 1.35rem; line-height: 1.25; }
  h2 { font-size: 1.1rem; }
  h3 { font-size: 1rem; }
  .container { padding-left: .85rem; padding-right: .85rem; }
  .admin-content { padding: .7rem .65rem; }

  /* blocks: smaller gap + lighter padding so more fits above the fold */
  .panel { margin-bottom: .6rem; border-radius: 10px; }
  .panel__header { padding: .6rem .8rem; }
  .panel__body   { padding: .75rem .8rem; }
  .card { padding: .9rem; }
  .stat-card { padding: .7rem .85rem; }
  .stat-card__value { font-size: 1.25rem; }
  .grid--2, .grid--3, .grid--4 { gap: .55rem; }

  /* topbar: don't crowd the title; company/office wraps to the right */
  .admin-topbar { padding-left: .7rem; padding-right: .7rem; }
  .admin-topbar h1 { font-size: 1.05rem; }

  /* search bar: full-width input, compact button */
  .cust-search .btn { padding-left: .85rem; padding-right: .85rem; }
}

/* ============================================================
   CUSTOMER PORTAL — fancy form fields (scoped to .cust-ui so
   the admin side keeps its plain inputs). Soft rounding, a
   gradient-border focus, italic placeholders, and a subtle
   "filled-in" weight once the field has content.
   ============================================================ */
.cust-ui .form-group label {
  font-weight: 600; font-size: .8rem; letter-spacing: .01em; color: #4B5563;
}
.cust-ui .form-control {
  border: 1.5px solid #E5E7EB; border-radius: 11px;
  padding: .7rem .9rem; font-size: .95rem; background: #fff; color: #111827;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.cust-ui .form-control::placeholder { color: #AEB6C4; font-style: italic; opacity: 1; }
.cust-ui .form-control:hover:not(:focus) { border-color: #C7D2FE; }

/* once a field has content: a touch bolder + a whisper of tint, so filled fields read as "done" */
.cust-ui input.form-control:not(:placeholder-shown),
.cust-ui textarea.form-control:not(:placeholder-shown) { font-weight: 600; color: #0F172A; background: #FBFCFF; }

/* gradient-border focus (blue → violet) via padding-box / border-box layering — works with rounded corners */
.cust-ui input.form-control:focus,
.cust-ui textarea.form-control:focus {
  outline: none; border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(135deg, #2563EB 0%, #7C3AED 100%) border-box;
  box-shadow: 0 0 0 4px rgba(99,102,241,.13), 0 4px 14px rgba(37,99,235,.10);
}
.cust-ui select.form-control:focus { outline: none; border-color: #6366F1; box-shadow: 0 0 0 4px rgba(99,102,241,.13); }

.cust-ui textarea.form-control { border-radius: 12px; line-height: 1.5; }
.cust-ui select.form-control { cursor: pointer; font-weight: 500; }

/* number fields are short — center them, tabular figures, and keep them from stretching wide */
.cust-ui input[type=number].form-control { text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cust-ui .form-row--4 .form-control { padding-left: .55rem; padding-right: .55rem; }
/* a few naturally-short fields don't need full width */
.cust-ui input[type=tel].form-control,
.cust-ui input[name="declared_value"].form-control,
.cust-ui input[name="delivery_miles"].form-control { max-width: 18rem; }

/* ============================================================
   FOOTER — customer / marketing (professional, responsive)
   ============================================================ */
.footer {
  margin-top: 4rem;
  color: rgba(255,255,255,.72);
  background:
    radial-gradient(120% 140% at 12% -10%, rgba(37,99,235,.28) 0%, rgba(37,99,235,0) 45%),
    linear-gradient(180deg, #0F1B33 0%, #0B1424 100%);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--blue-600), #60A5FA 45%, #22D3EE) 1;
  font-size: .9rem;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding: 3rem 1.25rem 2.25rem;
  align-items: start;
}
/* Brand column */
.footer__brand { max-width: 26rem; }
.footer__logo {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--white); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -.01em;
}
.footer__logo:hover { text-decoration: none; opacity: .92; }
.footer__logo svg { width: 30px; height: 30px; flex: 0 0 auto; }
.footer__brand p, .footer__tag {
  margin-top: .85rem; line-height: 1.6; color: rgba(255,255,255,.6); font-size: .88rem;
}
.footer__site {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.1rem; padding: .45rem .85rem;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  color: rgba(255,255,255,.85); font-size: .82rem; font-weight: 500;
  transition: var(--transition);
}
.footer__site:hover { background: rgba(255,255,255,.08); border-color: rgba(96,165,250,.6); color: #fff; text-decoration: none; }
/* Link columns */
.footer__links { display: flex; flex-direction: column; gap: .55rem; }
.footer__links h4 {
  color: #fff; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; margin-bottom: .35rem;
}
.footer__links a {
  color: rgba(255,255,255,.66); font-size: .88rem; width: fit-content;
  transition: var(--transition);
}
.footer__links a:hover { color: #fff; text-decoration: none; transform: translateX(2px); }
/* Get-started mini CTA column */
.footer__cta-note { color: rgba(255,255,255,.55); font-size: .82rem; margin: .35rem 0 .85rem; }
.footer__cta {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.05rem; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--blue-600), var(--blue-700));
  color: #fff; font-weight: 600; font-size: .88rem;
  box-shadow: 0 6px 18px rgba(37,99,235,.35);
  transition: var(--transition);
}
.footer__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37,99,235,.45); text-decoration: none; }
/* Bottom bar */
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); }
.footer__bottom-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding: 1.15rem 1.25rem; margin: 0 auto; max-width: 1200px;
}
.footer__bottom p { color: rgba(255,255,255,.5); font-size: .82rem; }
.footer__legal { display: flex; align-items: center; gap: .6rem; }
.footer__legal a { color: rgba(255,255,255,.6); font-size: .82rem; }
.footer__legal a:hover { color: #fff; text-decoration: none; }
.footer__legal span { color: rgba(255,255,255,.28); }
@media (max-width: 860px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; padding: 2.5rem 1.25rem 2rem; }
  .footer__brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 520px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom-inner { justify-content: center; text-align: center; }
}

/* Small "visit public site" pill in the app top bars */
.navbar__public {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--gray-300); color: var(--gray-500);
  font-size: .95rem; margin-left: .35rem; transition: var(--transition);
}
.navbar__public:hover { background: var(--blue-50); border-color: var(--blue-600); color: var(--blue-600); text-decoration: none; }

/* Admin sidebar "public site" link (dark sidebar) */
.sidebar__public {
  display: block; margin: -.35rem 1rem .5rem; padding: .3rem .5rem;
  font-size: .72rem; color: rgba(255,255,255,.45); border-radius: var(--radius-sm);
  transition: var(--transition);
}
.sidebar__public:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }