/* ═══════════════════════════════════════════════════════════════
   GruzPotok site — cargo card / list / filters / hero on --gp-* tokens.
   Loaded last in <head>; selectors are prefixed with `html` to win over the
   inline styles without touching markup, data-* hooks or JS flows.
   Mobile-first, 16px gutters, no horizontal scroll.
   ═══════════════════════════════════════════════════════════════ */

@keyframes gp-site-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gp-site-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* ── Mobile cargo card (template #loadMobileCardTemplate) ── */
html .loads-mobile-list {
  display: flex;
  flex-direction: column;
  gap: var(--gp-sp-3);
  padding: 0;
}
html .loads-mobile-list .loads-mobile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gp-sp-3);
  padding: var(--gp-sp-4);
  border-radius: var(--gp-r-lg);
  border: 1px solid var(--gp-border);
  background: var(--gp-surface);
  box-shadow: var(--gp-shadow-1);
  color: var(--gp-text);
  font-family: var(--gp-font);
  cursor: pointer;
  transition: border-color var(--gp-dur-2) var(--gp-ease), box-shadow var(--gp-dur-2) var(--gp-ease), transform var(--gp-dur-2) var(--gp-ease);
  animation: gp-site-fade-up var(--gp-dur-2) var(--gp-ease) both;
}
html .loads-mobile-list .loads-mobile-card:nth-child(2)  { animation-delay: 30ms; }
html .loads-mobile-list .loads-mobile-card:nth-child(3)  { animation-delay: 60ms; }
html .loads-mobile-list .loads-mobile-card:nth-child(4)  { animation-delay: 90ms; }
html .loads-mobile-list .loads-mobile-card:nth-child(5)  { animation-delay: 120ms; }
html .loads-mobile-list .loads-mobile-card:nth-child(6)  { animation-delay: 150ms; }
html .loads-mobile-list .loads-mobile-card:nth-child(n+7) { animation-delay: 180ms; }
html .loads-mobile-list .loads-mobile-card:hover { border-color: var(--gp-border-strong); box-shadow: var(--gp-shadow-2); transform: translateY(-1px); }
html .loads-mobile-list .loads-mobile-card:active { transform: scale(0.995); }
html .loads-mobile-list .loads-mobile-card--fresh { border-color: var(--gp-success); }

html .loads-mobile-card .loads-mobile-card-head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gp-sp-3);
}
html .loads-mobile-card .loads-mobile-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--gp-fs-lg);
  line-height: var(--gp-lh-lg);
  font-weight: 700;
  color: var(--gp-text);
}
html .loads-mobile-card .loads-mobile-route .text-slate-900 { color: var(--gp-text); }
html .loads-mobile-card .loads-mobile-route .text-slate-400 { color: var(--gp-text-muted); }
html .loads-mobile-card .loads-mobile-route-meta {
  margin-top: 2px;
  font-size: var(--gp-fs-xs);
  line-height: var(--gp-lh-xs);
  color: var(--gp-text-muted);
}
html .loads-mobile-card .loads-mobile-price {
  font-size: var(--gp-fs-xl);
  line-height: var(--gp-lh-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gp-text);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html .loads-mobile-card .loads-mobile-rate {
  font-size: var(--gp-fs-sm);
  line-height: var(--gp-lh-sm);
  color: var(--gp-text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
html .loads-mobile-card .loads-mobile-badges { display: flex; flex-wrap: wrap; gap: 6px; }
html .loads-mobile-card .loads-mobile-badges:empty { display: none; }
html .loads-mobile-card .loads-mobile-badges > * {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--gp-r-pill);
  font-size: var(--gp-fs-xs);
  font-weight: 600;
  line-height: 1;
  background: var(--gp-surface-2);
  border: 1px solid var(--gp-border);
  color: var(--gp-text-2);
}
html .loads-mobile-card .loads-mobile-address { font-size: var(--gp-fs-sm); color: var(--gp-text-2); }
html .loads-mobile-card .loads-mobile-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gp-sp-2) var(--gp-sp-3);
  padding: var(--gp-sp-3);
  border-radius: var(--gp-r-md);
  background: var(--gp-surface-2);
}
html .loads-mobile-card .loads-mobile-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0; border: 0; background: transparent; }
html .loads-mobile-card .loads-mobile-stat-label { font-size: var(--gp-fs-xs); line-height: var(--gp-lh-xs); color: var(--gp-text-muted); text-transform: none; letter-spacing: 0; }
html .loads-mobile-card .loads-mobile-stat-value { font-size: var(--gp-fs-sm); line-height: var(--gp-lh-sm); font-weight: 600; color: var(--gp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html .loads-mobile-card .loads-mobile-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--gp-sp-2);
  padding-top: var(--gp-sp-2);
  border-top: 1px solid var(--gp-border);
}
html .loads-mobile-card .loads-mobile-risk > * {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--gp-r-pill);
  font-size: var(--gp-fs-xs);
  font-weight: 600;
  background: var(--gp-surface-2);
  border: 1px solid var(--gp-border);
  color: var(--gp-text-2);
}
html .loads-mobile-card .loads-mobile-actions { display: flex; justify-content: flex-end; gap: var(--gp-sp-2); }
html .loads-mobile-card .loads-mobile-actions button,
html .loads-mobile-card .loads-mobile-actions a {
  min-height: 40px;
  padding: 0 var(--gp-sp-4);
  border-radius: var(--gp-r-md);
  font-size: var(--gp-fs-sm);
  font-weight: 600;
}
@media (max-width: 480px) {
  html .loads-mobile-card .loads-mobile-card-head { flex-direction: row; }
  html .loads-mobile-card .loads-mobile-price, html .loads-mobile-card .loads-mobile-rate { text-align: right; }
  html .loads-mobile-card .loads-mobile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .loads-mobile-card .loads-mobile-footer { flex-direction: row; align-items: center; }
  html .loads-mobile-card .loads-mobile-actions { justify-content: flex-end; }
}

/* ── Skeleton cards (renderLoadsMobileSkeletonCards) ── */
html .loads-mobile-skeleton,
html .loads-mobile-skeleton-stat,
html .list-skeleton-line,
html .skeleton {
  background: linear-gradient(90deg, var(--gp-skeleton) 25%, var(--gp-skeleton-shine) 50%, var(--gp-skeleton) 75%);
  background-size: 200% 100%;
  animation: gp-site-shimmer var(--gp-dur-4) linear infinite;
}

/* ── Desktop table rows ── */
html #loadsTableBody .loads-row { font-family: var(--gp-font); }
html #loadsTableBody .loads-row td { font-size: var(--gp-fs-sm); line-height: var(--gp-lh-sm); color: var(--gp-text-2); }
html #loadsTableBody .loads-row td:first-child { color: var(--gp-text); font-weight: 600; }
html #loadsTableBody .loads-row:hover { background-color: var(--gp-surface-2) !important; box-shadow: inset 0 0 0 1px var(--gp-border-strong) !important; }
html #loadsTableHead th { font-size: var(--gp-fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gp-text-muted); border-bottom: 1px solid var(--gp-border) !important; }
html .loads-row--priority td:first-child { box-shadow: inset 3px 0 0 var(--gp-accent); }
html .loads-row--high-risk td:first-child { box-shadow: inset 3px 0 0 var(--gp-danger); }

/* ── Filters bar ── */
html .loads-filters-card {
  border-radius: var(--gp-r-lg);
  border: 1px solid var(--gp-border);
  background: var(--gp-surface);
  box-shadow: var(--gp-shadow-1);
}
html .loads-filters-card input,
html .loads-filters-card select {
  min-height: 40px;
  border-radius: var(--gp-r-md);
  border-color: var(--gp-border);
  background: var(--gp-surface-2);
  color: var(--gp-text);
  font-size: var(--gp-fs-sm);
  transition: border-color var(--gp-dur-1) var(--gp-ease), box-shadow var(--gp-dur-1) var(--gp-ease);
}
html .loads-filters-card input:focus,
html .loads-filters-card select:focus { border-color: var(--gp-primary); box-shadow: 0 0 0 3px var(--gp-primary-soft); outline: none; }

/* ── Hero (stays dark in both themes by design; tokens for shape, type, motion) ── */
html .gph-hero-v2 {
  border-radius: var(--gp-r-xl);
  font-family: var(--gp-font);
  margin: var(--gp-sp-4) 0 var(--gp-sp-7);
}
html .gph-hero-v2__h1 { letter-spacing: -0.02em; line-height: 1.08; }
html .gph-hero-v2__sub { font-size: var(--gp-fs-md); line-height: var(--gp-lh-md); }
html .gph-hero-v2__cta-primary,
html .gph-hero-v2__cta-secondary {
  min-height: 48px;
  border-radius: var(--gp-r-md);
  font-weight: 600;
  transition: transform var(--gp-dur-1) var(--gp-ease), box-shadow var(--gp-dur-2) var(--gp-ease), background-color var(--gp-dur-1) var(--gp-ease);
}
html .gph-hero-v2__cta-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(255, 91, 31, 0.35); }
html .gph-hero-v2__cta-primary:active, html .gph-hero-v2__cta-secondary:active { transform: scale(0.98); }
html .gph-hero-v2__card { border-radius: var(--gp-r-lg); }
html .gph-hero-v2__search-input { min-height: 44px; border-radius: var(--gp-r-md); font-size: var(--gp-fs-md); }
html .gph-hero-v2__search-btn { min-height: 44px; border-radius: var(--gp-r-md); }
html .gph-hero-v2__examples button { border-radius: var(--gp-r-pill); min-height: 32px; font-size: var(--gp-fs-xs); transition: background-color var(--gp-dur-1) var(--gp-ease), border-color var(--gp-dur-1) var(--gp-ease); }
html .gph-hero-v2__live { border-radius: var(--gp-r-pill); font-size: var(--gp-fs-sm); }

/* ── Mobile ergonomics: 16px gutters, no horizontal page scroll ── */
@media (max-width: 767px) {
  html body.gp-mobile { overflow-x: clip; }
  html body.gp-mobile .gph-hero-v2 { margin-left: 0; margin-right: 0; padding-left: var(--gp-gutter); padding-right: var(--gp-gutter); border-radius: var(--gp-r-lg); }
  html body.gp-mobile .gph-hero-v2__h1 { font-size: clamp(26px, 7.5vw, var(--gp-fs-3xl)); }
  html body.gp-mobile .gph-hero-v2__cta-row { flex-direction: column; }
  html body.gp-mobile .gph-hero-v2__cta-primary, html body.gp-mobile .gph-hero-v2__cta-secondary { width: 100%; justify-content: center; }
  html body.gp-mobile #loadsMobileViewport { padding: 0; }
  html body.gp-mobile .loads-mobile-list .loads-mobile-card { padding: var(--gp-sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  html .loads-mobile-list .loads-mobile-card { animation: none; }
  html .loads-mobile-skeleton, html .list-skeleton-line, html .skeleton { animation: none; }
}

/* ── Mobile shell cards (#gpMobileLoadsCards, rendered by js/mobile-shell.js) ──
   The shell injects its own CSS with !important for the dark theme, so these
   rules use `html body.gp-mobile …` specificity and !important where needed. */
/* One 16px gutter on phones: the card used to sit 53px in (main margin 12 +
   padding 12 + list-shell border/padding 13 + cards padding 16). */
html body.gp-mobile main.container { width: 100%; max-width: 100%; box-sizing: border-box; margin-left: 0; margin-right: 0; padding-left: var(--gp-gutter); padding-right: var(--gp-gutter); }
html body.gp-mobile #page-loads .loads-table-shell { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html body.gp-mobile #page-loads #gpMobileLoadsCards { gap: var(--gp-sp-3); padding: 0; }
html body.gp-mobile #page-loads .gp-mobile-load-card {
  border-radius: var(--gp-r-lg) !important;
  border: 1px solid var(--gp-border) !important;
  background: var(--gp-surface) !important;
  box-shadow: var(--gp-shadow-1) !important;
  color: var(--gp-text) !important;
  padding: var(--gp-sp-4) !important;
  font-family: var(--gp-font);
  animation: gp-site-fade-up var(--gp-dur-2) var(--gp-ease) both;
  transition: border-color var(--gp-dur-2) var(--gp-ease), box-shadow var(--gp-dur-2) var(--gp-ease), transform var(--gp-dur-1) var(--gp-ease);
}
html body.gp-mobile #page-loads .gp-mobile-load-card:nth-child(2) { animation-delay: 30ms; }
html body.gp-mobile #page-loads .gp-mobile-load-card:nth-child(3) { animation-delay: 60ms; }
html body.gp-mobile #page-loads .gp-mobile-load-card:nth-child(4) { animation-delay: 90ms; }
html body.gp-mobile #page-loads .gp-mobile-load-card:nth-child(5) { animation-delay: 120ms; }
html body.gp-mobile #page-loads .gp-mobile-load-card:nth-child(n+6) { animation-delay: 150ms; }
html body.gp-mobile #page-loads .gp-mobile-load-card:active { transform: scale(0.995); box-shadow: var(--gp-shadow-1) !important; }
html body.gp-mobile #page-loads .gp-mobile-load-card__route { color: var(--gp-text) !important; font-size: var(--gp-fs-lg); line-height: var(--gp-lh-lg); font-weight: 700; letter-spacing: -0.01em; }
html body.gp-mobile #page-loads .gp-mobile-load-card__distance { color: var(--gp-text-muted) !important; font-weight: 600; font-variant-numeric: tabular-nums; }
html body.gp-mobile #page-loads .gp-mobile-load-card__price { color: var(--gp-text) !important; font-size: var(--gp-fs-xl); line-height: var(--gp-lh-xl); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
html body.gp-mobile #page-loads .gp-mobile-load-card__rate { color: var(--gp-text-muted) !important; font-size: var(--gp-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
html body.gp-mobile #page-loads .gp-mobile-load-card__meta { color: var(--gp-text-2) !important; font-weight: 600; }
html body.gp-mobile #page-loads .gp-mobile-load-card__meta span { background: var(--gp-surface-2) !important; border-color: var(--gp-border) !important; border-radius: var(--gp-r-pill); padding: 4px 8px; }
html body.gp-mobile #page-loads .gp-mobile-load-card__foot { color: var(--gp-text-muted) !important; font-weight: 500; font-size: var(--gp-fs-xs); }
html body.gp-mobile #page-loads .gp-mobile-load-card__status { color: var(--gp-success) !important; background: var(--gp-success-soft) !important; border-color: transparent !important; font-weight: 600; }
html body.gp-mobile #page-loads .gp-mobile-loads-empty,
html body.gp-mobile #page-loads .gp-mobile-loads-error { border-radius: var(--gp-r-lg) !important; background: var(--gp-surface) !important; border-color: var(--gp-border) !important; color: var(--gp-text-2) !important; }
html body.gp-mobile #page-loads .gp-mobile-loads-error { border-color: var(--gp-danger) !important; }
html body.gp-mobile #page-loads .gp-mobile-loads-error button { background: var(--gp-primary); color: var(--gp-on-primary); border-radius: var(--gp-r-md); min-height: 40px; }
@media (prefers-reduced-motion: reduce) {
  html body.gp-mobile #page-loads .gp-mobile-load-card { animation: none; }
}

/* ── Loads empty states (createLoadsEmptyStateContent) follow the theme ── */
html .loads-empty-state,
html .loads-empty-filtered {
  border-radius: var(--gp-r-lg);
  border: 1px dashed var(--gp-border-strong);
  background: var(--gp-surface);
  color: var(--gp-text-2);
  animation: gp-site-fade-up var(--gp-dur-2) var(--gp-ease) both;
}
html .loads-empty-state .loads-empty-shell { background: transparent; }
html .loads-empty-title { color: var(--gp-text); font-size: var(--gp-fs-xl); line-height: var(--gp-lh-xl); font-weight: 700; }
html .loads-empty-visual { background: var(--gp-surface-2); border-color: var(--gp-border); }

/* ── Desktop table: row integrity and a readable route column ──
   The actions <td> carries Tailwind `flex`, which turns it into a flex box
   instead of a table cell: it stopped stretching to the row height and its
   background drew as a detached block. Restore table-cell and lay buttons out
   inline. Route cities no longer break one word per line. */
@media (min-width: 768px) {
  html #loadsTableBody .loads-row > td { padding: 14px 10px; vertical-align: middle; }
  html #loadsTableBody .loads-row > td.flex { display: table-cell; text-align: right; }
  html #loadsTableBody .loads-row > td.flex > * { display: flex; width: max-content; margin: 0 0 0 auto; white-space: nowrap; }
  html #loadsTableBody .loads-row > td.flex > * + * { margin-top: 6px; }
  html #loadsTableBody .loads-row > td:nth-child(2) { min-width: 150px; }
  html #loadsTableBody .loads-route-primary { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px; }
  html #loadsTableBody .loads-route-city--from, html #loadsTableBody .loads-route-city--to { white-space: nowrap; }
  html #loadsTableBody .loads-route-arrow { color: var(--gp-text-muted); }
  html #loadsTableHead th { padding-left: 10px; padding-right: 10px; white-space: normal; letter-spacing: 0.02em; }
}

/* ── Dark theme: table cells and the active list-source tab ──
   An inline rule paints every cell with linear-gradient(#fff, #fbfdff); as a
   background-image it sits over the dark background-color, so rows stayed
   white with light-grey text in the dark theme. The active source tab carries
   Tailwind `bg-blue-600`, which the generated CSS does not include, leaving
   white text on a transparent pill. Both now come from tokens. */
html #loadsTableBody .loads-row > td { background: var(--gp-surface); }
html #loadsTableBody .loads-row:hover > td { background: var(--gp-surface-2); }
:root[data-theme="dark"] #page-loads button.bg-blue-600.text-white { background: var(--gp-surface-3); color: var(--gp-text) !important; box-shadow: var(--gp-shadow-1); }
/* Dark rows: the cell text was tuned for white rows (measured contrast 1.0–3.7). */
:root[data-theme="dark"] #loadsTableBody .loads-route-city--from { color: var(--gp-text); }
:root[data-theme="dark"] #loadsTableBody .loads-route-city--to { color: var(--gp-link); }
:root[data-theme="dark"] #loadsTableBody .loads-price-main { color: var(--gp-text); }
:root[data-theme="dark"] #loadsTableBody .loads-price-main--accent { color: var(--gp-success); }
:root[data-theme="dark"] #loadsTableBody .loads-price-note { color: var(--gp-text-2); }
:root[data-theme="dark"] #loadsTableBody .text-purple { color: var(--gp-link); }
:root[data-theme="dark"] #loadsTableHead th { background: var(--gp-surface-2); color: var(--gp-text-2); }
:root[data-theme="dark"] #loadsTableHead th .text-gray-500 { color: var(--gp-text-muted); }
/* Dark toolbar above the table (title, source tabs, search): an inline
   white gradient painted it light in both themes. */
:root[data-theme="dark"] #loadsTableWrap .loads-table-toolbar { background: var(--gp-surface); border-color: var(--gp-border); }
:root[data-theme="dark"] #loadsTableWrap .loads-table-toolbar h2 { color: var(--gp-text); }
:root[data-theme="dark"] #loadsTableWrap .loads-table-toolbar .bg-slate-100 { background: var(--gp-primary-soft); color: var(--gp-link); }
:root[data-theme="dark"] #loadsTableWrap .loads-table-toolbar input { background: var(--gp-surface-2); color: var(--gp-text); border-color: var(--gp-border); }
:root[data-theme="dark"] #loadsTableWrap .loads-table-toolbar input::placeholder { color: var(--gp-text-muted); }