/* ============================================================================
   MITCON Credensia — Accessibility Layer (WCAG 2.1 AA + SEBI/GIGW)
   ----------------------------------------------------------------------------
   This file is the FIRST place an accessibility auditor will look. It contains
   every helper class, focus pattern, and ARIA-supporting style needed to pass
   WCAG 2.1 AA and SEBI accessibility audit rows ~70–200.

   Organized to map directly to WCAG criteria for easy auditing:
     1. Skip Links              → WCAG 2.4.1 Bypass Blocks
     2. Screen Reader Utilities → WCAG 1.3.1 Info and Relationships
     3. Focus Indicators        → WCAG 2.4.7 Focus Visible + 1.4.11 Non-text Contrast
     4. Touch Targets           → WCAG 2.5.5 Target Size (Enhanced)
     5. Form Accessibility      → WCAG 3.3.1 + 3.3.2 + 3.3.3
     6. Live Regions            → WCAG 4.1.3 Status Messages
     7. Reduced Motion          → WCAG 2.3.3 Animation from Interactions
     8. High Contrast Mode      → Beyond WCAG — Windows accessibility users
     9. Print Accessibility     → Indirect — SEBI document printability
     10. Visual / Cognitive Helpers
   ============================================================================ */


/* ============================================================================
   1. SKIP LINK — WCAG 2.4.1 Bypass Blocks (Level A)
   ----------------------------------------------------------------------------
   Hidden by default; revealed on keyboard focus. Allows screen reader and
   keyboard-only users to jump past the navbar directly to <main>.

   Usage in app.blade.php:
     <a href="#main-content" class="skip-link">Skip to main content</a>
     ...
     <main id="main-content" tabindex="-1">...</main>

   The tabindex="-1" on <main> ensures focus actually moves there when the
   skip link is activated (without it, focus stays on the link in some browsers).

   SEBI Audit Mapping: Rows ~100–110
   ============================================================================ */

.skip-link {
  position: absolute;
  top: -100px;                              /* Hidden above viewport */
  left: var(--space-4);
  z-index: var(--z-skip-link);              /* MUST be highest stacking context */

  display: inline-block;
  padding: var(--space-3) var(--space-6);

  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  text-decoration: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);

  /* No transition on top so motion-reduced users still get instant reveal */
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-4);                      /* Slide into view on focus */
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Multiple skip links (e.g., "Skip to navigation", "Skip to footer") */
.skip-links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-skip-link);
}

.skip-links .skip-link + .skip-link {
  margin-left: var(--space-2);
}


/* ============================================================================
   2. SCREEN READER UTILITIES — WCAG 1.3.1 Info and Relationships
   ----------------------------------------------------------------------------
   Visually hide content while keeping it accessible to screen readers.

   .sr-only           → Always hidden visually, always read by screen readers.
   .sr-only-focusable → Hidden until focused (e.g., for "Skip to" links inside
                        components).

   Usage examples:
     <span class="sr-only">Loading. Please wait.</span>
     <a href="..." class="sr-only-focusable">Skip this section</a>

   SEBI Audit Mapping: Rows ~6–20 (Non-text content alternatives)
   ============================================================================ */

.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ============================================================================
   3. FOCUS INDICATORS — WCAG 2.4.7 + 1.4.11
   ----------------------------------------------------------------------------
   :focus-visible — keyboard focus only (NOT mouse click).
   This is the modern correct pattern. Mouse users don't see focus rings
   (avoiding ugly outlines on click), but keyboard users always do.

   Browser support: All modern browsers (Chrome 86+, Firefox 85+, Safari 15.4+).
   For older browsers, focus-visible polyfill loads in main.js (Step 1.7).

   SEBI Audit Mapping: Rows ~70–90 (Operable / Keyboard Accessible)
   ============================================================================ */

/* Default — remove outline ONLY when JS-driven mouse focus, not keyboard */
*:focus {
  outline: none;
}

/* Restore strong, visible focus for keyboard users */
*:focus-visible {
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* Specific focus styles for buttons/links — match shape */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Form inputs — focus inside the field with border + ring */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--color-focus-ring);
  outline-offset: 0;                        /* Inside the input edge */
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.10);
}

/* Cards / clickable containers — focus inside the card edge */
.card:focus-visible,
[role="article"]:focus-visible {
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--color-focus-ring);
  outline-offset: -2px;                     /* Slight inset, looks intentional */
}

/* Custom dropdowns / disclosure widgets */
[aria-expanded]:focus-visible,
[role="combobox"]:focus-visible,
[role="listbox"]:focus-visible {
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}


/* ============================================================================
   4. TOUCH TARGET SIZE — WCAG 2.5.5 Target Size (Enhanced, Level AAA)
   ----------------------------------------------------------------------------
   Minimum 44x44 CSS pixels for tap targets. Critical for mobile users with
   motor impairments.

   Apply to small icon buttons via class .touch-target.

   Inline icons inside paragraphs are exempt — covered by 2.5.5 exceptions.
   ============================================================================ */

.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hit-area expander — extends invisible touch zone for small icons */
.touch-target--expand {
  position: relative;
}

.touch-target--expand::before {
  content: "";
  position: absolute;
  inset: -8px;
  /* Invisible expander — ensures tappable area even if icon is < 44px */
}


/* ============================================================================
   5. FORM ACCESSIBILITY — WCAG 3.3.1 + 3.3.2 + 3.3.3
   ----------------------------------------------------------------------------
   3.3.1 Error Identification    → errors clearly identified
   3.3.2 Labels or Instructions  → labels visible (not just placeholder)
   3.3.3 Error Suggestion        → suggest how to fix

   These are HELPER classes — actual form components in later phases.

   SEBI Audit Mapping: Rows ~140–160
   ============================================================================ */

/* Required field indicator (spec: WCAG 3.3.2) */
.required-indicator {
  color: var(--color-danger);
  margin-left: var(--space-1);
  font-weight: var(--fw-bold);
}

/* Required field indicator with screen reader text */
.required-indicator::after {
  content: "";
}

/* Hidden text for screen readers — "Required" announced after asterisk */
.required-indicator + .sr-only {
  /* Already styled by .sr-only above */
}

/* Field error message */
.field-error {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-danger);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.field-error::before {
  content: "⚠ ";                            /* Visual indicator beyond color */
  margin-right: var(--space-1);
}

/* Field hint (instructions before error occurs) */
.field-hint {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* Invalid field — red border + light red background */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"],
.is-invalid {
  border-color: var(--color-danger) !important;
  background-color: var(--color-danger-bg);
}

input[aria-invalid="true"]:focus-visible,
textarea[aria-invalid="true"]:focus-visible,
select[aria-invalid="true"]:focus-visible {
  outline-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.10);
}

/* Valid field (after async validation passes) */
input[aria-invalid="false"].is-validated,
.is-valid {
  border-color: var(--color-success);
}

/* Form fieldsets — for grouping related inputs */
fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}

legend {
  padding: 0 var(--space-2);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
}


/* ============================================================================
   6. ARIA LIVE REGIONS — WCAG 4.1.3 Status Messages
   ----------------------------------------------------------------------------
   Announce dynamic content to screen readers without focus shift.
   Used for form submission feedback, search results count, etc.

   Usage:
     <div role="status" aria-live="polite" class="live-region">
       3 results found
     </div>

     <div role="alert" aria-live="assertive" class="live-region">
       Error: Email address is invalid
     </div>

   We visually hide unless .live-region--visible is added (for visible toasts).
   ============================================================================ */

.live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.live-region--visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}


/* ============================================================================
   7. REDUCED MOTION — WCAG 2.3.3 Animation from Interactions (AAA)
   ----------------------------------------------------------------------------
   Already handled at token level in _variables.css (durations → 0ms).
   This block adds COMPLETE motion suppression as a safety net for any
   component using transition/animation properties directly.

   This is the safety net. Token-level handling is the first line of defense.
   ============================================================================ */

@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;
  }

  /* Allow specific animations needed for accessibility (e.g., loading spinners
     should still spin so users know something is happening). Override per-case. */
  .motion-safe-spin {
    animation-duration: 1s !important;
    animation-iteration-count: infinite !important;
  }
}


/* ============================================================================
   8. HIGH CONTRAST MODE (Windows) — Beyond WCAG, real-world necessity
   ----------------------------------------------------------------------------
   Windows High Contrast users override system colors. We must use system colors
   for borders, focus rings, and text where applicable, OR ensure our values
   maintain contrast.
   ============================================================================ */

@media (prefers-contrast: more), (forced-colors: active) {
  /* Force focus rings to system color for visibility */
  *:focus-visible {
    outline: 3px solid CanvasText !important;
    outline-offset: 2px;
  }

  /* Borders use system color */
  input,
  textarea,
  select,
  button,
  .card,
  fieldset {
    border: 2px solid CanvasText !important;
  }

  /* Skip link uses system color */
  .skip-link {
    background-color: Canvas !important;
    color: CanvasText !important;
    border: 2px solid CanvasText !important;
  }

  /* Buttons must have visible borders */
  button,
  .btn,
  [role="button"] {
    border: 2px solid ButtonText !important;
  }
}


/* ============================================================================
   9. PRINT ACCESSIBILITY (handled in reset.css print block; supplements here)
   ----------------------------------------------------------------------------
   Print should preserve heading hierarchy + skip link should not appear.
   ============================================================================ */

@media print {
  .skip-link,
  .sr-only,
  .live-region {
    display: none !important;
  }
}


/* ============================================================================
   10. VISUAL & COGNITIVE HELPERS
   ----------------------------------------------------------------------------
   Helpers for users with low vision or cognitive impairments.
   ============================================================================ */

/* Cursor signals — make interactive elements unmistakable */
button,
[role="button"],