/* ==================================================================
   ВХОД (Authelia 4.39.20) В ОФОРМЛЕНИИ ВИТРИНЫ «ЗАЩИТА».

   ЧТО ЭТО. Таблица стилей страницы входа. Отдаётся с /_authelia_theme/
   витрины, а ссылка на неё дописывается в ответ портала директивой
   sub_filter в nginx (см. location /authelia/ в default.conf).

   ПОЧЕМУ НЕ ЧЕРЕЗ server.asset_path. Потому что 4.39 так не умеет, и это
   проверено, а не вычитано: в пробном контейнере (--network none, своё
   хранилище) с asset_path файл static/css/index.<хеш>.css был положен
   рядом — Authelia продолжила отдавать свой, а static/media/*.woff2
   вернул 404. Логотип из того же каталога при этом подменился, то есть
   механизм работал: подменяются только favicon.ico, logo.png и locales/,
   ровно как написано в справочнике Server Asset Overrides.

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

   ОТКУДА ВЗЯТЫ ЗНАЧЕНИЯ. Из dashboard_v2/app/globals.css — файла, которым
   задан вид витрины. Не переизобретено, а перенесено: те же токены, те же
   размеры, те же три правила витрины:
     1. цвет принадлежит данным — оформление монохромно;
     2. разделяет линия, а не пустота — отступы 6-12px, границы 1px;
     3. ни одного декоративного пикселя — ни тени, ни градиента, ни
        размытия; радиус 2px это предел, и здесь он равен нулю.

   ПОЧЕМУ ВЕЗДЕ !important. MUI (emotion) вставляет свои правила в <style>
   на исполнении, и каждая перерисовка кладёт их ПОСЛЕ этого файла. При
   равной силе селектора выигрывает последний — то есть без !important
   половина правил проиграла бы при переходе на второй фактор.

   ПОЧЕМУ СЕЛЕКТОРЫ ПО КЛАССАМ MUI, А НЕ ПО mui-xxxxx. Классы вида
   `mui-b6npor` — хеш от содержимого, он меняется при любом обновлении
   образа. Устойчивы только семантические имена MUI и идентификаторы,
   которые Authelia проставляет сама (#sign-in-button и т.п.).
   ================================================================== */

/* ---- Гарнитуры витрины. Лежат в том же каталоге, что и этот файл.
       Подмножества те же, что у витрины (Next/Google Fonts): кириллица
       отдельным файлом, латиница отдельным. Если файл не отдался —
       сработает запасной ряд ниже, страница остаётся рабочей.
       Каталог отдаётся без проверки входа: иначе браузер не смог бы
       забрать шрифт до того, как вход состоялся. ---- */
@font-face {
  font-family: "IBM Plex Sans Portal";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("plex-sans-cyrillic.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans Portal";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
    U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030,
    U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono Portal";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("plex-mono-cyrillic.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono Portal";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("plex-mono-latin.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
    U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030,
    U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ---- Токены. Имена с префиксом th-, чтобы не столкнуться ни с
       переменными MUI (--variant-*, --Paper-*), ни с чужими. ---- */
:root {
  --th-s0: #0c0c0b;
  --th-s1: #131312;
  --th-s2: #1a1a18;
  --th-s3: #232320;
  --th-hl: #2b2b27;
  --th-hl2: #3c3c36;
  --th-ink: #ecebe6;
  --th-ink2: #a5a29a;
  --th-ink3: #6f6c64;
  --th-red: #d9483a;
  --th-amber: #dfa02a;
  --th-green: #4da36d;
  --th-blue: #4b8ac9;

  --th-sans: "IBM Plex Sans Portal", "IBM Plex Sans", "Helvetica Neue", Arial,
    sans-serif;
  --th-mono: "IBM Plex Mono Portal", "IBM Plex Mono", ui-monospace, "SF Mono",
    monospace;

  /* Высота приборной строки и органов управления — как на витрине. */
  --th-bar: 26px;
  color-scheme: dark;
}

/* ---- Поверхность ---- */
html,
body {
  background: var(--th-s0) !important;
}
body {
  color: var(--th-ink) !important;
  font-family: var(--th-sans) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
}
body::backdrop {
  background-color: var(--th-s0) !important;
}

/* Скругления запрещены на уровне сброса — как в globals.css витрины. */
.MuiPaper-root,
.MuiButtonBase-root,
.MuiInputBase-root,
.MuiOutlinedInput-root,
.MuiOutlinedInput-notchedOutline,
.MuiCheckbox-root,
.MuiIconButton-root,
.MuiAlert-root,
.MuiSnackbarContent-root,
.MuiChip-root,
.MuiListItemButton-root,
.MuiMenuItem-root,
.MuiTooltip-tooltip {
  border-radius: 0 !important;
}
/* Ни тени, ни подложки-градиента: MUI рисует «поднятые» поверхности
   через --Paper-shadow и --Paper-overlay. */
.MuiPaper-root {
  background-image: none !important;
  box-shadow: none !important;
  --Paper-shadow: none !important;
  --Paper-overlay: none !important;
}

/* ---- Типографика ---- */
.MuiTypography-root,
.MuiInputBase-root,
.MuiFormLabel-root,
.MuiButton-root,
.MuiMenuItem-root,
.MuiAlert-root,
.MuiDialogTitle-root,
.MuiDialogContentText-root,
.MuiTooltip-tooltip {
  font-family: var(--th-sans) !important;
  letter-spacing: 0 !important;
}
.MuiTypography-body1,
.MuiTypography-body2 {
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: var(--th-ink2) !important;
}

/* Заголовок ступени («Авторизация», «Второй фактор» и т.д.) — не крупный
   кегль, а микро-подпись на разделительной линии: приём витрины (Rule),
   где иерархию несёт не размер, а регистр и разрядка. */
.MuiTypography-h5,
.MuiTypography-h6 {
  font-size: 9.5px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--th-ink3) !important;
  text-align: left !important;
  /* Полоса заголовка идёт от края до края панели, как шапки панелей на
     витрине: отрицательные поля гасят внутренний отступ панели (12px). */
  margin: -12px -12px 10px !important;
  padding: 7px 12px !important;
  background: var(--th-s2) !important;
  border-bottom: 1px solid var(--th-hl) !important;
}

/* ---- Приборная строка сверху. На витрине это полоса 26px с подписью
       слева; здесь в ней живёт переключатель языка. ---- */
.MuiAppBar-root {
  background: var(--th-s1) !important;
  border-bottom: 1px solid var(--th-hl) !important;
  --AppBar-background: var(--th-s1) !important;
}
.MuiToolbar-root {
  min-height: var(--th-bar) !important;
  height: var(--th-bar) !important;
  padding: 0 10px !important;
  align-items: center !important;
}
/* Подпись системы. Единственный текст, добавленный оформлением: без него
   страница не сообщает, куда именно входят. Имя собственное, поэтому не
   зависит от выбранного языка. */
.MuiToolbar-root::before {
  content: "защита · терминал";
  font-family: var(--th-sans);
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--th-ink3);
  white-space: nowrap;
}

/* ---- Раскладка ступени ---- */
#root > .MuiBox-root > .MuiGrid-container {
  min-height: calc(100dvh - var(--th-bar)) !important;
  text-align: left !important;
}

/* Панель. На витрине это поверхность --s1 в рамке 1px --hl, без скругления
   и тени. Ширина уменьшена с 444px: при кегле 11-12px широкая колонка
   выглядит пустой, а витрина плотная. */
.MuiContainer-root {
  max-width: 336px !important;
  padding: 12px !important;
  background: var(--th-s1) !important;
  border: 1px solid var(--th-hl) !important;
}
/* На узком экране панель фиксированной ширины упёрлась бы в края. */
@media (max-width: 384px) {
  .MuiContainer-root {
    max-width: none !important;
    margin: 0 12px !important;
  }
}

/* Круглый значок с человечком — декоративный пиксель, которых на витрине
   нет ни одного. Само имя системы стоит в приборной строке выше. */
#UserSvg {
  display: none !important;
}

/* Шаг между строками формы. MUI ставит 16px — на плотной сетке витрины
   (отступы 6-12px) это выглядит разрежённо. */
.MuiFormControl-root > .MuiGrid-container {
  gap: 10px !important;
}
/* Ячейка, в которой лежит форма, несёт собственные отступы под шаг 16px;
   вместе с полосой заголовка они дают провал в треть панели. */
.MuiGrid-root:has(> .MuiFormControl-root) {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Строку с флажком MUI поджимает отрицательными полями под свой шаг 16px;
   при нашем шаге это склеивает её с соседями. */
.MuiGrid-root:has(> .MuiFormControlLabel-root) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ---- Поля ввода.
       MUI по умолчанию «вкладывает» подпись внутрь рамки и анимирует её
       наверх. На витрине подпись стоит НАД полем и не двигается (это тот
       же приём, что .lbl над полями во вкладке доступа), поэтому подпись
       снимается с абсолютного позиционирования, а вырез в рамке под
       всплывающую подпись (legend) убирается. ---- */
.MuiTextField-root {
  display: block !important;
  width: 100% !important;
}
.MuiInputLabel-root {
  position: static !important;
  transform: none !important;
  max-width: none !important;
  overflow: visible !important;
  display: block !important;
  font-family: var(--th-sans) !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--th-ink3) !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  transition: none !important;
}
.MuiInputLabel-root.Mui-focused {
  color: var(--th-ink2) !important;
}
.MuiInputLabel-root.Mui-error,
.MuiFormLabel-asterisk.Mui-error {
  color: var(--th-red) !important;
}
.MuiInputLabel-asterisk {
  color: var(--th-ink3) !important;
}

.MuiOutlinedInput-root {
  background: var(--th-s0) !important;
  color: var(--th-ink) !important;
  font-family: var(--th-sans) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  min-height: var(--th-bar) !important;
  padding: 0 !important;
}
.MuiOutlinedInput-notchedOutline {
  top: 0 !important;
  border: 1px solid var(--th-hl) !important;
}
/* Вырез под всплывающую подпись больше не нужен: подпись стоит над полем. */
.MuiOutlinedInput-notchedOutline legend {
  display: none !important;
}
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--th-hl2) !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--th-ink) !important;
  border-width: 1px !important;
}
.MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: var(--th-red) !important;
}
.MuiOutlinedInput-root.Mui-disabled .MuiOutlinedInput-notchedOutline {
  border-color: var(--th-hl) !important;
}
.MuiOutlinedInput-input {
  height: 24px !important;
  padding: 0 6px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  color: var(--th-ink) !important;
}
.MuiOutlinedInput-input::placeholder {
  color: var(--th-ink3) !important;
  opacity: 1 !important;
}
/* Пароль и одноразовый код — моноширинным, как все цифры и коды на
   витрине (globals.css: input[type=password] набирается моно с разрядкой). */
input[type="password"].MuiOutlinedInput-input,
#one-time-password-textfield,
input[name="otp"] {
  font-family: var(--th-mono) !important;
  letter-spacing: 0.08em !important;
}
/* Автозаполнение браузера красит поле в синий — возвращаем поверхность. */
.MuiOutlinedInput-input:-webkit-autofill {
  box-shadow: 0 0 0 100px var(--th-s0) inset !important;
  -webkit-text-fill-color: var(--th-ink) !important;
  caret-color: var(--th-ink) !important;
}
/* Подпись-ошибка под полем. */
.MuiFormHelperText-root {
  font-family: var(--th-sans) !important;
  font-size: 9.5px !important;
  margin: 3px 0 0 !important;
  color: var(--th-ink3) !important;
}
.MuiFormHelperText-root.Mui-error {
  color: var(--th-red) !important;
}

/* ---- Значки-кнопки (показать пароль, язык): квадрат, без круглой
       подложки и без «волны» нажатия. ---- */
.MuiIconButton-root {
  padding: 4px !important;
  margin: 0 !important;
  color: var(--th-ink3) !important;
  transition: none !important;
}
.MuiIconButton-root:hover {
  background: var(--th-s2) !important;
  color: var(--th-ink) !important;
  --IconButton-hoverBg: var(--th-s2) !important;
}
.MuiIconButton-root .MuiSvgIcon-root {
  font-size: 15px !important;
}
.MuiInputAdornment-root {
  margin: 0 3px 0 0 !important;
  max-height: none !important;
  color: var(--th-ink3) !important;
}
.MuiInputAdornment-root .MuiIconButton-root {
  padding: 2px !important;
}
.MuiTouchRipple-root {
  display: none !important;
}

/* ---- Флажок «Запомнить» ---- */
.MuiFormControlLabel-root {
  margin: 0 !important;
  gap: 6px !important;
}
.MuiCheckbox-root {
  padding: 0 !important;
  color: var(--th-hl2) !important;
}
.MuiCheckbox-root .MuiSvgIcon-root {
  font-size: 13px !important;
}
.MuiCheckbox-root:hover {
  background: transparent !important;
  color: var(--th-ink2) !important;
}
.MuiCheckbox-root.Mui-checked {
  color: var(--th-ink) !important;
}
.MuiFormControlLabel-label {
  font-size: 10.5px !important;
  color: var(--th-ink2) !important;
}

/* ---- Кнопки. Основное действие на витрине — инверсный прямоугольник
       (заливка --ink, текст --s0), единственный «залитый» элемент на
       экране. Ни тени, ни скругления, ни перехода цвета. ---- */
.MuiButton-root {
  min-width: 0 !important;
  min-height: var(--th-bar) !important;
  padding: 0 12px !important;
  font-family: var(--th-sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  box-shadow: none !important;
  transition: none !important;
}
.MuiButton-contained {
  background-color: var(--th-ink) !important;
  color: var(--th-s0) !important;
  --variant-containedBg: var(--th-ink) !important;
  --variant-containedColor: var(--th-s0) !important;
}
.MuiButton-contained:hover {
  background-color: #ffffff !important;
  box-shadow: none !important;
}
.MuiButton-outlined {
  background: transparent !important;
  border: 1px solid var(--th-hl2) !important;
  color: var(--th-ink2) !important;
}
.MuiButton-outlined:hover {
  background: var(--th-s2) !important;
  color: var(--th-ink) !important;
}
.MuiButton-text {
  background: transparent !important;
  color: var(--th-ink3) !important;
}
.MuiButton-text:hover {
  background: transparent !important;
  color: var(--th-ink) !important;
  text-decoration: underline !important;
}
.MuiButton-root.Mui-disabled {
  background-color: var(--th-s3) !important;
  color: var(--th-ink3) !important;
  box-shadow: none !important;
}

/* ---- Подвал: ссылка на Authelia. Оставлена намеренно — это указание на
       то, чем закрыт вход; уменьшена до служебного кегля витрины. ---- */
.MuiLink-root {
  color: var(--th-ink3) !important;
  font-size: 9px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
}
.MuiLink-root:hover {
  color: var(--th-ink2) !important;
  text-decoration: underline !important;
}
/* Строка подвала прижимается влево и отделяется линией — как нижняя
   служебная полоса витрины. Тоже от края до края панели. */
#root .MuiContainer-root > .MuiGrid-container > .MuiGrid-container {
  justify-content: flex-start !important;
  margin: 12px -12px -12px !important;
  padding: 6px 12px !important;
  border-top: 1px solid var(--th-hl) !important;
}
/* Ячейка подвала объявлена в MUI как 4 колонки из 12 — на нашем кегле
   подпись в такую ширину не помещается и ломается на две строки. */
#root .MuiContainer-root > .MuiGrid-container > .MuiGrid-container > * {
  width: auto !important;
  flex: 1 1 auto !important;
}

/* ---- Сообщения. Цвет здесь означает состояние, а не украшает: красный —
       отказ, тот же --sig-red, что и на витрине. ---- */
.MuiAlert-root,
.MuiSnackbarContent-root {
  background: var(--th-s2) !important;
  color: var(--th-ink) !important;
  border: 1px solid var(--th-hl2) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  padding: 5px 9px !important;
  align-items: center !important;
}
.MuiAlert-icon {
  padding: 0 !important;
  margin-right: 7px !important;
  font-size: 15px !important;
}
.MuiAlert-message {
  padding: 0 !important;
}
.MuiAlert-standardError,
.MuiAlert-filledError,
.MuiAlert-outlinedError {
  border-color: var(--th-red) !important;
}
.MuiAlert-standardError .MuiAlert-icon,
.MuiAlert-filledError .MuiAlert-icon,
.MuiAlert-outlinedError .MuiAlert-icon {
  color: var(--th-red) !important;
}
.MuiAlert-standardSuccess .MuiAlert-icon,
.MuiAlert-filledSuccess .MuiAlert-icon {
  color: var(--th-green) !important;
}
.MuiAlert-standardWarning .MuiAlert-icon,
.MuiAlert-filledWarning .MuiAlert-icon {
  color: var(--th-amber) !important;
}
.MuiAlert-standardInfo .MuiAlert-icon,
.MuiAlert-filledInfo .MuiAlert-icon {
  color: var(--th-blue) !important;
}

/* ---- Всплывающие поверхности: выбор второго фактора, меню языка,
       подсказки. Те же 1px-рамки на --s1. ---- */
.MuiDialog-paper,
.MuiPopover-paper,
.MuiMenu-paper,
.MuiTooltip-tooltip {
  background: var(--th-s1) !important;
  color: var(--th-ink) !important;
  border: 1px solid var(--th-hl2) !important;
  box-shadow: none !important;
}
.MuiTooltip-tooltip {
  font-size: 10px !important;
  padding: 3px 6px !important;
}
.MuiDialogTitle-root {
  font-size: 9.5px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--th-ink3) !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--th-hl) !important;
}
.MuiDialogContent-root {
  padding: 10px !important;
}
.MuiDialogActions-root {
  padding: 8px 10px !important;
  border-top: 1px solid var(--th-hl) !important;
}
.MuiMenuItem-root,
.MuiListItemButton-root {
  font-size: 11px !important;
  min-height: 24px !important;
  color: var(--th-ink2) !important;
}
.MuiMenuItem-root:hover,
.MuiListItemButton-root:hover {
  background: var(--th-s2) !important;
  color: var(--th-ink) !important;
}
.MuiMenuItem-root.Mui-selected,
.MuiListItemButton-root.Mui-selected {
  background: var(--th-s3) !important;
  color: var(--th-ink) !important;
}
.MuiBackdrop-root {
  background-color: rgba(12, 12, 11, 0.72) !important;
}
.MuiDivider-root {
  border-color: var(--th-hl) !important;
}
.MuiCircularProgress-root,
.MuiLinearProgress-bar {
  color: var(--th-ink2) !important;
  background-color: var(--th-ink2) !important;
}
.MuiLinearProgress-root {
  background-color: var(--th-hl) !important;
  height: 2px !important;
}

/* ---- Фокус: 1px инверсная рамка, без цветного ореола (правило витрины). ---- */
:focus-visible {
  outline: 1px solid var(--th-ink) !important;
  outline-offset: 1px !important;
}
.MuiOutlinedInput-input:focus {
  outline: 0 !important;
}
.MuiButtonBase-root.Mui-focusVisible {
  outline: 1px solid var(--th-ink) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

/* ---- Выделение и полосы прокрутки — как на витрине. ---- */
::selection {
  background: var(--th-hl2);
  color: var(--th-ink);
}
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-thumb {
  background: var(--th-hl2);
}
::-webkit-scrollbar-track {
  background: var(--th-s1);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--th-hl2) var(--th-s1);
}