/* =============================================================================
   AUTHELIA CUSTOM THEME
   Colors:
     --bg-dark:         #1F2430   page background
     --bg-mid:          #282B3B   card / surface background
     --bg-hover:        #2e3245   subtle hover on dark bg
     --accent:          #a1d900   primary accent (green)
     --accent-hov:      #afeb00   accent hover
     --accent-subtle:   rgba(161, 217, 0, 0.08)   ghost hover background
     --accent-subtle-hov: rgba(161, 217, 0, 0.16) ghost hover background (selected)
     --text:            #F8F9FA   primary text
     --text-muted:      #adb5bd   secondary / placeholder text
     --border:          #3a3f52   default border
     --border-hover:    #6c757d   hovered border
     --error:           #c0392b   error button background
     --error-hov:       #e74c3c   error hover / icon color
     --info:            #2980b9   info button background
     --info-hov:        #3498db   info hover
============================================================================= */

:root {
    --bg-dark:           #1F2430;
    --bg-mid:            #282B3B;
    --bg-hover:          #2e3245;
    --accent:            #a1d900;
    --accent-hov:        #bcfc00;
    --accent-subtle:     rgba(161, 217, 0, 0.08);
    --accent-subtle-hov: rgba(161, 217, 0, 0.16);
    --text:              #F8F9FA;
    --text-muted:        #adb5bd;
    --border:            #3a3f52;
    --border-hover:      #6c757d;
    --error:             #c0392b;
    --error-hov:         #e74c3c;
    --info:              #2980b9;
    --info-hov:          #3498db;
}

/* =============================================================================
   BASE
============================================================================= */

body {
    background-color: var(--bg-dark) !important;
    color: var(--text) !important;
}

/* Hide "Powered by Authelia" link */
a[href="https://www.authelia.com"] {
    display: none;
}

/* =============================================================================
   APP BAR (top navigation bar — all variants)
============================================================================= */

.MuiAppBar-root,
.MuiAppBar-colorPrimary,
.MuiAppBar-colorTransparent {
    background-color: var(--bg-mid) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

.MuiToolbar-root {
    background-color: var(--bg-dark) !important;
}

/* =============================================================================
   PAPER & CARDS
   Covers login card, settings panels, drawer background, dialogs
============================================================================= */

.MuiPaper-root {
    background-color: var(--bg-mid) !important;
    color: var(--text) !important;
}

/* Outlined paper (used in settings/manage devices cards) */
.MuiPaper-outlined {
    border-color: var(--border) !important;
}

/* =============================================================================
   DRAWER (settings sidebar)
============================================================================= */

.MuiDrawer-paper {
    background-color: var(--bg-mid) !important;
    border-right: 1px solid var(--border) !important;
}

.MuiListItemButton-root {
    color: var(--text) !important;
}

.MuiListItemButton-root:hover {
    background-color: var(--bg-hover) !important;
}

.MuiListItemButton-root.Mui-selected {
    background-color: var(--accent) !important;
    color: var(--bg-dark) !important;
}

.MuiListItemButton-root.Mui-selected:hover {
    background-color: var(--accent-hov) !important;
    color: var(--bg-dark) !important;
}

.MuiListItemButton-root.Mui-selected .MuiListItemIcon-root,
.MuiListItemButton-root.Mui-selected .MuiListItemText-primary {
    color: var(--bg-dark) !important;
}

.MuiListItemIcon-root {
    color: var(--text) !important;
}

.MuiListItemText-primary {
    color: var(--text) !important;
}

.MuiDivider-root {
    border-color: var(--border) !important;
}

/* =============================================================================
   AVATAR (shown on password entry page)
============================================================================= */

.MuiAvatar-root {
    background-color: var(--accent) !important;
    color: var(--bg-dark) !important;
}

/* =============================================================================
   TYPOGRAPHY
============================================================================= */

.MuiTypography-root {
    color: var(--text) !important;
}

.MuiTypography-h4,
.MuiTypography-h5,
.MuiTypography-h6 {
    color: var(--text) !important;
}

.MuiTypography-caption,
.MuiTypography-subtitle2 {
    color: var(--text-muted) !important;
}

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

/* Primary contained — sign in, main actions */
#sign-in-button,
.MuiButton-containedPrimary {
    background-color: var(--accent) !important;
    color: var(--bg-dark) !important;
}

#sign-in-button:hover,
.MuiButton-containedPrimary:hover {
    background-color: var(--accent-hov) !important;
    color: var(--bg-dark) !important;
}

/* Outlined primary — secondary actions in settings */
.MuiButton-outlinedPrimary {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

.MuiButton-outlinedPrimary:hover {
    border-color: var(--accent-hov) !important;
    color: var(--accent-hov) !important;
    background-color: var(--accent-subtle) !important;
}

/* Error contained — delete/remove device buttons */
.MuiButton-containedError {
    background-color: var(--error) !important;
    color: var(--text) !important;
}

.MuiButton-containedError:hover {
    background-color: var(--error-hov) !important;
}

/* Info contained — used in manage devices modal */
.MuiButton-containedInfo {
    background-color: var(--info) !important;
    color: var(--text) !important;
}

.MuiButton-containedInfo:hover {
    background-color: var(--info-hov) !important;
}

/* Text/secondary buttons — back links */
.MuiButton-textSecondary {
    color: var(--accent) !important;
    text-decoration: none !important;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
                color 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.MuiButton-textSecondary:hover {
    color: var(--accent-hov) !important;
    text-decoration: none !important;
    background-color: var(--accent-subtle) !important;
}

/* Icon buttons — hamburger menu, back arrow, show/hide password */
.MuiIconButton-root {
    color: var(--text) !important;
}

.MuiIconButton-colorPrimary {
    color: var(--accent) !important;
}

/* Ripple effect on all clickable elements */
.MuiTouchRipple-root {
    color: var(--accent) !important;
}

/* =============================================================================
   LINKS
============================================================================= */

.MuiLink-root {
    color: var(--accent) !important;
    text-decoration: none !important;
}

.MuiLink-root:hover {
    color: var(--accent-hov) !important;
    text-decoration: none !important;
    background-color: var(--accent-subtle) !important;
}

#register-link,
#reset-password-button {
    color: var(--accent) !important;
    text-decoration: none !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
                color 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#register-link:hover,
#reset-password-button:hover {
    color: var(--accent-hov) !important;
    text-decoration: none !important;
    background-color: var(--accent-subtle) !important;
}

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

/* Input text color */
.MuiInputBase-input {
    color: var(--text) !important;
}

/* Input background */
.MuiOutlinedInput-root {
    background-color: var(--bg-dark) !important;
}

/* Default border */
.MuiOutlinedInput-notchedOutline {
    border-color: var(--border) !important;
}

/* Hover border */
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
    border-color: var(--border-hover) !important;
}

/* Focused border — wins over hover */
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
.MuiOutlinedInput-root:hover.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: var(--accent) !important;
}

.Mui-focused.MuiFormLabel-root,
.Mui-focused.MuiInputLabel-root {
    color: var(--accent) !important;
}

/* Default label color */
.MuiInputLabel-root,
.MuiFormLabel-root {
    color: var(--text-muted) !important;
}

/* Input adornment (show/hide password icon) */
.MuiInputAdornment-root .MuiSvgIcon-root {
    color: var(--text-muted) !important;
}

/* =============================================================================
   CHECKBOX & RADIO (remember me, method selection)
============================================================================= */

.MuiCheckbox-root,
.MuiRadio-root {
    color: var(--text-muted) !important;
}

.Mui-checked.MuiCheckbox-root,
.Mui-checked.MuiRadio-root {
    color: var(--accent) !important;
}

.Mui-checked .MuiSvgIcon-root path {
    color: var(--accent) !important;
}

.MuiFormControlLabel-label {
    color: var(--text) !important;
}

/* =============================================================================
   DIALOG / MODAL (manage devices modal)
============================================================================= */

.MuiDialog-paper {
    background-color: var(--bg-mid) !important;
    color: var(--text) !important;
}

.MuiDialogTitle-root {
    color: var(--text) !important;
    border-bottom: 1px solid var(--border);
}

.MuiDialogContent-root {
    color: var(--text) !important;
}

.MuiDialogContentText-root {
    color: var(--text-muted) !important;
}

.MuiDialogActions-root {
    border-top: 1px solid var(--border);
}

/* Modal backdrop */
.MuiBackdrop-root,
.MuiModal-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* =============================================================================
   POPOVER (dropdowns)
============================================================================= */

.MuiPopover-paper {
    background-color: var(--bg-mid) !important;
    color: var(--text) !important;
    scrollbar-color: var(--accent) var(--bg-mid);
    scrollbar-width: thin;
}

.MuiPopover-paper::-webkit-scrollbar {
    width: 6px;
}

.MuiPopover-paper::-webkit-scrollbar-track {
    background: var(--bg-mid);
}

.MuiPopover-paper::-webkit-scrollbar-thumb {
    background-color: var(--accent);
    border-radius: 3px;
}

.MuiPopover-paper::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-hov);
}

/* =============================================================================
   MENU ITEMS (language selector etc.)
============================================================================= */

.MuiMenuItem-root:hover {
    background-color: var(--accent-subtle) !important;
}

.MuiMenuItem-root.Mui-selected {
    background-color: var(--accent-subtle) !important;
    color: var(--accent) !important;
}

.MuiMenuItem-root.Mui-selected:hover {
    background-color: var(--accent-subtle-hov) !important;
}

/* =============================================================================
   CIRCULAR PROGRESS SPINNER
============================================================================= */

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

/* =============================================================================
   SVG ICONS
============================================================================= */

.MuiSvgIcon-colorPrimary {
    color: var(--accent) !important;
}

.MuiSvgIcon-colorError {
    color: var(--error-hov) !important;
}

/* =============================================================================
   AUTOFILL OVERRIDE
============================================================================= */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-dark) inset !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* =============================================================================
   SCROLLBAR — global
============================================================================= */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background-color: var(--accent);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-hov);
}

* {
    scrollbar-color: var(--accent) var(--bg-dark);
    scrollbar-width: thin;
}

#otp-input input {
    background-color: var(--text) !important;
    outline: 0px !important;
}

.MuiContainer-root.MuiContainer-maxWidthXs > .MuiGrid-root.MuiGrid-container > .MuiGrid-root.MuiGrid-direction-xs-row > .MuiGrid-root > .MuiBox-root {
    border: none !important;
    background-color: var(--bg-mid) !important;
}

/* first circle */
.MuiContainer-root.MuiContainer-maxWidthXs > .MuiGrid-root.MuiGrid-container > .MuiGrid-root.MuiGrid-direction-xs-row > .MuiGrid-root > .MuiBox-root svg circle:nth-child(1) {
    fill: var(--accent) !important;
    stroke: transparent !important;
    r: 10 !important;
}

/* second circle */
.MuiContainer-root.MuiContainer-maxWidthXs > .MuiGrid-root.MuiGrid-container > .MuiGrid-root.MuiGrid-direction-xs-row > .MuiGrid-root > .MuiBox-root svg circle:nth-child(2) {
    fill: var(--bg-mid) !important;
    stroke: var(--accent) !important;
    r: 10 !important
}

/* third circle */
.MuiContainer-root.MuiContainer-maxWidthXs > .MuiGrid-root.MuiGrid-container > .MuiGrid-root.MuiGrid-direction-xs-row > .MuiGrid-root > .MuiBox-root svg circle:nth-child(3) {
    fill: var(--bg-mid) !important;
    stroke: var(--accent) !important;
}

svg[data-prefix="far"] {
    color: var(--accent);
}

.MuiButton-textPrimary {
    color: var(--accent) !important;
    text-decoration: none !important;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
                color 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.MuiButton-textPrimary:hover {
    color: var(--accent-hov) !important;
    text-decoration: none !important;
    background-color: var(--accent-subtle) !important;
}

div[role="presentation"] 


/* first circle */
div[role="presentation"] .MuiBox-root svg circle:nth-child(1) {
    fill: var(--accent) !important;
    stroke: transparent !important;
    r: 10 !important;
}

/* second circle */
div[role="presentation"] .MuiBox-root svg circle:nth-child(2) {
    fill: var(--bg-mid) !important;
    stroke: var(--accent) !important;
    r: 10 !important
}

/* third circle */
div[role="presentation"] .MuiBox-root svg circle:nth-child(3) {
    fill: var(--bg-mid) !important;
    stroke: var(--accent) !important;
}

div[role="presentation"] .MuiBox-root svg[class="_hand_sciov_2"] {
    fill: var(--bg-mid) !important;
}

.MuiDialogActions-root {
    border-top: none !important;
}

#settings-menu-security.Mui-selected svg,
#settings-menu-twofactor.Mui-selected svg,
#settings-menu-overview.Mui-selected svg {
    fill: var(--bg-dark) !important;
}

.MuiDivider-root {
    display: none !important;
}

.MuiPaper-root {
    --Paper-overlay: none !important;
    --Paper-shadow: none !important;
}