/* =========================================================
   KCF CORE – LOGIN
   ========================================================= */

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

body {
    min-height: 100vh;
    min-height: 100dvh;

    margin: 0;

    background:
        radial-gradient(
            circle at top left,
            rgb(170 185 165 / 0.34),
            transparent 46%
        ),
        radial-gradient(
            circle at bottom right,
            rgb(242 126 35 / 0.17),
            transparent 42%
        ),
        #f4f5f1;

    color: var(--kcf_color_text);
}

.kcf_login {
    display: grid;
    place-items: center;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    padding: 32px 20px;
}

.kcf_login_container {
    display: grid;

    width: min(430px, 100%);

    gap: 24px;
}

.kcf_login_brand {
    display: flex;
    justify-content: center;
}

.kcf_login_logo {
    display: block;

    width: min(290px, 75vw);
    height: auto;
}

.kcf_login_panel {
    padding: 32px;

    background:
        rgb(255 255 255 / 0.86);

    border:
        1px solid
        rgb(255 255 255 / 0.9);

    border-radius:
        var(--kcf_border_radius);

    box-shadow:
        0 18px 55px
        rgb(51 51 51 / 0.10);

    backdrop-filter:
        blur(14px);
}

.kcf_login_header {
    margin-bottom: 26px;

    text-align: center;
}

.kcf_login_title {
    margin:
        0
        0
        6px;

    color:
        var(--kcf_color_text);

    font-size: 1.45rem;
    font-weight: 700;
}

.kcf_login_description {
    margin: 0;

    color:
        var(--kcf_color_text_muted);

    font-size: 0.88rem;
}

.kcf_login_form {
    display: grid;

    gap: 18px;
}

.kcf_login_form
.kcf_form_group {
    margin-bottom: 0;
}

.kcf_login_input {
    position: relative;
}

.kcf_login_input_icon {
    position: absolute;

    top: 50%;
    left: 14px;

    color:
        var(--kcf_color_text_muted);

    font-size: 0.9rem;

    pointer-events: none;

    transform:
        translateY(-50%);
}

.kcf_login_input
.kcf_form_input {
    min-height: 46px;

    padding-left: 42px;

    background:
        rgb(255 255 255 / 0.92);
}

.kcf_login_password
.kcf_form_input {
    padding-right: 46px;
}

.kcf_login_password_toggle {
    position: absolute;

    top: 50%;
    right: 5px;

    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    padding: 0;

    background: transparent;

    border: 0;

    color:
        var(--kcf_color_text_muted);

    cursor: pointer;

    transform:
        translateY(-50%);
}

.kcf_login_password_toggle:hover {
    color:
        var(--kcf_color_value);
}

.kcf_login_submit {
    width: 100%;
    min-height: 46px;

    margin-top: 2px;
}

.kcf_login_message {
    margin-bottom: 22px;

    background:
        rgb(255 255 255 / 0.76);
}

.kcf_login_footer {
    color:
        var(--kcf_color_text_muted);

    font-size: 0.7rem;

    text-align: center;
}

@media (max-width: 600px) {
    .kcf_login {
        padding:
            24px
            16px;
    }

    .kcf_login_container {
        gap: 20px;
    }

    .kcf_login_logo {
        width:
            min(
                250px,
                72vw
            );
    }

    .kcf_login_panel {
        padding:
            26px
            22px;
    }
}