/* Öğretmen Kartları CSS */



/* ============================ 

   TEACHER BIRTHDAY FEATURES

============================ */



/* Doğum günü öğretmen avatarı - öğrenci kartındaki gibi */

.teacher-avatar.birthday-student {

  border: 2px solid #FFB347 !important;

  border-radius: 50% !important;

  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6) !important;

  animation: teacherBirthdayGlow 3s infinite;

}



@keyframes teacherBirthdayGlow {

  0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }

  50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.9), 0 0 35px rgba(255, 165, 0, 0.4); }

}



/* Öğretmen Kartı */

.teacher-card {

    display: flex;

    align-items: center;

    padding: 6px 8px;

    background: transparent;

    border-radius: 0;

    border: none;

    margin: 1px 0;

    transition: all 0.15s ease;

    cursor: pointer;

    position: relative;

}



/* Gizli Öğretmen Kartı */

.teacher-card.hidden-teacher {

    opacity: 0.5;

    background: #f8f8f8;

    border-color: #ddd;

}



.teacher-card.hidden-teacher .teacher-name {

    text-decoration: line-through;

    color: #999;

}



.teacher-card:hover {

    background: #f8f9fa;

}



/* Öğretmen Avatar */

.teacher-avatar {

    position: relative;

    margin-right: 8px;

    flex-shrink: 0;

}



.teacher-avatar img {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    border: none;

    cursor: pointer;

    transition: all 0.15s ease;

    object-fit: cover;

}



.teacher-avatar img:hover {

    opacity: 0.8;

    transform: scale(1.15);

    z-index: 10;

    box-shadow: 0 2px 8px rgba(0,0,0,0.15);

}



.online-status {

    position: absolute;

    bottom: 1px;

    right: 1px;

    width: 8px;

    height: 8px;

    background: #28a745;

    border: 1px solid white;

    border-radius: 50%;

}



.online-status.offline {

    background: #dc3545;

}



/* Öğretmen Bilgileri */

.teacher-info {

    flex: 1;

    text-align: left;

    overflow: hidden;

    justify-content: flex-start;

}



.teacher-name {

    font-weight: 500;

    font-size: 13px;

    color: #2c3e50;

    margin-bottom: 1px;

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;

}



.teacher-title {

    font-size: 10px;

    color: #7f8c8d;

    margin-bottom: 2px;

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;

}



.teacher-stats {

    display: none;

}



/* Öğretmen Kontrolleri */

.teacher-controls {

    margin-left: 6px;

    display: flex;

    align-items: center;

}



.visibility-toggle {

    background: none;

    border: none;

    font-size: 14px;

    cursor: pointer;

    padding: 2px;

    border-radius: 1px;

    transition: background 0.15s;

}



.visibility-toggle:hover {

    background: #ecf0f1;

}



/* Öğretmen Modal Overlay */

.teacher-modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.5);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10000;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

}



.teacher-modal-overlay.active {

    opacity: 1;

    visibility: visible;

}



/* Öğretmen Modal */

.teacher-modal {

    background: white;

    border-radius: 12px;

    width: 90%;

    max-width: 600px;

    max-height: 90vh;

    overflow-y: auto;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);

    transform: scale(0.8);

    transition: transform 0.3s ease;

}



.teacher-modal-overlay.active .teacher-modal {

    transform: scale(1);

}



/* Modal Header */

.teacher-modal-header {

    display: flex;

    align-items: center;

    padding: 20px;

    border-bottom: 1px solid #e5e5e5;

    position: relative;

}



.teacher-modal-avatar img {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    border: 3px solid #007bff;

    margin-right: 20px;

}



.teacher-modal-name h3 {

    margin: 0 0 5px 0;

    font-size: 24px;

    font-weight: 600;

    color: #333;

}



.teacher-modal-name p {

    margin: 0 0 10px 0;

    color: #666;

    font-size: 16px;

}



.edit-teacher-btn {

    background: #007bff;

    color: white;

    border: none;

    padding: 8px 16px;

    border-radius: 6px;

    font-size: 12px;

    cursor: pointer;

    transition: background 0.2s;

}



.edit-teacher-btn:hover {

    background: #0056b3;

}



.close-modal {

    position: absolute;

    top: 15px;

    right: 15px;

    background: none;

    border: none;

    font-size: 24px;

    cursor: pointer;

    color: #999;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    transition: all 0.2s;

}



.close-modal:hover {

    background: #f0f0f0;

    color: #333;

}



/* Modal Content */

.teacher-modal-content {

    padding: 20px;

}



.teacher-section {

    margin-bottom: 25px;

}



.teacher-section h4 {

    margin: 0 0 15px 0;

    font-size: 16px;

    font-weight: 600;

    color: #333;

    display: flex;

    align-items: center;

    gap: 8px;

}



/* Info Grid */

.info-grid {

    display: grid;

    gap: 12px;

}



.info-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 0;

    border-bottom: 1px solid #f0f0f0;

}



.info-item:last-child {

    border-bottom: none;

}



.info-item .label {

    font-weight: 500;

    color: #666;

    font-size: 14px;

}



.info-item .value {

    font-weight: 600;

    color: #333;

    font-size: 14px;

}



/* Work Hours */

.work-hours {

    display: grid;

    gap: 12px;

}



.work-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px;

    background: #f8f9fa;

    border-radius: 8px;

}



.work-item .label {

    font-weight: 500;

    color: #666;

    font-size: 14px;

}



.work-item .value {

    font-weight: 600;

    color: #333;

    font-size: 14px;

}



/* Work Days */

.work-days {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}



.day-badge {

    padding: 8px 12px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 500;

    border: 1px solid #e5e5e5;

    color: #666;

    background: white;

}



.day-badge.active {

    background: #007bff;

    color: white;

    border-color: #007bff;

}



/* Program Badge */

.program-badge {

    display: inline-block;

    background: #007bff;

    color: white;

    padding: 4px 8px;

    border-radius: 20px;

    font-size: 8px;

    font-weight: 500;

}



/* Modal Footer */

.teacher-modal-footer {

    padding: 20px;

    border-top: 1px solid #e5e5e5;

    display: flex;

    justify-content: flex-end;

}



.btn-edit {

    background: #28a745;

    color: white;

    border: none;

    padding: 12px 24px;

    border-radius: 6px;

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    transition: background 0.2s;

    display: flex;

    align-items: center;

    gap: 8px;

}



.btn-edit:hover {

    background: #218838;

}



/* Responsive */

@media (max-width: 768px) {

    .teacher-modal {

        width: 95%;

        margin: 10px;

        max-height: 95vh;

    }



    .teacher-modal-header {

        flex-direction: column;

        text-align: center;

        padding: 15px;

    }



    .teacher-modal-avatar img {

        margin-right: 0;

        margin-bottom: 15px;

    }



    .work-days {

        justify-content: center;

    }



    .info-item {

        flex-direction: column;

        align-items: flex-start;

        gap: 4px;

    }

}



/* FullCalendar Resource Area Override */

.fc-resource-area-header {

    background: #f8f9fa !important;

    border-bottom: 2px solid #007bff !important;

}



.fc-resource {

    border-bottom: 1px solid #f0f0f0 !important;

}



.fc-resource:hover {

    background: #f8f9fa !important;

}



/* Edit Modal Styles */

.edit-teacher-modal-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px;

    border-bottom: 1px solid #e5e5e5;

}



.edit-teacher-modal-header h3 {

    margin: 0;

    font-size: 20px;

    font-weight: 600;

    color: #333;

}



.edit-teacher-modal-content {

    padding: 20px;

    max-height: 60vh;

    overflow-y: auto;

}



.form-section {

    margin-bottom: 25px;

}



.form-section h4 {

    margin: 0 0 15px 0;

    font-size: 16px;

    font-weight: 600;

    color: #333;

    display: flex;

    align-items: center;

    gap: 8px;

}



.form-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 15px;

}



.form-group {

    display: flex;

    flex-direction: column;

}



.form-group label {

    font-weight: 500;

    color: #555;

    margin-bottom: 5px;

    font-size: 14px;

}



.form-group input, 

.form-group select {

    padding: 10px;

    border: 1px solid #ddd;

    border-radius: 6px;

    font-size: 14px;

    transition: border-color 0.2s;

}



.form-group input:focus, 

.form-group select:focus {

    outline: none;

    border-color: #007bff;

    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);

}



.checkbox-group {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

}



.checkbox-group label {

    display: flex;

    align-items: center;

    font-size: 14px;

    font-weight: normal;

    cursor: pointer;

}



.checkbox-group input[type="checkbox"] {

    margin-right: 8px;

    transform: scale(1.1);

}



.edit-teacher-modal-footer {

    padding: 20px;

    border-top: 1px solid #e5e5e5;

    display: flex;

    justify-content: flex-end;

    gap: 12px;

}



.btn-cancel, .cancel-btn {

    background: #6c757d;

    color: white;

    border: none;

    padding: 12px 24px;

    border-radius: 6px;

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    transition: background 0.2s;

    display: flex;

    align-items: center;

    gap: 8px;

}



.edit-btn {

    background: #007bff;

    color: white;

    border: none;

    padding: 12px 24px;

    border-radius: 6px;

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    transition: background 0.2s;

    display: flex;

    align-items: center;

    gap: 8px;

}



.edit-btn:hover {

    background: #0056b3;

}



.edit-status-btn.editable {

    border: 2px dashed #007bff;

    background: #f8f9ff;

    cursor: text;

}



.btn-cancel:hover {

    background: #545b62;

}



.btn-save, .save-btn {

    background: #28a745;

    color: white;

    border: none;

    padding: 12px 24px;

    border-radius: 6px;

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    transition: background 0.2s;

    display: flex;

    align-items: center;

    gap: 8px;

}



.btn-save:hover {

    background: #218838;

}



/* Multi-select styling */

select[multiple] {

    height: 100px;

    padding: 8px;

}



select[multiple] option {

    padding: 4px 8px;

    margin: 2px 0;

}



select[multiple] option:checked {

    background: #007bff;

    color: white;

}



/* Student Cards Styles - Simple Design */

.student-card-simple {

    display: flex;

    align-items: center;

    padding: 8px 12px;

    background: white;

    border-radius: 2px;

    border: 1px solid #e9ecef;

    margin: 2px 0;

    transition: all 0.15s ease;

    cursor: move;

    position: relative;

    user-select: none;

    width: 98%;

    box-sizing: border-box;

    overflow: hidden;

}



.student-card-simple:hover {

    border-color: #28a745;

    background: #f8f9fa;

    transform: translateX(2px);

}



.student-card-simple.dragging {

    opacity: 0.5;

    transform: rotate(2deg);

}



/* Student Avatar - Simple */

.student-avatar-simple {

    position: relative;

    margin-right: 12px;

    flex-shrink: 0;

}



.student-avatar-simple img {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: none;

    cursor: pointer;

    transition: all 0.15s ease;

}



.student-avatar-simple img:hover {

    transform: scale(1.15);

    box-shadow: 0 3px 10px rgba(0,0,0,0.2);

    z-index: 10;

}



/* Student Info - Simple */

.student-info-simple {

    flex: 1;

    text-align: left;

    overflow: hidden;

    width: 100%;

    min-width: 0;

}



.student-name-simple {

    font-weight: 600;

    font-size: 14px;

    color: #2c3e50;

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;

    flex: 1;

    min-width: 0;

    max-width: calc(100% - 120px);

}



/* İsim ve ders saati kutularının yan yana durması için */

.student-name-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 3px;

    gap: 8px;

    width: 100%;

    overflow: hidden;

}



/* Program bilgisi */

.student-program-simple {

    font-size: 11px;

    color: #666;

    font-weight: 500;

    text-overflow: ellipsis;

   // overflow: hidden;

    white-space: nowrap;

}



/* Ders saati kutuları */

.student-lesson-hours {

    display: flex;

    gap: 3px;

    flex-shrink: 0;

    overflow: hidden;

}



.lesson-hour-box {

    display: inline-block;

    padding: 4px 8px;

    border-radius: 3px;

    font-size: 12px;

    font-weight: 600;

    color: white;

    min-width: 32px;

    text-align: center;

    letter-spacing: 0.3px;

}



.lesson-hour-box.individual {

    background: #007bff;

}



.lesson-hour-box.group {

    background: #28a745;

}



.lesson-hour-box.zero {

    background: #dc3545 !important;

    color: white;

    font-weight: 700;

    font-size: 13px;

}



.student-role-simple {

    font-size: 12px;

    color: #6c757d;

    margin-bottom: 3px;

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;

}



.student-status-simple {

    font-size: 11px;

    color: #28a745;

    font-weight: 500;

}



/* Removed old student controls - using simple design now */



/* Student Modal Overlay */

.student-modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.5);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10000;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

}



.student-modal-overlay.active {

    opacity: 1;

    visibility: visible;

}



/* Student Modal */

.student-modal {

    background: white;

    border-radius: 12px;

    width: 90%;

    max-width: 600px;

    max-height: 90vh;

    overflow-y: auto;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);

    transform: scale(0.8);

    transition: transform 0.3s ease;

}



.student-modal-overlay.active .student-modal {

    transform: scale(1);

}



/* Student Modal Header */

.edit-student-modal-header {

    display: flex;

    align-items: center;

    padding: 20px;

    border-bottom: 1px solid #e5e5e5;

    position: relative;

}



.student-modal-avatar img {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    border: 3px solid #28a745;

    margin-right: 20px;

}



.student-modal-name h3 {

    margin: 0 0 5px 0;

    font-size: 24px;

    font-weight: 600;

    color: #333;

}



.student-modal-name p {

    margin: 0;

    color: #666;

    font-size: 16px;

}



/* Lesson Stats */

.lesson-stats {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    gap: 15px;

}



.stat-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px;

    background: #f8f9fa;

    border-radius: 8px;

    border-left: 4px solid #28a745;

}



.stat-label {

    font-weight: 500;

    color: #666;

    font-size: 14px;

}



.stat-value {

    font-weight: 600;

    color: #28a745;

    font-size: 16px;

}



/* Textarea styling */

textarea {

    padding: 10px;

    border: 1px solid #ddd;

    border-radius: 6px;

    font-size: 14px;

    font-family: inherit;

    transition: border-color 0.2s;

    resize: vertical;

    width: 100%;

    box-sizing: border-box;

}



textarea:focus {

    outline: none;

    border-color: #28a745;

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

}



/* Responsive adjustments */

@media (max-width: 768px) {

    .student-modal {

        width: 95%;

        margin: 10px;

        max-height: 95vh;

    }



    .edit-student-modal-header {

        flex-direction: column;

        text-align: center;

        padding: 15px;

    }



    .student-modal-avatar img {

        margin-right: 0;

        margin-bottom: 15px;

    }



    .lesson-stats {

        grid-template-columns: 1fr;

    }



    .student-lessons {

        justify-content: center;

    }

}
/* Teachers-top resource headers must never overflow into the next column. */
.fc-resourceTimeGridDay-view .fc-col-header-cell,
.fc-resourceTimeGridDay-view .fc-col-header-cell-frame,
.fc-resourceTimeGridDay-view .fc-scrollgrid-sync-inner,
.fc-resourceTimeGridDay-view .fc-col-header-cell-cushion {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.fc-resourceTimeGridDay-view .fc-col-header-cell-cushion {
    display: block !important;
    width: 100% !important;
}

.fc-resourceTimeGridDay-view .teacher-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.fc-resourceTimeGridDay-view .teacher-avatar,
.fc-resourceTimeGridDay-view .teacher-controls {
    flex: 0 0 auto !important;
}

.fc-resourceTimeGridDay-view .teacher-info {
    flex: 1 1 auto !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.fc-resourceTimeGridDay-view .teacher-name,
.fc-resourceTimeGridDay-view .teacher-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.fc-resourceTimeGridDay-view .teacher-controls {
    margin-left: 4px !important;
    overflow: hidden !important;
}