/* ============================================================================
   RADIM MOBILE NAVIGATION - COMPLETE MOBILE EXPERIENCE
   Version: 2.0.0 - Full rewrite
   Date: 2026-01-10
   
   STRUCTURE:
   - Mobile menu (sidebar) = fullscreen hlavní obrazovka
   - Sections = fullscreen s back buttonem
   ============================================================================ */

/* ============================================================================
   MOBILE BREAKPOINT (< 768px)
   ============================================================================ */

@media screen and (max-width: 1024px) {

    /* ─────────────────────────────────────────────────────────────────
       BASE RESETS
       ───────────────────────────────────────────────────────────────── */
    html, body {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-text-size-adjust: 100% !important;
    }
    
    /* Prevent iOS zoom on input focus */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* ─────────────────────────────────────────────────────────────────
       TOP BAR → COMPACT INFO STRIP (below mobile-section-header)
       Shows date, nameday, weather. Hides logo & header-right.
       ───────────────────────────────────────────────────────────────── */
    .top-bar {
        position: fixed !important;
        top: 48px !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        min-height: 34px !important;
        z-index: 299 !important;
        padding: 4px 10px !important;
        background: rgba(91, 168, 160, 0.92) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        justify-content: center !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
    .topbar, #topBar {
        display: none !important;
    }
    .top-bar .logo,
    .top-bar .header-right {
        display: none !important;
    }
    .top-bar .header-info-center {
        display: flex !important;
        gap: 6px !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .top-bar .header-info-center .header-date,
    .top-bar .header-info-center .header-nameday,
    .top-bar .header-info-center .header-weather {
        font-size: 0.72rem !important;
        padding: 2px 8px !important;
        color: white !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 12px !important;
        white-space: nowrap !important;
    }
    .top-bar .header-info-center .header-divider {
        display: none !important;
    }
    
    /* ─────────────────────────────────────────────────────────────────
       HIDE DESKTOP RIGHT PANEL & BOTTOM BAR
       ───────────────────────────────────────────────────────────────── */
    .right-panel,
    aside.right-panel {
        display: none !important;
    }
    
    .bottom-bar {
        display: none !important;
    }
    
    /* ─────────────────────────────────────────────────────────────────
       ACTIVATION OVERLAY & SPLASH - Allow on mobile
       ───────────────────────────────────────────────────────────────── */
    .radim-activation-overlay,
    .radim-splash,
    #activation-overlay,
    #splash {
        z-index: 10000 !important;
    }

    /* Splash title — smaller on mobile */
    .radim-splash h1,
    .splash-title {
        font-size: 2rem !important;
    }
    .splash-subtitle {
        font-size: 0.9rem !important;
    }
    .splash-avatar {
        width: 260px !important;
        height: auto !important;
        max-width: 85vw !important;
        overflow: hidden !important;
    }
    .splash-avatar-img {
        width: 260px !important;
        height: auto !important;
        max-width: 85vw !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        filter: none !important;
        margin: -18% 0 !important;
    }
    
    /* ─────────────────────────────────────────────────────────────────
       MAIN CONTAINER
       ───────────────────────────────────────────────────────────────── */
    /* Container + dashboard layout handled by sidebar-fix.css (scrollable) */
    
    /* ═══════════════════════════════════════════════════════════════════
       SIDEBAR = BOTTOM TAB BAR (handled by sidebar-fix.css)
       Only keep items that don't conflict with bottom tab bar design.
       ═══════════════════════════════════════════════════════════════════ */

    /* Hide ::before pseudo-element (old Radim Care sidebar header) */
    .sidebar::before,
    aside.sidebar::before {
        content: '' !important;
        display: none !important;
    }

    /* Hide dev tools on mobile */
    .sidebar button.audio-test-button,
    aside.sidebar button.audio-test-button {
        display: none !important;
    }
    .sidebar button[onclick*="'soul'"],
    aside.sidebar button[onclick*="'soul'"] {
        display: none !important;
    }
    
    /* ─────────────────────────────────────────────────────────────────
       MOBILE BACK BUTTON HEADER (Added via JS)
       ───────────────────────────────────────────────────────────────── */
    .mobile-section-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 48px !important;
        background: linear-gradient(135deg, var(--radim-teal) 0%, var(--radim-teal-light) 100%) !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 10px !important;
        z-index: 300 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
        gap: 6px !important;
    }
    
    .mobile-back-btn {
        height: 44px !important;
        padding: 0 12px !important;
        border: none !important;
        background: rgba(255,255,255,0.2) !important;
        border-radius: 10px !important;
        color: white !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .mobile-back-btn:active {
        background: rgba(255,255,255,0.3) !important;
        transform: scale(0.95);
    }
    
    /* ─── HAMBURGER BUTTON (right side of header) ─── */
    .mobile-hamburger-btn {
        width: 44px !important;
        height: 44px !important;
        border: none !important;
        background: rgba(255,255,255,0.2) !important;
        border-radius: 10px !important;
        color: white !important;
        font-size: 1.2rem !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 12px !important;
        flex-shrink: 0 !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .mobile-hamburger-btn:active {
        background: rgba(255,255,255,0.3) !important;
        transform: scale(0.95);
    }
    
    /* ─── SOS BUTTON (red, compact in header) ─── */
    .mobile-sos-btn {
        width: 44px !important;
        height: 44px !important;
        border: none !important;
        background: #e53e3e !important;
        border-radius: 10px !important;
        color: white !important;
        font-size: 1rem !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        -webkit-tap-highlight-color: transparent !important;
        box-shadow: 0 2px 6px rgba(229, 62, 62, 0.3) !important;
    }
    
    .mobile-sos-btn:active {
        background: #c53030 !important;
        transform: scale(0.95);
    }
    
    .mobile-section-title {
        flex: 1 !important;
        color: white !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
    }
    
    /* Menu overlay styles are in sidebar-fix.css (higher cascade priority) */

    /* ─── DARK BACKDROP (behind overlay) ─── */
    .mobile-menu-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 240; /* Below sidebar overlay (250), above main-panel (200) */
        transition: opacity 0.3s ease;
        opacity: 0;
    }
    .mobile-menu-backdrop.visible {
        display: block;
        opacity: 1;
    }
    
    /* ─── MENU GROUP DIVIDERS ─── */
    .mobile-menu-divider {
        padding: 10px 20px 6px 20px !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        color: rgba(91, 168, 160, 0.6) !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        border-top: 1px solid rgba(91, 168, 160, 0.1) !important;
        margin-top: 4px !important;
    }
    .mobile-menu-divider span {
        display: block;
    }
    
    /* ─── HIDE DEV ITEMS ON MOBILE ─── */
    /* Soul (Duše Radima) is now visible ✅ */
    
    /* ═══════════════════════════════════════════════════════════════════
       CONTENT ADJUSTMENTS FOR MOBILE
       ═══════════════════════════════════════════════════════════════════ */
    
    /* Hide desktop-only elements */
    .glow-ring,
    #kafanekOverlay,
    .desktop-only,
    .hide-on-mobile {
        display: none !important;
    }

    /* Kafánek avatar — compact on mobile (v431) */
    .kafanek-avatar {
        display: flex !important;
        width: 100px !important;
        height: 100px !important;
        margin: 0 auto 4px !important;
        order: -1;
    }

    .kafanek-avatar-wrapper {
        display: block !important;
        width: 100px !important;
        height: 100px !important;
    }

    /* Kafanek panel — flex column on mobile */
    .kafanek-panel {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 12px !important;
        grid-template-columns: 1fr !important;
    }

    .kafanek-panel > * {
        grid-area: unset !important;
        grid-column: unset !important;
        grid-row: unset !important;
        place-self: unset !important;
        width: 100% !important;
    }

    .kafanek-content {
        width: 100% !important;
    }

    .kafanek-content h2 {
        font-size: 1.3rem !important;
        text-align: center !important;
        margin-bottom: 4px !important;
    }

    /* Hide subtitle on mobile — saves space, greeting bubble is enough */
    .kafanek-content .subtitle {
        display: none !important;
    }
    
    .status-display {
        padding: 12px !important;
        text-align: center !important;
        font-size: 0.9rem !important;
    }
    
    .kafanek-bubble {
        padding: 14px !important;
        margin: 12px 0 !important;
        border-radius: 14px !important;
        font-size: 0.95rem !important;
    }
    
    /* Quick chat */
    .quick-chat {
        padding: 12px !important;
    }
    
    .chat-input-field,
    #quickChatInput {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
    }
    
    .chat-actions {
        display: flex !important;
        gap: 10px !important;
    }
    
    .chat-actions button {
        flex: 1 !important;
        min-height: 48px !important;
        font-size: 0.95rem !important;
        border-radius: 12px !important;
        padding: 10px !important;
    }
    
    /* Info cards */
    .info-cards-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 16px 0 !important;
    }
    
    .info-card {
        width: 100% !important;
        padding: 14px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }
    
    /* Environment summary */
    .env-summary {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px 12px !important;
        justify-content: center !important;
        padding: 10px !important;
        font-size: 0.85rem !important;
    }
    
    /* Math panel */
    #radimMathPanel,
    .radim-math-widget {
        padding: 12px !important;
        margin: 12px 0 !important;
    }
    
    /* Consciousness section */
    .consciousness-section {
        padding: 12px !important;
        margin-top: 16px !important;
    }
    
    .consciousness-section h2 {
        font-size: 1.2rem !important;
    }
    
    /* ─────────────────────────────────────────────────────────────────
       CHAT MODULE - FULLSCREEN
       ───────────────────────────────────────────────────────────────── */
    #module-chat {
        padding: 88px 0 0 0 !important;
    }

    #module-chat h2,
    #module-chat > p.text-muted {
        display: none !important;
    }

    #radim-chat-container {
        position: absolute !important;
        top: 88px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    
    /* Messenger simple mode - no border radius on mobile */
    .wa-messenger {
        border-radius: 0 !important;
        height: 100% !important;
    }
    .wa-chat-header {
        border-radius: 0 !important;
    }
    
    /* ─────────────────────────────────────────────────────────────────
       NEWS MODULE
       ───────────────────────────────────────────────────────────────── */
    #module-news h2 {
        font-size: 1.3rem !important;
        margin-bottom: 8px !important;
    }
    
    .news-widget {
        padding: 14px !important;
        margin-bottom: 14px !important;
        border-radius: 12px !important;
    }
    
    .news-categories-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .news-category-btn {
        padding: 10px 8px !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
        min-height: 44px !important;
    }
    
    /* ─────────────────────────────────────────────────────────────────
       QUIZ MODULE
       ───────────────────────────────────────────────────────────────── */
    #module-quiz h2 {
        font-size: 1.3rem !important;
    }
    
    #quizContent .info-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    #quizDisplay {
        padding: 12px !important;
    }
    
    /* ─────────────────────────────────────────────────────────────────
       SEARCH
       ───────────────────────────────────────────────────────────────── */
    .search-box {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .search-input,
    #internetSearchInput {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }
    
    .search-button {
        width: 100% !important;
        padding: 12px !important;
        border-radius: 8px !important;
        min-height: 44px !important;
    }
    
    /* ─────────────────────────────────────────────────────────────────
       MESSENGER V3 - FULLSCREEN
       ───────────────────────────────────────────────────────────────── */
    .radim-messenger-v3 {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 60px !important;
        z-index: 1050 !important;
        border-radius: 0 !important;
    }
    
    /* ─────────────────────────────────────────────────────────────────
       EMERGENCY SYSTEM
       ───────────────────────────────────────────────────────────────── */
    .emergency-overlay {
        z-index: 5000 !important;
    }
    
    .emergency-modal {
        width: 90% !important;
        max-width: 360px !important;
        margin: auto !important;
        border-radius: 20px !important;
        padding: 20px !important;
    }
    
    /* ─────────────────────────────────────────────────────────────────
       CLIENT MANAGER
       ───────────────────────────────────────────────────────────────── */
    .client-registration-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
    }
    
    /* ─────────────────────────────────────────────────────────────────
       FLOATING CHAT BUTTON
       ───────────────────────────────────────────────────────────────── */
    .radim-floating-chat-btn {
        bottom: 20px !important;
        right: 20px !important;
        width: 56px !important;
        height: 56px !important;
        z-index: 500 !important;
    }
    
    /* Hide when menu is visible */
    body:not(.section-open) .radim-floating-chat-btn {
        display: none !important;
    }
    
    /* ─────────────────────────────────────────────────────────────────
       NOTES, TASKS, OTHER MODULES
       ───────────────────────────────────────────────────────────────── */
    #module-notes h2,
    #module-tasks h2,
    #module-lessons h2,
    #module-stories h2,
    #module-library h2,
    #module-email h2,
    #module-gallery h2,
    #module-exercises h2,
    #module-calendar h2,
    #module-soul h2,
    #module-settings h2 {
        font-size: 1.3rem !important;
        margin-bottom: 12px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   SAFE AREA SUPPORT (iPhone notch)
   ═══════════════════════════════════════════════════════════════════ */
@supports (padding-top: env(safe-area-inset-top)) {
    @media screen and (max-width: 1024px) {
        /* Sidebar is bottom nav — only add safe-area-inset-bottom */
        aside.sidebar,
        aside.sidebar.menu-hidden {
            padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
        }

        /* Header = 48px + safe-area-inset-top */
        .mobile-section-header {
            padding-top: env(safe-area-inset-top) !important;
            height: calc(48px + env(safe-area-inset-top)) !important;
        }

        /* Overlay top offset follows header safe-area */
        aside.sidebar.menu-overlay {
            top: calc(48px + env(safe-area-inset-top)) !important;
        }

        /* Top-bar sits below header (48px) */
        .top-bar {
            top: calc(48px + env(safe-area-inset-top)) !important;
        }

        /* Module content: 48px header + 34px info-strip + safe-area + 6px gap */
        .module-section {
            padding-top: calc(88px + env(safe-area-inset-top)) !important;
        }
    }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET (769px - 1024px) — Additional tablet-specific tweaks
   Bottom nav + mobile header inherited from main ≤1024px breakpoint
   ═══════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .info-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .module-section h2 {
        font-size: 1.3rem !important;
        margin-bottom: 0.8rem !important;
    }

    /* Kafanek panel — stack on tablet */
    .kafanek-panel {
        grid-template-columns: 1fr !important;
        padding: 1.2rem !important;
    }

    /* Sidebar bottom nav — larger buttons on tablet for accessibility */
    aside.sidebar button {
        max-width: 88px !important;
        min-height: 60px !important;
    }
    aside.sidebar button span:first-child {
        font-size: 1.7rem !important;
    }
    aside.sidebar button span:last-child {
        font-size: 0.75rem !important;
        max-width: 76px !important;
    }
}