/* Homelab presentation layer for Authelia 4.39.25. Authentication stays upstream. */
:root:root,
body[data-theme] {
    --background: #1e1e20;
    --foreground: #f5f5f6;
    --card: #252527;
    --card-foreground: #f5f5f6;
    --popover: #29292c;
    --popover-foreground: #f5f5f6;
    --primary: #f5f5f6;
    --primary-foreground: #202023;
    --secondary: #b9b9c0;
    --secondary-foreground: #202023;
    --muted: #303034;
    --muted-foreground: #aaaab0;
    --accent: #39393e;
    --accent-foreground: #fafafa;
    --border: #414146;
    --input: #4e4e54;
    --ring: #d2d2d8;
    --destructive: #ff929a;
    --destructive-foreground: #221416;
    --custom-icon: #dedee3;
    --custom-loading-bar: #dedee3;
    --radius: 0.75rem;
    color-scheme: dark;
}

body {
    background: #1e1e20;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#root > div:has(> header.bg-transparent) {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100svh;
    margin: 0;
    background:
        radial-gradient(ellipse at 100% 0%, #ffffff24, transparent 42%),
        radial-gradient(ellipse at 0% 100%, #ffffff21, transparent 38%),
        #1e1e20;
}

#root > div:has(> header.bg-transparent) > header {
    padding: 14px 16px 0;
}

#root > div:has(> header.bg-transparent) #language-button {
    min-height: 40px;
    font-size: 12px;
    color: #c6c6cc;
}

#root > div:has(> header.bg-transparent) > div[id] {
    flex: 1;
    min-height: 600px;
    padding: 48px 0 88px;
}

#root > div:has(> header.bg-transparent) #first-factor-stage > div:first-child {
    max-width: 392px;
}

#first-factor-stage > div:first-child > div > div:first-child {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    padding: 0;
    border: 1px solid #ffffff06;
    border-radius: 18px;
    background: linear-gradient(145deg, #303033, #252527);
    box-shadow: 0 8px 24px #00000020, inset 0 1px #ffffff05;
}

#first-factor-stage > div:first-child > div > div:first-child::after {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: repeating-conic-gradient(#bdbdc4 0deg 2deg, transparent 2deg 7.5deg);
    mask: radial-gradient(circle, transparent 40%, #000 42% 68%, transparent 70%);
}

#root > div:has(> header.bg-transparent) h5 {
    font-size: clamp(24px, 3vw, 28px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.045em;
}

#root > div:has(> header.bg-transparent) #first-factor-stage h6 {
    margin: 12px 0 22px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--muted-foreground);
}

#form-login > div {
    gap: 14px;
}

#form-login [data-slot="floating-input"] {
    height: 52px;
    border-radius: 12px;
    background: #1b1b1d55;
    font-size: 16px;
}

#form-login [data-slot="floating-input"] + label {
    font-size: 12px;
}

#form-login input:-webkit-autofill {
    -webkit-text-fill-color: var(--foreground);
    box-shadow: 0 0 0 100px #28282b inset;
    caret-color: var(--foreground);
}

#form-login #sign-in-button {
    height: 46px;
    margin-top: 4px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
}

#root > div:has(> header.bg-transparent) button:focus-visible,
#root > div:has(> header.bg-transparent) a:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 4px;
}

#root > div:has(> header.bg-transparent) #first-factor-stage form {
    margin-bottom: 30px;
}

@media (max-width: 600px) {
    #root > div:has(> header.bg-transparent) > div[id] {
        min-height: 520px;
        padding: 48px 0 96px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #root > div:has(> header.bg-transparent) *,
    #root > div:has(> header.bg-transparent) *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* The default user glyph is decorative; custom server.asset_path logos stay visible. */
#first-factor-stage > div:first-child > div > div:first-child:has(> svg) > svg {
    display: none;
}
#first-factor-stage > div:first-child > div > div:first-child:has(> img)::after {
    display: none;
}
#first-factor-stage h5 {
    margin-bottom: 24px;
}

#form-login label[for="remember-checkbox"] {
    font-size: 13px;
    color: var(--muted-foreground);
}