/* ==========================================================================
   components.css
   Reusable UI components: logo, buttons, form fields, cards, feature
   badges, footer. Each block below maps to one partial/include candidate
   — see README for the Razor partial mapping.
   ========================================================================== */

/* ---- Brand logo (partials/_Logo.html) -----------------------------------
   Logo is a single combined logotype image (icon + wordmark drawn as one
   mark) rather than separate icon + CSS text, since that's how the brand
   asset is supplied. Two color variants are provided as transparent PNGs:
     - logo-dark.png  → white "Easy" + green "Load", for use on dark/navy
                        backgrounds (auth panel, dark headers).
     - logo-light.png → navy "Easy" + green "Load", for use on white/light
                        backgrounds (e.g. an in-app top nav on a light page).
   Swap the <img src> per context; both share the same .logo__image sizing. */
.logo {
  display: inline-flex;
  align-items: center;
}

.logo__image {
  height: 32px;
  width: auto;
}

.logo__tagline {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-muted);
  margin-top: var(--space-1);
}

/* ---- Brand panel hero content -------------------------------------------- */
.brand-hero__heading {
  font-size: var(--font-size-2xl);
  line-height: 1.15;
  margin-top: var(--space-5);
  color: var(--color-text-on-dark);
}

.brand-hero__heading .accent {
  color: var(--color-green-600);
  display: block;
}

.brand-hero__subtext {
  margin-top: var(--space-3);
  color: var(--color-text-on-dark-muted);
  font-size: var(--font-size-md);
  max-width: 34ch;
}

.brand-hero__illustration {
  width: 100%;
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
}

/* ---- Feature badge list (partials/_FeatureBadges.html) ------------------ */
.feature-list {
  display: flex;
  gap: var(--space-4);
  margin-top: auto;
  flex-wrap: wrap;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 0;
  min-width: 140px;
}

.feature-item__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  color: var(--color-green-600);
}

.feature-item__icon svg {
  width: 20px;
  height: 20px;
}

.feature-item__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-on-dark);
  line-height: 1.35;
}

/* ---- Card (generic elevated surface) ------------------------------------- */
.card {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7);
}

.card__title {
  font-size: var(--font-size-xl);
  color: var(--color-navy-900);
}

.card__subtitle {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
}

/* ---- Form field (partials/_FormField pattern) ---------------------------- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.form-field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.input-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  height: 52px;
  background-color: var(--color-white);
  transition: border-color var(--transition-fast);
}

.input-group:focus-within {
  border-color: var(--color-green-600);
}

.input-group__icon {
  width: 20px;
  height: 20px;
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

.input-group input {
  height: 100%;
  color: var(--color-text-primary);
}

.input-group input::placeholder {
  color: var(--color-text-placeholder);
}

.input-group__toggle {
  background: none;
  border: none;
  padding: var(--space-1);
  color: var(--color-text-placeholder);
  display: flex;
  align-items: center;
}

.input-group__toggle svg {
  width: 20px;
  height: 20px;
}

.form-row--between {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

.form-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-link);
}

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 52px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  border: var(--border-width) solid transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.btn svg {
  width: 20px;
  height: 20px;
}

.btn-primary {
  background-color: var(--color-green-600);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-green-700);
}

.btn-outline {
  background-color: var(--color-white);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.btn-outline:hover {
  border-color: var(--color-border-strong);
}

.btn-info {
  background-color: var(--color-info);
  color: var(--color-white);
}

.btn-info:hover {
  background-color: var(--color-info-fg);
}

.btn-sm {
  width: auto;
  height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--font-size-sm);
}

.btn[disabled],
.btn.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---- Divider ("or") -------------------------------------------------------- */
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-placeholder);
  font-size: var(--font-size-sm);
  margin-top: var(--space-5);
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

/* ---- Auth footer (partials/_AuthFooter.html) ------------------------------ */
.auth-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-6);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Dashboard shell components (sidebar, top header, page header, stat cards,
   filter bar, data table, pagination, pills). Introduced on the Truck
   Owners page but shared by every internal/admin page.
   ========================================================================== */

/* ---- Sidebar nav (partials/_Sidebar.html) --------------------------------- */

/* Backdrop shown behind the sidebar when it's opened as an off-canvas
   drawer (phone / tablet-portrait — see responsive.css). Hidden and
   unclickable by default; only .is-open makes it visible+clickable, and
   that class only has any visual effect within those same breakpoints
   since .dashboard-shell__sidebar is position:static everywhere else. */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(1, 25, 59, 0.5);
  z-index: 40;
  border: none;
  padding: 0;
}

.sidebar-backdrop.is-open {
  display: block;
}

.sidebar-logo {
  padding: var(--space-2) var(--space-5) var(--space-5);
}

.sidebar-logo img {
  height: 28px;
  width: auto;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-3);
}

.sidebar-nav__section-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-muted);
  opacity: 0.6;
  padding: var(--space-4) var(--space-3) var(--space-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-on-dark-muted);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--color-text-on-dark);
  text-decoration: none;
}

.nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Active state: set via aria-current="page" on the anchor — see README
   "Sidebar active state" note for how this should become dynamic in Razor
   (compare the current route against each item instead of hard-coding). */
.nav-item[aria-current="page"] {
  background-color: var(--color-white);
  color: var(--color-green-600);
}

.nav-item[aria-current="page"]:hover {
  background-color: var(--color-white);
  color: var(--color-green-600);
}

.sidebar-profile {
  margin-top: auto;
  padding: var(--space-4) var(--space-4) var(--space-2);
}

.sidebar-profile__divider {
  border: none;
  border-top: var(--border-width) solid rgba(255, 255, 255, 0.1);
  margin: 0 0 var(--space-4);
}

.sidebar-profile__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  background: none;
  border: none;
  color: inherit;
  text-align: left;
  padding: var(--space-2);
  margin: calc(var(--space-2) * -1);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.sidebar-profile__row:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.sidebar-profile__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-green-600);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.sidebar-profile__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-on-dark);
}

.sidebar-profile__role {
  font-size: var(--font-size-xs);
  color: var(--color-text-on-dark-muted);
}

.sidebar-profile__chevron {
  margin-left: auto;
  width: 16px;
  height: 16px;
  color: var(--color-text-on-dark-muted);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.sidebar-profile__row[aria-expanded="true"] .sidebar-profile__chevron {
  transform: rotate(180deg);
}

/* Account menu — opens above the profile row (the sidebar is pinned to
   the bottom of the viewport, so there's no room to open downward).
   js/main.js's initDropdowns toggles .is-open via data-dropdown-toggle /
   aria-controls; see js/main.js header comment for the markup contract. */
.sidebar-profile__menu-wrap {
  position: relative;
}

.sidebar-profile__menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + var(--space-2));
  background-color: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 40;
}

.sidebar-profile__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sidebar-profile__menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: left;
  text-decoration: none;
}

.sidebar-profile__menu-item:hover {
  background-color: var(--color-bg-page);
}

.sidebar-profile__menu-item svg {
  width: 17px;
  height: 17px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.sidebar-profile__menu-item--danger {
  color: var(--color-danger);
}

.sidebar-profile__menu-item--danger svg {
  color: var(--color-danger);
}

.sidebar-profile__menu-divider {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-2) 0;
}

/* ---- Top header (partials/_TopHeader.html) --------------------------------- */

/* Opens/closes the off-canvas sidebar. Hidden by default (desktop and
   landscape-tablet always show the sidebar inline); responsive.css turns
   it on for phone and portrait-tablet. */
.hamburger-btn {
  display: none;
  flex-shrink: 0;
}

.hamburger-btn svg {
  width: 22px;
  height: 22px;
}
.top-header__search {
  flex: 1;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-page);
}

.top-header__search svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

.top-header__search input {
  color: var(--color-text-primary);
}

.top-header__search input::placeholder {
  color: var(--color-text-placeholder);
}

.top-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.top-header__divider {
  width: var(--border-width);
  height: 28px;
  background-color: var(--color-border);
}

.whatsapp-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.whatsapp-status svg {
  width: 22px;
  height: 22px;
  color: var(--color-green-600);
  flex-shrink: 0;
}

.whatsapp-status__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.whatsapp-status__sub {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-success);
  flex-shrink: 0;
}

.status-dot--info {
  background-color: var(--color-info-fg);
}

.status-dot--neutral {
  background-color: var(--color-neutral-fg);
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  background: none;
  border: none;
}

.icon-btn:hover {
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

.icon-btn__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--radius-pill);
  background-color: var(--color-danger);
  color: var(--color-white);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---- Notification dropdown (partials/_TopHeader.html) ---------------------
   Anchored to the bell .icon-btn; opens downward, right-aligned under the
   button. js/main.js's initDropdowns toggles .is-open the same way as the
   sidebar account menu above — see js/main.js header comment. */
.notif-dropdown {
  position: relative;
}

.notif-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-3));
  right: 0;
  width: 360px;
  max-width: calc(100vw - var(--space-8));
  background-color: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 40;
  overflow: hidden;
}

.notif-dropdown__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.notif-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.notif-dropdown__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.notif-dropdown__mark-read {
  background: none;
  border: none;
  color: var(--color-link);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.notif-dropdown__mark-read:hover {
  text-decoration: underline;
}

.notif-dropdown__list {
  max-height: 360px;
  overflow-y: auto;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  text-decoration: none;
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-item:hover {
  background-color: var(--color-bg-page);
}

.notif-item--unread {
  background-color: var(--color-info-bg);
}

.notif-item--unread:hover {
  background-color: var(--color-info-bg);
  filter: brightness(0.98);
}

.notif-item__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-item__icon svg {
  width: 16px;
  height: 16px;
}

.notif-item__icon--success {
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
}

.notif-item__icon--info {
  background-color: var(--color-info-bg);
  color: var(--color-info-fg);
}

.notif-item__icon--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-fg);
}

.notif-item__body {
  min-width: 0;
}

.notif-item__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}

.notif-item__time {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.notif-dropdown__footer {
  display: block;
  text-align: center;
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-link);
  border-top: var(--border-width) solid var(--color-border);
  text-decoration: none;
}

.notif-dropdown__footer:hover {
  background-color: var(--color-bg-page);
}

/* ---- Language switcher (partials/_TopHeader.html) --------------------------
   Same initDropdowns/.is-open mechanism as the notification dropdown above. */
.lang-dropdown {
  position: relative;
}

.lang-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.lang-dropdown__toggle:hover {
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
}

.lang-dropdown__toggle svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.lang-dropdown__current {
  white-space: nowrap;
}

.lang-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-3));
  right: 0;
  width: 260px;
  max-width: calc(100vw - var(--space-8));
  background-color: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lang-dropdown__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.lang-dropdown__search svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.lang-dropdown__search input {
  border: none;
  outline: none;
  background: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  width: 100%;
}

.lang-dropdown__list {
  max-height: 280px;
  overflow-y: auto;
}

.lang-dropdown__empty {
  padding: var(--space-3);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.lang-dropdown__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown__form {
  margin: 0;
}

.lang-dropdown__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.lang-dropdown__item:hover {
  background-color: var(--color-bg-page);
}

.lang-dropdown__item--active {
  color: var(--color-green-600);
  font-weight: var(--font-weight-semibold);
}

.lang-dropdown__native {
  font-weight: var(--font-weight-medium);
}

.lang-dropdown__name {
  flex: 1;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.lang-dropdown__item--active svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---- Breadcrumb ------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.breadcrumb svg {
  width: 14px;
  height: 14px;
  color: var(--color-text-placeholder);
}

.breadcrumb__current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.page-header__title {
  font-size: var(--font-size-xl);
  color: var(--color-navy-900);
  margin-top: var(--space-1);
}

.page-header__subtitle {
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.btn-icon-leading {
  width: auto;
  padding: 0 var(--space-5);
  white-space: nowrap;
}

.btn-icon-leading.btn-sm {
  padding: 0 var(--space-4);
}

/* ---- Full-width button with its icon pinned to the trailing edge
   (e.g. "Continue →" on Mobile Login) instead of centered next to the
   label — text stays left-of-center, icon sits at the far edge. --------- */
.btn-icon-trailing {
  justify-content: space-between;
  padding: 0 var(--space-5);
}

/* ---- Stat card -------------------------------------------------------------- */
.stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.stat-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card__icon svg {
  width: 24px;
  height: 24px;
}

.stat-card__icon--success {
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
}

.stat-card__icon--info {
  background-color: var(--color-info-bg);
  color: var(--color-info-fg);
}

.stat-card__icon--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-fg);
}

.stat-card__icon--purple {
  background-color: var(--color-purple-bg);
  color: var(--color-purple-fg);
}

.stat-card__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.stat-card__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-top: 2px;
}

.stat-card__caption {
  font-size: var(--font-size-xs);
  color: var(--color-text-placeholder);
  margin-top: 2px;
}

/* ---- Filter bar (search + selects + export) -------------------------------- */
.filter-bar {
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

.filter-search {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.filter-search svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

.filter-search input::placeholder {
  color: var(--color-text-placeholder);
}

.filter-select {
  flex: 0 1 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 44px;
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
}

.filter-select__label {
  font-size: 11px;
  color: var(--color-text-placeholder);
}

.filter-select select {
  appearance: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  padding-right: var(--space-5);
}

.filter-select__chevron {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--color-text-placeholder);
  pointer-events: none;
}

.filter-bar__divider {
  width: var(--border-width);
  height: 28px;
  background-color: var(--color-border);
  margin: 0 var(--space-1);
}

/* ---- Data table --------------------------------------------------------------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px; /* forces .table-scroll to scroll instead of crushing columns */
}

.data-table thead {
  background-color: var(--color-bg-page);
}

.data-table th {
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: none;
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
  border-bottom: var(--border-width) solid var(--color-border);
}

.data-table th[scope="col"] button.sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  color: inherit;
  font: inherit;
}

.sort-toggle svg {
  width: 12px;
  height: 12px;
  color: var(--color-text-placeholder);
}

.data-table td {
  padding: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  border-bottom: var(--border-width) solid var(--color-border);
  white-space: nowrap;
}

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

.data-table tbody tr:hover {
  background-color: var(--color-bg-page);
}

.data-table td.owner-name {
  font-weight: var(--font-weight-semibold);
}

.data-table td.text-muted {
  color: var(--color-text-secondary);
}

.checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  accent-color: var(--color-green-600);
}

/* ---- Pills / badges ----------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.pill svg {
  width: 13px;
  height: 13px;
}

.pill--success {
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
}

.pill--info {
  background-color: var(--color-info-bg);
  color: var(--color-info-fg);
}

.pill--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-fg);
}

.pill--neutral {
  background-color: var(--color-neutral-bg);
  color: var(--color-neutral-fg);
}

.pill--purple {
  background-color: var(--color-purple-bg);
  color: var(--color-purple-fg);
}

.pill--danger {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

.status-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.status-inline svg {
  width: 16px;
  height: 16px;
}

.status-inline--success {
  color: var(--color-success-fg);
}

.status-inline--neutral {
  color: var(--color-text-placeholder);
}

.row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.row-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border);
  background-color: var(--color-white);
  color: var(--color-text-secondary);
}

.row-action-btn:hover {
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
}

.row-action-btn svg {
  width: 16px;
  height: 16px;
}

.row-action-btn--danger {
  color: var(--color-danger);
}

.row-action-btn--danger:hover {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

/* ---- Table footer / pagination ------------------------------------------------ */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  flex-wrap: wrap;
}

.table-footer__summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border);
  background-color: var(--color-white);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.pagination__btn:hover {
  background-color: var(--color-bg-page);
}

.pagination__btn svg {
  width: 16px;
  height: 16px;
}

.pagination__btn[aria-current="page"] {
  border-color: var(--color-green-600);
  color: var(--color-green-600);
  font-weight: var(--font-weight-semibold);
}

.pagination__ellipsis {
  padding: 0 var(--space-1);
  color: var(--color-text-placeholder);
  font-size: var(--font-size-sm);
}

.pagination__btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination__btn[disabled]:hover {
  background-color: var(--color-white);
}

/* ---- Groups pagination + the per-page select on the right of
   .table-footer, so .table-footer keeps exactly 2 space-between children
   (summary | this group) and still wraps cleanly on narrow screens. ------- */
.table-footer__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ---- Compact "N per page" select (e.g. Destinations table) --------------- */
.per-page-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.per-page-select select {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  height: 100%;
  padding: 0 var(--space-6) 0 var(--space-3);
  cursor: pointer;
}

.per-page-select__chevron {
  position: absolute;
  right: var(--space-2);
  width: 14px;
  height: 14px;
  color: var(--color-text-placeholder);
  pointer-events: none;
}

/* ==========================================================================
   Data-entry form components (introduced on the New Truck Owner page,
   shared by every "add/edit a record" form across the app — trucks,
   shippers, loads, etc.).
   ========================================================================== */

/* ---- Form card + section heading ------------------------------------------ */
.form-card {
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.form-card__body {
  padding: var(--space-6);
}

.form-card__title {
  font-size: var(--font-size-md);
  color: var(--color-navy-900);
  margin-bottom: var(--space-5);
}

/* When a card needs a one-line explainer under its title (e.g. "Primary
   driver assigned to this truck."), pull the title's own spacing in tight
   and let the subtitle carry the gap down to the fields instead. */
.form-card__title:has(+ .form-card__subtitle) {
  margin-bottom: var(--space-2);
}

.form-card__subtitle {
  margin-bottom: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-6);
}

/* Destination + frequency pickers with a trailing Add button, all on one
   line on tablet/desktop — the button only takes its own content width
   (auto) so it doesn't stretch to match the two select columns. Falls
   back to the standard single-column .form-grid phone override below
   560px (responsive.css), same as every other form-grid. */
.form-grid--destination-add {
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
}

.form-field__required {
  color: var(--color-danger);
}

.form-field__helper {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ---- Select field (styled like .input-group, but wraps a <select>) -------- */
.select-field {
  position: relative;
}

.select-field select {
  appearance: none;
  padding-right: var(--space-6);
}

.select-field select:invalid {
  color: var(--color-text-placeholder);
}

.select-field__chevron {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-text-placeholder);
  pointer-events: none;
}

/* ---- Phone field (input-group + attached country-code segment) ----------- */
.phone-field {
  padding-right: var(--space-2);
}

.phone-field__divider {
  width: var(--border-width);
  align-self: stretch;
  background-color: var(--color-border);
  flex-shrink: 0;
}

.phone-field__country {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
  padding: 0 var(--space-2);
}

.phone-field__flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
  display: block;
}

.phone-field__country svg {
  width: 14px;
  height: 14px;
  color: var(--color-text-placeholder);
}

/* ---- Form subsection (e.g. "WhatsApp Communication") ----------------------- */
.form-subsection {
  margin-top: var(--space-6);
  background-color: var(--color-bg-page);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.form-subsection__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* ---- Toggle row (icon + label/description + switch) ----------------------- */
.toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.toggle-row__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toggle-row__icon svg {
  width: 22px;
  height: 22px;
}

.toggle-row__text {
  flex: 1;
  min-width: 0;
}

.toggle-row__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.toggle-row__control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.toggle-row__control-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* Toggle switch: a real checkbox, visually hidden but still keyboard/
   screen-reader accessible, styled entirely via its <label>. */
.toggle-switch {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.toggle-switch__track {
  position: absolute;
  inset: 0;
  background-color: var(--color-border-strong);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast);
  pointer-events: none;
}

.toggle-switch__track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-white);
  transition: transform var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.toggle-switch input:checked ~ .toggle-switch__track {
  background-color: var(--color-green-600);
}

.toggle-switch input:checked ~ .toggle-switch__track::before {
  transform: translateX(18px);
}

.toggle-switch input:focus-visible ~ .toggle-switch__track {
  outline: 2px solid var(--color-green-600);
  outline-offset: 2px;
}

/* ---- Form footer action bar ------------------------------------------------ */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
  background-color: var(--color-bg-page);
}

.form-actions .btn {
  width: auto;
  padding: 0 var(--space-6);
}

/* ==========================================================================
   Owner-scoped detail pages (introduced on "Truck Owner Destinations" —
   shared by any page that manages a sub-resource of a specific owner:
   destinations, assigned trucks, etc.).
   ========================================================================== */

/* ---- "About [Owner]" summary strip ---------------------------------------- */
.owner-info-card {
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

.owner-info-card__title {
  font-size: var(--font-size-md);
  color: var(--color-navy-900);
  margin-bottom: var(--space-4);
}

.owner-info-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.owner-info-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.owner-info-strip__item svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

.owner-info-strip__item--whatsapp svg {
  color: var(--color-success-fg);
}

/* ---- In-card section header (e.g. "Destinations" above a table) ---------- */
.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) 0;
}

.section-header__title {
  font-size: var(--font-size-md);
  color: var(--color-navy-900);
}

.section-header__subtitle {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.section-header .btn {
  width: auto;
  padding: 0 var(--space-5);
  white-space: nowrap;
}

/* ==========================================================================
   Dashboard page footer (copyright + version). Sits below the content
   column on internal/admin pages — a lighter-weight sibling of
   .auth-footer, used on every dashboard-shell page.
   ========================================================================== */
.dashboard-footer {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6) 0 var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Truck Status Update (introduced on the "Truck Status Update" quick-action
   page — shared by any "at a glance summary + one-tap update" screen).
   ========================================================================== */

/* ---- Current [Record] Details summary (thumbnail + label/value grid) ----- */
.record-summary {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  flex-wrap: wrap;
}

.record-summary__thumb {
  width: 140px;
  height: 110px;
  object-fit: contain;
  background-color: var(--color-bg-page);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.record-summary__grid {
  flex: 1 1 320px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5) var(--space-6);
}

.record-summary__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.record-summary__value {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
}

/* ---- Current status banner (pill + last-updated meta) -------------------- */
.status-banner {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-page);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.status-banner__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.status-banner__label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
  font-size: var(--font-size-sm);
}

.status-banner__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.status-banner__meta svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.status-banner__divider {
  color: var(--color-border-strong);
}

/* ---- One-tap status tiles -------------------------------------------------
   Markup contract: <label class="status-tile status-tile--{success|info|
   neutral}"><input type="radio" name="..." ...>...</label>. The radio drives
   the selected look (border + corner checkmark) purely in CSS via :has() —
   no JS needed for the visual state, only for wiring the Confirm button. */
.status-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.status-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: calc(var(--border-width) + 1px) solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  background-color: var(--color-white);
  transition: border-color var(--transition-fast);
}

.status-tile input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.status-tile input:focus-visible ~ .status-tile__icon {
  outline: 2px solid var(--color-green-600);
  outline-offset: 2px;
}

.status-tile__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-tile__icon svg {
  width: 24px;
  height: 24px;
}

.status-tile__icon--success {
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
}

.status-tile__icon--info {
  background-color: var(--color-info-bg);
  color: var(--color-info-fg);
}

.status-tile__icon--neutral {
  background-color: var(--color-neutral-bg);
  color: var(--color-neutral-fg);
}

.status-tile__icon--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-fg);
}

.status-tile__icon--purple {
  background-color: var(--color-purple-bg);
  color: var(--color-purple-fg);
}

.status-tile__label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.status-tile--success .status-tile__label {
  color: var(--color-success-fg);
}

.status-tile--info .status-tile__label {
  color: var(--color-info-fg);
}

.status-tile--warning .status-tile__label {
  color: var(--color-warning-fg);
}

.status-tile--purple .status-tile__label {
  color: var(--color-purple-fg);
}

.status-tile__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.status-tile__check {
  display: none;
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--color-text-secondary);
  color: var(--color-white);
  align-items: center;
  justify-content: center;
}

.status-tile__check svg {
  width: 13px;
  height: 13px;
}

.status-tile:has(input:checked) .status-tile__check {
  display: flex;
}

.status-tile--success:has(input:checked) {
  border-color: var(--color-success-fg);
}

.status-tile--success:has(input:checked) .status-tile__check {
  background-color: var(--color-success-fg);
}

.status-tile--info:has(input:checked) {
  border-color: var(--color-info-fg);
}

.status-tile--info:has(input:checked) .status-tile__check {
  background-color: var(--color-info-fg);
}

.status-tile--neutral:has(input:checked) {
  border-color: var(--color-text-secondary);
}

.status-tile--warning:has(input:checked) {
  border-color: var(--color-warning-fg);
}

.status-tile--warning:has(input:checked) .status-tile__check {
  background-color: var(--color-warning-fg);
}

.status-tile--purple:has(input:checked) {
  border-color: var(--color-purple-fg);
}

.status-tile--purple:has(input:checked) .status-tile__check {
  background-color: var(--color-purple-fg);
}

/* ---- Radio variant (e.g. Organisation Type on the New Shipper page) ------
   A plain radio circle top-left instead of a corner checkmark badge, and
   no tile pre-selected by default. Same :has()-driven selected look. */
.status-tiles--4col {
  /* auto-fit instead of a fixed repeat(4, ...): at in-between widths (e.g.
     a narrower desktop window, or a landscape tablet — which is "desktop"
     tier under the locked breakpoint scheme since it's >1080px) a rigid
     4-column grid doesn't leave the icon+text row layout enough room and
     the grid overflows its container. auto-fit collapses to however many
     220px-min columns actually fit, so it never overflows. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.status-tile__radio {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: var(--border-width) solid var(--color-border-strong);
  background-color: var(--color-white);
}

.status-tile--radio {
  /* Reserve room above for the radio dot, then lay the icon + text out
     as a row (unlike the plain status-tile, which stacks everything). */
  padding-top: calc(var(--space-4) + 18px + var(--space-3));
}

.status-tile__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.status-tile__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.status-tile--radio:has(input:checked) .status-tile__radio {
  border-width: 5px;
}

/* Reuses the existing --success/--info/--purple/--warning modifiers (same
   ones that color the outer border + label) to also color the radio dot. */
.status-tile--success:has(input:checked) .status-tile__radio {
  border-color: var(--color-success-fg);
}

.status-tile--info:has(input:checked) .status-tile__radio {
  border-color: var(--color-info-fg);
}

.status-tile--purple:has(input:checked) .status-tile__radio {
  border-color: var(--color-purple-fg);
}

.status-tile--warning:has(input:checked) .status-tile__radio {
  border-color: var(--color-warning-fg);
}

/* ---- Footer row: keyboard-shortcut tip + confirm button ------------------ */
.status-tiles__footer {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.tip-bar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  max-width: 100%;
}

.tip-bar svg {
  width: 16px;
  height: 16px;
  color: var(--color-green-600);
  flex-shrink: 0;
}

.tip-bar kbd {
  font-family: inherit;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* ---- Section label with info tooltip (e.g. "Related Party (i)") ----------- */
.field-label-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.field-label-row .form-field__label {
  margin-bottom: 0;
}

.info-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: var(--color-text-secondary);
  cursor: help;
}

.info-tooltip svg {
  width: 16px;
  height: 16px;
}

/* ---- Checkbox card (e.g. "Related Party" opt-in on New Shipper) ----------
   Markup contract: <label class="checkbox-card"><input type="checkbox">
   <span class="checkbox-card__box"></span><span class="checkbox-card__text">
   <span class="checkbox-card__title">...</span><span
   class="checkbox-card__desc">...</span></span></label>. The checkbox drives
   the tinted/selected look purely in CSS via :has() — same technique as
   .status-tile, no JS needed for the visual state. */
.checkbox-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: calc(var(--border-width) + 1px) solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  background-color: var(--color-white);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.checkbox-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.checkbox-card__box {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border-strong);
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.checkbox-card__box svg {
  width: 12px;
  height: 12px;
  display: none;
}

.checkbox-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.checkbox-card__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.checkbox-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.checkbox-card:has(input:checked) {
  border-color: var(--color-green-600);
  background-color: var(--color-success-bg);
}

.checkbox-card:has(input:checked) .checkbox-card__box {
  border-color: var(--color-green-600);
  background-color: var(--color-green-600);
}

.checkbox-card:has(input:checked) .checkbox-card__box svg {
  display: block;
}

/* ---- Day-of-week multi-select chips (Alternate Days / Weekly frequency) ---- */
.day-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.day-picker__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: var(--space-2) var(--space-3);
  border: calc(var(--border-width) + 1px) solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.day-picker__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.day-picker__option:has(input:checked) {
  border-color: var(--color-green-600);
  background-color: var(--color-green-600);
  color: var(--color-white);
}

/* ---- Icon + pill pairing inside a table cell (e.g. Cold Chain column) ---- */
.table-icon-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.table-icon-pill__icon {
  width: 18px;
  height: 18px;
  color: var(--color-text-secondary);
}

.table-icon-pill__icon--active {
  color: var(--color-info-fg);
}

/* ---- Unit field (input-group + attached unit-select segment, e.g. Weight
   "kg" on New Load) — same visual technique as .phone-field, mirrored to
   the trailing edge instead of the leading edge. ------------------------- */
.unit-field {
  padding-right: var(--space-2);
}

.unit-field__divider {
  width: var(--border-width);
  align-self: stretch;
  background-color: var(--color-border);
  flex-shrink: 0;
}

.unit-field__unit {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.unit-field__unit select {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  height: 100%;
  padding: 0 var(--space-5) 0 var(--space-2);
  cursor: pointer;
}

.unit-field__chevron {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--color-text-placeholder);
  pointer-events: none;
}

/* ---- Plain checkbox field (e.g. "Cold Chain Required" on New Load) -------
   Simpler than .checkbox-card: no border/tint, just a checkbox aligned to
   a bold label + description, sitting directly on the form-card surface. */
.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.checkbox-field input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  accent-color: var(--color-green-600);
  flex-shrink: 0;
  cursor: pointer;
}

.checkbox-field__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.checkbox-field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.checkbox-field__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Candidate Matches (introduced on the "Candidate Matches" load-to-truck
   matching page — shared by any "selected record + ranked candidate list"
   screen, e.g. a future reverse Truck → Candidate Loads view).
   ========================================================================== */

/* ---- Selected-record summary bar: icon-stat row + row + right-aligned meta */
.match-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

.match-summary__title {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
}

.match-summary__title-dot {
  color: var(--color-text-placeholder);
}

.match-summary__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.match-stat {
  /* No border-right divider here on purpose: this row wraps at several
     in-between widths (including "desktop"-tier widths under 1080px per
     the locked breakpoint scheme, e.g. a narrower desktop window or a
     landscape tablet), and a fixed border-right leaves a dangling line on
     whichever item ends up last in its wrapped row. The gap on
     .match-summary__stats already separates items cleanly at any width. */
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.match-stat__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.match-stat__icon svg {
  width: 20px;
  height: 20px;
}

.match-stat__icon--success {
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
}

.match-stat__icon--danger {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

.match-stat__icon--purple {
  background-color: var(--color-purple-bg);
  color: var(--color-purple-fg);
}

.match-stat__icon--info {
  background-color: var(--color-info-bg);
  color: var(--color-info-fg);
}

.match-stat__icon--neutral {
  background-color: var(--color-neutral-bg);
  color: var(--color-neutral-fg);
}

.match-stat__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.match-stat__value {
  margin-top: 2px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
}

.match-summary__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-shrink: 0;
}

.match-summary__meta-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.match-summary__meta-value {
  margin-top: 2px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
}

/* ---- Match group header row (best matches vs. other free trucks) --- */
.data-table tbody tr.match-group-row td {
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-bg-page);
}

.data-table tbody tr.match-group-row:hover {
  background-color: transparent;
}

/* ---- Rank badge (table row #, with a special look for the top matches) --- */
.rank-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  border: var(--border-width) solid var(--color-border-strong);
  flex-shrink: 0;
}

/* Bronze/gold are intentionally hardcoded, not tokenized in variables.css —
   they're one-off medal-tint colors used only here (top-3 leaderboard
   ranks), not part of the general brand/feedback palette. */
.rank-badge--bronze {
  border: none;
  background-color: #d98324;
  color: var(--color-white);
}

.rank-badge--gold {
  width: 34px;
  height: 40px;
  border-radius: 0;
  border: none;
  color: var(--color-white);
  background-color: #f0b429;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 62%, 0 78%);
}

/* ---- Truck & Owner compound table cell ------------------------------------ */
.truck-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.truck-cell__photo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background-color: var(--color-info-bg);
  color: var(--color-info-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.truck-cell__photo svg {
  width: 24px;
  height: 24px;
}

.truck-cell__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.truck-cell__owner,
.truck-cell__phone {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ---- Relevant Destinations compound table cell ---------------------------- */
.destination-cell__city {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.destination-cell__city svg {
  width: 15px;
  height: 15px;
  color: var(--color-success-fg);
  flex-shrink: 0;
}

.destination-cell__distance {
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.destination-cell__pill {
  margin-top: var(--space-2);
}

/* ---- Table footer content: info note + "view all" link (no pagination;
   .table-footer itself is already a space-between flex row) -------------- */
.table-footer__note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.table-footer__note svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

.table-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-link);
}

.table-footer__link svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Load Broadcast (introduced on the "Load Broadcast" WhatsApp-offer wizard
   step — shared by any future step-N-of-M wizard page).
   ========================================================================== */

/* ---- Small uppercase eyebrow label above .match-summary__stats ----------- */
.match-summary__eyebrow {
  flex-basis: 100%;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ---- Two-column wizard layout: panel + panel, stacks on narrow screens --- */
.broadcast-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

/* ---- Numbered panel header (e.g. "1. Proposed Trucks (3 selected)") ------
   .table-card already supplies the white/border/radius panel surface; this
   is just its header row. */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
}

.panel-header__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-navy-900);
}

.panel-header__title svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-placeholder);
  cursor: help;
}

.panel-header__action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

/* ---- Truck selection row (checkbox + rank + truck-cell + status) --------- */
.select-truck-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
  flex-wrap: wrap;
}

.select-truck-row:last-of-type {
  border-bottom: none;
}

.select-truck-row__meta {
  flex: 1 1 170px;
}

.select-truck-row__specs {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.select-truck-row__status {
  flex-shrink: 0;
}

.select-truck-row__caption {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.select-truck-row__whatsapp {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-success-fg);
  flex-shrink: 0;
  margin-left: auto;
}

.select-truck-row__whatsapp svg {
  width: 20px;
  height: 20px;
}

/* ---- Soft info banner (e.g. "3 trucks selected...") ----------------------- */
.info-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--color-success-bg);
  border: var(--border-width) solid #bbead0;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success-fg);
  margin: var(--space-4) var(--space-5) var(--space-5);
}

.info-banner svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---- WhatsApp-style chat bubble (message template preview) --------------- */
.chat-bubble {
  background-color: var(--color-success-bg);
  border: var(--border-width) solid #bbead0;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-5);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-primary);
}

.chat-bubble p {
  margin-bottom: var(--space-2);
}

.chat-bubble__list {
  list-style: none;
  margin: var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.chat-bubble__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.chat-bubble__list li svg {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--color-danger);
}

.chat-bubble__meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.chat-bubble__meta svg {
  width: 16px;
  height: 16px;
  color: var(--color-success-fg);
}

/* ---- Recipient chips + Send Broadcast row ---------------------------------- */
.recipients-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 0 var(--space-5) var(--space-5);
}

.recipients-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background-color: var(--color-white);
}

.chip__icon {
  width: 16px;
  height: 16px;
  color: var(--color-success-fg);
  flex-shrink: 0;
}

.chip__remove {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text-placeholder);
  cursor: pointer;
}

.chip__remove svg {
  width: 14px;
  height: 14px;
}

.recipients-row__send {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

.recipients-row__lock-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.recipients-row__lock-note svg {
  width: 13px;
  height: 13px;
}

/* ==========================================================================
   Match Detail (source: PDF page 14)
   New components: .detail-card (icon+title header on a .table-card panel),
   .detail-list (label/value rows, with or without a leading icon),
   .status-stepper (horizontal Proposed→Accepted→Confirmed→Completed
   progress), .activity-feed (vertical connected timeline), .action-tile
   (large icon+title+desc button) and an amber .info-banner--warning.
   ========================================================================== */

/* ---- Two/three-card responsive row -----------------------------------------
   Uses auto-fit instead of a fixed repeat(3, 1fr) so the row collapses to
   2 and then 1 column on its own as space shrinks, rather than relying on
   tier-based media queries to catch every in-between "desktop"-tier width
   (the same overflow risk documented on .status-tiles--4col). */
.detail-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
  align-items: start;
}

/* ---- Detail card header (green icon + title on a .table-card panel) ------ */
.detail-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
}

.detail-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.detail-card__icon svg {
  width: 18px;
  height: 18px;
}

.detail-card__title {
  font-size: var(--font-size-md);
  color: var(--color-navy-900);
}

.detail-card__body {
  padding: var(--space-5);
}

/* ---- Label/value detail rows (works with or without a leading icon) ------ */
.detail-list__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.detail-list__row:first-child {
  padding-top: 0;
}

.detail-list__row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.detail-list__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.detail-list__label svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

.detail-list__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: right;
}

/* ---- Match Status Timeline: horizontal step progress ---------------------
   Desktop/tablet: circle-over-label columns joined by a connector line.
   Phone gets a dedicated vertical layout, see responsive.css — 4 steps
   with labels and dates don't fit a 390px-wide row. */
.status-stepper {
  display: flex;
  align-items: flex-start;
}

.status-stepper__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 0;
  padding: 0 var(--space-1);
}

.status-stepper__connector {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: var(--color-border);
  z-index: 0;
}

.status-stepper__step--done .status-stepper__connector {
  background-color: var(--color-success-fg);
}

.status-stepper__step:last-child .status-stepper__connector {
  display: none;
}

.status-stepper__circle {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  border: 2px solid var(--color-border);
  color: var(--color-text-placeholder);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.status-stepper__circle svg {
  width: 16px;
  height: 16px;
}

.status-stepper__step--done .status-stepper__circle {
  background-color: var(--color-success-fg);
  border-color: var(--color-success-fg);
  color: var(--color-white);
}

.status-stepper__step--current .status-stepper__circle {
  background-color: var(--color-white);
  border-color: var(--color-success-fg);
  color: var(--color-success-fg);
}

.status-stepper__text {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-2);
}

.status-stepper__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.status-stepper__step:not(.status-stepper__step--done):not(.status-stepper__step--current) .status-stepper__label {
  color: var(--color-text-placeholder);
}

.status-stepper__date {
  margin-top: var(--space-1);
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
}

/* ---- Communication History: vertical connected activity timeline --------- */
.activity-feed__item {
  position: relative;
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
}

.activity-feed__item:last-child {
  padding-bottom: 0;
}

.activity-feed__item::before {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 0;
  left: 15px;
  width: 2px;
  background-color: var(--color-border);
}

.activity-feed__item:last-child::before {
  display: none;
}

.activity-feed__icon {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--color-neutral-bg);
  color: var(--color-neutral-fg);
}

.activity-feed__icon svg {
  width: 16px;
  height: 16px;
}

.activity-feed__icon--success {
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
}

.activity-feed__icon--info {
  background-color: var(--color-info-bg);
  color: var(--color-info-fg);
}

.activity-feed__content {
  flex: 1 1 auto;
  padding-top: var(--space-1);
  min-width: 0;
}

.activity-feed__message {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.activity-feed__message .pill {
  margin-left: var(--space-2);
}

.activity-feed__time {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.activity-feed__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-link);
}

.activity-feed__more svg {
  width: 16px;
  height: 16px;
}

/* ---- Actions: large icon+title+desc tile buttons -------------------------- */
.action-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}

.action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  /* Some action tiles are <a> (Dashboard's Quick Actions link to other
     pages) rather than <button> (status actions that POST) — neutralize
     the global a/a:hover underline+color reset either way. */
  text-decoration: none;
  color: inherit;
}

.action-tile:hover {
  text-decoration: none;
}

.action-tile__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-tile__icon svg {
  width: 20px;
  height: 20px;
}

.action-tile__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.action-tile__desc {
  font-size: var(--font-size-xs);
}

.action-tile--primary {
  background-color: var(--color-green-600);
  border-color: var(--color-green-600);
}

.action-tile--primary .action-tile__title {
  color: var(--color-white);
}

.action-tile--primary .action-tile__desc {
  color: var(--color-text-on-dark-muted);
}

.action-tile--primary .action-tile__icon {
  background-color: rgba(255, 255, 255, 0.16);
  color: var(--color-white);
}

.action-tile--primary:hover {
  background-color: var(--color-green-700);
  border-color: var(--color-green-700);
}

.action-tile--info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
}

.action-tile--info .action-tile__title,
.action-tile--info .action-tile__desc {
  color: var(--color-navy-900);
}

.action-tile--info .action-tile__icon {
  background-color: var(--color-white);
  color: var(--color-info-fg);
}

.action-tile--info:hover {
  border-color: var(--color-info-fg);
}

.action-tile--danger {
  background-color: var(--color-white);
  border-color: var(--color-border);
}

.action-tile--danger .action-tile__title {
  color: var(--color-danger);
}

.action-tile--danger .action-tile__desc {
  color: var(--color-text-secondary);
}

.action-tile--danger .action-tile__icon {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

.action-tile--danger:hover {
  border-color: var(--color-danger);
}

/* Neutral/navigational tile — used for quick-links that aren't a status
   action (e.g. Dashboard's "Quick Actions" row, which links to other
   pages rather than POSTing anything). Reuses the purple accent already
   established for the "No WhatsApp" stat card rather than introducing a
   new brand color. */
.action-tile--purple {
  background-color: var(--color-purple-bg);
  border-color: var(--color-border);
}

.action-tile--purple .action-tile__title,
.action-tile--purple .action-tile__desc {
  color: var(--color-navy-900);
}

.action-tile--purple .action-tile__icon {
  background-color: var(--color-white);
  color: var(--color-purple-fg);
}

.action-tile--purple:hover {
  border-color: var(--color-purple-fg);
}

.action-tile--neutral {
  background-color: var(--color-neutral-bg);
  border-color: var(--color-border);
}

.action-tile--neutral .action-tile__title,
.action-tile--neutral .action-tile__desc {
  color: var(--color-navy-900);
}

.action-tile--neutral .action-tile__icon {
  background-color: var(--color-white);
  color: var(--color-neutral-fg);
}

.action-tile--neutral:hover {
  border-color: var(--color-neutral-fg);
}

/* ---- Amber warning variant of the soft info banner ------------------------ */
.info-banner--warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-fg);
}

/* ---- Top-align the icon in .info-banner when its text wraps to 2+ lines
   (e.g. "About this report" callout) instead of the default vertical
   centering, which only reads well for a single line. ------------------- */
.info-banner--align-start {
  align-items: flex-start;
}

/* ==========================================================================
   Reporting Dashboard (source: PDF page 16)
   New components: .date-range-btn, .page-header__controls (stacked
   date-range + Export Report buttons), .metric-card (icon/value/trend +
   a small static SVG line chart via .metric-chart), .info-list (icon +
   title + description rows) and .report-card__title / __text (plain
   card header + prose, used with the reused .detail-list for the Summary
   card), plus .report-footer-bar.
   ========================================================================== */

/* ---- Stacked date-range + Export Report controls in the page header ------ */
.page-header__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

.date-range-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
  white-space: nowrap;
}

.date-range-btn__icon {
  width: 18px;
  height: 18px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.date-range-btn__chevron {
  width: 16px;
  height: 16px;
  color: var(--color-text-placeholder);
  flex-shrink: 0;
  margin-left: var(--space-2);
}

/* ---- Metric cards row (auto-fit: 3 → 2 → 1 columns, same collapsing
   technique as .detail-card-grid — no fixed-column overflow risk). ------- */
.metric-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
}

.metric-card {
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.metric-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.metric-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.metric-card__icon svg {
  width: 22px;
  height: 22px;
}

.metric-card__icon--success {
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
}

.metric-card__icon--info {
  background-color: var(--color-info-bg);
  color: var(--color-info-fg);
}

.metric-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.metric-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.metric-card__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
  line-height: var(--line-height-tight);
}

.metric-card__value--success {
  color: var(--color-success-fg);
}

.metric-card__value--info {
  color: var(--color-info-fg);
}

.metric-card__value-unit {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-left: var(--space-1);
}

.metric-card__caption {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.metric-card__trend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  flex-shrink: 0;
}

.metric-card__trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.metric-card__trend-badge svg {
  width: 12px;
  height: 12px;
}

.metric-card__trend-badge--up {
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
}

.metric-card__trend-badge--down {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

.metric-card__trend-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-placeholder);
  white-space: nowrap;
}

/* ---- Mini line chart: fixed-height fluid-width SVG, y-axis label column
   on the left, x-axis labels below, per-point value labels positioned by
   percentage so they track the SVG's proportional scaling at any width. -- */
.metric-chart {
  margin-top: var(--space-5);
}

.metric-chart__row {
  display: flex;
  gap: var(--space-2);
}

.metric-chart__y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 34px;
  flex-shrink: 0;
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--color-text-placeholder);
}

.metric-chart__plot {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.metric-chart__svg {
  display: block;
  width: 100%;
  height: 140px;
}

.metric-chart__point-labels span {
  position: absolute;
  transform: translate(-50%, -135%);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.metric-chart__x-axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  padding-left: calc(34px + var(--space-2));
  font-size: var(--font-size-xs);
  color: var(--color-text-placeholder);
}

.metric-chart--success {
  color: var(--color-success-fg);
}

.metric-chart--info {
  color: var(--color-info-fg);
}

/* ---- Plain card header + prose (Summary / About this report cards) ------- */
.report-card__body {
  padding: var(--space-5);
}

.report-card__title {
  font-size: var(--font-size-md);
  color: var(--color-navy-900);
}

.report-card__text {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.report-card__title + .detail-list__row,
.report-card__title + .report-card__text {
  margin-top: var(--space-4);
}

/* ---- "What these metrics mean": icon + title + description rows --------- */
.info-list__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.info-list__item:first-child {
  padding-top: 0;
}

.info-list__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.info-list__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-list__icon svg {
  width: 19px;
  height: 19px;
}

.info-list__icon--success {
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
}

.info-list__icon--info {
  background-color: var(--color-info-bg);
  color: var(--color-info-fg);
}

.info-list__icon--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-fg);
}

/* Rows can be <a> (e.g. Dashboard's "Needs Attention" panel, linking to a
   filtered list page) instead of plain <div> — neutralize the anchor
   reset and add a hover cue since the whole row becomes clickable. */
a.info-list__item {
  text-decoration: none;
  color: inherit;
  margin: 0 calc(var(--space-3) * -1);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

a.info-list__item:hover {
  background-color: var(--color-bg-page);
  text-decoration: none;
}

.info-list__chevron {
  margin-left: auto;
  align-self: center;
  width: 16px;
  height: 16px;
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

.info-list__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
}

.info-list__desc {
  margin-top: 2px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ---- Standalone footer info bar (note left, last-updated + refresh right) */
.report-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.report-footer-bar__note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.report-footer-bar__note svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

.report-footer-bar__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.report-footer-bar__divider {
  width: var(--border-width);
  height: 16px;
  background-color: var(--color-border);
}

.report-footer-bar__refresh {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-link);
}

.report-footer-bar__refresh svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   Mobile Login (source: PDF page 17)
   New page pattern: a standalone mobile-web login flow (no dashboard
   shell, no two-column auth-shell) — a single card capped at a mobile
   width and centered on the page background at any viewport size, the
   way OTP/verification pages typically render even opened in a desktop
   browser. New components: .mobile-shell, .language-switcher,
   .mobile-icon-row (icon circle + title + desc, e.g. "Enter your mobile
   number"), .mobile-tip (the icon + bold title + description tip box,
   reused for all 5 tinted callouts across both screens, including a
   --footer variant that bleeds to the card's own rounded corners),
   .otp-status-banner and .otp-input-row.
   ========================================================================== */
.mobile-shell {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: var(--space-7) var(--space-4);
}

.mobile-shell__inner {
  width: 100%;
  max-width: 440px;
}

.mobile-shell__card {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.mobile-shell__body {
  padding: var(--space-6);
}

.mobile-shell__topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: var(--space-6);
}

.mobile-shell__topbar--back {
  justify-content: space-between;
}

.mobile-shell__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: calc(-1 * var(--space-2));
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.mobile-shell__back svg {
  width: 22px;
  height: 22px;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.language-switcher svg {
  width: 16px;
  height: 16px;
}

.mobile-shell__heading {
  font-size: var(--font-size-xl);
  color: var(--color-navy-900);
  margin-top: var(--space-6);
}

.mobile-shell__subheading {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ---- Icon circle + title + description row (e.g. "Enter your mobile
   number" / "Enter OTP") ----------------------------------------------- */
.mobile-icon-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mobile-icon-row__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-icon-row__icon svg {
  width: 21px;
  height: 21px;
}

.mobile-icon-row__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
}

.mobile-icon-row__desc {
  margin-top: 2px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ---- Tinted icon + title + description tip, reused for every callout
   box on both Mobile Login screens. ------------------------------------- */
.mobile-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background-color: var(--color-success-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-5);
}

.mobile-tip__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-success-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-tip__icon svg {
  width: 16px;
  height: 16px;
}

.mobile-tip__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
}

.mobile-tip__desc {
  margin-top: 2px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Plain 2-line variant with no bold title (e.g. "We use WhatsApp..."). */
.mobile-tip__text {
  align-self: center;
  font-size: var(--font-size-sm);
  color: var(--color-navy-900);
  line-height: var(--line-height-base);
}

/* Full-bleed footer band: cancels .mobile-shell__body's side/bottom
   padding and sits flush against the card's own rounded bottom corners. */
.mobile-tip--footer {
  margin: var(--space-6) calc(-1 * var(--space-6)) calc(-1 * var(--space-6));
  border-radius: 0;
  align-items: center;
}

.mobile-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
}

.mobile-note svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ---- OTP status banner (icon + 2-line text + trailing checkmark) ------ */
.otp-status-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background-color: var(--color-success-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.otp-status-banner__icon {
  width: 28px;
  height: 28px;
  color: var(--color-success-fg);
  flex-shrink: 0;
}

.otp-status-banner__text {
  flex: 1 1 auto;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.otp-status-banner__number {
  margin-top: 2px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
}

.otp-status-banner__check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-success-fg);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.otp-status-banner__check svg {
  width: 14px;
  height: 14px;
}

/* ---- 6-box OTP input ------------------------------------------------------ */
.otp-input-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.otp-input-row input {
  width: 100%;
  aspect-ratio: 1 / 1;
  text-align: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}

.otp-input-row input:focus {
  border-color: var(--color-green-600);
  outline: none;
}

.otp-input-row input.is-filled {
  border-color: var(--color-green-600);
}

.otp-resend {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.otp-resend__timer {
  font-weight: var(--font-weight-bold);
  color: var(--color-success-fg);
}

/* ---- Blue info-banner variant + trailing-action layout (My Trucks) ------- */
.info-banner--info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info-fg);
}

.info-banner--with-action {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.info-banner--with-action .info-banner__text {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ==========================================================================
   My Trucks — mobile app home screen (source: PDF page 18)
   A third, distinct shell (neither the admin .dashboard-shell nor the
   plain centered .mobile-shell card from Mobile Login): a persistent
   mobile app frame with a top bar and a fixed bottom tab bar around a
   scrolling content area. Phone tier: full-bleed, IS the page. Wider
   tiers: rendered as a centered "phone frame" preview (capped width/
   height, rounded corners, shadow, internal scroll) — see responsive.css
   for the phone-tier override back to full-bleed.
   ========================================================================== */
.mobile-app-shell {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: var(--color-bg-page);
  padding: var(--space-6) var(--space-4);
}

.mobile-app-shell__frame {
  position: relative; /* containing block for .mobile-app-drawer below, so
                          the off-canvas menu slides in from and is clipped
                          to the frame's own edge — not the real viewport
                          edge — whenever the frame is the capped "phone
                          frame" preview rather than full-bleed */
  width: 100%;
  max-width: 430px;
  height: min(860px, calc(100vh - 2 * var(--space-6)));
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mobile-app-shell__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Top bar: hamburger + logo + notification bell ----------------------- */
.mobile-app-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
}

.mobile-app-header__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  position: relative;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.mobile-app-header__btn svg {
  width: 22px;
  height: 22px;
}

.mobile-app-header__logo img {
  height: 24px;
  display: block;
}

.mobile-app-header__dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-success-fg);
  border: 2px solid var(--color-white);
}

/* ---- Greeting row: avatar + name + Profile Status badge ------------------ */
.greeting-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
}

.greeting-card__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.greeting-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.greeting-card__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
}

.greeting-card__sub {
  margin-top: 1px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.profile-status-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-success-bg);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.profile-status-badge__label {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--color-text-secondary);
}

.profile-status-badge__value {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-success-fg);
}

.profile-status-badge__value svg {
  width: 14px;
  height: 14px;
}

.profile-status-badge__chevron {
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--color-success-fg);
  flex-shrink: 0;
}

/* ---- Page title + colored stat line --------------------------------------- */
.mobile-page-title {
  padding: var(--space-5) var(--space-5) 0;
}

.mobile-page-title__heading {
  font-size: var(--font-size-lg);
  color: var(--color-navy-900);
}

.mobile-stat-line {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.mobile-stat-line__num {
  font-weight: var(--font-weight-bold);
}

.mobile-stat-line__num--success {
  color: var(--color-success-fg);
}

.mobile-stat-line__num--info {
  color: var(--color-info-fg);
}

.mobile-stat-line__dot {
  margin: 0 var(--space-1);
  color: var(--color-text-placeholder);
}

/* ---- Truck card ------------------------------------------------------------ */
.truck-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

.truck-card {
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.truck-card__top {
  display: flex;
  gap: var(--space-3);
}

/* SIMPLIFICATION: a generic icon swatch stands in for a real truck photo,
   same precedent as .truck-cell__photo on the Candidate Matches table —
   confirmed acceptable for list contexts with multiple trucks. The small
   badge preserves the PDF's reefer/cold-chain visual cue. */
.truck-card__photo {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  background-color: var(--color-neutral-bg);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.truck-card__photo svg {
  width: 36px;
  height: 36px;
}

.truck-card__photo-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-info-bg);
  color: var(--color-info-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-white);
}

.truck-card__photo-badge svg {
  width: 11px;
  height: 11px;
}

.truck-card__info {
  flex: 1 1 auto;
  min-width: 0;
}

.truck-card__row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.truck-card__plate {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
}

.truck-card__menu-btn {
  background: none;
  border: none;
  padding: var(--space-1);
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

.truck-card__menu-btn svg {
  width: 18px;
  height: 18px;
}

.truck-card__meta {
  margin-top: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.truck-card__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

/* ---- "Current Match" footer variant (On Trip trucks) ---------------------- */
.truck-card__match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.truck-card__match-label {
  flex-basis: 100%;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-success-fg);
}

.truck-card__route {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.truck-card__route-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.truck-card__route-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.truck-card__route-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-success-fg);
  flex-shrink: 0;
}

.truck-card__route-pin {
  color: var(--color-danger);
}

.truck-card__match-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.truck-card__match-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.truck-card__match-meta-item svg {
  width: 15px;
  height: 15px;
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

/* ---- Small pill-style link button (View Details / Find Loads) + a
   text-only variant with no background (Retry). ------------------------- */
.mobile-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}

.mobile-link-btn svg {
  width: 16px;
  height: 16px;
}

.mobile-link-btn--success {
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
}

.mobile-link-btn--info {
  background-color: var(--color-info-bg);
  color: var(--color-info-fg);
}

.mobile-link-btn--text {
  background: none;
  padding: 0;
  color: var(--color-warning-fg);
}

/* ---- Plain list row (Match History) --------------------------------------- */
.mobile-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 var(--space-5) var(--space-5);
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.mobile-list-row__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-list-row__icon svg {
  width: 22px;
  height: 22px;
}

.mobile-list-row__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
}

.mobile-list-row__desc {
  margin-top: 2px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.mobile-list-row__chevron {
  width: 20px;
  height: 20px;
  margin-left: auto;
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

/* ---- Fixed bottom tab bar --------------------------------------------------- */
.mobile-app-tabbar {
  flex-shrink: 0;
  display: flex;
  border-top: var(--border-width) solid var(--color-border);
  background-color: var(--color-bg-card);
}

.mobile-app-tabbar__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--space-2) var(--space-1) var(--space-3);
  color: var(--color-text-placeholder);
}

.mobile-app-tabbar__icon-wrap {
  position: relative;
  display: inline-flex;
}

.mobile-app-tabbar__item svg {
  width: 22px;
  height: 22px;
}

.mobile-app-tabbar__item span {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
}

.mobile-app-tabbar__item.is-active {
  color: var(--color-green-600);
}

.mobile-app-tabbar__badge {
  position: absolute;
  top: -5px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-green-600);
  color: var(--color-white);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ==========================================================================
   My Trucks — off-canvas menu drawer (NEW — the hamburger button was a
   static placeholder; wired up to an actual slide-out panel here so it
   isn't a dead click). Reuses .sidebar-backdrop (already generic/
   unconditional) rather than a second backdrop component. Light theme
   (white background, green accents) to match this app's own visual
   language, unlike the dark .dashboard-shell__sidebar it's modeled after
   structurally. Shown at any width where the hamburger itself is shown
   (phone / tablet-portrait / tablet-landscape — see responsive.css); at
   true desktop the hamburger is hidden in favor of .app-topnav so this
   never opens there.
   ========================================================================== */
.mobile-app-drawer {
  /* position:absolute (not fixed) — contained within, and clipped to,
     .mobile-app-shell__frame's own box (see that rule's comment) rather
     than the real viewport, so it stays visually "inside the phone" at
     every breakpoint where the frame is a centered preview rather than
     full-bleed. */
  position: absolute;
  inset: 0 auto 0 0;
  width: min(300px, 85%);
  z-index: 60;
  background-color: var(--color-bg-card);
  transform: translateX(-100%);
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-app-drawer.is-open {
  transform: translateX(0);
}

/* Backdrop behind the drawer — also absolute/frame-scoped rather than
   .sidebar-backdrop's fixed/viewport-scoped, for the same reason. */
.mobile-app-drawer-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  background-color: rgba(1, 25, 59, 0.5);
  z-index: 55;
  border: none;
  padding: 0;
}

.mobile-app-drawer-backdrop.is-open {
  display: block;
}

.mobile-app-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
  flex-shrink: 0;
}

.mobile-app-drawer__header img {
  height: 22px;
  display: block;
}

.mobile-app-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.mobile-app-drawer__close svg {
  width: 20px;
  height: 20px;
}

.mobile-app-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
}

.mobile-app-drawer__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.mobile-app-drawer__item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mobile-app-drawer__item.is-active {
  background-color: var(--color-success-bg);
  color: var(--color-success-fg);
}

.mobile-app-drawer__icon-wrap {
  position: relative;
  display: inline-flex;
}

.mobile-app-drawer__badge {
  position: absolute;
  top: -5px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-green-600);
  color: var(--color-white);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.mobile-app-drawer__divider {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-2) var(--space-4);
}

.mobile-app-drawer__footer {
  margin-top: auto;
  padding: var(--space-4);
}

.mobile-app-drawer__logout {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-danger);
  cursor: pointer;
}

.mobile-app-drawer__logout svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ==========================================================================
   My Trucks — desktop / tablet-landscape web nav (NEW, no PDF reference —
   the source export only shows the phone mockup for this screen). At
   tablet-landscape/desktop widths the app switches from a centered
   "phone frame" preview to an actual full-width web layout: this
   horizontal top nav (same 5 routes as .mobile-app-tabbar) replaces the
   bottom tab bar, and the hamburger button is hidden since there's no
   off-canvas menu to open — see responsive.css for the breakpoint
   overrides that wire this up (same primary-nav content, two renderings).
   ========================================================================== */
.app-topnav {
  display: none; /* shown at tablet-landscape/desktop, see responsive.css */
  align-items: center;
  gap: var(--space-6);
}

.app-topnav__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.app-topnav__item svg {
  width: 18px;
  height: 18px;
}

.app-topnav__item.is-active {
  color: var(--color-green-600);
}

.app-topnav__icon-wrap {
  position: relative;
  display: inline-flex;
}

.app-topnav__badge {
  position: absolute;
  top: -5px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-green-600);
  color: var(--color-white);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ==========================================================================
   My Loads — shipper mobile app home screen (source: PDF page 19, final
   page). Shipper counterpart to My Trucks (page 18) — same
   .mobile-app-shell/.app-topnav/.mobile-app-tabbar/.mobile-app-drawer
   shell and the same responsive rules (see my-trucks.html's Razor
   comment), just with a different content area: a searchable list of
   posted loads instead of trucks. Reuses .greeting-card,
   .profile-status-badge, .mobile-page-title, .mobile-stat-line,
   .pill--success/--info/--neutral and .mobile-link-btn as-is; new
   components below, plus two new .mobile-tip color variants.
   ========================================================================== */

/* ---- Search + Filter row (reuses .filter-search from the admin filter
   bar for the input itself) -------------------------------------------- */
.mobile-search-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) 0;
}

.mobile-search-row .filter-search {
  flex: 1 1 auto;
  background-color: var(--color-bg-card);
}

.mobile-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.mobile-filter-btn svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-secondary);
}

/* ---- Load card list ---------------------------------------------------- */
.load-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

.load-card {
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.load-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.load-card__id-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.load-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-success-fg);
  flex-shrink: 0;
}

.load-card__id {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
}

.load-card__meta-right {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.load-card__posted {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.load-card__body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

.load-card__main {
  flex: 1 1 220px;
  min-width: 0;
}

/* Route: pickup -- dashed line --> drop, horizontal (unlike .truck-card's
   stacked pickup/drop rows — this card's route is the compact headline,
   so it reads left-to-right in one line rather than two). */
.load-card__route {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.load-card__route-point {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 110px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
}

.load-card__route-point--drop {
  justify-content: flex-end;
  text-align: right;
}

.load-card__route-point svg {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  flex-shrink: 0;
}

.load-card__route-point--pickup svg {
  color: var(--color-success-fg);
}

.load-card__route-point--drop svg {
  color: var(--color-danger);
}

.load-card__route-line {
  flex: 1 1 24px;
  min-width: 12px;
  border-top: 1.5px dashed var(--color-border);
}

.load-card__route-arrow {
  width: 13px;
  height: 13px;
  margin-left: -6px;
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

/* 3-column meta row: Weight / Vehicle Type / Size, each icon + stacked
   value+label (unlike .truck-card__meta's plain single line). */
.load-card__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.load-card__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.load-card__meta-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

.load-card__meta-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
}

.load-card__meta-label {
  margin-top: 1px;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Right-hand status column: houses either .load-match-box (Matched) or a
   reused .mobile-tip (Posted/Searching, Completed — see the color
   variants below). */
.load-card__status {
  flex: 1 1 200px;
  max-width: 260px;
}

.load-card__status .mobile-tip {
  margin-top: 0;
}

.load-match-box {
  background-color: var(--color-success-bg);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.load-match-box__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-success-fg);
}

.load-match-box__header svg {
  width: 16px;
  height: 16px;
}

.load-match-box__plate {
  margin-top: var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-900);
}

.load-match-box__driver {
  margin-top: 2px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.load-match-box__phone {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success-fg);
}

.load-match-box__phone svg {
  width: 14px;
  height: 14px;
}

/* Right-aligned action under the status column — used by Completed loads,
   which get no .load-card__footer-bar (no upcoming dates to show). */
.load-card__status-action {
  margin-top: var(--space-3);
  text-align: right;
}

/* Full-width tinted footer bar: Pickup/Delivery dates + View Details
   (Matched/Posted loads only). */
.load-card__footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}

.load-card__footer-bar--success {
  background-color: var(--color-success-bg);
}

.load-card__footer-bar--info {
  background-color: var(--color-info-bg);
}

.load-card__footer-bar__dates {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}

.load-card__footer-bar__dates svg {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* Pickup/Delivery stack as two lines rather than sitting inline with a
   "|" divider — inline wrapped awkwardly at narrow widths (the divider
   could end up orphaned at a line break), and stacking reads cleanly at
   any width without needing a breakpoint override. */
.load-card__footer-bar__lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-size-sm);
  color: var(--color-navy-900);
}

/* ---- .mobile-tip color variants (reused above for the Searching /
   Completed status boxes, instead of a fourth near-duplicate component) - */
.mobile-tip--info {
  background-color: var(--color-info-bg);
}

.mobile-tip--info .mobile-tip__title {
  color: var(--color-info-fg);
}

.mobile-tip--neutral {
  background-color: var(--color-neutral-bg);
}

/* ---- Outline "View Details" variant (Completed loads) ------------------- */
.mobile-link-btn--outline {
  background: none;
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text-primary);
}

/* ---- Interactive status pill (Trucks list, TR-3) -------------------------
   A .pill turned into a real button: one click cycles the truck's status
   and saves immediately (main.js initTruckStatusPill), no page navigation
   and no confirm step. Visuals stay identical to the read-only .pill; this
   only adds the button-reset + affordance/feedback states. */
.status-pill-btn {
  border: none;
  cursor: pointer;
  font: inherit;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.status-pill-btn:hover {
  opacity: 0.85;
}

.status-pill-btn:active {
  transform: scale(0.97);
}

.status-pill-btn:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

.status-pill-btn[disabled] {
  cursor: wait;
  opacity: 0.6;
}

/* ---- Transient toast (AJAX error feedback for the status pill and the
   destination combobox — main.js showToast) ------------------------------- */
.toast-stack {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 360px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  animation: toast-in 0.15s ease-out;
}

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

/* ---- Confirm dialog: "are you sure?" as a real modal, not confirm() -------
   A single shared native <dialog>, lazily created and reused for every
   [data-confirm-submit] form (main.js's initConfirmSubmit / confirmDialog).
   Using <dialog>.showModal() rather than a hand-rolled overlay <div> gets
   backdrop, top-layer stacking, Escape-to-close, and focus containment for
   free from the browser instead of reimplementing them.
   A modal <dialog> normally centers itself via the UA stylesheet's
   `dialog:modal { margin: auto }` — but base.css's own reset
   (`*, *::before, *::after { margin: 0 }`) overrides that, same as it would
   for any other element, so centering has to be taken back explicitly here
   rather than left to the browser default. */
.confirm-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-height: calc(100vh - var(--space-6));
  overflow-y: auto;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0;
  width: min(420px, calc(100vw - var(--space-6)));
}

.confirm-dialog::backdrop {
  background-color: rgb(15 23 42 / 0.5);
}

.confirm-dialog__body {
  padding: var(--space-5);
}

.confirm-dialog__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.confirm-dialog__message {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

.confirm-dialog__actions .btn {
  width: auto;
  height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--font-size-sm);
}

/* ---- Destination combobox (TruckOwnerDestinations/Create, TO-3) ----------
   A text input that filters an already-loaded list of destinations as you
   type; picking one fills the hidden DestinationId. If nothing matches, an
   "Add <query> as a new destination" row posts to
   TruckOwnerDestinationsController.CreateDestinationOption and selects the
   result immediately without a page reload — a shortcut alongside the
   Destinations page's own Create/Edit forms, not a replacement for them.
   Markup/behavior wired by main.js initDestinationCombobox. */
.destination-combobox {
  position: relative;
}

.destination-combobox__list {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 240px;
  overflow-y: auto;
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-1);
  margin: 0;
  list-style: none;
}

.destination-combobox__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}

.destination-combobox__option:hover,
.destination-combobox__option:focus-visible {
  background-color: var(--color-bg-page);
}

.destination-combobox__create {
  color: var(--color-link);
  font-weight: var(--font-weight-semibold);
  border-top: var(--border-width) solid var(--color-border);
  margin-top: var(--space-1);
  padding-top: var(--space-2);
}

.destination-combobox__empty {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ---- Document preview (Create-page file picker + Edit-page current file) --
   Shared by the RC/Insurance slots on Trucks, the identity proof slot on
   Truck Owners, and the licence slot on Drivers — a Create-page picker
   previews the file client-side before it's ever uploaded (main.js
   initDocumentPicker); an Edit-page slot (_DocumentSlot.cshtml) previews the
   file already on file, streamed inline from DocumentsController.Preview. */
.document-preview {
  margin-top: var(--space-3);
}

.document-preview__image-link {
  display: inline-block;
}

.document-preview__image {
  display: block;
  max-width: 320px;
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-page);
}

.document-preview__frame {
  display: block;
  width: 100%;
  max-width: 640px;
  height: 420px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.document-preview__file-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-page);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.document-preview__file-badge svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.document-preview__error {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  margin: 0;
}

/* ---- Remove ("×") control on a just-picked, not-yet-uploaded file ---------
   A native <input type="file"> can't be deselected once something's
   chosen, so this is the only way back to "no file" without reloading the
   page. .document-preview__item wraps the image/PDF preview so the button
   can sit pinned at its corner; the file badge (any other file type) is
   already a flex row, so the button just joins it as a trailing child. */
.document-preview__item {
  position: relative;
  display: inline-block;
}

.document-preview__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.document-preview__remove svg {
  width: 16px;
  height: 16px;
}

.document-preview__item > .document-preview__remove {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
}

.document-preview__remove:hover {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* ---- Checkbox dropdown (e.g. Truck Owners' Preferred Languages) -----------
   A closed dropdown button that opens a checkbox list — unlike a native
   <select multiple> (an always-open listbox), this stays collapsed like any
   other dropdown field and shows what's picked in the toggle's label.
   js/main.js's initCheckboxDropdowns keeps that label in sync; opening/
   closing reuses initDropdowns via data-dropdown-toggle/aria-controls. */
.checkbox-dropdown {
  position: relative;
}

.checkbox-dropdown__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  height: 44px;
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  font: inherit;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.checkbox-dropdown__toggle:focus,
.checkbox-dropdown__toggle[aria-expanded="true"] {
  outline: none;
  border-color: var(--color-green-600);
}

.checkbox-dropdown__toggle-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.checkbox-dropdown__toggle-label--placeholder {
  color: var(--color-text-secondary);
}

.checkbox-dropdown__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: transform var(--transition-fast);
}

.checkbox-dropdown__toggle[aria-expanded="true"] .checkbox-dropdown__chevron {
  transform: rotate(180deg);
}

.checkbox-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background-color: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 40;
}

.checkbox-dropdown__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.checkbox-dropdown__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.checkbox-dropdown__option:hover {
  background-color: var(--color-bg-page);
}

.checkbox-dropdown__option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-green-600);
  flex-shrink: 0;
}

.checkbox-dropdown__empty {
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}