/**
 * WCAG 2.1 AA TOUCH TARGET SIZE FIXES
 *
 * Ensures all interactive elements meet the minimum 44x44px touch target size
 * Reference: WCAG 2.1 Success Criterion 2.5.5 (Level AAA, but best practice for mobile)
 */

/* ================================
   BUTTON TOUCH TARGETS
   ================================ */

/* Ensure all buttons meet minimum touch target */
button,
.btn,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 10px 20px !important;
  line-height: 24px !important;
}

/* Primary action buttons - larger for emphasis */
.btn-primary,
.btn-action,
.btn-cta {
  min-height: 48px !important;
  padding: 12px 24px !important;
  font-size: 16px !important;
}

/* Icon-only buttons - ensure they're large enough */
button:has(i):not(:has(span)),
.btn-icon,
.icon-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Compact buttons (e.g., table actions) - still meet minimum */
.btn-sm,
.btn-compact {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
}

/* ================================
   FORM CONTROLS
   ================================ */

/* Input fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  min-height: 44px !important;
  padding: 10px 12px !important;
  font-size: 16px !important; /* Prevents iOS zoom on focus */
  line-height: 24px !important;
}

/* Select dropdowns */
select {
  min-height: 44px !important;
  padding-right: 36px !important; /* Space for dropdown arrow */
}

/* Checkboxes and radio buttons */
input[type="checkbox"],
input[type="radio"] {
  min-width: 24px !important;
  min-height: 24px !important;
  margin: 10px !important; /* Adds padding around for 44px touch area */
}

/* Checkbox/radio labels - expand clickable area */
.form-check,
.checkbox-wrapper,
.radio-wrapper {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 10px 0 !important;
}

.form-check-label,
label[for] {
  cursor: pointer;
  padding: 10px !important;
  margin: -10px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* File upload buttons */
input[type="file"] {
  min-height: 44px !important;
  padding: 10px !important;
}

/* ================================
   LINKS
   ================================ */

/* Ensure links have sufficient touch area */
a {
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 4px !important;
  margin: -10px -4px !important; /* Negative margin extends touch area without affecting layout */
}

/* Navigation links - larger touch area */
.nav-link,
.menu-link,
.sidebar-link {
  min-height: 48px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
}

/* Breadcrumb links */
.breadcrumb-item a {
  min-height: 32px !important;
  padding: 6px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ================================
   TABLE ACTIONS
   ================================ */

/* Action buttons in tables */
.table button,
.table .btn,
.table a.btn {
  min-height: 44px !important;
  min-width: 44px !important;
  margin: 2px !important;
}

/* Row actions - ensure sufficient spacing */
.table-actions,
.row-actions {
  display: flex !important;
  gap: 8px !important;
  padding: 4px !important;
}

/* ================================
   DROPDOWN & MENU ITEMS
   ================================ */

/* Dropdown menu items */
.dropdown-item,
.menu-item {
  min-height: 44px !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
}

/* Context menu items */
.context-menu-item {
  min-height: 44px !important;
  padding: 10px 16px !important;
}

/* ================================
   MODAL ACTIONS
   ================================ */

/* Modal buttons */
.modal-footer button,
.modal-footer .btn {
  min-height: 48px !important;
  min-width: 100px !important;
  padding: 12px 24px !important;
}

/* Modal close button */
.modal-close,
[data-dismiss="modal"],
.close {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ================================
   MOBILE MENU
   ================================ */

/* Hamburger menu button */
.mobile-menu-toggle,
.hamburger-menu,
.menu-toggle {
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Mobile navigation items */
.mobile-nav-item,
.mobile-menu-item {
  min-height: 56px !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
}

/* ================================
   FAB (Floating Action Button)
   ================================ */

.fab,
.floating-action-button {
  min-width: 56px !important;
  min-height: 56px !important;
  border-radius: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ================================
   PAGINATION
   ================================ */

.pagination .page-link,
.pagination button {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ================================
   TABS
   ================================ */

.nav-tabs .nav-link,
.tab-item,
.tab-button {
  min-height: 48px !important;
  padding: 12px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ================================
   CARDS & LIST ITEMS
   ================================ */

/* Clickable cards */
.card.clickable,
a.card,
button.card {
  min-height: 64px !important;
  padding: 16px !important;
}

/* List items */
.list-group-item,
.list-item {
  min-height: 48px !important;
  padding: 12px 16px !important;
}

/* ================================
   SLIDER & RANGE CONTROLS
   ================================ */

/* Range sliders */
input[type="range"] {
  min-height: 44px !important;
  padding: 10px 0 !important;
}

/* Slider thumb */
input[type="range"]::-webkit-slider-thumb {
  width: 28px !important;
  height: 28px !important;
}

input[type="range"]::-moz-range-thumb {
  width: 28px !important;
  height: 28px !important;
}

/* ================================
   TOGGLE SWITCHES
   ================================ */

.toggle-switch,
.switch {
  min-width: 50px !important;
  min-height: 28px !important;
  margin: 8px !important; /* Ensures 44px touch area */
}

.toggle-switch input[type="checkbox"] {
  min-width: 50px !important;
  min-height: 28px !important;
}

/* ================================
   ICON BUTTONS (Critical Fix)
   ================================ */

/* Edit, delete, view icons */
.btn-edit,
.btn-delete,
.btn-view,
.btn-download,
.btn-print,
.action-icon {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}

/* Three-dot menu (kebab menu) */
.dropdown-toggle,
.more-actions,
.kebab-menu {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 10px !important;
}

/* ================================
   RESPONSIVE ADJUSTMENTS
   ================================ */

/* Mobile devices - even larger touch targets */
@media (max-width: 768px) {
  button,
  .btn,
  [role="button"] {
    min-height: 48px !important;
    padding: 12px 20px !important;
  }

  input,
  select,
  textarea {
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }

  .nav-link,
  .menu-link {
    min-height: 56px !important;
    padding: 16px 20px !important;
  }
}

/* Tablet devices */
@media (min-width: 769px) and (max-width: 1024px) {
  button,
  .btn {
    min-height: 44px !important;
  }
}

/* ================================
   EXCEPTIONS (Where smaller is OK)
   ================================ */

/* Badges and labels (non-interactive) */
.badge:not([onclick]):not(button),
.label:not([onclick]):not(button),
.chip:not([onclick]):not(button) {
  min-height: auto !important;
  min-width: auto !important;
  padding: 4px 12px !important;
}

/* Decorative icons (not interactive) */
i:not(button i):not(.btn i):not([onclick]),
svg:not(button svg):not(.btn svg):not([onclick]) {
  min-width: auto !important;
  min-height: auto !important;
}

/* ================================
   ACCESSIBILITY NOTES
   ================================ */

/*
 * This CSS ensures WCAG 2.1 AA compliance for touch target sizes:
 * - Minimum 44x44px for all interactive elements
 * - Larger targets (48px+) for primary actions
 * - Sufficient spacing between adjacent targets
 * - Responsive adjustments for mobile devices
 *
 * Benefits:
 * - Easier tapping for users with motor impairments
 * - Reduced accidental clicks
 * - Better mobile user experience
 * - Improved accessibility for elderly users
 */