/* ===========================================================================
   Console amministrativa PRG Sellano
   Bootstrap 4 e jQuery, nessuna dipendenza da Material Design.
   Le tinte richiamano quelle del visualizzatore per continuita' visiva.
   =========================================================================== */

:root {
    --c-bg: #f1f3f6;
    --c-superficie: #ffffff;
    --c-bordo: #d8dce4;
    --c-testo: #1e2229;
    --c-testo-tenue: #6b7383;
    --c-accento: #0a8a5e;
    --c-accento-scuro: #076e4a;
    --c-accento-tenue: #e6f5ef;
    --c-avviso: #b4690e;
    --c-avviso-tenue: #fdf3e3;
    --c-errore: #b3261e;
    --c-errore-tenue: #fdecea;
    --c-barra: #1a1d23;
    --c-ombra: 0 1px 3px rgba(16, 20, 28, .09), 0 6px 18px rgba(16, 20, 28, .06);
    --c-raggio: 7px;
}

body {
    background: var(--c-bg);
    color: var(--c-testo);
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 14px;
}

/* ── Avviso di console aperta ────────────────────────────────────────────── */
/* Deliberatamente vistoso: e' una condizione che non deve arrivare in
   produzione, e un avviso discreto si smette di vedere dopo due giorni. */
.console-avviso-aperta {
    background: repeating-linear-gradient(45deg, #b3261e, #b3261e 14px, #9c211a 14px, #9c211a 28px);
    color: #fff;
    padding: 10px 20px;
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    line-height: 1.45;
}
.console-avviso-aperta i { font-size: 17px; margin-top: 1px; flex-shrink: 0; }
.console-avviso-aperta code { background: rgba(255,255,255,.22); color: #fff; padding: 1px 5px; border-radius: 3px; }

/* ── Barra superiore ─────────────────────────────────────────────────────── */
.console-barra {
    background: var(--c-barra);
    color: #e6e9f0;
    padding: 0 20px;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.console-marchio { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .01em; color: #e6e9f0; text-decoration: none; }
.console-marchio:hover, .console-marchio:focus { color: #fff; text-decoration: none; }
.console-marchio i { color: var(--c-accento); }
.console-marchio small { display: block; font-weight: 400; font-size: 11px; color: #939bab; letter-spacing: .02em; }
.console-barra .console-utente { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; color: #b9c0cd; }
.console-barra .console-utente a { color: #e6e9f0; text-decoration: none; }
.console-barra .console-utente a:hover { color: #fff; text-decoration: underline; }

/* ── Navigazione ─────────────────────────────────────────────────────────── */
.console-nav { background: var(--c-superficie); border-bottom: 1px solid var(--c-bordo); padding: 0 20px; display: flex; gap: 2px; overflow-x: auto; }
.console-nav a {
    padding: 9px 13px;
    color: var(--c-testo-tenue);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.console-nav a:hover { color: var(--c-testo); background: #f7f8fa; text-decoration: none; }
.console-nav a.attivo { color: var(--c-accento); border-bottom-color: var(--c-accento); }
.console-nav a i { margin-right: 6px; opacity: .8; }

/* ── Contenuto ───────────────────────────────────────────────────────────── */
/* Gli spazi sono stretti di proposito: una pagina di amministrazione si legge
   a colpo d'occhio se ci sta dentro uno schermo, e ogni riquadro che spinge
   il successivo sotto la piega costa uno scorrimento in piu' ogni volta. */
.console-corpo { padding: 14px 18px 40px; }
.console-titolo { font-size: 18px; font-weight: 700; margin: 0 0 2px; }
.console-sottotitolo { color: var(--c-testo-tenue); margin: 0 0 12px; font-size: 13px; }

.riquadro {
    background: var(--c-superficie);
    border: 1px solid var(--c-bordo);
    border-radius: var(--c-raggio);
    box-shadow: var(--c-ombra);
    margin-bottom: 12px;
}
.riquadro-testa {
    padding: 8px 14px;
    border-bottom: 1px solid var(--c-bordo);
    font-weight: 700;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.riquadro-testa i { color: var(--c-accento); }
.riquadro-testa .badge { margin-left: auto; font-weight: 600; }
.riquadro-corpo { padding: 12px 14px; }
.riquadro-corpo.senza-spazio { padding: 0; }

/* Le distanze delle utilita' Bootstrap sono pensate per pagine pubbliche.
   Qui vanno ridotte in blocco: ritoccarle campo per campo nel markup
   significherebbe ricordarsene ogni volta che si aggiunge una riga.
   Servono gli !important perche' li ha anche Bootstrap sulle stesse classi. */
.console-corpo .mb-3, .console-corpo .my-3 { margin-bottom: .5rem !important; }
.console-corpo .mb-2 { margin-bottom: .35rem !important; }
.console-corpo .form-group { margin-bottom: .5rem; }
.console-corpo .form-row { margin-bottom: 0; }

/* ── Schede di sintesi ───────────────────────────────────────────────────── */
.sintesi { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; margin-bottom: 12px; }
.sintesi-scheda {
    background: var(--c-superficie);
    border: 1px solid var(--c-bordo);
    border-radius: var(--c-raggio);
    padding: 10px 13px;
    box-shadow: var(--c-ombra);
}
.sintesi-numero { font-size: 23px; font-weight: 700; line-height: 1.1; }
.sintesi-etichetta { color: var(--c-testo-tenue); font-size: 12px; margin-top: 2px; }
.sintesi-scheda.attenzione { border-left: 3px solid var(--c-avviso); }
.sintesi-scheda.attenzione .sintesi-numero { color: var(--c-avviso); }

/* ── Tabelle ─────────────────────────────────────────────────────────────── */
.tabella-console { width: 100%; margin: 0; font-size: 13.5px; }
.tabella-console thead th {
    background: #f7f8fa;
    border-bottom: 1px solid var(--c-bordo) !important;
    border-top: none !important;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-testo-tenue);
    font-weight: 700;
    padding: 9px 12px;
    white-space: nowrap;
}
.tabella-console tbody td { padding: 8px 12px; vertical-align: middle; border-top: 1px solid #edeff3; }
.tabella-console tbody tr:hover { background: #fafbfc; }
.tabella-console .codice { font-family: 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; color: var(--c-testo-tenue); }

/* stato di pubblicazione del livello cartografico */
.pastiglia { display: inline-block; padding: 2px 8px; border-radius: 11px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pastiglia-ok { background: var(--c-accento-tenue); color: var(--c-accento-scuro); }
.pastiglia-attesa { background: var(--c-avviso-tenue); color: var(--c-avviso); }
.pastiglia-spento { background: #eef0f4; color: var(--c-testo-tenue); }

/* ── Messaggi ────────────────────────────────────────────────────────────── */
.messaggio { border-radius: var(--c-raggio); padding: 9px 13px; margin-bottom: 12px; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; }
.messaggio i { margin-top: 2px; }
.messaggio-ok { background: var(--c-accento-tenue); color: var(--c-accento-scuro); border: 1px solid #bfe4d4; }
.messaggio-attenzione { background: var(--c-avviso-tenue); color: var(--c-avviso); border: 1px solid #f0dcb8; }
.messaggio-errore { background: var(--c-errore-tenue); color: var(--c-errore); border: 1px solid #f3c9c5; }

/* ── Moduli ──────────────────────────────────────────────────────────────── */
.form-control, .custom-select { font-size: 13.5px; border-color: var(--c-bordo); }
.form-control:focus { border-color: var(--c-accento); box-shadow: 0 0 0 .2rem rgba(10, 138, 94, .15); }
/* Etichette in maiuscoletto: occupano meno, e si distinguono dal valore
   scritto sotto senza bisogno di spazio fra le due cose. */
label { font-size: 11px; font-weight: 700; color: var(--c-testo-tenue); margin-bottom: 1px;
        text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; }
label.custom-control-label, .form-inline label, .custom-checkbox label {
    text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600;
}
.btn-console { background: var(--c-accento); border-color: var(--c-accento); color: #fff; font-weight: 600; font-size: 13.5px; }
.btn-console:hover, .btn-console:focus { background: var(--c-accento-scuro); border-color: var(--c-accento-scuro); color: #fff; }
.btn-console-chiaro { background: #fff; border-color: var(--c-bordo); color: var(--c-testo); font-weight: 600; font-size: 13.5px; }
.btn-console-chiaro:hover { background: #f4f5f8; color: var(--c-testo); }

/* ── Pagina di accesso ───────────────────────────────────────────────────── */
.accesso-sfondo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, #1a1d23 0%, #23303a 55%, #14372b 100%);
    padding: 24px;
}
.accesso-riquadro {
    width: 100%;
    max-width: 410px;
    background: var(--c-superficie);
    border-radius: 11px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, .34);
    overflow: hidden;
}
.accesso-testa { padding: 26px 30px 20px; border-bottom: 1px solid var(--c-bordo); }
.accesso-testa h1 { font-size: 18px; font-weight: 700; margin: 0 0 3px; }
.accesso-testa p { margin: 0; color: var(--c-testo-tenue); font-size: 13px; }
.accesso-corpo { padding: 24px 30px 28px; }
.accesso-pie { padding: 14px 30px; background: #f7f8fa; border-top: 1px solid var(--c-bordo); font-size: 12px; color: var(--c-testo-tenue); text-align: center; }

/* casella del codice a sei cifre della pagina di accesso.
   Il nome era .campo-codice e finiva addosso al campo Codice delle schede
   delle tavole, che si ritrovava in caratteri enormi e spaziati: due pagine
   diverse non devono contendersi un nome cosi' generico. */
.campo-codice-accesso {
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: 27px;
    letter-spacing: .34em;
    text-align: center;
    padding: 11px 8px;
    text-indent: .34em; /* compensa la spaziatura dell'ultima cifra */
}

@media (max-width: 640px) {
    .console-corpo { padding: 16px 12px 44px; }
    .console-barra { padding: 0 12px; }
    .console-nav { padding: 0 6px; }
}

/* ── Messaggio delle operazioni ─────────────────────────────────────────────
   Le pagine non ricaricano piu': l'esito di un salvataggio va detto qui,
   altrimenti l'operatore non ha modo di sapere se e' andato a buon fine. */
.console-messaggio {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(14px);
    z-index: 1080; max-width: 640px;
    background: rgba(26,29,35,.94); color: #fff;
    font-size: 13px; padding: 9px 16px; border-radius: 6px;
    box-shadow: 0 6px 24px rgba(16,20,28,.28);
    opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.console-messaggio.visibile { opacity: 1; transform: translateX(-50%) translateY(0); }
.console-messaggio.ok { background: rgba(10,138,94,.96); }
.console-messaggio.errore { background: rgba(179,38,30,.96); }

/* Riga di una tabella mentre si attende la risposta del server. */
.in-corso { opacity: .45; pointer-events: none; }

/* ── Gruppi di legenda nella pagina dei livelli ────────────────────────────── */
.cella-gruppo {
    background: #f4f6f8; font-weight: 700; font-size: 12.5px;
    text-transform: uppercase; letter-spacing: .04em; color: var(--c-testo-tenue);
}
.cella-gruppo .conta-gruppo {
    text-transform: none; letter-spacing: 0; font-weight: 400;
    margin-left: 10px; font-size: 11.5px; color: var(--c-testo-tenue);
}
.cella-gruppo .btn-elimina-gruppo { float: right; margin-top: -3px; }

/* la riga per aggiungere un livello sta dentro il gruppo a cui si riferisce */
.riga-aggiungi > td { background: #fcfdfe; border-top: 1px dashed var(--c-bordo); padding: 9px 12px; }

/* ── Elenchi: una voce, una riga ───────────────────────────────────────────
   Prima il nome stava sopra e il codice sotto, e ogni voce occupava due o tre
   righe: scorrendo cento livelli si perdeva il filo. Adesso ogni colonna dice
   una cosa sola e la riga non va mai a capo; se le colonne non ci stanno, e'
   la tabella a scorrere in orizzontale, non il testo ad accartocciarsi. */
.tabella-console td, .tabella-console th { white-space: nowrap; }
/* Righe basse: su un catalogo di duecento temi ogni pixel per riga sono due
   schermate di scorrimento in piu'. Ventisette pixel restano cliccabili e
   leggibili, e ci stanno venti righe per schermata invece di quindici. */
.tabella-console thead th { padding: 6px 9px; }
.tabella-console tbody td { padding: 3px 9px; }
.tabella-console .form-control-sm,
.tabella-console .custom-select-sm { height: 27px; padding: 2px 7px; font-size: 12.5px; }
.tabella-console .btn-sm { padding: 2px 8px; line-height: 1.4; font-size: 12.5px; }
.tabella-console .input-group-sm > .input-group-append > .btn { height: 27px; }
.tabella-console .codice { white-space: nowrap; }

/* colonna della posizione: numero e frecce, strette */
.col-ordine { width: 92px; }
.ordine-numero { font-family: 'Cascadia Mono', Consolas, monospace; font-size: 11.5px;
                 color: var(--c-testo-tenue); min-width: 22px; display: inline-block; text-align: right; }
.btn-ordine { border: none; background: transparent; color: #8b93a3; cursor: pointer;
              padding: 0 3px; font-size: 11px; line-height: 1; }
.btn-ordine:hover { color: var(--c-accento); }
.btn-ordine:disabled { opacity: .25; cursor: default; }
.btn-ordine:disabled:hover { color: #8b93a3; }

/* ── Valore scritto e suggerimento ─────────────────────────────────────────
   Il colore da solo non bastava: una casella con il suggerimento sembrava una
   casella gia' compilata, e chi andava a scrivere si trovava a correggere
   qualcosa che non c'era. Adesso la differenza e' di peso, non di sfumatura:
   quello che e' stato scritto e' in grassetto e scuro, il suggerimento resta
   leggero, chiaro e in corsivo. Si distinguono anche di sfuggita.

   Il peso va ridichiarato sul suggerimento: lo eredita dalla casella, e
   altrimenti verrebbe in grassetto anche lui, annullando tutto. */
.form-control, .custom-select, textarea.form-control {
    font-weight: 600;
    color: var(--c-testo);
}
.form-control:focus { color: var(--c-testo); }
/* i campi in sola lettura non sono un valore inserito: restano leggeri */
.form-control[readonly], .form-control:disabled { font-weight: 400; color: var(--c-testo-tenue); }

/* La classe va ripetuta nel selettore: Bootstrap dichiara
   .form-control::placeholder, e un ::placeholder nudo perderebbe il confronto
   lasciando il suggerimento del grigio scuro di Bootstrap. */
::-webkit-input-placeholder, .form-control::-webkit-input-placeholder, .custom-select::-webkit-input-placeholder
    { color: #b9bfca; font-style: italic; font-weight: 400; font-size: .94em; opacity: 1; }
::-moz-placeholder, .form-control::-moz-placeholder, .custom-select::-moz-placeholder
    { color: #b9bfca; font-style: italic; font-weight: 400; font-size: .94em; opacity: 1; }
:-ms-input-placeholder, .form-control:-ms-input-placeholder, .custom-select:-ms-input-placeholder
    { color: #b9bfca; font-style: italic; font-weight: 400; font-size: .94em; }
::placeholder, .form-control::placeholder, .custom-select::placeholder
    { color: #b9bfca; font-style: italic; font-weight: 400; font-size: .94em; opacity: 1; }

/* ── Testo di servizio ─────────────────────────────────────────────────────
   La classe era gia' usata nel markup ma non l'aveva mai definita nessuno:
   le spiegazioni uscivano con lo stesso peso dei dati, e occupavano il
   doppio dello spazio che meritano. */
.aiuto { font-size: 12.5px; color: var(--c-testo-tenue); line-height: 1.5; }
.aiuto p { margin-bottom: 7px; }
.aiuto p:last-child { margin-bottom: 0; }
.aiuto ul { margin-bottom: 0; padding-left: 18px; }
.aiuto code { font-size: 12px; }

/* ── Spiegazioni richiudibili ──────────────────────────────────────────────
   Una nota che spiega come funziona una pagina serve la prima volta e da'
   fastidio la centesima. Sta chiusa, e chi ha bisogno la apre: cosi' resta
   scritta senza costare mezza schermata a ogni visita.
   Lo fa <details> da solo, senza una riga di script. */
details.pieghevole {
    background: var(--c-superficie);
    border: 1px solid var(--c-bordo);
    border-radius: var(--c-raggio);
    box-shadow: var(--c-ombra);
    margin-bottom: 12px;
}
details.pieghevole > summary {
    padding: 8px 14px;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    list-style: none;
    color: var(--c-testo);
}
details.pieghevole > summary::-webkit-details-marker { display: none; }
details.pieghevole > summary i { color: var(--c-accento); }
details.pieghevole > summary:hover { background: #f7f8fa; }
details.pieghevole > summary::after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: auto;
    font-size: 10px;
    color: var(--c-testo-tenue);
}
details.pieghevole[open] > summary::after { content: '\f077'; }
details.pieghevole[open] > summary { border-bottom: 1px solid var(--c-bordo); }
details.pieghevole > .pieghevole-corpo { padding: 11px 14px 13px; }

/* ── Elenco delle schede delle tavole ──────────────────────────────────────
   Sei schede aperte tutte insieme facevano sei schermate di modulo. Adesso
   ogni tavola e' una riga che dice l'essenziale, e si apre solo quella su cui
   si sta lavorando. Intestazione e righe condividono la stessa griglia, cosi'
   le colonne restano incolonnate come in una tabella. */
.elenco-schede {
    background: var(--c-superficie);
    border: 1px solid var(--c-bordo);
    border-radius: var(--c-raggio);
    box-shadow: var(--c-ombra);
    overflow: hidden;
}
.scheda-griglia {
    display: grid;
    grid-template-columns: 18px minmax(150px, 1.1fr) 78px minmax(210px, 2.1fr) 76px minmax(130px, 1fr) 96px;
    gap: 11px;
    align-items: center;
}
.scheda-intestazione {
    background: #f7f8fa;
    border-bottom: 1px solid var(--c-bordo);
    padding: 7px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-testo-tenue);
    font-weight: 700;
}
.scheda-tavola { border-bottom: 1px solid #edeff3; }
.scheda-tavola:last-child { border-bottom: none; }
.scheda-tavola > summary {
    padding: 7px 14px;
    cursor: pointer;
    list-style: none;
    font-size: 13.5px;
}
.scheda-tavola > summary::-webkit-details-marker { display: none; }
.scheda-tavola > summary:hover { background: #fafbfc; }
.scheda-tavola[open] > summary { background: var(--c-accento-tenue); }
.scheda-tavola > summary i { color: var(--c-accento); }
/* ogni cella dice una cosa sola e non va a capo: la riga resta alta una riga */
.scheda-tavola > summary > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scheda-tavola .s-titolo { font-weight: 600; }
.scheda-tavola .s-vuoto { color: #b3b9c4; font-style: italic; }
.scheda-corpo { padding: 12px 14px 14px; background: #fbfcfd; border-top: 1px solid var(--c-bordo); }
.scheda-corpo label { margin-bottom: 1px; }
.scheda-corpo .form-row > [class*='col-'] { margin-bottom: 7px; }
.scheda-corpo textarea { resize: vertical; }

/* ── Gestore degli allegati ────────────────────────────────────────────────
   Dentro la finestra l'elenco ha un tetto, altrimenti la finestra crescerebbe
   oltre lo schermo. Nella pagina degli allegati no: li' la pagina e' tutta
   sua, e vedere cento file di fila e' proprio il motivo per cui ci si va. */
.elenco-allegati { max-height: 380px; }
.allegati-in-pagina .elenco-allegati { max-height: none; }
.allegati-in-pagina .riquadro-testa #notaFinestra { font-weight: 400; }

/* ── Barra del titolo delle finestre ───────────────────────────────────────
   Ricalca quella della finestra di interrogazione del visualizzatore: fondo
   appena piu' scuro del corpo, titolo piccolo in maiuscoletto verde con la
   sua icona, chiusura come un pulsante quadrato della barra strumenti.
   Le finestre si incontrano in tutte e due le aree del portale, e leggersi
   allo stesso modo vale piu' di qualunque variazione. */
.modal-header {
    background: #e8eaed;
    border-bottom: 1px solid var(--c-bordo);
    padding: 6px 10px;
    align-items: center;
    cursor: move;              /* la barra e' la presa: il cursore lo dice */
    border-radius: calc(var(--c-raggio) - 1px) calc(var(--c-raggio) - 1px) 0 0;
}
.modal-content { border-color: var(--c-bordo); border-radius: var(--c-raggio); }

.modal-header .modal-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--c-accento);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    white-space: nowrap;
}
/* l icona sta gia' distanziata dal gap: il margine del markup la sdoppierebbe */
.modal-header .modal-title i { font-size: 11px; margin-right: 0 !important; }

.modal-header .close {
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--c-testo-tenue);
    opacity: 1;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    text-shadow: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.modal-header .close:hover, .modal-header .close:focus {
    background: #dde0e8;
    color: var(--c-testo);
    opacity: 1;
}

/* ── Doppia casella di scelta ──────────────────────────────────────────────
   Disponibili a sinistra, accesi a destra, i comandi in mezzo e l ordine in
   coda. A colonne invece che in righe impilate: la finestra era diventata
   piu' alta dello schermo. */
.doppia-casella {
    display: grid;
    grid-template-columns: 1fr 34px 1fr 34px;
    gap: 8px;
    align-items: end;
}
.doppia-casella select { width: 100%; }
.doppia-casella-comandi { display: flex; flex-direction: column; gap: 4px; padding-bottom: 2px; }
.doppia-casella-comandi .btn { padding: 2px 0; }
@media (max-width: 640px) {
    .doppia-casella { grid-template-columns: 1fr; }
    .doppia-casella-comandi { flex-direction: row; justify-content: center; }
}

/* ── Coda dei civici da posizionare ────────────────────────────────────────
   Un elenco caricato dall'anagrafe si smaltisce a colpi di clic: in cima c'e'
   il prossimo, evidenziato, perche' e' l'unico che conta guardare. */
.coda-civici { max-height: 190px; overflow-y: auto; border: 1px solid var(--c-bordo); border-radius: 4px; }
.voce-coda { padding: 3px 8px; font-size: 12.5px; border-bottom: 1px solid #edeff3; }
.voce-coda:last-child { border-bottom: none; }
.voce-coda.prossimo { background: var(--c-accento-tenue); color: var(--c-accento-scuro); font-weight: 700; }