/* ============================================================================
   Focus mode and print (js/components/FocusMode.js)
   - The bar above the storyboard: context strip + the view switch and Print
   - body.focus-mode is always on (1.39.0); the course and session cards are
     the Kurs page (body.course-overview-on)
   - @media print: only the strip, the storyboard, the cards' links with
     their full addresses (PrintLinks.js) and (next page) the analytics
   ============================================================================ */

.focus-bar {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.focus-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

.focus-strip {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bh-white, #fff);
  border: 2px solid var(--bh-black, #111);
  box-shadow: var(--bh-shadow-sm, 3px 3px 0 #111);
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}

.print-only {
  display: none;
}

/* The cards' links with their full addresses: only on paper */
.print-links {
  display: none;
}

/* --- Focus mode, always on since 1.39.0 ----------------------------------- */

/* The course and session cards are the Kurs page (the view "Kurs",
   body.course-overview-on, CourseBoard.js); every other view hides them */
body:not(.course-overview-on) .course-overview-row,
body.focus-mode #coverage-tracker-row,
body.focus-mode div:has(> #show-coverage-tracker-btn) {
  display: none !important;
}

body.focus-mode .focus-strip {
  display: block;
}

/* The Kurs page is shown instead of the storyboard, its strip and what
   comes under it (Skriv ut stays: its menu prints from any view) */
body.course-overview-on .storyboard-workspace,
body.course-overview-on .focus-strip,
body.course-overview-on #action-plan,
body.course-overview-on #analytics-container {
  display: none !important;
}

/* --- The strip ------------------------------------------------------------ */

.focus-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
}

/* The course name, a button to the Kurs page that reads as the name */
.focus-course {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--bh-navy, #1B2A4A);
}

.focus-course:hover,
.focus-course:focus-visible {
  text-decoration: underline;
}

.focus-session {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
}

.focus-session-select {
  width: auto;
  max-width: 18rem;
  border: 2px solid var(--bh-black, #111);
  border-radius: 0;
  font-weight: 600;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

.focus-nav-btn {
  border: 2px solid var(--bh-black, #111);
  background: var(--bh-white, #fff);
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  line-height: 1;
}

.focus-nav-btn:hover:not(:disabled) {
  background: var(--bh-gold, #E8A820);
}

.focus-nav-btn:disabled {
  opacity: 0.35;
}

.focus-time.is-over {
  color: var(--bh-red, #C0392B);
  font-weight: 700;
}

.focus-tweet {
  margin-top: 0.3rem;
  font-style: italic;
  color: var(--bh-navy, #1B2A4A);
}

.focus-tweet .fa-quote-left {
  font-size: 0.75em;
  opacity: 0.6;
}

.focus-outcomes {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid #ddd;
}

.focus-outcomes-label {
  font-weight: 700;
  white-space: nowrap;
}

/* One line on screen; "Show all" writes the outcomes out underneath each other */
.focus-outcomes-list {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.focus-outcome + .focus-outcome::before {
  content: "·";
  margin: 0 0.5rem;
  color: #888;
}

.focus-outcomes.is-expanded .focus-outcomes-list {
  white-space: normal;
}

.focus-outcomes.is-expanded .focus-outcome {
  display: block;
  margin-bottom: 0.2rem;
}

.focus-outcomes.is-expanded .focus-outcome + .focus-outcome::before {
  content: none;
}

.focus-outcomes.is-empty .focus-outcomes-list {
  color: #6c757d;
  font-style: italic;
  white-space: normal;
}

.focus-outcome-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0 0.3rem;
  margin-right: 0.35rem;
  border: 1px solid var(--bh-black, #111);
  vertical-align: 1px;
}

.focus-outcome-course {
  background: var(--bh-white, #fff);
}

.focus-outcome-session {
  background: var(--bh-cream, #F5F0E6);
}

/* SOLO level: a coloured square on the one-line view, the level name when
   the outcomes are written out (the name stays readable for screen readers) */
.focus-solo {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0 0.3rem;
  margin-right: 0.4rem;
  border: 1px solid var(--bh-black, #111);
  vertical-align: 1px;
}

.focus-outcomes:not(.is-expanded) .focus-solo {
  width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  overflow: hidden;
  color: transparent;
  vertical-align: -1px;
}

.focus-solo-unistructural {
  background: var(--solo-unistructural, #E8A820);
  color: #111;
}

.focus-solo-multistructural {
  background: var(--solo-multistructural, #D4762C);
  color: #111;
}

.focus-solo-relational {
  background: var(--solo-relational, #2B4C8C);
  color: #fff;
}

.focus-solo-extended {
  background: var(--solo-extended, #1B2A4A);
  color: #fff;
}

/* Session description: hidden until "Description" is clicked */
.focus-description {
  display: none;
  gap: 0.5rem;
  align-items: baseline;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid #ddd;
}

.focus-description.is-open {
  display: flex;
}

.focus-description-text {
  white-space: pre-line;
}

.focus-description-toggle,
.focus-outcomes-toggle {
  flex-shrink: 0;
  border: 0;
  background: none;
  padding: 0;
  color: var(--bh-blue, #2B4C8C);
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

/* --- Editing in the strip (FocusMode.js, 1.40.0) --------------------------- */

/* What can be changed reads as text, and shows it can be clicked */
.focus-edit-btn,
.focus-outcome-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
}

.focus-edit-btn:hover,
.focus-outcome-btn:hover {
  background: var(--bh-cream, #F5F0E6);
  box-shadow: 0 0 0 2px var(--bh-cream, #F5F0E6);
}

/* "+ Tweet", "+ Beskrivelse", "+ LU", "+ Øktmål" */
.focus-add {
  flex-shrink: 0;
  border: 0;
  background: none;
  padding: 0;
  color: var(--bh-blue, #2B4C8C);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.focus-add:hover {
  text-decoration: underline;
}

.focus-outcome-adds {
  display: inline-flex;
  flex-shrink: 0;
  gap: 0.75rem;
}

.focus-details-btn {
  margin-left: 0.35rem;
  height: 1.9rem;
  padding: 0 0.5rem;
  border: 2px solid var(--bh-black, #111);
  background: var(--bh-white, #fff);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.focus-details-btn:hover {
  background: var(--bh-gold, #E8A820);
}

/* × after a course outcome: off this session (it stays the course's) */
.focus-outcome-unlink {
  margin-left: 0.15rem;
  padding: 0 0.15rem;
  border: 0;
  background: none;
  color: #777;
  font-size: 0.8rem;
}

.focus-outcome-unlink:hover {
  color: var(--bh-red, #C0392B);
}

/* An open field, with Save and Cancel */
.focus-editor {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.focus-editor .form-control,
.focus-editor .form-select {
  width: auto;
  border: 2px solid var(--bh-black, #111);
  border-radius: 0;
}

.focus-editor-buttons {
  display: inline-flex;
  gap: 0.25rem;
}

.focus-editor-btn {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 2px solid var(--bh-black, #111);
  background: var(--bh-white, #fff);
}

.focus-editor-btn:hover {
  background: var(--bh-gold, #E8A820);
}

.focus-editor-tweet,
.focus-editor-description {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  align-items: flex-start;
}

.focus-editor-tweet textarea,
.focus-editor-description textarea {
  flex: 1 1 20rem;
  min-width: 0;
}

.focus-count {
  color: #555;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Under the outcomes: one session outcome, or the course outcomes to tick */
.focus-editor-outcome,
.focus-editor-link {
  display: flex;
  margin-top: 0.4rem;
  padding: 0.5rem;
  border: 2px solid var(--bh-black, #111);
  background: var(--bh-cream, #F5F0E6);
}

.focus-editor-outcome input[type="text"] {
  flex: 1 1 16rem;
  min-width: 0;
}

.focus-editor-link {
  flex-direction: column;
  align-items: stretch;
}

.focus-editor-title {
  font-weight: 700;
}

.focus-link-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  cursor: pointer;
}

.focus-link-row .focus-outcome-tag,
.focus-link-row .focus-solo {
  flex-shrink: 0;
  white-space: nowrap;
}

.focus-link-row .form-check-input {
  flex-shrink: 0;
  margin-top: 0;
  border: 2px solid var(--bh-black, #111);
  border-radius: 0;
}

.focus-editor-empty {
  margin: 0;
  color: #6c757d;
  font-style: italic;
}

.focus-editor-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.focus-editor-done {
  width: auto;
  padding: 0 0.75rem;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .focus-bar {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .focus-outcomes {
    flex-wrap: wrap;
  }

  /* With four views (a course with a project) the buttons go on two rows */
  .focus-actions {
    flex-wrap: wrap;
    margin-left: 0;
  }

  /* The list of sessions gives way, so both arrows stay on the screen */
  .focus-session {
    flex: 1 1 auto;
    min-width: 0;
  }

  .focus-session .focus-session-select {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* --- Print: this session's storyboard on A4 landscape --------------------- */

@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  html,
  body {
    background: #fff !important;
  }

  body {
    font-size: 10pt;
  }

  /* Keep the phase and card colours */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .bauhaus-bg-shapes,
  .skip-to-content,
  .app-branding,
  .navbar,
  .app-footer,
  .course-overview-row,
  #coverage-tracker-row,
  div:has(> #show-coverage-tracker-btn),
  .learning-types-panel,
  .focus-actions,
  .screen-only,
  .modal,
  .modal-backdrop,
  .offcanvas,
  .offcanvas-backdrop,
  .toast-container,
  #storyboard-container button,
  .dropzone-placeholder,
  .quick-add-popover {
    display: none !important;
  }

  #main-content {
    padding: 0 !important;
  }

  .print-only {
    display: inline !important;
  }

  .focus-bar {
    display: block;
    margin-bottom: 8px;
  }

  .focus-strip {
    display: block !important;
    box-shadow: none;
    padding: 4px 8px;
    font-size: 8.5pt;
    line-height: 1.35;
  }

  .focus-outcomes,
  .focus-description {
    margin-top: 3px;
    padding-top: 3px;
  }

  .focus-printed {
    margin-left: auto;
    font-size: 8pt;
    color: #555;
  }

  /* On paper the outcomes are always written out in full */
  .focus-outcomes-list {
    white-space: normal;
    overflow: visible;
  }

  .focus-outcome {
    display: block;
    margin-bottom: 0 !important;
  }

  .focus-outcome + .focus-outcome::before {
    content: none;
  }

  .focus-outcomes .focus-solo {
    width: auto !important;
    height: auto !important;
    padding: 0 0.3rem !important;
    overflow: visible !important;
  }

  .focus-outcomes .focus-solo-unistructural,
  .focus-outcomes .focus-solo-multistructural {
    color: #111 !important;
  }

  .focus-outcomes .focus-solo-relational,
  .focus-outcomes .focus-solo-extended {
    color: #fff !important;
  }

  .focus-description {
    display: flex !important;
  }

  .storyboard-workspace {
    display: block !important;
  }

  .storyboard-main {
    width: 100% !important;
    max-width: 100% !important;
  }

  .card {
    box-shadow: none !important;
  }

  /* Tighter spacing and 78% size, so a session with the three standard
     phases fits on one page together with the strip */
  .storyboard-main {
    zoom: 0.78;
  }

  .storyboard-phase {
    break-inside: avoid;
    padding: 6px 10px !important;
    margin-bottom: 8px !important;
    box-shadow: none !important;
  }

  .storyboard-phase-header {
    margin-bottom: 6px !important;
    padding-bottom: 4px !important;
  }

  .dropzone {
    padding: 4px !important;
    min-height: 0 !important;
  }

  .placed-activity,
  .session-element-storyboard {
    break-inside: avoid;
    margin: 4px !important;
    box-shadow: none !important;
  }

  /* On the card the link count is text; the links are listed under the storyboard */
  .placed-activity .resource-links-chip {
    display: none !important;
  }

  /* A short list moves to the next page whole rather than leave its heading behind */
  .print-links:not([hidden]) {
    display: block !important;
    margin-top: 6px;
    font-size: 9pt;
    line-height: 1.35;
    break-inside: avoid;
  }

  .print-links-title {
    margin: 0 0 4px;
    font-size: 11pt;
    font-weight: 700;
    break-after: avoid;
  }

  .print-links-cards {
    margin: 0;
    padding-left: 1.4em;
    columns: 2;
    column-gap: 8mm;
  }

  .print-links-card {
    break-inside: avoid;
    margin-bottom: 4px;
  }

  .print-links-list {
    margin: 0;
    padding-left: 1em;
  }

  .print-link-type {
    color: #555;
  }

  /* The whole address, broken anywhere so a long one stays on the page */
  .print-link-url {
    display: block;
    color: #111 !important;
    text-decoration: none;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 8pt;
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  /* Analytics on a page of their own */
  #analytics-container {
    break-before: page;
  }

  /* The three charts side by side, so they fit on that one page */
  #analytics-container .card-body > .row {
    flex-wrap: nowrap !important;
  }

  #analytics-container .card-body > .row > [class*="col-"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #analytics-container .card-body > .row > .col-md-6 {
    flex-grow: 2 !important;
  }

  canvas {
    max-width: 100% !important;
  }
}