/* ==========================================================================
   Admin All Files explorer (.admin-files-* / body.fh-admin-files).
   Owning feature: admin file explorer
   Load order is defined in Views/Shared/_CssIncludes.cshtml — do not reorder.
   ========================================================================== */

/* ==========================================================================
   Admin All Files explorer (Views/AdminFileExplorer) — full-height two-pane
   file manager. Tree + listing fill the remaining viewport under the navbar
   (one scroller per pane), not a 68vh card in a padded article. Footer is
   omitted for FileExplorer in _Layout.cshtml the same way Browse is.

   Everything here is scoped under .admin-files-* or body.fh-admin-files so it
   can't leak onto /drive or other admin pages, which share .fh-list-card,
   .fh-empty, .fh-selection-toolbar and the .fh-col-* family with this page.
   ========================================================================== */

/* Page chrome: size the explorer to the leftover viewport and drop the
   global well padding / --fh-shell-max cap. Overflow stays visible on the
   chrome (html/body/main/content) so Popper strategy:fixed "+ New" / row
   menus are not clipped; the shell is the only overflow:hidden box, and
   its :has(.dropdown-menu.show) rule lifts that while a menu is open.
   Document double-scroll is prevented by a definite remaining-viewport
   height on the shell plus min-height:0 on .fh-main (the global
   min-height: calc(100vh - header) is taller than dvh on mobile). */
html:has(body.fh-admin-files) {
  height: 100%;
  height: 100vh;
  height: 100dvh;
}
body.fh-admin-files {
  --admin-files-well-pad: 0.5rem;
  height: 100%;
  overscroll-behavior: none;
}
@media (max-width: 767.98px) {
  body.fh-admin-files { --admin-files-well-pad: 0px; }
}

body.fh-admin-files .fh-shell {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Override .fh-main's global min-height (100vh - header): on mobile vh is
   taller than dvh, and that min-height is what grew the document under the
   explorer. */
body.fh-admin-files .fh-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.fh-admin-files .fh-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--admin-files-well-pad) 0;
}
body.fh-admin-files .fh-content > .container-fluid {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-width: none;
  width: 100%;
  padding: 0 var(--admin-files-well-pad);
  display: flex;
  flex-direction: column;
}

.admin-files-shell {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  /* Remaining viewport after the fixed navbar and this page's well padding.
     dvh includes mobile browser chrome; vh is the fallback. Footer is not
     in the tree (hidden in _Layout), so it is not subtracted. max-height:
     100% caps 1px rounding so the document does not grow a second bar. */
  height: calc(100vh - var(--fh-header-h) - (2 * var(--admin-files-well-pad)));
  height: calc(100dvh - var(--fh-header-h) - (2 * var(--admin-files-well-pad)));
  max-height: 100%;
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-lg);
  background: #fff;
  overflow: hidden;
}
@media (min-width: 1440px) and (max-width: 1919.98px) {
  .admin-files-shell {
    grid-template-columns: 22rem minmax(0, 1fr);
  }
}
@media (min-width: 1920px) and (max-width: 2559.98px) {
  .admin-files-shell {
    grid-template-columns: 24rem minmax(0, 1fr);
  }
}
@media (min-width: 2560px) and (max-width: 3839.98px) {
  .admin-files-shell {
    grid-template-columns: 28rem minmax(0, 1fr);
  }
}
@media (min-width: 3840px) {
  .admin-files-shell {
    grid-template-columns: 32rem minmax(0, 1fr);
  }
}

/* Both panes scroll independently inside the shell instead of growing the
   page. min-height:0 is what lets a grid/flex child shrink below its content
   so overflow-y:auto actually fires. Row menus escape via strategy:fixed on
   every .fh-row-menu-toggle / [data-fh-menu]. */
.admin-files-tree,
.admin-files-listing {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.admin-files-tree {
  border-right: 1px solid var(--fh-border);
  padding: 1rem;
}
.admin-files-listing {
  display: flex;
  flex-direction: column;
}
/* The empty state ("Select a folder…" / "This folder is empty.") fills the
   listing pane via .fh-empty--bare (Views/AdminFileExplorer). */
/* Same 6px scrollbar treatment as .fh-tree-picker (this file, ~line 141). */
.admin-files-tree::-webkit-scrollbar,
.admin-files-listing::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.admin-files-tree::-webkit-scrollbar-thumb,
.admin-files-listing::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 3px;
}
.admin-files-tree::-webkit-scrollbar-thumb:hover,
.admin-files-listing::-webkit-scrollbar-thumb:hover {
  background-color: var(--fh-muted);
}
.admin-files-tree::-webkit-scrollbar-track,
.admin-files-listing::-webkit-scrollbar-track {
  background: transparent;
}

/* Pane header (breadcrumb + count/owner + "+ New") pinned while the listing
   scrolls inside its own container — same rhythm tokens as .fh-content-head
   (--fh-head-pad-y / --fh-head-gap), pane-scoped rather than viewport-scoped
   since this sticks to the top of the PANE, not the page. Horizontal padding
   is 1rem to line up with .fh-list-card's own cell padding once its border
   is flattened away below. */
.admin-files-head {
  position: sticky;
  top: 0;
  z-index: 2;
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid var(--fh-border);
  padding: var(--fh-head-pad-y) 1rem;
  display: flex;
  flex-direction: column;
  gap: var(--fh-head-gap);
  overflow: visible;
}
.admin-files-head .fh-breadcrumb {
  margin: 0;
}
.admin-files-head-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.75rem 1rem;
  min-width: 0;
}
.admin-files-head-main > :first-child {
  min-width: 0;
}
.admin-files-head .fh-toolbar {
  flex-shrink: 0;
}
/* Owner / Department, stated once per folder instead of once per row — the
   table's Owner column was retired because Model.OwnerLabel is one value for
   the whole folder, not per-row data (every row rendered the same string). */
.admin-files-owner {
  padding: 0.15rem 0.6rem;
  background: var(--fh-soft);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-sm);
  font-size: var(--fh-text-xs);
  color: var(--fh-muted);
  font-weight: var(--fh-weight-medium);
}

/* Flatten .fh-list-card inside the listing pane so it reads as the pane's
   own surface rather than a card nested inside the shell's card. Its
   :has(.dropdown-menu.show) overflow: visible rules are untouched — they
   belong to .fh-list-card itself and are not redefined here. */
.admin-files-listing .fh-list-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  margin-inline: 0;
}
.admin-files-listing .table {
  width: 100%;
}

/* While a dropdown is open, lift overflow clips on the shell and listing pane
   so Popper strategy:fixed menus escape the scroll container (same problem
   /drive solved with #list-view rules — admin table is not inside that id). */
.admin-files-shell:has(.dropdown-menu.show),
.admin-files-shell:has(.has-open-menu),
.admin-files-shell:has([aria-expanded="true"]) {
  overflow: visible;
}
.admin-files-listing:has(.dropdown-menu.show),
.admin-files-listing:has(.has-open-menu),
.admin-files-listing:has([aria-expanded="true"]) {
  overflow-y: visible;
}

/* Open row — mirrors #list-view tbody tr treatment for row "⋮" menus. */
.admin-files-listing tbody tr:has(.dropdown-menu.show),
.admin-files-listing tbody tr:has([aria-expanded="true"]),
.admin-files-listing tbody tr.has-open-menu {
  position: relative;
}
.admin-files-listing tbody tr:has(.dropdown-menu.show) > td,
.admin-files-listing tbody tr:has([aria-expanded="true"]) > td,
.admin-files-listing tbody tr.has-open-menu > td {
  position: relative;
}

/* While the floating selection bar is up, give the pane's own scroll
   container the same tail padding .fh-content gets on /drive (this file,
   ~line 2855) — that rule only matches .fh-content's direct child, so it
   never fires here on its own. Safe-area keeps the bar above the
   home-indicator on a phone. */
.admin-files-shell:has(.fh-selection-toolbar:not(.d-none)) .admin-files-listing {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}
.admin-files-listing .fh-selection-toolbar {
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 575.98px) {
  .admin-files-listing .fh-selection-toolbar {
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 1023.98px) {
  /* Phone + tablet: one column. Landing = tree; .is-browsing (set by
     admin-files.js after a listing load) = listing only. Do not park a
     16rem tree beside a squeezed listing. The "All files" crumb is a real
     <a href="/Admin/Files"> that leaves browsing mode. */
  .admin-files-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-files-shell:not(.is-browsing) .admin-files-listing {
    display: none;
  }
  .admin-files-shell.is-browsing .admin-files-tree {
    display: none;
  }
  /* Checkbox column leaves less room for Name — hide secondary columns earlier
     than /drive's 767px breakpoint (scoped here so browse is untouched). */
  .admin-files-listing .fh-col-uploader,
  .admin-files-listing .fh-col-modified {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .admin-files-shell {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .admin-files-tree {
    border-right: 0;
  }
}