/* =============================================================
   ARQUIVOS E ESPAÇO
=============================================================

   A pergunta que se faz olhando para uma lista de arquivos é sempre a
   mesma: "posso apagar isto?". Então a linha mais importante de cada
   item não é o nome nem o tamanho — é a frase que diz por que ele
   ainda está lá.
*/

.md-resumo {
    font-size: 13px;
    color: var(--text-dim);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 4px;
}
.md-resumo b { color: var(--text-strong); font-size: 16px; font-variant-numeric: tabular-nums; }

.md-lista {
    display: flex;
    flex-direction: column;
    max-height: 420px;
    overflow-y: auto;
}

.md-vazio {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 18px 0;
}

.md-item {
    display: grid;
    grid-template-columns: 24px 44px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--border-soft);
}
.md-item:last-child { border-bottom: 0; }

/* Arquivo que sumiu por fora continua na lista, apagado. Some-lo
   escondia o problema; mostrá-lo igual aos outros seria mentira. */
.md-item.sumiu { opacity: .55; }

.md-previa {
    width: 44px;
    height: 44px;
    border-radius: 9px;
    overflow: hidden;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.md-previa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-previa i { color: var(--text-faint); font-size: 15px; }

.md-txt { min-width: 0; }

.md-nome {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.md-sit {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.md-sit i { font-size: 10px; flex: 0 0 auto; }

.md-preso  { color: var(--info); }
.md-espera { color: var(--warn); }
.md-solto  { color: var(--text-faint); }
.md-aviso  { color: var(--danger); }

.md-bytes { color: var(--text-faint); }

.md-acoes { display: flex; gap: 4px; flex: 0 0 auto; }

/* O cadeado mostra o ESTADO, nao a acao. Aberto num arquivo descrito
   como "Guardado por voce" fazia a tela se contradizer: a frase dizia
   uma coisa e o icone parecia dizer outra. Agora fechado quer dizer
   guardado, e a cor confirma. */
.btn-icon.md-travado {
    color: var(--info);
    border-color: rgba(var(--info-rgb), .35);
    background: var(--info-soft);
}

/* -------------------------------------------------------------
   A regra do que chega
------------------------------------------------------------- */
.md-regra {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r, 14px);
    background: var(--surface-2);
}
.md-regra:empty { display: none; }

.md-regra-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.md-regra-ops { display: flex; flex-direction: column; gap: 6px; }

.md-op {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--r-sm, 10px);
    cursor: pointer;
    transition: var(--t-fast);
}
.md-op:hover { background: var(--surface-3); }
.md-op.e-ativo { border-color: var(--accent-line); background: var(--accent-soft); }
.md-op input { margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.md-op span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.md-op b { font-size: 12.5px; font-weight: 600; color: var(--text); }
.md-op small { font-size: 11px; line-height: 1.45; color: var(--text-faint); }

.md-teto {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    font-size: 12px;
    color: var(--text-dim);
}
.md-teto input {
    width: 62px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm, 10px);
    background: var(--surface-3);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 12px;
    text-align: center;
    outline: none;
}
.md-teto input:focus { border-color: var(--accent-line); }

/* -------------------------------------------------------------
   Filtro por origem, e a marcação
------------------------------------------------------------- */
.md-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}

.md-filtros { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

.md-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--text-dim);
    font-family: var(--font-body);
    font-size: 11.5px;
    cursor: pointer;
    transition: var(--t-fast);
    white-space: nowrap;
}
.md-chip i { font-size: 10px; opacity: .75; }
.md-chip b { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
/* O peso da gaveta em cinza: é o número que responde "por que um giga",
   e ele não precisa competir com a contagem de arquivos. */
.md-chip em { font-style: normal; color: var(--text-faint); font-size: 10.5px; }
.md-chip:hover { background: var(--surface-3); color: var(--text); }
.md-chip.e-ativo {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent-hi);
}
.md-chip.e-ativo em, .md-chip.e-ativo b { color: inherit; }

.md-todos {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--text-faint);
    cursor: pointer;
    white-space: nowrap;
}
.md-todos input { accent-color: var(--accent); cursor: pointer; }

.md-marca { display: flex; align-items: center; justify-content: center; }
.md-marca input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.md-item.e-marcado { background: var(--accent-soft); }

/* -------------------------------------------------------------
   A barra que aparece quando há algo marcado
   -------------------------------------------------------------
   Grudada embaixo da lista: numa biblioteca de trezentos arquivos,
   marcar no fim e ter que rolar até o topo para apagar é o tipo de
   caminho que faz a pessoa desistir no meio.
------------------------------------------------------------- */
.md-massa {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--accent-line);
    border-radius: var(--r, 14px);
    background: var(--surface-solid, #14141c);
    box-shadow: var(--sh-lg);
}
.md-massa-txt { flex: 1 1 auto; font-size: 12.5px; color: var(--text-dim); min-width: 0; }
.md-massa-txt b { color: var(--text-strong); font-variant-numeric: tabular-nums; }

@media (max-width: 780px) {
    .md-item { grid-template-columns: 22px 38px 1fr auto; gap: 10px; }
    .md-previa { width: 38px; height: 38px; }
    .md-lista { max-height: none; }
    .md-barra { justify-content: flex-start; }
    .md-massa { flex-direction: column; align-items: stretch; }
    .md-massa .btn { justify-content: center; }
}