/* File CSS esclusivo per la versione mobile della dashboard Dashdark X */
@media (max-width: 768px) {
    /* Header adattato per mobile */
    .header {
        flex-direction: row;
        justify-content: space-between!important;
        padding: 1rem;
    }
    .header a{
        justify-content: start!important;
    }

    /* Navbar mobile, inizialmente nascosta */
    .navbar {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: var(--background-color-light);
        padding: 1rem;
        border-radius: var(--border-radius-card);
    }

    .navbar:not(.show) {
        display: none!important;
    }
    /* Navbar mostrata quando attivata */
    .navbar.show {
        display: flex;
        position: absolute;
        top: calc(100% + .5rem);
        right: .5rem;
        width: fit-content;
        background: var(-);
        border: 1px solid var(--accent-color-bright);
    }

    /* Icona del menu mobile */
    .menu-mobile {
        cursor: pointer;
        text-align: end;
        height: 100%;
        place-self: center;
    }

    /* Card adattate per dimensioni schermo ridotte */
    .card-csd {
        width: 100%;
        margin-bottom: 1.5rem;
    }

    /* Container con padding ridotto per mobile */
    .container {
        padding: 1.5rem;
    }

    /* Dimensioni dei titoli per il mobile */
    h3.title {
        font-size: 1.5rem;
    }

    h4.title {
        font-size: 1.25rem;
    }

    /* Bottoni di submit nei form con larghezza adattata */
    form button[type="submit"] {
        font-size: 1rem;
        padding: 0.75rem;
    }

    /* Elementi di form con larghezza e spaziatura ridotta per miglior adattamento */
    input,
    textarea,
    select {
        padding: 0.5rem;
    }

    .summary input {
        font-size: 1.5rem;
    }

    /* Sezione di segment-button ridimensionata per migliorare il layout */
    .segment-button-section {
        width: 100%;
        padding: 0.5rem;
    }

    .segment-button {
        font-size: 0.85rem;
        padding: 0.25rem 0.5rem;
    }

    /* Modifica degli spazi per migliorare la leggibilità in dispositivi mobili */
    hr {
        margin-block: 0.75rem !important;
    }

    .summary {
        gap: 0.75rem;
    }

    .form-check{
        padding-inline: .5rem !important;
    }

    .form-check-label{
        font-size: .9rem;
    }

    .select-tw ul li span{
        font-size: 1rem;
    }
}