/* ============================================
   SmartReport - CSS Global
   ============================================
   
   Classes CSS corretas para DevExpress Blazor PivotTable v25.1.6
   Identificadas através de inspeção do HTML renderizado.
   
   Prefixo correto: dxbl-pivot-table- (com hífens)
   
   IMPORTANTE: A aplicação host deve referenciar este CSS:
   <link href="_content/CySmartReport.Blazor/css/smartreport.css" rel="stylesheet" />
   
   ============================================ */

/* ============================================
   PIVOT TABLE - ELEMENTO PRINCIPAL
   ============================================ */
.cy-pivot-table,
.dxbl-pivot-table.cy-pivot-table {
    height: 100%;
    min-height: 400px;
}

/* ============================================
   PIVOT TABLE - ÁREA DE FILTROS (AMARELO)
   Classe real: dxbl-pivot-table-area-filter
   ============================================ */
.cy-pivot-table .dxbl-pivot-table-area-filter {
    background: linear-gradient(180deg, #fffbeb 0%, #fff3cd 100%) !important;
    border-bottom: 2px solid #ffc107 !important;
    padding: 8px !important;
    min-height: 40px;
}

.cy-pivot-table .dxbl-pivot-table-area-filter .dxbl-pivot-table-header-field {
    background-color: #fff !important;
    border: 1px solid #ffc107 !important;
    border-radius: 4px !important;
    margin: 2px !important;
    color: #856404 !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
}

.cy-pivot-table .dxbl-pivot-table-area-filter .dxbl-pivot-table-header-field:hover {
    background-color: #fff3cd !important;
}

.cy-pivot-table .dxbl-pivot-table-area-filter .dxbl-pivot-table-area-content-empty {
    color: #856404 !important;
    font-style: italic !important;
}

/* ============================================
   PIVOT TABLE - ÁREA DE COLUNAS (AZUL)
   Classe real: dxbl-pivot-table-area-column
   ============================================ */
.cy-pivot-table .dxbl-pivot-table-area-column {
    background: linear-gradient(180deg, #e7f1ff 0%, #cfe2ff 100%) !important;
}

.cy-pivot-table .dxbl-pivot-table-area-column .dxbl-pivot-table-header-field {
    background-color: #fff !important;
    border: 1px solid #0d6efd !important;
    border-radius: 4px !important;
    color: #0a58ca !important;
    font-weight: 600 !important;
    margin: 3px !important;
    padding: 4px 8px !important;
}

.cy-pivot-table .dxbl-pivot-table-area-column .dxbl-pivot-table-header-field:hover {
    background-color: #e7f1ff !important;
}

.cy-pivot-table .dxbl-pivot-table-area-column-field {
    background-color: #e7f1ff !important;
    color: #0a58ca !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 6px 8px !important;
}

/* ============================================
   PIVOT TABLE - ÁREA DE LINHAS (VERDE)
   Classe real: dxbl-pivot-table-area-row
   ============================================ */
.cy-pivot-table .dxbl-pivot-table-area-row {
    background: linear-gradient(90deg, #e8f5e9 0%, #d1e7dd 100%) !important;
}

.cy-pivot-table .dxbl-pivot-table-area-row .dxbl-pivot-table-header-field {
    background-color: #fff !important;
    border: 1px solid #198754 !important;
    border-radius: 4px !important;
    color: #146c43 !important;
    font-weight: 600 !important;
    margin: 3px !important;
    padding: 4px 8px !important;
}

.cy-pivot-table .dxbl-pivot-table-area-row .dxbl-pivot-table-header-field:hover {
    background-color: #e8f5e9 !important;
}

.cy-pivot-table .dxbl-pivot-table-area-row-field {
    background-color: #f1f8f4 !important;
}

.cy-pivot-table .dxbl-pivot-table-row-field-item {
    background-color: #f8faf9 !important;
    border-right: 1px solid #a3cfbb !important;
    border-bottom: 1px solid #dee2e6 !important;
    font-weight: 500 !important;
    color: #146c43 !important;
    padding: 6px 8px !important;
}

/* ============================================
   PIVOT TABLE - ÁREA DE DADOS (VALORES)
   Classe real: dxbl-pivot-table-area-data
   ============================================ */
.cy-pivot-table .dxbl-pivot-table-area-data {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

.cy-pivot-table .dxbl-pivot-table-area-data .dxbl-pivot-table-header-field {
    background-color: #fff !important;
    border: 1px solid #6c757d !important;
    border-radius: 4px !important;
    color: #495057 !important;
    font-weight: 600 !important;
    margin: 3px !important;
    padding: 4px 8px !important;
}

.cy-pivot-table .dxbl-pivot-table-area-data .dxbl-pivot-table-header-field:hover {
    background-color: #f8f9fa !important;
}

/* ============================================
   PIVOT TABLE - CÉLULAS DE DADOS
   Classe real: dxbl-align-right (para valores numéricos)
   ============================================ */
.cy-pivot-table tbody td.dxbl-align-right {
    border-right: 1px solid #e9ecef !important;
    border-bottom: 1px solid #e9ecef !important;
    padding: 6px 10px !important;
    text-align: right !important;
    font-family: 'Consolas', 'Monaco', monospace !important;
    font-size: 0.875rem !important;
    background-color: #fff !important;
}

.cy-pivot-table tbody td.dxbl-align-right:hover {
    background-color: #f8f9fa !important;
}

/* ============================================
   PIVOT TABLE - HEADER CELLS
   Classe real: dxbl-pivot-table-header-cell
   ============================================ */
.cy-pivot-table .dxbl-pivot-table-header-cell {
    font-weight: 600 !important;
    border-bottom: 2px solid #dee2e6 !important;
}

/* ============================================
   PIVOT TABLE - HEADER FIELDS (CHIPS/TAGS)
   Classe real: dxbl-pivot-table-header-field
   ============================================ */
.cy-pivot-table .dxbl-pivot-table-header-field {
    background-color: #6c757d !important;
    color: #fff !important;
    font-weight: 500 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    margin: 2px !important;
    font-size: 0.8125rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
}

.cy-pivot-table .dxbl-pivot-table-header-field:hover {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

/* ============================================
   PIVOT TABLE - GRAND TOTALS (CINZA ESCURO)
   Classe real: dxbl-pivot-table-grand-total
   ============================================ */
.cy-pivot-table .dxbl-pivot-table-grand-total {
    background-color: #495057 !important;
    color: #fff !important;
    font-weight: 700 !important;
    border: 1px solid #343a40 !important;
}

.cy-pivot-table td.dxbl-pivot-table-grand-total {
    background-color: #e9ecef !important;
    font-weight: 700 !important;
    color: #212529 !important;
}

/* ============================================
   PIVOT TABLE - SUBTOTALS (TOTAIS PARCIAIS)
   Classe real: dxbl-pivot-table-total
   Cor de fundo ligeiramente diferente para
   facilitar identificação visual
   ============================================ */

/* Células de subtotal (totais de grupo) */
.cy-pivot-table td.dxbl-pivot-table-total,
.cy-pivot-table .dxbl-pivot-table-total {
    background-color: #f0f4f8 !important;
    font-weight: 600 !important;
    color: #344054 !important;
    border-bottom: 1px solid #d0d5dd !important;
}

/* Subtotais na área de linhas */
.cy-pivot-table .dxbl-pivot-table-row-field-item.dxbl-pivot-table-total,
.cy-pivot-table tr.dxbl-pivot-table-total .dxbl-pivot-table-row-field-item {
    background-color: #e8f0e8 !important;
    font-weight: 600 !important;
    color: #146c43 !important;
    border-bottom: 1px solid #a3cfbb !important;
}

/* Subtotais na área de dados (valores numéricos) */
.cy-pivot-table tr.dxbl-pivot-table-total td.dxbl-align-right,
.cy-pivot-table .dxbl-pivot-table-total td.dxbl-align-right {
    background-color: #f0f4f8 !important;
    font-weight: 600 !important;
}

/* Grand Totals - linha completa (mais destaque) */
.cy-pivot-table tr.dxbl-pivot-table-grand-total td,
.cy-pivot-table .dxbl-pivot-table-grand-total td {
    background-color: #dee2e6 !important;
    font-weight: 700 !important;
    color: #212529 !important;
    border-top: 2px solid #adb5bd !important;
    border-bottom: 2px solid #adb5bd !important;
}

/* Grand Total - célula de cabeçalho da linha */
.cy-pivot-table tr.dxbl-pivot-table-grand-total .dxbl-pivot-table-row-field-item,
.cy-pivot-table .dxbl-pivot-table-grand-total .dxbl-pivot-table-row-field-item {
    background-color: #d1d5db !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}

/* Grand Total - valores numéricos */
.cy-pivot-table tr.dxbl-pivot-table-grand-total td.dxbl-align-right,
.cy-pivot-table .dxbl-pivot-table-grand-total td.dxbl-align-right {
    background-color: #dee2e6 !important;
    font-weight: 700 !important;
}

/* Hover em linhas de subtotal */
.cy-pivot-table tr.dxbl-pivot-table-total:hover td {
    background-color: #e5eaf0 !important;
}

/* Hover em linhas de grand total */
.cy-pivot-table tr.dxbl-pivot-table-grand-total:hover td {
    background-color: #ced4da !important;
}

/* ============================================
   LAYOUT DIALOGS - SAVE & LOAD
   ============================================ */

/* Layout Save Dialog */
.cy-layout-save-dialog .cy-layout-form {
    padding: 0.5rem;
}

.cy-layout-save-dialog .alert {
    border-radius: 0.25rem;
}

.cy-layout-save-dialog .d-grid {
    display: grid;
}

/* Layout Load Dialog */
.cy-layout-load-dialog .cy-layout-list {
    max-height: 350px;
    overflow-y: auto;
    padding: 0.5rem;
}

.cy-layout-load-dialog .layout-groups {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cy-layout-load-dialog .layout-group-title {
    font-weight: 700;
    color: #495057;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #dee2e6;
}

.cy-layout-load-dialog .layout-item {
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #fff;
}

.cy-layout-load-dialog .layout-item:hover {
    border-color: #0d6efd;
    background-color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cy-layout-load-dialog .layout-item.active {
    border-color: #198754;
    background-color: #d1e7dd;
}

.cy-layout-load-dialog .layout-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.cy-layout-load-dialog .layout-item-title {
    font-weight: 600;
    color: #212529;
    font-size: 0.95rem;
}

.cy-layout-load-dialog .layout-item-actions {
    display: flex;
    gap: 0.25rem;
}

.cy-layout-load-dialog .layout-item-description {
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.cy-layout-load-dialog .layout-item-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cy-layout-load-dialog .layout-item-meta small {
    font-size: 0.8125rem;
}

/* ============================================
   DXGRID (GridViewer) - ESTILOS COLORIDOS
   ============================================
   
   Classes CSS corretas para DevExpress Blazor DxGrid v25.1.6
   Identificadas através de inspeção do HTML renderizado.
   Prefixo correto: dxbl-grid- (com hífens)
   
   Padrão visual seguindo o mesmo tema do DxPivotTable:
   - Cabeçalhos: Azul (#e7f1ff / #0d6efd)
   - Linhas de grupo: Verde (#e8f5e9 / #198754)
   - Filtros: Amarelo (#fffbeb / #ffc107)
   - Dados: Branco/Cinza claro
   - Totais: Cinza (#dee2e6)
   
   ============================================ */

/* ============================================
   DXGRID - ELEMENTO PRINCIPAL
   ============================================ */
.cy-data-grid,
.dxbl-grid.cy-data-grid {
    border: 1px solid #dee2e6;
    border-radius: 0 0 0.25rem 0.25rem;
}

/* ============================================
   DXGRID - PAINEL DE GRUPOS (VERDE)
   Classe real: dxbl-grid-group-panel-container
   ============================================ */
.cy-data-grid .dxbl-grid-top-panel {
    background: linear-gradient(180deg, #e8f5e9 0%, #d1e7dd 100%) !important;
    border-bottom: 2px solid #198754 !important;
    padding: 8px !important;
    min-height: 40px;
}

.cy-data-grid .dxbl-grid-group-panel-container {
    background: transparent !important;
    min-height: 32px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* Chips de grupo (campos arrastados para agrupar) */
.cy-data-grid .dxbl-grid-group-panel-container .dxbl-grid-header {
    background-color: #fff !important;
    border: 1px solid #198754 !important;
    border-radius: 4px !important;
    color: #146c43 !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    margin: 2px !important;
    font-size: 0.8125rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.cy-data-grid .dxbl-grid-group-panel-container .dxbl-grid-header:hover {
    background-color: #e8f5e9 !important;
}

/* Ícone de ordenação nos chips de grupo */
.cy-data-grid .dxbl-grid-group-panel-container .dxbl-grid-sort-asc,
.cy-data-grid .dxbl-grid-group-panel-container .dxbl-grid-sort-desc {
    color: #198754 !important;
}

/* ============================================
   DXGRID - CABEÇALHOS DE COLUNA (AZUL)
   Classe real: dxbl-grid-header-row
   ============================================ */
.cy-data-grid .dxbl-grid-header-row {
    background: linear-gradient(180deg, #e7f1ff 0%, #cfe2ff 100%) !important;
}

.cy-data-grid .dxbl-grid-header-row th.dxbl-grid-header {
    background: transparent !important;
    border-bottom: 2px solid #0d6efd !important;
    border-right: 1px solid #b6d4fe !important;
    color: #0a58ca !important;
    font-weight: 600 !important;
    padding: 10px 12px !important;
    font-size: 0.875rem !important;
}

.cy-data-grid .dxbl-grid-header-row th.dxbl-grid-header:hover {
    background-color: rgba(13, 110, 253, 0.1) !important;
}

/* Última coluna do cabeçalho (sem borda direita) */
.cy-data-grid .dxbl-grid-header-row th.dxbl-grid-header:last-of-type {
    border-right: none !important;
}

/* Ícones de ordenação no cabeçalho */
.cy-data-grid .dxbl-grid-header-row .dxbl-grid-sort-asc,
.cy-data-grid .dxbl-grid-header-row .dxbl-grid-sort-desc {
    color: #0d6efd !important;
}

/* ============================================
   DXGRID - LINHA DE FILTRO (AMARELO)
   Classe real: dxbl-grid-filter-row
   ============================================ */
.cy-data-grid .dxbl-grid-filter-row {
    background: linear-gradient(180deg, #fffbeb 0%, #fff3cd 100%) !important;
    border-bottom: 1px solid #ffc107 !important;
}

.cy-data-grid .dxbl-grid-filter-row td {
    background: transparent !important;
    border-right: 1px solid #ffe69c !important;
    padding: 6px 8px !important;
}

.cy-data-grid .dxbl-grid-filter-row td:last-of-type {
    border-right: none !important;
}

/* Inputs de filtro */
.cy-data-grid .dxbl-grid-filter-row .dxbl-text-edit,
.cy-data-grid .dxbl-grid-filter-row .dxbl-date-edit,
.cy-data-grid .dxbl-grid-filter-row .dxbl-spinedit {
    background-color: #fff !important;
    border: 1px solid #ffc107 !important;
    border-radius: 4px !important;
}

.cy-data-grid .dxbl-grid-filter-row .dxbl-text-edit:focus-within,
.cy-data-grid .dxbl-grid-filter-row .dxbl-date-edit:focus-within,
.cy-data-grid .dxbl-grid-filter-row .dxbl-spinedit:focus-within {
    border-color: #ffca2c !important;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.25) !important;
}

/* ============================================
   DXGRID - LINHAS DE GRUPO (VERDE CLARO)
   Classe real: dxbl-grid-group-row
   ============================================ */
.cy-data-grid tr.dxbl-grid-group-row {
    background: linear-gradient(180deg, #f1f8f4 0%, #e8f5e9 100%) !important;
}

.cy-data-grid tr.dxbl-grid-group-row td {
    background: transparent !important;
    border-bottom: 1px solid #a3cfbb !important;
    color: #146c43 !important;
    font-weight: 600 !important;
    padding: 8px 10px !important;
    font-size: 0.875rem !important;
}

.cy-data-grid tr.dxbl-grid-group-row:hover {
    background: linear-gradient(180deg, #e8f5e9 0%, #d1e7dd 100%) !important;
}

/* Botão de expandir/colapsar grupo */
.cy-data-grid .dxbl-grid-expand-button-cell {
    background: transparent !important;
}

.cy-data-grid .dxbl-grid-expand-button {
    color: #198754 !important;
}

.cy-data-grid .dxbl-grid-expand-button:hover {
    background-color: rgba(25, 135, 84, 0.1) !important;
    border-radius: 4px !important;
}

/* ============================================
   DXGRID - CÉLULAS DE DADOS
   ============================================ */
.cy-data-grid tbody tr[role="row"]:not(.dxbl-grid-group-row):not(.dxbl-grid-filter-row):not(.dxbl-grid-empty-row) {
    background-color: #fff !important;
}

.cy-data-grid tbody tr[role="row"]:not(.dxbl-grid-group-row):not(.dxbl-grid-filter-row):not(.dxbl-grid-empty-row):nth-child(even) {
    background-color: #f8f9fa !important;
}

.cy-data-grid tbody tr[role="row"]:not(.dxbl-grid-group-row):hover {
    background-color: #e7f1ff !important;
}

.cy-data-grid tbody td[role="gridcell"] {
    border-bottom: 1px solid #e9ecef !important;
    border-right: 1px solid #f1f3f5 !important;
    padding: 8px 10px !important;
    font-size: 0.875rem !important;
}

/* Células numéricas (alinhamento à direita) */
.cy-data-grid tbody td.dxbl-align-right {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    text-align: right !important;
    color: #495057 !important;
}

/* Células de data (alinhamento central) */
.cy-data-grid tbody td.dxbl-align-center {
    text-align: center !important;
    color: #495057 !important;
}

/* Classes customizadas do componente */
.cy-data-grid .cy-numeric-cell {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    background-color: rgba(108, 117, 125, 0.03) !important;
}

.cy-data-grid .cy-date-cell {
    color: #0d6efd !important;
}

.cy-data-grid .cy-boolean-cell {
    text-align: center !important;
}

/* ============================================
   DXGRID - CÉLULA DE INDENTAÇÃO
   Classe real: dxbl-grid-indent-cell
   ============================================ */
.cy-data-grid .dxbl-grid-indent-cell {
    background-color: #f8faf9 !important;
    border-right: 2px solid #a3cfbb !important;
}

.cy-data-grid tr.dxbl-grid-group-row .dxbl-grid-indent-cell {
    background-color: transparent !important;
}

/* ============================================
   DXGRID - PAGINAÇÃO
   ============================================ */
.cy-data-grid .dxbl-grid-pager {
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
    padding: 8px 12px !important;
}

.cy-data-grid .dxbl-pager-page-item.dxbl-active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

.cy-data-grid .dxbl-pager-page-item:hover:not(.dxbl-active) {
    background-color: #e7f1ff !important;
    border-color: #b6d4fe !important;
}

/* ============================================
   DXGRID - RODAPÉ COM TOTAIS (CINZA)
   ============================================ */
.cy-data-grid tfoot tr {
    background: linear-gradient(180deg, #e9ecef 0%, #dee2e6 100%) !important;
}

.cy-data-grid tfoot td {
    border-top: 2px solid #adb5bd !important;
    font-weight: 700 !important;
    color: #212529 !important;
    padding: 10px 12px !important;
}

/* ============================================
   DXGRID - SELEÇÃO DE LINHA
   ============================================ */
.cy-data-grid tbody tr[aria-selected="true"] {
    background-color: #cfe2ff !important;
}

.cy-data-grid tbody tr[aria-selected="true"]:hover {
    background-color: #b6d4fe !important;
}

.cy-data-grid tbody tr[aria-selected="true"] td {
    border-color: #9ec5fe !important;
}

/* ============================================
   DXGRID - CÉLULAS VAZIAS E AUXILIARES
   ============================================ */
.cy-data-grid .dxbl-grid-empty-cell {
    background-color: transparent !important;
}

.cy-data-grid .dxbl-grid-header-indent-cell {
    background: linear-gradient(180deg, #e7f1ff 0%, #cfe2ff 100%) !important;
    border-bottom: 2px solid #0d6efd !important;
}

/* ============================================
   DXGRID - SCROLL VIEWER
   ============================================ */
.cy-data-grid .dxbl-scroll-viewer-vert-scroll-bar,
.cy-data-grid .dxbl-scroll-viewer-hor-scroll-bar {
    background-color: #f8f9fa !important;
}

.cy-data-grid .dxbl-scroll-viewer-scroll-thumb {
    background-color: #adb5bd !important;
    border-radius: 4px !important;
}

.cy-data-grid .dxbl-scroll-viewer-scroll-thumb:hover {
    background-color: #6c757d !important;
}

/* ============================================
   PIVOT TABLE - BOTÕES DE EXPANDIR/COLAPSAR
   Classe real: dxbl-pivot-table-expand-button
   ============================================ */
.cy-pivot-table .dxbl-pivot-table-expand-button {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cy-pivot-table .dxbl-pivot-table-expand-button button {
    background: transparent !important;
    border: none !important;
    padding: 2px !important;
    cursor: pointer;
}

.cy-pivot-table .dxbl-pivot-table-expand-button button:hover {
    background-color: rgba(0,0,0,0.05) !important;
    border-radius: 3px;
}

/* ============================================
   PIVOT TABLE - BOTÕES DE SORT E FILTER
   ============================================ */
.cy-pivot-table .dxbl-pivot-table-sort-btn {
    opacity: 0.7;
}

.cy-pivot-table .dxbl-pivot-table-sort-btn:hover {
    opacity: 1;
}

.cy-pivot-table .dxbl-pivot-table-filter-menu-funnel-btn {
    opacity: 0.7;
}

.cy-pivot-table .dxbl-pivot-table-filter-menu-funnel-btn:hover {
    opacity: 1;
    background-color: rgba(0,0,0,0.05) !important;
}

/* ============================================
   PIVOT TABLE - TABELA DE DADOS
   Classe real: dxbl-pivot-table-data
   ============================================ */
.cy-pivot-table .dxbl-pivot-table-data {
    width: 100%;
    border-collapse: collapse;
}

.cy-pivot-table .dxbl-pivot-table-data thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
}

.cy-pivot-table .dxbl-pivot-table-data th {
    border: 1px solid #dee2e6;
    padding: 8px;
}

.cy-pivot-table .dxbl-pivot-table-data td {
    border: 1px solid #dee2e6;
    padding: 6px 8px;
}

/* ============================================
   PIVOT TABLE - CÉLULAS FIXAS (FROZEN)
   Classe real: dxbl-pivot-table-fixed-cell
   ============================================ */
.cy-pivot-table .dxbl-pivot-table-fixed-cell {
    position: sticky;
    background-color: #fff;
    z-index: 5;
}

.cy-pivot-table .dxbl-pivot-table-last-fixed-left-cell {
    border-right: 2px solid #dee2e6 !important;
}

/* ============================================
   PIVOT TABLE - DRAG AND DROP FEEDBACK
   Feedback visual durante arrasto de campos
   ============================================ */

/* Cursor grab para campos arrastáveis */
.cy-pivot-table .dxbl-pivot-table-header-field[data-allow-drag],
.cy-pivot-table [data-allow-drag] .dxbl-pivot-table-header-field {
    cursor: grab !important;
    user-select: none !important;
}

/* Cursor grabbing durante o arrasto */
.cy-pivot-table .dxbl-pivot-table-header-field[data-allow-drag]:active,
.cy-pivot-table [data-allow-drag] .dxbl-pivot-table-header-field:active,
.cy-pivot-table .dxbl-pivot-table-header-field.dxbl-dragging,
.dxbl-pivot-table-header-field.dxbl-dragging {
    cursor: grabbing !important;
    opacity: 0.8 !important;
    transform: scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    z-index: 1000 !important;
}

/* Estilo do elemento sendo arrastado (drag hint/ghost) */
.dxbl-list-box-dragging-hint-portal .dxbl-pivot-table-header-field,
.dxbl-pivot-table-drag-hint {
    cursor: grabbing !important;
    opacity: 0.9 !important;
    background-color: #fff !important;
    border: 2px dashed #0d6efd !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
    transform: rotate(2deg) !important;
}

/* ============================================
   DRAG AND DROP - ÁREAS DE DROP (TARGETS)
   ============================================ */

/* Highlight genérico para áreas que aceitam drop */
.cy-pivot-table .dxbl-pivot-table-area-filter.dxbl-drop-target,
.cy-pivot-table .dxbl-pivot-table-area-column.dxbl-drop-target,
.cy-pivot-table .dxbl-pivot-table-area-row.dxbl-drop-target,
.cy-pivot-table .dxbl-pivot-table-area-data.dxbl-drop-target {
    outline: 2px dashed #0d6efd !important;
    outline-offset: -2px !important;
    background-color: rgba(13, 110, 253, 0.1) !important;
}

/* Área de filtros - highlight durante drag over */
.cy-pivot-table .dxbl-pivot-table-area-filter.dxbl-drag-over,
.dxbl-pivot-table-field-list-container-filter.dxbl-drag-over {
    background-color: #fff3cd !important;
    outline: 2px dashed #ffc107 !important;
    outline-offset: -2px !important;
}

/* Área de colunas - highlight durante drag over */
.cy-pivot-table .dxbl-pivot-table-area-column.dxbl-drag-over,
.dxbl-pivot-table-field-list-container-column.dxbl-drag-over {
    background-color: #cfe2ff !important;
    outline: 2px dashed #0d6efd !important;
    outline-offset: -2px !important;
}

/* Área de linhas - highlight durante drag over */
.cy-pivot-table .dxbl-pivot-table-area-row.dxbl-drag-over,
.dxbl-pivot-table-field-list-container-row.dxbl-drag-over {
    background-color: #d1e7dd !important;
    outline: 2px dashed #198754 !important;
    outline-offset: -2px !important;
}

/* Área de dados - highlight durante drag over */
.cy-pivot-table .dxbl-pivot-table-area-data.dxbl-drag-over,
.dxbl-pivot-table-field-list-container-data.dxbl-drag-over {
    background-color: #e2d9f3 !important;
    outline: 2px dashed #9c27b0 !important;
    outline-offset: -2px !important;
}

/* Hidden Fields - highlight durante drag over */
.dxbl-pivot-table-field-list-container-hidden.dxbl-drag-over {
    background-color: #e9ecef !important;
    outline: 2px dashed #6c757d !important;
    outline-offset: -2px !important;
}

/* ============================================
   DRAG AND DROP - DROP TARGET INDICATOR
   ============================================ */

/* Indicador de posição de drop */
.dxbl-list-box-drop-target-indicator {
    height: 3px !important;
    background-color: #0d6efd !important;
    border-radius: 2px !important;
    margin: 2px 4px !important;
    animation: dropIndicatorPulse 0.8s ease-in-out infinite !important;
}

@keyframes dropIndicatorPulse {
    0%, 100% { 
        opacity: 1;
        transform: scaleX(1);
    }
    50% { 
        opacity: 0.6;
        transform: scaleX(0.95);
    }
}

/* ============================================
   DRAG AND DROP - LIST BOX ITEMS NO FIELD LIST
   ============================================ */

/* Itens arrastáveis no Field List */
.dxbl-pivot-table-field-list .dxbl-list-box li[role="option"] {
    cursor: grab !important;
}

.dxbl-pivot-table-field-list .dxbl-list-box li[role="option"]:active {
    cursor: grabbing !important;
}

/* Item sendo arrastado no Field List */
.dxbl-pivot-table-field-list .dxbl-list-box li.dxbl-dragging {
    opacity: 0.5 !important;
    background-color: #e9ecef !important;
}

/* ============================================
   FIELD LIST DIALOG - LARGURA AUMENTADA
   Popup renderizado na raiz do DOM
   Classes reais: dxbl-window, dxbl-pivot-table-field-list
   DevExpress Blazor PivotTable v25.1.6
   ============================================ */

/* CSS Variables - Sobrescrever valores padrão do DevExpress */
:root {
    --dxbl-pivot-table-field-list-min-width: 500px;
    --dxbl-pivot-table-field-list-max-width: 600px;
    --dxbl-pivot-table-field-list-min-height: 450px;
    --dxbl-pivot-table-field-list-max-height: 80vh;
}

/* Window principal do Field List */
dxbl-window:has(.dxbl-pivot-table-field-list) {
    min-width: 500px !important;
}

/* Dialog do Field List - classe real identificada no HTML */
.dxbl-window-dialog.dxbl-pivot-table-field-list {
    min-width: 500px !important;
    width: auto !important;
}

/* Header do Field List */
.dxbl-pivot-table-field-list .dxbl-window-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 0.75rem 1rem !important;
}

.dxbl-pivot-table-field-list .dxbl-window-title {
    font-weight: 600 !important;
    color: #212529 !important;
    font-size: 1rem !important;
}

/* Body do Field List */
.dxbl-pivot-table-field-list .dxbl-window-body {
    padding: 0 !important;
}

.dxbl-pivot-table-field-list .dxbl-pivot-table-field-list-content {
    padding: 1rem !important;
    min-width: 480px !important;
}

/* Footer do Field List */
.dxbl-pivot-table-field-list .dxbl-window-footer {
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
    padding: 0.75rem 1rem !important;
}

.dxbl-pivot-table-field-list .dxbl-pivot-table-field-list-footer-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* ============================================
   FIELD LIST - CONTAINERS DE ÁREAS
   ============================================ */

/* Container base para todas as áreas */
.dxbl-pivot-table-field-list-container {
    min-height: 80px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    margin-bottom: 0.5rem !important;
}

/* Hidden Fields - área de campos ocultos */
.dxbl-pivot-table-field-list-container-hidden {
    background-color: #f8f9fa !important;
    border-color: #ced4da !important;
}

/* Filter Area - amarelo */
.dxbl-pivot-table-field-list-container-filter {
    background-color: #fffbeb !important;
    border-color: #ffc107 !important;
}

/* Column Area - azul */
.dxbl-pivot-table-field-list-container-column {
    background-color: #e7f1ff !important;
    border-color: #0d6efd !important;
}

/* Row Area - verde */
.dxbl-pivot-table-field-list-container-row {
    background-color: #e8f5e9 !important;
    border-color: #198754 !important;
}

/* Data Area - roxo */
.dxbl-pivot-table-field-list-container-data {
    background-color: #f3e5f5 !important;
    border-color: #9c27b0 !important;
}

/* Área vazia */
.dxbl-pivot-table-field-list-container-empty-data {
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6c757d !important;
    font-style: italic !important;
}

/* ============================================
   FIELD LIST - CAPTIONS DAS ÁREAS
   ============================================ */
.dxbl-pivot-table-field-list-container-caption-template-container {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-weight: 600 !important;
    color: #495057 !important;
    padding: 0.25rem 0 !important;
}

.dxbl-pivot-table-field-list-container-caption-template-container .dxbl-image {
    width: 16px !important;
    height: 16px !important;
    opacity: 0.8 !important;
}

/* ============================================
   FIELD LIST - CAMPOS (FIELD HEADERS)
   ============================================ */
.dxbl-pivot-table-field-list .dxbl-pivot-table-header-field {
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    padding: 0.375rem 0.5rem !important;
    margin: 0.25rem !important;
    cursor: grab !important;
    transition: all 0.15s ease-in-out !important;
}

.dxbl-pivot-table-field-list .dxbl-pivot-table-header-field:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.dxbl-pivot-table-field-list .dxbl-pivot-table-header-content {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.dxbl-pivot-table-field-list .dxbl-pivot-table-header-field-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

/* Botão de filtro no Field List */
.dxbl-pivot-table-field-list .dxbl-pivot-table-filter-menu-funnel-btn {
    opacity: 0.6 !important;
    padding: 0.125rem !important;
}

.dxbl-pivot-table-field-list .dxbl-pivot-table-filter-menu-funnel-btn:hover {
    opacity: 1 !important;
    background-color: rgba(0,0,0,0.05) !important;
}

/* ============================================
   FIELD LIST - CHECKBOX E BOTÕES
   ============================================ */
.dxbl-pivot-table-field-list .dxbl-checkbox {
    font-size: 0.875rem !important;
}

.dxbl-pivot-table-field-list .dxbl-btn-primary {
    min-width: 80px !important;
}

/* ============================================
   FIELD LIST - SCROLL VIEWERS
   ============================================ */
.dxbl-pivot-table-field-list .dxbl-scroll-viewer {
    max-height: 150px !important;
}

.dxbl-pivot-table-field-list .dxbl-scroll-viewer-content {
    padding: 0.25rem !important;
}

/* ============================================
   FIELD LIST - LIST BOX ITEMS
   ============================================ */
.dxbl-pivot-table-field-list .dxbl-list-box-item-display-template-container {
    padding: 0 !important;
}

.dxbl-pivot-table-field-list .dxbl-list-box-empty-data-item {
    min-height: 60px !important;
}

/* ============================================
   FILTER VALUES DIALOG - DROPDOWN DE FILTRO
   Classe real: dxbl-pivot-table-filter-menu-dropdown
   DevExpress Blazor PivotTable v25.1.6
   ============================================ */

/* Container principal do dropdown */
.dxbl-dropdown-dialog.dxbl-pivot-table-filter-menu-dropdown {
    min-width: 280px !important;
    max-width: 400px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    background-color: #fff !important;
}

/* Header do Filter Values */
.dxbl-pivot-table-filter-menu-dropdown .dxbl-dropdown-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important;
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
    border-radius: 6px 6px 0 0 !important;
}

.dxbl-pivot-table-filter-menu-dropdown .dxbl-dropdown-header > span {
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    color: #212529 !important;
}

/* Botão Clear no header */
.dxbl-pivot-table-filter-menu-button-clear {
    font-size: 0.8125rem !important;
    padding: 0.25rem 0.5rem !important;
}

.dxbl-pivot-table-filter-menu-button-clear:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
}

/* Body do Filter Values */
.dxbl-pivot-table-filter-menu-dropdown .dxbl-dropdown-body {
    padding: 0 !important;
    max-height: 350px !important;
    overflow: hidden !important;
}

/* Container da view de valores */
.dxbl-pivot-table-filter-menu-values-view {
    padding: 0.5rem !important;
}

/* ListBox do filtro */
.dxbl-pivot-table-filter-menu-list-box {
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    background-color: #fff !important;
}

/* Container de busca */
.dxbl-pivot-table-filter-menu-list-box .dxbl-list-box-search-container {
    padding: 0.5rem !important;
    border-bottom: 1px solid #e9ecef !important;
    background-color: #f8f9fa !important;
}

.dxbl-pivot-table-filter-menu-list-box .dxbl-text-edit {
    width: 100% !important;
}

.dxbl-pivot-table-filter-menu-list-box .dxbl-text-edit-input {
    width: 100% !important;
    padding: 0.375rem 0.75rem !important;
    padding-left: 2rem !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    font-size: 0.875rem !important;
}

.dxbl-pivot-table-filter-menu-list-box .dxbl-text-edit-input:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

/* Select All container */
.dxbl-pivot-table-filter-menu-list-box .dxbl-list-box-select-all-container {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    border-bottom: 1px solid #e9ecef !important;
    background-color: #f8f9fa !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    color: #495057 !important;
    cursor: pointer !important;
}

.dxbl-pivot-table-filter-menu-list-box .dxbl-list-box-select-all-container:hover {
    background-color: #e9ecef !important;
}

/* Itens da lista de filtro */
.dxbl-pivot-table-filter-menu-list-box li[role="option"] {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    color: #212529 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease-in-out !important;
}

.dxbl-pivot-table-filter-menu-list-box li[role="option"]:hover {
    background-color: #e9ecef !important;
}

/* Item selecionado */
.dxbl-pivot-table-filter-menu-list-box .dxbl-list-box-item-selected {
    background-color: #e7f1ff !important;
}

.dxbl-pivot-table-filter-menu-list-box .dxbl-list-box-item-selected:hover {
    background-color: #cfe2ff !important;
}

/* Checkboxes nos itens */
.dxbl-pivot-table-filter-menu-list-box .dxbl-checkbox {
    flex-shrink: 0 !important;
}

.dxbl-pivot-table-filter-menu-list-box .dxbl-checkbox-check-element {
    width: 18px !important;
    height: 18px !important;
    border: 1px solid #adb5bd !important;
    border-radius: 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #fff !important;
}

.dxbl-pivot-table-filter-menu-list-box .dxbl-checkbox-checked .dxbl-checkbox-check-element {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.dxbl-pivot-table-filter-menu-list-box .dxbl-checkbox-checked .dxbl-checkbox-check-element .dxbl-image {
    color: #fff !important;
    width: 12px !important;
    height: 12px !important;
}

.dxbl-pivot-table-filter-menu-list-box .dxbl-checkbox-indeterminate .dxbl-checkbox-check-element {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

/* Scroll viewer */
.dxbl-pivot-table-filter-menu-list-box .dxbl-scroll-viewer {
    max-height: 200px !important;
}

.dxbl-pivot-table-filter-menu-list-box .dxbl-scroll-viewer-content {
    padding: 0.25rem 0 !important;
}

/* Footer do Filter Values */
.dxbl-pivot-table-filter-menu-dropdown .dxbl-dropdown-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
    border-radius: 0 0 6px 6px !important;
}

/* Botões Cancel e Apply */
.dxbl-pivot-table-filter-menu-button-cancel,
.dxbl-pivot-table-filter-menu-button-apply {
    min-width: 70px !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 4px !important;
}

.dxbl-pivot-table-filter-menu-button-cancel {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

.dxbl-pivot-table-filter-menu-button-cancel:hover {
    background-color: #5c636a !important;
    border-color: #565e64 !important;
}

.dxbl-pivot-table-filter-menu-button-apply {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

.dxbl-pivot-table-filter-menu-button-apply:hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
}

/* ============================================
   POPUPS GENÉRICOS DO SMARTREPORT
   ============================================ */
.cy-smartreport-popup .dxbl-popup-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
}

.cy-smartreport-popup .dxbl-popup-header-text {
    font-weight: 600;
    color: #212529;
}

.cy-smartreport-popup .dxbl-popup-body {
    padding: 1rem;
}

.cy-smartreport-popup .dxbl-popup-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.cy-smartreport-toast {
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cy-smartreport-toast.toast-success {
    background-color: #d1e7dd;
    border-color: #198754;
    color: #0f5132;
}

.cy-smartreport-toast.toast-error {
    background-color: #f8d7da;
    border-color: #dc3545;
    color: #842029;
}

.cy-smartreport-toast.toast-warning {
    background-color: #fff3cd;
    border-color: #ffc107;
    color: #664d03;
}

.cy-smartreport-toast.toast-info {
    background-color: #cff4fc;
    border-color: #0dcaf0;
    color: #055160;
}
