/* ===========================
   SHADOW INTEGRATOR v3 - MOBILE OPTIMIZATIONS
   2-Row Fixed Footer for Z Fold 3
   =========================== */

/* ===========================
   TOUCH DEVICE SUPPORT (all sizes)
   Applies to ALL touch devices: phones, tablets, touch-laptops
   =========================== */

@media (pointer: coarse) {
    /* Touch-friendly target sizes for ALL touch devices */
    button,
    a,
    input[type="button"],
    input[type="submit"],
    .nav-item,
    .nav-button,
    .shadow-card,
    .aspect-card,
    .choice-card,
    .modal-close,
    .lang-button,
    .password-toggle {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Larger click areas for better touch accuracy */
    .nav-button,
    .lang-button {
        padding: 12px 16px;
    }
    
    /* Prevent accidental double-tap zoom */
    button,
    a,
    input {
        touch-action: manipulation;
    }
}

/* ===========================
   MOBILE-SPECIFIC (<768px)
   =========================== */

@media (max-width: 768px) {
    /* Allow pinch-to-zoom for accessibility (WCAG 1.4.4) */
    html {
        touch-action: manipulation;
        -ms-touch-action: manipulation;
    }
    
    body {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    /* Ensure adequate spacing between touch targets */
    .nav-item {
        padding: 8px;
    }
}

/* ===========================
   Z FOLD 3 FIX - ROOT VARIABLES & BODY
   =========================== */

@media (max-width: 768px) {
    :root {
        --nav-height: 120px; /* 2-row navigation height - increased for visibility */
    }
    
    html, body {
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        filter: none !important;
        perspective: none !important;
        contain: none !important;
    }
    
    body {
        padding-bottom: calc(var(--nav-height) + 30px + env(safe-area-inset-bottom)) !important;
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important; /* Body scrolls */
        overscroll-behavior-y: none !important;
    }
    
    /* Main content - NO overflow scroll here */
    .main-content {
        min-height: 100dvh !important;
        padding-bottom: calc(var(--nav-height) + 30px) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 10px !important;
        overflow: visible !important;
        transform: none !important;
        filter: none !important;
        perspective: none !important;
        contain: none !important;
    }
}

/* ===========================
   MOBILE NAVIGATION - FIXED FOOTER
   =========================== */

@media (max-width: 768px) {
    /* CRITICAL: Fixed positioning - NO transform! */
    .navigation {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        height: auto !important; /* Auto height based on content */
        min-height: var(--nav-height) !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
        gap: 0 !important;
        border-top: 2px solid var(--neon-cyan) !important;
        z-index: 2147483647 !important;
        background: rgba(10, 10, 15, 0.99) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        transform: none !important;
        will-change: auto !important;
        filter: none !important;
        perspective: none !important;
        contain: none !important;
    }
    
    /* ROW 1: Home + Logo + Title + Language */
    .nav-left {
        display: flex !important;
        order: 1 !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 5px 6px !important;
        border-bottom: 1px solid rgba(0, 255, 255, 0.2) !important;
        box-sizing: border-box !important;
        gap: 4px !important;
        flex: 0 0 auto !important;
    }
    
    /* Logo */
    .nav-left .app-logo {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }
    
    /* Title */
    .nav-left .app-title {
        font-size: 0.6rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 95px !important;
        flex-shrink: 1 !important;
    }
    
    /* Hide nav-center container on mobile */
    .nav-center {
        display: none !important;
    }
    
    /* Language Switcher */
    .language-switcher {
        display: flex !important;
        gap: 1px !important;
        background: rgba(0, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        padding: 2px !important;
        border: 1px solid rgba(0, 255, 255, 0.3) !important;
        flex-shrink: 0 !important;
        margin-left: 3px !important;
    }
    
    .lang-button {
        padding: 4px 8px !important;
        font-size: 0.65rem !important;
        min-height: 24px !important;
        min-width: 26px !important;
        border-radius: 10px !important;
    }
    
    /* ROW 2: Anmelden + Icons */
    .nav-right {
        display: flex !important;
        order: 2 !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 4px 6px !important;
        gap: 0 !important;
        box-sizing: border-box !important;
        flex-wrap: nowrap !important;
        flex: 0 0 auto !important;
    }
    
    /* Auth Status */
    .auth-status {
        padding: 4px 6px !important;
        font-size: 0.6rem !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
        margin-right: 2px !important;
    }
    
    #auth-status-text {
        display: none !important;
    }
    
    .auth-status .user-email {
        max-width: 45px !important;
        font-size: 0.55rem !important;
    }
    
    .login-btn {
        padding: 4px 7px !important;
        font-size: 0.6rem !important;
    }
    
    /* Nav Buttons - Icons only */
    .nav-button {
        min-width: 32px !important;
        min-height: 34px !important;
        padding: 3px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 5px !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
    
    .nav-button .nav-icon {
        font-size: 0.95rem !important;
    }
    
    .nav-button .nav-label {
        display: none !important;
    }
    
    .nav-button.has-tooltip::after,
    .nav-button.has-tooltip::before {
        display: none !important;
    }
    
    /* Premium Badge */
    .premium-badge {
        font-size: 0.5rem !important;
        padding: 2px 3px !important;
    }
    
    #premium-status-badge {
        flex-shrink: 0 !important;
    }
    
    /* HIDE ORIGINAL FOOTER COMPLETELY */
    .footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }
}

/* ===========================
   HOME SCREEN MOBILE
   =========================== */

@media (max-width: 768px) {
    .hero-section {
        padding: 15px 10px;
    }
    
    .hero-title {
        font-size: 1.4rem;
        line-height: 1.3;
    }
    
    .hero-subtitle {
        font-size: 0.85rem;
    }
    
    .slider-container {
        height: auto;
        min-height: 170px;
    }
    
    .slide {
        padding: 12px 10px;
    }
    
    .slide-icon {
        font-size: 2rem;
    }
    
    .slide h3 {
        font-size: 0.95rem;
    }
    
    .slide p {
        font-size: 0.8rem;
    }
    
    .shadow-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 6px;
    }
    
    .shadow-card {
        padding: 10px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .random-button {
        width: 100%;
        max-width: 240px;
        padding: 10px 18px;
        font-size: 0.9rem;
    }
}

/* ===========================
   SCENARIO & ASPECTS MOBILE
   =========================== */

@media (max-width: 768px) {
    .scenario-container,
    .aspects-container {
        padding: 10px;
    }
    
    .option-button {
        min-height: 50px;
        padding: 10px;
        font-size: 0.85rem;
    }
    
    .action-buttons {
        flex-direction: column;
        gap: 6px;
    }
    
    .action-button {
        width: 100%;
        padding: 10px;
    }
    
    .reflection-textarea {
        min-height: 90px;
        font-size: 16px;
        padding: 8px;
    }
    
    .aspects-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .aspect-card {
        padding: 10px;
    }
}

/* ===========================
   MODALS MOBILE
   =========================== */

@media (max-width: 768px) {
    .modal-content,
    .welcome-content,
    .upgrade-modal-content,
    .auth-modal-content {
        width: 95%;
        max-width: none;
        max-height: 85vh;
        margin: 6px;
        padding: 12px;
        border-radius: 10px;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ===========================
   TOUCH & ACCESSIBILITY
   =========================== */

@media (hover: none) and (pointer: coarse) {
    .nav-button:hover,
    .shadow-card:hover {
        transform: none;
    }
    
    .nav-button:active,
    .shadow-card:active {
        transform: scale(0.96);
        opacity: 0.9;
    }
    
    * {
        -webkit-tap-highlight-color: rgba(0, 255, 255, 0.2);
    }
    
    .main-content {
        -webkit-overflow-scrolling: touch;
    }
    
    button, .nav-button {
        touch-action: manipulation;
    }
}

/* Landscape */
@media (max-width: 768px) and (max-height: 500px) and (orientation: landscape) {
    :root {
        --nav-height: 45px;
    }
    
    .navigation {
        flex-direction: row !important;
        height: var(--nav-height) !important;
        padding: 3px 6px !important;
    }
    
    .nav-left, .nav-right {
        width: auto !important;
        border-bottom: none !important;
        padding: 3px !important;
    }
}

/* Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .shadow-grid,
    .aspects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===========================
   MOBILE ACCESSIBILITY ENHANCEMENTS
   =========================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Larger text for users who set larger font sizes in system settings */
@media (prefers-reduced-motion: no-preference) {
    html {
        /* Allow system font scaling */
        font-size: 100%;
    }
}

/* Dark mode forced colors (Windows High Contrast) */
@media (forced-colors: active) {
    .shadow-card,
    .aspect-card,
    .choice-card,
    button,
    .modal-content {
        border: 2px solid currentColor !important;
    }
    
    .nav-item.active {
        border-bottom: 3px solid currentColor !important;
    }
}

/* Landscape orientation improvements */
@media (max-width: 768px) and (orientation: landscape) {
    .modal-content {
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
    
    .hero-section {
        padding: var(--spacing-sm) 0 !important;
    }
    
    .hero-title {
        font-size: 1.5rem !important;
    }
}

@media print {
    .navigation, .footer {
        display: none !important;
    }
}

/* ===========================
   Z FOLD 3 - FIXED-KILLER FIX
   Removes transform/filter/perspective/contain from ancestors
   which break position:fixed on Android
   =========================== */

@media (max-width: 768px) {
    /* Remove fixed-killers from html/body */
    html, body {
        transform: none !important;
        filter: none !important;
        perspective: none !important;
        contain: none !important;
    }
    
    /* Remove fixed-killers from common wrappers */
    #app, .app, .page, .wrapper, .container, .main-content {
        transform: none !important;
        filter: none !important;
        perspective: none !important;
        contain: none !important;
    }
    
    /* Force navigation to viewport - NO transform on fixed element! */
    .navigation {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        transform: none !important;
        will-change: auto !important;
        z-index: 2147483647 !important;
    }
}

/* ===========================
   MOBILE MODAL FIX - Upgrade Modal
   =========================== */

@media (max-width: 768px) {
    .upgrade-modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 20px 10px calc(var(--nav-height) + 30px) 10px !important;
        align-items: flex-start !important;
        z-index: 100000 !important;
    }
    
    .upgrade-modal {
        margin: 0 auto calc(var(--nav-height) + 30px) auto !important;
        max-height: none !important;
        width: 95% !important;
        padding: 20px !important;
    }
    
    /* Smaller elements on mobile */
    .upgrade-modal h2 {
        font-size: 1.4rem !important;
    }
    
    .upgrade-price {
        font-size: 2rem !important;
        margin: 15px 0 !important;
    }
    
    .upgrade-features li {
        font-size: 0.95rem !important;
        padding: 8px 0 !important;
    }
    
    .trust-badges {
        gap: 8px !important;
    }
    
    .trust-badge {
        font-size: 0.8rem !important;
        padding: 8px !important;
    }
    
    .payment-icons {
        gap: 5px !important;
    }
    
    .payment-icon svg {
        width: 32px !important;
        height: 20px !important;
    }
    
    /* Bigger payment button on mobile */
    .upgrade-modal .upgrade-buy-button {
        font-size: 1.1rem !important;
        padding: 16px 30px !important;
        min-height: 54px !important;
        width: 100% !important;
    }
    
    .login-hint {
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
    }
}

/* ===========================
   MOBILE AUTH MODAL FIX
   =========================== */

@media (max-width: 768px) {
    #auth-modal {
        padding-top: 60px !important;
        padding-bottom: calc(var(--nav-height) + 40px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        align-items: flex-start !important;
    }
    
    #auth-modal .modal-content {
        margin-top: 20px !important;
        margin-bottom: calc(var(--nav-height) + 40px) !important;
        max-height: none !important;
    }
}

/* ===========================
   MOBILE LEGAL SCREEN FIX
   =========================== */

@media (max-width: 768px) {
    #legal-screen {
        padding-bottom: calc(var(--nav-height) + 80px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    #legal-screen .legal-content {
        padding-bottom: calc(var(--nav-height) + 60px) !important;
    }
}


/* ===========================
   TABLET/IPAD FIX (769px - 1024px)
   Navigation kompakter für mittlere Bildschirme
   =========================== */

@media (min-width: 769px) and (max-width: 1024px) {
    /* Navigation kompakter */
    .navigation {
        padding: 8px 12px !important;
        gap: 10px !important;
    }
    
    .nav-left {
        gap: 8px !important;
    }
    
    .nav-right {
        gap: 6px !important;
    }
    
    /* App-Titel kürzer */
    .app-title {
        font-size: 0.85rem !important;
        max-width: 140px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* Logo kleiner */
    .app-logo {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Auth-Status: Text verstecken, nur Button */
    #auth-status-text {
        display: none !important;
    }
    
    .auth-status {
        padding: 4px 8px !important;
    }
    
    .login-btn {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }
    
    /* Nav Buttons kompakter */
    .nav-button {
        padding: 6px 10px !important;
        font-size: 0.85rem !important;
        min-width: 44px !important;
    }
    
    .nav-button .nav-label {
        display: none !important;
    }
    
    .nav-icon {
        font-size: 1.1rem !important;
    }
    
    /* Language Switcher kompakter */
    .language-switcher {
        gap: 2px !important;
    }
    
    .lang-button {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        min-height: 36px !important;
        min-width: 36px !important;
    }
    
    /* Video Dropdown */
    .video-dropdown .dropdown-arrow {
        display: none !important;
    }
    
    /* Premium Badge kompakter */
    .premium-badge {
        font-size: 0.65rem !important;
        padding: 3px 6px !important;
    }
    
    /* Nav Brand - weniger Platz */
    .nav-brand {
        gap: 6px !important;
    }
    
    /* User Email kürzen wenn eingeloggt */
    .auth-status .user-email {
        max-width: 80px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.75rem !important;
    }
}

/* ===========================
   iPAD PRO / LARGER TABLETS (1024px - 1200px)
   =========================== */

@media (min-width: 1024px) and (max-width: 1200px) {
    .nav-button .nav-label {
        display: none !important;
    }
    
    #auth-status-text {
        font-size: 0.75rem !important;
        max-width: 150px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .app-title {
        font-size: 0.95rem !important;
    }
}


/* ===========================
   VIDEO DROPDOWN FIX FOR TABLETS/iPAD
   When navigation is at bottom, dropdown opens UPWARD
   =========================== */

@media (min-width: 769px) and (max-width: 1024px) {
    /* Dropdown nach OBEN öffnen auf Tablets */
    .video-dropdown-menu {
        top: auto !important;
        bottom: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        z-index: 100000 !important;
    }
    
    /* Pfeil nach oben zeigen wenn offen */
    .video-dropdown.open .dropdown-arrow {
        transform: rotate(0deg) !important;
    }
    
    .video-dropdown .dropdown-arrow {
        transform: rotate(180deg) !important;
    }
}

/* Auch für mobile Navigation unten */
@media (max-width: 768px) {
    .video-dropdown-menu {
        top: auto !important;
        bottom: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        z-index: 100000 !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(-5px) !important;
    }
    
    .video-dropdown.open .video-dropdown-menu {
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* ===========================
   iOS SAFARI VIDEO FIX
   =========================== */

/* Ensure video controls are accessible on iOS */
#video-player {
    -webkit-playsinline: true;
    touch-action: manipulation;
}

.video-modal {
    -webkit-overflow-scrolling: touch;
}

/* iOS safe area for video modal */
@supports (padding: max(0px)) {
    .video-modal-content {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}


/* ===========================
   iOS VIDEO CONTROLS FIX
   Ensure video controls are clickable
   =========================== */

/* Make sure video is above any overlays */
#video-player {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Video modal content should not block video controls */
.video-modal-content {
    pointer-events: auto !important;
}

/* Ensure close button doesn't overlap video controls on mobile */
@media (max-width: 768px) {
    .video-modal-close {
        top: -45px !important;
        right: 0 !important;
        z-index: 20 !important;
    }
    
    .video-modal-content {
        margin-top: 50px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .video-modal-close {
        top: -45px !important;
        right: 0 !important;
        z-index: 20 !important;
    }
    
    .video-modal-content {
        margin-top: 50px !important;
    }
}