/* Dalton Archive — main styles */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
}

main {
  flex: 1;
}

/* Clickable list rows / cards — see public/js/admin-tables.js */
[data-href] {
  cursor: pointer;
}

/* Item cards */
.item-card {
  transition: box-shadow 0.15s ease;
}
.item-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.item-card .stretched-link::after {
  z-index: 1;
}

/* Transcript sync */
.cue-block {
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-left: 3px solid transparent;
}
.cue-block:hover {
  background-color: #e9ecef;
}
.cue-block.active-cue {
  background-color: #fff3cd;
  border-left-color: #ffc107;
}

/* Search highlight */
mark {
  background-color: #fff3cd;
  padding: 0 1px;
  border-radius: 2px;
}

.snippet {
  max-height: 3em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Article body */
.article-body {
  font-size: 1.05rem;
  line-height: 1.75;
}
.article-body img {
  max-width: 100%;
  max-height: 100vh;
  width: auto;
  height: auto;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 4px;
  display: block;
}
.article-body h1,
.article-body h2,
.article-body h3 {
  margin-top: 1.5em;
}
.article-body blockquote {
  border-left: 4px solid #dee2e6;
  padding-left: 1rem;
  color: #6c757d;
  font-style: italic;
}

/* Transcript panel */
.transcript-panel {
  font-size: 0.9rem;
}

/* Audio/video player */
audio, video {
  background: #000;
}
audio {
  background: transparent;
}

/* ---------------------------------------------------------------------------
   Section wireframes (views/admin/pages/_section-thumb.ejs)
   Schematic preview of a CMS page-section type, drawn with plain blocks so the
   "Sectie toevoegen" picker shows what a section looks like before it's added.
--------------------------------------------------------------------------- */
.sec-thumb {
  --sec-ink: #adb5bd;
  --sec-fill: #6c8ebf;
  --sec-accent: #0d6efd;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}
.sec-thumb-xs {
  width: 34px;
  height: 24px;
  aspect-ratio: auto;
  padding: 3px;
  gap: 2px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.sec-thumb .sec-row { display: flex; flex: 1; gap: 6px; min-height: 0; }
.sec-thumb .sec-stack { display: flex; flex-direction: column; flex: 1; gap: 5px; min-height: 0; }
.sec-thumb .sec-gap { gap: 4px; }
.sec-thumb .sec-gap-sm { gap: 3px; }
.sec-thumb .sec-center { align-items: center; justify-content: center; }
.sec-thumb .sec-center-v { align-items: center; }

.sec-thumb .sec-bar { height: 5px; border-radius: 2px; background: var(--sec-ink); flex: 0 0 auto; }
.sec-thumb .sec-thin { height: 3px; opacity: 0.65; }
.sec-thumb .sec-muted { opacity: 0.4; }
.sec-thumb .sec-on-fill { background: rgba(255, 255, 255, 0.85); }
.sec-thumb .sec-w-30 { width: 30%; }
.sec-thumb .sec-w-40 { width: 40%; }
.sec-thumb .sec-w-50 { width: 50%; }
.sec-thumb .sec-w-60 { width: 60%; }
.sec-thumb .sec-w-70 { width: 70%; }
.sec-thumb .sec-w-80 { width: 80%; }
.sec-thumb .sec-w-90 { width: 90%; }
.sec-thumb .sec-w-100 { width: 100%; }

.sec-thumb .sec-fill {
  background: var(--sec-fill);
  border-radius: 3px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 6px;
}
.sec-thumb .sec-h-full { justify-content: center; align-items: flex-start; }
.sec-thumb .sec-col-3 { flex: 0 0 30%; }
.sec-thumb .sec-col-4 { flex: 0 0 38%; }
.sec-thumb .sec-col-5 { flex: 0 0 46%; }
.sec-thumb .sec-col-6 { flex: 0 0 56%; }
.sec-thumb .sec-tall { padding: 4px; }
.sec-thumb .sec-cover { flex: 1; border-radius: 2px; }

.sec-thumb .sec-pill {
  width: 34%;
  height: 7px;
  border-radius: 4px;
  background: var(--sec-accent);
  flex: 0 0 auto;
}
.sec-thumb .sec-pill-inline { width: 22px; height: 9px; }
.sec-thumb .sec-input {
  flex: 1;
  height: 9px;
  border: 1px solid var(--sec-ink);
  border-radius: 3px;
  background: #fff;
}

.sec-thumb .sec-card {
  flex: 1;
  border: 1px solid #dee2e6;
  border-radius: 3px;
  padding: 5px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.sec-thumb .sec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sec-fill); flex: 0 0 auto; }
.sec-thumb .sec-dot-sm { width: 6px; height: 6px; }
.sec-thumb .sec-list-row { display: flex; align-items: center; gap: 5px; }

.sec-thumb .sec-quote { border-left: 3px solid var(--sec-fill); padding-left: 7px; align-items: flex-start; }

.sec-thumb .sec-cta {
  flex: 1;
  background: var(--sec-fill);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px;
}

.sec-thumb .sec-play { position: relative; }
.sec-thumb .sec-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}

.sec-thumb .sec-map { background: #cfe3d4; position: relative; }
.sec-thumb .sec-pin { position: absolute; top: 30%; left: 35%; width: 7px; height: 7px; border-radius: 50%; background: #c0392b; }
.sec-thumb .sec-pin-2 { top: 58%; left: 62%; }

.sec-thumb .sec-banner { flex: 1; height: 14px; border-radius: 2px; background: var(--sec-ink); opacity: 0.75; }
.sec-thumb .sec-banner-wide { height: 11px; width: 100%; flex: 0 0 auto; }

.sec-thumb .sec-timeline { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: space-around; }
.sec-thumb .sec-tl-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--sec-ink); }
.sec-thumb .sec-tl-row { display: flex; align-items: center; gap: 4px; width: 50%; justify-content: flex-end; }
.sec-thumb .sec-tl-right { margin-left: auto; justify-content: flex-start; }
.sec-thumb .sec-tl-box { height: 8px; width: 70%; border-radius: 2px; background: var(--sec-ink); opacity: 0.6; }
.sec-thumb .sec-tl-node { width: 5px; height: 5px; border-radius: 50%; background: var(--sec-fill); flex: 0 0 auto; }

/* Section picker cards */
.sec-pick-card {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 8px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.sec-pick-card:hover,
.sec-pick-card:focus-visible {
  border-color: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

/* ── CMS-assistent (AI) floating widget ──────────────────────────────────────
   Back-office counterpart of the public .dalton-bot widget in public.css.
   Separate rules because the admin layout only loads main.css. */
.cms-bot {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1050;
}
.cms-bot-launcher {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: var(--bs-primary, #0d6efd);
  color: #fff;
  font-size: 1.35rem;
  box-shadow: 0 6px 20px rgba(13, 47, 90, 0.28);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cms-bot-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(13, 47, 90, 0.36);
}
.cms-bot.open .cms-bot-launcher { display: none; }

.cms-bot-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(420px, calc(100vw - 2rem));
  max-height: min(620px, calc(100vh - 3rem));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(13, 47, 90, 0.3);
  overflow: hidden;
}
.cms-bot-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  background: #212529;
  color: #fff;
}
.cms-bot-header-icon { font-size: 1.2rem; }
.cms-bot-header-text { display: flex; flex-direction: column; line-height: 1.2; flex: 1 1 auto; }
.cms-bot-header-text strong { font-size: 0.95rem; }
.cms-bot-header-text span { font-size: 0.72rem; opacity: 0.75; }
.cms-bot-icon-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.25rem 0.35rem;
  opacity: 0.8;
}
.cms-bot-icon-btn:hover { opacity: 1; }

.cms-bot-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.9rem;
  font-size: 0.88rem;
  background: #f8f9fa;
}
.cms-bot-intro { color: #6c757d; font-size: 0.82rem; margin: 0 0 0.5rem; }
.cms-bot-intro em { color: #495057; }

.cms-bot-msg {
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  margin-bottom: 0.5rem;
  max-width: 88%;
  word-wrap: break-word;
}
.cms-bot-msg-user {
  background: var(--bs-primary, #0d6efd);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 3px;
}
.cms-bot-msg-bot {
  background: #fff;
  border: 1px solid #e9ecef;
  border-bottom-left-radius: 3px;
}
.cms-bot-msg.thinking { color: #6c757d; font-style: italic; }
.cms-bot-msg.error { border-color: #f5c2c7; background: #f8d7da; color: #842029; }

.cms-bot-proposals {
  background: #fff;
  border: 1px solid #e9ecef;
  border-left: 3px solid var(--bs-primary, #0d6efd);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.5rem;
}
.cms-bot-proposals-title { font-weight: 600; font-size: 0.82rem; margin-bottom: 0.4rem; }
.cms-bot-proposal-list { margin: 0 0 0.6rem; padding-left: 1.1rem; }
.cms-bot-proposal {
  display: list-item;
  font-size: 0.83rem;
  margin-bottom: 0.3rem;
  line-height: 1.35;
}
.cms-bot-proposal i { margin-right: 0.35rem; color: #6c757d; }
.cms-bot-proposal.destructive { color: #b02a37; }
.cms-bot-proposal.destructive i { color: #b02a37; }
.cms-bot-proposal.done i { color: #198754; }
.cms-bot-proposal.failed { color: #842029; }
.cms-bot-proposal.failed i { color: #dc3545; }
.cms-bot-proposal.skipped { color: #6c757d; text-decoration: line-through; }
.cms-bot-proposal-error { display: block; color: #842029; font-size: 0.76rem; margin-top: 0.15rem; }
.cms-bot-proposal-actions { display: flex; gap: 0.4rem; }

.cms-bot-note { font-size: 0.8rem; color: #495057; margin-top: 0.4rem; }
.cms-bot-note.error { color: #842029; }

.cms-bot-form {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  padding: 0.6rem;
  border-top: 1px solid #e9ecef;
  background: #fff;
}
.cms-bot-input {
  flex: 1 1 auto;
  border: 1px solid #ced4da;
  border-radius: 20px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  line-height: 1.4;
  resize: none;
  max-height: 8.5rem;
  overflow-y: auto;
}
.cms-bot-input:focus {
  outline: none;
  border-color: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}
.cms-bot-send {
  border: none;
  background: var(--bs-primary, #0d6efd);
  color: #fff;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  cursor: pointer;
}
.cms-bot-send:disabled { opacity: 0.55; cursor: default; }
.cms-bot-disclaimer {
  margin: 0;
  padding: 0 0.7rem 0.55rem;
  font-size: 0.7rem;
  color: #6c757d;
  background: #fff;
  text-align: center;
}

/* Image slots the CMS assistant asks the editor to fill before applying */
.cms-bot-images { margin-bottom: 0.6rem; }
.cms-bot-image-slot {
  border: 1px dashed #ced4da;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.4rem;
  background: #fbfcfd;
}
.cms-bot-image-slot.done { border-style: solid; border-color: #198754; background: #f1f9f4; }
.cms-bot-image-purpose { font-size: 0.82rem; font-weight: 600; margin-bottom: 0.3rem; }
.cms-bot-image-status { font-size: 0.76rem; color: #198754; margin-top: 0.25rem; }
.cms-bot-image-status.error { color: #842029; }

/* ── CMS page-editor live preview pane (public/js/page-preview.js) ────────── */
:root { --cms-preview-w: 46vw; }

.cms-preview-dock {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1045; /* under Bootstrap modals (1055) so the media picker stays on top */
  display: flex;
  flex-direction: column;
  width: var(--cms-preview-w);
  min-width: 420px;
  height: 100vh;
  background: #f8f9fa;
  border-left: 1px solid #dee2e6;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
}
.cms-preview-dock[hidden] { display: none; }

.cms-preview-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border-bottom: 1px solid #dee2e6;
}

.cms-preview-stage {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background: #fff;
}
.cms-preview-stage iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The editor keeps the full width it has, minus the pane. */
body.cms-preview-open main.container {
  max-width: none;
  margin-right: calc(var(--cms-preview-w) + 1.5rem);
}

@media (max-width: 991.98px) {
  .cms-preview-dock { width: 100vw; min-width: 0; }
  body.cms-preview-open main.container { margin-right: 0; }
}

/* Quill (section editors, views/admin/pages/form.ejs) mounts inside a
   Bootstrap .collapse panel whose own height is auto. Its snow theme sets
   .ql-container to height:100% and .ql-editor to min-height:100% — against
   an ancestor with no definite height that resolves to nothing useful, so
   the editor's real (content) height can end up taller than the box the
   collapse measured, and it spills out past the panel's bottom edge. Pin
   both back to auto/a real min-height so the editor sizes to its own
   content instead. Two classes beats Quill's single-class selectors on
   specificity, so this wins regardless of load order. */
.ql-editor-target.ql-container {
  height: auto;
}
.ql-editor-target .ql-editor {
  height: auto;
  min-height: 100px;
}

/* Page editor: a section switched off (Page section `isHidden`) stays editable
   but reads as inactive. */
.section-item-hidden { background: #f6f7f9; }
.section-item-hidden > :first-child > .fw-semibold { color: var(--bs-secondary-color, #6c757d); }

/* Mobile search under the top bar (views/layout.ejs, below lg). 16px text
   keeps iOS Safari from zooming in on focus; type=search brings the native
   clear button and the keyboard's "Zoek" key. */
.mobile-search-field { position: relative; }
.mobile-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  pointer-events: none;
}
.mobile-search .form-control {
  font-size: 16px;
  padding: 0.5rem 0.85rem 0.5rem 2.4rem;
  border: 0;
  border-radius: 999px;
}

/* Admin archive list on a phone: only checkbox, type icon and title. Type,
   categories, tags and date stay in the grid cards and on the edit page. */
@media (max-width: 767.98px) {
  .archive-list-wide { display: none; }
  .archive-list-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .archive-list-title { word-break: break-word; }
}