/* Mobile-first overrides para todas as telas (sem novas libs) */

/* Navegação: rolagem horizontal e melhor espaçamento em telas pequenas */
.nav-buttons {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
}
.nav-buttons::-webkit-scrollbar { display: none; }

.nav-btn {
    padding: 10px 14px;
    font-size: 14px;
}

/* Garantir campos com fonte >=16px no iOS (evita zoom ao focar) */
@media (max-width: 480px) {
    input, select, textarea, button {
        font-size: 16px;
    }
}

/* Header empilhado em telas menores */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    .logo h1 {
        font-size: 22px;
    }
}

/* Ajustes gerais de container/paddings em telas muito pequenas */
@media (max-width: 480px) {
    .container { padding: 10px; }
}

/* Grid de produtos: garantir boa densidade no mobile */
@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }
    .product-card { padding: 12px; }
    .product-name { font-size: 14px; }
    .product-price { font-size: 16px; }
}

/* Tabelas responsivas com rolagem horizontal */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-responsive .table th,
.table-responsive .table td {
    white-space: nowrap;
}

/* Melhorar usabilidade de botões pequenos */
.btn,
.btn-sm,
.quantity-btn,
.remove-btn,
.clear-cart-btn {
    touch-action: manipulation;
}

/* Evitar efeitos de hover exagerados no touch */
@media (hover: none) {
    .nav-btn:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-danger:hover,
    .btn-warning:hover,
    .quantity-btn:hover,
    .remove-btn:hover {
        transform: none;
        box-shadow: none;
    }
}