/**
 * FleetFlot - Responsive Fixes CSS
 * Corrections globales pour tous les problemes responsive identifies
 * Date: 2026-01-11
 */

/* ============================================
   BREAKPOINTS STANDARDS
   - xs: < 480px (tres petit mobile)
   - sm: 480-575px (petit mobile)
   - md: 576-767px (mobile)
   - lg: 768-991px (tablette)
   - xl: 992-1199px (desktop)
   - xxl: >= 1200px (grand ecran)
   ============================================ */

/* ============================================
   1. GRILLES - CORRECTIONS MOBILE
   ============================================ */

/* Landing page grids - mobile first */
@media (max-width: 767px) {
  .problem-grid,
  .solution-grid,
  .steps-grid,
  .network-grid,
  .vehicles-grid,
  .modes-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .hero-features {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .app-features-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

@media (max-width: 575px) {
  .hero-features {
    grid-template-columns: 1fr !important;
  }
}

/* Dashboard grids */
@media (max-width: 767px) {
  .admin-stats-grid,
  .stats-grid,
  .location-info-row,
  .documents-upload-grid,
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .ecom-fleet-cards-grid,
  .ecom-delivery-address-grid {
    grid-template-columns: 1fr !important;
  }
}

/* E-commerce grids */
@media (max-width: 639px) {
  .ecom-duration-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 479px) {
  .ecom-duration-grid {
    grid-template-columns: 1fr !important;
  }

  .ecom-guarantees-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   2. PADDING / MARGIN REDUCTIONS MOBILE
   ============================================ */

@media (max-width: 575px) {
  /* Hero section */
  .hero-content {
    padding: 0 1rem !important;
    padding-top: 60px !important;
  }

  /* Section padding */
  .section {
    padding: 3rem 0 !important;
  }

  /* Container padding */
  .container {
    padding-inline: 1rem !important;
  }

  /* Card padding */
  .card-solution,
  .card-hover,
  .app-feature-card,
  .network-card {
    padding: 1.25rem !important;
  }

  /* E-commerce header */
  .ecom-header-sticky {
    padding: 12px 16px !important;
  }
}

@media (max-width: 479px) {
  /* Auth container */
  .auth-container {
    padding: 24px 16px !important;
    max-width: 100% !important;
    margin: 10px !important;
  }

  /* Modal containers */
  .modal-container,
  .modal-content {
    max-width: 95vw !important;
    margin: 10px auto !important;
    padding: 1.25rem !important;
  }
}

/* ============================================
   3. TYPOGRAPHY RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
  /* Section titles */
  .section-title,
  h1.section-title {
    font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }

  .section-subtitle {
    font-size: 0.95rem !important;
  }

  /* Hero text */
  .hero-title {
    font-size: clamp(1.75rem, 7vw, 3.5rem) !important;
  }

  .hero-subtitle {
    font-size: 1rem !important;
  }
}

@media (max-width: 479px) {
  .hero-title {
    font-size: clamp(1.5rem, 8vw, 2rem) !important;
  }

  h2, .h2 {
    font-size: 1.25rem !important;
  }

  h3, .h3 {
    font-size: 1.1rem !important;
  }
}

/* ============================================
   4. TABLES RESPONSIVE
   ============================================ */

/* Table wrapper pour scroll horizontal */
.table-wrapper,
.comparison-table-wrapper,
.admin-table-wrapper {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 767px) {
  .comparison-table,
  .admin-table,
  table {
    font-size: 0.85rem !important;
    min-width: 500px;
  }

  .comparison-table th,
  .comparison-table td,
  .admin-table th,
  .admin-table td {
    padding: 8px 6px !important;
    white-space: nowrap;
  }
}

/* ============================================
   5. IMAGES RESPONSIVE
   ============================================ */

img {
  max-width: 100%;
  height: auto;
}

.entreprise-benefit-icon-image,
.modal-image-preview,
.product-image,
.vehicle-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 767px) {
  .entreprise-benefit-icon-image {
    max-width: 250px !important;
  }
}

/* ============================================
   6. DECORATEURS - MASQUER SUR MOBILE
   ============================================ */

@media (max-width: 767px) {
  .decoration-blur,
  .decoration-blur-primary,
  .decoration-blur-accent,
  .floating-scooter {
    display: none !important;
  }
}

/* ============================================
   7. FLEX CONTAINERS - FIX OVERFLOW
   ============================================ */

/* Fix pour les flex containers avec min-width */
@media (max-width: 479px) {
  [style*="min-width: 200px"],
  [style*="min-width:200px"],
  [style*="min-width: 150px"],
  [style*="min-width:150px"] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Flex wrap forcé sur mobile */
@media (max-width: 575px) {
  .flex-row-mobile-wrap {
    flex-wrap: wrap !important;
  }

  .fleet-info-container,
  .partner-info-container {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ============================================
   8. MAP CONTAINERS RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
  .partner-map-container,
  .partner-shops-map-container,
  .map-container {
    height: 300px !important;
  }
}

@media (max-width: 479px) {
  .partner-map-container,
  .partner-shops-map-container,
  .map-container {
    height: 250px !important;
  }
}

/* ============================================
   9. BUTTONS RESPONSIVE
   ============================================ */

@media (max-width: 479px) {
  .btn,
  .ecom-btn,
  button {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
  }

  /* Boutons full width sur tres petit ecran */
  .btn-full-mobile {
    width: 100% !important;
  }
}

/* ============================================
   10. STORE BADGES RESPONSIVE
   ============================================ */

@media (max-width: 479px) {
  .store-badge-official {
    min-width: 160px !important;
    padding: 0.75rem 1.25rem !important;
  }

  .store-badge-official i {
    font-size: 1.75rem !important;
  }

  .store-badge-official .store-badge-large {
    font-size: 1rem !important;
  }
}

/* ============================================
   11. MODAL / DIALOG RESPONSIVE
   ============================================ */

@media (max-width: 575px) {
  .modal,
  .modal-container,
  [class*="modal"] {
    max-width: 95vw !important;
    margin: 0 auto !important;
  }

  .modal-body,
  .modal-content {
    padding: 1rem !important;
  }
}

/* ============================================
   12. FORMS RESPONSIVE
   ============================================ */

@media (max-width: 575px) {
  .form-group,
  .ecom-form-group {
    margin-bottom: 1rem !important;
  }

  input,
  select,
  textarea {
    font-size: 16px !important; /* Prevent iOS zoom */
  }

  .admin-select-filter,
  select[style*="min-width"] {
    min-width: 100% !important;
    width: 100% !important;
  }
}

/* ============================================
   13. SIDEBAR MOBILE
   ============================================ */

@media (max-width: 991px) {
  .dashboard-sidebar,
  .sidebar {
    position: fixed !important;
    left: -280px !important;
    z-index: 1000 !important;
    transition: left 0.3s ease !important;
  }

  .dashboard-sidebar.open,
  .sidebar.open {
    left: 0 !important;
  }

  .dashboard-main,
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ============================================
   14. AVATARS RESPONSIVE
   ============================================ */

@media (max-width: 479px) {
  .avatar-circle,
  [style*="width: 80px"][style*="height: 80px"],
  [style*="width:80px"][style*="height:80px"] {
    width: 60px !important;
    height: 60px !important;
  }

  [style*="width: 64px"],
  [style*="width:64px"] {
    width: 48px !important;
    height: 48px !important;
  }
}

/* ============================================
   15. FOOTER RESPONSIVE
   ============================================ */

@media (max-width: 575px) {
  .footer-content {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .footer-links {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .footer-social {
    justify-content: center !important;
  }
}

/* ============================================
   16. UTILITY CLASSES RESPONSIVE
   ============================================ */

/* Hide on mobile */
@media (max-width: 767px) {
  .hide-mobile,
  .d-none-mobile {
    display: none !important;
  }
}

/* Hide on desktop */
@media (min-width: 768px) {
  .hide-desktop,
  .d-none-desktop {
    display: none !important;
  }
}

/* Full width on mobile */
@media (max-width: 575px) {
  .w-100-mobile {
    width: 100% !important;
  }
}

/* Text center on mobile */
@media (max-width: 575px) {
  .text-center-mobile {
    text-align: center !important;
  }
}

/* ============================================
   17. MOBILE UX ENHANCEMENTS
   ============================================ */

/* Smooth scrolling global */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Touch-friendly tap highlights */
@media (max-width: 991px) {
  a, button, [role="button"] {
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.2);
  }
}

/* Improved touch targets on mobile */
@media (max-width: 767px) {
  /* Boutons plus grands et espacés */
  .btn, button {
    min-height: 48px !important;
    padding: 14px 20px !important;
  }

  /* Navigation sticky plus accessible */
  .header-clean, header {
    padding: 12px 16px !important;
  }

  /* Cards cliquables plus accessibles */
  .mode-card, .card-solution, .card-problem {
    padding: 1.25rem !important;
  }

  /* FAQ items avec zone de tap élargie */
  .faq-question-lovable {
    padding: 1.25rem !important;
    min-height: 56px;
  }

  /* Hero features spacing amélioré */
  .hero-features {
    gap: 12px !important;
    padding: 0 8px;
  }

  .hero-feature {
    padding: 12px 8px !important;
    min-height: 70px;
  }
}

/* Very small screens (< 400px) */
@media (max-width: 400px) {
  .hero-features {
    grid-template-columns: 1fr 1fr !important;
  }

  .feature-value {
    font-size: 1.1rem !important;
  }

  .feature-label {
    font-size: 0.7rem !important;
  }

  /* Dashboard containers padding */
  .dashboard-main .container {
    padding-inline: 8px !important;
  }

  /* Cards padding reduction */
  .section-card-premium,
  .profile-section,
  .location-card,
  .intervention-card {
    padding: 12px !important;
  }

  /* Stat cards grid */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .stat-card {
    padding: 10px !important;
  }

  .stat-value {
    font-size: 1.5rem !important;
  }

  .stat-label {
    font-size: 0.7rem !important;
  }

  /* Welcome banner compact */
  .welcome-banner-premium {
    padding: 16px 12px !important;
  }

  .welcome-banner-title-premium {
    font-size: 1.1rem !important;
  }

  .welcome-banner-subtitle-premium {
    font-size: 0.8rem !important;
  }
}

/* ============================================
   18. ANIMATIONS - REDUCE ON MOBILE
   ============================================ */

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .floating-scooter,
  [data-parallax] {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================
   18. OVERFLOW PREVENTION
   ============================================ */

html, body {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
}

/* Prevent horizontal scroll but allow vertical */
.container,
main {
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Sections should not create scroll contexts */
section {
  max-width: 100vw;
  overflow: visible;
}

/* Prevent horizontal scroll from absolute elements */
[style*="left: -"],
[style*="right: -"] {
  overflow: hidden;
}

/* ============================================
   19. SAFE AREA (NOTCH) SUPPORT
   ============================================ */

@supports (padding: env(safe-area-inset-bottom)) {
  .bottom-bar,
  .fixed-bottom,
  footer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  }
}

/* ============================================
   20. TOUCH TARGETS - ACCESSIBILITY
   ============================================ */

@media (max-width: 767px) {
  /* Minimum touch target 44x44px */
  a,
  button,
  [role="button"],
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Exception pour les liens inline */
  p a,
  li a,
  span a {
    min-height: auto;
    min-width: auto;
  }
}

/* ============================================
   21. ADMIN PANEL - TABLES RESPONSIVE
   Mode LISTE (tableau) - JAMAIS de scroll horizontal
   ============================================ */

/* Container de table - PAS de scroll horizontal */
.admin-table-container {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  width: 100%;
  max-width: 100%;
}

/* Table en mode liste classique */
.admin-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* Header du tableau visible */
.admin-table thead {
  display: table-header-group;
}

.admin-table thead th {
  padding: 12px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #666);
  border-bottom: 2px solid var(--border-default, #e5e7eb);
  white-space: nowrap;
  text-align: left;
}

/* Lignes du tableau */
.admin-table tbody tr {
  display: table-row;
  border-bottom: 1px solid var(--border-default, #e5e7eb);
  transition: background 0.2s ease;
}

.admin-table tbody tr:hover {
  background: rgba(212, 175, 55, 0.05);
}

/* Cellules du tableau */
.admin-table tbody td {
  display: table-cell;
  padding: 12px 8px;
  vertical-align: middle;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Colonnes avec largeurs adaptatives */
.admin-table th:first-child,
.admin-table td:first-child {
  width: 20%;
  min-width: 120px;
}

/* Colonne Actions - largeur fixe pour les boutons */
.admin-table th:last-child,
.admin-table td:last-child {
  width: auto;
  min-width: 180px;
  text-align: right;
  padding-right: 12px;
}

/* Boutons d'action - toujours visibles */
.admin-action-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.admin-action-btn {
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  border-radius: 10px !important;
}

/* Sur ecrans < 1400px : masquer certaines colonnes moins importantes */
@media (max-width: 1400px) {
  .admin-table th[data-hide-lg],
  .admin-table td[data-label="Facture"],
  .admin-table td[data-label="Intervention"] {
    display: none;
  }
}

/* Sur ecrans < 1100px : masquer plus de colonnes */
@media (max-width: 1100px) {
  .admin-table td[data-label="Commande"],
  .admin-table td[data-label="Stock"],
  .admin-table td[data-label="Prix location"] {
    display: none;
  }

  .admin-table th,
  .admin-table td {
    padding: 10px 6px;
    font-size: 0.8rem;
  }

  .admin-action-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 12px !important;
  }
}

/* Sur ecrans < 900px : mode carte pour mobile */
@media (max-width: 900px) {
  .admin-table thead {
    display: none;
  }

  .admin-table tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border-default, #e5e7eb);
    border-radius: 12px;
    padding: 12px;
    background: var(--bg-surface, #fff);
  }

  .admin-table tbody td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-default, #e5e7eb);
  }

  .admin-table tbody td:last-child {
    border-bottom: none;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid var(--border-default, #e5e7eb);
    justify-content: center;
  }

  .admin-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-secondary, #666);
    font-size: 0.7rem;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-right: 12px;
  }

  .admin-table tbody td:last-child::before {
    display: none;
  }

  /* Rendre toutes les colonnes visibles en mode carte */
  .admin-table td[data-label="Facture"],
  .admin-table td[data-label="Intervention"],
  .admin-table td[data-label="Commande"],
  .admin-table td[data-label="Stock"],
  .admin-table td[data-label="Prix location"] {
    display: flex !important;
  }

  .admin-action-buttons {
    justify-content: center !important;
    width: 100%;
  }

  .admin-action-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 14px !important;
  }
}

/* ============================================
   22. ADMIN SEARCH BAR RESPONSIVE
   ============================================ */

.admin-search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-search-bar input,
.admin-search-bar select {
  flex: 1 1 200px;
  min-width: 0;
  height: 44px;
}

@media (max-width: 768px) {
  .admin-search-bar {
    flex-direction: column;
  }

  .admin-search-bar input,
  .admin-search-bar select {
    width: 100%;
    flex: none;
  }
}

/* ============================================
   23. ADMIN TABS RESPONSIVE
   ============================================ */

.tabs-lovable {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 8px;
  padding: 8px 16px;
}

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

.tab-lovable {
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 44px;
  padding: 10px 16px;
}

@media (max-width: 768px) {
  .tab-lovable {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .tab-lovable i {
    display: none;
  }
}

/* Ultra-small screens: Samsung Galaxy Z Fold folded mode (~280-360px) */
@media (max-width: 400px) {
  .tabs-lovable {
    gap: 4px;
    padding: 6px 8px;
  }

  .tab-lovable {
    padding: 6px 8px;
    font-size: 0.7rem;
    min-height: 36px;
    border-radius: 8px !important;
  }
}

@media (max-width: 320px) {
  .tabs-lovable {
    gap: 2px;
    padding: 4px 4px;
  }

  .tab-lovable {
    padding: 5px 6px;
    font-size: 0.65rem;
    min-height: 32px;
  }
}

/* ============================================
   24. ADMIN STATS CARDS RESPONSIVE
   ============================================ */

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

@media (max-width: 640px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .admin-stat-card {
    padding: 12px;
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .admin-stat-icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  .admin-stat-value {
    font-size: 1.75rem;
  }

  .admin-stat-label {
    font-size: 0.7rem;
  }
}

@media (max-width: 400px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }

  .admin-stat-card {
    flex-direction: row;
    text-align: left;
  }
}

/* ============================================
   25. ADMIN MODALS RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .dashboard-page .modal .modal-content {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 40px) !important;
    margin: 10px !important;
  }

  .dashboard-page .modal .modal-content.modal-large {
    max-width: calc(100vw - 20px) !important;
  }

  .dashboard-page .modal .modal-body {
    padding: 16px !important;
    max-height: calc(100vh - 160px) !important;
  }

  .dashboard-page .modal .modal-header h2 {
    font-size: 1.1rem;
  }
}

/* ============================================
   26. FLEET MANAGEMENT RESPONSIVE
   ============================================ */

/* Grille 2 colonnes vehicules/membres */
.fleet-manage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 1024px) {
  .fleet-manage-grid {
    grid-template-columns: 1fr;
  }
}

/* Cards de vehicules/membres dans les flottes */
.fleet-vehicle-card,
.fleet-member-card {
  padding: 16px;
}

@media (max-width: 640px) {
  .fleet-vehicle-card,
  .fleet-member-card {
    padding: 12px;
  }

  .fleet-vehicle-card .vehicle-actions,
  .fleet-member-card .member-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .fleet-vehicle-card .vehicle-actions .btn,
  .fleet-member-card .member-actions .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 10px 12px;
    font-size: 0.8rem;
  }
}

/* Header de section flottes */
.section-header-premium {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

@media (max-width: 768px) {
  .section-header-premium {
    flex-direction: column;
    align-items: stretch;
  }

  .section-header-premium .btn-premium {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   27. E-COMMERCE RESPONSIVE FIXES
   ============================================ */

/* Tunnel de commande */
.ecom-step-content {
  padding: 16px;
}

@media (max-width: 768px) {
  .ecom-step-content {
    padding: 12px;
  }

  .ecom-cart-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .ecom-cart-item-image {
    width: 100%;
    height: 150px;
  }

  .ecom-cart-item-info {
    width: 100%;
  }

  .ecom-cart-item-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* Grille de durees */
.ecom-duration-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .ecom-duration-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ecom-duration-grid {
    grid-template-columns: 1fr;
  }
}

/* Boutons de duree */
.ecom-duration-btn {
  min-height: 80px;
  padding: 16px 12px;
}

@media (max-width: 640px) {
  .ecom-duration-btn {
    min-height: 70px;
    padding: 12px 10px;
  }

  .ecom-duration-btn .duration-months {
    font-size: 1.25rem;
  }

  .ecom-duration-btn .duration-price {
    font-size: 0.9rem;
  }
}

/* ============================================
   28. PROFILE SECTION RESPONSIVE
   ============================================ */

.profile-section {
  padding: 24px;
}

@media (max-width: 768px) {
  .profile-section {
    padding: 16px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .security-actions {
    grid-template-columns: 1fr;
  }

  .security-action-card {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 16px;
  }
}

/* ============================================
   29. LOCATIONS CARDS RESPONSIVE
   ============================================ */

.location-card {
  padding: 20px;
}

@media (max-width: 768px) {
  .location-card {
    padding: 16px;
  }

  .location-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .location-badges {
    width: 100%;
    justify-content: flex-start;
  }

  .location-info-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .location-card-footer {
    flex-direction: column;
  }

  .location-card-footer .btn {
    width: 100%;
  }
}

/* ============================================
   30. INTERVENTIONS CARDS RESPONSIVE
   ============================================ */

.intervention-card {
  padding: 20px;
}

@media (max-width: 768px) {
  .intervention-card {
    padding: 16px;
  }

  .intervention-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .intervention-info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ============================================
   31. PARTNERS MAP RESPONSIVE
   ============================================ */

.partner-shops-map-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

@media (max-width: 1024px) {
  .partner-shops-map-container {
    grid-template-columns: 1fr;
  }

  .partner-shops-map {
    height: 350px;
    order: -1;
  }

  .partner-shops-list {
    max-height: 400px;
  }
}

@media (max-width: 640px) {
  .partner-shops-map {
    height: 280px;
  }
}

/* ============================================
   32. DOCUMENTS UPLOAD RESPONSIVE
   ============================================ */

.documents-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

@media (max-width: 640px) {
  .documents-upload-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .document-upload-card {
    padding: 20px;
  }

  .document-upload-icon {
    width: 80px;
    height: 80px;
  }

  .document-upload-icon i {
    font-size: 2rem;
  }
}

/* ============================================
   33. FILTER CHIPS RESPONSIVE
   ============================================ */

.fleet-filter-chips,
.filter-chips {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  padding-bottom: 4px;
}

.fleet-filter-chips::-webkit-scrollbar,
.filter-chips::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 36px;
  padding: 8px 14px;
}

@media (max-width: 640px) {
  .filter-chip {
    min-height: 40px;
    padding: 10px 16px;
    font-size: 0.8rem;
  }
}

/* ============================================
   34. GLOBAL BUTTON FIXES
   ============================================ */

/* Assurer que tous les boutons restent visibles et cliquables */
.btn,
button:not([type="submit"]):not([type="button"]),
[role="button"] {
  overflow: visible !important;
}

/* Container de boutons - ne jamais cacher */
.actions,
.btn-group,
.button-group,
[class*="-actions"],
[class*="-buttons"] {
  overflow: visible !important;
  flex-shrink: 0;
}

/* Empêcher le crop des icônes dans les boutons */
.btn i,
button i,
[role="button"] i {
  flex-shrink: 0;
}

/* ============================================
   34b. FLEET MEMBERS CARDS - BOUTONS VISIBLES
   ============================================ */

/* Conteneur des flottes - JAMAIS de scroll horizontal cache */
.fleet-manage-column {
  overflow: visible !important;
}

/* Liste des membres - overflow visible */
.fleet-members-list {
  overflow: visible !important;
}

/* Carte membre - overflow visible pour ne pas couper les boutons */
.fleet-member-card-h {
  overflow: visible !important;
}

/* Colonne d'actions des membres - toujours visible */
.member-col-actions {
  overflow: visible !important;
  flex-shrink: 0 !important;
  min-width: max-content;
}

/* Boutons d'action membres - jamais coupés */
.btn-member-action {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Fix pour la grille fleet-manage-grid */
.fleet-manage-grid {
  overflow: visible !important;
}

/* Responsive: sur petits écrans, passer les actions en colonne */
@media (max-width: 1400px) {
  .fleet-member-card-h {
    grid-template-columns: auto minmax(100px, 1fr) minmax(80px, 0.8fr) auto auto !important;
  }

  .member-col-actions {
    width: auto !important;
    min-width: 160px;
  }
}

@media (max-width: 1200px) {
  .fleet-member-card-h {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .member-col-actions {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .member-col-actions .btn-member-action {
    flex: 0 0 auto !important;
    min-width: auto !important;
  }
}

@media (max-width: 768px) {
  .member-col-actions {
    width: 100% !important;
    justify-content: center !important;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--border-default, #e5e7eb);
  }

  .member-col-actions .btn-member-action {
    flex: 1 1 calc(33% - 6px) !important;
    min-width: 80px !important;
    justify-content: center !important;
  }
}

/* ============================================
   34c. AUTRES CONTENEURS - BOUTONS VISIBLES
   ============================================ */

/* Cartes véhicules flotte */
.fleet-vehicle-card-v2 {
  overflow: visible !important;
}

.fleet-vehicle-actions-v2 {
  overflow: visible !important;
  flex-shrink: 0 !important;
}

/* Cartes accessoires */
.fleet-accessory-card {
  overflow: visible !important;
}

/* Pending members */
.pending-member-card {
  overflow: visible !important;
}

.pending-member-actions {
  overflow: visible !important;
  flex-shrink: 0 !important;
}

/* Bulk action bar */
.fleet-bulk-action-bar {
  overflow: visible !important;
}

/* Quick actions dans les cartes */
.quick-actions,
.card-actions,
.item-actions {
  overflow: visible !important;
  flex-shrink: 0 !important;
}

/* Grilles d'actions de membres */
.fleet-member-actions-grid,
.fleet-member-actions-v2 {
  overflow: visible !important;
}

/* Section content premium */
.section-content-premium {
  overflow: visible !important;
}

/* Section card premium - CRITIQUE: overflow visible pour ne pas couper les boutons */
/* La section-card-premium a overflow:hidden par défaut (pour border-radius) mais cela coupe les boutons d'action */
.section-card-premium {
  overflow: visible !important;
}

/* Sections flottes specifiquement */
#fleetManageSection,
#fleetDetailsSection,
#fleetFmdSection,
#fleetBillingSection {
  overflow: visible !important;
}

/* Grille de gestion flotte - overflow visible pour les dropdowns et menus */
.fleet-manage-grid {
  overflow: visible !important;
}

/* Colonne de gestion flotte */
.fleet-manage-column {
  overflow: visible !important;
}

/* Liste des membres */
.fleet-members-list {
  overflow: visible !important;
}

/* ============================================
   35. SCROLLBAR STYLING
   ============================================ */

/* Scrollbar visible pour tables admin */
.admin-table-container::-webkit-scrollbar {
  height: 10px;
}

.admin-table-container::-webkit-scrollbar-track {
  background: var(--bg-secondary, #f5f5f5);
  border-radius: 5px;
}

.admin-table-container::-webkit-scrollbar-thumb {
  background: var(--primary, #D4AF37);
  border-radius: 5px;
  border: 2px solid var(--bg-secondary, #f5f5f5);
}

.admin-table-container::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark, #C9A227);
}

/* ============================================
   36. MOBILE TOUCH INTERACTIONS FIX
   ============================================ */

/* Fix hamburger menu touch - empêche le délai de 300ms sur iOS */
.burger-menu {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(212, 175, 55, 0.2);
}

/* Fix main-nav mobile - override du display:flex de style-effects.css */
@media (max-width: 1023px) {
  .header-clean .main-nav {
    display: flex !important; /* Override pour permettre le menu mobile */
    flex-direction: column !important;
  }

  /* Fix pour le menu actif */
  .header-clean .main-nav.active {
    right: 0 !important;
  }
}

/* Amélioration tactile globale pour tous les boutons */
@media (pointer: coarse) {
  /* Appareils tactiles */
  .btn,
  button,
  [role="button"],
  a.btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.2);
  }

  /* Zone de tap minimum 44x44px (recommandation Apple) */
  .hero-actions .btn {
    min-height: 48px;
    padding: 14px 24px;
  }

  /* FAQ questions cliquables */
  .faq-question-lovable {
    touch-action: manipulation;
    min-height: 56px;
  }

  /* Cards cliquables */
  .mode-card,
  .card-solution,
  .card-problem {
    touch-action: manipulation;
  }
}

/* Fix pour iOS Safari - empêche le double-tap zoom */
@supports (-webkit-touch-callout: none) {
  .burger-menu,
  .btn,
  button {
    touch-action: manipulation;
  }
}