/* SolarLuna Designer - WCAG 2.1/2.2 AA Accessibility Styles
 * ============================================================
 * This stylesheet provides comprehensive accessibility support including:
 * - Focus indicators (WCAG 2.4.7, 2.4.11, 2.4.12, 2.4.13)
 * - Color contrast (WCAG 1.4.3, 1.4.6, 1.4.11)
 * - Text spacing (WCAG 1.4.12)
 * - Target size (WCAG 2.5.5, 2.5.8)
 * - Reduced motion (WCAG 2.3.3)
 * - High contrast support (WCAG 1.4.3)
 * - Reflow support (WCAG 1.4.10)
 */

/* ============================================================
   SECTION 1: CSS CUSTOM PROPERTIES FOR ACCESSIBILITY
   ============================================================ */

:root {
  /* Focus indicator colors - WCAG 2.4.7, 2.4.11 */
  --a11y-focus-color: #005fcc;
  --a11y-focus-color-inverse: #ffdd00;
  --a11y-focus-width: 3px;
  --a11y-focus-offset: 2px;
  
  /* Minimum touch/click target sizes - WCAG 2.5.5, 2.5.8 */
  --a11y-min-target-size: 44px;
  --a11y-min-target-spacing: 8px;
  
  /* High contrast border for form elements */
  --a11y-border-color: #4a5568;
  --a11y-error-color: #dc2626;
  --a11y-success-color: #059669;
  --a11y-warning-color: #d97706;
  
  /* Text spacing properties - WCAG 1.4.12 */
  --a11y-line-height: 1.5;
  --a11y-letter-spacing: 0.12em;
  --a11y-word-spacing: 0.16em;
  --a11y-paragraph-spacing: 2em;
}

/* ============================================================
   SECTION 2: SKIP LINKS & LANDMARK NAVIGATION
   ============================================================ */

/* Enhanced skip link styles */
.skip-link,
.sr-only-focusable {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 10000;
}

.skip-link:focus,
.skip-link:active,
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: fixed;
  left: var(--space-4, 1rem);
  top: var(--space-4, 1rem);
  width: auto;
  height: auto;
  padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
  background-color: var(--color-primary, #dc2626);
  color: var(--white, #ffffff);
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-semibold, 600);
  text-decoration: none;
  border-radius: var(--radius-lg, 0.5rem);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 10000;
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color-inverse);
  outline-offset: var(--a11y-focus-offset);
}

/* Screen reader only content - improved implementation */
.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;
}

/* Allow visually hidden elements to be focusable */
.sr-only-focusable:not(:focus):not(:focus-within),
.visually-hidden-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;
}

/* ============================================================
   SECTION 3: FOCUS INDICATORS - WCAG 2.4.7, 2.4.11, 2.4.12, 2.4.13
   ============================================================ */

/* Remove default outline only when custom focus styles are applied */
:focus {
  outline: none;
}

/* Universal focus-visible indicator */
:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: var(--a11y-focus-offset);
  border-radius: var(--radius-sm, 0.125rem);
}

/* Enhanced focus for interactive elements */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: var(--a11y-focus-offset);
  box-shadow: 0 0 0 calc(var(--a11y-focus-width) + var(--a11y-focus-offset)) rgba(0, 95, 204, 0.25);
}

/* High visibility focus for dark backgrounds */
.navbar :focus-visible,
.sidebar :focus-visible,
.admin-sidebar :focus-visible,
[data-theme="dark"] :focus-visible,
.bg-dark :focus-visible {
  outline-color: var(--a11y-focus-color-inverse);
  box-shadow: 0 0 0 calc(var(--a11y-focus-width) + var(--a11y-focus-offset)) rgba(255, 221, 0, 0.35);
}

/* Button focus states */
.btn:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: var(--a11y-focus-offset);
  box-shadow: 
    0 0 0 calc(var(--a11y-focus-width) + var(--a11y-focus-offset)) rgba(0, 95, 204, 0.25),
    var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  transform: translateY(-1px);
}

.btn-primary:focus-visible {
  outline-color: var(--a11y-focus-color-inverse);
}

/* Form control focus states */
.form-control:focus-visible,
.form-select:focus-visible {
  border-color: var(--a11y-focus-color);
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: -1px;
  box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.15);
}

/* Card and interactive container focus */
.card:focus-visible,
.workflow-card:focus-visible,
.action-card:focus-visible,
.stat-card:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: var(--a11y-focus-offset);
  box-shadow: 0 0 0 6px rgba(0, 95, 204, 0.2);
}

/* Navigation link focus */
.nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: -2px;
  background-color: rgba(0, 95, 204, 0.1);
}

/* Table row focus for keyboard navigation */
.table tbody tr:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: -2px;
  background-color: rgba(0, 95, 204, 0.1);
}

/* Checkbox and radio focus states */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: var(--a11y-focus-offset);
  box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.2);
}

/* ============================================================
   SECTION 4: COLOR CONTRAST FIXES - WCAG 1.4.3, 1.4.6, 1.4.11
   ============================================================ */

/* Improved contrast for muted text (minimum 4.5:1 ratio) */
.text-muted {
  color: #6b7280 !important; /* 5.3:1 contrast on white, 4.6:1 on light gray */
}

/* Dark theme muted text */
.admin-main .text-muted,
.admin-content .text-muted,
.sidebar .text-muted,
[data-theme="dark"] .text-muted {
  color: #9ca3af !important; /* 4.5:1 contrast on dark backgrounds */
}

/* Ensure link contrast */
a {
  text-decoration-thickness: max(1px, 0.0625rem);
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: max(2px, 0.125rem);
}

/* Badge contrast improvements */
.badge {
  font-weight: 600;
}

.badge.bg-warning,
.badge-warning {
  color: #1a1a1a !important; /* Dark text on yellow for 4.5:1 contrast */
}

.badge.bg-info,
.badge-info {
  color: #ffffff !important;
  background-color: #0369a1 !important; /* Darker blue for contrast */
}

/* Alert contrast improvements */
.alert-warning {
  color: #854d0e !important;
  background-color: #fef3c7 !important;
  border-color: #f59e0b !important;
}

.alert-info {
  color: #1e40af !important;
  background-color: #dbeafe !important;
  border-color: #3b82f6 !important;
}

/* Form placeholder contrast (minimum 3:1 ratio required) */
::placeholder {
  color: #6b7280;
  opacity: 1;
}

.admin-main ::placeholder,
.admin-content ::placeholder {
  color: #9ca3af;
}

/* Disabled state contrast */
:disabled,
[disabled],
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   SECTION 5: MINIMUM TARGET SIZE - WCAG 2.5.5, 2.5.8
   ============================================================ */

/* Ensure all interactive elements meet 44x44px minimum */
button,
[role="button"],
.btn,
a.btn {
  min-height: var(--a11y-min-target-size);
  min-width: var(--a11y-min-target-size);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
}

/* Small buttons still need adequate target size */
.btn-sm {
  min-height: var(--a11y-min-target-size);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
}

/* Navigation links target size */
.nav-link {
  min-height: var(--a11y-min-target-size);
  display: inline-flex;
  align-items: center;
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
}

/* Form controls target size */
.form-control,
.form-select {
  min-height: var(--a11y-min-target-size);
  padding: var(--space-3, 0.75rem);
}

/* Checkbox and radio containers */
.form-check {
  min-height: var(--a11y-min-target-size);
  padding-left: calc(var(--a11y-min-target-size) + var(--space-2, 0.5rem));
  display: flex;
  align-items: center;
}

.form-check-input {
  width: 20px;
  height: 20px;
  margin-top: 0;
  cursor: pointer;
}

.form-check-label {
  cursor: pointer;
  padding: var(--space-2, 0.5rem);
  margin-left: var(--space-2, 0.5rem);
}

/* Table action buttons */
.table-actions .btn,
.action-buttons .btn {
  min-height: var(--a11y-min-target-size);
  min-width: var(--a11y-min-target-size);
  padding: var(--space-2, 0.5rem);
}

/* Icon-only buttons */
.btn-icon,
.btn:has(> i:only-child),
.btn:has(> .fa:only-child) {
  min-height: var(--a11y-min-target-size);
  min-width: var(--a11y-min-target-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dropdown items target size */
.dropdown-item {
  min-height: var(--a11y-min-target-size);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  display: flex;
  align-items: center;
}

/* Close buttons */
.btn-close,
[aria-label="Close"] {
  min-height: var(--a11y-min-target-size);
  min-width: var(--a11y-min-target-size);
  padding: var(--space-2, 0.5rem);
}

/* Sidebar toggle button */
.sidebar-toggle,
.navbar-toggler {
  min-height: 48px;
  min-width: 48px;
}

/* Pagination links */
.pagination .page-link {
  min-height: var(--a11y-min-target-size);
  min-width: var(--a11y-min-target-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   SECTION 6: 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;
  }
  
  /* Disable parallax and background movements */
  body.site-bg {
    background-attachment: scroll !important;
  }
  
  /* Disable hover transforms */
  .btn:hover,
  .card:hover,
  .action-card:hover,
  .nav-link:hover {
    transform: none !important;
  }
  
  /* Disable loading spinner animation */
  .loading-spinner,
  .fa-spin {
    animation: none !important;
  }
  
  /* Keep essential visual feedback but remove animation */
  .navbar-collapse {
    transition: none !important;
  }
  
  .dropdown-menu {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   SECTION 7: HIGH CONTRAST MODE SUPPORT
   ============================================================ */

@media (prefers-contrast: high) {
  :root {
    --a11y-focus-width: 4px;
    --a11y-border-color: #000000;
  }
  
  /* Increase border visibility */
  .btn,
  .form-control,
  .form-select,
  .card,
  .alert,
  .badge {
    border-width: 2px !important;
    border-style: solid !important;
  }
  
  /* High contrast focus indicators */
  :focus-visible {
    outline-width: 4px !important;
    outline-style: solid !important;
  }
  
  /* Ensure text is clearly visible */
  body {
    color: #000000;
    background-color: #ffffff;
  }
  
  /* Dark theme high contrast */
  .admin-main,
  .admin-content,
  .sidebar,
  .navbar {
    border-width: 2px !important;
  }
  
  /* Links must be clearly distinguishable */
  a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
  }
  
  a:hover,
  a:focus {
    text-decoration-style: double !important;
  }
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
  /* Ensure custom focus indicators work */
  :focus-visible {
    outline: 3px solid CanvasText !important;
    outline-offset: 2px !important;
  }
  
  /* Buttons should have visible borders */
  .btn {
    border: 2px solid ButtonText !important;
  }
  
  .btn:hover {
    border-style: dashed !important;
  }
  
  /* Form controls */
  .form-control,
  .form-select {
    border: 2px solid CanvasText !important;
  }
  
  /* Links */
  a {
    text-decoration: underline !important;
  }
}

/* ============================================================
   SECTION 8: TEXT SPACING & REFLOW - WCAG 1.4.12, 1.4.10
   ============================================================ */

/* Support for user text spacing preferences */
.text-spacing-override {
  line-height: var(--a11y-line-height) !important;
  letter-spacing: var(--a11y-letter-spacing) !important;
  word-spacing: var(--a11y-word-spacing) !important;
}

.text-spacing-override p {
  margin-bottom: var(--a11y-paragraph-spacing) !important;
}

/* Ensure content reflows properly at 400% zoom */
@media (max-width: 320px) {
  .container,
  .container-fluid {
    padding-left: var(--space-2, 0.5rem);
    padding-right: var(--space-2, 0.5rem);
  }
  
  /* Stack horizontal layouts */
  .d-flex:not(.flex-column),
  .flex-row {
    flex-direction: column !important;
  }
  
  /* Reduce spacing */
  .gap-4,
  .gap-6 {
    gap: var(--space-2, 0.5rem) !important;
  }
  
  /* Hide non-essential elements */
  .d-none-reflow {
    display: none !important;
  }
}

/* ============================================================
   SECTION 9: LIVE REGIONS & ANNOUNCEMENTS
   ============================================================ */

/* Screen reader announcement container */
.sr-announcements {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Status message styling (visible but also announced) */
.status-message[role="status"],
.alert[role="alert"] {
  position: relative;
}

/* Loading state announcements */
[aria-busy="true"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 10;
}

/* ============================================================
   SECTION 10: FORM ACCESSIBILITY ENHANCEMENTS
   ============================================================ */

/* Required field indicator */
.form-label .required-indicator,
.required-asterisk {
  color: var(--a11y-error-color);
  font-weight: bold;
  margin-left: var(--space-1, 0.25rem);
}

/* Form validation states */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: var(--a11y-error-color);
  border-width: 2px;
  background-image: none; /* Remove default icon, use custom */
}

.form-control.is-invalid:focus-visible,
.form-select.is-invalid:focus-visible {
  border-color: var(--a11y-error-color);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.2);
  outline-color: var(--a11y-error-color);
}

.form-control.is-valid,
.form-select.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid {
  border-color: var(--a11y-success-color);
  border-width: 2px;
}

/* Error message styling */
.invalid-feedback,
.field-validation-error {
  color: var(--a11y-error-color);
  font-weight: 500;
  font-size: var(--font-size-sm, 0.875rem);
  margin-top: var(--space-1, 0.25rem);
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
}

.invalid-feedback::before,
.field-validation-error::before {
  content: "⚠";
  font-size: 1em;
}

/* Form group with error */
.form-group.has-error .form-label {
  color: var(--a11y-error-color);
}

/* Input group accessibility */
.input-group {
  position: relative;
}

.input-group .form-control:focus-visible {
  z-index: 3;
}

/* ============================================================
   SECTION 11: TABLE ACCESSIBILITY
   ============================================================ */

/* Table caption styling */
.table caption {
  caption-side: top;
  padding: var(--space-3, 0.75rem);
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
}

/* Sortable table headers */
.table th[aria-sort] {
  cursor: pointer;
  user-select: none;
}

.table th[aria-sort]:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.table th[aria-sort]::after {
  content: " ↕";
  opacity: 0.5;
}

.table th[aria-sort="ascending"]::after {
  content: " ↑";
  opacity: 1;
}

.table th[aria-sort="descending"]::after {
  content: " ↓";
  opacity: 1;
}

/* Table row focus for keyboard navigation */
.table tbody tr[tabindex]:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: -2px;
}

/* ============================================================
   SECTION 12: MODAL & DIALOG ACCESSIBILITY
   ============================================================ */

/* Focus trap visual indicator */
.modal[aria-modal="true"] {
  outline: none;
}

.modal-dialog:focus-visible {
  outline: none;
}

/* Modal close button */
.modal .btn-close {
  min-height: var(--a11y-min-target-size);
  min-width: var(--a11y-min-target-size);
}

/* Dialog overlay */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

/* ============================================================
   SECTION 13: RESPONSIVE ACCESSIBILITY
   ============================================================ */

/* Touch device enhancements */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets on touch devices */
  .btn,
  .nav-link,
  .dropdown-item {
    min-height: 48px;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  }
  
  /* Remove hover-only effects */
  .card:hover,
  .btn:hover {
    transform: none;
  }
  
  /* Ensure tap highlight is visible */
  a,
  button,
  [role="button"] {
    -webkit-tap-highlight-color: rgba(0, 95, 204, 0.2);
  }
}

/* Print accessibility */
@media print {
  /* Ensure links show URLs */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }
  
  /* Don't print URLs for navigation links */
  nav a[href]::after,
  .btn[href]::after {
    content: none;
  }
  
  /* High contrast for printing */
  * {
    color: #000 !important;
    background: #fff !important;
  }
}

/* ============================================================
   SECTION 14: UTILITY CLASSES
   ============================================================ */

/* Focus management utilities */
.focus-trap {
  position: relative;
}

.focus-trap::before,
.focus-trap::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 1px;
}

/* Hide from everyone (including screen readers) */
.hidden,
[hidden] {
  display: none !important;
}

/* Visible only when focused */
.visible-on-focus {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.visible-on-focus:focus {
  position: relative;
  left: 0;
  opacity: 1;
}

/* Ensure icons are decorative by default */
.fa[aria-hidden="true"],
i[aria-hidden="true"],
svg[aria-hidden="true"] {
  pointer-events: none;
}

/* Text alternatives for icons */
.icon-with-text .fa,
.icon-with-text i {
  margin-right: var(--space-2, 0.5rem);
}

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

/* Disabled states */
[aria-disabled="true"],
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Current page/item indicator */
[aria-current="page"],
[aria-current="step"],
[aria-current="true"] {
  font-weight: 600;
}