/* ============================================================
   Кабинет — свой слой поверх кита.

   Ничего из этого нет в ките, потому что кит про страницу вообще, а
   здесь верхняя полоса приложения, таблица машин и правка имени прямо
   в строке. Всё остальное — его: карточки, кнопки, бейджи, таблица.

   Правило то же, что и в остальных слоях: ни одного значения цвета,
   всё через токены. Иначе следующая правка контраста пройдёт мимо.
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--app-bg);
  color: var(--app-text);
  font: var(--app-fs-base)/var(--app-lh-body) var(--app-font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------- верхняя полоса ---------- */
/* Та же, что в настольном приложении, и это намеренно: человек ходит
   между окном программы и кабинетом, и одинаковая шапка избавляет его
   от вопроса «а где я сейчас». */
.полоса {
  display: flex; align-items: center; gap: 20px;
  padding: 0 20px; height: var(--app-navbar-h);
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  position: sticky; top: 0; z-index: var(--app-z-navbar);
}
.марка { display: flex; align-items: center; gap: 10px;
         color: var(--app-heading); font-weight: var(--app-fw-medium); }
/* Знак — картинка, а не буква на градиенте. Скругление у самого файла своё
   (плашка нарисована с rx=14 из 64), поэтому CSS его не добавляет: два
   скругления поверх друг друга дают заметную кайму. */
.марка .знак { width: 30px; height: 30px; flex: 0 0 30px; display: block; }
.разделы { display: flex; gap: 4px; }
.разделы a { padding: 7px 12px; border-radius: var(--app-radius-lg);
             color: var(--app-menu-color); text-decoration: none;
             font-size: var(--app-fs-sm); transition: var(--app-t-item); }
.разделы a:hover { background: var(--app-menu-hover-bg); }
.разделы a.вот { background: var(--app-primary-solid); color: #fff;
                 box-shadow: var(--app-shadow-primary); }
.тяга { margin-left: auto; }
.кто { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.кто b { color: var(--app-heading); font-weight: var(--app-fw-medium); }
.полоса form { margin: 0; }

/* ---------- содержимое ---------- */
.лента { padding: 22px 20px 40px; max-width: var(--app-container-max); margin: 0 auto; }
.шапка-раздела { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.шапка-раздела h1 { margin: 0; font-size: var(--app-fs-h4);
                    color: var(--app-heading); font-weight: var(--app-fw-medium); }
/* Вправо прижимается и форма, и одиночная ссылка-кнопка: на странице
   установщика действие — это ссылка на скачивание, а не форма. */
.шапка-раздела > form, .шапка-раздела > .btn { margin-left: auto; }
.сноска { margin-top: 12px; }
.card { padding: 0; overflow: hidden; }
.card.объяснение, .card.пусто { padding: var(--app-card-padding); }
.card.объяснение p { margin: 0 0 8px; }
.card.объяснение p:last-child { margin-bottom: 0; }
.команда { margin: 10px 0; padding: 10px 12px; overflow-x: auto;
           background: var(--app-surface-alt); border-radius: var(--app-radius-lg);
           font-family: var(--app-font-mono); font-size: var(--app-fs-sm);
           color: var(--app-heading); }
/* ---------- то, что уносят с собой ---------- */
/* Ключ организации переносят в командную строку и в групповые политики. В нём
   24 знака, среди них похожие (O и 0, l и I), и выделять его мышью по буквам —
   готовый способ ошибиться на один символ и потом искать, почему компьютер не
   вступил. Поэтому поле с кнопкой, а не абзац.
   Кнопку рисует скрипт, а не шаблон: без JavaScript она была бы мёртвой, а
   мёртвая кнопка хуже её отсутствия — значение и так выделяется целиком. */
.поле-копирования { display: flex; align-items: center; gap: 10px;
                    margin: 0 0 10px; padding: 10px 12px;
                    background: var(--app-surface-alt);
                    border-radius: var(--app-radius-lg); }
.поле-копирования .значение { flex: 1; min-width: 0; overflow-x: auto;
                    font-family: var(--app-font-mono); color: var(--app-heading);
                    white-space: nowrap; }
.поле-копирования .btn { flex: none; }

.пусто { text-align: center; }
.пусто p { margin: 0 0 6px; }
.пусто .btn { margin-top: 12px; }

/* ---------- таблица машин ---------- */
.tbl { width: 100%; }
.цифры { font-family: var(--app-font-mono); letter-spacing: .5px;
         color: var(--app-heading); white-space: nowrap; }
.код { font-family: var(--app-font-mono); font-size: var(--app-fs-lg);
       letter-spacing: 2px; color: var(--app-heading); }
.действия { text-align: right; white-space: nowrap; }
.действия form { margin: 0; display: inline-block; }
.когда { font-family: var(--app-font-mono); font-size: var(--app-fs-sm);
         color: var(--app-text-muted); white-space: nowrap; }
/* Отозванная машина — бледная строка: она не поломка и не тревога, а
   решение, которое кто-то принял. Красным здесь горит только бейдж. */
.отозвана td:not(.действия) { opacity: .55; }

/* Имя правится прямо в строке. Отдельной страницы «карточка машины» нет
   намеренно: на ней было бы ровно два поля, а ходить туда и обратно ради
   двух полей — работа, которой можно не быть. */
/* Первому столбцу — место под имя, группу и кнопку в один ряд. Без этого
   кнопка «Сохранить» уезжает под поля, и строка машины становится вдвое выше
   без всякой пользы. */
.tbl td:first-child, .tbl th:first-child { min-width: 25em; }
.имя-форма { display: flex; gap: 6px; align-items: center; margin: 0; flex-wrap: wrap; }
.имя-поле { height: 34px; padding: 0 10px; width: 12em;
            font-family: inherit; font-size: var(--app-fs-base);
            color: var(--app-heading); background: var(--app-surface);
            border: 1px solid var(--app-gray-300); border-radius: var(--app-radius); }
.имя-поле.группа { width: 7em; }
.имя-поле:focus { outline: none; border-color: var(--app-primary);
                  box-shadow: var(--app-focus-ring); }
.имя-поле[readonly] { border-color: transparent; background: transparent; padding-left: 0; }

/* ---------- тариф ---------- */
/* Плитки, а не таблица: это четыре независимых числа, которые читают по
   одному, а не сравнивают между собой. */
.плитки { display: grid; gap: 14px; margin-bottom: 18px;
          grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.плитка { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.плитка .что { font-size: var(--app-fs-sm); color: var(--app-text-muted);
               text-transform: uppercase; letter-spacing: .04em; }
.плитка .сколько { font-size: var(--app-fs-h4); color: var(--app-heading);
                   font-weight: var(--app-fw-medium); line-height: 1.2; }
.просрочено { color: var(--app-danger-text); }

/* ---------- сотрудники ---------- */
/* Позвать человека — одна строка, а не отдельная страница: полей два, и
   ходить за ними на другой экран было бы работой, которой можно не быть. */
.позвать { display: flex; gap: 8px; align-items: center; margin: 0 0 10px;
           flex-wrap: wrap; }
.имя-поле.адрес { width: 20em; }
.имя-поле.роль { width: 11em; }
/* Заголовок раздела внутри ленты.
   ПРАВИЛО ИДЁТ И ПО ТЕГУ, а не только по классу, и это не лишняя строка. У
   кита h2 — маркетинговая шкала в 36 точек, рассчитанная на страницу сайта.
   В кабинете она крупнее нашего же h1 (--app-fs-h4), поэтому один забытый
   класс переворачивает иерархию страницы вверх ногами. Ровно это и случилось
   со страницей установщика. */
.лента h2, .подраздел { margin: 26px 0 12px; font-size: var(--app-fs-h5);
             color: var(--app-heading); font-weight: var(--app-fw-medium); }
.card.объяснение > h2:first-child, .card.объяснение > h3:first-child { margin-top: 0; }
/* Две кнопки в строке приглашения не должны слипаться. */
.tbl td.действия form + form { margin-left: 6px; }

/* ---------- подтверждение входа приложения ---------- */
.карточка-входа { max-width: 560px; margin: 24px auto; }
.карточка-входа h1 { margin: 0 0 12px; font-size: var(--app-fs-h5);
                     color: var(--app-heading); font-weight: var(--app-fw-medium); }
/* Число сверки крупным моноширинным: его сравнивают глазами с экраном
   программы, и цифры должны читаться без вглядывания. */
.сверка-строка { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
.сверка { font-family: var(--app-font-mono); font-size: var(--app-fs-h3);
          letter-spacing: 4px; color: var(--app-heading); }
.решение { display: flex; gap: 8px; margin-top: 18px; }

/* ---------- вход ---------- */
.вход-страница { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.вход { width: min(380px, 100%); padding: 28px 30px; }
.вход h1 { margin: 14px 0 18px; font-size: var(--app-fs-h5);
           color: var(--app-heading); font-weight: var(--app-fw-medium); }
.вход .btn { width: 100%; }
.вход .подсказка { margin: 16px 0 0; text-align: center; }
.вход .alert { margin-bottom: 16px; }

@media (max-width: 760px) {
  .полоса { height: auto; padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
  /* Сама полоса переносилась, а список разделов внутри неё — нет, и на
     телефоне страница уезжала вбок примерно на две сотни точек: горизонтальная
     прокрутка на КАЖДОЙ странице кабинета. Заметно это только на узком экране,
     поэтому и жило долго. */
  .разделы { flex-wrap: wrap; }
  .кто { align-items: flex-start; }
  /* Заголовок раздела и его действие в столбик: рядом они сдавливают друг
     друга, а «Скачать установщик» — то, ради чего сюда пришли. */
  .шапка-раздела { flex-wrap: wrap; }
  .шапка-раздела > form, .шапка-раздела > .btn { margin-left: 0; width: 100%; }
  .шапка-раздела > form .btn { width: 100%; }
  /* Ключ длиннее узкого экрана. Кнопка уходит под него, а не отжимает
     значение в щель, из которой его не прочитать. */
  .поле-копирования { flex-wrap: wrap; }
  .поле-копирования .btn { width: 100%; }
  /* Узкое окно: версия и время связи уезжают, имя и состояние остаются —
     ради них в список и заходят. */
  .tbl th:nth-child(4), .tbl td:nth-child(4),
  .tbl th:nth-child(5), .tbl td:nth-child(5) { display: none; }
  .имя-поле { width: 100%; }
}

/* Ряд ссылок на скачивание: их пять, и в одну строку они не помещаются на
   узком экране. Перенос с зазором вместо горизонтальной прокрутки — кнопку,
   уехавшую за край, человек не найдёт. */
.ряд-ссылок { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }