/* ==========================================================================
   /drive/search page — pill search bar, All/Folders/Files pills, row results.
   Owning feature: search
   Load order is defined in Views/Shared/_CssIncludes.cshtml — do not reorder.

   Built entirely on the shared token system (base/tokens.css, bootstrap-theme.css)
   and the existing shared components (.fh-search-input/.fh-search-icon from
   layouts/navbar.css, .fh-view-toggle + .fh-grid/.fh-card from pages/browse.css,
   .fh-icon-btn from components/buttons.css, .fh-empty from pages/browse.css).
   No new colors or a second design language — this is the app's soft-surface /
   primary-ink treatment applied to the search surface.
   ========================================================================== */

/* --- Page rhythm ---------------------------------------------------
   The bands inside the form (search bar, pills/meta, filter panel, results)
   stack with the same section seam the rest of the app uses. */
#search-form,
#search-live {
  display: flex;
  flex-direction: column;
  gap: var(--fh-section-gap, 1.1rem);
  min-width: 0;
}

/* Reading-width cap — the same --fh-read-max the home and users pages use,
   so long query strings and result rows never run edge-to-edge. */
.fh-panel:has(#search-form) {
  max-width: var(--fh-read-max, 72rem);
  width: 100%;
  margin-inline: auto;
}

/* --- Hero search bar ------------------------------------------------
   A stand-alone rounded pill on the soft surface: leading muted magnifier,
   transparent input, ghost clear button. Input styling reuses the navbar's
   .fh-search-input; only the container is search-page specific (taller, fully
   rounded, and left-aligned to the same --fh-head-inset as the cards below).
   A hairline --fh-border is always present so the focus lift recolors the
   border rather than growing one (no layout shift, no border jump). */
.fh-search-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 3.25rem;
  padding: 0 0.85rem 0 1.35rem;
  margin-inline: var(--fh-head-inset, 0.25rem);
  background: var(--fh-soft);
  border: 1px solid var(--fh-border);
  border-radius: 50rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.fh-search-bar .fh-search-icon {
  color: var(--fh-muted);
  font-size: var(--fh-text-md);
  flex-shrink: 0;
}
.fh-search-bar:focus-within {
  background: var(--fh-surface, #fff);
  border-color: var(--fh-primary);
  box-shadow: var(--fh-focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.15));
}
.fh-search-bar .fh-search-input {
  font-size: var(--fh-text-base);
  color: var(--fh-text);
}
.fh-search-bar .fh-search-input::placeholder { color: var(--fh-muted); }

/* Ghost clear (✕) button, only present when the box has a term. */
.fh-search-clear {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50rem;
  background: transparent;
  color: var(--fh-muted);
  font-size: var(--fh-text-sm);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.fh-search-clear:hover { background: var(--fh-hover, #f1f5f9); color: var(--fh-text); }
.fh-search-clear:focus-visible { outline: 2px solid var(--fh-primary); outline-offset: 2px; }

/* --- Pills row + right-aligned meta (count · sort · view) ---------- */
.fh-search-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-inline: var(--fh-head-inset, 0.25rem);
}

.fh-search-pills {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.fh-search-pill {
  appearance: none;
  border: 1px solid var(--fh-border);
  background: var(--fh-surface, #fff);
  color: var(--fh-text);
  border-radius: 50rem;
  padding: 0.45rem 1.15rem;
  font-size: var(--fh-text-sm);
  font-weight: var(--fh-weight-medium);
  line-height: var(--fh-leading-normal);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.fh-search-pill:hover { background: var(--fh-soft); border-color: #cbd5e1; }
.fh-search-pill:focus-visible { outline: 2px solid var(--fh-primary); outline-offset: 2px; }
.fh-search-pill.active {
  background: var(--fh-primary);
  border-color: var(--fh-primary);
  color: #fff;
}

.fh-search-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.fh-search-count {
  font-size: var(--fh-text-xs);
  color: var(--fh-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- Filter panel --------------------------------------------------
   Full-width collapsible surface, inset to match the search bar. Fields sit
   on a symmetric 12-col grid: a wide "what" row (Type+ext, Dates) and an even
   "where" row (Area, Size, Folder). Clear left / Apply right, matching the
   Browse filter menu's button order. */
.fh-search-filter-panel {
  margin-inline: var(--fh-head-inset, 0.25rem);
}

/* --- Results: section heads, row list, grid, pager ----------------- */
.fh-search-section-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 var(--fh-head-inset, 0.25rem) 0.6rem;
  color: var(--fh-muted);
}
.fh-search-section-label {
  font-size: var(--fh-text-xs);
  font-weight: var(--fh-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--fh-tracking-wide);
}
.fh-search-section-count {
  font-size: var(--fh-text-xs);
  color: var(--fh-muted);
}

/* Row list — white card sharing .fh-list-card's inset, radius and border, but
   laid out as hairline-divided rows instead of a table (per the design ref). */
.fh-search-list {
  background: var(--fh-surface, #fff);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-xl, 0.85rem);
  margin-inline: var(--fh-head-inset, 0.25rem);
  overflow: hidden;
}
.fh-search-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--fh-border);
}
.fh-search-row:last-child { border-bottom: 0; }
.fh-search-row:hover { background: var(--fh-hover, #f1f5f9); }

.fh-search-row-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  font-size: 1.2rem;
}
.fh-search-row-icon--folder { background: var(--fh-primary-soft, #eff6ff); color: var(--fh-primary); }
.fh-search-row-icon--file { background: var(--fh-soft); color: var(--fh-muted); }

.fh-search-row-body {
  flex: 1 1 auto;
  min-width: 0;
}
.fh-search-row-name {
  font-weight: var(--fh-weight-semibold);
  color: var(--fh-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fh-search-row-name a, .fh-search-row-name a:hover,
.fh-search-row-name button, .fh-search-row-name button:hover { color: inherit; }
.fh-search-row-path {
  font-size: var(--fh-text-xs);
  color: var(--fh-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fh-search-row-path a, .fh-search-row-path a:hover { color: inherit; }

.fh-search-row-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-size: var(--fh-text-xs);
  color: var(--fh-muted);
  white-space: nowrap;
}
.fh-search-row-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

/* Pager — right-aligned Prev/Next under the results, aligned with the cards. */
.fh-search-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-inline: var(--fh-head-inset, 0.25rem);
}

/* --- Responsive ----------------------------------------------------
   Below 768px the meta row stacks: pills center on their own line, and the
   toolbar (icon-only Filter/Sort + count + view toggle) sits centered on a
   single line beneath them — compact enough never to overflow or scroll.
   On phones the result rows let the size·date meta drop under the name/path
   line (indented past the icon tile) instead of squeezing the name. */
@media (max-width: 767.98px) {
  .fh-search-meta { flex-direction: column; align-items: stretch; }
  .fh-search-pills { justify-content: center; }
  .fh-search-tools { margin-left: 0; justify-content: center; flex-wrap: nowrap; }
}

@media (max-width: 575.98px) {
  .fh-search-bar { height: 3rem; padding-left: 1.1rem; }
  .fh-search-row { flex-wrap: wrap; column-gap: 0.7rem; row-gap: 0.15rem; padding: 0.65rem 0.85rem; }
  .fh-search-row-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; font-size: 1.05rem; }
  .fh-search-row-body { order: 1; }
  .fh-search-row-actions { order: 2; }
  .fh-search-row-meta {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    padding-left: calc(2.25rem + 0.7rem);
    font-size: var(--fh-text-2xs);
  }
}