/* === ESTILO COMPLETO E ISOLADO: PÁGINA DE PRODUTOS === */

/* 1. Layout Principal */
.product-container {
    width: 100%;
    min-height: 600px;
}

    .product-container .product-info-card {
        padding: 5px;
        border-radius: 12px;
        border: none;
        box-shadow: 0 0 0 1px rgba(207 47 47 / 22%), 0 8px 25px rgba(203 74 74 / 45%);
        background-color: #fff;
        overflow: hidden;
    }

/* 2. Estrutura do Grid (Substituto da Tabela) */
.product-grid {
    display: grid;
    grid-template-columns: 40px 80px 1.2fr 1fr 1.5fr 1fr 1fr;
    align-items: center;
    gap: 0 1rem;
    padding: 0.8rem 1rem;
    font-size: 1.2rem;
}

.product-grid-header {
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--label-color);
    background-color: #f8f9fa;
    border-bottom: 2px solid var(--border-color);
}

.product-grid-body {
    /* Agrupa as linhas */
}

.product-grid-row-wrapper {
    border-bottom: 1px solid #eea1a1;
}

    .product-grid-row-wrapper:last-child {
        border-bottom: none;
    }

.product-grid-row {
    transition: background-color 0.2s ease;
}

    .product-grid-row:hover {
        background-color: #ff00005c;
    }

/* 3. Colunas e Células Específicas */
.product-id-column {
    color: var(--label-color);
    font-size: 1.2em;
}

.product-price-column {
    text-align: left;
    font-weight: 500;
}

.product-status-column {
    text-align: left;
}
.p-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-status-badge {
    display: inline-block;
    padding: 0.3em 0.8em;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 1rem;
    text-align: left;
}

    .product-status-badge.status-active {
        color: #155724;
        background-color: #d4edda;
    }

    .product-status-badge.status-inactive {
        color: #727272;
        background-color: #e9ecef;
    }

/* 4. Ícone de Expansão */
.product-expand-cell {
    padding-right: 0.5rem;
}

.product-expand-button {
    background: transparent;
    border: none;
    padding: 6px;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.product-expand-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.product-expand-button:hover, .product-expand-button.expanded {
    background-color: var(--primary-color, #E40E18);
}

    .product-expand-button:hover .product-expand-icon, .product-expand-button.expanded .product-expand-icon {
        filter: brightness(0) invert(1);
    }

    .product-expand-button.expanded .product-expand-icon {
        transform: rotate(180deg);
    }

/* 5. Painel de Detalhes Expansível */
.product-details-wrapper {
    display: flex;
    flex-direction: column;
    background-color: #f0f2f5;
    gap: 10px;
    margin: 10px;
}

.product-details-card {
    background-color: #fff;
    margin: 1rem;
    overflow: hidden;
    border: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.product-details-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.5rem;
    font-weight: 600;
    background-color: #8b8b8b1f;
    color: var(--text-color);
    box-shadow: 0 2px 4px -2px rgba(0,0,0,0.05);
}
.product-detail-item {
    display: flex;
    flex: 0 1 calc(33% - 1.5rem);
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
    word-break: break-word;
}

    
    .product-detail-item .product-detail-label {
        flex-shrink: 0; 
        white-space: nowrap; 
    }

    .product-detail-item .product-detail-value {
        text-align: left;
    }

.product-detail-grid {
    background-color: #0000000f;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.25rem;
    align-items: center;
    border-left: solid 2px #00000014;
    border-right: solid 2px #00000014;
    border-bottom: solid 2px #00000014;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.product-detail-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 1.2rem;
}

.product-detail-value {
    font-size: 1.2rem;
    font-weight: 500;
    background-color: #fff;
    padding: 0.5rem 0.4rem;
    border: solid 2px #00000026;
    border-radius: 7px;
}

.details-loading, .details-empty {
    padding: 2rem;
    text-align: center;
    color: var(--label-color);
}

.info-loading-spinner.small {
    width: 24px;
    height: 24px;
    border-width: 3px;
    display: inline-block;
    margin-right: 0.5rem;
}

/* 6. Paginação (Footer) */
.product-pagination-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    background-color: #f8f9fa;
}

.product-pagination-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.product-pagination-info {
    font-size: 0.9rem;
    color: var(--label-color);
    font-weight: 500;
}

.product-pagination-button {
    padding: 0.4rem 0.8rem;
    border: 1px solid #ced4da;
    background-color: #ffffff;
    color: #495057;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s, border-color 0.2s;
}

    .product-pagination-button:hover:not(:disabled) {
        background-color: #e9ecef;
        border-color: #adb5bd;
    }

    .product-pagination-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* 7. Responsividade (Mobile) - REATORADO */
@media (max-width: 768px) {
    /* ===== LAYOUT PERSONALIZADO EM 3 LINHAS PARA MOBILE ===== */

    /* 1. CONFIGURAÇÃO GERAL DO CONTAINER E ITENS */
    .product-grid-row {
        gap: 0.5rem 1rem; /* Diminui o espaçamento vertical */
    }

        .product-grid-row:hover {
            background-color: #fff;
        }
            /* Reseta todos os itens para um estado base */
            .product-grid-row > div {
            width: auto;
            flex-grow: 0;
            flex-shrink: 0;
            margin: 0;
            padding: 0;
            text-align: left;
            display: flex; /* Ajuda a alinhar o conteúdo interno */
            align-items: center; /* Centraliza verticalmente */
        }

            /* 2. DEFINIÇÃO DAS LINHAS USANDO 'ORDER' */

            /* ---- LINHA 1: Botão, ID, Categoria, Código ---- */
            .product-grid-row .product-expand-cell,
            .product-grid-row .product-id-column,
            .product-grid-row > div:nth-child(3),
            .product-grid-row > div:nth-child(4) {
                order: 1; /* Todos pertencem à primeira linha */
                min-width: 60px;
                font-size: 1.3rem; /* Fonte menor para caber */
                justify-content: center; /* Centraliza o conteúdo (texto/ícone) */
            }
        /* Ajuste fino para o botão não ter padding extra */
        .product-grid-row .product-expand-cell {
            padding-right: 0;
        }


        /* ---- LINHA 2: Nome e Preço ---- */
        .product-grid-row > div:nth-child(5), /* Nome */
        .product-grid-row .product-price-column {
            order: 2; /* Todos pertencem à segunda linha */
            margin-top: 0.5rem; /* Espaçamento da linha de cima */
            align-items: baseline; /* Alinha pela base do texto */
        }

        /* Nome ocupa a maior parte da linha */
        .product-grid-row > div:nth-child(5) {
            font-size: 1.5rem;
            font-weight: 600;
            max-width: 200px;
        }

        /* Preço ocupa o espaço restante */
        .product-grid-row .product-price-column {
            font-size: 1.3rem;
            font-weight: 500;
            justify-content: flex-end; 
        }


        /* ---- LINHA 3: Status ---- */
        .product-grid-row .product-status-column {
            order: 3; /* Pertence à última linha */
            flex-basis: 100%; /* Ocupa a linha inteira */
            margin-top: 0.5rem;
            justify-content: flex-start; /* Alinha à esquerda */
        }

    .product-detail-grid {
        display: flex; /* Garante que é um container flex */
        flex-direction: column; /* Empilha os .product-detail-item verticalmente */
        align-items: flex-start; /* Alinha os itens à esquerda */
        gap: 1rem; /* Espaço entre cada linha "Nome: XXX" */
        border: none;
    }

    .product-detail-item .product-detail-label{
        min-width: 150px;
    }

    .product-info-card {
        padding: 0;
        box-shadow: none;
        background-color: transparent;
    }

    .product-grid {
        display: block; /* Remove o layout de grid e usa fluxo normal */
        padding: 0;
    }

    .product-grid-header {
        display: none; /* Esconde o cabeçalho no mobile */
    }

    /* 7.1. Transforma cada linha em um card */
    .product-grid-row-wrapper {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
        background-color: #fff;
        padding: 1rem 1.5rem;
        border: solid 3px #000000ae; /* Borda inferior */
        border-radius: 8px;
    }

    /* 7.2. Organiza o conteúdo dentro do card */
    .product-grid-row {
        display: flex;
        flex-wrap: wrap; /* Permite que os itens quebrem a linha */
        gap: 1rem 1rem; /* Espaçamento vertical e horizontal */
        max-width: 100$;
        align-items: center;
    }

    /* 7.3. Adiciona RÓTULOS para clareza (a parte mais importante!) */
    .product-id-column::before,
    .product-price-column::before,
    .product-status-column::before {
        font-weight: 600;
        color: #6c757d; /* Cor do rótulo */
        margin-right: 0.5rem;
    }

    /* Define o texto de cada rótulo */
    /* Adicione mais se tiver outras colunas */
    .product-id-column::before {
        content: 'ID:';
    }

    .product-price-column::before {
        content: 'Preço:';
    }

    .product-status-column::before {
        content: 'Status:';
    }

    /* 7.4. Estiliza as colunas individuais dentro do card */
    /* Define a ordem e o tamanho dos elementos */
    .product-grid-row > div {
        width: auto; /* Deixa o tamanho ser flexível */
        flex-grow: 1; /* Permite que cresçam para ocupar espaço */
    }

    /* Exemplo: forçar o nome do produto a ocupar a linha inteira */
    .product-name-column { /* Supondo que você tenha uma classe para o nome */
        width: 100%;
        font-size: 1.3rem;
        font-weight: 600;
        color: #343a40;
    }

    .product-price-column {
        font-size: 1.1rem;
    }

    /* 7.5. Ajusta o botão de expandir */
    .product-expand-cell {
        width: 100%; /* Ocupa a largura total para alinhar à direita */
        text-align: right;
        min-width: 0;
        padding-right: 0;
    }

    .product-expand-button {
        padding: 8px;
        background-color: #f1f3f5;
    }

    /* 7.6. Detalhes expansíveis e Paginação */
    .product-detail-grid {
        flex-direction: column; /* Empilha os detalhes verticalmente */
        align-items: flex-start;
        gap: 1rem;
    }

    .product-pagination-footer {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .product-pagination-controls {
        width: 100%;
        justify-content: center;
    }

    .product-details-card {
        border: 2px solid #00000034;
        margin: 0px;
    }

    .product-grid-row-wrapper:last-child {
        border-bottom: solid 3px #000000ae;
    }
}

@media (max-width: 390px) {
    .product-grid-row .product-price-column {
        font-size: 1.3rem;
        font-weight: 500;
        justify-content: flex-start;
    }
}