/* Hotpink palette from theme.park, adapted to Authelia 4.39's current UI.
 * Reference: https://docs.theme-park.dev/site_assets/authelia/hotpink.png
 * Palette: https://theme-park.dev/css/theme-options/hotpink.css
 * All styling is local: no external fonts, scripts, imports or images.
 */

:root,
[data-theme] {
    color-scheme: dark;
    --background: #204c80;
    --foreground: #eee;
    --card: rgb(0 0 0 / 25%);
    --card-foreground: #eee;
    --popover: #163e61;
    --popover-foreground: #eee;
    --primary: #fb3f62;
    --primary-foreground: #fff;
    --secondary: #fb3f62;
    --secondary-foreground: #fff;
    --muted: rgb(255 255 255 / 8%);
    --muted-foreground: rgb(238 238 238 / 72%);
    --accent: rgb(255 255 255 / 12%);
    --accent-foreground: #fff;
    --destructive: #ff6b7d;
    --destructive-foreground: #fff;
    --success: #00ff9d;
    --success-foreground: #102e38;
    --border: rgb(238 238 238 / 20%);
    --input: rgb(238 238 238 / 28%);
    --ring: #fb3f62;
    --radius: 0.25rem;
    --custom-icon: #eee;
    --custom-loading-bar: #eee;
    --divider: rgb(238 238 238 / 12%);
}

html {
    min-height: 100%;
    background: #204c80;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    color: #eee;
    background: linear-gradient(45deg, #fb3f62 0%, #204c80 37%, #004249 97%)
        center center / cover no-repeat fixed;
}

#root {
    min-height: 100svh;
}

#form-login > .grid {
    gap: 1rem;
}

#first-factor-stage [data-slot="floating-input"] {
    background-color: transparent;
    color: #eee;
    caret-color: #fff;
}

#first-factor-stage [data-slot="floating-input"]:hover:not(:focus):not([aria-invalid="true"]) {
    border-color: rgb(238 238 238 / 65%);
}

#first-factor-stage input:-webkit-autofill {
    -webkit-text-fill-color: #eee;
    caret-color: #fff;
    transition: background-color 99999s ease-in-out;
}

#sign-in-button,
#passkey-sign-in-button {
    min-height: 2.375rem;
    height: auto;
    padding-block: 0.5rem;
    white-space: normal;
    border: 1px solid rgb(255 255 255 / 7%);
    border-radius: 0.25rem;
    background-color: #fb3f62;
    color: #fff;
    box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
}

#sign-in-button:hover:not(:disabled),
#passkey-sign-in-button:hover:not(:disabled) {
    background-color: #cd4164;
}

a:not([data-slot="button"]),
#reset-password-button {
    color: #00ff9d;
}

a:not([data-slot="button"]):hover,
#reset-password-button:hover {
    color: rgb(0 255 157 / 80%);
}

/* Keep Authelia's attribution subdued, as in the reference. */
a[href^="https://www.authelia.com"],
a[href^="https://authelia.com"] {
    color: #aaa;
}

#first-factor-stage a[target="_blank"] {
    color: #aaa;
}

#language-button {
    color: #eee;
}

/* Preserve scrolling and usable padding on short/mobile screens. */
@media (max-height: 650px) {
    #first-factor-stage {
        min-height: calc(100svh - 4rem);
        padding-block: 1rem 2rem;
    }
}