/**
 * MOBILE CRITICAL FIXES
 * Priorität: SOFORT
 * Behebt: Font-Größen, Touch-Targets, Horizontal Scrolling, Performance
 * @package team-exciting
 * @version 1.0.0
 */

/* ==========================================
   FIX 1: Font-Größen korrigieren
   Problem: Texte unter 14px auf Mobile
   Google Standard: Minimum 14px, Formularfelder 16px
   ========================================== */
@media (max-width: 768px) {
    /* Minimum 14px für alle Texte */
    .sidebar .stat-label,
    .sidebar .xp-text,
    .sidebar .badge,
    .sidebar .user-stats .stat-value,
    .gather-card .gather-game-name,
    .gather-card .gather-status,
    .te-game-icon + span,
    small,
    .small-text {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    /* Formularfelder 16px (iOS Auto-Zoom vermeiden) */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    /* Buttons mindestens 14px */
    button,
    .btn,
    a.button,
    input[type="submit"],
    input[type="button"] {
        font-size: 14px !important;
    }
}

/* ==========================================
   FIX 2: Horizontales Scrolling verhindern
   Problem: Body scrollt horizontal
   ========================================== */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

* {
    max-width: 100%;
}

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

/* Verhindere overflow bei Containers */
.container,
.container-fluid,
.row,
.site-content,
#content {
    overflow-x: hidden !important;
}

/* ==========================================
   FIX 3: Touch-Target Mindestgröße
   Problem: Buttons und Links zu klein für Touch
   Apple Standard: 44x44px, Google: 48x48px
   ========================================== */
@media (max-width: 768px) {
    a:not(.navbar-brand),
    button,
    input[type="submit"],
    input[type="button"],
    .btn,
    .navbar-toggler,
    .menu-toggle,
    .te-action-button,
    .gather-join-btn,
    .tournament-register-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 15px !important;
    }

    /* Navigation Links */
    .navbar-nav .nav-link,
    .mobile-menu .nav-link,
    .offcanvas-nav-list a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        padding: 12px 15px !important;
    }

    /* Checkboxes und Radio Buttons */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px !important;
        min-height: 24px !important;
        margin: 10px !important;
    }
}

/* ==========================================
   FIX 4: Performance - will-change Optimierung
   Problem: will-change auf zu vielen Elementen
   ========================================== */
@media (max-width: 768px) {
    /* Entferne will-change im Ruhezustand */
    .navbar,
    .sidebar,
    .gather-card,
    .tournament-card,
    .team-card,
    .player-card {
        will-change: auto !important;
    }

    /* Nur bei Hover/Active aktivieren */
    .navbar:hover,
    .navbar:active,
    .gather-card:hover,
    .tournament-card:hover {
        will-change: transform;
    }

    /* Reduziere Animationsdauer */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.2s !important;
    }
}

/* ==========================================
   FIX 5: Reduced Motion Support
   Problem: Keine Rücksicht auf User-Präferenzen
   Accessibility: WCAG 2.1 - Motion Reduction
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Deaktiviere komplexe Animationen */
    .navbar::before,
    .navbar::after,
    .cosmic-dust,
    .grid-animation {
        animation: none !important;
    }
}

/* ==========================================
   FIX 6: Fixed Position Elemente optimieren
   Problem: Zu viele fixed Elemente auf Mobile
   ========================================== */
@media (max-width: 768px) {
    /* Reduziere z-index Chaos */
    .navbar {
        z-index: 9999 !important;
    }

    .mobile-menu,
    .navbar-collapse {
        z-index: 9998 !important;
    }

    .offcanvas-menu {
        z-index: 9997 !important;
    }

    .modal {
        z-index: 10000 !important;
    }
}

/* ==========================================
   FIX 7: Form Validation Sichtbarkeit
   Problem: Error Messages zu klein
   ========================================== */
@media (max-width: 768px) {
    .error-message,
    .validation-error,
    .form-error,
    .invalid-feedback {
        font-size: 14px !important;
        padding: 8px 12px !important;
        margin-top: 5px !important;
        display: block !important;
    }
}

/* ==========================================
   FIX 8: Kontrast-Verbesserungen
   Problem: Zu geringe Kontraste bei kleinen Texten
   ========================================== */
@media (max-width: 768px) {
    /* Erhöhe Kontrast für kleine Texte */
    .sidebar .stat-label,
    .small-text,
    .meta-text {
        opacity: 1 !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }
}

/* ==========================================
   FIX 9: Spacing für bessere Lesbarkeit
   Problem: Zu enge Abstände auf Mobile
   ========================================== */
@media (max-width: 768px) {
    /* Erhöhe Zeilenhöhe */
    p,
    li,
    .entry-content {
        line-height: 1.6 !important;
    }

    /* Mehr Padding für Content-Bereiche */
    .site-content,
    .entry-content,
    article {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ==========================================
   FIX 10: Focus Styles für Accessibility
   Problem: Focus nicht immer sichtbar
   ========================================== */
*:focus-visible {
    outline: 3px solid #FFD700 !important;
    outline-offset: 2px !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #FFD700 !important;
    outline-offset: 2px !important;
}

/* Skip Link immer sichtbar bei Focus */
.skip-link:focus,
.screen-reader-text:focus {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 100000 !important;
    padding: 15px 20px !important;
    background: #667eea !important;
    color: white !important;
    text-decoration: none !important;
    font-size: 16px !important;
    clip: auto !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
}