/* Примитивы интерфейса: один источник для кнопок, полей, карточек, чипов и вкладок.
   Перенесено из VertigoBooking (src/styles/ui.scss).

   Отличие от Booking — гибридное применение: там каждый контрол в разметке несёт
   класс, здесь бо́льшая часть админки собирается строками в JS, и голый <button>
   без класса не должен оставаться системным серым. Поэтому вид примитива даёт
   селектор по элементу, а класс роли (.btnPrimary, .btnDanger) его уточняет.

   Правило, ради которого этот файл отделён: раскладка страниц (styles.css) не
   определяет кнопок и полей — только расположение вокруг них. */

/* ---------- Кнопки ---------- */

/* Базовый вид = вторичная кнопка. Класс .secondary в разметке остаётся как
   пометка роли, отдельного правила ему не нужно — он и так попадает сюда. */
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--h-ctl);
  padding: 0 var(--sp-4);
  border-radius: var(--r-ctl);
  border: 1px solid var(--c-border);
  /* Чуть светлее карточки: иначе кнопка на карточке читалась бы только рамкой. */
  background: var(--c-surface2);
  color: var(--c-text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 120ms, background-color 120ms, box-shadow 120ms, color 120ms;
}

button:hover:not(:disabled),
.btn:hover:not(:disabled) {
  border-color: var(--c-accent);
}

button:disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

button:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring-accent);
}

/* Главная кнопка формы. Рамки нет вовсе: прозрачная рамка поверх градиента при
   дробном масштабе экрана (Windows 125%) рисуется светлым швом у края. */
.btnPrimary {
  border: none;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));
  color: #fff;
  box-shadow: 0 0 14px var(--glow-accent);
}

.btnPrimary:hover:not(:disabled) {
  border: none;
  box-shadow: 0 0 20px var(--glow-accent-strong);
}

.btnGhost {
  border-color: transparent;
  background: transparent;
  color: var(--c-text-dim);
}

.btnGhost:hover:not(:disabled) {
  border-color: transparent;
  background: var(--c-surface2);
  color: var(--c-text);
}

.btnDanger {
  border-color: var(--c-danger);
  background: transparent;
  color: var(--c-danger);
}

.btnDanger:hover:not(:disabled) {
  border-color: var(--c-danger);
  background: var(--c-danger);
  color: #fff;
}

.btnSm {
  height: var(--h-ctl-sm);
  padding: 0 var(--sp-3);
  font-size: var(--fs-small);
}

/* ---------- Поля ---------- */

/* Вид поля вешается на голый `input` — селектор весом 0,0,1. Это важно: правила
   ниже уточняют отдельные типы через input[type="date"] (0,1,1), и если бы базовый
   селектор был тяжелее (например input:not([type="checkbox"]), это 0,2,1), он бы их
   перебивал — иконки календаря и часов пропадали, а `background` сокращённой
   записью сбрасывал их в none. Галочки не исключаются здесь, а возвращают себе
   свой вид ниже по файлу, где правило и тяжелее, и позже. */
input,
select,
textarea,
.input,
.select,
.textarea {
  min-width: 0;
  height: var(--h-ctl);
  padding: 0 var(--sp-3);
  border-radius: var(--r-ctl);
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  transition: border-color 120ms, box-shadow 120ms;
}

input::placeholder,
textarea::placeholder { color: var(--c-text-dim); }

input:hover,
select:hover,
textarea:hover { border-color: var(--c-accent); }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--ring-field);
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

input[aria-invalid="true"],
select[aria-invalid="true"] { border-color: var(--c-danger); }

textarea,
.textarea {
  height: auto;
  min-height: calc(var(--h-ctl) * 2.2);
  padding: var(--sp-2) var(--sp-3);
  resize: vertical;
}

/* Стрелки-спиннеры у числовых полей закрывают часть цифр в узких клетках таблиц. */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- Нативные пикеры даты, времени и месяца ---------- */

/* color-scheme: dark на :root уже красит выпадающий календарь тёмным. Здесь —
   только само поле: своя иконка справа вместо системной, которая на тёмном фоне
   не читается, и явный цвет частей даты для WebKit. */

input[type="date"],
input[type="time"],
input[type="month"] {
  appearance: none;
  -webkit-appearance: none;
  accent-color: var(--c-accent);
  padding-right: 36px; /* место под иконку */
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
}

input[type="date"],
input[type="month"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2398A6B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

input[type="time"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2398A6B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

/* Системная иконка не видна, но зона клика по ней остаётся — по полю открывается
   родной пикер. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

input[type="date"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit { color: var(--c-text); padding: 0 2px; }

input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="month"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper { background: transparent; }

input[type="date"]::-webkit-datetime-edit-text,
input[type="month"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-text { color: var(--c-text-dim); }

input[type="date"]::-webkit-clear-button,
input[type="month"]::-webkit-clear-button,
input[type="time"]::-webkit-clear-button { display: none; }

/* ---------- Селект ---------- */

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2398A6B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
}

/* ---------- Галочки ---------- */

/* Один вид у всех чекбоксов приложения: брендовый оранжевый и один размер.
   Первые пять свойств возвращают галочке её собственный вид: общее правило полей
   выше даёт ей рамку, фон и высоту 36px, а на галочке это мусор. Правило стоит
   после него и тяжелее (0,1,1 против 0,0,1), поэтому побеждает. */
input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--c-accent);
  cursor: pointer;
}

input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.6; }

/* ---------- Поле с подписью ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0; /* иначе пара полей в строке не сжимается на телефоне */
}

.fieldLabel,
.fieldHint { font-size: var(--fs-small); color: var(--c-text-dim); }

.fieldError { font-size: var(--fs-small); color: var(--c-danger); }

.fieldRow {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.fieldRow > .field { flex: 1; min-width: 0; }

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

/* Без свечения: неон — только у смысловых элементов (главная кнопка, активная
   вкладка). Прежний вариант со свечением на каждой карточке шумел. */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.cardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.cardTitle {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  letter-spacing: 0.06em;
}

.cardHead .cardTitle { margin: 0; }

/* ---------- Чипы ---------- */

/* Цвет задаётся переменной --chip-color снаружи; без неё — нейтральный. */
.chip,
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: var(--h-ctl-sm);
  padding: 0 var(--sp-3);
  border-radius: 999px;
  border: 1px solid var(--chip-color, var(--c-border));
  background: var(--c-surface);
  color: var(--chip-color, var(--c-text));
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Сегментированный контрол (вкладки админки) ---------- */

/* Девять вкладок в одну полосу на телефоне не помещаются. Полоса прокручивается
   вбок: перенос ломает вид сплошного контрола, а сжатие обрезает подписи. */
.tabs,
.segmented {
  display: flex;
  align-items: stretch;
  height: var(--h-ctl);
  margin-bottom: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-ctl);
  background: var(--c-surface);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.tabs > * + *,
.segmented > * + * { border-left: 1px solid var(--c-border); }

.tabs .tab-btn,
.segmented .segmentedBtn {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: auto;
  padding: 0 var(--sp-3);
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--c-text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  transition: color 120ms, background-color 120ms;
}

.tabs .tab-btn:hover,
.segmented .segmentedBtn:hover { border: none; background: var(--c-surface2); }

.tabs .tab-btn:focus-visible,
.segmented .segmentedBtn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ring-accent);
}

.tabs .tab-btn.active,
.segmented .segmentedBtn.active {
  color: var(--c-text);
  background: var(--tint-accent);
  box-shadow: inset 0 -2px 0 var(--c-accent);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Таблицы ---------- */

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}

/* Без white-space: nowrap — заголовок переносится на две строки, и таблица
   влезает в карточку. Иначе широкие таблицы (записи, премии, журнал) вылезали бы
   за неё, а прокручиваться им негде: JS переносит их в панели вкладок узел за
   узлом и обёртку .tableScroll вокруг них не сохранить. */
thead th {
  background: var(--c-surface2);
  color: var(--c-text-dim);
  font-weight: 600;
  font-size: var(--fs-small);
}

tbody tr:hover td { background: var(--c-surface2); }

tbody tr:last-child td { border-bottom: none; }

/* Таблица с колонкой кнопок шире карточки — прокручиваем её, а не сжимаем колонки. */
.tableScroll { overflow-x: auto; }

/* ---------- Мелочи ---------- */

.muted { color: var(--c-text-dim); font-size: var(--fs-small); }

/* Итог, на который стоит посмотреть (отрицательная сумма к выдаче). Янтарный
   бренда, а не оранжевый: оранжевый в этой системе — акцент, а не тревога. */
.warn { color: var(--c-warn); font-weight: 600; }

hr, .divider {
  height: 1px;
  border: 0;
  background: var(--c-border);
  margin: var(--sp-4) 0;
}

/* ---------- Телефон ---------- */

@media (max-width: 767px) {
  /* Поля крупнее: палец и правило iOS — при шрифте меньше 16px браузер зумит
     страницу при фокусе, и сотрудник доводит её обратно руками. Кнопок это
     правило не касается, им нужна только площадь под нажатие. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  .input,
  .select {
    height: var(--h-ctl-lg);
    font-size: var(--fs-lead);
  }

  textarea, .textarea { font-size: var(--fs-lead); }

  button, .btn { min-height: 44px; }

  /* Правило выше задирает и сегменты — полоса должна вырасти вместе с ними,
     иначе кнопки вылезают за её рамку. */
  .segmented { height: auto; }
  .segmented .segmentedBtn { min-height: 44px; }

  /* Вкладок восемь, и в прокручиваемой полосе на телефоне видно три: активная
     вкладка после переключения запросто оказывается за краем экрана. Поэтому
     здесь полоса рассыпается на чипы — все разделы видны сразу, как было до
     редизайна. Язык цвета тот же: активный чип обведён акцентом и залит им на 18%. */
  .tabs {
    height: auto;
    flex-wrap: wrap;
    gap: var(--sp-2);
    border: none;
    background: none;
    overflow: visible;
  }

  .tabs > * + * { border-left: none; }

  .tabs .tab-btn {
    min-height: 40px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-surface2);
    font-size: var(--fs-small);
  }

  .tabs .tab-btn.active {
    border-color: var(--c-accent);
    background: var(--tint-accent);
    box-shadow: none;
  }

  .card { padding: var(--sp-4); }

  th, td { padding: var(--sp-2); }
}