/* Touch Target Improvements - Mobile Accessibility */
/* Minimum 44px touch targets for mobile devices */

/* Apply only on touch devices */
@media (pointer: coarse) {
  
  /* ========== BUTTONS ========== */
  .btn,
  button:not(.toggle-slider):not(.config-tab),
  [role="button"],
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-danger,
  .config-btn,
  .action-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.625rem 1rem;
  }
  
  /* Small buttons get bigger on touch */
  .btn-sm,
  .btn-icon {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem;
  }
  
  /* Icon-only buttons */
  .btn-icon-only,
  .icon-btn,
  button[aria-label]:not([aria-label=""]) {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ========== TOGGLE SWITCHES ========== */
  .toggle-switch,
  .inline-toggle,
  label.toggle {
    min-height: 44px;
    min-width: 52px;
    display: flex;
    align-items: center;
  }
  
  .toggle-switch input,
  .inline-toggle input {
    /* Increase touch area */
    position: absolute;
    width: 52px;
    height: 44px;
    opacity: 0;
    cursor: pointer;
  }
  
  .toggle-slider,
  .inline-toggle-slider {
    /* Scale up slightly */
    transform: scale(1.1);
    transform-origin: center;
  }

  /* ========== CHECKBOXES & RADIOS ========== */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
    cursor: pointer;
  }
  
  /* Checkbox/radio labels need bigger touch area */
  label:has(input[type="checkbox"]),
  label:has(input[type="radio"]),
  .checkbox-item,
  .radio-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    cursor: pointer;
  }

  /* ========== FORM INPUTS ========== */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select,
  .form-input,
  .form-select,
  .form-textarea {
    min-height: 44px;
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 0.625rem 0.875rem;
  }
  
  /* Textareas can be taller */
  textarea,
  .form-textarea {
    min-height: 88px;
  }

  /* ========== DROPDOWN TRIGGERS ========== */
  .dropdown-trigger,
  .select-trigger,
  [data-dropdown],
  .enhanced-dropdown-trigger {
    min-height: 44px;
    padding: 0.625rem 1rem;
  }

  /* ========== TABS ========== */
  .tab,
  .tab-btn,
  .config-tab,
  [role="tab"] {
    min-height: 44px;
    padding: 0.625rem 1rem;
  }

  /* ========== NAV LINKS ========== */
  .nav-link,
  .sidebar-link,
  .menu-item,
  nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
  }

  /* ========== MODULE CARDS ========== */
  .module-item,
  .module-card {
    /* Ensure action area is touchable */
    padding: 1rem;
  }
  
  .module-item .config-btn,
  .module-card .config-btn {
    min-height: 44px;
    min-width: 100px;
  }

  /* ========== CLOSE/DISMISS BUTTONS ========== */
  .close-btn,
  .dismiss-btn,
  .modal-close,
  [aria-label="Close"],
  [aria-label="Dismiss"] {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ========== SLIDERS/RANGE ========== */
  input[type="range"] {
    min-height: 44px;
    cursor: pointer;
  }
  
  input[type="range"]::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
  }
  
  input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }

  /* ========== EMOJI/ICON PICKERS ========== */
  .emoji-btn,
  .emoji-picker-item,
  .icon-picker-item {
    min-height: 44px;
    min-width: 44px;
  }

  /* ========== PAGINATION ========== */
  .pagination a,
  .pagination button,
  .page-link {
    min-height: 44px;
    min-width: 44px;
  }

  /* ========== CARDS WITH CLICK ACTIONS ========== */
  .clickable-card,
  .stat-card[onclick],
  .panel-card[onclick] {
    cursor: pointer;
  }

  /* ========== SPACING BETWEEN TOUCH TARGETS ========== */
  .btn + .btn,
  button + button {
    margin-left: 0.5rem;
  }
  
  .btn-group {
    gap: 0.5rem;
  }
}

/* Also apply to any device with hover: none (touch-only) */
@media (hover: none) {
  /* Remove hover states that might confuse touch users */
  .btn:hover,
  button:hover {
    /* Keep pressed state instead */
  }
  
  /* Add active states for better touch feedback */
  .btn:active,
  button:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}