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

/* Root variables for consistent coloring */
:root {
  /* Colour scheme (originally Nord University's colours; bauhaus-theme.css overrides most of them) */
  --brand-sekund1: #003D4C;  /* Dark blue */
  --brand-sekund2: #165C7D;  /* Medium blue */
  --brand-sekund3: #115E67;  /* Dark turquoise */
  --brand-sekund4: #007041;  /* Dark green */
  --brand-prima1: #8FD6BD;   /* Light turquoise */
  --brand-prima3: #A9C47F;   /* Light green */
  --brand-sekund6: #94B7BB;  /* Gray blue */
  --brand-sekund5: #6CC24A;  /* Light green */
  --brand-sekund7: #009FDF;  /* Light blue */
  --brand-kontrast1: #EC5742; /* Red */
  --brand-kontrast2: #FFA300; /* Orange */
  --brand-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;
}

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

.app-title {
  font-size: 1.4rem;
  color: var(--brand-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(--brand-sekund6);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.lang-btn.active {
  background-color: var(--brand-sekund2);
  color: white;
  border-color: var(--brand-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(--brand-sekund2) !important;
}

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

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

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

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

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

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

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

/* Fix for Bootstrap tab interference (the session list and Øktdetaljer are
   no longer tabs since 1.40.0: the list is always shown, the details are a
   drawer, SessionEditorShell.js) */
#session-basic-content,
#session-outcomes-content {
  display: none;
}

#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(--brand-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(--brand-sekund1, #003D4C);
}

/* Inline SOLO panel, directly under the outcome being edited */
.solo-level-panel {
  margin-top: 0.25rem;
  border: 2px solid var(--brand-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(--brand-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;
}

/* As wide as the course's longest category name (NKR, EQF or its own,
   utils/outcomeCategories.js), at most 18rem and never wider than the row
   leaves next to the number, SOLO level, count and remove button (10.5rem),
   so they stay on the line; the title has the whole name */
.learning-outcome-group > .outcome-category-select {
  flex: 0 1 auto;
  width: auto;
  min-width: 7rem;
  max-width: min(18rem, calc(100% - 10.5rem));
  text-overflow: ellipsis;
}

/* The choice of category names, above the outcomes */
.outcome-framework-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.outcome-framework-row .form-select {
  width: auto;
  max-width: 100%;
}

.outcome-framework-names {
  font-size: 0.875rem;
  color: var(--bs-secondary-color, #6c757d);
  overflow-wrap: anywhere;
}

.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(--brand-sekund2) !important;
  color: white !important;
  border-color: var(--brand-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(--brand-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;
}

.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;
  }
  
  .learning-outcome-group > .outcome-category-select {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    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) {
  .app-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
   ======================================== */

/* Kursets form: square tiles with the explanation inside (1.34.0). Each
   tile is a label around a radio button (index.html), so the arrow keys
   move the choice; the button itself is hidden but keeps the focus, shown
   as a gold outline on the tile. The chosen tile is filled navy and has a
   check mark, so the choice does not rest on colour alone. Two in a row on
   a phone, three on a narrow card, all six on a wide one. A tile with more
   text than fits grows taller, and so does its row. */
.course-form-group {
  container: course-form / inline-size;
}

.session-format-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

@container course-form (min-width: 30rem) {
  .session-format-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 44rem;
  }
}

@container course-form (min-width: 58rem) {
  .session-format-options {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: none;
  }
}

.format-option-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0.75rem;
  border: 2px solid var(--bh-black, #111);
  border-radius: 0;
  background: var(--bh-white, #fff);
  color: var(--bh-black, #111);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.format-option-btn:hover {
  background: var(--bh-cream, #F5F0E6);
  box-shadow: var(--bh-shadow-sm, 3px 3px 0 #111);
}

/* The radio button: out of sight, still reached with Tab and the arrow keys */
.format-option-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.format-option-btn:has(.format-option-input:focus-visible) {
  outline: 3px solid var(--bh-gold, #E8A820);
  outline-offset: 2px;
}

.format-option-btn i {
  font-size: 1.35rem;
  color: var(--bh-blue, #2B4C8C);
}

.format-option-name {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
}

.format-option-tip {
  font-size: 0.78rem;
  line-height: 1.35;
  color: #444;
}

.format-option-btn.selected {
  background: var(--bh-navy, #1B2A4A);
  color: var(--bh-white, #fff);
  box-shadow: var(--bh-shadow-sm, 3px 3px 0 #111);
}

.format-option-btn.selected i,
.format-option-btn.selected .format-option-tip {
  color: var(--bh-white, #fff);
}

.format-option-btn.selected::after {
  content: "\f00c";
  content: "\f00c" / "";
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.9rem;
  color: var(--bh-gold, #E8A820);
}

@media (forced-colors: active) {
  .format-option-btn.selected {
    outline: 3px solid Highlight;
  }
}

/* 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(--brand-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(--brand-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(--brand-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(--brand-sekund2);
}

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

  .format-option-tip {
    font-size: 0.74rem;
  }

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