/* Календарь аренд ROBODATA - Telegram Mini App.
   Без сборки, без внешних шрифтов. Цвета приходят из Telegram.themeParams,
   поверх них лежит свой семантический слой: статусы аренды заданы ТЗ и не
   должны зависеть от темы клиента. */

:root {
  color-scheme: light;

  /* --- слой 1: тема Telegram (значения подставляет app.js, тут запасные) --- */
  --tg-bg: #ffffff;
  --tg-surface: #f2f2f7;
  --tg-text: #14161a;
  --tg-hint: #6d7480;
  --tg-link: #1a6dd4;
  --tg-button: #1a6dd4;
  --tg-button-text: #ffffff;
  --tg-separator: #d9dbe0;

  /* --- слой 2: смысл --- */
  --bg: var(--tg-bg);
  --panel: var(--tg-surface);
  --text: var(--tg-text);
  --hint: var(--tg-hint);
  --line: var(--tg-separator);
  --link: var(--tg-link);

  --ok: #14713f;            /* подтверждённая аренда */
  --ok-fill: #17804a;
  --ok-soft: #e2f1e8;
  --maybe: #7d5200;         /* возможная аренда */
  --maybe-fill: #8a5b00;
  --maybe-soft: #faeed6;
  --done: #5f6670;          /* выполненная */
  --done-soft: #e9eaee;
  --alarm: #a52620;         /* конфликт, устаревшие данные */
  --alarm-soft: #fae7e5;
  --absence: #4d6070;
  --muted: #656b75;   /* приглушённый текст на панели: hint там даёт 4.22 */

  --r-lg: 12px;
  --r-sm: 8px;
  --pad: 12px;

  --safe-bottom: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --tg-bg: #17181a;
  --tg-surface: #202226;
  --tg-text: #f0f2f5;
  --tg-hint: #9aa1ab;
  --tg-link: #69aef5;
  --tg-button: #2b7cd3;
  --tg-button-text: #ffffff;
  --tg-separator: #34373d;

  --ok: #62c68d;
  --ok-fill: #2f7f53;
  --ok-soft: #16301f;
  --maybe: #e2ab4e;
  --maybe-fill: #8a6415;
  --maybe-soft: #33280f;
  --done: #98a0ab;
  --done-soft: #26292e;
  --alarm: #f08a80;
  --alarm-soft: #3a1d1b;
  --absence: #8fa3b3;
  --muted: #a7aeb8;
}

* { box-sizing: border-box; }

/* Классы .btn и .field задают display, и он перебивает атрибут hidden
   из браузерной таблицы стилей. Без этой строки «скрытая» кнопка видна. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

body { padding-bottom: env(safe-area-inset-bottom, 0px); }

.boot { padding: 40px var(--pad); color: var(--hint); font-size: 15px; }

.shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.screen {
  padding: 0 var(--pad) calc(var(--safe-bottom) + 24px);
  outline: none;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 4px;
}

.num { font-variant-numeric: tabular-nums; }

/* ------------------------------ верхняя строка ------------------------------ */

.topbar { position: sticky; top: 0; z-index: 5; background: var(--bg); }

.sync {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px var(--pad);
  min-height: 44px;
  font-size: 13px;
  color: var(--hint);
  border-bottom: 1px solid var(--line);
}

.sync--stale {
  color: var(--alarm);
  background: var(--alarm-soft);
  border-bottom-color: transparent;
  border-left: 3px solid var(--alarm);
  padding-left: calc(var(--pad) - 3px);
}

.sync__text { flex: 1; min-width: 0; }
.sync__btn {
  color: var(--link);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 8px;
  margin: -8px -8px -8px 0;
  min-height: 44px;      /* палец, а не курсор */
  display: flex;
  align-items: center;
}
.sync--stale .sync__btn { color: var(--alarm); text-decoration: underline; }
.sync__btn[disabled] { opacity: .5; cursor: default; text-decoration: none; }

.backrow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px var(--pad);
  color: var(--link);
  font-size: 15px;
  min-height: 44px;
  width: 100%;
  border-bottom: 1px solid var(--line);
}

.drift {
  margin: 8px var(--pad) 0;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: var(--r-sm);
  background: var(--maybe-soft);
  color: var(--maybe);
  border-left: 3px solid var(--maybe-fill);
}

/* --------------------------------- месяц ---------------------------------- */

.monthbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 0 6px;
}
.monthbar h1 { font-size: 20px; flex: 1; }
.monthbar__nav {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--link);
}
.monthbar__nav:active { background: var(--panel); }
.monthbar__today {
  font-size: 13px; font-weight: 600; color: var(--link);
  padding: 8px; margin-right: -8px; min-height: 44px;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 11px;
  color: var(--hint);
  text-transform: lowercase;
  padding-bottom: 2px;
}
.weekdays span { text-align: center; }

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  touch-action: pan-y;
}

.cell {
  position: relative;
  min-height: 56px;
  padding: 4px 2px 6px;
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: transparent;
  text-align: center;
}
.screen:focus, .screen:focus-visible { outline: none; }
.cell--empty { visibility: hidden; }
.cell--busy { background: var(--panel); }
.cell:active { background: var(--done-soft); }
.cell__day { font-size: 15px; line-height: 1.1; }
.cell--out .cell__day { color: var(--hint); }
.cell--today .cell__day {
  font-weight: 700;
  color: var(--tg-button-text);
  background: var(--link);
  border-radius: 999px;
  min-width: 22px;
  padding: 1px 5px;
}

.marks { display: flex; gap: 2px; align-items: center; min-height: 15px; }

.mark {
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  font-variant-numeric: tabular-nums;
}
.mark--ok { background: var(--ok-fill); color: #fff; }
.mark--maybe { background: transparent; color: var(--maybe); box-shadow: inset 0 0 0 1.5px var(--maybe-fill); }
.mark--done { background: var(--done-soft); color: var(--done); }
.mark--alarm { color: var(--alarm); font-size: 13px; line-height: 15px; font-weight: 700; }

/* Полоса «кто-то недоступен» идёт в потоке под метками, иначе на строках
   разной высоты она отрывается от своей даты. */
.cell__absence {
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--absence);
  opacity: .8;
}
.cell__absence--off { visibility: hidden; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 14px 2px 4px;
  font-size: 12px;
  color: var(--hint);
}
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block;
}
.legend .i-ok { background: var(--ok-fill); }
.legend .i-maybe { box-shadow: inset 0 0 0 1.5px var(--maybe-fill); }
.legend .i-done { background: var(--done); }
.legend .i-abs { height: 2px; width: 14px; border-radius: 2px; background: var(--absence); }

/* -------------------------------- секции ---------------------------------- */

.section { margin-top: 18px; }
.section__title {
  font-size: 13px;
  color: var(--hint);
  padding: 0 2px 6px;
  font-weight: 600;
}

.list {
  background: var(--panel);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.list__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  min-height: 48px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.list__row:last-child { border-bottom: none; }
.list__row:active { background: var(--done-soft); }
.list__row .chev { color: var(--hint); flex: none; }
.list__row .grow { flex: 1; min-width: 0; }
.list__count {
  font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.list__count--alarm { color: var(--alarm); font-weight: 600; }

/* ------------------------------- событие ---------------------------------- */

.event {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
}
.event:last-child { border-bottom: none; }
.event:active { background: var(--done-soft); }
.event--confirmed { border-left-color: var(--ok-fill); }
.event--potential { border-left-color: var(--maybe-fill); }
.event--done { border-left-color: var(--done); }
.event__body { flex: 1; min-width: 0; }
.event__title {
  display: block;
  font-size: 15px; font-weight: 600; line-height: 1.3;
  overflow-wrap: anywhere;
}
.event--done .event__title { color: var(--done); }
.event__meta {
  display: block;
  font-size: 13px; color: var(--muted); margin-top: 2px;
  overflow-wrap: anywhere;
}
.event__badges { display: block; }
.event__status {
  font-size: 12px; font-weight: 600; margin-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
}

.conflict {
  display: flex;
  gap: 6px;
  margin-top: 5px;
  color: var(--alarm);
  font-size: 12.5px;
  line-height: 1.35;
}
.conflict__icon { flex: none; padding-top: 2px; }
.conflict__list { display: flex; flex-direction: column; gap: 1px; }
.conflict__item { display: block; }
.conflict__item--lead { font-weight: 600; font-size: 13.5px; }

.soft {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
  padding-left: 9px;
  border-left: 2px solid var(--line);
}
.soft__item { display: block; }

/* Возможная аренда без пересечений: в сетке месяца её нет, в дне она видна,
   но не спорит с подтверждёнными. Приглушаем рейку и вес заголовка, а не всю
   строку прозрачностью: прозрачность роняла контраст подписи до 2.63. */
.event--quiet { border-left-color: var(--line); }
.event--quiet .event__title { font-weight: 500; }
.event--quiet .event__status { font-weight: 500; }

.navrow__label { display: block; }

.conflict-card { flex-direction: column; align-items: stretch; gap: 8px; }
.conflict-card--soft .conflict__item--lead { color: var(--text); font-weight: 600; }
.conflict-card__event {
  border-bottom: none;
  padding: 7px 9px;
  background: var(--bg);
  border-radius: var(--r-sm);
}
.st-ok { color: var(--ok); }
.st-maybe { color: var(--maybe); }
.st-done { color: var(--done); }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 5px;
  margin: 4px 4px 0 0;
  background: var(--done-soft);
  color: var(--done);
}
.badge--warn { background: var(--maybe-soft); color: var(--maybe); }
.badge--alarm { background: var(--alarm-soft); color: var(--alarm); }

/* ------------------------------- карточка --------------------------------- */

.card__head { padding: 14px 2px 10px; }
.card__head h1 { font-size: 20px; line-height: 1.25; }
.card__head .sub { color: var(--hint); font-size: 13px; margin-top: 4px; }

.kv { background: var(--panel); border-radius: var(--r-lg); overflow: hidden; }
/* Поля парка роботов: палец, а не курсор. */
.kv__row input[type="number"] {
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 44px;
  padding: 6px 8px;
}

.kv__row {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.kv__row:last-child { border-bottom: none; }
.kv__k { color: var(--muted); font-size: 14px; flex: none; width: 116px; }
.kv__v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kv__v--empty { color: var(--muted); }
.kv__note { display: block; font-size: 12px; color: var(--maybe); margin-top: 2px; }

.btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: var(--r-lg);
  background: var(--tg-button);
  color: var(--tg-button-text);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  min-height: 48px;
}
.btn:active { filter: brightness(.92); }
.btn--ghost {
  background: var(--panel);
  color: var(--link);
}
.btn--danger { background: var(--panel); color: var(--alarm); }
.btn[disabled] { opacity: .5; cursor: default; }

/* --------------------------------- формы ---------------------------------- */

.form { background: var(--panel); border-radius: var(--r-lg); padding: 12px; }
.field { margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.field > label { display: block; font-size: 13px; color: var(--hint); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px;
  min-height: 44px;
}
.field textarea { min-height: 66px; resize: vertical; }
.row2 { display: flex; gap: 8px; }
.row2 .field { flex: 1; }

.radios { display: flex; gap: 6px; flex-wrap: wrap; }
.radios label {
  flex: 1 1 auto;
  min-width: 96px;
  text-align: center;
  font-size: 14px;
  padding: 9px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.radios input { position: absolute; opacity: 0; width: 0; height: 0; }
.radios input:checked + span { font-weight: 700; }
.radios label:has(input:checked) { border-color: var(--link); color: var(--link); }
.radios label:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }

.formerr { color: var(--alarm); font-size: 13px; margin-top: 8px; }

/* -------------------------------- прочее ---------------------------------- */

.empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--hint);
  font-size: 14px;
  background: var(--panel);
  border-radius: var(--r-lg);
}
.hint { color: var(--hint); font-size: 13px; padding: 8px 2px 0; }

.gate { padding: 64px 20px; text-align: center; }
.gate h1 { font-size: 20px; margin-bottom: 10px; }
.gate p { color: var(--hint); font-size: 15px; margin: 0 0 8px; }

.toast {
  position: fixed;
  left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--tg-text);
  color: var(--tg-bg);
  font-size: 14px;
  z-index: 20;
  animation: toast-in .18s ease-out;
}

.fade { animation: fade-in .16s ease-out; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .fade, .toast { animation: none; }
  * { transition: none !important; }
}

@media (min-width: 620px) {
  .shell { max-width: 620px; margin: 0 auto; width: 100%; }
  .cell { min-height: 68px; }
  .kv__k { width: 150px; }
}