/* ==========================================
   ACCESSIBILITY & UTILITY STYLES
   Focus indicators, keyboard navigation, screen readers
   ========================================== */

/* ========== FOCUS INDICATORS ========== */
/* Modern, visible focus outlines for keyboard navigation */
/* Note: MudBlazor inputs have their own focus styles, skip the global outline */
*:focus-visible {
    outline: none !important;
}

/* Button focus */
.mud-button-root:focus-visible {
    outline: none !important;
}

/* Input focus (already styled in components.css, but adding fallback) */
.mud-input:focus-visible,
.mud-input-outlined:focus-visible {
    outline: none !important;
}

/* Link focus */
a:focus-visible,
.mud-link:focus-visible {
    outline: 2px solid #1A90B0 !important;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Icon button focus */
.mud-icon-button:focus-visible {
    outline: none !important;
}

/* Checkbox/Radio focus */
.mud-checkbox:focus-visible,
.mud-radio:focus-visible {
    outline: 2px solid #1A90B0 !important;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Select focus */
.mud-select:focus-visible {
    outline: none !important;
}

/* Tab focus */
.mud-tab:focus-visible {
    outline: 2px solid #1A90B0 !important;
    outline-offset: -2px;
    border-radius: 4px;
}

/* Navigation link focus */
.mud-nav-link:focus-visible {
    outline: none !important;
}

/* Remove default focus for mouse users (preserve for keyboard) */
*:focus:not(:focus-visible) {
    outline: none !important;
}

/* ========== SKIP TO MAIN CONTENT ========== */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 0;
    background: #1A90B0;
    color: white;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 8px 0;
    z-index: 9999;
    transition: top 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.skip-to-main:focus {
    top: 0;
    outline: 2px solid white;
    outline-offset: -4px;
}

/* ========== SCREEN READER ONLY ========== */
.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 {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ========== LIVE REGIONS ========== */
.live-region {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ========== KEYBOARD NAVIGATION HINTS ========== */
/* Show keyboard shortcut hints on focus */
[data-kbd-shortcut]:focus-visible::after {
    content: attr(data-kbd-shortcut);
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1000;
}

/* ========== HIGH CONTRAST MODE ========== */
@media (prefers-contrast: high) {
    * {
        border-width: 2px !important;
    }

    .mud-button-root {
        border: 2px solid currentColor !important;
    }

    .mud-card {
        border-width: 2px !important;
    }
}

/* ========== REDUCED MOTION ========== */
@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;
    }
}

/* ========== UTILITY CLASSES ========== */

/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* Flex utilities */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.align-start { align-items: flex-start !important; }
.align-center { align-items: center !important; }
.align-end { align-items: flex-end !important; }
.align-stretch { align-items: stretch !important; }
.gap-xs { gap: 4px !important; }
.gap-sm { gap: 8px !important; }
.gap-md { gap: 16px !important; }
.gap-lg { gap: 24px !important; }
.gap-xl { gap: 32px !important; }

/* Text alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* Text transform */
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-none { text-transform: none !important; }

/* Font styles */
.text-italic { font-style: italic !important; }
.text-normal { font-style: normal !important; }

/* Text decoration */
.text-underline { text-decoration: underline !important; }
.text-no-underline { text-decoration: none !important; }
.text-line-through { text-decoration: line-through !important; }

/* Text overflow */
.text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.text-wrap { white-space: normal !important; }
.text-nowrap { white-space: nowrap !important; }

/* Visibility */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* Overflow */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

/* Position */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* Width */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

/* Height */
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

/* Cursor */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-grab { cursor: grab !important; }
.cursor-grabbing { cursor: grabbing !important; }

/* User select */
.select-none { user-select: none !important; }
.select-text { user-select: text !important; }
.select-all { user-select: all !important; }

/* Pointer events */
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* Opacity */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* Z-index */
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
.z-auto { z-index: auto !important; }

/* Background colors (using teal theme) */
.bg-primary { background-color: #1A90B0 !important; }
.bg-secondary { background-color: #5B77A2 !important; }
.bg-success { background-color: #10b981 !important; }
.bg-warning { background-color: #f59e0b !important; }
.bg-error { background-color: #ef4444 !important; }
.bg-info { background-color: #3b82f6 !important; }
.bg-transparent { background-color: transparent !important; }

/* Text colors */
.text-primary { color: #1A90B0 !important; }
.text-secondary { color: #5B77A2 !important; }
.text-success { color: #10b981 !important; }
.text-warning { color: #f59e0b !important; }
.text-error { color: #ef4444 !important; }
.text-info { color: #3b82f6 !important; }
.text-muted { color: var(--mud-palette-text-secondary) !important; }

/* Border */
.border { border: 1px solid var(--mud-palette-divider) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--mud-palette-divider) !important; }
.border-right { border-right: 1px solid var(--mud-palette-divider) !important; }
.border-bottom { border-bottom: 1px solid var(--mud-palette-divider) !important; }
.border-left { border-left: 1px solid var(--mud-palette-divider) !important; }

/* Border radius (using CSS variables from app.css) */
.rounded-none { border-radius: 0 !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Interaction states */
.hover-opacity:hover { opacity: 0.8 !important; }
.hover-scale:hover { transform: scale(1.05) !important; }
.hover-lift:hover { transform: translateY(-2px) !important; }

/* Loading state */
.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #1A90B0;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 600ms linear infinite;
}

/* Disabled state */
.disabled,
[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ========== RESPONSIVE UTILITIES ========== */
/* xs: 0-599px */
@media (max-width: 599px) {
    .d-xs-none { display: none !important; }
    .d-xs-block { display: block !important; }
    .d-xs-flex { display: flex !important; }
}

/* sm: 600-959px */
@media (min-width: 600px) and (max-width: 959px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
}

/* md: 960px+ */
@media (min-width: 960px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}

/* ========== PRINT UTILITIES ========== */
@media print {
    .print-hidden { display: none !important; }
    .print-only { display: block !important; }
}

/* ========== ACCESSIBILITY ARIA LABELS ========== */
/* Ensure all interactive elements have proper ARIA labels */
button:not([aria-label]):not([aria-labelledby])::after,
a:not([aria-label]):not([aria-labelledby]):not(:has(> *))::after {
    /* Visual indicator in dev mode for missing ARIA labels */
    /* Remove in production */
}