/* 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` or
 * `uninvoiced-approved-tasks.html`.** Those two reuse the `.more-dropdown-*` class names for a
 * page-header 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. `operations-hub.html` was the third such page until ISH-1303 removed its
 * "create process" menu and the inline copy of the component that styled it; its `Reports ˅` nav
 * menu now runs on the `.top-nav` block below alone, so linking that file there would newly reach
 * the nav panel — keep it unlinked.
 *
 * **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. The item's own box rules were missed here and are repeated in the
 * block below (ISH-934). 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;
}

/* ── The item's own box, same scope (ISH-934) ────────────────────────────────
 *
 * The block above repeated the panel rules but not the three `css/more-dropdown.css` puts on the
 * ITEM, so on a page linking this file alone the item stayed an inline `<a>` and the single
 * `Broker Utilization Report` entry rendered wrong in two compounding ways:
 *
 *   - `white-space: normal` wrapped it, because the label (~165px at 0.875rem/500) is wider than
 *     the panel's 160px `min-width`;
 *   - and an inline box takes no layout height from the item's 0.6rem vertical padding, so the
 *     panel came out SHORTER than its own contents (58px against the item's 60.2px) and the
 *     wrapped second line painted outside the white panel, over the page heading.
 *
 * Values copied from `css/more-dropdown.css` unchanged, so the 15 pages linking both files see no
 * change. `.top-nav` scope still matters, and here for a second reason: my-implementations.html
 * and operations-hub.html carry their own inline `.more-dropdown-item` at (0,1,0) — which is what
 * hid half of this on those two, supplying `display`/`width` but never `white-space` — and their
 * page-header create-process menu, which this must not reach, lives outside the nav bar.
 *
 * `width: 100%` is inert on a block-level anchor that already fills the panel, and is kept only so
 * the two copies stay diffable; all three pages set `box-sizing: border-box` globally, so it does
 * not fight the horizontal padding.
 */

.top-nav .more-dropdown-menu .more-dropdown-item {
  display: block;
  width: 100%;
  white-space: nowrap;
}

/* ── The portal's name, at the head of the nav (ISH-1048) ────────────────────
 *
 * Emitted by renderPortalNav() in scripts/portal-nav.js as the FIRST CHILD of
 * .nav-links, which is what makes the divider's two gaps equal — see that
 * function's comment for the arithmetic. Moving this element out to .nav-left
 * re-breaks it (12px on the left, 42px on the right), so the placement is part
 * of the design, not an accident of markup order.
 *
 * ⚠️ This file is not linked by every page that carries a top nav. ISH-1048
 * added it to my-dashboard.html, company-metrics-report.html, slt-report.html
 * and reports-library.html — all four are in PORTAL_NAV and so receive the
 * label, but none had needed this stylesheet before, their navs being flat
 * links with no .more-dropdown menu. Without the link the label renders as
 * unstyled inline text on the dark bar. js/portal-nav-label.test.js pins every
 * PORTAL_NAV page to this file so the next portal added cannot miss it.
 *
 * The colour is a literal #ffffff rather than a token: every page's inline
 * <style> sets `.nav-links a { color: #ffffff }` and this has to match it, not
 * a --text token that resolves against the page background.
 */
.nav-portal-label {
  display: flex;
  align-items: center;
  /* Half of the balanced pair. The other half is .nav-links' own 4px gap plus
   * the first link's 14px padding-left. Change one, change both. */
  gap: 18px;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* The hairline. A pseudo-element rather than a border-right so the 18px gap
 * above sits between the text and the rule, and the rule keeps its own height
 * independent of the label's line box. */
.nav-portal-label::after {
  content: "";
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.22);
}