/* ============================================
   CST Design System - Heatmap Styles
   Estilos de tabelas heatmap do modulo CST
   ============================================ */

/* === HEATMAP TABLE === */
.cst-heatmap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cst-font-size-md);
    font-family: var(--cst-font-family);
}

/* === HEADER === */
.cst-heatmap-table thead {
    background: var(--cst-neutral-100);
    position: sticky;
    top: 0;
    z-index: var(--cst-z-sticky);
}

.cst-heatmap-table thead th {
    padding: var(--cst-spacing-md) var(--cst-spacing-lg);
    font-weight: var(--cst-font-weight-semibold);
    text-align: center;
    border-bottom: 2px solid var(--cst-neutral-200);
    white-space: nowrap;
    color: var(--cst-neutral-700);
    font-size: var(--cst-font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cst-heatmap-table thead th:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--cst-neutral-100);
    z-index: calc(var(--cst-z-sticky) + 1);
}

/* Header com icone */
.cst-heatmap-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cst-spacing-xs);
}

/* === BODY === */
.cst-heatmap-table tbody tr {
    border-bottom: 1px solid var(--cst-neutral-100);
    transition: background-color var(--cst-transition-fast);
}

.cst-heatmap-table tbody tr:hover {
    background: var(--cst-primary-alpha-04);
}

.cst-heatmap-table tbody tr:nth-child(even) {
    background: var(--cst-neutral-50);
}

.cst-heatmap-table tbody tr:nth-child(even):hover {
    background: var(--cst-primary-alpha-08);
}

.cst-heatmap-table tbody td {
    padding: var(--cst-spacing-sm) var(--cst-spacing-md);
    text-align: center;
    transition: background-color var(--cst-transition-fast);
}

/* Primeira coluna (nome) - sticky */
.cst-heatmap-table tbody td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: white;
    font-weight: var(--cst-font-weight-medium);
    z-index: 1;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cst-heatmap-table tbody tr:nth-child(even) td:first-child {
    background: var(--cst-neutral-50);
}

.cst-heatmap-table tbody tr:hover td:first-child {
    background: var(--cst-primary-alpha-04);
}

/* === CELULAS COLORIDAS (HEATMAP) === */
.cst-heatmap-cell {
    font-weight: var(--cst-font-weight-medium);
    font-size: var(--cst-font-size-sm);
    border-radius: var(--cst-radius-xs);
    margin: 2px;
    padding: var(--cst-spacing-xs) var(--cst-spacing-sm);
}

/* Escala de intensidade */
.cst-heatmap-cell-low {
    background: var(--cst-heatmap-low);
    color: var(--cst-success-dark);
}

.cst-heatmap-cell-medium {
    background: var(--cst-heatmap-medium);
    color: var(--cst-warning-dark);
}

.cst-heatmap-cell-high {
    background: var(--cst-heatmap-high);
    color: var(--cst-warning-dark);
}

.cst-heatmap-cell-critical {
    background: var(--cst-heatmap-critical);
    color: var(--cst-danger-dark);
}

/* === COLUNA TOTAL === */
.cst-heatmap-table th.cst-heatmap-total,
.cst-heatmap-table td.cst-heatmap-total {
    background: var(--cst-success-bg) !important;
    color: var(--cst-success-dark);
    font-weight: var(--cst-font-weight-bold);
    position: sticky;
    right: 0;
    z-index: 1;
}

.cst-heatmap-table thead th.cst-heatmap-total {
    z-index: calc(var(--cst-z-sticky) + 1);
}

/* === FOOTER === */
.cst-heatmap-table tfoot {
    position: sticky;
    bottom: 0;
    z-index: var(--cst-z-sticky);
}

.cst-heatmap-table tfoot tr {
    background: var(--cst-neutral-100);
    border-top: 2px solid var(--cst-neutral-200);
}

.cst-heatmap-table tfoot td {
    padding: var(--cst-spacing-md) var(--cst-spacing-lg);
    font-weight: var(--cst-font-weight-bold);
    text-align: center;
}

.cst-heatmap-table tfoot td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--cst-neutral-100);
    z-index: calc(var(--cst-z-sticky) + 1);
}

/* === HEATMAP CONTAINER === */
.cst-heatmap-container {
    overflow: auto;
    max-height: 500px;
    border: 1px solid var(--cst-neutral-200);
    border-radius: var(--cst-radius-lg);
}

/* === LEGENDA === */
.cst-heatmap-legend {
    display: flex;
    align-items: center;
    gap: var(--cst-spacing-lg);
    padding: var(--cst-spacing-md) var(--cst-spacing-lg);
    background: var(--cst-neutral-50);
    border-radius: var(--cst-radius-md);
    margin-bottom: var(--cst-spacing-lg);
}

.cst-heatmap-legend-item {
    display: flex;
    align-items: center;
    gap: var(--cst-spacing-sm);
    font-size: var(--cst-font-size-sm);
}

.cst-heatmap-legend-color {
    width: 16px;
    height: 16px;
    border-radius: var(--cst-radius-xs);
}

.cst-heatmap-legend-color-low {
    background: var(--cst-heatmap-low);
}

.cst-heatmap-legend-color-medium {
    background: var(--cst-heatmap-medium);
}

.cst-heatmap-legend-color-high {
    background: var(--cst-heatmap-high);
}

.cst-heatmap-legend-color-critical {
    background: var(--cst-heatmap-critical);
}

/* === INSIGHTS SECTION === */
.cst-heatmap-insights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--cst-spacing-md);
    margin-top: var(--cst-spacing-lg);
}

@media (max-width: 768px) {
    .cst-heatmap-insights {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .cst-heatmap-insights {
        grid-template-columns: 1fr;
    }
}

.cst-heatmap-insight-card {
    background: var(--cst-neutral-50);
    border-radius: var(--cst-radius-md);
    padding: var(--cst-spacing-md);
    border: 1px solid var(--cst-neutral-200);
}

.cst-heatmap-insight-label {
    font-size: var(--cst-font-size-xs);
    color: var(--cst-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--cst-spacing-xs);
}

.cst-heatmap-insight-value {
    font-size: var(--cst-font-size-lg);
    font-weight: var(--cst-font-weight-bold);
    color: var(--cst-neutral-800);
}

.cst-heatmap-insight-subtitle {
    font-size: var(--cst-font-size-sm);
    color: var(--cst-neutral-500);
    margin-top: var(--cst-spacing-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === TEMPORAL HEATMAP (MES/ANO) === */
.cst-heatmap-temporal-header {
    background: var(--cst-hero-gradient);
    color: white;
    padding: var(--cst-spacing-lg);
    border-radius: var(--cst-radius-lg) var(--cst-radius-lg) 0 0;
}

.cst-heatmap-temporal-table thead th {
    min-width: 80px;
}

/* === HEATMAP RESPONSIVO === */
@media (max-width: 768px) {
    .cst-heatmap-table {
        font-size: var(--cst-font-size-sm);
    }

    .cst-heatmap-table thead th,
    .cst-heatmap-table tbody td,
    .cst-heatmap-table tfoot td {
        padding: var(--cst-spacing-sm);
    }

    .cst-heatmap-table tbody td:first-child {
        max-width: 120px;
    }

    .cst-heatmap-legend {
        flex-wrap: wrap;
        gap: var(--cst-spacing-sm);
    }
}