/* assets/css/universal-mobile.css */

@media (max-width: 1024px) {
    /* 1. Layout Base Estilo App */
    #mainContent {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 15px !important;
        background: #f8fafc;
    }

    /* 2. Cabeçalhos Azuis (Informações do Pedido) */
    .card-header-blue {
        border-radius: 15px !important;
        padding: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .pedido-id-topo {
        font-size: 0.9rem !important;
        padding: 8px 15px !important;
        width: 100% !important;
        text-align: center;
    }

    .header-grid {
        grid-template-columns: 1fr 1fr !important; /* 2 itens por linha no celular */
        gap: 15px !important;
    }

    /* 3. Busca e Filtros (Um por linha) */
    .toolbar, .ferramentas-pecas {
        background: white !important;
        border-radius: 12px !important;
        padding: 12px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    }

    /* 4. Grid de Peças (Otimização de Espaço) */
    .grid-pecas {
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) !important;
        gap: 12px !important;
    }

    .peca-card {
        border-radius: 16px !important;
        border: 1px solid #eef2f6 !important;
    }

    .peca-img-container {
        height: 130px !important; /* Imagens um pouco menores para caber mais itens */
    }

    .peca-body h4 {
        font-size: 0.9rem !important;
        min-height: 40px;
    }

    /* 5. Botões e Ações (Touch-Friendly) */
    .btn-add {
        width: 100% !important;
        padding: 12px !important;
        font-size: 0.8rem !important;
    }

    .input-qtd {
        height: 40px !important;
        font-size: 1rem !important;
    }

    /* 6. Modal de Conferência (Modo Tela Cheia) */
    .modal-content {
        width: 98% !important;
        height: 92vh !important; /* Ocupa quase a altura toda */
        border-radius: 20px 20px 0 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        padding: 20px !important;
    }

    /* Linhas do carrinho mais compactas e fáceis de conferir */
    .cart-item-row {
        grid-template-columns: 50px 1fr 60px 30px !important;
        padding: 12px 0 !important;
    }

    .cart-img {
        width: 45px !important;
        height: 45px !important;
    }

    /* 7. Tabelas (Proteção contra quebra) */
    .card-lista, .card-catalogo {
        margin: 0 -15px !important; /* Faz a tabela encostar nas bordas do celular */
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
}