/*
  Базовые стили поверх tokens.css. Здесь только семантические токены,
  никаких hex: цвет, которого нет в токенах, сначала заводится там.
  Классы с префиксом mc-, чтобы не сталкиваться со стилями WebView
  партнёров (Beeline) и сторонних виджетов (Tiptop, LiveKit).
*/

/* ---------- Сброс и основа ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------- Типографика ---------- */

.mc-h1,
.mc-h2,
.mc-title {
  margin: 0;
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
}

.mc-h1 { font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); }
.mc-h2 { font-size: var(--font-size-h2); }
.mc-title { font-size: var(--font-size-title); font-weight: var(--font-weight-medium); }

.mc-caption { font-size: var(--font-size-caption); color: var(--color-text-secondary); }
.mc-muted { color: var(--color-text-secondary); }
.mc-overline {
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mc-link {
  color: var(--color-link);
  text-decoration: none;
  cursor: pointer;
}
.mc-link:hover { text-decoration: underline; }

.mc-price {
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- Раскладка ---------- */

.mc-container {
  width: 100%;
  max-width: var(--size-content-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.mc-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.mc-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

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

.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--size-control);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard);
}

.mc-btn--lg { min-height: var(--size-control-lg); padding: 0 var(--space-6); font-size: var(--font-size-field); }
.mc-btn--block { display: flex; width: 100%; }

/* Главное действие экрана. Одно на экран или модалку. */
/* Белый текст на цвете логотипа — контраст около 2.7:1, поэтому полужирный. */
.mc-btn--primary { background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--font-weight-semibold); }
.mc-btn--primary:hover { background: var(--color-primary-hover); }
.mc-btn--primary:active { background: var(--color-primary-pressed); }

/* Второстепенное: «Назад», «Отменить» в модалке, «Добавить ещё». */
.mc-btn--secondary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.mc-btn--secondary:hover { border-color: var(--color-border-strong); }

/* Разрушительное: отмена записи, отключение врача. Всегда с подтверждением. */
.mc-btn--danger { background: var(--color-danger-subtle); color: var(--color-danger); }
.mc-btn--danger:hover { border-color: var(--color-danger); }

/* Вход в звонок и поддержка. */
.mc-btn--call { background: var(--color-call); color: var(--color-on-call); }
.mc-btn--call:hover { background: var(--color-call-hover); }

/* Третичное действие текстом: «Добавить», «Применить» внутри поля. */
.mc-btn--ghost { background: transparent; color: var(--color-link); padding-inline: var(--space-2); }
.mc-btn--ghost:hover { background: var(--color-primary-subtle); }

.mc-btn:disabled,
.mc-btn[aria-disabled="true"] {
  background: var(--color-disabled);
  border-color: transparent;
  color: var(--color-text-disabled);
  cursor: not-allowed;
  filter: none;
}

/* ---------- Поля ввода ---------- */

.mc-field { display: flex; flex-direction: column; gap: var(--space-1); }

.mc-label { font-size: var(--font-size-body); font-weight: var(--font-weight-medium); }
.mc-hint { font-size: var(--font-size-caption); color: var(--color-text-secondary); }
.mc-error-text { font-size: var(--font-size-caption); color: var(--color-danger); }

.mc-input,
.mc-select,
.mc-textarea {
  width: 100%;
  min-height: var(--size-control);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--color-field);
  font-size: var(--font-size-field);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--easing-standard);
}

.mc-textarea { min-height: 96px; resize: vertical; line-height: var(--line-height-body); }

.mc-input::placeholder,
.mc-textarea::placeholder { color: var(--color-text-secondary); }

.mc-input:hover,
.mc-select:hover,
.mc-textarea:hover { border-color: var(--color-border); }

.mc-input:focus,
.mc-select:focus,
.mc-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

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

.mc-input:disabled,
.mc-select:disabled,
.mc-textarea:disabled { color: var(--color-text-secondary); cursor: not-allowed; }

/* Только чтение: профиль клиники и одобренного врача. Выглядит как поле, но не редактируется. */
.mc-input[readonly] { color: var(--color-text-muted); }

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
}

.mc-check { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }

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

.mc-card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}

.mc-card--selected { outline: 1px solid var(--color-primary); }
.mc-card--accent { background: var(--color-primary-subtle); }

/* ---------- Чипы статусов и метки ---------- */

.mc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-chip);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.mc-badge--success { background: var(--color-success-subtle); color: var(--color-success-text); }
.mc-badge--warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.mc-badge--danger { background: var(--color-danger-subtle); color: var(--color-danger); }
.mc-badge--neutral { background: var(--color-neutral-subtle); color: var(--color-neutral); }
.mc-badge--primary { background: var(--color-primary-subtle); color: var(--color-primary-text); }

/* Метка-характеристика: «Русский язык», «Первичная». Без заливки. */
.mc-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-size: var(--font-size-caption);
  color: var(--color-text);
}

/* Выбранное значение с крестиком: диагнозы МКБ-10 в КЛ. */
.mc-token {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-chip);
  background: var(--color-primary-subtle);
  color: var(--color-primary-text);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

/* ---------- Слоты ---------- */

.mc-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: var(--space-2);
}

.mc-slot {
  min-height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--color-primary-subtle);
  color: var(--color-primary-text);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.mc-slot:hover { background: var(--color-primary-subtle-hover); }
.mc-slot[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.mc-slot:disabled { background: var(--color-disabled); color: var(--color-text-disabled); cursor: not-allowed; }

/* ---------- Вкладки ---------- */

/* Подчёркнутые: разделы одной сущности (КЛ, профиль врача). */
.mc-tabs {
  display: flex;
  gap: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.mc-tab {
  padding: var(--space-2) 0;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
}

.mc-tab[aria-selected="true"] { border-bottom-color: var(--color-primary); }

/* Пилюли: фильтр одного списка (предстоящие / завершённые / отменённые). */
.mc-pills { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.mc-pill {
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.mc-pill[aria-pressed="true"],
.mc-pill[aria-selected="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* ---------- Таблицы (веб-кабинеты) ---------- */

.mc-table-wrap { overflow-x: auto; }

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

.mc-table th {
  padding: var(--space-3) var(--space-3);
  text-align: left;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  background: var(--color-field);
  white-space: nowrap;
}

.mc-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.mc-table tbody tr[data-href] { cursor: pointer; }
.mc-table tbody tr:hover { background: var(--color-field); }

.mc-time {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-control);
  background: var(--color-field);
  font-variant-numeric: tabular-nums;
}

/* ---------- Баннеры ---------- */

.mc-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.mc-banner--warning { border-color: transparent; background: var(--color-warning-subtle); color: var(--color-warning); }
.mc-banner--danger { border-color: transparent; background: var(--color-danger-subtle); color: var(--color-danger); }
.mc-banner--success { border-color: transparent; background: var(--color-success-subtle); color: var(--color-success-text); }

/* ---------- Модалки и шторки ---------- */

.mc-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: var(--color-overlay);
}

.mc-modal {
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - 2 * var(--space-4));
  overflow-y: auto;
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
}

/* На телефоне модалка становится нижней шторкой: до неё дотягивается большой палец. */
@media (max-width: 599px) {
  .mc-overlay { place-items: end stretch; padding: 0; }
  .mc-modal {
    max-width: none;
    max-height: 92dvh;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  }
}

/* ---------- Навигация кабинетов ---------- */

.mc-nav { display: flex; flex-direction: column; gap: var(--space-1); }

.mc-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-control);
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-text);
  text-decoration: none;
}

.mc-nav-item:hover { background: var(--color-field); }
.mc-nav-item[aria-current="page"] { background: var(--color-primary-subtle); color: var(--color-primary-text); }

/* ---------- Файлы ---------- */

.mc-file { display: flex; align-items: center; gap: var(--space-3); }
.mc-file__icon { flex: none; color: var(--color-link); }
.mc-file__name { font-weight: var(--font-weight-medium); }
.mc-file__size { font-size: var(--font-size-caption); color: var(--color-text-secondary); }

.mc-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-card);
  text-align: center;
}

/* ---------- Мобилка: зона касания ---------- */

@media (pointer: coarse) {
  .mc-btn,
  .mc-input,
  .mc-select { min-height: var(--size-touch-min); }
  .mc-slot,
  .mc-pill { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* Заголовок получает фокус после перехода (FocusOnNavigate) — для экранных
   дикторов. Рамку фокуса у него не рисуем: мышью туда не попасть. */
h1:focus,
h1:focus-visible {
  outline: none;
}