/* Общие стили кабинета (/loads и /settings).
 * Дополнение к design.css. */

body { min-height: 100vh; }
.page { max-width: 720px; margin: 0 auto; padding: var(--space-5) var(--space-4); }

/* HTML-атрибут `hidden` должен побеждать любое `display: inline-block` и т.п.
   из CSS-правил кнопок/links. Без этого override hidden не работает для .btn. */
[hidden] { display: none !important; }

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-4);
}
.brand {
  font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.01em;
  color: var(--text);
}
.brand-mark {
  display: inline-block; width: 24px; height: 24px;
  margin-right: var(--space-2); vertical-align: -7px;
  background: url("/static/favicon.svg") center/contain no-repeat;
}
.brand a { color: var(--text); text-decoration: none; }

/* Header actions: theme toggle + logout (logout показывается только
   авторизованным через router.js). */
.header-actions {
  display: flex; align-items: center; gap: var(--space-2);
}
.header-logout {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 12px; cursor: pointer;
  color: var(--text-muted); font-size: 13px;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.header-logout:hover {
  color: var(--danger); border-color: var(--danger);
}
.header-logout[hidden] { display: none; }
@media (max-width: 480px) {
  .header-logout-text { display: none; }
  .header-logout { padding: 8px; }
}

/* Вкладки Загрузки / Настройки */
.app-tabs {
  display: flex; gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
  /* Sticky на мобиле — чтобы при скролле длинных settings навигация
     оставалась доступной (#11 из аудита). */
}
/* `hidden` HTML-атрибут должен прятать nav даже при display:flex выше. */
.app-tabs[hidden] { display: none; }
@media (max-width: 768px) {
  .app-tabs {
    position: sticky; top: 0; z-index: 10;
    background: var(--bg); padding-top: var(--space-2);
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    padding-left: var(--space-4); padding-right: var(--space-4);
  }
}
.app-tabs a {
  padding: var(--space-3) var(--space-4);
  color: var(--text-muted);
  font-size: 15px; font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.app-tabs a:hover { color: var(--text); text-decoration: none; }
.app-tabs a.active {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
}

h1.page-title {
  font-size: var(--fs-h1); margin: 0 0 var(--space-2);
  display: flex; align-items: baseline; gap: var(--space-3);
}
.page-title .count {
  font-size: var(--fs-body); font-weight: 400; color: var(--text-muted);
}
.page-intro {
  color: var(--text-muted); font-size: 14px; margin-bottom: var(--space-5);
}
.page-intro a { color: var(--text); border-bottom: 1px dotted var(--text-muted); }
.page-intro a:hover { border-bottom-color: var(--text); text-decoration: none; }

/* Страница с таблицей загрузок шире дефолтного .page (720px) — иначе
   шестиколоночная таблица сжимается и маршрут переносится криво. */
body:has(#view .loads-table-wrap) .page,
body:has(#view .loads-head) .page {
  max-width: 1200px;
}

/* ── /loads: header + новых-badge ──────────────────────────────── */
.loads-head {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.new-badge {
  display: inline-block; padding: 2px 10px;
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 600;
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.new-badge[hidden] { display: none; }

/* ── /loads: таблица (брутальная утилита C) ────────────────────── */
.loads-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  overflow-x: auto;
}
.loads-table {
  width: 100%; border-collapse: collapse;
  font-size: 14px; line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.loads-table thead th {
  text-align: left; font-weight: 600;
  font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
  background: var(--surface-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.loads-table tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.loads-table tbody tr:last-child td { border-bottom: none; }
.loads-table tbody tr:hover td { background: var(--surface-2); }

.loads-table .col-date { white-space: nowrap; color: var(--text-muted); }
.loads-table .col-date small {
  display: block; font-size: 11px; margin-top: 1px;
  /* Bump-инфо «повторно вчера 23:24» nowrap раньше распирало col-date
     до 150+px. Разрешаем перенос — col-date становится ~80px. */
  white-space: normal;
}
.loads-table .col-rate { white-space: nowrap; font-weight: 600; }
.loads-table .col-culture { white-space: nowrap; }
.loads-table .rate-val { color: var(--accent-text); }

.load-row.fresh .col-date {
  color: var(--text); font-weight: 600;
  border-left: 3px solid var(--accent);
  padding-left: calc(var(--space-3) - 3px);
}

/* Колонки откуда/куда — разрешаем перенос по запятой, но тянем на макс.
   ширину чтобы сократить высоту строки. */
.loads-table .col-from,
.loads-table .col-to { overflow-wrap: anywhere; }
.loads-table .endpoint-city { color: var(--text); }
.loads-table .endpoint-rest {
  display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px;
}
.route-extras {
  font-size: 12px; margin-top: 2px; overflow-wrap: anywhere;
  color: var(--text-muted);
}

/* Двойная цена (без НДС / с НДС) — основная сверху, альтернатива
   мелким текстом ниже. */
.rate-alt {
  font-size: 12px; margin-top: 2px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Особые условия от диспетчера: маниту, аванс, норма+10 и т.п. */
.route-notes {
  font-size: 12px;
  margin-top: 2px;
  color: var(--accent-text);
  font-style: italic;
  overflow-wrap: anywhere;
}

/* Телефон после reveal — компактный линк. Имя ("Роман") идёт на отдельной
   строке выше номера: phone-link становится inline-block шириной = max(имя,
   номер) ≈ 130px вместо ~180px одной строкой. На viewport 1280 это удерживает
   col-phone в пределах контейнера даже при 3 именованных номерах. */
.col-phone .phone-link {
  display: inline-block;
  color: var(--text); text-decoration: none;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px; border-radius: var(--radius-sm);
  line-height: 1.3;
}
.col-phone .phone-link:hover {
  background: var(--accent-weak); text-decoration: none;
}
.col-phone .phone-link + .phone-link { margin-left: var(--space-2); }
.col-phone .phone-link .phone-name {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}
.col-phone .notif-inline {
  margin-top: 2px; font-size: 11px;
}

/* ── Card-mode (≤1200px) через data-label ──────────────────────
   На любых ширинах ниже full-desktop таблица ~1170px (с distance-
   бейджами и multi-phone reveal) не помещается в .page (max 1200).
   На 1101-1200 таблица overflow'ила ~100px и при click «показать»
   многострочные phone-link'и обрезались справа. Карточки читаются
   от 360 до 1200, full table — от 1201 (контейнер ≥1169 ≥ таблицы). */
@media (max-width: 1200px) {
  .loads-table-wrap { border: none; background: transparent; overflow: visible; }
  .loads-table, .loads-table thead, .loads-table tbody,
  .loads-table tr, .loads-table td {
    display: block; width: 100%;
  }
  .loads-table thead { display: none; }
  .loads-table tbody tr {
    background: var(--surface);
    border: 1px solid var(--border);
    margin-bottom: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
  .loads-table tbody tr:hover td { background: transparent; }
  .loads-table tbody td {
    padding: 2px 0; border: none;
  }
  .loads-table tbody td::before {
    content: attr(data-label);
    display: inline-block; min-width: 70px;
    color: var(--text-muted);
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.04em; margin-right: var(--space-2);
  }
  .loads-table .col-route::before { display: none; }
  .loads-table .col-route { order: -1; margin-bottom: var(--space-1); }
  .load-row.fresh { border-left: 3px solid var(--accent); }
  .load-row.fresh .col-date { border-left: none; padding-left: 0; }
}

/* Скелет загрузки */
.skeleton {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.skeleton-bar {
  height: 14px; background: var(--surface-2);
  border-radius: var(--radius-sm); margin-bottom: var(--space-2);
  animation: pulse 1.5s var(--ease) infinite;
}
.skeleton-bar:nth-child(1) { width: 60%; height: 20px; }
.skeleton-bar:nth-child(2) { width: 80%; }
.skeleton-bar:nth-child(3) { width: 50%; }
@keyframes pulse { 50% { opacity: 0.5; } }

/* Empty state */
.empty {
  text-align: center; padding: var(--space-7) var(--space-4);
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.empty-icon {
  width: 48px; height: 48px; margin: 0 auto var(--space-3);
  color: var(--text-muted);
}
.empty h3 { margin: 0 0 var(--space-2); }
.empty p { color: var(--text-muted); margin: 0 0 var(--space-4); }

.notif-pills { display: inline-flex; gap: var(--space-1); flex-shrink: 0; }

/* Пагинация /loads — кнопка в конце списка «Показать ещё N». */
.more-row {
  display: flex; justify-content: center;
  margin-top: var(--space-4);
}
.more-row .btn { min-width: 200px; }

/* Inline warning у поля (вместо отдельного онбординг-баннера).
   Ставится внутри .field после input'а home_label. */
.field-warn {
  margin-top: 6px; font-size: 13px;
  color: var(--warning); line-height: 1.4;
  display: flex; gap: 6px; align-items: flex-start;
}
.field-warn::before {
  content: "!"; display: inline-block;
  width: 16px; height: 16px; line-height: 16px;
  text-align: center; font-weight: 700;
  background: var(--warning); color: #fff;
  border-radius: 50%; flex-shrink: 0;
}

/* Дополнительная строка под filter-grid: checkbox-свитчи.
   «Показывать просроченные» — низкочастотный, не мозолит глаза. */
.filters-extras {
  margin-top: var(--space-2); font-size: 13px;
}
.checkbox-line {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; flex-wrap: wrap;
}
.checkbox-line input[type="checkbox"] { margin: 0; cursor: pointer; }

/* Consent-блок на landing — компактная форма согласия ФЗ-152. */
.form-consent {
  padding: var(--space-3); font-size: 13px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  margin-bottom: var(--space-3);
}
.form-consent .checkbox-line { font-size: 13px; line-height: 1.4; }
.form-consent a { color: var(--accent-text); border-bottom: 1px dotted; }

/* Пейджер внизу таблицы */
.pager {
  display: flex; justify-content: center; align-items: center;
  gap: var(--space-3); margin-top: var(--space-4);
}
.pager-label {
  font-size: 14px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;  /* «стр N из M» не должно переноситься */
  flex-shrink: 0;
}
.pager-label strong { color: var(--text); }
.pager-input {
  width: 56px;
  padding: 4px 6px;
  border: 1px solid var(--border, #d4d4d8);
  border-radius: 4px;
  background: var(--surface, #ffffff);
  color: var(--text, inherit);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  font: inherit;
}
.pager-input:focus {
  outline: 2px solid var(--accent, #5c7d3f);
  outline-offset: 1px;
}
/* Прячем стрелочки number-input на webkit/firefox — клавиатура и так работает */
.pager-input::-webkit-inner-spin-button,
.pager-input::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
.pager-input { -moz-appearance: textfield; }

/* Preset group (Мои наборы) в filters-actions */
.preset-group {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap; margin-right: var(--space-3);
}
.preset-group label {
  font-size: 13px; color: var(--text-muted); margin: 0;
}
.preset-group select {
  min-width: 180px; font-size: 14px;
}

/* ── /about ────────────────────────────────────────────────────── */
.about { max-width: 640px; margin: 0 auto; }
.about h1 { margin: 0 0 var(--space-2); }
.about section { margin-top: var(--space-4); }
.about section h2 {
  font-size: 16px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
  font-weight: 600; margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-1);
}
.about section p { margin: 0 0 var(--space-2); line-height: 1.6; }
.about-back {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: 13px;
}

/* Landing-секция на / — компактный intro. */
.landing { max-width: 520px; margin: 0 auto; }
.landing .intro h1 {
  font-size: var(--fs-h1); margin: 0 0 var(--space-2);
}
.landing .intro .tagline {
  font-size: 17px; color: var(--text);
  margin: 0 0 var(--space-3);
}
.landing .intro p {
  color: var(--text-muted); font-size: 15px; line-height: 1.5;
  margin: 0 0 var(--space-2);
}
.landing .landing-bullets {
  list-style: none; padding: 0;
  margin: 0 0 var(--space-3);
}
.landing .landing-bullets li {
  padding: 4px 0 4px var(--space-4);
  position: relative; color: var(--text);
  font-size: 15px; line-height: 1.5;
}
.landing .landing-bullets li::before {
  content: "→"; position: absolute; left: 0;
  color: var(--text-muted);
}
.landing .landing-free-note {
  font-size: 13px; color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: var(--space-2); margin-top: var(--space-2);
}
.landing .landing-free-note a {
  color: var(--text); border-bottom: 1px dotted var(--text-muted);
}
.landing .intro strong { color: var(--text); font-weight: 600; }
.landing .form-section {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4); margin-bottom: var(--space-4);
  background: var(--surface);
}
.landing .form-section-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: var(--space-2);
}
.landing .form-section-hint {
  font-size: 13px; color: var(--text-muted); margin-bottom: var(--space-3);
  line-height: 1.5;
}
.landing .submit-row {
  margin-top: var(--space-4); display: flex; flex-direction: column;
  gap: var(--space-2);
}
.landing .site-footer {
  margin-top: var(--space-7); padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* PWA install prompt (фикс #16 из аудита). Показывается когда браузер
   даёт beforeinstallprompt event. На iOS не показывается вообще —
   там «Поделиться → На главный экран» руками. */
.pwa-prompt {
  position: fixed; bottom: var(--space-4); left: var(--space-4);
  right: var(--space-4); max-width: 560px; margin: 0 auto;
  background: var(--accent-weak); border: 1px solid var(--accent);
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: var(--space-3);
  z-index: 20; font-size: 14px;
}
.pwa-prompt[hidden] { display: none; }
.pwa-prompt > span { flex: 1; color: var(--accent-text); }
@media (max-width: 480px) {
  .pwa-prompt { flex-wrap: wrap; }
  .pwa-prompt > span { flex-basis: 100%; }
}

/* Общий setup для секций настроек */
.settings-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.settings-section h2 {
  font-size: var(--fs-h3); margin: 0 0 var(--space-3);
  display: flex; align-items: baseline; justify-content: space-between;
}
.settings-section .hint {
  font-size: 13px; color: var(--text-muted); margin-bottom: var(--space-3);
  line-height: 1.5;
}

.field { margin-bottom: var(--space-3); }
.field:last-child { margin-bottom: 0; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

.save-row {
  position: sticky; bottom: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex; gap: var(--space-3); align-items: center;
  box-shadow: var(--shadow-md);
  margin-top: var(--space-5);
}
.save-row .status {
  flex: 1; font-size: 13px; color: var(--text-muted);
  min-height: 1.3em;
}
.save-row .status.ok { color: var(--success); }
.save-row .status.err { color: var(--danger); }

/* Автокомплит в настройках (тот же что на лендинге, но без window-specific) */
.ac { position: relative; }
.ac-list {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-top: none; max-height: 240px; overflow-y: auto; z-index: 10;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-md);
}
.ac-item {
  padding: 8px 12px; cursor: pointer; font-size: 14px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3);
}
.ac-item:hover, .ac-item.active { background: var(--surface-2); }
.ac-region {
  color: var(--text-muted); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chips {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  margin-top: var(--space-2); min-height: 1.6em;
}
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent-weak); color: var(--accent-text);
  border-radius: var(--radius-sm); padding: 3px 4px 3px 10px;
  font-size: 13px;
}
.chip button {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 6px; border-radius: 3px;
}
.chip button:hover { background: rgba(0,0,0,0.08); }
.slider-row { display: flex; align-items: center; gap: var(--space-3); }
.slider-row input[type=range] { flex: 1; height: 36px; }
.slider-row output {
  font-weight: 600; min-width: 4.5em; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Filters bar на /loads — фильтры всегда открыты. Шапка с заголовком
   и сводкой активных значений, тело с полями. */
.filters-bar {
  background: var(--surface); border: 1px solid var(--border);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.filters-bar-head {
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: baseline; gap: var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.filters-bar-head h2 {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--text);
}
.filters-bar-head .filters-summary {
  font-weight: 400; font-size: 13px; color: var(--text-muted);
}
.filters-body { padding: var(--space-3) var(--space-4); }
/* Десктоп: все 5 фильтров в одну строку (регион, культура, ставка,
   период, сортировка). Регион+культура шире — там chips длинные. */
.filters-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1.4fr 1.4fr 1fr 1fr 1.2fr;
  align-items: start;
}
.filters-grid .field { margin-bottom: 0; }
/* Планшет/мобильный: стек в 2 колонки (<960px) или в одну (<640px). */
@media (max-width: 960px) {
  .filters-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
/* Пустой chips-контейнер не отрисовываем — не сгребается «воздух». */
.filters-body .chips { min-height: 0; margin-top: 6px; }
.filters-body .chips:empty { display: none; }
.filters-body select {
  width: 100%;
}
/* Actions-row только когда в ней что-то видно (кнопки скрыты через
   `hidden` когда фильтры пусты). */
.filters-actions {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.filters-actions .status { font-size: 13px; flex: 1; }
.filters-actions .status.ok { color: var(--success); }
.filters-actions .status.err { color: var(--danger); }

/* Индикатор «фильтры изменены но ещё не применены». Мелкий, рядом с
   кнопкой «Найти». Гаснет при клике на «Найти» / пейджер / Сбросить. */
.filters-dirty {
  font-size: 12px; color: var(--warning);
  font-style: italic;
}
.filters-dirty[hidden] { display: none; }

/* Ссылка-кнопка (inline) — для подсказок «укажи email выше» и подобных */
.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text); border-bottom: 1px dotted var(--text-muted);
  font: inherit;
}
.link-btn:hover { border-bottom-color: var(--text); color: var(--text); }

/* Channels section (каналы уведомлений) */
.channel {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-bottom: var(--space-2); background: var(--surface);
}
.channel-toggle {
  display: flex; align-items: center; gap: var(--space-3);
  flex: 1; cursor: pointer; margin: 0;
}
.channel-toggle input[type="checkbox"] {
  width: 18px; height: 18px; margin: 0;
  accent-color: var(--accent); flex-shrink: 0;
}
.channel-toggle input[type="checkbox"]:disabled {
  cursor: not-allowed; opacity: 0.5;
}
.channel-toggle:has(input:disabled) { cursor: not-allowed; }
.channel-info { flex: 1; }
.channel-name { font-weight: 600; font-size: 15px; }
.channel-state { font-size: 13px; color: var(--text-muted); }
.channel-state.ok { color: var(--success); }
.channel-state.bad { color: var(--danger); }
.channel-state.warn { color: var(--warning); }