/* Files tab: folder sidebar, toolbar and the Data/Assets/Literature tables. */

/* Folders and the list they filter are one instrument, so they share a box and
   a hairline — the resources tab's arrangement. */
.workspace {
  min-height: max(520px, calc(100dvh - 238px));
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(162px, 14%) minmax(0, 1fr);
  /* Explicit rows, not left to auto-sizing + align-content: the bars row
     (auto) should only ever be as tall as its own content, never stretched
     to help fill min-height above — but the sidebar/table row (1fr) is
     exactly the opposite: it SHOULD always claim whatever height is left up
     to that min-height, because that's what makes the sidebar's own column
     reach the bottom of the workspace even when the tab has few files
     (align-items stays at its default stretch — that's what makes the
     sidebar match the 1fr row's full height, not just the table's). One
     align-content value can't do both at once, since it applies to every
     row alike — that's what "start" (an earlier attempt at just the first
     half of this) got wrong for the second. */
  grid-template-rows: auto 1fr;
  /* Was overflow: hidden, only to clip corners to the border-radius below —
     but position: sticky on a descendant sticks relative to the nearest
     ancestor with non-visible overflow, and that's the actual page's scroll,
     not this element (nothing here scrolls on its own). Hidden overflow here
     would silently break the sticky bars and sidebar below. The sticky bars'
     own border-radius covers the corners it would have clipped. */
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper-raised);
  box-shadow: 0 9px 28px rgba(34, 31, 25, .045);
}
/* overflow-x alone computes overflow-y to auto, not visible — see the note on
   .shell.is-wide in project.css. */
.workspace-main { min-width: 0; max-width: 100%; padding: 18px; overflow-x: clip; overflow-y: visible; }
/* Search + upload/create — always relevant, so it's never disabled and
   never scrolls away. Spans both the folder tree and the table below it
   (grid-column on the item itself, see the markup in pages/project/files),
   since "add stuff" applies to the whole browser, not just the table half. */
.dl-sticky-bars {
  position: sticky;
  top: 0;
  z-index: 5;
  grid-column: 1 / -1;
  background: var(--paper-raised);
  border-bottom: 1px solid var(--line);
  border-radius: 3px 3px 0 0;
}
/* The drop target is the whole tab; the ring is drawn inside so it can never
   widen the page. */
.workspace.is-dragover { position: relative; }
.workspace.is-dragover::after {
  content: "Drop files or folders to upload";
  position: absolute;
  inset: 0;
  z-index: 6; /* above .dl-sticky-bars (5) so it isn't hidden behind the sticky bars while dragging */
  display: grid;
  place-items: center;
  border: 2px dashed var(--blue);
  border-radius: 3px;
  background: color-mix(in srgb, var(--blue-soft) 55%, transparent);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  pointer-events: none;
  text-transform: uppercase;
}

.folder-sidebar {
  /* Not sticky (tried it, not wanted) — just a normal grid column that
     always reaches the workspace's full height via grid-template-rows: 1fr
     on .workspace above, whether that's because the table is tall or
     because the row is filling out min-height on a short tab. */
  -webkit-user-select: none;
  user-select: none;
  min-width: 0;
  padding: 12px 9px;
  border-right: 1px solid var(--line);
  background: rgba(23, 23, 19, .018);
}
/* Reached from the picker on a phone, where the sidebar is off screen. */
.folder-picker { display: none; }

/* Head: what the panel is, then what you can do to it. A new folder lands
   inside whichever row is selected, so the note says which that is before
   the button is pressed. */
/* Depth comes from the nesting, kept tight so a nested name still has room:
   a 14px disclosure column and a short guide inset per level. */
.folder-tree { display: grid; gap: 1px; }
/* Everything/Unfiled are not part of the hierarchy, so they sit apart from it. */
.tree-root-line + .tree-row-line:not(.tree-root-line),
.tree-root-line + .tree-branch { margin-top: 6px; }
.tree-branch { min-width: 0; }
.tree-children { display: grid; gap: 1px; }
.tree-branch.is-collapsed > .tree-children { display: none; }
.tree-row-line.is-folder-drop { background: var(--blue-soft); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }

/* Floated on top and revealed on hover, like Presentations' and Samples'
   rename/delete pairs — in-flow icon buttons forced the row taller than the
   rest of the tree's rows to fit them. */
.folder-tree .tree-row-line { position: relative; }
.tree-actions { position: absolute; right: 4px; top: 50%; z-index: 1; transform: translateY(-50%); display: flex; align-items: center; opacity: 0; }
.folder-tree .tree-row-line:hover .tree-actions, .folder-tree .tree-row-line:focus-within .tree-actions { opacity: 1; }
.folder-tree .tree-row-line:has(.tree-actions):hover .tree-row-count { visibility: hidden; }
.icon-button.is-dense.tree-action { color: #b6b0a5; }
.icon-button.is-dense.tree-action:hover:not(.is-danger) { color: var(--blue); }

.tree-form { padding: 5px 5px 5px 27px; }
.tree-form input { width: 100%; min-width: 0; padding: 3px 5px; border: 1px solid var(--blue); border-radius: 2px; outline: 0; background: var(--paper-raised); color: var(--ink); font-size: var(--text-control); }
.tree-children .tree-form { padding-left: 12px; }

.folder-new-button { width: 100%; gap: 7px; margin-bottom: 10px; font-size: var(--text-control); }
.folder-new-button svg { width: 14px; height: 14px; }

.sidebar-empty { margin: 12px 4px 0; color: var(--muted); font-size: var(--text-control); }

/* Search + creation actions — lives in .dl-sticky-bars, see .workspace above. */
.dl-toolbar { max-width: 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.dl-search { position: relative; display: flex; align-items: center; }
.dl-search input { width: 260px; max-width: 100%; padding-right: 26px; }
.dl-search.is-active input { border-color: var(--blue); }
.dl-search button { position: absolute; right: 4px; color: var(--muted); }
.dl-toolbar-actions { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.dl-hint { max-width: 260px; margin-right: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; opacity: .6; }
/* Bulk actions on a selection — only rendered once count > 0 (see
   table.js's selectionToolbar), so there's nothing to show/hide here. */
.dl-selection-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: var(--blue-soft);
}
.dl-count { flex: 0 0 auto; color: var(--blue); font-size: var(--text-control); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Keyboard-navigable list: arrows move the cursor row, shift extends.
   Text is unselectable so shift-click extends the selection instead of
   dragging a text range across rows. */
/* overflow-x alone (same gotcha noted on .workspace-main and .shell.is-wide)
   would otherwise compute overflow-y to auto here too, on the table's own
   direct wrapper — same causal chain, same fix.
   container-type lives here (for the @container query below), not on
   .workspace-main — it was there originally, but container-type implies
   layout containment, and a grid item under containment doesn't correctly
   hand its content's block size back up to the grid for row-height
   purposes. That's what was capping the row (and the sidebar's "room to
   stick" within it) at whatever height .workspace-main computed on its own
   — visually, the table read as cropped at the sidebar's height instead of
   the row stretching to the table's actual height. .list-scroll isn't a
   grid item itself, so containment here doesn't feed back into anything. */
.list-scroll { container-type: inline-size; max-width: 100%; overflow-x: auto; overflow-y: visible; outline: 0; -webkit-user-select: none; user-select: none; }
/* Drawn inside: an outset ring pushed the pane into horizontal overflow. */
.list-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.list-table { width: 100%; border-collapse: collapse; }
/* Widths come from the colgroup; modal tables keep automatic layout. */
.list-scroll .list-table { table-layout: fixed; }
.list-table col.col-select { width: 28px; }
/* One 26px button each: details, rename, download, share, delete — five at
   most (the data tab, editable, with sharing on). A column too narrow for
   them all does not wrap, and this one deliberately doesn't clip either
   (see .col-actions below), so a column sized for fewer than five pushed
   the row wider than the panel and forced a horizontal scroll to reach
   the last button. */
.list-table col.col-actions { width: 148px; }
.list-table tbody tr { cursor: default; }
/* The cursor ring is drawn with insets: under border-collapse the row's top
   border loses to the previous row's bottom border, so only part of it shows. */
.list-table tr.is-cursor td { box-shadow: inset 0 1px 0 var(--blue), inset 0 -1px 0 var(--blue); }
.list-table tr.is-cursor td:first-child { box-shadow: inset 0 1px 0 var(--blue), inset 0 -1px 0 var(--blue), inset 2px 0 0 var(--blue); }
.list-table tr.is-cursor td:last-child { box-shadow: inset 0 1px 0 var(--blue), inset 0 -1px 0 var(--blue), inset -2px 0 0 var(--blue); }
.list-table th { padding: 0 12px 0 0; border-bottom: 1px solid var(--line); text-align: left; }
.list-table th button { display: inline-flex; align-items: center; gap: 5px; width: 100%; padding: 0 0 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-label); text-align: left; text-transform: uppercase; white-space: nowrap; }
.list-table th button:hover { color: var(--ink); }
.list-table th.is-sorted button { color: var(--blue); }
.sort-mark { font-size: 7px; }
.list-table td { padding: 9px 10px 9px 0; overflow: hidden; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.list-table tbody tr:last-child td { border-bottom: 0; }
/* Hover stays off selected rows so it never competes with the selection tint. */
.list-table tbody tr:not(.is-selected):hover { background: var(--paper-raised); }
.list-table tr.is-selected { background: var(--blue-soft); }
.list-table a { color: var(--blue); }

/* Greyed placeholder rows for uploads still in flight — see table.js's
   transferRows and core/upload-queue.js. Not a real row (no selection, no
   sort, no actions besides retry/clear), so it's styled apart from the rest
   of .list-table rather than trying to look like one. */
.list-table tr.is-in-transfer td { padding: 9px 10px; color: var(--muted); background: var(--paper-raised); font-style: italic; }
.list-table tr.is-in-transfer.is-error td { font-style: normal; }
.transfer-row-name { margin-right: 8px; color: var(--ink); font-style: normal; }
.transfer-row-size { margin-right: 12px; opacity: .8; }
.transfer-row-bar { display: inline-block; width: 80px; height: 4px; margin-right: 6px; overflow: hidden; border-radius: 2px; background: var(--line); vertical-align: middle; }
.transfer-row-bar-fill { display: block; height: 100%; background: var(--blue); transition: width .2s; }
.transfer-row-pct, .transfer-row-status { font-variant-numeric: tabular-nums; }
.transfer-row-error { color: var(--red); font-weight: 600; }
.list-table tr.is-in-transfer .icon-button { margin-left: 6px; }
.list-table .col-select { padding-right: 0; }
.list-table .col-actions { padding-right: 0; overflow: visible; text-align: right; text-overflow: clip; white-space: nowrap; }
.list-table td { min-width: 0; }
.cell-name { max-width: 100%; overflow: hidden; color: var(--ink); text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }

.row-select { width: 100%; padding: 3px 4px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--muted); font-size: 12px; }
.row-select:hover, .row-select:focus { border-color: var(--line); background: var(--paper-raised); color: var(--ink); }
.row-select:disabled { opacity: .35; }
.icon-button.is-dense { color: var(--muted); vertical-align: middle; }
.icon-button.is-dense:hover { color: var(--ink); }
.icon-button.is-dense svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.status-dot { width: 7px; height: 7px; display: inline-block; margin-right: 8px; border-radius: 50%; background: #9ca3af; vertical-align: middle; }
.status-done { background: var(--green); }
.status-error { background: var(--red); }
.status-parsing, .status-pending { background: #d97706; }


.load-more { display: block; width: 100%; margin-top: 18px; padding: 12px; border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.load-more:hover { border-color: var(--ink); color: var(--ink); }

@media (max-width: 700px) {
  /* The tree costs a fifth of the width and there are no crumbs to navigate
     with, so it moves into a sheet behind a picker that names the folder the
     list is showing. */
  .workspace { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .workspace-main { min-height: 420px; padding: 13px; }
  .folder-sidebar { display: none; }

  .folder-picker {
    min-height: var(--tap);
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 11px 13px 8px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: rgba(23, 23, 19, .018);
    color: var(--ink);
    cursor: pointer;
    text-align: left;
  }
  .folder-picker span { color: var(--muted); font-size: var(--text-meta); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
  .folder-picker strong { min-width: 0; overflow: hidden; font-size: var(--text-control); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .folder-picker::after { content: "⌄"; margin-left: auto; color: var(--muted); }
  /* The list carries the name and nothing else: the tick column, the type and
     the row actions all belong to a file's own sheet, which a tap opens. */
  .list-table .col-select,
  .list-table .col-actions,
  .list-table .col-type,
  .list-table .col-files { display: none; }
  /* One size through the row, matching the folder tree beside it. */
  .list-table td { padding-block: 11px; font-size: var(--text-control); }

  /* The selection bar needs the tick column to ever have anything to show —
     it simply never renders here (table.js's selectionToolbar returns ""
     when nothing's selected, and nothing can be selected without the tick
     column) rather than needing a rule to hide it. Upload/create stay: they
     don't depend on a selection, and a mobile file picker works fine. */
  .dl-toolbar { padding: 12px 13px; }
  .dl-search { flex: 1 1 100%; }
  .dl-search input { width: 100%; }

  .tree-row-line { padding-block: 9px; }
  .tree-row-toggle { height: var(--tap-dense); }
}

.folder-dialog-body { position: relative; display: grid; gap: 14px; padding: 26px 18px 30px; }
.folder-dialog-close { position: absolute; top: 12px; right: 12px; }
.folder-dialog .folder-sidebar { display: block; padding: 0; border-right: 0; background: transparent; }

/* Two tiers so a merely-narrow panel loses a couple of secondary columns
   rather than jumping straight to "Name and one number" — that single-cliff
   version is what made the table useless on smaller/scaled laptop screens. */
@container (max-width: 1200px) {
  .list-scroll .col-sample,
  .list-scroll .col-instrument,
  .list-scroll .col-group,
  .list-scroll .col-authors,
  .list-scroll .col-year,
  .list-scroll .col-journal,
  .list-scroll .col-doi {
    display: none;
  }

  .list-scroll col.col-type { width: 84px !important; }
  /* Details and Rename go first when the room runs out; the other three
     (download, share, delete) stay. */
  .list-scroll col.col-actions { width: 80px; }
  .list-scroll .col-actions .icon-button[data-details],
  .list-scroll .col-actions .icon-button[data-rename] { display: none; }
}

@container (max-width: 900px) {
  .list-scroll .col-size,
  .list-scroll .col-timestamp,
  .list-scroll .col-uploaded,
  .list-scroll .col-updated,
  .list-scroll .col-added {
    display: none;
  }
}