/* =============================================================
   tables.css — Inode Analyzer v3.8
   Tabelas de dados: extensões, maiores arquivos, órfãos, junk,
   top diretórios (novo), padrões detectados (novo).
   ============================================================= */

/* ── Wrapper com scroll horizontal ──────────────────────────── */
.tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Tabela base ─────────────────────────────────────────────── */
table {
    width:           100%;
    border-collapse: collapse;
    font-size:       11px;
}

th {
    text-align:     left;
    padding:        10px 12px;
    color:          var(--text-3);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom:  1px solid var(--border);
    cursor:         pointer;
    white-space:    nowrap;
    background:     var(--bg-surface);
    position:       sticky;
    top:            0;
    z-index:        1;
    transition:     color 0.2s ease;
}
th:hover         { color: var(--accent); }
th .sort-icon    { opacity: 0.4; margin-left: 4px; font-size: 9px; }
th.asc  .sort-icon,
th.desc .sort-icon { opacity: 1; color: var(--accent); }

td {
    padding:     10px 12px;
    border-bottom: 1px solid var(--border);
    color:       var(--text-2);
    vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td      { background: rgba(var(--accent-rgb), 0.03); }

/* Coluna de número (#) */
td.t-num, th.t-num {
    width:       42px;
    text-align:  center;
    font-weight: 700;
    color:       var(--text-3);
    font-size:   10px;
}

/* Coluna de tamanho — mono */
td.t-size {
    font-family: 'JetBrains Mono', monospace;
    font-size:   10px;
    white-space: nowrap;
}

/* Coluna de path — truncar com ellipsis */
td.t-path code {
    display:       block;
    max-width:     420px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

/* Porcentagem */
td.t-pct {
    font-family: 'JetBrains Mono', monospace;
    font-size:   10px;
    color:       var(--text-3);
}

/* ── Módulo de manutenção (junk) ─────────────────────────────── */
.maintenance-actions {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   14px;
    gap:             12px;
    flex-wrap:       wrap;
}
.select-all-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   11px;
    font-weight: 600;
    color:       var(--text-2);
    cursor:      pointer;
}
.btn-cleanup {
    padding:       8px 16px;
    border-radius: 6px;
    background:    var(--red);
    color:         #fff;
    font-size:     11px;
    font-weight:   700;
    border:        none;
    cursor:        pointer;
    transition:    all 0.2s ease;
    display:       flex;
    align-items:   center;
    gap:           8px;
}
.btn-cleanup:hover:not(:disabled) {
    background:  var(--red);
    transform:   translateY(-1px);
    box-shadow:  0 4px 12px rgba(239,68,68,0.3);
}
.btn-cleanup:disabled { opacity: 0.4; cursor: not-allowed; }

input[type="checkbox"] {
    accent-color: var(--accent);
    cursor:       pointer;
    width:        14px;
    height:       14px;
}

/* ── Tabela de padrões (novo v3.8) ───────────────────────────── */
.patterns-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   10px;
}
.pattern-card {
    background:    var(--bg-input);
    border:        1px solid var(--border);
    border-radius: 8px;
    padding:       12px 14px;
    display:       flex;
    align-items:   center;
    gap:           12px;
    transition:    all 0.2s ease;
}
.pattern-card:hover { border-color: var(--border-hi); }
.pattern-icon {
    width:           32px;
    height:          32px;
    border-radius:   6px;
    background:      var(--badge-pattern-bg);
    color:           var(--badge-pattern-fg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       13px;
    flex-shrink:     0;
}
.pattern-info { flex: 1; min-width: 0; }
.pattern-name {
    font-size:   11px;
    font-weight: 700;
    color:       var(--text-1);
    margin-bottom: 2px;
}
.pattern-stats {
    font-family: 'JetBrains Mono', monospace;
    font-size:   9px;
    color:       var(--text-3);
}

/* ── Tabela de top diretórios (novo v3.8) ────────────────────── */
td.t-bar-wrap {
    min-width: 120px;
}
.inline-bar {
    height:        6px;
    background:    var(--bg-input);
    border-radius: 3px;
    overflow:      hidden;
    margin-top:    4px;
}
.inline-bar-fill {
    height:        100%;
    background:    linear-gradient(90deg, var(--accent-d), var(--accent));
    border-radius: 3px;
    transition:    width 0.5s ease;
}