/**
 * Focus-Visible Styles for Keyboard Accessibility
 * WCAG 2.1 Level AA Compliance - 2.4.7 Focus Visible
 * 
 * This stylesheet provides consistent, high-contrast focus indicators
 * for keyboard users while removing them for mouse users.
 * 
 * Implementation: Include this CSS in all base templates after other styles
 */

:root {
  /* Focus indicator colors - high contrast for visibility */
  --focus-color-primary: #2563eb;      /* Blue for primary actions */
  --focus-color-secondary: #7c3aed;    /* Purple for secondary actions */
  --focus-color-danger: #dc2626;       /* Red for destructive actions */
  --focus-color-success: #16a34a;      /* Green for success actions */
  --focus-color-light: #ffffff;        /* White for dark backgrounds */
  
  /* Focus indicator properties */
  --focus-width: 3px;
  --focus-offset: 2px;
  --focus-radius: 4px;
  --focus-style: solid;
}

/**
 * UNIVERSAL FOCUS RESET
 * Remove default focus for mouse users, keep for keyboard users
 */

/* Hide focus indicators for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Show focus indicators for keyboard users */
*:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color-primary);
  outline-offset: var(--focus-offset);
  transition: outline 0.15s ease, outline-offset 0.15s ease;
}

/**
 * LINKS - Standard and navigational links
 */
a:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color-primary);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
}

/* Links in navigation */
nav a:focus-visible,
.navbar a:focus-visible,
.sidebar a:focus-visible {
  outline-color: var(--focus-color-primary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Links that look like buttons */
a.btn:focus-visible,
a[role="button"]:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color-primary);
  outline-offset: 3px;
}

/**
 * BUTTONS - All button types and variations
 */

/* Primary buttons */
button:focus-visible,
.btn:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* Button variants */
.btn-primary:focus-visible {
  outline-color: var(--focus-color-primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.btn-success:focus-visible {
  outline-color: var(--focus-color-success);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.2);
}

.btn-danger:focus-visible,
.btn-delete:focus-visible {
  outline-color: var(--focus-color-danger);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.2);
}

.btn-secondary:focus-visible,
.btn-outline:focus-visible {
  outline-color: var(--focus-color-secondary);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15);
}

/* Icon-only buttons */
.btn-icon:focus-visible,
button[aria-label]:focus-visible {
  outline-width: 2px;
  outline-offset: 2px;
  border-radius: 50%;
}

/**
 * FORM INPUTS - Text fields, selects, textareas
 */

/* Text inputs */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
input[type="search"]:focus-visible,
input[type="number"]:focus-visible,
input[type="date"]:focus-visible,
textarea:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color-primary);
  outline-offset: 0px;
  border-color: var(--focus-color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Select dropdowns */
select:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color-primary);
  outline-offset: 0px;
  border-color: var(--focus-color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Form controls in Bootstrap */
.form-control:focus-visible,
.form-select:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color-primary);
  outline-offset: 0px;
  border-color: var(--focus-color-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

/**
 * CHECKBOXES AND RADIO BUTTONS
 */

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--focus-color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

/* Custom checkbox/radio containers */
.form-check-input:focus-visible {
  border-color: var(--focus-color-primary) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2) !important;
}

/**
 * CARDS AND INTERACTIVE CONTAINERS
 */

/* Clickable cards */
.card[tabindex]:focus-visible,
.card-link:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color-primary);
  outline-offset: 4px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

/* List items that are interactive */
.list-group-item-action:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color-primary);
  outline-offset: -2px;
  z-index: 2;
}

/**
 * NAVIGATION COMPONENTS
 */

/* Sidebar navigation items */
.sidebar-item:focus-visible,
.nav-item:focus-visible,
.menu-item:focus-visible {
  outline: 2px solid var(--focus-color-primary);
  outline-offset: 2px;
  background: rgba(37, 99, 235, 0.05);
}

/* Breadcrumbs */
.breadcrumb-item a:focus-visible {
  outline: 2px solid var(--focus-color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Tabs */
.nav-tabs .nav-link:focus-visible,
.nav-pills .nav-link:focus-visible {
  outline: var(--focus-width) solid var(--focus-color-primary);
  outline-offset: 2px;
  z-index: 2;
}

/**
 * TABLES AND DATA GRIDS
 */

/* Interactive table rows */
tr[role="button"]:focus-visible,
tr.clickable:focus-visible {
  outline: 2px solid var(--focus-color-primary);
  outline-offset: -2px;
  background: rgba(37, 99, 235, 0.05);
}

/* Table action buttons */
table button:focus-visible,
table a:focus-visible {
  outline-width: 2px;
  outline-offset: 2px;
}

/**
 * MODALS AND DIALOGS
 */

/* Modal close button */
.modal .btn-close:focus-visible,
.modal .close:focus-visible {
  outline: 2px solid var(--focus-color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

/* Modal itself when focused */
.modal-content:focus-visible {
  outline: var(--focus-width) solid var(--focus-color-primary);
  outline-offset: 4px;
}

/**
 * DROPDOWNS AND MENUS
 */

/* Dropdown toggles */
.dropdown-toggle:focus-visible {
  outline: var(--focus-width) solid var(--focus-color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

/* Dropdown menu items */
.dropdown-item:focus-visible {
  outline: 2px solid var(--focus-color-primary);
  outline-offset: -2px;
  background: rgba(37, 99, 235, 0.1);
}

/**
 * BADGES AND TAGS
 */

/* Interactive badges */
.badge[tabindex]:focus-visible,
a.badge:focus-visible {
  outline: 2px solid var(--focus-color-primary);
  outline-offset: 2px;
}

/**
 * PAGINATION
 */

.pagination .page-link:focus-visible {
  outline: 2px solid var(--focus-color-primary);
  outline-offset: 2px;
  z-index: 3;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

/**
 * SEARCH AND FILTERS
 */

/* Search inputs */
.search-input:focus-visible,
input[type="search"]:focus-visible {
  outline: var(--focus-width) solid var(--focus-color-primary);
  outline-offset: 0px;
  border-color: var(--focus-color-primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

/* Filter buttons */
.filter-btn:focus-visible,
.filter-option:focus-visible {
  outline: 2px solid var(--focus-color-primary);
  outline-offset: 2px;
}

/**
 * CUSTOM COMPONENTS
 */

/* Notification bell */
.notification-bell:focus-visible,
.notification-icon:focus-visible {
  outline: 2px solid var(--focus-color-primary);
  outline-offset: 3px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

/* Profile dropdown */
.profile-menu:focus-visible,
.user-avatar:focus-visible {
  outline: 2px solid var(--focus-color-primary);
  outline-offset: 3px;
  border-radius: 50%;
}

/* Toggle switches */
.toggle-switch:focus-visible,
input[type="checkbox"].toggle:focus-visible {
  outline: 2px solid var(--focus-color-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

/* File upload areas */
.file-upload:focus-visible,
input[type="file"]:focus-visible {
  outline: 3px dashed var(--focus-color-primary);
  outline-offset: 4px;
}

/**
 * DASHBOARD-SPECIFIC COMPONENTS
 */

/* Dashboard cards */
.dashboard-card:focus-visible {
  outline: var(--focus-width) solid var(--focus-color-primary);
  outline-offset: 3px;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15);
}

/* Stat cards */
.stat-card:focus-visible {
  outline: 2px solid var(--focus-color-primary);
  outline-offset: 3px;
}

/* Action tiles */
.action-tile:focus-visible {
  outline: var(--focus-width) solid var(--focus-color-primary);
  outline-offset: 4px;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2);
}

/**
 * DARK BACKGROUNDS
 * Use light focus indicators on dark backgrounds
 */

/* Dark sidebars */
.sidebar-dark a:focus-visible,
.sidebar-dark button:focus-visible,
.bg-dark *:focus-visible {
  outline-color: var(--focus-color-light);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

/* Dark headers */
.header-dark *:focus-visible,
.navbar-dark *:focus-visible {
  outline-color: var(--focus-color-light);
}

/**
 * SKIP LINKS
 * Already implemented but included for completeness
 */

.skip-to-content:focus-visible {
  outline: 3px solid var(--focus-color-light);
  outline-offset: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/**
 * SPECIAL CASES
 */

/* Remove focus from non-interactive elements */
div:focus-visible:not([tabindex]),
span:focus-visible:not([tabindex]),
p:focus-visible:not([tabindex]) {
  outline: none;
}

/* Ensure disabled elements don't show focus */
:disabled:focus-visible,
[aria-disabled="true"]:focus-visible {
  outline: none;
  cursor: not-allowed;
}

/**
 * HIGH CONTRAST MODE SUPPORT
 * Ensures focus indicators are visible in Windows High Contrast Mode
 */

@media (prefers-contrast: high) {
  *:focus-visible {
    outline-width: 4px;
    outline-offset: 3px;
  }
  
  button:focus-visible,
  .btn:focus-visible {
    outline-width: 4px;
  }
}

/**
 * REDUCED MOTION SUPPORT
 * Remove transitions for users who prefer reduced motion
 */

@media (prefers-reduced-motion: reduce) {
  *:focus-visible {
    transition: none;
  }
}

/**
 * PRINT STYLES
 * Remove focus indicators from printed pages
 */

@media print {
  *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
}