/* ============================================================================
   Company AI FreedomAI — Authelia Login Page Branding (MUI targets)
   ----------------------------------------------------------------------------
   Injected into Authelia v4.39 HTML via hermes-web-proxy responseInterceptor.
   Authelia's login page is a Material-UI React SPA, so selectors target MUI
   classes, NOT shadcn/Tailwind classes.

   Design (from projekt mockup + user overrides):
     - Full-bg photo (zdjecie.jpg) with dark overlay (~0.5 black)
     - FreedomAI logo centered above form (gold house wordmark)
     - "powered by" text (Space Mono, 8px, lowercase) — USER OVERRIDE
     - "FREEDOM AI" wordmark (Orbitron, gradient #C026D3 → #7C3AED → #06B6D4)
     - Inputs: pill, transparent/near-black fill, purple border #6D28D9,
       user_icon/password_icon inside left edge
     - Button: pill, #5135bd (USER OVERRIDE), white text
     - NO glassmorphic card — form sits directly on background
     - "Remember me": subtle, white checkbox + label
     - "Powered by Authelia" link: hidden (existing rule retained)
     - Language selector tab: hidden (user complaint)

   User overrides (HIGHEST PRIORITY — beat the mockup):
     - "powered by" font: Space Mono, size 8px
     - Button color: #5135bd

   Layout: brand stack is injected before </body> as a SIBLING of #root
   (server.js constraint). body locks the canvas at 100vh + centers the
   [brand stack + #root] cluster as a flex column; #root is content-sized
   and scrolls internally on short viewports. Kills the page scrollbar and
   the old calc(-50% - 220px) magic number.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. Self-hosted fonts (same-origin /branding/assets/fonts/)
   Authelia CSP style-src 'self' blocks cross-origin Google Fonts @import,
   so fonts are self-hosted. Files in hermes/nginx/branding/assets/fonts/.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/branding/assets/fonts/spacemono-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/branding/assets/fonts/spacemono-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/branding/assets/fonts/orbitron-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/branding/assets/fonts/orbitron-900.ttf') format('truetype');
}

/* ---------------------------------------------------------------------------
   1. Page canvas — full-bg photo + dark overlay
   html/body lock the canvas at 100vh + hide overflow to kill the pointless
   page scrollbar (user complaint). body is ALSO the flex column centerer for
   the [brand stack + #root] cluster. Keep html/body transparent so
   body::before (photo at z-index -2) shows through.
   --------------------------------------------------------------------------- */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh !important;            /* lock canvas (was min-height: 100vh) */
  overflow: hidden !important;          /* kill page scrollbar */
  background: transparent !important;
  color: var(--fa-text) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

/* body = flex column centerer for the [brand stack + #root] cluster. */
body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Full-bg photo layer + dark overlay. Pseudo-elements keep the photo
   decoupled from body scrolling and sit behind all content. */
body::before,
body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
}
body::before {
  z-index: -2 !important;
  background: var(--fa-bg-photo) center center / cover no-repeat !important;
}
body::after {
  z-index: -1 !important;
  background: var(--fa-overlay) !important;
}

/* ---------------------------------------------------------------------------
   2. Card — transparent, sits on background (NO glassmorphic card)
   --------------------------------------------------------------------------- */
.MuiPaper-root {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--fa-text) !important;
  max-width: 380px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}

/* ---------------------------------------------------------------------------
   3. Injected brand elements
   --------------------------------------------------------------------------- */

/* Hide Authelia's own logo — the centered brand stack already shows the
   FREEDOM AI wordmark, so Authelia's logo is redundant. */
#root img[src*="logo"] { display: none !important; }

/* Brand stack — FreedomAI logo + "powered by" + "FREEDOM AI" wordmark.
    FLOW LAYOUT with order: -1 (refactored from absolute + magic calc):
    body is a flex column centerer. The brand stack HTML is injected before
    </body> — i.e. AFTER #root in DOM order. Without `order: -1` it would
    render BELOW the form. `order: -1` makes it the first flex child
    visually while keeping it the last DOM node (server.js constraint).
    margin-bottom spaces it from the form. flex: 0 0 auto keeps it visible
    on short viewports (the form scrolls, not the brand). */
.fa-brand-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 0 0 auto !important;            /* don't shrink — keep brand visible */
  order: -1 !important;                 /* render above #root despite DOM order */
  margin: 0 0 1.75rem !important;       /* spacing between brand stack and form */
  text-align: center !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* FreedomAI logo — gold house wordmark, centered above form */
.fa-logo {
  height: 56px !important;
  width: auto !important;
  margin: 0 auto 0.5rem !important;
  display: block !important;
}

/* "powered by" — Space Mono, 8px, lowercase, centered.
   USER OVERRIDE: Space Mono + 8px (mockup showed sans-serif ~12-14px). */
.fa-powered-by {
  font-family: "Space Mono", "Courier New", monospace !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  text-transform: lowercase !important;
  letter-spacing: 0.08em !important;
  color: #d1d5db !important;
  margin: 0.25rem 0 0.4rem !important;
  line-height: 1 !important;
}

/* "FREEDOM AI" wordmark — Orbitron, gradient text, centered */
.fa-wordmark {
  font-family: "Orbitron", "Space Mono", monospace !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  margin: 0 !important;
  background: var(--fa-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ---------------------------------------------------------------------------
   4. Inputs — pill, transparent/near-black fill, purple border, icons inside
   Consolidated: username + password share an identical base; only the
   background-image (icon) differs between them.
   --------------------------------------------------------------------------- */

/* Shared base for username + password fields */
#username-textfield .MuiOutlinedInput-root,
.MuiOutlinedInput-root[id*="username"],
#password-textfield .MuiOutlinedInput-root,
.MuiOutlinedInput-root[id*="password"] {
  background: rgba(0, 0, 0, 0.55) !important;
  border-radius: 9999px !important;
  padding-left: 44px !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: 20px 20px !important;
  color: var(--fa-text) !important;
}

/* Per-field icon (the only property that differs between fields) */
.MuiOutlinedInput-root[id*="username"] { background-image: url('/branding/assets/user_icon.png') !important; }
.MuiOutlinedInput-root[id*="password"] { background-image: url('/branding/assets/password_icon.png') !important; }

/* Fallback: any outlined input not matched above gets the pill + dark fill */
.MuiOutlinedInput-root {
  border-radius: 9999px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: var(--fa-text) !important;
}

.MuiOutlinedInput-notchedOutline {
  border: 1.5px solid var(--fa-border) !important;
  border-radius: 9999px !important;
}

.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--fa-purple) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 4px var(--fa-purple-glow) !important;
}

/* Input text + placeholder */
.MuiOutlinedInput-input {
  color: var(--fa-text) !important;
  -webkit-text-fill-color: var(--fa-text) !important;
}
.MuiOutlinedInput-input::placeholder { color: var(--fa-text-dim) !important; opacity: 1 !important; }

/* Chrome/Edge autofill — browser paints a pale-blue (#e8f0fe) background and
   ignores `color`, leaving white text on light blue (unreadable). Force the
   dark fill + white text back via -webkit-autofill, which is the ONLY hook
   Chrome respects for autofilled fields. transition-delay:99999s is the
   canonical trick to prevent the browser from re-painting its color. */
.MuiOutlinedInput-input:-webkit-autofill,
.MuiOutlinedInput-input:-webkit-autofill:hover,
.MuiOutlinedInput-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fa-text) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.55) inset !important;
  caret-color: var(--fa-text) !important;
  transition: background-color 99999s ease-in-out 0s !important;
}

/* Hide MUI's leading adornment slot if present (we use background-image) */
.MuiInputAdornment-root {
  display: none !important;
}

/* Password visibility toggle (trailing adornment) — keep visible, dim white */
.MuiInputAdornment-positionEnd {
  display: inline-flex !important;
  color: var(--fa-text-dim) !important;
}
.MuiInputAdornment-positionEnd .MuiIconButton-root {
  color: var(--fa-text-dim) !important;
}

/* ---------------------------------------------------------------------------
   5. Labels — subtle white, focused = purple
   --------------------------------------------------------------------------- */
.MuiInputLabel-root {
  color: var(--fa-text-dim) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}
.MuiInputLabel-root.Mui-focused {
  color: var(--fa-purple) !important;
}

/* ---------------------------------------------------------------------------
   6. Submit button — pill, #5135bd (USER OVERRIDE), white text
   --------------------------------------------------------------------------- */
.MuiButton-containedPrimary {
  width: 100% !important;
  padding: 0.85rem 1.5rem !important;
  background: var(--fa-button) !important;        /* #5135bd — user override */
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 8px 24px -8px var(--fa-button-shadow) !important;
  transition: background 0.25s, box-shadow 0.25s, transform 0.15s !important;
}
.MuiButton-containedPrimary:hover {
  background: var(--fa-button-hover) !important;
  box-shadow: 0 12px 32px -8px var(--fa-button-hover-shadow) !important;
  transform: translateY(-1px) !important;
}
.MuiButton-containedPrimary:active {
  transform: translateY(0) !important;
}

/* ---------------------------------------------------------------------------
   7. Remember-me — subtle white checkbox + label
   --------------------------------------------------------------------------- */
.MuiCheckbox-root {
  color: rgba(255, 255, 255, 0.55) !important;
}
.MuiCheckbox-colorPrimary.Mui-checked {
  color: var(--fa-purple) !important;
}
.MuiFormControlLabel-label {
  color: var(--fa-text-dim) !important;
  font-size: 0.85rem !important;
}

/* ---------------------------------------------------------------------------
   8. Alerts — rounded, themeable
   --------------------------------------------------------------------------- */
.MuiAlert-root {
  border-radius: 12px !important;
}

/* ---------------------------------------------------------------------------
   9. Hide "Powered by Authelia" footer + language selector (user complaint)
   NOTE: Do NOT hide .mui-6rmmc2 — in Authelia v4.39 this class is shared by
   BOTH the language selector wrapper AND the user avatar menu wrapper.
   Hiding it locks users out of Settings → Change Password. Only hide the
   language button itself.
   --------------------------------------------------------------------------- */
footer,
a.MuiLink-root[href*="authelia.com"] {
  display: none !important;
}

/* Language selector button only — NOT the shared .mui-6rmmc2 wrapper */
button#language-button {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   10. Form column — inner scroll container
    #root is content-sized (no max-height: 100vh, no internal justify-content:
    center) so body can center the [brand stack + #root] cluster as a unit.
    flex: 0 1 auto + min-height: 0 lets it shrink on short viewports;
    overflow-y: auto lets the form scroll internally instead of the page.
    align-items: center keeps the form horizontally centered.

    Authelia renders #root > .MuiBox-root > HEADER + .MuiGrid-root.mui-1yuefqk.
    That MuiGrid has min-height: 865px + justify-content: center which centers
    the form vertically INSIDE itself — creating a huge gap below the brand
    stack. Override: collapse min-height to auto, drop justify-content so the
    form flows right under the brand stack. The AppBar header is kept visible
    (styled transparent) — it holds the user avatar menu for Settings access.
    --------------------------------------------------------------------------- */
#root {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 0 1 auto !important;            /* can shrink when viewport is short */
  min-height: 0 !important;             /* allow shrink below content size */
  width: 100% !important;
  overflow-y: auto !important;           /* inner scroll on short viewports */
  padding: 1rem 0 !important;
}

/* Collapse Authelia's inner grid that forces min-height + vertical centering */
.MuiGrid-root.mui-1yuefqk {
  min-height: auto !important;
  justify-content: flex-start !important;
}

/* ---------------------------------------------------------------------------
   10b. AppBar header — keep visible (user avatar menu lives here)
   In Authelia v4.39 the AppBar (AppBarLoginPortal) contains BOTH the language
   selector AND the user avatar dropdown (AppBarItemAccountSettings). The avatar
   menu is the only path to Settings → Change Password. Previously the whole
   header was hidden (display:none) which locked users out of password
   management. Now we keep it visible but style it to match the dark branding.
   --------------------------------------------------------------------------- */
#root > .MuiBox-root > header.MuiAppBar-root {
  background: transparent !important;
  box-shadow: none !important;
  position: static !important;
}

/* Avatar button — dim white to match form text */
#account-menu {
  color: var(--fa-text-dim) !important;
}

.MuiContainer-root,
.MuiContainer-maxWidthSm {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

/* ---------------------------------------------------------------------------
   11. Responsive — mobile-friendly
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .fa-logo {
    height: 44px !important;
  }
  .fa-wordmark {
    font-size: 18px !important;
  }
  .MuiPaper-root {
    max-width: 92vw !important;
    padding: 0 0.5rem !important;
  }
}