/* Portal top-nav menu triggers — the `Reports ˅` and `More` buttons (ISH-833).
 *
 * The menu *panel* is `css/more-dropdown.css`, reused unchanged. Only the trigger is new, and it
 * needs its own rules for one reason: that component was extracted from a **light** in-page tab
 * bar (`.tab-btn` on broker.html), and the top nav is dark — `--nav-bg` #1a1a1a with white links
 * and a `--red` active pill. A `.tab-btn` in the nav bar would render dark-on-dark.
 *
 * So these rules are `.nav-links a`'s, applied to a `<button>`. They are duplicated from each
 * page's inline `<style>` rather than shared *from* it because `.top-nav` / `.nav-links` are
 * themselves still per-page inline CSS across all 14 pages — unifying those is a bigger job than
 * this issue, and copying two rules here is the smaller debt than blocking on it. If `.top-nav`
 * ever moves to a shared stylesheet, these belong beside it.
 *
 * ⚠️ **Do NOT link `css/more-dropdown.css` into `my-implementations.html`, `operations-hub.html`
 * or `uninvoiced-approved-tasks.html`.** Those three reuse the `.more-dropdown-*` class names for
 * the Operations Hub's "create process" action menu, with an inverted default — `hidden` over a
 * `display: block` base — so the shared panel rules would leave that menu permanently open. That
 * file's own header carries the same warning.
 *
 * **This file, however, IS safe on them**, and since ISH-826 it is also SELF-SUFFICIENT: the panel
 * block at the bottom repeats `css/more-dropdown.css`'s geometry scoped under `.top-nav`, so a
 * portal nav menu works with this file alone. Before that, a page linking only this one got "a
 * trigger that appears to do nothing", which is what this note used to warn about. `.top-nav` is
 * the scope that makes it safe: the create-process menu lives in the page header, never in the nav
 * bar, so nothing here can reach it.
 *
 * On the 15 pages that link BOTH files the values are identical and merely re-asserted at higher
 * specificity — audited property by property when it was added, and those pages carry no inline
 * `.more-dropdown-*` rules of their own for it to collide with.
 *
 * Required custom properties: --red (css/tokens.css). `--radius` is still per-page inline across
 * the app (6px on most pages, 8px on four), so it carries the majority fallback here.
 */

.nav-trigger {
  color: #ffffff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.875rem;
  border: none;
  background: none;
  border-radius: var(--radius, 6px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  line-height: 1.6;
  transition: background 0.15s;
}

.nav-trigger:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
}

.nav-trigger.active {
  background: var(--red);
}

.nav-trigger:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

/* Sits on Reports and not on More, deliberately. Every other item in the bar navigates, so a
 * plain noun like "Reports" needs the affordance or clicking it reads as a misfire; "More"
 * already says it opens something. Chosen from three rendered variants. */
.nav-trigger-caret {
  opacity: 0.75;
}

/* The panel is anchored to the container by css/more-dropdown.css. In the nav bar it must escape
 * the 52px bar rather than be clipped by it — .top-nav sets no overflow, so this only needs to
 * out-stack the bar's own children. */
.top-nav .more-dropdown-menu {
  z-index: 1001;
}

/* ── Menu items must out-specify the page's own nav-link rule (ISH-841) ──────
 *
 * ⚠️ This block exists entirely because of a cascade collision, and removing it makes the menus
 * look empty rather than look wrong — which is why it shipped unnoticed.
 *
 * Every page's inline <style> carries `.nav-links a { color: #ffffff; … }` at specificity (0,1,1).
 * `css/more-dropdown.css` styles items at `.more-dropdown-item`, (0,1,0). Inside `.nav-links` the
 * page rule therefore wins and paints every item white on the panel's white background — invisible
 * at rest, and appearing only on hover, where `.more-dropdown-item:hover` (0,2,0) finally beats it.
 *
 * The component was never exposed to this before: its original host is broker.html's in-page tab
 * bar, whose items are <button>s that `.nav-links a` cannot match. ISH-833 reused it in the nav and
 * emitted anchors.
 *
 * So these selectors carry three classes to clear (0,1,1), and the hover carries four to clear
 * `.nav-links a:hover:not(.active)` at (0,3,1) — `:not()` contributes its argument's specificity,
 * which makes the naive three-class fix lose. Every property the nav-link rule sets is restored,
 * not only colour: it also imposes the nav's font-size, weight, padding, radius and transition.
 *
 * ⚠️ Do NOT move this into css/more-dropdown.css. That file is shared with the in-page tab bars,
 * where the component sits outside `.nav-links` and has nothing to out-specify; nav-specific weight
 * there would make it less portable, not more correct.
 */

.top-nav .more-dropdown-menu .more-dropdown-item {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.6rem 1rem;
  border-radius: 0;
  text-decoration: none;
  transition: all 0.15s ease;
}

.top-nav .more-dropdown-menu .more-dropdown-item:hover {
  background: var(--page-bg);
  color: var(--red);
}

.top-nav .more-dropdown-menu .more-dropdown-item.is-selected {
  color: var(--red);
  font-weight: 600;
  background: rgba(166, 38, 38, 0.05);
}

/* ── Self-sufficient panel geometry, scoped to the nav bar (ISH-826) ─────────
 *
 * Repeats `css/more-dropdown.css`'s panel rules under `.top-nav` so a host can link THIS FILE
 * ALONE and get a working menu. Added for the Operations Hub, whose three pages cannot link that
 * file at all (see the header) but do need a `Reports ˅` menu like the other two portals'.
 *
 * Every value below is copied from `css/more-dropdown.css` unchanged, so on a page linking both
 * this changes nothing. The two exceptions are deliberate and are why the block is needed:
 *
 *   - `right: auto` — the Operations Hub pages' own inline `.more-dropdown-menu` sets `right: 0`
 *     for their page-header menu. Without resetting it, `left: 0` and `right: 0` would both apply
 *     to the nav panel and stretch it the full width of the bar.
 *   - `min-width` / `top` — likewise overridden back to the component's values, since those pages
 *     set 180px and `calc(100% + 0.35rem)` for their own menu.
 */

.top-nav .more-dropdown-container {
  position: relative;
  display: inline-block;
}

.top-nav .more-dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  right: auto;
  top: 100%;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 160px;
  text-align: left;
  padding: 0.25rem 0;
  margin-top: 2px;
}

.top-nav .more-dropdown-menu.is-open {
  display: block;
}