/* CSS Globale Condiviso - vfinance
   Caricato dopo Bootstrap 5.3 nelle pagine di gestast/, blog/ e login. */
.header-badge {
    display: inline-block;
    padding: 4px 8px;
    background: #0056b3;
    color: #fff;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* ===== Usabilità da cellulare ===== */

/* Aree di tocco di almeno 44px su telefono, tablet e schermi touch */
@media (max-width: 767.98px), (pointer: coarse) {
    .btn:not(.btn-close) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .375rem;
    }
    .btn-sm:not(.btn-close) {
        min-width: 44px;
    }
    .form-control,
    .form-select {
        min-height: 44px;
    }
    .form-check {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: .5rem;
        padding-left: 0;
        margin-bottom: 0;
    }
    .form-check .form-check-input {
        float: none;
        margin: 0;
        flex-shrink: 0;
        width: 1.35em;
        height: 1.35em;
    }
    .form-switch .form-check-input {
        width: 2.4em;
    }
    .pagination {
        flex-wrap: wrap;
        row-gap: .25rem;
    }
    .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .btn-close {
        padding: .85rem;
    }
    .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
    }
    .navbar-collapse .nav-link {
        padding-top: .75rem;
        padding-bottom: .75rem;
    }
}

@media (max-width: 767.98px) {
    /* Evita lo zoom automatico di iOS quando si tocca un campo */
    .form-control,
    .form-select {
        font-size: 1rem;
    }
    img {
        max-width: 100%;
    }
    /* Intestazioni e piè di card con titolo + pulsanti: vanno a capo invece di sbordare */
    .card-header.d-flex,
    .card-footer.d-flex {
        flex-wrap: wrap;
        gap: .5rem;
    }
}

/* Navbar Bootstrap: marchio compatto e menu collassato leggibile
   (navbar-expand-lg collassa sotto 992px, navbar-expand-xl sotto 1200px) */
@media (max-width: 991.98px) {
    .navbar-expand-lg .navbar-brand {
        display: flex;
        align-items: center;
        min-width: 0;
        max-width: calc(100% - 64px);
        white-space: normal;
        line-height: 1.2;
    }
    .navbar-expand-lg .navbar-collapse > .d-flex {
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem;
        padding: .5rem 0 .75rem;
    }
    .navbar-expand-lg .navbar-collapse > .d-flex .navbar-text {
        margin-right: auto !important;
    }
}
@media (max-width: 1199.98px) {
    .navbar-expand-xl .navbar-brand {
        display: flex;
        align-items: center;
        min-width: 0;
        max-width: calc(100% - 64px);
        white-space: normal;
        line-height: 1.2;
    }
    .navbar-expand-xl .navbar-collapse > .d-flex {
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem;
        padding: .5rem 0 .75rem;
    }
    .navbar-expand-xl .navbar-collapse > .d-flex .navbar-text {
        margin-right: auto !important;
    }
}
@media (max-width: 575.98px) {
    .navbar-brand {
        font-size: 1rem;
    }
    .navbar-brand img {
        height: 40px;
        width: auto;
    }
}

/* Utility: riga titolo + azioni che su telefono si impila (azioni a tutta larghezza) */
@media (max-width: 575.98px) {
    .m-stack {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .75rem;
    }
    .m-btns {
        display: flex !important;
        flex-direction: column;
        gap: .5rem;
        width: 100%;
    }
    .m-btns > .btn {
        width: 100%;
        margin: 0 !important;
    }
    /* in una riga flex con flex-wrap: .m-full occupa tutta la riga, .m-grow si allarga */
    .m-full {
        flex: 1 1 100% !important;
        margin-right: 0 !important;
    }
    .m-grow {
        flex-grow: 1 !important;
        margin-left: 0 !important;
    }
}

/* Utility: tabella che su telefono diventa un elenco di schede.
   Ogni <td> porta data-label con il nome della colonna; la cella azioni ha .td-actions */
@media (max-width: 767.98px) {
    .table-cards thead {
        display: none;
    }
    .table-cards,
    .table-cards tbody,
    .table-cards tr,
    .table-cards td {
        display: block;
        width: 100%;
    }
    .table-cards tr {
        background: #fff;
        border: 1px solid var(--bs-border-color);
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .25rem .75rem;
    }
    .table-cards > :not(caption) > * > * {
        border-bottom-width: 0;
        box-shadow: none !important;
        background: transparent;
        padding: .4rem 0;
    }
    .table-cards td[data-label] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        text-align: right;
        overflow-wrap: anywhere;
    }
    .table-cards td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: var(--bs-secondary-color);
        flex-shrink: 0;
    }
    .table-cards td.td-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-top: .25rem;
        padding-top: .6rem;
        border-top: 1px solid var(--bs-border-color);
    }
    .table-cards td.td-actions .btn {
        flex: 1 1 0;
    }
    .table-cards td.td-actions .btn-group {
        display: flex;
        width: 100%;
    }
}