/**
 * SC-SRS - Responsive Enhancement System v2
 * Fixes dla wszystkich rozdzielczości: 4K, 2K, Full HD, tablety, telefony
 * v2: Dodano przełączanie między lewym i prawym sidebarem na mobile
 *
 * Breakpoints:
 * - 4K Ultra Wide: 3840px+
 * - 2K/QHD: 2560px - 3839px
 * - Full HD: 1920px - 2559px
 * - Desktop: 1400px - 1919px
 * - Laptop: 1200px - 1399px
 * - Small Laptop: 1024px - 1199px
 * - Tablet Landscape: 768px - 1023px
 * - Tablet Portrait: 600px - 767px
 * - Mobile Large: 480px - 599px
 * - Mobile Small: 375px - 479px
 * - Mobile Tiny: <375px
 */

/* ============================================
   CORE FIXES - Override problematic defaults
   ============================================ */

/* Fix login container dla małych ekranów */
.login-container {
    min-width: clamp(280px, 90vw, 400px) !important;
    padding: clamp(20px, 5vw, 40px) !important;
}

.login-container .logo h1 {
    font-size: clamp(32px, 8vw, 48px) !important;
}

/* Fix głównego layoutu - flexible widths */
.main-content-new {
    grid-template-columns: minmax(240px, 300px) 1fr minmax(320px, 380px) !important;
    gap: clamp(10px, 1.5vw, 15px) !important;
    padding: clamp(10px, 1.5vw, 15px) !important;
}
/* Ukryj przyciski mobilne domyślnie (widoczne tylko <768px) */
.mobile-sidebar-controls {
    display: none !important;
}

/* ============================================
   4K ULTRA WIDE (3840px+)
   ============================================ */
@media (min-width: 3840px) {
    :root {
        font-size: 18px; /* Zwiększ bazowy font */
    }

    .main-content-new {
        grid-template-columns: minmax(400px, 500px) 1fr minmax(500px, 600px) !important;
        gap: 30px !important;
        padding: 30px !important;
        max-width: 3600px;
        margin: 0 auto;
    }

    .app-header {
        padding: 25px 40px !important;
        max-width: 3600px;
        margin: 0 auto;
    }

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

    .panel {
        padding: 25px !important;
    }

    .flight-item, .location-card {
        padding: 20px !important;
        font-size: 16px !important;
    }
}

/* ============================================
   2K/QHD (2560px - 3839px)
   ============================================ */
@media (min-width: 2560px) and (max-width: 3839px) {
    :root {
        font-size: 16px;
    }

    .main-content-new {
        grid-template-columns: minmax(350px, 400px) 1fr minmax(400px, 480px) !important;
        gap: 25px !important;
        padding: 25px !important;
        max-width: 2400px;
        margin: 0 auto;
    }

    .app-header {
        padding: 20px 30px !important;
        max-width: 2400px;
        margin: 0 auto;
    }

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

    .panel {
        padding: 20px !important;
    }
}

/* ============================================
   FULL HD (1920px - 2559px)
   ============================================ */
@media (min-width: 1920px) and (max-width: 2559px) {
    .main-content-new {
        grid-template-columns: minmax(300px, 350px) 1fr minmax(380px, 420px) !important;
        gap: 20px !important;
        padding: 20px !important;
    }

    .app-header {
        padding: 18px 25px !important;
    }
}

/* ============================================
   DESKTOP (1400px - 1919px) - Default
   ============================================ */
@media (min-width: 1400px) and (max-width: 1919px) {
    .main-content-new {
        grid-template-columns: minmax(280px, 300px) 1fr minmax(340px, 380px) !important;
        gap: 15px !important;
        padding: 15px !important;
    }
}

/* ============================================
   LAPTOP (1200px - 1399px)
   ============================================ */
@media (min-width: 1200px) and (max-width: 1399px) {
    .main-content-new {
        grid-template-columns: minmax(220px, 260px) 1fr minmax(300px, 340px) !important;
        gap: 12px !important;
        padding: 12px !important;
    }

    .panel {
        padding: 12px !important;
    }

    .flight-item, .location-card {
        padding: 10px !important;
        font-size: 13px !important;
    }
}

/* ============================================
   SMALL LAPTOP / TABLET LANDSCAPE (1024px - 1199px)
   Hybrid: 2 columns + collapsible sidebar
   ============================================ */
@media (min-width: 1024px) and (max-width: 1199px) {
    .main-content-new {
        grid-template-columns: minmax(200px, 240px) 1fr minmax(280px, 320px) !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    .panel {
        padding: 10px !important;
    }

    .sidebar-left .panel h3,
    .sidebar-right-new .panel h3 {
        font-size: 14px !important;
    }

    .flight-item, .location-card {
        padding: 8px !important;
        font-size: 12px !important;
    }

    .organization-panel,
    .stats-section {
        display: none !important;
    }
}

/* ============================================
   TABLET LANDSCAPE (768px - 1023px)
   2 kolumny: Center + Right sidebar
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .main-content-new {
        grid-template-columns: 1fr minmax(280px, 320px) !important;
        grid-template-rows: auto !important;
        gap: 10px !important;
        padding: 10px !important;
        height: auto !important;
        min-height: calc(100vh - 80px) !important;
    }

    .sidebar-left {
        display: none !important;
    }

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

    .sidebar-left.mobile-open {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        z-index: 999;
        background: var(--bg-panel);
        border-right: 2px solid var(--accent-primary);
        box-shadow: 5px 0 20px rgba(0, 0, 0, 0.5);
        animation: slideInLeft 0.3s ease-out;
        overflow-y: auto;
    }

    @keyframes slideInLeft {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0);
        }
    }

    .app-header {
        padding: 12px 15px !important;
        padding-left: 60px !important;
    }

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

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

/* ============================================
   MOBILE (< 768px)
   Single column + Dual sidebar switcher
   ============================================ */
@media (max-width: 767px) {
    .main-content-new {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 10px !important;
        padding: 10px !important;
        padding-top: 60px !important; /* Space for mobile header */
        height: auto !important;
    }

    /* Ukryj oba sidebary domyślnie */
    .sidebar-left,
    .sidebar-right-new {
        display: none !important;
    }

    /* Mobile header z przyciskami */
    .mobile-sidebar-controls {
        display: flex !important;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 998;
        background: var(--bg-panel);
        border-bottom: 2px solid var(--accent-primary);
        padding: 8px;
        gap: 8px;
        justify-content: space-between;
    }

    .mobile-sidebar-btn {
        flex: 1;
        background: var(--bg-secondary);
        border: 1px solid var(--accent-primary);
        color: var(--accent-primary);
        padding: 10px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    .mobile-sidebar-btn:active {
        background: var(--accent-primary);
        color: var(--bg-primary);
    }

    .mobile-sidebar-btn.active {
        background: var(--accent-primary);
        color: var(--bg-primary);
        box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
    }

    /* Sidebar jako slide-in panels */
    .sidebar-left.mobile-open,
    .sidebar-right-new.mobile-open {
        display: flex !important;
        position: fixed;
        top: 110px; /* Po headerze i przyciskach */
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 997;
        background: var(--bg-panel);
        overflow-y: auto;
        animation: slideInUp 0.3s ease-out;
        padding: 10px;
    }

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

    /* Header adjustments */
    .app-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        padding: 10px 12px !important;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background: var(--bg-panel);
        border-bottom: 2px solid var(--accent-primary);
    }

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

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

    /* Content center adjustment */
    .content-center-new {
        margin-top: 50px; /* Space for controls */
    }

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

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

    /* Panels */
    .panel {
        padding: 10px !important;
        border-radius: 6px !important;
    }

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

    .flight-item, .location-card {
        padding: 8px !important;
        font-size: 11px !important;
    }

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

/* ============================================
   MOBILE SMALL (< 480px)
   ============================================ */
@media (max-width: 479px) {
    .main-content-new {
        padding: 5px !important;
        padding-top: 60px !important;
    }

    .mobile-sidebar-controls {
        top: 50px;
        padding: 5px;
        gap: 5px;
    }

    .mobile-sidebar-btn {
        font-size: 11px !important;
        padding: 8px 4px !important;
    }

    .sidebar-left.mobile-open,
    .sidebar-right-new.mobile-open {
        top: 100px;
    }

    .app-header {
        padding: 8px !important;
    }

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

    .panel {
        padding: 8px !important;
    }

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

    .tab-btn {
        font-size: 10px !important;
        padding: 6px 3px !important;
    }

    input, button, select {
        font-size: 13px !important;
        padding: 8px !important;
    }
}

/* ============================================
   MOBILE TINY (<375px)
   ============================================ */
@media (max-width: 374px) {
    .mobile-sidebar-btn {
        font-size: 10px !important;
        padding: 6px 3px !important;
    }

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

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

    .flight-item, .location-card {
        padding: 6px !important;
        font-size: 10px !important;
    }
}

/* ============================================
   MOBILE MENU OVERLAY
   ============================================ */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 996;
}

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

/* ============================================
   MOBILE CLOSE BUTTON (dla tablet landscape)
   ============================================ */
.mobile-menu-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: var(--accent-primary);
    font-size: 30px;
    cursor: pointer;
    padding: 5px 10px;
    line-height: 1;
    z-index: 10;
}

@media (max-width: 767px) {
    .mobile-menu-close {
        display: none !important;
    }
}

/* ============================================
   HIDE MENU TOGGLE (old hamburger)
   ============================================ */
.mobile-menu-toggle {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .mobile-menu-toggle {
        display: block !important;
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1000;
        background: var(--bg-panel);
        border: 2px solid var(--accent-primary);
        border-radius: 8px;
        padding: 10px 15px;
        color: var(--accent-primary);
        font-size: 24px;
        cursor: pointer;
        box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.hide-mobile {
    display: block;
}

@media (max-width: 1023px) {
    .hide-mobile {
        display: none !important;
    }
}

.show-mobile {
    display: none;
}

@media (max-width: 1023px) {
    .show-mobile {
        display: block !important;
    }
}

/* ============================================
   OVERFLOW FIXES
   ============================================ */
@media (max-width: 1023px) {
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .screen {
        overflow-x: hidden !important;
    }

    .main-content-new {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}

/* ============================================
   PREVENT OVERLAPPING PANELS
   ============================================ */
.panel {
    position: relative;
    z-index: 1;
}

.sidebar-left,
.sidebar-right-new,
.content-center-new {
    position: relative;
    z-index: 1;
}

@media (max-width: 1023px) {
    .sidebar-left.mobile-open,
    .sidebar-right-new.mobile-open {
        z-index: 997 !important;
    }
}