/* ==========================================================================
   
   ## K-Files Authelia Windows 98 Theme ##

   This theme is based on the 98.css project, and is designed to integrate
   with applications which use 98.css to provide a consistent Windows 98 theme.

   However, it does have K-Files specific customizations and branding.
   These customizations include the use of K-Files the logo, as well as moving
   the account settings menu button slightly to the left to make room for a
   custom Home button on the top-right corner, which is injected separately
   via nginx, and styled in this CSS file.

   Custom assets (images, fonts) are expected to be served from the
   /kfilesassets/ path in nginx.

   You can find the original 98.css project here:
   https://jdan.github.io/98.css/
   
   ========================================================================== */

/* 
   FONTS
*/
@font-face {
  font-family: "Pixelated MS Sans Serif";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/ms_sans_serif.woff2") format("woff2");
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/ms_sans_serif_bold.woff2") format("woff2");
}

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

/* Global background */
html, body {
  margin: 0;
  background-image: url("/kfilesassets/chainlink.jpg");
  background-repeat: repeat;
  background-size: auto;
  overflow-x: hidden; /* Prevent horizontal scroll from security guards on mobile */
}

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

/* Typography definition (Win98 font) */
html, body, #root,
.MuiTypography-root,
.MuiInputBase-root,
.MuiButtonBase-root {
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif !important;
  font-size: 18px !important;
}

/* Labels typography */
.MuiFormLabel-root,
.MuiInputLabel-root {
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif !important;
  font-size: inherit !important;
  line-height: normal !important;
  color: #000 !important;
}

/* Images pixelation (Logo, etc) */
#authenticated-stage img[alt="Logo"],
#first-factor-stage img[alt="Logo"],
#second-factor-stage img[alt="Logo"],
#root img[alt="Logo"] {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

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

/* 
   Shared Window Style (Win98 Container)
   Used by Login (1FA/2FA), Reset Password, Authenticated view, and Logout view.
   Provides the silver background and 3D borders.
*/
#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: silver !important;
  border-radius: 0 !important;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #dfdfdf,
    inset -2px -2px grey,
    inset  2px  2px #fff !important;
}

/* Specific Window Padding Overrides */

/* Login & Reset: Small padding for window frame effect and content spacing */
#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: 3px !important;
  margin-top: 0 !important;
  overflow: hidden !important;
}

/* Login only: allow decorative elements (e.g. guard) to render outside window */
#first-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs,
#second-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs {
  overflow: visible !important;
}

/* Security Guards (Left/Right of Login Window) */
#first-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs::after,
#second-factor-stage .MuiContainer-root.MuiContainer-maxWidthXs::after {
  content: "";
  position: absolute !important;
  left: -132px;
  right: -132px;
  height: 219px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("/kfilesassets/security_guard.gif"), url("/kfilesassets/security_guard.gif");
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-size: 120px 219px, 120px 219px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

/* Authenticated: Larger padding for center content */
#authenticated-stage .MuiContainer-root.MuiContainer-maxWidthXs {
  padding: 38px 10px 12px !important;
}

/* Logout: Moderate padding */
.tss-1oodarx-root .MuiContainer-root.MuiContainer-maxWidthXs {
  padding: 12px !important;
}

/* Stage Layout Flex fixes to prevent gaps */
#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;
}

/* Common Title Bar Geometry (Inset Windows) */
#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 {
  margin: 0 !important;
  padding: 4px 3px 4px 6px !important;
  line-height: normal !important;
}

/* Banner (Login & Reset) - Replaces content before the window */
body::before { content: none !important; }

#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: 86px;
  margin: 0 0 6px 0;
  background-image: url("/kfilesassets/kfiles.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* "NEW!" badge overlay on Login banner (top-right of kfiles.gif) */
#first-factor-stage::before,
#second-factor-stage::before {
  background-image: url("/kfilesassets/new.gif"), url("/kfilesassets/kfiles.gif");
  background-repeat: no-repeat, no-repeat;
  background-position: calc(50% + 130px) 0px, center;
  background-size: 61px 37px, contain;
}

/* "Now with bugs!" gif below login box */
#first-factor-stage::after,
#second-factor-stage::after {
  content: "";
  display: block;
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  margin-top: 30px;
  background-image: url("/kfilesassets/now_with_bugs.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  min-height: 120px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ==========================================================================
   TITLE BARS
   ========================================================================== */

/* Common Title Bar 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;
  
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: bold !important;
  color: #fff !important;
  text-align: left !important;
  
  background: linear-gradient(90deg, #000080, #1084d0) !important;
  border: 0 !important;
  box-shadow: none !important;
}

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

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

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

/* Authenticated Title Bar ("Authentication Status") - Positioned Absolute over padding */
#authenticated-stage .MuiContainer-root.MuiContainer-maxWidthXs::before {
  content: "Authentication Status";
  position: absolute !important;
  left: 3px !important;
  right: 3px !important;
  top: 3px !important;
  height: 28px !important;
  justify-content: flex-start !important;
  padding: 0 8px !important;
}

/* 
   Hide built-in Authelia headers
   We hide these because we are replacing them with the Win98 Title Bars above.
*/
#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;
}

/* Window Content Spacing (Login & Reset) - Push content down slightly */
#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: 4px !important;
}

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

/* 
   Sunken Frame (Fieldset) 
   Applied to 1FA, 2FA, and Reset Password Step 1 & 2.
   Replaces MUI border with Win98 sunken shadow.
*/
#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: 0 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 0 !important;
  box-shadow:
    inset -1px -1px #fff,
    inset  1px  1px grey,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a !important;
}

/* 
   Input Container & Internal Root
   Removes default MUI rounded corners and borders to allow fieldset to draw frame 
*/
#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: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
  height: 34px !important;
  padding-right: 0 !important;
}

/* Focused State: No rounded corners on fieldset either */
#first-factor-stage .MuiOutlinedInput-root.Mui-focused fieldset.MuiOutlinedInput-notchedOutline,
#second-factor-stage .MuiOutlinedInput-root.Mui-focused fieldset.MuiOutlinedInput-notchedOutline {
  border-radius: 0 !important;
}

/* 
   Input Element
   The actual typing area. White bg, black text.
*/
#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: 18px !important;
  background: #fff !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 4px 8px !important;
  line-height: 32px !important;
  border: 0 !important;
  outline: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 
   Spacing above inputs to make room for the larger, non-floating labels
*/
#first-factor-stage .MuiTextField-root,
#second-factor-stage .MuiTextField-root,
#reset-password-step1-stage .MuiTextField-root,
#reset-password-step2-stage .MuiTextField-root {
  padding-top: 8px !important;
  margin-bottom: 8px !important;
}

/* ==========================================================================
   LABELS (FLOATING)
   ========================================================================== */

/* Frozen "Shrunken" State (Always docked above field) */
#first-factor-stage .MuiInputLabel-root,
#second-factor-stage .MuiInputLabel-root,
#reset-password-step1-stage .MuiInputLabel-root,
#reset-password-step2-stage .MuiInputLabel-root {
  transition: none !important;
  pointer-events: none !important;
}

#first-factor-stage .MuiInputLabel-outlined,
#second-factor-stage .MuiInputLabel-outlined,
#reset-password-step1-stage .MuiInputLabel-outlined,
#reset-password-step2-stage .MuiInputLabel-outlined {
  transform-origin: top left !important;
  transform: translate(0px, -8px) scale(1) !important;
  left: 0 !important;
}

/* Large Label Font Overrides */
#first-factor-stage .MuiInputLabel-root,
#second-factor-stage .MuiInputLabel-root,
#reset-password-step1-stage .MuiInputLabel-root,
#reset-password-step2-stage .MuiInputLabel-root {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* ==========================================================================
   BUTTONS & ACTIONS
   ========================================================================== */

/* Standard Win98 Button logic applied to MUI Buttons and Logout links */
button.MuiButtonBase-root,
button.MuiButton-root,
a[href*="logout"],
button[aria-label*="Logout" i],
button[id*="logout" i],
a[aria-label*="Logout" i] {
  background: silver !important;
  color: #000 !important;
  border-radius: 0 !important;
  font-size: 18px !important;
  min-height: 38px !important;
  min-width: 120px !important;
  padding: 0 20px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #fff,
    inset -2px -2px grey,
    inset  2px  2px #dfdfdf !important;
}

/* Active State (Pressed) */
button.MuiButtonBase-root:active,
button.MuiButton-root:active,
a[href*="logout"]:active {
  box-shadow:
    inset -1px -1px #fff,
    inset  1px  1px #0a0a0a,
    inset -2px -2px #dfdfdf,
    inset  2px  2px grey !important;
}

/* Reset Password Link (Text Button) - Exception to button style */
#reset-password-button {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  color: #0000ee !important;
  text-decoration: underline !important;
}

/* Footer Links - Hidden */
a[href*="authelia.com"] {
  display: none !important;
}

/* Language Select Button - Hidden */
#language-button {
  display: none !important;
}

/* Logout button positioning tweaks for inline display */
a[href*="logout"],
button[aria-label*="Logout" i] {
  display: inline-block !important;
  padding: 0 20px !important;
  text-decoration: none !important;
  line-height: 38px !important;
}

/* ==========================================================================
   INPUT ADORNMENTS (EYE BUTTON)
   ========================================================================== */

/* Container positioning */
#first-factor-stage .MuiInputAdornment-positionEnd,
#second-factor-stage .MuiInputAdornment-positionEnd,
#reset-password-step2-stage .MuiInputAdornment-positionEnd {
  height: 100% !important;
  margin: 0 !important;
  align-self: stretch !important;
  background: transparent !important;
  position: relative !important;
  z-index: 5 !important;
  
  display: flex !important;
  align-items: stretch !important;
}

/* Eye Button Style */
#first-factor-stage .MuiInputAdornment-positionEnd .MuiIconButton-root,
#second-factor-stage .MuiInputAdornment-positionEnd .MuiIconButton-root,
#reset-password-step2-stage .MuiInputAdornment-positionEnd .MuiIconButton-root {
  
  /* Box overrides */
  box-sizing: border-box !important;
  margin: 0 !important;
  border-radius: 0 !important;
  width: 34px !important;
  min-width: 34px !important;
  min-height: 0 !important;
  padding: 0 !important;
  flex: 0 0 34px !important;
  
  /* Win98 Button styling */
  background: silver !important;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #fff,
    inset -2px -2px grey,
    inset  2px  2px #dfdfdf !important;
  
  position: relative !important;
  z-index: 6 !important;
  
  /* Internal Centering */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  
  /* Reset min-width inherited from button rule */
  min-width: 34px !important;
}

/* Icon Sizing */
#first-factor-stage .MuiInputAdornment-positionEnd .MuiIconButton-root svg,
#second-factor-stage .MuiInputAdornment-positionEnd .MuiIconButton-root svg,
#reset-password-step2-stage .MuiInputAdornment-positionEnd .MuiIconButton-root svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

/* Kill MUI Ripples on Eye Button */
#first-factor-stage .MuiTouchRipple-root,
#second-factor-stage .MuiTouchRipple-root,
#reset-password-step2-stage .MuiTouchRipple-root {
  display: none !important;
}

/* ==========================================================================
/* ==========================================================================
   CHECKBOX ("REMEMBER ME")
   ========================================================================== */

#first-factor-stage .tss-zamarv-actionRow,
#second-factor-stage .tss-zamarv-actionRow {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Label Wrapper & Text */
#first-factor-stage .MuiFormControlLabel-root,
#second-factor-stage .MuiFormControlLabel-root {
  margin: 0 !important;
  width: auto !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
}

#first-factor-stage .MuiFormControlLabel-label,
#second-factor-stage .MuiFormControlLabel-label {
  font-family: inherit !important;
  font-size: 18px !important;
  margin-left: 8px !important;
}

/* 
   Checkbox Container (The Box) 
   We reuse the MuiCheckbox-root span to draw the Win98 box
*/
#first-factor-stage .MuiCheckbox-root,
#second-factor-stage .MuiCheckbox-root {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  
  /* 98.css inset shadow */
  box-shadow: 
    inset -1px -1px #fff, 
    inset 1px 1px grey, 
    inset -2px -2px #dfdfdf, 
    inset 2px 2px #0a0a0a !important;
}

/* Hide the default MUI SVG Icon & Ripples */
#first-factor-stage .MuiCheckbox-root svg,
#second-factor-stage .MuiCheckbox-root svg,
#first-factor-stage .MuiCheckbox-root .MuiTouchRipple-root,
#second-factor-stage .MuiCheckbox-root .MuiTouchRipple-root {
  display: none !important;
}

/* Checked State - The Checkmark */
#first-factor-stage .MuiCheckbox-root.Mui-checked::after,
#second-factor-stage .MuiCheckbox-root.Mui-checked::after {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  
  z-index: 20 !important;
  pointer-events: none !important;
  
  background: url("/kfilesassets/checkmark.svg") no-repeat center/contain !important;
}

/* Ensure input is clickable but invisible */
#first-factor-stage .MuiCheckbox-root input,
#second-factor-stage .MuiCheckbox-root input {
  z-index: 10 !important;
}

/* ==========================================================================
   AUTHENTICATED VIEW & ACCOUNT MENU
   ========================================================================== */

/* Authenticated Body Text Size */
#authenticated-stage h5,
#authenticated-stage .MuiTypography-h5,
#authenticated-stage .MuiTypography-body1 {
  font-size: 18px !important;
}

/* Clear inner panel styling to prevent double borders (since we style the container) */
#authenticated-stage .tss-e18l6h-mainContainer {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Reorder elements: Text/Icon Top, Logout Button Bottom */
#authenticated-stage .tss-e18l6h-mainContainer > :not(button):not(a) { order: 0 !important; }
#authenticated-stage .tss-e18l6h-mainContainer button,
#authenticated-stage .tss-e18l6h-mainContainer a { order: 1 !important; margin-top: 8px !important; }

/* Grid Layout Fixes for Authenticated to force vertical stack */
#authenticated-stage .MuiGrid-container.MuiGrid-direction-xs-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
/* If logout is in a separate grid item (row 1), push it to bottom (order 2) */
#authenticated-stage .MuiGrid-container.MuiGrid-direction-xs-column > .MuiGrid-root:first-child { order: 2 !important; margin-top: 10px !important; }
#authenticated-stage .MuiGrid-container.MuiGrid-direction-xs-column > .MuiGrid-root:nth-child(2) { order: 1 !important; }

/* Custom Check Icon (replaces MUI SVG) */
#authenticated-stage .tss-e18l6h-mainContainer svg,
#authenticated-stage .tss-e18l6h-mainContainer .MuiSvgIcon-root,
#authenticated-stage .tss-e18l6h-mainContainer img { display: none !important; }

#authenticated-stage .tss-e18l6h-mainContainer::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  margin: 6px auto -22px;
  background-image: url("/kfilesassets/check.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* 
   Account Menu Button (Top Right)
   Uses high-specificity selectors for container to override global button styles
   and ensure correct sizing/positioning for the menu anchor.
*/
button#account-menu.MuiIconButton-root,
button#account-menu.MuiButtonBase-root {
  position: fixed !important;
  top: 10px !important;
  right: 55px !important; /* Spaced for Home button */
  z-index: 2000 !important;
  
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  
  /* Sizing - strict scaling for 40px icon */
  padding: 0 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

button#account-menu.MuiIconButton-root:hover,
button#account-menu.MuiIconButton-root:active,
button#account-menu.MuiButtonBase-root:hover,
button#account-menu.MuiButtonBase-root:active {
  background: transparent !important;
  box-shadow: none !important;
}

/* Custom Key Icon for Account */
#account-menu .MuiAvatar-root,
#account-menu .MuiAvatar-circular {
  width: 40px !important;
  height: 40px !important;
  border-radius: 0 !important;
  background: transparent !important;
  
  /* reliably hide the K without removing the element */
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#account-menu .MuiAvatar-root::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 0%;
  
  background-image: url("/kfilesassets/users_key.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#account-menu .MuiTouchRipple-root { display: none !important; }

/* Header/Toolbar layout tightener */
#root header .MuiToolbar-root .MuiBox-root.mui-6rmmc2 {
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================================
   MUI DIALOG (2FA Method Picker, etc.)
   ========================================================================== */

/* 2FA Method Container - Win98 Sunken Frame (outer box around "One-Time Password" etc.) */
.tss-1pwt01h-methodContainer {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    inset -1px -1px #fff,
    inset  1px  1px grey,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a !important;
  background: silver !important;
}

/* User Settings Panel - Win98 Window (targets the Paper containing the h4) */
.MuiPaper-root.mui-dh6sff:has(> .MuiBox-root > .MuiTypography-h4) {
  position: relative !important;
  background: silver !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #dfdfdf,
    inset -2px -2px grey,
    inset  2px  2px #fff !important;
  padding: 38px 12px 12px !important;
}

/* User Settings Title Bar */
.MuiPaper-root.mui-dh6sff:has(> .MuiBox-root > .MuiTypography-h4)::before {
  content: "User Settings";
  display: flex !important;
  align-items: center !important;
  position: absolute !important;
  left: 3px !important;
  right: 3px !important;
  top: 3px !important;
  height: 28px !important;
  padding: 0 8px !important;

  font-family: "Pixelated MS Sans Serif", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: bold !important;
  color: #fff !important;
  text-align: left !important;

  background: linear-gradient(90deg, #000080, #1084d0) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Hide the original h4 since we replaced it with the title bar */
.MuiPaper-root.mui-dh6sff > .MuiBox-root > .MuiTypography-h4 {
  display: none !important;
}

/* Device Entry Panels (e.g. OTP entries) - Win98 Sunken Frame */
.MuiPaper-root.mui-dh6sff[id] {
  background: silver !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow:
    inset -1px -1px #fff,
    inset  1px  1px grey,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a !important;
}

/* 
   Settings Section Panels (One-Time Password, WebAuthn, Options)
   Win98 Window with h5 styled as title bar
*/
.MuiPaper-root.mui-dh6sff:has(> .MuiGrid-container .MuiTypography-h5) {
  position: relative !important;
  background: silver !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #dfdfdf,
    inset -2px -2px grey,
    inset  2px  2px #fff !important;
  padding: 3px !important;
}

/* Section Panel h5 → Title Bar */
.MuiPaper-root.mui-dh6sff > .MuiGrid-container .MuiTypography-h5 {
  display: flex !important;
  align-items: center !important;
  background: linear-gradient(90deg, #000080, #1084d0) !important;
  color: #fff !important;
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: bold !important;
  padding: 4px 3px 4px 6px !important;
  margin: 0 !important;
  line-height: normal !important;
}

/* Section Panel inner content spacing */
.MuiPaper-root.mui-dh6sff > .MuiGrid-container.mui-130y4ki {
  padding: 4px !important;
}

/* ==========================================================================
   RADIO BUTTONS (Win98 Style)
   ========================================================================== */

/* Radio Button Container */
.MuiRadio-root {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow:
    inset -1px -1px #fff,
    inset  1px  1px grey,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #0a0a0a !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  min-width: 20px !important;
  min-height: 20px !important;
}

/* Hide the default MUI Radio SVG Icons, inner spans & Ripples */
.MuiRadio-root svg,
.MuiRadio-root .MuiTouchRipple-root,
.MuiRadio-root > span:not(.MuiTouchRipple-root) {
  display: none !important;
}

/* Checked State - The Dot */
.MuiRadio-root.Mui-checked::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #000 !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 20;
  pointer-events: none;
}

/* Ensure radio input is clickable but invisible */
.MuiRadio-root input {
  z-index: 10 !important;
}

/* Radio Label styling */
.MuiFormControlLabel-root .MuiFormControlLabel-label {
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif !important;
  font-size: 18px !important;
  color: #000 !important;
}

/* Dialog Paper - Win98 Window */
.MuiDialog-paper.MuiPaper-root {
  background: silver !important;
  border-radius: 0 !important;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #dfdfdf,
    inset -2px -2px grey,
    inset  2px  2px #fff !important;
  padding: 3px !important;
  overflow: visible !important;
}

/* Dialog Title Bar */
.MuiDialog-paper.MuiPaper-root::before {
  content: "Select Method";
  display: flex !important;
  align-items: center !important;

  font-family: "Pixelated MS Sans Serif", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: bold !important;
  color: #fff !important;
  text-align: left !important;

  background: linear-gradient(90deg, #000080, #1084d0) !important;
  border: 0 !important;
  box-shadow: none !important;

  margin: 0 !important;
  padding: 4px 3px 4px 6px !important;
  line-height: normal !important;
}

/* Dialog Content Area */
.MuiDialog-paper .MuiDialogContent-root {
  background: silver !important;
  padding: 8px !important;
}

/* Dialog Method Option Buttons */
.MuiDialog-paper #methods-dialog button {
  background: silver !important;
  color: #000 !important;
  border-radius: 0 !important;
  font-size: 18px !important;
  min-height: 48px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #fff,
    inset -2px -2px grey,
    inset  2px  2px #dfdfdf !important;
}

.MuiDialog-paper #methods-dialog button:active {
  box-shadow:
    inset -1px -1px #fff,
    inset  1px  1px #0a0a0a,
    inset -2px -2px #dfdfdf,
    inset  2px  2px grey !important;
}

/* Method option button text color */
.MuiDialog-paper #methods-dialog button p {
  color: #000 !important;
}

/* Method option SVG icons - make them dark for silver bg */
.MuiDialog-paper #methods-dialog button svg {
  fill: #000 !important;
}
.MuiDialog-paper #methods-dialog button svg path {
  fill: #000 !important;
}
.MuiDialog-paper #methods-dialog button svg circle[fill="white"] {
  fill: silver !important;
}
.MuiDialog-paper #methods-dialog button svg circle[stroke="white"] {
  stroke: #000 !important;
}
.MuiDialog-paper #methods-dialog button svg circle[stroke="#1976d2"] {
  stroke: #000 !important;
}

/* Dialog Actions (Close button area) */
.MuiDialog-paper .MuiDialogActions-root {
  background: silver !important;
  padding: 4px 8px 8px !important;
}

/* Dialog backdrop */
.MuiDialog-root .MuiBackdrop-root {
  background-color: rgba(0, 0, 128, 0.4) !important;
}

/* 
   Home Button (Top Right)
*/
#home-button {
  display: none; /* Default hidden as per request */
  position: fixed !important;
  top: 10px !important;
  right: 10px !important;
  width: 40px !important;
  height: 40px !important;
  background-image: url("/kfilesassets/home.gif") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  z-index: 4000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: pointer;
}