/* ========================================
   RESPONSIVE FIXES
   ========================================
   Note: `!important` usage is intentional and limited to the mobile sidebar
   + main content override cases where Tailwind utilities applied inline need
   to be forced. Structural selectors (IDs) do not use `!important` anymore —
   their specificity is already higher than any Tailwind class.
   S8.2: ID-level rules cleaned; utility overrides kept with !important. */

/* Use dynamic viewport height on supported browsers (fixes iOS Safari bottom bar) */
@supports (height: 100dvh) {
  html body .app-shell {
    height: calc(100dvh - 56px);
  }
}

/* Compact stat cards on small mobile */
@media (max-width: 639px) {
  .dashboard-block-stats .card.card-flat,
  .dashboard-block-stats .card.card-premium {
    padding: 0.75rem;
  }
}

/* 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) {
  /* CRITICAL: Hide sidebar nav container completely on mobile */
  #sidebar-nav {
    display: none !important;
    width: 0 !important;
    flex: 0 !important;
  }

  /* When sidebar is open, show it above content */
  aside.sidebar.open {
    display: flex !important;
    max-width: 85vw;
    width: var(--sidebar-width, 240px);
  }

  /* Ensure main content takes full width on mobile */
  /* The sidebar is fixed on mobile, so content should span full width */
  .app-shell {
    display: flex;
    flex-direction: row;
  }

  .app-shell > nav + div,
  .app-shell > aside + div,
  .app-shell > div[class*="flex-1"] {
    width: 100% !important;
    max-width: 100vw !important;
    flex: 1 1 100% !important;
    margin-left: 0 !important;
    min-width: 100vw !important;
  }

  /* 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;
  }

  /* Fix main content container on mobile.
     IDs have sufficient specificity — no !important needed. */
  main#main-content,
  body .main-content {
    width: 100%;
    max-width: 100vw;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Ensure all direct children of main content don't overflow */
  main#main-content > div,
  body .main-content > div {
    max-width: 100%;
  }

  /* Dashboard grid fixes for mobile. #dashboard-blocks selector targets the ID wrapper. */
  #dashboard-blocks .dashboard-grid,
  .dashboard-grid {
    width: 100%;
    max-width: 100vw;
    grid-template-columns: 1fr;
  }

  /* Ensure dashboard blocks don't overflow */
  [data-dashboard-customizer-target="block"] {
    max-width: 100% !important;
    width: 100% !important;
    grid-column: span 1 !important;
  }

  /* Critical fix: Force main content to left on mobile.
     ID selectors + body parent selector give enough specificity to drop !important. */
  body #main-content,
  body .main-content {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    text-align: left;
    width: 100vw;
    max-width: 100vw;
    min-width: 100vw;
    box-sizing: border-box;
  }

  /* Ensure all content inside main is left-aligned and full width */
  body #main-content > *,
  body .main-content > * {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  /* Fix for dashboard blocks */
  .dashboard-block,
  [data-dashboard-customizer-target="block"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
  }
}

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

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

/* 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;
  }
}

/* B20: Prevent iOS zoom on input focus */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* B21: Safe area insets for iPhones with notch */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .modal-bottom-sheet,
  .fixed-bottom-bar {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* 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);
  }
}

/* ====================================================================
   MOBILE TEXT OVERFLOW FIXES
   ==================================================================== */

@media (max-width: 640px) {
  /* Ensure all text containers handle overflow properly */
  .card-title,
  .card h3,
  .card h2,
  [data-dashboard-customizer-target="block"] h3,
  [data-dashboard-customizer-target="block"] h2 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Multi-line truncation for descriptions */
  .card p.text-secondary,
  [data-dashboard-customizer-target="block"] p.text-secondary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Smaller font sizes on mobile for dashboard blocks */
  [data-dashboard-customizer-target="block"] h2 {
    font-size: 1rem !important;
  }

  [data-dashboard-customizer-target="block"] h3 {
    font-size: 0.875rem !important;
  }

  [data-dashboard-customizer-target="block"] .text-sm {
    font-size: 0.75rem !important;
  }

  /* Ensure project titles in dashboard don't overflow */
  [data-dashboard-customizer-target="block"] .card-title {
    font-size: 0.875rem !important;
    line-height: 1.3;
  }

  /* Badge text size on mobile */
  .badge,
  [data-dashboard-customizer-target="block"] .badge {
    font-size: 0.625rem !important;
    padding: 0.125rem 0.375rem;
    white-space: nowrap;
  }

  /* Dashboard block content fixes */
  [data-dashboard-customizer-target="block"] .flex-1 {
    min-width: 0;
    overflow: hidden;
  }

  /* Ensure all links and spans truncate properly */
  [data-dashboard-customizer-target="block"] a,
  [data-dashboard-customizer-target="block"] span {
    max-width: 100%;
  }

  /* Fix for stats block large numbers */
  .dashboard-block-stats .text-2xl,
  .dashboard-block-stats .text-3xl {
    font-size: 1.25rem !important;
  }

  /* Card padding reduction on mobile */
  [data-dashboard-customizer-target="block"] .card {
    padding: 0.75rem;
  }

  /* Header bar adjustments */
  .block-header-bar {
    padding: 0.5rem 0.75rem;
  }

  .block-header-title {
    font-size: 0.75rem;
  }

  /* Fix for getting started block */
  #getting-started-checklist h3,
  #getting-started-checklist p {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Ensure project type badges don't overflow */
  .card-icon + div .badge {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Truncate utility for mobile */
  .mobile-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Dashboard greeting text */
  .dop-stagger h1 {
    font-size: 1.25rem !important;
  }

  /* Welcome hero adjustments */
  .welcome-hero h2 {
    font-size: 1.125rem !important;
  }

  .welcome-hero p {
    font-size: 0.75rem !important;
  }
}