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

   Öğrenci Filtre Sistemi CSS

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



.student-filters {

  margin-bottom: 12px;

  padding: 8px;

  background: #f8f9fa;

  border: 1px solid #e5e5e5;

  border-radius: 2px;

  display: flex;

  gap: 8px;

  align-items: flex-end;

}



.filter-group {

  flex: 1;

  min-width: 0;

}



.filter-label {

  display: block;

  font-size: 11px;

  font-weight: 600;

  color: #495057;

  margin-bottom: 4px;

}



.filter-group select {

  font-size: 11px;

  padding: 4px 6px;

  border-radius: 2px;

  border: 1px solid #ddd;

  background: white;

  color: #495057;

  font-weight: 500;

}



.filter-group select:focus {

  border-color: #007bff;

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

  outline: none;

}



.filter-group select option {

  padding: 4px 8px;

  font-size: 11px;

}



/* Öğrenci listesi için ek CSS */

.student-list {

  border: 1px solid #e5e5e5;

  border-radius: 2px;

  background: white;

}



/* Öğrenci sayısı göstergesi */

.student-count-badge {

  display: inline-block;

  background: #007bff;

  color: white;

  padding: 2px 6px;

  border-radius: 10px;

  font-size: 10px;

  font-weight: 600;

  margin-left: 4px;

}



/* Filter dropdown için özel stil */

.uk-select.uk-form-small {

  font-size: 11px;

  padding: 4px 6px;

  height: auto;

  min-height: 24px;

}



/* Öğrenci kartları için stiller */

.student-card-simple {

  display: flex;

  align-items: center;

  padding: 6px 6px 6px 8px; /* Sağ tarafta buton için alan */

  margin-bottom: 4px;

  background: white;

  border: 1px solid #e5e5e5;

  border-radius: 2px;

  cursor: pointer;

  transition: background-color 0.2s ease;

  position: relative; /* Absolute positioned buton için */

}



.student-card-simple:hover {

  background-color: #f8f9fa;

  border-color: #007bff;

}



.student-avatar-simple {

  width: 40px;

  height: 40px;

  margin-right: 8px;

  border-radius: 50%;

  overflow: visible;

  flex-shrink: 0;

  position: relative;

}



/* Özel öğrenci yıldız ikonu */

.student-avatar-simple .special-star {

  position: absolute;

  top: -6px;

  right: -6px;

  font-size: 12px;

  background: #ffd700;

  border-radius: 50%;

  width: 16px;

  height: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 2px solid #fff;

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

  z-index: 100;

}



.student-avatar-simple img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 50%;

}



.student-info-simple {

  flex: 1;

  min-width: 0;

}



.student-name-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 2px;

}



.student-name-simple {

  font-size: 11px;

  font-weight: 600;

  color: #495057;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  flex: 1;

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

}



.student-lesson-hours {

  display: flex;

  gap: 2px;

  flex-shrink: 0;

}



.lesson-hour-box {

  font-size: 9px;

  font-weight: 600;

  padding: 1px 4px;

  border-radius: 0px;

  color: white;

  min-width: 18px;

  text-align: center;

}



.lesson-hour-box.individual {

  background-color: #007bff;

}



.lesson-hour-box.group {

  background-color: #28a745;

}



.lesson-hour-box.zero {

  background-color: #dc3545;

}



.student-program-simple {

  font-size: 9px;

  color: #6c757d;

  font-weight: 500;

  white-space: nowrap;

  //overflow: hidden;

  text-overflow: ellipsis;

}



/* Responsive */

@media (max-width: 768px) {

  .student-filters {

    flex-direction: column;

    gap: 6px;

    padding: 6px;

  }

  

  .filter-group {

    flex: none;

  }

  

  .filter-label {

    font-size: 10px;

  }

  

  .filter-group select {

    font-size: 10px;

    padding: 3px 5px;

  }

  

  .student-card-simple {

    padding: 4px 6px;

  }

  

  .student-name-simple {

    font-size: 10px;

  }

  

  .student-program-simple {

    font-size: 8px;

  }

}