/* =========================================================================
   runevents.Files — Files-only component bundle.
   Single RCL bundle (CLAUDE.md: the one accepted exception to "no component CSS";
   NEVER create *.razor.css). Served at ./_content/runevents.Files/runevents.Files.bundle.css.

   SINGLE OWNER (review fix #11): this file authors the COMPLETE .fl-* vocabulary
   for every Files component. Tasks 14-17 add markup only and never append CSS.
   Sections: (1) mosaic-card icon overrides (FilesLibraryGrid mosaic + FilesPicker cards),
   (2) uploader file-card / batch icon / process step / extracted textarea
   (FilesUploader; .fl-extracted is shared with FilesDetailFlyout),
   (3) file-manager list view + row overflow menu (FilesLibraryGrid list mode),
   (4) detail-flyout version stack (FilesDetailFlyout),
   (5) detail-flyout sharing panel + grid copy feedback (Spec C Task 7/8).

   It REUSES the .mm-* token + chrome vocabulary from the shared Assets bundle
   (./_content/runevents.Assets/...): --mm-primary, --mm-surface, --mm-surface-alt,
   --mm-border, --mm-text, --mm-text-muted, --mm-danger, --mm-radius, --mm-gap.
   The host links BOTH bundles. Do NOT redefine any .mm-* class here.
   ========================================================================= */

/* ===== mosaic card : file-type icon + download overlay (FilesLibraryGrid + FilesPicker) ===== */
/* file-type icon inside a mosaic card — compounded with .mm-card__media so the contain-fit override
   beats the shared bundle's cover-fit rule (.mm-card__media, live bundle :788) on SPECIFICITY
   ((0,2,0) vs (0,1,0)) rather than on stylesheet load order (review pass-2 fix #19) */
.mm-card__media.fl-card__icon { object-fit: contain; padding: 18%; background: var(--mm-surface-alt); }

/* download action in the mosaic overlay — keep primary (not danger-red) on hover; compounded with
   .mm-card__overlay-action so it beats the shared danger hover (.mm-card__overlay-action:hover,
   live bundle :834) at (0,2,1) vs (0,1,1) regardless of link order (review pass-2 fix #19) */
.mm-card__overlay-action.fl-card__overlay-action--download:hover { background: var(--mm-primary); }

/* ===== uploader : non-image file card + batch icon + process step (FilesUploader) ===== */
.fl-file-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius);
    background: var(--mm-surface-alt);
    min-width: 0;
}
.fl-file-card__icon { width: 40px; height: 40px; flex: 0 0 auto; }
.fl-file-card__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
    font-weight: 500;
    color: var(--mm-text);
}
.fl-file-card__size { flex: 0 0 auto; font-size: .8rem; color: var(--mm-text-muted); }

/* batch-strip thumbnail slot for non-image files (type icon instead of an image preview) */
.fl-batch__icon { width: 60%; height: 60%; object-fit: contain; margin: auto; display: block; }

/* uploader Process step container (mascot + spinners + file card + extracted preview) */
.fl-process { display: flex; flex-direction: column; gap: .75rem; }

/* read-only extracted-content textarea (uploader Process step AND detail flyout) */
.fl-extracted {
    min-height: 140px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    line-height: 1.45;
}

/* ===== list view (file-manager rows — FilesLibraryGrid) ===== */
/* NO overflow:hidden here — the abs-positioned .fl-rowmenu must be able to escape the list box
   (a clipping context would hide the overflow menu on trailing rows / 1-2-file folders while its
   fixed backdrop still dismisses it — review pass-2 fix #3). Corner rounding is applied per-edge
   on the head row and the last data row below instead. Same hazard at CELL level: .fl-cell--actions
   is the menu's containing block (position:relative), so it carries overflow:visible to override
   the base .fl-cell ellipsis clip — do not remove either escape hatch. */
.fl-list { display: flex; flex-direction: column; width: 100%; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); background: var(--mm-surface); }
.fl-list__head, .fl-row {
    display: grid;
    grid-template-columns: 2.25rem 2.75rem minmax(8rem, 1fr) 5rem 6rem 9.5rem 5.5rem 8.5rem;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
}
/* top corners rounded on the head, bottom corners on the last row — replaces the former
   overflow:hidden clipping (review pass-2 fix #3) */
.fl-list__head { background: var(--mm-surface-alt); font-size: .8rem; font-weight: 600; color: var(--mm-text-muted); border-bottom: 1px solid var(--mm-border); border-radius: var(--mm-radius) var(--mm-radius) 0 0; }
/* empty folder (zero rows): the T15 markup renders the head unconditionally and the empty-state
   message OUTSIDE the box, so with no .fl-row:last-child to carry the bottom radius the head is the
   container's only/last child — round ALL its corners and drop its bottom hairline, else its
   surface-alt background bleeds past the container's rounded bottom corners (the exact artifact the
   removed overflow:hidden used to clip) and its border doubles the container's own bottom border. */
.fl-list__head:last-child { border-bottom: none; border-radius: var(--mm-radius); }
.fl-row { border-bottom: 1px solid var(--mm-border); cursor: pointer; color: var(--mm-text); }
.fl-row:last-child { border-bottom: none; border-radius: 0 0 var(--mm-radius) var(--mm-radius); }
.fl-row:hover { background: var(--mm-surface-alt); }
.fl-row:focus-visible { outline: 3px solid var(--mm-primary); outline-offset: -3px; }
.fl-row--selected { background: color-mix(in srgb, var(--mm-primary) 10%, var(--mm-surface)); }
/* re-assert: .fl-row:hover (class+pseudo-class) out-specifies the bare .fl-row--selected modifier,
   so without this guard hovering a selected row repaints it surface-alt (live-bundle precedent:
   the .mm-btn--danger:hover re-assert in runevents.Assets' bundle). */
.fl-row--selected:hover { background: color-mix(in srgb, var(--mm-primary) 14%, var(--mm-surface)); }
.fl-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.fl-cell--check { display: flex; justify-content: center; }
.fl-cell--icon { display: flex; justify-content: center; }
.fl-row__icon { width: 1.5rem; height: 1.5rem; object-fit: contain; }
.fl-cell--name { display: flex; align-items: center; gap: .4rem; }
.fl-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-row__flag { flex: 0 0 auto; }
.fl-cell--type, .fl-cell--size, .fl-cell--modified, .fl-cell--versions { color: var(--mm-text-muted); }
/* overflow:visible overrides the base .fl-cell clip: this cell is the row-menu's containing block
   (position:relative + the abs-positioned .fl-rowmenu at top:100%) — it must not clip, and as a
   flex row of buttons it never needs the ellipsis clip (review pass-2 fix #3). */
.fl-cell--actions { position: relative; overflow: visible; display: flex; align-items: center; gap: .15rem; justify-content: flex-end; }
.fl-rowbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.85rem; height: 1.85rem; padding: 0; line-height: 1;
    border: 1px solid transparent; border-radius: var(--mm-radius); background: transparent;
    color: var(--mm-text-muted); cursor: pointer; font-size: 1.1rem;
}
.fl-rowbtn:hover { background: var(--mm-surface); border-color: var(--mm-border); color: var(--mm-text); }
.fl-rowbtn:focus-visible { outline: 3px solid var(--mm-primary); outline-offset: 1px; }
.fl-rowbtn svg { width: 1rem; height: 1rem; }

/* row overflow menu (mirrors .mm-foldermenu) */
.fl-rowmenu__backdrop { position: fixed; inset: 0; z-index: 30; background: transparent; border: none; cursor: default; }
.fl-rowmenu { position: absolute; top: 100%; right: 0; z-index: 31; min-width: 9rem; padding: .25rem; background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); box-shadow: 0 6px 18px rgba(0,0,0,.14); display: flex; flex-direction: column; }
.fl-rowmenu__item { text-align: left; padding: .45rem .6rem; border: none; background: transparent; color: var(--mm-text); border-radius: calc(var(--mm-radius) - 2px); cursor: pointer; font-size: .85rem; }
.fl-rowmenu__item:hover { background: var(--mm-surface-alt); }
.fl-rowmenu__item--danger { color: var(--mm-danger); }

/* ===== detail flyout : version stack (FilesDetailFlyout) ===== */
.fl-version-stack {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius);
    overflow: hidden;
}
.fl-version-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--mm-gap);
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--mm-border);
    cursor: pointer;
}
.fl-version-row:last-child { border-bottom: 0; }
.fl-version-row:hover { background: var(--mm-surface-alt); }
/* keyboard-selectable rows (review fix #28) */
.fl-version-row:focus-visible { outline: 3px solid var(--mm-primary); outline-offset: -3px; }
.fl-version-row--current { background: color-mix(in srgb, var(--mm-primary) 8%, transparent); }
/* re-assert over .fl-version-row:hover — same specificity guard as .fl-row--selected:hover above */
.fl-version-row--current:hover { background: color-mix(in srgb, var(--mm-primary) 12%, transparent); }
/* selected-for-preview marker uses an inset bar, NOT background, so it can never lose a
   specificity fight with :hover or --current backgrounds */
.fl-version-row--selected { box-shadow: inset 3px 0 0 var(--mm-primary); }
.fl-version__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 26px;
    padding: 0 .5rem;
    border-radius: 999px;
    background: var(--mm-surface-alt);
    color: var(--mm-text);
    font-size: .78rem;
    font-weight: 600;
}
.fl-version-row--current .fl-version__num { background: var(--mm-primary); color: #fff; }
.fl-version__meta { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.fl-version__name {
    font-size: .85rem;
    font-weight: 500;
    color: var(--mm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fl-version__sub { font-size: .75rem; color: var(--mm-text-muted); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.fl-version__actions {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    justify-content: flex-end;
}

/* ===== detail-flyout sharing panel (FilesDetailFlyout — Spec C Task 7) ===== */
.fl-share-stack {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius);
    overflow: hidden;
}
.fl-share-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mm-gap);
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--mm-border);
}
.fl-share-row:last-child { border-bottom: 0; }
.fl-share-row:hover { background: var(--mm-surface-alt); }
.fl-share-row--inactive { opacity: .6; }
.fl-share-row__main { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.fl-share-row__badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    height: 22px;
    padding: 0 .5rem;
    border-radius: 999px;
    background: var(--mm-surface-alt);
    color: var(--mm-text);
    font-size: .72rem;
    font-weight: 600;
}
.fl-share-row__meta { font-size: .75rem; color: var(--mm-text-muted); }
.fl-share-row__actions {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    justify-content: flex-end;
}
.fl-share-mint {
    display: flex;
    align-items: center;
    gap: var(--mm-gap);
    padding: .5rem 0;
    flex-wrap: wrap;
}