/* 3 Sütunlu Modal Layout - SABİT VE TEKRAR EDİLEBİLİR */

.modal-grid-container {

    display: grid !important;

    grid-template-columns: 1fr auto 1fr !important;

    gap: 20px !important;

    min-height: 400px !important;

    width: 100% !important;

    position: relative !important;

    clear: both !important;

    box-sizing: border-box !important;

    align-items: start !important; /* ✅ Sütunları üstten hizala */

}



/* Normal 2 sütun layout (grup yokken) */

.modal-grid-container.two-column {

    grid-template-columns: 1fr 1fr !important;

    align-items: start !important; /* ✅ 2 sütun için de üstten hizala */

}



/* ✅ GRUP SÜTUNU TAM GİZLE - 2 SÜTUN MODUNDA */

.modal-grid-container.two-column .modal-column-group,

.modal-grid-container.two-column #groupStudentsColumn {

    display: none !important;

    visibility: hidden !important;

    width: 0 !important;

    min-width: 0 !important;

    max-width: 0 !important;

    overflow: hidden !important;

    grid-column: span 0 !important;

}



/* Modal açılışında layout reset ve initialize */

.uk-modal.uk-open .modal-grid-container {

    display: grid !important;

    grid-template-columns: 1fr auto 1fr !important;

    animation: none !important;

    transform: none !important;

}



.uk-modal.uk-open .modal-grid-container.two-column {

    grid-template-columns: 1fr 1fr !important;

}



.modal-column {

    padding: 15px !important;

    background: #fafafa !important;

    border-radius: 8px !important;

    border: 1px solid #e5e5e5 !important;

    box-sizing: border-box !important;

    position: relative !important;

    min-height: 100px !important;

    display: block !important;

}



/* Sol sütun - Temel bilgiler */

.modal-column-basic {

    min-width: 300px !important;

    max-width: none !important;

    flex-shrink: 0 !important;

    grid-column: 1 !important;

}



/* Orta sütun - Grup öğrencileri */

.modal-column-group {

    min-width: 280px !important;

    max-width: 320px !important;

    background: #f0f8ff !important;

    border: 2px solid #4a90e2 !important;

    animation: slideIn 0.3s ease-in-out !important;

    flex-shrink: 0 !important;

    grid-column: 2 !important;

    position: relative !important;

}



.modal-column-group h3 {

    color: #4a90e2 !important;

    margin-bottom: 10px !important;

}



/* Sağ sütun - Eğitim programları - LAYOUT SABİTLEME */

.modal-column-education {

    min-width: 300px !important;

    max-width: none !important;

    flex-shrink: 0 !important;

    grid-column: 3 !important;

    position: relative !important;

    align-self: start !important;

    vertical-align: top !important; /* ✅ Dikey hizalama üstten */

}



/* ✅ 2 SÜTUN MODUNDA EĞİTİM SÜTUNU 2. POZİSYONA */

.modal-grid-container.two-column .modal-column-education {

    grid-column: 2 !important;

}



/* Sol sütun için de üstten hizalama */

.modal-column-basic {

    min-width: 300px !important;

    max-width: none !important;

    flex-shrink: 0 !important;

    grid-column: 1 !important;

    align-self: start !important; /* ✅ Sol sütunu da üstten hizala */

    vertical-align: top !important; /* ✅ Dikey hizalama üstten */

}



/* ✅ BASİT CSS FİX - JAVASCRIPT REFLow SORUNU ÇÖZÜMLENDİ */

.modal-layout-fixed {

    display: grid !important;

    align-items: flex-start !important;

    align-content: flex-start !important;

    justify-items: stretch !important;

}



/* ✅ SÜPER GÜÇLÜ KAYMA FİX - TÜM SÜTUNLAR */

.modal-grid-container,

#modal .modal-grid-container,

.uk-modal .modal-grid-container {

    display: grid !important;

    align-items: flex-start !important; /* CSS standart */

    align-content: flex-start !important;

    justify-items: stretch !important;

    grid-auto-rows: min-content !important;

}



.modal-column,

.modal-column-basic, 

.modal-column-education,

.modal-column-group,

#modal .modal-column,

#modal .modal-column-basic,

#modal .modal-column-education,

#modal .modal-column-group {

    align-self: flex-start !important; /* CSS standart */

    vertical-align: top !important;

    display: block !important;

    margin: 0 !important; /* Tüm margin sıfırla */

    padding-top: 15px !important;

    top: 0 !important;

    position: static !important; /* relative yerine static */

    float: none !important;

}



/* Grup öğrenci listesi */

.group-students-container {

    max-height: 300px;

    overflow-y: auto;

    padding: 10px 0;

}



.group-student-item {

    display: flex !important;

    flex-direction: column !important; /* Öğrenci ismini üstte göster */

    align-items: flex-start !important; /* Sol hizalama */

    justify-content: flex-start !important; /* Üstten başla */

    padding: 8px 12px;

    margin-bottom: 8px;

    background: white;

    border-radius: 6px;

    border: 1px solid #ddd;

    transition: all 0.2s ease;

    text-align: left !important; /* Tüm içerik sola hizalı */

}



.group-student-item:hover {

    border-color: #4a90e2;

    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.1);

}



.group-student-checkbox {

    margin-right: 10px;

    transform: scale(1.2);

}



.group-student-info {

    flex: 1;

    width: 100%; /* Tam genişlik kullan */

}



/* Öğrenci adını üstte ve büyük göster - SÜPER GÜÇLENDİRİLMİŞ SOLDAN HİZALAMA */

.group-student-name,

.group-student-item .group-student-name,

#groupStudentsList .group-student-name,

.modal-column-group .group-student-name,

.uk-modal .group-student-name {

    font-size: 14px !important;

    font-weight: 600 !important;

    color: #333 !important;

    margin-bottom: 2px !important;

    line-height: 1.2 !important;

    text-align: left !important;

    align-self: flex-start !important;

    justify-self: flex-start !important;

    width: 100% !important;

    display: block !important;

    margin-left: 0 !important;

    margin-right: auto !important;

    position: relative !important;

    left: 0 !important;

}



/* Meta bilgileri (TCKN, tarih) altında ve küçük göster */

.group-student-item .uk-text-meta {

    font-size: 11px !important;

    line-height: 1.1 !important;

    color: #666 !important;

}



.group-student-name {

    font-weight: 600;

    color: #333;

    margin-bottom: 2px;

}



.group-student-details {

    font-size: 12px;

    color: #666;

}



/* Animasyon */

@keyframes slideIn {

    from {

        opacity: 0;

        transform: translateX(-20px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



/* Responsive */

@media (max-width: 1200px) {

    .modal-grid-container {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    

    .modal-grid-container.two-column {

        grid-template-columns: 1fr;

    }

    

    .modal-column-group {

        min-width: auto;

        max-width: none;

    }

}



@media (max-width: 768px) {

    .modal-grid-container {

        gap: 10px;

    }

    

    .modal-column {

        padding: 10px;

    }

}



/* Large modal genişliği */

.modal-large {

    max-width: 90vw !important;

    width: 1200px !important;

}



@media (max-width: 1300px) {
    .modal-large {
        width: 95vw !important;
    }
}

#modal .uk-modal-dialog.modal-large {
    width: min(1120px, 94vw) !important;
    max-height: 92vh !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 2px !important;
    background: #fff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

#modal .uk-modal-title {
    margin: 0 !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #e9ecef !important;
    background: #f8f9fa !important;
    color: #2c3e50 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
}

#modal #dersEkleForm {
    max-height: calc(92vh - 58px) !important;
    overflow-y: auto !important;
    padding: 20px !important;
    background: #fff !important;
}

#modal .modal-grid-container {
    gap: 16px !important;
    min-height: 0 !important;
}

#modal .modal-column {
    padding: 16px !important;
    border: 1px solid #e9ecef !important;
    border-radius: 2px !important;
    background: #fff !important;
    box-shadow: none !important;
}

#modal .modal-column h3 {
    margin: 0 0 12px 0 !important;
    color: #495057 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

#modal .uk-margin-small {
    margin-bottom: 12px !important;
}

#modal .uk-form-label {
    margin-bottom: 6px !important;
    color: #6c757d !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

#modal .uk-input,
#modal .uk-select,
#modal textarea {
    min-height: 36px !important;
    padding: 8px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 2px !important;
    background: #fff !important;
    color: #212529 !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

#modal .uk-input:focus,
#modal .uk-select:focus,
#modal textarea:focus {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.12) !important;
}

#modal .checkbox-container,
#modal #hedefContainer,
#modal #davranisContainer {
    max-height: 136px !important;
    overflow-y: auto !important;
    padding: 8px !important;
    border: 1px solid #e9ecef !important;
    border-radius: 2px !important;
    background: #f8f9fa !important;
}

#modal #groupStudentsList {
    max-height: min(440px, calc(100vh - 260px)) !important;
    overflow-y: auto !important;
    padding: 8px !important;
    border: 1px solid #e9ecef !important;
    border-radius: 2px !important;
    background: #f8f9fa !important;
}

#modal form > .uk-margin-top.uk-text-right {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 16px -20px -20px !important;
    padding: 16px 20px !important;
    border-top: 1px solid #e9ecef !important;
    background: #f8f9fa !important;
}

#modal form > .uk-margin-top.uk-text-right .uk-button {
    border-radius: 2px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
}