/* ==========================================================================
   Accessibility Enhancements - Focus Indicators & WCAG Compliance
   ========================================================================== */

/* 
 * Ensure all interactive elements have visible focus indicators
 * Meeting WCAG 2.1 AA requirements for focus visibility
 */

/* Universal focus indicator for all focusable elements */
*:focus-visible {
  outline: 2px solid var(--primary, #404041) !important;
  outline-offset: 2px !important;
  transition: outline-offset 0.1s ease-in-out;
}

/* Enhanced focus for form controls */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary, #404041) !important;
  box-shadow: 0 0 0 0.2rem rgba(64, 64, 65, 0.25) !important;
  outline: none; /* We're using box-shadow instead for better visual */
}

/* Focus for buttons */
.btn:focus,
.btn:focus-visible,
button:focus,
button:focus-visible,
[type="button"]:focus,
[type="submit"]:focus,
[type="reset"]:focus {
  outline: 2px solid var(--primary, #404041) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 0.2rem rgba(64, 64, 65, 0.25) !important;
}

/* Focus for links */
a:focus,
a:focus-visible {
  outline: 2px solid var(--primary, #404041) !important;
  outline-offset: 2px !important;
  text-decoration: underline !important;
}

/* Focus for navigation tabs */
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus-visible,
.nav-pills .nav-link:focus,
.nav-pills .nav-link:focus-visible {
  outline: 2px solid var(--primary, #404041) !important;
  outline-offset: -2px !important;
  box-shadow: inset 0 0 0 2px var(--primary, #404041) !important;
}

/* Focus for dropdown items */
.dropdown-item:focus,
.dropdown-item:focus-visible {
  background-color: var(--muted, #f8f9fa) !important;
  outline: 2px solid var(--primary, #404041) !important;
  outline-offset: -2px !important;
}

/* Focus for cards and clickable elements */
.card:focus-within {
  box-shadow: 0 0 0 3px rgba(64, 64, 65, 0.25) !important;
}

/* Focus for table rows (if clickable) */
tr[tabindex]:focus,
tr[tabindex]:focus-visible,
tbody tr:focus,
tbody tr:focus-visible {
  outline: 2px solid var(--primary, #404041) !important;
  outline-offset: -2px !important;
  background-color: rgba(64, 64, 65, 0.05) !important;
}

/* Focus for modal close buttons */
.btn-close:focus,
.modal-header button:focus {
  outline: 2px solid var(--primary, #404041) !important;
  outline-offset: 2px !important;
  opacity: 1 !important;
}

/* Focus for badges and pills */
.badge:focus,
.badge:focus-visible {
  outline: 2px solid var(--primary, #404041) !important;
  outline-offset: 1px !important;
}

/* Focus for file upload buttons */
input[type="file"]:focus + label,
input[type="file"]:focus-visible + label {
  outline: 2px solid var(--primary, #404041) !important;
  outline-offset: 2px !important;
}

/* Focus for color picker inputs */
input[type="color"]:focus,
input[type="color"]:focus-visible {
  outline: 2px solid var(--primary, #404041) !important;
  outline-offset: 2px !important;
}

/* Ensure focus is visible even on colored backgrounds */
.bg-primary *:focus,
.bg-secondary *:focus,
.bg-dark *:focus {
  outline-color: #ffffff !important;
}

/* Skip to main content link (for screen readers) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary, #404041);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 100000;
}

.skip-link:focus {
  top: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  *:focus-visible {
    outline-width: 3px !important;
  }
  
  .form-control:focus,
  .form-select:focus {
    border-width: 2px !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *:focus-visible {
    transition: none !important;
  }
}

/* Fix for specific problem areas identified in the review */

/* Portal management tabs focus */
#company-settings-tab:focus,
#manage-users-tab:focus,
#pbi-azure-connections-tab:focus,
#manage-colabs-tab:focus,
#custom-site-theme-tab:focus,
.nav-tabs button:focus {
  outline: 2px solid var(--primary, #404041) !important;
  outline-offset: -2px !important;
  background-color: rgba(64, 64, 65, 0.1) !important;
}

/* Table action buttons focus */
.table .btn:focus,
.table button:focus {
  outline: 2px solid var(--primary, #404041) !important;
  outline-offset: 1px !important;
}

/* Override any existing outline:none rules */
#edit-friendly-name-btn:focus,
#edit-friendly-name-btn:focus-visible,
#id_friendly_name:focus,
#friendly-name-group input:focus,
#friendly-name-group .form-control:focus {
  outline: 2px solid var(--primary, #404041) !important;
  outline-offset: 2px !important;
}

/* Ensure minimum touch target size for mobile */
@media (max-width: 768px) {
  button,
  .btn,
  a.btn,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .nav-link,
  .dropdown-item {
    min-height: 44px;
    min-width: 44px;
    padding: 10px;
  }
  
  /* Small buttons need special handling */
  .btn-sm {
    min-height: 36px;
    padding: 8px 12px;
  }
}

/* Focus indicator for HTMX-loaded content */
[hx-target]:focus,
[hx-get]:focus,
[hx-post]:focus {
  outline: 2px solid var(--primary, #404041) !important;
  outline-offset: 2px !important;
}

/* Improve focus visibility for custom checkboxes and radios */
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(64, 64, 65, 0.25) !important;
  border-color: var(--primary, #404041) !important;
}

/* Ensure disabled elements don't show focus */
:disabled:focus,
[disabled]:focus,
.disabled:focus {
  outline: none !important;
  box-shadow: none !important;
}