/* ==========================================================================
   Content well spacing, page-title cluster, denied page.
   Owning feature: app chrome
   Load order is defined in Views/Shared/_CssIncludes.cshtml — do not reorder.
   ========================================================================== */

/* --- Content shell spacing / page-header polish -------------------------
   Started as a Browse-only treatment (chrome-free landing page, sidebar
   collapsed via _Layout.cshtml's old isFocusedSurface) plus the page-header /
   toolbar polish and overall spacing pass that surface was missing
   (cramped/uneven padding, misaligned grid, no visual hierarchy). The sidebar
   is now collapsed by default everywhere, so this spacing is the global
   default too — the rules below target `.fh-content` directly. */
:root {
  /* Rendered .fh-navbar height — supplies body padding-top, drawer/backdrop
     top inset, and scroll-margin so in-page targets clear the fixed navbar. */
  --fh-header-h: 4.25rem;
  /* Vertical rhythm between sections inside .fh-panel — section gap ≥ grid gap
     at every tier so the seam between sections always reads wider than cards. */
  --fh-section-gap: 1.1rem;
  --fh-grid-gap: 1.1rem;
  /* Well padding — the layout .fh-content well only; header band supplies its
     own --fh-head-pad-y immediately below. */
  --fh-well-pad-top: 1.25rem;
  --fh-well-pad-bottom: 2rem;
  --fh-radius-xl: 0.85rem;
  --fh-row-pad-y: 0.75rem;
  --fh-row-pad-x: 1rem;
  --fh-card-pad: 1.1rem;
  --fh-modal-pad: 1.25rem;
  --fh-float-inset: 1.5rem;
  --fh-selected-bg: #f0f7ff;
  --fh-selected-bg-hover: #e0effe;
  /* Header band rhythm — declared once so .fh-content-head's own spacing can't
     drift out of step with the grid it sits above.
     --fh-head-inset is shared with .fh-grid's horizontal padding: the
     breadcrumb/title column must line up with the card column below it, so
     these two are deliberately the same number in one place.
     --fh-head-pad-y is the band's vertical breathing room; --fh-head-gap is
     the seam between the breadcrumb and the title/actions row (larger than the
     gaps *inside* that row, so the hierarchy reads top-to-bottom). */
  --fh-head-inset: 0.25rem;
  --fh-head-pad-y: 1rem;
  --fh-head-gap: 0.9rem;
}
@media (max-width: 575.98px) {
  :root {
    --fh-section-gap: 0.9rem;
    --fh-grid-gap: 0.65rem;
    --fh-well-pad-top: 0.75rem;
    --fh-well-pad-bottom: 1.25rem;
    --fh-radius-xl: 0.75rem;
    --fh-float-inset: 1rem;
    --fh-head-pad-y: 0.7rem;
    --fh-head-gap: 0.65rem;
    --fh-head-inset: 0.15rem;
    --fh-row-pad-y: 0.55rem;
    --fh-row-pad-x: 0.75rem;
    --fh-card-pad: 0.9rem;
    --fh-modal-pad: 0.9rem;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  :root { --fh-grid-gap: 0.85rem; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  :root { --fh-grid-gap: 1rem; }
}
@media (min-width: 1440px) and (max-width: 1919.98px) {
  :root {
    --fh-section-gap: 1.25rem;
    --fh-grid-gap: 1.25rem;
    --fh-shell-max: 100%;
    --fh-read-max: min(100%, 80rem);
    --fh-head-inset: 0.35rem;
  }
}
@media (min-width: 1920px) and (max-width: 2559.98px) {
  :root {
    --fh-section-gap: 1.4rem;
    --fh-grid-gap: 1.4rem;
    --fh-shell-max: min(100%, 110rem);
    --fh-read-max: min(100%, 96rem);
    --fh-preview-max: 80rem;
    --fh-well-pad-top: 1.5rem;
    --fh-well-pad-bottom: 2.25rem;
    --fh-head-pad-y: 1.15rem;
    --fh-head-inset: 0.4rem;
    --fh-row-pad-y: 0.85rem;
    --fh-row-pad-x: 1.15rem;
    --fh-card-pad: 1.25rem;
    --fh-modal-pad: 1.4rem;
  }
}
@media (min-width: 2560px) and (max-width: 3839.98px) {
  :root {
    --fh-section-gap: 1.6rem;
    --fh-grid-gap: 1.6rem;
    --fh-shell-max: min(100%, 140rem);
    --fh-read-max: min(100%, 120rem);
    --fh-preview-max: 96rem;
    --fh-gutter: clamp(0.75rem, 0.45rem + 1.1vw, 2.75rem);
    --fh-well-pad-top: 1.75rem;
    --fh-well-pad-bottom: 2.5rem;
    --fh-head-pad-y: 1.35rem;
    --fh-head-inset: 0.5rem;
    --fh-header-h: 4.5rem;
    --fh-row-pad-y: 0.95rem;
    --fh-row-pad-x: 1.3rem;
    --fh-card-pad: 1.4rem;
    --fh-modal-pad: 1.55rem;
  }
}
@media (min-width: 3840px) {
  :root {
    --fh-section-gap: 1.85rem;
    --fh-grid-gap: 1.85rem;
    --fh-shell-max: min(100%, 168rem);
    --fh-read-max: min(100%, 140rem);
    --fh-preview-max: 110rem;
    --fh-gutter: 3.25rem;
    --fh-well-pad-top: 2rem;
    --fh-well-pad-bottom: 2.75rem;
    --fh-head-pad-y: 1.5rem;
    --fh-head-inset: 0.6rem;
    --fh-header-h: 4.75rem;
    --fh-row-pad-y: 1.05rem;
    --fh-row-pad-x: 1.45rem;
    --fh-card-pad: 1.55rem;
    --fh-modal-pad: 1.7rem;
  }
}

/* Content well — background, horizontal breathing room, and vertical padding. */
.fh-content {
  background-color: var(--fh-bg);
  /* padding-top: var(--fh-well-pad-top); */
  padding-bottom: var(--fh-well-pad-bottom);
}

/* Widen the content gutter — the grid would otherwise stretch edge-to-edge on
   wide monitors. The cap applies to whatever width .fh-main currently has, so
   in push mode it is measured against what is left after the open sidebar's
   column and the content re-centres inside the narrowed well.

   `--fh-shell-max` is stepped on the 1440 / 1920 / 2560 / 3840 token ladder
   (full well on laptops, readable caps from FHD up) so large displays gain
   columns without running cards flush to the bezel or framing a 1440px strip
   in grey. See the token's definition in the responsive scale block. */
.fh-content > .container-fluid {
  max-width: var(--fh-shell-max);
  margin-inline: auto;
}

/* Page header — two rows: the breadcrumb, then .fh-content-head-main
   (title + count on the left, controls on the right). `--fh-head-gap` between
   them is deliberately wider than any gap *inside* either row, so the block
   reads as a hierarchy rather than a stack of equally-weighted strips.
   Lives in normal flow (not sticky): it occupies its own height and the
   `.fh-panel` gap is the seam to the listing. Horizontal inset matches
   `.fh-grid`'s `--fh-head-inset` so the title column lines up with the cards. */
.fh-content-head {
  display: flex;
  flex-direction: column;
  gap: var(--fh-head-gap);
  padding: var(--fh-head-pad-y) var(--fh-head-inset);
}

/* In-page scroll targets only need to clear the fixed navbar — the content
   head is in flow and scrolls away with the rest of the page. */
html {
  scroll-padding-top: var(--fh-header-h);
}
.fh-card,
.fh-grid-section,
#list-view tbody tr {
  scroll-margin-top: var(--fh-header-h);
}

/* The balanced header row: title cluster grows to fill, control cluster keeps
   its natural width at the far end. Below 768px it wraps and the toolbar takes
   a full row of its own (see the media query further down). */
.fh-content-head-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--fh-head-gap);
  min-width: 0;
}

/* Eyebrow — small uppercase section/category indicator above page title */
.fh-eyebrow {
  font-size: var(--fh-text-2xs);
  font-weight: var(--fh-weight-semibold);
  letter-spacing: var(--fh-tracking-wide);
  text-transform: uppercase;
  color: var(--fh-muted);
  line-height: var(--fh-leading-none);
  margin-bottom: 0.2rem;
}

/* Title cluster — icon/title/count on the first line, optional subtitle under
   them. flex-basis (not `auto`) gives the cluster a floor: once the toolbar can
   no longer sit beside 14rem of title, .fh-content-head-main wraps and the
   toolbar takes its own row — rather than the title being crushed to a couple
   of ellipsized characters to keep everything on one line. `min-width: 0` is
   still needed for .fh-page-title's ellipsis to engage below that. */
.fh-page-title-cluster {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  flex: 1 1 14rem;
  min-width: 0;
}

/* Page header — folder name as the page's actual title, with the item count as
   a muted chip inline beside it (rather than a second stacked line, which read
   as a competing heading and cost the band an extra row of height). */
.fh-page-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  width: 100%;
}
.fh-page-header a.fh-icon-btn {
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 0.15rem;
}
.fh-page-title {
  margin: 0;
  font-size: var(--fh-text-3xl);
  font-weight: var(--fh-weight-bold);
  letter-spacing: var(--fh-tracking-tight);
  color: var(--fh-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Folder glyph tile beside the title — same tinted-tile treatment as
   .fh-card-icon.icon-folder, sized down for the header band. */
.fh-page-title-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fh-text-lg);
  line-height: 1;
}
/* Named variants — filled primary + white glyph (Home/Trash language).
   Browse leaves IconVariant unset so it keeps the amber folder default above. */
.fh-page-title-icon-home,
.fh-page-title-icon-search,
.fh-page-title-icon-shared,
.fh-page-title-icon-recent,
.fh-page-title-icon-trash,
.fh-page-title-icon-storage,
.fh-page-title-icon-dept,
.fh-page-title-icon-users,
.fh-page-title-icon-tree,
.fh-page-title-icon-permissions,
.fh-page-title-icon-profile,
.fh-page-title-icon-password,
.fh-page-title-icon-logs,
.fh-page-title-icon-settings {
  background: var(--fh-primary, #2563eb);
  color: #ffffff;
}
.fh-page-title-icon-denied {
  background: var(--fh-danger, #dc2626);
  color: #ffffff;
}
@media (max-width: 575.98px) {
  .fh-page-title {
    font-size: var(--fh-text-2xl);
  }
  .fh-page-title-icon {
    width: 1.8rem;
    height: 1.8rem;
    font-size: var(--fh-text-md);
  }
}

/* Toolbar clusters wrap onto their own full-width line as a group on narrow
   screens (touch targets already ≥44px via the responsive-refinements block
   above), reverting to space-between so "+ New" stays pinned to the right
   edge, with extra row-gap so two stacked rows don't feel glued together. */
@media (max-width: 767.98px) {
  .fh-toolbar {
    flex-basis: 100%;
    justify-content: space-between;
    row-gap: 0.75rem;
  }
}

/* Empty-state hierarchy — title, optional subtitle, optional actions under the
   icon. Rhythm is explicit per-block (the icon owns its margin-bottom) so the
   spacing stays right whether or not the subtitle/actions are present. */
.fh-empty-title {
  margin: 0;
  color: var(--fh-text);
  font-size: var(--fh-text-xl);
  font-weight: var(--fh-weight-semibold);
  line-height: var(--fh-leading-snug, 1.35);
}
.fh-empty--compact .fh-empty-title {
  font-size: var(--fh-text-lg);
}
.fh-empty-sub {
  margin: 0.4rem 0 0;
  max-width: 40ch;
  color: var(--fh-muted);
  font-size: var(--fh-text-sm);
  line-height: var(--fh-leading-normal, 1.5);
}
.fh-empty-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.fh-empty-actions .btn {
  margin: 0;
}

/* Drag-and-drop affordance under a non-empty listing (Browse, Edit+ only).
   The empty state names this, but that hint disappears once the folder has
   items — this is its quiet echo so the drop target stays discoverable.
   Deliberately low-key (muted, x-small, centered, aria-hidden): upload.js's
   full-window overlay and the "+ New" menu are the real affordances. Pulled
   up slightly against .fh-panel's section gap so it nests under the listing
   rather than floating as its own band. */
.fh-drag-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: -0.4rem 0 0;
  font-size: var(--fh-text-xs);
  color: var(--fh-muted);
  user-select: none;
}
.fh-drag-hint > i {
  opacity: 0.65;
}

/* Access-denied actions — the Sign in form/link + Back to home, passed into
   the _EmptyState "actions" slot (.fh-empty--status, Views/Account/Denied). */
.fh-denied-signin-form {
  margin: 0;
  display: inline;
}
.fh-denied-contact {
  margin: 1rem auto 0;
  text-align: center;
  font-size: var(--fh-text-sm);
  color: var(--fh-muted);
}
@media (max-width: 575.98px) {
  .fh-empty {
    padding: 2.25rem 1.25rem;
  }
  .fh-empty--compact {
    padding: 1.5rem 1rem;
  }
  .fh-empty-icon {
    width: 3rem;
    height: 3rem;
    font-size: var(--fh-text-2xl);
  }
  .fh-empty-title {
    font-size: var(--fh-text-lg);
  }
  /* Stack the access-denied / search status actions full-width. */
  .fh-empty--status .fh-empty-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .fh-empty--status .fh-empty-actions .btn,
  .fh-denied-signin-form {
    display: block;
    width: 100%;
  }
  .fh-denied-signin-form .btn {
    width: 100%;
  }
}