/* ============================================================================
   Экран «Мой день» — личный список выездов геодезиста. ТОЛЬКО специфика экрана:
   шрифт, цвета, кнопки, поля, плашки и знаки берутся из styles/base.css, он же
   подключается первым. Фундамент здесь НЕ дублируется и не правится — он общий
   с «Загрузкой КИ» и лежит в обоих приложениях байт-в-байт.

   ЧЕМ ЭТОТ ЭКРАН ОТЛИЧАЕТСЯ ОТ ОСТАЛЬНЫХ. Это телефон в поле, а не суженная
   таблица диспетчера: одна колонка, крупные цели под палец, читаемость на
   солнце, минимум нажатий до телефона контакта и до адреса.

   Отсюда единственная вольность — ПЕРЕОПРЕДЕЛЕНИЕ РАЗМЕРНЫХ ТОКЕНОВ на самом
   экране (.myday-page ниже). Значения фундамента отмерены под мышь и плотный
   экран: 13 px текста и 32 px высота контрола на вытянутой руке в солнечный
   день не читаются и не попадаются пальцем. Переопределены ТОЛЬКО кегли и
   высоты; палитра, форма, тени и правила компонентов остаются общими, поэтому
   кнопка, плашка и метка тут — те же самые, просто крупнее. Своих копий
   .btn/.badge/.note в этом файле нет намеренно.

   ⚠️ ОТКУДА ЭТОТ ФАЙЛ. Он взят копией из bku_calendar/public/styles/my-day.css:
   экран «Мой день» там уже сделан, покрыт тестами и принят — второй такой же
   выдумывать незачем. Парным (байт-в-байт обязательным) файлом он, в отличие
   от base.css и js/icons.js, НЕ является: правки ниже живут только здесь.

   ЧТО ДОБАВЛЕНО ПРОТИВ ОРИГИНАЛА — три блока в конце файла:
     * форма входа по личной ссылке и коду (внутри Битрикс24 её не было вовсе);
     * блок персональных данных клиента в карточке выезда (решение владельца
       18.09.2026 «показываем полностью»);
     * шапка с именем вошедшего и кнопкой выхода.
   ========================================================================== */

.myday-page {
  /* Кегли: на ступень крупнее фундамента. 15 px — нижняя граница, на которой
     текст ещё читается с вытянутой руки при ярком свете. */
  --fs-num:  26px;
  --fs-h:    19px;
  --fs-lg:   17px;
  --fs:      15px;
  --fs-sm:   13px;
  --fs-xs:   12px;

  /* Высоты контролов: 44 px — минимальная цель под палец. Кнопка, поле выбора
     даты и ссылка «позвонить» считают высоту от этих токенов. */
  --h-sm:   38px;
  --h:      44px;
  --h-lg:   50px;

  min-height: 100vh;
  background: var(--c-bg);
}

/* Полоса по краям экрана: на телефоне содержимое не должно упираться в кромку,
   и страница не должна ездить вбок. */
.myday-wrap {
  width: 100%;
  max-width: 720px;      /* на планшете и в окне браузера не растягиваемся в ленту */
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-6);
}

/* ---------- Шапка ---------- */
.myday-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-5) 0 var(--sp-4);
}
.myday-head__title { font-size: var(--fs-h); }
.myday-head__who {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Выбор дня ----------
   Липкая: список за день бывает длинным, а переключение дня — самое частое
   действие на этом экране. Возвращаться за ним наверх незачем. */
.myday-picker {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 calc(-1 * var(--sp-5));
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  background: var(--c-bg);
  box-shadow: var(--shadow-line);
}
.myday-picker__row {
  display: flex;
  gap: var(--sp-3);
}
/* Три быстрые цели одинаковой ширины: «вчера / сегодня / завтра» покрывают
   почти все обращения к экрану. */
.myday-picker__row .btn { flex: 1 1 0; padding: 0 var(--sp-2); }
.myday-picker__row .btn.is-active {
  border-color: transparent;
  background: var(--c-action);
  color: #fff;
}
.myday-picker__date {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  /* На узком телефоне подпись дня уезжает под поле целиком, а не ужимается
     в две строки рядом с ним: «18 сентября, пятница» — то, ради чего человек
     сюда посмотрел, обрезать её нельзя. */
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.myday-picker__date .input { flex: 0 0 auto; width: auto; min-width: 150px; }
.myday-picker__caption {
  flex: 1 1 auto;
  min-width: 150px;
  color: var(--c-text-strong);
  font-weight: 600;
  text-align: right;
}

/* ---------- Список выездов ---------- */
.myday-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-5); }

.visit {
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

/* Шапка карточки — целиком кнопка: палец попадает в неё где угодно. */
.visit__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.visit__head:hover { background: var(--c-surface-alt); }
.visit__head:active { background: var(--c-surface-mute); }

/* Колонка времени фиксированной ширины: часы в разных строках обязаны стоять
   друг под другом, а «время не указано» — переноситься внутри той же колонки,
   не расталкивая заголовок. */
.visit__time {
  flex: 0 0 68px;
  color: var(--c-text-strong);
  font-size: var(--fs-num);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
/* Время не задано — не выдумываем его цифрами, но и не роняем строку. */
.visit__time--unknown { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--c-muted); }

.visit__main { flex: 1 1 auto; min-width: 0; }
.visit__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-text-strong);
  line-height: 1.3;
}
.visit__addr {
  margin-top: var(--sp-1);
  color: var(--c-text);
  line-height: 1.4;
  /* Адрес бывает длинным: две строки в списке, полностью — в раскрытой карточке. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.visit__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

.visit__chev { flex: 0 0 auto; margin-top: 2px; color: var(--c-muted-soft); }

/* ---------- Раскрытая карточка ---------- */
.visit__body { padding: 0 var(--sp-5) var(--sp-5); border-top: 1px solid var(--c-line); }
.visit__body > * + * { margin-top: var(--sp-5); }
.visit__body > .loading, .visit__body > .error-box { margin-top: var(--sp-4); }

.vfield__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.vfield__label .icon { color: var(--c-muted-soft); }
/* Значение — тем же кеглем, что и рабочий текст, но контрастнее: его читают
   на солнце, и приглушённый серый тут неуместен. */
.vfield__value { color: var(--c-text-strong); line-height: 1.45; overflow-wrap: anywhere; }
.vfield__value--text { white-space: pre-wrap; }

.vfield__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Ряд «сумма / предоплата»: две величины рядом, каждая со своей подписью. */
.vmoney { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.vmoney > * { flex: 1 1 140px; }
.vmoney__num {
  color: var(--c-text-strong);
  font-size: var(--fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Комментарий геодезисту — это указание тому, кто сейчас смотрит в экран.
   Отдельная подложка, чтобы его не пролистали вместе с прочими полями. */
.vnote {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-action-soft);
}
.vnote .vfield__label { color: var(--c-action); }
.vnote .vfield__label .icon { color: var(--c-action); }

/* ---------- Действия карточки ----------
   Позвонить — главное действие экрана и единственное залитое цветом.
   Требование заказчика дословно: телефон обязан быть кликабельным. */
.visit__actions { display: flex; flex-direction: column; gap: var(--sp-3); }
/* Кнопка во всю ширину и в НЕСКОЛЬКО строк при нужде: в фундаменте у кнопки
   nowrap и фиксированная высота — это верно для панели диспетчера, но здесь в
   подпись входит целый телефонный номер, и на экране 320 px он бы вылез
   за кромку кнопки. */
.visit__actions .btn {
  width: 100%;
  height: auto;
  min-height: var(--h-lg);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-lg);
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}
.visit__actions .btn .icon { width: 18px; height: 18px; }

/* ---------- Состояния экрана ---------- */
.myday-state { margin-top: var(--sp-5); }
.myday-state .empty { padding: var(--sp-6) var(--sp-4); }
.myday-state__box {
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-panel);
  text-align: center;
}
.myday-state__title { margin-bottom: var(--sp-2); font-size: var(--fs-lg); }
.myday-state__text { color: var(--c-muted); line-height: 1.5; }
.myday-state__actions { margin-top: var(--sp-5); }
.myday-state__actions .btn { width: 100%; }

/* Совсем узкий телефон (320 px): время уезжает над строкой, чтобы заголовок
   и адрес не сжимались в столбик по одному слову. */
@media (max-width: 360px) {
  .myday-wrap { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .myday-picker { margin: 0 calc(-1 * var(--sp-4)); padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .visit__head { gap: var(--sp-3); }
  .visit__time { flex-basis: 56px; font-size: var(--fs-h); }
}

/* ============================================================================
   ДОБАВЛЕНО ДЛЯ ВНЕШНЕГО САЙТА (см. шапку файла)
   ========================================================================== */

/* ---------- Вход по личной ссылке ---------- */

/* Форма входа — единственное, что видит человек до опознания. Она узкая
   намеренно: на широком экране поле кода во всю ширину выглядит как поиск. */
.myday-wrap--narrow { max-width: 460px; }

.login-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); text-align: left; }
.login-form__label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
/* Крупнее обычного поля и с разрядкой: код набирают пальцем, часто в перчатках,
   и вводят его вслепую — точки маски должны быть различимы. */
.login-form__input {
  width: 100%;
  height: var(--h-lg);
  font-size: var(--fs-lg);
  letter-spacing: 0.12em;
}
.login-form__hint { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.45; }
.login-form .btn--wide { width: 100%; margin-top: var(--sp-2); }
.login-form .error-box { margin-bottom: var(--sp-2); }

/* ---------- Персональные данные клиента ---------- */

/* Отдельная плоскость с рамкой, а не просто ещё несколько полей подряд.
   Причина не в красоте: человек должен ВИДЕТЬ границу того, что нельзя
   показывать посторонним и класть в переписку. Цветом не кричим — это
   рабочие данные, с которыми он работает каждый день, а не авария. */
.vclient {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  background: var(--c-surface-alt);
}
.vclient__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-muted);
}
.vclient__head .icon { color: var(--c-muted-soft); }
.vclient__grid { display: flex; flex-direction: column; gap: var(--sp-3); }
.vclient__row { display: flex; flex-direction: column; gap: 2px; }
.vclient__key { font-size: var(--fs-sm); color: var(--c-muted); }
/* Значения — моноширинно там, где важен каждый знак (СНИЛС, паспорт):
   их сверяют посимвольно с документом в руках. */
.vclient__val { font-size: var(--fs); color: var(--c-text-strong); overflow-wrap: anywhere; }
/* Своей моноширинной гарнитуры в системе нет и заводить её незачем: цифры
   в --font уже табличные (класс .mono из base.css), а разрядка добавляет
   различимость знаков, которые сверяют с документом посимвольно. */
.vclient__val--exact { letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.vclient__foot { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.45; }

/* Пара «серия — номер» стоит в строку: в паспорте они тоже рядом. */
.vclient__pair { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.vclient__pair > * { flex: 1 1 120px; }

/* ---------- Шапка вошедшего ---------- */
.myday-head__actions { flex: 0 0 auto; display: flex; gap: var(--sp-2); }
.myday-head__actions .btn { height: var(--h-sm); }

/* В коробке с формой заголовок и пояснение выравниваются по левому краю:
   центрированный абзац прямо над левым столбцом полей читается как чужой
   кусок, а взгляд при вводе всё равно идёт по левому краю. */
.myday-state__box--form,
.myday-state__box--form .myday-state__title,
.myday-state__box--form .myday-state__text { text-align: left; }

/* Пустой день при ОБРЕЗАННОЙ выборке. Отличается от обычного «выездов нет»
   намеренно: это не факт «работы нет», а признание «полноту не гарантируем».
   Цвет — предупреждающий, тот же, что у плашки .note; своего оттенка не
   заводим. */
.myday-state__box--warn {
  background: var(--c-warn-soft);
  text-align: left;
}
.myday-state__box--warn .myday-state__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.myday-state__sign {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--c-warn);
}

/* ============================================================================
   Адрес-ссылка и кадастровый номер, который копируется тапом (19.09.2026).

   ⚠️ Размер цели — не вкусовщина: по этому тапают пальцем на солнце, стоя
   у машины. Меньше 44 px промахиваются, и человек копирует соседний номер.
   ⚠️ Токены берём ТОЛЬКО существующие в base.css. Выдуманное имя переменной
   молча убивает всё правило целиком — в этом проекте на этом уже наступали.
   ========================================================================== */

.vfield__value--link {
  color: var(--c-action);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Адрес длинный и переносится: без этого он вылезает за край экрана. */
  overflow-wrap: anywhere;
}

.chip--tap {
  /* Кнопка, а не текст: показываем это и видом, и размером цели. */
  cursor: pointer;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: inherit;
  font: inherit;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  transition: background-color .12s ease, border-color .12s ease;
}

.chip--tap:active { background: var(--c-surface-mute); }

.chip--done {
  border-color: var(--c-ok-line);
  background: var(--c-ok-soft);
}

.vfield__hint {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}