/*
 * Area staff WebForms — il ponte fra il kit delle demo e il motore.
 *
 * Il vestito e' quello del kit delle demo DOWEB (kit/colors.css + kit/demo-kit.css, copiati
 * tali e quali da Z:\Melo\Piani\Prodotti\_demo-kit\kit, versione 2.11.0): le pagine usano le
 * sue classi dk-*. Qui sta SOLO quello che il kit non ha perche' nelle demo non serve:
 * gli elementi che disegna il motore WebForms (avvisi, attesa, paginatore, modali), qualche
 * classe per i dati veri (numeri a destra, errori dei campi) e l'aggancio della testata fissa.
 *
 * Regola del kit, che vale anche qui: nessun colore scritto a mano, solo le variabili di
 * kit/colors.css, cosi' chiaro e scuro funzionano da soli.
 *
 * Piano: Z:\Melo\Piani\Aree-Riservate-Vestito-Demo-Kit.md
 */

/* ===== Il motore prende i suoi colori da qui (runtime.css, var(--dw-*)) ===== */
:root {
    --dw-fondo: var(--color-surface);
    --dw-bordo: var(--color-border);
    --dw-tenue: var(--color-text-muted);
    --dw-acc: var(--color-primary);
}

/* ===== Ossatura ===== */

/* i Button che si cliccano solo da JavaScript (il riordino: Backoffice.js manda il click a
   btnReorder con l'ordine nuovo): ci sono in pagina, ma non si vedono */
.dw-hidden {
    display: none !important;
}

/* lo UserControl del menu ha sempre un contenitore: cosi' barra a icone e menu della
   sezione restano figli diretti di .dk-body, come nel kit */
.bo-contents {
    display: contents;
}

/* il kit mette il "top" della parte fissa da JavaScript, misurando la testata */
.dk-sticky.bo-sticky {
    top: var(--header-h);
    background: var(--color-bg);
}

/* una riga di pulsanti dentro una scheda (Aggiungi domanda, link + Copia link) seguita da
   altro: il kit distanzia solo campi e griglie, e la tabella restava attaccata ai pulsanti */
.dk-card > .dk-row:not(:last-child) {
    margin-bottom: var(--space-4);
}

/* un campo da copiare col pulsante dentro, a destra (il link pubblico del questionario):
   tutto il campo e' cliccabile e copia, quindi il cursore e' la mano */
.bo-copy {
    position: relative;
}

.bo-copy:not(:last-child) {
    margin-bottom: var(--space-4);
}

.bo-copy .bo-copy__input {
    width: 100%;
    padding-right: 120px;
    cursor: pointer;
    text-overflow: ellipsis;
}

.bo-copy .bo-copy__button {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
}

/* le briciole sopra il titolo: nel kit non ci sono, la posizione la dice il menu */
.bo-crumbs {
    margin: 0 0 2px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.bo-crumbs a {
    color: var(--color-link);
    text-decoration: none;
}

.bo-crumbs a:hover {
    text-decoration: underline;
}

.bo-crumbs .bo-crumbs__sep {
    margin: 0 6px;
}

/* un pulsante con Visible=false (il Panel "Anteprima" di un questionario nuovo) si rende col
   solo attributo hidden, e il display:inline-flex del kit lo scavalcherebbe. I pulsanti della
   testata sul telefono a tutta larghezza li fa il kit dalla 2.10.0 */
.dk-btn[hidden] {
    display: none;
}

.dk-page-header h1 .dk-badge {
    margin-left: var(--space-2);
    vertical-align: middle;
}

/* ===== Filtri (dalla demo NCC, app.css: nel kit non ci sono) ===== */
.bo-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-3) var(--space-4);
}

/* un elenco seguito da un periodo (Compilazioni: questionario, dal, al): su schermo largo
   l'elenco prende il doppio, altrimenti sta da solo sulla prima riga e le due date dividono
   la seconda a meta'. La griglia automatica faceva 2 + 1 e lasciava "Al" spaiato */
.bo-filters.bo-filters--period {
    grid-template-columns: 1fr 1fr;
}

.bo-filters.bo-filters--period > :first-child {
    grid-column: 1 / -1;
}

@media (min-width: 1100px) {
    .bo-filters.bo-filters--period {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .bo-filters.bo-filters--period > :first-child {
        grid-column: auto;
    }
}

.bo-filters__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.bo-filters__count {
    margin: 0;
    font-size: 13px;
}

/* le statistiche: periodo (dal, al) e filtro per risposta (domanda, voce). Su schermo largo
   una riga sola con la domanda piu' larga; altrimenti le date dividono la prima riga e
   domanda e voce vanno a tutta larghezza, una sotto l'altra */
.bo-filters.bo-filters--stats {
    grid-template-columns: 1fr 1fr;
}

.bo-filters.bo-filters--stats > :nth-child(n+3) {
    grid-column: 1 / -1;
}

@media (min-width: 1100px) {
    .bo-filters.bo-filters--stats {
        grid-template-columns: 1fr 1fr 2fr 1.5fr;
    }

    .bo-filters.bo-filters--stats > :nth-child(n+3) {
        grid-column: auto;
    }
}

/* ===== Statistiche (SurveyStats) ===== */

/* l'icona di riga delle statistiche (barre), disegnata come quelle del kit */
.dk-row-btn--stats {
    --dk-row-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M7 16v-5M12 16V6M17 16v-8'/%3E%3C/svg%3E");
}

/* questionario e periodo per esteso: a schermo li dicono titolo e filtri, sulla carta no */
.bo-stats__print {
    display: none;
}

/* le cifre in testa: sul telefono affiancate, non una scheda alta per schermata */
@media (max-width: 560px) {
    .dk-tiles.bo-stats__tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bo-stats__tiles .dk-tile {
        padding: var(--space-3) var(--space-4);
    }

    .bo-stats__tiles .dk-tile__value {
        font-size: 24px;
    }
}

.bo-stats__filter {
    margin: 0 0 var(--space-3);
    font-size: 13.5px;
}

/* un blocco di testo del questionario: titolo di sezione fra le schede, con la sua media */
.bo-stats__section {
    margin: var(--space-6, 32px) 0 var(--space-3);
    font-size: 16px;
    font-weight: 600;
}

.bo-stats__section .dk-badge {
    margin-left: var(--space-2);
    vertical-align: middle;
}

.bo-stat__title {
    margin: 0 0 4px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
}

.bo-stat__num {
    color: var(--color-text-muted);
    font-weight: 500;
}

.bo-stat__meta {
    margin: 0 0 var(--space-3);
    font-size: 12.5px;
}

.bo-stat__meta .dk-badge {
    margin-left: var(--space-1);
}

.bo-stat__note {
    margin: var(--space-3) 0 0;
    font-size: 12.5px;
}

/* media e mediana (o media, minimo, massimo) in grande, sopra le barre */
.bo-stat__figures {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6, 32px);
    margin-bottom: var(--space-3);
}

.bo-stat__figure {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.bo-stat__figure strong {
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.bo-stat__figure span {
    font-size: 12.5px;
}

/* una barra per voce: etichetta, barra del kit (dk-progress__bar), conteggio. L'etichetta
   prende fino a un terzo della riga e va a capo; sul telefono sta sopra la barra */
.bo-bars {
    display: grid;
    gap: var(--space-2);
    max-width: 860px;
}

.bo-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 92px;
    align-items: center;
    gap: var(--space-3);
    font-size: 13.5px;
}

.bo-bars--scale .bo-bar {
    grid-template-columns: 32px minmax(0, 1fr) 92px;
}

.bo-bars--scale .bo-bar__label {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bo-bar__value {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .bo-bars:not(.bo-bars--scale) .bo-bar {
        grid-template-columns: minmax(0, 1fr) 92px;
        row-gap: 4px;
    }

    .bo-bars:not(.bo-bars--scale) .bo-bar__label {
        grid-column: 1 / -1;
    }
}

/* in stampa: niente pulsanti in testata, il periodo per esteso, le schede intere su una
   pagina e le barre con il loro colore (i browser tolgono gli sfondi, se non glielo si dice) */
@media print {
    .dk-page-header .dk-btn {
        display: none !important;
    }

    /* sulla carta la testata non c'e': titolo e filtri non devono restare "attaccati" a una
       distanza che non esiste piu', finendo sopra le prime cifre */
    .dk-sticky.bo-sticky {
        position: static;
    }

    .bo-crumbs {
        display: none !important;
    }

    .bo-stats__print {
        display: block;
        margin: 0 0 var(--space-2);
        font-weight: 600;
    }

    .bo-stat,
    .dk-tile {
        break-inside: avoid;
    }

    .bo-stats__section {
        break-after: avoid;
    }

    .dk-progress__bar,
    .dk-progress__fill {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ===== Tabelle ===== */
.dk-table .is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dk-table .is-nowrap {
    white-space: nowrap;
}

/* la maniglia del trascinamento (riordino delle domande, Backoffice.js) */
.dk-table td.drag-handle {
    width: 28px;
    color: var(--color-text-muted);
    cursor: grab;
    user-select: none;
    text-align: center;
}

.dk-table tr.js-dragging {
    opacity: .5;
}

/* l'intestazione di sezione dentro una tabella (i blocchi di testo del questionario) */
.dk-table tr.bo-section td {
    padding-top: var(--space-4);
    font-weight: 600;
}

/* in modalita' scheda (tabella stretta) la maniglia non serve: trascinare su un telefono no.
   Valori fatti di piu' pezzi e celle di testo lungo nella scheda: classi del kit 2.10.0
   (dk-cell, dk-cell--stack, dk-cell__sub) */
@container (max-width: 640px) {
    .dk-table td.drag-handle {
        display: none;
    }
}

/* ===== Paginatore (UserControlPageNavigator) ===== */
.dw-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

.dw-pg-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.dw-pg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-link);
    text-decoration: none;
}

.dw-pg:hover {
    background: var(--color-primary-soft);
}

.dw-pg.dw-pg-current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

.dw-pg-right select {
    min-height: 28px;
    padding: 0 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-input-bg);
    color: var(--color-text);
    font: inherit;
}

/* il paginatore che non serve (una pagina sola) non occupa spazio */
.dw-pager:has(.dw-pg-links[hidden]) {
    justify-content: flex-end;
}

/* ===== Campi ===== */
.dk-field__error {
    font-size: 11.5px;
    color: var(--color-danger);
}

/* il DatePicker e il TextBox ricevono le classi del kit; il RichTextBox si veste da solo,
   qui solo i bordi e il fondo per stare con gli altri campi */
.dk-field .dw-rte,
.dk-field [class*="RichTextBox"] {
    border-color: var(--color-border);
}

/* l'editor dentro la colonna del campo: dalla 2.10.0 lo fa il kit (dk-field con colonna
   minmax(0, 1fr)). Sul telefono la barra si stringe: pulsanti e icone piu' piccoli, gruppi piu' vicini, e va
   a capo. Il motore (RichTextBox.css) sotto i 640px la tiene su una riga che scorre di lato
   e col dito usa pulsanti da 40px: sull'iPhone meta' dei comandi restava fuori vista.
   Richiesta dell'utente, Eurobus 20/10/2026 */
@media (max-width: 699px) {
    .dk-field .dw-rte-barra {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .dk-field .dw-rte-b {
        min-width: 26px;
        height: 28px;
        padding: 0 3px;
    }

    .dk-field .dw-rte-i {
        width: 16px;
        height: 16px;
    }

    .dk-field .dw-rte-gruppo + .dw-rte-gruppo {
        margin-left: 2px;
        padding-left: 2px;
    }
}

/* i campi data su Safari dell'iPhone li sistema il kit dalla 2.10.0; qui solo le celle della
   griglia dei filtri (che e' del ponte), che senza min-width 0 si allargavano fuori dalla
   scheda insieme al campo "Al" */
.bo-filters > .dk-field {
    min-width: 0;
}

.dk-field input[readonly] {
    background: var(--color-surface-sunken);
}

/* la casella di spunta del motore: <label><input> testo</label> dentro .dk-choice */
.dk-choice label {
    font-weight: normal;
}

/* ===== Finestre (Panel .dk-overlay aperto e chiuso dal codebehind) ===== */

/* un Panel con Visible=false si rende col solo attributo hidden, e il display:flex del kit
   lo scavalcherebbe */
.dk-overlay[hidden] {
    display: none;
}

/* i campi messi direttamente in una finestra prendono aria tra loro, come il kit fa nelle
   schede (.dk-card > :is(...) + :is(...)): nelle demo le finestre hanno un .dk-form, qui no */
.dk-modal > :is(.dk-grid, .dk-field, .dk-choice) + :is(.dk-grid, .dk-field, .dk-choice) {
    margin-top: var(--space-4);
}

/* ===== Avvisi del motore (<dw:Alert>) col vestito dei dk-toast ===== */
.dw-avvisi {
    top: auto;
    bottom: calc(var(--bottom-nav-h) + var(--space-4));
    right: 50%;
    transform: translateX(50%);
    z-index: 60;
}

.dw-avviso {
    min-width: min(280px, calc(100vw - 32px));
    border: 0;
    border-left: 4px solid var(--color-dot-gray);
    border-radius: var(--radius);
    background: var(--color-nav-bg);
    color: var(--color-nav-text);
    box-shadow: var(--shadow-lg);
    font-size: 13.5px;
    font-weight: 500;
}

.dw-avviso-successo {
    border-left-color: var(--color-dot-green);
}

.dw-avviso-successo .dw-avviso-icona {
    color: var(--color-dot-green);
}

.dw-avviso-fallito {
    border-left-color: var(--color-dot-red);
}

.dw-avviso-fallito .dw-avviso-icona {
    color: var(--color-dot-red);
}

.dw-avviso-chiudi {
    color: var(--color-text-muted);
}

@media (min-width: 900px) {
    .dw-avvisi {
        top: calc(var(--header-h) + var(--space-4));
        right: var(--space-6);
        bottom: auto;
        transform: none;
    }
}

/* il modale degli avvisi che vogliono un OK: come .dk-modal */
.dw-modale {
    background: var(--color-overlay);
}

.dw-modale-scatola {
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
}

.dw-modale-ok {
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 500;
}

/* l'attesa: fondo come l'overlay delle finestre */
.dw-attesa {
    background: var(--color-overlay);
}

.dw-attesa-scatola {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
}

/* ------------------------------------------------------------------ guida (Manual.php) */

/* l'indice degli argomenti: i bottoni vanno a capo */
.bo-manual-index {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-manual {
    line-height: 1.6;
}

.bo-manual p,
.bo-manual ul,
.bo-manual .dk-table-wrap {
    margin: 0 0 var(--space-3);
}

.bo-manual ul {
    padding-left: 1.3em;
}

.bo-manual li + li {
    margin-top: var(--space-1);
}

.bo-manual code {
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    font-size: .92em;
}

/* le avvertenze: a margine, come un riquadro */
.bo-manual-note {
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
}

@media print {
    .bo-manual-index {
        display: none;
    }
}