/* ==========================================================================
   VIUCraft Accessibility Styles
   ========================================================================== */

/* ==========================================================================
   1. Skip Navigation
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: var(--primary-indigo, #6366f1);
    color: #ffffff;
    font-size: var(--font-size-base, 1rem);
    font-weight: 600;
    font-family: var(--font-family, sans-serif);
    text-decoration: none;
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg);
    white-space: nowrap;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 1rem;
    left: 1rem;
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* ==========================================================================
   2. Focus Indicators
   Consistent high-contrast focus ring for all interactive elements.
   Using :focus-visible so mouse users don't see the ring.
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--primary-indigo, #6366f1);
    outline-offset: 2px;
}

/* Remove browser default outline — our custom ring replaces it */
:focus:not(:focus-visible) {
    outline: none;
}

/* Buttons */
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
    outline: 2px solid var(--primary-indigo, #6366f1);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25);
}

/* Links */
a:focus-visible {
    outline: 2px solid var(--primary-indigo, #6366f1);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Form controls */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[contenteditable]:focus-visible {
    outline: 2px solid var(--primary-indigo, #6366f1);
    outline-offset: 0;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    border-color: var(--primary-indigo, #6366f1) !important;
}

/* Checkboxes and radios */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--primary-indigo, #6366f1);
    outline-offset: 2px;
}

/* Sidebar nav links */
.nav-link:focus-visible,
.navbar-brand:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--primary-indigo, #6366f1);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================================================
   3. Reduced Motion
   Disables all animations and transitions for users who prefer it.
   ========================================================================== */

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

    /* Disable Bootstrap fade transitions */
    .fade {
        transition: none !important;
    }

    .collapse:not(.show) {
        display: none !important;
    }

    .collapsing {
        transition: none !important;
        display: none !important;
    }

    /* Disable custom CSS variable transitions */
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
    }
}

/* ==========================================================================
   4. High Contrast Mode
   Adjustments for Windows High Contrast / forced-colors mode.
   ========================================================================== */

@media (forced-colors: active) {
    /* Restore borders that use box-shadow or background tricks */
    .btn {
        border: 2px solid ButtonText;
    }

    .card,
    .alert,
    .badge {
        border: 1px solid ButtonText;
    }

    /* Ensure focus ring remains visible */
    :focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px !important;
    }

    .skip-link:focus,
    .skip-link:focus-visible {
        outline: 3px solid Highlight !important;
        background: Highlight;
        color: HighlightText;
    }

    /* Status dots rely on background-color; add a border fallback */
    .status-dot {
        border: 2px solid ButtonText;
    }
}

/* ==========================================================================
   5. Text Scaling / Zoom Support
   Prevents overflow at up to 200% browser zoom.
   ========================================================================== */

/* Avoid fixed heights that clip scaled text */
.btn,
button {
    min-height: 2.25em;
}

/* Ensure form inputs grow with text */
input,
select,
textarea {
    min-height: 2em;
}

/* Navigation items should wrap gracefully at large text sizes */
.navbar,
.sidebar-nav {
    flex-wrap: wrap;
}

/* Prevent horizontal overflow on the page body */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Tables must scroll rather than push the viewport */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   6. Screen Reader Utility Classes
   ========================================================================== */

/**
 * .sr-only — visually hidden but accessible to screen readers.
 * Mirrors Bootstrap's visually-hidden; provided here for standalone use.
 */
.sr-only {
    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 — remains hidden until focused (e.g. skip links).
 */
.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;
}