/* Sidebar stilleri */

.sidebar-container {

  background-color: #f8f9fa;

  border-right: 1px solid #e9ecef;

  height: 100vh;

  overflow-y: auto;

  overflow-x: hidden;

  width: 100%;

  box-sizing: border-box;

}



.sidebar-container .uk-card {

  margin: 0;

  border: none;

  border-radius: 0;

  background-color: transparent;

  box-shadow: none;

  padding: 8px;

}



.sidebar-container .uk-card-title {

  color: #2c3e50;

  font-size: 1rem;

  font-weight: 500;

  margin-bottom: 6px;

  padding-bottom: 4px;

  border-bottom: 1px solid #e9ecef;

}



/* İstatistik kartları - Sabit Boyut */

.sidebar-container .uk-card-primary {

  background: #007bff;

  border-radius: 2px;

  transition: background 0.15s ease;

  height: 120px !important;

  min-height: 120px !important;

  max-height: 120px !important;

}



.sidebar-container .uk-card-primary:hover {

  background: #0056b3;

}



.sidebar-container .uk-card-secondary {

  background: #6c757d;

  border-radius: 2px;

  transition: background 0.15s ease;

  height: 120px !important;

  min-height: 120px !important;

  max-height: 120px !important;

}



.sidebar-container .uk-card-secondary:hover {

  background: #495057;

}



.sidebar-container .uk-card-success {

  background: #28a745;

  border-radius: 2px;

  transition: background 0.15s ease;

  height: 120px !important;

  min-height: 120px !important;

  max-height: 120px !important;

}



.sidebar-container .uk-card-success:hover {

  background: #1e7e34;

}



.sidebar-container .uk-card-warning {

  background: #ffc107;

  border-radius: 2px;

  transition: background 0.15s ease;

  color: #212529 !important;

  height: 120px !important;

  min-height: 120px !important;

  max-height: 120px !important;

}



.sidebar-container .uk-card-warning:hover {

  background: #e0a800;

}



.sidebar-container .uk-card-muted {

  background: #e9ecef;

  border-radius: 2px;

  color: #495057;

  transition: background 0.15s ease;

}



.sidebar-container .uk-card-muted:hover {

  transform: translateY(-2px);

}



.sidebar-container .uk-card-small .uk-card-body {

  padding: 0 !important; /* Stat card padding kaldırıldı */

}



.sidebar-container .uk-text-large {

  font-size: 1.5rem;

  font-weight: bold;

}



.sidebar-container .uk-text-small {

  font-size: 0.8rem;

  opacity: 0.9;

}



/* Filtre butonları */

.filter-button-group {

  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 8px;

}



.filter-btn {

  background-color: #e9ecef;

  border: 1px solid #ced4da;

  color: #495057;

  padding: 6px 12px;

  border-radius: 20px;

  font-size: 12px;

  cursor: pointer;

  transition: all 0.2s ease;

  outline: none;

}



.filter-btn:hover {

  background-color: #dee2e6;

  border-color: #adb5bd;

}



.filter-btn.active {

  background-color: #007bff;

  border-color: #007bff;

  color: white;

}



.filter-btn.active:hover {

  background-color: #0056b3;

  border-color: #0056b3;

}



/* Tarih filtreleri */

.uk-input.uk-form-small {

  font-size: 12px;

  padding: 8px 10px;

  border-radius: 6px;

}



/* Filtre uygula/temizle butonları */

#applyFilters {

  background: linear-gradient(135deg, #007bff, #0056b3);

  border: none;

  border-radius: 6px;

  transition: all 0.2s ease;

}



#applyFilters:hover {

  transform: translateY(-1px);

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

}



#clearFilters {

  background: linear-gradient(135deg, #6c757d, #495057);

  border: none;

  border-radius: 6px;

  transition: all 0.2s ease;

}



#clearFilters:hover {

  transform: translateY(-1px);

  box-shadow: 0 2px 8px rgba(108,117,125,0.3);

}



/* Öğrenci listesi */

.student-list {

  background-color: transparent;

  border: none;

  padding: 0;

  max-height: 450px !important;

  overflow-y: auto !important;

  overflow-x: hidden;

}



/* Öğrenci kartları container'ı için scroll */

.student-list-container,

#studentListContainer,

#studentList,

[id*="studentList"],

[class*="student-card-container"] {

  max-height: 450px !important;

  overflow-y: auto !important;

  overflow-x: hidden;

}



/* UK overflow sınıfını ve inline style'ı override et */

#studentList.uk-overflow-auto,

#studentList[style*="max-height"] {

  max-height: 450px !important;

  overflow-y: scroll !important;

  overflow-x: hidden !important;

}



/* Inline style'ı tamamen override et */

#studentList {

  max-height: 450px !important;

  overflow-y: scroll !important;

  overflow-x: hidden !important;

}



/* Removed old student-item styles - using direct student-card-simple now */



.student-name {

  font-weight: 600;

  color: #495057;

  margin-bottom: 4px;

  font-size: 14px;

}



.student-info {

  font-size: 11px;

  color: #6c757d;

  line-height: 1.3;

}



/* Arama kutusu */

#studentSearch {

  border-radius: 6px;

  font-size: 13px;

  padding: 8px 12px;

  border: 1px solid #ced4da;

  transition: border-color 0.15s ease-in-out;

}



#studentSearch:focus {

  border-color: #007bff;

  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);

}



/* Yardım kartı */

.sidebar-container .uk-card-muted .uk-card-body {

  padding: 15px;

}



.sidebar-container .uk-card-muted .uk-card-title {

  color: #495057;

  font-size: 1rem;

  margin-bottom: 10px;

  border-bottom: 1px solid #ced4da;

  padding-bottom: 5px;

}



.sidebar-container .uk-list-bullet {

  margin-left: 15px;

}



.sidebar-container .uk-list-bullet li {

  margin-bottom: 3px;

  color: #6c757d;

}



/* Scrollbar özelleştirmesi */

.student-list::-webkit-scrollbar,

.sidebar-container::-webkit-scrollbar {

  width: 6px;

}



.student-list::-webkit-scrollbar-track,

.sidebar-container::-webkit-scrollbar-track {

  background: #f1f1f1;

  border-radius: 10px;

}



.student-list::-webkit-scrollbar-thumb,

.sidebar-container::-webkit-scrollbar-thumb {

  background: #c1c1c1;

  border-radius: 10px;

}



.student-list::-webkit-scrollbar-thumb:hover,

.sidebar-container::-webkit-scrollbar-thumb:hover {

  background: #a8a8a8;

}



/* Responsive tasarım */

@media (max-width: 960px) {

  .sidebar-container {

    height: auto;

    border-right: none;

    border-bottom: 1px solid #e9ecef;

  }

  

  .sidebar-container .uk-card {

    padding: 15px;

  }

  

  .filter-button-group {

    justify-content: center;

  }

  

  .student-list {

    max-height: 200px;

  }

  

  .uk-grid-small.uk-child-width-1-2 > * {

    width: 100%;

  }

}



@media (max-width: 640px) {

  .sidebar-container .uk-card-title {

    font-size: 1rem;

  }

  

  .sidebar-container .uk-text-large {

    font-size: 1.2rem;

  }

  

  .filter-btn {

    font-size: 11px;

    padding: 4px 8px;

  }

  

  .student-item {

    padding: 8px;

  }

  

  .student-name {

    font-size: 13px;

  }

  

  .student-info {

    font-size: 10px;

  }

}



/* Loading durumu */

.student-list.loading {

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100px;

}



/* Empty state */

.student-list.empty {

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100px;

  color: #6c757d;

  font-style: italic;

}



/* Drag over durumu */

#calendar.drag-over {

  background-color: rgba(0,123,255,0.1);

  border: 2px dashed #007bff;

}



/* Animation */

@keyframes slideIn {

  from {

    opacity: 0;

    transform: translateY(-10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.student-item {

  animation: slideIn 0.3s ease;

}



/* Hover effects */

.filter-btn, .student-item, .sidebar-container .uk-card-primary,

.sidebar-container .uk-card-secondary, .sidebar-container .uk-card-success,

.sidebar-container .uk-card-warning, .sidebar-container .uk-card-muted {

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

}



/* Focus states */

.filter-btn:focus,

#studentSearch:focus,

.uk-input:focus,

.uk-select:focus {

  outline: none;

  box-shadow: 0 0 0 3px rgba(0,123,255,0.25);

}



/* Potansiyel Ders Hesabı Container */

.lesson-calculation-container {

    margin: 0px;

    background: rgba(46, 125, 50, 0.08);

    padding: 8px;

    border-left: 3px solid #4caf50;

}



.lesson-calculation-header {

    text-align: center;

    margin-bottom: 6px;

}



.calculation-title {

    font-size: 12px;

    font-weight: 600;

    color: #2e7d32;

}



.lesson-calculation-stats {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.calculation-section {

    background: rgba(255, 255, 255, 0.9);

    border-radius: 6px;

    padding: 6px 8px;

    border: 1px solid rgba(46, 125, 50, 0.2);

    display: flex;

    align-items: center;

    gap: 6px;

    white-space: nowrap;

    font-size: 11px;

}



.calculation-type-title {

    font-weight: 600;

    color: #2e7d32;

    display: inline;

    margin: 0;

}



.calculation-details {

    display: inline-flex;

    align-items: baseline;

    gap: 0;

}



.calculation-details span {

    display: inline;

    color: #424242;

    font-weight: 500;

}



.calculation-details span + span::before {

    content: " / ";

    margin: 0 4px;

    color: #757575;

    font-weight: 400;

}



.total-lessons {

    color: #2e7d32; /* Yeşil - mevcut */

    font-weight: 700;

    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);

}



.given-lessons {

    color: #1976d2; /* Mavi - verilen */

    font-weight: 700;

}



.remaining-lessons {

    color: #d32f2f; /* Kırmızı - kalan */

    font-weight: 700;

    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);

}



.calculation-separator {

    color: #757575;

    font-weight: 400;

}



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

   BIRTHDAY FEATURES

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



/* Doğum günü şapkası - parti icon avatarın sol üst köşesinde */

.birthday-hat {

  position: absolute;

  top: -8px;

  left: -8px;

  font-size: 14px;

  z-index: 10;

  pointer-events: none;

  transform: rotate(-15deg);

  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));

}



/* Doğum günü kartı özel background */

.birthday-student {

  background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700) !important;

  border: 2px solid #FFB347 !important;

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

  animation: birthdayGlow 3s infinite;

}



/* Konfeti animasyonu */

@keyframes birthdayBounce {

  0%, 100% { transform: translateY(0) rotate(0deg); }

  25% { transform: translateY(-3px) rotate(-5deg); }

  50% { transform: translateY(-5px) rotate(0deg); }

  75% { transform: translateY(-3px) rotate(5deg); }

}



@keyframes birthdayGlow {

  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); }

}



/* Konfeti efekti için kart animation */

.birthday-confetti {

  animation: confettiDance 3s ease-in-out;

}



@keyframes confettiDance {

  0% { transform: scale(1) rotate(0deg); }

  25% { transform: scale(1.05) rotate(2deg); }

  50% { transform: scale(1.1) rotate(-2deg); }

  75% { transform: scale(1.05) rotate(1deg); }

  100% { transform: scale(1) rotate(0deg); }

}



/* Doğum günü konfeti partikülleri - Lottie benzeri animasyon */

.birthday-confetti::before,

.birthday-confetti::after {

  content: "";

  position: absolute;

  width: 4px;

  height: 4px;

  border-radius: 50%;

  pointer-events: none;

  z-index: 999;

}



.birthday-confetti::before {

  background: #FFD700;

  top: 20px;

  left: 15px;

  animation: confettiFall1 3s ease-out;

}



.birthday-confetti::after {

  background: #FF6B6B;

  top: 20px;

  right: 15px;

  animation: confettiFall2 3s ease-out 0.5s;

}



/* Çoklu konfeti parçacıkları için */

.confetti-particle {

  position: absolute;

  width: 3px;

  height: 3px;

  pointer-events: none;

  z-index: 1000;

}



.confetti-particle:nth-child(1) { background: #FFD700; }

.confetti-particle:nth-child(2) { background: #FF6B6B; }

.confetti-particle:nth-child(3) { background: #4ECDC4; }

.confetti-particle:nth-child(4) { background: #45B7D1; }

.confetti-particle:nth-child(5) { background: #FFA07A; }

.confetti-particle:nth-child(6) { background: #98D8C8; }



@keyframes confettiFall1 {

  0% { 

    opacity: 1; 

    transform: translateY(0) translateX(0) rotate(0deg); 

  }

  25% { 

    opacity: 0.9; 

    transform: translateY(15px) translateX(-5px) rotate(90deg); 

  }

  50% { 

    opacity: 0.7; 

    transform: translateY(30px) translateX(5px) rotate(180deg); 

  }

  75% { 

    opacity: 0.5; 

    transform: translateY(45px) translateX(-3px) rotate(270deg); 

  }

  100% { 

    opacity: 0; 

    transform: translateY(60px) translateX(0) rotate(360deg); 

  }

}



@keyframes confettiFall2 {

  0% { 

    opacity: 1; 

    transform: translateY(0) translateX(0) rotate(0deg); 

  }

  25% { 

    opacity: 0.9; 

    transform: translateY(12px) translateX(5px) rotate(-90deg); 

  }

  50% { 

    opacity: 0.7; 

    transform: translateY(28px) translateX(-5px) rotate(-180deg); 

  }

  75% { 

    opacity: 0.5; 

    transform: translateY(42px) translateX(3px) rotate(-270deg); 

  }

  100% { 

    opacity: 0; 

    transform: translateY(55px) translateX(0) rotate(-360deg); 

  }

}



/* Program Badge Stilleri */

.program-badge {

  display: inline-block;

  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  color: white;

  font-size: 10px;

  font-weight: 600;

  padding: 2px 6px;

  border-radius: 8px;

  margin: 0 2px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  box-shadow: 0 1px 3px rgba(0,0,0,0.12);

  transition: all 0.2s ease;

  border: 1px solid rgba(255,255,255,0.2);

  position: relative;

}



/* Zorunlu Ders Badge - Program badge'inin sağ üst köşesinde */

.mandatory-lesson-badge {

  position: absolute;

  top: -6px;

  right: -6px;

  background: #6c757d;

  color: white;

  font-size: 8px;

  font-weight: 700;

  padding: 1px 4px;

  border-radius: 50%;

  min-width: 8px;

  height: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

  z-index: 10;

}



/* 1 zorunlu ders kaldı - Kırmızı */

.mandatory-lesson-badge.mandatory-danger {

  background: #dc3545;

  animation: pulse-danger 1.5s infinite;

}



/* 2+ zorunlu ders kaldı - Yeşil */

.mandatory-lesson-badge.mandatory-success {

  background: #28a745;

}



@keyframes pulse-danger {

  0%, 100% { 

    transform: scale(1);

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

  }

  50% { 

    transform: scale(1.1);

    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);

  }

}



.program-badge:hover {

  transform: translateY(-1px);

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

}



/* Program türlerine göre tutarlı renkler */

.program-badge.zihinsel {

  background: linear-gradient(135deg, #ff6b9d 0%, #f093fb 100%) !important; /* Pembe */

}



.program-badge.bedensel {

  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important; /* Mor */

}



.program-badge.otizm {

  background: linear-gradient(135deg, #ff8a00 0%, #ffa726 100%) !important; /* Turuncu */

}



.program-badge.default {

  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%) !important; /* Gri */

}



/* Program adını içeren alan */

.student-program-simple {

  font-size: 11px;

  color: #6c757d;

  margin-top: 2px;

  line-height: 1.2;

  min-height: 14px;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 2px;

}



/* Kaba değerlendirme yapılmamış durumu */

.program-badge.no-evaluation {

  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);

  color: white;

  font-style: italic;

  opacity: 0.8;

}



/* Özel Öğrenci badge */

.program-badge.special-student-badge {

  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);

  color: white;

  font-weight: 600;

}



/* Draggable program badge'ler */

.program-badge[draggable="true"] {

  cursor: grab;

  transition: all 0.2s ease;

  position: relative;

}



.program-badge[draggable="true"]:hover {

  transform: translateY(-2px);

  box-shadow: 0 4px 8px rgba(0,0,0,0.2);

}



.program-badge[draggable="true"]:active {

  cursor: grabbing;

  transform: scale(0.95);

}



/* Dragging durumu */

.program-badge.dragging {

  opacity: 0.5;

  transform: scale(1.1);

  z-index: 1000;

}



/* Fallback badge'ler - draggable değil */

.program-badge.fallback {

  opacity: 0.7;

  cursor: default;

}