/*
 * Vorkurs Atelier — Bauhaus Theme Override
 * Loaded after main.css to transform the UI into a Bauhaus-inspired "workbench"
 *
 * Design principles:
 *   - Sharp corners (border-radius: 0) everywhere
 *   - Hard 2px black borders with offset box-shadows
 *   - Warm cream background with faint geometric shapes
 *   - Cards as physical objects on a workbench
 *   - Learning type colours preserved (functional, not decorative)
 */

/* ============================================================================
   1. CSS VARIABLES
   ============================================================================ */
:root {
  --bh-navy:   #1B2A4A;
  --bh-blue:   #2B4C8C;
  --bh-red:    #C0392B;
  --bh-gold:   #E8A820;
  --bh-cream:  #F5F0E6;
  --bh-white:  #FFFFFF;
  --bh-black:  #111111;

  /* Shadow presets */
  --bh-shadow-sm: 3px 3px 0 var(--bh-black);
  --bh-shadow:    4px 4px 0 var(--bh-black);
  --bh-shadow-md: 6px 6px 0 var(--bh-black);
  --bh-shadow-lg: 8px 8px 0 var(--bh-black);
  --bh-shadow-xl: 12px 12px 0 rgba(0,0,0,0.3);
}

/* ============================================================================
   2. BASE STYLES
   ============================================================================ */
body {
  background-color: var(--bh-cream) !important;
}

/* Global sharp corners reset */
.card,
.card-header,
.card-body,
.card-footer,
.btn,
.badge,
.modal-content,
.modal-header,
.modal-footer,
.form-control,
.form-select,
.input-group-text,
.dropdown-menu,
.dropdown-item,
.nav-tabs .nav-link,
.nav-pills .nav-link,
.alert,
.tooltip-inner,
.popover,
.accordion-item,
.accordion-button,
.list-group-item,
.table,
.progress,
.progress-bar {
  border-radius: 0 !important;
}

/* Ensure all main content sits above background shapes */
.app-branding,
.navbar,
.container-fluid,
.container,
main,
#main-content,
footer,
.app-footer {
  position: relative;
  z-index: 1;
}

/* Modals must stay fixed and on top — do NOT override position/z-index */
.modal {
  z-index: 1100 !important;
  position: fixed !important;
}

.modal-backdrop {
  z-index: 1099 !important;
}

/* ============================================================================
   3. GEOMETRIC BACKGROUND SHAPES
   ============================================================================ */
.bauhaus-bg-shapes {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Gold circle — top right */
.bh-circle-gold {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: var(--bh-gold);
  opacity: 0.06;
}

/* Red square — bottom left, rotated */
.bh-square-red {
  position: absolute;
  bottom: -60px;
  left: -40px;
  width: 300px;
  height: 300px;
  background-color: var(--bh-red);
  transform: rotate(15deg);
  opacity: 0.05;
}

/* Blue triangle — top left */
.bh-triangle-blue {
  position: absolute;
  top: 120px;
  left: -60px;
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 260px solid var(--bh-blue);
  opacity: 0.04;
}

/* Navy circle — bottom right */
.bh-circle-navy {
  position: absolute;
  bottom: 100px;
  right: 60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: var(--bh-navy);
  opacity: 0.07;
}

/* ============================================================================
   4. HEADER BRANDING BAR
   ============================================================================ */
.app-branding {
  background-color: var(--bh-cream) !important;
  border-bottom: 3px solid var(--bh-black) !important;
  padding: 15px 20px;
}

.app-title {
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bh-navy) !important;
  font-size: 1.3rem !important;
}

/* The institution next to the app's name, when its profile asks for it
   (branding.showName, branding.logo; js/components/InstitutionSettings.js) */
.institution-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--bh-black);
  color: var(--bh-navy);
  font-weight: 600;
  font-size: 0.95rem;
}

.institution-brand img {
  height: 28px;
  width: auto;
}

/* A teacher's own tool setup in Settings (InstitutionSettings.js) */
.own-setup {
  border-left: 3px solid var(--bh-navy);
  padding-left: 0.75rem;
}

/* Language selector */
.lang-btn {
  border: 2px solid var(--bh-black) !important;
  border-radius: 0 !important;
  background-color: var(--bh-cream) !important;
  color: var(--bh-navy) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px !important;
  letter-spacing: 0.5px;
  transition: all 0.15s ease !important;
}

.lang-btn:hover {
  background-color: var(--bh-gold) !important;
  color: var(--bh-black) !important;
  border-color: var(--bh-black) !important;
}

.lang-btn.active {
  background-color: var(--bh-navy) !important;
  color: var(--bh-white) !important;
  border-color: var(--bh-black) !important;
}

/* The code (EN, NO, DA) instead of the name, on a phone with more than two languages */
.lang-btn .lang-short {
  display: none;
}

/* ============================================================================
   5. NAVBAR
   ============================================================================ */
.navbar {
  background-color: var(--bh-navy) !important;
  border-bottom: 3px solid var(--bh-gold) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  z-index: 1030 !important;
  position: relative;
}

.navbar-dark .navbar-nav .nav-link {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.85) !important;
  transition: color 0.2s ease;
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--bh-gold) !important;
}

.navbar-dark .navbar-nav .nav-link.active {
  color: var(--bh-gold) !important;
}

/* Navbar dropdown (Export menu) */
.navbar .dropdown-menu {
  background-color: var(--bh-navy) !important;
  border: 2px solid var(--bh-gold) !important;
  box-shadow: 3px 3px 0 var(--bh-black) !important;
  padding: 0 !important;
}

.navbar .dropdown-item {
  color: var(--bh-cream) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  padding: 0.5rem 1rem !important;
  border-bottom: 1px solid rgba(232, 168, 32, 0.2);
}

.navbar .dropdown-item:last-child {
  border-bottom: none;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--bh-gold) !important;
  color: var(--bh-black) !important;
}

/* Menu links: the icon beside the word, on one line */
.navbar-dark .navbar-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

/* The menu button on narrow screens: square, like everything else */
.navbar-toggler {
  border: 2px solid var(--bh-white) !important;
  border-radius: 0 !important;
  padding: 0.3rem 0.55rem;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px var(--bh-gold) !important;
}

/* The plan's actions (index.html, .nav-actions): KURS and FIL as menus,
   LAGRE I SKY as the one gold block, and the account apart after a thin
   rule. All one height, one line, white on navy. */
.navbar .nav-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 36px;
  padding: 0 0.9rem;
  background: transparent;
  color: var(--bh-white);
  border: 2px solid var(--bh-white);
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Also while its menu is open */
.nav-action:hover,
.nav-action.show {
  background: var(--bh-white);
  color: var(--bh-navy);
}

.nav-action:focus-visible {
  outline: 3px solid var(--bh-gold);
  outline-offset: 2px;
}

.nav-action.dropdown-toggle::after {
  margin-left: 0.1rem;
}

.nav-action-primary {
  background: var(--bh-gold);
  color: var(--bh-black);
  border-color: var(--bh-black);
  box-shadow: 3px 3px 0 var(--bh-black);
}

.nav-action-primary:hover {
  background: var(--bh-gold);
  color: var(--bh-black);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--bh-black);
}

.nav-actions-account {
  display: flex;
  align-items: center;
  margin-left: 0.4rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(255, 255, 255, 0.35);
}

/* Sign in, or the account (AuthUI.js): no frame until pointed at */
.nav-action-quiet {
  border-color: transparent;
  padding: 0 0.5rem;
}

.nav-action-quiet:hover,
.nav-action-quiet.show {
  border-color: var(--bh-white);
}

.auth-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bh-gold);
  color: var(--bh-black);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.auth-name {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  letter-spacing: 0;
}

.navbar .nav-actions .dropdown-item {
  display: flex;
  align-items: center;
}

.navbar .dropdown-item i {
  flex-shrink: 0;
  width: 1.25rem;
  margin-right: 0.5rem;
  text-align: center;
}

.navbar .dropdown-divider {
  margin: 0;
  border-color: rgba(232, 168, 32, 0.45);
}

/* Below 992px the actions are tiles in the open menu, two by two and 44px
   high; a menu opens across the whole width under its row (the .dropdown
   wrappers step aside, so the button and its menu are tiles of the grid) */
@media (max-width: 991.98px) {
  .navbar-collapse {
    padding-bottom: 0.75rem;
  }

  .navbar .nav-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }

  .navbar .nav-actions .dropdown,
  .nav-actions-account {
    display: contents;
  }

  .nav-action {
    width: 100%;
    min-width: 0;
    height: 44px;
  }

  .navbar .nav-actions .dropdown-menu {
    grid-column: 1 / -1;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    width: 100%;
  }

  .nav-action-quiet {
    border-color: rgba(255, 255, 255, 0.5);
  }

  /* A long item ("Åpne eksempelkurs: …") wraps instead of widening the page */
  .navbar .nav-actions .dropdown-item {
    white-space: normal;
  }
}

/* An empty plan: "Ny her?" and the example course (ExampleHint.js) */
.example-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  background: var(--bh-white);
  border: 2px solid var(--bh-black);
  border-left: 8px solid var(--bh-gold);
  box-shadow: var(--bh-shadow-sm);
}

.example-hint[hidden] {
  display: none;
}

/* Not during a workshop: the line about the example course would break the
   flow of the steps (until 1.32.10 it showed on the empty plan a workshop
   starts with) */
body.workshop-on .example-hint {
  display: none;
}

.example-hint-icon {
  font-size: 1.35rem;
  color: var(--bh-navy);
}

.example-hint-text {
  flex: 1 1 16rem;
  margin: 0;
  font-weight: 600;
  color: var(--bh-navy);
}

.example-hint-open {
  height: 36px;
  padding: 0 0.9rem;
  background: var(--bh-navy);
  color: var(--bh-white);
  border: 2px solid var(--bh-black);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--bh-black);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.example-hint-open:hover {
  background: var(--bh-gold);
  color: var(--bh-black);
}

.example-hint-open:focus-visible,
.example-hint-close:focus-visible {
  outline: 3px solid var(--bh-gold);
  outline-offset: 2px;
}

.example-hint-close {
  padding: 0.25rem 0.5rem;
  border: 0;
  background: none;
  color: #555;
  font-size: 1.1rem;
  line-height: 1;
}

.example-hint-close:hover {
  color: var(--bh-red);
}

/* On a phone: the line and the close button on top, the button below across the width */
@media (max-width: 576px) {
  .example-hint-text {
    flex-basis: 0;
    min-width: 0;
  }

  .example-hint-close {
    order: 3;
  }

  .example-hint-open {
    order: 4;
    flex: 1 1 100%;
  }
}

/* ============================================================================
   6. ACTIVITY TEMPLATE CARDS (sidebar)
   ============================================================================ */
.activity-template-card {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
  box-shadow: var(--bh-shadow) !important;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.activity-template-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: var(--bh-shadow-md) !important;
}

.activity-template-card .card-header {
  border-radius: 0 !important;
  border-bottom: 2px solid var(--bh-black) !important;
  /* Learning type background colours preserved via main.css */
}

.activity-template-card .card-body {
  background-color: var(--bh-white) !important;
  border-radius: 0 !important;
}

.activity-template-card .description {
  font-size: 13px;
  line-height: 1.4;
}

/* Type icon circles — keep colour, sharp up */
.type-icon {
  border-radius: 0 !important;
  box-shadow: var(--bh-shadow-sm) !important;
}

/* ============================================================================
   7. PLACED ACTIVITY CARDS — "workbench cards"
   ============================================================================ */
.placed-activity {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
  box-shadow: var(--bh-shadow) !important;
  background: var(--bh-white) !important;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.placed-activity:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--bh-shadow-lg) !important;
  cursor: grab;
}

.placed-activity .card-header {
  border-radius: 0 !important;
  border-bottom: 2px solid var(--bh-black) !important;
  /* Learning type colours preserved */
}

.placed-activity .card-body {
  background-color: var(--bh-white) !important;
  border-radius: 0 !important;
}

.placed-activity .activity-title {
  color: var(--bh-navy) !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.3px;
}

/* Widen left accent strip for learning types */
.activity-acquisition {
  border-left: 8px solid var(--acquisition-color) !important;
}
.activity-collaboration {
  border-left: 8px solid var(--collaboration-color) !important;
}
.activity-discussion {
  border-left: 8px solid var(--discussion-color) !important;
}
.activity-inquiry {
  border-left: 8px solid var(--inquiry-color) !important;
}
.activity-practice {
  border-left: 8px solid var(--practice-color) !important;
}
.activity-production {
  border-left: 8px solid var(--production-color) !important;
}

/* Dragging state — physical feel */
.placed-activity.dragging {
  opacity: 0.7 !important;
  transform: rotate(2deg) !important;
  box-shadow: var(--bh-shadow-lg) !important;
}

/* SortableJS ghost/drag overrides */
.sortable-ghost {
  opacity: 0.4 !important;
  background: rgba(232, 168, 32, 0.15) !important;
  border: 2px dashed var(--bh-gold) !important;
}

.sortable-drag {
  transform: rotate(2deg) !important;
  box-shadow: var(--bh-shadow-lg) !important;
}

.drag-over {
  background: rgba(232, 168, 32, 0.1) !important;
  border: 2px dashed var(--bh-gold) !important;
}

.touch-hover {
  background: rgba(232, 168, 32, 0.15) !important;
  border: 2px solid var(--bh-gold) !important;
  box-shadow: 0 0 10px rgba(232, 168, 32, 0.4) !important;
}

/* Card buttons */
.placed-activity .edit-btn {
  color: var(--bh-blue) !important;
  border-color: var(--bh-blue) !important;
  border-radius: 0 !important;
}

.placed-activity .edit-btn:hover {
  background-color: var(--bh-blue) !important;
  color: var(--bh-white) !important;
}

.placed-activity .delete-btn {
  color: var(--bh-red) !important;
  border-color: var(--bh-red) !important;
  border-radius: 0 !important;
}

.placed-activity .delete-btn:hover {
  background-color: var(--bh-red) !important;
  color: var(--bh-white) !important;
}

/* The card's links (ActivityCard.js): a count on the face; a click opens the
   editor at the links on the back of the card */
.placed-activity .resource-links-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.4rem;
  border: 1px solid var(--bh-blue);
  border-radius: 0;
  background: var(--bh-white);
  color: var(--bh-blue);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}

.placed-activity button.resource-links-chip {
  cursor: pointer;
}

.placed-activity button.resource-links-chip:hover,
.placed-activity button.resource-links-chip:focus-visible {
  background: var(--bh-blue);
  color: var(--bh-white);
}

.placed-activity button.resource-links-chip:focus-visible {
  outline: 2px solid var(--bh-gold);
  outline-offset: 1px;
}

/* Inline editing */
.placed-activity .activity-title:hover,
.placed-activity .duration-display:hover,
.placed-activity .modality-display:hover,
.placed-activity .group-display:hover {
  background-color: rgba(43, 76, 140, 0.08) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(43, 76, 140, 0.3) !important;
}

.placed-activity .inline-edit-input {
  border: 2px solid var(--bh-blue) !important;
  border-radius: 0 !important;
}

.placed-activity .inline-edit-input:focus {
  box-shadow: 0 0 0 2px rgba(43, 76, 140, 0.25) !important;
}

/* ============================================================================
   8. STORYBOARD PHASES & DROPZONES
   ============================================================================ */
.storyboard-phase {
  background-color: var(--bh-cream) !important;
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
  border-left: 6px solid var(--bh-navy) !important;
  box-shadow: var(--bh-shadow) !important;
  transition: box-shadow 0.2s ease !important;
}

.storyboard-phase:hover {
  box-shadow: var(--bh-shadow-md) !important;
}

.storyboard-phase-header {
  border-bottom: 2px solid var(--bh-black) !important;
}

.phase-title {
  color: var(--bh-navy) !important;
  text-transform: uppercase;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
}

.phase-title i {
  color: var(--bh-gold) !important;
  margin-right: 8px;
}

.phase-name {
  border-radius: 0 !important;
}

.phase-name:focus {
  outline: 2px solid var(--bh-gold) !important;
  background: var(--bh-white) !important;
}

/* Dropzones */
.dropzone {
  border: 2px dashed var(--bh-navy) !important;
  border-radius: 0 !important;
  background-color: rgba(245, 240, 230, 0.5);
  transition: background-color 0.2s, border-color 0.2s !important;
}

.dropzone.active {
  background-color: rgba(232, 168, 32, 0.08) !important;
  border-color: var(--bh-gold) !important;
  border-style: dashed !important;
}

.dropzone-placeholder {
  color: var(--bh-navy);
  opacity: 0.5;
  font-style: normal !important;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

/* Phase controls */
.btn-delete-phase {
  border-radius: 0 !important;
}

.btn-delete-phase:hover {
  background: var(--bh-red) !important;
  color: var(--bh-white) !important;
}

.btn-time-type {
  border-radius: 0 !important;
}

.btn-add-section {
  border-radius: 0 !important;
  border: 2px dashed var(--bh-navy) !important;
  background: rgba(27, 42, 74, 0.05) !important;
  color: var(--bh-navy) !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.btn-add-section:hover {
  background: rgba(232, 168, 32, 0.15) !important;
  border-color: var(--bh-gold) !important;
  color: var(--bh-navy) !important;
}

/* ============================================================================
   9. GENERIC PANELS (course info, analytics, tools)
   ============================================================================ */
.card {
  border: 2px solid var(--bh-black) !important;
  box-shadow: var(--bh-shadow) !important;
  border-radius: 0 !important;
  overflow: hidden;
}

.card-header {
  border-radius: 0 !important;
  border-bottom: 2px solid var(--bh-black) !important;
}

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

.card-header.bg-secondary {
  background-color: var(--bh-blue) !important;
}

.card-header.bg-info {
  background-color: var(--bh-blue) !important;
}

.card-header.bg-dark {
  background-color: var(--bh-navy) !important;
}

/* Analytics container */
#analytics-container .card-body {
  background-color: var(--bh-cream);
}

/* Tool guide and context cards */
.context-card {
  background: var(--bh-cream) !important;
  border: 2px solid var(--bh-black) !important;
  border-radius: 0 !important;
}

.context-card-header {
  border-bottom: 2px solid var(--bh-black) !important;
}

.context-card-header i {
  color: var(--bh-gold) !important;
}

.context-card-header h5 {
  color: var(--bh-navy) !important;
  text-transform: uppercase;
  font-weight: 700;
}

.current-context {
  border-radius: 0 !important;
  border-left: 4px solid var(--bh-gold) !important;
}

.tool-display-header {
  background: var(--bh-navy) !important;
  border-radius: 0 !important;
}

.tool-count-badge {
  background: var(--bh-gold) !important;
  color: var(--bh-black) !important;
  border-radius: 0 !important;
  font-weight: 700;
}

.other-filters {
  background: rgba(245, 240, 230, 0.5) !important;
  border: 2px solid var(--bh-black) !important;
  border-radius: 0 !important;
}

.browse-mode-options {
  border: 2px dashed var(--bh-navy) !important;
  border-radius: 0 !important;
}

.browse-warning {
  border-radius: 0 !important;
  border-left: 4px solid var(--bh-gold) !important;
}

/* ============================================================================
   10. BUTTONS
   ============================================================================ */
.btn {
  border-radius: 0 !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  border: 2px solid var(--bh-black) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--bh-shadow) !important;
}

.btn:active {
  transform: translate(0, 0) !important;
  box-shadow: none !important;
}

/* Primary */
.btn-primary {
  background-color: var(--bh-navy) !important;
  border-color: var(--bh-black) !important;
  color: var(--bh-white) !important;
}

.btn-primary:hover {
  background-color: var(--bh-blue) !important;
}

/* Secondary */
.btn-secondary {
  background-color: var(--bh-cream) !important;
  border-color: var(--bh-black) !important;
  color: var(--bh-navy) !important;
}

.btn-secondary:hover {
  background-color: var(--bh-gold) !important;
  color: var(--bh-black) !important;
}

/* Success */
.btn-success {
  background-color: #3aaa35 !important;
  border-color: var(--bh-black) !important;
}

/* Danger */
.btn-danger {
  background-color: var(--bh-red) !important;
  border-color: var(--bh-black) !important;
}

/* Outline variants */
.btn-outline-primary {
  color: var(--bh-navy) !important;
  border-color: var(--bh-black) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background-color: var(--bh-navy) !important;
  color: var(--bh-white) !important;
}

.btn-outline-danger {
  color: var(--bh-red) !important;
  border-color: var(--bh-black) !important;
  background: transparent !important;
}

.btn-outline-danger:hover {
  background-color: var(--bh-red) !important;
  color: var(--bh-white) !important;
}

.btn-outline-secondary {
  color: var(--bh-navy) !important;
  border-color: var(--bh-black) !important;
  background: transparent !important;
}

.btn-outline-secondary:hover {
  background-color: var(--bh-navy) !important;
  color: var(--bh-white) !important;
}

/* The chosen button of a toggle group (a btn-check radio or checkbox, e.g.
   "Sorter etter", the duration filter, scheduling) is filled, as in Bootstrap.
   The transparent background above is !important, so without this every
   button of the group looked the same and the choice could not be seen
   (until 1.30.3) */
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary {
  background-color: var(--bh-navy) !important;
  color: var(--bh-white) !important;
  border-color: var(--bh-black) !important;
}

.btn-check:focus-visible + .btn-outline-primary,
.btn-check:focus-visible + .btn-outline-secondary {
  outline: 3px solid var(--bh-gold);
  outline-offset: 2px;
}

.btn-outline-light {
  color: var(--bh-white) !important;
  border-color: var(--bh-white) !important;
}

/* Also while its menu is open (Export, Import), when the pointer is in the menu */
.btn-outline-light:hover,
.btn-outline-light.show {
  color: var(--bh-navy) !important;
  background-color: var(--bh-white) !important;
}

/* Small buttons — softer shadow */
.btn-sm {
  font-size: 0.7rem !important;
  border-width: 1px !important;
}

.btn-sm:hover {
  box-shadow: 2px 2px 0 var(--bh-black) !important;
}

/* ============================================================================
   11. MODALS
   ============================================================================ */
.modal-content {
  border: 3px solid var(--bh-black) !important;
  border-radius: 0 !important;
  box-shadow: var(--bh-shadow-xl) !important;
  background-color: var(--bh-white) !important;
}

/* Bootstrap modal dialog — ensure scrollable and properly positioned */
.modal-dialog {
  margin: 1.75rem auto !important;
}

/* Bootstrap modals: make the body scrollable so long content doesn't push modal off-screen */
.modal-dialog .modal-content {
  max-height: calc(100vh - 3.5rem) !important;
  display: flex !important;
  flex-direction: column !important;
}

.modal-dialog .modal-content .modal-body {
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}

/* Bootstrap modal — ensure overlay scrolls properly */
.modal.fade,
.modal.show {
  overflow-y: auto !important;
}

/* About and Privacy modals now use Bootstrap — no custom overrides needed */

/* ---- Fix modal backdrop flicker ----
   Transforms inside modals trigger GPU layer recomposition which causes
   the backdrop to blink. Disable ALL transforms inside modals. */
.modal .btn:hover,
.modal .btn:active,
.modal .verb-pill:hover,
.modal .solo-level-option:hover,
.modal .participation-cell:hover,
.modal .group-size-option:hover,
.modal .form-control:hover,
.modal .form-select:hover,
.modal .nav-link:hover,
.activity-editor .btn:hover,
.activity-editor .btn:active,
.activity-editor .verb-pill:hover,
.activity-editor .solo-level-option:hover,
.activity-editor .participation-cell:hover,
.activity-editor .group-size-option:hover,
.activity-editor .form-control:hover,
.activity-editor .form-select:hover,
.activity-editor .nav-link:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Keep visual feedback via background colour change instead */
.modal .btn:hover,
.activity-editor .btn:hover {
  filter: brightness(1.1);
}

/* Prevent GPU layer creation on modal elements */
.modal .modal-content,
.modal .modal-body,
.modal .modal-header,
.modal .modal-footer {
  will-change: auto !important;
  transform: none !important;
}

.modal-backdrop {
  will-change: auto !important;
  transform: none !important;
  transition: none !important;
}

.modal-header {
  background-color: var(--bh-navy) !important;
  color: var(--bh-white) !important;
  border-bottom: 3px solid var(--bh-gold) !important;
  border-radius: 0 !important;
}

.modal-header .modal-title {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
}

.modal-header .btn-close {
  filter: invert(1);
}

.modal-footer {
  border-top: 2px solid var(--bh-black) !important;
  border-radius: 0 !important;
  background-color: var(--bh-cream) !important;
}

/* Modal headings */
.modal h3,
.modal h4,
.activity-editor h3,
.activity-editor h4 {
  color: var(--bh-navy) !important;
  font-weight: 700;
}

/* Cloud modals */
#cloud-save-modal .modal-header,
#cloud-load-modal .modal-header {
  background: var(--bh-navy) !important;
}

#cloud-password-modal .modal-header {
  background: var(--bh-gold) !important;
  color: var(--bh-black) !important;
  border-bottom: 3px solid var(--bh-black) !important;
}

/* Activity editor panel — same Bauhaus treatment as the modals */
.activity-editor {
  border-left: 3px solid var(--bh-black) !important;
  background-color: var(--bh-white) !important;
}

.activity-editor-header {
  background-color: var(--bh-navy) !important;
  color: var(--bh-white) !important;
  border-bottom: 3px solid var(--bh-gold) !important;
}

.activity-editor-header .offcanvas-title {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
}

.activity-editor-header .btn-close {
  filter: invert(1);
}

.activity-editor-footer {
  border-top: 2px solid var(--bh-black) !important;
  background-color: var(--bh-cream) !important;
}

/* Activity modal elements — Bauhaus style */
.participation-cell {
  border: 2px solid var(--bh-black) !important;
  border-radius: 0 !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.participation-cell:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: var(--bh-shadow) !important;
}

.participation-cell.active,
.participation-cell.btn-primary {
  border-color: var(--bh-navy) !important;
  background-color: rgba(27, 42, 74, 0.1) !important;
}

.group-size-option {
  border: 2px solid var(--bh-black) !important;
  border-radius: 0 !important;
}

.group-size-option:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: var(--bh-shadow) !important;
}

.group-size-option.selected {
  border-color: var(--bh-navy) !important;
}

.lms-tools-container {
  border: 2px solid var(--bh-black) !important;
  border-radius: 0 !important;
  background-color: var(--bh-cream) !important;
}

.mode-explanation {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
}

/* Offcanvas — Bauhaus treatment */
.offcanvas {
  border-radius: 0 !important;
}

/* Activity detail view inside the editor panel */
.activity-detail-header {
  border-bottom: 3px solid var(--bh-black) !important;
}

.activity-detail-back {
  color: var(--bh-navy) !important;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.activity-detail-title {
  color: var(--bh-navy);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.detail-section {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
}

.enhancement-item {
  border-radius: 0 !important;
}

.relevance-badge {
  border-radius: 0 !important;
}

/* ============================================================================
   12. FOOTER
   ============================================================================ */
.app-footer {
  border-radius: 0 !important;
  border-top: 4px solid var(--bh-gold) !important;
  background-color: var(--bh-navy) !important;
}

footer {
  background-color: var(--bh-navy) !important;
  border-radius: 0 !important;
}

.app-footer-link {
  border-radius: 0 !important;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.85rem !important;
  letter-spacing: 0.5px;
}

.app-footer-link:hover {
  color: var(--bh-gold) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

footer a {
  color: var(--bh-gold) !important;
}

footer a:hover {
  color: var(--bh-white) !important;
}

.footer-bottom {
  border-top: 1px solid rgba(232, 168, 32, 0.3) !important;
}

/* ============================================================================
   13. FORMS
   ============================================================================ */
.form-control {
  border: 2px solid var(--bh-black) !important;
  border-radius: 0 !important;
  background-color: var(--bh-white) !important;
}

.form-control:focus {
  border-color: var(--bh-blue) !important;
  box-shadow: 0 0 0 3px rgba(43, 76, 140, 0.2) !important;
}

.form-select {
  border: 2px solid var(--bh-black) !important;
  border-radius: 0 !important;
}

.form-select:focus {
  border-color: var(--bh-blue) !important;
  box-shadow: 0 0 0 3px rgba(43, 76, 140, 0.2) !important;
}

.input-group-text {
  border: 2px solid var(--bh-black) !important;
  border-radius: 0 !important;
  background-color: var(--bh-cream) !important;
}

/* SOLO level indicator — preserve SOLO colours on stack icons */
.input-group-text.solo-unistructural {
  background-color: var(--solo-unistructural) !important;
  color: #333 !important;  /* dark icon on gold */
}
.input-group-text.solo-multistructural {
  background-color: var(--solo-multistructural) !important;
  color: #fff !important;  /* white icon on warm orange */
}
.input-group-text.solo-relational {
  background-color: var(--solo-relational) !important;
  color: #fff !important;  /* white icon on blue */
}
.input-group-text.solo-extended {
  background-color: var(--solo-extended) !important;
  color: #fff !important;  /* white icon on navy */
}

/* Tab navigation (course info tabs) */
.nav-tabs {
  border-bottom: 2px solid var(--bh-black) !important;
}

.nav-tabs .nav-link {
  border-radius: 0 !important;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: var(--bh-navy);
  border: 2px solid transparent !important;
}

.nav-tabs .nav-link:hover {
  border-color: var(--bh-black) !important;
  background-color: rgba(232, 168, 32, 0.1);
}

.nav-tabs .nav-link.active {
  border: 2px solid var(--bh-black) !important;
  border-bottom-color: var(--bh-cream) !important;
  background-color: var(--bh-cream) !important;
  color: var(--bh-navy) !important;
  font-weight: 800;
}

/* Session tab titles */
.session-tab-title {
  border-radius: 0 !important;
}

.session-tab-title:hover {
  background-color: rgba(43, 76, 140, 0.1) !important;
}

/* Coverage controls */
.coverage-increment,
.coverage-decrement {
  border-radius: 0 !important;
}

.coverage-increment:hover:not(:disabled),
.coverage-decrement:hover:not(:disabled) {
  background-color: var(--bh-navy) !important;
  border-color: var(--bh-navy) !important;
}

.coverage-input {
  border-radius: 0 !important;
}

/* ============================================================================
   14. TYPOGRAPHY ACCENTS
   ============================================================================ */

/* Section headings inside cards */
.card-header h5,
.card-header h4,
.card-header .h5 {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* Phase title gold accent */
.phase-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1em;
  background-color: var(--bh-gold);
  margin-right: 8px;
  vertical-align: middle;
}

/* ============================================================================
   15. BADGES
   ============================================================================ */
.badge {
  border-radius: 0 !important;
  border: 1px solid var(--bh-black) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge.bg-primary {
  background-color: var(--bh-navy) !important;
}

.badge.bg-success {
  background-color: #3aaa35 !important;
}

.badge.bg-warning {
  background-color: var(--bh-gold) !important;
  color: var(--bh-black) !important;
}

.badge.bg-danger {
  background-color: var(--bh-red) !important;
}

.badge.bg-info {
  background-color: var(--bh-blue) !important;
}

/* Context match badge */
.context-match-badge {
  border-radius: 0 !important;
}

/* ============================================================================
   16. ACCESSIBILITY
   ============================================================================ */
.skip-to-content {
  background-color: var(--bh-navy) !important;
  border-radius: 0 !important;
}

.skip-to-content:hover {
  background-color: var(--bh-gold) !important;
  color: var(--bh-black) !important;
}

/* ============================================================================
   17. TABLES
   ============================================================================ */
.table {
  border: 2px solid var(--bh-black) !important;
}

.table th {
  background-color: var(--bh-cream) !important;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--bh-black) !important;
}

.table td {
  border-bottom: 1px solid rgba(17, 17, 17, 0.15);
}

/* Cloud courses table */
#cloud-courses-list .table th {
  background-color: var(--bh-cream) !important;
}

/* ============================================================================
   18. ALERTS & WARNINGS
   ============================================================================ */
.alert {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
}

.context-mismatch-warning {
  border: 2px solid var(--bh-gold) !important;
  border-radius: 0 !important;
}

/* ============================================================================
   19. SCROLLBAR STYLING (WebKit)
   ============================================================================ */
.tools-panel::-webkit-scrollbar,
.dropzone::-webkit-scrollbar {
  width: 6px;
}

.tools-panel::-webkit-scrollbar-track,
.dropzone::-webkit-scrollbar-track {
  background: var(--bh-cream);
}

.tools-panel::-webkit-scrollbar-thumb,
.dropzone::-webkit-scrollbar-thumb {
  background: var(--bh-navy);
  border-radius: 0;
}

/* ============================================================================
   21. SOLO TAXONOMY — Bauhaus colour scheme
   ============================================================================ */

/* Bauhaus-inspired SOLO level colours */
:root {
  --solo-unistructural: #E8A820;     /* Gold */
  --solo-multistructural: #D4762C;   /* Warm orange */
  --solo-relational: #2B4C8C;        /* Blue */
  --solo-extended: #1B2A4A;          /* Navy */
}

/* SOLO badges — sharp, Bauhaus */
.solo-badge,
.solo-unistructural,
.solo-multistructural,
.solo-relational,
.solo-extended {
  border-radius: 0 !important;
  border: 1px solid var(--bh-black);
  font-weight: 700;
}

.solo-unistructural {
  background-color: var(--solo-unistructural) !important;
  color: var(--bh-black) !important;
}
.solo-multistructural {
  background-color: var(--solo-multistructural) !important;
  color: var(--bh-white) !important;
}
.solo-relational {
  background-color: var(--solo-relational) !important;
  color: var(--bh-white) !important;
}
.solo-extended {
  background-color: var(--solo-extended) !important;
  color: var(--bh-white) !important;
}

/* Background variants */
.solo-unistructural-bg { background-color: var(--solo-unistructural) !important; }
.solo-multistructural-bg { background-color: var(--solo-multistructural) !important; }
.solo-relational-bg { background-color: var(--solo-relational) !important; }
.solo-extended-bg { background-color: var(--solo-extended) !important; }

/* SOLO indicators in ØKTDETALJER outcome list — Bauhaus colour bar */
.outcome-text {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.outcome-text .solo-level-indicator {
  width: 4px !important;
  height: 1.2em !important;
  min-height: 16px;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
  border: none !important;
}

/* SOLO legend */
.solo-legend-container {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
  background-color: var(--bh-cream) !important;
}

.solo-legend-item {
  border-radius: 0 !important;
}

.solo-legend-color {
  border-radius: 0 !important;
  border: 1px solid var(--bh-black);
}

/* SOLO level items with Bauhaus left borders */
.solo-level-item {
  border-radius: 0 !important;
}

/* SOLO level options in modal */
.solo-level-option {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.solo-level-option:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: var(--bh-shadow) !important;
  background-color: var(--bh-cream) !important;
}

.solo-level-option.selected {
  border-color: var(--bh-gold) !important;
  background-color: rgba(232, 168, 32, 0.08) !important;
}

.solo-level-color {
  border-radius: 0 !important;
  border: 1px solid var(--bh-black) !important;
}

/* SOLO Taxonomy tabs — equal-width colour blocks */
#soloLevelTabs {
  border-bottom: 3px solid var(--bh-black) !important;
  display: flex !important;
}

#soloLevelTabs .nav-item {
  flex: 1 1 0 !important;
}

#soloLevelTabs .nav-link {
  border-radius: 0 !important;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.3px;
  width: 100%;
  text-align: center;
  padding: 0.5rem 0.3rem !important;
  border: 2px solid transparent !important;
  border-bottom: none !important;
  margin-bottom: -3px;
  color: var(--bh-navy) !important;
}

/* Inactive tabs — subtle SOLO colour left border as accent */
#soloLevelTabs .solo-tab-unistructural {
  border-left: 4px solid var(--solo-unistructural) !important;
}
#soloLevelTabs .solo-tab-multistructural {
  border-left: 4px solid var(--solo-multistructural) !important;
}
#soloLevelTabs .solo-tab-relational {
  border-left: 4px solid var(--solo-relational) !important;
}
#soloLevelTabs .solo-tab-extended {
  border-left: 4px solid var(--solo-extended) !important;
}

/* Active tabs — filled with SOLO colour */
#soloLevelTabs .solo-tab-unistructural.active {
  background-color: var(--solo-unistructural) !important;
  color: var(--bh-black) !important;
  border: 2px solid var(--bh-black) !important;
  border-bottom-color: var(--bh-white) !important;
}
#soloLevelTabs .solo-tab-multistructural.active {
  background-color: var(--solo-multistructural) !important;
  color: var(--bh-white) !important;
  border: 2px solid var(--bh-black) !important;
  border-bottom-color: var(--bh-white) !important;
}
#soloLevelTabs .solo-tab-relational.active {
  background-color: var(--solo-relational) !important;
  color: var(--bh-white) !important;
  border: 2px solid var(--bh-black) !important;
  border-bottom-color: var(--bh-white) !important;
}
#soloLevelTabs .solo-tab-extended.active {
  background-color: var(--solo-extended) !important;
  color: var(--bh-white) !important;
  border: 2px solid var(--bh-black) !important;
  border-bottom-color: var(--bh-white) !important;
}

/* Verb pills — Bauhaus style */
.verb-pill {
  border-radius: 0 !important;
  border: 1px solid var(--bh-black) !important;
  background-color: var(--bh-cream) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  letter-spacing: 0.3px;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.verb-pill:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 2px 2px 0 var(--bh-black) !important;
  background-color: var(--bh-white) !important;
  color: var(--bh-navy) !important;
}

/* Active verb pills use the SOLO level colour of the current tab */
.verb-pill.active,
.verb-pill.bg-primary {
  color: var(--bh-white) !important;
  border-color: var(--bh-black) !important;
}

/* Per-level verb pill active colours */
#unistructural-verbs .verb-pill.active,
.tab-pane[id*="unistructural"] .verb-pill.active {
  background-color: var(--solo-unistructural) !important;
  color: var(--bh-black) !important;
}
#multistructural-verbs .verb-pill.active,
.tab-pane[id*="multistructural"] .verb-pill.active {
  background-color: var(--solo-multistructural) !important;
  color: var(--bh-white) !important;
}
#relational-verbs .verb-pill.active,
.tab-pane[id*="relational"] .verb-pill.active {
  background-color: var(--solo-relational) !important;
  color: var(--bh-white) !important;
}
#extended-verbs .verb-pill.active,
.tab-pane[id*="extended"] .verb-pill.active {
  background-color: var(--solo-extended) !important;
  color: var(--bh-white) !important;
}

/* Context verb pills */
.verb-pill.context-verb {
  border: 1px dashed var(--bh-black) !important;
  background-color: var(--bh-white) !important;
}

/* Verb container */
.verb-container,
#verb-suggestions-container {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
  background-color: var(--bh-cream) !important;
}

/* Verb context info */
#verb-context-info {
  border-radius: 0 !important;
  border-left: 4px solid var(--bh-gold) !important;
}

/* SOLO chart bar colours update handled via JS (Chart.js uses inline colours) */

/* ============================================================================
   22. SORT OUTCOMES MODAL — fix size
   ============================================================================ */
#sortOutcomesModal .modal-dialog {
  max-width: 550px;
}

#sortOutcomesModal .modal-body {
  overflow-y: visible !important;
}

#sortOutcomesModal .btn-group {
  flex-wrap: wrap;
}

#sortOutcomesModal .btn-group .btn {
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
}

/* ============================================================================
   23. MODAL POSITION — open near the top of the screen
   Dialogs sit 1.75rem from the top (the .modal-dialog rule further up), so
   they are visible without scrolling. Only .modal-dialog-centered is centred.
   ============================================================================ */

/* ============================================================================
   24. NAVBAR BUTTONS — now menu items and tiles, see 5. NAVBAR
   ============================================================================ */

/* Session list items — Bauhaus active indicator */
.session-list-item {
  border-bottom: 1px solid var(--bh-black) !important;
  transition: background-color 0.1s ease !important;
}

.session-list-item:hover {
  background-color: var(--bh-cream) !important;
}

.session-list-item.active {
  background-color: var(--bh-cream) !important;
  border-left: 5px solid var(--bh-gold) !important;
  box-shadow: 3px 3px 0 var(--bh-black) !important;
  position: relative;
}

.session-list-item.active .session-name {
  font-weight: 700 !important;
  color: var(--bh-navy) !important;
}

/* ============================================================================
   26. SESSION ELEMENTS (Øktlementer) — Bauhaus style
   ============================================================================ */

/* Sidebar session element cards */
.session-element-card {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
  box-shadow: var(--bh-shadow-sm) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
  width: 105px !important;
}

.session-element-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: var(--bh-shadow) !important;
}

.session-element-header {
  border-bottom: 2px solid var(--bh-black) !important;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.5px;
}

.session-element-body {
  background-color: var(--bh-white) !important;
}

/* Break card — warm brown with Bauhaus treatment */
.session-element-card.card-break .session-element-header {
  background-color: #6B5344 !important;
}

/* Information card — default Bauhaus blue, then type-specific overrides */
.session-element-card.card-information .session-element-header {
  background-color: var(--bh-blue) !important;
}

/* Evaluation card — teal/cyan color for distinction */
.session-element-card.card-evaluation .session-element-header {
  background-color: #17a2b8 !important;
}

/* Evaluation type colours — sidebar cards */
.session-element-card.eval-type-diagnostic .session-element-header {
  background-color: #6f42c1 !important;
}
.session-element-card.eval-type-pulse .session-element-header {
  background-color: #17a2b8 !important;
}
.session-element-card.eval-type-session .session-element-header {
  background-color: #20c997 !important;
}
.session-element-card.eval-type-course .session-element-header {
  background-color: #0d6efd !important;
}

/* Info type colours — sidebar cards */
.session-element-card.info-type-announcement .session-element-header {
  background-color: var(--bh-blue) !important;
}
.session-element-card.info-type-reminder .session-element-header {
  background-color: var(--bh-gold) !important;
}
.session-element-card.info-type-instructions .session-element-header {
  background-color: #3aaa35 !important;
}
.session-element-card.info-type-progress .session-element-header {
  background-color: #6f42c1 !important;
}
.session-element-card.info-type-resource .session-element-header {
  background-color: var(--bh-navy) !important;
}

.session-element-duration {
  gap: 5px !important;
}

.session-element-duration .duration-input {
  border-radius: 0 !important;
  border: 1px solid var(--bh-black) !important;
  width: 48px !important;
  padding: 2px 4px !important;
  font-size: 0.75rem !important;
}

/* SMART ØKTPLANLEGGER — widen cramped duration & break inputs */
#schedule-session-duration {
  width: 65px !important;
}

#schedule-duration-unit {
  width: 120px !important;
}

#schedule-break-duration {
  width: 55px !important;
}

/* The break input-group wrapper also needs more room */
#schedule-break-duration + .input-group-text {
  border-radius: 0 !important;
}

/* Course info — Standard øktvarighet: narrower number, wider unit select */
#default-session-duration {
  max-width: 75px !important;
  flex: 0 0 75px !important;
}

#duration-unit {
  max-width: 120px !important;
  flex: 1 1 120px !important;
}

/* Course info — break length (shown with lections): keep the number box
   wide enough to read when the column narrows. "Include break" wraps onto
   two lines first; only in a very narrow column does the box move below */
.break-settings-row .d-flex {
  flex-wrap: wrap;
}

.break-settings-row .form-check {
  flex: 1 1 0;
  min-width: 4.5rem;
  margin-right: 0;
}

.break-settings-row .input-group {
  flex: 0 0 auto;
}

#break-duration {
  max-width: 60px !important;
  flex: 0 0 60px !important;
}

/* Storyboard session element cards */
.session-element-storyboard {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
  box-shadow: var(--bh-shadow) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.session-element-storyboard:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: var(--bh-shadow-md) !important;
  border-color: var(--bh-black) !important;
}

.session-element-storyboard .element-header {
  border-bottom: 2px solid var(--bh-black) !important;
}

.session-element-storyboard.card-break .element-header {
  background-color: #6B5344 !important;
}

.session-element-storyboard.card-information .element-header {
  background-color: var(--bh-blue) !important;
}

/* Info type colours — storyboard cards */
.session-element-storyboard.info-type-announcement .element-header {
  background-color: var(--bh-blue) !important;
}
.session-element-storyboard.info-type-reminder .element-header {
  background-color: var(--bh-gold) !important;
}
.session-element-storyboard.info-type-instructions .element-header {
  background-color: #3aaa35 !important;
}
.session-element-storyboard.info-type-progress .element-header {
  background-color: #6f42c1 !important;
}
.session-element-storyboard.info-type-resource .element-header {
  background-color: var(--bh-navy) !important;
}

/* Evaluation card — storyboard styles */
.session-element-storyboard.card-evaluation .element-header {
  background-color: #17a2b8 !important;
}

/* Evaluation type colours — storyboard cards */
.session-element-storyboard.eval-type-diagnostic .element-header {
  background-color: #6f42c1 !important;
}
.session-element-storyboard.eval-type-pulse .element-header {
  background-color: #17a2b8 !important;
}
.session-element-storyboard.eval-type-session .element-header {
  background-color: #20c997 !important;
}
.session-element-storyboard.eval-type-course .element-header {
  background-color: #0d6efd !important;
}

/* Evaluation card specific styles */
.session-element-storyboard.card-evaluation .duration-display {
  cursor: pointer;
  color: #666;
  margin-top: 4px;
}

.session-element-storyboard.card-evaluation .duration-display:hover {
  color: #17a2b8;
}

/* Evaluation modal styles */
#evaluation-modal .eval-type-btn {
  border: 2px solid #dee2e6;
  background: white;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.2s;
}

#evaluation-modal .eval-type-btn:hover {
  border-color: #17a2b8;
  background: rgba(23, 162, 184, 0.05);
}

#evaluation-modal .eval-type-btn.active {
  border-color: #17a2b8;
  background: #17a2b8;
  color: white;
}

.session-element-storyboard .element-title[contenteditable="true"] {
  border-radius: 0 !important;
}

.session-element-storyboard .element-title[contenteditable="true"]:focus {
  outline: 2px solid var(--bh-gold) !important;
}

.session-element-storyboard .element-controls {
  border-top: 1px solid var(--bh-black) !important;
}

/* ============================================================================
   27. ACTIVITY MODAL TABS — Bauhaus style
   ============================================================================ */

/* Tab navigation in activity modal */
#activity-modal-tabs {
  border-bottom: 3px solid var(--bh-black) !important;
}

#activity-modal-tabs .nav-link {
  border-radius: 0 !important;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: var(--bh-navy);
  border: 2px solid transparent !important;
  margin-bottom: -3px;
  padding: 0.6rem 0.8rem;
}

#activity-modal-tabs .nav-link:hover {
  border-color: var(--bh-black) var(--bh-black) transparent !important;
  background-color: rgba(232, 168, 32, 0.08);
}

#activity-modal-tabs .nav-link.active {
  border: 2px solid var(--bh-black) !important;
  border-bottom-color: var(--bh-white) !important;
  background-color: var(--bh-white) !important;
  color: var(--bh-navy) !important;
  font-weight: 800;
}

/* Participation cells — Bauhaus treatment (outside modal context, keep transforms) */
.participation-cell i {
  color: var(--bh-navy) !important;
}

.participation-cell.active,
.participation-cell.btn-primary {
  background-color: rgba(27, 42, 74, 0.08) !important;
  border-color: var(--bh-navy) !important;
}

/* Mode explanation */
.mode-explanation {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
  background-color: var(--bh-cream) !important;
}

.mode-explanation strong {
  color: var(--bh-navy) !important;
}

/* Group size options */
.group-size-option {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
}

.group-size-option i {
  color: var(--bh-navy) !important;
}

.group-size-option.selected {
  border-color: var(--bh-gold) !important;
  background-color: rgba(232, 168, 32, 0.08) !important;
}

/* Activities list items in the Activities tab */
.activities-container .card {
  border: 2px solid var(--bh-black) !important;
  box-shadow: var(--bh-shadow-sm) !important;
}

/* Activity cards in AKTIVITETER tab — full Bauhaus treatment */
.activity-card {
  border: 2px solid var(--bh-black) !important;
  border-radius: 0 !important;
  box-shadow: var(--bh-shadow-sm) !important;
  overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.activity-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: var(--bh-shadow) !important;
  border-color: var(--bh-black) !important;
}

.activity-card.selected {
  box-shadow: 4px 4px 0 var(--bh-gold), 0 0 0 2px var(--bh-gold) !important;
  border-color: var(--bh-gold) !important;
}

.activity-card-header {
  background-color: var(--bh-cream) !important;
  border-bottom: 2px solid var(--bh-black) !important;
  padding: 10px 15px !important;
}

.activity-card-body {
  background-color: var(--bh-white) !important;
}

.activity-title {
  color: var(--bh-navy) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 0.8rem !important;
  letter-spacing: 0.3px;
}

.activity-description {
  color: var(--bh-black) !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
}

/* Duration badges — Bauhaus geometric */
.activity-duration-badge {
  border-radius: 0 !important;
  font-weight: 700 !important;
  font-size: 0.65rem !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px !important;
  border: 1px solid var(--bh-black) !important;
}

.duration-quick {
  background-color: #3aaa35 !important;
}

.duration-medium {
  background-color: var(--bh-blue) !important;
}

.duration-extended {
  background-color: #6f42c1 !important;
}

/* Activity tags — sharp Bauhaus pills */
.activity-tag {
  border-radius: 0 !important;
  background-color: rgba(27, 42, 74, 0.06) !important;
  color: var(--bh-navy) !important;
  font-weight: 600 !important;
  font-size: 0.65rem !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid rgba(27, 42, 74, 0.2) !important;
  padding: 2px 8px !important;
}

.activity-card-footer {
  background-color: var(--bh-cream) !important;
  border-top: 2px solid var(--bh-black) !important;
}

/* Duration filter buttons */
#activity-duration-filter .btn {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.3px;
}

#activity-duration-filter .btn-check:checked + .btn {
  background-color: var(--bh-navy) !important;
  border-color: var(--bh-black) !important;
  color: var(--bh-white) !important;
}

/* Selected activities display area */
#selected-activities-display {
  border-radius: 0 !important;
}

#activities .bg-light {
  background-color: var(--bh-cream) !important;
  border: 2px solid var(--bh-black) !important;
  border-radius: 0 !important;
}

/* Custom activity creation card */
#activities .card {
  border: 2px solid var(--bh-black) !important;
  border-radius: 0 !important;
  box-shadow: var(--bh-shadow-sm) !important;
}

#activities .card-header.bg-light {
  background-color: var(--bh-cream) !important;
  border-bottom: 2px solid var(--bh-black) !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Activity filter bar — Bauhaus treatment */
.activity-filter-bar {
  background-color: var(--bh-cream) !important;
  border-bottom: 2px solid var(--bh-black) !important;
}

.activity-filter-bar .filter-hint-icon {
  color: var(--bh-navy);
  opacity: 0.7;
}

/* Filter buttons — sharp Bauhaus style */
.filter-btn {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
  background-color: var(--bh-white) !important;
  color: var(--bh-navy) !important;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 5px 12px !important;
  transition: background-color 0.1s ease, color 0.1s ease !important;
}

.filter-btn:hover {
  background-color: rgba(232, 168, 32, 0.1) !important;
  border-color: var(--bh-black) !important;
}

.filter-btn.active {
  background-color: var(--bh-navy) !important;
  color: var(--bh-white) !important;
  border-color: var(--bh-black) !important;
  font-weight: 700 !important;
}

/* Duration indicator dots — square for Bauhaus */
.duration-badge {
  border-radius: 0 !important;
  width: 8px !important;
  height: 8px !important;
  border: 1px solid var(--bh-black) !important;
}

.quick-badge {
  background-color: #3aaa35 !important;
}

.medium-badge {
  background-color: var(--bh-blue) !important;
}

.extended-badge {
  background-color: #6f42c1 !important;
}

/* Context selector dropdown — Bauhaus */
.context-selector,
#activity-context-selector {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--bh-navy) !important;
}

#activity-context-selector:focus {
  border-color: var(--bh-gold) !important;
  box-shadow: 0 0 0 2px rgba(232, 168, 32, 0.25) !important;
}

/* Activity recommendation note */
.activity-recommendation-note {
  border-radius: 0 !important;
  border: 2px solid var(--bh-gold) !important;
  background-color: rgba(232, 168, 32, 0.06) !important;
}

/* Duration group headers — Bauhaus section dividers */
.activity-group-header {
  margin-bottom: 12px !important;
}

.duration-title {
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 1px !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
  border-bottom: 3px solid var(--bh-black) !important;
}

/* Duration headers — Bauhaus colour palette per duration */
.quick-title {
  color: #3aaa35 !important;
  border-bottom-color: #3aaa35 !important;
}

.medium-title {
  color: var(--bh-blue) !important;
  border-bottom-color: var(--bh-blue) !important;
}

.extended-title {
  color: #6f42c1 !important;
  border-bottom-color: #6f42c1 !important;
}

/* Activity badges inside cards — Bauhaus sharp */
.activity-groupsize-badge,
.activity-pedagogy-badge {
  border-radius: 0 !important;
  font-weight: 700 !important;
  font-size: 0.6rem !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge.bg-purple {
  background-color: #6f42c1 !important;
}

/* Selected activity cards in the selection area */
.selected-activity-card {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
}

/* Create custom activity section toggle */
#toggle-implementation-guide {
  border-radius: 0 !important;
  border: 2px solid var(--bh-black) !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.3px;
}

/* ============================================================================
   28. REFLECTION TAB — rating buttons with the three basic shapes
   ============================================================================ */

/* Reflection btn-group — equal-width buttons */
#reflection .btn-group.d-flex {
  gap: 0;
}

#reflection .btn-group .btn {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  border: 2px solid var(--bh-black) !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  padding: 0.5rem 0.75rem !important;
  min-height: 44px;
}

/* Rating marks: the three basic shapes (circle, square, triangle) in navy,
   gold and red. The shape carries the meaning, so it reads without colour.
   The selected button turns black and its mark turns white. */
#reflection-rating-great + label::before,
#reflection-rating-okay + label::before,
#reflection-rating-needs-work + label::before {
  content: '';
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  background-color: var(--rating-mark);
  -webkit-mask: var(--rating-shape) center / contain no-repeat;
  mask: var(--rating-shape) center / contain no-repeat;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

#reflection-rating-great + label {
  --rating-mark: var(--bh-navy);
  --rating-shape: url("../icons/rating/great.svg");
}

#reflection-rating-okay + label {
  --rating-mark: var(--bh-gold);
  --rating-shape: url("../icons/rating/okay.svg");
}

#reflection-rating-needs-work + label {
  --rating-mark: var(--bh-red);
  --rating-shape: url("../icons/rating/needs-work.svg");
}

#reflection .btn-outline-success,
#reflection .btn-outline-warning,
#reflection .btn-outline-danger {
  color: var(--bh-black) !important;
  background-color: var(--bh-white) !important;
  border-color: var(--bh-black) !important;
}

#reflection .btn-outline-success:hover,
#reflection .btn-outline-warning:hover,
#reflection .btn-outline-danger:hover {
  background-color: var(--bh-cream) !important;
}

#reflection .btn-check:checked + .btn-outline-success,
#reflection .btn-check:checked + .btn-outline-warning,
#reflection .btn-check:checked + .btn-outline-danger {
  background-color: var(--bh-black) !important;
  color: var(--bh-white) !important;
  --rating-mark: var(--bh-white);
}

#reflection .btn-check:focus-visible + label {
  outline: 3px solid var(--bh-gold);
  outline-offset: 2px;
}

/* Reflection intro alert */
#reflection .alert-warning {
  background-color: rgba(232, 168, 32, 0.1) !important;
  border: 2px solid var(--bh-gold) !important;
  border-radius: 0 !important;
  color: var(--bh-navy) !important;
}

/* ============================================================================
   29. TEXT COLOUR FIXES — replace light blue with Bauhaus palette
   ============================================================================ */

/* Override Bootstrap text-primary from the old blue to Bauhaus navy */
.text-primary {
  color: var(--bh-navy) !important;
}

/* Override Bootstrap text-info from light cyan to Bauhaus blue */
.text-info {
  color: var(--bh-blue) !important;
}

/* bg-info header cards — use Bauhaus blue instead of light cyan */
.card-header.bg-info {
  background-color: var(--bh-blue) !important;
  border-bottom: 2px solid var(--bh-black) !important;
}

/* Progress bars using bg-info */
.progress-bar.bg-info {
  background-color: var(--bh-blue) !important;
}

/* Alert info — cream bg with navy accent */
.alert-info {
  background-color: rgba(43, 76, 140, 0.08) !important;
  border: 2px solid var(--bh-blue) !important;
  border-radius: 0 !important;
  color: var(--bh-navy) !important;
}

/* Links inside activity modal — use navy */
#activity-editor .text-primary,
#activity-editor summary.text-primary {
  color: var(--bh-navy) !important;
}

/* ============================================================================
   30. RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Reduce shadows on smaller screens to prevent overflow */
@media (max-width: 768px) {
  .card,
  .storyboard-phase,
  .activity-template-card {
    box-shadow: 2px 2px 0 var(--bh-black) !important;
  }

  .placed-activity {
    box-shadow: 2px 2px 0 var(--bh-black) !important;
  }

  .placed-activity:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 var(--bh-black) !important;
  }

  .btn:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 2px 2px 0 var(--bh-black) !important;
  }

  /* Reduce geometric shape sizes */
  .bh-circle-gold {
    width: 250px;
    height: 250px;
  }

  .bh-square-red {
    width: 180px;
    height: 180px;
  }

  .bh-triangle-blue {
    opacity: 0.02;
  }

  .bh-circle-navy {
    width: 100px;
    height: 100px;
  }

  /* Header */
  .app-title {
    font-size: 1rem !important;
    letter-spacing: 0.5px;
  }
}

@media (max-width: 576px) {
  /* Hide smaller geometric shapes */
  .bh-triangle-blue,
  .bh-circle-navy {
    display: none;
  }

  /* Header: the name and the languages on one line, nothing on top of the
     name; with an institution's name too, the languages go to a line below */
  .app-branding {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 10px 12px !important;
    margin-bottom: 12px;
  }

  .learncraft-logo {
    height: 32px;
    margin-right: 8px;
  }

  .app-title {
    font-size: 0.9rem !important;
    white-space: nowrap;
  }

  .language-selector {
    position: static;
    margin-left: auto;
  }

  .lang-btn {
    padding: 3px 6px !important;
    font-size: 11px !important;
  }

  .language-selector-many .lang-btn .lang-long {
    display: none;
  }

  .language-selector-many .lang-btn .lang-short {
    display: inline;
  }

  /* Compact card shadows */
  .card,
  .storyboard-phase,
  .activity-template-card,
  .placed-activity {
    box-shadow: 1px 1px 0 var(--bh-black) !important;
  }

  .modal-content {
    box-shadow: 6px 6px 0 rgba(0,0,0,0.3) !important;
    border-width: 2px !important;
  }
}

/* ============================================================================
   31. ANALYTICS / REISEANALYSE — Bauhaus geometric styling
   ============================================================================ */

/* Analytics container — the whole card */
#analytics-container .card {
  border: 3px solid var(--bh-black) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 var(--bh-black) !important;
  background-color: var(--bh-cream) !important;
  overflow: hidden;
  position: relative;
}

/* Card header */
#analytics-container .card-header {
  background-color: var(--bh-navy) !important;
  border-bottom: 3px solid var(--bh-gold) !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
}

#analytics-container .card-header h5 {
  text-transform: uppercase !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: var(--bh-white) !important;
  margin: 0 !important;
  font-size: 0.95rem !important;
}

/* Card body — geometric sublayer */
#analytics-container .card-body {
  position: relative;
  z-index: 1;
  background-color: transparent !important;
}

/* Geometric shapes background inside the analytics card */
#analytics-container .card::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -30px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: var(--bh-gold);
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
}

#analytics-container .card::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 30px;
  width: 120px;
  height: 120px;
  background-color: var(--bh-red);
  opacity: 0.06;
  transform: rotate(15deg);
  z-index: 0;
  pointer-events: none;
}

/* Additional geometric shape via card-body pseudo */
#analytics-container .card-body::before {
  content: '';
  position: absolute;
  top: 40%;
  left: -40px;
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 140px solid var(--bh-blue);
  opacity: 0.04;
  z-index: 0;
  pointer-events: none;
}

#analytics-container .card-body::after {
  content: '';
  position: absolute;
  bottom: 20px;
  right: 60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--bh-navy);
  opacity: 0.06;
  z-index: 0;
  pointer-events: none;
}

/* Ensure chart containers sit above the geometric shapes */
#analytics-container .row,
#analytics-container .pie-chart-container,
#analytics-container .radar-chart-container,
#analytics-container .mt-3 {
  position: relative;
  z-index: 1;
}

/* Chart containers — subtle card effect */
#analytics-container .pie-chart-container,
#analytics-container .radar-chart-container {
  background-color: rgba(255, 255, 255, 0.6);
  border: 2px solid var(--bh-black);
  padding: 16px;
  box-shadow: 3px 3px 0 var(--bh-black);
}

/* Doughnut wrapper columns — narrower, top-aligned */
#analytics-container .col-md-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 200px;
  align-self: flex-start;
}

/* Chart title above the box */
.chart-section-title {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bh-navy);
  margin-bottom: 6px;
}

/* The box — centres the canvas inside, taller container */
#analytics-container .pie-chart-container {
  width: 100%;
  min-height: 220px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Scale canvas display — keeps 110×110 internal resolution for retina quality */
#analytics-container #modality-chart,
#analytics-container #grouping-chart {
  width: 160px !important;
  height: 160px !important;
}

/* Custom HTML legend — sits below the box */
.chart-custom-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px 8px;
  margin-top: 10px;
  padding: 0 4px;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--bh-navy);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.chart-legend-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid var(--bh-black);
  flex-shrink: 0;
}

/* Total duration bar at bottom */
#analytics-container .mt-3.text-center {
  background-color: var(--bh-navy);
  color: var(--bh-white) !important;
  padding: 10px 16px !important;
  border: 2px solid var(--bh-black);
  box-shadow: 3px 3px 0 var(--bh-black);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 0.85rem;
  margin-top: 20px !important;
}

#analytics-container .mt-3.text-center strong {
  color: var(--bh-gold) !important;
}

#analytics-container .mt-3.text-center #total-duration {
  color: var(--bh-white) !important;
  font-size: 1.1rem;
}

/* ============================================================================
   32. QUICK-ADD "+" BUTTON & POPOVER
   ============================================================================ */

/* The "+" button at the end of each dropzone */
.btn-quick-add {
  border: 2px dashed var(--bh-navy) !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: var(--bh-navy) !important;
  padding: 0 !important;
  margin: 4px !important;
  font-size: 1.2rem;
  font-weight: bold;
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  opacity: 0.5;
}

.btn-quick-add:hover {
  opacity: 1;
  background-color: var(--bh-gold) !important;
  border-style: solid !important;
  border-color: var(--bh-black) !important;
  color: var(--bh-black) !important;
  box-shadow: 3px 3px 0 var(--bh-black) !important;
}

.btn-quick-add:active {
  background-color: var(--bh-navy) !important;
  color: var(--bh-white) !important;
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--bh-black) !important;
}

/* Backdrop for outside-click dismissal */
.quick-add-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
}

/* The popover menu */
.quick-add-popover {
  position: fixed;
  background-color: var(--bh-cream) !important;
  border: 2px solid var(--bh-black) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--bh-black) !important;
  z-index: 1050;
  min-width: 220px;
  max-width: 280px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Section dividers */
.quick-add-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.quick-add-section-title {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.65rem;
  letter-spacing: 1px;
  color: var(--bh-navy);
  padding-bottom: 4px;
  border-bottom: 2px solid var(--bh-navy);
  margin-bottom: 2px;
}

/* Individual menu items */
.quick-add-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: none;
  border-left: 4px solid transparent;
  background-color: var(--bh-white);
  cursor: pointer;
  transition: all 0.1s ease;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--bh-navy);
  text-align: left;
  width: 100%;
  border-radius: 0;
}

.quick-add-item:hover {
  background-color: var(--bh-navy);
  color: var(--bh-white);
  box-shadow: 2px 2px 0 var(--bh-black);
}

.quick-add-item i {
  font-size: 0.9rem;
  min-width: 18px;
  text-align: center;
}

/* Activity type items get coloured left border */
.quick-add-item.activity-type {
  border-left-width: 4px;
  border-left-style: solid;
}

/* Session element items get navy left border */
.quick-add-item.session-element-type {
  border-left: 4px solid var(--bh-gold);
}

/* Large screen enhancements */
@media (min-width: 1400px) {
  .bh-circle-gold {
    width: 500px;
    height: 500px;
  }

  .bh-square-red {
    width: 400px;
    height: 400px;
  }
}

/* ============================================================================
   33. STORYBOARD ROWS — wrap instead of squeezing
   A section with more activities than fit on the screen continues on the
   next line. The design is unchanged; only the display adapts to the width.
   When a section wraps, each card shows its place in the order.
   ============================================================================ */
.dropzone {
  flex-wrap: wrap !important;
  align-content: flex-start;
  counter-reset: storyboard-order;
}

.dropzone > .placed-activity,
.dropzone > .session-element-storyboard {
  flex: 0 0 auto;
  max-width: 100%;
  counter-increment: storyboard-order;
}

.dropzone.is-wrapped > .placed-activity,
.dropzone.is-wrapped > .session-element-storyboard {
  position: relative;
}

.dropzone.is-wrapped > .placed-activity::after,
.dropzone.is-wrapped > .session-element-storyboard::after {
  content: counter(storyboard-order);
  position: absolute;
  top: 0;
  right: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bh-black);
  color: var(--bh-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

/* Tablets: keep the card width so several fit on a line; phones: full width */
@media (max-width: 992px) {
  .dropzone > .placed-activity {
    width: 200px;
  }
}

@media (max-width: 576px) {
  .dropzone > .placed-activity {
    width: 100%;
  }
}

/* ============================================================================
   34. TOOLS TAB — guide and all tools as collapsible sections; tool status
   ============================================================================ */
.tools-section {
  border: 2px solid var(--bh-black);
  background: var(--bh-white);
  padding: 0.6rem 0.9rem;
}

.tools-section > .tools-section-title {
  cursor: pointer;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bh-navy);
}

.tool-status-note {
  border-left: 4px solid var(--bh-navy);
  padding: 0.25rem 0.5rem;
  background: var(--bh-cream);
}

.tool-status-note.is-pilot { border-left-color: var(--bh-blue); }
.tool-status-note.is-ending { border-left-color: var(--bh-red); }
.tool-status-note.is-upcoming { border-left-color: var(--bh-gold); }

/* ============================================================================
   34. A CARD MOVED WITH THE KEYBOARD
   While a card's name has the keyboard focus, Alt and the arrow keys move the
   card (Storyboard._setupKeys): a gold outline, and the keys under the card ("⌥" on
   a Mac, data-keys). ::after is the card's place in a wrapped section (33), so the
   keys are ::before.
   ============================================================================ */
.dropzone > .placed-activity:has(.sb-card-name:focus-visible),
.dropzone > .session-element-storyboard:has(.sb-card-name:focus-visible) {
  position: relative;
  z-index: 2;
  overflow: visible;
  outline: 3px solid var(--bh-gold);
  outline-offset: 1px;
}

.dropzone > .placed-activity:has(.sb-card-name:focus-visible)::before,
.dropzone > .session-element-storyboard:has(.sb-card-name:focus-visible)::before {
  content: attr(data-keys) / "";
  position: absolute;
  /* Hangs from the outline */
  top: calc(100% + 1px);
  left: -4px;
  padding: 0 0.3rem;
  background: var(--bh-navy);
  color: var(--bh-white);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

/* The card's outline is the focus ring; the name is underlined */
.sb-card-name:focus-visible {
  outline: 0;
  text-decoration: underline dotted;
}