/* 
 * coverage-tracker.css
 * CSS styles for the Coverage Tracker component
 */

/* CSS for Coverage Tracker Component */
#coverage-tracker-row {
    margin-top: 2rem;
    clear: both;
  }
  
  #coverage-tracker-container {
    width: 100%;
  }
  
  /* Coverage tracker card styling */
  #coverage-tracker-container .card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
  }
  
  #coverage-tracker-container .card-header {
    border-bottom: none;
  }
  
  /* Progress bars styling */
  #coverage-tracker-container .progress {
    background-color: #e9ecef;
    border-radius: 0.25rem;
    height: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  /* Individual outcome styling */
  .outcome-coverage-item {
    padding: 0.75rem;
    border-radius: 0.25rem;
    background-color: #f8f9fa;
    border-left: 3px solid #dee2e6;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
  }
  
  .outcome-coverage-item:hover {
    background-color: #f1f3f5;
    border-left-color: var(--nord-sekund7, #009FDF);
  }
  
  .outcome-text {
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
  }
  
  .coverage-percentage {
    font-weight: bold;
    color: var(--nord-sekund2, #165C7D);
  }
  
  /* Session coverage pills */
  .session-coverage-pill {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background-color: #e9ecef;
    color: #495057;
    border-radius: 1rem;
    font-size: 0.75rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
  }
  
  /* Ensure the scrollable area has a fixed height */
  .outcome-coverage-list {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 0.5rem;
  }
  
  /* Make sure coverage tracker doesn't overlap session manager */
  @media (max-width: 768px) {
    #coverage-tracker-row {
      margin-top: 1rem;
    }
    
    .outcome-coverage-item {
      padding: 0.5rem;
    }
    
    .outcome-coverage-list {
      max-height: 250px;
    }
  }

/* Badge styles for categories */
.badge.category-knowledge {
  background-color: var(--category-knowledge, #9575cd);
  color: white;
}

.badge.category-skills {
  background-color: var(--category-skills, #4fc3f7);
  color: white;
}

.badge.category-competence {
  background-color: var(--category-competence, #81c784);
  color: white;
}

/* Badge styles for SOLO levels */
.badge.solo-unistructural {
  background-color: var(--solo-unistructural, #ffb74d);
  color: #333;
}

.badge.solo-multistructural {
  background-color: var(--solo-multistructural, #fff176);
  color: #333;
}

.badge.solo-relational {
  background-color: var(--solo-relational, #81c784);
  color: white;
}

.badge.solo-extended {
  background-color: var(--solo-extended, #64b5f6);
  color: white;
}

/* Outcome list styling */
.outcome-coverage-list {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 5px;
}

.outcome-coverage-item {
  padding: 10px;
  border-radius: 4px;
  background-color: #f9f9f9;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.outcome-coverage-item:hover {
  background-color: #f0f0f0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.outcome-coverage-item .outcome-info {
  margin-bottom: 5px;
}

.outcome-coverage-item .outcome-text {
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outcome-coverage-item .coverage-percentage {
  font-weight: bold;
  font-size: 0.9rem;
}

/* Progress bar styling */
.progress {
  background-color: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

/* Styling for fully covered outcomes */
.progress-bar.bg-success {
  background-color: #28a745 !important;
}

/* Override for category progress bars */
.coverage-by-category .progress-bar {
  height: 12px;
}

/* Animation for refresh button */
.refresh-coverage-btn:hover i {
  animation: spin 1s linear;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive styling */
@media (max-width: 768px) {
  .outcome-coverage-list {
    max-height: 200px;
  }
}

/* Total coverage indicator in session panel */
.total-coverage-indicator {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.total-coverage-indicator:hover {
  opacity: 1;
}

.total-coverage-indicator .progress {
  height: 4px !important;
}