/* ========================================
   PART 1: BASE & LAYOUT STYLES
   ======================================== */

/* Root variables for consistent coloring */
:root {
  /* Nord University color scheme */
  --nord-sekund1: #003D4C;  /* Dark blue */
  --nord-sekund2: #165C7D;  /* Medium blue */
  --nord-sekund3: #115E67;  /* Dark turquoise */
  --nord-sekund4: #007041;  /* Dark green */
  --nord-prima1: #8FD6BD;   /* Light turquoise */
  --nord-prima3: #A9C47F;   /* Light green */
  --nord-sekund6: #94B7BB;  /* Gray blue */
  --nord-sekund5: #6CC24A;  /* Light green */
  --nord-sekund7: #009FDF;  /* Light blue */
  --nord-kontrast1: #EC5742; /* Red */
  --nord-kontrast2: #FFA300; /* Orange */
  --nord-hvit: #FFFFFF;     /* White */
  
  /* SOLO Taxonomy colors */
  --solo-unistructural: #ffb74d;    /* Light orange */
  --solo-multistructural: #fff176;  /* Light yellow */
  --solo-relational: #81c784;       /* Light green */
  --solo-extended: #64b5f6;         /* Light blue */
  
  /* Bologna Process category colors */
  --category-knowledge: #9575cd;    /* Purple */
  --category-skills: #4fc3f7;       /* Blue */
  --category-competence: #81c784;   /* Green */
}

/* Base styles */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  background-color: #f8f9fa;
}

/* Nord University Branding */
.nord-branding {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background-color: white;
  border-bottom: 3px solid var(--nord-sekund6);
}

.nord-title {
  font-size: 1.4rem;
  color: var(--nord-sekund1);
  font-weight: bold;
  margin-left: 15px;
}

/* Language selector styling */
.language-selector {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

.lang-btn {
  background-color: transparent;
  border: 1px solid var(--nord-sekund6);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.lang-btn.active {
  background-color: var(--nord-sekund2);
  color: white;
  border-color: var(--nord-sekund2);
}

/* Card styling */
.card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  border: none;
}

.card-header.bg-primary {
  background-color: var(--nord-sekund2) !important;
}

/* Tab navigation */
.nav-tabs .nav-link {
  color: var(--nord-sekund1);
  margin-right: 2px;
  transition: all 0.2s ease;
}

.nav-tabs .nav-link.active {
  color: var(--nord-sekund2);
  font-weight: bold;
  border-color: var(--nord-sekund6) var(--nord-sekund6) #fff;
}

.nav-tabs .nav-link:hover:not(.active) {
  background-color: #f0f0f0;
  border-color: #e0e0e0 #e0e0e0 var(--nord-sekund6);
}

/* Pill navigation */
.nav-pills .nav-link.active {
  background-color: var(--nord-sekund2);
  color: white;
}

.nav-pills .nav-link {
  color: var(--nord-sekund2);
}

/* Tab content layout */
.tab-content {
  width: 100%;
}

/* Form group spacing */
.form-group {
  margin-bottom: 1rem;
}

/* Fix for Bootstrap tab interference */
#sessions-list-content,
#sessions-details-content,
#session-basic-content,
#session-outcomes-content {
  display: none;
}

#sessions-list-content.show,
#sessions-details-content.show,
#session-basic-content.show,
#session-outcomes-content.show {
  display: block;
}

/* Equal height card layout */
.equal-height-cards {
  display: flex;
  flex-wrap: wrap;
}

.equal-height-cards > .col-md-4,
.equal-height-cards > .col-md-6 {
  display: flex;
  margin-bottom: 0 !important;
}

.equal-height-cards > .col-md-4 > div,
.equal-height-cards > .col-md-6 > div {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.equal-height-cards .card {
  margin-bottom: 0;
  flex-grow: 1;
  height: auto !important;
}

.equal-height-cards .card-body {
  flex: 1 1 auto;
  overflow: visible;
}

/* Override margins in equal height layouts */
.equal-height-cards .card,
.equal-height-cards #course-info-container,
.equal-height-cards #course-description-container,
.equal-height-cards #session-manager-container {
  margin-bottom: 0 !important;
}

/* Animation for highlight effects */
@keyframes highlight-pulse {
  0% { background-color: white; }
  50% { background-color: #f0f7ff; }
  100% { background-color: white; }
}

.highlight-pulse {
  animation: highlight-pulse 1s;
}

/* ========================================
   PART 2: COMPONENT-SPECIFIC STYLES
   ======================================== */

/* --- SOLO Taxonomy Components --- */

/* SOLO Taxonomy badges */
.solo-badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: bold;
  border-radius: 4px;
  margin-right: 5px;
}

.solo-unistructural {
  background-color: var(--solo-unistructural);
  color: #333;
}

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

.solo-relational {
  background-color: var(--solo-relational);
  color: white;
}

.solo-extended {
  background-color: var(--solo-extended);
  color: white;
}

/* Solo level indicators with click cue */
.solo-level-indicator {
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.solo-level-indicator:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.solo-level-indicator::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 6px 0;
  border-color: transparent rgba(0, 0, 0, 0.2) transparent transparent;
}

/* Solo legend container */
.solo-legend-container {
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
}

.solo-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.solo-legend-item {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.2s;
}

.solo-legend-item:hover {
  background-color: #f0f0f0;
}

.solo-legend-color {
  width: 15px;
  height: 15px;
  margin-right: 5px;
  border-radius: 3px;
}

/* Academic Level Guide */
.academic-level-guide {
  border-top: 1px solid #e0e0e0;
  padding-top: 12px;
  margin-top: 10px;
}

.academic-level {
  margin-bottom: 8px;
}

.academic-level-label {
  font-weight: bold;
  width: 80px;
  display: inline-block;
}

.level-indicators {
  display: inline-flex;
  gap: 5px;
}

.level-indicator {
  width: 24px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.level-indicator.common {
  height: 14px;
}

.level-indicator.rare {
  height: 10px;
  opacity: 0.6;
}

/* --- Learning Outcomes Components --- */

/* Learning outcome group styles */
.learning-outcome-group {
  position: relative;
  transition: background-color 0.2s ease;
}

.learning-outcome-group:hover {
  background-color: #f8f9fa;
}

/* Outcome text grows to show the whole statement (js/utils/autoGrowTextarea.js) */
textarea.learning-outcome-input {
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  min-height: calc(1.5em + 0.75rem + 2px);
}

/* Controls on one row, the outcome text on its own full-width line below,
   so it stays readable in the narrow course information column */
.learning-outcome-group:has(> textarea.learning-outcome-input) {
  flex-wrap: wrap;
}

.learning-outcome-group > textarea.learning-outcome-input {
  order: 1;
  flex: 1 0 100% !important;
  width: 100%;
  margin-top: 4px;
  margin-left: 0 !important;
  border-radius: var(--bs-border-radius, 0.375rem) !important;
}

/* SOLO indicator is a toggle for the inline SOLO panel */
.solo-level-indicator {
  cursor: pointer;
  justify-content: center;
}

.solo-level-indicator:focus-visible {
  outline: 2px solid var(--nord-sekund1, #003D4C);
  outline-offset: 2px;
}

.learning-outcome-group.solo-panel-open {
  margin-bottom: 0 !important;
}

.learning-outcome-group.solo-panel-open .solo-level-indicator {
  box-shadow: inset 0 -3px 0 var(--nord-sekund1, #003D4C);
}

/* Inline SOLO panel, directly under the outcome being edited */
.solo-level-panel {
  margin-top: 0.25rem;
  border: 2px solid var(--nord-sekund1, #003D4C);
}

.solo-level-panel .solo-level-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.solo-level-panel .solo-level-option:hover,
.solo-level-panel .solo-level-option.selected {
  transform: none;
}

.solo-level-panel .solo-level-option.selected {
  border-width: 2px;
}

.solo-level-panel .solo-level-option:focus-visible {
  outline: 2px solid var(--nord-sekund1, #003D4C);
  outline-offset: 2px;
}

/* Character counter */
.char-counter {
  min-width: 40px;
  text-align: center;
}

/* Category badges */
.category-badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  color: white;
}

.category-knowledge {
  background-color: var(--category-knowledge);
}

.category-skills {
  background-color: var(--category-skills);
}

.category-competence {
  background-color: var(--category-competence);
}

/* Category select dropdown */
.outcome-category-select {
  background-color: #f8f9fa;
  border-right: 0;
  transition: all 0.2s;
}

.outcome-category-select:focus {
  box-shadow: none;
  border-color: #ced4da;
}

/* Color indicators for categories */
.outcome-category-select option[value="knowledge"] {
  background-color: #f5f0ff;
}

.outcome-category-select option[value="skills"] {
  background-color: #f0f8ff;
}

.outcome-category-select option[value="competence"] {
  background-color: #f0fff5;
}

/* Category headers in tables */
.category-header {
  background-color: #f8f9fa;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 2px solid #dee2e6;
}

.category-header td {
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
}

/* Analysis text */
#solo-analysis-text {
  display: block;
}

.solo-level-tips {
  font-size: 0.9rem;
}

.solo-level-tips .card-header {
  padding: 0.5rem 1rem;
}

.solo-level-tips .list-group-item {
  padding: 0.75rem 1rem;
}

.highlighted-level {
  background-color: rgba(13, 110, 253, 0.05);
  border-left: 3px solid var(--bs-primary);
  padding-left: 0.5rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* --- Modal Components --- */

/* SOLO Level Selection in modal */
.solo-level-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.solo-level-option {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #dee2e6;
  cursor: pointer;
  transition: all 0.2s;
}

.solo-level-option:hover {
  transform: translateX(5px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.solo-level-option.selected {
  border-color: #007bff;
  background-color: #f0f7ff;
  transform: translateX(10px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.solo-level-color {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin-right: 10px;
}

.solo-level-details {
  flex: 1;
}

.solo-level-name {
  font-weight: bold;
  margin-bottom: 3px;
}

.solo-level-desc {
  font-size: 0.85rem;
  color: #666;
}

/* Verb pill suggestions */
.verb-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 150px;
  overflow-y: auto;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 5px;
}

.verb-pill {
  display: inline-block;
  padding: 4px 10px;
  background-color: #e9ecef;
  border-radius: 50px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.verb-pill:hover {
  background-color: #dee2e6;
}

.verb-pill.active, 
.verb-pill.bg-primary {
  background-color: var(--nord-sekund2) !important;
  color: white !important;
  border-color: var(--nord-sekund2);
}

/* Verb suggestions section */
.verb-suggestions-section {
  border-top: 1px solid #eee;
  padding-top: 15px;
  margin-top: 15px;
}

/* Apply verb checkbox */
#apply-verb-checkbox {
  margin-right: 8px;
}

/* Modal outcome alert */
.alert-secondary {
  font-size: 0.9rem;
  border-left: 4px solid #6c757d;
}

/* --- Session Manager Components --- */

/* Session list styling */
.session-list {
  max-height: 400px;
  overflow-y: auto;
}

.session-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
  transition: all 0.2s ease;
  cursor: pointer;
}

.session-list-item:hover {
  background-color: #f5f8fa;
}

.session-list-item.active {
  background-color: #e7f1ff;
  border-left: 3px solid var(--nord-sekund7);
}

/* Session outcomes */
.session-outcome-item {
  border-bottom: 1px solid #eee;
  padding: 10px;
  transition: all 0.2s ease;
}

.session-outcome-item:hover {
  background-color: #f8f9fa;
}

/* Button styling */
.btn-group .btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

/* Message styling */
.no-sessions-message,
.no-course-outcomes-message,
.no-session-outcomes-message {
  padding: 20px;
  text-align: center;
  background-color: #f8f9fa;
  border-radius: 5px;
  color: #6c757d;
  font-style: italic;
}

/* Session manager card */
.session-manager-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.session-manager-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}

.session-manager-card .tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.session-manager-card .tab-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ========================================
   PART 3: TABLE FIX & RESPONSIVE STYLES
   ======================================== */

/* --- Course Outcomes Table Fix --- */

/* Clear fix for course outcomes table scrolling issue */
#course-outcomes-connection {
  overflow: visible !important;
  max-height: none !important;
}

#course-outcomes-table {
  overflow: visible !important;
  max-height: none !important;
}

#course-outcomes-list tr {
  display: table-row !important;
}

.table-responsive {
  overflow-x: auto;
  overflow-y: visible !important;
}

/* Session tab content fixes */
#session-outcomes-content {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  padding-bottom: 15px;
}

/* These fixes solve the tab display issues */
#session-detail-tabs .tab-pane {
  display: block !important;
  flex: none !important;
  height: auto !important;
  overflow: visible !important;
}

#session-basic-content.tab-pane.active,
#session-outcomes-content.tab-pane.active {
  display: block !important;
}

#sessions-details-content {
  overflow: visible !important;
  height: auto !important;
  min-height: 300px;
}

.course-outcomes-section {
  height: auto !important;
  overflow: visible !important;
}

/* --- Responsive Adjustments --- */

/* Media queries for different screen sizes */
@media (max-width: 768px) {
  /* Solo taxonomy components on small screens */
  .solo-legend-container {
    flex-direction: column;
  }
  
  .solo-legend {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .academic-level-guide {
    margin-top: 15px;
  }
  
  .solo-level-selector {
    gap: 8px;
  }
  
  .solo-level-details {
    padding: 8px;
  }
  
  .solo-legend {
    flex-direction: column;
    align-items: flex-start;
  }
  
  /* Learning outcomes on small screens */
  .input-group.learning-outcome-group {
    flex-wrap: wrap;
  }
  
  .input-group.learning-outcome-group .form-control {
    width: 100%;
    margin-top: 5px;
  }
  
  .input-group.learning-outcome-group .btn {
    margin-top: 5px;
  }
  
  .outcome-category-select {
    max-width: 100px !important;
    flex: 0 0 100px !important;
    font-size: 0.85rem;
  }
  
  /* Content containers on small screens */
  .solo-level-name {
    font-size: 0.9rem;
  }
  
  .solo-level-desc {
    font-size: 0.8rem;
  }
  
  .verb-container {
    max-height: 200px;
  }
  
  /* Equal height cards don't work well on small screens */
  .equal-height-cards {
    display: block;
  }
  
  .equal-height-cards > .col-md-4,
  .equal-height-cards > .col-md-6 {
    display: block;
    margin-bottom: 1rem !important;
  }
  
  .equal-height-cards .card {
    height: auto !important;
  }
}

/* For very small screens (mobile phones) */
@media (max-width: 576px) {
  .nord-title {
    font-size: 1.2rem;
  }
  
  .session-list {
    max-height: 300px;
  }
  
  .session-list-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .session-list-item .btn-group {
    margin-top: 8px;
    align-self: flex-end;
  }
  
  .category-badge,
  .solo-badge {
    font-size: 0.7rem;
  }
}

/* For large screens (larger desktops) */
@media (min-width: 1200px) {
  .session-list {
    max-height: 500px;
  }
  
  .verb-container {
    max-height: 180px;
  }
}

/* Print styles for exporting */
@media print {
  .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
  
  .session-list {
    max-height: none;
    overflow: visible;
  }
  
  .verb-container {
    max-height: none;
    overflow: visible;
  }
  
  .nav-tabs,
  .nav-pills,
  .btn-group,
  .btn {
    display: none;
  }
  
  .tab-pane {
    display: block !important;
    opacity: 1 !important;
  }
}

/* ========================================
   ECTS Hours & Lection Configuration Popovers
   ======================================== */
.ects-config-form,
.lection-config-form {
  min-width: 180px;
  padding: 0.5rem;
}

.ects-config-form .form-control,
.lection-config-form .form-control {
  margin-bottom: 0.25rem;
}

.ects-config-form .text-warning,
.lection-config-form .text-warning {
  font-size: 0.75rem;
}

#ects-hours-config-btn,
#lection-config-btn {
  border-color: #dee2e6;
}

#ects-hours-config-btn:hover,
#lection-config-btn:hover {
  background-color: #f8f9fa;
}

/* Duration unit selector */
#duration-unit {
  border-left: 0;
}

.duration-display {
  font-style: italic;
}

/* ========================================
   Session Elements (Break, Information)
   ======================================== */
/* Sidebar session element cards - smaller squared cards */
.session-element-card {
  width: 90px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  cursor: grab;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.session-element-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.session-element-card:active {
  cursor: grabbing;
}

.session-element-card.dragging {
  opacity: 0.5;
}

.session-element-header {
  padding: 6px;
  text-align: center;
  background-color: #6c757d;
  color: white;
}

.session-element-header i {
  font-size: 1rem;
}

.session-element-body {
  padding: 6px;
  text-align: center;
  background-color: white;
}

.session-element-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #495057;
  margin-bottom: 2px;
}

.session-element-duration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.session-element-duration .duration-input {
  width: 35px;
  padding: 1px 2px;
  font-size: 0.7rem;
  text-align: center;
  border: 1px solid #ced4da;
  border-radius: 3px;
}

.session-element-duration .duration-input:focus {
  outline: none;
  border-color: #6c757d;
}

.session-element-duration .duration-unit {
  font-size: 0.65rem;
  color: #6c757d;
}

/* Card specific colors */
.session-element-card.card-break .session-element-header {
  background-color: #8B7355;
}

.session-element-card.card-information .session-element-header {
  background-color: #5bc0de;
}

/* Session elements in storyboard (Break, Information) - smaller squared cards */
.session-element-storyboard {
  width: 120px;
  height: 115px;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  margin: 10px 5px;
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
  cursor: grab;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
  align-self: flex-start;
}

.session-element-storyboard:hover {
  border-color: #adb5bd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.session-element-storyboard .element-header {
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #6c757d;
  color: white;
}

.session-element-storyboard .element-header i {
  font-size: 1rem;
  color: white;
}

.session-element-storyboard .element-title {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: #495057;
  padding: 2px 4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.session-element-storyboard .element-title[contenteditable="true"] {
  cursor: text;
  padding: 4px;
  border-radius: 3px;
}

.session-element-storyboard .element-title[contenteditable="true"]:hover {
  background-color: #e9ecef;
}

.session-element-storyboard .element-title[contenteditable="true"]:focus {
  background-color: white;
  outline: 1px solid #6c757d;
}

.session-element-storyboard .element-body {
  background-color: white;
  padding: 6px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.session-element-storyboard .element-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
}

.session-element-storyboard .duration-display {
  font-size: 0.65rem;
  color: #6c757d;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.session-element-storyboard .duration-display:hover {
  background-color: #e9ecef;
}

.session-element-storyboard .duration-display i {
  font-size: 0.6rem;
}

/* Button bar at bottom - matches activity cards (edit left, delete right) */
.session-element-storyboard .element-controls {
  display: flex;
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid #eee;
  margin-top: auto;
}

.session-element-storyboard .element-controls .btn {
  padding: 2px 6px;
  font-size: 0.7rem;
}

.session-element-storyboard .element-controls .btn i {
  font-size: 0.65rem;
}

/* Break card specific - brown/coffee colored header */
.session-element-storyboard.card-break .element-header {
  background-color: #8B7355;
}

/* Information card specific - type-based colors */
.session-element-storyboard.card-information .element-header {
  background-color: #5bc0de;
}

/* Information type colors */
.session-element-storyboard.info-type-announcement .element-header {
  background-color: #5bc0de;
}

.session-element-storyboard.info-type-reminder .element-header {
  background-color: #f0ad4e;
}

.session-element-storyboard.info-type-instructions .element-header {
  background-color: #5cb85c;
}

.session-element-storyboard.info-type-progress .element-header {
  background-color: #6f42c1;
}

.session-element-storyboard.info-type-resource .element-header {
  background-color: #0d6efd;
}

/* Content preview in information cards */
.session-element-storyboard .element-content-preview {
  font-size: 0.6rem;
  color: #6c757d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
  margin-top: 2px;
}

/* Information card clickable area */
.session-element-storyboard.card-information .element-details {
  cursor: pointer;
}

.session-element-storyboard.card-information .element-details:hover {
  background-color: #f8f9fa;
}

/* Information modal styles */
#information-modal .info-type-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#information-modal .info-type-btn {
  padding: 0.5rem 0.75rem;
  border: 2px solid #dee2e6;
  border-radius: 0.375rem;
  background-color: white;
  color: #495057;
  font-size: 0.875rem;
  transition: all 0.2s;
}

#information-modal .info-type-btn:hover {
  border-color: #5bc0de;
  background-color: #f8f9fa;
}

#information-modal .info-type-btn.active {
  border-color: #5bc0de;
  background-color: #5bc0de;
  color: white;
}

#information-modal .info-type-btn[data-type="announcement"].active {
  border-color: #5bc0de;
  background-color: #5bc0de;
}

#information-modal .info-type-btn[data-type="reminder"].active {
  border-color: #f0ad4e;
  background-color: #f0ad4e;
}

#information-modal .info-type-btn[data-type="instructions"].active {
  border-color: #5cb85c;
  background-color: #5cb85c;
}

#information-modal .info-type-btn[data-type="progress"].active {
  border-color: #6f42c1;
  background-color: #6f42c1;
}

#information-modal .info-type-btn[data-type="resource"].active {
  border-color: #0d6efd;
  background-color: #0d6efd;
}

/* Break time display in phase duration badge */
.break-time-badge {
  font-size: 0.75em;
  opacity: 0.85;
  font-style: italic;
  margin-left: 2px;
}

.phase-duration {
  white-space: nowrap;
}

/* ========================================
   Session Format & Sync/Async Balance
   ======================================== */

/* Session format option buttons */
.session-format-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.format-option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.6rem 0.9rem;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 90px;
  text-align: center;
}

.format-option-btn:hover {
  border-color: var(--nord-sekund6);
  background: #f8f9fa;
}

.format-option-btn.selected {
  border-color: var(--nord-sekund2);
  background: linear-gradient(to bottom, rgba(22, 92, 125, 0.08), transparent);
  box-shadow: 0 0 0 1px var(--nord-sekund2);
}

.format-option-btn i {
  font-size: 1.25rem;
  color: var(--nord-sekund2);
  margin-bottom: 0.35rem;
}

.format-option-btn span {
  font-size: 0.78rem;
  font-weight: 500;
  color: #495057;
}

.format-option-btn.selected span {
  color: var(--nord-sekund1);
}

/* Sync/Async Balance Slider */
.sync-async-slider-wrap {
  padding: 0.5rem 0;
}

.sync-async-slider-wrap .form-range {
  width: 100%;
  height: 6px;
  margin-bottom: 0.75rem;
}

.sync-async-slider-wrap .form-range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  background: var(--nord-sekund2);
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.sync-async-slider-wrap .form-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--nord-sekund2);
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.sync-async-labels {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.sync-async-label {
  flex: 1;
  text-align: center;
  padding: 0.25rem;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 4px;
}

.sync-async-label:hover {
  background: #f0f0f0;
}

.sync-async-label.active {
  background: rgba(22, 92, 125, 0.08);
}

.sync-async-label .label-title {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6c757d;
  line-height: 1.3;
}

.sync-async-label.active .label-title {
  color: var(--nord-sekund1);
}

.sync-async-label .label-desc {
  display: block;
  font-size: 0.68rem;
  color: #adb5bd;
  margin-top: 0.15rem;
}

.sync-async-label.active .label-desc {
  color: var(--nord-sekund2);
}

/* Responsive adjustments for format options */
@media (max-width: 768px) {
  .format-option-btn {
    min-width: 70px;
    padding: 0.5rem 0.6rem;
  }

  .format-option-btn i {
    font-size: 1rem;
  }

  .format-option-btn span {
    font-size: 0.7rem;
  }

  .sync-async-label .label-title {
    font-size: 0.7rem;
  }

  .sync-async-label .label-desc {
    display: none;
  }
}

/* ========================================
   Additional Instructors
   ======================================== */

#additional-instructors-container {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.additional-instructor-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.additional-instructor-item input {
  flex: 1;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.additional-instructor-item .btn {
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
}

#add-instructor-btn {
  font-size: 0.8rem;
}