/* 31-files.css — the Files tab.
 *
 * A folder browser in the QUAD language: square corners, hairline
 * borders, inset bezel, mono labels in wide tracking, copper as the
 * only accent.
 */

/* ── The view shell ─────────────────────────────────────────── */

#files-view:not(.quad-float-panel) {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.files-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px 14px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.files-head-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.files-head-title h1 {
    margin: 0;
    font: 700 20px var(--display);
    letter-spacing: 0.01em;
    color: var(--c-ink);
}

.files-head-title span {
    font: 500 10px var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    white-space: nowrap;
}

.files-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── The breadcrumb ─────────────────────────────────────────── */

.files-breadcrumb {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 24px 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-2);
    margin-bottom: 14px;
}

.files-crumb {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--c-ink-dim);
    font: 700 10px var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 150ms, background 150ms, border-color 150ms;
}
.files-crumb:hover {
    color: var(--c-ink);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-2);
}
.files-crumb .material-symbols-rounded {
    font-size: 14px;
}

.files-crumb-sep {
    font-size: 15px;
    color: var(--c-ink-muted);
    opacity: 0.5;
}

/* ── The search ─────────────────────────────────────────────── */

.files-search-wrap {
    padding: 0 24px 12px;
    flex-shrink: 0;
}

.files-search {
    width: 100%;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-2);
    color: var(--c-ink);
    font: 400 12px var(--body);
    outline: none;
    box-shadow: var(--shadow-inset-light);
    transition: border-color 150ms, background 150ms;
}
.files-search:focus {
    border-color: var(--border-accent);
    background: rgba(255, 255, 255, 0.04);
}
.files-search::placeholder {
    color: var(--c-ink-muted);
}

/* ── The list ───────────────────────────────────────────────── */

.files-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px 28px;
    min-height: 0;
}

.files-section-label {
    font: 700 9px var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    margin: 14px 0 8px;
}

.files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

/* ── The card ───────────────────────────────────────────────── */

.files-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-inset-light);
    cursor: pointer;
    position: relative;
    transition: background 150ms, border-color 150ms, transform 220ms var(--ease);
    min-width: 0;
}
.files-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-accent);
}
.files-card:active {
    transform: translateY(1px);
}
.files-card:focus-visible {
    outline: 1px solid var(--c-accent);
    outline-offset: 1px;
}

.files-card-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid var(--border-2);
    background: rgba(255, 255, 255, 0.02);
    color: var(--c-accent);
}
.files-card-icon .material-symbols-rounded {
    font-size: 17px;
}

.files-card-body {
    flex: 1;
    min-width: 0;
}

.files-card-name {
    font: 600 12px var(--body);
    color: var(--c-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files-card-meta {
    font: 500 9px var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files-ext {
    font: 700 8px var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    border: 1px solid var(--border-2);
    padding: 2px 5px;
    flex-shrink: 0;
}

.files-card-menu {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
.files-card-menu .material-symbols-rounded {
    font-size: 15px;
}

/* ── The drop target ────────────────────────────────────────── */

.files-drop {
    position: relative;
}

.files-drop.is-dragging::after {
    content: "Drop to upload";
    position: absolute;
    inset: 16px 24px;
    z-index: 20;
    display: grid;
    place-items: center;
    background: rgba(204, 144, 80, 0.08);
    border: 1px dashed var(--c-accent);
    color: var(--c-accent-bright);
    font: 700 11px var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    pointer-events: none;
    animation: filesDropIn 200ms var(--ease) both;
}
@keyframes filesDropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── The node menu ──────────────────────────────────────────── */

.files-menu {
    min-width: 190px;
}

.files-menu .m-item .material-symbols-rounded {
    color: var(--c-ink-muted);
}
.files-menu .m-item:hover .material-symbols-rounded {
    color: var(--c-accent);
}
.files-menu .m-item--danger:hover .material-symbols-rounded {
    color: var(--c-bad);
}

/* ── The folder picker ──────────────────────────────────────── */

.files-folder-picker {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 320px;
    overflow-y: auto;
}

.files-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font: 600 12px var(--body);
    color: var(--c-ink-dim);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 150ms, color 150ms, border-color 150ms;
}
.files-picker-row:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--c-ink);
    border-color: var(--border-2);
}
.files-picker-row .material-symbols-rounded {
    font-size: 16px;
    color: var(--c-accent);
}
.files-picker-go {
    margin-left: auto;
    opacity: 0.45;
}

/* ── The port banner ────────────────────────────────────────── */

.files-port-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 0 24px 14px;
    border: 1px solid var(--border-accent);
    background: rgba(204, 144, 80, 0.06);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.files-port-banner-text {
    flex: 1;
    min-width: 200px;
    font: 500 12px var(--body);
    color: var(--c-ink-dim);
}
.files-port-banner-text strong {
    color: var(--c-ink);
}

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .files-head {
        padding: 12px 12px 8px;
    }
    .files-breadcrumb {
        padding: 0 12px 8px;
    }
    .files-search-wrap {
        padding: 0 12px 8px;
    }
    .files-list {
        padding: 0 12px 20px;
    }
    .files-grid {
        grid-template-columns: 1fr;
    }
    .files-port-banner {
        margin: 0 12px 10px;
    }
}