/**
 * ATC Dashboard - Mobile Responsive v2.0
 * Tam mobil uygulama deneyimi
 * Breakpoints: 1200px, 992px, 768px, 480px
 */

/* ============================================
   GLOBAL MOBİL TEMELLERİ
   ============================================ */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* iOS input zoom önleme */
@media (max-width: 992px) {
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="tel"],
    input[type="url"], textarea, select {
        font-size: 16px !important;
    }
}

/* ============================================
   HAMBURGER MENÜ BUTONU
   ============================================ */
.mobile-hamburger {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 310;
    width: 44px;
    height: 44px;
    background: rgba(22, 32, 50, 0.95);
    border: 1px solid #1e2733;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    color: #4ade80;
    font-size: 20px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.2s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.mobile-hamburger:active {
    transform: scale(0.92);
    background: rgba(74, 222, 128, 0.15);
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 199;
    opacity: 0;
    transition: opacity 0.3s;
    backdrop-filter: blur(2px);
}
.sidebar-backdrop.active { opacity: 1; }

/* Harita tam ekran butonu */
.map-fullscreen-btn {
    display: none;
    position: absolute;
    top: 12px; right: 12px;
    z-index: 1000;
    width: 44px; height: 44px;
    background: rgba(22, 32, 50, 0.9);
    border: 1px solid #1e2733;
    border-radius: 8px;
    align-items: center; justify-content: center;
    color: #4ade80; font-size: 16px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: all 0.2s;
}
.map-fullscreen-btn:active { transform: scale(0.9); }
.map-fullscreen-btn i.fa-compress { display: none; }
.map-fullscreen.active .map-fullscreen-btn i.fa-expand { display: none; }
.map-fullscreen.active .map-fullscreen-btn i.fa-compress { display: inline; }

/* ============================================
   TABLET LANDSCAPE (max-width: 1200px)
   ============================================ */
@media (max-width: 1200px) {
    .coord-container { grid-template-columns: 1fr 320px !important; }
    .coord-panel { width: 320px !important; }
    .profile-grid { grid-template-columns: 260px 1fr !important; }
}

/* ============================================
   TABLET PORTRAIT (max-width: 992px)
   ============================================ */
@media (max-width: 992px) {
    .mobile-hamburger { display: flex; }

    /* Sidebar - mobil overlay */
    .sidebar {
        transform: translateX(-100%) !important;
        width: var(--sidebar-width) !important;
        z-index: 300;
        box-shadow: none;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overscroll-behavior: contain;
    }
    .sidebar.mobile-open {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    }
    .sidebar-toggle { display: none !important; }

    .main { margin-left: 0 !important; }
    .sidebar.collapsed ~ .main { margin-left: 0 !important; }

    /* Header */
    .header, .top-header {
        padding-left: 64px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .header-title { font-size: 1rem !important; }
    .page-header { padding-left: 0 !important; flex-wrap: wrap !important; gap: 8px !important; }
    .builder-header { padding-left: 52px !important; flex-wrap: wrap !important; }

    /* Koordinat sayfası */
    .coord-main { height: auto !important; overflow: visible !important; min-height: 100vh !important; }
    .coord-container {
        grid-template-columns: 1fr !important;
        grid-template-rows: 55vh auto !important;
        height: auto !important; min-height: 100vh !important;
    }
    .coord-panel {
        width: 100% !important; overflow-y: auto !important;
        border-left: none !important; border-top: 1px solid #1e2733 !important;
        max-height: none !important; height: auto !important; padding-bottom: 20px !important;
    }
    .map-fullscreen-btn { display: flex; }
    .coord-container.map-fullscreen { grid-template-rows: 100vh !important; }
    .coord-container.map-fullscreen .coord-panel { display: none !important; }

    /* Profil */
    .profile-grid { grid-template-columns: 1fr !important; }
    .profile-card { max-width: 400px; margin: 0 auto; }

    /* Hesaplayıcı */
    .calc-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; }

    /* Footer */
    .app-footer { font-size: 10px !important; padding: 6px 12px !important; }

    /* Genel buton min boyut */
    .btn, button[type="submit"], .nav-item {
        min-height: 44px;
    }
    .btn-sm { min-height: 38px; padding: 6px 14px !important; font-size: 13px !important; }
    .btn-icon, .btn-icon.btn-sm { min-width: 44px; min-height: 44px; }
}

/* ============================================
   PHONE LANDSCAPE / KÜÇÜK TABLET (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    .sidebar-backdrop { display: block; }

    /* Koordinat */
    .coord-container { grid-template-rows: 50vh 1fr !important; }
    .map-toolbar { flex-wrap: wrap !important; max-width: 44px !important; gap: 4px !important; }
    .map-toolbar .tool-btn { width: 44px !important; height: 44px !important; font-size: 16px !important; }
    .map-toolbar .tool-divider { width: 100% !important; height: 1px !important; }
    .mode-indicator { font-size: 12px !important; padding: 6px 12px !important; }
    .map-info { font-size: 12px !important; padding: 6px 10px !important; }

    /* Hava sayfası */
    .btn-group {
        flex-wrap: nowrap !important; gap: 4px !important;
        overflow-x: auto !important; -webkit-overflow-scrolling: touch;
        padding-bottom: 4px !important; max-width: calc(100vw - 120px);
    }
    .btn-group .btn { font-size: 12px !important; padding: 8px 12px !important; white-space: nowrap !important; flex-shrink: 0 !important; min-height: 44px !important; }
    .compass-overlay { width: 200px !important; height: 200px !important; }
    .compass-toggle { font-size: 13px !important; min-height: 44px !important; }
    .weather-info { font-size: 12px !important; padding: 10px 14px !important; max-width: 200px !important; }
    .layer-desc { font-size: 12px !important; padding: 8px 12px !important; }
    .header .header-left, .header .header-right { flex-wrap: wrap !important; gap: 6px !important; }

    /* Hesaplayıcı */
    .calc-main { padding: 12px !important; }
    .calc-main .page-header h1 { font-size: 18px !important; }
    .calc-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

    /* Paneller */
    .panels-grid { grid-template-columns: 1fr !important; }
    .panel-card-actions { flex-wrap: wrap; }
    .panel-card-actions .btn { flex: 1; min-width: 0; text-align: center; }

    /* Tablolar */
    .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 500px; }

    /* Modal */
    .modal { max-width: calc(100vw - 24px) !important; margin: 12px !important; }

    /* Toast */
    .toast-container { left: 8px !important; right: 8px !important; }
    .toast { min-width: auto !important; }

    /* Widget grid - mobilde tek kolon */
    .widget-grid:not(.device-tv):not(.device-desktop) {
        grid-template-columns: 1fr !important;
    }

    /* Tüm widgetlar tek kolon */
    [style*="grid-column: span"] { grid-column: span 1 !important; }

    /* Uçuş sayfası */
    .fl-analysis { flex-wrap: wrap; gap: 8px; }
    .fl-analysis-item { min-width: 100% !important; }
    .fl-icon-btn { min-width: 44px; min-height: 44px; }
    .fl-tog-btn { min-height: 44px; padding: 8px 16px !important; }
    .fl-stat { font-size: 12px; }

    /* Konsol */
    .console-quick-btns {
        position: static !important;
        max-width: 100% !important;
        padding: 8px !important;
        background: var(--bg-secondary) !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        box-shadow: none !important;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    .console-quick-btn { min-height: 38px; padding: 6px 12px !important; font-size: 12px !important; }
    .console-toolbar { flex-wrap: wrap; gap: 8px; }
    .console-airport-select { width: 100%; min-width: 0 !important; }
    .console-input { font-size: 16px !important; }
    .console-send-btn { min-width: 50px; min-height: 44px; }
    .console-entry { border-radius: 0 !important; }

    /* Konsol sonuç tabloları */
    .cmd-table { font-size: 11px; min-width: 400px; }
    .cmd-detail-grid { grid-template-columns: 1fr !important; }
    .cmd-weather-grid { grid-template-columns: 1fr 1fr !important; }
    .cmd-help-grid { grid-template-columns: 1fr !important; }
    .cmd-precip-timeline { flex-wrap: wrap; }
    .cmd-precip-hour { min-width: 55px; flex: 1; }

    /* Radar sayfası */
    .radar-header, .radar-header header {
        flex-wrap: wrap !important; height: auto !important; min-height: 50px;
        padding: 8px 12px !important; gap: 8px !important;
    }
    .radar-header h1 { font-size: 14px !important; }
    .radar-header select { font-size: 13px !important; padding: 6px 10px !important; max-width: 140px; min-height: 44px; }
    .stats-bar { font-size: 12px !important; gap: 8px !important; flex-wrap: wrap; }
    .legend-panel { bottom: 8px !important; right: 8px !important; font-size: 12px !important; padding: 10px !important; }
    .info-panel {
        left: 8px !important; right: 8px !important; bottom: 8px !important;
        min-width: auto !important; max-width: none !important;
        max-height: 40vh !important; overflow-y: auto !important; font-size: 13px !important;
    }

    /* Dashboard üst header */
    .top-header { flex-wrap: wrap !important; gap: 6px !important; min-height: 44px; }
    .top-header .header-title, .top-header h1 { font-size: 13px !important; }

    /* WhatsApp */
    .wa-tab { min-height: 44px; font-size: 13px; }

    /* Kullanıcılar */
    .user-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Cihaz seçim modalı */
    .device-cards { grid-template-columns: 1fr !important; gap: 12px; }
    .device-modal { max-width: 95vw !important; width: 95vw !important; }
    .device-modal-header { padding: 20px 16px 12px; }
    .device-modal-header h2 { font-size: 18px; }

    /* Builder cihaz seçim */
    div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }

    /* Bildirim paneli */
    .notif-panel { width: 100% !important; }
    .mini-console { width: 100% !important; right: 0 !important; max-width: 100% !important; }

    /* Bildirim overlay */
    .notif-card { width: 95vw !important; max-width: 95vw !important; }
    .notif-card-title { font-size: 22px !important; }
    .notif-card-detail { font-size: 15px !important; }
    .notif-card-icon { width: 56px; height: 56px; font-size: 24px; }
}

/* ============================================
   TELEFON (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    .mobile-hamburger { width: 40px; height: 40px; font-size: 18px; top: 8px; left: 8px; }

    .header { height: 52px !important; padding: 0 8px 0 56px !important; }
    .header-title { font-size: 0.85rem !important; }
    .header-right { gap: 6px !important; }
    .header-clock { font-size: 0.85rem !important; }
    .header-clock-label { display: none !important; }

    .sidebar { width: 280px !important; }
    .sidebar-header { padding: 12px 14px !important; }
    .sidebar-title { font-size: 1rem !important; }
    .nav-item { padding: 12px 14px !important; font-size: 14px !important; min-height: 44px !important; }

    .coord-container { grid-template-rows: 45vh 1fr !important; }
    .coord-panel { padding: 10px !important; }

    .color-section { gap: 6px !important; }
    .color-dot { width: 36px !important; height: 36px !important; }

    .profile-main { padding: 8px !important; }
    .profile-card { padding: 16px !important; }
    .profile-avatar { width: 70px !important; height: 70px !important; font-size: 26px !important; }
    .profile-stats { flex-direction: column !important; gap: 8px !important; }

    .calc-card { border-radius: 8px !important; }
    .calc-header { padding: 10px 14px !important; font-size: 13px !important; }
    .calc-body { padding: 12px !important; }

    .app-footer { display: none !important; }

    .content { padding: 10px !important; }
    .page-header { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
    .page-header h1 { font-size: 16px !important; }

    /* Uçuş tablosu - daha kompakt */
    .fl-table th { font-size: 10px; padding: 4px 6px; }
    .fl-table td { padding: 6px; font-size: 12px; }
    .fl-callsign { font-size: 13px; }
    .fl-airline-name { display: none; }

    /* Konsol daha kompakt */
    .console-page { padding: 6px !important; gap: 6px !important; }
    .console-toolbar-title { display: none; }

    /* Dashboard widget'lar */
    .widget { min-height: 70px; border-radius: 8px; }
    .w-label { font-size: 10px !important; }

    /* Builder cihaz seçim */
    div[style*="max-width:960px"] { padding: 0 12px !important; }

    /* Bildirim */
    .notif-card-header { padding: 20px 16px 0; gap: 14px; }
    .notif-card-body { padding: 14px 16px 20px; }
    .notif-card-title { font-size: 20px !important; }
    .notif-card-icon { width: 48px; height: 48px; font-size: 20px; }
}

/* ============================================
   DOKUNMATIK CİHAZ GELİŞTİRMELERİ
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* 44px minimum dokunma alanları */
    .btn, button, .tool-btn, .widget-action, .btn-icon,
    .fl-icon-btn, .fl-tog-btn, .console-quick-btn,
    .date-btn, .modal-close, .dropdown-item, .tab {
        min-height: 44px;
        min-width: 44px;
    }
    .btn-sm { min-height: 40px; }

    /* Hover sticky durumlarını kaldır */
    .nav-item:hover { background: transparent; color: var(--text-secondary); }
    .nav-item.active:hover { background: rgba(74, 222, 128, 0.1); color: var(--accent-green); }
    .btn:hover { filter: none; }

    /* Momentum scroll */
    .sidebar-nav, .coord-panel, .table-container, .console-output,
    .notif-panel-body, .mini-console-output {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Tooltip gizle */
    [data-tooltip]::after { display: none !important; }
    [title] { -webkit-touch-callout: none; }

    /* Checkbox/radio büyüt */
    input[type="checkbox"], input[type="radio"] {
        width: 22px; height: 22px;
        min-width: 22px;
    }

    /* Select okları */
    select { padding-right: 30px !important; }

    /* Aktif dokunma efekti */
    .btn:active, button:active { transform: scale(0.96); }
    .widget:active { opacity: 0.9; }
    .panel-card:active { transform: scale(0.98); }
}

/* ============================================
   YATAY TELEFON
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .coord-container {
        grid-template-columns: 1fr 280px !important;
        grid-template-rows: 100% !important;
    }
    .coord-panel { border-top: none !important; border-left: 1px solid #1e2733 !important; max-height: 100vh; overflow-y: auto !important; }
    .header { height: 44px !important; }
    .sidebar-header { padding: 8px 12px !important; }
    .notif-card { max-height: 90vh; overflow-y: auto; }
    .notif-card-title { font-size: 18px !important; }
}

/* ============================================
   SAFE AREA (NOTCH / DİNAMİK ADA)
   ============================================ */
@supports (padding: env(safe-area-inset-left)) {
    .sidebar { padding-left: env(safe-area-inset-left); }
    .mobile-hamburger { left: calc(12px + env(safe-area-inset-left)); }
    .header { padding-right: env(safe-area-inset-right); }

    /* Alt safe area */
    .console-entry { padding-bottom: env(safe-area-inset-bottom); }
    .mini-console-entry { padding-bottom: env(safe-area-inset-bottom); }
    .app-footer { padding-bottom: env(safe-area-inset-bottom); }
    .notif-card-progress { margin-bottom: env(safe-area-inset-bottom); }

    @media (max-width: 768px) {
        .toast-container { bottom: env(safe-area-inset-bottom); }
    }
}

/* ============================================
   AZALTILMIŞ HAREKETLİLİK
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   YAZICI STİLLERİ
   ============================================ */
@media print {
    .sidebar, .mobile-hamburger, .sidebar-backdrop,
    .map-toolbar, .map-fullscreen-btn, .app-footer,
    .console-entry, .console-quick-btns, .htk-console-fab,
    .htk-notif-btn, .notif-panel, .mini-console {
        display: none !important;
    }
    .main { margin-left: 0 !important; }
    .coord-container { grid-template-columns: 1fr !important; }
    .widget-grid { grid-template-columns: repeat(4, 1fr) !important; }
}