/**
 * SC-SRS - Mobile System v4
 * Kompletnie przeprojektowany system dla mobile
 * - Tylko środkowa kolumna widoczna domyślnie
 * - FAB buttons w dolnych rogach
 * - Sidebary jako full-screen overlays
 */

/* ============================================
   MOBILE BASE (<768px)
   ============================================ */
@media (max-width: 767px) {
    /* Body i overflow */
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Header - fixed na górze */
    .app-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 900 !important;
        padding: 10px 12px !important;
        background: var(--bg-panel) !important;
        border-bottom: 2px solid var(--accent-primary) !important;
    }

    .app-header .header-left h1 {
        font-size: 16px !important;
    }

    .live-clock {
        font-size: 12px !important;
    }

    /* Main content - tylko środkowa kolumna */
    .main-content-new {
        display: block !important;
        grid-template-columns: none !important;
        padding: 70px 10px 10px 10px !important; /* Top padding for fixed header */
        gap: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    /* Ukryj oba sidebary domyślnie */
    .sidebar-left,
    .sidebar-right-new {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1000 !important;
        background: var(--bg-panel) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 60px 15px 15px 15px !important;
    }

    /* Pokaż TYLKO środkową kolumnę */
    .content-center-new {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Sidebary jako full-screen overlay gdy otwarte */
    .sidebar-left.mobile-open,
    .sidebar-right-new.mobile-open {
        display: flex !important;
        flex-direction: column !important;
        animation: slideInFromBottom 0.3s ease-out !important;
    }

    @keyframes slideInFromBottom {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    /* FAB Buttons - Floating Action Buttons w dolnych rogach */
    .mobile-fab-left,
    .mobile-fab-right {
        position: fixed !important;
        bottom: 20px !important;
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        background: var(--accent-primary) !important;
        color: var(--bg-primary) !important;
        border: none !important;
        font-size: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(0, 217, 255, 0.6) !important;
        cursor: pointer !important;
        z-index: 899 !important;
        transition: all 0.3s ease !important;
    }

    .mobile-fab-left {
        left: 20px !important;
    }

    .mobile-fab-right {
        right: 20px !important;
    }

    .mobile-fab-left:active,
    .mobile-fab-right:active {
        transform: scale(0.95) !important;
        box-shadow: 0 2px 8px rgba(0, 217, 255, 0.8) !important;
    }

    /* Close button dla overlays */
    .mobile-overlay-close {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        width: 40px !important;
        height: 40px !important;
        background: var(--accent-primary) !important;
        color: var(--bg-primary) !important;
        border: none !important;
        border-radius: 50% !important;
        font-size: 24px !important;
        font-weight: bold !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 1001 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    /* Overlay backdrop */
    .mobile-overlay-backdrop {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.7) !important;
        z-index: 999 !important;
    }

    .mobile-overlay-backdrop.active {
        display: block !important;
    }

    /* Panels - kompaktowe */
    .panel {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }

    .panel h3 {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    /* Tabs - responsive */
    .tab-navigation {
        flex-wrap: wrap !important;
        gap: 5px !important;
    }

    .tab-btn {
        flex: 1 1 48% !important;
        font-size: 11px !important;
        padding: 8px 4px !important;
    }

    /* Flight items i location cards - kompaktowe */
    .flight-item,
    .location-card {
        padding: 10px !important;
        font-size: 12px !important;
        margin-bottom: 8px !important;
    }

    /* Forms - czytelne */
    input,
    button,
    select,
    textarea {
        font-size: 14px !important;
        padding: 10px !important;
    }

    /* Ukryj stare mobile controls */
    .mobile-sidebar-controls {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }
}

/* ============================================
   MOBILE SMALL (<480px)
   ============================================ */
@media (max-width: 479px) {
    .mobile-fab-left,
    .mobile-fab-right {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
        bottom: 15px !important;
    }

    .mobile-fab-left {
        left: 15px !important;
    }

    .mobile-fab-right {
        right: 15px !important;
    }

    .app-header .header-left h1 {
        font-size: 14px !important;
    }

    .panel {
        padding: 10px !important;
    }

    .panel h3 {
        font-size: 13px !important;
    }

    .tab-btn {
        font-size: 10px !important;
        padding: 6px 3px !important;
    }
}
/* Fix dark overlay - make backdrop lighter and sidebar brighter */

@media (max-width: 767px) {
    /* Backdrop - jaśniejszy, mniej przesłaniający */
    .mobile-overlay-backdrop {
        background: rgba(0, 0, 0, 0.3) !important; /* Zmniejszono z 0.7 do 0.3 */
    }

    .mobile-overlay-backdrop.active {
        display: block !important;
    }

    /* Sidebar overlay - jasne tło, wyraźne */
    .sidebar-left.mobile-open,
    .sidebar-right-new.mobile-open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1000 !important;
        background: var(--bg-panel) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 60px 15px 15px 15px !important;
        animation: slideInFromBottom 0.3s ease-out !important;
        box-shadow: 0 0 30px rgba(0, 217, 255, 0.3) !important; /* Dodano świecenie */
    }

    /* Close button - bardziej widoczny */
    .mobile-overlay-close {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        width: 45px !important;
        height: 45px !important;
        background: var(--accent-primary) !important;
        color: var(--bg-primary) !important;
        border: none !important;
        border-radius: 50% !important;
        font-size: 28px !important;
        font-weight: bold !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 1001 !important;
        box-shadow: 0 4px 15px rgba(0, 217, 255, 0.6) !important;
    }

    /* Ukryj FAB buttons gdy sidebar otwarty */
    .mobile-fab-left,
    .mobile-fab-right {
        z-index: 899 !important; /* Poniżej sidebara */
    }
}