/* Transporteur (app mobile v3) — compact-shell.css + app_trp_v3 pages/dashboard.css,
   capturés de lxbx.duckdns.org/v3/trp/ et scopés .v3-body. À charger APRÈS v3-dashboard.css. */

/* Compact shell — topbar-only layout for the transporter phase (no sidebar). Reuses
   base.css's design tokens; only layout rules for the shell + topbar-specific classes
   live here. Shared components (kpi-card, status-badge, etc.) are untouched. */

.v3-compact-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.v3-compact-shell__main {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--v3-space-4);
  min-width: 0;
}

/* LOX-1653: new-version banner, above the first bubble of the main column — kept to a single
   compact row (icon + two-line text truncated to one line each + button) so it never eats much
   vertical space on a small transporter screen. */
.v3-update-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  margin-bottom: var(--v3-space-3);
  border-radius: var(--v3-radius-md);
  background: var(--v3-color-primary-soft);
  border: 1px solid color-mix(in oklch, var(--v3-color-primary) 30%, transparent);
}
.v3-update-banner__icon {
  color: var(--v3-color-primary);
  flex-shrink: 0;
  font-size: 0.875rem;
}
.v3-update-banner__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  font-size: 0.75rem;
  line-height: 1.25;
}
.v3-update-banner__text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v3-update-banner__sub {
  color: var(--v3-color-muted-fg);
  font-size: 0.6875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v3-update-banner__btn {
  flex-shrink: 0;
  height: 1.75rem;
  padding: 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--v3-radius-md);
  border: none;
  cursor: pointer;
  background: var(--v3-color-primary);
  color: var(--v3-color-primary-fg);
}

.v3-compact-topbar {
  height: 4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--v3-space-2);
  padding: 0 var(--v3-space-4);
  border-bottom: 1px solid var(--v3-color-border);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
  background: color-mix(in oklch, var(--v3-color-bg) 80%, transparent);
}

.v3-compact-topbar__title {
  min-width: 0;
  overflow: hidden;
}

.v3-compact-topbar__title-main {
  font-family: var(--v3-font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v3-compact-topbar__title-sub {
  font-size: 0.6875rem;
  color: var(--v3-color-muted-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v3-compact-topbar__spacer {
  flex: 1;
}

@media (max-width: 479px) {
  /* Same reasoning as base.css's sidebar-shell topbar: back-to-legacy link text is the
     first thing squeezed on the narrowest phones — icon-only there is enough. */
  .v3-back-to-legacy-link__text {
    display: none;
  }
}
/* Transporter dashboard — page-layout only. Card/kpi/badge/button styling reused from
   app_main_v3's shared component CSS wherever possible; the hero money card below is the
   one bespoke piece (no equivalent in the vendor phase's uniform KPI grid), matching the
   Lovable mockup's full-width "Argent en possession" card. */

/* Zone-select confirmation feedback (2026-08-08) — a real zone assignment flashes solid green
   for 3s, then settles into a persistent light-green "this round has a zone" state; "No Zone"
   clears back to the plain default look. Transition eases the flash->settle handoff instead of
   an abrupt color jump. */
.v3-trp-zone-select {
  transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease;
}
.v3-trp-zone-select--confirmed {
  background: var(--v3-color-success);
  color: var(--v3-color-success-fg);
  border-color: var(--v3-color-success);
}
.v3-trp-zone-select--assigned {
  background: var(--v3-color-success-soft);
  color: var(--v3-color-success);
  border-color: color-mix(in oklch, var(--v3-color-success) 30%, transparent);
}

.v3-trp-hero-kpi {
  display: block;
  position: relative;
  padding: var(--v3-space-5);
  margin-bottom: var(--v3-space-3);
  border-radius: var(--v3-radius-2xl);
  background: var(--v3-gradient-primary);
  color: var(--v3-color-primary-fg);
  box-shadow: var(--v3-shadow-glow);
  text-decoration: none;
}

.v3-trp-hero-kpi__icon {
  position: absolute;
  top: var(--v3-space-4);
  right: var(--v3-space-4);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--v3-radius-xl);
  display: grid;
  place-items: center;
  background: color-mix(in oklch, white 20%, transparent);
}

.v3-trp-hero-kpi__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  opacity: 0.85;
}

.v3-trp-hero-kpi__value {
  font-family: var(--v3-font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: var(--v3-space-2);
}

.v3-trp-hero-kpi__delivered {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: var(--v3-space-3);
  padding: 0.3rem 0.75rem;
  border-radius: var(--v3-radius-md);
  background: color-mix(in oklch, white 18%, transparent);
  color: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}
.v3-trp-hero-kpi__delivered i {
  font-size: 0.625rem;
}

.v3-trp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--v3-space-3);
  margin-bottom: var(--v3-space-4);
}
/* 2026-08-12 user report (real device, Oppo Reno 7): the right-hand "En cours"/"Anomalies"
   bubbles ran off the edge of the screen. Root cause: the shared .v3-kpi-card component
   (app_main_v3/css/components/kpi-card.css) sets min-width:200px, sized for wider multi-column
   dashboards — in this page's 2-column grid, two 200px-min cards + gap need more width than most
   phone viewports have, so the grid track overflows past the visible screen. Not changed at the
   shared-component level (other dashboards' wider grids may rely on that minimum); scoped to
   just these cards instead, letting the 1fr track shrink to fit. */
.v3-trp-kpi-grid .v3-kpi-card {
  min-width: 0;
}

.v3-trp-package-card {
  padding: var(--v3-space-4);
}

/* Package card action row — matches the Lovable mockup's 6-icon row: phone/SMS/WhatsApp/
   QR-scan/comment are neutral dark circles, navigate is filled/highlighted (it's the one
   action a courier taps constantly, worth making it visually louder than the rest). */
.v3-trp-action-row {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* 2026-08-12 user report: camera-selector buttons ("Caméra 1"/"Caméra 2"…) were built with
   .v3-trp-icon-btn (below), a fixed 2.5rem square meant for a single icon glyph — real text
   content inside that box overflowed/clipped instead of displaying properly. Auto-width pill
   instead, sized to its label like every other text button on this page. */
.v3-trp-camera-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: auto;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: var(--v3-radius-md);
  border: 1px solid var(--v3-color-border);
  background: var(--v3-color-muted-soft);
  color: var(--v3-color-fg);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  white-space: nowrap;
}
.v3-trp-camera-btn--active {
  background: var(--v3-color-primary-soft);
  border-color: color-mix(in oklch, var(--v3-color-primary) 40%, transparent);
  color: var(--v3-color-primary);
}

.v3-trp-icon-btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--v3-radius-md);
  border: 1px solid var(--v3-color-border);
  background: var(--v3-color-muted-soft);
  color: var(--v3-color-fg);
  font-size: 0.875rem;
  cursor: pointer;
  box-shadow: none;
  text-decoration: none;
}

.v3-trp-icon-btn--whatsapp {
  background: color-mix(in oklch, #25d366 20%, transparent);
  border-color: color-mix(in oklch, #25d366 35%, transparent);
  color: #25d366;
}

.v3-trp-icon-btn--navigate {
  background: var(--v3-gradient-primary);
  border-color: transparent;
  color: var(--v3-color-primary-fg);
}

.v3-trp-icon-btn--danger {
  background: var(--v3-color-destructive-soft);
  border-color: color-mix(in oklch, var(--v3-color-destructive) 30%, transparent);
  color: var(--v3-color-destructive);
}

.v3-trp-cta-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.v3-trp-cta-btn {
  flex: 1;
  justify-content: center;
}

/* Tab bar — horizontally-scrollable pill row, icon + label + count per tab. Mobile-first:
   touch-sized targets (44px min-height), snap scrolling, no wrap (5 tabs won't fit on a phone
   screen at once — scroll, don't squeeze/wrap them). */
.v3-trp-tabs {
  display: flex;
  gap: 0.375rem;
  margin-bottom: var(--v3-space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge */
  padding-bottom: 0.25rem;
  margin-left: calc(var(--v3-space-4) * -1);
  margin-right: calc(var(--v3-space-4) * -1);
  padding-left: var(--v3-space-4);
  padding-right: var(--v3-space-4);
}

.v3-trp-tabs::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}

.v3-trp-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  flex-shrink: 0;
  min-height: 2.75rem;
  padding: 0 var(--v3-space-3);
  border-radius: var(--v3-radius-md);
  border: 1px solid var(--v3-color-border);
  background: var(--v3-color-card);
  color: var(--v3-color-muted-fg);
  font-family: var(--v3-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
}

.v3-trp-tab-btn i {
  font-size: 0.75rem;
}

.v3-trp-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--v3-color-muted-soft);
  color: var(--v3-color-muted-fg);
  font-size: 0.6875rem;
  font-weight: 700;
}

.v3-trp-tab-btn--active {
  background: var(--v3-gradient-primary);
  color: var(--v3-color-primary-fg);
  border-color: transparent;
  box-shadow: var(--v3-shadow-glow);
}

.v3-trp-tab-btn--active .v3-trp-tab-count {
  background: color-mix(in oklch, white 25%, transparent);
  color: inherit;
}

/* Anomalies tab keeps a faint red tint even when inactive — it's the one tab that represents
   something needing attention, not just a filter, so it should stand out at rest too. */
.v3-trp-tab-btn--anomaly:not(.v3-trp-tab-btn--active) {
  color: var(--v3-color-destructive);
  border-color: color-mix(in oklch, var(--v3-color-destructive) 30%, transparent);
  background: var(--v3-color-destructive-soft);
}
.v3-trp-tab-btn--anomaly:not(.v3-trp-tab-btn--active) .v3-trp-tab-count {
  background: color-mix(in oklch, var(--v3-color-destructive) 20%, transparent);
  color: var(--v3-color-destructive);
}

/* Hub card pickup/delivery stats — two opposite-direction blocks, deliberately NOT styled as
   matching pills: different icon (arrow up-from vs down-to), different accent color, and each
   its own tinted panel so "which way is this package moving" reads before the label text does. */
.v3-trp-hub-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v3-space-2);
  margin-top: var(--v3-space-3);
}

.v3-trp-hub-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: var(--v3-space-3);
  border-radius: var(--v3-radius-md);
  border: 1px solid var(--v3-color-border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.v3-trp-hub-stat__icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--v3-radius-md);
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  margin-bottom: 0.125rem;
}

.v3-trp-hub-stat__value {
  font-family: var(--v3-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.v3-trp-hub-stat__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--v3-color-muted-fg);
}

.v3-trp-hub-stat--pickup {
  background: var(--v3-color-accent-soft);
  border-color: color-mix(in oklch, var(--v3-color-accent) 30%, transparent);
}
.v3-trp-hub-stat--pickup .v3-trp-hub-stat__icon {
  background: color-mix(in oklch, var(--v3-color-accent) 20%, transparent);
  color: var(--v3-color-accent);
}

.v3-trp-hub-stat--delivery {
  background: var(--v3-color-success-soft);
  border-color: color-mix(in oklch, var(--v3-color-success) 30%, transparent);
}
.v3-trp-hub-stat--delivery .v3-trp-hub-stat__icon {
  background: color-mix(in oklch, var(--v3-color-success) 20%, transparent);
  color: var(--v3-color-success);
}

.v3-trp-hub-stat--return {
  background: var(--v3-color-destructive-soft);
  border-color: color-mix(in oklch, var(--v3-color-destructive) 30%, transparent);
}
.v3-trp-hub-stat--return .v3-trp-hub-stat__icon {
  background: color-mix(in oklch, var(--v3-color-destructive) 20%, transparent);
  color: var(--v3-color-destructive);
}

/* 2026-08-12 user request: nothing to collect/return at this hub — light gray instead of the
   pickup/delivery/return accent color, overriding whichever of the three modifiers above is
   also present (same specificity, comes later in the stylesheet so it wins). */
.v3-trp-hub-stat--empty {
  background: var(--v3-color-muted, #f1f5f9) !important;
  border-color: var(--v3-color-border) !important;
}
.v3-trp-hub-stat--empty .v3-trp-hub-stat__icon {
  background: var(--v3-color-border) !important;
  color: var(--v3-color-muted-fg) !important;
}
.v3-trp-hub-stat--empty .v3-trp-hub-stat__value,
.v3-trp-hub-stat--empty .v3-trp-hub-stat__label {
  color: var(--v3-color-muted-fg);
}

/* Anomaly-report modal — reasons shown as a direct tappable list instead of a collapsed
   native <select> (2026-08-11 user request). */
.v3-trp-comment-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-radius: var(--v3-radius-md);
  border: 1px solid var(--v3-color-border);
  background: transparent;
  color: var(--v3-color-fg);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.v3-trp-comment-option:hover {
  background: var(--v3-color-muted);
}
.v3-trp-comment-option--active {
  border-color: var(--v3-color-primary);
  background: var(--v3-color-primary-soft);
  color: var(--v3-color-primary);
  font-weight: 600;
}