/* ============================================
   ScuolaDigitale Academy - Keycloak Login Theme
   Clean, modern, matching the portal style
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Nunito+Sans:wght@300;400;600;700&display=swap');

/* --- Background --- */
body {
    background: linear-gradient(135deg, #E8D5F5 0%, #D4E7F7 40%, #E8F5E9 100%) !important;
    font-family: 'Nunito', 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    min-height: 100vh;
}

/* Subtle animated background pattern */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at 15% 30%, rgba(39, 149, 222, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 70%, rgba(155, 142, 196, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 90%, rgba(37, 173, 218, 0.06) 0%, transparent 40%);
    z-index: 0;
    pointer-events: none;
}

/* --- Hide default Keycloak header/footer clutter --- */
#kc-header-wrapper {
    font-family: 'Nunito', sans-serif !important;
    font-size: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    margin-bottom: 0 !important;
}

#kc-header-wrapper::after {
    content: 'ScuolaDigitale Academy';
    font-size: 15px;
    font-weight: 700;
    color: #2795DE;
    letter-spacing: 1px;
    display: block;
    margin-top: 20px;
}

#kc-header {
    background: transparent !important;
    padding: 0 !important;
}

/* --- Main container --- */
.login-pf {
    background: transparent !important;
}

#kc-login {
    position: relative;
    z-index: 1;
}

/* --- Login Card --- */
#kc-form-wrapper,
.card-pf,
#kc-content-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

#kc-content {
    background: transparent !important;
}

#kc-form-login,
#kc-form {
    position: relative;
}

.login-pf-page .card-pf {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 40px rgba(39, 149, 222, 0.1), 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    border: 2px solid rgba(39, 149, 222, 0.08) !important;
    padding: 36px 32px !important;
    max-width: 440px !important;
    margin: 20px auto !important;
    overflow: hidden;
}

/* --- Title --- */
#kc-page-title,
h1#kc-page-title {
    font-family: 'Nunito', sans-serif !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    color: #1F313F !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.3px;
}

/* Subtitle area */
#kc-locale {
    display: none !important;
}

/* --- Form labels --- */
label.pf-c-form__label,
.control-label,
label {
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #54606E !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
}

/* --- Input fields --- */
input[type="text"],
input[type="password"],
input[type="email"],
.pf-c-form-control,
#username,
#password {
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1F313F !important;
    background: #F8FAFC !important;
    border: 2.5px solid #E2E8F0 !important;
    border-radius: 14px !important;
    padding: 13px 16px !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100% !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
.pf-c-form-control:focus,
#username:focus,
#password:focus {
    border-color: #2795DE !important;
    box-shadow: 0 0 0 4px rgba(39, 149, 222, 0.1) !important;
    background: #FFFFFF !important;
}

input::placeholder {
    color: #A0AEC0 !important;
    font-weight: 400 !important;
}

/* --- Primary Login Button --- */
input[type="submit"],
#kc-login,
.btn-primary,
.pf-c-button.pf-m-primary {
    font-family: 'Nunito', sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #2795DE, #25ADDA) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 14px 24px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(39, 149, 222, 0.3) !important;
    text-transform: none !important;
    letter-spacing: 0.3px;
    width: 100% !important;
    margin-top: 8px !important;
}

input[type="submit"]:hover,
#kc-login:hover,
.btn-primary:hover,
.pf-c-button.pf-m-primary:hover {
    background: linear-gradient(135deg, #4577C0, #2098D1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 22px rgba(39, 149, 222, 0.35) !important;
}

input[type="submit"]:active,
.pf-c-button.pf-m-primary:active {
    transform: translateY(0) !important;
}

/* --- Social / IDP buttons --- */
#kc-social-providers {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 2px solid #F1F5F9 !important;
}

#kc-social-providers ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#kc-social-providers li {
    margin-bottom: 8px !important;
}

.social-provider-link,
#social-keycloak,
a.zocial {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1F313F !important;
    background: #F8FAFC !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-transform: none !important;
    gap: 8px;
}

.social-provider-link:hover,
a.zocial:hover {
    border-color: #2795DE !important;
    background: #EBF5FB !important;
    color: #2795DE !important;
    transform: translateY(-1px) !important;
}

/* --- Links --- */
a,
.login-pf-page a {
    color: #2795DE !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

a:hover {
    color: #4577C0 !important;
    text-decoration: underline !important;
}

/* --- Remember me checkbox --- */
.checkbox label,
#rememberMe {
    font-size: 13px !important;
    color: #54606E !important;
}

/* --- Error messages --- */
.alert-error,
.pf-c-alert.pf-m-danger,
.kc-feedback-text {
    background: #FFF5F5 !important;
    border: 2px solid #FED7D7 !important;
    border-radius: 12px !important;
    color: #C53030 !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
}

.alert-success,
.pf-c-alert.pf-m-success {
    background: #F0FFF4 !important;
    border: 2px solid #C6F6D5 !important;
    border-radius: 12px !important;
    color: #276749 !important;
}

/* --- Info/warning --- */
.alert-warning {
    background: #FFFFF0 !important;
    border: 2px solid #FEFCBF !important;
    border-radius: 12px !important;
    color: #975A16 !important;
}

.alert-info {
    background: #EBF8FF !important;
    border: 2px solid #BEE3F8 !important;
    border-radius: 12px !important;
    color: #2B6CB0 !important;
}

/* --- Footer --- */
#kc-info-wrapper,
.login-pf-page .login-pf-footer {
    text-align: center !important;
    padding: 12px 0 !important;
}

#kc-info-wrapper a {
    font-size: 13px !important;
    color: #54606E !important;
}

/* --- Form groups spacing --- */
.form-group,
.pf-c-form__group {
    margin-bottom: 16px !important;
}

/* --- Separator "or" --- */
#kc-form-options {
    text-align: center !important;
    margin: 8px 0 !important;
}

/* --- Powered by footer --- */
#kc-info {
    text-align: center !important;
    font-size: 12px !important;
    color: #A0AEC0 !important;
    margin-top: 16px !important;
}

/* --- Responsive --- */
@media (max-width: 480px) {
    .login-pf-page .card-pf {
        margin: 10px !important;
        padding: 24px 20px !important;
        border-radius: 20px !important;
    }

    #kc-page-title {
        font-size: 22px !important;
    }
}

/* --- Registration page --- */
#kc-register-form input[type="text"],
#kc-register-form input[type="password"],
#kc-register-form input[type="email"] {
    border-radius: 14px !important;
}

/* --- Hide unnecessary elements --- */
.pf-c-login__footer,
.pf-c-login__header .pf-c-brand {
    display: none !important;
}

/* --- Smooth transitions --- */
* {
    transition-property: background-color, border-color, color, box-shadow, transform;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}