/* ============================================================
   GesTask — Ponte fra Bootstrap e Prime
   Riscrive i componenti di Bootstrap nel linguaggio visivo di Prime.
   ============================================================

   L'applicazione ha scelto la convivenza: la griglia e le utility di
   spaziatura restano di Bootstrap, i componenti diventano Prime. Questo
   foglio è la cerniera fra le due metà.

   Fa due cose, e nient'altro.

   La prima è riscrivere le variabili di Bootstrap in termini di token
   Prime. Bootstrap 5.3 esprime quasi tutto attraverso proprietà
   personalizzate: cambiandole alla radice, un `.card` o un `.form-control`
   già scritto in una view cambia aspetto senza che la view venga toccata.
   È il motivo per cui la migrazione dell'intero frontend non ha richiesto
   di riscrivere ogni riga di markup.

   La seconda è vestire da Prime i componenti che Bootstrap disegna con
   valori fissi invece che con variabili — i pulsanti pieni, le finestre, i
   menu a tendina. Lì la variabile non basta e serve una regola.

   Quello che questo foglio non fa è aggiungere comportamenti: chi scrive
   una pagina nuova usa i widget Prime, non `.btn`. Il ponte serve a
   mantenere coerente ciò che esiste, non a incoraggiarne altro. */

/* ============================================================
   1. Variabili
   ============================================================ */

:root {
    /* Tipografia */
    --bs-font-sans-serif: var(--p-font-family);
    --bs-body-font-family: var(--p-font-family);
    --bs-body-font-size: var(--p-font-size);
    --bs-body-line-height: var(--p-line-height);

    /* Superfici e testo */
    --bs-body-bg: var(--p-body-background);
    --bs-body-color: var(--p-text-color);
    --bs-emphasis-color: var(--p-text-emphasis-color);
    --bs-secondary-color: var(--p-text-muted-color);
    --bs-tertiary-color: var(--p-text-muted-color);
    --bs-secondary-bg: var(--p-content-alt-background);
    --bs-tertiary-bg: var(--p-content-deep-background);
    --bs-border-color: var(--p-content-border-color);
    --bs-border-color-translucent: var(--p-content-border-color);

    /* Forma */
    --bs-border-radius: var(--p-border-radius-lg);
    --bs-border-radius-sm: var(--p-border-radius-md);
    --bs-border-radius-lg: var(--p-border-radius-xl);
    --bs-border-radius-xl: var(--p-border-radius-2xl);
    --bs-border-radius-pill: var(--p-border-radius-full);

    /* Colori nominali */
    --bs-primary: var(--p-primary-500);
    --bs-primary-rgb: 99, 102, 241;
    --bs-secondary: var(--p-surface-500);
    --bs-secondary-rgb: 100, 116, 139;
    --bs-success: var(--p-green-500);
    --bs-success-rgb: 34, 197, 94;
    --bs-info: var(--p-cyan-500);
    --bs-info-rgb: 6, 182, 212;
    --bs-warning: var(--p-amber-500);
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: var(--p-red-500);
    --bs-danger-rgb: 239, 68, 68;

    /* Le tre varianti tenui di ogni colore: fondo, cornice, testo. Sono
       quelle che gli avvisi, i contorni e le etichette leggono. */
    --bs-primary-bg-subtle: var(--p-primary-subtle-color);
    --bs-primary-border-subtle: var(--p-primary-border-color);
    --bs-primary-text-emphasis: var(--p-primary-emphasis-color);

    --bs-success-bg-subtle: var(--p-success-subtle-color);
    --bs-success-border-subtle: var(--p-success-border-color);
    --bs-success-text-emphasis: var(--p-success-emphasis-color);

    --bs-info-bg-subtle: var(--p-info-subtle-color);
    --bs-info-border-subtle: var(--p-info-border-color);
    --bs-info-text-emphasis: var(--p-info-emphasis-color);

    --bs-warning-bg-subtle: var(--p-warn-subtle-color);
    --bs-warning-border-subtle: var(--p-warn-border-color);
    --bs-warning-text-emphasis: var(--p-warn-emphasis-color);

    --bs-danger-bg-subtle: var(--p-danger-subtle-color);
    --bs-danger-border-subtle: var(--p-danger-border-color);
    --bs-danger-text-emphasis: var(--p-danger-emphasis-color);

    --bs-secondary-bg-subtle: var(--p-content-alt-background);
    --bs-secondary-border-subtle: var(--p-content-border-color);
    --bs-secondary-text-emphasis: var(--p-text-color);

    /* Collegamenti */
    --bs-link-color: var(--p-primary-color);
    --bs-link-color-rgb: 99, 102, 241;
    --bs-link-hover-color: var(--p-primary-hover-color);
    --bs-link-decoration: none;
    --bs-link-hover-decoration: underline;

    /* Ombre */
    --bs-box-shadow: var(--p-shadow-md);
    --bs-box-shadow-sm: var(--p-shadow-sm);
    --bs-box-shadow-lg: var(--p-shadow-lg);
}

[data-bs-theme='dark'] {
    --bs-body-bg: var(--p-body-background);
    --bs-body-color: var(--p-text-color);
    --bs-emphasis-color: var(--p-text-emphasis-color);
    --bs-secondary-color: var(--p-text-muted-color);
    --bs-secondary-bg: var(--p-content-alt-background);
    --bs-tertiary-bg: var(--p-content-deep-background);
    --bs-border-color: var(--p-content-border-color);
    --bs-border-color-translucent: var(--p-content-border-color);
    --bs-primary: var(--p-primary-400);
    --bs-primary-rgb: 129, 140, 248;
    --bs-link-color: var(--p-primary-color);
    --bs-link-color-rgb: 129, 140, 248;
    --bs-link-hover-color: var(--p-primary-hover-color);
}

/* ============================================================
   2. Componenti
   ============================================================ */

/* ── Pulsanti ───────────────────────────────────────────────────── */

/* Le misure passano dalle variabili di Bootstrap invece che da proprietà
   dirette: così ogni variante `.btn-*` le eredita senza che questo foglio
   debba competere di specificità con quello del framework. */
.btn {
    --bs-btn-border-radius: var(--p-border-radius-lg);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: .875rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-font-size: var(--p-font-size);
    --bs-btn-focus-box-shadow: var(--p-focus-ring-shadow);
    align-items: center;
    display: inline-flex;
    gap: .5rem;
    justify-content: center;
    line-height: 1.25;
    text-decoration: none;
    transition:
        background-color var(--p-transition-duration),
        border-color var(--p-transition-duration),
        color var(--p-transition-duration),
        box-shadow var(--p-transition-duration),
        opacity var(--p-transition-duration);
}

.btn i { line-height: 1; }

.btn-sm {
    --bs-btn-border-radius: var(--p-border-radius-md);
    --bs-btn-padding-x: .625rem;
    --bs-btn-padding-y: .375rem;
    --bs-btn-font-size: var(--p-font-size-sm);
    gap: .375rem;
}

.btn-lg {
    --bs-btn-border-radius: var(--p-border-radius-xl);
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-padding-y: .6875rem;
    --bs-btn-font-size: 1.0625rem;
    gap: .625rem;
}

/* I pulsanti di sola icona restano quadrati: senza larghezza minima la
   spaziatura orizzontale li allarga rispetto all'altezza. */
.btn.btn-icon {
    padding-left: 0;
    padding-right: 0;
    width: 2.375rem;
}

.btn-sm.btn-icon { width: 1.9375rem; }
.btn-lg.btn-icon { width: 2.9375rem; }

/* Lo stato di attesa: il pulsante resta visibile e smette di accettare
   clic, così la stessa azione non parte due volte. */
.btn.is-pending {
    opacity: .65;
    pointer-events: none;
}

/* Bootstrap disegna i pulsanti pieni con valori fissi presi dalla propria
   palette a compilazione, non da `--bs-primary`: cambiare la variabile non
   basta, ogni variante va riscritta. */
.btn-primary {
    --bs-btn-bg: var(--p-primary-color);
    --bs-btn-border-color: var(--p-primary-color);
    --bs-btn-color: var(--p-primary-contrast-color);
    --bs-btn-hover-bg: var(--p-primary-hover-color);
    --bs-btn-hover-border-color: var(--p-primary-hover-color);
    --bs-btn-hover-color: var(--p-primary-contrast-color);
    --bs-btn-active-bg: var(--p-primary-active-color);
    --bs-btn-active-border-color: var(--p-primary-active-color);
    --bs-btn-active-color: var(--p-primary-contrast-color);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-bg: var(--p-primary-color);
    --bs-btn-disabled-border-color: var(--p-primary-color);
    --bs-btn-disabled-color: var(--p-primary-contrast-color);
}

.btn-success {
    --bs-btn-bg: var(--p-success-color);
    --bs-btn-border-color: var(--p-success-color);
    --bs-btn-color: var(--p-success-contrast-color);
    --bs-btn-hover-bg: var(--p-success-hover-color);
    --bs-btn-hover-border-color: var(--p-success-hover-color);
    --bs-btn-hover-color: var(--p-success-contrast-color);
    --bs-btn-active-bg: var(--p-success-hover-color);
    --bs-btn-active-border-color: var(--p-success-hover-color);
    --bs-btn-active-color: var(--p-success-contrast-color);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-bg: var(--p-success-color);
    --bs-btn-disabled-border-color: var(--p-success-color);
    --bs-btn-disabled-color: var(--p-success-contrast-color);
}

.btn-danger {
    --bs-btn-bg: var(--p-danger-color);
    --bs-btn-border-color: var(--p-danger-color);
    --bs-btn-color: var(--p-danger-contrast-color);
    --bs-btn-hover-bg: var(--p-danger-hover-color);
    --bs-btn-hover-border-color: var(--p-danger-hover-color);
    --bs-btn-hover-color: var(--p-danger-contrast-color);
    --bs-btn-active-bg: var(--p-danger-hover-color);
    --bs-btn-active-border-color: var(--p-danger-hover-color);
    --bs-btn-active-color: var(--p-danger-contrast-color);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-bg: var(--p-danger-color);
    --bs-btn-disabled-border-color: var(--p-danger-color);
    --bs-btn-disabled-color: var(--p-danger-contrast-color);
}

.btn-warning {
    --bs-btn-bg: var(--p-warn-color);
    --bs-btn-border-color: var(--p-warn-color);
    --bs-btn-color: var(--p-warn-contrast-color);
    --bs-btn-hover-bg: var(--p-warn-hover-color);
    --bs-btn-hover-border-color: var(--p-warn-hover-color);
    --bs-btn-hover-color: var(--p-warn-contrast-color);
    --bs-btn-active-bg: var(--p-warn-hover-color);
    --bs-btn-active-border-color: var(--p-warn-hover-color);
    --bs-btn-active-color: var(--p-warn-contrast-color);
    --bs-btn-active-shadow: none;
}

.btn-info {
    --bs-btn-bg: var(--p-info-color);
    --bs-btn-border-color: var(--p-info-color);
    --bs-btn-color: var(--p-info-contrast-color);
    --bs-btn-hover-bg: var(--p-info-hover-color);
    --bs-btn-hover-border-color: var(--p-info-hover-color);
    --bs-btn-hover-color: var(--p-info-contrast-color);
    --bs-btn-active-bg: var(--p-info-hover-color);
    --bs-btn-active-border-color: var(--p-info-hover-color);
    --bs-btn-active-color: var(--p-info-contrast-color);
    --bs-btn-active-shadow: none;
}

.btn-secondary {
    --bs-btn-bg: var(--p-secondary-color);
    --bs-btn-border-color: var(--p-secondary-border-color);
    --bs-btn-color: var(--p-secondary-contrast-color);
    --bs-btn-hover-bg: var(--p-secondary-hover-color);
    --bs-btn-hover-border-color: var(--p-secondary-hover-color);
    --bs-btn-hover-color: var(--p-secondary-contrast-color);
    --bs-btn-active-bg: var(--p-secondary-hover-color);
    --bs-btn-active-border-color: var(--p-secondary-hover-color);
    --bs-btn-active-color: var(--p-secondary-contrast-color);
    --bs-btn-active-shadow: none;
}

.btn-light {
    --bs-btn-bg: var(--p-content-alt-background);
    --bs-btn-border-color: var(--p-content-border-color);
    --bs-btn-color: var(--p-text-color);
    --bs-btn-hover-bg: var(--p-content-deep-background);
    --bs-btn-hover-border-color: var(--p-content-border-color);
    --bs-btn-hover-color: var(--p-text-emphasis-color);
    --bs-btn-active-shadow: none;
}

.btn-dark {
    --bs-btn-bg: var(--p-contrast-color);
    --bs-btn-border-color: var(--p-contrast-color);
    --bs-btn-color: var(--p-contrast-contrast-color);
    --bs-btn-hover-bg: var(--p-contrast-hover-color);
    --bs-btn-hover-border-color: var(--p-contrast-hover-color);
    --bs-btn-hover-color: var(--p-contrast-contrast-color);
    --bs-btn-active-shadow: none;
}

/* I contorni partono neutri e si accendono del proprio colore solo al
   passaggio o quando l'azione è attiva: è la stessa regola dei pulsanti
   Prime con variante `outlined`, e ha la stessa ragione — dieci contorni
   colorati sulla stessa riga competono fra loro invece di guidare. */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--p-content-border-color);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-color: var(--p-text-muted-color);
    --bs-btn-disabled-border-color: var(--p-content-border-color);
}

.btn-outline-secondary {
    --bs-btn-color: var(--p-text-muted-color);
    --bs-btn-hover-bg: var(--p-content-hover-background);
    --bs-btn-hover-border-color: var(--p-surface-400);
    --bs-btn-hover-color: var(--p-text-emphasis-color);
    --bs-btn-active-bg: var(--p-content-hover-background);
    --bs-btn-active-border-color: var(--p-surface-400);
    --bs-btn-active-color: var(--p-text-emphasis-color);
}

.btn-outline-primary {
    --bs-btn-color: var(--p-primary-emphasis-color);
    --bs-btn-hover-bg: var(--p-primary-subtle-color);
    --bs-btn-hover-border-color: var(--p-primary-color);
    --bs-btn-hover-color: var(--p-primary-emphasis-color);
    --bs-btn-active-bg: var(--p-primary-subtle-color);
    --bs-btn-active-border-color: var(--p-primary-color);
    --bs-btn-active-color: var(--p-primary-emphasis-color);
}

.btn-outline-success {
    --bs-btn-color: var(--p-success-emphasis-color);
    --bs-btn-hover-bg: var(--p-success-subtle-color);
    --bs-btn-hover-border-color: var(--p-success-color);
    --bs-btn-hover-color: var(--p-success-emphasis-color);
    --bs-btn-active-bg: var(--p-success-subtle-color);
    --bs-btn-active-border-color: var(--p-success-color);
    --bs-btn-active-color: var(--p-success-emphasis-color);
}

.btn-outline-danger {
    --bs-btn-color: var(--p-danger-emphasis-color);
    --bs-btn-hover-bg: var(--p-danger-subtle-color);
    --bs-btn-hover-border-color: var(--p-danger-color);
    --bs-btn-hover-color: var(--p-danger-emphasis-color);
    --bs-btn-active-bg: var(--p-danger-subtle-color);
    --bs-btn-active-border-color: var(--p-danger-color);
    --bs-btn-active-color: var(--p-danger-emphasis-color);
}

.btn-outline-warning {
    --bs-btn-color: var(--p-warn-emphasis-color);
    --bs-btn-hover-bg: var(--p-warn-subtle-color);
    --bs-btn-hover-border-color: var(--p-warn-color);
    --bs-btn-hover-color: var(--p-warn-emphasis-color);
    --bs-btn-active-bg: var(--p-warn-subtle-color);
    --bs-btn-active-border-color: var(--p-warn-color);
    --bs-btn-active-color: var(--p-warn-emphasis-color);
}

.btn-outline-info {
    --bs-btn-color: var(--p-info-emphasis-color);
    --bs-btn-hover-bg: var(--p-info-subtle-color);
    --bs-btn-hover-border-color: var(--p-info-color);
    --bs-btn-hover-color: var(--p-info-emphasis-color);
    --bs-btn-active-bg: var(--p-info-subtle-color);
    --bs-btn-active-border-color: var(--p-info-color);
    --bs-btn-active-color: var(--p-info-emphasis-color);
}

.btn-link {
    --bs-btn-padding-x: .25rem;
    --bs-btn-color: var(--p-primary-color);
    --bs-btn-hover-color: var(--p-primary-hover-color);
}

/* ── Schede ─────────────────────────────────────────────────────── */

.card {
    --bs-card-bg: var(--p-content-background);
    --bs-card-color: var(--p-content-color);
    --bs-card-border-color: var(--p-content-border-color);
    --bs-card-border-radius: var(--p-content-border-radius);
    --bs-card-inner-border-radius: calc(var(--p-content-border-radius) - 1px);
    --bs-card-cap-bg: var(--p-content-alt-background);
    --bs-card-cap-color: var(--p-text-color);
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-cap-padding-y: 1rem;
    box-shadow: var(--p-shadow-xs);
}

.card.bg-body-tertiary,
.card.bg-light { --bs-card-bg: var(--p-content-alt-background); }

/* Le classi storiche dell'applicazione ereditano la scheda Prime: erano
   quattro definizioni diverse della stessa superficie. */
.form-card,
.gt-section-card {
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-content-border-radius);
    box-shadow: var(--p-shadow-xs);
    color: var(--p-content-color);
    padding: 1.25rem;
}

/* ── Campi di modulo ────────────────────────────────────────────── */

.form-control,
.form-select {
    background-color: var(--p-form-field-background);
    border-color: var(--p-form-field-border-color);
    border-radius: var(--p-form-field-border-radius);
    color: var(--p-form-field-color);
    font-size: var(--p-font-size);
    padding: var(--p-form-field-padding-y) var(--p-form-field-padding-x);
    transition:
        border-color var(--p-transition-duration),
        box-shadow var(--p-transition-duration);
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--p-form-field-hover-border-color); }

.form-control:focus,
.form-select:focus {
    background-color: var(--p-form-field-background);
    border-color: var(--p-form-field-focus-border-color);
    box-shadow: var(--p-focus-ring-shadow);
    color: var(--p-form-field-color);
}

.form-control::placeholder { color: var(--p-form-field-placeholder-color); }

.form-control:disabled,
.form-select:disabled {
    background-color: var(--p-form-field-disabled-background);
    color: var(--p-form-field-disabled-color);
}

.form-control-sm, .form-select-sm { font-size: var(--p-form-field-sm-font-size); padding: var(--p-form-field-sm-padding-y) var(--p-form-field-sm-padding-x); }
.form-control-lg, .form-select-lg { font-size: var(--p-form-field-lg-font-size); padding: var(--p-form-field-lg-padding-y) var(--p-form-field-lg-padding-x); }

.form-label {
    color: var(--p-text-color);
    font-size: var(--p-font-size-sm);
    font-weight: 600;
    margin-bottom: .375rem;
}

.form-text,
.hint-block {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
}

.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--p-form-field-invalid-border-color); }

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-danger-color) 22%, transparent);
}

.invalid-feedback { color: var(--p-danger-emphasis-color); font-size: var(--p-font-size-sm); }

.form-check-input {
    background-color: var(--p-form-field-background);
    border-color: var(--p-form-field-border-color);
    border-width: 1.5px;
}

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

.form-check-input:focus {
    border-color: var(--p-form-field-focus-border-color);
    box-shadow: var(--p-focus-ring-shadow);
}

.input-group-text {
    background-color: var(--p-content-alt-background);
    border-color: var(--p-form-field-border-color);
    border-radius: var(--p-form-field-border-radius);
    color: var(--p-text-muted-color);
}

/* ── Avvisi ─────────────────────────────────────────────────────── */

/* Gli avvisi di Bootstrap diventano messaggi Prime: fondo tenue e barretta
   accentata a sinistra invece della cornice su tutti e quattro i lati. */
.alert {
    --bs-alert-border-radius: var(--p-border-radius-lg);
    border: 1px solid transparent;
    border-left-width: 4px;
    padding: .75rem 1rem;
}

.alert-primary { background: var(--p-primary-subtle-color); border-left-color: var(--p-primary-color); color: var(--p-primary-emphasis-color); }
.alert-success { background: var(--p-success-subtle-color); border-left-color: var(--p-success-color); color: var(--p-success-emphasis-color); }
.alert-info    { background: var(--p-info-subtle-color);    border-left-color: var(--p-info-color);    color: var(--p-info-emphasis-color); }
.alert-warning { background: var(--p-warn-subtle-color);    border-left-color: var(--p-warn-color);    color: var(--p-warn-emphasis-color); }
.alert-danger  { background: var(--p-danger-subtle-color);  border-left-color: var(--p-danger-color);  color: var(--p-danger-emphasis-color); }
.alert-secondary { background: var(--p-content-alt-background); border-left-color: var(--p-surface-400); color: var(--p-text-color); }

/* ── Contatori ed etichette ─────────────────────────────────────── */

/* `.badge` in questa applicazione è quasi sempre un'etichetta di stato, non
   un contatore: prende la forma dell'etichetta Prime. Chi vuole il pallino
   numerico usa `.p-badge`. */
.badge {
    border-radius: var(--p-border-radius-sm);
    font-size: var(--p-font-size-xs);
    font-weight: 700;
    letter-spacing: .01em;
    padding: .1875rem .4375rem;
}

.badge.rounded-pill { border-radius: var(--p-border-radius-full); padding-left: .5625rem; padding-right: .5625rem; }

.text-bg-primary { background: var(--p-primary-subtle-color) !important; color: var(--p-primary-emphasis-color) !important; }
.text-bg-success { background: var(--p-success-subtle-color) !important; color: var(--p-success-emphasis-color) !important; }
.text-bg-info    { background: var(--p-info-subtle-color) !important;    color: var(--p-info-emphasis-color) !important; }
.text-bg-warning { background: var(--p-warn-subtle-color) !important;    color: var(--p-warn-emphasis-color) !important; }
.text-bg-danger  { background: var(--p-danger-subtle-color) !important;  color: var(--p-danger-emphasis-color) !important; }
.text-bg-secondary { background: var(--p-content-deep-background) !important; color: var(--p-text-color) !important; }
.text-bg-light   { background: var(--p-content-alt-background) !important;  color: var(--p-text-color) !important; }
.text-bg-dark    { background: var(--p-contrast-color) !important;          color: var(--p-contrast-contrast-color) !important; }

/* ── Finestre ───────────────────────────────────────────────────── */

.modal-content {
    background: var(--p-overlay-background);
    border: 1px solid var(--p-overlay-border-color);
    border-radius: var(--p-overlay-border-radius);
    box-shadow: var(--p-shadow-xl);
    color: var(--p-overlay-color);
}

.modal-header {
    border-bottom-color: var(--p-content-border-color);
    padding: 1rem 1.25rem;
}

.modal-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }

.modal-body { padding: 1.25rem; }

.modal-footer {
    border-top-color: var(--p-content-border-color);
    gap: .5rem;
    padding: .875rem 1.25rem;
}

/* Il pulsante di chiusura di Bootstrap è una croce disegnata in SVG con il
   colore scritto dentro l'immagine: in tema scuro resterebbe nero su nero.
   Il filtro lo inverte invece di ridichiarare l'immagine. */
.modal-header .btn-close { opacity: .6; }
.modal-header .btn-close:hover { opacity: 1; }
[data-bs-theme='dark'] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

.modal-backdrop { --bs-backdrop-bg: var(--p-surface-950); --bs-backdrop-opacity: .55; }

/* Nelle finestre scorrevoli Bootstrap limita .modal-content e fa scorrere
   .modal-body, ma solo se intestazione, corpo e piede ne sono figli diretti.
   Un <form> che li avvolge diventa lui l'unico figlio: cresce quanto il
   contenuto, viene tagliato dall'overflow nascosto e il corpo non scorre più.
   Il form rifà quindi la stessa colonna flessibile del contenitore. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.modal-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Con static il calendario avvolge il campo in un inline-block: l'etichetta
   gli finirebbe accanto invece che sopra, e il campo non prenderebbe la
   larghezza della colonna. */
.modal .flatpickr-wrapper { display: block; width: 100%; }

@media (max-width: 575.98px) {
    /* Sul telefono la finestra lascia un bordo di pagina visibile e si ferma
       all'altezza realmente disponibile: 100% su iOS include la barra degli
       indirizzi, e il piede con i pulsanti finirebbe sotto. */
    .modal { --bs-modal-margin: .75rem; }

    .modal-dialog-scrollable { height: calc(100dvh - var(--bs-modal-margin) * 2); }

    .modal-dialog-centered { min-height: calc(100dvh - var(--bs-modal-margin) * 2); }

    .modal-content { max-height: calc(100dvh - var(--bs-modal-margin) * 2); }

    .modal-header,
    .modal-body,
    .modal-footer { padding-left: 1rem; padding-right: 1rem; }
}

/* ── Menu a tendina ─────────────────────────────────────────────── */

.dropdown-menu {
    --bs-dropdown-bg: var(--p-overlay-background);
    --bs-dropdown-border-color: var(--p-overlay-border-color);
    --bs-dropdown-border-radius: var(--p-overlay-border-radius);
    --bs-dropdown-color: var(--p-overlay-color);
    --bs-dropdown-link-color: var(--p-list-option-color);
    --bs-dropdown-link-hover-bg: var(--p-list-option-focus-background);
    --bs-dropdown-link-hover-color: var(--p-content-hover-color);
    --bs-dropdown-link-active-bg: var(--p-list-option-selected-background);
    --bs-dropdown-link-active-color: var(--p-list-option-selected-color);
    --bs-dropdown-padding-x: var(--p-list-padding);
    --bs-dropdown-padding-y: var(--p-list-padding);
    --bs-dropdown-item-padding-x: .75rem;
    --bs-dropdown-item-padding-y: .5rem;
    box-shadow: var(--p-overlay-shadow);
}

.dropdown-item { border-radius: var(--p-list-option-border-radius); }
.dropdown-divider { border-top-color: var(--p-content-border-color); }

/* ── Tabelle ────────────────────────────────────────────────────── */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--p-text-color);
    --bs-table-border-color: var(--p-content-border-color);
    --bs-table-striped-bg: var(--p-content-alt-background);
    --bs-table-striped-color: var(--p-text-color);
    --bs-table-hover-bg: var(--p-content-hover-background);
    --bs-table-hover-color: var(--p-text-emphasis-color);
}

.table > thead > tr > th {
    background: var(--p-content-alt-background);
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table > tbody > tr > td { vertical-align: middle; }

/* ── Barra di avanzamento ───────────────────────────────────────── */

.progress {
    --bs-progress-bg: var(--p-content-deep-background);
    --bs-progress-border-radius: var(--p-border-radius-full);
    --bs-progress-height: .5rem;
}

.progress-bar { background: var(--p-primary-color); }
.progress-bar.bg-success { background: var(--p-success-color) !important; }
.progress-bar.bg-info    { background: var(--p-info-color) !important; }
.progress-bar.bg-warning { background: var(--p-warn-color) !important; }
.progress-bar.bg-danger  { background: var(--p-danger-color) !important; }

/* ── Briciole di pane e navigazione ─────────────────────────────── */

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--p-surface-400);
    --bs-breadcrumb-item-active-color: var(--p-text-color);
    --bs-breadcrumb-font-size: var(--p-font-size-sm);
    --bs-breadcrumb-margin-bottom: 1rem;
}

.breadcrumb-item a { color: var(--p-text-muted-color); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--p-primary-color); }

.nav-tabs {
    --bs-nav-tabs-border-color: var(--p-content-border-color);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--p-primary-color);
    --bs-nav-tabs-link-active-color: var(--p-primary-color);
    --bs-nav-link-color: var(--p-text-muted-color);
    --bs-nav-link-hover-color: var(--p-text-color);
    --bs-nav-tabs-border-width: 2px;
    --bs-nav-tabs-border-radius: 0;
}

.nav-tabs .nav-link { border-color: transparent; font-weight: 600; }

.nav-pills {
    --bs-nav-pills-border-radius: var(--p-border-radius-md);
    --bs-nav-pills-link-active-bg: var(--p-primary-color);
    --bs-nav-pills-link-active-color: var(--p-primary-contrast-color);
    --bs-nav-link-color: var(--p-text-muted-color);
    --bs-nav-link-hover-color: var(--p-text-color);
}

/* ── Elenchi ────────────────────────────────────────────────────── */

.list-group {
    --bs-list-group-bg: var(--p-content-background);
    --bs-list-group-color: var(--p-text-color);
    --bs-list-group-border-color: var(--p-content-border-color);
    --bs-list-group-border-radius: var(--p-content-border-radius);
    --bs-list-group-action-hover-bg: var(--p-content-hover-background);
    --bs-list-group-action-hover-color: var(--p-text-emphasis-color);
    --bs-list-group-active-bg: var(--p-primary-color);
    --bs-list-group-active-border-color: var(--p-primary-color);
    --bs-list-group-active-color: var(--p-primary-contrast-color);
}

/* ── Impaginatore di Yii ────────────────────────────────────────── */

.pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: transparent;
    --bs-pagination-color: var(--p-text-muted-color);
    --bs-pagination-hover-bg: var(--p-content-hover-background);
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-hover-color: var(--p-text-color);
    --bs-pagination-focus-bg: var(--p-content-hover-background);
    --bs-pagination-focus-box-shadow: var(--p-focus-ring-shadow);
    --bs-pagination-active-bg: var(--p-primary-color);
    --bs-pagination-active-border-color: var(--p-primary-color);
    --bs-pagination-active-color: var(--p-primary-contrast-color);
    --bs-pagination-border-radius: var(--p-border-radius-md);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: transparent;
    --bs-pagination-disabled-color: var(--p-surface-400);
    gap: .25rem;
}

.pagination .page-link { border-radius: var(--p-border-radius-md); font-weight: 600; }

/* ── Riepilogo degli errori di Yii ──────────────────────────────── */

.error-summary {
    background: var(--p-danger-subtle-color);
    border-left: 3px solid var(--p-danger-color);
    border-radius: var(--p-border-radius-md);
    color: var(--p-danger-emphasis-color);
    margin: 0 0 1rem;
    padding: .75rem 1rem;
}

/* ── Frecce di ordinamento delle griglie di Yii ─────────────────── */

a.asc::after,
a.desc::after {
    border: solid 5px transparent;
    content: '';
    display: inline-block;
    height: 0;
    margin: 4px;
    width: 0;
}

a.asc::after  { border-bottom: solid 6px var(--p-primary-color); border-top-width: 0; }
a.desc::after { border-top: solid 6px var(--p-primary-color); border-bottom-width: 0; }

.grid-view th { white-space: nowrap; }