Oxicloud/static/css/components/resourceList.css

/* ============================================================
 * ResourceList component styles
 *
 * All styles for .file-item (both grid cards and list rows),
 * the list header, drag ghost, per-item checkboxes, and
 * section-specific item modifiers (.favorite-item, .recent-item,
 * .trash-item).
 *
 * Page-level shell (.files-container, .selection-rect) →  fileManager.css
 * Batch-action toolbar (.batch-selection-bar, .batch-btn …) → multiSelect.css
 * Section page headers (.list-header.favorites-header …)   → views/*.css
 * ============================================================ */

/* ── Base icon container ─────────────────────────────────── */

.file-icon {
    width: 100px;
    height: 70px;
    border-radius: var(--radius-lg);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Thumbnail image inside file-icon (grid and list views) */
.file-icon .file-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    /* The thumbnail is purely decorative — it must never be a hit-test target.
       In grid view it fills the whole tile UNDER the overlay controls (checkbox,
       favorite star, kebab); a loaded full-bleed thumbnail (promoted to its own
       stacking context by the hover scale transform) was capturing clicks meant
       for those controls, so they "did nothing" (the click fell through to
       open-file). Making it transparent to pointer events routes corner clicks
       to the controls and body clicks to the .file-icon (which still opens). */
    pointer-events: none;
}

/* ── Item states ─────────────────────────────────────────── */

.file-item {
    background-color: var(--color-item);
    /* Smooth the hover/selection tint (list rows used to snap). Grid cards
       override this with their own transform/shadow transition. */
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard);
}

/* Brief pulse on rows that were just optimistically inserted (e.g.
   newly created folder, upload completion, drag-drop move into the
   current folder). Pure CSS so timing is deterministic — the JS adds
   the class, the animation auto-clears the background, and a
   single `animationend` listener removes the class.

   `scroll-margin-top` reserves space above the row for the sticky
   page header (`.page-sticky-header` ≈ 80 px). Without it,
   `scrollIntoView({ block: 'nearest' })` aligns the row's top edge
   against the viewport's top edge — which the sticky header is
   currently covering — so the user only sees the row's bottom edge.
   `scroll-margin-bottom` gives a touch of breathing room when the
   scroll happens to land the row near the viewport bottom. */
.file-item.resource-row--just-added {
    animation: resource-row-just-added 1.5s ease-out;
    scroll-margin-top: 100px;
    scroll-margin-bottom: 24px;
}

@keyframes resource-row-just-added {
    0% {
        background-color: var(--color-success-bg);
    }

    100% {
        background-color: transparent;
    }
}

/* Client-only "New" swimlane created on the fly by `addItem()` when
   the view is grouped. Subtler styling than a natural-group lane: the
   user understands the pin is temporary (it dissolves on next full
   reload), so we don't want the bar to dominate the list. The pinned
   placement at the top of the container is what makes it
   discoverable; the header just confirms the intent. */
.resource-list__swimlane-group--just-added > .resource-list__swimlane-header {
    color: var(--color-success-text);
}

.file-item.selected {
    background-color: var(--color-item-selected);
}

.file-item:hover {
    background-color: var(--color-item-hover);
    border-color: var(--color-border-medium);
}

.file-item.selected:hover {
    background-color: var(--color-item-hover-accent);
}

.file-item.dragging {
    opacity: 0.8;
    background-color: var(--color-bg-input);
}

.file-item.drop-target {
    background-color: var(--color-warning-ring);
}

.file-badge-shared {
    color: var(--color-badge-blue-text);
}

.file-item .file-icon > i,
.file-item .file-icon > svg {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Per-item checkboxes (list + grid) ───────────────────── */

.list-header-checkbox,
.file-item .checkbox-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-header-checkbox input[type="checkbox"],
.file-item .checkbox-cell input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--color-accent);
    border-radius: var(--radius-sm);
}

.list-header.selection-mode {
    grid-template-columns: 36px 1fr;
    background-color: var(--color-multiselect-bg);
    color: var(--color-multiselect-text);
    border-bottom-color: var(--color-multiselect-border);
}

.list-header.selection-mode .list-header-checkbox input[type="checkbox"] {
    accent-color: var(--color-accent);
}

/* ── List view ───────────────────────────────────────────── */

.list-header {
    display: grid;
    grid-template-columns: var(--files-list-columns);
    column-gap: var(--space-3);
    padding: 15px;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    background-color: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border-faint);
    align-items: center;
}

/* Trash view: Name → [Path] → Size → Date → Actions
 * Override --files-list-columns so the trash header AND trash items align.
 * No checkbox (selectable=false), no owner cell visible, no type column.
 *
 * Mobile-first: the Path column is hidden by default to keep the layout
 * legible on narrow screens (path stays accessible via itemTooltip on hover).
 * From 1000px upward, Path reappears and claims roughly half the table
 * width via a 3fr share against Name's 1fr. */
.files-list-view.trash-list {
    --files-list-columns: minmax(180px, 1fr) 110px 130px 100px;
}

.files-list-view.trash-list .file-item .path-cell,
.files-list-view.trash-list .list-header.trash-header > div:nth-child(2) {
    display: none;
}

@media (min-width: 1000px) {
    .files-list-view.trash-list {
        --files-list-columns: minmax(180px, 1fr) 3fr 110px 130px 100px;
    }

    .files-list-view.trash-list .file-item .path-cell,
    .files-list-view.trash-list .list-header.trash-header > div:nth-child(2) {
        display: block;
    }
}

.list-header > div,
.files-list-view .file-item > div {
    min-width: 0;
}

/* Size column: always nth-child(5) because .owner-cell is always in the DOM
   (even when hidden via display:none, it still occupies a child slot). */
.list-header > div:nth-child(5),
.files-list-view .file-item .size-cell {
    justify-self: end;
    text-align: right;
}

/* ── Sortable column headers (flat Drive-style sort) ─────────── */
.list-header-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    /* Inherit the header row's weight + colour so it reads as a header. */
    font: inherit;
    color: inherit;
    transition: color var(--motion-fast) var(--ease-standard);
}

.list-header-sort:hover,
.list-header-sort.is-active {
    color: var(--color-accent);
}

.list-header-sort__arrow {
    font-size: var(--text-2xs);
    color: var(--color-accent);
    flex-shrink: 0;
}

/* Match the value-cell alignment so header and data line up. */
.list-header-sort[data-sort-field="size"] {
    justify-self: end;
}

.list-header-sort[data-sort-field="modified_at"] {
    justify-self: center;
}

/* ── Owner column ────────────────────────────────────────── */

/* Styles applied whenever the cell is visible (hidden class absent).
   The .hidden utility class (display:none !important) keeps it invisible
   by default — it is stamped directly in the HTML templates.

   `display: flex` lets a nested `.user-vignette` (the common case
   for an owner cell — an avatar circle plus a name) become a flex
   child that can shrink past its intrinsic content width. The
   `.user-vignette__name` already declares
   `text-overflow: ellipsis`, but that only fires when the cascade
   above it ACTUALLY constrains the width. Without flex here, the
   vignette sized to its content and the cell clipped it flat with
   no ellipsis. The cell's own `text-overflow` still ellipses
   plain-text fallback content (cells without a vignette child). */
.owner-cell {
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Expand the grid track as soon as at least one owner cell is visible. */
.files-list-view:has(.owner-cell:not(.hidden)) {
    --files-list-columns: 36px minmax(200px, 2fr) 120px 100px 110px 130px 72px;
}

.files-list-view {
    --files-list-columns: 36px minmax(200px, 2fr) 100px 110px 130px 72px;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background-color: var(--color-item);
    box-shadow: 0 1px 3px var(--color-shadow-xs);
}

.files-list-view .file-item {
    display: grid;
    grid-template-columns: var(--files-list-columns);
    column-gap: var(--space-3);
    padding: var(--space-3) 15px;
    border-bottom: 1px solid var(--color-border-xfaint);
    align-items: center;
    cursor: pointer;
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard);
}

/* "This row" emphasis — a left accent bar on hover/selection (inset shadow,
   so it adds no width and never shifts the grid columns). */
.files-list-view .file-item:hover,
.files-list-view .file-item.selected {
    box-shadow: inset 3px 0 0 var(--color-accent);
}

.files-list-view .file-item.drop-target {
    border: 1px dashed var(--color-warning-border);
}

.files-list-view .file-item .name-cell {
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    overflow: hidden;
}

.files-list-view .file-item .name-cell span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Content-search snippet — fragment of the file body that matched the
   query. Wraps onto a second line inside the flex name-cell. */
.files-list-view .file-item .name-cell:has(.file-item__snippet) {
    flex-wrap: wrap;
    row-gap: 2px;
}

.files-list-view .file-item .file-item__snippet {
    flex-basis: 100%;
    /* icon width (36px) + cell gap (12px) — aligns under the name */
    padding-left: 48px;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Grid cards are too compact for body fragments. */
.files-grid-view .file-item .file-item__snippet {
    display: none;
}

.files-list-view .file-item .file-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    /* Hairline inner ring — consistent with the grid thumbnails so light
       previews don't bleed into the row. */
    box-shadow: inset 0 0 0 1px var(--color-border);
    font-size: var(--text-md);
    margin-bottom: 0;
    flex-shrink: 0;
}

.list-header > div:nth-child(5),
.files-list-view .file-item .date-cell {
    justify-self: center;
    text-align: center;
}

.files-list-view .file-item .date-cell {
    color: var(--color-text-muted);
    font-size: var(--text-base);
}

.files-list-view .file-item .size-cell {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.files-list-view .file-item .type-cell {
    color: var(--color-text-secondary);
    font-weight: var(--weight-medium);
    font-size: var(--text-base);
}

.files-list-view .file-item .action-cell {
    align-items: center;
    text-align: right;
}

/* Styles for the built-in action-cell buttons (favorite-star, kebab).
 * `.btn-action` is excluded — it owns its own colors via the generic
 * `.btn-action` rule + variant modifiers (e.g. `.btn-action--delete`). */
.files-list-view .file-item .action-cell button:not(.btn-action),
.files-list-view .file-item .action-cell div {
    display: inline;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-lg);
    border: none;
    background: transparent;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-subtle);
    font-size: var(--text-md);
}

.files-list-view .file-item .action-cell button:not(.btn-action):hover {
    background: var(--color-border-subtle);
    color: var(--color-text-dark);
}

/* could be visible if we want */
.files-list-view .file-item .action-cell button.favorite-star {
    display: none;
    border: none;
}

.files-list-view .file-item:hover .action-cell button.favorite-star {
    display: inline;
}

/* Reveal the kebab on hover for cleaner rows — but only on hover-capable
   devices, so touch users (no hover) keep it always tappable. Stays visible
   on keyboard focus within the row. */
@media (hover: hover) {
    .files-list-view .file-item .action-cell button.file-actions {
        opacity: 0;
        transition: opacity var(--motion-fast) var(--ease-standard);
    }

    .files-list-view .file-item:hover .action-cell button.file-actions,
    .files-list-view .file-item:focus-within .action-cell button.file-actions {
        opacity: 1;
    }
}

/* ── Grid view ───────────────────────────────────────────── */

.files-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-card-min), 1fr));
    gap: var(--space-5);
    position: relative;
}

/* header not visible in grid mode */
.files-grid-view .list-header {
    display: none;
}

/* ── Mobile reflow (≤ --bp-sm 640px) ──────────────────────────
   The 6-column grid can't fit a phone, so each list row collapses to a
   compact flex line (icon + name … size + actions) and the column header
   is hidden (sort controls live in the actions bar). One block covers
   files / trash / favorites / recent uniformly; flex ignores the grid
   tracks, so there's no header-vs-row misalignment to maintain. */
@media (max-width: 640px) {
    /* Keep the selection-mode header (holds select-all); hide the plain one. */
    .list-header:not(.selection-mode) {
        display: none;
    }

    .files-list-view .file-item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .files-list-view .file-item .type-cell,
    .files-list-view .file-item .date-cell,
    .files-list-view .file-item .owner-cell,
    .files-list-view .file-item .path-cell {
        display: none;
    }

    .files-list-view .file-item .name-cell {
        flex: 1;
        min-width: 0;
    }

    .files-list-view .file-item .checkbox-cell,
    .files-list-view .file-item .size-cell,
    .files-list-view .file-item .action-cell {
        flex-shrink: 0;
    }

    /* Tighter grid on phones (2 columns instead of 1). */
    .files-grid-view {
        --grid-card-min: 140px;
        gap: var(--space-2);
    }
}

.files-grid-view .file-item {
    border-radius: var(--radius-2xl);
    /* Hairline at rest → accent on hover (gallery, not form). */
    border: 1px solid var(--color-border);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 1px 2px var(--color-shadow-xs);
    cursor: pointer;
    width: 100%;
    min-height: 160px;
    position: relative;
    transition:
        transform var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard),
        border-color var(--motion-base) var(--ease-standard);
}

.files-grid-view .file-item.dragging {
    opacity: 0.5;
    transform: scale(0.95);
    box-shadow: none;
}

.files-grid-view .file-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -8px var(--color-shadow-md);
    border-color: var(--color-accent);
}

/* The thumbnail subtly zooms inside its clipped tile on hover — the "alive"
   feel of a premium gallery. */
.files-grid-view .file-item .file-icon .file-thumb {
    transition: transform var(--motion-moderate) var(--ease-standard);
}

.files-grid-view .file-item:hover .file-icon .file-thumb {
    transform: scale(1.04);
}

.files-grid-view .file-item.selected {
    border-color: var(--color-accent);
    box-shadow:
        0 0 0 1px var(--color-accent-ring-dark),
        0 4px 12px var(--color-accent-ring);
}

.files-grid-view .file-item.selected:hover {
    box-shadow:
        0 0 0 1px var(--color-accent-ring-strong),
        0 6px 18px var(--color-accent-ring-dark);
}

/* elements hidden in grid view — the type label ("Imagen") is redundant under
   a thumbnail, so we drop it and surface the file size instead. */
.files-grid-view .file-item .date-cell,
.files-grid-view .file-item .type-cell,
.files-grid-view .file-item .owner-cell {
    display: none;
}

/* Selection checkbox */
/* Overlay controls sit ON the thumbnail (offset by the card padding) over a
   frosted scrim, so they read as part of the media instead of floating on the
   card corner. */
.files-grid-view .file-item .checkbox-cell {
    position: absolute;
    top: calc(var(--space-3) + 8px);
    left: calc(var(--space-3) + 8px);
    width: 26px;
    height: 26px;
    border-radius: var(--radius-md);
    background: var(--color-scrim-control);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 3px var(--color-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 10;
    cursor: pointer;
    transition: opacity var(--motion-fast) var(--ease-standard);
}

/* Visible whenever the card is hovered OR already selected, so the checked
   state stays on screen after the pointer leaves. */
.files-grid-view .file-item:hover .checkbox-cell,
.files-grid-view .file-item.selected .checkbox-cell {
    opacity: 1;
}

/* Custom-drawn checkbox: an empty white box that fills with accent and shows a
   crisp white tick when checked. The native 17px control was invisible once the
   cell turned accent on selection (accent-on-accent), and the intended tick
   targeted a `.checkbox-cell i` the markup never renders — so a click read as
   "nothing happened". This makes the checked state unmistakable. */
.files-grid-view .file-item .checkbox-cell input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    display: grid;
    place-content: center;
    cursor: pointer;
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard);
}

.files-grid-view .file-item .checkbox-cell input[type="checkbox"]::after {
    content: "";
    width: 5px;
    height: 9px;
    margin-top: -1px;
    border: solid var(--color-danger-text);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform var(--motion-fast) var(--ease-standard);
}

.files-grid-view .file-item .checkbox-cell input[type="checkbox"]:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.files-grid-view .file-item .checkbox-cell input[type="checkbox"]:checked::after {
    transform: rotate(45deg) scale(1);
}

.files-grid-view .file-item .checkbox-cell input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* More actions button (three dots) — top-right of the thumbnail on a scrim. */
.files-grid-view .file-item .file-actions {
    position: absolute;
    top: calc(var(--space-3) + 8px);
    right: calc(var(--space-3) + 8px);
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-scrim-control);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 3px var(--color-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 10;
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--text-md);
    transition: opacity var(--motion-fast) var(--ease-standard);
}

.files-grid-view .file-item:hover .file-actions {
    opacity: 1;
}

.files-grid-view .file-item .file-actions:hover {
    color: var(--color-accent);
}

.files-grid-view .file-item.drop-target {
    background-color: var(--color-warning-ring);
    border: 2px dashed var(--color-warning-border);
}

/* "Shared" indicator — top-left of the thumbnail. Sits below the checkbox
   (which only appears on hover), so the two never both compete for the eye. */
.files-grid-view .file-item .file-badge-shared {
    position: absolute;
    top: calc(var(--space-3) + 8px);
    left: calc(var(--space-3) + 8px);
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-scrim-control);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 3px var(--color-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    font-size: var(--text-2xs);
    padding: 0;
    line-height: var(--leading-none);
}

/* Favorite star — top-right of the thumbnail, left of the kebab, on a scrim. */
.files-grid-view .file-item button.favorite-star {
    position: absolute;
    top: calc(var(--space-3) + 8px);
    right: calc(var(--space-3) + 8px + 34px);
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-scrim-control);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 3px var(--color-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 12;
    cursor: pointer;
    color: var(--color-text-subtle);
    font-size: 15px;
    padding: 0;
    line-height: var(--leading-none);
    transition: opacity var(--motion-fast) var(--ease-standard);
}

.files-grid-view .file-item:hover button.favorite-star {
    opacity: 1;
}

.files-grid-view .file-item button.favorite-star:hover {
    color: var(--color-star-text);
}

.files-grid-view .file-item button.favorite-star.active {
    opacity: 1;
    color: var(--color-star-text-hover);
}

.files-grid-view .file-item button.favorite-star.active:hover {
    color: var(--color-star-active);
}

.files-grid-view .file-item .name-cell {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-align: center;
    margin-bottom: 2px;
    color: var(--color-text);
    /* Span the full card width. The card is a centered flex column
       (`align-items: center`), so without an explicit width the name-cell —
       which wraps BOTH the thumbnail tile and the filename — shrink-wraps to
       the filename's length. That made `.file-icon { width: 100% }` track the
       NAME width, so a long name ("CURSO TERRAFORM") rendered a big tile and a
       short one ("Idiomas") a small one. Forcing 100% makes every thumbnail
       tile identical regardless of name length. */
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: var(--space-1);
}

.files-grid-view .file-item .name-cell span {
    display: block;
    max-width: 100%;
    /* Ellipsis must live on the span (the text node), not the flex parent,
       or long names clip with no "…". */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.files-grid-view .file-item .name-cell svg.favorite-star-inline {
    display: none;
}

/* The grid card's secondary line is now the combined .grid-meta block
   ("hace 2 días · 4,31 MB"), so the standalone size-cell is hidden here. */
.files-grid-view .file-item .size-cell {
    display: none;
}

/* ── Grid metadata line — recency + size (+ owner avatar when shared) ──────
   Replaces the lone "4,31 MB": a top file app captions a thumbnail with WHEN
   it was touched (the dominant retrieval cue), not just bytes. Hidden
   everywhere except the grid — list view keeps its own date/size/owner
   columns, so a display:none here drops it cleanly out of the row grid. */
.grid-meta {
    display: none;
}

.files-grid-view .file-item .grid-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    max-width: 100%;
    margin-top: 2px;
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
}

/* On a narrow card the relative date truncates first; the size never clips. */
.files-grid-view .file-item .grid-meta__date {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.files-grid-view .file-item .grid-meta__size {
    flex: 0 0 auto;
    color: var(--color-text-faint);
}

.files-grid-view .file-item .grid-meta__size::before {
    content: "·";
    margin-right: var(--space-1);
    color: var(--color-text-faint);
}

/* Owner avatar — only rendered when the item is shared; sits at the line end. */
.files-grid-view .file-item .grid-meta .user-vignette {
    flex: 0 0 auto;
    margin-left: var(--space-1);
}

/* Full-width thumbnail tile with a fixed aspect ratio — the image
   (`.file-thumb`, object-fit:cover) fills it edge-to-edge for a uniform,
   rich grid instead of a small letterboxed preview. Non-image files show
   their type icon centred on the placeholder fill. */
.files-grid-view .file-item .file-icon {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    background: var(--color-bg-input);
    /* Hairline inner ring so light thumbnails don't bleed into the card. */
    box-shadow: inset 0 0 0 1px var(--color-border);
    margin: 0 0 var(--space-3);
    font-size: 30px;
}

/* Type icon for non-thumbnail files (documents, etc.) — perfectly centered in
   the tile. `inset: 0` + `margin: auto` + a fixed size is the absolute-centering
   trick; the previous `top: auto` broke the vertical half, bottom-anchoring the
   icon so it sat low in the tile. */
.files-grid-view .file-item .file-icon > i,
.files-grid-view .file-item .file-icon > svg {
    inset: 0;
    margin: auto;
    width: 56px;
    height: 56px;
}

/* ── Drag ghost ──────────────────────────────────────────── */

.dragged-items {
    --dragged-files-list-columns: 36px minmax(200px, 1fr);
    flex-direction: column;
    background-color: transparent;
    overflow: hidden;
    border-radius: var(--radius-xl);
    width: 100%;
}

.dragged-items .file-item {
    grid-template-columns: var(--dragged-files-list-columns);
    column-gap: var(--space-3);
    align-items: center;
    background-color: var(--color-item);
    display: flex;
    padding: var(--space-1);
    width: 360px;
    height: 46px;
    color: var(--color-text);
}

/* file name text is truncated */
.dragged-items .file-item div:nth-child(2) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dragged-items .file-item .file-icon {
    width: 36px;
    height: 36px;
}

.dragged-items div.fading {
    -webkit-mask-image: linear-gradient(to bottom, var(--color-item) 10%, transparent);
    mask-image: linear-gradient(to bottom, var(--color-item) 10%, transparent);
}

.dragged-items-badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    background: var(--color-notification-badge);
    color: var(--color-danger-text);
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    padding: var(--space-0-5);
}

/* ── Swimlane group header ───────────────────────────────── */

/* Spans the full grid width in list view; no-op in grid view since
   grid wraps it naturally. */
.resource-list__swimlane-header {
    grid-column: 1 / -1;
    padding: var(--space-1-5) var(--space-3) var(--space-1);
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-faint);
    border-bottom: 1px solid var(--color-border);
    margin-top: var(--space-2);
    cursor: default;
    user-select: none;
}

.resource-list__swimlane-header:first-child,
.list-header + .resource-list__swimlane-header {
    margin-top: 0;
}

/* When the header contains a rich DOM node (e.g. a user vignette for the
   "owner" group-by), reset the typographic overrides that only make sense
   for plain-text labels, and lay the node out inline. */
.resource-list__swimlane-header--node {
    display: flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    text-transform: none;
    letter-spacing: normal;
    font-size: inherit;
    font-weight: var(--weight-normal);
    color: inherit;
}

/* ── Swimlane group card (list view only) ────────────────── */

/* When swimlane groups are present, dissolve the outer container into the
   page background so each group card reads as its own panel. */
.files-list-view:has(.resource-list__swimlane-group) {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    gap: var(--space-2-5);
}

/* Each group is a self-contained card */
.files-list-view .resource-list__swimlane-group {
    background-color: var(--color-item);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 3px var(--color-shadow-xs);
    overflow: hidden;
}

/* The header inside a group card is always first — no extra top margin */
.files-list-view .resource-list__swimlane-group .resource-list__swimlane-header {
    margin-top: 0;
}

/* ── Swimlane group wrapper (grid view) ──────────────────── */

/* The group wrapper must be transparent to the grid so .file-item children
   continue to flow in the parent's columns (subgrid mirrors the column tracks).
   The wrapper spans the full row width; items inside fill the columns naturally. */
.files-grid-view .resource-list__swimlane-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    gap: var(--space-5);
}

/* ── Section item modifiers ──────────────────────────────── */

/* — Favorites — */

.file-item.favorite-item {
    border-left: 3px solid var(--color-warning-border);

    [dir="rtl"] & {
        border-right: 3px solid var(--color-warning-border);
        border-left: unset;
    }
}

/* list-view column override */
.file-item.favorite-item {
    position: relative;
    grid-template-columns: 30px minmax(200px, 2fr) 1fr 1fr 120px;
}

.file-item.favorite-item .favorite-indicator {
    position: relative;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
}

/* — Recent — */

.files-grid-view .file-item.recent-item {
    border-left: 3px solid var(--color-recent-border);

    [dir="rtl"] & {
        border-right: 3px solid var(--color-recent-border);
        border-left: unset;
    }
}

/* list-view column override */
.file-item.recent-item {
    position: relative;
    grid-template-columns: 30px minmax(200px, 2fr) 1fr 1fr 120px;
}

.file-item.recent-item .recent-indicator {
    position: relative;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
}

/* ── Path column (opt-in via ResourceListConfig.showPath) ──────────
 * Visible in list view only — grid cards hide it because they have no
 * dedicated column slot. itemTooltip still surfaces the path on hover.
 */
.files-list-view .file-item .path-cell {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files-grid-view .file-item .path-cell {
    display: none;
}

/* ── Custom inline actions (ResourceListConfig.customActions) ──────
 * Always visible in both list and grid view — used by trash for the
 * restore / permanent-delete buttons that must be one click away.
 */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-lg);
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-subtle);
    font-size: var(--text-md);
    padding: 0;
}

.btn-action:hover {
    background: var(--color-border-subtle);
    color: var(--color-text-dark);
}

.files-grid-view .file-item .btn-action {
    margin-top: var(--space-1);
}