/* Pagine di accesso e recupero della password (templates/talenti/public/talenti/access-layout.tpl): tavolozza del gestionale.
   Prima lo smartphone: fascia del marchio, foglio con il modulo, piè di pagina; da 60rem la fascia diventa la colonna
   sinistra e il modulo occupa la destra. */
:root {
    --login-brand-bg: #16213a;
    --login-brand-text: #eef1f6;
    --login-ring: rgba(238, 241, 246, .07);
    --login-field-height: 3rem;
}
:root[data-color-scheme="dark"] {
    --login-brand-bg: #0e1320;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-surface);
}
a { color: var(--color-accent-text); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.login-layout {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "brand" "main" "footer";
}

/* Fascia del marchio: la moneta Talento, grande e tagliata dal bordo, al centro dei cerchi. */
.brand-panel {
    grid-area: brand;
    position: relative;
    overflow: hidden;
    min-height: 9.5rem;
    padding: 1.25rem 1.25rem 3.5rem;
    background-color: var(--login-brand-bg);
    background-image: repeating-radial-gradient(circle at calc(100% - 3rem) 3.5rem, transparent 0 2.75rem, var(--login-ring) 2.75rem 2.875rem);
    color: var(--login-brand-text);
}
.talent-coin {
    position: absolute;
    top: -3rem;
    right: -3.5rem;
    width: 13rem;
    height: 13rem;
    pointer-events: none;
}
.brand-name {
    position: relative;
    max-width: 12ch;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
}

/* Foglio con il modulo: sale sopra la fascia del marchio. */
.login-main {
    grid-area: main;
    position: relative;
    margin: -2.25rem 0 0;
    padding: 1.75rem 1.25rem 2rem;
    border-radius: 1.25rem 1.25rem 0 0;
    background: var(--color-surface);
}
.login-sheet { width: 100%; max-width: 25rem; margin: 0 auto; }

.org-logo {
    display: block;
    width: 100%;
    max-width: 15rem;
    height: auto;
    margin: 0 auto 1.5rem;
}
:root[data-color-scheme="dark"] .org-logo {
    /* il logo ha contorni blu notte: su fondo scuro sta su una lastra chiara */
    padding: .75rem 1rem;
    border-radius: var(--radius-l);
    background: #ffffff;
}

.login-title {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.notice {
    display: flex;
    gap: .625rem;
    align-items: flex-start;
    margin: 0 0 1.25rem;
    padding: .75rem .875rem;
    border-radius: var(--radius-l);
    font-size: .9375rem;
}
.notice svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .0625rem; }
.notice-info { background: var(--color-info-soft); color: var(--color-info); }
.notice-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.notice p { margin: 0; color: var(--color-text); white-space: pre-line; }
.notice strong { display: block; color: inherit; }

.field { margin-bottom: 1rem; }
.field label { display: block; margin-bottom: .375rem; font-size: .9375rem; font-weight: 700; color: var(--color-text-muted); }
.field-control { position: relative; }
.field input {
    display: block;
    width: 100%;
    height: var(--login-field-height);
    padding: 0 .875rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-m);
    background: var(--color-field-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 1.0625rem; /* oltre 16px: iOS non ingrandisce la pagina al tocco */
}
.field input:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.field input[aria-invalid="true"] { border-color: var(--color-danger); }
.field input:disabled { opacity: .6; }
.field-password input { padding-right: 3.25rem; }
.reveal-button {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: var(--login-field-height);
    border: 0;
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
}
.reveal-button svg { width: 1.25rem; height: 1.25rem; }
.field-row { display: flex; justify-content: flex-end; margin-top: .5rem; }
.field-row a { font-size: .9375rem; font-weight: 700; text-decoration: none; }
.field-row a:hover { text-decoration: underline; }

.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    width: 100%;
    height: 3.25rem;
    margin-top: .5rem;
    border: 0;
    border-radius: var(--radius-m);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    cursor: pointer;
}
.primary-button:hover { background: var(--color-accent-hover); }
.primary-button:disabled { cursor: progress; background: var(--color-accent-hover); }
.spinner {
    display: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
.is-busy .spinner { display: inline-block; }
.is-busy .secondary-paths, .is-busy .field-row { opacity: .5; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

a.primary-button { text-decoration: none; }
form.is-busy .primary-button { cursor: progress; }

/* Recupero della password: testo introduttivo, codice di verifica, ritorno all'accesso. */
.sheet-intro { margin: 0 0 1.25rem; color: var(--color-text-muted); font-size: .9375rem; }
.captcha { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .625rem; }
.captcha img { display: block; width: 13.4375rem; max-width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-m); background: #ffffff; }
.captcha-refresh { height: 2.75rem; padding: 0 1rem; }
.sheet-footer-link { margin: 1.5rem 0 0; text-align: center; font-size: .9375rem; font-weight: 700; }
.sheet-footer-link a { text-decoration: none; }
.sheet-footer-link a:hover { text-decoration: underline; }

/* Registrazione: due strade distinte, consumatore e attività commerciale. */
.secondary-paths { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.secondary-paths h2 { margin: 0 0 .75rem; font-size: 1rem; font-weight: 700; color: var(--color-text-muted); }
.path-link {
    display: flex;
    align-items: center;
    gap: .875rem;
    min-height: 3.75rem;
    margin-bottom: .625rem;
    padding: .625rem .875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    color: var(--color-text);
    text-decoration: none;
}
.path-link:hover { border-color: var(--color-border-strong); background: var(--color-row-hover); }
.path-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
}
.path-icon svg { width: 1.125rem; height: 1.125rem; }
.path-text { flex: 1; min-width: 0; }
.path-text strong { display: block; font-size: 1rem; }
.path-text span { display: block; font-size: .875rem; color: var(--color-text-subtle); }
.path-chevron { flex: none; width: 1rem; height: 1rem; color: var(--color-text-subtle); }

.login-footer {
    grid-area: footer;
    padding: 1.25rem;
    font-size: .8125rem;
    text-align: center;
    color: var(--color-text-subtle);
    background: var(--color-surface);
}

@media (min-width: 60rem) {
    /* la colonna sinistra è una sola superficie: cerchi e moneta appartengono all'impaginazione */
    .login-layout {
        position: relative;
        overflow: hidden;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        grid-template-rows: 1fr auto;
        grid-template-areas: "brand main" ". footer";
        background: linear-gradient(90deg, var(--login-brand-bg) 0 45.4545%, var(--color-surface) 45.4545% 100%);
    }
    .login-layout::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 45.4545%;
        background-image: repeating-radial-gradient(circle at 7rem calc(100% - 6rem), transparent 0 4rem, var(--login-ring) 4rem 4.125rem);
        pointer-events: none;
    }
    .brand-panel {
        position: static;
        overflow: visible;
        min-height: 0;
        padding: 3.5rem 3.5rem 0;
        background: none;
    }
    .talent-coin {
        top: auto;
        right: auto;
        bottom: -7rem;
        left: -6rem;
        width: 26rem;
        height: 26rem;
    }
    .brand-name { z-index: 1; max-width: 14ch; font-size: 2.5rem; line-height: 1.1; letter-spacing: -.02em; }

    .login-main {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 3rem 2rem;
        border-radius: 0;
        background: none;
    }
    .org-logo { max-width: 17.5rem; margin: 0 0 2rem; }

    .login-footer { padding: 1.25rem 2rem; text-align: left; background: none; }
}

/* Finestre: scelta del pannello e codice di sblocco. Su smartphone salgono dal basso, su schermi larghi stanno al centro. */
.login-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    margin: auto 0 0;
    padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 1.25rem 1.25rem 0 0;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-overlay);
}
.login-dialog::backdrop { background: var(--color-scrim); }
.login-dialog h2 { margin: 0 0 .375rem; font-size: 1.375rem; line-height: 1.25; }
.dialog-intro { margin: 0 0 1.25rem; color: var(--color-text-muted); font-size: .9375rem; }
.panel-choice {
    display: flex;
    align-items: center;
    gap: .875rem;
    width: 100%;
    min-height: 4rem;
    margin-bottom: .625rem;
    padding: .625rem .875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.panel-choice:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.panel-choice:disabled { cursor: progress; opacity: .6; }
.panel-choice img, .panel-choice .initial { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.panel-choice .initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: 700;
}
.panel-choice-text { flex: 1; min-width: 0; }
.panel-choice-text strong { display: block; font-size: 1.0625rem; }
.panel-choice-text span { display: block; font-size: .875rem; color: var(--color-text-subtle); }

.code-input {
    display: block;
    width: 100%;
    max-width: 14rem;
    height: 3.5rem;
    margin: 0 auto;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-m);
    background: var(--color-field-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-align: center;
}
.code-input:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.code-input[aria-invalid="true"] { border-color: var(--color-danger); }
.dialog-message { margin: .5rem 0 0; font-size: .875rem; text-align: center; }
.dialog-message-error { color: var(--color-danger); }
.dialog-message-success { color: var(--color-positive); }
.dialog-actions { display: flex; gap: .625rem; margin-top: 1.5rem; }
.dialog-actions button { flex: 1; height: 3rem; margin: 0; }
.secondary-button {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-m);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.text-button {
    display: block;
    margin: 1.25rem auto 0;
    border: 0;
    background: none;
    color: var(--color-accent-text);
    font: inherit;
    font-size: .9375rem;
    font-weight: 700;
    cursor: pointer;
}
.text-button:hover { text-decoration: underline; }
.text-button:disabled { cursor: progress; opacity: .6; }

@media (min-width: 40rem) {
    .login-dialog { max-width: 28rem; margin: auto; padding: 1.75rem; border-radius: var(--radius-l); }
}

@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2.4s; }
}