/* css/components/overview-section.css */

.heatmaps-column { display: flex; flex-direction: column; gap: 20px; }

.section-title { font-size: 1.1em; text-align: center; color: var(--text-secondary); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 0px solid var(--border-color); padding-bottom: 8px; flex-shrink: 0; } /* Prevent title shrinking */


.review-heatmap-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* 10 columns */
    gap: 3px; /* Small gap */
    min-height: 60px; /* Ensure minimum height (approx 3 rows + gaps) */
    position: relative; /* For absolute positioned status/skeleton */
}

.review-heatmap-cell {
    /* aspect-ratio: 1 / 1; */ /* Removed */
    height: 64px; /* Explicit small height for short cells */
    width: 100%; /* Fill column width */
    border-radius: 10px;
    background-color: var(--primary-bg); /* Default background color */
    opacity: 0.7;
    position: relative;
}
 /* Intensity colors (unchanged) */
.review-heatmap-cell[data-reviews="1-3"] { background-color: #395580; opacity: 0.8; }
.review-heatmap-cell[data-reviews="4-7"] { background-color: #4a77b4; opacity: 0.9; }
.review-heatmap-cell[data-reviews="8+"] { background-color: #5bc0de; opacity: 1; }
.review-heatmap-cell::after { /* Tooltip styles (unchanged) */
    content: attr(data-tooltip); position: absolute; bottom: 110%; left: 50%;
    transform: translateX(-50%); background-color: #1a1a2e; color: #e0e0e0;
    padding: 4px 8px; border-radius: 8px; font-size: 0.8em; white-space: nowrap;
    opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none; z-index: 20;
}
.review-heatmap-cell:hover::after { opacity: 1; visibility: visible; }

/* Review Schedule Graph */
.review-schedule-graph {
    background-color: transparent;
    border: none;
    height: 200px;
    min-height: 100px; /* Increased height */
    width: 100%; /* Ensure full width */
    position: relative;
    padding: 0;
    margin: 0;
    padding: 0;
    display: block; /* Change from flex to block for better canvas sizing */
    overflow: hidden; /* Contain any overflow */
}

.review-schedule-graph canvas {
    display: block;
    width: 100% !important; /* Force full width */
    height: 200px !important; /* Force consistent height */
}

.graph-status {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-text-secondary);
    font-style: italic;
    text-align: center;
    padding: 0 var(--space-md);
    display: none; /* Shown by JS */
}