/* ==========================================================================
   TIPOGRAFIA DI BASE
   ========================================================================== */

body {
    font-family: 'Poppins', sans-serif !important;
}


/* ==========================================================================
   HEADER / LAYOUT DI PAGINA
   ========================================================================== */

.inner-backgroud {
    background: url('../images/header-interno-1466x178.jpg') no-repeat top left;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Il logo FNOMCeO ha proporzioni molto larghe (cerchio + testo + sottotitolo). Con l'altezza
   fissata via attributo HTML (height="92"), sotto i 576px la larghezza proporzionale supera
   il viewport e manda in overflow orizzontale l'intera pagina, non solo il logo. Sotto quella
   soglia lo lasciamo scalare in proporzione alla larghezza disponibile. */
@media (max-width: 576px) {
    .container img[src*="logo-fnomceo"] {
        height: auto;
        max-width: 100%;
    }
}


/* ==========================================================================
   BADGE PROFESSIONISTA (sospeso / radiato)
   ========================================================================== */

.badge-suspended {
    color: #ffffff;
    text-transform: lowercase;
    font-size: 50%;
}

li.iscrizione-suspended {
    background-color: #F8D7DA;
}


/* ==========================================================================
   STAMPA DETTAGLIO PROFESSIONISTA
   ========================================================================== */

@page {
    size: A4;
    margin: 0;
}

@media print {

    .modal {
        width: 210mm;
        height: 297mm;
        border: 0;
        background: #ffffff;
    }

    .modal-dialog {
        margin: 0;
        padding: 0;
        border: 0;
        width: 210mm;
    }

    .modal-content {
        margin: 5mm;
        padding: 0;
        border: 0;
        width: 200mm;
    }

    .modal-header {
        width: 200mm;
    }

    .modal-body {
        width: 200mm;
    }

    /* Dettaglio STP: in stampa i due tab (Dati societari / Soci) devono comparire entrambi,
       non solo quello attivo a video. Forziamo visibili tutti i pannelli e nascondiamo la barra
       dei tab a pillola (in stampa non ha senso, non è cliccabile). Regole inerti sulle altre
       pagine/modali, dove #stpDetTabID non esiste. */
    #stpDetTabID {
        display: none;
    }

    #stpDetTabContentID .tab-pane {
        display: block !important;
        opacity: 1 !important;
    }

}


/* ==========================================================================
   SELETTORE A PILLOLA (tab)
   Stile condiviso da tre selettori diversi:
   - #tipoProfessionistaTabID : selettore Medico / Odontoiatra nei risultati (elenco.php,
     elenco-stp.php)
   - #tipoRicercaTabID        : selettore Professionisti / Societa' tra Professionisti nella
     pagina di ricerca (index.php)
   - #stpDetTabID             : selettore Dati societari / Soci nella modal di dettaglio STP
     (dettaglio-stp.php)
   Entrambi condividono le stesse regole così l'utente ritrova lo stesso pattern di navigazione
   su tutte le pagine. Gli ID restano distinti perché descrivono cose diverse (tipo di
   professionista nei risultati vs tipo di ricerca in home). Se in futuro serve differenziarli
   visivamente, basta aggiungere regole specifiche sotto il singolo ID.
   Sostituisce le tab Bootstrap standard con un selettore a pillola centrato, che richiama la
   dualità in modo sobrio e istituzionale.
   ========================================================================== */

#tipoProfessionistaTabID,
#tipoRicercaTabID,
#stpDetTabID {
    display: flex;              /* serve "flex" (non inline-flex) per poter centrare con margin auto */
    width: fit-content;         /* si adatta al contenuto invece di occupare tutta la riga */
    max-width: 100%;            /* non esce mai dal contenitore su schermi molto stretti */
    margin-left: auto;
    margin-right: auto;         /* centra il blocco orizzontalmente */
    background-color: #f1f3f5;
    border-radius: 50px;
    border-bottom: none;        /* rimuove la sottolineatura Bootstrap, non coerente con lo stile a pillola */
    padding: 4px;
}

#tipoProfessionistaTabID .nav-item,
#tipoRicercaTabID .nav-item,
#stpDetTabID .nav-item {
    margin-bottom: 0;           /* Bootstrap sposta di default l'item di -1px per allinearlo alla vecchia sottolineatura */
}

#tipoProfessionistaTabID .nav-item + .nav-item,
#tipoRicercaTabID .nav-item + .nav-item,
#stpDetTabID .nav-item + .nav-item {
    margin-left: 4px;           /* distacco tra le due pillole */
}

#tipoProfessionistaTabID .nav-link,
#tipoRicercaTabID .nav-link,
#stpDetTabID .nav-link {
    background-color: transparent;
    color: #adb5bd;             /* grigio tenue sul tab NON selezionato */
    border: none;
    border-radius: 50px;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

#tipoProfessionistaTabID .nav-link:hover,
#tipoRicercaTabID .nav-link:hover,
#stpDetTabID .nav-link:hover {
    background-color: transparent;
    color: #6c757d;             /* scurimento all'hover, senza sfondo, per restare coerenti con lo stile a pillola */
}

#tipoProfessionistaTabID .nav-link.active,
#tipoProfessionistaTabID .nav-link.active:hover,
#tipoRicercaTabID .nav-link.active,
#tipoRicercaTabID .nav-link.active:hover,
#stpDetTabID .nav-link.active,
#stpDetTabID .nav-link.active:hover {
    background-color: #ffffff;
    color: #212529;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); /* rilievo leggero, simula la pillola "sollevata" */
}

/* Su schermi stretti (telefono) le due voci affiancate non entrano in larghezza: il blocco
   andava a capo in modo scomposto e la pillola attiva sforava oltre l'arrotondamento del
   contenitore. Qui sotto una certa soglia impiliamo le pillole a tutta larghezza, testo
   centrato: ogni voce ha la sua riga e resta dentro i bordi arrotondati. Su desktop resta
   tutto invariato (pillole affiancate). */
@media (max-width: 576px) {
    #tipoProfessionistaTabID,
    #tipoRicercaTabID,
    #stpDetTabID {
        flex-direction: column;   /* le pillole si impilano invece di affiancarsi */
        width: 100%;              /* il contenitore occupa tutta la larghezza disponibile */
        border-radius: 16px;      /* con le pillole impilate un raggio più contenuto sta meglio */
    }

    #tipoProfessionistaTabID .nav-item + .nav-item,
    #tipoRicercaTabID .nav-item + .nav-item,
    #stpDetTabID .nav-item + .nav-item {
        margin-left: 0;           /* niente distacco orizzontale: ora sono in colonna */
        margin-top: 4px;          /* distacco verticale tra le due pillole impilate */
    }

    #tipoProfessionistaTabID .nav-link,
    #tipoRicercaTabID .nav-link,
    #stpDetTabID .nav-link {
        text-align: center;       /* testo centrato nella pillola a tutta larghezza */
    }
}


/* ==========================================================================
   TABELLA RISULTATI (DataTables)
   La tabella, generata da DataTables dentro .dataTables_wrapper, diventa una
   card unica con intestazioni, righe e paginazione in stile coerente con il
   selettore a pillola sopra.
   ========================================================================== */

#tipoProfessionistaTabContentID .dataTables_wrapper {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 1.5rem;
}

/* Intestazioni colonna: da grassetto standard Bootstrap a stile "etichetta" */
#tipoProfessionistaTabContentID table thead th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: #868e96;
    font-weight: 600;
    border-top: none;
    border-bottom: 2px solid #f1f3f5;
    padding-bottom: 0.75rem;
}

/* Righe: più respiro verticale, separatori sottili invece delle righe Bootstrap standard */
#tipoProfessionistaTabContentID table.dataTable tbody td {
    border-top: none;
    border-bottom: 1px solid #f1f3f5;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    vertical-align: middle;
}

/* Hover riga: tinta calda tenue invece del grigio standard di table-hover,
   richiama l'accento oro/bronzo del logo FNOMCeO */
#tipoProfessionistaTabContentID table.dataTable tbody tr:hover {
    background-color: #fdf8f0;
}

/* Icona di ricerca a fine riga, colorata con l'accento per guidare l'occhio all'azione */
#tipoProfessionistaTabContentID table.dataTable tbody tr td:last-child i.fa-search {
    color: #c08a4e;
}

/* Menu "Mostra righe per pagina": select più moderno, meno "browser default" */
#tipoProfessionistaTabContentID .dataTables_length select {
    border-radius: 6px;
    border: 1px solid #dee2e6;
    padding: 0.25rem 0.5rem;
}

/* Testo info "Da X a Y righe di Z totali": da riga tecnica a nota discreta */
#tipoProfessionistaTabContentID .dataTables_info {
    color: #868e96;
    font-size: 0.85rem;
}


/* ==========================================================================
   TABELLA RISULTATI STP — larghezze colonne (solo elenco-stp.php)
   La tabella STP ha 4 colonne: Denominazione (lunga) + Forma Giuridica, Partita IVA e REA
   (corte). Su schermo largo la Denominazione tende a prendersi quasi tutto lo spazio,
   schiacciando le ultime tre e facendo andare a capo il REA (es. "AN - 261829" su due righe).
   Qui diamo alla Denominazione una larghezza massima e riserviamo spazio fisso alle altre tre,
   impedendo il wrap su PIVA e REA. Le classi sono applicate su th e td in elenco-stp.php.
   ========================================================================== */

#tipoProfessionistaTabContentID .stp-col-denominazione {
    width: 55%;                 /* colonna dominante, ma non tutta la riga */
}

#tipoProfessionistaTabContentID .stp-col-forma {
    width: 15%;
}

#tipoProfessionistaTabContentID .stp-col-piva,
#tipoProfessionistaTabContentID .stp-col-rea {
    width: 15%;
    white-space: nowrap;        /* PIVA e REA non devono mai spezzarsi su due righe */
}


/* ==========================================================================
   PAGINAZIONE (DataTables)
   ========================================================================== */

/* Su schermi stretti la riga di paginazione (numeri + puntini + Precedente/Successivo)
   può risultare più larga del contenitore. Essendo allineata a destra e "nowrap" per
   default Bootstrap, l'eccedenza sfondava fuori dallo schermo a sinistra invece di andare
   a capo. Qui la centriamo e le permettiamo di avvolgere su più righe se necessario. */
#tipoProfessionistaTabContentID .dataTables_paginate {
    float: none !important;
    text-align: center;
    width: 100%;
}

#tipoProfessionistaTabContentID .dataTables_paginate .pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px; /* respiro verticale tra le righe quando va a capo */
}

/* Pulsanti a pillola, coerenti con il selettore Medico/Odontoiatra */
#tipoProfessionistaTabContentID .dataTables_paginate .page-link {
    border: none;
    border-radius: 50px;
    margin: 0 2px;
    color: #495057;
}

/* Numeri di pagina e freccine Precedente/Successivo: stessa dimensione fissa e forma
   circolare, indipendentemente da quante cifre contiene il numero (altrimenti la forma
   oscillava tra cerchio e pillola secondo la larghezza del testo) */
#tipoProfessionistaTabContentID .dataTables_paginate .paginate_button.page-item:not(.previous):not(.next) .page-link,
#tipoProfessionistaTabContentID .dataTables_paginate .paginate_button.previous .page-link,
#tipoProfessionistaTabContentID .dataTables_paginate .paginate_button.next .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
}

#tipoProfessionistaTabContentID .dataTables_paginate .page-item.active .page-link {
    background-color: #c08a4e;
    color: #ffffff;
    box-shadow: none;
}

#tipoProfessionistaTabContentID .dataTables_paginate .page-item.disabled .page-link {
    color: #ced4da;
}

/* Focus da tastiera: il contorno blu di default del browser viene ricolorato in bronzo
   per coerenza con la palette, e mostrato solo quando il focus arriva da tastiera (Tab),
   non da un click del mouse, con :focus-visible. Il click da mouse non deve lasciare
   un contorno "appiccicato" sul bottone dopo il cambio pagina. */
#tipoProfessionistaTabContentID .dataTables_paginate .page-link:focus {
    box-shadow: none;
    outline: none;
}

#tipoProfessionistaTabContentID .dataTables_paginate .page-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(192, 138, 78, 0.4);
    outline: none;
}

/* Caso particolare: il pallino della pagina ATTIVA ha già ".page-item.active .page-link"
   con box-shadow:none e specificità più alta di ":focus-visible" da solo, quindi vincerebbe
   sempre e nasconderebbe il focus da tastiera proprio sulla pagina corrente. Qui rendiamo
   esplicito questo caso con specificità più alta di entrambe le regole sopra. Il doppio
   box-shadow (anello bianco sottile + anello bronzo) serve perché un anello bronzo da solo,
   su un pallino già bronzo scuro, sarebbe troppo poco visibile. */
#tipoProfessionistaTabContentID .dataTables_paginate .page-item.active .page-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7), 0 0 0 5px rgba(192, 138, 78, 0.6);
    outline: none;
}


/* ==========================================================================
   DATI SOCIETARI — dettaglio STP (tab "Dati societari")
   Coppie etichetta-valore. L'etichetta ha larghezza fissa e i valori partono tutti
   dallo stesso punto, subito accanto: l'occhio scorre dritto lungo la colonna delle
   etichette e lo spazio libero resta uniforme a destra. Sostituisce il precedente
   justify-content-between di Bootstrap, che spingeva etichetta e valore ai bordi
   opposti lasciando troppo vuoto al centro su schermi larghi.
   ========================================================================== */

.stp-dato-riga {
    display: flex;
    gap: 1rem;
    align-items: baseline;
}

.stp-dato-label {
    flex: 0 0 15rem;          /* larghezza fissa: incolonna le etichette e allinea i valori */
    max-width: 45%;           /* su schermi stretti non si prende più di metà riga */
    font-weight: 600;
    color: #495057;
}

.stp-dato-valore {
    color: #212529;
    word-break: break-word;   /* valori lunghi (es. denominazioni) vanno a capo senza sfondare */
}


/* ==========================================================================
   CARD SOCI — dettaglio STP (tab "Soci")
   Nel tab "Soci" della modal di dettaglio STP ogni socio è una card invece di una
   riga di tabella. Motivo: il campo Ordine/Collegio ha lunghezza molto variabile
   (spesso assente, talvolta una denominazione lunghissima); in tabella romperebbe
   le colonne o costringerebbe a nascondere il testo dietro un hover (assente su
   mobile). La card lascia andare a capo il testo lungo in modo naturale, leggibile
   su ogni schermo.
   ========================================================================== */

.stp-socio-card {
    border: 1px solid #f1f3f5;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.stp-socio-card .card-body {
    padding: 0.75rem 1rem;
}

/* Riga header della card: nome/denominazione (elemento forte) + un'info accanto
   (data inizio per i fisici, Partita IVA per i giuridici). flex-wrap: su schermo largo
   i due elementi stanno affiancati con l'info spinta a destra; quando lo spazio si stringe
   l'info va a capo sotto il nome da sola, senza soglie in pixel da indovinare. */
.stp-socio-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;         /* 0.25rem tra le righe quando va a capo, 1rem tra nome e info */
    margin-bottom: 0.35rem;
}

/* Nome/denominazione del socio: elemento in evidenza. mr-auto lo tiene a sinistra e
   spinge l'info accanto verso destra finché stanno sulla stessa riga. */
.stp-socio-nome {
    font-weight: 600;
    color: #212529;
    margin-right: auto;
}

/* Info accanto al nome del SOCIO FISICO: singola coppia (Data inizio) in linea col nome,
   spinta a destra. Resta orizzontale: una sola coppia non va mandata a capo da sola, così
   non si crea spazio verticale inutile sotto il nome. */
.stp-socio-header-info {
    display: flex;
    gap: 0.4rem;
    color: #495057;
    white-space: nowrap;       /* la data non si spezza: semmai va a capo tutta insieme */
}

/* Blocco info del SOCIO GIURIDICO: le coppie (Partita IVA, Rappresentante legale, Quota)
   impilate verticalmente e allineate a destra, sotto/accanto alla denominazione. Su schermo
   stretto l'intero blocco va a capo sotto la denominazione (grazie al flex-wrap dell'header). */
.stp-socio-header-info-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    color: #495057;
}

/* Singola coppia etichetta-valore dentro l'header-info-col (es. "Partita IVA: ..."):
   non deve spezzarsi a metà, resta su una riga sua. */
.stp-socio-testa-dx {
    display: flex;
    gap: 0.4rem;
    white-space: nowrap;
}

/* Riga etichetta-valore generica (usata per Ordine/Collegio): l'etichetta resta compatta
   a sinistra, il valore può andare a capo su più righe senza rompere il layout. */
.stp-socio-riga {
    display: flex;
    gap: 0.4rem;
    color: #495057;
    padding: 0.1rem 0;
}

.stp-socio-label {
    color: #868e96;
    flex-shrink: 0;            /* l'etichetta non si comprime: a cedere/andare a capo è il valore */
}