/* ── 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; }
/* ── THE TRIGGER NEEDS A COLOUR OF ITS OWN (14 Oct, found in the 1.3.6 dark sweep) ────────────
 *
 * It had none. .t-more-btn set no background anywhere, so the button fell through to the user
 * agent's default button face -- a light grey from no palette of ours -- and the page's own .btn
 * text colour sat on top of it. In LIGHT that accident looks like a grey chip and nobody ever
 * questioned it. In DARK the heading token is near-white, on near-white: the trigger was
 * invisible at a contrast ratio of about 1.02:1, on the control that holds Delete.
 *
 * (The hexes are deliberately not written here. palettecheck reads comments too, and it is
 * right to: a colour spelled out in a stylesheet is a colour somebody will later copy.)
 *
 * background-color rather than the `background` shorthand, for the reason the dark stylesheet
 * rules are written that way everywhere else: the shorthand resets the image and position
 * layers a palette override may be relying on.
 */
.t-more-btn { background-color:var(--card); color:var(--heading);
              border:1px solid var(--line); }
.t-more-btn:hover, .t-more-btn:focus-visible { background-color:var(--surface-2); }
/* ── THE MENU IS A POPOVER, NOT A CHILD OF THE ROW (15 Oct, Part 5) ─────────────────────────
 *
 * It was position:absolute inside .t-more, so any ancestor with its own overflow clipped it.
 * Reported on a Courses page holding ONE course: the card is only as tall as the course, the
 * menu opened inside it, and the only way to reach Delete was to scroll within a card. The
 * number of courses is what made it visible, not what caused it -- a short card anywhere did
 * the same thing.
 *
 * position:fixed takes it out of every ancestor's flow, and row-actions.js sets the
 * coordinates from the trigger's own rectangle each time it opens. Nothing can clip it now
 * except a transformed ancestor, which would make a containing block of itself -- there are
 * none on these pages, and the gate renders a one-course organisation to prove it.
 */
.t-more-menu { position:fixed; z-index:1250; 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-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; }
  /* A BOTTOM SHEET ON A PHONE. A popover anchored to a 44px trigger near the edge of a 375px
     screen is a menu half off the side; the sheet is the shape the rest of the app already
     uses for a dialog at this width. !important because the inline coordinates row-actions.js
     writes are what position it on a desktop. */
  .t-more-menu { position:fixed !important; left:8px !important; right:8px !important;
                 top:auto !important; bottom:max(12px, env(safe-area-inset-bottom)) !important;
                 width:auto !important; min-width:0 !important; padding:8px;
                 border-radius:14px; box-shadow:0 -8px 30px rgba(11,22,66,0.22); }
  .t-more-menu .t-more-item { padding:13px 12px; font-size:15px; }
}