/*
 * Aspetto della piattaforma Terranova sopra il tema keycloak.v2 (PatternFly 5).
 * Colori e misure come nelle pagine Django (Tailwind): slate per i grigi,
 * blue-700 per le azioni.
 */
:root {
    --t-sfondo: #f8fafc;          /* slate-50 */
    --t-bordo: #e2e8f0;           /* slate-200 */
    --t-bordo-campo: #cbd5e1;     /* slate-300 */
    --t-testo: #0f172a;           /* slate-900 */
    --t-testo-2: #475569;         /* slate-600 */
    --t-blu: #1d4ed8;             /* blue-700 */
    --t-blu-scuro: #1e40af;       /* blue-800 */
    --t-carattere: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --pf-v5-global--FontFamily--text: var(--t-carattere);
    --pf-v5-global--FontFamily--heading: var(--t-carattere);
    --pf-v5-global--primary-color--100: var(--t-blu);
    --pf-v5-global--primary-color--200: var(--t-blu-scuro);
    --pf-v5-global--link--Color: var(--t-blu);
    --pf-v5-global--link--Color--hover: var(--t-blu-scuro);
    --pf-v5-global--Color--100: var(--t-testo);
    --pf-v5-global--Color--200: var(--t-testo-2);
    --pf-v5-global--BorderRadius--sm: 6px;
    --keycloak-card-top-color: transparent;
}

/* Sfondo chiaro al posto dell'immagine scura. */
.login-pf body {
    background: var(--t-sfondo);
    color: var(--t-testo);
    font-family: var(--t-carattere);
}

.pf-v5-c-login__container {
    grid-template-columns: minmax(0, 26rem);
    padding-inline: 1rem;
}

/* Nome della piattaforma sopra il riquadro. */
#kc-header-wrapper {
    color: var(--t-testo) !important;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    padding-block: 2.5rem 1.25rem;
}

/* Il riquadro del modulo. */
.pf-v5-c-login__main {
    background: #fff;
    border: 1px solid var(--t-bordo);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}

.pf-v5-c-login__main-header {
    border-top: 0;
    padding-block-start: 1.75rem;
}

.pf-v5-c-login__main-header .pf-v5-c-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--t-testo);
}

.pf-v5-c-form__label-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;               /* slate-700 */
}

/* Campi: bordo pieno e arrotondato, blu quando attivi. */
.pf-v5-c-form-control {
    --pf-v5-c-form-control--before--BorderColor: transparent;
    --pf-v5-c-form-control--after--BorderColor: transparent;
    --pf-v5-c-form-control--hover--after--BorderColor: transparent;
    --pf-v5-c-form-control--focus--after--BorderColor: transparent;
    border: 1px solid var(--t-bordo-campo);
    border-radius: 6px;
    background: #fff;
}

/* PatternFly disegna una riga sotto il campo con ::before/::after: qui basta il bordo. */
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
    border: 0 !important;
}

.pf-v5-c-form-control:focus-within {
    border-color: var(--t-blu);
    box-shadow: 0 0 0 1px var(--t-blu);
}

.pf-v5-c-form-control.pf-m-error {
    border-color: #b91c1c;        /* red-700 */
}

.pf-v5-c-form-control.pf-m-error:focus-within {
    box-shadow: 0 0 0 1px #b91c1c;
}

/* Il pulsante per mostrare la password, dentro lo stesso bordo del campo. */
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
    border: 1px solid var(--t-bordo-campo);
    border-left: 0;
    border-radius: 0 6px 6px 0;
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after {
    border: 0;
}

.pf-v5-c-input-group__item:has(+ .pf-v5-c-input-group__item .pf-m-control) .pf-v5-c-form-control {
    border-radius: 6px 0 0 6px;
}

/* Pulsante principale come nella piattaforma. */
.pf-v5-c-button.pf-m-primary {
    background-color: var(--t-blu);
    border-radius: 6px;
    font-weight: 500;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
    background-color: var(--t-blu-scuro);
}

.pf-v5-c-button.pf-m-link {
    color: var(--t-blu);
}

/* Messaggi (errore, avviso, informazione) più sobri. */
.pf-v5-c-alert {
    border-radius: 6px;
    box-shadow: none;
    border: 1px solid var(--t-bordo);
}