/* ========================================
   RESPONSIVE FIXES
   ======================================== */

/* Prevent horizontal scroll globally */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Main content container */
.main-content {
  max-width: 100%;
  overflow-x: hidden;
}

/* Mobile-specific fixes */
@media (max-width: 1023px) {
  /* Sidebar max width on mobile */
  .sidebar {
    max-width: 85vw;
  }

  /* Ensure cards don't overflow */
  .card {
    max-width: 100%;
    word-break: break-word;
  }

  /* Fix filter tabs horizontal scroll */
  .filter-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .filter-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Content padding adjustments */
  .content-padding {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Page title styling */
.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .page-title {
    font-size: 1.875rem;
  }
}

/* Page header section */
.page-header {
  padding: 1.25rem 1rem;
}

@media (min-width: 1024px) {
  .page-header {
    padding: 1.5rem 1.5rem;
  }
}

@media (min-width: 1280px) {
  .page-header {
    padding: 1.5rem 2rem;
  }
}


/* ====================================================================
   MOBILE TOUCH TARGETS - Phase 1.5
   ==================================================================== */

/*
  WCAG 2.1 Success Criterion 2.5.5 (Level AAA):
  Touch targets should be at least 44x44 CSS pixels (or 48x48 for Level AAA).

  This ensures comfortable tapping on mobile devices and improves accessibility
  for users with motor impairments, older users, and users with larger fingers.
*/

@media (max-width: 640px) {
  /* Buttons - Ensure minimum touch target size */
  .btn,
  button[type="submit"],
  button[type="button"],
  a.btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-ghost,
  .btn-accent {
    min-height: 44px;
    min-width: 44px;
    padding-top: 0.625rem; /* 10px */
    padding-bottom: 0.625rem; /* 10px */
  }

  /* Small buttons get adjusted to meet minimum */
  .btn-sm {
    min-height: 44px;
    padding-top: 0.75rem; /* 12px */
    padding-bottom: 0.75rem; /* 12px */
  }

  /* Form inputs - Ensure comfortable tap targets */
  .form-input,
  .form-textarea,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    min-height: 44px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  /* Textareas maintain their rows but ensure tap target height */
  textarea.form-textarea {
    min-height: 88px; /* At least 2 lines */
  }

  /* Checkboxes and Radio Buttons */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
    /* Ensure parent label provides 44px touch target */
  }

  /* Labels for checkboxes/radios should be tappable */
  label:has(input[type="checkbox"]),
  label:has(input[type="radio"]) {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    margin: -0.5rem; /* Negative margin to maintain spacing */
  }

  /* Links - Especially important for nav and action links */
  a:not(.btn) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Icon-only buttons need extra care */
  button:has(svg:only-child),
  a:has(svg:only-child) {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
  }

  /* Dropdown triggers */
  .dropdown-trigger,
  [data-action*="click->modal#"],
  [data-action*="click->dropdown#"] {
    min-height: 44px;
    min-width: 44px;
    padding: 0.625rem;
  }

  /* Tab navigation */
  .tab,
  [role="tab"],
  button[role="tab"] {
    min-height: 44px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  /* Pagination buttons */
  .pagination button,
  .pagination a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Close buttons in modals/alerts */
  .modal-close,
  .alert-close,
  .flash-message-close,
  button[aria-label*="Close"],
  button[aria-label*="Fermer"] {
    min-width: 44px;
    min-height: 44px;
    padding: 0.625rem;
  }

  /* Card/List item actions */
  .card-action,
  .list-item-action {
    min-height: 44px;
    padding: 0.625rem;
  }

  /* Floating Action Button */
  .fab {
    min-width: 56px;
    min-height: 56px;
  }

  /* Ensure adequate spacing between touch targets */
  .btn + .btn,
  button + button,
  a.btn + a.btn {
    margin-left: 0.5rem; /* 8px spacing between buttons */
  }

  /* Vertical button groups */
  .btn-group-vertical .btn,
  .btn-group-vertical button {
    margin-bottom: 0.5rem;
  }

  /* File inputs - Make label the touch target */
  input[type="file"] + label,
  label:has(input[type="file"]) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1rem;
  }

  /* Range sliders */
  input[type="range"] {
    min-height: 44px;
    cursor: pointer;
  }

  /* Toggle switches */
  .toggle,
  .switch,
  [role="switch"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Tablet breakpoint - slightly relaxed but still accessible */
@media (min-width: 641px) and (max-width: 1024px) {
  .btn-sm,
  button.btn-sm {
    min-height: 40px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }
}

/* Accessibility: Focus visible for keyboard navigation */
@media (max-width: 640px) {
  *:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }

  /* Ensure focus is visible even on dark backgrounds */
  .bg-flowayz-navy *:focus-visible,
  .bg-accent *:focus-visible,
  [data-mode="dark"] *:focus-visible {
    outline-color: rgba(255, 255, 255, 0.8);
  }
}