/* ============================================================================
   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)
   #language-button is the selector trigger; .mui-6rmmc2 is its parent
   wrapper, hidden too so it leaves no empty box behind.
   --------------------------------------------------------------------------- */
footer,
.MuiGrid-root.mui-fiq9q0,
a.MuiLink-root[href*="authelia.com"],
.MuiGrid-root.mui-jps8xr,
#language-button,
.mui-6rmmc2 {
  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 also hidden
    (it only held the now-removed language selector).
    --------------------------------------------------------------------------- */
#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;
}

/* Hide Authelia's AppBar header — only held the language selector (now hidden) */
#root > .MuiBox-root > header.MuiAppBar-root {
  display: none !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;
  }
}