/* ==========================================================================
   Browse list view, column tokens, status bar, selection toolbar.
   Owning feature: browse
   Load order is defined in Views/Shared/_CssIncludes.cshtml — do not reorder.
   ========================================================================== */

/* List: Hero Content Stage */
.fh-list-card {
  background: #ffffff;
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-xl, 0.85rem);
  margin-inline: var(--fh-head-inset, 0.25rem);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.fh-list-card:has(.dropdown-menu.show),
.fh-list-card.has-open-menu {
  overflow: visible !important;
}
.fh-list-card:has(.dropdown-menu.show) .table-responsive,
.fh-list-card.has-open-menu .table-responsive {
  overflow: visible !important;
}
.fh-list-card .table {
  margin-bottom: 0;
  font-size: var(--fh-text-sm);
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.fh-list-card .table thead th {
  border-bottom: 1px solid var(--fh-border);
  border-top: none;
  color: var(--fh-muted);
  font-weight: var(--fh-weight-semibold);
  font-size: var(--fh-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--fh-tracking-wide);
  background: var(--fh-soft);
  padding: var(--fh-row-pad-y, 0.75rem) var(--fh-row-pad-x, 1rem);
  vertical-align: middle;
}
/* Click-to-select rows — same is-selected language as the grid cards. */
#list-view tbody tr[data-id] {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Give the active row's menu a containing block without a stacking context
   (see the .fh-card comment above) so its fixed dropdown escapes to the
   root and resolves at its own 1060 instead of being capped here. */
#list-view tbody tr:has(.dropdown-menu.show),
#list-view tbody tr:has([aria-expanded="true"]),
#list-view tbody tr.has-open-menu {
  position: relative;
}
#list-view tbody tr:has(.dropdown-menu.show) > td,
#list-view tbody tr:has([aria-expanded="true"]) > td,
#list-view tbody tr.has-open-menu > td {
  position: relative;
}
#list-view tbody td {
  padding: var(--fh-row-pad-y, 0.75rem) var(--fh-row-pad-x, 1rem);
  vertical-align: middle;
  border-bottom: 1px solid var(--fh-border);
  color: var(--fh-text);
  transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
#list-view tbody tr:last-child td {
  border-bottom: none;
}
#list-view tbody td.text-center {
  font-size: var(--fh-text-xl);
}
#list-view tbody td.text-center i.fa-folder {
  color: #f59e0b;
}
#list-view tbody a.js-item-link {
  font-weight: var(--fh-weight-medium);
  color: var(--fh-text);
  text-decoration: none;
  transition: color 0.15s ease;
}
#list-view tbody a.js-item-link:hover {
  color: var(--fh-primary);
}
.fh-list-card table.table-hover > tbody > tr:hover > * {
  background-color: var(--fh-primary-soft, #eff6ff);
}
.fh-list-card table.table-hover > tbody > tr.is-selected > * {
  background-color: var(--fh-selected-bg, #f0f7ff) !important;
  color: var(--fh-primary);
}
.fh-list-card table.table-hover > tbody > tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--fh-primary);
}
.fh-list-card table.table-hover > tbody > tr.is-selected:hover > * {
  background-color: var(--fh-selected-bg-hover, #e0effe) !important;
  color: var(--fh-primary-dark);
}

/* List-view column widths — named tokens instead of per-cell inline styles,
   shared by the header row (_ContentPanel.cshtml) and every body row
   (_BrowseItems.cshtml) so the two stay pixel-aligned from one place. */
/* Widths are in rem, not px, so they track the root type ramp — at 2560px+
   the text grows but px columns would not have, squeezing the very content
   they were sized around. */
.fh-col-icon { width: 1.875rem; }
.fh-col-kind { width: 2.5rem; }
.fh-col-size { width: 6.25rem; }
.fh-col-modified { width: 10rem; }
.fh-col-uploader { width: 8.75rem; }
.fh-col-uploader-name { max-width: 8.125rem; }
.fh-col-actions { width: 7.5rem; }
/* Admin All Files (Views/AdminFileExplorer) only — the row-select checkbox
   column is wider than .fh-col-icon (1.875rem) so the checkbox sits
   comfortably. (There used to be a .fh-col-owner here too, but Owner /
   Department was one value per folder, not per row — it now reads once in
   .admin-files-owner, in the pane header, instead of on every row.) */
.fh-col-select {
  width: 2.75rem;
  text-align: center;
  vertical-align: middle;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.fh-col-select input[type="checkbox"],
.fh-col-select .form-check-input {
  display: inline-block;
  margin: 0 auto;
  vertical-align: middle;
}

@media (min-width: 1920px) {
  .fh-col-uploader { width: 10rem; }
  .fh-col-uploader-name { max-width: 9.5rem; }
  .fh-col-modified { width: 11rem; }
}

/* These five fixed columns total roughly 27rem before the fluid Name column
   gets any width at all. Inside .table-responsive that scrolls rather than
   breaking the page, but on a phone it meant the Name column — the only one
   anybody scans — was pushed almost entirely out of view behind a horizontal
   scroll. Retiring the secondary columns at narrow widths gives Name the
   space instead; none of the dropped data is lost, since the row's "⋮" →
   Details panel shows uploader and modified date in full. */
@media (max-width: 767.98px) {
  .fh-col-uploader,
  .fh-col-modified { display: none; }
}
@media (max-width: 575.98px) {
  .fh-col-size { display: none; }
  .fh-col-actions { width: 3rem; }
}

/* Status bar */
.fh-statusbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fh-text-xs);
  color: var(--fh-muted);
  background: #fff;
  border: 1px solid var(--fh-border);
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
}
.fh-statusbar strong {
  color: var(--fh-muted);
  font-weight: var(--fh-weight-semibold);
}

/* Selection toolbar: Floating action feedback.

   Deliberately taken OUT of .fh-content's flex flow (position: fixed) rather
   than rendered as a normal block between the toolbar and the grid. In flow it
   appeared on the first click of a double-click and pushed the grid/list down
   by its own height + the .fh-content gap — the second click then landed on
   whatever slid into that spot, so double-click-to-open was unreliable. As a
   fixed overlay it can appear and disappear without moving a single item. */
.fh-selection-toolbar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--fh-float-inset, 1.5rem) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1025; /* above the content, below the modal drawer's backdrop
                    (1030) so an open sidebar covers it too — see the
                    z-index ladder above .fh-app */
  max-width: calc(100vw - 2rem);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 10px 30px -6px rgba(15, 23, 42, 0.22), 0 2px 8px rgba(37, 99, 235, 0.12);
  animation: fh-selection-toolbar-in 0.15s ease-out;
}
@keyframes fh-selection-toolbar-in {
  from { opacity: 0; transform: translate(-50%, 0.5rem); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fh-selection-toolbar { animation: none; }
}
/* Narrow screens: stretch edge-to-edge instead of centering, and let the
   buttons wrap rather than overflow the viewport. */
@media (max-width: 575.98px) {
  .fh-selection-toolbar {
    left: 0.75rem;
    right: 0.75rem;
    transform: none;
    max-width: none;
    border-radius: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  @keyframes fh-selection-toolbar-in {
    from { opacity: 0; transform: translateY(0.5rem); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
/* While the floating bar is up, extend the panel's tail so it can't sit on top
   of the last row / feed status. Padding at the very END of the flow grows the
   page downward without moving anything already rendered above it. */
.fh-panel:has(> .fh-selection-toolbar:not(.d-none)) {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

/* Both the floating upload button and the selection toolbar are pinned to the
   bottom of the viewport. While a selection is active the FAB steps up above
   the toolbar; when the upload dock is visible the FAB stands down entirely
   (see body:has(#upload-dock:not(.is-hidden)) .fh-upload-fab above).
   z-index: FAB 1022, selection toolbar 1025. */
.fh-panel:has(> .fh-selection-toolbar:not(.d-none)) > .fh-upload-fab {
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 991.98px) {
  .fh-panel:has(> .fh-selection-toolbar:not(.d-none)) > .fh-upload-fab {
    bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
  }
}
@media (prefers-reduced-motion: no-preference) {
  .fh-upload-fab {
    transition: transform 0.15s ease, box-shadow 0.15s ease,
                background 0.15s ease, bottom 0.15s ease;
  }
}
#selection-count {
  font-weight: var(--fh-weight-semibold);
  color: #1e40af !important;
  font-size: var(--fh-text-sm);
}