/*
 * Личный кабинет: `C-01` Мои записи с табами «Активные» и «История»,
 * пустые состояния и окно отмены `C-M1`.
 */

.cabinet {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-7) var(--page-padding) var(--space-8);
}

.cabinet__title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  font-weight: var(--text-h3-weight);
  letter-spacing: var(--text-h3-tracking);
  margin: 0 0 var(--space-6);
}

/* ─── Табы ───────────────────────────────────────────────────────────────── */

.tabs {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-6);
}

.tabs__list {
  display: flex;
  gap: var(--space-5);
}

.tabs__item {
  padding: var(--space-3) var(--space-1);
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-300);
  border-bottom: var(--border-width-accent) solid transparent;
}

.tabs__item:hover {
  color: var(--color-text-primary);
}

.tabs__item[aria-current='page'] {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-text-primary);
}

.tabs__action {
  margin-bottom: var(--space-3);
}

/* ─── Чип статуса ────────────────────────────────────────────────────────── */

.chip {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  white-space: nowrap;
}

.chip--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.chip--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.chip--error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.chip--neutral {
  background: var(--button-secondary-bg-hover);
  color: var(--color-text-secondary);
}

/* ─── Карточка визита ────────────────────────────────────────────────────── */

.visits {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.visit {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* Ближайший визит выделен рамкой и фоном — как в прототипе. */
.visit--next {
  border: var(--border-width-accent) solid var(--color-text-primary);
  background: var(--button-secondary-bg-hover);
  padding: calc(var(--space-5) - var(--border-width));
}

.visit__badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-caption-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  margin-bottom: var(--space-2);
}

/* Блок, а не строка: иначе дата встаёт в одну строку с бейджем отсчёта. */
.visit__date {
  display: block;
  font-size: var(--text-body-l-size);
  font-weight: var(--font-weight-bold);
}

.visit__time {
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
}

.visit__master {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.visit__avatar {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-border);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-bold);
  flex: 0 0 auto;
}

.visit__master-name {
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-bold);
}

.visit__services {
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
}

.visit__side {
  text-align: right;
}

.visit__price {
  font-size: var(--text-body-m-size);
  font-weight: var(--font-weight-bold);
  margin: var(--space-3) 0;
}

.visit__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* ─── История ────────────────────────────────────────────────────────────── */

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

.filters select {
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--text-body-s-size);
  color: var(--field-text);
  background: var(--field-bg);
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--field-radius);
}

.history__row {
  display: grid;
  grid-template-columns: 120px 1fr 1fr auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.history__date {
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
}

.history__master {
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
}

.history__service {
  font-size: var(--text-body-s-size);
}

.history__note {
  font-size: var(--text-caption-size);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--neutral-300);
  margin-top: var(--space-1);
}

/* ─── Пустые состояния ───────────────────────────────────────────────────── */

.empty {
  text-align: center;
  padding: var(--space-9) 0;
}

.empty__mark {
  font-size: var(--text-display-size);
  line-height: 1;
  color: var(--color-border);
  margin-bottom: var(--space-5);
}

.empty__title {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  font-weight: var(--text-h4-weight);
  margin-bottom: var(--space-2);
}

.empty__text {
  font-size: var(--text-body-s-size);
  color: var(--neutral-300);
  margin-bottom: var(--space-6);
}

/* «Ближайших визитов нет» плюс блок последнего визита. */
.empty--inline {
  padding: var(--space-7) 0 var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-7);
}

.last-visit__label {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--neutral-300);
  margin-bottom: var(--space-4);
}

.last-visit {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.last-visit__body {
  flex: 1;
  min-width: 0;
}

.last-visit__master {
  font-size: var(--text-body-m-size);
  font-weight: var(--font-weight-bold);
}

.last-visit__meta {
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
}

/* ─── Окно отмены ────────────────────────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(10, 10, 10, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.dialog {
  width: 420px;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.dialog__title {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  font-weight: var(--text-h4-weight);
  margin: 0 0 var(--space-5);
}

.dialog__card {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.dialog__master {
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-1);
}

.dialog__when {
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.dialog__service {
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
}

.dialog__note {
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.dialog__field {
  margin-bottom: var(--space-5);
}

.dialog__label {
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
}

.dialog__label-hint {
  color: var(--neutral-300);
  font-weight: var(--font-weight-regular);
}

.dialog__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/*
 * Кнопки делят строку пополам, но на узком экране встают друг под друга:
 * двум пилюлям с длинными подписями иначе не хватает ширины окна.
 *
 * Сжиматься ниже своей подписи кнопка не должна: `min-width: 0` позволял это,
 * и в полосе ширин около 380 точек «Отменить запись» не влезала в пилюлю —
 * перенести подпись нельзя (`.btn` держит `white-space: nowrap`), а окно с
 * `overflow-y: auto` обрезало её по краю. Без этого послабления пара просто
 * переносится на вторую строку ровно тогда, когда перестаёт помещаться.
 */
.dialog__action {
  flex: 1 1 140px;
}

.dialog__reschedule {
  text-align: center;
  margin-top: var(--space-4);
}

/* Предупреждение о поздней отмене — тот же блок, что и ошибка, но статусом
   «ожидает»: это не отказ, а предупреждение. */
.form-alert--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.form-alert--warning::before {
  background: var(--color-warning);
}

/* ─── Тост ───────────────────────────────────────────────────────────────── */

/* «Запись отменена» после возврата из окна отмены. */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-7);
  transform: translateX(-50%);
  z-index: 80;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-s-size);
}

/* ─── Карточка записи `C-02` ─────────────────────────────────────────────── */

.crumbs {
  font-size: var(--text-body-s-size);
  color: var(--neutral-300);
  margin-bottom: var(--space-5);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.crumbs a {
  color: var(--neutral-300);
}

.crumbs a:hover {
  color: var(--color-text-secondary);
}

.crumbs__sep {
  color: var(--neutral-200);
}

.crumbs__here {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.card-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-7);
  align-items: start;
}

.card-master {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.card-master__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--neutral-100);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-l-size);
  font-weight: var(--font-weight-bold);
  flex: 0 0 auto;
}

.card-master__name {
  font-size: var(--text-body-m-size);
  font-weight: var(--font-weight-bold);
}

.card-master__spec {
  font-size: var(--text-body-s-size);
  color: var(--neutral-300);
}

/* Мастер и чип статуса разведены по краям строки. */
.card-master .chip {
  margin-left: auto;
}

.facts {
  display: flex;
  gap: var(--space-7);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.fact {
  margin-bottom: var(--space-6);
}

.fact__label {
  font-size: var(--text-caption-size);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--neutral-300);
  margin-bottom: var(--space-1);
}

.fact__value {
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
}

.fact__value--quiet {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
}

.facts .fact {
  margin-bottom: 0;
}

.card-services {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.card-services__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-body-s-size);
  margin-bottom: var(--space-3);
}

.card-services__price {
  font-weight: var(--font-weight-medium);
}

.card-services__divider {
  height: var(--border-width);
  background: var(--color-border);
  margin: var(--space-4) 0;
}

.card-services__row--total {
  margin-bottom: 0;
  font-size: var(--text-body-m-size);
  font-weight: var(--font-weight-bold);
}

.card-history {
  border-top: var(--border-width) solid var(--color-border);
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card-history__label {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--neutral-300);
  margin-bottom: var(--space-2);
}

.card-history__row {
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
}

.card-actions {
  position: sticky;
  top: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
}

.card-actions .chip {
  align-self: center;
}

.card-actions__rules {
  font-size: var(--text-caption-size);
  font-weight: var(--font-weight-medium);
}

.card-actions__note {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--neutral-300);
}

/* ─── Уведомления `C-03` ─────────────────────────────────────────────────── */

/* Лента уже, чем кабинет: строка в 960 точек читается хуже, чем в 720. */
.cabinet--narrow {
  max-width: 720px;
}

.notif__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.cabinet__title--flush {
  margin-bottom: 0;
}

.notif__read-all {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.notif__read-all:disabled {
  color: var(--neutral-300);
  border-bottom-color: var(--neutral-300);
  cursor: default;
}

.notifs {
  display: flex;
  flex-direction: column;
}

.notif {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border-bottom: var(--border-width) solid var(--color-border);
  cursor: pointer;
}

/* Непрочитанное выделено фоном, жирным текстом и точкой — как в прототипе. */
.notif--unread {
  background: var(--slot-unavailable-bg);
}

.notif--unread .notif__text {
  font-weight: var(--font-weight-bold);
}

.notif:hover {
  background: var(--button-secondary-bg-hover);
}

.notif__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-m-size);
  font-weight: var(--font-weight-bold);
  flex: 0 0 auto;
}

.notif__icon--neutral {
  background: var(--slot-unavailable-bg);
  color: var(--color-text-primary);
}

.notif__icon--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.notif__icon--info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.notif__icon--error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.notif__icon--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.notif__body {
  flex: 1;
  min-width: 0;
}

.notif__text {
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-line);
  margin-bottom: var(--space-1);
}

.notif__time {
  font-size: var(--text-caption-size);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--neutral-300);
}

.notif__action {
  margin-top: var(--space-3);
}

.notif__dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-text-primary);
  flex: 0 0 auto;
  margin-top: var(--space-2);
}

/* ─── Профиль `C-04` ─────────────────────────────────────────────────────── */

.profile {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-7);
  align-items: start;
}

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

.profile__nav-item {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
}

.profile__nav-item--current {
  background: var(--slot-unavailable-bg);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.profile__nav-item:hover {
  color: var(--color-text-primary);
}

.profile__card {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  max-width: 480px;
}

.profile__person {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.profile__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--neutral-100);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-h4-size);
  font-weight: var(--font-weight-bold);
  flex: 0 0 auto;
}

.profile__name {
  font-size: var(--text-body-l-size);
  font-weight: var(--font-weight-bold);
}

.profile__role {
  font-size: var(--text-caption-size);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--neutral-300);
}

.profile__field {
  margin-bottom: var(--space-4);
}

.profile__label {
  font-size: var(--text-caption-size);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--neutral-300);
  margin-bottom: var(--space-1);
}

.profile__value {
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
}

.profile__note {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  margin: var(--space-5) 0 0;
}

.profile__actions {
  margin-top: var(--space-5);
}

/* ─── Узкий экран ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .card-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .card-actions {
    position: static;
  }

  /* Боковое меню профиля встаёт над содержимым строкой. */
  .profile {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .profile__nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .visit {
    grid-template-columns: 1fr;
  }

  .visit__side {
    text-align: left;
  }

  .visit__actions {
    justify-content: flex-start;
  }

  /*
   * История на узком экране — карточки, а не таблица. Пять колонок не
   * сжимаются: дата и мастер оказывались по разным краям строки, и читать это
   * приходилось зигзагом. Порядок в разметке сохранён, меняется только
   * раскладка: дата и чип статуса в первой строке, дальше мастер, услуги и
   * кнопка.
   */
  .history__row {
    grid-template-columns: 1fr auto;
    gap: var(--space-2) var(--space-3);
    align-items: start;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
  }

  .history__date {
    grid-column: 1;
    grid-row: 1;
  }

  .history__row .chip {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .history__master,
  .history__row > div:nth-of-type(2) {
    grid-column: 1 / -1;
  }

  .history__row > .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  /* Фильтры во всю ширину: так в них проще попасть. */
  .filters select {
    flex: 1 1 100%;
  }

  /* ─── Окно отмены ──────────────────────────────────────────────────────── */

  /*
   * Окно помещается по высоте, а кнопки видны всегда: содержимое прокручивается
   * внутри окна, а строка действий прилипает к его низу. Иначе на невысоком
   * экране «Отменить запись» уезжала за край, и окно выглядело сломанным.
   */
  .overlay {
    padding: var(--space-3);
  }

  .dialog {
    max-height: 88vh;
    padding: var(--space-5);
  }

  .dialog__actions {
    position: sticky;
    bottom: calc(-1 * var(--space-5));
    background: var(--color-surface);
    padding: var(--space-3) 0;
    margin-bottom: 0;
  }

  .dialog__reschedule {
    padding-top: var(--space-3);
  }
}