/**
 * Dosya Adı: responsive.css
 * Klasör: assets/css
 * Klasör Yolu: azerbaycan-edu-portal/assets/css/responsive.css
 * Versiyon: 1.2.1 (MODÜL 1-5 TAM MOBİL UYUMLULUK)
 * Değiştirilme Tarihi: 20 Nisan 2026
 * Açıklama: 
 * - Öğrenci paneli, başvuru sihirbazı ve admin modal pencereleri için ileri seviye responsive düzeltmeleri.
 * - [YENİ]: Modül 1 Limit Aşım Pop-up'ı ve Modül 4 Admin İnceleme (Akordeon) ekranları için özel mobil görünümler eklendi.
 * - [YENİ]: Evrak yükleme kutuları (Grid) ve log rozetleri dar ekranlarda dikey hiyerarşiye uyarlandı.
 * - WordPress tema çakışmalarını önlemek için !important hiyerarşisi korunmuştur.
 * - Sidebar, Izgara (Grid) ve Sihirbaz (Stepper) mobil davranışları Parlamento Mavisi konseptiyle optimize edildi.
 */

/* --- 1. GENEL TABLO VE KONTEYNIR --- */
.aep-table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

/* --- 2. TABLET VE YATAY MOBİL (Max 1024px) --- */
@media (max-width: 1024px) {
    /* Sidebar'ı mobil moduna hazırla */
    .aep-sidebar {
        position: fixed !important;
        left: -280px !important; /* Başlangıçta gizli */
        transition: left 0.3s ease !important;
        z-index: 1001 !important;
        height: 100vh !important;
    }

    .aep-sidebar.mobile-active {
        left: 0 !important;
    }

    /* Ana Izgarayı Tek Sütuna Düşür */
    .aep-main-grid, .aep-help-grid, .aep-messages-grid, .aep-profile-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Sağdaki "Seçim Özeti" paneli mobilde formun altına düşmeli */
    .aep-premium-card {
        margin-bottom: 15px !important;
    }

    /* Modül 4: Admin İnceleme Akordeon Detayı */
    .aep-detail-container {
        padding: 15px !important;
    }
    .aep-form-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* --- 3. STANDART TELEFONLAR (Max 768px) --- */
@media (max-width: 768px) {
    /* İç boşlukları azalt */
    .aep-view-container {
        padding: 15px !important;
    }

    .aep-topbar {
        padding: 0 15px !important;
        height: auto !important;
        min-height: 75px !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 10px !important;
        text-align: center !important;
    }

    .aep-breadcrumb {
        display: none !important; /* Mobilde yer kazanmak için */
    }

    /* İstatistik Kartları Tek Sütun */
    .aep-stats-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* --- SİHİRBAZ (STEPPER) OPTİMİZASYONU --- */
    /* Mobilde metinleri gizle, sadece çemberleri göster */
    .aep-stepper .aep-step-label {
        display: none !important;
    }

    .aep-stepper::before {
        top: 22px !important;
    }

    .aep-step-circle {
        width: 38px !important;
        height: 38px !important;
        font-size: 14px !important;
    }

    /* Modül 1: Limit Mesajı Pop-up Optimizasyonu */
    .aep-limit-reached-popup {
        padding: 25px 15px !important;
    }
    .aep-limit-reached-popup h2 {
        font-size: 18px !important;
    }

    /* Quill Editör Yüksekliği */
    #student-quill-editor, #aep-quill-editor {
        height: 160px !important;
    }

    /* Admin Tabloları */
    .aep-table th:nth-child(3), .aep-table td:nth-child(3),
    .aep-table th:nth-child(4), .aep-table td:nth-child(4) {
        display: none !important; /* Mobilde kritik olmayan sütunları gizle */
    }
}

/* --- 4. KÜÇÜK CİHAZLAR (Max 480px) --- */
@media (max-width: 480px) {
    /* Başlıklar */
    .aep-page-title, .aep-wizard-title {
        font-size: 18px !important;
        text-align: center !important;
        padding-left: 0 !important;
        border-left: none !important;
    }

    /* Butonlar Tam Genişlik */
    .aep-btn-blue, .aep-btn-next, .aep-btn-submit, .aep-btn-prev, .aep-btn-primary {
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 14px !important;
        font-size: 14px !important;
        justify-content: center !important;
    }

    .aep-wizard-footer {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .aep-btn-prev {
        order: 2 !important; /* Geri butonu en alta gelsin */
    }

    .aep-btn-next, .aep-btn-submit {
        order: 1 !important;
    }

    /* Form Alanları */
    .aep-input, .aep-form-control {
        padding: 12px !important;
        font-size: 13px !important;
    }

    /* Belge Kutuları (Grid) */
    .aep-doc-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .aep-doc-box {
        height: 150px !important;
        max-width: 100% !important;
    }

    /* Dil ve Kullanıcı Pill */
    .aep-user-pill {
        width: 100% !important;
        justify-content: center !important;
        padding: 8px !important;
    }

    .aep-lang-switcher {
        width: 100% !important;
    }

    .aep-lang-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Log ve Durum Rozetleri */
    .aep-status-pill {
        font-size: 9px !important;
        padding: 3px 8px !important;
    }
}

/* --- 5. ÖZEL TEMA FIXLERI --- */
/* Bazı WordPress temaları tablo borderlarını siliyor, zorla geri getir */
.aep-view-container table {
    border-collapse: collapse !important;
}

/* Gempix tasarımındaki altın ilerleme çubuğu için ince ayar */
.aep-progress-bg {
    margin-top: 5px !important;
}

/* Kilitli Evrak Koruması: Mobilde tıklandığında açıklama göstermek için */
.aep-locked-doc-btn:active::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    z-index: 100;
}