/* Экран водителя «Мой день». Сначала телефон в машине, потом всё остальное:
 * одна колонка, крупные кнопки (не меньше 44px — палец, а не курсор), крупный
 * номер точки слева на карточке маршрута. Модуль сам добавляет минимальный
 * инлайн-стиль (см. driver-day.js: injectStyles/STYLE_CSS) на случай, если
 * этот файл не подключат — здесь его расширение и разметка под реальный
 * экран, с переменными оформления CRM (styles.css: --primary и т.д.).
 */

.drvday {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 640px;
}

.drvday-datebar {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.drvday-date-btn {
  flex: 1 1 0;
  min-height: 44px;
  border: 1px solid var(--line, rgba(10, 40, 38, 0.2));
  border-radius: var(--radius, 8px);
  background: var(--surface-strong, #fff);
  color: var(--text, #111827);
  font-weight: 600;
  cursor: pointer;
}

.drvday-date-btn.is-active {
  background: var(--primary, #072c2c);
  border-color: var(--primary, #072c2c);
  color: #fff;
}

.drvday-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 8px 0;
}

.drvday-stat {
  border-radius: var(--radius, 8px);
  background: var(--surface, #edeade);
  padding: 10px 12px;
}

.drvday-stat-title {
  font-size: 12px;
  color: var(--text-muted, #4b5563);
}

.drvday-stat-value {
  font-size: 20px;
  font-weight: 700;
}

.drvday-stat-sub {
  font-size: 11px;
  color: var(--text-muted, #4b5563);
}

.drvday-status-ok .drvday-stat-value { color: var(--success, #16a34a); }
.drvday-status-warn .drvday-stat-value { color: var(--danger, #dc2626); }

.drvday-message {
  min-height: 1.3em;
  font-weight: 700;
  color: var(--danger, #dc2626);
}

.drvday-section {
  margin-top: 14px;
}

.drvday-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.drvday-section-head h3 {
  margin: 0;
}

.drvday-suggestion {
  border: 1px dashed var(--primary, #072c2c);
  border-radius: var(--radius, 8px);
  background: rgba(7, 44, 44, 0.05);
  padding: 10px 12px;
  margin-bottom: 10px;
}

.drvday-suggestion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* Список-превью внутри «Предложить порядок» (renderPointList). list-style:none —
 * своя нумерация уже есть в .drvday-point-index, родная нумерация <ol> поверх
 * неё дала бы «1.1 Адрес». */
.drvday-points {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drvday-point {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
}

.drvday-point-index {
  font-weight: 800;
  color: var(--primary, #072c2c);
  min-width: 1.4em;
}

.drvday-point-carpets {
  color: var(--text-muted, #4b5563);
  font-size: 13px;
}

/* Список — всегда одна колонка: карточки друг под другом, а не сеткой. На
 * телефоне в машине сетка из двух колонок означала бы адрес, обрезанный
 * пополам. */
.drvday-route,
.drvday-pool {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drvday-route-point,
.drvday-pool-item {
  display: flex;
  /* flex-wrap важен и на широком экране, не только на телефоне: .drvday-route-actions
   * ниже нарочно не сжимается (flex: 0 0 auto — кнопки не должны терять
   * ширину), а без wrap и без него флекс-контейнер вместо переноса кнопок
   * на новую строку сжимал бы адрес до одной буквы в строке, лишь бы
   * впихнуть все кнопки в один ряд. */
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line, rgba(10, 40, 38, 0.16));
  border-radius: var(--radius, 8px);
  background: var(--surface-strong, #fff);
}

.drvday-pool-item-priority {
  border-color: var(--danger, #dc2626);
  background: rgba(220, 38, 38, 0.05);
}

/* Номер точки — самое важное на бегу: крупно, слева, не теряется среди текста. */
.drvday-route-index {
  flex: 0 0 auto;
  min-width: 2em;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--primary, #072c2c);
}

/* Отработанная точка не пропадает из списка и не зачёркивается — владелец
 * решил, что водителю нужно видеть пройденное. Вместо этого карточка
 * обесцвечивается: приглушаем и фон, и текст, номер остаётся читаемым, чтобы
 * порядок в списке не "терялся" на фоне свежих адресов. */
.drvday-route-point-done {
  background: var(--surface, #edeade);
  border-color: transparent;
}

.drvday-route-point-done .drvday-route-index {
  color: var(--text-muted, #4b5563);
  opacity: 0.6;
}

.drvday-route-point-done .drvday-route-address,
.drvday-route-point-done .drvday-route-kind,
.drvday-route-point-done .drvday-route-meta,
.drvday-route-point-done .drvday-route-contact,
.drvday-route-point-done .drvday-phone {
  color: var(--text-muted, #4b5563);
  opacity: 0.75;
}

.drvday-route-status {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted, #4b5563);
}

.drvday-route-body,
.drvday-pool-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drvday-route-address,
.drvday-pool-address {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.drvday-route-meta,
.drvday-pool-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 13px;
  color: var(--text-muted, #4b5563);
}

.drvday-route-contact,
.drvday-pool-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 14px;
}

.drvday-kind-delivery { color: #1a5fb3; }
.drvday-priority { color: var(--danger, #dc2626); font-weight: 800; }
.drvday-phone { color: var(--primary, #072c2c); font-weight: 600; }

/* На телефоне карточка становится столбцом: номер+адрес сверху, кнопки —
 * во всю ширину снизу, каждая отдельным рядом пальца. */
@media (max-width: 480px) {
  .drvday-route-point,
  .drvday-pool-item {
    flex-direction: column;
  }

  .drvday-route-actions,
  .drvday-pool-actions {
    width: 100%;
  }

  .drvday-route-actions .drvday-btn,
  .drvday-pool-actions .drvday-btn {
    flex: 1 1 auto;
  }

  .drvday-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

.drvday-route-actions,
.drvday-pool-actions {
  /* flex-basis: 100% — на любой ширине экрана кнопки идут отдельной строкой
   * под адресом, а не сжимают его (см. комментарий у .drvday-route-point). */
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.drvday-btn {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line, rgba(10, 40, 38, 0.2));
  border-radius: var(--radius, 8px);
  background: var(--surface-strong, #fff);
  color: var(--text, #111827);
  font-weight: 600;
  cursor: pointer;
}

.drvday-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.drvday-btn-primary {
  background: var(--primary, #072c2c);
  border-color: var(--primary, #072c2c);
  color: #fff;
}

/* Кнопки точки маршрута (UX-аудит 31.08.2026): «Готово» — главный зелёный
   акцент; «Отказаться» — красная ghost; сортировка — компактные стрелки.
   Раньше все шесть были одинаковыми белыми, «Готово» стояло в 6px от
   «Не получилось», а самой широкой была деструктивная «Отказаться». */
.drvday-btn-done {
  background: #1a7f37;
  border-color: #1a7f37;
  color: #fff;
  font-weight: 700;
  min-height: 44px;
  min-width: 110px;
}

.drvday-btn-danger {
  background: transparent;
  border-color: #d97777;
  color: #b91c1c;
}

.drvday-btn-sort {
  min-width: 40px;
  padding-left: 8px;
  padding-right: 8px;
}

.drvday-route-sort {
  display: inline-flex;
  gap: 4px;
}

/* Телефон и навигатор — кнопки под палец (≥44px), а не строки текста. */
.drvday-phone-btn,
.drvday-nav-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  text-decoration: none;
  font-weight: 600;
  color: var(--primary, #072c2c);
}

/* «К оплате» на доставке — водитель должен видеть сумму до двери клиента. */
.drvday-due {
  margin-top: 4px;
  font-size: 15px;
}

.drvday-due strong {
  color: #b45309;
  font-size: 17px;
}

.drvday-due-paid {
  color: #1a7f37;
  font-weight: 600;
}

.drvday-note {
  color: var(--text-muted, #4b5563);
}