/* ============================================================
 * «Эксплуатация» (КЭ-1) — рабочее место техника, инженера и охраны
 * на телефоне. Mobile-first: колонка --ios-container-narrow по центру,
 * на десктопе — та же колонка. Токены — группа --ios-* кабинета
 * арендатора (tokens.css): цвет, кегль, отступ, радиус и высота только
 * через var(). Литералы геометрии: 0, 1px — разделители и рамки, 2px —
 * кольцо фокуса, 50%, 100%.
 * Всё — под .crew-body: файл подключается и в CRM (:app), и в кабинете.
 * ============================================================ */

.crew-root {
  color-scheme: only light;
}

.crew-body {
  margin: 0;
  min-height: 100vh;
  background: var(--ios-bg);
  color: var(--ios-text);
  font: var(--ios-type-body);
  -webkit-font-smoothing: antialiased;
}

.crew-body a {
  color: var(--ios-accent);
}

.crew-body :focus-visible {
  outline: var(--ios-focus-width) solid var(--ios-focus);
  outline-offset: var(--ios-focus-offset);
}

/* --- Колонка экрана; снизу — место под панель вкладок --- */

.crew-shell {
  box-sizing: content-box;
  max-width: var(--ios-container-narrow);
  margin: 0 auto;
  padding: calc(var(--ios-space-4) + env(safe-area-inset-top, 0px)) var(--ios-gutter)
    calc(var(--ios-space-24) + env(safe-area-inset-bottom, 0px));
}

/* --- Шапка: компания и продукт --- */

.crew-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ios-space-3);
  padding-bottom: var(--ios-space-3);
  border-bottom: 1px solid var(--ios-separator);
  margin-bottom: var(--ios-space-6);
}

.crew-top__overline,
.crew-top__product {
  margin: 0;
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crew-top__product {
  flex: none;
  font-weight: 600;
  color: var(--ios-accent);
}

/* --- Плашки: режим просмотра и flash --- */

.crew-banner,
.crew-flash {
  margin: 0 0 var(--ios-space-4);
  padding: var(--ios-space-3) var(--ios-space-4);
  border-radius: var(--ios-radius-plate);
  font: var(--ios-type-secondary);
}

.crew-banner {
  background: var(--ios-status-warning-bg);
  color: var(--ios-text);
}

.crew-flash--notice {
  background: var(--ios-status-success-bg);
  color: var(--ios-text);
}

.crew-flash--alert {
  background: var(--ios-status-danger-bg);
  color: var(--ios-status-danger);
}

/* --- Заголовки экрана --- */

.crew-overline {
  margin: 0 0 var(--ios-space-1);
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
}

.crew-title {
  margin: 0;
  font: var(--ios-type-h1);
  letter-spacing: var(--ios-tracking-h1);
}

.crew-subtitle {
  margin: var(--ios-space-2) 0 0;
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
}

/* --- «Моя смена»: пустое состояние --- */

.crew-empty {
  margin-top: var(--ios-space-8);
  padding: var(--ios-space-6) var(--ios-space-5);
  background: var(--ios-surface);
  border-radius: var(--ios-card-radius);
}

.crew-empty__title {
  margin: 0 0 var(--ios-space-2);
  font: var(--ios-type-block);
}

.crew-empty__text {
  margin: 0;
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
}

/* --- «Профиль»: подпись — значение --- */

.crew-facts {
  margin: var(--ios-space-6) 0 0;
  padding: 0 var(--ios-space-4);
  background: var(--ios-surface);
  border-radius: var(--ios-card-radius);
}

.crew-facts__row {
  display: flex;
  flex-direction: column;
  gap: var(--ios-space-1);
  padding: var(--ios-space-3) 0;
  border-top: 1px solid var(--ios-separator);
}

.crew-facts__row:first-child {
  border-top: 0;
}

.crew-facts__label {
  font: var(--ios-type-caption);
  color: var(--ios-text-secondary);
}

.crew-facts__value {
  margin: 0;
}

.crew-num {
  font-variant-numeric: tabular-nums;
}

.crew-note {
  margin: var(--ios-space-3) var(--ios-space-4) 0;
  font: var(--ios-type-caption);
  color: var(--ios-text-secondary);
}

.crew-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ios-space-3);
  margin-top: var(--ios-space-8);
}

.crew-actions__form {
  margin: 0;
}

/* --- Кнопки: высота главной 52, цель нажатия не меньше 44 --- */

.crew-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--ios-button-height);
  padding: 0 var(--ios-space-6);
  border: 0;
  border-radius: var(--ios-radius-pill);
  font: var(--ios-type-button);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.crew-body .crew-button--primary {
  background: var(--ios-accent);
  color: var(--ios-text-on-accent);
}

.crew-body .crew-button--primary:hover {
  background: var(--ios-accent-hover);
}

.crew-body .crew-button--secondary {
  background: var(--ios-surface);
  color: var(--ios-accent);
}

.crew-body .crew-button--text {
  min-height: var(--ios-touch-min);
  background: transparent;
  color: var(--ios-status-danger);
  font-weight: 400;
}

.crew-button--block,
.crew-actions .crew-button {
  width: 100%;
}

.crew-body .crew-button:disabled {
  background: var(--ios-fill-disabled);
  color: var(--ios-text-disabled);
  cursor: default;
}

/* --- Экраны без сессии: вход, «Ссылка устарела», «Доступ закрыт» --- */

.crew-notice {
  padding-top: var(--ios-space-12);
}

.crew-notice__text {
  margin: var(--ios-space-3) 0 0;
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
}

.crew-notice__action {
  margin: var(--ios-space-8) 0 0;
}

/* --- Ввод кода --- */

.crew-form {
  display: flex;
  flex-direction: column;
  gap: var(--ios-space-2);
  margin-top: var(--ios-space-8);
}

.crew-field__label {
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
}

.crew-field__input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--ios-field-height);
  padding: 0 var(--ios-space-4);
  border: 1px solid var(--ios-control-border);
  border-radius: var(--ios-radius-field);
  background: var(--ios-surface);
  color: var(--ios-text);
  font: var(--ios-type-body);
}

.crew-field__input--code {
  font-family: var(--ios-font-mono);
  letter-spacing: var(--ios-tracking-display);
  text-transform: uppercase;
}

.crew-field__input--error {
  border-color: var(--ios-status-danger);
}

.crew-field__error {
  margin: 0;
  font: var(--ios-type-secondary);
  color: var(--ios-status-danger);
}

/* Подсказка под полем: как набирать (CREW-CODE-INPUT) */
.crew-field__hint {
  margin: 0;
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
}

.crew-form .crew-button {
  margin-top: var(--ios-space-4);
}

/* --- «Моя смена» и заявки (КЭ-2) --- */

.crew-shift {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ios-space-3);
  margin-top: var(--ios-space-5);
  padding: var(--ios-space-3) var(--ios-space-4);
  background: var(--ios-surface);
  border-radius: var(--ios-card-radius);
}

.crew-shift__text {
  margin: 0;
}

.crew-shift__form {
  margin: 0;
}

.crew-body .crew-shift .crew-button--text {
  padding: 0;
  color: var(--ios-accent);
}

.crew-section {
  display: flex;
  flex-direction: column;
  gap: var(--ios-space-3);
  margin-top: var(--ios-space-8);
}

.crew-section__title {
  margin: 0;
  font: var(--ios-type-block);
}

.crew-section__title--danger {
  color: var(--ios-status-danger);
}

.crew-request {
  display: flex;
  flex-direction: column;
  gap: var(--ios-space-3);
  padding: var(--ios-space-4);
  background: var(--ios-surface);
  border-radius: var(--ios-card-radius);
}

/* Авария — красной рамкой, а не фоном: текст остаётся читаемым */
.crew-request--emergency {
  box-shadow: inset 0 0 0 2px var(--ios-status-danger);
}

.crew-body .crew-request__link {
  display: flex;
  flex-direction: column;
  gap: var(--ios-space-1);
  color: inherit;
  text-decoration: none;
}

.crew-request__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ios-space-2);
}

.crew-request__number,
.crew-request__meta {
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
}

.crew-request__title {
  font: var(--ios-type-body);
  font-weight: 600;
}

.crew-request__due {
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
}

.crew-request__due--late {
  color: var(--ios-status-danger);
  font-weight: 600;
}

.crew-request__action {
  margin: 0;
}

.crew-request-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ios-space-2) var(--ios-space-3);
  margin: var(--ios-space-3) 0 0;
}

.crew-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--ios-space-2);
  border-radius: var(--ios-radius-pill);
  font: var(--ios-type-badge);
  background: var(--ios-status-neutral-bg);
  color: var(--ios-text);
}

.crew-chip--danger {
  background: var(--ios-status-danger-bg);
  color: var(--ios-status-danger);
}

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

.crew-body .crew-back {
  color: var(--ios-accent);
  text-decoration: none;
}

.crew-actions--top {
  margin-top: var(--ios-space-5);
}

.crew-actions--report {
  margin-top: var(--ios-space-8);
}

.crew-text {
  margin-top: var(--ios-space-4);
  padding: var(--ios-space-3) var(--ios-space-4);
  background: var(--ios-surface);
  border-radius: var(--ios-card-radius);
}

.crew-text p {
  margin: 0 0 var(--ios-space-2);
}

.crew-text p:last-child {
  margin-bottom: 0;
}

/* Листы действий: кнопка-заголовок раскрывает форму под собой */
.crew-sheet {
  margin-top: var(--ios-space-3);
}

.crew-sheet > summary {
  list-style: none;
}

/* Текстовые кнопки листов — синие: красный текст — только у «Выйти» */
.crew-body .crew-sheet > .crew-button--text {
  color: var(--ios-accent);
}

.crew-sheet > summary::-webkit-details-marker {
  display: none;
}

.crew-sheet .crew-form {
  margin-top: var(--ios-space-3);
  padding: var(--ios-space-4);
  background: var(--ios-surface);
  border-radius: var(--ios-card-radius);
}

.crew-sheet .crew-field__input {
  background: var(--ios-bg);
}

.crew-field__input--area {
  min-height: calc(var(--ios-field-height) * 2);
  padding: var(--ios-space-3) var(--ios-space-4);
  resize: vertical;
}

.crew-check {
  display: flex;
  align-items: center;
  gap: var(--ios-space-3);
  min-height: var(--ios-touch-min);
}

.crew-check input {
  width: 22px;
  height: 22px;
  accent-color: var(--ios-status-danger);
}

.crew-form--report .crew-button,
.crew-form--comment .crew-button {
  margin-top: var(--ios-space-4);
}

.crew-feed {
  margin: 0;
  padding: 0 var(--ios-space-4);
  list-style: none;
  background: var(--ios-surface);
  border-radius: var(--ios-card-radius);
}

.crew-feed__item {
  padding: var(--ios-space-3) 0;
  border-top: 1px solid var(--ios-separator);
}

.crew-feed__item:first-child {
  border-top: 0;
}

.crew-feed__head {
  display: flex;
  justify-content: space-between;
  gap: var(--ios-space-2);
  margin: 0;
}

.crew-feed__label {
  font-weight: 600;
}

.crew-feed__time,
.crew-feed__actor {
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
}

.crew-feed__actor,
.crew-feed__text {
  margin: var(--ios-space-1) 0 0;
}

/* --- Панель вкладок: внизу экрана, по ширине колонки --- */

.crew-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--ios-z-nav);
  display: flex;
  justify-content: center;
  gap: var(--ios-space-2);
  padding: var(--ios-space-2) var(--ios-gutter) calc(var(--ios-space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--ios-tabbar-bg-solid);
  border-top: 1px solid var(--ios-separator);
}

.crew-tabbar__tab {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  max-width: calc(var(--ios-container-narrow) / 2);
  min-height: var(--ios-touch-min);
  border-radius: var(--ios-radius-pill);
  font: var(--ios-type-button-nav);
  text-decoration: none;
}

.crew-body .crew-tabbar__tab {
  color: var(--ios-text-secondary);
}

.crew-body .crew-tabbar__tab--current {
  background: var(--ios-tab-current-bg);
  color: var(--ios-tab-current-text);
  font-weight: 600;
}

/* --- Демо-стенд: «Смотреть как» → обратно в CRM (Demo::ProfileSwitch) --- */

.crew-demo {
  display: flex;
  align-items: center;
  gap: var(--ios-space-2);
  margin: 0 0 var(--ios-space-3);
  padding: var(--ios-space-1) var(--ios-space-3);
  border: 1px dashed var(--ios-control-border);
  border-radius: var(--ios-radius-field);
  font: var(--ios-type-caption);
  color: var(--ios-text-secondary);
}

.crew-demo__tag {
  font-weight: 600;
  color: var(--ios-status-warning);
}

.crew-demo__text {
  flex: 1;
}

.crew-body .crew-demo__link {
  color: var(--ios-accent);
  text-decoration: none;
}

/* --- Обход счётчиков (КЭ-5) --- */

.crew-periods {
  display: flex;
  gap: var(--ios-space-2);
  margin-top: var(--ios-space-5);
}

.crew-body .crew-periods__item {
  flex: 1;
  padding: var(--ios-space-2) var(--ios-space-3);
  border-radius: var(--ios-radius-pill);
  background: var(--ios-surface);
  color: var(--ios-accent);
  font: var(--ios-type-secondary);
  text-align: center;
  text-decoration: none;
}

.crew-body .crew-periods__item--current {
  background: var(--ios-accent);
  color: var(--ios-text-on-accent);
}

.crew-meter__form {
  margin-top: 0;
}

.crew-meter__done {
  padding-top: var(--ios-space-2);
  border-top: 1px solid var(--ios-separator);
}

.crew-meter__value {
  margin: 0;
}

.crew-meter__warning {
  margin: 0;
  font: var(--ios-type-secondary);
  color: var(--ios-status-warning);
}

.crew-walk__done {
  color: var(--ios-status-success);
}

.crew-meter p {
  margin: 0;
}

/* --- Фото заявки и табло счётчика (КЭ-3): миниатюры — тот же JPEG
 *     CSS-размером, две кнопки выбора, превью и строка состояния --- */

.crew-photos__empty,
.crew-photos__stage,
.crew-photos__meta {
  margin: 0;
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
}

.crew-photos__stage {
  font-weight: 600;
}

.crew-photos__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ios-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crew-photos__grid--meter {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crew-photos__item {
  display: flex;
  flex-direction: column;
  gap: var(--ios-space-1);
  min-width: 0;
}

.crew-photos__link {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--ios-radius-field);
  background: var(--ios-surface);
}

.crew-photos__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crew-photos__remove {
  margin: 0;
}

.crew-upload__stages {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ios-space-5);
  margin: 0 0 var(--ios-space-3);
  padding: 0;
  border: 0;
}

.crew-upload__stages .crew-check input {
  accent-color: var(--ios-accent);
}

.crew-upload__pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ios-space-2);
}

.crew-upload__button {
  position: relative;
  padding: 0 var(--ios-space-3);
  text-align: center;
}

.crew-sheet .crew-upload__button {
  background: var(--ios-bg);
}

/* Поле файла — под кнопкой-подписью: нажатие по кнопке открывает камеру
 * или галерею, фокус клавиатуры виден на кнопке */
.crew-upload__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.crew-upload__button:focus-within {
  outline: var(--ios-focus-width) solid var(--ios-focus);
  outline-offset: var(--ios-focus-offset);
}

.crew-upload__preview {
  margin-top: var(--ios-space-3);
}

.crew-upload__image {
  display: block;
  max-width: 100%;
  max-height: calc(var(--ios-space-24) * 3);
  border-radius: var(--ios-radius-field);
}

.crew-upload__status {
  margin: var(--ios-space-2) 0;
  font: var(--ios-type-secondary);
  color: var(--ios-text-secondary);
}

.crew-upload__status:empty {
  display: none;
}

.crew-upload .crew-button--primary {
  margin-top: var(--ios-space-3);
}