/* The login page's skin: the status panel's palette and fonts over Authelia's
   own page (docs/status-panel.md → The login page's skin). nginx in front of
   the portal links this file into every page it serves; nothing else of the
   page changes — no script, no markup.

   Most of it is Authelia's own theme variables, which its Tailwind classes
   read everywhere (inputs, buttons, the second-factor pages alike). The rest
   styles elements, a few ids and data attributes. This file is not in a
   cascade layer and Authelia's utilities are (Tailwind v4), so every rule here
   beats Authelia's utility classes whatever their specificity — mind that
   when adding one. What keeps the form usable whatever Authelia renames:
   nothing here sets display, visibility, opacity or pointer-events on
   anything that holds a field — only Authelia's loading screen is held back —
   and the pseudo-elements this file adds take no clicks. Never animate the
   form in: a password manager judges a field's visibility the moment it
   appears (Bitwarden: any ancestor below 0.1 opacity means hidden), and a
   form fading in from transparent can be judged hidden for good. */

@font-face {
  font-family: "Exo 2";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/vv/fonts/exo2-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Exo 2";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/vv/fonts/exo2-latin.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/vv/fonts/jetbrainsmono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/vv/fonts/jetbrainsmono-latin.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("/vv/fonts/unbounded-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("/vv/fonts/unbounded-latin.woff2") format("woff2");
  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;
}

/* Any theme: the skin replaces whichever one roles/sso configures. */
body[data-theme] {
  color-scheme: dark;
  --void: #07000f;
  --deep: #14002b;
  --abyss: #001726;
  --magenta: #ff2bd6;
  --cyan: #00f0ff;
  --violet: #8a2be2;

  --background: var(--void);
  --foreground: #ece8ff;
  --card: rgba(18, 4, 38, 0.74);
  --card-foreground: #ece8ff;
  --popover: #1a0833;
  --popover-foreground: #ece8ff;
  --primary: var(--magenta);
  --primary-foreground: #fff;
  --secondary: var(--violet);
  --secondary-foreground: #fff;
  --muted: rgba(138, 43, 226, 0.18);
  --muted-foreground: #a397d1;
  --accent: rgba(0, 240, 255, 0.1);
  --accent-foreground: #ece8ff;
  --destructive: #ff0055;
  --destructive-foreground: #fff;
  --border: rgba(0, 240, 255, 0.18);
  --input: rgba(0, 240, 255, 0.28);
  --ring: var(--cyan);
  --radius: 10px;
  --custom-icon: var(--cyan);
  --custom-loading-bar: var(--magenta);

  font-family: "Exo 2", system-ui, sans-serif;
  background:
    radial-gradient(1100px 620px at 8% -12%, rgba(255, 43, 214, 0.22), transparent 62%),
    radial-gradient(900px 520px at 108% 6%, rgba(0, 240, 255, 0.17), transparent 60%),
    radial-gradient(900px 700px at 50% 118%, rgba(138, 43, 226, 0.28), transparent 62%),
    linear-gradient(160deg, var(--void), var(--deep) 46%, var(--abyss));
  background-attachment: fixed;
  min-height: 100vh;
}

/* Scanlines over everything, never in the way — as on the panel. */
body[data-theme]::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* The brand, where Authelia's header leaves an empty space on the left. */
header::before {
  content: "VVTECHES // вход";
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 16px;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 43, 214, 0.8), 0 0 22px rgba(255, 43, 214, 0.45);
}
header { position: relative; }

/* Each step of the login (first factor, second factor, signed in, password
   reset) is a `…-stage` block around one column: that column becomes a panel
   card. The settings pages have no stage and keep only the colours. */
[id$="-stage"] > div {
  position: relative;
  /* Authelia's column is full-width on a phone; a card needs its gutter. */
  max-width: min(444px, calc(100vw - 32px));
  margin-block: 24px;
  padding: 28px 26px 22px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 18px 50px -20px rgba(255, 43, 214, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* A narrow phone: less padding, so the second factor's 300px-wide method box
   still fits inside the card, down to a 360px-wide screen. */
@media (max-width: 400px) {
  [id$="-stage"] > div { padding-inline: 14px; }
}
[id$="-stage"] > div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--magenta), var(--violet) 45%, var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.75;
  pointer-events: none;
}

[id$="-stage"] h5 {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.55);
}

[id$="-stage"] input {
  background: rgba(10, 2, 24, 0.6);
  color: #fff;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  caret-color: var(--cyan);
}
/* Not over an invalid field: Authelia's red border must stay. */
[id$="-stage"] input:focus:not([aria-invalid="true"]) {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 16px rgba(0, 240, 255, 0.35);
}
/* A focused, valid field's floating label (Authelia marks it text-primary;
   an invalid one keeps its red): cyan like the ring. */
[id$="-stage"] label.text-primary {
  color: var(--cyan);
}

#sign-in-button,
[id$="-stage"] button[data-variant="default"] {
  height: 44px;
  border: 0;
  background: linear-gradient(135deg, var(--magenta), var(--violet));
  color: #fff;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.16em;
  box-shadow: 0 0 18px rgba(255, 43, 214, 0.45);
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}
#sign-in-button:hover,
#sign-in-button:focus-visible,
[id$="-stage"] button[data-variant="default"]:hover,
[id$="-stage"] button[data-variant="default"]:focus-visible {
  filter: brightness(1.12);
  box-shadow: 0 0 26px rgba(255, 43, 214, 0.7), 0 0 0 1px var(--cyan);
}

/* Links and the "powered by" line: quiet, in the panel's dim tone. */
[id$="-stage"] a { color: #8f86c2; }
[id$="-stage"] a:hover { color: var(--cyan); }

/* Authelia's full-screen "Loading..." (while its app fetches its scripts,
   texts and state) shows only if loading is slow: a fast load goes straight
   from the background to the form instead of flashing a loader first. Safe
   by construction: in Authelia 4.39 only the loader carries min-h-screen (the
   stages use min-h-[90vh]), :has() pins it further, and a wrong match would
   only appear late, never stay hidden. */
.grid.min-h-screen:has(> .inline-block .animate-scale-loader) {
  animation: vv-fade-in 0.3s ease 1.2s both;
}
@keyframes vv-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}