/* Group Operations CSS */



/* Modal stili - EN GÜÇLÜ OVERRIDE */

.uk-modal,

#bep-interface .uk-modal,

body .uk-modal,

html .uk-modal {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 100% !important;

    background: rgba(0, 0, 0, 0.6) !important;

    display: none !important;

    align-items: center !important;

    justify-content: center !important;

    z-index: 99999 !important;

    opacity: 0 !important;

    visibility: hidden !important;

    margin: 0 !important;

    padding: 0 !important;

    transform: none !important;

}



.uk-modal.uk-open,

#bep-interface .uk-modal.uk-open,

body .uk-modal.uk-open,

html .uk-modal.uk-open {

    display: flex !important;

    opacity: 1 !important;

    visibility: visible !important;

    align-items: center !important;

    justify-content: center !important;

}



#group-creation-modal {

    display: none !important;

}



#group-creation-modal.uk-open {

    display: flex !important;

    opacity: 1 !important;

    visibility: visible !important;

}



/* Modal dialog animasyonu */

.uk-modal-dialog {

    transform: translateY(-20px) scale(0.95);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    opacity: 0;

    height: auto;

    overflow-y: visible;

    border-radius: 8px;

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

}



.uk-modal.uk-open .uk-modal-dialog {

    transform: translateY(0) scale(1);

    opacity: 1;

}



/* Body scroll lock */

body.uk-modal-open {

    overflow: hidden !important;

    padding-right: 0 !important;

}



.uk-modal-dialog,

#bep-interface .uk-modal-dialog,

body .uk-modal-dialog,

html .uk-modal-dialog {

    background: white !important;

    border-radius: 8px !important;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;

    height: auto !important;

    overflow-y: visible !important;

    margin: 0 auto !important;

    position: relative !important;
	padding: 20px;

    left: auto !important;

    right: auto !important;

    top: auto !important;

    transform: none !important;

    max-width: 100vw !important;

}



.uk-modal-body {

    padding: 20px;

}



/* Operations kartları artık home-support stilini kullanıyor - bu section kaldırıldı */



/* Oluşturulan Gruplar Container */

#created-groups-container {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 4px;

    padding: 4px;

    overflow-y: visible;

    height: auto;

}



.created-group-item {

    min-height: auto;

    max-height: none;

    height: auto;

    overflow: visible;

}



/* Responsive tasarım */

@media (max-width: 768px) {

    .group-operations-grid {

        grid-template-columns: repeat(2, 1fr);

        padding: 8px;

        gap: 8px;

    }



    #created-groups-container {

        grid-template-columns: repeat(2, 1fr);

    }



    .group-operation-card {

        padding: 10px;

    }



    .operation-header h4 {

        font-size: 12px;

    }



    .operation-desc {

        font-size: 11px;

    }

}



@media (max-width: 480px) {

    .group-operations-grid {

        grid-template-columns: 1fr;

    }

}



/* Tab aktif durumu */

#group-operationsTab.active {

    display: block;

}



/* Buton renk varyasyonları */

.group-operation-card .uk-button-primary {

    background-color: #1e87f0;

    border-color: #1e87f0;

}



.group-operation-card .uk-button-secondary {

    background-color: #6c757d;

    border-color: #6c757d;

}



.group-operation-card .uk-button-success {

    background-color: #28a745;

    border-color: #28a745;

}



.group-operation-card .uk-button-warning {

    background-color: #ffc107;

    border-color: #ffc107;

    color: #212529;

}



.group-operation-card .uk-button-default {

    background-color: #f8f9fa;

    border-color: #dee2e6;

    color: #495057;

}



/* New styles for group creation modal */

.group-creation-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    height: auto;

}



.students-panel, .scenarios-panel {

    border: 1px solid #e5e5e5;

    border-radius: 8px;

    padding: 15px;

    background: #fafafa;

}



.students-panel h4, .scenarios-panel h4 {

    margin-top: 0;

    color: #333;

    font-size: 16px;

    border-bottom: 2px solid #1e87f0;

    padding-bottom: 8px;

}



.students-list-container {

    overflow-y: visible;

    padding-right: 5px;

    height: auto;

}



.student-card {

    background: white;

    border: 1px solid #ddd;

    border-radius: 6px;

    padding: 12px;

    margin-bottom: 10px;

    transition: all 0.2s ease;

}



.student-card:hover {

    border-color: #1e87f0;

    box-shadow: 0 2px 8px rgba(30, 135, 240, 0.1);

}



.student-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 8px;

}



.student-header strong {

    color: #333;

    font-size: 14px;

}



.student-age {

    background: #28a745;

    color: white;

    padding: 2px 8px;

    border-radius: 12px;

    font-size: 11px;

    font-weight: 500;

}



.student-details {

    font-size: 12px;

    color: #666;

}



.student-details div {

    margin-bottom: 3px;

}



.student-program {

    font-weight: 500;

    color: #1e87f0;

}



.scenarios-container {

    overflow-y: visible;

    padding-right: 5px;

    height: auto;

}



.group-scenario {

    background: white;

    border: 1px solid #ddd;

    border-radius: 8px;

    padding: 15px;

    margin-bottom: 15px;

    transition: all 0.2s ease;

}



.group-scenario:hover {

    border-color: #28a745;

    box-shadow: 0 3px 10px rgba(40, 167, 69, 0.1);

}



.scenario-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;

    border-bottom: 1px solid #eee;

    padding-bottom: 8px;

}



.scenario-header h5 {

    margin: 0;

    color: #333;

    font-size: 14px;

}



.student-count {

    background: #17a2b8;

    color: white;

    padding: 2px 8px;

    border-radius: 10px;

    font-size: 11px;

}



.capacity-info {

    background: #ffc107;

    color: #333;

    padding: 2px 8px;

    border-radius: 10px;

    font-size: 11px;

}



.scenario-students {

    margin-bottom: 12px;

    overflow-y: visible;

    height: auto;

}



.scenario-student {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 4px 8px;

    background: #f8f9fa;

    border-radius: 4px;

    margin-bottom: 3px;

    font-size: 12px;

}



.student-name {

    font-weight: 500;

    color: #333;

}



.student-age-small {

    background: #6c757d;

    color: white;

    padding: 1px 6px;

    border-radius: 8px;

    font-size: 10px;

}



.scenario-actions {

    display: flex;

    gap: 8px;

    align-items: center;

}



.group-name-input {

    flex: 1;

    height: 32px;

    font-size: 12px;

}



.create-group-btn {

    white-space: nowrap;

    height: 32px;

    font-size: 12px;

}



.group-students-selection {



    overflow-y: auto;

    border: 1px solid #e5e5e5;

    border-radius: 4px;

    padding: 8px;

}