/**
 * SC-Tower - Responsive Scaling Fix
 * Problem: Okienka nie skalują się przy zmniejszaniu przeglądarki
 * Rozwiązanie: Używamy % zamiast minmax() dla elastyczności
 */

/* ============================================
   BASE LAYOUT - Elastyczny Grid
   ============================================ */

/* Desktop - domyślny layout (≥1024px) */
@media (min-width: 1024px) {
    .main-content-new {
        display: grid !important;
        grid-template-columns: 20% 1fr 25% !important;
        grid-template-rows: auto !important;
        gap: 15px !important;
        padding: 15px !important;
        min-height: calc(100vh - 80px) !important;
        overflow: visible !important;
    }
    
    .sidebar-left,
    .content-center-new,
    .sidebar-right-new {
        min-width: 0 !important; /* Pozwól na zmniejszanie */
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}

/* Small Desktop (1024px - 1399px) */
@media (min-width: 1024px) and (max-width: 1399px) {
    .main-content-new {
        grid-template-columns: 18% 1fr 27% !important;
        gap: 12px !important;
        padding: 12px !important;
    }
    
    .panel {
        padding: 10px !important;
    }
    
    .panel h3 {
        font-size: 14px !important;
    }
}

/* Large Desktop (1400px - 1919px) */
@media (min-width: 1400px) and (max-width: 1919px) {
    .main-content-new {
        grid-template-columns: 20% 1fr 25% !important;
        gap: 15px !important;
        padding: 15px !important;
    }
}

/* Full HD (1920px - 2559px) */
@media (min-width: 1920px) and (max-width: 2559px) {
    .main-content-new {
        grid-template-columns: 18% 1fr 22% !important;
        gap: 20px !important;
        padding: 20px !important;
        max-width: 1800px !important;
        margin: 0 auto !important;
    }
}

/* 2K/QHD (2560px - 3839px) */
@media (min-width: 2560px) and (max-width: 3839px) {
    :root {
        font-size: 16px;
    }
    
    .main-content-new {
        grid-template-columns: 17% 1fr 20% !important;
        gap: 25px !important;
        padding: 25px !important;
        max-width: 2400px !important;
        margin: 0 auto !important;
    }
    
    .app-header {
        max-width: 2400px !important;
        margin: 0 auto !important;
    }
}

/* 4K Ultra Wide (3840px+) */
@media (min-width: 3840px) {
    :root {
        font-size: 18px;
    }
    
    .main-content-new {
        grid-template-columns: 15% 1fr 18% !important;
        gap: 30px !important;
        padding: 30px !important;
        max-width: 3600px !important;
        margin: 0 auto !important;
    }
    
    .app-header {
        max-width: 3600px !important;
        margin: 0 auto !important;
    }
    
    .panel {
        padding: 25px !important;
    }
}

/* ============================================
   FLEXIBLE PANELS - Reagują na szerokość
   ============================================ */

.panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.panel h3 {
    font-size: clamp(12px, 1.5vw, 18px) !important;
    word-wrap: break-word !important;
}

/* Flight items i location cards */
.flight-item,
.location-card {
    font-size: clamp(11px, 1.2vw, 14px) !important;
    padding: clamp(8px, 1vw, 15px) !important;
    word-wrap: break-word !important;
}

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

.tab-btn {
    flex: 1 1 auto !important;
    min-width: 80px !important;
    font-size: clamp(10px, 1vw, 13px) !important;
    padding: clamp(6px, 0.8vw, 10px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ============================================
   OVERFLOW PROTECTION
   ============================================ */

body {
    overflow-x: hidden !important;
}

.screen {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

.main-content-new,
.sidebar-left,
.sidebar-right-new,
.content-center-new {
    box-sizing: border-box !important;
}

/* Zapobieganie wylewaniu się treści */
* {
    box-sizing: border-box;
}

img,
video {
    max-width: 100% !important;
    height: auto !important;
}

/* ============================================
   HEADER - Elastyczny
   ============================================ */

.app-header {
    padding: clamp(10px, 1.5vw, 20px) !important;
}

.app-header .header-left h1 {
    font-size: clamp(16px, 2vw, 28px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.live-clock {
    font-size: clamp(12px, 1.2vw, 16px) !important;
}

/* ============================================
   INPUTS & BUTTONS - Elastyczne
   ============================================ */

input,
select,
textarea,
button {
    font-size: clamp(12px, 1.2vw, 15px) !important;
    padding: clamp(6px, 1vw, 12px) !important;
}

/* ============================================
   SCROLLBARS - Delikatne
   ============================================ */

.sidebar-left::-webkit-scrollbar,
.sidebar-right-new::-webkit-scrollbar,
.content-center-new::-webkit-scrollbar {
    width: 6px;
}

.sidebar-left::-webkit-scrollbar-track,
.sidebar-right-new::-webkit-scrollbar-track,
.content-center-new::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.sidebar-left::-webkit-scrollbar-thumb,
.sidebar-right-new::-webkit-scrollbar-thumb,
.content-center-new::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 3px;
}