/* ==========================================================================
   
   ## LIC Authelia Bootstrap-Inspired Theme ##

   A clean, professional theme for Authelia inspired by Bootstrap's design
   language. Features modern shadows, rounded corners, and a professional
   color palette suitable for business use.

   Custom assets are served from /authassets/ path in nginx.

   ========================================================================== */

/* ==========================================================================
   CSS VARIABLES (Bootstrap-inspired palette)
   ========================================================================== */

/* ==========================================================================
   FONTS
   ========================================================================== */

@font-face {
  font-family: "LC Regola Neue";
  font-style: normal;
  font-weight: 400;
  src: url("/authassets/fonts/LCRegolaNeueMSTT-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "LC Regola Neue";
  font-style: normal;
  font-weight: 700;
  src: url("/authassets/fonts/LCRegolaNeueMSTT-Bold.woff2") format("woff2");
}

:root {
  /* Primary Colors */
  --bs-primary: #052458;
  --bs-primary-rgb: 5, 36, 88;
  --bs-primary-hover: #041c45;
  --bs-primary-active: #031536;
  
  /* Secondary/Gray Colors */
  --bs-secondary: #6c757d;
  --bs-secondary-rgb: 108, 117, 125;
  
  /* Status Colors */
  --bs-success: #198754;
  --bs-success-rgb: 25, 135, 84;
  --bs-danger: #dc3545;
  --bs-warning: #ffc107;
  --bs-info: #0dcaf0;
  
  /* Neutral Colors */
  --bs-white: #ffffff;
  --bs-light: #f8f9fa;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-dark: #212529;
  
  /* Typography */
  --bs-font-sans-serif: "LC Regola Neue", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  /* Spacing & Sizing */
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  
  /* Shadows */
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  
  /* Transitions */
  --bs-transition: all 0.15s ease-in-out;
}

/* ==========================================================================
   GLOBAL & TYPOGRAPHY
   ========================================================================== */

/* Global background */
html, body {
  margin: 0;
  background-image: url("/authassets/background.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  background-color: var(--bs-gray-200); /* Fallback */
  min-height: 100vh;
}

/* Background transparency for MUI containers */
#root, main {
  background: transparent !important;
}

/* Typography definition */
html, body, #root,
.MuiTypography-root,
.MuiInputBase-root,
.MuiButtonBase-root {
  font-family: var(--bs-font-sans-serif) !important;
  font-size: 16px !important;
  color: var(--bs-gray-900) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Labels typography */
.MuiFormLabel-root,
.MuiInputLabel-root {
  font-family: var(--bs-font-sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--bs-gray-700) !important;
  font-weight: 500 !important;
}

/* Logo styling */
#authenticated-stage img[alt="Logo"],
#first-factor-stage img[alt="Logo"],
#second-factor-stage img[alt="Logo"],
#root img[alt="Logo"] {
  max-width: 200px;
  height: auto;
}

/* ==========================================================================
   LAYOUT & CARD WINDOWS
   ========================================================================== */

/* 
   Shared Card Style (Bootstrap Card)
   Applied to Login, Reset Password, Authenticated, and Logout views.
*/
#first-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs,
#second-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs,
#reset-password-step1-stage .MuiContainer-root.MuiContainer-maxWidthXs,
#reset-password-step2-stage .MuiContainer-root.MuiContainer-maxWidthXs,
#authenticated-stage .MuiContainer-root.MuiContainer-maxWidthXs,
.tss-1oodarx-root .MuiContainer-root.MuiContainer-maxWidthXs {
  position: relative !important;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border-radius: var(--bs-border-radius-lg) !important;
  box-shadow: 
    var(--bs-box-shadow),
    inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  overflow: hidden !important;
}

/* Card Padding - Login & Reset */
#first-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs,
#second-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs,
#reset-password-step1-stage .MuiContainer-root.MuiContainer-maxWidthXs,
#reset-password-step2-stage .MuiContainer-root.MuiContainer-maxWidthXs {
  padding: 0 !important;
  margin-top: 0 !important;
}

/* All Authelia windows - glass effect */
#first-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs,
#second-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs,
#reset-password-step1-stage .MuiContainer-root.MuiContainer-maxWidthXs,
#reset-password-step2-stage .MuiContainer-root.MuiContainer-maxWidthXs,
#authenticated-stage .MuiContainer-root.MuiContainer-maxWidthXs,
.tss-1oodarx-root .MuiContainer-root.MuiContainer-maxWidthXs {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* Card Padding - Authenticated */
#authenticated-stage .MuiContainer-root.MuiContainer-maxWidthXs {
  padding: 2rem !important;
}

/* Card Padding - Logout */
.tss-1oodarx-root .MuiContainer-root.MuiContainer-maxWidthXs {
  padding: 1.5rem !important;
}

/* Dialog / Modal Windows (Method Selection etc) */
.MuiDialog-paper {
  background: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border-radius: var(--bs-border-radius-lg) !important;
  box-shadow: 
    var(--bs-box-shadow-lg),
    inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  overflow: hidden !important;
}

/* Ensure text inside dialog buttons (Method options) is white */
.MuiDialog-paper button .MuiTypography-root {
  color: var(--bs-white) !important;
}

/* Stage Layout */
#first-factor-stage,
#second-factor-stage,
#reset-password-step1-stage,
#reset-password-step2-stage {
  position: relative;
  align-content: flex-start !important;
  justify-content: flex-start !important;
}

/* ==========================================================================
   SETTINGS PAGES
   ========================================================================== */

/* Settings page panels - glass effect
   Target panels inside <main> to avoid affecting 2FA login flow */
main .MuiPaper-root.MuiPaper-outlined.MuiPaper-rounded {
  background: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border-radius: var(--bs-border-radius-lg) !important;
  box-shadow: 
    var(--bs-box-shadow),
    inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  overflow: hidden !important;
}

/* ==========================================================================
   CARD HEADERS (Title Bars)
   ========================================================================== */

/* Common Card Header Styles */
#first-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs::before,
#second-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs::before,
#reset-password-step1-stage .MuiContainer-root.MuiContainer-maxWidthXs::before,
#reset-password-step2-stage .MuiContainer-root.MuiContainer-maxWidthXs::before,
#authenticated-stage .MuiContainer-root.MuiContainer-maxWidthXs::before {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  font-family: var(--bs-font-sans-serif) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--bs-gray-800) !important;
  text-align: center !important;
  
  background: transparent !important;
  padding: 1rem 1.5rem !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: none !important;
}

/* Login Header */
#first-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs::before,
#second-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs::before {
  content: "Sign In";
}

/* Reset Password Step 1 Header */
#reset-password-step1-stage .MuiContainer-root.MuiContainer-maxWidthXs::before {
  content: "Reset Password";
}

/* Reset Password Step 2 Header */
#reset-password-step2-stage .MuiContainer-root.MuiContainer-maxWidthXs::before {
  content: "Create New Password";
}

/* Authenticated Header */
#authenticated-stage .MuiContainer-root.MuiContainer-maxWidthXs::before {
  content: "Authenticated";
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0 !important;
}

/* Adjust authenticated content for header */
#authenticated-stage .MuiContainer-root.MuiContainer-maxWidthXs {
  padding-top: 4rem !important;
}

/* Hide built-in Authelia headers */
#first-factor-stage h1, #first-factor-stage h2,
#first-factor-stage .MuiTypography-h4, #first-factor-stage .MuiTypography-h5,
#second-factor-stage h1, #second-factor-stage h2,
#second-factor-stage .MuiTypography-h4, #second-factor-stage .MuiTypography-h5,
#reset-password-step1-stage h1, #reset-password-step1-stage h2,
#reset-password-step1-stage .MuiTypography-h4, #reset-password-step1-stage .MuiTypography-h5,
#reset-password-step2-stage h1, #reset-password-step2-stage h2,
#reset-password-step2-stage .MuiTypography-h4, #reset-password-step2-stage .MuiTypography-h5 {
  display: none !important;
}

/* Card Body Padding */
#first-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs > *:first-child,
#second-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs > *:first-child,
#reset-password-step1-stage .MuiContainer-root.MuiContainer-maxWidthXs > *:first-child,
#reset-password-step2-stage .MuiContainer-root.MuiContainer-maxWidthXs > *:first-child {
  padding: 1.5rem !important;
}

/* ==========================================================================
   LOGO / BRANDING BANNER
   ========================================================================== */

/* Hide default body::before */
body::before { content: none !important; }

/* Logo Banner above cards */
#first-factor-stage::before,
#second-factor-stage::before,
#reset-password-step1-stage::before,
#reset-password-step2-stage::before {
  content: "";
  display: block;
  flex: 0 0 100%;
  width: 100%;
  height: 80px;
  margin: 0 0 1rem 0;
  background-image: url("/authassets/logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ==========================================================================
   FORM INPUTS & FIELDS
   ========================================================================== */

/* 
   Input Field Styling (Bootstrap Form Control)
*/
#first-factor-stage fieldset.MuiOutlinedInput-notchedOutline,
#second-factor-stage fieldset.MuiOutlinedInput-notchedOutline,
#reset-password-step1-stage fieldset.MuiOutlinedInput-notchedOutline,
#reset-password-step2-stage fieldset.MuiOutlinedInput-notchedOutline {
  border: 1px solid var(--bs-gray-400) !important;
  border-radius: var(--bs-border-radius) !important;
  transition: var(--bs-transition) !important;
}

/* Focus State */
#first-factor-stage .MuiOutlinedInput-root.Mui-focused fieldset.MuiOutlinedInput-notchedOutline,
#second-factor-stage .MuiOutlinedInput-root.Mui-focused fieldset.MuiOutlinedInput-notchedOutline,
#reset-password-step1-stage .MuiOutlinedInput-root.Mui-focused fieldset.MuiOutlinedInput-notchedOutline,
#reset-password-step2-stage .MuiOutlinedInput-root.Mui-focused fieldset.MuiOutlinedInput-notchedOutline {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
  border-width: 1px !important;
}

/* Input Container */
#first-factor-stage .MuiOutlinedInput-root,
#second-factor-stage .MuiOutlinedInput-root,
#reset-password-step1-stage .MuiOutlinedInput-root,
#reset-password-step2-stage .MuiOutlinedInput-root,
#first-factor-stage .MuiInputBase-root,
#second-factor-stage .MuiInputBase-root,
#reset-password-step1-stage .MuiInputBase-root,
#reset-password-step2-stage .MuiInputBase-root {
  background: var(--bs-white) !important;
  border-radius: var(--bs-border-radius) !important;
  transition: var(--bs-transition) !important;
}

/* Input Element */
#first-factor-stage input.MuiOutlinedInput-input,
#second-factor-stage input.MuiOutlinedInput-input,
#reset-password-step1-stage input.MuiOutlinedInput-input,
#reset-password-step2-stage input.MuiOutlinedInput-input {
  font-size: 1rem !important;
  padding: 0.625rem 0.75rem !important;
  line-height: 1.5 !important;
  color: var(--bs-gray-900) !important;
}

/* Placeholder styling */
#first-factor-stage input::placeholder,
#second-factor-stage input::placeholder,
#reset-password-step1-stage input::placeholder,
#reset-password-step2-stage input::placeholder {
  color: var(--bs-gray-500) !important;
  opacity: 1 !important;
}

/* TextField spacing */
#first-factor-stage .MuiTextField-root,
#second-factor-stage .MuiTextField-root,
#reset-password-step1-stage .MuiTextField-root,
#reset-password-step2-stage .MuiTextField-root {
  margin-bottom: 1rem !important;
}

/* ==========================================================================
   LABELS
   ========================================================================== */

/* Label styling - Static labels above input fields */
#first-factor-stage .MuiInputLabel-root,
#second-factor-stage .MuiInputLabel-root,
#reset-password-step1-stage .MuiInputLabel-root,
#reset-password-step2-stage .MuiInputLabel-root,
#first-factor-stage .MuiInputLabel-root.Mui-focused,
#second-factor-stage .MuiInputLabel-root.Mui-focused,
#reset-password-step1-stage .MuiInputLabel-root.Mui-focused,
#reset-password-step2-stage .MuiInputLabel-root.Mui-focused {
  color: var(--bs-gray-700) !important;
  font-weight: 500 !important;
  /* Force static positioning above the input - no movement */
  position: static !important;
  transform: none !important;
  margin-bottom: 0.375rem !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  pointer-events: auto !important;
  /* Left align */
  text-align: left !important;
  display: block !important;
  width: 100% !important;
}

/* Hide the notched outline legend (used for floating label animation) */
#first-factor-stage .MuiOutlinedInput-notchedOutline legend,
#second-factor-stage .MuiOutlinedInput-notchedOutline legend,
#reset-password-step1-stage .MuiOutlinedInput-notchedOutline legend,
#reset-password-step2-stage .MuiOutlinedInput-notchedOutline legend {
  display: none !important;
}

/* Ensure the notched outline doesn't have a gap */
#first-factor-stage .MuiOutlinedInput-notchedOutline,
#second-factor-stage .MuiOutlinedInput-notchedOutline,
#reset-password-step1-stage .MuiOutlinedInput-notchedOutline,
#reset-password-step2-stage .MuiOutlinedInput-notchedOutline {
  top: 0 !important;
}

/* Make form control use column layout for static labels */
#first-factor-stage .MuiFormControl-root.MuiTextField-root,
#second-factor-stage .MuiFormControl-root.MuiTextField-root,
#reset-password-step1-stage .MuiFormControl-root.MuiTextField-root,
#reset-password-step2-stage .MuiFormControl-root.MuiTextField-root {
  display: flex !important;
  flex-direction: column !important;
}

/* ==========================================================================
   USERNAME TO EMAIL LABEL REPLACEMENT
   ========================================================================== */

/* Hide original username label text and replace with "Email" */
#first-factor-stage label[for="username-textfield"],
#reset-password-step1-stage label[for="username-textfield"],
#first-factor-stage label[for="username-textfield"].Mui-focused,
#reset-password-step1-stage label[for="username-textfield"].Mui-focused {
  /* Collapse the original text completely */
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: -100px !important;
  min-height: auto !important;
}

#first-factor-stage label[for="username-textfield"]::before,
#reset-password-step1-stage label[for="username-textfield"]::before,
#first-factor-stage label[for="username-textfield"].Mui-focused::before,
#reset-password-step1-stage label[for="username-textfield"].Mui-focused::before {
  content: "Email *" !important;
  /* Restore visibility and dimensions for the pseudo-element */
  color: var(--bs-gray-700) !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  display: inline-block !important;
}

/* Hide the asterisk for username field */
#first-factor-stage label[for="username-textfield"] .MuiFormLabel-asterisk,
#reset-password-step1-stage label[for="username-textfield"] .MuiFormLabel-asterisk {
  display: none !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

/* Primary Button (Bootstrap btn-primary) */
button.MuiButtonBase-root,
button.MuiButton-root {
  background: var(--bs-primary) !important;
  color: var(--bs-white) !important;
  border: 1px solid var(--bs-primary) !important;
  border-radius: var(--bs-border-radius) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 0.5rem 1rem !important;
  transition: var(--bs-transition) !important;
  box-shadow: none !important;
}

/* Button Hover State */
button.MuiButtonBase-root:hover,
button.MuiButton-root:hover {
  background: var(--bs-primary-hover) !important;
  border-color: var(--bs-primary-hover) !important;
  box-shadow: none !important;
}

/* Button Active/Pressed State */
button.MuiButtonBase-root:active,
button.MuiButton-root:active {
  background: var(--bs-primary-active) !important;
  border-color: var(--bs-primary-active) !important;
}

/* Button Focus State */
button.MuiButtonBase-root:focus,
button.MuiButton-root:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.5) !important;
}

/* Logout Button (Secondary style) */
a[href*="logout"],
button[aria-label*="Logout" i],
button[id*="logout" i],
a[aria-label*="Logout" i] {
  background: var(--bs-secondary) !important;
  color: var(--bs-white) !important;
  border: 1px solid var(--bs-secondary) !important;
  border-radius: var(--bs-border-radius) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  padding: 0.5rem 1rem !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: var(--bs-transition) !important;
}

a[href*="logout"]:hover,
button[aria-label*="Logout" i]:hover {
  background: #5c636a !important;
  border-color: #565e64 !important;
}

/* Reset Password Link (Text Link Style) */
#reset-password-button {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: #052458 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

#reset-password-button:hover {
  color: #041c45 !important;
  text-decoration: underline !important;
  background: transparent !important;
}

/* Footer Links */
a[href*="authelia.com"] {
  color: var(--bs-primary) !important;
  text-decoration: none !important;
}

a[href*="authelia.com"]:hover {
  text-decoration: underline !important;
}

/* ==========================================================================
   INPUT ADORNMENTS (Password Eye Button)
   ========================================================================== */

/* Container */
#first-factor-stage .MuiInputAdornment-positionEnd,
#second-factor-stage .MuiInputAdornment-positionEnd,
#reset-password-step2-stage .MuiInputAdornment-positionEnd {
  margin-right: 0.5rem !important;
}

/* Eye Button */
#first-factor-stage .MuiInputAdornment-positionEnd .MuiIconButton-root,
#second-factor-stage .MuiInputAdornment-positionEnd .MuiIconButton-root,
#reset-password-step2-stage .MuiInputAdornment-positionEnd .MuiIconButton-root {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--bs-gray-600) !important;
  padding: 0.25rem !important;
  border-radius: var(--bs-border-radius-sm) !important;
}

#first-factor-stage .MuiInputAdornment-positionEnd .MuiIconButton-root:hover,
#second-factor-stage .MuiInputAdornment-positionEnd .MuiIconButton-root:hover,
#reset-password-step2-stage .MuiInputAdornment-positionEnd .MuiIconButton-root:hover {
  background: var(--bs-gray-100) !important;
  color: var(--bs-gray-800) !important;
}

/* ==========================================================================
   CHECKBOX ("Remember Me")
   ========================================================================== */

/* Action Row Layout */
#first-factor-stage .tss-zamarv-actionRow,
#second-factor-stage .tss-zamarv-actionRow {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-top: 0.5rem !important;
}

/* Label Wrapper */
#first-factor-stage .MuiFormControlLabel-root,
#second-factor-stage .MuiFormControlLabel-root {
  margin: 0 !important;
}

#first-factor-stage .MuiFormControlLabel-label,
#second-factor-stage .MuiFormControlLabel-label {
  font-size: 0.875rem !important;
  color: var(--bs-gray-700) !important;
}

/* Checkbox Styling */
#first-factor-stage .MuiCheckbox-root,
#second-factor-stage .MuiCheckbox-root {
  color: var(--bs-gray-400) !important;
  padding: 0.25rem !important;
  margin-right: 0.5rem !important;
}

#first-factor-stage .MuiCheckbox-root.Mui-checked,
#second-factor-stage .MuiCheckbox-root.Mui-checked {
  color: var(--bs-primary) !important;
}

/* ==========================================================================
   AUTHENTICATED VIEW
   ========================================================================== */

/* Body Text */
#authenticated-stage h5,
#authenticated-stage .MuiTypography-h5,
#authenticated-stage .MuiTypography-body1 {
  font-size: 1.125rem !important;
  color: var(--bs-gray-700) !important;
}

/* Inner Container */
#authenticated-stage .tss-e18l6h-mainContainer {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 1rem 0 !important;
  
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
}

/* Success Icon Styling */
#authenticated-stage .tss-e18l6h-mainContainer svg,
#authenticated-stage .tss-e18l6h-mainContainer .MuiSvgIcon-root {
  color: var(--bs-success) !important;
  width: 64px !important;
  height: 64px !important;
}

/* Grid Layout */
#authenticated-stage .MuiGrid-container.MuiGrid-direction-xs-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
}

/* ==========================================================================
   ACCOUNT MENU BUTTON (Top Right)
   ========================================================================== */

button#account-menu.MuiIconButton-root,
button#account-menu.MuiButtonBase-root {
  position: fixed !important;
  top: 1rem !important;
  right: 1rem !important;
  z-index: 2000 !important;
  
  background: var(--bs-white) !important;
  border: 1px solid var(--bs-gray-300) !important;
  border-radius: 50% !important;
  box-shadow: var(--bs-box-shadow-sm) !important;
  
  padding: 0.5rem !important;
  width: 48px !important;
  height: 48px !important;
  
  transition: var(--bs-transition) !important;
}

button#account-menu.MuiIconButton-root:hover,
button#account-menu.MuiButtonBase-root:hover {
  background: var(--bs-gray-100) !important;
  box-shadow: var(--bs-box-shadow) !important;
}

/* Avatar Styling */
#account-menu .MuiAvatar-root,
#account-menu .MuiAvatar-circular {
  width: 32px !important;
  height: 32px !important;
  background: var(--bs-primary) !important;
  color: var(--bs-white) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   LANGUAGE SELECTOR (Hidden)
   ========================================================================== */

/* Hide language select button */
button[aria-label="Languages"],
button[id*="language"],
[data-testid="language-button"],
.MuiIconButton-root[aria-haspopup="listbox"] {
  display: none !important;
}

/* ==========================================================================
   HIDDEN ELEMENTS
   ========================================================================== */

/* Hide grid row on sign-in stages */
#first-factor-stage .mui-jps8xr,
#second-factor-stage .mui-jps8xr {
  display: none !important;
}

/* ==========================================================================
   ALERTS & NOTIFICATIONS
   ========================================================================== */

/* Error Alert Styling */
.MuiAlert-root.MuiAlert-standardError,
.MuiAlert-root.MuiAlert-filledError {
  background: #f8d7da !important;
  color: #842029 !important;
  border: 1px solid #f5c2c7 !important;
  border-radius: var(--bs-border-radius) !important;
}

/* Success Alert */
.MuiAlert-root.MuiAlert-standardSuccess,
.MuiAlert-root.MuiAlert-filledSuccess {
  background: #d1e7dd !important;
  color: #0f5132 !important;
  border: 1px solid #badbcc !important;
  border-radius: var(--bs-border-radius) !important;
}

/* Warning Alert */
.MuiAlert-root.MuiAlert-standardWarning,
.MuiAlert-root.MuiAlert-filledWarning {
  background: #fff3cd !important;
  color: #664d03 !important;
  border: 1px solid #ffecb5 !important;
  border-radius: var(--bs-border-radius) !important;
}

/* Info Alert */
.MuiAlert-root.MuiAlert-standardInfo,
.MuiAlert-root.MuiAlert-filledInfo {
  background: #cff4fc !important;
  color: #055160 !important;
  border: 1px solid #b6effb !important;
  border-radius: var(--bs-border-radius) !important;
}

/* ==========================================================================
   LOADING STATES & SPINNERS
   ========================================================================== */

.MuiCircularProgress-root {
  color: var(--bs-primary) !important;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 576px) {
  #first-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs,
  #second-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs,
  #reset-password-step1-stage .MuiContainer-root.MuiContainer-maxWidthXs,
  #reset-password-step2-stage .MuiContainer-root.MuiContainer-maxWidthXs,
  #authenticated-stage .MuiContainer-root.MuiContainer-maxWidthXs {
    margin: 0 1rem !important;
    border-radius: var(--bs-border-radius) !important;
  }
  
  #first-factor-stage::before,
  #second-factor-stage::before,
  #reset-password-step1-stage::before,
  #reset-password-step2-stage::before {
    height: 60px;
    margin-bottom: 0.75rem;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* Footer styling */
footer,
.MuiContainer-root + div:last-child {
  color: var(--bs-gray-600) !important;
  font-size: 0.875rem !important;
}