/**
 * Mobile App Fixes for Capacitor
 * Fixes touch scrolling, click issues, and status bar overlap
 * These styles only apply to Capacitor native apps (plt-capacitor, plt-android)
 */

/* Enable smooth scrolling on iOS */
html, body {
    -webkit-overflow-scrolling: touch;
}

/* Fix for touch events */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Ensure buttons and links are clickable */
button, a, input, select, textarea, [onclick], [role="button"] {
    touch-action: manipulation;
    cursor: pointer;
}

/* Fix scrollable containers */
.overflow-y-auto,
.overflow-auto,
[style*="overflow"] {
    -webkit-overflow-scrolling: touch;
}

/* ============================================
   CAPACITOR/MOBILE ONLY STYLES
   These only apply when running as native app
   ============================================ */

/* Safe area padding for Capacitor native apps only */
html.plt-capacitor body,
html.plt-android body {
    padding-top: 0 !important;
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Header gets padding inside to push content below status bar, but stays at top:0 */
/* Use safe-area-inset-top with a fallback of 44px for devices that don't report it correctly */
html.plt-capacitor header.sticky,
html.plt-android header.sticky,
html.plt-ios header.sticky,
html.plt-capacitor .sticky.top-0,
html.plt-android .sticky.top-0,
html.plt-ios .sticky.top-0 {
    top: 0 !important;
    padding-top: max(env(safe-area-inset-top, 44px), 44px) !important;
}

/* Non-sticky headers just need padding */
html.plt-capacitor header:not(.sticky),
html.plt-android header:not(.sticky),
html.plt-ios header:not(.sticky) {
    padding-top: max(env(safe-area-inset-top, 44px), 44px) !important;
}

/* ============================================
   DASHBOARD FIXED NAVIGATION - SAFE AREA
   The dashboard uses #top-nav with fixed positioning
   ============================================ */

/* Top Navigation Bar - add padding for status bar */
html.plt-capacitor #top-nav,
html.plt-android #top-nav,
html.plt-ios #top-nav {
    padding-top: max(env(safe-area-inset-top, 28px), 28px) !important;
}

/* Main content needs extra padding to account for taller header */
html.plt-capacitor #main-content,
html.plt-android #main-content,
html.plt-ios #main-content {
    padding-top: calc(56px + max(env(safe-area-inset-top, 28px), 28px)) !important;
}

/* Community fullscreen overlay - also needs safe area */
html.plt-capacitor #community-fullscreen > .sticky,
html.plt-android #community-fullscreen > .sticky,
html.plt-ios #community-fullscreen > .sticky {
    padding-top: max(env(safe-area-inset-top, 28px), 28px) !important;
}

/* Make sure touch events work */
html.plt-capacitor header *,
html.plt-android header *,
html.plt-ios header * {
    pointer-events: auto !important;
}

/* Fix modal overlays in Capacitor */
html.plt-capacitor .fixed.inset-0,
html.plt-android .fixed.inset-0,
html.plt-ios .fixed.inset-0 {
    padding-top: max(env(safe-area-inset-top, 44px), 44px);
}

/* ============================================
   NOTIFICATION MODAL FIX
   Modal needs to be pushed down more to clear header on Android
   ============================================ */
html.plt-capacitor #notification-modal,
html.plt-android #notification-modal,
html.plt-ios #notification-modal {
    padding-top: calc(max(env(safe-area-inset-top, 44px), 44px) + 70px) !important;
}

/* Also fix the notification modal content container */
html.plt-capacitor #notification-modal > div,
html.plt-android #notification-modal > div,
html.plt-ios #notification-modal > div {
    margin-top: 0 !important;
    max-height: calc(100vh - 150px) !important;
}

/* PWA Standalone mode - notification modal fix */
@media all and (display-mode: standalone) {
    #notification-modal {
        z-index: 99999 !important;
        padding-top: calc(env(safe-area-inset-top, 20px) + 60px) !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 80px) !important;
    }

    #notification-modal > div {
        max-height: calc(100vh - env(safe-area-inset-top, 20px) - env(safe-area-inset-bottom, 20px) - 160px) !important;
        margin-bottom: auto !important;
    }
}

/* ============================================
   COACH DASHBOARD TOP SPACING FIX
   Reduce top padding on mobile native apps
   ============================================ */
html.plt-capacitor .coach-dashboard-content,
html.plt-android .coach-dashboard-content,
html.plt-ios .coach-dashboard-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

html.plt-capacitor .coach-dashboard-content > header,
html.plt-android .coach-dashboard-content > header,
html.plt-ios .coach-dashboard-content > header {
    margin-bottom: 0.5rem !important;
    padding-top: 0 !important;
}

/* Fix coach.html main content area - directly target the structure */
html.plt-capacitor #main-content > .container,
html.plt-android #main-content > .container,
html.plt-ios #main-content > .container {
    padding-top: 0.5rem !important;
}

/* Target the header section in coach dashboard specifically */
html.plt-capacitor #main-content header.flex,
html.plt-android #main-content header.flex,
html.plt-ios #main-content header.flex {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Reduce the pt-6 and pt-4 classes on mobile */
@media (max-width: 768px) {
    html.plt-capacitor .pt-6,
    html.plt-android .pt-6,
    html.plt-ios .pt-6 {
        padding-top: 0.5rem !important;
    }

    html.plt-capacitor .pt-4,
    html.plt-android .pt-4,
    html.plt-ios .pt-4 {
        padding-top: 0.25rem !important;
    }

    html.plt-capacitor .mb-6,
    html.plt-android .mb-6,
    html.plt-ios .mb-6 {
        margin-bottom: 0.75rem !important;
    }
}

/* ============================================
   PROFILE PAGE TOP SPACING FIX
   Profile.html uses sticky header, NOT fixed #top-nav
   So we need to reset the main-content padding
   ============================================ */

/* Reset main-content padding for profile page specifically */
html.plt-capacitor #main-content.profile-page,
html.plt-android #main-content.profile-page,
html.plt-ios #main-content.profile-page {
    padding-top: 0 !important;
}

/* Profile page sticky header - add safe area padding */
html.plt-capacitor .profile-page .sticky.top-0,
html.plt-android .profile-page .sticky.top-0,
html.plt-ios .profile-page .sticky.top-0 {
    padding-top: max(env(safe-area-inset-top, 20px), 20px) !important;
}

/* Profile content wrapper - reduce padding */
html.plt-capacitor .profile-content-wrapper,
html.plt-android .profile-content-wrapper,
html.plt-ios .profile-content-wrapper {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-top: 0 !important;
}

/* Profile avatar - reduce top margin */
html.plt-capacitor .profile-content-wrapper .flex.justify-center.mb-4,
html.plt-android .profile-content-wrapper .flex.justify-center.mb-4,
html.plt-ios .profile-content-wrapper .flex.justify-center.mb-4 {
    margin-bottom: 0.5rem !important;
}

/* Profile header area - reduce spacing */
@media (max-width: 768px) {
    html.plt-capacitor .profile-content-wrapper > div:first-child,
    html.plt-android .profile-content-wrapper > div:first-child,
    html.plt-ios .profile-content-wrapper > div:first-child {
        padding-top: 0 !important;
    }

    /* Profile avatar section - reduce margin */
    html.plt-capacitor .profile-content-wrapper .relative.-mt-16,
    html.plt-android .profile-content-wrapper .relative.-mt-16,
    html.plt-ios .profile-content-wrapper .relative.-mt-16 {
        margin-top: -3rem !important;
    }
}

/* ============================================
   EXPORT BUTTONS - SMALLER ON MOBILE
   ============================================ */
@media (max-width: 640px) {
    .export-btn-mobile {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
    }

    .export-btn-mobile span {
        display: none;
    }

    .export-btn-mobile i {
        margin-right: 0 !important;
    }

    /* Target Excel and Zusammenfassung buttons by color classes */
    html.plt-capacitor button.bg-green-500,
    html.plt-android button.bg-green-500,
    html.plt-ios button.bg-green-500,
    html.plt-capacitor button.bg-blue-500,
    html.plt-android button.bg-blue-500,
    html.plt-ios button.bg-blue-500 {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
    }

    /* Hide text labels on small screens, show only icons */
    html.plt-capacitor button.bg-green-500 span,
    html.plt-android button.bg-green-500 span,
    html.plt-ios button.bg-green-500 span,
    html.plt-capacitor button.bg-blue-500 span,
    html.plt-android button.bg-blue-500 span,
    html.plt-ios button.bg-blue-500 span {
        display: none !important;
    }

    /* Remove icon margin when text is hidden */
    html.plt-capacitor button.bg-green-500 i,
    html.plt-android button.bg-green-500 i,
    html.plt-ios button.bg-green-500 i,
    html.plt-capacitor button.bg-blue-500 i,
    html.plt-android button.bg-blue-500 i,
    html.plt-ios button.bg-blue-500 i {
        margin-right: 0 !important;
    }
}

/* ============================================
   DOUBLES MATCH CARD - MOBILE LAYOUT FIX
   ============================================ */

/* Better doubles layout for match history */
@media (max-width: 640px) {
    /* Make the match card layout more compact for doubles */
    html.plt-capacitor .match-card[data-match-type="doubles"],
    html.plt-android .match-card[data-match-type="doubles"],
    html.plt-ios .match-card[data-match-type="doubles"] {
        padding: 0.75rem !important;
    }

    /* Team avatar groups - make smaller */
    html.plt-capacitor .team-avatars,
    html.plt-android .team-avatars,
    html.plt-ios .team-avatars {
        transform: scale(0.85);
    }

    /* Team names - truncate and stack */
    html.plt-capacitor .team-names,
    html.plt-android .team-names,
    html.plt-ios .team-names,
    html.plt-capacitor .doubles-team-names,
    html.plt-android .doubles-team-names,
    html.plt-ios .doubles-team-names {
        font-size: 0.8rem !important;
        max-width: 90px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Doubles score section - make more compact */
    html.plt-capacitor .doubles-score,
    html.plt-android .doubles-score,
    html.plt-ios .doubles-score {
        font-size: 1.25rem !important;
    }

    /* The overlapping avatars in doubles - adjust positioning */
    html.plt-capacitor .doubles-avatar-group img,
    html.plt-android .doubles-avatar-group img,
    html.plt-ios .doubles-avatar-group img,
    html.plt-capacitor .doubles-avatar-group .avatar,
    html.plt-android .doubles-avatar-group .avatar,
    html.plt-ios .doubles-avatar-group .avatar {
        width: 32px !important;
        height: 32px !important;
    }

    html.plt-capacitor .doubles-avatar-group img:last-child,
    html.plt-android .doubles-avatar-group img:last-child,
    html.plt-ios .doubles-avatar-group img:last-child,
    html.plt-capacitor .doubles-avatar-group .avatar:last-child,
    html.plt-android .doubles-avatar-group .avatar:last-child,
    html.plt-ios .doubles-avatar-group .avatar:last-child {
        margin-left: -12px !important;
    }
}

@media (max-width: 480px) {
    /* Even smaller on very small screens */
    html.plt-capacitor .team-names,
    html.plt-android .team-names,
    html.plt-ios .team-names,
    html.plt-capacitor .doubles-team-names,
    html.plt-android .doubles-team-names,
    html.plt-ios .doubles-team-names {
        font-size: 0.7rem !important;
        max-width: 70px !important;
    }
}

/* ============================================
   GENERAL MOBILE STYLES (Web + Native)
   ============================================ */

/* Prevent text selection on buttons */
button {
    -webkit-user-select: none;
    user-select: none;
}

/* Fix for keyboard showing (Capacitor only) */
html.plt-capacitor .keyboard-visible,
html.plt-android .keyboard-visible,
html.plt-ios .keyboard-visible {
    height: calc(100% - var(--keyboard-height, 0px));
}

/* Ensure main content is scrollable */
main,
section,
.container,
.min-h-screen {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

/* Profile page scroll fix */
body {
    overflow-y: auto !important;
}

/* Ensure page content can scroll after SPA navigation */
html:not(.modal-open) body,
html body:not([style*="overflow: hidden"]) {
    overflow-y: auto;
}

/* ============================================
   MODAL FIXES FOR SMALL SCREENS
   ============================================ */

/* Fix login modal on small screens - make it scrollable and align to top */
#login-modal {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-height: 700px) {
    #login-modal {
        align-items: flex-start !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    #login-modal > div {
        margin-top: 0;
        margin-bottom: auto;
    }
}

/* Ensure modal content doesn't exceed viewport */
#login-modal > div {
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* ============================================
   PWA STANDALONE MODE - SAFE AREA FIXES
   These apply when app is installed to home screen
   ============================================ */

/* Safe area bottom class - applies to elements that need bottom padding */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* PWA Standalone Mode - Bottom Navigation Fix */
/* Note: iOS Safari doesn't support display-mode: standalone media query */
/* So we also use body.standalone-mode class set via JavaScript */
@media all and (display-mode: standalone) {
    /* Bottom navigation - sits at very bottom, extends into safe area */
    #bottom-nav {
        bottom: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }

    /* The inner flex container maintains its height */
    #bottom-nav > div {
        height: 48px;
    }

    /* Main content needs bottom padding for nav + safe area */
    main,
    #main-content,
    .min-h-screen {
        padding-bottom: calc(48px + env(safe-area-inset-bottom, 0)) !important;
    }

    /* Top header also needs safe area for status bar */
    #top-nav {
        padding-top: env(safe-area-inset-top, 0) !important;
    }

    /* Profile and other pages with sticky headers */
    .sticky.top-0 {
        padding-top: env(safe-area-inset-top, 0) !important;
    }

    /* Body safe area - no padding at bottom, nav handles it */
    body {
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
        padding-bottom: 0 !important;
    }
}

/* iOS PWA Standalone Mode - uses body.standalone-mode class */
/* This is needed because iOS Safari doesn't support display-mode media query */
body.standalone-mode #bottom-nav {
    bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
}

body.standalone-mode #bottom-nav > div {
    height: 48px;
}

body.standalone-mode main,
body.standalone-mode #main-content,
body.standalone-mode .min-h-screen {
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0)) !important;
}

body.standalone-mode #top-nav {
    padding-top: env(safe-area-inset-top, 0) !important;
}

body.standalone-mode .sticky.top-0 {
    padding-top: env(safe-area-inset-top, 0) !important;
}

body.standalone-mode {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: 0 !important;
}