/* ============================================
   GRIDS RESPONSIVOS - SEM SCROLL, AJUSTE PROPORCIONAL
   Arquivo: wwwroot/css-novo/responsive-grids.css
   ============================================ */

/* Container do grid - ocupa 100% sem scroll */
.rz-data-grid,
.rz-grid,
.rz-datagrid {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

    /* Wrapper - sem scroll, apenas ocupa o espaço */
    .rz-data-grid .rz-table-wrapper,
    .rz-grid .rz-table-wrapper,
    .rz-datagrid .rz-datagrid-table-wrapper {
        overflow: visible !important;
        width: 100% !important;
    }

    /* Tabela - ocupa 100% do espaço disponível */
    .rz-data-grid table,
    .rz-grid table,
    .rz-data-grid .rz-table,
    .rz-grid .rz-table,
    .rz-datagrid table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important; /* Importante para distribuir espaço */
    }

    /* Células - ajustam automaticamente */
    .rz-data-grid td,
    .rz-grid td,
    .rz-datagrid td,
    .rz-data-grid th,
    .rz-grid th,
    .rz-datagrid th {
        padding: 6px 8px !important;
        font-size: 13px !important;
        white-space: normal !important; /* Permite quebra de linha */
        word-break: break-word !important;
        overflow: visible !important;
        text-overflow: clip !important;
        vertical-align: middle !important;
    }

        /* Coluna de ações - menor largura possível */
        .rz-data-grid td:first-child,
        .rz-grid td:first-child,
        .rz-datagrid td:first-child,
        .rz-data-grid th:first-child,
        .rz-grid th:first-child,
        .rz-datagrid th:first-child {
            width: 80px !important;
            min-width: 80px !important;
            max-width: 80px !important;
            text-align: center !important;
        }

    /* Coluna de status - largura fixa */
    .rz-data-grid .status-pagamento,
    .rz-grid .status-pagamento,
    .rz-datagrid .status-pagamento {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
    }

        /* Status badges - não quebram */
        .rz-data-grid .status-pagamento .rz-button,
        .rz-grid .status-pagamento .rz-button,
        .rz-datagrid .status-pagamento .rz-button {
            white-space: nowrap !important;
            font-size: 11px !important;
            padding: 2px 8px !important;
            min-height: 24px !important;
        }

/* ============================================
   RESPONSIVIDADE - REDUZ TAMANHOS EM TELAS MENORES
   ============================================ */

@media (max-width: 1366px) {
    .rz-data-grid td,
    .rz-grid td,
    .rz-datagrid td,
    .rz-data-grid th,
    .rz-grid th,
    .rz-datagrid th {
        padding: 4px 6px !important;
        font-size: 12px !important;
    }

        .rz-data-grid td:first-child,
        .rz-grid td:first-child,
        .rz-datagrid td:first-child,
        .rz-data-grid th:first-child,
        .rz-grid th:first-child,
        .rz-datagrid th:first-child {
            width: 70px !important;
            min-width: 70px !important;
            max-width: 70px !important;
        }
}

@media (max-width: 1024px) {
    .rz-data-grid td,
    .rz-grid td,
    .rz-datagrid td,
    .rz-data-grid th,
    .rz-grid th,
    .rz-datagrid th {
        padding: 3px 4px !important;
        font-size: 11px !important;
    }

        .rz-data-grid td:first-child,
        .rz-grid td:first-child,
        .rz-datagrid td:first-child,
        .rz-data-grid th:first-child,
        .rz-grid th:first-child,
        .rz-datagrid th:first-child {
            width: 60px !important;
            min-width: 60px !important;
            max-width: 60px !important;
        }

    .rz-data-grid .status-pagamento,
    .rz-grid .status-pagamento,
    .rz-datagrid .status-pagamento {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
    }
}

@media (max-width: 768px) {
    .rz-data-grid td,
    .rz-grid td,
    .rz-datagrid td,
    .rz-data-grid th,
    .rz-grid th,
    .rz-datagrid th {
        padding: 2px 3px !important;
        font-size: 10px !important;
    }

        .rz-data-grid td:first-child,
        .rz-grid td:first-child,
        .rz-datagrid td:first-child,
        .rz-data-grid th:first-child,
        .rz-grid th:first-child,
        .rz-datagrid th:first-child {
            width: 50px !important;
            min-width: 50px !important;
            max-width: 50px !important;
        }

    /* Botões de ação menores */
    .rz-data-grid .rz-button,
    .rz-grid .rz-button,
    .rz-datagrid .rz-button {
        min-width: 24px !important;
        width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
    }

        .rz-data-grid .rz-button .rzi,
        .rz-grid .rz-button .rzi,
        .rz-datagrid .rz-button .rzi {
            font-size: 14px !important;
        }
}