@charset "UTF-8";
/* Users-index search bar. BUX's `.bux-search` is intrinsically full-width
   (its `__input` is width:100%), which feels overkill for a name/email search
   on a list page — osu.edu/search caps its own search input similarly. Hold
   it to a reasonable size and give the bar a little breathing room before the
   user table starts. */
.users-search {
  max-width: 28rem;
  margin-bottom: var(--sp-16, 1rem);
}

/* BUX only sizes/positions `.bux-search__submit` and paints its icon via
   `:after`; it never resets the browser-default <button> chrome, so the OS
   blue bleeds through underneath the scarlet glyph. Reset it (BUX uses the
   same reset on `.bux-table--sortable .sort-by button` already) so the
   input's background shows through and only the scarlet icon is visible —
   keeps the page within the BUX palette (black / white / grays / scarlet).

   `padding-top: 2px` overrides BUX's `padding-top: 6px` so the glyph sits a
   quarter of the input height higher — visually centered against the input,
   matching osu.edu/search alignment. */
.bux-search__submit {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding-top: 3px;
}

/* Each sortable <th> wraps its button in a tiny GET form so server-side sort
   can run with the BUX button-in-th markup. Without this rule the form
   would render as a block and break the table header layout. */
.bux-sort-form {
  display: inline;
  margin: 0;
  padding: 0;
}

/* Let long unbroken strings (URLs, no-space titles) wrap mid-string when
   they would otherwise overflow, but never break a normal word. The
   `overflow-wrap` form (vs the older `word-break: break-word`) keeps the
   column's intrinsic min-width equal to the longest word — so "Student"
   in the role column stays whole even when the table is tight, while a
   URL with no spaces still wraps before it can push the table off-screen.
   Normal English words still break at their natural points (spaces,
   explicit hyphens) per browser default. */
.bux-table td {
  overflow-wrap: break-word;
}

/* Action cells (table cells containing two or more buttons) stack their
   buttons in a column with a consistent gap, instead of the default
   inline flow that can leave one button orphaned on a second line when
   the cell gets narrow. `:has()` targets only cells that actually
   contain ≥2 buttons; single-button cells keep table-cell layout so
   column widths still measure them correctly. `align-items: flex-start`
   keeps each button sized to its own content rather than stretching to
   fill the cell width. */
.bux-table td:has(> .bux-button + .bux-button) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-8, 0.5rem);
}

/* Edit/new views typically render the form's submit button flush against
   its closing </form>, then a <p> holding the Back button as the next
   sibling. BUX's reset zeros `p { margin: 0 }` and only re-adds
   `margin-bottom`, so by default the Back button's <p> sits with no
   margin-top and butts directly against the submit. Add a top gap that
   matches the stacked-action-button gap (var(--sp-8)) so the two button
   rows feel like part of the same spacing rhythm. */
form + p:has(> .bux-button) {
  margin-top: var(--sp-8, 0.5rem);
}

/* Button-group paragraphs (a <p> containing two or more adjacent buttons,
   like the Edit + Back pair on show/index views) flow as a flex row with
   a consistent gap, matching the --sp-8 token used by stacked action
   cells and the form + Back-button spacing above. Without this rule the
   two inline-flex buttons sit with only the collapsed whitespace text
   node between them, which reads as essentially zero gap. flex-wrap
   keeps the buttons from spilling out of narrow containers. */
p:has(> .bux-button + .bux-button) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8, 0.5rem);
}

/* The "Student Activity Report" slogan in the BUX header is now an <a> to
   root_path. BUX styles the slogan text directly via class on the div, so
   without these overrides, the inner <a> picks up the user-agent link
   styling (blue/purple + underline) and stands out from the rest of the
   header. Lock the color to BUX's primary content token (matches what BUX
   already paints the slogan div) for every link state, and reserve the
   underline for hover/focus only. */
.bux-header__site-name-slogan a,
.bux-header__site-name-slogan a:visited {
  color: var(--c-content-pri);
  font: inherit;
  text-decoration: none;
}

.bux-header__site-name-slogan a:hover,
.bux-header__site-name-slogan a:focus {
  color: var(--c-content-pri);
  text-decoration: underline;
}

/* Make visited links match non-visited project-wide.
   BUX colors `:visited` via the `link-base` mixin (bux/scss/_mixins.scss),
   which reads `var(--visited)` for the default branch and `var(--visited-light)`
   for the scarlet branch. Pointing both custom properties at `--link` makes
   every BUX-styled link's visited state inherit the unvisited color — no
   per-component override needed for any component that opted into `:visited`
   styling. BUX defines `--visited` / `--visited-light` at `:root` in
   bux/scss/_global.scss; we redefine them here, loaded later in the cascade
   at the same specificity, so our values win. */
:root {
  --visited: var(--link);
  --visited-light: var(--link);
}

/* OSU navbar — the exception to the variable trick above. `.bux-osu-nav__link a`
   calls `link-base(light, no)`, where the `no` flag makes the mixin skip the
   entire `:visited` block — there's no rule that reads `var(--visited)`, so the
   variable redefinition has nothing to override and the browser-default purple
   shows through. Add an explicit `:visited` rule here, plus re-assert hover/
   focus (otherwise this `:visited` rule, loaded later in the cascade, would
   beat BUX's earlier `:hover`/`:focus` rules at equal specificity). */
.bux-osu-nav__link a:visited {
  color: var(--gray-dark-60);
}

.bux-osu-nav__link a:visited:hover,
.bux-osu-nav__link a:visited:focus {
  color: var(--scarlet);
}

#main-content {
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Submenu trigger affordances.
   BUX's disclosure-nav JS injects a sibling <button class="disclosure-nav-button">
   at page load. That button gets BUX's down-triangle from `:before` content
   "\f010" (BUX icon-font caret-down), and BUX's own JS binds the click and
   hover handlers to it. After a Turbo navigation BUX's JS doesn't re-run, so
   no button is injected and the triangle / hover behavior disappear.

   We paint the same triangle (same glyph, same font) on the anchor itself so
   it shows up on every navigation regardless of BUX's JS. We also hide BUX's
   own injected button (when it exists on hard refresh) to keep us from showing
   two indicators side-by-side. */
.disclosure-nav-item-with-submenu::after {
  content: "\f010";
  font-family: var(--t-ff-icon);
  font-size: 0.75em;
  margin-left: var(--sp-8, 0.5rem);
  display: inline-block;
  transition: transform 0.12s ease-in-out;
}

.disclosure-nav-item-with-submenu[aria-expanded=true]::after {
  transform: rotate(180deg);
}

/* Suppress BUX's auto-injected disclosure-nav button so the first-load
   render doesn't show our triangle (on the anchor) AND BUX's triangle (on
   the button) side-by-side. Our anchor-side triangle and our submenu.js
   click handler cover both jobs the button was doing. */
.disclosure-nav-button {
  display: none;
}

/* Shrink in-button icons. BUX paints `.bux-button__icon` as a 28×28 flex
   container with `margin-right: 16px` and a 28px glyph offset down by
   `padding-top: 9px`. For row-level Edit / Destroy / Show / Back labels
   that's oversized — we drop the glyph to var(--t-fs-18), shrink the
   container to match (so there's no empty padding to the right of the
   glyph), tighten the margin-right to a token-aligned 8px gap, and zero
   the glyph's padding-top so the resized glyph centers vertically. */
.bux-button .bux-button__icon {
  width: var(--t-fs-18);
  height: var(--t-fs-18);
  margin-right: var(--sp-8, 0.5rem);
}

.bux-button .bux-button__icon .icon {
  font-size: var(--t-fs-18);
  padding-top: 3px;
}

/* The hover/focus-within rules have to beat BUX's
     `div.bux-container__menu nav.disclosure-nav ul.disclosure-nav-submenu-closed { display: none }`
   selector, which is (0,3,3). Anything weaker loses and the submenu stays
   hidden on hover after a Turbo nav. We mirror BUX's selector chain so we
   match-or-beat the cascade. */
@media (hover: hover) {
  .bux-menu > li:hover .disclosure-nav-item-with-submenu::after {
    transform: rotate(180deg);
  }
  div.bux-container__menu nav.disclosure-nav.disclosure-nav-orientation-horizontal > ul > li:hover > .disclosure-nav-submenu {
    display: block;
  }
}
div.bux-container__menu nav.disclosure-nav.disclosure-nav-orientation-horizontal > ul > li:focus-within > .disclosure-nav-submenu {
  display: block;
}

/* Strip default <ul> bullet/indentation inside the submenu. BUX's submenu
   panel rules zero `padding`, but the `<ul>` still inherits browser-default
   `list-style: disc`, which reserves left-side space for markers. */
.disclosure-nav-submenu,
.disclosure-nav-submenu > li {
  list-style: none;
}