/*
 * Nexii focus-ring spec - FSD §6.2 / NFR 4.
 *
 * Required look on dark surfaces:
 *   - 2 px brand-indigo (#6366F1) outer glow
 *   - 1 px inner border that brightens slightly so the field edge is visible
 *     even before focus
 *
 * Implemented as :focus-visible rules so mouse clicks don't paint a ring,
 * which keeps the dark UI calm. Browsers without :focus-visible support
 * fall back to :focus which is acceptable.
 *
 * Loaded once globally from layouts/app.blade.php so every page picks it
 * up - no need to add it per page.
 */

/* Reset native outline so the box-shadow ring is the only indicator. */
:where(a, button, input, select, textarea, [tabindex]):focus { outline: none; }

/* The ring itself. inset 0 0 0 1px is the inner border; the second shadow
   is the 2 px glow (rgba indigo so it composites on dark cards softly). */
:where(a, button, input, select, textarea, [role="menuitem"], [tabindex]):focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 0 2px rgba(99, 102, 241, 0.85);
  border-color: rgba(99, 102, 241, 0.85) !important;
  transition: box-shadow .12s ease;
}

/* Forms inside dark cards keep their existing 1 px subtle border on rest, then
   the focus ring above on focus. Targeting the standard input classes used
   across auth, profile, settings, wallet and admin views. */
.pr-input:focus-visible,
.st-input:focus-visible,
.nxh-av-btn:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 0 2px rgba(99, 102, 241, 0.85);
}

/* Icon buttons (the eye-toggle, slug-edit, etc.) are too small for an inner
   border to read; let just the glow be the ring there. */
.pw-eye-btn:focus-visible,
.slug-btn:focus-visible,
.nxh-pill:focus-visible {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.85);
}