/*
 * pages.css — le eccezioni vere: regole che valgono per una pagina sola e non
 * hanno senso come componente riutilizzabile.
 *
 * Il criterio per stare qui è stretto: se una regola serve a due pagine va in
 * components.css. Questo file esiste per non far ricomparire i blocchi <style>
 * nei template, non per raccogliere tutto ciò che avanza.
 *
 * L'unica eccezione è la centratura condivisa da accesso e pagine di errore:
 * non è un componente, è la conseguenza del fatto che sono le sole due
 * pagine senza topbar.
 */

/* ── Elenco aziende ───────────────────────────────────────────────────────
   È l'unica tabella con colonne scelte dall'utente (fino a ~50) e una riga
   di filtri dentro il thead. */

/* Larghezze minime: senza, le colonne strette collassano sull'etichetta e la
   tabella "balla" a ogni cambio di vista. */
.col-name   { min-width: 180px; }
.col-piva   { min-width: 120px; }
.col-cf     { min-width: 140px; }
.col-owner  { min-width: 140px; }
.col-web    { min-width: 160px; }
.col-dim    { min-width: 120px; }
.col-stato  { min-width: 80px; }
.col-ordini { min-width: 80px; text-align: center; }
.col-ordini input { text-align: center; }

th.sortable-col { white-space: nowrap; }

/* L'indirizzo web è l'unico valore che può essere lunghissimo: si tronca,
   altrimenti da solo raddoppia la larghezza della tabella. */
.cell-website {
    display: inline-block;
    max-width: 150px;
}

/* Intestazione appiccicata su due righe (etichette + filtri).
   position: sticky nativo su <thead>/<th> è inaffidabile in Chrome quando
   un altro antenato (qui: la topbar) è già sticky nello stesso contenitore
   di scroll: l'offset "top" viene applicato in modo incondizionato, anche
   prima che l'elemento raggiunga il punto di aggancio, e l'header si dipinge
   sopra la prima riga di dati fin dal caricamento della pagina (verificato:
   cambiando il valore di "top" la posizione renderizzata si sposta della
   stessa quantità, indipendentemente dallo scroll). Lo sticky è quindi
   gestito via JavaScript in app.js, che passa il <thead> a position:fixed
   solo quando la tabella ha davvero scorso oltre la topbar. */
.table-accounts {
    border-collapse: separate;
    border-spacing: 0;
}

/* ── Pagine senza shell: accesso ed errori ────────────────────────────────
   Sono le uniche due senza topbar, quindi le uniche in cui il contenuto è
   centrato sul viewport invece che dentro un contenitore. */
.login-body,
.error-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--sp-4);
}

/* Il commutatore di tema non ha una barra dove stare: si aggancia all'angolo. */
.login-theme,
.error-theme {
    position: fixed;
    top: var(--sp-4);
    right: var(--sp-4);
}

.error-shell {
    width: 100%;
    max-width: 460px;
}

.error-logo {
    color: var(--ui-accent);
}

.error-logo svg {
    height: 32px;
}

.error-card {
    padding: var(--sp-6);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}

.error-icon {
    font-size: 2rem;
    line-height: 1;
    color: var(--ui-disabled);
}

/* Il codice è un'informazione da riferire al supporto, non il titolo della
   pagina: sta sopra, piccolo e in maiuscoletto spaziato. */
.error-code {
    margin: var(--sp-3) 0 var(--sp-1);
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--ui-muted);
}

.error-title {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-lg);
    font-weight: 600;
}

.error-message {
    margin: 0 0 var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--ui-text-2);
}

.error-identity,
.error-support {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-2xs);
    color: var(--ui-muted);
    text-align: center;
}

.error-identity {
    margin-bottom: 0;
}

/* ── Accesso ──────────────────────────────────────────────────────────── */
.login-shell {
    width: 100%;
    max-width: 400px;
}

.login-logo {
    color: var(--ui-accent);
}

.login-logo svg {
    height: 40px;
}

.login-eyebrow {
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--ui-muted);
}

.login-card {
    padding: var(--sp-6);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}

.divider {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--ui-muted);
    font-size: var(--fs-2xs);
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--ui-border);
}

/* Il pulsante Microsoft NON segue i token: le linee guida del marchio
   impongono fondo bianco o nero pieno e il logo a quattro quadrati
   invariato. In tema scuro si usa quindi la variante nera prevista dalle
   linee guida, non una superficie della nostra palette. */
.btn-microsoft {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    background: #FFFFFF;
    border: 1px solid #8C8C8C;
    color: #5E5E5E;
    font-weight: 600;
    font-size: var(--fs-sm);
}

.btn-microsoft:hover {
    background: #F3F3F3;
    color: #5E5E5E;
}

[data-bs-theme="dark"] .btn-microsoft {
    background: #2F2F2F;
    border-color: #8C8C8C;
    color: #FFFFFF;
}

[data-bs-theme="dark"] .btn-microsoft:hover {
    background: #3C3C3C;
    color: #FFFFFF;
}

.ms-logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── Scoperta campi CRM ───────────────────────────────────────────────────
   I valori di esempio arrivano grezzi da Dynamics: GUID, date ISO, codici
   OptionSet. In proporzionale un l e un 1 sono indistinguibili, quindi qui
   il monospazio non è decorazione. Lo stack è quello di Bootstrap, nessun
   font aggiuntivo da scaricare. */
.sample-value {
    font-family: var(--bs-font-monospace);
    font-size: var(--fs-2xs);
    word-break: break-all;
}