/* Kebab menu — small "⋯" trigger with a panel of action items.
   Same shape as user-menu but with a borderless icon trigger.
   Used in table-row action cells (e.g. /users) instead of inline links. */
.kebab-menu { position: relative; display: inline-block; }
.kebab-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: var(--radius-sm);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink-muted);
  user-select: none;
  transition: background 0.1s, color 0.1s;
}
.kebab-menu > summary::-webkit-details-marker { display: none; }
.kebab-menu > summary:hover {
  background: rgba(28, 27, 24, 0.06);
  color: var(--ink);
}
.kebab-menu[open] > summary {
  background: rgba(28, 27, 24, 0.08);
  color: var(--ink);
}
.kebab-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 11rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.5rem;
  z-index: 30;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}
/* `.kebab-menu--up` is applied by kebab_flip_controller when the
   panel would overflow the viewport bottom. Flipping the anchor from
   top to bottom keeps it visible for the last-row case on long
   tables. */
.kebab-menu--up .kebab-menu__panel {
  top: auto;
  bottom: calc(100% + 0.35rem);
}
/* button_to renders a wrapping <form> — collapse it so its child
   button flows like a regular menu item without a layout break. */
.kebab-menu__panel form { display: contents; }
.kebab-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.85rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.08s ease;
}
.kebab-menu__item:hover {
  background: rgba(28, 27, 24, 0.06);
  color: var(--ink);
  border: 0;
}
.kebab-menu__item:active { transform: none; }
.kebab-menu__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.kebab-menu__item--danger { color: var(--err); }
.kebab-menu__item--danger:hover {
  background: rgba(193, 39, 45, 0.08);
  color: var(--err);
}
.kebab-menu__divider {
  border-top: 1px solid var(--rule);
  margin: 0.4rem -0.25rem;
}
/* Shared dropdown primitives */
.nav-menu,
.user-menu {
  position: relative;
}

.nav-menu > summary,
.user-menu > summary {
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-menu > summary::-webkit-details-marker,
.user-menu > summary::-webkit-details-marker {
  display: none;
}

/* Triggers */
.nav-menu > summary,
.user-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-sm);
  border-bottom: 2px solid transparent;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  transition:
    color 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}

.user-menu__trigger {
  padding-left: 0.3rem;
}

.nav-menu > summary:hover,
.user-menu__trigger:hover {
  color: var(--ink);
}

.nav-menu > summary:focus-visible,
.user-menu > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-menu[open] > summary,
.nav-menu.is-active-section > summary,
.user-menu[open] .user-menu__trigger {
  color: var(--ink);
}

.nav-menu[open] > summary,
.user-menu[open] .user-menu__trigger {
  background: rgba(28, 27, 24, 0.045);
}

.nav-menu.is-active-section > summary {
  border-bottom-color: var(--accent);
}

/* Inline SVG chevron — stroked, currentColor so it picks up the
   trigger's text color. Rotates 180° when the menu is open so the
   open state reads as "this is what's about to close." */
.nav-menu__caret,
.user-menu__caret {
  width: 0.7em;
  height: 0.7em;
  flex: 0 0 auto;
  color: var(--ink-muted);
  transition: transform 120ms ease, color 120ms ease;
}
.nav-menu[open] .nav-menu__caret,
.user-menu[open] .user-menu__caret {
  transform: rotate(180deg);
  color: var(--ink);
}

/* Avoid display: contents here; it can make focus/box behavior inconsistent */
.nav-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Shared panels */
.nav-menu__panel,
.user-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 30;

  min-width: 13rem;
  padding: 0.5rem;
  overflow: visible;

  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}

.nav-menu__panel { min-width: 15rem; }
.user-menu__panel { min-width: 16rem; }

/* User header */
.user-menu__header {
  margin: -0.4rem -0.4rem 0.5rem;
  padding: 0.85rem 1rem 0.95rem;
  border-bottom: 1px solid var(--rule);
}

.user-menu__header-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu__header-email {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu__header-role {
  margin: 0.45rem 0 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

/* Shared items. Prefixed with .nav-menu / .user-menu so the
   selector specificity (0,0,2,0) beats `.site-nav a` from
   site.css (0,0,1,1) — the items render as <a> elements via
   link_to and live inside .site-nav, so without this prefix the
   top-bar link rule steals the padding back to 0.2rem 0 and the
   hover rectangle ends up flush against the letters. */
.nav-menu .nav-menu__item,
.user-menu .user-menu__item {
  display: flex;
  align-items: center;
  box-sizing: border-box;

  /* width:auto + min-width:100% lets the item shrink-wrap to its
     content but never narrower than the panel — keeps multi-word
     labels on one line (paired with white-space:nowrap) without
     forcing the panel itself wider than its min-width. */
  width: auto;
  min-width: 100%;

  padding: 0.6rem 1.5rem;
  margin: 0;
  border: 0;
  border-radius: 10px;

  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;

  background: transparent;
  cursor: pointer;

  transition:
    background-color 120ms ease,
    color 120ms ease;
}

/* Small spacing between items */
.nav-menu .nav-menu__item + .nav-menu__item,
.user-menu .user-menu__item + .user-menu__item {
  margin-top: 0.15rem;
}

/* Hover */
.nav-menu .nav-menu__item:hover,
.user-menu .user-menu__item:hover {
  background: rgba(28, 27, 24, 0.055);
  color: var(--ink);
  transform: none;
}

/* Active */
.nav-menu .nav-menu__item.is-active {
  background: rgba(220, 93, 38, 0.08);
  color: var(--accent);
  font-weight: 600;
}

.user-menu .user-menu__item--danger {
  color: var(--err);
}

.user-menu .user-menu__item--danger:hover {
  background: rgba(193, 39, 45, 0.08);
  border-bottom-color: var(--err);
  color: var(--err);
}

/* Focus */
.nav-menu .nav-menu__item:focus-visible,
.user-menu .user-menu__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Misc user-menu pieces */
.user-menu__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.user-menu__name {
  max-width: 12rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu__divider {
  border-top: 1px solid var(--rule);
  margin: 0.4rem -0.4rem;
}