/* Mobile UI Fixes */
/* Diese Datei behebt mobile-spezifische Probleme */

/* ===================================
   1. TEXT OVERFLOW FIXES
   =================================== */

/* Global text overflow fix for all text elements */
* {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Specific fixes for problematic elements */
.stat-label,
.impact-stats span,
.impact-stats .stat-value,
.consequence-item h4,
.consequence-item .stat-label,
.font-semibold,
.text-slate-800,
.text-slate-600,
h4,
h3,
h2,
p,
span {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
}

/* Fix for consequence items - prevent text overflow */
.consequence-item {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.consequence-item h4 {
  max-width: 100%;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto;
  white-space: normal !important;
}

/* Fix for impact stats container */
.impact-stats {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  max-width: 100%;
}

.impact-stats .stat-value,
.impact-stats .stat-label {
  flex: 1 1 100%;
  max-width: 100%;
  width: 100%;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* Fix for long German words */
.stat-label {
  font-size: 0.875rem; /* Slightly smaller on mobile */
}

/* ===================================
   2. MOBILE-SPECIFIC TEXT FIXES
   =================================== */

@media (max-width: 768px) {
  /* Enhanced text overflow fixes for mobile */
  .consequence-item,
  .impact-stats,
  .stat-label,
  .font-semibold,
  .problem-panel h4,
  .solution-panel h4 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Ensure long words break properly on mobile */
  h4,
  .font-semibold {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Reduce font size for problematic long words on small screens */
  .stat-label {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  /* Fix for consequence items on mobile */
  .consequence-item {
    padding: 0.75rem !important;
  }

  .consequence-item h4 {
    font-size: 0.95rem;
    line-height: 1.4;
  }
}

/* ===================================
   3. EXTRA SMALL SCREENS
   =================================== */

@media (max-width: 480px) {
  .stat-label {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .consequence-item h4 {
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .impact-stats {
    gap: 0.125rem;
  }
}

/* ===================================
   4. TABBAR SCROLL FIXES
   =================================== */

/* Ensure tab list is scrollable on all mobile devices */
.tab-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tab-list::-webkit-scrollbar {
  display: none;
}

/* Fix for iOS momentum scrolling */
@supports (-webkit-overflow-scrolling: touch) {
  .tab-list {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
}

/* ===================================
   5. GENERAL MOBILE IMPROVEMENTS
   =================================== */

@media (max-width: 768px) {
  /* Prevent horizontal overflow on mobile */
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Ensure all containers respect viewport width */
  .consequence-grid,
  .problem-panel,
  .solution-panel {
    max-width: 100%;
    overflow: hidden;
  }

  /* Better padding for mobile readability */
  .consequence-item {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}