/* =============================================================
   heatmap.css — Inode Analyzer v3.8
   Heatmap de inodes por diretório (barras horizontais ranqueadas).
   ============================================================= */

/* ── Lista de itens ──────────────────────────────────────────── */
.heatmap-list {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.heatmap-item {
    display:     flex;
    align-items: center;
    gap:         12px;
}

/* Número de rank */
.heatmap-rank {
    font-size:   10px;
    font-weight: 800;
    color:       var(--text-3);
    width:       24px;
    text-align:  right;
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
}

/* Barra de fundo */
.heatmap-bar-wrap {
    flex-grow:     1;
    height:        26px;
    background:    var(--bg-input);
    border-radius: 5px;
    position:      relative;
    overflow:      hidden;
    border:        1px solid var(--border);
    min-width:     0;
}

/* Preenchimento da barra */
.heatmap-bar {
    height:     100%;
    background: linear-gradient(90deg, var(--accent-d2), var(--accent));
    transition: width 0.6s ease;
    opacity:    0.85;
}

/* Label sobre a barra */
.heatmap-label {
    position:      absolute;
    left:          10px;
    top:           50%;
    transform:     translateY(-50%);
    font-size:     10px;
    font-weight:   600;
    color:         var(--text-1);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     80%;
    font-family:   'JetBrains Mono', monospace;
}

/* Valor à direita */
.heatmap-value {
    font-family: 'JetBrains Mono', monospace;
    font-size:   10px;
    color:       var(--accent);
    font-weight: 700;
    min-width:   90px;
    text-align:  right;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Estado vazio ────────────────────────────────────────────── */
.heatmap-empty {
    text-align:  center;
    padding:     32px;
    color:       var(--text-3);
    font-size:   12px;
    font-style:  italic;
}