/* Additions on top of Bootstrap (dark theme via data-bs-theme="dark") */

/* Description text: keep the line breaks as entered */
.block-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

textarea.mono { font-family: var(--bs-font-monospace); font-size: .9rem; }

/* Page width: full width on mobile/tablet, 80% of the screen on desktop */
@media (min-width: 992px) {
  .page-width { max-width: 80%; }
}

.border-dashed { border-style: dashed !important; }

/* Script blocks */
.script-block pre { margin: 0; max-height: 600px; }
.script-block pre code.hljs { padding: 1rem; background: var(--bs-tertiary-bg); }

/* Learning paths */
.step-circle {
  flex: 0 0 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  font-weight: 600;
  margin-top: .75rem;
}
.step-number:empty { display: none; }

.checkbox-list { max-height: 14rem; overflow-y: auto; }

.version-input { max-width: 9rem; }
.distribution-row:has(.form-check-input:not(:checked)) .version-input { opacity: .45; }

/* Diagrams (Mermaid) */
.diagram svg { max-width: 100%; height: auto; }
.diagram-source { white-space: pre-wrap; font-size: .85rem; color: var(--bs-secondary-color); }
.diagram-preview { background: var(--bs-tertiary-bg); text-align: center; overflow-x: auto; }
.diagram-preview svg { max-width: 100%; height: auto; }

/* "+" between blocks in the tutorial editor */
.formset-inserter { position: relative; display: flex; justify-content: center; margin: -.5rem 0 .5rem; }
.formset-inserter::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px dashed var(--bs-border-color); opacity: 0; transition: opacity .15s;
}
.formset-inserter:hover::before, .formset-inserter:focus-within::before { opacity: 1; }
.inserter-button {
  position: relative; width: 1.9rem; height: 1.9rem; padding: 0;
  background: var(--bs-body-bg); opacity: .6; transition: opacity .15s;
}
.formset-inserter:hover .inserter-button, .inserter-button:focus, .inserter-button.show { opacity: 1; }
.step-circle.step-done { background: var(--bs-success); }

/* Mimir – the name and its story */
.mimir-card { background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), .08), transparent 60%); }
.mimir-icon { font-size: 3.5rem; line-height: 1; }
#mimir { scroll-margin-top: 1rem; }

/* Wishboard */
.vote-box { flex: 0 0 5.5rem; }
.min-w-0 { min-width: 0; }

/* Settings page */
.settings-nav .nav-link { color: var(--bs-body-color); }
.settings-nav .nav-link.active { color: #fff; }

/* Rich text (description blocks) */
.rich-text { overflow-wrap: anywhere; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text h2, .rich-text h3, .rich-text h4 { margin-top: 1.25rem; }
.rich-text h2 { font-size: 1.5rem; } .rich-text h3 { font-size: 1.25rem; } .rich-text h4 { font-size: 1.1rem; }
.rich-text blockquote { border-left: 4px solid var(--bs-primary); padding: .25rem 1rem; color: var(--bs-secondary-color); }
.rich-text code { background: var(--bs-tertiary-bg); padding: .1rem .3rem; border-radius: .25rem; }
.rich-text pre { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .75rem 1rem; }
.rich-text pre code { background: none; padding: 0; }
.rich-text li.ql-indent-1 { margin-left: 1.5em; } .rich-text li.ql-indent-2 { margin-left: 3em; }
.rich-text li.ql-indent-3 { margin-left: 4.5em; } .rich-text li.ql-indent-4 { margin-left: 6em; }

/* Quill editor in the dark theme */
.rich-text-editor .ql-toolbar.ql-snow, .rich-text-editor .ql-container.ql-snow { border-color: var(--bs-border-color); }
.rich-text-editor .ql-toolbar.ql-snow { background: var(--bs-tertiary-bg); border-radius: .375rem .375rem 0 0; position: sticky; top: 0; z-index: 5; }
.rich-text-editor .ql-container.ql-snow { border-radius: 0 0 .375rem .375rem; font-family: inherit; font-size: 1rem; background: var(--bs-body-bg); }
.rich-text-editor .ql-editor { min-height: 9rem; color: var(--bs-body-color); }
.rich-text-editor .ql-editor.ql-blank::before { color: var(--bs-secondary-color); font-style: normal; }
.rich-text-editor .ql-snow .ql-stroke { stroke: var(--bs-body-color); }
.rich-text-editor .ql-snow .ql-fill, .rich-text-editor .ql-snow .ql-stroke.ql-fill { fill: var(--bs-body-color); }
.rich-text-editor .ql-snow .ql-picker { color: var(--bs-body-color); }
.rich-text-editor .ql-snow .ql-picker-options { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color) !important; }
.rich-text-editor .ql-snow.ql-toolbar button:hover .ql-stroke, .rich-text-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.rich-text-editor .ql-snow .ql-picker-label:hover .ql-stroke, .rich-text-editor .ql-snow .ql-picker-label.ql-active .ql-stroke { stroke: var(--bs-primary); }
.rich-text-editor .ql-snow.ql-toolbar button:hover .ql-fill, .rich-text-editor .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--bs-primary); }
.rich-text-editor .ql-snow.ql-toolbar button:hover, .rich-text-editor .ql-snow.ql-toolbar button.ql-active,
.rich-text-editor .ql-snow .ql-picker-label:hover, .rich-text-editor .ql-snow .ql-picker-label.ql-active, .rich-text-editor .ql-snow .ql-picker-item:hover,
.rich-text-editor .ql-snow .ql-picker-item.ql-selected { color: var(--bs-primary); }
.rich-text-editor .ql-snow .ql-tooltip { background: var(--bs-tertiary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); box-shadow: none; z-index: 10; }
.rich-text-editor .ql-snow .ql-tooltip input[type=text] { background: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }
.rich-text-editor .ql-snow .ql-editor pre.ql-syntax { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.rich-text-editor .ql-snow .ql-editor code { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.rich-text-editor .ql-snow .ql-editor blockquote { border-left-color: var(--bs-primary); }
.rich-text-editor.is-invalid .ql-container, .rich-text-editor.is-invalid .ql-toolbar { border-color: var(--bs-danger); }

/* Tables */
.table-block .table { --bs-table-bg: transparent; }
.table-block th { white-space: nowrap; }
.table-block th, .table-block td { padding: .4rem 1rem; }
.table-editor { min-width: 100%; }
.table-editor input { min-width: 8rem; background: transparent; }
.table-editor-header input { font-weight: 600; background: var(--bs-tertiary-bg); }