/*
 * The course board ("Kurstavle", js/components/CourseBoard.js): the whole
 * course on one sheet, as in the classic ABC workshop.
 *   body.course-board-on   the board is shown instead of the storyboard
 */

/* --- The view switch: Økt | Hele kurset ----------------------------------------- */

/* Between a tablet and a wide screen the bar is short of room: icons only
   (the button keeps its name for a screen reader, and its hint on hover) */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .view-switch .view-switch-label {
    display: none;
  }

  .view-switch .btn i {
    margin-right: 0 !important;
  }
}

.view-switch .btn.active {
  background: var(--bh-navy, #1B2A4A);
  border-color: var(--bh-navy, #1B2A4A);
  color: #fff;
}

/* --- Board or storyboard ---------------------------------------------------------- */

.course-board {
  display: none;
}

body.course-board-on .course-board {
  display: block;
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 3px solid var(--bh-black, #111);
  background: #fff;
}

body.course-board-on #storyboard-container,
body.course-board-on .course-plan-strip {
  display: none;
}

.cb-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  margin-bottom: 0.6rem;
}

.cb-title-main {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--bh-navy, #1B2A4A);
}

.cb-unit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.85rem;
}

.cb-unit select,
.cb-unit input {
  width: auto;
}

.cb-unit span {
  white-space: nowrap;
}

.cb-word {
  width: 8rem !important;
}

.cb-hint {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.85rem;
  color: #555;
}

/* --- First use: what are the columns? -------------------------------------------------- */

.cb-setup {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 2rem;
  padding: 1rem;
  border: 2px dashed #c9c3b4;
  background: #faf8f3;
}

.cb-setup fieldset {
  margin: 0;
}

.cb-setup-units {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.cb-setup-unit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cb-setup-count input {
  width: 6rem;
}

/* --- The grid: columns across; projects, cards and sessions down ----------------------- */

/* Positioned, so the screen reader texts (.visually-hidden, position: absolute) in the
   board scroll with it: otherwise they sit outside the box and the whole page scrolls
   sideways on a phone */
.cb-scroll {
  position: relative;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.cb-grid {
  display: grid;
  grid-template-columns: 8.5rem repeat(var(--cb-columns, 1), minmax(10.5rem, 1fr)) 6.5rem;
  gap: 4px;
  min-width: min-content;
}

.cb-corner,
.cb-row-label {
  position: sticky;
  left: 0;
  z-index: 2;
}

.cb-corner {
  background: #fff;
}

.cb-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.25rem;
  row-gap: 0.15rem;
  padding: 0.35rem 0.5rem 0.4rem;
  background: var(--bh-navy, #1B2A4A);
  color: #fff;
}

.cb-column-label {
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}

.cb-column-label:hover,
.cb-column-label:focus-visible {
  text-decoration: underline dotted;
}

.cb-head-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}

/* The column's menu (CourseBoard._showColumnMenu) */
.cb-column-menu {
  padding: 0 0.3rem;
  border: 0;
  border-radius: 3px;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

.cb-column-menu:hover,
.cb-column-menu:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* New row after this column, one click; lit while the board is split there */
.cb-column-split {
  padding: 0 0.3rem;
  border: 0;
  border-radius: 3px;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
}

.cb-column-split:hover,
.cb-column-split:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.cb-column-split.is-on {
  background: var(--bh-gold, #E8A820);
  color: var(--bh-black, #111);
}

.cb-column-popover [data-danger] {
  color: #b02a37;
}

/* A week without teaching (a holiday) */
.cb-head.is-off {
  background: #6c757d;
}

.cb-cell.is-off,
.cb-sessions.is-off {
  background: repeating-linear-gradient(45deg, #f3f0e8, #f3f0e8 6px, #e8e3d6 6px, #e8e3d6 12px);
}

.cb-clear {
  margin-left: auto;
}

.cb-meta {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  opacity: 0.85;
}

.cb-meta span {
  white-space: nowrap;
}

/* The mix of learning types in the column, a thin bar under its name */
.cb-mix {
  display: flex;
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
}

.cb-add-column {
  display: flex;
  align-items: center;
}

.cb-row-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.45rem 0.5rem;
  border-left: 6px solid var(--bh-navy, #1B2A4A);
  background: #f3f0e8;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: auto;
}

.cb-row-label > span {
  max-width: 100%;
}

.cb-row-projects {
  border-left-color: var(--bh-gold, #E8A820);
}

.cb-add-project {
  font-size: 0.7rem;
}

/* --- Projects: bars across their columns ------------------------------------------------ */

.cb-projects {
  display: grid;
  grid-template-columns: repeat(var(--cb-columns, 1), minmax(10.5rem, 1fr));
  grid-auto-rows: min-content;
  gap: 4px;
  align-content: start;
  min-height: 2.6rem;
  padding: 4px 0;
}

.cb-projects-empty {
  grid-column: 1 / -1;
  align-self: center;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  color: #777;
}

.cb-project {
  position: relative;
  overflow: hidden;
  padding: 0.3rem 0.6rem;
  border: 2px solid var(--bh-black, #111);
  border-left: 10px solid var(--cb-color, #555);
  border-radius: 0 999px 999px 0;
  background: color-mix(in srgb, var(--cb-color, #555) 18%, #fff);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cb-project i {
  color: var(--cb-color, #555);
}

/* Milestones in the project's sessions, as flags along the bar */
.cb-milestone {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: #b02a37;
  font-size: 0.7rem;
}

.cb-project-milestones {
  margin: 0 0 0.5rem;
  padding-left: 0;
  list-style: none;
  font-size: 0.85rem;
}

.cb-project-milestones i {
  color: #b02a37;
}

.cb-project-hint {
  font-size: 0.8rem;
  color: #555;
}

/* A project going on into the next row, or coming from the row above */
.cb-project.goes-on {
  border-right-style: dashed;
  border-radius: 0;
}

.cb-project.from-before {
  border-left-style: dashed;
  border-left-width: 2px;
}

.cb-project .cb-goes-on {
  color: #444;
}

/* The rows of a split board */
.cb-scroll + .cb-scroll {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 2px dashed #c9c3b4;
}

.cb-project.is-open,
.cb-project:focus-visible {
  outline: 3px solid var(--bh-gold, #E8A820);
  outline-offset: 1px;
}

.cb-project-editor {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 2px solid var(--bh-black, #111);
  background: #faf8f3;
}

.cb-project-editor h6 {
  font-weight: 800;
}

.cb-project-fields {
  display: grid;
  grid-template-columns: minmax(12rem, 2fr) repeat(3, minmax(8rem, 1fr));
  gap: 0.5rem;
}

.cb-project-fields label span {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
}

.cb-project-reach {
  margin: 0.5rem 0;
  font-size: 0.85rem;
  color: #444;
}

.cb-project-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (max-width: 767.98px) {
  .cb-project-fields {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Cards ----------------------------------------------------------------------------- */

.cb-cell,
.cb-sessions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border: 1px dashed #c9c3b4;
  background: #faf8f3;
}

.cb-cell {
  min-height: 6rem;
}

/* "+" at the foot of a column's cards: the learning types to choose from */
.cb-quick-add {
  align-self: flex-start;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  font-size: 0.85rem;
}

.cb-cell.is-drop {
  border: 2px solid var(--bh-gold, #E8A820);
  background: #fff6dd;
}

.cb-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 0.35rem;
  padding: 0.25rem 0.3rem 0.2rem 0.35rem;
  border: 2px solid var(--bh-black, #111);
  border-left: 8px solid var(--cb-color, #555);
  background: #fff;
  font-size: 0.8rem;
  line-height: 1.25;
  cursor: grab;
}

.cb-ghost {
  opacity: 0.4;
}

/* A card whose name has the keyboard focus can be moved with Alt and the arrow keys
   (CourseBoard._onKeydown), a session with Alt + left and right; the keys ("⌥" on a
   Mac, data-keys) hang under the card, taking no room, so nothing moves when the
   focus goes (a click on "+" below would miss) */
.cb-card:has(> .cb-card-title:focus-visible),
.cb-session:has(> .cb-session-title:focus-visible) {
  position: relative;
  z-index: 2;
  outline: 3px solid var(--bh-gold, #E8A820);
  outline-offset: 1px;
}

/* The card's outline is the focus ring; the name keeps its underline */
.cb-card > .cb-card-title:focus-visible,
.cb-session > .cb-session-title:focus-visible {
  outline: 0;
}

.cb-card:has(> .cb-card-title:focus-visible)::after,
.cb-session:has(> .cb-session-title:focus-visible)::after {
  content: attr(data-keys) / "";
  position: absolute;
  top: calc(100% + 1px);
  left: -4px;
  padding: 0 0.3rem;
  background: var(--bh-navy, #1B2A4A);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

.cb-card-type {
  color: var(--cb-color, #555);
  font-size: 0.95rem;
}

/* The name: click to change it, as on the storyboard cards */
.cb-card-title {
  overflow-wrap: break-word;
  hyphens: auto;
  font-weight: 600;
  cursor: text;
}

.cb-card-title.is-default {
  color: #666;
  font-style: italic;
}

.cb-card-title:hover,
.cb-card-title:focus-visible {
  text-decoration: underline dotted;
}

.cb-card-tools {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.15rem;
}

.cb-card-tools button {
  padding: 0 0.2rem;
  border: 0;
  background: none;
  line-height: 1.2;
}

/* The card has a description (on its back) */
.cb-described {
  padding: 0 0.15rem;
  color: #555;
  font-size: 0.75rem;
}

.cb-size {
  color: var(--cb-color, #555);
  font-size: 0.75rem;
  letter-spacing: 1px;
}

.cb-turn {
  position: relative;
  margin-left: auto;
  color: #444;
}

.cb-back-count {
  margin-left: 0.15rem;
  font-size: 0.7rem;
  font-weight: 700;
}

.cb-delete {
  color: #999;
  font-size: 0.75rem;
}

.cb-delete:hover,
.cb-delete:focus-visible {
  color: #b02a37;
}

/* At the front-of-the-cards step the back stays shut */
body.workshop-back-closed .cb-turn {
  display: none;
}

/* The assessment star: silver formative, gold summative (as in workshop.css) */
.cb-star i {
  font-size: 0.85rem;
  color: #999;
}

.cb-star.is-formative i {
  color: #8E9AA6;
  -webkit-text-stroke: 1px #4A5560;
}

.cb-star.is-summative i {
  color: #E8A820;
  -webkit-text-stroke: 1px #8A5E00;
}

.cb-star.is-empty {
  visibility: hidden;
}

/* As on the storyboard cards: faded while the card is pointed at or has
   the keyboard, so a star cycled to none can be clicked again */
.cb-card:hover .cb-star.is-empty,
.cb-card:focus-within .cb-star.is-empty {
  visibility: visible;
  opacity: 0.55;
}

body.workshop-stars .cb-star.is-empty {
  visibility: visible;
  opacity: 1;
}

.cb-inline {
  min-width: 0;
  padding: 0.1rem 0.3rem;
  font-size: 0.8rem;
}

/* --- Sessions in the columns ------------------------------------------------------------ */

.cb-sessions {
  min-height: 2.6rem;
}

.cb-session {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--bh-navy, #1B2A4A);
  border-radius: 4px;
  background: #fff;
  font-size: 0.78rem;
  cursor: grab;
}

.cb-session.is-current {
  box-shadow: inset 4px 0 0 var(--bh-gold, #E8A820);
}

.cb-session-title,
.cb-session-date {
  padding: 0;
  border: 0;
  background: none;
}

.cb-session-title {
  overflow: hidden;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cb-session-title:hover,
.cb-session-title:focus-visible {
  text-decoration: underline;
}

.cb-session-date {
  margin-left: auto;
  color: #555;
  white-space: nowrap;
  cursor: text;
}

.cb-session-date:hover,
.cb-session-date:focus-visible {
  text-decoration: underline dotted;
}

.cb-date-input {
  width: 8.5rem;
  margin-left: auto;
}

.cb-add-session {
  align-self: flex-start;
  padding: 0 0.4rem;
  border: 1px dashed #999;
  border-radius: 4px;
  background: none;
  color: #555;
  font-size: 0.75rem;
}

.cb-add-session:hover,
.cb-add-session:focus-visible {
  border-color: var(--bh-navy, #1B2A4A);
  color: var(--bh-navy, #1B2A4A);
}

.cb-unplaced {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.cb-unplaced-label {
  font-weight: 700;
}

.cb-sessions-tray {
  flex-direction: row;
  flex-wrap: wrap;
  min-width: 12rem;
}

.cb-unplaced-hint {
  color: #555;
}

/* --- The session view: what the course board says for this session ---------------------- */

.course-plan-strip {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--bh-black, #111);
  border-left: 8px solid var(--bh-gold, #E8A820);
  background: #fff;
  font-size: 0.85rem;
}

.course-plan-strip[hidden] {
  display: none;
}

.plan-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.plan-empty {
  color: #666;
}

.plan-column {
  width: auto;
  max-width: 12rem;
  font-weight: 700;
}

.plan-row.is-unplaced .plan-label {
  color: #8a5e00;
}

/* In the session list: the session's column on the course board (SessionView.js) */
.session-board-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  padding: 0 0.4rem;
  border: 1px solid var(--bh-navy, #1B2A4A);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bh-navy, #1B2A4A);
  vertical-align: middle;
}

.plan-label {
  font-weight: 800;
  color: var(--bh-navy, #1B2A4A);
}

.plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.2rem 0.1rem 0.45rem;
  border: 1px solid #999;
  border-left: 6px solid var(--cb-color, #555);
  border-radius: 4px;
  background: #faf8f3;
}

.plan-chip > i {
  color: var(--cb-color, #555);
}

.plan-chip.is-project {
  padding-right: 0.45rem;
  border-radius: 0 999px 999px 0;
  font-weight: 600;
}

.plan-chip-add,
.plan-chip-added {
  padding: 0 0.3rem;
  border: 0;
  background: none;
  font-size: 0.75rem;
}

.plan-chip-add {
  color: var(--bh-navy, #1B2A4A);
}

.plan-chip-added {
  color: #198754;
}

.plan-show {
  margin-left: auto;
  padding: 0;
}

/* A project running through the session: a band over the storyboard */
.project-band {
  margin-top: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: 2px solid var(--bh-black, #111);
  border-left: 10px solid var(--cb-color, #555);
  background: color-mix(in srgb, var(--cb-color, #555) 10%, #fff);
}

.project-band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.project-band-title {
  font-weight: 800;
}

.project-band-title i {
  color: var(--cb-color, #555);
}

.project-band-where,
.project-band-work {
  color: #444;
  font-size: 0.82rem;
}

.project-band-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-left: auto;
}

.project-band-actions .btn {
  font-size: 0.72rem;
}

.project-band-focus {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  font-weight: 700;
}

.project-band-focus span {
  white-space: nowrap;
}

.project-band-milestones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  font-size: 0.8rem;
}

.milestone-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.2rem 0.1rem 0.45rem;
  border: 1px solid var(--bh-black, #111);
  border-radius: 999px;
  background: #fff;
}

.milestone-chip i {
  color: #b02a37;
}

.milestone-chip button {
  padding: 0 0.3rem;
  border: 0;
  background: none;
  color: #777;
  font-size: 0.7rem;
}

.milestone-new {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.milestone-new select {
  width: auto;
}

.milestone-new input {
  width: 16rem;
  max-width: 100%;
}

/* On a storyboard card: the project its work belongs to (ActivityCard.js) */
.project-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0.15rem 0 0.25rem;
  padding: 0 0.4rem;
  overflow: hidden;
  border-left: 4px solid var(--cb-color, #555);
  border-radius: 0 999px 999px 0;
  background: color-mix(in srgb, var(--cb-color, #555) 15%, #fff);
  font-size: 0.72rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-tag i {
  color: var(--cb-color, #555);
}

/* --- Print: the photo of the A1 sheet, on A3 landscape ---------------------------------- */

@media print {
  @page course-board {
    size: A3 landscape;
    margin: 10mm;
  }

  /* The whole printout is the board, so it starts on the first page and
     ends with it (no screen-height minimum adding an empty page) */
  body.course-board-on {
    page: course-board;
    min-height: 0 !important;
  }

  body.course-board-on .course-board {
    padding: 0;
    border: 0;
  }

  body.course-board-on #storyboard-container,
  body.course-board-on .focus-strip,
  body.course-board-on #analytics-container,
  body.course-board-on .print-links,
  .course-plan-strip {
    display: none !important;
  }

  .cb-scroll {
    overflow: visible;
  }

  /* The column for "+ Uke" stays, empty and without width */
  .cb-grid,
  .cb-projects {
    min-width: 0;
  }

  .cb-grid {
    grid-template-columns: 7.5rem repeat(var(--cb-columns, 1), minmax(0, 1fr)) 0;
  }

  .cb-projects {
    grid-template-columns: repeat(var(--cb-columns, 1), minmax(0, 1fr));
  }

  .cb-corner,
  .cb-row-label {
    position: static;
  }

  .cb-scroll {
    break-inside: avoid;
  }

  .cb-card,
  .cb-session {
    break-inside: avoid;
    font-size: 7.5pt;
  }

  .cb-cell,
  .cb-sessions {
    border-style: solid;
  }

  .cb-star.is-empty,
  .cb-turn {
    display: none !important;
  }
}