/*
    Lo stile delle pagine di lavoro del Software Manager (Companies manager, Offerte, Repliche e Schema compare
    manager, pagine della configurazione): un solo posto, così restano uguali. Colori dalle variabili del tema,
    quindi vale per il tema chiaro e per quello scuro. Va caricato dopo styles.css (vedi _Layout).

    smc-*  pagine di confronto e intestazioni
    smg-*  elenchi e schede di Companies manager e Offerte
*/
    .smc-titolo-icona {
        width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
        display: grid; place-items: center; font-size: 1.35rem;
        background: rgba(var(--primary-rgb), .1); color: rgb(var(--primary-rgb));
    }

    .smc-flusso { display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr) auto minmax(0, 1.15fr); gap: 1rem; align-items: stretch; }
    @media (max-width: 1199.98px) {
        .smc-flusso { grid-template-columns: 1fr; }
        .smc-freccia { transform: rotate(90deg); justify-self: center; }
    }
    .smc-passo {
        border: 1px solid var(--default-border); border-radius: .75rem; padding: 1rem 1.1rem;
        background: rgba(var(--primary-rgb), .025); display: flex; flex-direction: column; gap: .65rem; min-width: 0;
    }
    .smc-passo-testa { display: flex; align-items: center; gap: .55rem; }
    .smc-numero {
        width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
        font-size: .72rem; font-weight: 700; color: #fff; background: rgb(var(--primary-rgb));
    }
    .smc-freccia { align-self: center; color: var(--text-muted); font-size: 1.4rem; }
    .smc-dettaglio { font-size: .75rem; color: var(--text-muted); display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
    .smc-dettaglio span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .smc-conteggio { font-size: 1.6rem; font-weight: 700; line-height: 1; }

    .smc-esiti { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
    @media (max-width: 1199.98px) { .smc-esiti { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 575.98px) { .smc-esiti { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .smc-esito {
        border: 1px solid var(--default-border); border-radius: .65rem; padding: .7rem .85rem; text-align: left;
        background: var(--custom-white); color: inherit; display: flex; align-items: center; gap: .65rem; width: 100%;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .smc-esito:hover { border-color: rgba(var(--primary-rgb), .35); }
    .smc-esito.smc-attivo { border-color: rgb(var(--primary-rgb)); box-shadow: 0 0 0 .15rem rgba(var(--primary-rgb), .12); }
    .smc-esito .smc-esito-valore { font-size: 1.15rem; font-weight: 700; line-height: 1.1; display: block; }
    .smc-esito .smc-esito-nome { font-size: .72rem; color: var(--text-muted); display: block; white-space: nowrap; }

    .smc-tabella td, .smc-tabella th { vertical-align: middle; }
    .smc-tabella tbody tr { border-left: 3px solid transparent; }
    .smc-tabella tbody tr.smc-r-da { border-left-color: rgb(var(--warning-rgb)); }
    .smc-tabella tbody tr.smc-r-ok { border-left-color: rgb(var(--success-rgb)); }
    .smc-tabella tbody tr.smc-r-uguale { border-left-color: rgba(var(--primary-rgb), .55); }
    .smc-tabella tbody tr.smc-r-errore { border-left-color: rgb(var(--danger-rgb)); }
    .smc-tabella tbody tr.smc-r-errore > td { background-color: rgba(var(--danger-rgb), .035); }
    .smc-tabella tbody tr.smc-r-corso { border-left-color: rgb(var(--info-rgb)); }
    /* Gli sfondi sulle celle: il tema colora le td, non le tr. */
    .smc-tabella tbody tr.smc-selezionata > td { background-color: rgba(var(--primary-rgb), .03); }

    .smc-stato {
        display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 2rem;
        font-size: .72rem; font-weight: 600; white-space: nowrap;
    }
    .smc-iniziali {
        width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center;
        font-size: .7rem; font-weight: 700; background: rgba(var(--primary-rgb), .08); color: rgb(var(--primary-rgb));
    }
    .smc-barra { height: 6px; border-radius: 3px; background: rgba(var(--primary-rgb), .1); overflow: hidden; }
    .smc-barra > span { display: block; height: 100%; background: rgb(var(--primary-rgb)); transition: width .3s ease; }
    .smc-vuoto { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
    .smc-vuoto i { font-size: 2.6rem; opacity: .35; display: block; margin-bottom: .5rem; }

    /* Le differenze di una tabella (Repliche compare manager) */
    .smc-tabella tbody tr.smc-azienda-attiva > td { background-color: rgba(var(--primary-rgb), .1); }
    .smc-tabella tbody tr.smc-azienda-attiva .smc-apri { color: rgb(var(--primary-rgb)); }
    .smc-tabella tbody tr.smc-cliccabile { cursor: pointer; }
    .smc-apri { color: var(--text-muted); transition: transform .15s ease, color .15s ease; }
    .smc-tabella tbody tr.smc-cliccabile:hover .smc-apri { transform: translateX(3px); color: rgb(var(--primary-rgb)); }
    .smc-totali { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
    .smc-totale { border-radius: .6rem; padding: .55rem .7rem; background: rgba(var(--primary-rgb), .04); border: 1px solid var(--default-border); }
    .smc-totale b { display: block; font-size: 1.1rem; line-height: 1.1; }
    .smc-totale span { font-size: .7rem; color: var(--text-muted); }
    .smc-tab { border: 1px solid var(--default-border); border-radius: .65rem; overflow: hidden; }
    .smc-tab + .smc-tab { margin-top: .6rem; }
    .smc-tab-testa { display: flex; align-items: center; gap: .6rem; padding: .65rem .85rem; cursor: pointer; background: var(--custom-white); width: 100%; border: 0; text-align: left; color: inherit; }
    .smc-tab-testa:hover { background: rgba(var(--primary-rgb), .035); }
    .smc-tab-testa .smc-chevron { transition: transform .15s ease; color: var(--text-muted); }
    .smc-tab.smc-aperta .smc-chevron { transform: rotate(90deg); }
    .smc-contatore { font-size: .7rem; font-weight: 600; padding: .15rem .45rem; border-radius: 1rem; white-space: nowrap; }
    .smc-righe { max-height: 380px; overflow: auto; border-top: 1px solid var(--default-border); }
    .smc-modifica { display: flex; gap: .65rem; padding: .6rem .85rem; border-bottom: 1px dashed var(--default-border); font-size: .78rem; }
    .smc-modifica:last-child { border-bottom: 0; }
    .smc-modifica .smc-tipo { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: grid; place-items: center; font-size: .8rem; }
    .smc-vecchio { text-decoration: line-through; color: var(--text-muted); }
    .smc-nuovo { font-weight: 600; }


/* ── Elenco dei clienti (Companies manager, Offerte) ───────────────────────────────── */
.smg-elenco { overflow-y: auto; }
.smg-voce {
    display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; cursor: pointer;
    border-bottom: 1px dashed var(--default-border); border-left: 3px solid transparent;
    transition: background-color .12s ease;
}
.smg-voce:last-child { border-bottom: 0; }
.smg-voce:hover { background: rgba(var(--primary-rgb), .035); }
.smg-voce.smg-attiva { background: rgba(var(--primary-rgb), .08); border-left-color: rgb(var(--primary-rgb)); }
.smg-voce .smg-nome { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smg-voce .smg-desc { font-size: .72rem; color: var(--text-muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Le spunte (Dati, Installazione, Formazione; Demo, Offerta, Ordine) come pulsanti a pillola */
.smg-flag {
    display: inline-flex; align-items: center; gap: .2rem; padding: .15rem .45rem; border-radius: 2rem;
    border: 1px solid var(--default-border); background: transparent; color: var(--text-muted);
    font-size: .66rem; font-weight: 600; white-space: nowrap; line-height: 1.4; transition: all .12s ease;
}
.smg-flag:hover { border-color: rgba(var(--primary-rgb), .4); color: rgb(var(--primary-rgb)); }
.smg-flag i { font-size: .8rem; }
.smg-flag.on { background: rgba(var(--success-rgb), .12); border-color: rgba(var(--success-rgb), .4); color: rgb(var(--success-rgb)); }
.smg-flag.on.smg-info { background: rgba(var(--info-rgb), .12); border-color: rgba(var(--info-rgb), .4); color: rgb(var(--info-rgb)); }
.smg-flag.on.smg-warning { background: rgba(var(--warning-rgb), .14); border-color: rgba(var(--warning-rgb), .45); color: rgb(var(--warning-rgb)); }
.smg-flag:disabled { opacity: .6; }

/* La testata del cliente scelto */
.smg-testata { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.smg-avatar {
    width: 54px; height: 54px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center;
    font-size: 1.05rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .22)), rgb(var(--primary-rgb));
}
.smg-indicatori { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 767.98px) { .smg-indicatori { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.smg-indicatore { border: 1px solid var(--default-border); border-radius: .65rem; padding: .65rem .8rem; min-width: 0; }
.smg-indicatore b { display: block; font-size: 1.15rem; line-height: 1.15; }
.smg-indicatore span { font-size: .7rem; color: var(--text-muted); }

/* I dati del cliente, a sezioni */
.smg-sezione { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
    display: flex; align-items: center; gap: .4rem; margin: 1.1rem 0 .55rem; }
.smg-sezione:first-child { margin-top: 0; }
.smg-sezione::after { content: ""; flex: 1; height: 1px; background: var(--default-border); }
.smg-campo label { font-size: .72rem; color: var(--text-muted); margin-bottom: .2rem; display: block; }
.smg-campo .form-control, .smg-campo .form-select { font-size: .8rem; }
.smg-sola-lettura { font-size: .8rem; font-weight: 600; padding: .32rem 0; display: block; }

/* Moduli */
.smg-modulo { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px dashed var(--default-border); }
.smg-modulo:last-child { border-bottom: 0; }
.smg-modulo.smg-cambiato { background: rgba(var(--warning-rgb), .07); margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
.smg-segmento { display: inline-flex; border: 1px solid var(--default-border); border-radius: .5rem; overflow: hidden; flex-shrink: 0; }
.smg-segmento button { border: 0; background: transparent; padding: .25rem .6rem; font-size: .7rem; font-weight: 600; color: var(--text-muted); }
.smg-segmento button + button { border-left: 1px solid var(--default-border); }
.smg-segmento button.on.smg-s1 { background: rgba(var(--success-rgb), .14); color: rgb(var(--success-rgb)); }
.smg-segmento button.on.smg-s2 { background: rgba(var(--danger-rgb), .12); color: rgb(var(--danger-rgb)); }
.smg-segmento button.on.smg-s3 { background: rgba(var(--warning-rgb), .16); color: rgb(var(--warning-rgb)); }

/* Postazioni */
.smg-punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.smg-punto.smg-viva { background: rgb(var(--success-rgb)); box-shadow: 0 0 0 3px rgba(var(--success-rgb), .18); }
.smg-punto.smg-ferma { background: rgba(var(--primary-rgb), .25); }
.smg-tabella-postazioni td, .smg-tabella-postazioni th { white-space: nowrap; vertical-align: middle; }
.smg-tabella-postazioni td.smg-testo { white-space: normal; min-width: 150px; }

/* Nota dell'offerta */
.smg-nota { min-height: 280px; resize: vertical; font-size: .85rem; line-height: 1.55; }

/* Riepilogo a quattro riquadri (Offerte) */
.smc-esiti.smc-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .smc-esiti.smc-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Barre di scorrimento ──────────────────────────────────────────────────────────────
   Il tema le nasconde dentro le pagine (body *::-webkit-scrollbar { width: 0 }): nei riquadri che scorrono
   (registri, elenchi, postazioni, differenze) servono, e qui tornano visibili e sottili. */
.sm-scorrimento, .smg-elenco, .smc-righe { scrollbar-width: thin; scrollbar-color: rgba(var(--primary-rgb), .35) transparent; }
body .sm-scorrimento::-webkit-scrollbar, body .smg-elenco::-webkit-scrollbar, body .smc-righe::-webkit-scrollbar { width: .5rem; height: .5rem; }
body .sm-scorrimento::-webkit-scrollbar-thumb, body .smg-elenco::-webkit-scrollbar-thumb, body .smc-righe::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), .3); border-radius: .5rem; }
body .sm-scorrimento::-webkit-scrollbar-track, body .smg-elenco::-webkit-scrollbar-track, body .smc-righe::-webkit-scrollbar-track { background: transparent; }

/* ── Elenco compatto (Companies manager): una riga per cliente, le tre fasi come icone ── */
.smg-voce.smg-compatta { padding: .42rem .75rem; gap: .6rem; }
.smg-voce.smg-compatta .smc-iniziali { width: 28px; height: 28px; font-size: .62rem; border-radius: 7px; }
.smg-voce.smg-compatta .smg-nome { font-size: .8rem; line-height: 1.2; }
.smg-voce.smg-compatta .smg-desc { font-size: .68rem; line-height: 1.2; }
.smg-fase {
    width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; display: inline-grid; place-items: center;
    border: 1px solid var(--default-border); background: transparent; color: var(--text-muted); font-size: .8rem; padding: 0;
    transition: all .12s ease;
}
.smg-fase:hover { border-color: rgba(var(--primary-rgb), .4); color: rgb(var(--primary-rgb)); }
.smg-fase.on { background: rgba(var(--success-rgb), .14); border-color: rgba(var(--success-rgb), .45); color: rgb(var(--success-rgb)); }

/* ── Companies manager: Clienti, Dati del cliente e Moduli alti uguali ──
   "Dati del cliente" ha sempre gli stessi campi, quindi sempre la stessa altezza (748 px misurati con Descrizione
   sotto Ragione sociale e le righe delle licenze): le tre sezioni
   hanno questa altezza fissa e Clienti e Moduli scorrono al loro interno. Se si aggiungono campi a "Dati del
   cliente" va alzato questo valore. Le altezze valgono solo quando le colonne stanno affiancate. */
:root { --smg-altezza-dati: 756px; }
@media (min-width: 1200px) {
    .smg-come-dati-xl { height: var(--smg-altezza-dati); }
}
@media (min-width: 1400px) {
    .smg-come-dati-xxl { height: var(--smg-altezza-dati); overflow: hidden; }
    .smg-come-dati-xxl > .card-body { overflow-y: auto; min-height: 0; }
}

/* ── Tabelle dei confronti: le colonne le decide la finestra, non il contenuto ──
   Durante un confronto i messaggi delle righe cambiano di continuo: con la disposizione automatica la tabella
   ridisegnava le colonne a ogni messaggio. Qui le larghezze sono quelle del <colgroup>; il testo lungo va a capo
   (o si accorcia con i puntini, con il testo intero al passaggio del mouse): cambia l'altezza delle righe, non le colonne. */
.smc-colonne-fisse { table-layout: fixed; width: 100%; min-width: 860px; }
.smc-colonne-fisse td, .smc-colonne-fisse th { overflow-wrap: anywhere; }
.smc-taglia { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }