/* ─────────────────────────────────────────────────────────────
   Starboard · Navigation family
   Breadcrumb (.ad-bc) · NavigationMenu (.ad-nm) ·
   SidebarNav (.ad-sn) · PaginationV2 (.ad-pg2)
   Motion vocabulary comes from colors_and_type.css — no new
   keyframes are defined here.
   ───────────────────────────────────────────────────────────── */
@import url('../../colors_and_type.css');

/* ════════════════════════════════════════════════════════════
   BREADCRUMB
   ════════════════════════════════════════════════════════════ */
.ad-bc { font-family: var(--font-body); }
.ad-bc__list {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  flex-wrap: wrap;
}
.ad-bc__item { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.ad-bc__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--fg-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 2px var(--space-3xs);
  border-radius: var(--radius-xs);
  transition: color var(--duration-4) var(--ease-out);
}
.ad-bc__link:hover { color: var(--fg-strong); }
.ad-bc__link:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ad-bc__current {
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--fg-strong);
  white-space: nowrap;
  padding: 2px var(--space-3xs);
}
.ad-bc__sep { color: var(--neutral-400); display: inline-flex; flex: 0 0 auto; }
.ad-bc__more {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  border: 0;
  background: var(--neutral-100);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--duration-3) var(--ease-out);
}
.ad-bc__more:hover { background: var(--neutral-200); color: var(--fg-strong); }
.ad-bc__more:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ad-bc__menu {
  background: var(--bg-elevated);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  padding: var(--space-3xs);
  animation: ad-scale-in var(--duration-4) var(--ease-out);
  transform-origin: top;
}
.ad-bc__menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 7px var(--space-2xs);
  border-radius: var(--radius-xs);
  font-size: 13px;
  color: var(--fg-default);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-3) var(--ease-out);
}
.ad-bc__menu-item:hover { background: var(--primary-50); color: var(--primary-700); }
.ad-bc__home { color: var(--fg-muted); display: inline-flex; }

/* ════════════════════════════════════════════════════════════
   NAVIGATION MENU — horizontal marketing nav with mega-panels
   ════════════════════════════════════════════════════════════ */
.ad-nm { position: relative; font-family: var(--font-body); }
.ad-nm__list {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.ad-nm__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-default);
  background: none;
  border: 0;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--duration-4) var(--ease-out), background var(--duration-4) var(--ease-out);
}
.ad-nm__trigger:hover, .ad-nm__trigger.is-open { color: var(--fg-strong); background: var(--neutral-100); }
.ad-nm__trigger:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ad-nm__chev { color: var(--neutral-500); transition: transform var(--duration-4) var(--ease-out); }
.ad-nm__trigger.is-open .ad-nm__chev { transform: rotate(180deg); }

/* Underline indicator — slides between items like Tabs */
.ad-nm__indicator {
  position: absolute;
  bottom: -1px;
  height: 2px;
  border-radius: 1px;
  background: var(--primary-600);
  transition: left var(--duration-8) var(--ease-panel),
              width var(--duration-8) var(--ease-panel),
              opacity var(--duration-4) var(--ease-out);
}

/* Mega-panel — anchored, 480px, 2-col grid */
.ad-nm__panel {
  width: 480px;
  background: var(--bg-elevated);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2xs);
  animation: ad-scale-in var(--duration-4) var(--ease-out);
  transform-origin: top;
}
.ad-nm__panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ad-nm__panel-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-3) var(--ease-out);
}
.ad-nm__panel-item:hover { background: var(--primary-50); }
.ad-nm__panel-item:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ad-nm__panel-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--primary-50);
  color: var(--primary-600);
  flex: 0 0 auto;
}
.ad-nm__panel-item:hover .ad-nm__panel-icon { background: var(--primary-100); }
.ad-nm__panel-label {
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--fg-strong);
}
.ad-nm__panel-desc { font-size: 12px; color: var(--fg-muted); line-height: 1.45; margin-top: 1px; }

/* ════════════════════════════════════════════════════════════
   SIDEBAR NAV — app-agnostic primitive, expanded / rail variants
   ════════════════════════════════════════════════════════════ */
.ad-sn {
  display: flex;
  flex-direction: column;
  width: 280px;
  background: var(--bg-elevated);
  border-inline-end: 1px solid var(--neutral-200);
  padding: var(--space-xs);
  font-family: var(--font-body);
  transition: width var(--duration-8) var(--ease-panel);
  overflow: hidden;
}
.ad-sn--rail { width: 72px; }

.ad-sn__section + .ad-sn__section { margin-top: var(--space-sm); }
.ad-sn__section-label {
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-500);
  padding: var(--space-3xs) var(--space-2xs);
  white-space: nowrap;
  transition: opacity var(--duration-4) var(--ease-out);
}
.ad-sn--rail .ad-sn__section-label { opacity: 0; height: var(--space-2xs); padding: 0; overflow: hidden; }

/* Row */
.ad-sn__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
  padding: var(--space-2xs);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-default);
  text-align: start;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--motion-row-change), color var(--motion-row-change);
}
.ad-sn__row + .ad-sn__row { margin-top: 2px; }
.ad-sn__row:hover { background: var(--neutral-100); color: var(--fg-strong); }
.ad-sn__row:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ad-sn__row-icon { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; color: var(--neutral-500); transition: color var(--motion-row-change); }
.ad-sn__row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity var(--duration-4) var(--ease-out); }
.ad-sn--rail .ad-sn__row-label, .ad-sn--rail .ad-sn__row-count, .ad-sn--rail .ad-sn__row-chev { opacity: 0; width: 0; overflow: hidden; }
.ad-sn--rail .ad-sn__row { justify-content: center; }
.ad-sn__row-count {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  padding: 1px var(--space-3xs);
  min-width: 20px;
  text-align: center;
  border-radius: var(--radius-pill);
  background: var(--neutral-100);
  color: var(--fg-muted);
}

/* Active row — left indicator + primary tint */
.ad-sn__row.is-active { background: var(--primary-50); color: var(--primary-700); font-weight: 600; }
.ad-sn__row.is-active .ad-sn__row-icon { color: var(--primary-600); }
.ad-sn__row.is-active .ad-sn__row-count { background: var(--primary-100); color: var(--primary-700); }
.ad-sn__row::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  border-radius: 1px;
  background: var(--primary-600);
  transform: scaleY(0);
  transition: transform var(--motion-row-change);
}
.ad-sn__row.is-active::before { transform: scaleY(1); }

/* Group chevron + collapsible children (grid-rows trick) */
.ad-sn__row-chev { color: var(--neutral-400); display: inline-flex; transition: transform var(--duration-4) var(--ease-out); }
.ad-sn__row[aria-expanded="true"] .ad-sn__row-chev { transform: rotate(90deg); }
.ad-sn__group-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-8) var(--ease-panel);
}
.ad-sn__group-body.is-open { grid-template-rows: 1fr; }
.ad-sn__group-body > div { overflow: hidden; min-height: 0; }
.ad-sn__group-children { padding-inline-start: var(--space-md); padding-top: 2px; }
.ad-sn--rail .ad-sn__group-children { padding-inline-start: 0; }

/* Rail tooltip */
.ad-sn__tip {
  position: absolute;
  inset-inline-start: calc(100% + var(--space-2xs));
  top: 50%;
  transform: translateY(-50%);
  background: var(--neutral-900);
  color: var(--fg-on-dark);
  font-size: 12px;
  font-weight: 500;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-xs);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 20;
  transition: opacity var(--duration-4) var(--ease-out);
}
.ad-sn--rail .ad-sn__row:hover .ad-sn__tip,
.ad-sn--rail .ad-sn__row:focus-visible .ad-sn__tip { opacity: 1; }

/* Collapse toggle */
.ad-sn__toggle {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg-muted);
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--duration-3) var(--ease-out);
}
.ad-sn__toggle:hover { background: var(--neutral-100); color: var(--fg-strong); }
.ad-sn__toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ad-sn__toggle svg { transition: transform var(--duration-8) var(--ease-panel); }
.ad-sn--rail .ad-sn__toggle svg { transform: rotate(180deg); }

/* ════════════════════════════════════════════════════════════
   PAGINATION V2
   ════════════════════════════════════════════════════════════ */
.ad-pg2 { display: flex; align-items: center; gap: var(--space-3xs); font-family: var(--font-body); }
.ad-pg2__btn {
  min-width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: inline-grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-default);
  background: transparent;
  border: 1px solid var(--neutral-200);
  cursor: pointer;
  transition: background var(--duration-4) var(--ease-out),
              opacity var(--duration-4) var(--ease-out),
              color var(--duration-4) var(--ease-out);
}
.ad-pg2__btn:hover { background: var(--neutral-100); }
.ad-pg2__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ad-pg2__btn[aria-current="page"] { background: var(--primary-600); color: var(--fg-on-dark); border-color: var(--primary-600); }
/* Boundary delight — arrows FADE to disabled over --duration-4 */
.ad-pg2__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ad-pg2__dots {
  min-width: 32px;
  text-align: center;
  font-size: 13px;
  color: var(--neutral-400);
  letter-spacing: 2px;
  user-select: none;
}

/* Compact — ‹ 4 / 18 › */
.ad-pg2--compact { gap: var(--space-2xs); }
.ad-pg2__fraction { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--fg-muted); }
.ad-pg2__fraction b { color: var(--fg-strong); font-weight: 500; }
.ad-pg2--compact .ad-pg2__btn { min-width: 24px; height: 24px; border-radius: var(--radius-xs); }

/* Load more */
.ad-pg2-more { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); font-family: var(--font-body); }
.ad-pg2-more__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--fg-default);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: background var(--duration-3) var(--ease-out);
}
.ad-pg2-more__btn:hover { background: var(--neutral-100); }
.ad-pg2-more__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ad-pg2-more__count { font-size: 12px; color: var(--fg-muted); }
.ad-pg2-more__count b { font-family: var(--font-mono); font-weight: 500; color: var(--fg-strong); }
.ad-pg2-more__track { width: 160px; height: 3px; border-radius: 2px; background: var(--neutral-200); overflow: hidden; }
.ad-pg2-more__fill { height: 100%; border-radius: 2px; background: var(--primary-600); transition: width var(--duration-7) var(--ease-out); }

/* Jump to page */
.ad-pg2__jump { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: 12px; color: var(--fg-muted); }
.ad-pg2__jump-input {
  width: 48px;
  height: 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-strong);
  background: var(--bg-elevated);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-3) var(--ease-out), box-shadow var(--duration-3) var(--ease-out);
}
.ad-pg2__jump-input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus-ring); }
/* Invalid commit flashes the error border over --duration-3 — no shake */
.ad-pg2__jump-input.is-invalid { border-color: var(--error-500); box-shadow: 0 0 0 3px rgba(240,68,56,0.12); }

/* ═══ RTL ═══════════════════════════════════════════════════
   Directional chevrons mirror under RTL. Only icons that point
   "forward / back" along the reading direction flip — up/down
   chevrons (e.g. .ad-nm__chev) are left alone. Layout itself
   flips via the logical properties above. */
[dir="rtl"] .ad-bc__sep { transform: scaleX(-1); }                 /* breadcrumb separator */
[dir="rtl"] .ad-sn__row-chev { transform: scaleX(-1); }            /* sidebar group chevron (collapsed = points "forward") */
[dir="rtl"] .ad-sn__row[aria-expanded="true"] .ad-sn__row-chev { transform: scaleX(-1) rotate(90deg); } /* expanded still points down */
[dir="rtl"] .ad-sn__toggle svg { transform: scaleX(-1); }          /* sidebar collapse/expand double-chevron */
[dir="rtl"] .ad-pg2__btn svg { transform: scaleX(-1); }            /* pagination prev/next arrows (number buttons hold text, not svg) */