/*
  #849 fase F2 - Foglio di stile unico della cornice di accesso WMK (WmkLoginShell).
  Impostazione AGID (Bootstrap Italia): colore primario #0066CC, testata blu, carattere Titillium Web incluso nella
  libreria (licenza SIL Open Font License 1.1, file fonts/OFL.txt), nessuna risorsa esterna, nessun CDN.
  Compatibile con la CSP delle console (style-src 'self'; font-src 'self'; img-src 'self'): nessuno stile inline,
  nessun @import, nessun url() assoluto. Contrasti verificati dai test (WCAG 2.1 AA: testo >= 4,5:1, elementi >= 3:1).
  Le variabili sono definite sulla radice .wmk-login: nessun effetto sulle pagine che caricano il foglio senza la cornice.
*/

@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/TitilliumWeb-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/TitilliumWeb-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/TitilliumWeb-Bold.ttf") format("truetype");
}

.wmk-login {
    --wmk-login-font: "Titillium Web", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --wmk-login-primario: #0066cc;
    --wmk-login-primario-scuro: #0053a6;
    --wmk-login-primario-tenue: #e6f0fa;
    --wmk-login-su-primario: #ffffff;
    --wmk-login-testo: #17324d;
    --wmk-login-testo-secondario: #455b71;
    --wmk-login-testo-tenue: #5b7085;
    --wmk-login-sfondo: #f5f7fa;
    --wmk-login-alone: rgba(0, 102, 204, .10);
    --wmk-login-superficie: #ffffff;
    --wmk-login-bordo: #8aa1b9;
    --wmk-login-bordo-tenue: #c5d4e3;
    --wmk-login-separatore: #e3eaf2;
    --wmk-login-testata-sfondo: #0066cc;
    --wmk-login-testata-testo: #ffffff;
    --wmk-login-fuoco: #b35900;
    --wmk-login-errore: #c02c2c;
    --wmk-login-errore-sfondo: #fdf0f0;
    --wmk-login-successo: #00805a;
    --wmk-login-successo-sfondo: #ebf7f2;
    --wmk-login-raggio: .5rem;
    --wmk-login-larghezza-card: 38rem;
    --wmk-login-ombra: 0 .5rem 1.5rem rgba(23, 50, 77, .14);

    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    margin: 0;
    background: radial-gradient(circle at top left, var(--wmk-login-alone), transparent 34rem), var(--wmk-login-sfondo);
    color: var(--wmk-login-testo);
    font-family: var(--wmk-login-font);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.wmk-login *,
.wmk-login *::before,
.wmk-login *::after {
    box-sizing: border-box;
}

/* Pagina dedicata all'accesso (layout Razor Pages): nessun margine del browser intorno alla cornice. */
.wmk-login-body {
    margin: 0;
    background: #f5f7fa;
}

/* Zona 0: "vai al contenuto", visibile solo con il fuoco. */
.wmk-login__skip {
    position: fixed;
    z-index: 10000;
    top: .5rem;
    left: .5rem;
    padding: .75rem 1rem;
    background: var(--wmk-login-superficie);
    color: var(--wmk-login-primario-scuro);
    border: 2px solid var(--wmk-login-primario-scuro);
    border-radius: .25rem;
    font-weight: 700;
    text-decoration: underline;
    transform: translateY(-200%);
}

.wmk-login__skip:focus,
.wmk-login__skip:focus-visible {
    transform: translateY(0);
}

/* Zona 1: testata. */
.wmk-login__header {
    background: var(--wmk-login-testata-sfondo);
    color: var(--wmk-login-testata-testo);
}

.wmk-login__header-inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 72rem;
    min-height: 4rem;
    margin: 0 auto;
    padding: .75rem 1rem;
}

.wmk-login__logo {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    padding: .25rem;
    border-radius: .25rem;
    background: var(--wmk-login-superficie);
    object-fit: contain;
}

.wmk-login__app {
    min-width: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* Zone 2-7: card centrata. */
.wmk-login__main {
    display: grid;
    place-items: center;
    width: 100%;
    padding: clamp(1rem, 4vw, 3rem) 1rem;
}

.wmk-login__main:focus {
    outline: none;
}

.wmk-login__card {
    width: min(100%, var(--wmk-login-larghezza-card));
    padding: clamp(1.25rem, 4vw, 2.5rem);
    background: var(--wmk-login-superficie);
    border: 1px solid var(--wmk-login-bordo-tenue);
    border-radius: var(--wmk-login-raggio);
    box-shadow: var(--wmk-login-ombra);
}

.wmk-login__title {
    margin: 0;
    color: var(--wmk-login-testo);
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.wmk-login__subtitle {
    margin: .75rem 0 0;
    color: var(--wmk-login-testo);
    font-size: 1.125rem;
    font-weight: 600;
}

.wmk-login__description {
    margin: .5rem 0 0;
    color: var(--wmk-login-testo-secondario);
}

.wmk-login__messages {
    display: grid;
    gap: .75rem;
    margin-top: 1.25rem;
}

.wmk-login__message {
    padding: .75rem 1rem;
    border: 1px solid var(--wmk-login-bordo-tenue);
    border-left: .3rem solid var(--wmk-login-primario);
    border-radius: .25rem;
    background: var(--wmk-login-primario-tenue);
    color: var(--wmk-login-testo);
}

.wmk-login__message p {
    margin: 0;
}

.wmk-login__message-text {
    font-weight: 600;
}

.wmk-login__message-detail {
    margin-top: .25rem;
}

.wmk-login__message--errore {
    border-left-color: var(--wmk-login-errore);
    background: var(--wmk-login-errore-sfondo);
}

.wmk-login__message--successo {
    border-left-color: var(--wmk-login-successo);
    background: var(--wmk-login-successo-sfondo);
}

.wmk-login__actions {
    margin-top: 1.5rem;
}

/* #849 F3 - Zona 5 delle pagine generate dal server (WmkLoginActions): pulsante SSO, aiuto, separatore, modulo LOCAL. */
.wmk-login__primary {
    margin: 0;
}

.wmk-login__hint {
    margin: .375rem 0 0;
    color: var(--wmk-login-testo-secondario);
    font-size: .875rem;
    line-height: 1.4;
}

.wmk-login__separator {
    margin: 1.5rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--wmk-login-separatore);
    color: var(--wmk-login-testo-secondario);
    font-size: .875rem;
}

.wmk-login__form {
    display: grid;
    gap: 1rem;
    margin: 0;
}

.wmk-login__field {
    display: grid;
    gap: .25rem;
}

.wmk-login__label {
    color: var(--wmk-login-testo);
    font-weight: 600;
}

.wmk-login__input {
    width: 100%;
    min-height: 3rem;
    padding: .5rem .75rem;
    /* Bordo del campo con contrasto >= 3:1 (WCAG 1.4.11): stesso colore del testo tenue (verificato dai test). */
    border: 1px solid var(--wmk-login-testo-tenue);
    border-radius: .25rem;
    background: var(--wmk-login-superficie);
    color: var(--wmk-login-testo);
    font-family: var(--wmk-login-font);
    font-size: 1rem;
}

.wmk-login__submit {
    justify-self: start;
    cursor: pointer;
}

.wmk-login__links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.wmk-login__button,
.wmk-login__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    font-family: var(--wmk-login-font);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}

.wmk-login__button {
    padding: .625rem 1.5rem;
    border: 2px solid var(--wmk-login-primario);
    border-radius: .25rem;
    background: var(--wmk-login-primario);
    color: var(--wmk-login-su-primario);
    text-decoration: none;
}

.wmk-login__button:hover {
    border-color: var(--wmk-login-primario-scuro);
    background: var(--wmk-login-primario-scuro);
}

.wmk-login__link {
    padding: .625rem .25rem;
    color: var(--wmk-login-primario);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.wmk-login__link:hover {
    color: var(--wmk-login-primario-scuro);
}

/* Zona 7: versione dentro la card. */
.wmk-login__version {
    margin: 1.5rem 0 0;
    padding-top: .75rem;
    border-top: 1px solid var(--wmk-login-separatore);
    color: var(--wmk-login-testo-tenue);
    font-size: .875rem;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Zona 8: piede fuori dalla card. */
.wmk-login__footer {
    padding: 1rem;
    color: var(--wmk-login-testo-secondario);
    font-size: .875rem;
    text-align: center;
}

.wmk-login__footer p {
    margin: 0;
}

/* Fuoco sempre visibile (contrasto >= 3:1 con superficie e sfondo). */
.wmk-login a:focus-visible,
.wmk-login button:focus-visible,
.wmk-login input:focus-visible,
.wmk-login select:focus-visible,
.wmk-login textarea:focus-visible,
.wmk-login [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid var(--wmk-login-fuoco);
    outline-offset: 2px;
}

/* D11: campi MudBlazor del BackOffice dentro la cornice (stesso carattere, altezza minima, fuoco). */
.wmk-login .mud-input-control,
.wmk-login .mud-select,
.wmk-login .mud-button-root {
    max-width: 100%;
}

.wmk-login .mud-typography,
.wmk-login .mud-input,
.wmk-login .mud-input-label,
.wmk-login .mud-input-helper-text,
.wmk-login .mud-button-root {
    font-family: var(--wmk-login-font);
}

.wmk-login .mud-button-root {
    min-height: 3rem;
    font-weight: 600;
}

.wmk-login .mud-input-control-input-container:focus-within,
.wmk-login .mud-button-root:focus-visible,
.wmk-login .mud-icon-button:focus-visible {
    outline: 3px solid var(--wmk-login-fuoco);
    outline-offset: 3px;
}

@media (max-width: 30rem) {
    .wmk-login__main {
        place-items: start center;
        padding: .75rem;
    }

    .wmk-login__card {
        padding: 1.25rem 1rem;
        border-radius: var(--wmk-login-raggio);
        box-shadow: none;
    }

    .wmk-login__links {
        flex-direction: column;
    }

    .wmk-login__button {
        width: 100%;
    }
}

@media (forced-colors: active) {
    .wmk-login__card,
    .wmk-login__skip,
    .wmk-login__message,
    .wmk-login__button {
        border: 2px solid CanvasText;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wmk-login *,
    .wmk-login *::before,
    .wmk-login *::after {
        transition: none !important;
        animation: none !important;
    }
}