/* ==========================================================================
   Bootstrap dropdown restyle.
   Owning feature: shared / components
   Load order is defined in Views/Shared/_CssIncludes.cshtml — do not reorder.
   ========================================================================== */

/* --- Dropdowns -------------------------------------------------------- */
.dropdown-menu {
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius);
  box-shadow: var(--fh-shadow);
  padding: 0.4rem;
  font-size: var(--fh-text-base);
}
.dropdown-item {
  border-radius: var(--fh-radius-sm);
  padding: 0.45rem 0.7rem;
  color: var(--fh-text);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--fh-soft); color: var(--fh-text); }
.dropdown-item.active, .dropdown-item:active { background: var(--fh-primary); color: #fff; }
.dropdown-item.text-danger:hover { background: rgba(220, 38, 38, 0.08); color: var(--fh-danger); }
.dropdown-divider { border-color: var(--fh-border); }
.dropdown-header { color: var(--fh-muted); font-size: var(--fh-text-xs); text-transform: uppercase; letter-spacing: var(--fh-tracking-wide); }

/* The fixed `.fh-navbar`/`.fh-sidebar` sit at 1040-1050 (see the z-index
   ladder in the app-shell block), above Bootstrap's default
   `--bs-dropdown-zindex: 1000` — without this, a menu opened near the top of
   the page (first grid row/table row, right under the sticky navbar) would
   render behind that chrome and appear clipped. 1060 clears all of it. */
.fh-dropdown {
  z-index: 1060 !important;
  border: 1px solid var(--fh-border);
  border-radius: 0.5rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
  max-height: min(75vh, 26rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  right: auto !important;
  bottom: auto !important;
}
@media (max-width: 575.98px) {
  .dropdown-menu-end.fh-dropdown,
  .fh-dropdown.dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
  }
}
@media (max-height: 600px) {
  .fh-dropdown {
    max-height: min(80vh, 18rem);
  }
}
.fh-dropdown .dropdown-item { font-size: var(--fh-text-base); padding: 0.5rem 0.75rem; }
.fh-dropdown .dropdown-item:hover { background: var(--fh-soft); }
.fh-dropdown .dropdown-header { font-size: var(--fh-text-sm); }
/* Filter dropdown is sized so the two date inputs sit side by side. It used to
   be a flat `width: 300px`, which on a 360px phone left each date field about
   135px — narrower than a WebKit `<input type="date">` can render — so the
   pair overflowed the menu. Now it prefers 300px but yields to the viewport,
   and the date row is allowed to stack once the fields can't fit side by
   side (see .fh-filter-menu .d-flex below). */
.fh-filter-menu {
  width: min(300px, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
}
/* Breakpoint-free: the date row wraps when — and only when — the two fields
   can no longer both meet their minimum legible width, whatever the menu's
   actual width turns out to be. */
.fh-filter-menu .d-flex {
  flex-wrap: wrap;
}
.fh-filter-menu .d-flex > .form-control {
  flex: 1 1 8.5rem;
  min-width: 0;
}