/* Оформление портала входа. Подключается sidecar-прокси (brand-proxy):
   он вставляет <link rel="stylesheet" href="/brand/custom.css"> перед </head>.
   Инлайновый <style> тут не годится — Authelia отдаёт CSP с nonce, который
   генерируется на каждый запрос; внешний файл проходит по 'self'.

   Стили MUI инжектятся в <head> в рантайме, то есть ПОСЛЕ этого файла,
   поэтому ключевые правила помечены !important. */

/* Фон светлый (сине-фиолетовый градиент с нейронной сетью), а тема Authelia —
   тёмная. Поэтому вуаль слабая: она нужна лишь настолько, чтобы белый текст
   ВНЕ панели (переключатель языка) читался. Сильное затемнение под тёмную
   тему просто убило бы картинку. */
:root {
    --brand-veil: rgba(10, 16, 34, 0.30);
    --brand-panel: rgba(12, 16, 28, 0.82);
    --brand-edge: rgba(255, 255, 255, 0.14);
    --brand-accent: rgba(120, 170, 255, 0.45);
}

/* ── Фон ───────────────────────────────────────────────────────────── */

body {
    /* цвет подложки взят из картинки — если фон не успел загрузиться,
       страница не мигает чёрным */
    background-color: #5b6b8c !important;
    /* AVIF: поддержан всеми живыми браузерами (Firefox 93+, Chrome 85+,
       Safari 16+, Edge 121+). Запасной картинки нет — второй файл в
       ConfigMap уже не помещается, поэтому на совсем древнем браузере
       останется background-color выше. */
    background-image: url("/brand/bg.avif") !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* Затемняющая вуаль: без неё текст формы тонет в неоне картинки */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--brand-veil);
    pointer-events: none;
    z-index: 0;
}

#root {
    position: relative;
    z-index: 1;
}

/* ── Панель формы ──────────────────────────────────────────────────── */

#root .MuiContainer-root {
    background: var(--brand-panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--brand-edge);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    padding: 28px 24px 32px;
}

/* Логотип-аватарка над формой: круг с подсветкой по краю */
#root .MuiContainer-root img {
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--brand-edge), 0 0 26px var(--brand-accent);
}

/* Кнопка входа — чуть заметнее на тёмном фоне */
#sign-in-button {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── Футер «При поддержке Authelia» ────────────────────────────────── */

/* Цепляемся за href, а не за сгенерированные MUI-хэши (mui-2l0i2v и т.п.) —
   хэши меняются от сборки к сборке, href стабилен. */
a[href="https://www.authelia.com"] {
    display: none !important;
}

/* и убираем пустую строку-контейнер, чтобы не оставалось отступа */
.MuiGrid-container:has(> .MuiGrid-root > a[href="https://www.authelia.com"]) {
    display: none !important;
}

/* ── Стрелка «назад» на сайт платформы ─────────────────────────────── */

/* Самой ссылки в портале Authelia нет — её дописывает brand-proxy перед
   </body> (см. brand/default.conf). Якорь лежит СНАРУЖИ #root, поэтому React
   его не затирает при перерисовке. Стили держим здесь, а не в атрибуте style
   и не инлайновым <style>: CSP приходит с nonce, который генерируется на
   каждый запрос, и инлайн не пройдёт — внешний файл проходит по 'self'.

   Место выбрано слева сверху: справа сверху стоит переключатель языка, так
   получается симметрично, и на форму ссылка не наезжает ни на одном экране. */
/* Обе ссылки живут в общем контейнере: позиция задаётся ему, а не каждой
   ссылке отдельно — иначе вторую пришлось бы сдвигать на угаданную ширину
   первой, и подпись любой длины ломала бы вёрстку. */
#brand-links {
    position: fixed;
    top: 14px;
    left: 14px;
    /* выше #root (z-index: 1), иначе панель формы может перекрыть ссылки */
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2px;
}

#brand-back,
#brand-panel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* отбивка нужна не для красоты, а чтобы палец попадал по ссылке на телефоне */
    padding: 10px 14px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.92);
    /* тот же кегль и семейство, что у переключателя языка справа */
    font: 400 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-decoration: none;
    /* фон картинки местами светлый — без тени белый текст на нём тонет */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    transition: background-color 0.15s ease, color 0.15s ease;
}

#brand-back:hover,
#brand-back:focus-visible,
#brand-panel:hover,
#brand-panel:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
}

#brand-back .brand-back-arrow {
    font-size: 19px;
    line-height: 1;
    transition: transform 0.15s ease;
}

/* стрелка чуть отъезжает влево — подсказка, что ссылка ведёт назад */
#brand-back:hover .brand-back-arrow {
    transform: translateX(-2px);
}

/* На узком экране оставляем одну стрелку: подпись рядом с формой лишняя. */
@media (max-width: 480px) {
    #brand-back .brand-back-text {
        display: none;
    }

    /* у «Firewall» стрелки нет — прятать подпись нечем, только ужимаем отбивку */
    #brand-panel {
        padding-left: 10px;
        padding-right: 10px;
    }
}