/*
 * sixscale dark-purple ("ghastly") theme for the Authelia portal.
 *
 * Injected by the sixscale-authelia-theme nginx sidecar (see nginx-theme.conf)
 * as  <link rel="stylesheet" href="/sixscale-theme/theme.css">  right before
 * </head>. Same-origin file, so the portal CSP (style-src 'self') allows it.
 *
 * Targets the Authelia 4.39.x portal DOM (React + MUI v6 + tss-react).
 * Structural selectors use stable ids / MUI classnames; the tss-* hashed
 * classes are intentionally avoided so minor rebuilds don't break theming.
 *
 * Palette:
 *   backdrop  #160b33 / #1b0f3f / #0e0724   (deep violet night)
 *   primary   #7c3aed #6d28d9 #5b21b6       (violet 600..700)
 *   accents   #8b5cf6 #a78bfa #c4b5fd        (violet 400..500)
 *   ink       #2a0f5c                        (sockets / mouth on the ghost)
 *   text      #f5f3ff #ddd6fe #c4b5fd        (violet 50..300)
 */

:root {
    color-scheme: dark;
}

::selection {
    background: #7c3aed;
    color: #f5f3ff;
}

/* ---------- page backdrop: violet night with drifting aurora glows ---------- */

html,
body {
    background-color: #160b33 !important;
}

body {
    min-height: 100vh;
    color: #ddd6fe !important;
    background-image:
        radial-gradient(1100px 720px at 50% -12%, rgba(124, 58, 237, 0.38), transparent 62%),
        radial-gradient(880px 620px at 90% 110%, rgba(46, 16, 101, 0.90), transparent 64%),
        radial-gradient(680px 520px at 6% 102%, rgba(76, 29, 149, 0.55), transparent 62%),
        linear-gradient(180deg, #1d1043 0%, #160b33 46%, #0d0623 100%) !important;
    background-attachment: fixed !important;
}

/* subtle ectoplasm mist band behind the card */
#first-factor-stage::before,
#second-factor-stage::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(420px 260px at 50% 44%, rgba(167, 139, 250, 0.10), transparent 70%);
}

/* ---------- top app bar ---------- */

.MuiAppBar-root {
    background: rgba(22, 11, 51, 0.55) !important;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border-bottom: 1px solid rgba(124, 58, 237, 0.28);
    box-shadow: none !important;
}

.MuiAppBar-root .MuiTypography-root {
    color: #c4b5fd !important;
}

/* ---------- typography ---------- */

.MuiTypography-h5,
.MuiTypography-h4,
.MuiTypography-h3 {
    color: #f5f3ff !important;
    text-shadow: 0 0 26px rgba(124, 58, 237, 0.45);
    letter-spacing: 0.02em;
}

.MuiTypography-root {
    color: #ddd6fe;
}

.MuiTypography-colorPrimary {
    color: #a78bfa !important;
}

/* ---------- ghost logo (official logo.png override, floats gently) ---------- */

#first-factor-stage img[src$="logo.png"],
#second-factor-stage img[src$="logo.png"] {
    width: 96px !important;
    height: auto;
    margin: 18px 0 6px !important;
    filter:
        drop-shadow(0 0 18px rgba(124, 58, 237, 0.55))
        drop-shadow(0 12px 28px rgba(13, 6, 35, 0.6));
    animation: sx-ghost-float 5.6s ease-in-out infinite;
    will-change: transform;
}

@keyframes sx-ghost-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@media (prefers-reduced-motion: reduce) {

    #first-factor-stage img[src$="logo.png"],
    #second-factor-stage img[src$="logo.png"] {
        animation: none;
    }
}

/* ---------- inputs: violet glass ---------- */

.MuiOutlinedInput-root {
    background: rgba(46, 16, 101, 0.42) !important;
    border-radius: 12px !important;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.MuiOutlinedInput-notchedOutline {
    border-color: rgba(124, 58, 237, 0.45) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
    border-color: rgba(167, 139, 250, 0.60) !important;
}

.MuiOutlinedInput-root.Mui-focused {
    background: rgba(46, 16, 101, 0.62) !important;
    box-shadow:
        0 0 0 4px rgba(124, 58, 237, 0.22),
        0 10px 30px rgba(14, 7, 36, 0.5) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: #8b5cf6 !important;
}

input.MuiInputBase-input {
    color: #f5f3ff !important;
    caret-color: #c4b5fd;
}

input.MuiInputBase-input::placeholder {
    color: #8f7cd0;
    opacity: 1;
}

.MuiFormLabel-root {
    color: #a78bfa !important;
}

.MuiFormLabel-root.Mui-focused {
    color: #c4b5fd !important;
}

.MuiFormHelperText-root {
    color: #a78bfa !important;
}

/* ---------- buttons: gradient violet slab ---------- */

.MuiButton-containedPrimary {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 55%, #4c1d95 100%) !important;
    color: #f5f3ff !important;
    border-radius: 12px !important;
    box-shadow:
        0 10px 26px rgba(124, 58, 237, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.MuiButton-containedPrimary:hover {
    filter: brightness(1.14);
    box-shadow:
        0 12px 32px rgba(124, 58, 237, 0.52),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.MuiButton-outlinedPrimary {
    border-color: rgba(139, 92, 246, 0.6) !important;
    color: #c4b5fd !important;
    border-radius: 12px !important;
}

.MuiButton-outlinedPrimary:hover {
    background: rgba(124, 58, 237, 0.18) !important;
    border-color: #8b5cf6 !important;
}

.MuiButton-textPrimary,
.MuiIconButton-root {
    color: #c4b5fd !important;
}

/* ---------- links, checkboxes, misc controls ---------- */

.MuiLink-root,
#reset-password-button {
    color: #a78bfa !important;
}

.MuiLink-root:hover,
#reset-password-button:hover {
    color: #c4b5fd !important;
    text-shadow: 0 0 14px rgba(139, 92, 246, 0.65);
}

.MuiCheckbox-root .MuiSvgIcon-root {
    color: rgba(196, 181, 253, 0.55);
}

.MuiCheckbox-root.Mui-checked {
    color: #8b5cf6 !important;
}

.MuiFormControlLabel-label {
    color: #c4b5fd !important;
}

.MuiSvgIcon-colorPrimary {
    color: #a78bfa !important;
}

/* ---------- progress / steppers (2FA, OIDC consents) ---------- */

.MuiCircularProgress-root svg circle {
    color: #8b5cf6;
}

.MuiLinearProgress-bar {
    background: linear-gradient(90deg, #7c3aed, #a78bfa) !important;
}

/* ---------- alerts: violet glass (errors keep a warm edge) ---------- */

.MuiAlert-root {
    border-radius: 12px !important;
    background: rgba(46, 16, 101, 0.72) !important;
    color: #ddd6fe !important;
    border: 1px solid rgba(167, 139, 250, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.MuiAlert-standardError {
    border-color: rgba(244, 63, 94, 0.45);
}

.MuiAlert-standardSuccess {
    border-color: rgba(52, 211, 153, 0.35);
}

.MuiAlert-standardInfo,
.MuiAlert-standardWarning {
    border-color: rgba(167, 139, 250, 0.45);
}

/* ---------- dialogs / drawers (privacy policy, OIDC) ---------- */

.MuiDialog-paper,
.MuiDrawer-paper {
    background: linear-gradient(180deg, #221150 0%, #190d3e 100%) !important;
    color: #ddd6fe !important;
    border: 1px solid rgba(124, 58, 237, 0.35);
}

/* ---------- skeleton loading splash ---------- */

.MuiSkeleton-root {
    background: rgba(139, 92, 246, 0.14) !important;
}

/* ---------- focus ring + scrollbars ---------- */

:focus-visible {
    outline: 2px solid #a78bfa !important;
    outline-offset: 2px;
}

* {
    scrollbar-color: #6d28d9 #160b33;
}

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

::-webkit-scrollbar-track {
    background: #160b33;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7c3aed, #5b21b6);
    border-radius: 8px;
    border: 2px solid #160b33;
}