/* Arquivos: o explorador sobre nuvens e computadores. Reaproveita a casca de módulo (module-*).
   Nasceu no módulo Máquinas (mf-* = "machine files") e foi movido inteiro para cá. */
/* ===== Explorador de Arquivos (docs/files-explorer.md) =====
   Árvore à esquerda, lista virtualizada à direita. Linhas de altura FIXA (40px) — é o contrato da
   virtualização: a posição de cada linha é índice × altura, e o spacer dá a rolagem real. */


.mf-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: var(--text-sm);
    color: var(--ink-muted);
    text-decoration: none;
}
.mf-back::before { content: "←"; }
.mf-back:hover { color: var(--ink); text-decoration: underline; }

.mf-banner {
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--warn-border);
    background: var(--warn-bg);
    color: var(--warn-ink);
    font-size: var(--text-sm);
    margin-bottom: 14px;
}

.mf-card { padding: 0; overflow: hidden; }

.mf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}
.mf-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mf-tool { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--ink-muted); }
.mf-sort { min-height: 34px; }
.mf-check input { width: 16px; height: 16px; accent-color: var(--green); }

/* Breadcrumb: cada segmento é um botão; o atual é texto com aria-current. */
.mf-crumbs { min-width: 0; flex: 1; }
.mf-crumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mf-crumb { display: inline-flex; align-items: center; min-width: 0; }
.mf-crumb + .mf-crumb::before { content: "›"; color: var(--ink-muted); margin: 0 4px; }
.mf-crumb-button {
    border: 0; background: none; padding: 4px 6px; border-radius: 8px;
    color: var(--ink-muted); font: inherit; font-size: var(--text-sm); cursor: pointer;
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mf-crumb-button:hover { background: var(--surface-hover); color: var(--ink); }
.mf-crumb-current { padding: 4px 6px; font-size: var(--text-sm); font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }

/* O contrato da rolagem: o grid tem altura FIXA e a linha é minmax(0, 1fr). Sem o minmax(0, …)
   o item do grid tem min-height:auto, cresce com o conteúdo e a lista nunca rola — e a
   virtualização, vendo um clientHeight do tamanho de tudo, renderizaria a pasta inteira. */
.mf-panes {
    display: grid;
    grid-template-columns: minmax(200px, 280px) 1fr;
    grid-template-rows: minmax(0, 1fr);
    height: min(70vh, 720px);
    min-height: 420px;
}
.mf-tree-pane { min-height: 0; border-right: 1px solid var(--line); overflow: auto; padding: 8px 4px; scrollbar-gutter: stable; }
.mf-list-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* Árvore */
.mf-tree, .mf-group { list-style: none; margin: 0; padding: 0; }
.mf-node { outline: none; }
.mf-node-row {
    display: flex; align-items: center; gap: 6px;
    height: 32px; padding-inline-end: 8px; border-radius: 8px;
    color: var(--ink); font-size: var(--text-sm); cursor: pointer; white-space: nowrap;
}
.mf-node-row:hover { background: var(--surface-hover); }
.mf-node[aria-selected="true"] > .mf-node-row { background: var(--green-soft); color: var(--accent-ink); font-weight: 650; }
.mf-node:focus-visible > .mf-node-row { outline: 2px solid var(--green); outline-offset: -2px; }
.mf-node-toggle { display: grid; place-items: center; width: 18px; height: 18px; flex: none; color: var(--ink-muted); transition: transform 120ms; }
.mf-node-toggle.is-open { transform: rotate(90deg); }
.mf-node-toggle svg, .mf-node-icon svg, .mf-row-icon svg, .mf-badge-icon svg { width: 16px; height: 16px; }
.mf-node-icon { display: grid; place-items: center; flex: none; color: var(--ink-muted); }
.mf-node-label { overflow: hidden; text-overflow: ellipsis; }
.mf-node-spinner {
    width: 12px; height: 12px; flex: none; border-radius: 50%;
    border: 2px solid var(--line); border-top-color: var(--green);
}
@media (prefers-reduced-motion: no-preference) { .mf-node-spinner { animation: mf-spin 800ms linear infinite; } }
@keyframes mf-spin { to { transform: rotate(360deg); } }
.mf-node-error { font-size: var(--text-2xs); color: var(--danger); overflow: hidden; text-overflow: ellipsis; }

/* Lista */
.mf-list-head, .mf-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px 132px 44px;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 12px;
}
.mf-list-head {
    height: 34px; border-bottom: 1px solid var(--line);
    font-size: var(--text-2xs); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted);
}
.mf-list { position: relative; flex: 1; min-height: 0; overflow: auto; outline: none; scrollbar-gutter: stable; }

/* Barra de rolagem SEMPRE visível e com contraste (WCAG 1.4.11): a trilha some no macOS/iOS por
   padrão e a pessoa não descobre que há mais. Fina, nas cores do tema, sem depender de hover. */
.mf-list, .mf-tree-pane, .mf-preview-body { scrollbar-width: thin; scrollbar-color: var(--line-control) transparent; }
.mf-list::-webkit-scrollbar, .mf-tree-pane::-webkit-scrollbar, .mf-preview-body::-webkit-scrollbar { width: 10px; height: 10px; }
.mf-list::-webkit-scrollbar-thumb, .mf-tree-pane::-webkit-scrollbar-thumb, .mf-preview-body::-webkit-scrollbar-thumb {
    background: var(--line-control); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
.mf-list::-webkit-scrollbar-thumb:hover, .mf-tree-pane::-webkit-scrollbar-thumb:hover { background-color: var(--ink-muted); }
.mf-list:focus-visible { box-shadow: inset 0 0 0 2px var(--green); }
.mf-list-spacer { position: relative; width: 100%; }
.mf-list-window { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }
.mf-row { height: 40px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); font-size: var(--text-sm); color: var(--ink); cursor: default; outline: none; }
.mf-row:hover { background: var(--surface-hover); }
.mf-row[aria-selected="true"] { background: var(--green-soft); }
.mf-row:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.mf-col-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mf-row-icon { display: grid; place-items: center; flex: none; color: var(--ink-muted); }
.mf-row-dir .mf-row-icon { color: var(--accent-ink); }
.mf-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-col-size { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-muted); white-space: nowrap; }
.mf-col-date { font-variant-numeric: tabular-nums; color: var(--ink-muted); white-space: nowrap; }
.mf-col-actions { display: flex; justify-content: flex-end; }
.mf-badge {
    display: inline-flex; align-items: center; gap: 4px; flex: none;
    padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--surface-hover); color: var(--ink-muted); font-size: var(--text-2xs);
}
.mf-badge-icon { display: grid; place-items: center; }
.mf-badge-icon svg { width: 12px; height: 12px; }

.mf-list-foot {
    display: flex; justify-content: space-between; gap: 12px; align-items: center;
    padding: 8px 12px; border-top: 1px solid var(--line);
    font-size: var(--text-xs); color: var(--ink-muted);
}
.mf-hint { white-space: nowrap; }
.mf-partial { margin: 0; padding: 8px 12px; font-size: var(--text-xs); color: var(--warn-ink); background: var(--warn-bg); }

/* Prévia de texto */
.mf-preview-card { width: min(920px, 100%); }
.mf-preview-title { margin: 0 0 4px; font-size: var(--text-heading-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-preview-path { margin: 0 0 12px; font-size: var(--text-xs); color: var(--ink-muted); word-break: break-all; }
.mf-preview-body {
    max-height: min(60vh, 560px); overflow: auto; margin: 0;
    padding: 12px 14px; border-radius: 10px; background: var(--code-bg); border: 1px solid var(--line);
    font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; tab-size: 4;
}
.mf-preview-note { margin: 8px 0 0; font-size: var(--text-xs); color: var(--ink-muted); }

/* Celular: a árvore some (a lista + breadcrumb já navegam), colunas de data/tamanho encolhem. */
@media (max-width: 760px) {
    .mf-panes { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; min-height: 60vh; }
    .mf-tree-pane { display: none; }
    .mf-list-head, .mf-row { grid-template-columns: minmax(0, 1fr) 72px 44px; }
    .mf-col-date { display: none; }
    .mf-hint { display: none; }
    .mf-list { max-height: 65vh; }
}

/* Locais: as fontes na raiz da árvore. */
.mf-node-source > .mf-node-row { font-weight: 650; }
.mf-node[aria-disabled="true"] > .mf-node-row { color: var(--ink-muted); cursor: default; }
.mf-node-state { margin-inline-start: auto; font-size: var(--text-2xs); font-weight: 650; color: var(--ink-muted); }
.mf-node-state.is-online { color: var(--accent-ink); }
.mf-node-detail { margin-inline-start: auto; font-size: var(--text-2xs); font-weight: 400; color: var(--ink-muted); max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.mf-node-connect { margin-inline-start: auto; font-size: var(--text-2xs); font-weight: 650; color: var(--accent-ink); text-decoration: none; }
.mf-node-connect:hover { text-decoration: underline; }
.mf-tree-pane { min-width: 0; }
@media (min-width: 761px) { .mf-panes { grid-template-columns: minmax(220px, 300px) 1fr; } }