/**
 * PERFECT MOBILE OPTIMIZATION 📱
 * Optimized for Mobile & Tablet - Desktop unverändert
 * @package team-exciting
 * @version 1.0.0
 */

/* ===================================
   MOBILE & TABLET BREAKPOINTS
   Tablet = wie Mobile (768px und kleiner)
   Desktop = unverändert (769px+)
   =================================== */

/* ===================================
   HEADER & NAVIGATION - MOBILE/TABLET
   =================================== */

@media (max-width: 768px) {
    /* Logo - Perfekte Größe für Mobile */
    .navbar .logo img,
    header .logo img,
    .site-logo img {
        max-height: 60px !important;
        width: auto !important;
        margin: 5px 0 !important;
    }

    /* Header Container - Kompakt und übersichtlich */
    .navbar,
    header.navbar,
    .header-area,
    #masthead {
        padding: 10px 15px !important;
        min-height: 70px !important;
    }

    /* Navigation komplett überarbeitet für Mobile */
    .navbar-nav,
    .main-menu,
    .nav-menu {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar-nav li,
    .main-menu li,
    .nav-menu li {
        width: 100% !important;
        text-align: left !important;
        border-bottom: 1px solid rgba(0, 217, 255, 0.1) !important;
    }

    .navbar-nav li a,
    .main-menu li a,
    .nav-menu li a {
        padding: 15px 20px !important;
        font-size: 16px !important;
        display: block !important;
        width: 100% !important;
    }

    /* Mobile Menu Toggle Button */
    .navbar-toggler,
    .menu-toggle,
    .mobile-menu-btn {
        width: 45px !important;
        height: 45px !important;
        padding: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid var(--epic-cyan, #00d9ff) !important;
        border-radius: 10px !important;
        background: rgba(0, 217, 255, 0.1) !important;
    }

    /* Mobile Menu Container */
    .navbar-collapse,
    .mobile-menu {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        background: linear-gradient(145deg, rgba(26, 26, 26, 0.98), rgba(37, 37, 37, 0.98)) !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
        z-index: 9999 !important;
        padding: 20px 0 !important;
    }

    /* Dropdown Menus - Mobile optimiert */
    .dropdown-menu,
    .sub-menu {
        position: static !important;
        width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        background: rgba(0, 0, 0, 0.3) !important;
        padding-left: 20px !important;
    }

    /* Header Buttons - Mobile Layout */
    .header-buttons,
    .nav-right-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 15px !important;
    }

    .header-buttons .btn,
    .nav-right-content .btn {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ===================================
   SIDEBAR - MOBILE/TABLET PERFECT
   =================================== */

@media (max-width: 768px) {
    /* Sidebar Container */
    .sidebar,
    #sidebar,
    .widget-area,
    aside.sidebar {
        width: 100% !important;
        padding: 15px !important;
        margin: 20px 0 !important;
        border-radius: 15px !important;
    }

    /* Widgets - Kompakt aber lesbar */
    .sidebar .widget,
    #sidebar .widget,
    .widget-area .widget {
        padding: 15px !important;
        margin-bottom: 15px !important;
        border-radius: 12px !important;
    }

    /* Widget Titles */
    .sidebar .widget-title,
    .sidebar .widget h3,
    #sidebar .widget-title {
        font-size: 18px !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
    }

    /* User Profile - Mobile optimiert */
    .sidebar .user-profile,
    .sidebar .profile-widget {
        padding: 15px !important;
    }

    /* Avatar - Angemessene Größe */
    .sidebar .user-avatar,
    .sidebar .avatar,
    #sidebar .avatar {
        width: 80px !important;
        height: 80px !important;
        margin: 0 auto 10px !important;
    }

    /* User Stats Grid - 2 Spalten auf Mobile */
    .sidebar .user-stats,
    #sidebar .user-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .sidebar .stat-item {
        padding: 8px !important;
    }

    .sidebar .stat-value {
        font-size: 20px !important;
    }

    .sidebar .stat-label {
        font-size: 10px !important;
    }

    /* Buttons - Full Width auf Mobile */
    .sidebar .btn,
    .sidebar button,
    #sidebar .btn,
    #sidebar button {
        width: 100% !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
        margin: 5px 0 !important;
    }

    /* Form Inputs - Touch-Friendly */
    .sidebar input,
    .sidebar textarea,
    #sidebar input,
    #sidebar textarea {
        padding: 12px !important;
        font-size: 16px !important;
    }

    /* Listen - Kompakt */
    .sidebar li,
    #sidebar li {
        padding: 8px 0 !important;
        font-size: 14px !important;
    }

    /* XP Bar / Progress Bar */
    .sidebar .xp-bar,
    .sidebar .progress-bar {
        height: 25px !important;
        margin: 10px 0 !important;
    }

    .sidebar .xp-text,
    .sidebar .progress-text {
        font-size: 11px !important;
    }

    /* Social Icons - Touch-Friendly */
    .sidebar .social-icons {
        gap: 10px !important;
    }

    .sidebar .social-icons a {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
    }

    /* Rank Display - Kompakt */
    .sidebar .rank-display,
    .sidebar .level-display {
        padding: 12px !important;
    }

    .sidebar .rank-icon,
    .sidebar .level-number {
        font-size: 36px !important;
    }

    .sidebar .rank-name {
        font-size: 14px !important;
    }

    /* Badges - Kleinere Größe */
    .sidebar .badge,
    .sidebar .achievement {
        padding: 4px 10px !important;
        font-size: 10px !important;
        margin: 3px !important;
    }

    /* Notifications */
    .sidebar .notification,
    .sidebar .alert {
        padding: 12px !important;
        font-size: 13px !important;
    }
}

/* ===================================
   CONTENT AREA - MOBILE/TABLET
   =================================== */

@media (max-width: 768px) {
    /* Main Content Container */
    .site-content,
    #content,
    .main-content {
        padding: 15px !important;
        width: 100% !important;
    }

    /* Container - Full Width */
    .container,
    .custom-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }

    /* Rows - No Negative Margins */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Columns - Full Width */
    [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Heading Sizes */
    h1, .h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    h2, .h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h3, .h3 {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }

    h4, .h4 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    /* Text - Lesbar */
    p, body {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* Images - Responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Tables - Scrollbar */
    table {
        display: block !important;
        overflow-x: auto !important;
        width: 100% !important;
    }

    /* Forms - Touch-Friendly */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
        padding: 12px 15px !important;
        width: 100% !important;
    }

    /* Buttons - Full Width Option */
    .btn-block,
    .button-block {
        width: 100% !important;
        display: block !important;
    }
}

/* ===================================
   GATHER SYSTEM - MOBILE/TABLET
   =================================== */

@media (max-width: 768px) {
    /* Gather Page Header */
    .gather-page-wrapper header,
    .gather-page-header {
        padding: 20px 15px !important;
        text-align: center !important;
    }

    .gather-page-wrapper h1,
    .gather-page-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }

    /* Gather Tabs - Vertical Stack */
    .gather-tabs {
        padding: 15px !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .gather-tabs ul {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .gather-tab-btn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
        text-align: center !important;
        border-radius: 10px !important;
    }

    /* Gather Tab Content */
    .gather-tab-content {
        padding: 20px 15px !important;
        border-radius: 0 0 12px 12px !important;
    }

    /* Gather Cards Grid - Single Column */
    .gather-list-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .gather-card {
        padding: 15px !important;
        border-radius: 12px !important;
    }

    .gather-card .gather-title {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }

    .gather-card .gather-description {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .gather-card .gather-game-name {
        font-size: 11px !important;
    }

    .gather-card .gather-players {
        padding: 8px !important;
        font-size: 13px !important;
    }

    .gather-card .gather-status {
        padding: 5px 12px !important;
        font-size: 11px !important;
    }

    /* Gather Buttons */
    .join-gather-btn,
    .create-gather-btn,
    .gather-action-btn {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }

    /* Gather Form */
    .gather-form {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .gather-form-group {
        margin-bottom: 15px !important;
    }

    .gather-form label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .gather-form input,
    .gather-form select,
    .gather-form textarea {
        padding: 12px 15px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
    }

    .gather-form textarea {
        min-height: 100px !important;
    }

    /* Empty State */
    .gather-empty-state {
        padding: 40px 20px !important;
        border-radius: 12px !important;
    }

    .gather-empty-state-icon {
        font-size: 48px !important;
    }

    .gather-empty-state h3 {
        font-size: 20px !important;
    }

    .gather-empty-state p {
        font-size: 14px !important;
    }
}

/* ===================================
   FOOTER - MOBILE/TABLET
   =================================== */

@media (max-width: 768px) {
    .footer-area,
    footer,
    .site-footer {
        padding: 30px 15px !important;
    }

    .footer-widget {
        margin-bottom: 25px !important;
        text-align: center !important;
    }

    .footer-widget h3,
    .footer-widget .widget-title {
        font-size: 18px !important;
        margin-bottom: 15px !important;
    }

    .footer-widget ul li {
        padding: 6px 0 !important;
        font-size: 14px !important;
    }

    .footer-bottom,
    .copyright-area {
        text-align: center !important;
        padding: 15px !important;
        font-size: 13px !important;
    }
}

/* ===================================
   TOURNAMENTS & MATCHES - MOBILE
   =================================== */

@media (max-width: 768px) {
    /* Tournament Cards */
    .tournament-card,
    .match-card,
    .team-card {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }

    /* Tournament Brackets - Scrollable */
    .tournament-bracket,
    .bracket-wrapper {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Match Cards */
    .match-item {
        padding: 12px !important;
        font-size: 14px !important;
    }

    /* Team Logos */
    .team-logo,
    .tournament-logo {
        max-width: 60px !important;
        height: auto !important;
    }

    /* Scores - Gut lesbar */
    .match-score {
        font-size: 24px !important;
        font-weight: 900 !important;
    }
}

/* ===================================
   BBPRESS & BUDDYPRESS - MOBILE
   =================================== */

@media (max-width: 768px) {
    /* Forum Topics */
    #bbpress-forums li {
        padding: 12px !important;
        font-size: 14px !important;
    }

    #bbpress-forums .bbp-header {
        display: none !important;
    }

    #bbpress-forums .bbp-body .bbp-forum-info,
    #bbpress-forums .bbp-body .bbp-topic-title {
        width: 100% !important;
        padding: 8px 0 !important;
    }

    /* BuddyPress Activity */
    .activity-list .activity-item {
        padding: 15px !important;
        border-radius: 10px !important;
    }

    .activity-avatar {
        width: 50px !important;
        height: 50px !important;
    }

    .activity-content {
        margin-left: 60px !important;
        font-size: 14px !important;
    }

    /* Profile Headers */
    #item-header-avatar {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    #item-header-content {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ===================================
   WOOCOMMERCE - MOBILE/TABLET
   =================================== */

@media (max-width: 768px) {
    /* Product Grid */
    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .woocommerce ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Product Single */
    .woocommerce div.product .woocommerce-product-gallery {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .woocommerce div.product .summary {
        width: 100% !important;
    }

    /* Cart */
    .woocommerce table.cart {
        font-size: 13px !important;
    }

    .woocommerce table.cart img {
        max-width: 60px !important;
    }

    .woocommerce table.cart .product-name {
        font-size: 13px !important;
    }

    /* Checkout */
    .woocommerce-checkout #customer_details {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review {
        width: 100% !important;
    }
}

/* ===================================
   UTILITY CLASSES - MOBILE
   =================================== */

@media (max-width: 768px) {
    /* Spacing */
    .mb-mobile-10 { margin-bottom: 10px !important; }
    .mb-mobile-15 { margin-bottom: 15px !important; }
    .mb-mobile-20 { margin-bottom: 20px !important; }
    .mb-mobile-30 { margin-bottom: 30px !important; }

    .mt-mobile-10 { margin-top: 10px !important; }
    .mt-mobile-15 { margin-top: 15px !important; }
    .mt-mobile-20 { margin-top: 20px !important; }
    .mt-mobile-30 { margin-top: 30px !important; }

    .p-mobile-10 { padding: 10px !important; }
    .p-mobile-15 { padding: 15px !important; }
    .p-mobile-20 { padding: 20px !important; }

    /* Text Alignment */
    .text-mobile-center { text-align: center !important; }
    .text-mobile-left { text-align: left !important; }
    .text-mobile-right { text-align: right !important; }

    /* Display */
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
    .flex-mobile { display: flex !important; }
    .grid-mobile { display: grid !important; }

    /* Width */
    .w-mobile-100 { width: 100% !important; }
    .w-mobile-auto { width: auto !important; }

    /* Flex Direction */
    .flex-mobile-column { flex-direction: column !important; }
    .flex-mobile-row { flex-direction: row !important; }
}

/* ===================================
   SCROLLBAR - MOBILE FRIENDLY
   =================================== */

@media (max-width: 768px) {
    /* Thin Scrollbar for Touch Devices */
    ::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
    }

    ::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2) !important;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 217, 255, 0.5) !important;
        border-radius: 10px !important;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 217, 255, 0.7) !important;
    }
}

/* ===================================
   PERFORMANCE - MOBILE OPTIMIERT
   =================================== */

@media (max-width: 768px) {
    /* Reduziere Animationen für bessere Performance */
    *,
    *::before,
    *::after {
        animation-duration: 0.3s !important;
        transition-duration: 0.2s !important;
    }

    /* GPU Acceleration nur wo nötig */
    .navbar,
    .sidebar,
    .gather-card {
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        will-change: transform !important;
    }

    /* Reduziere Box Shadows für Performance */
    .sidebar::before,
    .navbar::before,
    .navbar::after {
        display: none !important;
    }
}

/* ===================================
   ACCESSIBILITY - TOUCH TARGETS
   =================================== */

@media (max-width: 768px) {
    /* Mindestgröße für Touch-Elemente: 44x44px */
    button,
    .btn,
    a.button,
    input[type="submit"],
    input[type="button"],
    .navbar-toggler {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 15px !important;
    }

    /* Links - Größerer Klickbereich */
    a {
        padding: 5px 0 !important;
        display: inline-block !important;
    }

    /* Form Elements - Touch-Friendly */
    input,
    select,
    textarea {
        min-height: 44px !important;
    }
}

/* ===================================
   LANDSCAPE MODE - SMARTPHONE
   =================================== */

@media (max-width: 768px) and (orientation: landscape) {
    /* Header kleiner im Landscape */
    .navbar .logo img {
        max-height: 50px !important;
    }

    .navbar {
        padding: 8px 15px !important;
        min-height: 60px !important;
    }

    /* Sidebar kompakter */
    .sidebar {
        padding: 12px !important;
    }

    .sidebar .widget {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
}

/* ===================================
   SMALL MOBILE - < 480px
   =================================== */

@media (max-width: 480px) {
    /* Extra kleine Bildschirme */
    body {
        font-size: 14px !important;
    }

    h1, .h1 {
        font-size: 24px !important;
    }

    h2, .h2 {
        font-size: 20px !important;
    }

    h3, .h3 {
        font-size: 18px !important;
    }

    /* Container - Noch kompakter */
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Buttons - Angepasste Größe */
    .btn,
    button {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    /* Gather Cards - Sehr kompakt */
    .gather-card {
        padding: 12px !important;
    }

    .gather-card .gather-title {
        font-size: 16px !important;
    }

    /* WooCommerce - Single Column */
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* ===================================
   📱 MOBILE PERFECT - COMPLETE! 🔥
   =================================== */