/*
 * Базовые компоненты. Перенесены из прототипа и переведены на токены:
 * ни одного цвета литералом, всё через var() — иначе фирменный стиль
 * расползётся по файлам и менять его придётся поиском по проекту.
 */

/* ── Гарнитура ───────────────────────────────────────────── */
/* Подмножества по диапазонам знаков: браузер скачивает только те файлы,
   знаки которых встретил на странице. Русский интерфейс тянет кириллицу,
   латиницу ради названий вроде «WhatsApp» и расширенную латиницу ради
   знака тенге. `swap` — чтобы текст был виден сразу системным шрифтом,
   а не ждал загрузки: пустая страница хуже страницы не той гарнитурой.
   Диапазоны взяты у Google Fonts, а не выдуманы. */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/ui/fonts/inter-cyrillic.woff2) format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Из расширенной латиницы нам нужен, по сути, один знак — тенге. Целиком
   она весит 83 КБ ради него и сотен букв с диакритикой, которых в этом
   интерфейсе не бывает, поэтому взято только денежное семейство: 8.5 КБ. */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/ui/fonts/inter-currency.woff2) format('woff2-variations');
  unicode-range: U+2020, U+20A0-20C0, U+2113;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/ui/fonts/inter-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  background: var(--paper);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Атрибут hidden приходит из таблицы стилей браузера, и любое наше правило
   с display его перебивает: элемент с hidden остаётся на экране. Ошибка
   тихая и находится глазами, поэтому закрываем её раз и навсегда. */
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.mono  { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.ok    { color: var(--ok); }
.warn  { color: var(--warn-text); }
.bad   { color: var(--danger); }
.right { text-align: right; }

/* Текст, в котором переносы строк — часть смысла: сообщения WhatsApp
   приходят и уходят абзацами, и склеенные в одну строку они читаются
   как стена текста. */
.pre { white-space: pre-wrap; }

/* ── Полосы прокрутки ────────────────────────────────────── */
/* Полос не видно нигде.

   Системная полоса нарисована операционной системой, а не нами: в Chrome
   под Windows это серый брусок в пятнадцать точек со стрелками, и внутри
   карточки, окна или колонки доски он выглядит чужим — ни один другой
   элемент интерфейса так не выглядит.

   Прятать только «в покое» смысла нет: полоса проявлялась бы при
   наведении на область, а указатель на рабочем экране почти всегда
   внутри какой-нибудь из них — то есть полоса осталась бы на виду.

   Прокрутка при этом жива: колесо, тачпад, клавиши и перетаскивание
   работают как работали. Пропадает только один признак — что за правым
   краем есть ещё что-то. Он важен там, где едут вбок: доска заявок
   на шесть колонок и карта-план склада. Обе обрезают содержимое
   по краю, и обрезанная колонка сама по себе говорит, что она не
   последняя, — но если Заказчику этого окажется мало, полоса для этих
   двух областей возвращается одним правилом.

   Правило на `*`, потому что прокручиваемых областей два десятка
   и список пришлось бы дописывать при каждой новой. */
* { scrollbar-width: none; }
::-webkit-scrollbar { width: 0; height: 0; }

/* ── Знак ────────────────────────────────────────────────── */
/* Жёлтая плитка с «SQ». Лежит здесь, а не в portal.css: тот же знак
   стоит в шапке витрины, а копия правила разошлась бы с оригиналом
   на первой же правке фирменного стиля. */
.mark {
  width: 34px; height: 34px; flex: none;
  background: var(--mark); color: var(--on-mark);
  display: grid; place-items: center;
  font: 800 13px var(--font-sans); border-radius: var(--radius-sm);
}

/* ── Кнопки ──────────────────────────────────────────────── */
.btn {
  /* Строка из значка, слова и счётчика: кнопке «Фильтры» нужны все три,
     остальным — только слово, и от `inline-flex` они не меняются. */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  border-radius: var(--radius);
  transition: .14s;
}
.btn:hover { border-color: var(--line-strong); }
.btn:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 2px; }

/* Сплошная кнопка одна — синяя. Тёмная была второй сплошной, и рядом
   с синей обе читались как «главная»: какая из двух главнее, приходилось
   решать по месту. Тёмный остался тем, чем и был, — поверхностью:
   меню, ведущая карточка, выбранная сторона переключателя. */
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--ok     { background: var(--ok);     border-color: var(--ok);     color: var(--on-brand); }
.btn--danger { border-color: var(--box-debt-line); color: var(--danger); }

/* ── Панели ──────────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft);
}
.panel--dark {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.panel--dark .panel__sub { color: var(--on-brand-muted); }

.panel__title { font-size: var(--text-md); font-weight: var(--weight-strong); letter-spacing: -.01em; }
.panel__sub   { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-1); }

/* ── Плашки ──────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 7px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: var(--tag-neutral-bg);
  color: var(--tag-neutral-text);
  white-space: nowrap;
}
.tag--ok     { background: var(--tag-ok-bg);     color: var(--tag-ok-text); }
.tag--danger { background: var(--tag-danger-bg); color: var(--tag-danger-text); }
.tag--warn   { background: var(--tag-warn-bg);   color: var(--tag-warn-text); }
.tag--info   { background: var(--tag-info-bg);   color: var(--tag-info-text); }
.tag--violet { background: var(--tag-violet-bg); color: var(--tag-violet-text); }
.tag--orange { background: var(--tag-orange-bg); color: var(--tag-orange-text); }

/* ── Таблицы ─────────────────────────────────────────────── */
.data { width: 100%; border-collapse: collapse; }
.data th {
  text-align: left;
  padding: var(--space-2) var(--space-2);
  border-bottom: 1.5px solid var(--line-strong);
  /* Подпись колонки — основной гарнитурой, а не моноширинной: ширина
     здесь не нужна (это слова, а не числа), а моноширинная на пятистах
     выглядит разреженной. Числа под подписью моноширинными и остаются —
     им равная ширина знака нужна, чтобы разряды стояли столбиком. */
  font-size: var(--text-xs);
  font-weight: var(--weight-label);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* Утилита `.right` — это (0,1,0), а `.data th` — (0,1,1), и в таблицах
   утилита проигрывала: заголовок числовой колонки оставался слева,
   а число под ним стояло справа. Выравниваем их здесь, а не поднимаем
   вес `.right` глобально: специфичнее должно быть то правило, которое
   и относится к таблице. */
.data th.right,
.data td.right { text-align: right; }

.data td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  vertical-align: middle;
}
.data tbody tr:hover { background: var(--surface-sunken); }

/* ── Плитка бокса на карте-плане ─────────────────────────── */
.box {
  width: 74px;
  height: 60px;
  padding: var(--space-2);
  border: 1.5px solid var(--box-service-line);
  background: var(--box-service-bg);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transition: .14s;
}
.box b     { display: block; font-size: var(--text-sm); }
.box small { display: block; font-size: var(--text-xs); color: var(--muted); }

.box--free     { background: var(--box-free-bg);     border-color: var(--box-free-line); }
.box--occupied { background: var(--box-occupied-bg); border-color: var(--box-occupied-line); }
.box--debt     { background: var(--box-debt-bg);     border-color: var(--box-debt-line); }
.box--reserved { background: var(--box-reserved-bg); border-color: var(--box-reserved-line); }

/* ── Подсказка ───────────────────────────────────────────── */
/* Синяя, а не жёлтая: это пояснение к тому, что на экране, а не
   предупреждение. Жёлтым здесь горело бы на каждом экране, и на жёлтое
   в плашке «требует внимания» наверху уже перестали бы смотреть. */
.hint {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--tag-info-bg);
  color: var(--tag-info-text);
  border-left: 3px solid var(--accent);
  padding: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.6;
  border-radius: 0 var(--radius) var(--radius) 0;
}
/* Подсказка — флекс-строка: значок и текст. Поэтому текст со ссылкой
   внутри оборачивается в один `<span>`: иначе каждая ссылка станет
   отдельным элементом строки, между ними встанет `gap`, а точка после
   ссылки отъедет от неё на восемь точек. */

/* Ссылка в подсказке подчёркивается. По умолчанию `a` в портале от текста
   не отличается — ссылками размечены вкладки и переходы, у которых свой вид;
   а здесь это именно ссылка, и по ней надо нажать. */
.hint a { text-decoration: underline; text-underline-offset: 2px; }

/* Кружок «i» рисуется стилями, а не вставляется в разметку: подсказок
   в портале три десятка, и добавлять значок в каждую — тридцать мест,
   где его однажды забудут. */
.hint::before {
  content: "i";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: -1px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: 18px;
  text-align: center;
}