/* Authelia – Custom Login Theme */

/* Hintergrund */
html, body {
    min-height: 100%;
}

body {
    background-image:
        linear-gradient(
            rgba(8, 18, 35, 0.05),
            rgba(8, 18, 35, 0.12)
        ),
        url('/custom-theme/background.png') !important;

    background-size: 100% 100%, cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: #263443 !important;
}

#root {
    min-height: 100vh;
    background: transparent !important;
}

/* Überschriften */
#root h1,
#root h2,
#root h3,
#root h4,
#root h5,
#root h6 {
    color: white !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.65);
}

/* Milchglas-Karte */
#root [data-slot="card"],
#root .bg-card {
    background: rgba(255,255,255,0.88) !important;
    color: #1e293b !important;

    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);

    border: 1px solid rgba(255,255,255,0.75) !important;
    border-radius: 22px !important;

    box-shadow: 0 20px 60px rgba(0,0,0,0.20) !important;
}

/* Buttons */
#root button[type="submit"] {
    border-radius: 10px !important;
    font-weight: 600 !important;
}


/* Authelia: sichtbare Milchglasfläche am Login-Wrapper */
#root div.mx-auto.w-full.px-8 {
    background: rgba(255, 255, 255, 0.28) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;

    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 22px !important;
    padding: 24px 28px !important;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20) !important;
}


/* Milchglas ausschließlich auf den Eingabefeldern */
#root input[data-slot="input"] {
    background: rgba(255, 255, 255, 0.30) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 10px !important;
    color: #243247 !important;
}

/* Placeholder nicht zusätzlich zum Label anzeigen */
#root input[data-slot="input"]::placeholder {
    color: transparent !important;
}

/* Ulimpach Sign On – Seitentitel */
#root div.flex.flex-col.items-stretch::before {
    content: "Ulimpach Sign On";
    display: block;
    color: #ffffff;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.3;
    text-align: center;
    margin: 0 0 18px 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

/* Ulimpach Sign On: Remember-me als Vertrauensoption hervorheben */
#root label[for="remember-checkbox"] {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    border: 1px solid #facc15 !important;
    border-radius: 10px !important;
    background: rgba(254, 240, 138, 0.96) !important;
    color: #713f12 !important;
    font-size: 0 !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
}

#root label[for="remember-checkbox"]::after {
    content: "Diesem Gerät 30 Tage vertrauen";
    font-size: 15px !important;
    line-height: 1.4 !important;
}

#root label[for="remember-checkbox"]:hover {
    background: #fde68a !important;
}


/* Vertrauenswürdiges Gerät – deutlich hervorheben */
#root label[for="remember-checkbox"] {
    background: #ffeb00 !important;
    color: #111111 !important;
    border: 3px solid #eab308 !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.30) !important;
}

#root label[for="remember-checkbox"]::after {
    content: "Diesem Gerät 30 Tage vertrauen" !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #111111 !important;
}

#root label[for="remember-checkbox"]:hover {
    background: #ffd600 !important;
}

#root #remember-checkbox {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    border: 2px solid #111111 !important;
    accent-color: #111111 !important;
    cursor: pointer !important;
}


/* Hinweis unter der Gerätevertrauen-Option */
#root label[for="remember-checkbox"]::before {
    content: "Ohne Gerätevertrauen endet die Anmeldung nach 30 Minuten Inaktivität.";
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #444;
    margin-top: 6px;
    line-height: 1.4;
}