/* a11y-focus.css — one visible keyboard focus indicator for the STANDALONE pages.
   ---------------------------------------------------------------------------
   The dashboard shells (MApp.shell in mapp.js, App.shell in app.js) inject this same
   rule set inline, but the standalone pages — register.html, register-it.html,
   login.html, app.html, client.html, installer.html, index.html, verify.html … —
   load vendor/ui/css/styles.css and then render their OWN markup, so they were
   left with the vendor's low-contrast ring (and, on .kt-input, no ring at all).

   Two ends have to be fixed, because a bare `:focus-visible` rule (specificity 0,1,0)
   never wins against the vendor:
     1. Metronic drives its focus ring from the `--ring` custom property
        (styles.css :6046/:6070), so repoint that variable.
     2. `.kt-btn:focus-visible` (:7401) and `.kt-input:focus-visible` (:8936) live in
        `@layer components` and explicitly suppress the outline
        (`--tw-outline-style:none; outline-style:none`), so re-assert a real outline
        at matching specificity for those controls.

   #086ad8 on white is 5.17:1 — clears the 3:1 expected of a focus indicator
   (WCAG 2.2 SC 2.4.7 Focus Visible, SC 1.4.11 Non-text Contrast).

   MUST be linked AFTER the Metronic stylesheet. Unlayered rules beat @layer rules,
   so this wins regardless of source order against the layered ones — but the plain
   `--ring` assignment still needs to come later to override the vendor's :root. */

:root,
.dark { --ring: #086ad8; }

:focus-visible { outline: 2px solid #086ad8; outline-offset: 2px; }

.kt-btn:focus-visible,
.kt-input:focus-visible,
.kt-checkbox:focus-visible,
.kt-radio:focus-visible,
.kt-switch:focus-visible,
.kt-textarea:focus-visible,
.kt-select:focus-visible {
  --tw-outline-style: solid;
  outline: 2px solid #086ad8 !important;
  outline-offset: 2px !important;
}

/* A visually-hidden <input type=file> inside a styled <label> is the pattern these pages
   use for camera/upload buttons: the input takes focus but is invisible, so the ring has
   to be drawn on the wrapping label instead. */
label:focus-within { outline: 2px solid #086ad8; outline-offset: 2px; }

/* Skip link — first thing in the tab order, visible only on focus (SC 2.4.1 Bypass Blocks). */
.askip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: #fff; color: #086ad8; border: 2px solid #086ad8;
  border-radius: 0 0 8px 0; padding: .6rem 1rem;
  font-size: .9rem; font-weight: 600; text-decoration: none;
}
.askip:focus { left: 0; }