/* Tema della webapp come l'app (docs/PIANO_STILE_WEBAPP.md): valori da niva-app/lib/ui/core/themes/
   (app_colors, text_styles, button_styles, input_styles, dialog_styles, chip_styles, loader_styles).
   Caricato dopo bootstrap.css e climby.css: ridefinisce le variabili e le classi di Bootstrap. */

:root {
    --niva-white: #ffffff;
    --niva-black50: #F2F2F2;
    --niva-black100: #E6E6E6;
    --niva-black200: #CCCCCC;
    --niva-black400: #999999;
    --niva-black500: #000000;
    --niva-black600: #666666;
    --niva-black800: #333333;
    --niva-red500: #D93240;
    --niva-green400: #1E8E78;
    --niva-yellow600: #AACC00;
    --niva-gray600: #4D7380;
    --niva-pill: 24px;
    --niva-radius: 5px;
    --niva-field-height: 48px;

    --bs-primary: #000000;
    --bs-primary-rgb: 0, 0, 0;
    --bs-secondary: #666666;
    --bs-secondary-rgb: 102, 102, 102;
    --bs-success: #1E8E78;
    --bs-success-rgb: 30, 142, 120;
    --bs-info: #4D7380;
    --bs-info-rgb: 77, 115, 128;
    --bs-warning: #AACC00;
    --bs-warning-rgb: 170, 204, 0;
    --bs-danger: #D93240;
    --bs-danger-rgb: 217, 50, 64;
    --bs-body-color: #000000;
    --bs-link-color: #000000;
    --bs-link-hover-color: #333333;
    --bs-border-color: #E6E6E6;
    --bs-border-radius: 5px;
}

/* il contenitore del sito (.page-wrap) centra il testo: titoli, aiuti, sezioni e avvisi delle pagine
   stanno a sinistra come nell'app */
.niva-page-head, .niva-section, .niva-hint, .niva-chips, .niva-form-actions, .alert, .validation-message {
    text-align: start;
}

/* il giallo della palette (#AACC00) sul bianco non si legge come testo */
.text-warning {
    color: #556600 !important;
}

/* -- Testi (h1 24/900, h2 20/800, h3 16/700) -- */

h1, .h1 {
    font-size: 24px;
    font-weight: 900;
}

h2, .h2 {
    font-size: 20px;
    font-weight: 800;
}

h3, .h3, h4, .h4 {
    font-size: 16px;
    font-weight: 700;
}

a {
    color: var(--niva-black500);
}

/* -- Bottoni: pillola, 14/700, senza ombre -- */

.btn {
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 8px;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: var(--niva-pill);
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(0, 0, 0, .2);
    --bs-btn-disabled-opacity: 1;
    min-height: 40px;
    box-shadow: none;
}

/* Bootswatch scrive i colori direttamente su alcune classi (btn-outline-*): si torna alle variabili */
.btn {
    color: var(--bs-btn-color);
}

    .btn:hover {
        color: var(--bs-btn-hover-color);
    }

.btn-lg {
    --bs-btn-font-size: 16px;
    --bs-btn-border-radius: var(--niva-pill);
    min-height: 48px;
}

.btn-sm {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 6px;
    --bs-btn-border-radius: var(--niva-pill);
    min-height: 35px;
}

/* primario: nero, testo bianco */
.btn-primary, .btn-dark, .btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #333;
    --bs-btn-hover-border-color: #333;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1A1A1A;
    --bs-btn-active-border-color: #1A1A1A;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #CCCCCC;
    --bs-btn-disabled-border-color: #CCCCCC;
}

/* secondario: bianco, bordo e testo neri */
.btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark {
    --bs-btn-color: #000;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #F2F2F2;
    --bs-btn-hover-border-color: #000;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #E6E6E6;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #666;
    --bs-btn-disabled-bg: #E6E6E6;
    --bs-btn-disabled-border-color: #CCCCCC;
}

/* §5.27: contorno dei bottoni bianchi disegnato con box-shadow invece che con il bordo. Con lo schermo scalato
   (es. Windows al 150%) Chrome arrotonda il bordo da 1px a un pixel intero e le curve delle pillole e dei tondi
   escono seghettate; la box-shadow non viene arrotondata e resta sfumata. Il bordo resta, trasparente, per non
   cambiare le misure; colori e stati sono quelli di sempre (variabili --bs-btn-*-border-color). */
.btn:is(.btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-danger) {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px var(--bs-btn-border-color);
}

    .btn:is(.btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-danger):hover {
        border-color: transparent;
        box-shadow: inset 0 0 0 1px var(--bs-btn-hover-border-color);
    }

    .btn:is(.btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-danger):is(:active, .active) {
        border-color: transparent;
        box-shadow: inset 0 0 0 1px var(--bs-btn-active-border-color);
    }

    .btn:is(.btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-danger):focus-visible {
        border-color: transparent;
        box-shadow: inset 0 0 0 1px var(--bs-btn-border-color), var(--bs-btn-focus-box-shadow);
    }

    .btn:is(.btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-danger):is(:disabled, .disabled) {
        border-color: transparent;
        box-shadow: inset 0 0 0 1px var(--bs-btn-disabled-border-color);
    }

/* floating dell'app: bianco con ombra (bottoni della home) */
.btn-home {
    --bs-btn-color: #000;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #F2F2F2;
    --bs-btn-hover-border-color: #F2F2F2;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #E6E6E6;
    --bs-btn-active-border-color: #E6E6E6;
    box-shadow: 0 3px 5px rgba(153, 153, 153, .2), 0 1px 18px rgba(153, 153, 153, .12), 0 6px 10px rgba(153, 153, 153, .14);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #D93240;
    --bs-btn-border-color: #D93240;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #BC2330;
    --bs-btn-hover-border-color: #BC2330;
}

/* Bootswatch scrive il rosa direttamente su .btn-link */
.btn-link, .btn-link:hover {
    --bs-btn-color: #000;
    --bs-btn-hover-color: #333;
    --bs-btn-active-color: #000;
    color: var(--niva-black500);
    text-decoration: underline;
    min-height: 0;
}

/* altri rosa di Bootswatch: menu a tendina, paginazione, pillole, slider, righe table-primary */
.dropdown-menu {
    --bs-dropdown-link-hover-bg: #F2F2F2;
    --bs-dropdown-link-hover-color: #000;
    --bs-dropdown-link-active-bg: #000;
    --bs-dropdown-link-active-color: #fff;
}

.pagination {
    --bs-pagination-color: #000;
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: #000;
    --bs-pagination-hover-color: #000;
    --bs-pagination-hover-bg: #F2F2F2;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #000;
    --bs-pagination-active-border-color: #000;
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(0, 0, 0, .2);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: #000;
}

.form-range {
    accent-color: #000;
}

    .form-range::-webkit-slider-thumb {
        background-color: #000;
    }

    .form-range::-moz-range-thumb {
        background-color: #000;
    }

.table-primary {
    --bs-table-bg: #F2F2F2;
    --bs-table-color: #000;
}

/* -- Campi: bordo nero, raggio 5, alti 48 -- */

.form-control, .form-select {
    min-height: var(--niva-field-height);
    padding: 8px 12px;
    border: 1px solid var(--niva-black500);
    border-radius: var(--niva-radius);
    background-color: var(--niva-white);
    color: var(--niva-black500);
    font-size: 14px;
    font-weight: 700;
}

.form-select {
    padding-right: 36px;
}

textarea.form-control {
    min-height: 96px;
}

.form-control-sm, .form-select-sm {
    min-height: 30px;
    padding: 4px 10px;
}

.form-control::placeholder {
    color: var(--niva-black600);
    font-weight: 700;
    opacity: 1;
}

.form-control:focus, .form-select:focus {
    border-color: var(--niva-black500);
    box-shadow: 0 0 0 1px var(--niva-black500);
}

.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    border-color: var(--niva-black200);
    background-color: var(--niva-black50);
    color: var(--niva-black600);
}

/* campo file: pillola nera piccola dentro il bordo, così non copre il bordo né il nome del campo;
   "Nessun file selezionato" in grigio. §5.27: il nome sul bordo scende di 9px nel campo, quindi la pillola parte
   a 10px (1 di bordo + 9) ed è alta 28px; prima, alta 32 da 8px, finiva sotto il nome. Il campo resta alto 48. */
input.form-control[type=file] {
    padding: 9px 12px 9px 9px;
    color: var(--niva-black600);
    font-weight: 400;
    line-height: 28px;
}

.form-control::file-selector-button {
    height: 28px;
    margin: 0 12px 0 0;
    padding: 0 14px;
    border: 0;
    border-radius: var(--niva-pill);
    background-color: var(--niva-black500);
    color: var(--niva-white);
    font-size: 13px;
    font-weight: 700;
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--niva-black800);
}

.form-control.is-invalid, .invalid:not([type=checkbox]) {
    border-color: var(--niva-red500);
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: none;
}

.validation-message, .invalid-feedback {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--niva-red500);
}

/* ricerca con suggerimenti (palestra, località, utenti) */
.blazored-typeahead {
    min-height: var(--niva-field-height);
    border-radius: var(--niva-radius);
    background: var(--niva-white);
}

    .blazored-typeahead .blazored-typeahead__input,
    .blazored-typeahead .blazored-typeahead__input-mask {
        min-height: calc(var(--niva-field-height) - 2px);
        font-size: 14px;
        font-weight: 700;
    }

/* Nome del campo sul bordo, come nell'app: label.form-label subito prima del controllo.
   Con un margine negativo sta sul bordo superiore qualunque sia il contenitore; nel campo vuoto
   senza focus scende dentro (serve un placeholder, anche " "). Select, date, file e typeahead: sempre sul bordo. */
label.form-label:has(+ :is(input.form-control, select.form-select, textarea.form-control, .blazored-typeahead, input[type=date], input[type=time])) {
    position: relative;
    z-index: 2;
    display: table;
    /* anche dentro colonne flex centrate (valutazione del blocco) resta sopra l'inizio del campo */
    align-self: flex-start;
    margin: 0 0 -9px 8px;
    padding: 0 4px;
    background: var(--niva-white);
    color: var(--niva-black600);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    pointer-events: none;
    transform-origin: left top;
    transition: transform .15s, font-size .15s;
}

label.form-label:has(+ input.form-control:placeholder-shown:not(:focus):not([type=date]):not([type=time]):not([type=file])),
label.form-label:has(+ textarea.form-control:placeholder-shown:not(:focus)) {
    font-size: 14px;
    background: transparent;
    transform: translateY(24px);
}

/* campi disabilitati o in sola lettura (fondo grigio): il nome sul bordo ha bianco sopra la linea e grigio sotto,
   altrimenti resta un rettangolo bianco sul grigio. La linea del bordo passa a metà del nome (alto 18, margin -9).
   Le regole "nome dentro il campo vuoto" qui sotto hanno selettori più specifici e restano trasparenti */
label.form-label:has(+ :is(input.form-control:disabled, input.form-control[readonly], textarea.form-control:disabled, textarea.form-control[readonly], select.form-select:disabled)) {
    background: linear-gradient(to bottom, var(--niva-white) 50%, var(--niva-black50) 50%);
}

/* tendine e ricerche a tendina (solo con Placeholder=" " sul componente: un segnaposto vero, come "Nome, cognome o
   username" negli iscritti o la palestra scelta nel profilo, resta visibile e il nome resta sul bordo): "vuota" quando la voce scelta non ha testo (<option></option> o <option value=""></option>);
   con un testo come "Seleziona un colore" il nome resta sul bordo per non sovrapporsi.
   Nella ricerca con una voce già scelta l'input resta vuoto ma nascosto (.blazored-typeahead__input-hidden) e la voce
   sta nella maschera: il nome resta sul bordo, altrimenti si sovrappone alla voce.
   Regola a parte e senza :has annidati: un selettore non valido farebbe scartare tutta la regola */
label.form-label:has(+ select.form-select:not(:focus) > option:checked:empty),
label.form-label:has(+ .blazored-typeahead:not(:focus-within) .blazored-typeahead__input[placeholder=" "]:placeholder-shown:not(.blazored-typeahead__input-hidden)) {
    font-size: 14px;
    background: transparent;
    transform: translateY(24px);
}

label.form-label + input.form-control:not(:focus)::placeholder,
label.form-label + textarea.form-control:not(:focus)::placeholder {
    color: transparent;
}

/* -- Bottone di filtro sulla riga dei campi di ricerca --
   la colonna (in una .row align-items-end) è alta quanto un campo: il bottone resta centrato sul campo, non sul
   suo nome; su telefono va in fondo a destra */
.niva-filter-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: var(--niva-field-height);
}

    /* nessun margine dei bottoni (es. .btn-mob di climby.css): altrimenti il bottone scende sotto il centro */
    .niva-filter-action > .btn,
    .niva-filter-action > .btn.btn-mob {
        margin: 0;
    }

/* su telefono il bottone va sotto i campi: un po' di stacco dall'ultimo */
@media (max-width: 767.98px) {
    .niva-filter-action {
        margin-top: 12px;
    }
}

@media (min-width: 768px) {
    .niva-filter-action-start {
        justify-content: flex-start;
    }
}

/* -- Header: logo al centro della pagina (NavMenu) -- */
.top-row > .container-fluid {
    position: relative;
}

.niva-header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* -- Checkbox e radio da 24 -- */

.form-check-input, input[type=checkbox]:not(.btn-check), input[type=radio]:not(.btn-check) {
    width: 24px;
    height: 24px;
    margin-top: 0;
    border: 1px solid var(--niva-black500);
    accent-color: var(--niva-black500);
    vertical-align: middle;
    cursor: pointer;
}

/* climby.css ingrandiva le checkbox del 200%: con quelle da 24 non serve */
input.bigChechBox, input.checkbox-large {
    transform: none;
    margin-left: 12px;
}

.form-check-input:checked {
    background-color: var(--niva-black500);
    border-color: var(--niva-black500);
}

.form-check-input:focus {
    border-color: var(--niva-black500);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .2);
}

.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 0;
}

    .form-check .form-check-input {
        float: none;
        margin-left: 0;
    }

/* -- Chip e badge -- */

.badge {
    padding: 4px 10px;
    border-radius: var(--niva-pill);
    font-size: 12px;
    font-weight: 700;
}

/* -- Tabelle -- */

.table {
    --bs-table-color: #000;
    --bs-table-border-color: #E6E6E6;
    --bs-table-striped-bg: #F2F2F2;
    --bs-table-hover-bg: #F2F2F2;
    font-size: 14px;
}

    .table > thead > tr > th, .table > thead > tr > td {
        border-bottom: 1px solid var(--niva-black500);
        font-weight: 700;
        vertical-align: middle;
    }

    .table > :not(caption) > * > * {
        padding: 10px 8px;
    }

    .table td i.bi {
        background: transparent;
        box-shadow: none;
    }

/* -- Card e alert -- */

.card {
    --bs-card-border-color: #E6E6E6;
    --bs-card-border-radius: 5px;
    --bs-card-cap-bg: #fff;
}

.alert {
    --bs-alert-border-radius: 5px;
    font-size: 14px;
}

.alert-danger {
    --bs-alert-color: #71151D;
    --bs-alert-bg: #F9DDDF;
    --bs-alert-border-color: #F2BBBF;
}

.alert-success {
    --bs-alert-color: #085041;
    --bs-alert-bg: #C7F3EB;
    --bs-alert-border-color: #8FE8D7;
}

/* -- Dialog: raggio 5, ombra leggera, titolo h2 -- */

.modal-content {
    border: 0;
    border-radius: var(--niva-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}

.modal-header {
    border-bottom: 0;
    padding: 20px 20px 8px;
}

    .modal-header .modal-title, .modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5 {
        font-size: 20px;
        font-weight: 800;
    }

.modal-body {
    padding: 8px 20px;
    font-size: 14px;
}

.modal-footer {
    border-top: 0;
    padding: 8px 20px 20px;
    gap: 8px;
}

.modal-backdrop {
    --bs-backdrop-opacity: .2;
}

/* i dialog della webapp sono "modal fade show" con display:block, senza lo sfondo di Bootstrap:
   la pagina dietro si scurisce come nell'app */
.modal.show {
    background: rgba(0, 0, 0, .2);
}

    /* il contenitore del sito centra il testo: nei dialog sta a sinistra */
    .modal.show .modal-content {
        text-align: start;
    }

.modal-dialog {
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
}

.modal-header {
    align-items: flex-start;
    gap: 12px;
}

    .modal-header > h1, .modal-header > h2, .modal-header > h3, .modal-header > h4, .modal-header > h5 {
        margin: 0;
        font-size: 20px;
        font-weight: 800;
    }

/* ✕ tonda come gli altri bottoni con sola icona */
.niva-modal-close {
    flex: none;
    margin-left: auto;
    width: 32px;
    height: 32px;
}

/* bottoni in fondo: affiancati a destra, il principale per ultimo e Annulla prima, come nell'app */
.modal-footer, .modal-footer > .d-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

    .modal-footer :is(.btn-primary, .btn-info, .btn-dark, .btn-danger) {
        order: 2;
    }

    .modal-footer .btn {
        margin: 0 !important;
    }

        .modal-footer .btn.d-grid {
            display: inline-flex !important;
            width: auto !important;
        }

    .modal-footer .m-1:empty {
        display: none;
    }

/* QR code dei dialog: codice in un riquadro, link in grigio */
.niva-qr-box {
    display: flex;
    justify-content: center;
    padding: 12px;
    border: 1px solid var(--niva-black100);
    border-radius: var(--niva-radius);
}

.niva-qr-link, .niva-qr-link a {
    margin-top: 8px;
    font-size: 12px;
    color: var(--niva-black600);
}

/* -- Menu a tendina -- */

.dropdown-menu {
    border: 1px solid var(--niva-black100);
    border-radius: var(--niva-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

/* -- Loader (Shared/Components/Common/NivaLoader.razor e avvio in index.html) -- */

.niva-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 0;
}

.niva-loader-mark {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .niva-loader-mark::before {
        content: "";
        position: absolute;
        inset: 0;
        border: 2px solid var(--niva-black100);
        border-top-color: var(--niva-black500);
        border-radius: 50%;
        animation: niva-spin 1s linear infinite;
    }

    .niva-loader-mark img {
        width: 40px;
        height: 40px;
    }

.niva-loader-message {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--niva-black600);
}

.niva-loader-ring {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--niva-black100);
    border-top-color: var(--niva-black500);
    border-radius: 50%;
    vertical-align: middle;
    animation: niva-spin 1s linear infinite;
}

.btn .niva-loader-ring {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    border-color: rgba(255, 255, 255, .4);
    border-top-color: currentColor;
}

/* attesa bloccante: pagina scurita e riquadro compatto con messaggio */
.niva-loader-blocking {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .2);
}

    .niva-loader-blocking .niva-loader-box {
        width: 180px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: var(--niva-radius);
        background: var(--niva-white);
        box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
        text-align: center;
    }

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

@media (prefers-reduced-motion: reduce) {
    .niva-loader-mark::before, .niva-loader-ring {
        animation-duration: 3s;
    }
}

/* -- Elementi comuni delle pagine (docs/PIANO_STILE_WEBAPP.md §5.4) -- */

/* testata: titolo a sinistra, azione principale a destra */
.niva-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* solo sopra e sotto: quando la testata è la colonna stessa, il padding laterale della colonna resta */
    padding-top: 24px;
    padding-bottom: 16px;
}

    .niva-page-head h1 {
        margin: 0;
    }

/* sezione di un form: titolo h3 con una riga sopra */
.niva-section {
    margin: 8px 0 16px;
    padding-top: 16px;
    border-top: 1px solid var(--niva-black100);
}

    .niva-section h2, .niva-section h3, .niva-section h4 {
        margin: 0;
        font-size: 16px;
        font-weight: 800;
    }

    .niva-section p, .niva-section small {
        display: block;
        margin: 4px 0 0;
        font-size: 12px;
        color: var(--niva-black600);
    }

/* aiuto sotto il campo */
.niva-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--niva-black600);
}

/* bottoni in fondo ai form: affiancati a destra; con .niva-form-actions-split il primo va a sinistra (Elimina) */
.niva-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--niva-black100);
}

.niva-form-actions-split > :first-child {
    margin-right: auto;
}

/* più azioni a sinistra (QR code: Elimina e Scarica, §5.30): stesso passo dei bottoni a destra */
.niva-form-actions-start {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* su telefono le azioni di sinistra su una riga, Indietro e Salva insieme sotto, a destra */
@media (max-width: 575.98px) {
    .niva-form-actions-start {
        flex-basis: 100%;
    }
}

/* passi di un pannello a più fasi (categoria gara: 1 dati, 2 blocchi); il passo attuale in nero */
.niva-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
    text-align: start;
}

.niva-steps > span {
    padding: 4px 12px;
    border-radius: var(--niva-pill);
    background-color: var(--niva-black50);
    color: var(--niva-black600);
    font-size: 0.875rem;
}

.niva-steps > span.niva-step-active {
    background-color: var(--niva-black500);
    color: var(--niva-white);
}

/* Gruppi di bottoni già presenti nelle pagine (row > .btn-aln, bottoni .d-grid .fw-100): affiancati
   e allineati a destra sulla colonna del form (offset-md-1 col-md-8, offset-lg-2 col-lg-8), con il bottone
   principale (btn-primary) per ultimo e quello rosso per primo, come nell'app, qualunque sia l'ordine del
   markup. Su telefono restano a tutta larghezza. */
@media (min-width: 576px) {
    .row > .btn-aln.d-md-flex, .row > .btn-aln.d-flex {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end !important;
        gap: 8px;
    }

        .row > .btn-aln > :has(.btn-primary) {
            order: 2;
        }

        /* più specifica della regola .px-2 qui sotto, che azzera i margini */
        .row > .btn-aln > .px-2:has(.btn-outline-danger), .row > .btn-aln > :has(.btn-outline-danger) {
            order: -1;
            margin-right: auto !important;
        }

        .row > .btn-aln > .px-2 {
            padding: 0 !important;
            margin: 0 !important;
        }

        .row > .btn-aln .btn.d-grid {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            width: auto !important;
            min-width: 120px;
            margin: 0 !important;
        }
}

@media (min-width: 768px) {
    .row > .btn-aln.d-md-flex {
        padding-left: calc(8.333% + 12px);
        padding-right: calc(25% + 12px);
    }
}

@media (min-width: 992px) {
    .row > .btn-aln.d-md-flex {
        padding-left: calc(16.667% + 12px);
        padding-right: calc(16.667% + 12px);
    }
}

/* Elimina: bianco con bordo e testo rossi */
.btn-outline-danger {
    --bs-btn-color: #D93240;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #D93240;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #D93240;
    --bs-btn-hover-border-color: #D93240;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #BC2330;
    --bs-btn-active-border-color: #BC2330;
}

/* bottone tondo con sola icona (modifica, elimina nelle righe) */
.niva-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    /* §5.27: contorno con box-shadow (vedi i bottoni bianchi sopra): il bordo trasparente tiene le misure */
    --niva-icon-btn-ring: var(--niva-black500);
    border: 1px solid transparent;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--niva-icon-btn-ring);
    background: var(--niva-white);
    color: var(--niva-black500);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}

    .niva-icon-btn:hover {
        background: var(--niva-black50);
        color: var(--niva-black500);
    }

    .niva-icon-btn:focus-visible {
        outline: 0;
        box-shadow: inset 0 0 0 1px var(--niva-icon-btn-ring), 0 0 0 3px rgba(0, 0, 0, .2);
    }

    .niva-icon-btn:disabled, .niva-icon-btn.disabled {
        --niva-icon-btn-ring: var(--niva-black200);
        background: var(--niva-white);
        color: var(--niva-black200);
        cursor: default;
    }

/* azioni distruttive (elimina, rifiuta) e di conferma (accetta) */
.niva-icon-btn-danger:not(:disabled) {
    --niva-icon-btn-ring: var(--niva-red500);
    color: var(--niva-red500);
}

.niva-icon-btn-success:not(:disabled) {
    --niva-icon-btn-ring: var(--niva-green400);
    color: var(--niva-green400);
}

/* riga di bottoni tondi: va a capo se non c'è spazio */
.niva-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

    .niva-actions > .niva-icon-btn {
        flex: none;
    }

/* scelta fra viste (classifiche): pillole, quella attiva nera */
.niva-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

    .niva-pills .niva-chip {
        padding: 6px 14px;
        font-size: 13px;
        cursor: pointer;
    }

        .niva-pills .niva-chip:hover {
            background: var(--niva-black50);
        }

        .niva-pills .niva-chip.active {
            background: var(--niva-black500);
            color: var(--niva-white);
        }

/* climby.css colora di nero ogni <i>: dentro bottoni, chip e spunte l'icona prende il colore del testo */
.btn i, .niva-chip i, .niva-icon-btn i, .niva-check i {
    color: inherit;
}

/* spunta da 24 come nell'app, su un bottone senza fondo (blocchi della gara) */
.niva-check-btn {
    padding: 4px;
    border: 0;
    background: transparent;
    line-height: 0;
}

    .niva-check-btn:disabled {
        opacity: .4;
    }

.niva-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--niva-black500);
    border-radius: 4px;
    background: var(--niva-white);
    color: var(--niva-white);
    font-size: 16px;
    vertical-align: middle;
}

    .niva-check.checked {
        background: var(--niva-black500);
    }

.niva-check-sm {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    font-size: 11px;
}

/* immagine dentro un bottone tondo (punti bonus) */
.niva-icon-img {
    width: 18px;
    height: 18px;
}

/* palestra sotto il nome nelle classifiche */
.niva-list span.gym-name {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--niva-black600);
}

/* riga dell'utente collegato nelle classifiche */
.niva-list tr.niva-row-me > * {
    background: var(--niva-black50);
    font-weight: 700;
}

/* chip di stato come nell'app: bordo, fondo chiaro e testo scuro della stessa scala */
.niva-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--niva-black500);
    border-radius: var(--niva-pill);
    background: var(--niva-white);
    color: var(--niva-black500);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

    .niva-chip .bi {
        cursor: pointer;
    }

.niva-chip-success {
    border-color: #1E8E78;
    background: #C7F3EB;
    color: #085041;
}

.niva-chip-muted {
    border-color: #999;
    background: #F2F2F2;
    color: #666;
}

.niva-chip-warning {
    border-color: #AACC00;
    background: #FBFFE5;
    color: #556600;
}

/* lista a righe: nome in grassetto, dettaglio grigio sotto */
.niva-list {
    border-top: 1px solid var(--niva-black500);
}

    table.niva-list > :not(caption) > * > * {
        padding: 12px 8px;
        border-bottom: 1px solid var(--niva-black100);
        vertical-align: middle;
    }

    .niva-list .niva-list-title {
        font-size: 14px;
        font-weight: 700;
    }

    .niva-list .niva-list-sub {
        font-size: 12px;
        font-weight: 400;
        color: var(--niva-black600);
    }

    /* sotto il nome; non sulle celle, che resterebbero fuori dalla tabella */
    .niva-list span.niva-list-sub {
        display: block;
    }

    /* riga con logo tondo prima del nome (lista sponsor, §5.31); senza logo, le iniziali */
    .niva-list .niva-list-logo-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .niva-list .niva-list-logo {
        flex: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--niva-black100);
        color: var(--niva-black600);
        font-size: 12px;
        font-weight: 700;
    }

        .niva-list .niva-list-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: #fff;
        }

/* su telefono la riga va a capo: nome sopra, stato e azioni sotto */
@media (max-width: 575.98px) {
    .niva-list, .niva-list tbody {
        display: block;
    }

        .niva-list tr {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            padding: 12px 0;
            border-bottom: 1px solid var(--niva-black100);
        }

        table.niva-list > :not(caption) > * > * {
            padding: 0;
            border-bottom: 0;
        }

        .niva-list tr > th {
            flex: 1 1 100%;
        }
}

/* §5.26 gestione gara: scheda di sezione (blocchi della gara, categorie, blocchi della categoria) con titolo,
   riga di aiuto, bottone in alto a destra, form in cima e lista a colonne.
   §5.28: niente riquadro, la sezione si separa con la riga grigia come .niva-section, 24px tra una sezione e l'altra */
.niva-section-card {
    margin: 0 0 24px;
    padding: 16px 0 0;
    border-top: 1px solid var(--niva-black100);
    text-align: start;
}

/* §5.28 titolo della gestione gara con i bottoni Attiva / Termina sulla stessa riga; 24px prima della prima sezione */
.niva-section.niva-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 24px;
}

.niva-section-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.niva-section-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

    .niva-section-card-head h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 800;
    }

.niva-section-card-sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--niva-black600);
}

.niva-section-card-add .bi {
    margin-right: 4px;
}

.niva-section-card-empty {
    padding: 12px 0 4px;
    border-top: 1px solid var(--niva-black100);
}

    .niva-section-card-empty p {
        margin: 0 0 4px;
    }

/* form in cima alla scheda: i form hanno la griglia della pagina (offset e colonne strette), qui occupano la scheda */
.niva-section-card-editor {
    margin-bottom: 16px;
}

    .niva-section-card-editor .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    /* il riquadro dei form (climby.css: bordo nero, raggio 10) diventa un fondo grigio senza bordo */
    .niva-section-card-editor section.br-gara,
    .niva-section-card-editor > form {
        padding: 16px;
        border: 0;
        border-radius: var(--niva-radius);
        background-color: var(--niva-black50);
    }

    .niva-section-card-editor .row > [class*="offset-"] {
        margin-left: 0;
    }

    .niva-section-card-editor .row > [class*="col-md-8"],
    .niva-section-card-editor .row > [class*="col-lg-8"],
    .niva-section-card-editor .row > [class*="col-md-11"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

@media (min-width: 768px) {
    .niva-section-card-editor .row > [class*="col-md-4"],
    .niva-section-card-editor .row > [class*="col-lg-3"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

    .niva-section-card-editor form.mb-4 {
        margin-bottom: 0 !important;
    }

/* lista a colonne con intestazione: la riga in modifica in grigio chiaro */
.niva-list-cols thead th {
    font-size: 12px;
    font-weight: 400;
    color: var(--niva-black600);
}

.niva-list tr.niva-row-selected > * {
    background: var(--niva-black50);
}

.niva-list-label {
    display: none;
}

/* su telefono: niente intestazione, ogni valore con la sua etichetta */
@media (max-width: 575.98px) {
    .niva-list-cols thead {
        display: none;
    }

    .niva-list-cols .niva-list-label {
        display: inline;
        margin-right: 4px;
        color: var(--niva-black600);
        font-size: 12px;
    }

    .niva-list-cols tr > td.text-end {
        margin-left: auto;
    }
}

/* avvisi delle pagine come nell'app */
.alert-warning {
    --bs-alert-color: #000;
    --bs-alert-bg: #FBFFE5;
    --bs-alert-border-color: #DDFF33;
}

/* avvisi già presenti nelle pagine (climby.css: grigio con bordo e testo rosso): come gli avvisi del tema */
.msg-unauthorized {
    padding: 12px 16px;
    border: 1px solid #DDFF33;
    border-radius: var(--niva-radius);
    background: #FBFFE5;
    color: var(--niva-black500) !important;
    font-size: 14px;
    text-align: start;
}

    .msg-unauthorized p {
        margin: 0;
        padding-top: 0;
    }

/* accordion (settori): righe semplici, freccia nera, nessun fondo colorato */
.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: #E6E6E6;
    --bs-accordion-btn-color: #000;
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-color: #000;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    border-top: 1px solid var(--niva-black500);
}

    .accordion .accordion-item {
        border: 0;
        border-bottom: 1px solid var(--niva-black100);
        border-radius: 0;
    }

    .accordion .accordion-button {
        padding: 12px 8px;
        font-size: 14px;
        box-shadow: none;
    }

    .accordion .accordion-body {
        padding: 0 8px 8px 20px;
    }

/* card dei post (feed): bordo leggero, media in alto, azioni del gestore in fondo */
.niva-card {
    overflow: hidden;
    border: 1px solid var(--niva-black100);
    border-radius: var(--niva-radius);
    text-align: start;
}

    .niva-card .card-body {
        padding: 12px 16px;
    }

    .niva-card .card-title {
        margin-bottom: 4px;
        font-size: 16px;
        font-weight: 800;
    }

    .niva-card .card-text {
        margin-bottom: 4px;
        font-size: 14px;
    }

    .niva-card small.text-muted, .niva-card .text-body-secondary {
        color: var(--niva-black600) !important;
        font-size: 12px;
    }

.niva-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--niva-black100);
    background: var(--niva-white);
}

/* domanda del questionario in un riquadro, risposte a scelta con il radio da 24 */
.niva-question {
    padding-top: 12px;
    padding-bottom: 12px;
    border: 1px solid var(--niva-black100);
    border-radius: var(--niva-radius);
    text-align: start;
}

    .niva-question strong {
        font-size: 16px;
        font-weight: 800;
    }

.niva-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    text-align: start;
}

    .niva-radio label {
        margin: 0;
        font-size: 14px;
        cursor: pointer;
    }

/* home: marchio, testo introduttivo e voci come riquadri con icona e freccia */
.niva-home-mark {
    display: block;
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
}

.niva-home-intro {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--niva-black800);
}

.niva-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.niva-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 16px;
    border: 1px solid var(--niva-black100);
    border-radius: var(--niva-radius);
    background: var(--niva-white);
    color: var(--niva-black500);
    font-size: 14px;
    font-weight: 700;
    text-align: start;
}

    .niva-tile:hover {
        border-color: var(--niva-black500);
    }

    .niva-tile i {
        color: inherit;
        font-size: 18px;
    }

        .niva-tile i:last-child {
            margin-left: auto;
            font-size: 14px;
        }

.niva-tile-dark {
    border-color: var(--niva-black500);
    background: var(--niva-black500);
    color: var(--niva-white);
}

    .niva-tile-dark:hover {
        background: var(--niva-black800);
    }

/* Privacy Policy (#wbars_all): testo a sinistra, largo al massimo 760, titoli con le misure dell'app */
#wbars_all {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 16px;
    text-align: start;
}

    #wbars_all h1 {
        font-size: 24px;
        font-weight: 900;
        color: var(--niva-black500);
    }

    #wbars_all h2 {
        font-size: 20px;
        font-weight: 800;
        color: var(--niva-black500);
    }

    #wbars_all h3, #wbars_all h4, #wbars_all h5, #wbars_all h6 {
        font-size: 16px;
        font-weight: 700;
        color: var(--niva-black500);
    }

    #wbars_all p, #wbars_all li {
        font-size: 14px;
        line-height: 1.6;
    }

    #wbars_all .text_col {
        border-bottom-color: var(--niva-black100);
    }

/* link per tornare indietro, con freccia */
.niva-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--niva-black500);
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
}

/* numeri in riquadri (grado e data del blocco, progressi) */
.niva-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.niva-stat {
    flex: 1 1 100px;
    padding: 10px 12px;
    border: 1px solid var(--niva-black100);
    border-radius: var(--niva-radius);
    text-align: center;
}

    .niva-stat strong {
        display: block;
        font-size: 20px;
        font-weight: 900;
        color: var(--niva-black500);
    }

    .niva-stat span, .niva-stat p {
        display: block;
        margin: 0;
        font-size: 12px;
        color: var(--niva-black600);
    }

/* bottone tondo attivo (mi piace) */
.niva-icon-btn.active {
    background: var(--niva-black500);
    color: var(--niva-white);
}

/* stelle della valutazione: al passaggio grigio scuro invece del rosa */
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: var(--niva-black800);
}

/* riga di una lista fatta di div: testo a sinistra, azioni a destra, a capo su telefono */
.niva-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--niva-black100);
}

    .niva-row .niva-row-main {
        flex: 1 1 220px;
        min-width: 0;
    }

/* riga cliccabile con freccia a destra (blocchi del settore) */
.niva-row-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--niva-black100);
    color: var(--niva-black500);
    font-size: 14px;
    text-decoration: none;
}

    .niva-row-link:last-child {
        border-bottom: 0;
    }

    .niva-row-link:hover {
        color: var(--niva-black500);
        background: var(--niva-black50);
    }

    .niva-row-link > :first-child {
        flex: 1;
    }

/* §5.23 errore della pagina (ErrorBoundary di MainLayout): riquadro al posto del contenuto, header e menu restano */
.niva-page-error {
    max-width: 420px;
    margin: 40px auto;
    padding: 28px 24px;
    text-align: center;
    border: 1px solid var(--niva-black500);
    border-radius: var(--niva-radius);
    background: var(--niva-white);
}

.niva-page-error > i {
    font-size: 24px;
    color: var(--niva-red500);
}

.niva-page-error h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 8px 0 6px;
}

.niva-page-error p {
    color: var(--niva-black600);
    margin-bottom: 20px;
}

.niva-page-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}