/* 
 * ABC Learning Design Storyboard - Main CSS
 * Version: 2.0
 * Featuring Nord University brand colors and Laurillard's learning types
 * Organized with clear sections for better maintainability
 */

/* ============================================================================
   TABLE OF CONTENTS:
   1. CSS Variables
   2. Base Styling
   3. Accessibility
   4. Nord University Branding
      4.1 Header & Logo
      4.2 Language Switcher
      4.3 Navbar
      4.4 Footer
   5. Activity Cards
      5.1 Template Cards
      5.2 Placed Activity Cards
      5.3 Card Controls
   6. Learning Type Colors
   7. Storyboard Layout
      7.1 Phases
      7.2 Dropzones
   8. UI Components
      8.1 Cards
      8.2 Buttons
      8.3 Badges
      8.4 Forms
   9. Analytics Styling
   10. Modals
   11. Layout Components
   12. Responsive Styles
   ============================================================================ */

/* ======= 1. CSS VARIABLES ======= */
:root {
    /* Activity Type Colors from Laurillard's learning types */
    --acquisition-color: rgb(22, 177, 162);    /* Tilegnelse */
    --collaboration-color: rgb(243, 146, 0);   /* Samarbeid */
    --discussion-color: rgb(29, 113, 184);     /* Diskusjon */
    --inquiry-color: rgb(190, 22, 34);         /* Undersokelse */
    --practice-color: rgb(102, 36, 131);       /* Ovelse */
    --production-color: rgb(58, 170, 53);      /* Produksjon */
    
    /* 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 */
    
    /* Base UI Colors */
    --primary-color: var(--nord-sekund2);     /* Medium blue as primary */
    --secondary-color: var(--nord-sekund6);   /* Gray blue as secondary */
    --success-color: var(--nord-sekund5);     /* Light green as success */
    --warning-color: var(--nord-kontrast2);   /* Orange as warning */
    --danger-color: var(--nord-kontrast1);    /* Red as danger */
    --light-color: #f8f9fa;                   /* Light color for backgrounds */
    --dark-color: var(--nord-sekund1);        /* Dark blue as dark */
  }
  
  /* ======= 2. BASE STYLING ======= */
  body {
    background-color: #f8f9fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  
  /* ======= 3. ACCESSIBILITY STYLING ======= */
  /* Skip to Content Link */
  .skip-to-content {
    position: absolute;
    left: -999px; /* Hide off-screen */
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 1000; /* Ensure it's above other elements */
    background-color: var(--nord-sekund1); /* Nord dark blue */
    color: var(--nord-hvit); /* White text */
    padding: 8px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: left 0.3s, background-color 0.3s; /* Smooth transition */
  }
  
  .skip-to-content:focus {
    left: 15px; /* Bring it into view when focused */
    top: 10px;
    width: auto;
    height: auto;
    overflow: visible;
    outline: none; /* Remove the default focus outline */
  }
  
  .skip-to-content:hover {
    background-color: var(--nord-prima1); /* Light turquoise on hover */
    color: var(--nord-sekund1);
  }
  
  /* ======= 4. LEARNCRAFT BRANDING ======= */
  /* 4.1 Header & Logo */
  .nord-branding {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: white;
    border-bottom: 3px solid var(--nord-sekund6);
    position: relative;
    margin-bottom: 20px;
  }
  
  .nord-logo-link {
    text-decoration: none;
    margin-right: 15px;
  }
  
  .nord-logo {
    height: 40px;
  }

  .learncraft-logo {
    height: 40px;
    margin-right: 15px;
  }

  .nord-title {
    font-size: 1.4rem;
    color: var(--nord-sekund1);
    font-weight: bold;
  }
  
  /* 4.2 Language Switcher */
  .language-selector {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 5px;
    z-index: 200;
  }
  
  .lang-btn {
    padding: 5px 10px;
    background-color: var(--nord-sekund6);
    border: 1px solid var(--nord-sekund6);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
  }
  
  .lang-btn:hover {
    background-color: var(--nord-sekund7);
    color: white;
  }
  
  .lang-btn.active {
    background-color: var(--nord-sekund2);
    color: white;
    border-color: var(--nord-sekund2);
  }
  
  /* 4.3 Navbar Styling */
  .navbar {
    background-color: var(--nord-sekund1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 3px solid var(--nord-sekund6);
  }
  
  .navbar-brand {
    color: var(--nord-hvit) !important;
  }
  
  .navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
  }
  
  .navbar-dark .navbar-nav .nav-link:hover {
    color: var(--nord-prima1);
  }
  
  /* 4.4 Footer Styles */
  .nord-footer {
    margin-top: 60px;
    padding: 40px 30px;
    background-color: var(--nord-sekund1);
    color: white;
    border-radius: 8px 8px 0 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Create a flex container for the logo and links section */
  .footer-main {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  /* Logo container */
  .footer-logo-container {
    flex: 0 0 auto;
  }
  
  .nord-footer .footer__logo {
    height: 50px;
    margin: 0;
  }
  
  /* Links container */
  .nord-footer-links {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    flex: 1 1 auto;
    margin: 0;
  }
  
  .nord-footer-link {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 0.95rem;
    padding: 6px 12px;
    border-radius: 4px;
  }
  
  .nord-footer-link:hover {
    color: var(--nord-prima1);
    background-color: rgba(255, 255, 255, 0.1);
    text-decoration: underline;
  }
  
  /* License and copyright section */
  .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .cc-license {
    margin: 0 0 15px 0;
  }
  
  .cc-license img {
    transition: opacity 0.3s;
  }
  
  .cc-license img:hover {
    opacity: 0.8;
  }
  
  .nord-copyright {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
  }
  
  footer {
    background-color: var(--nord-sekund1) !important;
    color: white;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
  }
  
  footer a {
    color: var(--nord-prima1);
  }
  
  footer a:hover {
    color: var(--nord-hvit);
  }
  
  /* ======= 5. ACTIVITY CARDS ======= */
  /* 5.1 Activity Template Cards */
  .activity-template-card {
    width: 100%;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    cursor: grab;
    position: relative;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .activity-template-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  }
  
  .activity-template-card:active {
    cursor: grabbing;
  }
  
  .activity-template-card .card-header {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    color: white;
  }
  
  .activity-template-card .card-body {
    padding: 15px;
    background-color: white;
    min-height: 80px;
  }
  
  .activity-template-card .description {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 0;
  }
  
  /* Type Icons */
  .type-icon {
    position: absolute;
    top: -20px;
    left: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 50;
  }
  
  /* 5.2 Placed Activity Cards */
  .placed-activity {
    width: 200px;
    border-radius: 8px;
    overflow: hidden;
    margin: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    transition: box-shadow 0.3s;
    position: relative;
  }

  .placed-activity:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  }
  
  .placed-activity .card-header {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    color: white;
  }
  
  .placed-activity .card-body {
    padding: 12px;
    background-color: white;
  }
  
  .placed-activity .activity-title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--nord-sekund1);
  }

  /* Inline editing styles - using box-shadow instead of outline to prevent layout shift */
  .placed-activity .activity-title:hover,
  .placed-activity .duration-display:hover,
  .placed-activity .modality-display:hover,
  .placed-activity .group-display:hover {
    background-color: rgba(0, 123, 255, 0.08);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 123, 255, 0.3);
  }

  /* Inline editable display elements - block to keep on separate lines */
  .placed-activity .modality-display,
  .placed-activity .group-display,
  .placed-activity .duration-display {
    display: block;
  }

  .placed-activity .inline-edit-input {
    width: 100%;
    border: 1px solid #007bff;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: inherit;
    font-family: inherit;
  }

  .placed-activity .inline-edit-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  }

  .placed-activity .activity-details {
    font-size: 12px;
    color: #555;
    margin-bottom: 10px;
  }
  
  .placed-activity .activity-details div {
    margin-bottom: 4px;
  }
  
  .placed-activity .activity-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  
  .placed-activity.dragging {
    opacity: 0.6;
  }
  
  /* 5.3 Button Styling in Activity Cards */
  .placed-activity .btn-sm {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
  
  .placed-activity .edit-btn {
    color: var(--nord-sekund2);
    border-color: var(--nord-sekund2);
  }
  
  .placed-activity .edit-btn:hover {
    background-color: var(--nord-sekund2);
    color: white;
  }
  
  .placed-activity .delete-btn {
    color: var(--nord-kontrast1);
    border-color: var(--nord-kontrast1);
  }
  
  .placed-activity .delete-btn:hover {
    background-color: var(--nord-kontrast1);
    color: white;
  }
  
  /* Font Awesome Icons in Activity Cards */
  /* Icon colors to match card headers */
  .card-acquisition .card-header i,
  .card-collaboration .card-header i, 
  .card-discussion .card-header i,
  .card-enquete .card-header i,
  .card-pratique .card-header i,
  .card-production .card-header i {
    color: white;
  }
  
  /* Activity template cards with icons - reinforcing flex display */
  .activity-template-card .card-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
  }
  
  /* Styling for placed activities icons */
  .placed-activity .card-header i {
    color: white;
    margin-right: 8px;
    font-size: 1.2rem;
  }
  
  /* Add type icons to the activity card elements for visual cues */
  .activity-type-icon {
    margin-right: 8px;
    color: white;
  }
  
  /* Make sure titles are properly aligned with icons */
  .titre-carte {
    display: flex;
    align-items: center;
    margin: 0;
  }
  
  /* ======= 6. LEARNING TYPE COLORS ======= */
  /* Acquisition (Tilegnelse) */
  .card-acquisition {
    border-color: var(--acquisition-color);
  }
  
  .card-acquisition .card-header, 
  .activity-acquisition .card-header {
    background-color: var(--acquisition-color);
  }
  
  .activity-acquisition {
    border-left: 4px solid var(--acquisition-color);
  }
  
  /* Collaboration (Samarbeid) */
  .card-collaboration {
    border-color: var(--collaboration-color);
  }
  
  .card-collaboration .card-header,
  .activity-collaboration .card-header {
    background-color: var(--collaboration-color);
  }
  
  .activity-collaboration {
    border-left: 4px solid var(--collaboration-color);
  }
  
  /* Discussion (Diskusjon) */
  .card-discussion {
    border-color: var(--discussion-color);
  }
  
  .card-discussion .card-header,
  .activity-discussion .card-header {
    background-color: var(--discussion-color);
  }
  
  .activity-discussion {
    border-left: 4px solid var(--discussion-color);
  }
  
  /* Inquiry (Undersøkelse) */
  .card-enquete {
    border-color: var(--inquiry-color);
  }
  
  .card-enquete .card-header,
  .activity-inquiry .card-header {
    background-color: var(--inquiry-color);
  }
  
  .activity-inquiry {
    border-left: 4px solid var(--inquiry-color);
  }
  
  /* Practice (Øvelse) */
  .card-pratique {
    border-color: var(--practice-color);
  }
  
  .card-pratique .card-header,
  .activity-practice .card-header {
    background-color: var(--practice-color);
  }
  
  .activity-practice {
    border-left: 4px solid var(--practice-color);
  }
  
  /* Production (Produksjon) */
  .card-production {
    border-color: var(--production-color);
  }
  
  .card-production .card-header,
  .activity-production .card-header {
    background-color: var(--production-color);
  }
  
  .activity-production {
    border-left: 4px solid var(--production-color);
  }
  
  /* ======= 7. STORYBOARD LAYOUT ======= */
  /* 7.1 Phases */
  .storyboard-phase {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    border-left: 5px solid var(--nord-sekund6);
  }
  
  .storyboard-phase:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
  
  .storyboard-phase-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0, 61, 76, 0.1);
  }
  
  .phase-title {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: var(--nord-sekund1);
    margin: 0;
  }
  
  .phase-title i {
    margin-right: 8px;
    color: var(--nord-sekund2);
  }
  
  .phase-duration {
    font-weight: normal;
    padding: 6px 10px;
  }
  
  /* 7.2 Dropzone Styling */
  .dropzone {
    display: flex;    
    flex-wrap: nowrap !important; /* Prevent wrapping to keep order vertical */
    align-items: stretch; /* Make cards fill the width */
    min-height: 100px;
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 15px;
    transition: background-color 0.3s, border-color 0.3s;
  }
  
  .dropzone.active {
    background-color: rgba(52, 152, 219, 0.1);
    border-color: #3498db;
    border-style: solid;
  }
  
  .dropzone-placeholder {
    width: 100%;
    text-align: center;
    padding: 30px 0;
    color: #777;
    font-style: italic;
  }

  /* Add these styles for better drag and drop visual feedback */


  /* Hover effect on activity cards - cursor only, shadow handled above */
.placed-activity:hover {
  cursor: grab;
}

  .placed-activity.dragging {
    opacity: 0.4;
    z-index: 1000;
    cursor: grabbing;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }



  .drop-indicator {
    animation: pulse 1.5s infinite;
    transition: all 0.2s ease;
  }

  .dropzone:not(:empty) .dropzone-placeholder {
    display: none;
  }

  @keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
  }
  
  /* ======= 8. UI COMPONENTS ======= */
  /* 8.1 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 {
    font-weight: bold;
    padding: 0.75rem 1rem;
  }
  
  /* Header Background Colors */
  .card-header.bg-primary {
    background-color: var(--nord-sekund2) !important;
  }
  
  .card-header.bg-secondary {
    background-color: var(--nord-sekund6) !important;
  }
  
  .card-header.bg-info {
    background-color: var(--nord-sekund7) !important;
  }
  
  .card-header.bg-dark {
    background-color: var(--nord-sekund1) !important;
  }

/* Guaranteed equal height cards */
.equal-height-cards {
    display: flex;
    flex-wrap: wrap;
  }
  
  .equal-height-cards > .col-md-4 {
    display: flex;
    margin-bottom: 0 !important;
  }
  
  .equal-height-cards > .col-md-4 > div {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .equal-height-cards .card {
    margin-bottom: 0;
    flex-grow: 1;
    height: 100% !important; /* Force exact same height */
  }
  
  /* Make sure card body takes all available space */
  .equal-height-cards .card-body {
    flex: 1 1 auto;
  }

  /* Override Bootstrap margin-bottom in equal height cards */
.equal-height-cards > .col-md-4 {
    display: flex;
    margin-bottom: 0 !important;
  }
  
  /* And make sure no element inside the cards has margin-bottom affecting the layout */
  .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;
  }

 
  
  /* 8.2 Button Styles */
  .btn-primary {
    background-color: var(--nord-sekund2);
    border-color: var(--nord-sekund2);
  }
  
  .btn-primary:hover {
    background-color: var(--nord-sekund1);
    border-color: var(--nord-sekund1);
  }
  
  .btn-secondary {
    background-color: var(--nord-sekund6);
    border-color: var(--nord-sekund6);
  }
  
  .btn-success {
    background-color: var(--nord-sekund5);
    border-color: var(--nord-sekund5);
  }
  
  .btn-danger {
    background-color: var(--nord-kontrast1);
    border-color: var(--nord-kontrast1);
  }
  
  .btn-outline-primary {
    color: var(--nord-sekund2);
    border-color: var(--nord-sekund2);
  }
  
  .btn-outline-primary:hover {
    background-color: var(--nord-sekund2);
    border-color: var(--nord-sekund2);
  }
  
  .btn-outline-danger {
    color: var(--nord-kontrast1);
    border-color: var(--nord-kontrast1);
  }
  
  .btn-outline-danger:hover {
    background-color: var(--nord-kontrast1);
    border-color: var(--nord-kontrast1);
  }
  
  .btn-outline-light {
    color: var(--nord-hvit);
    border-color: var(--nord-hvit);
  }
  
  .btn-outline-light:hover {
    color: var(--nord-sekund1);
    background-color: var(--nord-hvit);
  }
  
  .btn-outline-secondary {
    color: var(--nord-sekund6);
    border-color: var(--nord-sekund6);
  }
  
  /* 8.3 Badge Styling */
  .badge.bg-primary {
    background-color: var(--nord-sekund2) !important;
  }
  
  .badge.bg-success {
    background-color: var(--nord-sekund5) !important;
  }
  
  .badge.bg-warning {
    background-color: var(--nord-kontrast2) !important;
  }
  
  /* 8.4 Form Element Styling */
  .form-control:focus {
    border-color: var(--nord-sekund2);
    box-shadow: 0 0 0 0.25rem rgba(22, 92, 125, 0.25);
  }
  
  /* ======= 9. ANALYTICS STYLING ======= */
  /* Analytics container and card */
  #analytics-container .card-body {
    padding: 1.5rem;
  }
  
  /* Create a proper grid layout for the charts */
  #analytics-container .row {
    display: flex;
    align-items: center;
    margin: 0 -10px;
  }
  
  /* Set proper column sizing */
  #analytics-container .col-md-6,
  #analytics-container .col-md-3 {
    padding: 0 10px;
  }
  
  /* Radar chart container */
  #analytics-container .col-md-6 {
    position: relative;
  }
  
  /* Make the radar chart bigger */
  #activity-radar-chart {
    max-height: 300px !important;
    width: 100% !important;
    margin: 0 auto;
  }
  
  /* Pie charts sizing and alignment */
  #modality-chart,
  #grouping-chart {
    width: 100% !important;
    max-height: 220px !important;
    margin: 0 auto;
  }
  
  /* Add spacing between the charts and the total duration text */
  .mt-3.text-center {
    margin-top: 1.5rem !important;
    padding-top: 1rem;
    border-top: 1px solid #eee;
  }
  
  /* Tools Panel */
  .tools-panel {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px;
  }
  
  .tool-card {
    transition: background-color 0.2s;
    cursor: pointer;
  }
  
  .tool-card:hover {
    background-color: #f8f9fa;
  }
  
  /* ======= 10. MODALS ======= */
  /* Activity Modal Styling */
  .modal-header {
    color: white;
    font-weight: bold;
  }
  
  .modal h3 {
    color: var(--nord-sekund1);
    margin-top: 0;
    margin-bottom: 20px;
    padding-right: 25px; /* Leave space for close button */
  }
  
  .modal p {
    margin-bottom: 15px;
    line-height: 1.6;
  }
  
  
  .close-modal:hover {
    color: var(--nord-kontrast1);
  }
  
  /* ======= 11. LAYOUT COMPONENTS ======= */
  /* Course Info and Session Manager */
  #course-info-container,
  #course-description-container,
  #session-manager-container {
    margin-bottom: 20px;
  }

  /* Session tab title inline editing */
  .session-tab-title {
    cursor: text;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.2s;
  }

  .session-tab-title:hover {
    background-color: rgba(0, 123, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(0, 123, 255, 0.3);
  }

  .session-title-inline-edit {
    background: white;
    color: #333;
  }

  .session-title-inline-edit:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  }

  /* Session list item inline editing */
  .session-item-title,
  .session-item-date,
  .session-item-duration {
    cursor: text;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.2s;
  }

  .session-item-title:hover,
  .session-item-date:hover,
  .session-item-duration:hover {
    background-color: rgba(0, 123, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(0, 123, 255, 0.3);
  }

  .session-item-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
  }

  .session-date-inline-edit,
  .session-duration-inline-edit {
    background: white;
    color: #333;
  }

  .session-date-inline-edit:focus,
  .session-duration-inline-edit:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  }

  /* Input Groups */
  .learning-outcome-group {
    margin-bottom: 8px;
  }

  /* Session outcomes table styling */
  #course-outcomes-table {
    table-layout: auto;
    width: 100%;
  }

  #course-outcomes-table td {
    padding: 0.75rem;
    vertical-align: top;
  }

  #course-outcomes-table td:nth-child(2) {
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    max-width: 0;
  }

  .outcome-text {
    display: flex;
    align-items: flex-start;
    gap: 5px;
  }

  .outcome-text span:last-child {
    flex: 1;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }

  .coverage-controls {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 180px;
  }

  .coverage-input {
    text-align: center;
    font-size: 0.875rem;
    border-left: 0;
    border-right: 0;
  }

  /* Hide the default number input spinners since we have custom buttons */
  .coverage-input::-webkit-inner-spin-button,
  .coverage-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .coverage-input[type=number] {
    -moz-appearance: textfield;
  }

  .coverage-input:focus {
    outline: none;
    border-color: var(--nord-sekund2);
    box-shadow: none;
  }

  /* Style the increment/decrement buttons */
  .coverage-increment,
  .coverage-decrement {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-color: #dee2e6;
  }

  .coverage-increment:hover:not(:disabled),
  .coverage-decrement:hover:not(:disabled) {
    background-color: var(--nord-sekund2);
    border-color: var(--nord-sekund2);
    color: white;
  }

  .coverage-increment i,
  .coverage-decrement i {
    font-size: 0.7rem;
  }

  .coverage-slider {
    width: 100%;
  }
  
  /* Add some sticky behavior to keep elements visible when scrolling */
  @media (min-width: 992px) {
    .sticky-top-offset {
      position: sticky;
      top: 20px;
      z-index: 1000;
    }
  }
  
  /* ======= 12. RESPONSIVE STYLES ======= */
  /* General responsive adjustments */
  @media (max-width: 992px) {
    .activity-template-card {
      width: 49%;
    }
    
    .placed-activity {
      width: 100%;
    }
    
    /* Analytics responsive adjustments */
    #analytics-container .row {
      flex-direction: column;
    }
    
    #analytics-container .col-md-6,
    #analytics-container .col-md-3 {
      width: 100%;
      margin-bottom: 20px;
    }
    
    /* Adjust chart heights for mobile */
    #activity-radar-chart {
      max-height: 250px !important;
    }
    
    #modality-chart,
    #grouping-chart {
      max-height: 200px !important;
    }
  }
  
  /* Medium screens */
  @media (max-width: 768px) {
    /* Branding & Header */
    .nord-branding {
      padding: 10px 15px;
    }
  
    .nord-title {
      font-size: 1.2rem;
    }
  
    .language-selector {
      top: 10px;
      right: 10px;
    }
  
    .lang-btn {
      padding: 4px 8px;
      font-size: 12px;
    }
    
    /* Activity Cards */
    .activity-template-card {
      width: 100%;
    }
    
    /* Footer */
    .nord-footer-links {
      flex-direction: column;
      gap: 15px;
    }
  
    .footer-main {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    
    .nord-footer-links {
      justify-content: center;
      margin-top: 20px;
    }
    
    
    /* Stack columns on smaller screens */
    .col-md-4, .col-md-8 {
      width: 100%;
    }
    
    /* Make the activity cards horizontal on mobile */
    .activity-template-card {
      display: flex;
      flex-direction: row;
      height: auto;
    }
    
    .activity-template-card .card-header {
      width: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border-right: 1px solid rgba(0,0,0,0.1);
      border-bottom: none;
    }
    
    .activity-template-card .card-body {
      flex: 1;
    }
  }
  
  /* Small screens */
  @media (max-width: 576px) {
    .activity-template-card .card-header i {
      font-size: 1.2rem;
    }
    
    .titre-carte {
      font-size: 0.9rem;
    }
  }
  
  /* Make activity cards more compact in narrow layouts */
  @media (max-width: 1200px) {
    .activity-template-card .description {
      font-size: 13px;
      line-height: 1.3;
      max-height: 90px;
      overflow-y: auto;
    }
    
    .activity-template-card .card-header {
      padding: 8px 12px;
    }
    
    .activity-template-card .card-body {
      padding: 10px;
    }
  }
  
  /* Advanced layout for larger screens */
  @media (min-width: 992px) {
    /* More refined grid for analytics */
    #analytics-container .row {
      display: grid;
      grid-template-columns: 50% 25% 25%;
      gap: 0;
    }
    
    /* Radar chart container */
    #analytics-container .col-md-6 {
      grid-column: 1;
      padding-right: 20px;
    }
    
    /* Pie charts containers */
    #analytics-container .col-md-3:first-of-type {
      grid-column: 2;
    }
    
    #analytics-container .col-md-3:last-of-type {
      grid-column: 3;
    }
    
    /* Make sure the charts maintain proper proportions */
    #activity-radar-chart {
      aspect-ratio: 1 / 0.8;
      max-height: 350px !important;
    }

    #modality-chart,
    #grouping-chart {
      aspect-ratio: 1 / 1;
      max-height: 180px !important;
    }
}

/* ======= SortableJS Styles ======= */
.sortable-ghost {
  opacity: 0.4;
  background: rgba(143, 214, 189, 0.2);
  border: 2px dashed #8fd6bd;
}

.sortable-drag {
  opacity: 1 !important;
  cursor: grabbing !important;
  transform: rotate(2deg);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

.dragging-template {
  opacity: 0.6;
  transform: scale(0.98);
}

.drag-over {
  background: rgba(143, 214, 189, 0.15);
  border: 2px dashed #8fd6bd;
}

.touch-hover {
  background: rgba(143, 214, 189, 0.2);
  border: 2px solid #8fd6bd;
  box-shadow: 0 0 10px rgba(143, 214, 189, 0.5);
}

/* ======= Expandable Phase Sections Styles ======= */
.phase-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.btn-delete-phase {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
  font-size: 14px;
}

.btn-delete-phase:hover {
  background: #dc3545;
  color: white;
}

/* Time type toggle button */
.btn-time-type {
  background: none;
  border: 1px solid #dee2e6;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
  font-size: 14px;
}

.btn-time-type:hover {
  background: #f8f9fa;
}

.btn-time-type.time-type-class {
  color: #198754;
  border-color: #198754;
}

.btn-time-type.time-type-class:hover {
  background: #198754;
  color: white;
}

.btn-time-type.time-type-workload {
  color: #0d6efd;
  border-color: #0d6efd;
}

.btn-time-type.time-type-workload:hover {
  background: #0d6efd;
  color: white;
}

.btn-add-section {
  width: 100%;
  padding: 12px;
  background: #e9ecef;
  border: 2px dashed #adb5bd;
  border-radius: 6px;
  color: #495057;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  margin: 15px 0;
}

.btn-add-section:hover {
  background: #dee2e6;
  border-color: #8fd6bd;
  color: #2c5f4f;
}

.btn-add-section i {
  margin-right: 6px;
}

.phase-name {
  cursor: text;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.2s;
  display: inline-block;
}

.phase-name:hover {
  background: rgba(255, 255, 255, 0.2);
}

.phase-name:focus {
  outline: 2px solid #8fd6bd;
  background: white;
  color: #333;
}

/* ======= TOOL GUIDE - BROWSE MODE ======= */
/* Context Card - Browse Mode Interface */
.context-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid var(--nord-sekund2);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

.context-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--nord-sekund2);
}

.context-card-header i {
    font-size: 1.5rem;
    color: var(--nord-sekund2);
    margin-right: 10px;
}

.context-card-header h5 {
    margin: 0;
    color: var(--nord-sekund2);
    font-weight: 600;
}

.current-context {
    background: white;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    border-left: 4px solid var(--nord-sekund5);
}

.current-context-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 5px;
}

.current-context-value {
    font-size: 1rem;
    color: #212529;
    font-weight: 600;
}

.current-context-value i {
    margin-right: 8px;
}

.browse-mode-toggle {
    margin-top: 15px;
}

.browse-mode-options {
    background: white;
    border: 2px dashed var(--nord-sekund3);
    border-radius: 6px;
    padding: 15px;
    margin-top: 10px;
}

.browse-warning {
    background: #fff3cd;
    border-left: 4px solid var(--nord-kontrast2);
    padding: 10px 15px;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 0.875rem;
}

.tool-count-badge {
    background: var(--nord-sekund3);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-left: 8px;
}

.other-filters {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 25px;
}

.filter-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.context-mismatch-warning {
    background: #fff3cd;
    border: 2px solid var(--nord-kontrast2);
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
}

.context-mismatch-warning h6 {
    color: #856404;
    font-weight: 600;
}

.context-mismatch-warning p {
    color: #856404;
    margin-bottom: 10px;
}

/* Tool display header improvements */
.tool-display-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--nord-sekund2);
    color: white;
    border-radius: 6px 6px 0 0;
    margin-bottom: 0;
}

.tool-display-header h5 {
    margin: 0;
    color: white;
}

.context-match-badge {
    font-size: 0.875rem;
    padding: 4px 10px;
}

/* ======= CLOUD STORAGE STYLES ======= */

/* Cloud buttons in navbar */
#cloud-save-btn,
#cloud-load-btn {
    border-color: rgba(255, 255, 255, 0.5);
}

#cloud-save-btn:hover,
#cloud-load-btn:hover {
    background-color: rgba(23, 162, 184, 0.2);
    border-color: #17a2b8;
}

/* Cloud modal styles */
#cloud-save-modal .modal-header,
#cloud-load-modal .modal-header {
    background: linear-gradient(135deg, var(--nord-sekund2), var(--nord-sekund3));
}

#cloud-password-modal .modal-header {
    background: #ffc107;
    color: #212529;
}

/* Protected badge */
.badge.bg-warning {
    font-weight: 500;
}

/* Cloud courses table */
#cloud-courses-list .table {
    margin-bottom: 0;
}

#cloud-courses-list .table th {
    border-top: none;
    background-color: #f8f9fa;
}

#cloud-courses-list .table td {
    vertical-align: middle;
}

/* Password toggle button */
#toggle-password-visibility {
    border-color: #ced4da;
}

#toggle-password-visibility:hover {
    background-color: #e9ecef;
}

/* ============================================================================
   IMPORT OPTIONS MODAL
   ============================================================================ */

#importOptionsModal .import-option {
    cursor: pointer;
    transition: all 0.2s ease;
}

#importOptionsModal .import-option:hover {
    border-color: var(--nord-sekund2, #17a2b8) !important;
    background-color: rgba(23, 162, 184, 0.05);
}

#importOptionsModal .import-option:has(input:checked) {
    border-color: var(--nord-sekund2, #17a2b8) !important;
    background-color: rgba(23, 162, 184, 0.1);
}

#importOptionsModal .form-check-input:checked {
    background-color: var(--nord-sekund2, #17a2b8);
    border-color: var(--nord-sekund2, #17a2b8);
}

#importOptionsModal #merge-options {
    border-left: 3px solid var(--nord-sekund2, #17a2b8);
    padding-left: 1rem;
    margin-top: 0.75rem;
}

#importOptionsModal .modal-header {
    background: linear-gradient(135deg, var(--nord-sekund2, #17a2b8), var(--nord-sekund3, #1a237e));
    color: white;
}

#importOptionsModal .modal-header .btn-close {
    filter: brightness(0) invert(1);
}

#importOptionsModal #import-file-info {
    display: flex;
    align-items: center;
    font-family: monospace;
}

/* ======= Course overview row (course information + sessions) =======
   Forms and the session list get hard to read when stretched, so this row
   stops growing at 1800px of content and centres on very wide screens.
   Below that it keeps Bootstrap's -0.75rem row margins, so it lines up
   exactly with the storyboard underneath. (1824px = 1800px + gutters) */
.course-overview-row {
  margin-left: max(-0.75rem, calc((100% - 1824px) / 2));
  margin-right: max(-0.75rem, calc((100% - 1824px) / 2));
}

/* ======= Storyboard workspace =======
   Slim learning-types sidebar next to a storyboard that takes all the
   remaining width. Below 992px the learning types become a compact strip
   of draggable chips above the storyboard, which then gets the full width. */
.storyboard-workspace {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 991.98px) {
  .storyboard-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .learning-types-panel > .card > .card-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  /* Learning types as chips: icon and name only. Overrides the older
     responsive rules above (49%/100% width, 120px horizontal header). */
  .learning-types-panel .activity-template-card {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin-bottom: 0 !important;
  }

  .learning-types-panel .activity-template-card .card-header {
    width: auto;
    flex-direction: row;
    border-right: none;
    white-space: nowrap;
  }

  .learning-types-panel .activity-template-card .card-body {
    display: none;
  }

  /* Session elements keep their own line below the chips */
  .learning-types-panel .session-elements-divider,
  .learning-types-panel .session-elements-heading,
  .learning-types-panel .session-elements {
    flex: 0 0 100%;
  }

  .learning-types-panel .session-elements-divider {
    margin: 0.25rem 0 !important;
  }

  .learning-types-panel .session-elements-heading {
    margin-bottom: 0 !important;
  }
}