/* ==========================================================================
   responsive.css — Media queries per layout responsive
   Breakpoints:
     - >1200px: 4 colonne griglia (default in main.css)
     - 768px–1200px: 3 colonne
     - 480px–768px: 2 colonne
     - <480px: 1 colonna
   ========================================================================== */

/* ==========================================================================
   Viewport ≤ 1200px — 3 colonne
   ========================================================================== */

@media (max-width: 1200px) {
    :root {
        --grid-columns: 3;
    }

    .products-grid {
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
}

/* ==========================================================================
   Viewport ≤ 768px — 2 colonne, layout mobile
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --grid-columns: 2;
    }

    .products-grid {
        grid-template-columns: repeat(var(--grid-columns), 1fr);
        gap: var(--spacing-md);
    }

    /* Catalogo: layout single-column (sidebar sopra, contenuto sotto) */
    .catalog-layout {
        flex-direction: column;
    }

    /* ---------- Pannello filtri collassabile su mobile ---------- */

    .filter-toggle-btn {
        display: flex;
    }

    .catalog-sidebar {
        width: 100%;
        display: none;
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-md);
        box-shadow: var(--shadow-md);
        max-height: 70vh;
        overflow-y: auto;
    }

    .catalog-sidebar--open {
        display: block;
    }

    /* Header: riduci padding */
    .header-container {
        padding: 0 var(--spacing-md);
        gap: var(--spacing-md);
    }

    /* Nascondi user-info su schermi stretti, mantieni pulsanti */
    .user-info {
        display: none;
    }

    /* App main: riduci padding */
    .app-main {
        padding: var(--spacing-md);
    }

    /* Footer: riduci padding */
    .footer-container {
        padding: 0 var(--spacing-md);
    }

    /* ---------- Touch targets: assicura 44x44px minimo ---------- */

    a,
    .nav-link {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
    }
}

/* ==========================================================================
   Viewport ≤ 480px — 1 colonna
   ========================================================================== */

@media (max-width: 480px) {
    :root {
        --grid-columns: 1;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    /* Header: stack elements se necessario */
    .header-container {
        padding: 0 var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .logo {
        font-size: var(--font-size-lg);
    }

    .nav-link {
        padding: var(--spacing-sm);
        font-size: var(--font-size-sm);
    }

    /* App main: padding minimo */
    .app-main {
        padding: var(--spacing-sm);
    }
}


/* ==========================================================================
   Responsive — Dettaglio Prodotto
   ========================================================================== */

@media (max-width: 768px) {
    .product-detail__content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .product-detail__image-container {
        max-height: 400px;
    }

    .product-detail__title {
        font-size: var(--font-size-xl);
    }
}

@media (max-width: 480px) {
    .product-detail__image-container {
        max-height: 300px;
        border-radius: var(--border-radius-md);
    }

    .product-detail__specs {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }

    .product-detail__spec-label {
        margin-top: var(--spacing-sm);
    }
}


/* ==========================================================================
   Responsive — Pagina Selezione
   ========================================================================== */

@media (max-width: 768px) {
    /* Selezione: layout single-column su viewport < 768px */
    /* Trasforma la tabella in card stacked layout */
    .selection-table {
        display: block;
    }

    .selection-table thead {
        display: none;
    }

    .selection-table tbody {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .selection-table__row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-md);
        box-shadow: var(--shadow-sm);
    }

    .selection-table__row:hover {
        background-color: var(--color-surface);
    }

    .selection-table__td {
        display: block;
        padding: 0;
        border: none;
    }

    .selection-table__td--image {
        width: 60px;
        flex-shrink: 0;
    }

    /* Nome prodotto prende lo spazio rimanente */
    .selection-table__td:nth-child(2) {
        flex: 1;
        min-width: 0;
    }

    .selection-table__td--price {
        text-align: left;
        width: auto;
    }

    .selection-table__td--qty {
        text-align: left;
    }

    .selection-table__td--total {
        text-align: left;
        font-weight: 600;
        color: var(--color-primary);
    }

    .selection-table__td--action {
        text-align: right;
        margin-left: auto;
    }

    /* Attributi data-label per le celle in modalità card */
    .selection-table__td--price::before {
        content: 'Prezzo: ';
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--color-text-secondary);
        text-transform: uppercase;
    }

    .selection-table__td--qty::before {
        content: 'Qtà: ';
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--color-text-secondary);
        text-transform: uppercase;
    }

    .selection-table__td--total::before {
        content: 'Totale: ';
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--color-text-secondary);
        text-transform: uppercase;
    }

    .selection-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .selection-summary__item--total {
        margin-left: 0;
        margin-top: var(--spacing-sm);
        padding-top: var(--spacing-sm);
        border-top: 1px solid var(--color-border);
        width: 100%;
    }

    .selection-actions {
        flex-direction: column;
    }

    .selection-actions__btn {
        width: 100%;
        min-height: var(--touch-target-min);
    }
}

@media (max-width: 480px) {
    .selection-table__qty-input {
        width: 55px;
    }

    .selection-table__td--image {
        display: none;
    }
}