/*
 * Modale «Importa strato da file» nel nuovo stile (DGWGEOWORK-9784, epic DGWGEOWORK-9764).
 *
 * Veste sourceUpload.html con lo stesso linguaggio della nuova cornice di mappa e delle modali
 * Strada (modalForm.css, DGWGEOWORK-9772). Cambia l'ASPETTO, non la struttura: le sei scelte di
 * formato restano sei scelte (una per formato, nell'ordine di ADR-057) e la coda resta la tabella
 * di prima. Diventano una griglia ordinata di riquadri — nome del formato ed estensioni, una volta
 * sola ciascuno — invece di sei pulsanti blu col selettore di file del sistema operativo dentro.
 *
 * UN SOLO TEMPLATE, DUE PELLI (ADR-053). Il markup e' lo stesso con il flag acceso e spento: il
 * controller scrive la classe radice `gw-import` sul corpo della modale solo quando
 * PRJ.MAP.RenderNewMapStyle e' acceso, e OGNI regola che cambia l'aspetto sta sotto quel prefisso.
 * Fuori dal prefisso ci sono solo i "default legacy": tolgono dal disegno cio' che esiste per la
 * pelle nuova (nome corto, estensioni, icona, stato «in caricamento») e lasciano ai soli strumenti
 * assistivi titoli e testi di stato — cioe' non cambiano un pixel rispetto a prima.
 *
 * PROPRIETA' CHE QUESTO FOGLIO RIDEFINISCE (trappola T3 di frontend-accessibility.md §5b): solo
 * dentro `.gw-import` e solo su elementi di questa modale — `display`, `position`, `border`,
 * `border-radius`, `background`, `padding`, `margin`, `float`, `width`, `height`, `min-width`,
 * `max-width`, `box-shadow`, `outline` (anello di focus dei campi file), `container-type` (sul solo
 * fieldset dei formati), `fill` (l'icona del file), `white-space` e `line-height` (le celle della
 * coda) e la variabile `--btn-warning-color` (vedi i pulsanti della coda). Fuori dal corpo tocca SOLO
 * la finestra che contiene l'import (`#modal-content:has(.gw-import)`): bordo in testa, riga sotto il
 * titolo, riga (un'ombra interna) e fondo del piede. Non tocca `z-index`, non tocca l'altezza dei
 * `.form-group` di Metronic e non esce dal sottoalbero della modale: fuori dal prefisso agisce solo
 * su classi `gw-import-*` che nascono qui.
 *
 * Sta in Common/Styles perche' e' la cartella pescata da tutti e tre i bundle CSS (vedi
 * focusVisible.css) e arriva PRIMA di bootstrap/metronic/big.css: nessuna regola conta
 * sull'ordine, ognuna batte quelle delle librerie per specificita'.
 *
 * Dove si disegna la finestra (sopra la mappa invece che sopra la pagina) non e' affare di questo
 * foglio: e' di gwInMapDialog e di inMapDialog.css (ADR-f38332).
 *
 * I token --gw-* sono locali a questo foglio con gli stessi valori di modalForm.css; il
 * consolidamento e' della fondazione della cornice (DGWGEOWORK-9765).
 */

/* ------------------------------------------------------------------------------------------ */
/* Default legacy: valgono sempre, riproducono l'aspetto precedente                             */
/* ------------------------------------------------------------------------------------------ */

/*
 * Titoli di sezione (<legend>, <caption>), testo dello stato e messaggio live: nel DOM sempre,
 * perche' senza di loro la schermata e' muta per chi usa uno screen reader, ma con il vecchio
 * stile non devono occupare spazio ne' cambiare il disegno della tabella.
 */
.gw-import-caption,
.gw-import-status-text,
.gw-import-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * Era <span class="file-input btn btn-primary btn-file">: la <label> serve a dare un nome accessibile
 * al campo file, e qui riprende le metriche che .btn dava allo <span>.
 *
 * Le classi `btn btn-primary btn-file` restano sull'elemento SOLO con il vecchio stile (ng-class nel
 * template). Non e' un vezzo: `big.css` colora `.btn-primary:not(.red, .green)` con
 * `background-color: var(--action-button-color) !important`, e nessuna specificita' batte un
 * !important. Togliere la classe e' l'unico modo di vestire il riquadro senza aprire una gara di
 * !important con il foglio che porta il colore dell'ente.
 */
label.gw-import-card {
    margin-bottom: 0;
    font-weight: normal;
}

/*
 * Cio' che esiste solo per la pelle nuova. display:none e non sr-only: il nome del formato e le
 * estensioni NON devono entrare nel nome accessibile del campo nella pelle vecchia, dove il nome e'
 * gia' l'etichetta lunga che si vede («Carica file GeoJSON (.geojson)»).
 */
.gw-import-glyph,
.gw-import-card-text,
.gw-import-status--busy {
    display: none;
}

/* <fieldset> neutro: con il vecchio stile la riga dei formati resta quella di prima. */
.gw-import-formats {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/*
 * La riga dei problemi. A flag spento i problemi vanno nei popup di prima e questa resta vuota —
 * un contenitore vuoto e senza padding non occupa niente. Se mai si accendesse, prende l'aspetto
 * di un .alert-danger, che e' la cosa piu' vicina che la pelle vecchia conosca.
 */
.gw-import-problem--on {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #ebccd1;
    border-radius: 4px;
    background: #f2dede;
    color: #a94442;
}

.gw-import-problem-text {
    white-space: pre-line;   /* i messaggi dello shapefile sono elenchi a righe */
}

.gw-import-problem-close {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 18px;
    line-height: 1;
}

/* ------------------------------------------------------------------------------------------ */
/* Nuovo stile                                                                                  */
/* ------------------------------------------------------------------------------------------ */

/*
 * I COLORI DEL PORTALE. Il colore dell'installazione e' `--action-button-color`: big.css lo definisce
 * (blu #0166CC di serie) e il CSS personalizzato dell'ente lo ridefinisce (Stoccarda ambra, Monaco
 * blu, VTrans verde). Tutta la modale ne deriva: bordo in testa alla finestra, riquadri, tabella,
 * piede — e cosi' su ogni installazione prende da sola i suoi colori.
 *
 * Le TINTE si calcolano dal colore stesso con color-mix, NON da `--action-button-color-rgb`: i CSS
 * dei clienti ridefiniscono solo `--action-button-color` (Stuttgart.css, Munich.css, VTrans.css), e
 * una tinta fatta con la terna RGB restava blu anche sul portale ambra. La terna resta il ripiego
 * per i browser senza color-mix, dove almeno la tinta di serie e' giusta.
 *
 * L'accento colora bordi, icone e fondi; il TESTO resta l'inchiostro scuro. Su un accento chiaro
 * (ambra) un testo in accento non reggerebbe il 4,5:1: con l'inchiostro regge su ogni portale.
 *
 * I gettoni stanno anche sulla finestra che contiene l'import (#modal-content:has(.gw-import)),
 * perche' intestazione e piede sono fratelli del corpo, non figli, e non li erediterebbero.
 */
.gw-import {
    --gw-accent: var(--action-button-color, #0166cc);
    --gw-accent-05: rgba(var(--action-button-color-rgb, 1, 102, 204), .05);
    --gw-accent-08: rgba(var(--action-button-color-rgb, 1, 102, 204), .08);
    --gw-accent-12: rgba(var(--action-button-color-rgb, 1, 102, 204), .12);
    --gw-accent-30: rgba(var(--action-button-color-rgb, 1, 102, 204), .30);
    --gw-ink: #17232e;
    --gw-muted: #5d6e7d;
    --gw-icon: #7b8b99;
    --gw-line: #e3e9ef;
    --gw-line-strong: #c5cfd9;
    --gw-surface: #fff;
    --gw-surface-2: #f4f7fa;
    --gw-radius: 10px;
    --gw-radius-sm: 8px;
    --gw-error: #c62828;
    --gw-ok: #1b7f4b;
    --gw-warn: #8a5300;
    /*
     * big.css scrive `.btn-warning { color: var(--btn-warning-color) !important }`. Sul pulsante
     * «Annulla» della coda, che qui e' chiaro, quel colore sarebbe illeggibile; invece di una gara di
     * !important si ridefinisce la variabile che il foglio stesso legge, e solo qui dentro.
     */
    --btn-warning-color: var(--gw-ink);
    font-family: "Open Sans", "Segoe UI", system-ui, sans-serif;
    color: var(--gw-ink);
    padding: 20px 24px;
    background: var(--gw-surface);
}

/* Regola a parte, non nella lista qui sopra: un browser che non conosce :has() scarterebbe l'intera
   lista, e con lei i gettoni del corpo. */
#modal-content:has(.gw-import) {
    --gw-accent: var(--action-button-color, #0166cc);
    --gw-accent-05: rgba(var(--action-button-color-rgb, 1, 102, 204), .05);
    --gw-accent-30: rgba(var(--action-button-color-rgb, 1, 102, 204), .30);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .gw-import {
        --gw-accent-05: color-mix(in srgb, var(--gw-accent) 5%, transparent);
        --gw-accent-08: color-mix(in srgb, var(--gw-accent) 8%, transparent);
        --gw-accent-12: color-mix(in srgb, var(--gw-accent) 12%, transparent);
        --gw-accent-30: color-mix(in srgb, var(--gw-accent) 30%, transparent);
    }
}

@supports (color: color-mix(in srgb, red 50%, transparent)) and selector(:has(a)) {
    #modal-content:has(.gw-import) {
        --gw-accent-05: color-mix(in srgb, var(--gw-accent) 5%, transparent);
        --gw-accent-30: color-mix(in srgb, var(--gw-accent) 30%, transparent);
    }
}

/*
 * La finestra: il colore del portale sul bordo in testa, e sotto il titolo e sopra il piede una
 * riga nella sua tinta invece del grigio. Intestazione e piede sono componenti condivisi da tutte le
 * modali (modal-header, .modal-footer): li si tocca SOLO quando dentro c'e' l'import (:has), e senza
 * :has() semplicemente non cambiano.
 *
 * Due avversari, misurati nell'applicazione (il banco senza mappa non li vedeva):
 * - il BORDO IN TESTA lo azzera `#modal.gw-modal--in-map .modal-content { border: 0 }`
 *   (inMapDialog.css), specificita' 1-2-0 contro 1-1-0 di `#modal-content:has(...)`: da qui il
 *   `#modal` davanti, 2-1-0. Vince per specificita', non per ordine dei fogli nel bundle.
 * - la RIGA DEL PIEDE la toglie Metronic con `.modal .modal-footer { border: 0 !important }`
 *   (plugins-md.css). Invece di un !important contro un !important, la riga e' un'ombra interna di
 *   1px: stesso disegno, su una proprieta' che nessuno contende.
 */
#modal #modal-content:has(.gw-import) {
    border-top: 4px solid var(--gw-accent);
}

#modal-content:has(.gw-import) .modal-header {
    border-bottom: 1px solid var(--gw-accent-30);
}

#modal-content:has(.gw-import) .modal-header .modal-title {
    color: #17232e;
    font-weight: 600;
}

#modal-content:has(.gw-import) .modal-footer {
    box-shadow: inset 0 1px 0 var(--gw-accent-30);
    background: var(--gw-accent-05);
}

/* Il .container-fluid di Bootstrap aggiungerebbe i suoi 15px ai 24 della modale. */
.gw-import .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/*
 * La nota in testa («Importazione dati layer - seleziona file») ripete il titolo della sezione che
 * sta subito sotto: nella pelle nuova la dice il titolo, una volta sola.
 */
.gw-import .gw-import-intro {
    display: none;
}

/* ---- Titoli di sezione -------------------------------------------------------------------- */

.gw-import .gw-import-caption {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    color: var(--gw-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-style: normal;   /* il <caption> della tabella lo eredita corsivo dal tema */
    text-align: left;
}

/* Un segno nel colore del portale davanti al titolo: il testo resta scuro, il colore sta nel segno. */
.gw-import .gw-import-caption::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 12px;
    margin-right: 8px;
    border-radius: 2px;
    background: var(--gw-accent);
    vertical-align: -1px;
}

/* ---- Scelta del formato ------------------------------------------------------------------- */

/* I due pseudo-elementi con cui Bootstrap fa il clearfix di `.row` diventerebbero celle della
   griglia: una colonna vuota in testa e una in coda. */
.gw-import .gw-import-formats .row::before,
.gw-import .gw-import-formats .row::after {
    display: none;
}

/*
 * La riga Bootstrap diventa una griglia, e le colonne le decide il numero di formati accesi
 * (vm.formatColumns -> gw-import-cols-N), non la larghezza: righe sempre piene, niente riquadro
 * orfano come nella griglia 4+2 di prima. Sei formati: tre per riga. Quattro: due per riga.
 *
 * Il fieldset e' un contenitore di query: se la finestra e' stretta (una mappa stretta, un
 * telefono) i riquadri scendono a due per riga e poi a uno, guardando la larghezza della finestra
 * e non quella della pagina — dentro la mappa le due non coincidono.
 */
.gw-import .gw-import-formats {
    container-type: inline-size;
}

.gw-import .gw-import-formats .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 20px;
}

.gw-import .gw-import-formats .gw-import-cols-1 { grid-template-columns: minmax(0, 1fr); }
.gw-import .gw-import-formats .gw-import-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gw-import .gw-import-formats .gw-import-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@container (max-width: 460px) {
    .gw-import .gw-import-formats .row.gw-import-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (max-width: 300px) {
    .gw-import .gw-import-formats .row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gw-import .gw-import-cell {
    float: none;
    width: auto;
    padding: 0;
}

/* height: 100% — i riquadri di una riga sono alti uguali anche quando le estensioni del CSV vanno a capo. */
.gw-import label.gw-import-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 64px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--gw-accent-30);
    border-radius: var(--gw-radius);
    background: var(--gw-surface);
    box-shadow: none;
    color: var(--gw-ink);
    font-size: 13px;
    font-weight: normal;
    line-height: 1.35;
    text-align: left;
    text-transform: none;
    white-space: normal;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.gw-import label.gw-import-card:hover {
    border-color: var(--gw-accent);
    background: var(--gw-accent-05);
    color: var(--gw-ink);
}

/*
 * Il campo file resta focalizzabile (copre il riquadro, opacita' zero): la tastiera lo raggiunge come
 * prima. L'anello di focus lo disegna il riquadro, altrimenti non si vedrebbe nulla.
 */
.gw-import label.gw-import-card:focus-within {
    border-color: var(--gw-accent);
    outline: 2px solid var(--gw-accent);
    outline-offset: 2px;
}

/* Il formato di cui c'e' gia' un file in coda: bordo pieno del colore del portale. */
.gw-import label.gw-import-card--active {
    border-color: var(--gw-accent);
    box-shadow: inset 0 0 0 1px var(--gw-accent);
    background: var(--gw-accent-08);
}

/* Nella pelle nuova il nome e' quello corto piu' le estensioni: l'etichetta lunga esce dal disegno
   E dal nome accessibile (display:none), altrimenti la si sentirebbe due volte. */
.gw-import .gw-import-card-legacy {
    display: none;
}

.gw-import .gw-import-glyph {
    display: block;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    color: var(--gw-accent);
    transition: color .12s ease;
}

.gw-import .gw-import-glyph path:first-child {
    fill: var(--gw-accent-12);
}

.gw-import label.gw-import-card:hover .gw-import-glyph,
.gw-import label.gw-import-card:focus-within .gw-import-glyph,
.gw-import label.gw-import-card--active .gw-import-glyph {
    color: var(--gw-accent);
}

.gw-import .gw-import-card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gw-import .gw-import-card-name {
    color: var(--gw-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.gw-import .gw-import-card-ext {
    margin-top: 2px;
    color: var(--gw-muted);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.gw-import input.gw-import-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    cursor: pointer;
}

/* ---- Problemi dentro la finestra ---------------------------------------------------------- */

.gw-import .gw-import-problem {
    margin: 0;
}

.gw-import .gw-import-problem--on {
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #efc4c4;
    border-left: 4px solid var(--gw-error);
    border-radius: var(--gw-radius-sm);
    background: #fdf3f3;
    color: var(--gw-ink);
    font-size: 13px;
    line-height: 1.45;
}

.gw-import .gw-import-problem--warn {
    border-color: #f0dcb4;
    border-left-color: var(--gw-warn);
    background: #fff8ec;
}

.gw-import .gw-import-problem-icon {
    margin-top: 2px;
    color: var(--gw-error);
}

.gw-import .gw-import-problem--warn .gw-import-problem-icon {
    color: var(--gw-warn);
}

.gw-import .gw-import-problem-title {
    display: block;
    margin-bottom: 2px;
}

.gw-import .gw-import-problem-close {
    width: 28px;
    height: 28px;
    margin: -4px -6px 0 auto;
    border-radius: var(--gw-radius-sm);
    color: var(--gw-muted);
}

.gw-import .gw-import-problem-close:hover {
    background: rgba(23, 35, 46, .06);
    color: var(--gw-ink);
}

/* ---- Coda ---------------------------------------------------------------------------------- */

.gw-import .gw-import-queue {
    margin: 0 0 4px;
}

/*
 * Niente `overflow: hidden` sulla tabella: il <caption> sta DENTRO il riquadro della tabella, e
 * l'angolo arrotondato gli tagliava la prima lettera («ƑILE SELEZIONATO»). Si arrotondano le celle
 * d'angolo dell'intestazione, che sono le sole ad avere uno sfondo.
 */
.gw-import .gw-import-table {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid var(--gw-accent-30);
    border-radius: var(--gw-radius);
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.gw-import .gw-import-table > thead > tr > th {
    padding: 9px 14px;
    border-bottom: 1px solid var(--gw-accent-30);
    background: var(--gw-accent-08);
    color: var(--gw-ink);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
}

.gw-import .gw-import-table > thead > tr > th:first-child {
    border-top-left-radius: calc(var(--gw-radius) - 1px);
}

.gw-import .gw-import-table > thead > tr > th:last-child {
    border-top-right-radius: calc(var(--gw-radius) - 1px);
}

.gw-import .gw-import-table > tbody > tr > td {
    padding: 12px 14px;
    border-top: 0;
    vertical-align: middle;
}

.gw-import .gw-import-table > tbody + tbody {
    border-top: 0;
}

/*
 * Il markup della coda ha `nowrap` sulle celle (serve alla pelle vecchia). Nella nuova, con lo stato
 * «Caricamento in corso · 45%» e i due pulsanti Annulla/Rimuovi, la riga non ci stava piu' in una
 * finestra stretta e la tabella usciva dalla finestra a destra: qui stato e pulsanti vanno a capo.
 */
.gw-import .gw-import-table > tbody > tr > td[nowrap] {
    white-space: normal;
}

.gw-import .gw-import-table > tbody > tr > td:last-child {
    line-height: 2.2;   /* se i due pulsanti vanno a capo, non si toccano */
}

/*
 * La colonna dell'avanzamento si toglie: una barra piena che resta a caricamento finito e' rumore.
 * Mentre carica, lo stato dice «Caricamento in corso · 45%» (gw-import-status--busy, che esiste solo
 * nella pelle nuova), e a caricamento finito dice «Caricato».
 */
.gw-import .gw-import-col-progress {
    display: none;
}

/* Stato: icona E testo, mai la sola icona. Va a capo se la finestra e' stretta (vedi sopra). */
.gw-import .gw-import-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: normal;
    font-size: 12px;
    font-weight: 600;
}

.gw-import .gw-import-status-text {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}

.gw-import .gw-import-status--busy {
    color: var(--gw-muted);
}

.gw-import .gw-import-status--busy .glyphicon {
    animation: gw-import-spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .gw-import .gw-import-status--busy .glyphicon {
        animation: none;
    }
}

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

.gw-import .gw-import-status--ok {
    color: var(--gw-ok);
}

.gw-import .gw-import-status--error {
    color: var(--gw-error);
}

/*
 * I pulsanti della coda diventano sobri. «Rimuovi» non e' rosso: togliere il file appena scelto
 * non e' un'azione distruttiva, e il rosso di serie portava il bianco a 3,01:1 (soglia AA 4,5:1).
 */
.gw-import .gw-import-table .btn-xs,
.gw-import .gw-import-table .btn-danger,
.gw-import .gw-import-table .btn-warning {
    border: 1px solid var(--gw-line-strong);
    border-radius: var(--gw-radius-sm);
    padding: 5px 10px;
    background: var(--gw-surface);
    box-shadow: none;
    color: var(--gw-ink);
    font-size: 12px;
    font-weight: 600;
}

.gw-import .gw-import-table .btn-xs:hover,
.gw-import .gw-import-table .btn-xs:focus {
    border-color: var(--gw-accent);
    background: var(--gw-accent-08);
    color: var(--gw-ink);
}