/* ==========================================================================
   Global mobile-first responsive refinements.
   Owning feature: shared / utilities
   Load order is defined in Views/Shared/_CssIncludes.cshtml — do not reorder.
   ========================================================================== */

/* ==========================================================================
   Responsive refinements — mobile-first tweaks that keep the layout usable
   and free of horizontal overflow on small viewports without changing the
   desktop look (the app shell already collapses the sidebar into a drawer
   below the `lg` breakpoint).
   ========================================================================== */

/* Top navbar: let the search field shrink so the brand + actions never force
   the header wider than the viewport. */
.fh-search { min-width: 0; }
.fh-search-input { min-width: 0; }

@media (max-width: 767.98px) {
  .fh-search { margin: 0 0.5rem; }
}

@media (max-width: 575.98px) {
  .fh-navbar { gap: 0.5rem; padding: 0 0.75rem 0 0.5rem; }
  .fh-brand-badge { display: none; }
  .fh-brand-text { display: none; }
  .fh-btn-primary { padding: 0.45rem 0.6rem; }
  .fh-nav-actions { gap: 0.35rem; }
  .fh-user-btn { padding: 0 0.35rem; gap: 0.35rem; }
}

/* The small "⋮" more-actions toggles keep their visual size but grow a
   transparent hit area so they're reliably tappable on touch screens without
   disturbing the card/row layout. */
.fh-card-menu-toggle,
.fh-row-menu-toggle {
  position: relative;
}
.fh-card-menu-toggle::after,
.fh-row-menu-toggle::after {
  content: "";
  position: absolute;
  inset: -9px;
}

/* Touch targets ≥ 44px.
   The trigger is `pointer: coarse` (the input device is a finger or a TV
   remote), not viewport width. Width was the wrong proxy in both directions:
   a 1024x768 tablet and a 4K TV browser are touch/remote-driven but were
   getting mouse-sized 28-36px controls, while a narrow desktop window got
   phone-sized ones it didn't need. The width query is kept alongside so
   narrow layouts still get the comfortable sizing regardless of pointer. */
@media (max-width: 767.98px), (pointer: coarse) {
  .fh-icon-btn { width: 44px; height: 44px; }
  .fh-user-btn { min-width: 44px; min-height: 44px; }
  .btn { min-height: 44px; }
  .form-control, .form-select { min-height: 44px; }
  .dropdown-item { min-height: 44px; padding: 0.65rem 1rem; }

  /* The language pill was a 34x28 button inside a 34px-tall track — the
     smallest interactive target in the app and the only one the original
     touch pass missed. */
  .fh-lang-toggle { height: auto; }
  .fh-lang-btn,
  .fh-login-lang-btn { min-width: 44px; min-height: 44px; }

  .fh-login-remember {
    min-height: 44px;
    gap: 0.75rem;
    padding: 0;
  }
  .fh-login-remember-input {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Segmented view toggle: `.btn { min-height: 44px }` above grows the
     segments, so the track has to stop constraining them. */
  .fh-view-toggle .btn { min-height: 40px; }

  /* The "⋮" menus keep their 28px visual size (they sit over card artwork),
     but their transparent hit area grows to a full 44px square rather than
     the 46px-diagonal the -9px inset produced. */
  .fh-card-menu-toggle::after,
  .fh-row-menu-toggle::after { inset: -8px; }
}

/* Keyboard focus for the chrome buttons that aren't Bootstrap `.btn`s and so
   miss the global `.btn:focus-visible` ring. Several of these previously set
   `outline: 0` on focus and relied on a background tint alone, which is not a
   perceivable focus indicator — and `.fh-card-menu-toggle` sits on top of
   card artwork where a tint is invisible. A ring drawn with `outline` (not
   `box-shadow`) survives the `overflow: hidden` on .fh-list-card and the card
   thumbnails, so it stays visible at every breakpoint. */
.fh-icon-btn:focus-visible,
.fh-user-btn:focus-visible,
.fh-menu-toggle:focus-visible,
.fh-card-menu-toggle:focus-visible,
.fh-row-menu-toggle:focus-visible,
.fh-upload-fab:focus-visible,
.fh-segmented-btn:focus-visible,
.fh-upload-dock-btn:focus-visible,
.fh-breadcrumb-list a:focus-visible,
#previewModal .btn-icon:focus-visible {
  outline: 2px solid var(--fh-primary);
  outline-offset: 2px;
}
/* The dock header is dark; a brand-blue ring on it reads poorly. */
.fh-upload-dock-btn:focus-visible {
  outline-color: #93c5fd;
}

/* Keep tall dialogs scrollable within a short viewport. Budgeted against the
   modal's own chrome for the same reason as --fh-preview-h: a flat 65vh took
   no account of the header and footer, so on a 1280x720 laptop the dialog ran
   to the very edge of the screen. */
#shareModal .modal-body,
#fileHistoryModal .modal-body {
  max-height: min(65vh, calc(100vh - 12rem));
  overflow-y: auto;
}

/* Activity log tables — drop IP / Details on phones so Time/User/Action stay readable. */
@media (max-width: 575.98px) {
  .fh-logs-table th:nth-child(5),
  .fh-logs-table td:nth-child(5),
  .fh-logs-table th:nth-child(7),
  .fh-logs-table td:nth-child(7) {
    display: none;
  }
}