/* File: frontend/html/css/responsive.css (VERSIONE FINALE E CORRETTA) */

/* === Breakpoint per Tablet e Schermi Piccoli (fino a 992px) === */
@media (max-width: 992px) {
    .main-content {
        padding: 1rem;
    }

    /* --- FIX Form Aggiungi Transazione --- */
    .form-row-compact {
        display: flex;      /* Usa flexbox */
        flex-wrap: wrap;    /* Manda a capo gli elementi */
        gap: 1rem;
    }

    .form-row-compact .form-column {
        flex-grow: 1; /* Permette agli elementi di crescere */
        min-width: 180px; /* Larghezza minima prima di andare a capo */
    }

    /* --- FIX Filtri Pagina Spese --- */
    .filters-container,
    .date-filters,
    .advanced-filters {
        display: flex;
        flex-wrap: wrap; /* Manda a capo anche i filtri */
        gap: 1rem;
    }

    .filters-container {
        flex-direction: column; /* Impila filtri data e filtri avanzati */
        align-items: stretch;
    }
}

/* === Breakpoint per Smartphone (fino a 768px) === */
@media (max-width: 768px) {
    /* --- Navigazione --- */
    .navbar {
        flex-direction: column;
        height: auto;
        padding: 1rem;
    }

    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        margin-top: 1rem;
    }

    .card {
        padding: 1rem;
    }

    /* --- FIX: Assicura che ogni elemento del form occupi 2 colonne su 2 --- */
    .form-row-compact .form-column {
        min-width: calc(50% - 0.5rem); /* Due colonne */
    }
    
    .advanced-filters .form-column {
        min-width: calc(50% - 0.5rem); /* Due colonne anche per i filtri */
    }

    /* --- Altre Regole Generali --- */
    .transactions-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
        min-height: auto;
    }

    .sort-arrows {
        display: none;
    }

    .pagination-container {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        text-align: center;
    }

    .pagination-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .table-container {
        overflow-x: scroll;
    }

    table {
        min-width: 600px;
    }
}

/* === Breakpoint per Smartphone Piccoli (fino a 480px) === */
@media (max-width: 480px) {
    /* --- FIX Login Form Spacing --- */
    #loginForm {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    #loginForm .form-group {
        margin-bottom: 0;
    }
    #loginForm button[type="submit"] {
        margin-top: 0.5rem;
    }

    /* --- FIX: Assicura che ogni elemento del form occupi 1 colonna --- */
    .form-row-compact .form-column,
    .advanced-filters .form-column {
        min-width: 100%; /* Una colonna */
    }

    .pagination-buttons {
        flex-direction: column;
    }
}