/* Visible keyboard focus everywhere a keyboard can land (STAS-3957 item 33).

   The header buttons already had the documented ring (datagrids.css, .stas-btn:focus-visible).
   The controls a keyboard user needs most did not: the select toggles explicitly drop their outline
   and box-shadow (select-components.css - the shell's own :focus-within tint is 7% opacity, which
   reads as nothing), and tabs, pager links, sortable headers and dropdown items never had one.
   a11y.js makes those last ones focusable; this makes the focus visible.

   :focus-visible only, so a mouse click still shows no ring. !important because each of these
   competes with a provider or component rule that sets `outline: none` / `box-shadow: none` at
   higher or equal specificity, and losing that fight silently is exactly how this broke.
   Linked after every other stylesheet in index.html. */

.slc-toggle:focus-visible,
.dropdown-toggle:focus-visible,
.nav-tabs .nav-link:focus-visible,
.nav-pills .nav-link:focus-visible,
.page-link:focus-visible,
table thead th[tabindex]:focus-visible,
.stas-name-link:focus-visible,
.picker-div:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #ED880E !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(237, 136, 14, 0.2) !important;
}

/* SelectComponent: the visible box (border, caret, clear "x") is the .stas-select wrapper, not the
   toggle button inside it, so a ring on the toggle sat inside the border and stopped short of the
   "x". Ring the wrapper instead and keep the inner toggle bare - same split the shell already uses
   for its own :focus-within tint. A plain class inside :has() is cheap; never a [class*=] one. */
.stas-select:has(.slc-toggle:focus-visible) {
    outline: 2px solid #ED880E !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(237, 136, 14, 0.2) !important;
}

.stas-select .slc-toggle:focus-visible,
.stas-select .stas-select-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Header cells and grid rows sit flush against their neighbours, so the ring goes inside. */
table thead th[tabindex]:focus-visible,
.stas-grid tbody tr:focus-visible {
    outline: 2px solid #ED880E !important;
    outline-offset: -2px !important;
}

/* A focused option is also the "current" one, so it gets the hover fill as well as the ring. */
.dropdown-item:focus-visible {
    outline: 2px solid #ED880E !important;
    outline-offset: -2px !important;
    background-color: rgba(237, 136, 14, 0.10) !important;
}