/**
 * Accessibility Styles
 * WCAG 2.1 Level AA compliant
 * Focus indicators, high contrast, screen reader support
 */

/* ============================================
   FOCUS INDICATORS (WCAG 2.4.7)
   ============================================ */

/* Enhanced focus visible styles */
*:focus-visible {
    outline: 3px solid var(--chart-2);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Remove default outline */
*:focus {
    outline: none;
}

/* Button focus states */
button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--chart-2);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* Input focus states */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--chart-2);
    outline-offset: 0;
    border-color: var(--chart-2);
}

/* Card/interactive element focus */
.location-type-btn:focus-visible,
.subnet-card:focus-visible {
    outline: 3px solid var(--chart-2);
    outline-offset: 2px;
    transform: scale(1.02);
}

/* ============================================
   SKIP LINKS (WCAG 2.4.1)
   ============================================ */

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--chart-2);
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    z-index: 1000;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid white;
    outline-offset: -3px;
}

/* ============================================
   HIGH CONTRAST MODE (WCAG 1.4.3, 1.4.6)
   ============================================ */

/* High contrast adjustments */
@media (prefers-contrast: high) {
    :root {
        --background: #000000;
        --foreground: #ffffff;
        --card: #1a1a1a;
        --border: #ffffff;
        --muted: #2a2a2a;
        --muted-foreground: #cccccc;
    }

    button,
    .location-type-btn,
    input,
    select,
    textarea {
        border-width: 2px;
    }

    *:focus-visible {
        outline-width: 4px;
    }
}

/* Windows High Contrast Mode */
@media (prefers-contrast: more) {
    * {
        border-color: currentColor !important;
    }

    button {
        border: 2px solid currentColor;
    }
}

/* ============================================
   REDUCED MOTION (WCAG 2.3.3)
   ============================================ */

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

    /* Remove parallax effects */
    .parallax {
        transform: none !important;
    }

    /* Disable sliding animations */
    .mobile-slide-up {
        animation: none !important;
    }
}

/* ============================================
   SCREEN READER ONLY TEXT (WCAG 4.1.2)
   ============================================ */

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

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ============================================
   SEMANTIC FOCUS FLOW
   ============================================ */

/* Ensure logical tab order */
main {
    isolation: isolate;
}

/* Modal focus trap indicators */
.modal-content:focus-within {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

/* ============================================
   COLOR CONTRAST (WCAG 1.4.11)
   ============================================ */

/* Ensure minimum 4.5:1 contrast for text */
.text-muted-foreground {
    /* Will use CSS custom property with adequate contrast */
    color: var(--muted-foreground);
}

/* Link contrast */
a:not([class]) {
    color: var(--chart-2);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

a:not([class]):hover {
    text-decoration-thickness: 3px;
}

/* Error states with sufficient contrast */
.error,
.text-red-500 {
    color: #dc2626;
    font-weight: 500;
}

:root[data-theme="dark"] .error,
:root[data-theme="dark"] .text-red-500 {
    color: #fca5a5;
}

/* Success states */
.success,
.text-green-500 {
    color: #16a34a;
    font-weight: 500;
}

:root[data-theme="dark"] .success,
:root[data-theme="dark"] .text-green-500 {
    color: #86efac;
}

/* ============================================
   KEYBOARD NAVIGATION INDICATORS
   ============================================ */

/* Show keyboard focus on cards */
[tabindex="0"]:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--chart-2);
    outline-offset: 2px;
}

/* Navigation focus trail */
.keyboard-nav-active *:focus-visible {
    outline-width: 4px;
    outline-offset: 3px;
}

/* ============================================
   ARIA LIVE REGIONS
   ============================================ */

[aria-live] {
    /* Ensure live regions are announced */
    position: relative;
}

[aria-live="assertive"] {
    /* High priority announcements */
    font-weight: 600;
}

/* Status messages */
.status-message {
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
    border-left: 4px solid currentColor;
}

.status-message[role="status"] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--chart-2);
}

.status-message[role="alert"] {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

/* ============================================
   FORM ACCESSIBILITY
   ============================================ */

/* Required field indicators */
input:required,
select:required,
textarea:required {
    border-left: 4px solid var(--chart-2);
}

/* Invalid field states */
input:invalid:not(:focus):not(:placeholder-shown),
select:invalid:not(:focus),
textarea:invalid:not(:focus):not(:placeholder-shown) {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.05);
}

/* Valid field states */
input:valid:not(:focus):not(:placeholder-shown),
select:valid:not(:focus),
textarea:valid:not(:focus):not(:placeholder-shown) {
    border-color: #16a34a;
}

/* Field descriptions */
.field-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-top: 0.25rem;
}

.field-error {
    font-size: 0.875rem;
    color: #dc2626;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* ============================================
   INTERACTIVE ELEMENT STATES
   ============================================ */

/* Disabled states */
button:disabled,
input:disabled,
select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading states */
[aria-busy="true"] {
    opacity: 0.7;
    cursor: wait;
}

[aria-busy="true"]::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   TOOLTIP ACCESSIBILITY
   ============================================ */

[role="tooltip"] {
    position: absolute;
    z-index: 1000;
    padding: 0.5rem 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 250px;
}

[aria-describedby]:hover + [role="tooltip"],
[aria-describedby]:focus + [role="tooltip"] {
    display: block;
}

/* ============================================
   TABLE ACCESSIBILITY
   ============================================ */

/* Ensure table headers are distinct */
thead th {
    font-weight: 700;
    background: var(--muted);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Row hover for better tracking */
tbody tr:hover {
    background: var(--muted);
}

tbody tr:focus-within {
    outline: 2px solid var(--chart-2);
    outline-offset: -2px;
}

/* ============================================
   MODAL ACCESSIBILITY
   ============================================ */

/* Modal backdrop */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.modal-backdrop[aria-hidden="false"] {
    display: block;
}

/* Modal content focus management */
.modal-content[role="dialog"] {
    position: relative;
}

.modal-content[role="dialog"]:focus {
    outline: none;
}

/* Close button accessibility */
.modal-close[aria-label] {
    min-width: 44px;
    min-height: 44px;
}

/* ============================================
   LANDMARK REGIONS (WCAG 1.3.1)
   ============================================ */

main[role="main"],
nav[role="navigation"],
header[role="banner"],
footer[role="contentinfo"] {
    display: block;
}

/* ============================================
   TEXT SIZING (WCAG 1.4.4)
   ============================================ */

/* Ensure text can scale to 200% */
html {
    font-size: 100%;
}

@media (min-width: 1920px) {
    html {
        font-size: 112.5%; /* 18px base */
    }
}

/* Prevent text overflow on zoom */
* {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ============================================
   PRINT ACCESSIBILITY
   ============================================ */

@media print {
    /* Ensure focus indicators are visible in print */
    *:focus {
        outline: 2px solid black !important;
    }

    /* Show URLs for links */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }

    /* Skip navigation in print */
    nav,
    .skip-link {
        display: none !important;
    }
}