/**
 * Nearly Perfect Extranet — Interaction & Accessibility Baseline (TECH-775)
 *
 * App-wide interaction + a11y patterns layered on top of the component
 * bridge (TECH-774). Loaded last. No template changes — pure CSS, applies
 * everywhere via element + bridged-class selectors.
 *
 * Covers: focus-visible rings, consistent hover/active, HTMX loading
 * indicator polish, reduced-motion, and 44×44 minimum hit areas.
 * (Modal focus-trap is handled in components.js.)
 */

/* ============================================================
 * 1. FOCUS RINGS — 2px indigo-500, 2px offset, keyboard-only
 * Most interactive elements had no visible focus indicator. This is the
 * single biggest a11y win. :focus-visible => keyboard focus only, so mouse
 * clicks don't show a ring.
 * ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-indigo-500);
  outline-offset: 2px;
}

/* Belt-and-suspenders: kill the legacy `:focus { outline: none }` on form
 * controls for keyboard users — they get the ring; mouse focus keeps just
 * the indigo box-shadow glow from the bridge. */
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--color-indigo-500);
  outline-offset: 2px;
}

/* Rounded controls: hug the corner radius so the ring looks intentional */
.btn:focus-visible,
.pagination-btn:focus-visible,
.dropdown-toggle:focus-visible,
.property-display:focus-visible,
.header-help-link:focus-visible,
.user-toggle:focus-visible {
  outline-offset: 2px;
}

/* ============================================================
 * 2. HOVER / ACTIVE CONSISTENCY
 * Table rows, dropdown items, nav links already have hover via the shell /
 * bridge. Add a consistent pressed feedback for button-like controls.
 * ============================================================ */
.btn:active,
.pagination-btn:active:not(.disabled) {
  transform: translateY(1px);
}

/* Clickable table rows (rows that carry an hx-get / onclick) */
.data-table tbody tr[hx-get]:hover,
.data-table tbody tr[onclick]:hover {
  cursor: pointer;
}

/* ============================================================
 * 3. HTMX LOADING INDICATORS
 * The .htmx-indicator show/hide already exists. Add a smooth opacity
 * transition and dim + disable the in-flight region so the loading state
 * reads consistently everywhere.
 * ============================================================ */
.htmx-indicator {
  opacity: 0;
  transition: opacity var(--np-transition, 200ms ease);
}
.htmx-request.htmx-indicator,
.htmx-request .htmx-indicator {
  opacity: 1;
}

/* Dim the element that initiated the request while it's in flight */
.htmx-request[hx-get],
.htmx-request[hx-post],
.htmx-request[hx-put],
.htmx-request[hx-delete] {
  opacity: 0.7;
  pointer-events: none;
}

/* Branded spinner head (the .spinner component already uses --color-accent,
 * now indigo; assert it explicitly so it survives token changes) */
.spinner-head {
  stroke: var(--color-indigo-500);
}

/* ============================================================
 * 4. MINIMUM TOUCH TARGETS — 44×44 (WCAG 2.5.5)
 * Grow the *hit area* of small icon / close controls without changing the
 * glyph size, via min dimensions + flex centering.
 * ============================================================ */
.icon-btn,
.modal-close,
.alert-close,
.toast-close,
.announcement-banner-dismiss,
.btn-icon {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Sidebar nav links + tabs: ensure a comfortable target height */
.sidebar .nav-link {
  min-height: 44px;
}
.tab-btn {
  min-height: 44px;
}

/* ============================================================
 * 5. REDUCED MOTION
 * Honor prefers-reduced-motion: near-instant transitions/animations.
 * Exempt the loading spinner — its rotation is essential feedback, not
 * decoration.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep the spinner spinning — it communicates "in progress" */
  .spinner-svg {
    animation-duration: 0.8s !important;
    animation-iteration-count: infinite !important;
  }
}