/* Оформление рассчитано на телефон в первую очередь: администратор работает
   стоя, во время вечернего потока, чаще с телефона, чем за столом. */

:root {
  --фон: #f5f6f8;
  --карточка: #ffffff;
  --текст: #1c1f24;
  --приглушённый: #5c6572;
  --рамка: #d8dce2;
  --основной: #1f6f4a;
  --основной-тёмный: #17553a;
  --тревога: #a8261f;
  --тревога-фон: #fdecea;
  --удача: #1f6f4a;
  --удача-фон: #e8f4ee;
  --скругление: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--фон);
  color: var(--текст);
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.шапка {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--карточка);
  border-bottom: 1px solid var(--рамка);
}

.шапка nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.логотип {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--основной);
  text-decoration: none;
}

.содержимое {
  padding: 16px;
}

.узкая-колонка {
  max-width: 460px;
  margin: 0 auto;
  background: var(--карточка);
  border: 1px solid var(--рамка);
  border-radius: var(--скругление);
  padding: 20px;
}

h1 { font-size: 1.35rem; margin: 0 0 16px; }
h2 { font-size: 1.1rem; margin: 24px 0 12px; }

a { color: var(--основной); }

.форма {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.форма label {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--приглушённый);
}

.форма input {
  padding: 12px;
  font-size: 1rem;
  border: 1px solid var(--рамка);
  border-radius: var(--скругление);
  background: #fff;
  color: var(--текст);
}

.форма input:focus {
  outline: 2px solid var(--основной);
  outline-offset: 1px;
}

/* Кнопки крупные: по ним попадают пальцем, а не курсором */
.кнопка-основная {
  margin-top: 18px;
  padding: 14px 18px;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--основной);
  border: none;
  border-radius: var(--скругление);
  cursor: pointer;
}

.кнопка-основная:hover { background: var(--основной-тёмный); }

.встроенная-форма { display: inline; margin: 0; }

.кнопка-ссылка {
  padding: 0;
  font: inherit;
  color: var(--основной);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.ошибка,
.удача {
  margin: 0 0 12px;
  padding: 12px;
  border-radius: var(--скругление);
  font-size: 0.95rem;
}

.ошибка { color: var(--тревога); background: var(--тревога-фон); }
.удача { color: var(--удача); background: var(--удача-фон); }

.пояснение { color: var(--приглушённый); }

.сведения {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0;
}

.сведения dt { color: var(--приглушённый); }
.сведения dd { margin: 0; }

/* ---------------------------------------------------------------------------
   Экран дня. Главный экран системы: администратор работает на нём стоя, во
   время вечернего потока, часто с телефона. Всё крупное и нажимается пальцем.
   --------------------------------------------------------------------------- */

.экран-дня {
  max-width: 640px;
  margin: 0 auto;
}

.подпись-поиска {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--приглушённый);
}

.поле-поиска {
  width: 100%;
  padding: 14px;
  font-size: 1.05rem;
  border: 1px solid var(--рамка);
  border-radius: var(--скругление);
  background: #fff;
  color: var(--текст);
}

.поле-поиска:focus {
  outline: 2px solid var(--основной);
  outline-offset: 1px;
}

/* Показывается только пока идёт запрос — так устроен hx-indicator */
.идёт-поиск {
  margin: 8px 2px 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--приглушённый);
  opacity: 0;
  transition: opacity 120ms;
}

.идёт-поиск.htmx-request { opacity: 1; }

.подсказка {
  margin: 20px 2px;
  color: var(--приглушённый);
}

.список-клиентов {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.строка {
  padding: 14px;
  background: var(--карточка);
  border: 1px solid var(--рамка);
  border-radius: var(--скругление);
}

.сведения-клиента {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.имя { font-size: 1.1rem; font-weight: 600; }
.телефон { color: var(--приглушённый); text-decoration: none; font-variant-numeric: tabular-nums; }

/* Состояние абонемента должно читаться с одного взгляда, поэтому у каждого
   свой цвет полосы слева и своя окраска метки. */
.абонемент {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 4px solid var(--рамка);
  border-radius: 0 var(--скругление) var(--скругление) 0;
  background: #fafbfc;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.метка-состояния {
  font-weight: 600;
  text-transform: lowercase;
}

.остаток {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.вид-абонемента,
.до-когда {
  color: var(--приглушённый);
  font-size: 0.9rem;
}

.состояние-active { border-left-color: var(--основной); background: var(--удача-фон); }
.состояние-active .метка-состояния { color: var(--основной); }

.состояние-exhausted { border-left-color: #b5730c; background: #fdf3e3; }
.состояние-exhausted .метка-состояния { color: #8c5906; }

.состояние-expired,
.состояние-closed { border-left-color: #9aa3ad; background: #f1f3f5; }
.состояние-expired .метка-состояния,
.состояние-closed .метка-состояния { color: #5c6572; }

.состояние-not_started { border-left-color: #4a6fa5; background: #eef3fa; }
.состояние-not_started .метка-состояния { color: #34537d; }

.состояние-нет { border-left-color: #9aa3ad; background: #f1f3f5; }
.состояние-нет .метка-состояния { color: #5c6572; }

.форма-отметки { margin: 0; }

/* Кнопка отметки — одна, крупная, во всю ширину: по ней попадают пальцем */
.кнопка-отметить {
  width: 100%;
  margin-top: 12px;
  padding: 16px;
  min-height: 54px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: var(--основной);
  border: none;
  border-radius: var(--скругление);
  cursor: pointer;
}

.кнопка-отметить:hover { background: var(--основной-тёмный); }
.кнопка-отметить:active { transform: translateY(1px); }

.кнопка-подтвердить {
  flex: 1 1 auto;
  padding: 14px;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: #b5730c;
  border: none;
  border-radius: var(--скругление);
  cursor: pointer;
}

.кнопка-второстепенная {
  padding: 12px 14px;
  min-height: 44px;
  font-size: 0.95rem;
  color: var(--текст);
  background: #fff;
  border: 1px solid var(--рамка);
  border-radius: var(--скругление);
  cursor: pointer;
}

.пара-кнопок { display: flex; gap: 8px; margin-top: 12px; }

.предупреждение {
  margin: 12px 0 0;
  padding: 12px;
  border-radius: var(--скругление);
  background: #fdf3e3;
  color: #8c5906;
  font-size: 0.95rem;
}

/* Отметка задним числом — редкое действие, поэтому неприметное и свёрнутое:
   оно не должно мешать основному сценарию. */
.задним-числом { margin-top: 10px; }

.задним-числом > summary {
  font-size: 0.85rem;
  color: var(--приглушённый);
  cursor: pointer;
  padding: 4px 0;
}

.задним-числом label {
  display: block;
  margin: 10px 0 4px;
  font-size: 0.85rem;
  color: var(--приглушённый);
}

.задним-числом input {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid var(--рамка);
  border-radius: var(--скругление);
  background: #fff;
  color: var(--текст);
}

.задним-числом .кнопка-второстепенная { width: 100%; margin-top: 8px; }

.строка .удача,
.строка .ошибка { margin: 12px 0 0; }

/* Абонемент исчерпан, истёк или закрыт: действие остаётся возможным (владелец
   вправе отметить и такое), но выглядеть приглашением оно не должно. */
.кнопка-всё-равно {
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  min-height: 48px;
  font-size: 0.95rem;
  color: var(--приглушённый);
  background: #fff;
  border: 1px solid var(--рамка);
  border-radius: var(--скругление);
  cursor: pointer;
}

.кнопка-всё-равно:hover { border-color: #b9bfc7; color: var(--текст); }

/* ---------------------------------------------------------------------------
   Клиенты, карточка клиента, справочник видов
   --------------------------------------------------------------------------- */

.шапка nav { flex-wrap: wrap; gap: 10px 14px; font-size: 0.95rem; }

.широкая-колонка {
  max-width: 760px;
  margin: 0 auto;
}

.заголовок-раздела {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.заголовок-раздела h1 { margin: 0; }

.кнопка-ссылка-крупная {
  display: inline-block;
  padding: 12px 16px;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  background: var(--основной);
  border-radius: var(--скругление);
  text-decoration: none;
}

.кнопка-ссылка-крупная:hover { background: var(--основной-тёмный); }

.строка-поиска {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.строка-поиска .поле-поиска { flex: 1 1 auto; }

.список-строк {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.строка-списка {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 14px;
  background: var(--карточка);
  border: 1px solid var(--рамка);
  border-radius: var(--скругление);
}

.строка-списка .имя { text-decoration: none; }
.строка-списка a.имя { color: var(--основной); }

.счётчик {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--приглушённый);
}

.страницы {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 20px 0;
  color: var(--приглушённый);
  font-size: 0.9rem;
}

.необязательно {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--приглушённый);
}

/* Отделяем пояснение от самой подписи, иначе «Начало по умолчанию сегодня»
   читается одной фразой. */
.необязательно::before { content: "· "; }

.под-формой { margin-top: 16px; text-align: center; }

.форма select,
.форма-выдачи select,
.форма-выдачи input {
  padding: 12px;
  font-size: 1rem;
  border: 1px solid var(--рамка);
  border-radius: var(--скругление);
  background: #fff;
  color: var(--текст);
}

.форма-выдачи {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: var(--карточка);
  border: 1px solid var(--рамка);
  border-radius: var(--скругление);
}

.форма-выдачи label {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--приглушённый);
}

.пара-полей {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.пара-полей > * { flex: 1 1 150px; min-width: 0; }
.пара-полей input,
.пара-полей select { width: 100%; }

/* Абонемент в истории: та же цветовая азбука, что и на экране дня */
.абонемент-в-истории { border-left: 4px solid var(--рамка); }
.абонемент-в-истории.состояние-active { border-left-color: var(--основной); }
.абонемент-в-истории.состояние-exhausted { border-left-color: #b5730c; }
.абонемент-в-истории.состояние-expired,
.абонемент-в-истории.состояние-closed { border-left-color: #9aa3ad; }
.абонемент-в-истории.состояние-not_started { border-left-color: #4a6fa5; }

.абонемент-сведения,
.вид-сведения {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-width: 0;
}

.форма-закрытия {
  display: flex;
  gap: 8px;
  margin: 0;
  flex-wrap: wrap;
}

.форма-закрытия input {
  padding: 10px;
  border: 1px solid var(--рамка);
  border-radius: var(--скругление);
  background: #fff;
  color: var(--текст);
}

.метка-перенесён,
.метка-архива {
  padding: 2px 8px;
  font-size: 0.75rem;
  color: var(--приглушённый);
  background: #eceff2;
  border-radius: 999px;
}

.в-архиве { opacity: 0.72; }

.действия-вида {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.действия-вида .кнопка-второстепенная { text-decoration: none; }

.таблица-посещений {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  background: var(--карточка);
  border: 1px solid var(--рамка);
  border-radius: var(--скругление);
  overflow: hidden;
  font-size: 0.95rem;
}

.таблица-посещений th,
.таблица-посещений td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--рамка);
}

.таблица-посещений th {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--приглушённый);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.таблица-посещений tr:last-child td { border-bottom: none; }

.время-посещения { font-variant-numeric: tabular-nums; white-space: nowrap; }

.автор { color: var(--приглушённый); }

.задним-числом-метка,
.приглушённо {
  display: block;
  font-size: 0.8rem;
  color: var(--приглушённый);
}