:root {
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #d1d5db;
  --primary: #1d4ed8;
  --primary-hover: #1e40af;
  --success-bg: #ecfdf5;
  --success-border: #a7f3d0;
  --success-text: #065f46;
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --error-text: #991b1b;

  --pane-bg: #f9fafb;
  --subtitle-bg: #f8fafc;
  --subtitle-active: #dbeafe;
  --subtitle-active-text: #1e3a8a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-bottom: 70px;
  accent-color: #475569;
}

.page {
  max-width: 1600px;
  margin: 48px auto;
  padding: 0 20px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.15s ease;
}

.card:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

h1 {
  margin: 0 0 6px 0;
  font-size: 30px;
}

h2 {
  margin: 0 0 24px 0;
  font-size: 18px;
  color: var(--muted);
  font-weight: normal;
}

.section {
  margin-top: 22px;
}

.label {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
}

.button-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

button {
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

button.primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #64748b;
  color: white;
}

button.primary:hover:not(:disabled) {
  background: #475569;
}

button.secondary {
  background: #e5e7eb;
  color: var(--text);
}

button.secondary:hover:not(:disabled) {
  background: #d1d5db;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  background: #f9fafb;
}

.muted {
  color: var(--muted);
}

.success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
  border-radius: 10px;
  padding: 14px 16px;
}

.error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
  border-radius: 10px;
  padding: 14px 16px;
}

.hidden {
  display: none;
}

progress {
  width: 100%;
  height: 18px;
  margin-top: 10px;
}

.small {
  font-size: 14px;
}

.details-line {
  margin-top: 6px;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

th,
td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
}

th {
  background: #f9fafb;
  font-weight: 600;
}

tr:nth-child(even) {
  background: #fafafa;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0.75rem 1.2rem;

  background: rgba(30, 41, 59, 0.88);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-top: 1px solid rgba(255,255,255,0.08);

  z-index: 1000;
}

.bottom-nav .nav-item {
  color: rgba(255,255,255,0.82);

  text-decoration: none;

  padding: 0.55rem 0.95rem;

  border-radius: 10px;

  font-size: 0.95rem;
  font-weight: 500;

  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease;
}

.bottom-nav .nav-item:hover {
  background: rgba(255,255,255,0.08);
  color: white;
}

.bottom-nav .nav-item.active {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 2px 10px rgba(0,0,0,0.12);
}

.bottom-nav .nav-item:active {
  transform: scale(0.97);
}

/* Subtle deployment version (branch @ commit) shown on every screen. */
.version-badge {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.68rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  user-select: all;
}

/* The API runs an older commit than the checkout: restart pending. */
.version-badge--stale {
  color: #fbbf24;
}

/* Pages without the bottom nav (public player) pin it to a corner. */
.version-badge--floating {
  position: fixed;
  right: 0.6rem;
  bottom: 0.4rem;
  z-index: 900;
  color: var(--muted);
  opacity: 0.6;
}

/* Worker-liveness warning: appears only when the transcription worker
   has stopped checking in. Sits under the identity chip. */
.worker-warning {
  position: fixed;
  top: 3.4rem;
  right: 0.9rem;
  z-index: 1000;

  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  padding: 0.3rem 0.75rem;
  border-radius: 999px;

  background: rgba(180, 83, 9, 0.92);
  color: rgba(255, 251, 235, 0.95);

  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Identity chip, top right: who is logged in on this screen. Becomes
   the entry point of the account-details page later. */
.user-chip {
  position: fixed;
  top: 0.7rem;
  right: 0.9rem;
  z-index: 1000;

  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  padding: 0.35rem 0.8rem;
  border-radius: 999px;

  background: rgba(30, 41, 59, 0.88);
  color: rgba(255, 255, 255, 0.85);

  font-size: 0.85rem;
  font-weight: 500;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}

/* Session chips are clickable and open the account menu below. */
.user-chip--menu {
  cursor: pointer;
  user-select: none;
}

.user-chip-caret {
  font-size: 0.65em;
  opacity: 0.7;
}

.user-menu {
  position: fixed;
  top: 2.9rem;
  right: 0.9rem;
  z-index: 1001;

  min-width: 150px;
  padding: 0.3rem;

  background: rgba(30, 41, 59, 0.95);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  width: 100%;
  padding: 0.45rem 0.7rem;

  border: none;
  border-radius: 7px;
  background: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.user-menu-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.video-wrap {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 20px;
}

.video-frame {
  position: relative;
  /* Shrink-wrap the video so the frame (and its overlay fullscreen button
     and the subtitles below) stay aligned to the actual video box, even
     when the video is narrowed by the viewport-height cap below. */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* Keep the video, subtitles and controls visible together on short /
     laptop viewports: cap the height to the viewport and let the width
     follow to preserve the aspect ratio. On tall screens the .video-wrap
     max-width binds first, so this has no visible effect there — the video
     simply scales proportionally to the available vertical space. */
  max-height: calc(100vh - 400px);
  margin: 0 auto;
  border-radius: 12px;
  background: #000;
}

video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

.big-play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 1rem 1.5rem;

  border: 0;
  border-radius: 999px;

  background: rgba(15, 23, 42, 0.88);
  color: white;

  font-size: 1.1rem;
  font-weight: 600;

  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);

  z-index: 4;
}

.big-play-button:hover {
  background: rgba(15, 23, 42, 0.96);
}

/* Dual-language subtitles: the translation line sits quietly under the
   karaoke line — present, muted, never competing with the words. */
.karaoke-translation {
  margin-top: 0.35rem;
  font-size: 0.85em;
  color: var(--muted);
  text-align: center;
  min-height: 1.2em;
}

/* Word-level subtitle UI */

.controls {
  display: flex;
  /* Keep the control bar on a single line: its height is then constant, so
     the video height-cap below can reliably leave room for it at every
     viewport size. If the bar is wider than the window it scrolls
     horizontally rather than wrapping to extra rows (which would change its
     height and push controls off-screen in a mid-height band). */
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px 12px;
  align-items: center;
  /* Centre the control groups so the compact icon bar sits balanced on wide
     viewports (issue #37). "safe" falls back to flex-start when the bar is
     narrower than its content, so the left-most controls stay reachable in the
     horizontal scroll (#14) instead of being clipped off the start. */
  justify-content: safe center;
  margin: 18px 0 22px 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--pane-bg);
}

/* Don't let items squish on the single-line bar — keep their natural size
   and let the bar scroll instead. */
.controls > * {
  flex: 0 0 auto;
}

.controls label {
  font-size: 14px;
  color: var(--text);
}

.controls .spacer {
  margin-left: 10px;
}

.controls input,
.controls select {
  height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  color: var(--text);
  font-size: 14px;
}

.controls input[type="number"] {
  width: 140px;
}

.controls input[type="text"] {
  width: 140px;
}

.controls button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #64748b;
  color: white;
}

.controls button:hover {
  background: #475569;
}

/* Icon-only control bar (issue #32). Text labels were replaced with compact
   icons whose meaning shows as the native browser tooltip (title=). The icons
   keep the playback vs editing colour grouping. */

/* A square icon button, sized to line up with the inputs/selects. */
.controls button.icon-only {
  width: 40px;
  height: 40px;
  padding: 0;
  gap: 0;
  justify-content: center;
}

/* A non-interactive icon that labels the adjacent input/select (jump, speed).
   It's a <label>, so clicking still focuses its field. */
.controls .ctrl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  cursor: default;
}

/* A checkbox toggle shown as [box] + icon (subtitles, sentence list, edit).
   The native checkbox stays visible so on/off state is still obvious. */
.controls .toggle-icon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: #334155;
}

/* The entity link wraps an icon button purely for styling. */
.controls .icon-link {
  display: inline-flex;
  text-decoration: none;
}

/* One consistent icon size across the bar. */
.controls .ctrl-icon i,
.controls .toggle-icon i,
.controls button.icon-only i {
  font-size: 16px;
  line-height: 1;
}

/* Playback vs editing control clusters (issue #24). Each cluster is a tinted
   pill, so it's visually clear which controls are for viewing and which for
   editing. The playback colours are the app's slate scheme (and match the
   public player); the editing cluster uses a distinct amber. */
.control-group {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
}

/* Playback / viewing — calm slate-blue. */
.control-group--play {
  background: #eef2f7;
  border-color: #d8e0ea;
}

/* Editing — calm neutral at rest, sitting right after the playback cluster
   (kept adjacent so nothing hides behind the bar's horizontal scroll). It
   turns amber only while editing is actually ON (.editing-active), so the
   colour communicates the live mode rather than merely "you can edit". */
.control-group--edit {
  background: #f3f4f6;
  border-color: #dfe3e8;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.control-group--edit.editing-active {
  background: #fef4e6;
  border-color: #f3d9a9;
}

.control-group--edit.editing-active label {
  color: #7c4a03;
}

.control-group--edit input[type="checkbox"] {
  accent-color: #b45309;
}

.layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 18px;
}

.pane {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--pane-bg);
  padding: 16px;
  min-height: 220px;
}

.pane.grow {
  min-height: 260px;
}

.pane-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
}

.subtitles {
  text-align: center;
  padding: 16px 0 0;
}

.karaoke-line {
  font-size: 28px;
  line-height: 1.35;
  font-weight: 600;
  color: #fff;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0 0 4px rgba(0, 0, 0, 0.75);
  word-wrap: break-word;
  max-width: 70%;
  margin: 0 auto;
  min-height: calc(3 * 1.35em);
  text-wrap: pretty;
}

.video-wrap:fullscreen,
.video-wrap.pseudo-fullscreen {
  max-width: none;
  margin: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.video-wrap.pseudo-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.video-wrap:fullscreen .video-frame,
.video-wrap.pseudo-fullscreen .video-frame {
  width: 100%;
  height: 100%;
}

.video-wrap:fullscreen video,
.video-wrap.pseudo-fullscreen video {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;   /* the non-fullscreen viewport cap must not apply here */
  object-fit: contain;
  border-radius: 0;
}

.video-wrap:fullscreen .subtitles,
.video-wrap.pseudo-fullscreen .subtitles {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 12%;
  padding: 0;
  pointer-events: none;
  z-index: 2;
}

.video-wrap:fullscreen .karaoke-line,
.video-wrap.pseudo-fullscreen .karaoke-line {
  min-height: 0;
  max-width: 80%;
  display: inline-block;
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 16px;
  border-radius: 4px;
}

.video-wrap:fullscreen .karaoke-line:empty,
.video-wrap.pseudo-fullscreen .karaoke-line:empty {
  background: transparent;
  padding: 0;
}

#fullscreenBtn {
  position: absolute;
  bottom: 50px;
  right: 8px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, background 0.15s;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
  z-index: 3;
}

#fullscreenBtn:hover {
  background: rgba(0, 0, 0, 0.35);
}

#fullscreenBtn svg {
  display: block;
  pointer-events: none;
  width: 60%;
  height: 60%;
}

.video-wrap:fullscreen #fullscreenBtn,
.video-wrap.pseudo-fullscreen #fullscreenBtn {
  width: clamp(40px, 4.5vh, 64px);
  height: clamp(40px, 4.5vh, 64px);
  bottom: clamp(60px, 7vh, 90px);
  right: clamp(8px, 1.2vh, 18px);
}

.video-frame:hover #fullscreenBtn,
.video-frame:focus-within #fullscreenBtn,
.video-wrap:fullscreen #fullscreenBtn,
.video-wrap.pseudo-fullscreen #fullscreenBtn {
  opacity: 1;
  pointer-events: auto;
}

.word {
  cursor: pointer;
  padding: 0 2px;
  border-radius: 4px;
  pointer-events: auto;
  transition: color 0.12s ease, text-shadow 0.12s ease;
}

.word:hover {
  color: #fde68a;
}

.word.active {
  color: #fde047;
}

/* In-context word editing: edit mode is toggled on the subtitles
   container; words become text-editable affordances. */
.subtitles.editing .word {
  cursor: text;
}

.subtitles.editing .word:hover {
  color: inherit;
  background: rgba(253, 224, 71, 0.18);
  outline: 1px dashed rgba(253, 224, 71, 0.65);
}

.word-edit-input {
  font: inherit;
  color: #111827;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
}

/* Floating editor anchored under the double-clicked word. */
.word-edit-pop {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 170px;
  padding: 8px;
  background: #ffffff;
  color: #111827;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* Read-only timestamps — visible so the editor can trust nothing drifts,
   but not hand-editable (merge/split recompute them server-side). */
.word-edit-times {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.word-edit-actions {
  display: flex;
  gap: 6px;
}

.word-edit-actions button {
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
}

.word-edit-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sentence-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sentence-item {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.sentence-item:hover {
  background: #f3f4f6;
}

.sentence-item.active-item {
  background: #dbeafe;
  border-color: #93c5fd;
}

@media (max-width: 1100px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .pane {
    min-height: 0;
  }

  .sentence-list {
    max-height: 260px;
  }
}

@media (max-width: 700px) {
  .page {
    margin: 24px auto;
    padding: 0 12px;
  }

  .card {
    padding: 18px;
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 16px;
    margin-bottom: 18px;
  }

  .controls {
    flex-direction: column;
    align-items: stretch;
  }

  /* Stacked bar on mobile: let each cluster wrap its own controls. */
  .control-group {
    flex-wrap: wrap;
  }

  .controls .spacer {
    margin-left: 0;
  }

  .controls input,
  .controls select {
    width: 100%;
  }

  .karaoke-line {
    font-size: 22px;
  }
}

/* Laptop / mid-height viewports: soften the spacing (smaller margins, a
   two-line subtitle reserve instead of three) so the height-capped video can
   stay reasonably large. The video reserve itself is left at the base value,
   so the cap is continuous — with the single-line control bar above, the
   controls never drop off the bottom in a mid-height band. */
@media (max-height: 1200px) {
  .page {
    margin: 20px auto;
  }

  .card {
    padding: 20px;
  }

  .karaoke-line {
    min-height: calc(2 * 1.35em);
  }
}

/* Short viewports: tighten headings and subtitle for comfort. The single-line
   control bar already keeps the controls visible; this just reclaims space. */
@media (max-height: 700px) {
  .page {
    margin: 8px auto;
  }

  .card {
    padding: 14px;
  }

  h1 {
    font-size: 22px;
    margin-bottom: 2px;
  }

  h2 {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .karaoke-line {
    font-size: 22px;
  }

  .subtitles {
    padding-top: 8px;
  }
}

#sentencePane {
  display: none;
}

.page-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.action-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: nowrap;
}

.cell-nowrap {
  white-space: nowrap;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;
  padding: 0;

  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  color: #475569;

  font-size: 15px;
  line-height: 1;
  text-decoration: none;

  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

.icon-button:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #1e293b;
  text-decoration: none;
}

.icon-button:active {
  transform: scale(0.97);
}

.icon-button.delete-video-button:hover {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

.visibility-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.visibility-icon {
  color: #475569;
  font-size: 15px;
  width: 18px;
  text-align: center;
}

.status-icon {
  font-size: 18px;
  width: 22px;
  text-align: center;
  display: inline-block;
}

.status-icon--ready {
  color: hsl(142, 35%, 58%);
}

.status-icon--error {
  color: #dc2626;
}

.status-icon--progress {
  color: #d97706;
}

.status-icon--pending {
  color: #475569;
}

.sync-badge {
  margin-left: 2px;
  font-size: 14px;
}

/* Sync-state colours for the player edit-mode badge. The table view
   uses .sync-badge with its own inline icons, so these modifier classes
   only affect the player. */
.sync-badge.sync-local   { color: #b45309; }
.sync-badge.sync-syncing { color: #2563eb; }
.sync-badge.sync-synced  { color: #16a34a; }
.sync-badge.sync-failed  { color: #dc2626; }

/* Soft-lock banner: shown when the video is being edited by someone else,
   or when the current editor has been taken over. Offers "Overnemen". */
.edit-lock-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  padding: 8px 12px;
  font-size: 14px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
}

.edit-lock-banner .lock-takeover {
  margin-left: auto;
  font-size: 13px;
  padding: 4px 10px;
  cursor: pointer;
}

/* ---------------------------------------------------------------
   Documentation / blog pages: roadmap.html, techniek.html, etc.
   Everything here is scoped under body.doc-page
   so the app pages (upload, table, player) are not affected.
   --------------------------------------------------------------- */

.doc-page h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 1rem;
}

.doc-page h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.5rem;
}

/* Each dated entry (and the roadmap) is its own inset panel. */
.doc-page .doc-panel {
  background: var(--pane-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 1.25rem;
}

/* Bigger gap between the roadmap panel and the changelog below it. */
.doc-page .doc-panel--roadmap {
  margin-bottom: 2.5rem;
}

/* Memo doc page: numbered, clearly separated sections so the
   structure reads at a glance without relying on icons. */
.doc-page .memo {
  counter-reset: memo-section;
}

.doc-page .memo .doc-panel {
  counter-increment: memo-section;
}

.doc-page .memo .doc-panel > h3 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1.2rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.doc-page .memo .doc-panel > h3::before {
  content: counter(memo-section);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: #475569;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

/* Sub-heading within a memo panel (e.g. cost structure). */
.doc-page .memo .doc-panel h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 1.25rem 0 0.5rem;
}

/* Panel title — date header or roadmap header. */
.doc-page .log-date {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.75rem;
}

.doc-page .log-date i {
  color: #475569;
  margin-right: 8px;
}

/* Collapsible roadmap header. */
.doc-page summary.log-date {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
}

.doc-page summary.log-date::-webkit-details-marker {
  display: none;
}

/* "click to open / close" hint, right next to the summary title. */
.doc-page summary.log-date .log-hint {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
}

.doc-page summary.log-date .log-hint::before {
  content: "(klik om te openen)";
}

.doc-page details[open] > summary.log-date .log-hint::before {
  content: "(klik om te sluiten)";
}

.doc-page summary.log-date::after {
  content: "▸";
  margin-left: auto;
  color: #475569;
  transition: transform 0.15s ease;
}

.doc-page details[open] > summary.log-date {
  margin-bottom: 0.75rem;
}

.doc-page details[open] > summary.log-date::after {
  transform: rotate(90deg);
}

.filter-row th {
  background: #f9fafb;
  padding: 6px 8px;
  font-weight: normal;
}

.filter-row input,
.filter-row select {
  width: 100%;
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  color: var(--text);
}

/* Multi-select filter (visibility): a details-dropdown of checkboxes,
   so combinations like "Gedeeld + Publiek" (= non-private) are one
   tick away. The panel is absolutely positioned: opening it must not
   shift the pinned column widths. */
.filter-row details.filter-multi {
  position: relative;
}

.filter-row details.filter-multi > summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-row details.filter-multi > summary::-webkit-details-marker {
  display: none;
}

.filter-multi-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  min-width: 130px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.filter-multi-panel label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.filter-multi-panel input {
  width: auto;
}

.toast-container {
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 240px;
  max-width: 400px;
  padding: 12px 16px;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toast-slide-in 0.25s ease-out;
}

.toast span {
  white-space: pre-line;
}

.filename-cell-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.filename-edit-slot {
  width: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filename-display {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-button-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  color: #94a3b8;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}

tr:hover .icon-button-inline,
.icon-button-inline:focus-visible {
  opacity: 1;
}

.icon-button-inline:hover {
  background: #f3f4f6;
  color: #475569;
}

.rename-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #475569;
  border-radius: 6px;
  background: white;
  color: var(--text);
}

.rename-input:focus {
  outline: none;
  border-color: #1e293b;
  box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.2);
}

.toast i {
  font-size: 16px;
  flex-shrink: 0;
}

.toast--success {
  background: #475569;
}

.toast--error {
  background: var(--error-text);
}

.toast--leaving {
  animation: toast-slide-out 0.25s ease-in forwards;
}

@keyframes toast-slide-in {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@keyframes toast-slide-out {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(110%); opacity: 0; }
}
/* ---------------------------------------------------------------
   Entity-verification page (entities.html). Each entity type gets a
   color (set inline as --entity-color / --chip-color); everything
   here keys off those variables. */

.entity-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 36px 0;
  color: var(--muted);
  font-size: 15px;
}

.entity-error {
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
  border-radius: 8px;
}

/* Summary strip */
.entity-stats {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 0 18px;
}

.entity-stat-num {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.entity-stat-label {
  font-size: 13px;
  color: var(--muted);
}

.entity-stat-meta {
  margin-left: auto;
  text-align: right;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

/* Timeline strip: one tick per occurrence, positioned by timestamp */
.entity-timeline-wrap {
  margin: 4px 0 18px;
}

.entity-timeline-label {
  font-size: 12px;
  margin-bottom: 6px;
}

.entity-timeline {
  position: relative;
  height: 34px;
  background: var(--pane-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.entity-tick {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  opacity: 0.85;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.entity-tick:hover {
  transform: scaleX(2.2);
  opacity: 1;
}

/* While a card is hovered, its ticks pop and the rest fade out */
.entity-timeline.focused .entity-tick { opacity: 0.15; }
.entity-timeline.focused .entity-tick.hot {
  opacity: 1;
  transform: scaleX(2.2);
}

.entity-timeline-times {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* Filter chips + search */
.entity-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.entity-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.entity-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}

.entity-chip-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--chip-color);
  opacity: 0.35;
}

.entity-chip.on {
  border-color: var(--chip-color);
  color: var(--text);
  background: color-mix(in srgb, var(--chip-color) 8%, #fff);
}

.entity-chip.on .entity-chip-dot { opacity: 1; }

.entity-search {
  margin-left: auto;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  min-width: 220px;
}

/* Entity cards */
.entity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.entity-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--entity-color);
  border-radius: 10px;
  padding: 12px 16px;
  background: #fff;
  transition: box-shadow 0.12s ease;
}

.entity-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

.entity-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.entity-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--entity-color);
  padding: 3px 8px;
  border-radius: 5px;
}

.entity-name {
  font-size: 17px;
  font-weight: 600;
}

.entity-count {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.entity-status {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
}

.entity-status.pending {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
}

.entity-status.done {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
}

.entity-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.entity-correct-input {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 14px;
  width: 200px;
}

.entity-verify-btn {
  font-size: 13px;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}

/* Occurrences with context snippets */
.entity-occurrences {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.entity-occurrence {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 14px;
  text-decoration: none;
  color: var(--text);
  padding: 3px 8px;
  border-radius: 6px;
}

.entity-occurrence:hover {
  background: var(--pane-bg);
}

.entity-occurrence.overflow {
  display: none;
}

.entity-occurrences.expanded .entity-occurrence.overflow {
  display: flex;
}

.entity-occ-time {
  flex: none;
  font-size: 12px;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  width: 64px;
}

.entity-occ-time i {
  font-size: 10px;
  margin-right: 2px;
}

.entity-occ-snippet {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-occ-snippet mark {
  background: color-mix(in srgb, var(--entity-color) 14%, #fff);
  color: var(--text);
  font-weight: 600;
  padding: 1px 3px;
  border-radius: 3px;
  box-shadow: inset 0 -2px 0 var(--entity-color);
}

.entity-more {
  align-self: flex-start;
  font-size: 12px;
  padding: 4px 8px;
  margin: 2px 0 0 8px;
  cursor: pointer;
}

.entity-empty {
  padding: 28px 0;
  text-align: center;
}

/* Sticky apply bar, floats above the bottom nav */
.entity-apply-bar {
  position: fixed;
  bottom: 78px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: #1f2937;
  color: #fff;
  padding: 10px 18px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  z-index: 900;
  font-size: 14px;
}

.entity-apply-bar button {
  font-size: 13px;
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 7px;
  border: 1px solid #4b5563;
  background: transparent;
  color: #e5e7eb;
}

.entity-apply-bar button.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.entity-apply-bar button.primary:hover {
  background: var(--primary-hover);
}

.entity-apply-bar button:disabled {
  opacity: 0.6;
  cursor: wait;
}