/* © 2026 МСВ. Все права защищены. Программа для ЭВМ охраняется ст. 1259, 1261 ГК РФ. Использование без разрешения правообладателя запрещено. Подробнее: /legal.html */
/* ============================================================
   МСВ — внутренние экраны резидента
   Меню, уведомления, заявки, документы, история оплат, репутация.
   ============================================================ */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  max-width: 460px;
  margin: 0 auto;
  padding: 0 var(--msv-s24) calc(var(--msv-tabbar) + var(--msv-s32));
}

/* ---------- Шапка вложенного экрана ---------- */

/* Единая левая линия (решение заказчика 21.09.2026): стрелка «Вернуться», заголовок
   раздела, подзаголовки и вводные абзацы стоят на той же линии, что и текст внутри
   карточек, — на 16 px правее края колонки (у карточек внутренний отступ 16). */
.head {
  display: flex;
  align-items: center;
  gap: var(--msv-s12);
  height: var(--msv-header);
  margin: 0 calc(var(--msv-s24) * -1) 0 0;
  /* слева — ничего: шапка стоит на той же линии, что и всё остальное */
  padding: 0 calc(var(--msv-s24) - 10px) 0 0;
}
/* Текст стоит на краю колонки, без собственного отступа (24.09.2026) */

.head__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--msv-tap);
  height: var(--msv-tap);
  color: var(--msv-graphite);
  border-radius: 50%;
  text-decoration: none;
}

.head__back:hover { background: var(--msv-n100); }
.head__back:focus-visible { outline: 2px solid var(--msv-violet); outline-offset: 2px; }

.head__title { flex: 1 1 auto; min-width: 0; margin: 0; }

/* ---------- Карточка профиля в меню ---------- */

.who {
  display: flex;
  align-items: center;
  gap: var(--msv-s12);
  margin-bottom: var(--msv-s24);
}

.who__face {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--msv-lavender);
  color: var(--msv-graphite);
  font-size: 18px;
  font-weight: 700;
}

.who__text { min-width: 0; }
.who__name { display: block; }
.who__place { display: block; margin-top: 2px; }

/* ---------- Список строк ---------- */

.rows {
  margin: 0 0 var(--msv-s24);
  background: var(--msv-white);
  border-radius: var(--msv-r12);
  overflow: hidden;
  box-shadow: var(--msv-e1);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--msv-s12);
  width: 100%;
  min-height: 56px;
  padding: var(--msv-s8) var(--msv-s16);
  color: var(--msv-graphite);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--msv-n100);
  font-family: var(--msv-font);
  font-size: var(--msv-body-size);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.row:last-child { border-bottom: 0; }
.row:hover { background: var(--msv-n100); }
.row:focus-visible { outline: 2px solid var(--msv-violet); outline-offset: -2px; }

.row__icon { flex: 0 0 auto; display: flex; color: var(--msv-graphite); }
.row__text { flex: 1 1 auto; min-width: 0; }
.row__name { display: block; }
.row__note { display: block; margin-top: 2px; }
.row__end { flex: 0 0 auto; display: flex; align-items: center; gap: var(--msv-s8); color: var(--msv-n300); }
.row__tag { color: var(--msv-n500); font-size: var(--msv-note-size); font-weight: 500; }

.row__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--msv-red);
  color: var(--msv-white);
  border-radius: 11px;
  font-size: 11px;
  font-weight: 600;
}

.row__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--msv-sky); }

.group__title { margin: 0 0 var(--msv-s12); }

/* ---------- Уведомления ---------- */

.note-card {
  display: flex;
  align-items: flex-start;
  gap: var(--msv-s12);
  margin-bottom: var(--msv-s12);
  padding: var(--msv-s16);
  background: var(--msv-white);
  border-radius: var(--msv-r12);
  box-shadow: var(--msv-e1);
}

.note-card--alarm {
  background: var(--msv-n100);
  border: 1px solid var(--msv-red);
  box-shadow: none;
}

.note-card__mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--msv-graphite);
}

.note-card__mark--pay { background: var(--msv-yellow); }
.note-card__mark--info { background: var(--msv-lavender); }
.note-card__mark--ok { background: var(--msv-lime); }
.note-card__mark--alarm { background: transparent; color: var(--msv-red); }
.note-card__mark svg { width: 24px; height: 24px; }
.note-card__mark--alarm svg { width: 30px; height: 30px; }

.note-card__body { flex: 1 1 auto; min-width: 0; }
.note-card__text { margin: 0; }
.note-card__when { display: block; margin-top: var(--msv-s8); }

/* ---------- Заявка технику ---------- */

.pick { display: grid; gap: var(--msv-s8); margin-bottom: var(--msv-s12); }

.pick__opt {
  display: flex;
  align-items: flex-start;
  gap: var(--msv-s12);
  padding: var(--msv-s12) var(--msv-s16);
  background: var(--msv-white);
  border: 2px solid transparent;
  border-radius: var(--msv-r12);
  box-shadow: var(--msv-e1);
  cursor: pointer;
  transition: border-color var(--msv-fast) var(--msv-ease);
}

.pick__opt:hover { border-color: var(--msv-n300); }
.pick__opt:focus-within { outline: 2px solid var(--msv-violet); outline-offset: 2px; }
.pick__opt:has(input:checked) { border-color: var(--msv-red); }

.pick__radio {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--msv-white);
  border: 2px solid var(--msv-n300);
  border-radius: 50%;
  cursor: pointer;
}

.pick__radio:checked { border-color: var(--msv-red); }

.pick__radio:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--msv-red);
}

.pick__name { display: block; font-weight: 600; }

.hint {
  margin: 0 0 var(--msv-s24);
  padding: var(--msv-s12) var(--msv-s16);
  background: var(--msv-ice);
  border-radius: var(--msv-r12);
  color: var(--msv-graphite);
}

.hint[hidden] { display: none; }

/* Стрелка своя, а не браузерная: браузер прижимает её к самому краю, и
   у скруглённых полей она выглядит приклеенной. Рисуем тот же шеврон, что
   у строк меню, и отводим ему 16 пикселей от края — шаг сетки из брендбука
   (решение заказчика 23.09.2026). */
.msv-select {
  display: block;
  width: 100%;
  height: var(--msv-field);
  padding: 0 44px 0 var(--msv-s16);
  font-family: var(--msv-font);
  font-size: var(--msv-body-size);
  color: var(--msv-graphite);
  background: var(--msv-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2334495E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--msv-s16) center;
  border: 2px solid var(--msv-n300);
  border-radius: var(--msv-r11);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.msv-select:focus { outline: none; border-color: var(--msv-graphite); }

/* ---------- История оплат ---------- */

.sum-card {
  margin-bottom: var(--msv-s24);
  padding: var(--msv-s20);
  background: var(--msv-graphite);
  border-radius: var(--msv-r20);
  color: var(--msv-white);
}

.sum-card__label { color: var(--msv-n300); }
.sum-card__value { margin: var(--msv-s8) 0 0; }
.sum-card__note { display: block; margin-top: var(--msv-s8); color: var(--msv-n100); }

.pay-head {
  display: grid;
  /* колонки поровну (решение заказчика 22.09.2026) */
  grid-template-columns: repeat(4, 1fr);
  gap: var(--msv-s12);
  padding: 0 var(--msv-s16) var(--msv-s8);
}

.pay-head span:last-child { text-align: left; }

.pay-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--msv-s12);
  align-items: baseline;
  padding: var(--msv-s12) var(--msv-s16);
  border-bottom: 1px solid var(--msv-n100);
  font-variant-numeric: tabular-nums;
}

.pay-row:last-child { border-bottom: 0; }
.pay-row b { font-weight: 600; text-align: left; white-space: nowrap; }
.pay-row__extra { display: block; margin-top: 2px; }

.good {
  margin: 0 0 var(--msv-s16);
  padding: var(--msv-s12) var(--msv-s16);
  background: var(--msv-lime);
  border-radius: var(--msv-r12);
  color: var(--msv-graphite);
}

/* ---------- Репутация ---------- */

.score {
  margin-bottom: var(--msv-s16);
  padding: var(--msv-s20);
  background: var(--msv-white);
  border-radius: var(--msv-r20);
  box-shadow: var(--msv-e1);
}

.score__value { margin: 0 0 var(--msv-s16); }
.score__bar { display: flex; gap: var(--msv-s4); }

.score__seg {
  flex: 1 1 0;
  height: 8px;
  border-radius: var(--msv-r4);
  background: var(--msv-n100);
}

.score__seg--on { background: var(--msv-lime); }

.log { margin: 0; }

.log__item {
  display: flex;
  gap: var(--msv-s12);
  padding: var(--msv-s12) 0;
  border-bottom: 1px solid var(--msv-n100);
}

.log__item:last-child { border-bottom: 0; }
.log__when { flex: 0 0 76px; }
.log__body { flex: 1 1 auto; min-width: 0; }
.log__what { display: block; font-size: 14px; font-weight: 600; }
.log__what--bad { color: var(--msv-red); }
.log__more { display: block; margin-top: 2px; font-size: 14px; line-height: 18px; color: var(--msv-n500); }

/* ---------- Подвал с главной кнопкой ---------- */

/* Кнопка действия — сразу за содержимым, на 24 px (правило для всех страниц, 21.09.2026) */
.foot { margin-top: 0; padding-top: var(--msv-s24); }

/* ---------- Плавающий таббар ---------- */

.tabbar {
  position: fixed;
  left: var(--msv-s16);
  right: var(--msv-s16);
  bottom: max(var(--msv-s16), env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--msv-s4);
  height: var(--msv-tabbar);
  max-width: 428px;
  margin: 0 auto;
  padding: 10px;
  background: var(--msv-graphite);
  border-radius: calc(var(--msv-tabbar) / 2);
  box-shadow: var(--msv-e2);
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--msv-s8);
  min-width: var(--msv-tap);
  height: var(--msv-tap);
  padding: 0 10px;
  color: var(--msv-n300);
  text-decoration: none;
  border-radius: calc(var(--msv-tap) / 2);
  transition: background var(--msv-base) var(--msv-ease), color var(--msv-base) var(--msv-ease);
}

.tab:focus-visible { outline: 2px solid var(--msv-white); outline-offset: 2px; }
.tab__cap { display: none; font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center; transform: translateY(-1px); }

.tab[aria-current="page"] {
  padding: 0 16px;
  background: var(--msv-red);
  color: var(--msv-white);
}

.tab[aria-current="page"] .tab__cap { display: block; }
.tab[aria-current="page"] > svg { display: none; }
/* Узкие экраны (360): подпись «Заявка на техника» длинная — ужимаем зазоры, чтобы полоса не переполнялась */
@media (max-width: 374px) { .tabbar { gap: 2px; } .tab[aria-current="page"] { padding: 0 12px; } }

/* Внесённый депозит — отдельный неброский тон */
.pay-row--deposit { background: color-mix(in srgb, var(--msv-ice) 12%, var(--msv-white)); }   /* едва заметный голубой (в восемь раз светлее подложки) */
.pay-row--deposit .msv-num { color: var(--msv-graphite); }

/* Скидка — отдельный столбик со стрелкой; текст раскрывается под строкой */
.disc {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font: 700 12px var(--msv-font); color: #4A6B12;
  background: var(--msv-lime); border: 0; border-radius: 10px; cursor: pointer;
}
.disc svg { transition: transform var(--msv-fast) var(--msv-ease); }
.disc[aria-expanded="true"] svg { transform: rotate(180deg); }
.disc__body { grid-column: 1 / -1; padding: var(--msv-s8) 0 0; color: var(--msv-n500); }
.disc__body[hidden] { display: none; }

/* ============================================================
   Широкий экран: планшет и монитор
   На телефоне — одна колонка 460. От 768 px колонка расширяется,
   список меню встаёт в две колонки; от 1100 px — ещё шире.
   Таббар остаётся по центру, как на телефоне.
   ============================================================ */

@media (min-width: 768px) {
  /* Ширина колонки на ПК одна для всех страниц — как у проверки заказа (form.css) */
  .page { max-width: 640px; padding-left: var(--msv-s32); padding-right: var(--msv-s32); }
  .head { margin-left: 0; margin-right: calc(var(--msv-s32) * -1); padding-left: 0; padding-right: calc(var(--msv-s32) - 10px); }
  /* Таббар — ровно по ширине содержимого колонки */
  .tabbar { max-width: 576px; }

  /* Все списки, включая меню, — в один столбец на любой ширине (решение заказчика 21.09.2026) */
}

@media (min-width: 1100px) {
  .page { max-width: 720px; }
  .tabbar { max-width: 656px; }
}

/* Заголовок раздела в шапке — тоже ссылка «назад», как и стрелка рядом.
   Выглядит как обычный заголовок; при наведении чуть светлеет. */
/* Шапка: стрелка с подписью «Вернуться» в первой строке, заголовок раздела — строкой ниже */
.head { flex-wrap: wrap; height: auto; min-height: var(--msv-header); padding-top: var(--msv-s8); padding-bottom: var(--msv-s12); }   /* под заголовком раздела — 12 px, как под подзаголовками (.group__title) */
.head__back:has(.head__back-label) { width: auto; padding-right: var(--msv-s8); border-radius: 22px; gap: 2px; }
.head__back:not(:has(.head__back-label)) { margin-left: -10px; }   /* значок в круге — на линию встаёт значок */
.head__back-label { font-size: var(--msv-note-size); line-height: var(--msv-note-line); color: var(--msv-n500); }
.head__title { flex: 1 1 100%; order: 3; margin-top: var(--msv-s4); }
.head__title-link { color: inherit; text-decoration: none; }
.head__title-link:hover { color: var(--msv-n500); }
.head__title-link:focus-visible { outline: 2px solid var(--msv-violet); outline-offset: 2px; border-radius: 4px; }
/* Resident menu: preserve the red role color with a quiet dark-red gradient. */
.resident-menu-gradient .rows { background: linear-gradient(160deg, var(--msv-red), #B0102A); border-radius: 24px; padding: 8px; }
.resident-menu-gradient .rows .row { background: transparent; color: #fff; border-color: rgba(255,255,255,.22); }
.resident-menu-gradient .rows .row:hover { background: rgba(255,255,255,.12); }
.resident-menu-gradient .rows .row__icon { color: #fff; }
.resident-menu-gradient .rows .row__note, .resident-menu-gradient .rows .row__tag, .resident-menu-gradient .rows .row__end { color: rgba(255,255,255,.85); }