/*
 * Личный кабинет клиента: Cabinet 01–07 и подтверждение переноса (Booking 07).
 *
 * Подключается вместе с client.css — оттуда шапка и обёртка содержимого,
 * здесь только сама начинка. Экран переноса (Booking 06) живёт на booking.css:
 * он часть флоу записи, а не кабинета.
 *
 * Значения — только из tokens.css. Где в прототипе стояло значение вне шкалы,
 * взята ближайшая ступень или доля контейнера:
 *
 * - заголовок 40px — ступень h2; «Вы ещё не записывались» 26px — h3 (28);
 * - аватар 40px в списке и 56px в деталях — ступени --space-32 и --space-48;
 * - колонка действий 360px в деталях — 4 колонки сетки контейнера;
 * - ширина модального окна 440px — 5 колонок той же сетки.
 *
 * Чего в системе нет: шкалы z-index. Модальное окно обязано лежать выше липкой
 * шапки, поэтому здесь стоит вторая единица — на одну больше, чем у шапки
 * в client.css. Появится третий слой — понадобится шкала, и это вопрос
 * к дизайну, а не к вёрстке.
 */

/*
 * Ссылки. В client.css такое правило есть только у шапки, а здесь ссылками
 * работают целые карточки записей — без него они пришли бы синими
 * и подчёркнутыми из настроек браузера.
 *
 * Селектор обязан быть без класса. `.client-page a` — это (0,1,1), и он
 * перебивает `.btn-primary` (0,1,0): «Записаться» становится чёрной на чёрном.
 * Ровно та же ловушка уже была в шапке с `.client-header a` (см. 3.22),
 * и лечится она так же — голым тегом (0,0,1), который слабее любого класса
 * кнопки. Цвет там, где он нужен, каждая ссылка задаёт у себя сама.
 */
a { color: inherit; text-decoration: none; }

/* --- Заголовок раздела ------------------------------------------------------------ */

.cabinet-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-24);
  margin-bottom: var(--space-32);
}

.cabinet-head-left { display: flex; flex-direction: column; gap: var(--space-24); }

.cabinet-title {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

/* Вкладки «Активные» и «История». Те же значения, что в booking.css:
   файл общий на флоу записи, тащить его сюда ради двух вкладок незачем */
.tabs {
  display: flex;
  gap: var(--space-4);
  border-bottom: var(--border-width-default) solid var(--color-input-border-disabled);
}

.tab {
  margin-bottom: calc(-1 * var(--border-width-default));
  padding: var(--space-12) var(--space-24);
  border: 0;
  border-bottom: var(--border-width-focus) solid transparent;
  background: transparent;
  color: var(--color-button-ghost-text-disabled);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.tab:hover { color: var(--color-text-secondary); }
.tab:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

.tab.is-active { border-bottom-color: var(--color-text-primary); color: var(--color-text-primary); }

/* --- Список активных записей (Cabinet 01) -------------------------------------------
 * Карточка — ссылка на детали, а кнопки внутри неё ведут в другие места.
 * Поэтому кнопки останавливают всплытие: клик по «Отменить» не должен
 * заодно открывать детали.
 */

.booking-list { display: flex; flex-direction: column; gap: var(--space-24); }

.booking-row {
  position: relative;
  display: grid;
  grid-template-columns: auto var(--border-width-hairline) minmax(0, 1fr) minmax(0, 1.4fr) auto auto auto;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-24);
  border: var(--border-width-hairline) solid var(--color-input-border-disabled);
  border-radius: var(--radius-lg);
  background: var(--color-background);
}
.booking-row:hover { border-color: var(--color-text-primary); }

/* Ближайший визит: обведён и с подложкой, как в прототипе */
.booking-row.is-next {
  border-width: var(--border-width-focus);
  border-color: var(--color-text-primary);
  background: var(--color-surface);
}

/* Бейдж срочности сидит на верхней границе карточки */
.booking-badge {
  position: absolute;
  top: calc(-1 * var(--space-12));
  left: var(--space-24);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--color-surface-inverse);
  color: var(--color-text-on-inverse);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: normal;
  white-space: nowrap;
}

.booking-when { display: flex; flex-direction: column; gap: var(--space-4); }
.booking-date { font-size: var(--font-size-body-small); color: var(--color-text-secondary); white-space: nowrap; }
.booking-time {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-extrabold);
  white-space: nowrap;
}

.booking-sep { width: var(--border-width-hairline); height: var(--space-48); background: var(--color-input-border-disabled); }

.booking-master { display: flex; align-items: center; gap: var(--space-12); min-width: 0; }
.booking-master-name { font-size: var(--font-size-body-small); font-weight: var(--font-weight-bold); }

.booking-services {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary);
}

.booking-price { font-size: var(--font-size-body-medium); font-weight: var(--font-weight-extrabold); white-space: nowrap; }

.booking-actions { display: flex; gap: var(--space-8); }

/* --- Аватар мастера ------------------------------------------------------------------ */

.avatar {
  width: var(--space-32);
  height: var(--space-32);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: normal;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: var(--space-48); height: var(--space-48); font-size: var(--font-size-body-small); }

/* Внутри выделенной карточки подложка аватара сливается с фоном — светлее её
   в системе ничего нет, поэтому берём саму страницу */
.booking-row.is-next .avatar { background: var(--color-background); }

/* --- Статус записи --------------------------------------------------------------------
   Пары «цвет + подложка» из статусных токенов. Вне бейджей статусный цвет
   по правилам системы не используется. */

.status {
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: normal;
  white-space: nowrap;
  width: fit-content;
}
.status-done { background: var(--color-success-surface); color: var(--color-success); }
.status-wait { background: var(--color-warning-surface); color: var(--color-warning); }
.status-off { background: var(--color-danger-surface); color: var(--color-danger); }
.status-now { background: var(--color-surface-inverse); color: var(--color-text-on-inverse); }

/* --- Пустой кабинет (Cabinet 02) и «нет активных» (Cabinet 03) ------------------------ */

.cabinet-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-16);
  padding-block: var(--space-96);
}

.cabinet-empty-icon {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  color: var(--color-input-border-disabled);
}

.cabinet-empty-title {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

.cabinet-empty-text { margin: 0; font-size: var(--font-size-body-medium); color: var(--color-text-secondary); }
.cabinet-empty .btn { margin-top: var(--space-8); }

/* Вариант «активных нет, но визиты были»: блок уже, снизу отчёркнут */
.cabinet-empty-short { padding-block: var(--space-48); border-bottom: var(--border-width-hairline) solid var(--color-input-border-disabled); }

.cabinet-last { display: flex; flex-direction: column; gap: var(--space-16); margin-top: var(--space-32); }
.cabinet-last-title { font-size: var(--font-size-body-medium); font-weight: var(--font-weight-bold); }

.cabinet-last-card {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-24);
  border: var(--border-width-hairline) solid var(--color-input-border-disabled);
  border-radius: var(--radius-lg);
}
.cabinet-last-body { flex-grow: 1; min-width: 0; }
.cabinet-last-name { font-size: var(--font-size-body-small); font-weight: var(--font-weight-bold); }
.cabinet-last-note { font-size: var(--font-size-body-small); color: var(--color-text-secondary); }

/* --- История (Cabinet 04) --------------------------------------------------------------
   Фильтры считаются на клиенте: у `GET /api/bookings` параметров, кроме scope,
   нет, а история одного клиента приходит одним ответом и невелика. */

.filters { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-bottom: var(--space-32); }

.select {
  padding: var(--space-8) var(--space-16);
  border: var(--border-width-default) solid var(--color-input-border);
  border-radius: var(--radius-md);
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.select:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

.history {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-width-hairline) solid var(--color-input-border-disabled);
  border-radius: var(--radius-lg);
}

.history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr) auto minmax(0, auto) auto;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-16) var(--space-24);
}
.history-row + .history-row { border-top: var(--border-width-hairline) solid var(--color-input-border-disabled); }
.history-row:hover { background: var(--color-surface); }

.history-date { font-size: var(--font-size-body-small); color: var(--color-text-secondary); white-space: nowrap; }
.history-master { font-size: var(--font-size-body-small); font-weight: var(--font-weight-bold); }
.history-services { font-size: var(--font-size-body-small); color: var(--color-text-secondary); }
.history-price { font-size: var(--font-size-body-small); font-weight: var(--font-weight-bold); white-space: nowrap; }
.history-status { display: flex; flex-direction: column; gap: var(--space-4); }

.history-note {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  letter-spacing: normal;
  color: var(--color-button-ghost-text-disabled);
}

/* --- Детали записи (Cabinet 05) --------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-32);
  font-size: var(--font-size-body-small);
  color: var(--color-text-secondary);
}
.crumbs a { text-decoration: underline; text-underline-offset: var(--space-4); }
.crumbs strong { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--container-max-width) / var(--container-columns) * 4);
  gap: var(--space-48);
  align-items: start;
}

.detail-main { display: flex; flex-direction: column; gap: var(--space-32); }

.detail-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-32);
  border: var(--border-width-hairline) solid var(--color-input-border-disabled);
  border-radius: var(--radius-lg);
}

.detail-master { display: flex; align-items: center; gap: var(--space-16); }
.detail-master-name { font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); }
.detail-master-spec { font-size: var(--font-size-body-small); color: var(--color-text-secondary); }

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-16);
  padding-top: var(--space-24);
  border-top: var(--border-width-hairline) solid var(--color-input-border-disabled);
  font-size: var(--font-size-body-small);
}
.detail-row dt { color: var(--color-text-secondary); }
.detail-row dd { margin: 0; font-weight: var(--font-weight-semibold); text-align: right; }

.detail-services {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-24);
  border-top: var(--border-width-hairline) solid var(--color-input-border-disabled);
}
.detail-service { display: flex; justify-content: space-between; gap: var(--space-16); font-size: var(--font-size-body-small); }
.detail-service b { font-weight: var(--font-weight-semibold); }

.detail-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  padding-top: var(--space-24);
  border-top: var(--border-width-hairline) solid var(--color-input-border-disabled);
}
.detail-total-label { font-size: var(--font-size-body-medium); font-weight: var(--font-weight-extrabold); }
.detail-total-value { font-size: var(--font-size-h4); font-weight: var(--font-weight-extrabold); }

.detail-comment {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-24);
  border-top: var(--border-width-hairline) solid var(--color-input-border-disabled);
}
.detail-comment-label { font-size: var(--font-size-body-small); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.detail-comment-text { font-size: var(--font-size-body-small); line-height: var(--line-height-body-small); color: var(--color-text-secondary); }

/* Номер записи набран табличными цифрами: моноширинного шрифта в системе нет */
.detail-code {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  font-size: var(--font-size-body-small);
  color: var(--color-button-ghost-text-disabled);
}
.detail-code b { font-weight: var(--font-weight-regular); font-variant-numeric: tabular-nums; }

/* История записи — лента событий с отчёркиванием слева */
.detail-events { display: flex; flex-direction: column; gap: var(--space-12); }
.detail-events-title { font-size: var(--font-size-body-medium); font-weight: var(--font-weight-bold); }

.detail-events-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-left: var(--space-4);
  border-left: var(--border-width-default) solid var(--color-input-border-disabled);
}
.detail-event {
  padding-left: var(--space-16);
  font-size: var(--font-size-body-small);
  color: var(--color-text-secondary);
}

.detail-side {
  position: sticky;
  top: var(--space-96);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
  border: var(--border-width-hairline) solid var(--color-input-border-disabled);
  border-radius: var(--radius-lg);
}
.detail-side .btn { width: 100%; }

.detail-side-link {
  align-self: center;
  margin-top: var(--space-4);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
}

.detail-side-note {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-caption);
  letter-spacing: normal;
  color: var(--color-text-secondary);
  text-align: center;
}

/* --- Окно отмены (Cabinet 06 и 07) --------------------------------------------------------
   Одно окно на две ситуации: бесплатная отмена и поздняя. Что показать,
   решает `cancellation.is_free_now` из деталей записи. */

/*
 * Окно лежит вне `.client-page`, а шрифт и цвета в client.css заданы именно
 * на ней, а не на body — поэтому здесь они повторяются. Иначе модалка
 * отрисовалась бы системным шрифтом браузера.
 */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: var(--space-24);
  background: color-mix(in srgb, var(--color-surface-inverse) 55%, transparent);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  -webkit-font-smoothing: antialiased;
}

/*
 * Окно разделено на две части: прокручиваемую и всегда видимую.
 *
 * На низком экране (телефон в альбомной ориентации, ноутбук с открытой
 * консолью) содержимое окна выше экрана. Если прокручивать окно целиком,
 * кнопки «Не отменять» и «Отменить запись» уезжают за нижний край, и человек
 * видит вопрос без ответа. Поэтому прокручивается только `.modal-body`,
 * а `.modal-foot` с кнопками остаётся на месте при любой высоте.
 */
.modal {
  width: 100%;
  max-width: calc(var(--container-max-width) / var(--container-columns) * 5);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-background);
  box-shadow: var(--shadow-md);
}

.modal-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-32) var(--space-32) var(--space-24);
}

.modal-foot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24) var(--space-32) var(--space-32);
}

.modal-title {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

.modal-text {
  margin: 0;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary);
}

.modal-rules { margin: 0; font-size: var(--font-size-body-small); color: var(--color-text-secondary); }

/* Поздняя отмена: предупреждение из Cabinet 07 */
.modal-warning {
  margin: 0;
  padding: var(--space-12) var(--space-16);
  border: var(--border-width-hairline) solid var(--color-warning);
  border-radius: var(--radius-lg);
  background: var(--color-warning-surface);
  color: var(--color-warning);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body-small);
}

.modal-field { display: flex; flex-direction: column; gap: var(--space-4); }
.modal-field label { font-size: var(--font-size-body-small); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.modal-field .select { width: 100%; }

.modal-actions { display: flex; gap: var(--space-12); }
.modal-actions .btn { flex: 1; }

.modal-link {
  align-self: center;
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-pill);
  padding: var(--button-padding-medium);
  font-family: var(--font-family-base);
  font-size: var(--button-font-size-medium);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-button);
  letter-spacing: var(--letter-spacing-button);
  cursor: pointer;
}
.btn:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

.btn-primary { background: var(--color-button-primary-background); color: var(--color-button-primary-text); }
.btn-primary:hover { background: var(--color-button-primary-background-hover); }
.btn-primary:disabled {
  background: var(--color-button-primary-background-disabled);
  color: var(--color-button-primary-text-disabled);
  cursor: default;
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-button-secondary-border);
  color: var(--color-button-secondary-text);
}
.btn-secondary:hover { background: var(--color-button-secondary-background-hover); }

.btn-ghost { background: transparent; color: var(--color-button-ghost-text); }
.btn-ghost:hover { background: var(--color-button-ghost-background-hover); }

/* Отмена записи — необратимое действие, у него свой цвет */
.btn-danger {
  background: transparent;
  border-color: var(--color-button-danger-border);
  color: var(--color-button-danger-text-outline);
}
.btn-danger:hover { background: var(--color-button-danger-background); color: var(--color-button-danger-text); }

.btn-danger-solid { background: var(--color-button-danger-background); border-color: var(--color-button-danger-border); color: var(--color-button-danger-text); }
.btn-danger-solid:hover { background: var(--color-button-danger-background-hover); border-color: var(--color-button-danger-background-hover); }

.btn-danger-solid:disabled {
  background: var(--color-button-primary-background-disabled);
  border-color: var(--color-button-primary-background-disabled);
  color: var(--color-button-primary-text-disabled);
  cursor: default;
}

.btn-sm { padding: var(--button-padding-small); font-size: var(--button-font-size-small); }

/* --- Ответ сервера ---------------------------------------------------------------------
   Правило 7: и отказ, и сбой человек читает на странице. */

.load-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  margin-bottom: var(--space-32);
  padding: var(--space-16);
  border: var(--border-width-hairline) solid var(--color-danger);
  border-radius: var(--radius-lg);
  background: var(--color-danger-surface);
  color: var(--color-danger);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
}
.load-error .btn { border-color: var(--color-button-danger-border); color: var(--color-button-danger-text-outline); background: transparent; }
.load-error .btn:hover { background: var(--color-button-danger-background); color: var(--color-button-danger-text); }

.form-error {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-16);
  border: var(--border-width-hairline) solid var(--color-danger);
  border-radius: var(--radius-lg);
  background: var(--color-danger-surface);
  color: var(--color-danger);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
}
.form-error-code {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-caption);
  letter-spacing: normal;
}

.data-note { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-body-small); }

/* Пункт, за которым ещё нет страницы, — текстом, а не ссылкой в никуда */
.pending { text-decoration: underline; text-underline-offset: var(--space-4); }

/* --- Загрузка ---------------------------------------------------------------------------- */

.loading {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--space-32);
  font-size: var(--font-size-body-small);
  color: var(--color-text-secondary);
}

.spinner {
  width: var(--space-32);
  height: var(--space-32);
  flex-shrink: 0;
  border: var(--border-width-focus) solid var(--color-input-border-disabled);
  border-top-color: var(--color-text-primary);
  border-radius: var(--radius-pill);
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

/* --- Уведомления (Notif 01) ---------------------------------------------------
   Лента в колонку: значок события, текст, время справа и точка непрочитанного.
   Ширина ограничена — строка длиной во весь экран читается плохо, в прототипе
   у ленты тоже своя колонка. */

.notif-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  max-width: var(--container-max-width);
}

.notif-title {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

.notif-read-all {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
  cursor: pointer;
}
.notif-read-all:hover { color: var(--color-text-primary); }
.notif-read-all:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }
.notif-read-all:disabled { color: var(--color-button-ghost-text-disabled); cursor: default; }

.notif-list {
  margin-top: var(--space-32);
  max-width: var(--container-max-width);
  border: var(--border-width-hairline) solid var(--color-input-border-disabled);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.notif-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-24);
  border-top: var(--border-width-hairline) solid var(--color-input-border-disabled);
  background: var(--color-background);
  color: inherit;
  text-decoration: none;
}
.notif-row:first-child { border-top: 0; }
.notif-row:hover { background: var(--color-surface); }
.notif-row:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

/* Непрочитанное выделено подложкой и жирным заголовком — как в прототипе */
.notif-row.is-unread { background: var(--color-surface); }
.notif-row.is-unread .notif-row-title { font-weight: var(--font-weight-extrabold); }

.notif-icon {
  width: var(--space-32);
  height: var(--space-32);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-bold);
}

/* Пары «цвет + подложка» из статусных токенов: по правилам системы
   статусный цвет живёт в бейджах и значках, а не в тексте */
.notif-icon-plain { background: var(--color-surface); color: var(--color-text-primary); }
.notif-icon-success { background: var(--color-success-surface); color: var(--color-success); }
.notif-icon-warning { background: var(--color-warning-surface); color: var(--color-warning); }
.notif-icon-danger { background: var(--color-danger-surface); color: var(--color-danger); }
.notif-icon-info { background: var(--color-info-surface); color: var(--color-info); }

.notif-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.notif-row-title {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body-small);
  overflow-wrap: anywhere;
}

.notif-row-text {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

.notif-row-code {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-caption);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--color-text-secondary);
}

.notif-action { margin-top: var(--space-8); align-self: flex-start; }

.notif-time {
  flex-shrink: 0;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  letter-spacing: normal;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.notif-dot {
  width: var(--space-8);
  height: var(--space-8);
  flex-shrink: 0;
  margin-top: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-text-primary);
}

/* --- Планшет: 768–1199px -------------------------------------------------------------- */

@media (max-width: 1199px) {
  /* Карточка записи перестаёт быть одной строкой: в семь колонок она
     на планшете не встаёт */
  .booking-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .booking-sep { display: none; }
  .booking-services { grid-column: 1 / -1; }
  .booking-actions { grid-column: 1 / -1; }

  .history-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .history-services { grid-column: 1 / -1; }

  .detail-layout { grid-template-columns: 7fr 5fr; gap: var(--space-32); }
}

/* --- Мобильный: до 767px ----------------------------------------------------------------- */

@media (max-width: 767px) {
  .cabinet-title { font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
  .cabinet-head { gap: var(--space-16); }
  .cabinet-head .btn { width: 100%; }
  .tab { padding-inline: var(--space-12); }

  /*
   * Строка записи и строка истории перестают быть строками: на узком экране
   * это карточка в один столбец — дата и время, мастер, услуги, цена, статус,
   * действия. Таблицей это не читается: колонки схлопываются в кашу,
   * а горизонтальная прокрутка на телефоне хуже, чем высокая карточка.
   */
  .booking-row,
  .history-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
    padding: var(--space-24) var(--space-16);
  }

  /* В карточке у ячеек нет соседей справа — тянуть их незачем */
  .history-row { align-items: start; }

  /* Кнопки во всю ширину карточки: по ним и целиться проще, и промахнуться
     мимо соседней сложнее. В .booking-actions работает flex, в строке
     истории кнопка лежит прямо в гриде — там нужна ширина */
  .booking-actions .btn { flex: 1; }
  .history-row .btn { width: 100%; }

  .filters { gap: var(--space-8); }
  .filters .select { flex: 1 1 auto; }

  .detail-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .detail-side { position: static; }
  .detail-card { padding: var(--space-24); }

  /* Дата и время в деталях не должны прижиматься к правому краю в одну
     строку с подписью — пусть встают под ней */
  .detail-row { flex-wrap: wrap; gap: var(--space-4); }
  .detail-row dd { text-align: left; }

  .scrim { padding: var(--space-16); }
  .modal-body { padding: var(--space-24) var(--space-24) var(--space-16); }
  .modal-foot { padding: var(--space-16) var(--space-24) var(--space-24); }
  .modal-actions .btn { flex: 1 1 auto; }

  /*
   * Уведомления: время уходит под текст.
   *
   * В строку рядом с текстом оно не помещается — на 375px колонка «2 ч назад»
   * отнимала у заголовка почти треть ширины, и строка вырастала до 284px
   * из-за переносов. Прятать время нельзя (правило 10), поэтому оно
   * переносится на свою строку и встаёт под текстом, отступив на ширину значка.
   *
   * Порядок задаётся явно: в разметке время идёт до точки непрочитанного,
   * а на узком экране точка должна остаться в первой строке рядом с текстом.
   */
  .notif-row { flex-wrap: wrap; padding: var(--space-16); }
  .notif-dot { order: 3; }
  /* Отступ внутренний, а не внешний: при flex-basis: 100% внешний прибавляется
     к полной ширине, строка вылезает из блока и время обрезается */
  .notif-time {
    order: 4;
    flex-basis: 100%;
    padding-left: calc(var(--space-32) + var(--space-16));
  }
}