@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800&display=swap');
@import url('https://use.fontawesome.com/releases/v5.15.4/css/all.css');

:root {
    --v: #951b81;
    --vd: #6d1360;
    --vt: #12a650;
    --vt-dark: #0d7a3b;
    --v-soft: rgba(149, 27, 129, 0.12);
    --v-shadow: rgba(149, 27, 129, 0.15);
    --text: #555;
    --text-muted: #5a4a58;
    --border: #e2e2ec;
    --card-shadow: 0 20px 60px rgba(45, 10, 55, 0.25);
    --radius: 6px;
    --radius-sm: 3px;
}

/* ---------- Page / background ---------- */
html, body {
    height: 100%;
}

body.uvci-body,
body.login-pf.uvci,
.login-pf body {
    font-family: 'Nunito Sans', sans-serif !important;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4eef2 url('../img/background_campus_uvci.png') no-repeat center center fixed;
    background-size: cover;
    color: var(--text);
}

/* Hide Keycloak's default outer header (realm name banner) */
#kc-header,
.login-pf-page-header {
    display: none !important;
}

/* ---------- Main login wrapper ---------- */
.login-pf-page,
.pf-c-login,
.pf-v5-c-login {
    width: 100%;
    max-width: 460px;
    padding: 16px;
    margin: 0 auto;
    background: transparent !important;
}

/* ---------- Injected vertical stack: brand + card + footer ---------- */
.uvci-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    gap: 0;
}

/* ---------- Brand block (injected by JS) ---------- */
.uvci-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 14px;
    width: 100%;
    margin-bottom: 20px;
}

.pf-v5-c-login__main {
    align-self: center !important;
    grid-area: main;
}

.uvci-brand-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff url('../img/favicon.png') no-repeat center center;
    background-size: 42px 42px;
    border: 2px solid var(--v-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: 0 6px 18px var(--v-shadow);
}

.uvci-brand-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.uvci-brand-title {
    color: var(--vd);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin: 0;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.uvci-brand-subtitle {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin: 4px 0 0 0;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* ---------- Card ---------- */
.card-pf,
.pf-c-login__main,
.pf-v5-c-login__main,
#kc-content {
    background: #fff !important;
    border-radius: 0 !important;
    box-shadow: var(--card-shadow) !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
}

/* Card header with gradient */
.pf-c-login__main-header,
.pf-v5-c-login__main-header,
#kc-header-wrapper,
#kc-page-title,
h1#kc-page-title {
    background-color: var(--vd) !important;
    color: #fff !important;
    padding: 12px 24px !important;
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-align: left !important;
    border-radius: 0 !important;
    text-transform: none !important;
}

h1#kc-page-title::before {
    content: "\f2f6";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

/* Card body */
.pf-c-login__main-body,
.pf-v5-c-login__main-body,
#kc-content-wrapper,
#kc-form,
#kc-form-wrapper {
    padding: 15px 20px !important;
    background: #fff;
}

/* ---------- Form ---------- */
.form-group,
.pf-c-form__group,
.pf-v5-c-form__group {
    margin-bottom: 16px;
}

label,
.pf-c-form__label,
.pf-v5-c-form__label,
.control-label {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #555 !important;
    margin-bottom: 4px !important;
    display: block;
}

/* Inputs */
input.form-control,
input.pf-c-form-control,
input.pf-v5-c-form-control,
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    border-radius: 0 !important;
    border: 1px solid var(--border) !important;
    font-size: 0.9rem !important;
    padding: 10px 15px 10px 50px !important;
    box-shadow: none !important;
    height: auto !important;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

input.form-control:focus,
input.pf-c-form-control:focus,
input.pf-v5-c-form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: var(--v) !important;
    box-shadow: 0 0 0 3px rgba(149, 27, 129, 0.12) !important;
    outline: none !important;
}

/* Input icons via wrapper */
.pf-c-form__group,
.pf-v5-c-form__group,
.form-group {
    position: relative;
}

.pf-c-form__group:has(input#username)::before,
.pf-v5-c-form__group:has(input#username)::before,
.form-group:has(input#username)::before {
    content: "\f0e0";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 14px;
    bottom: 12px;
    color: var(--v);
    background: #faf7fc;
    padding: 0 6px;
    z-index: 2;
    pointer-events: none;
}

.pf-c-form__group:has(input#password)::before,
.pf-v5-c-form__group:has(input#password)::before,
.form-group:has(input#password)::before {
    content: "\f023";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 14px;
    bottom: 12px;
    color: var(--v);
    background: #faf7fc;
    padding: 0 6px;
    z-index: 2;
    pointer-events: none;
}

/* Error state */
input.is-invalid,
input[aria-invalid="true"] {
    border-color: #dc3545 !important;
}

.pf-c-form__helper-text.pf-m-error,
.pf-v5-c-form__helper-text.pf-m-error,
.invalid-feedback,
.kc-feedback-text {
    font-size: 0.78rem !important;
    color: #dc3545 !important;
    margin-top: 4px;
    display: block;
}

/* Remember me + forgot pwd row */
#kc-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.checkbox label,
#kc-form-options label {
    font-size: 0.82rem !important;
    color: #666 !important;
    font-weight: 400 !important;
}

#kc-form-options input[type="checkbox"] {
    accent-color: var(--v);
    margin-right: 6px;
}

a,
#kc-registration a,
.login-pf-page a {
    color: var(--v);
    text-decoration: none;
    font-size: 0.82rem;
    transition: color 0.15s;
}

a:hover {
    color: var(--vd);
    text-decoration: none;
}

/* ---------- Submit button ---------- */
input[type="submit"],
button[type="submit"],
input#kc-login,
.pf-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-primary,
.btn-primary,
.kc-btn-primary {
    background: linear-gradient(135deg, var(--vt) 0%, var(--vt) 100%) !important;
    color: #fff !important;
    border: none !important;
    width: 100% !important;
    padding: 12px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    letter-spacing: 0.04em !important;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
    text-transform: none !important;
    height: auto !important;
    box-shadow: none !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
input#kc-login:hover,
.pf-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(13, 122, 59, 0.4) !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--vt-dark) 0%, var(--vt-dark) 100%) !important;
}

.pf-v5-c-button.pf-m-control:hover:after {
    border-block-end-width: 2px;
    border-block-end-style: solid;
    border-block-end-color: var(--vt) !important;
}
.pf-v5-c-form-control:hover:after, .pf-v5-c-form-control:active:after {
    border-block-end-width: 2px;
    border-block-end-style: solid;
    border-block-end-color: var(--vt) !important;
}

.pf-v5-c-button:hover:after, .pf-v5-c-button:active:after {
    border-block-end-width: 2px;
    border-block-end-style: solid;
    border-block-end-color: var(--vt) !important;
}

input#kc-login::before,
button[type="submit"]::before {
    content: "\f2f6";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
}

/* ---------- Alerts ---------- */
.alert,
.pf-c-alert,
.pf-v5-c-alert,
#input-error,
.kc-feedback-info {
    border-radius: 0 !important;
    border: none !important;
    font-size: 0.87rem !important;
    padding: 10px 14px !important;
    margin-bottom: 12px;
}

.alert-success,
.pf-m-success {
    background: #d4edda !important;
    color: #155724 !important;
}

.alert-error,
.alert-danger,
.pf-m-danger {
    background: #f8d7da !important;
    color: #721c24 !important;
}

.alert-warning,
.pf-m-warning {
    background: #fff3cd !important;
    color: #856404 !important;
}

/* ---------- Footer (injected by JS) ---------- */
.uvci-footer {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 16px;
}

.uvci-footer a {
    color: var(--text-muted) !important;
    font-size: 0.82rem !important;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.uvci-footer a:hover {
    color: var(--v) !important;
}

/* ---------- Locale switcher (optional, top-right) ---------- */
#kc-locale {
    position: absolute;
    top: 16px;
    right: 16px;
}

#kc-locale a {
    color: #fff;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 10px;
    border-radius: 0;
}

/* ---------- Social providers (if enabled) ---------- */
#kc-social-providers {
    margin-top: 16px;
}

#kc-social-providers h4 {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 10px;
}

#kc-social-providers ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#kc-social-providers li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    font-weight: 600;
    font-size: 0.87rem;
}

#kc-social-providers li a:hover {
    border-color: var(--v);
    color: var(--v);
}

/* ---------- Responsive ---------- */
@media (max-width: 576px) {
    .login-pf-page,
    .pf-c-login,
    .pf-v5-c-login {
        padding: 10px;
    }

    .uvci-brand {
        margin-bottom: 20px;
    }

    .uvci-brand-icon {
        width: 60px;
        height: 60px;
        background-size: 46px 46px;
        margin-bottom: 10px;
    }

    .uvci-brand-title {
        font-size: 1.15rem;
        letter-spacing: 0.03em;
    }

    .uvci-brand-subtitle {
        font-size: 0.78rem;
    }

    .pf-c-login__main-header,
    .pf-v5-c-login__main-header,
    #kc-header-wrapper,
    h1#kc-page-title {
        padding: 16px 18px !important;
        font-size: 0.9rem !important;
    }

    .pf-c-login__main-body,
    .pf-v5-c-login__main-body,
    #kc-content-wrapper,
    #kc-form-wrapper {
        padding: 20px 18px !important;
    }

    input.form-control,
    input.pf-c-form-control,
    input.pf-v5-c-form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"] {
        padding: 10px 12px 10px 38px !important;
        font-size: 16px !important;
    }

    input[type="submit"],
    button[type="submit"],
    input#kc-login,
    .pf-c-button.pf-m-primary {
        padding: 11px !important;
        font-size: 0.85rem !important;
    }

    #kc-form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}