/* ============================================================================
   Authelia custom.css — auto-generated by .shared/scripts/render_custom_css.py
   ---------------------------------------------------------------------------
   Source: brand.config.json + settings.css
   This file is auto-generated — DO NOT EDIT DIRECTLY.
   ========================================================================== */

:root {
  --fa-purple:        #7c3aed;
  --fa-violet:        #8b5cf6;
  --fa-purple-dark:   #6d28d9;
  --fa-button:        #5135bd;
  --fa-button-hover:  #3f29a3;
  --fa-button-shadow: rgba(81, 53, 189, 0.6);
  --fa-button-hover-shadow: rgba(81, 53, 189, 0.75);
  --fa-purple-glow:   rgba(124, 58, 237, 0.22);
  --fa-purple-drop:   rgba(124, 58, 237, 0.35);
  --fa-text:          #f3f4f6;
  --fa-text-dim:      #9ca3af;
  --fa-border:        #6d28d9;
  --fa-overlay:       rgba(0, 0, 0, 0.5);
  --fa-gradient:      linear-gradient(90deg, #C026D3 0%, #7C3AED 50%, #06B6D4 100%);
  --fa-bg-photo:      url('/branding/assets/zdjecie.jpg');
  --fa-wordmark:      "FREEDOM AI";
}
/* ============================================================================
   Authelia Settings Page — Dark + Purple Theme (MUI targets)
   ----------------------------------------------------------------------------
   Served as custom.css from Authelia's asset_path on ALL pages (login +
   settings).    Concatenated AFTER the :root { --fa-* } CSS variable block
   generated from brand.config.json. Uses var(--fa-*) for brand colors
   (purple, button, text, border). Dark canvas shades (#0a0a0f, etc.) are
   hardcoded — both stacks currently use the same dark palette.

   On the LOGIN page, company-login.css is injected later via responseInterceptor
   and overrides shared selectors (MuiPaper-root, MuiAppBar-root, body, etc.)
   by source order. So rules here that touch shared MUI components are safe —
   they only "stick" on the settings page where company-login.css is absent.

   Authelia v4.39 uses Material-UI (MUI) React components. Selectors target
   MUI classes. !important is used to beat Authelia's built-in dark theme.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Page background — very dark canvas
   On the settings page there is no bg-photo layer (that's injected by
   company-login.css on login only). So body's dark fill shows through.
   On login, company-login.css overrides body to transparent + photo.
   --------------------------------------------------------------------------- */
html {
  background: #0a0a0f !important;
}

body {
  background: #0a0a0f !important;
  color: var(--fa-text) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

/* ---------------------------------------------------------------------------
   2. AppBar header — dark with purple accent
   The settings page AppBar holds the (now hidden) hamburger + "Settings" title.
   On login, company-login.css makes the AppBar transparent + static.
   --------------------------------------------------------------------------- */
.MuiAppBar-root {
  background: rgba(18, 18, 26, 0.95) !important;
  border-bottom: 1px solid var(--fa-border) !important;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.4) !important;
  color: var(--fa-text) !important;
}

/* AppBar title text ("Settings") — light, bold */
.MuiAppBar-root .MuiToolbar-root .MuiTypography-root {
  color: var(--fa-text) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* ---------------------------------------------------------------------------
   3. Hamburger menu — hidden
   The settings page header has a hamburger (drawer toggle) in the top-left.
   In MUI's responsive drawer pattern the toggle button carries edge="start"
   → class MuiIconButton-edgeStart. This is distinct from the login page
   AppBar buttons (avatar #account-menu, language selector) which do NOT use
   edge="start", so this rule is safe on both pages. The change-password
   dialog uses MuiButton (text buttons), not IconButton, so it's unaffected.
   --------------------------------------------------------------------------- */
.MuiAppBar-root .MuiToolbar-root .MuiIconButton-edgeStart {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   4. Cards / Paper — dark gray with subtle purple border
   The settings overview card (user info: Name, Email, Password) and any
   other surfaced content. On login, company-login.css makes Paper transparent.
   --------------------------------------------------------------------------- */
.MuiPaper-root {
  background: rgba(20, 20, 28, 0.95) !important;
  border: 1px solid var(--fa-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  color: var(--fa-text) !important;
}

/* ---------------------------------------------------------------------------
   5. Drawer + menu items — dark theme overrides
   (Moved from company-login.css lines 397-421. The drawer is now unreachable
   via the hidden hamburger, but the styling is retained for completeness and
   in case the drawer is opened programmatically.)
   --------------------------------------------------------------------------- */
.MuiDrawer-paper {
  background: rgba(10, 10, 15, 0.95) !important;
  border-right: 1px solid var(--fa-border) !important;
}

/* Settings menu items — dim white, purple on hover/focus */
#settings-menu-overview,
#settings-menu-security,
#settings-menu-twofactor,
#settings-menu-close {
  color: var(--fa-text-dim) !important;
}

#settings-menu-overview:hover,
#settings-menu-security:hover,
#settings-menu-twofactor:hover,
#settings-menu-close:hover,
#settings-menu-overview.Mui-selected,
#settings-menu-security.Mui-selected,
#settings-menu-twofactor.Mui-selected,
#settings-menu-close.Mui-selected {
  color: var(--fa-text) !important;
  background: rgba(124, 58, 237, 0.15) !important;
}

/* ---------------------------------------------------------------------------
   6. Typography — light text, dim for secondary
   --------------------------------------------------------------------------- */
.MuiTypography-root {
  color: var(--fa-text) !important;
}

/* Secondary / dimmed text (e.g. email value, hints) */
.MuiTypography-colorTextSecondary,
.MuiTypography-root.MuiTypography-colorTextSecondary {
  color: var(--fa-text-dim) !important;
}

/* ---------------------------------------------------------------------------
   7. Inputs — dark fill, purple border on focus
   General outlined inputs on the settings page (e.g. 2FA config fields).
   The password-change dialog fields are handled in §9 with the same look.
   --------------------------------------------------------------------------- */
.MuiOutlinedInput-root {
  border-radius: 9999px !important;
  background: rgba(0, 0, 0, 0.4) !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;
}

.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;
}

/* Autofill — force dark fill (Chrome/Edge paint pale blue otherwise) */
.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.4) inset !important;
  caret-color: var(--fa-text) !important;
  transition: background-color 99999s ease-in-out 0s !important;
}

/* Labels — dim white, purple when focused */
.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;
}

/* ---------------------------------------------------------------------------
   8. Buttons — purple, pill
   General contained buttons on the settings page (dialog confirm/cancel, etc.).
   The CHANGE PASSWORD button is scoped by id in §9.
   --------------------------------------------------------------------------- */
.MuiButton-contained {
  background: var(--fa-button) !important;
  color: #fff !important;
  border-radius: 9999px !important;
  text-transform: none !important;
  font-weight: 600 !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-contained:hover {
  background: var(--fa-button-hover) !important;
  box-shadow: 0 12px 32px -8px var(--fa-button-hover-shadow) !important;
  transform: translateY(-1px) !important;
}

.MuiButton-contained:active {
  transform: translateY(0) !important;
}

/* Outlined / text buttons (e.g. dialog Cancel) — dim white, purple border */
.MuiButton-outlined,
.MuiButton-text {
  color: var(--fa-text-dim) !important;
  text-transform: none !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
}

.MuiButton-outlined {
  border: 1.5px solid var(--fa-border) !important;
}

.MuiButton-outlined:hover,
.MuiButton-text:hover {
  color: var(--fa-text) !important;
  background: rgba(124, 58, 237, 0.12) !important;
}

/* ---------------------------------------------------------------------------
   9. Change Password button + dialog (moved from company-login.css 423-455)
   --------------------------------------------------------------------------- */

/* Change Password button — match login button style */
button#change-password-button {
  background: var(--fa-button) !important;
  color: #fff !important;
  border-radius: 999px !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

button#change-password-button:hover {
  background: var(--fa-button-hover) !important;
}

/* Password change dialog — dark theme (after .MuiPaper-root so it wins) */
.MuiDialog-paper {
  background: rgba(15, 15, 20, 0.98) !important;
  border: 1px solid var(--fa-border) !important;
}

/* Dialog inputs — dark fill + purple border, pill shape */
#old-password .MuiOutlinedInput-root,
#new-password .MuiOutlinedInput-root,
#repeat-new-password .MuiOutlinedInput-root {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--fa-border) !important;
  border-radius: 999px !important;
  color: var(--fa-text) !important;
}

/* Dialog title + text — light */
.MuiDialog-paper .MuiTypography-root {
  color: var(--fa-text) !important;
}

/* ---------------------------------------------------------------------------
   10. Misc — list items, dividers, scrollbar
   --------------------------------------------------------------------------- */

/* List items in the settings card (Name / Email / Password rows) */
.MuiListItem-root {
  color: var(--fa-text) !important;
}

.MuiListItemText-primary {
  color: var(--fa-text) !important;
  font-weight: 500 !important;
}

.MuiListItemText-secondary {
  color: var(--fa-text-dim) !important;
}

/* Dividers — subtle purple */
.MuiDivider-root {
  border-color: rgba(109, 40, 217, 0.3) !important;
}

/* Scrollbar — dark with purple thumb */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0a0a0f;
}
::-webkit-scrollbar-thumb {
  background: var(--fa-purple-dark);
  border-radius: 999px;
  border: 2px solid #0a0a0f;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--fa-purple);
}

/* ---------------------------------------------------------------------------
   11. Responsive — mobile
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .MuiPaper-root {
    max-width: 92vw !important;
    border-radius: 12px !important;
  }
}