/* viste-paginazione.css
   Barre di paginazione delle griglie Viste (Pubbliche, Personali, di Gruppo, Eliminate e la
   griglia pubbliche della Home). Il markup e' generato da wwwroot/js/viste-paginazione.js.

   Colori presi dalle CSS vars del tema (--app-*) e non da valori fissi, cosi' la paginazione
   segue chiaro/scuro/auto come il resto dell'app: e' il motivo per cui non riusa le classi
   .import-pagination di importResult.css, che hanno bianchi e grigi cablati.               */

.viste-paginazione {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.viste-paginazione-sopra {
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.viste-paginazione-sotto {
    justify-content: center;
    margin-top: 0.75rem;
}

.viste-paginazione-pagesize {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* style.css impone width:100% a label/select/option nel reset globale dei controlli form
   (~riga 1183): senza questi override etichetta e selettore occupano l'intera riga e la barra
   si spezza su piu' righe. Basta la specificita' di classe (0,1,0) per battere quella di tipo
   (0,0,1), a prescindere dall'ordine di caricamento dei fogli di stile. */
.viste-paginazione-pagesize label {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
    font-weight: 600;
    color: var(--app-text);
}

.viste-paginazione-select {
    width: auto;
    flex: 0 0 auto;
    min-width: 5rem;
    color: var(--app-text);
}

.viste-paginazione-info {
    color: var(--app-text-muted);
    font-size: 0.875rem;
    white-space: nowrap;
}

/* ── Navigazione pagine ─────────────────────────────────────────────────────────── */

.viste-paginazione-sotto .page-link {
    padding: 0.375rem 0.7rem;
    color: var(--app-link);
    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.viste-paginazione-sotto .page-item:not(.disabled):not(.active) .page-link:hover {
    color: var(--app-link-hover);
    background-color: var(--app-hover);
    border-color: var(--app-border);
}

.viste-paginazione-sotto .page-item.active .page-link {
    color: #ffffff;
    background-color: var(--app-link);
    border-color: var(--app-link);
}

.viste-paginazione-sotto .page-item.disabled .page-link {
    color: var(--app-disabled-text);
    background-color: var(--app-disabled-bg);
    border-color: var(--app-border);
}

.viste-paginazione-sotto .page-link:focus-visible {
    outline: 2px solid var(--app-link-hover);
    outline-offset: 1px;
    box-shadow: none;
}

@media print {
    .viste-paginazione {
        display: none !important;
    }
}