/* ── THE ROW-ACTIONS MENU ─────────────────────────────────────────────────────────────────────
 *
 * The stylesheet for client/row-actions.js, which is the ONE implementation of "two controls on a
 * row and the rest behind More". These rules lived in training-2026-10-01.css because the
 * Training tables needed them first; they are here now because the staff profile needs them too,
 * and copying a component's CSS into a second page is how a component comes to work on some pages.
 *
 * Every page that loads row-actions.js loads this.
 */
/* ── "MORE", THE MENU THE OTHER ACTIONS LIVE IN (5 Oct) ───────────────────────────────────────
 *
 * See client/row-actions.js for why there are only ever two controls on a row. These rules are the
 * menu itself: anchored to its trigger, above everything the table draws, and opening upwards when
 * the row is near the bottom of the window.
 */
.t-more { position:relative; display:inline-flex; }
.t-more-menu { position:absolute; top:calc(100% + 4px); right:0; z-index:40; min-width:184px;
               display:flex; flex-direction:column; padding:5px; gap:1px;
               background:var(--card); border:1px solid var(--line); border-radius:10px;
               box-shadow:0 10px 28px rgba(11,22,66,0.16); }
.t-more-menu[hidden] { display:none; }
.t-more-menu.t-more-up { top:auto; bottom:calc(100% + 4px); }
.t-more-item { display:block; width:100%; text-align:left; background:none; border:0;
               padding:8px 10px; border-radius:7px; font:inherit; font-size:13.5px;
               color:var(--heading); text-decoration:none; cursor:pointer; white-space:nowrap; }
.t-more-item:hover, .t-more-item:focus-visible { background:var(--surface-2); }
/* Destructive in red, and only ever in here: the most dangerous thing on a list should not be the
   easiest thing to hit by accident. */
.t-more-danger { color:var(--danger-text); }
.t-more-danger:hover, .t-more-danger:focus-visible { background:var(--danger-bg); }
.t-more-item[disabled] { opacity:0.9; cursor:default; }

/* ── AND ON A PHONE, WHERE IT IS NOT OPTIONAL (9 Oct) ────────────────────────────────────────
 *
 * The menu is a nicety at 1280 and the only way the row fits at 375. A trigger of 44px, which is
 * the smallest thing a thumb reliably hits, and a menu that cannot run off the right edge of a
 * narrow screen.
 */
@media (max-width: 640px) {
  .t-more-btn { min-width:44px; min-height:44px; }
  .t-more-menu { right:0; left:auto; min-width:min(240px, calc(100vw - 32px)); }
}