/* ============================================================
   SednaNext — LOGIN + SELEZIONE AZIENDA (redesign claude.ai/design)
   Registro deliberatamente diverso: l'unico momento "branded".
   Densità abbassata, controlli più grandi (42/44px), label colloquiali.
   Stesso design system: token --sedna-* (dark mode automatica).
   CSS globale (non scoped) perché gli <input> Blazor InputText non
   ricevono gli attributi di scoping.
   ============================================================ */

.login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* ---------------- PANNELLO BRAND (sinistra, "loud") ----------------
   Gradiente brand + oro: hex letterali intenzionali (momento committed,
   indipendente dal tema), coerenti col boot screen di index.html. */
.login-brand {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(120% 90% at 15% 12%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 45%),
        linear-gradient(158deg, #1565c0 0%, #1e88e5 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(36px, 4vw, 64px);
    isolation: isolate;
}

/* texture geometrica discreta a bassissimo contrasto */
.login-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1.4px);
    background-size: 26px 26px;
    opacity: 0.5;
    z-index: -1;
    -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 78%);
    mask-image: linear-gradient(135deg, #000 0%, transparent 78%);
}

.login-brand::after {
    content: "";
    position: absolute;
    right: -160px;
    bottom: -200px;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 0 0 70px rgba(255, 255, 255, 0.04);
    z-index: -1;
}

.login-brand__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-brand__mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
}

.login-brand__mark svg {
    width: 42px;
    height: 42px;
    display: block;
}

.login-brand__word {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.login-brand__name {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    position: relative;
    width: max-content;
}

/* unico punto caldo: oro, con parsimonia */
.login-brand__name::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: #ffd54f;
}

.login-brand__mid {
    max-width: 30ch;
}

.login-brand__mid h1 {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.login-brand__mid p {
    margin: 18px 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    max-width: 36ch;
}

.login-brand__foot {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.62);
}

.login-brand__foot .sep {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.25);
}

/* ---------------- PANNELLO FORM (destra) ---------------- */
.login-panel {
    background: var(--sedna-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 4vw, 56px);
}

.login-card {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
}

.login-head h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: var(--sedna-font-semibold);
    letter-spacing: -0.01em;
    color: var(--sedna-text);
}

.login-head p {
    margin: 6px 0 0;
    color: var(--sedna-text-secondary);
    font-size: var(--sedna-text-sm);
}

.login-head .back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sedna-text-secondary);
    font-size: 0.8125rem;
    font-weight: var(--sedna-font-semibold);
    padding: 0;
    margin-bottom: 14px;
    font-family: inherit;
}

.login-head .back:hover {
    color: var(--sedna-text);
}

/* Banner errore — tint morbido, niente stripe 4px */
.login-err {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0 0;
    padding: 11px 13px;
    border-radius: var(--sedna-radius-base);
    background: var(--sedna-error-50);
    border: 1px solid color-mix(in srgb, var(--sedna-error-600) 35%, transparent);
    color: var(--sedna-error-700);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.login-err i {
    font-size: 0.95rem;
    margin-top: 1px;
    flex: none;
}

/* Form */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.login-field__label {
    font-size: 0.8125rem;
    font-weight: var(--sedna-font-semibold);
    color: var(--sedna-text);
}

.login-shell {
    display: flex;
    align-items: center;
    height: 42px;
    border: 1px solid var(--sedna-border);
    background: var(--sedna-surface);
    border-radius: var(--sedna-radius-base);
    padding: 0 6px 0 12px;
    gap: 10px;
    transition: border-color 190ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 190ms cubic-bezier(0.25, 1, 0.5, 1);
}

.login-shell .lead {
    color: var(--sedna-text-tertiary);
    font-size: 1rem;
    flex: none;
}

.login-shell input,
.login-shell .login-input {
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    font-size: 0.9375rem;
    color: var(--sedna-text);
    outline: none;
    min-width: 0;
    font-family: inherit;
}

.login-shell input::placeholder {
    color: var(--sedna-text-tertiary);
}

.login-shell:focus-within {
    border-color: var(--sedna-primary);
    box-shadow: 0 0 0 3px var(--sedna-primary-subtle);
}

/* stato errore: bordo dei campi più caldo */
.login-card.has-error .login-shell {
    border-color: color-mix(in srgb, var(--sedna-error-600) 55%, var(--sedna-border));
}

.login-reveal {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--sedna-text-tertiary);
    border-radius: 5px;
    flex: none;
}

.login-reveal:hover {
    color: var(--sedna-text-secondary);
    background: var(--sedna-surface-variant);
}

/* Riga ricordami / dimenticata */
.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--sedna-text-sm);
    color: var(--sedna-text-secondary);
    cursor: pointer;
    user-select: none;
}

.login-remember input {
    width: 17px;
    height: 17px;
    accent-color: var(--sedna-primary);
    cursor: pointer;
}

.login-forgot {
    font-size: 0.8125rem;
    font-weight: var(--sedna-font-semibold);
    color: var(--sedna-primary);
    text-decoration: none;
}

.login-forgot:hover {
    text-decoration: underline;
}

/* Bottone submit full-width 44px */
.login-submit {
    width: 100%;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    border-radius: var(--sedna-radius-base);
    border: 1px solid var(--sedna-primary);
    background: var(--sedna-primary);
    color: var(--sedna-on-primary);
    font-size: 0.9375rem;
    font-weight: var(--sedna-font-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: background-color 190ms cubic-bezier(0.25, 1, 0.5, 1), border-color 190ms cubic-bezier(0.25, 1, 0.5, 1);
}

.login-submit:hover:not(:disabled) {
    background: var(--sedna-primary-hover);
    border-color: var(--sedna-primary-hover);
}

.login-submit:active:not(:disabled) {
    background: var(--sedna-primary-active);
}

.login-submit:disabled {
    opacity: 0.7;
    cursor: default;
}

.login-note {
    margin-top: 16px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--sedna-text-tertiary);
}

/* ---------------- Seleziona azienda ---------------- */
.login-who {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid var(--sedna-border);
    border-radius: var(--sedna-radius-base);
    background: var(--sedna-surface-variant);
    margin: 20px 0 8px;
}

.login-who__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sedna-surface-hover);
    color: var(--sedna-text-secondary);
    display: grid;
    place-items: center;
    font-weight: var(--sedna-font-semibold);
    font-size: 0.8125rem;
    flex: none;
    border: 1px solid var(--sedna-border);
}

.login-who__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}

.login-who__meta .n {
    font-weight: var(--sedna-font-semibold);
    font-size: 0.8125rem;
    color: var(--sedna-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.login-who__meta .e {
    font-size: 0.6875rem;
    color: var(--sedna-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.login-who__logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sedna-text-secondary);
    font-size: 0.75rem;
    font-weight: var(--sedna-font-semibold);
    font-family: inherit;
    flex: none;
}

.login-who__logout:hover {
    color: var(--sedna-error-700);
}

.tenant-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.tenant-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    padding: 13px 14px;
    border: 1px solid var(--sedna-border);
    border-radius: 10px;
    background: var(--sedna-surface);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 190ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 190ms cubic-bezier(0.25, 1, 0.5, 1);
}

.tenant-card:hover {
    border-color: var(--sedna-border-strong);
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 4px 14px rgba(16, 24, 40, 0.08);
}

.tenant-card:disabled {
    opacity: 0.6;
    cursor: default;
}

.tenant-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    flex: none;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

/* palette avatar ciclica (3 tinte) — accenti, non superfici */
.tenant-card__avatar.c1 { background: #1e88e5; }
.tenant-card__avatar.c2 { background: #065f46; }
.tenant-card__avatar.c3 { background: #5b4bbd; }

.sedna-theme-dark .tenant-card__avatar {
    border-color: rgba(255, 255, 255, 0.16);
}

.tenant-card__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tenant-card__name {
    font-weight: var(--sedna-font-semibold);
    font-size: 0.9375rem;
    color: var(--sedna-text);
}

.tenant-card__sub {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tenant-card .chev {
    color: var(--sedna-text-tertiary);
    font-size: 1rem;
    flex: none;
}

.tenant-card:hover .chev {
    color: var(--sedna-text-secondary);
}

/* badge pill (riuso linguaggio dashboard) */
.login-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--sedna-radius-full);
    font-size: var(--sedna-text-xs);
    font-weight: var(--sedna-font-semibold);
    white-space: nowrap;
    background: var(--sedna-surface-variant);
    color: var(--sedna-text-secondary);
}

.login-badge.success { background: var(--sedna-success-50); color: var(--sedna-success-700); }
.login-badge.info    { background: var(--sedna-info-50); color: var(--sedna-info-700); }
.login-badge.warning { background: var(--sedna-warning-50); color: var(--sedna-warning-700); }
.login-badge.danger  { background: var(--sedna-error-50); color: var(--sedna-error-700); }

/* spinner inline nel submit */
.login-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin 0.7s linear infinite;
}

@keyframes login-spin {
    to { transform: rotate(360deg); }
}

/* focus visibile su tutto il cliccabile */
.login-submit:focus-visible,
.tenant-card:focus-visible,
.login-reveal:focus-visible,
.login-forgot:focus-visible,
.login-head .back:focus-visible,
.login-who__logout:focus-visible {
    outline: 2px solid var(--sedna-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
    .login {
        grid-template-columns: 1fr;
    }

    .login-brand {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-spinner { animation-duration: 2s; }
    .login-shell { transition: none; }
}