@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");
@font-face { font-family: "Titillium Web"; src: url("/fonts/titillium-web/TitilliumWeb-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("/fonts/titillium-web/TitilliumWeb-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("/fonts/titillium-web/TitilliumWeb-Bold.ttf") format("truetype"); font-weight: 700 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("/fonts/titillium-web/TitilliumWeb-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --brand-blue: #5341A5;
  --brand-blue-dark: #14094D;
  --brand-blue-light: #EDE6FD;
  --brand-lavender: #BDA6F4;
  --brand-cloud: #EDE6FD;
  --brand-indigo: #14094D;
  --brand-violet: #5341A5;
  --brand-light: #F2F4F7;
  --brand-gray-light: #DBE1E8;
  --brand-gray: #767A8C;
  --brand-gray-dark: #4B5666;
  --brand-dark: #131415;
  --ink: var(--brand-dark);
  --muted: var(--brand-gray);
  --line: var(--brand-gray-light);
  --paper: var(--brand-light);
  --panel: #ffffff;
  --purple: var(--brand-blue);
  --text-accent: var(--brand-blue);
  --green: #2d6b55;
  --amber: #b46b2a;
  --blue: var(--brand-blue-dark);
  --shadow: 0 18px 46px rgba(19, 20, 21, 0.12);
  font-family: "Poppins", Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

button,
select,
a {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

.sidebar {
  background: #111827;
  color: #f5f7fb;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brand-block {
  display: flex;
  gap: 12px;
  align-items: center;
}

.brand-block strong,
.brand-block span {
  display: block;
}

.brand-block span {
  color: #b9c2d0;
  font-size: 13px;
  margin-top: 2px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-weight: 800;
  border-radius: 8px;
  overflow: hidden;
}

.brand-mark img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  object-position: center center;
  display: block;
  margin: auto;
}

.document-list {
  display: grid;
  gap: 8px;
  align-content: start;
  overflow: auto;
}

.nav-button {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  font-weight: 800;
  cursor: pointer;
}

.nav-button.active {
  background: var(--purple);
  color: #ffffff;
}

.trash-nav {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.trash-nav strong {
  min-width: 24px;
  min-height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 12px;
}

.trash-nav.has-items {
  border-color: rgba(255, 255, 255, 0.2);
}

.trash-nav.has-items strong {
  background: #9d2f28;
}

.document-list button {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
}

.document-list button.active {
  background: #f5f7fb;
  color: var(--ink);
}

.document-list span,
.document-list small {
  display: block;
}

.document-list small {
  color: #8d98a8;
  margin-top: 4px;
}

.document-list button.active small {
  color: var(--muted);
}

.sidebar-section {
  display: grid;
  gap: 8px;
}

.sidebar-section + .sidebar-section {
  margin-top: 8px;
}

.sidebar-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
  color: #c7d1df;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sidebar-section-heading strong {
  min-width: 22px;
  min-height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #dfe8f4;
  font-size: 11px;
  letter-spacing: 0;
}

.sidebar-folder-list,
.sidebar-recent-list {
  display: grid;
  gap: 7px;
}

.document-list .sidebar-folder-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 8px 10px;
}

.sidebar-folder-main {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sidebar-folder-main i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--category-color, var(--purple));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--category-color, var(--purple)) 22%, transparent);
}

.sidebar-folder-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-list .sidebar-folder-button strong {
  min-width: 24px;
  min-height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  font-size: 12px;
}

.document-list .sidebar-folder-button.active {
  border-color: color-mix(in srgb, var(--category-color, var(--purple)) 48%, #ffffff);
  background: #f5f7fb;
  color: var(--ink);
}

.document-list .sidebar-folder-button.active strong {
  background: color-mix(in srgb, var(--category-color, var(--purple)) 14%, #ffffff);
  color: #141415;
}

.document-list .sidebar-document-button {
  padding: 10px;
}

.document-list .sidebar-document-button small,
.document-list .sidebar-document-button.active small {
  color: #c7d1df;
}

.sidebar-empty {
  margin: 0;
  padding: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #9ba8ba;
  font-size: 12px;
}

.workspace {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.topbar {
  min-height: 90px;
  padding: 18px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--green);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.topbar h1 {
  margin-bottom: 0;
  font-size: 26px;
  line-height: 1.15;
}

.topbar-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.save-status {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.save-status.is-dirty {
  color: #9a5b00;
}

.save-status.is-saved {
  color: var(--muted);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.editor-presence {
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  padding: 5px 10px;
  border: 1px solid #f0d59c;
  border-radius: 999px;
  background: #fff8e7;
  color: #8a5b0a;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-presence[hidden] {
  display: none !important;
}

.editor-back-action {
  white-space: nowrap;
}

.create-category-selection {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
  align-items: end;
  gap: 12px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbff;
}

.create-category-selection [hidden] {
  display: none !important;
}

.create-category-selection .category-color-picker {
  grid-column: 1 / -1;
}

.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #eef1f6;
}

.segmented button {
  min-width: 48px;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 9px 12px;
  cursor: pointer;
  font-weight: 700;
}

.segmented button.active {
  background: var(--purple);
  color: #ffffff;
}

.history-actions button {
  min-width: 34px;
}

.history-actions button:disabled {
  opacity: 0.38;
  cursor: default;
}

.select-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.select-label select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
  color: var(--ink);
}

.open-preview {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #111827;
  color: #ffffff;
  text-decoration: none;
  padding: 0 14px;
  font-weight: 700;
}

.primary-action,
.secondary-action,
.danger-action,
.row-actions button,
.row-actions a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.primary-action {
  background: var(--purple);
  color: #ffffff;
}

.secondary-action {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--line);
}

.primary-action:disabled,
.secondary-action:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.danger-action {
  background: #ffffff;
  color: #9d2f28;
  border-color: #efc8c2;
}

.danger-action.solid {
  background: #9d2f28;
  color: #ffffff;
  border-color: #9d2f28;
}

.view {
  display: none;
  min-height: 0;
  padding: 18px;
}

.view.is-active {
  display: block;
}

.overview-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.category-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.category-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.category-chip {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  overflow: hidden;
}

.category-filter-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  padding: 0 12px;
}

.category-filter-button::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--category-color, #5341A5);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--category-color, #5341A5) 18%, transparent);
}

.category-chip.active {
  border-color: color-mix(in srgb, var(--category-color, #5341A5) 45%, #ffffff);
  background: color-mix(in srgb, var(--category-color, #5341A5) 12%, #ffffff);
  color: var(--category-color, #5341A5);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--category-color, #5341A5) 14%, transparent);
}

.category-chip.active .category-filter-button {
  color: var(--ink);
}

.category-filter-list strong {
  min-width: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--category-color, #5341A5) 12%, #ffffff);
  color: var(--ink);
  font-size: 12px;
}

.category-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.overview-panel-actions,
#overviewBulkActions,
.document-name-cell {
  display: flex;
  align-items: center;
}

.overview-panel-actions,
#overviewBulkActions {
  gap: 8px;
}

.document-name-cell {
  gap: 10px;
}

.document-name-cell > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.overview-delete-checkbox {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--brand-violet);
  cursor: pointer;
}

.document-table tbody tr.document-row.is-bulk-selected {
  background: var(--brand-cloud);
}

.bulk-select-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.category-active-settings {
  border-color: color-mix(in srgb, var(--category-color, #5341A5) 35%, #ffffff);
  background: color-mix(in srgb, var(--category-color, #5341A5) 10%, #ffffff);
  color: #000000 !important;
}

.category-active-settings::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 999px;
  background: var(--category-color, #5341A5);
}

.overview-summary-card {
  appearance: none;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  color: var(--ink);
  cursor: pointer;
}

.overview-summary-card:hover {
  border-color: color-mix(in srgb, var(--purple) 30%, var(--line));
  background: #fbfdff;
}

.overview-summary-card.active {
  border-color: color-mix(in srgb, var(--purple) 48%, #ffffff);
  background: color-mix(in srgb, var(--purple) 9%, #ffffff);
  box-shadow: 0 12px 28px rgba(83, 65, 165, 0.14);
}

.overview-summary strong,
.overview-summary span {
  display: block;
}

.overview-summary strong {
  font-size: 28px;
}

.overview-summary span {
  color: var(--muted);
  margin-top: 2px;
}

.overview-summary-card.active span {
  color: var(--text-accent);
  font-weight: 800;
}

.table-wrap {
  overflow: auto;
}

.document-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1080px;
}

.document-table th,
.document-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
}

.document-table th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.document-table td strong,
.document-table td small {
  display: block;
}

.document-table td small {
  color: var(--muted);
  margin-top: 3px;
}

.document-table tbody tr:hover {
  background: #fbfcff;
}

.document-table tbody tr.document-row {
  cursor: pointer;
}

.document-table tbody tr.document-row:focus-visible {
  outline: 3px solid rgba(83, 65, 165, 0.28);
  outline-offset: -3px;
}

.document-note-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.document-note-indicator:hover {
  border-color: color-mix(in srgb, var(--brand-violet) 42%, var(--line));
  background: var(--brand-cloud);
}

.document-note-indicator > span {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #edf0f4;
  font-size: 11px;
  font-weight: 850;
}

.document-note-indicator > small {
  display: inline;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.document-note-indicator > i {
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--brand-violet);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-violet) 15%, transparent);
}

.document-note-indicator > strong {
  display: inline;
  color: var(--brand-violet);
  font-size: 10px;
  font-weight: 850;
}

.document-note-indicator.has-unread {
  border-color: color-mix(in srgb, var(--brand-violet) 34%, var(--line));
  background: color-mix(in srgb, var(--brand-violet) 6%, #ffffff);
}

.document-note-indicator.is-empty {
  opacity: 0.62;
}

.row-actions {
  text-align: right;
  white-space: nowrap;
}

.row-action-group {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.row-actions button,
.row-actions a {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--line);
  min-height: 34px;
}

.row-actions .danger-action {
  color: #9d2f28;
  border-color: #efc8c2;
}

.row-settings-trigger {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
}

.floating-actions-menu {
  position: fixed;
  z-index: 60;
  width: 166px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 20px 58px rgba(24, 32, 42, 0.22);
  display: grid;
  gap: 5px;
}

.floating-actions-menu button {
  min-height: 34px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #ffffff;
  color: var(--ink);
  padding: 0 10px;
  font-weight: 800;
  cursor: pointer;
}

.floating-actions-menu .danger-action {
  color: #9d2f28;
  border-color: #efc8c2;
}

.trash-table {
  min-width: 720px;
}

.trash-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.trash-delete-checkbox {
  width: 16px;
  height: 16px;
}

.empty-row {
  display: block;
  color: var(--muted);
  padding: 4px 0;
}

.content-grid {
  --editor-column-width: 980px;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(420px, var(--editor-column-width)) 18px minmax(300px, 1fr);
  gap: 8px;
  padding: 0;
}

.model-column {
  min-width: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 2px;
}

.editor-splitter {
  position: relative;
  min-height: 100%;
  border: 0;
  cursor: col-resize;
  touch-action: none;
}

.editor-splitter::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 5px;
  border-radius: 999px;
  background: #d5dbe6;
  transform: translateX(-50%);
  transition:
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.editor-splitter:hover::before,
.editor-splitter:focus-visible::before,
.content-grid.is-resizing .editor-splitter::before {
  background: var(--purple);
  box-shadow: 0 0 0 4px rgba(83, 65, 165, 0.12);
}

.content-grid.is-resizing,
.content-grid.is-resizing * {
  cursor: col-resize;
  user-select: none;
}

.content-grid.is-resizing iframe {
  pointer-events: none;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-heading h2 {
  margin: 0;
  font-size: 16px;
}

.panel-heading span {
  color: var(--muted);
  font-size: 13px;
}

.collapsible-panel-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.panel-collapse-button {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text-accent);
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
}

.panel-collapse-button:hover {
  border-color: var(--text-accent);
}

.collapsible-panel.is-collapsed {
  padding-bottom: 10px;
}

.collapsible-panel.is-collapsed > :not(.panel-heading) {
  display: none;
}

.editor-page-card {
  position: relative;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    opacity 0.16s ease;
}

.editor-page-card.is-editor-active {
  outline: 2px solid rgba(60, 142, 255, 0.72);
  outline-offset: 2px;
}

/* Bij een lang document met veel dia's kost elke wijziging (zoals een
   details-blok openklappen) een herberekening van de layout en van alle
   position:sticky-elementen in de hele pagina, ook voor dia's die niet
   in beeld zijn. content-visibility:auto laat de browser die dia's
   overslaan zolang ze buiten beeld zijn: hun interne layout wordt pas
   opnieuw berekend zodra je ernaartoe scrollt. contain-intrinsic-height
   geeft een plaatshouder-hoogte zodat de scrollbar niet springt; de
   browser onthoudt daarna de echte hoogte van elke dia (auto ...).
   Alleen de hoogte wordt zo bepaald: de breedte blijft gewoon gestuurd
   door de flex-layout van .model-column. Werkt alleen in Chromium- en
   Chrome-gebaseerde browsers en recente Safari; oudere browsers negeren
   dit gewoon en gedragen zich zoals nu. */
.editor-page-card {
  content-visibility: auto;
  contain-intrinsic-height: auto 600px;
  /* Isolate layout recalculation to this dia when a table control opens. */
  contain: layout style;
}

.editor-page-card.is-collapsed {
  padding-bottom: 10px;
}

/* Collapsing a dia should only hide its existing body. The editor no longer
   needs to rebuild every dia just because one collapse button was clicked. */
.editor-page-card.is-collapsed > :not(.editor-page-heading) {
  display: none;
}

.editor-page-heading {
  align-items: center;
}

.editor-page-title {
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.editor-page-title.is-fixed {
  grid-template-columns: auto minmax(0, 1fr);
}

.editor-page-title h2,
.editor-page-title small {
  display: block;
}

.editor-page-title h2 {
  overflow-wrap: anywhere;
}

.editor-page-title small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.page-collapse-button,
.page-drag-handle,
.page-duplicate-button,
.page-delete-button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.page-collapse-button,
.page-duplicate-button {
  color: var(--text-accent);
}

.page-drag-handle {
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}

.page-drag-handle:active {
  cursor: grabbing;
}

.page-delete-button {
  color: #9d2f28;
  border-color: #efc8c2;
}

.editor-page-card.is-dragging {
  opacity: 0.45;
}

.editor-page-card.is-drop-before::before,
.editor-page-card.is-drop-after::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 4px;
  border-radius: 999px;
  background: var(--purple);
  box-shadow: 0 0 0 4px rgba(83, 65, 165, 0.14);
  z-index: 3;
}

.editor-page-card.is-drop-before::before {
  top: -9px;
}

.editor-page-card.is-drop-after::after {
  bottom: -9px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  background: #f5eadf;
  color: var(--amber);
  border-radius: 999px;
  font-weight: 750;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  max-width: 170px;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--category-color, #5341A5) 30%, #ffffff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--category-color, #5341A5) 10%, #ffffff);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--category-color, #5341A5);
}

.category-color-picker {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: end;
  gap: 10px 12px;
}

.category-color-picker .category-color-field {
  margin: 0;
}

.category-color-field input[type="color"] {
  width: 76px;
  padding: 3px;
  cursor: pointer;
}

.category-color-grid {
  display: grid;
  grid-template-columns: repeat(10, 22px);
  gap: 5px;
  width: max-content;
  max-width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbff;
}

.category-color-swatch {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 7px;
  background: var(--swatch-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  cursor: pointer;
}

.category-color-swatch:hover {
  transform: translateY(-1px);
  border-color: rgba(83, 65, 165, 0.55);
}

.category-color-swatch.active {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.category-manager-list {
  display: grid;
  gap: 10px;
}

.category-manager-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, auto) auto;
  align-items: end;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbff;
}

.status-pill.status-published {
  background: #e8f6ef;
  color: #17623e;
}

.status-pill.status-review {
  background: #ffe9e1;
  color: #9d2f28;
}

.overview-status-select {
  width: auto;
  min-width: 94px;
  height: 28px;
  min-height: 28px;
  box-sizing: border-box;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  line-height: 1;
  outline: 0;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  appearance: none;
  text-align: center;
  text-align-last: center;
}

.overview-status-select:focus-visible {
  box-shadow: 0 0 0 3px rgba(83, 65, 165, 0.18);
}

.meta-grid {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.meta-grid div {
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.meta-grid dt {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 3px;
}

.meta-grid dd {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.page-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-tree li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.page-tree li.is-hidden {
  background: #f6f7fa;
}

.page-tree li.is-hidden strong,
.page-tree li.is-hidden small {
  opacity: 0.55;
}

.page-tree strong,
.page-tree small {
  display: block;
}

.page-tree strong {
  overflow-wrap: anywhere;
}

.page-tree small {
  color: var(--muted);
  margin-top: 3px;
}

.page-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.page-tags span {
  white-space: nowrap;
  border: 1px solid #c6d4e4;
  color: var(--blue);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
}

.page-tags .page-tag-muted {
  color: var(--muted);
  border-color: var(--line);
  background: #ffffff;
}

.page-tree-side {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.page-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.icon-action {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
}

.icon-action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-action[aria-pressed="true"] {
  color: var(--muted);
  background: #f7f8fb;
}

.danger-icon-action {
  color: #9d2f28;
  border-color: #efc8c2;
}

.model-notes {
  margin: 0;
  padding-left: 18px;
  color: #3d4653;
}

.model-notes li + li {
  margin-top: 8px;
}

.preview-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  justify-self: stretch;
  border: 1px solid var(--line);
  background: #cbd3df;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.preview-status {
  margin: 0;
  padding: 9px 14px;
  background: #f4f6fa;
  color: #465166;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}

.preview-column iframe {
  flex: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 128px);
  border: 0;
}

.editor-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
  padding-bottom: 2px;
}

.editor-tabs button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.editor-tabs button.active {
  background: var(--purple);
  color: #ffffff;
  border-color: var(--text-accent);
}

.editor-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.editor-panel[hidden] {
  display: none;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.field-hint {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.field input,
.field textarea,
.field select,
.sheet-card select,
.sheet-card input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  padding: 10px;
}

.field textarea {
  resize: vertical;
}

.color-field .color-control {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.color-field input[type="color"] {
  width: 54px;
  height: 38px;
  min-height: 38px;
  padding: 3px;
  border-radius: 999px;
  cursor: pointer;
}

.color-field input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-field input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 999px;
}

.color-field [data-color-value] {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.color-field .color-code-input {
  min-width: 0;
  width: 100%;
  min-height: 38px;
  padding: 0 8px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.01em;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.column-editors {
  display: grid;
  gap: 10px;
}

.column-editors article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.column-editor-block {
  margin-top: 10px;
  border: 1px dashed rgba(83, 65, 165, 0.18);
  border-radius: 8px;
  background: #fbfcff;
  padding: 9px;
}

.column-editor-block summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.general-table-editors {
  display: grid;
  gap: 12px;
}

.general-info-editor {
  margin-top: 0;
}

.general-info-editor > .field {
  margin-top: 10px;
}

.product-editor {
  border-left: 4px solid var(--purple);
}

.scoped-image-editor {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
  padding: 12px;
  margin: 4px 0 12px;
}

.scoped-image-current {
  width: 100%;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  color: inherit;
}

.scoped-image-current:hover .asset-thumb,
.scoped-image-current:focus-visible .asset-thumb {
  border-color: var(--text-accent);
  box-shadow: 0 0 0 3px rgba(83, 65, 165, 0.12);
}

.scoped-image-current .asset-thumb {
  flex: 0 0 76px;
  width: 76px;
}

.scoped-image-current strong,
.scoped-image-current small {
  display: block;
}

.scoped-image-current strong {
  overflow-wrap: anywhere;
}

.scoped-image-current small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.scoped-image-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.scoped-image-fields .field:first-child {
  grid-column: 1 / -1;
}

.scoped-image-fields button {
  min-height: 40px;
  justify-content: center;
}

.scoped-image-fields .import-status {
  margin: 0;
}

.empty-editor-note {
  margin: 0;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  background: #fbfcff;
}

.table-editor {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
}

.table-editor summary {
  cursor: pointer;
  font-weight: 850;
  color: var(--text-accent);
}

.table-meta-editor {
  margin-top: 10px;
  border: 1px solid rgba(83, 65, 165, 0.12);
  border-radius: 8px;
  background: #fbfcff;
  padding: 10px;
}

.table-meta-editor .field-grid {
  margin-bottom: 10px;
}

.table-pill-editor {
  display: grid;
  gap: 8px;
}

.table-editor-subhead,
.table-pill-row {
  display: grid;
  align-items: end;
  gap: 8px;
}

.table-editor-subhead {
  grid-template-columns: 1fr auto;
}

.table-editor-subhead strong {
  color: var(--ink);
  font-size: 13px;
}

.table-pill-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.table-pill-row .icon-action {
  width: 40px;
  height: 40px;
}

.compact-actions {
  align-items: center;
  flex-wrap: wrap;
}

.staffel-group-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.staffel-group-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfcff;
}

.staffel-group-card small {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.staffel-group-card .manual-table-actions {
  grid-column: 1 / -1;
}

.staffel-subcolumn-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.staffel-subcolumn-card {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(83, 65, 165, 0.14);
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
}

.staffel-subcolumn-card .field span {
  font-size: 11px;
}

.staffel-values-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 54px repeat(var(--staffel-value-columns, 2), minmax(92px, 1fr));
  gap: 6px;
  align-items: center;
  margin-top: 2px;
  border-top: 1px solid rgba(30, 37, 48, 0.1);
  padding-top: 10px;
}

.staffel-values-grid > strong {
  color: var(--text-accent);
  font-size: 12px;
  line-height: 1.2;
}

.staffel-values-grid > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.staffel-values-grid .field span {
  display: none;
}

.staffel-values-grid input {
  width: 100%;
  min-width: 0;
  padding: 7px;
}

.mini-edit-table caption {
  caption-side: top;
  padding: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-align: left;
}

.row-index-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.mini-table-wrap {
  overflow: auto;
  margin-top: 10px;
}

.mini-edit-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
}

.mini-edit-table th,
.mini-edit-table td {
  border: 1px solid var(--line);
  padding: 6px;
  text-align: left;
}

.mini-edit-table th {
  background: #EDE6FD;
  color: var(--text-accent);
  font-size: 12px;
}

.mini-edit-table th small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.15;
}

.mini-edit-table th.is-grouped-column {
  background: #f1f7ff;
}

.column-group-badge {
  display: block;
  width: 100%;
  margin-bottom: 6px;
  border: 1px solid rgba(83, 65, 165, 0.22);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text-accent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  padding: 5px 6px;
  text-align: center;
}

.mini-header-input {
  width: 100%;
  min-width: 86px;
  border: 1px solid rgba(83, 65, 165, 0.18);
  border-radius: 7px;
  background: #ffffff;
  color: var(--text-accent);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  padding: 7px 8px;
}

.mini-edit-table .field span {
  display: none;
}

.mini-edit-table input {
  min-width: 0;
  padding: 7px;
}

.import-drop {
  border: 1px dashed #b9c2d0;
  border-radius: 8px;
  padding: 14px;
  background: #fbfcff;
}

.import-drop p {
  margin: 10px 0 0;
  color: var(--muted);
}

.import-tools {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.import-tools .import-status {
  margin-top: 0;
}

.import-status {
  margin-top: 10px;
  color: var(--green);
  font-weight: 750;
}

.sheet-list {
  display: grid;
  gap: 12px;
}

.sheet-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.sheet-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  gap: 12px;
  align-items: start;
  margin-bottom: 10px;
}

.sheet-card-controls {
  display: grid;
  gap: 8px;
}

.sheet-card-controls label,
.asset-create-grid label {
  display: grid;
  gap: 5px;
}

.sheet-card-controls span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.sheet-card strong,
.sheet-card small {
  display: block;
}

.sheet-card small {
  color: var(--muted);
  margin-top: 3px;
}

.sheet-preview {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.sheet-preview table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 12px;
}

.sheet-preview td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 6px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-analysis {
  margin-top: 10px;
  border: 1px solid rgba(83, 65, 165, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: #f7fbff;
  display: grid;
  gap: 10px;
}

.analysis-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.analysis-head strong,
.analysis-head span {
  display: block;
}

.analysis-head span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.confidence-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 900;
}

.confidence-high {
  background: #e8f6ef;
  color: #17623e;
}

.confidence-medium {
  background: #fff4d6;
  color: #775510;
}

.confidence-low {
  background: #ffe9e1;
  color: #8b3521;
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.analysis-grid > div {
  border: 1px solid rgba(30, 37, 48, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  padding: 9px;
}

.analysis-grid h4 {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--text-accent);
}

.analysis-grid ul,
.analysis-grid p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

.analysis-grid ul {
  padding-left: 17px;
}

.analysis-layout,
.analysis-table-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.analysis-layout span,
.analysis-table-list span {
  border: 1px solid rgba(83, 65, 165, 0.12);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  padding: 5px 8px;
}

.ai-status {
  margin: 12px 0;
  border: 1px solid rgba(30, 37, 48, 0.12);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ai-status.is-active {
  border-color: rgba(40, 103, 86, 0.3);
  background: #f1faf5;
}

.ai-status strong,
.ai-status span {
  display: block;
}

.ai-status span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.ai-status dl {
  margin: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ai-status dl div,
.analysis-ai {
  border: 1px solid rgba(83, 65, 165, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 7px 9px;
}

.ai-status dt,
.ai-status dd {
  margin: 0;
  font-size: 11px;
}

.ai-status dt {
  color: var(--muted);
  font-weight: 800;
}

.ai-status dd {
  color: var(--ink);
  font-weight: 900;
}

.analysis-ai {
  display: grid;
  gap: 2px;
  background: #ffffff;
}

.analysis-ai.is-active {
  border-color: rgba(40, 103, 86, 0.22);
  background: #f6fbf8;
}

.analysis-ai strong {
  color: var(--text-accent);
  font-size: 12px;
}

.analysis-ai span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.import-report {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.import-report li {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: grid;
  gap: 3px;
}

.import-report li.has-error {
  border-color: #e7b7a3;
  background: #fff7f4;
}

.import-report li.has-warning {
  border-color: #e0c36b;
  background: #fff9df;
}

.import-report strong,
.import-report span,
.import-report em {
  display: block;
}

.import-report span {
  color: var(--muted);
}

.import-report em {
  color: var(--green);
  font-style: normal;
  font-weight: 800;
}

.import-report .has-error em {
  color: #a2462f;
}

.import-report .has-warning em {
  color: #85620f;
}

.asset-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.asset-create-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.asset-list {
  display: grid;
  gap: 12px;
}

.asset-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
}

.asset-thumb {
  width: 104px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef1f6;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding: 8px;
}

.asset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-fields {
  min-width: 0;
}

.image-bank-upload {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) minmax(160px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.image-bank-upload .import-status {
  grid-column: 1 / -1;
  margin-top: 0;
}

.image-bank-groups {
  display: grid;
  gap: 16px;
}

.image-bank-group {
  display: grid;
  gap: 10px;
}

.image-bank-group h3 {
  margin: 0;
  color: var(--text-accent);
  font-size: 15px;
}

.image-bank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.image-bank-card {
  display: grid;
  gap: 9px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.image-bank-card.is-selected {
  border-color: var(--text-accent);
  box-shadow: 0 0 0 3px rgba(83, 65, 165, 0.12);
}

.image-bank-card .asset-thumb {
  width: 100%;
}

.image-bank-card strong,
.image-bank-card small {
  display: block;
}

.image-bank-card strong {
  color: var(--ink);
  font-size: 13px;
}

.image-bank-card small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.asset-library-groups .image-bank-group {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(17, 24, 39, 0.42);
}

.modal-card {
  width: min(860px, 100%);
  max-height: min(780px, calc(100vh - 48px));
  overflow: auto;
  background: #ffffff;
  border: 1px solid rgba(24, 32, 42, 0.16);
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(17, 24, 39, 0.28);
}

.modal-card-wide {
  width: min(1180px, 100%);
}

.modal-header,
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}

.modal-header {
  border-bottom: 1px solid var(--line);
}

.modal-footer {
  border-top: 1px solid var(--line);
  justify-content: flex-end;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
}

.modal-body {
  padding: 18px;
}

.icon-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
}

.wizard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.wizard-grid > .field {
  align-content: start;
}

.wizard-grid > .field > input,
.wizard-grid > .field > select {
  min-height: 48px;
}

.wizard-grid > .field > input[type="file"] {
  display: flex;
  align-items: center;
  padding: 8px 10px;
}

.wizard-file-meta {
  align-self: end;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfcff;
}

.wizard-file-meta strong,
.wizard-file-meta span {
  display: block;
}

.wizard-file-meta span,
.modal-copy {
  color: var(--muted);
}

.wizard-preview {
  margin-top: 6px;
}

.source-preview {
  margin: 6px 0 12px;
  border: 1px dashed rgba(83, 65, 165, 0.22);
  border-radius: 8px;
  background: #fbfcff;
  padding: 8px 10px 10px;
}

.source-preview summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.wizard-build-actions {
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wizard-build-actions span {
  color: var(--muted);
  font-size: 12px;
}

.generated-preview {
  border: 1px solid rgba(83, 65, 165, 0.16);
  border-radius: 8px;
  background: #f7fbff;
  padding: 12px;
  display: grid;
  gap: 12px;
}

.generated-preview.is-loading {
  grid-template-columns: auto 1fr;
  align-items: center;
  background: #f1f7ff;
  color: var(--text-accent);
}

.generated-preview.is-loading span {
  color: var(--muted);
  font-size: 12px;
}

.generated-preview-head,
.generated-table-head,
.wizard-approval-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.generated-preview-head h3,
.generated-preview-head p {
  margin: 0;
}

.generated-preview-head p,
.generated-table-head small {
  color: var(--muted);
  font-size: 12px;
}

.generated-preview-head > span {
  border-radius: 999px;
  background: #fff4d6;
  color: #775510;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
}

.generated-preview-head > span.is-approved {
  background: #e8f6ef;
  color: #17623e;
}

.generated-table-list {
  display: grid;
  gap: 12px;
}

.generated-table-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.generated-table-head {
  align-items: center;
  margin-bottom: 8px;
}

.generated-table-head strong,
.generated-table-head small {
  display: block;
}

.generated-table-head > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.generated-info-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.generated-info-chips span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  background: #fbfcff;
}

.generated-info-chips em,
.generated-info-chips strong {
  display: block;
  font-style: normal;
}

.generated-info-chips em {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.generated-info-chips strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 12px;
}

.generated-table-scroll {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.generated-price-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 12px;
}

.generated-price-table th,
.generated-price-table td {
  border-right: 1px solid rgba(83, 65, 165, 0.26);
  border-bottom: 1px solid rgba(30, 37, 48, 0.16);
  padding: 7px 8px;
  text-align: left;
  white-space: nowrap;
}

.generated-price-table th {
  background: #e8f3fc;
  color: var(--text-accent);
  font-weight: 900;
}

.generated-price-table td {
  background: #fbfcff;
}

.wizard-approval-actions {
  justify-content: flex-end;
}

@media (max-width: 1040px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .editor-splitter {
    display: none;
  }

  .overview-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview-column iframe {
    min-height: 680px;
  }

  .scoped-image-editor,
  .scoped-image-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .toolbar {
    justify-content: flex-start;
  }

  .meta-grid {
    grid-template-columns: 1fr;
  }

  .field-grid,
  .sheet-card-head,
  .asset-create-grid,
  .asset-row,
  .wizard-grid,
  .overview-summary {
    grid-template-columns: 1fr;
  }

  .asset-thumb {
    width: 100%;
    max-width: 180px;
  }
}

.creation-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.creation-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 2px solid #c8dff3;
  border-radius: 12px;
  background: #f6fbff;
  color: #14094D;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.creation-choice strong { font-size: 18px; }
.creation-choice span { font-size: 14px; line-height: 1.5; color: #536078; }
.creation-choice:hover { border-color: #5341A5; background: #EDE6FD; }
.creation-choice:focus-visible { outline: 3px solid #5341A5; outline-offset: 3px; }
@media (max-width: 600px) {
  .creation-choices,
  .create-category-selection {
    grid-template-columns: 1fr;
  }
}

.preset-choice-section {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.preset-choice-section h3 {
  margin: 0;
  color: var(--text-accent);
  font-size: 14px;
}

.preset-choice {
  background: #fff;
}

.manual-table-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.table-editor > .field { margin: 12px; }
.manual-table-actions + .mini-table-wrap .mini-edit-table th { min-width: 130px; }

.table-paste-panel {
  background: #f7fbff;
}

.table-paste-input {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  color: var(--ink);
  font: 13px/1.5 "SFMono-Regular", Consolas, monospace;
}

.manual-text-blocks { margin: 16px 0; display: grid; gap: 10px; }

@media (min-width: 1041px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .app-shell {
    height: 100vh;
    min-height: 0;
  }

  .sidebar,
  .workspace {
    min-height: 0;
  }

  .sidebar {
    overflow: hidden;
  }

  .workspace {
    height: 100vh;
    overflow: hidden;
  }

  .view {
    height: 100%;
    overflow: auto;
  }

  #editorView.is-active {
    overflow: hidden;
  }

  .content-grid {
    height: 100%;
    min-height: 0;
    align-items: stretch;
  }

  .model-column {
    max-height: 100%;
    overflow: auto;
    padding-bottom: 18px;
  }

  .preview-column {
    height: 100%;
    max-height: 100%;
    position: sticky;
    top: 0;
  }

  .preview-column iframe {
    height: 100%;
    min-height: 0;
  }
}


/* Premium studio polish pass */
:root {
  --brand-blue: #5341A5;
  --brand-blue-dark: #14094D;
  --brand-blue-light: #EDE6FD;
  --brand-lavender: #BDA6F4;
  --brand-cloud: #EDE6FD;
  --brand-indigo: #14094D;
  --brand-violet: #5341A5;
  --brand-light: #F2F4F7;
  --brand-gray-light: #DBE1E8;
  --brand-gray: #767A8C;
  --brand-gray-dark: #4B5666;
  --brand-dark: #131415;
  --ink: var(--brand-dark);
  --muted: var(--brand-gray);
  --line: var(--brand-gray-light);
  --paper: var(--brand-light);
  --panel: #ffffff;
  --purple: var(--brand-blue);
  --text-accent: var(--brand-blue);
  --purple-dark: var(--brand-blue-dark);
  --purple-soft: var(--brand-blue-light);
  --focus: rgba(83, 65, 165, 0.22);
  --shadow: 0 22px 70px rgba(19, 20, 21, 0.12);
  --soft-shadow: 0 12px 38px rgba(19, 20, 21, 0.08);
}

body {
  min-width: 1180px;
  background:
    radial-gradient(circle at 12% 0%, rgba(83, 65, 165, 0.10), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, var(--brand-light) 46%, var(--brand-gray-light) 100%);
  font-size: 15px;
  line-height: 1.45;
}

.app-shell {
  grid-template-columns: 264px minmax(0, 1fr);
}

.sidebar {
  position: relative;
  gap: 18px;
  padding: 20px 16px;
  background:
    radial-gradient(circle at 18% 8%, rgba(189, 166, 244, 0.32), transparent 34%),
    linear-gradient(180deg, var(--brand-indigo) 0%, var(--brand-violet) 72%, #47378e 100%);
  box-shadow: inset -1px 0 rgba(255, 255, 255, 0.10);
}

.brand-block {
  padding: 8px 6px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-block strong {
  letter-spacing: -0.01em;
}

.brand-block span {
  color: rgba(245, 247, 251, 0.68);
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(19, 20, 21, 0.18);
}

.nav-button,
.document-list button {
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.055);
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.nav-button:hover,
.document-list button:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
}

.nav-button.active,
.document-list button.active {
  background: #ffffff;
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.76);
  box-shadow: 0 14px 30px rgba(3, 62, 157, 0.22);
}

.document-list {
  gap: 7px;
  padding-right: 2px;
}

.document-list button {
  padding: 11px 12px;
}

.workspace {
  background: transparent;
}

.topbar {
  min-height: 76px;
  padding: 14px 22px;
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(226, 230, 238, 0.9);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 32px rgba(20, 23, 32, 0.06);
}

.eyebrow {
  color: var(--text-accent);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.topbar h1 {
  font-size: 24px;
  letter-spacing: -0.03em;
}

.toolbar {
  padding: 8px;
  border: 1px solid rgba(226, 230, 238, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--soft-shadow);
}

.primary-action,
.secondary-action,
.danger-action,
.row-actions button,
.row-actions a,
.open-preview,
.page-collapse-button,
.page-drag-handle,
.page-duplicate-button,
.page-delete-button,
.row-settings-trigger,
.icon-close {
  border-radius: 12px;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.primary-action,
.open-preview.print-action-link {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  box-shadow: 0 12px 28px rgba(83, 65, 165, 0.22);
}

.primary-action:hover,
.open-preview:hover,
.secondary-action:hover,
.row-actions button:hover,
.row-actions a:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(20, 23, 32, 0.12);
}

.open-preview.preview-action-link {
  background: #151923;
}

.save-action:not(.is-dirty) {
  color: #23664c;
  border-color: #cfe8dc;
  background: #f2fbf6;
}

.save-action.is-dirty {
  color: #ffffff;
  background: linear-gradient(135deg, #14094D, #5341A5);
  border-color: transparent;
}

.segmented {
  padding: 3px;
  border-radius: 14px;
  background: #edf0f6;
}

.segmented button {
  border-radius: 11px;
  padding: 8px 13px;
}

.segmented button.active {
  background: #ffffff;
  color: var(--text-accent);
  box-shadow: 0 8px 20px rgba(20, 23, 32, 0.12);
}

.select-label select,
.field input,
.field textarea,
.field select,
.sheet-card select,
.sheet-card input,
.staffel-values-grid input,
.mini-edit-table input,
.mini-edit-table select {
  min-height: 40px;
  border-radius: 12px;
  border-color: #dfe4ee;
  background: #fbfcff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.select-label select:focus,
.sheet-card select:focus,
.sheet-card input:focus,
.staffel-values-grid input:focus,
.mini-edit-table input:focus,
.mini-edit-table select:focus {
  border-color: var(--text-accent);
  background: #ffffff;
  box-shadow: 0 0 0 4px var(--focus);
}

.view {
  padding: 16px;
}

.content-grid {
  gap: 12px;
  grid-template-columns: minmax(460px, var(--editor-column-width)) 16px minmax(340px, 1fr);
}

.model-column {
  gap: 12px;
  padding: 0 4px 20px 0;
}

.editor-tabs {
  top: 0;
  z-index: 8;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(226, 230, 238, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(14px);
}

.editor-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #647084;
  font-weight: 850;
}

.editor-tabs button:hover {
  background: #f4f6fa;
  color: var(--ink);
}

.editor-tabs button.active {
  background: linear-gradient(135deg, var(--purple), #5341A5);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(83, 65, 165, 0.22);
}

.panel,
.editor-page-card,
.table-editor,
.scoped-image-editor,
.column-editors article,
.staffel-group-editor,
.general-info-editor,
.image-bank-upload,
.image-bank-card,
.sheet-card,
.modal-card {
  border-radius: 18px;
  border-color: rgba(215, 222, 235, 0.92);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 14px 38px rgba(20, 23, 32, 0.055);
}

.panel {
  padding: 18px;
}

.panel-heading {
  margin: -2px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #edf0f5;
}

.panel-heading h2 {
  font-size: 17px;
  letter-spacing: -0.01em;
}

.panel-heading span {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--purple-soft);
  color: var(--text-accent);
  font-size: 12px;
  font-weight: 850;
}

.editor-page-card {
  overflow: hidden;
}

.editor-page-card.product-editor {
  border-left: 0;
}

.editor-page-card.product-editor::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #5341A5, #14094D);
}

.editor-page-heading {
  margin: -18px -18px 16px;
  padding: 14px 16px 14px 20px;
  background: linear-gradient(180deg, #ffffff, #f8f9fc);
  border-bottom: 1px solid #edf0f5;
}

.editor-page-title h2 {
  font-size: 16px;
  letter-spacing: -0.01em;
}

.editor-page-title small {
  color: #778297;
}

.page-collapse-button,
.page-drag-handle,
.page-duplicate-button,
.page-delete-button {
  background: #f8fafc;
  border-color: #dfe4ee;
}

.page-delete-button {
  color: #9d2f28;
  border-color: #efc8c2;
}

.page-drag-handle:hover,
.page-collapse-button:hover,
.page-duplicate-button:hover {
  background: #ffffff;
  border-color: rgba(83, 65, 165, 0.35);
}

.page-delete-button:hover {
  background: #fff8f7;
  border-color: #e4a8a0;
}

.field span,
.mini-edit-table caption,
.row-index-label {
  color: #637086;
  font-size: 12px;
  letter-spacing: 0.01em;
}

.field-grid {
  gap: 14px;
}

.scoped-image-editor {
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  padding: 14px;
}

.asset-thumb {
  border-radius: 14px;
}

.table-editor {
  overflow: hidden;
  border: 1px solid rgba(215, 222, 235, 0.94);
  background: #ffffff;
}

.table-editor > summary {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  color: var(--text-accent);
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #f5faff);
  border-bottom: 1px solid #edf0f5;
}

.table-editor[open] > summary {
  margin-bottom: 14px;
}

.table-editor > :not(summary) {
  margin-left: 14px;
  margin-right: 14px;
}

.table-editor > :last-child {
  margin-bottom: 14px;
}

.mini-table-wrap {
  border: 1px solid #e2e7f0;
  border-radius: 16px;
  background: #ffffff;
}

.mini-edit-table {
  border-collapse: separate;
  border-spacing: 0;
}

.mini-edit-table th,
.mini-edit-table td {
  border-width: 0 1px 1px 0;
  border-color: #e2e7f0;
}

.mini-edit-table th {
  background: #EDE6FD;
  color: var(--text-accent);
}

.column-group-badge {
  border-radius: 999px;
  background: #ffffff;
}

.staffel-group-editor {
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  padding: 14px;
}

.staffel-subcolumn-card {
  border-radius: 16px;
  border-color: #d7e8f8;
  background: #ffffff;
}

.staffel-values-grid {
  border-top-color: #dbeaf7;
  background: #f7fbff;
  border-radius: 14px;
  padding: 12px;
}

.preview-column {
  position: sticky;
  top: 92px;
  height: calc(100vh - 108px);
  border-radius: 22px;
  border-color: rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 28%),
    #bfc7d4;
  box-shadow: 0 30px 80px rgba(20, 23, 32, 0.18);
}

.preview-status {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.82);
  color: #3e4858;
  font-size: 13px;
  font-weight: 800;
  backdrop-filter: blur(14px);
}

.preview-status:empty::before {
  content: "Live preview";
  color: #3e4858;
}

.preview-column iframe {
  min-height: 0;
  background: transparent;
}

.editor-splitter::before {
  width: 4px;
  background: rgba(83, 65, 165, 0.18);
}

.overview-summary-card,
.document-table,
.table-wrap {
  border-radius: 18px;
}

.overview-summary-card {
  box-shadow: var(--soft-shadow);
}

.document-table th {
  color: #727d90;
  letter-spacing: 0.04em;
}

.document-table tbody tr:hover {
  background: color-mix(in srgb, var(--purple) 9%, #ffffff);
  box-shadow: inset 0 1px color-mix(in srgb, var(--purple) 22%, transparent), inset 0 -1px color-mix(in srgb, var(--purple) 22%, transparent);
}

.modal-backdrop {
  background: rgba(14, 18, 29, 0.56);
  backdrop-filter: blur(8px);
}

.modal-card {
  border-radius: 22px;
}

.modal-header,
.modal-footer {
  padding: 18px 22px;
}

.modal-body {
  padding: 20px 22px;
}

.image-bank-grid {
  gap: 12px;
}

.image-bank-card {
  padding: 12px;
}

.image-bank-card.is-selected {
  border-color: var(--text-accent);
  box-shadow: 0 0 0 4px rgba(83, 65, 165, 0.13), var(--soft-shadow);
}

.empty-editor-note,
.import-status {
  border-radius: 14px;
}

@media (max-width: 1280px) {
  body {
    min-width: 0;
  }

  .app-shell {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .content-grid {
    --editor-column-width: min(760px, 54vw);
  }
}

/* Keep the PDF list scrollable without showing a heavy sidebar scrollbar. */
.document-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.document-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}


.add-slide-row {
  display: flex;
  justify-content: flex-end;
  padding: 2px 4px 28px;
}

.add-slide-bottom {
  min-width: 156px;
}

.add-slide-row {
  padding: 0 0 28px;
}

.add-slide-bottom {
  width: 100%;
  min-height: 52px;
  justify-content: center;
}


.manual-table-title-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 210px);
  gap: 14px;
  align-items: end;
  margin-bottom: 12px;
}

.manual-title-toggle input {
  width: 28px;
  min-height: 28px;
  justify-self: start;
}

.manual-table-settings {
  margin-bottom: 12px;
}

.manual-table-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  margin: 12px 0 10px;
  border: 1px solid #d7e8f8;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.manual-table-toolbar strong,
.manual-table-toolbar span {
  display: block;
}

.manual-table-toolbar strong {
  color: var(--text-accent);
  font-size: 14px;
}

.manual-table-toolbar span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.integrated-table-wrap {
  margin-top: 10px;
}

.integrated-manual-table {
  min-width: 980px;
}

.integrated-manual-table .manual-group-row th {
  background: #f3f8ff;
  border-bottom-color: #c7def3;
  vertical-align: top;
}

.manual-group-cell {
  padding: 10px;
}

.manual-group-cell-empty {
  color: #98a1b1;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.manual-inline-group-editor {
  display: grid;
  gap: 8px;
}

.manual-inline-group-editor small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.manual-group-title-field {
  gap: 4px;
}

.manual-group-title-field span {
  color: var(--text-accent);
  text-align: center;
}

.manual-group-title-field input {
  text-align: center;
  font-weight: 900;
  color: var(--text-accent);
  background: #ffffff;
}

.manual-column-editor-cell {
  min-width: 142px;
  vertical-align: top;
  position: relative;
}

.column-drag-handle {
  display: block;
  width: 100%;
  min-height: 20px;
  margin: 0 0 2px;
  padding: 0;
  border: 1px dashed #c7d3e4;
  border-radius: 6px;
  background: #f8faff;
  color: #73819a;
  cursor: grab;
  font-size: 13px;
  line-height: 18px;
}

.column-drag-handle:active {
  cursor: grabbing;
}

.column-select-field {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  margin: 2px 0 4px;
  color: #68758b;
  font-size: 10px;
  line-height: 1.1;
  cursor: pointer;
}

.column-select-field input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent, #5341a5);
}

.manual-table-footer-actions [data-table-action="column-remove"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.manual-column-editor-cell.is-column-dragging {
  opacity: 0.55;
}

.manual-column-editor-cell.is-column-drag-over {
  outline: 2px solid var(--accent, #5341a5);
  outline-offset: -2px;
  background: #f0ecff;
}

.manual-column-editor-cell .field {
  margin-top: 7px;
}

.manual-column-editor-cell .field span {
  font-size: 10px;
}

.manual-row-tools,
.manual-row-tools-head {
  width: 82px;
  min-width: 82px;
}

.manual-row-tools {
  background: #fbfcff;
}

.manual-table-footer-actions {
  justify-content: flex-end;
  margin-top: 12px;
}

.table-count-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid #d5d9e7;
  border-radius: 7px;
  background: #fff;
  color: #40358d;
  font-size: 11px;
  font-weight: 800;
}

.table-count-control input {
  width: 58px;
  min-height: 24px;
  padding: 2px 5px;
  border: 1px solid #c9cde0;
  border-radius: 5px;
  color: #1e2530;
  font: inherit;
  font-weight: 700;
}

@media (max-width: 1280px) {
  .manual-table-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .manual-table-title-row {
    grid-template-columns: 1fr;
  }
}


.workspace-layout-tabs button {
  min-width: 108px;
}

.content-grid.is-stacked-layout {
  --editor-column-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 18px;
}

.content-grid.is-stacked-layout .model-column {
  width: 100%;
  max-width: none;
  padding-right: 0;
}

.content-grid.is-stacked-layout .editor-splitter {
  display: none;
}

.content-grid.is-stacked-layout .preview-column {
  position: relative;
  top: auto;
  height: min(78vh, 820px);
  min-height: 620px;
  order: 2;
}

.content-grid.is-stacked-layout .editor-panel {
  max-width: none;
}

.content-grid.is-stacked-layout .integrated-manual-table {
  min-width: 0;
}

.content-grid.is-stacked-layout .mini-table-wrap {
  overflow-x: auto;
}

.content-grid.is-stacked-layout .manual-table-toolbar {
  position: sticky;
  top: 62px;
  z-index: 5;
}

.content-grid.is-stacked-layout .editor-tabs {
  top: 0;
}

.content-grid.is-stacked-layout .panel,
.content-grid.is-stacked-layout .editor-page-card,
.content-grid.is-stacked-layout .table-editor {
  width: 100%;
}

body[data-editor-layout="stacked"] .topbar {
  position: sticky;
  top: 0;
  z-index: 20;
}


/* Stacked workspace: full-width preview above full-width editor. */
.content-grid.is-stacked-layout {
  grid-template-areas:
    "preview"
    "editor";
}

.content-grid.is-stacked-layout .preview-column {
  grid-area: preview;
  order: 1;
  height: min(58vh, 660px);
  min-height: 460px;
}

.content-grid.is-stacked-layout .model-column {
  grid-area: editor;
  order: 2;
}

/* Force stacked workspace to be true full-width rows. */
.content-grid.is-stacked-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto;
  grid-template-areas:
    "preview"
    "editor";
}

.content-grid.is-stacked-layout .preview-column {
  grid-area: preview;
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.content-grid.is-stacked-layout .model-column {
  grid-area: editor;
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  max-width: 100%;
}

.content-grid.is-stacked-layout .preview-column iframe {
  min-width: 100%;
}

/* In stacked mode the editor tabs should sit between preview and editor content, not float over fields. */
.content-grid.is-stacked-layout .editor-tabs {
  position: relative;
  top: auto;
  z-index: 1;
  margin-top: 0;
  margin-bottom: 12px;
}

.content-grid.is-stacked-layout .manual-table-toolbar {
  position: relative;
  top: auto;
  z-index: 1;
}

/* Keep editor tabs visible as one clean bar; hide scrolling content behind it. */
.editor-tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  white-space: nowrap;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(20, 23, 32, 0.12);
}

.editor-tabs button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-grid.is-stacked-layout .editor-tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-bottom: 14px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(20, 23, 32, 0.12);
}

.content-grid.is-stacked-layout .model-column {
  overflow: visible;
}


/* Restore editor scrolling and add preview zoom controls. */
#editorView.is-active {
  overflow: auto;
}

.content-grid.is-stacked-layout .model-column {
  overflow: visible;
}

.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 0 10px 0 0;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--line);
}

.preview-toolbar .preview-status {
  flex: 1;
  border-bottom: 0;
  background: transparent;
}

.preview-zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid #dfe4ee;
  border-radius: 999px;
  background: #f3f5f9;
}

.preview-zoom-controls button {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.preview-zoom-controls button.active {
  background: #5341A5;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(83, 65, 165, 0.22);
}

.content-grid.is-stacked-layout .preview-column {
  height: min(46vh, 520px);
  min-height: 360px;
}


/* Keep the horizontal preview visible while scrolling the editor in stacked mode. */
.content-grid.is-stacked-layout .preview-column {
  position: sticky !important;
  top: 0;
  z-index: 18;
  align-self: start;
  background: #d6dde8;
}

.content-grid.is-stacked-layout .model-column {
  position: relative;
  z-index: 1;
}

.content-grid.is-stacked-layout .editor-tabs {
  top: 0;
}


/* Resizable stacked preview: preview stays visible, editor scrolls below it. */
.content-grid.is-stacked-layout {
  --preview-panel-height: 430px;
  height: calc(100vh - 104px);
  min-height: 0;
  overflow: hidden;
  grid-template-rows: var(--preview-panel-height) 16px minmax(0, 1fr);
  grid-template-areas:
    "preview"
    "splitter"
    "editor";
}

.content-grid.is-stacked-layout .preview-column {
  position: relative !important;
  top: auto;
  height: var(--preview-panel-height) !important;
  min-height: 0 !important;
  max-height: var(--preview-panel-height);
  overflow: hidden;
}

.content-grid.is-stacked-layout .preview-column iframe {
  min-height: 0 !important;
  height: 100% !important;
}

.content-grid.is-stacked-layout .editor-splitter {
  display: block;
  grid-area: splitter;
  min-height: 16px;
  height: 16px;
  cursor: row-resize;
  border: 0;
}

.content-grid.is-stacked-layout .editor-splitter::before {
  top: 50%;
  bottom: auto;
  left: 16px;
  right: 16px;
  width: auto;
  height: 5px;
  transform: translateY(-50%);
}

.content-grid.is-stacked-layout .model-column {
  min-height: 0;
  overflow: auto;
  padding-bottom: 36px;
}

.content-grid.is-stacked-layout.is-resizing,
.content-grid.is-stacked-layout.is-resizing * {
  cursor: row-resize;
}


/* Stable rollback for stacked workspace after resize experiment. */
.content-grid.is-stacked-layout {
  height: auto !important;
  min-height: 0;
  overflow: visible !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "preview"
    "editor" !important;
  gap: 18px;
}

.content-grid.is-stacked-layout .editor-splitter {
  display: none !important;
}

.content-grid.is-stacked-layout .preview-column {
  grid-area: preview;
  position: relative !important;
  top: auto !important;
  z-index: 1;
  height: 360px !important;
  min-height: 360px !important;
  max-height: 360px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.content-grid.is-stacked-layout .preview-column iframe {
  height: 100% !important;
  min-height: 0 !important;
}

.content-grid.is-stacked-layout .model-column {
  grid-area: editor;
  width: 100%;
  max-width: none;
  min-height: auto;
  overflow: visible !important;
  padding-right: 0;
  padding-bottom: 36px;
}

.content-grid.is-stacked-layout .editor-tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #ffffff;
}


/* Stable adjustable preview height for stacked mode. */
.content-grid.is-stacked-layout {
  --preview-panel-height: 440px;
}

.content-grid.is-stacked-layout .preview-column {
  height: var(--preview-panel-height) !important;
  min-height: var(--preview-panel-height) !important;
  max-height: var(--preview-panel-height) !important;
  overflow: hidden !important;
}

.content-grid.is-stacked-layout .preview-column iframe {
  height: calc(var(--preview-panel-height) - 43px) !important;
  min-height: 0 !important;
}

.preview-height-handle {
  display: none;
}

.content-grid.is-stacked-layout .preview-height-handle {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  z-index: 50;
  display: block;
  height: 13px;
  border: 0;
  border-radius: 999px 999px 0 0;
  background: transparent;
  cursor: row-resize;
}

.content-grid.is-stacked-layout .preview-height-handle::before {
  content: "";
  position: absolute;
  left: 38%;
  right: 38%;
  top: 4px;
  height: 5px;
  border-radius: 999px;
  background: rgba(83, 65, 165, 0.34);
  transition: background 0.14s ease, box-shadow 0.14s ease;
}

.content-grid.is-stacked-layout .preview-height-handle:hover::before,
.content-grid.is-stacked-layout .preview-height-handle:focus-visible::before,
.content-grid.is-preview-height-resizing .preview-height-handle::before {
  background: #5341A5;
  box-shadow: 0 0 0 5px rgba(83, 65, 165, 0.14);
}

.content-grid.is-preview-height-resizing,
.content-grid.is-preview-height-resizing * {
  cursor: row-resize;
  user-select: none;
}


/* Final stacked editor shell: the editor view scrolls, while preview and tabs stay visible. */
body[data-editor-layout="stacked"] #editorView.is-active {
  height: calc(100vh - 68px) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 14px 28px !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout {
  --preview-panel-height: 280px;
  --editor-preview-top-gap: 18px;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "preview"
    "editor" !important;
  gap: 10px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .preview-column {
  grid-area: preview !important;
  position: sticky !important;
  top: var(--editor-preview-top-gap, 18px) !important;
  z-index: 18;
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr) 14px;
  width: 100%;
  height: var(--preview-panel-height) !important;
  min-height: var(--preview-panel-height) !important;
  max-height: var(--preview-panel-height) !important;
  overflow: hidden !important;
  border-radius: 16px;
  background: #d6dde8;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .preview-column .preview-toolbar {
  min-height: 34px;
  height: 34px;
  padding: 0 10px;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .preview-column iframe {
  display: block;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .preview-column .preview-height-handle {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  grid-row: 3 !important;
  grid-column: 1 !important;
  align-self: stretch;
  z-index: 12;
  display: block !important;
  height: 14px;
  width: 100%;
  border: 0;
  border-radius: 0 0 16px 16px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(210, 217, 228, 0.85);
  cursor: row-resize;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .preview-column .preview-height-handle::before {
  content: "";
  position: absolute;
  left: 40%;
  right: 40%;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  background: rgba(83, 65, 165, 0.34);
  transform: translateY(-50%);
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .preview-column .preview-height-handle:hover::before,
body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .preview-column .preview-height-handle:focus-visible::before,
body[data-editor-layout="stacked"] .content-grid.is-preview-height-resizing .preview-column .preview-height-handle::before {
  background: #5341A5;
  box-shadow: 0 0 0 5px rgba(83, 65, 165, 0.14);
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .model-column {
  grid-area: editor !important;
  display: flex !important;
  width: 100%;
  max-width: none;
  min-height: 0;
  overflow: visible !important;
  padding-right: 0;
  padding-bottom: 56px;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .editor-tabs {
  position: sticky !important;
  top: calc(var(--editor-preview-top-gap, 18px) + var(--preview-panel-height) + 10px) !important;
  z-index: 17;
  margin: 0 0 12px !important;
  background: #ffffff;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .editor-panel {
  min-height: 0;
  overflow: visible !important;
  padding-bottom: 42px;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .editor-panel[hidden] {
  display: none !important;
}

/* Compact application density: keep the PDF preview unchanged, make the editor UI less zoomed-in. */
body {
  font-size: 14px;
}

.topbar {
  min-height: 68px;
  padding: 10px 16px;
}

.eyebrow {
  font-size: 10px;
  margin-bottom: 2px;
}

.topbar h1 {
  font-size: 20px;
}

.toolbar,
.workspace-layout-tabs,
.segmented {
  gap: 6px;
}

.primary-action,
.secondary-action,
.danger-action,
.row-actions button,
.row-actions a,
.nav-button,
.open-preview,
.select-label select,
.field input,
.field textarea,
.field select,
.sheet-card select,
.sheet-card input,
.mini-edit-table input,
.mini-edit-table select,
.staffel-values-grid input {
  min-height: 32px;
  border-radius: 9px;
}

.primary-action,
.secondary-action,
.danger-action,
.row-actions button,
.row-actions a,
.open-preview {
  padding: 0 10px;
}

.panel,
.editor-page-card,
.table-editor {
  padding: 12px;
  border-radius: 14px;
}

.panel-heading {
  margin-bottom: 10px;
}

.editor-tabs {
  padding: 4px;
  border-radius: 14px;
}

.editor-tabs button {
  min-height: 34px;
  border-radius: 10px;
  font-size: 13px;
}

.field,
.form-grid,
.editor-page-card,
.table-editor,
.manual-table-toolbar,
.integrated-manual-table,
.staffel-values-grid,
.mini-table-wrap {
  gap: 8px;
}

.preview-status {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.preview-zoom-controls {
  display: none !important;
}

.preview-toolbar {
  justify-content: flex-start;
}

.preview-toolbar .preview-status {
  width: 100%;
}


/* Editor scroll fallback: works even if an older cached layout state has not set data-editor-layout yet. */
body[data-screen="editor"] #editorView.is-active {
  height: calc(100vh - 68px) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 14px 28px !important;
}

body[data-screen="editor"] .content-grid {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body[data-screen="editor"] .model-column {
  max-height: none !important;
  overflow: visible !important;
}

/* Keep the document header fully opaque above all sticky preview layers. */
body[data-screen="editor"] .topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--panel);
  box-shadow: none;
}

/* Clean sticky backdrop: a flat page-colored mask behind preview and tabs. */
body[data-editor-layout="stacked"] #editorView.is-active {
  --sticky-preview-chrome-height: calc(var(--editor-preview-top-gap, 18px) + var(--preview-panel-height, 280px) + 82px);
  position: relative;
  padding: 0 14px 28px !important;
  background: #eef2f7;
}

body[data-editor-layout="stacked"] #editorView.is-active::before {
  content: none !important;
  display: none !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout {
  position: relative;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .sticky-preview-backdrop {
  grid-area: preview / 1 / editor / -1 !important;
  position: sticky;
  top: 0;
  z-index: 16;
  align-self: start;
  width: 100%;
  height: var(--sticky-preview-chrome-height);
  margin-bottom: calc(-1 * var(--sticky-preview-chrome-height));
  border: 0;
  border-radius: 0;
  background: #eef2f7;
  box-shadow: none !important;
  pointer-events: none;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .preview-column {
  z-index: 24;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .editor-tabs {
  z-index: 25;
  box-shadow: none !important;
}

body[data-editor-layout="stacked"] .content-grid.is-stacked-layout .model-column {
  position: relative;
  z-index: auto;
}

/* Spreadsheet-style selection inside the editor tables. */
.editor-table-cell-field {
  position: relative;
  display: block;
  margin: 0;
}

.editor-table-header-field {
  position: relative;
  display: block;
}

.editor-table-cell-field input {
  width: 100%;
}

.editor-table-header-field input {
  width: 100%;
}

.editor-table-cell-field.is-editor-cell-selected input,
.editor-table-header-field.is-editor-cell-selected input {
  border-color: #2f8cff !important;
  background: #d9ecff !important;
  box-shadow: inset 0 0 0 1px #2f8cff, 0 0 0 1px rgba(47, 140, 255, 0.24) !important;
}

.editor-table-cell-field.is-editor-cell-selected::after,
.editor-table-header-field.is-editor-cell-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #2f8cff;
  border-radius: 8px;
  pointer-events: none;
}

/* Compacte Label/Waarde-rijen in de kenmerken-editor */
.general-info-editor .mini-table-wrap {
  margin-top: 6px;
}

.general-info-editor .mini-edit-table th,
.general-info-editor .mini-edit-table td {
  padding: 3px 5px;
}

.general-info-editor .mini-edit-table .field {
  gap: 2px;
}

.general-info-editor .mini-edit-table .field span:empty {
  display: none;
}

.general-info-editor .mini-edit-table input,
.general-info-editor .mini-edit-table textarea,
.general-info-editor .mini-edit-table select {
  min-height: 30px;
  padding: 5px 7px;
  border-radius: 7px;
  font-size: 13px;
}

.general-info-editor .manual-row-tools {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  width: 176px;
  min-width: 176px;
  background: #fbfcff;
}

.general-info-editor .manual-row-tools .secondary-action,
.general-info-editor .manual-table-footer-actions .secondary-action {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 12px;
}

.general-info-editor .manual-table-footer-actions {
  margin-top: 8px;
}

/* Compacte invulvelden in de prijstabel-editor */
.manual-table-editor .manual-table-title-row {
  gap: 10px;
  margin-bottom: 8px;
}

.manual-table-editor .integrated-table-wrap {
  margin-top: 6px;
}

.manual-table-editor .integrated-manual-table th,
.manual-table-editor .integrated-manual-table td {
  padding: 4px 5px;
}

.manual-table-editor .manual-group-cell {
  padding: 6px 7px;
}

.manual-table-editor .manual-inline-group-editor {
  gap: 5px;
}

.manual-table-editor .manual-column-editor-cell {
  min-width: 126px;
}

.manual-table-editor .manual-column-editor-cell .field {
  gap: 2px;
  margin-top: 4px;
}

.manual-table-editor .manual-column-editor-cell .field span {
  font-size: 9px;
  line-height: 1.1;
}

.manual-column-style-settings {
  margin-top: 5px;
  border: 1px solid #d8e1ec;
  border-radius: 8px;
  background: #f8faff;
  /* Opening one column's controls must not invalidate every table/card. */
  contain: layout style;
}

.manual-column-style-settings summary {
  padding: 6px 7px;
  color: var(--text-accent);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.manual-column-style-settings .field {
  padding: 0 7px 6px;
}

.mini-edit-table .manual-column-style-settings .field span {
  display: block;
  color: #637086;
  font-size: 9px;
  line-height: 1.15;
  text-align: left;
}

.checkbox-field input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  justify-self: start;
}

.extra-info-style-options {
  display: flex;
  align-items: end;
  gap: 12px;
  min-width: 0;
}

.table-style-preset-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(83, 65, 165, 0.14);
}

.table-style-preset-controls .compact-actions {
  align-self: end;
}

.extra-info-style-options .field {
  flex: 1 1 0;
  min-width: 0;
}

.text-style-toggle {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 48px;
  cursor: pointer;
}

.text-style-toggle-caption {
  color: #637086;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.text-style-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.text-style-toggle-button {
  display: grid;
  width: 48px;
  height: 40px;
  place-items: center;
  border: 1px solid #d9dfeb;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(20, 23, 32, 0.04);
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.text-style-toggle input:checked + .text-style-toggle-button {
  border-color: var(--text-accent);
  background: var(--brand-cloud);
  color: var(--text-accent);
  box-shadow: 0 0 0 3px var(--focus);
}

.text-style-toggle input:focus-visible + .text-style-toggle-button {
  outline: 2px solid var(--text-accent);
  outline-offset: 2px;
}

/* Split editor: the structure map stays in place while only the form column scrolls. */
@media (min-width: 941px) {
  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column {
    overflow: hidden !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column > #contentPanel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-content-layout {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-form-column {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-structure-panel {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* Keep the preview toolbar inside the same measured column as the iframe.
   The old width:100% status rule made the action group overflow when browser
   zoom reduced the available CSS width, so the buttons appeared detached from
   the preview even though the PDF itself still fitted correctly. */
.preview-toolbar {
  min-width: 0;
  container-type: inline-size;
}

.preview-toolbar .preview-status {
  width: auto !important;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
}

.preview-toolbar-actions .open-preview {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

@container (max-width: 470px) {
  .preview-toolbar-actions .open-preview {
    padding-inline: 8px;
  }

  .preview-toolbar-actions .open-preview > span:not(.ui-icon) {
    display: none;
  }
}

/* Coolicons used by navigation, toolbar actions and row controls. */
.ui-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.ui-icon-download { -webkit-mask-image: url('/assets/icons/download.svg'); mask-image: url('/assets/icons/download.svg'); }
.ui-icon-arrow-left { -webkit-mask-image: url('/assets/icons/arrow-left.svg'); mask-image: url('/assets/icons/arrow-left.svg'); }
.ui-icon-arrow-right { -webkit-mask-image: url('/assets/icons/arrow-right.svg'); mask-image: url('/assets/icons/arrow-right.svg'); }
.ui-icon-arrow-up { -webkit-mask-image: url('/assets/icons/arrow-up.svg'); mask-image: url('/assets/icons/arrow-up.svg'); }
.ui-icon-arrow-down { -webkit-mask-image: url('/assets/icons/arrow-down.svg'); mask-image: url('/assets/icons/arrow-down.svg'); }
.ui-icon-undo-left { -webkit-mask-image: url('/assets/icons/undo-left.svg'); mask-image: url('/assets/icons/undo-left.svg'); }
.ui-icon-undo-right { -webkit-mask-image: url('/assets/icons/undo-right.svg'); mask-image: url('/assets/icons/undo-right.svg'); }
.ui-icon-house { -webkit-mask-image: url('/assets/icons/house.svg'); mask-image: url('/assets/icons/house.svg'); }
.ui-icon-file { -webkit-mask-image: url('/assets/icons/file.svg'); mask-image: url('/assets/icons/file.svg'); }
.ui-icon-folder { -webkit-mask-image: url('/assets/icons/folder.svg'); mask-image: url('/assets/icons/folder.svg'); }
.ui-icon-calendar { -webkit-mask-image: url('/assets/icons/calendar.svg'); mask-image: url('/assets/icons/calendar.svg'); }
.ui-icon-image { -webkit-mask-image: url('/assets/icons/image.svg'); mask-image: url('/assets/icons/image.svg'); }
.ui-icon-show { -webkit-mask-image: url('/assets/icons/show.svg'); mask-image: url('/assets/icons/show.svg'); }

.nav-button,
.sidebar-heading-label,
.editor-back-action,
.print-action-link,
.row-actions a,
.manual-table-actions .secondary-action,
.planning-month-actions .secondary-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-button:not(.planning-nav) {
  justify-content: flex-start;
  padding: 0 12px;
}

.planning-nav {
  justify-content: flex-start;
}

.planning-nav > strong {
  margin-left: auto;
}

.sidebar-heading-label {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  white-space: nowrap;
  gap: 6px;
}

/* Keep the section icon and label on one horizontal line. The generic
   document-list span rule otherwise makes the inline icon wrap above the
   heading text. */
.sidebar-section-heading .sidebar-heading-label {
  display: inline-flex !important;
  flex: 0 0 auto;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: max-content;
  max-width: 100%;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.sidebar-heading-label .ui-icon {
  width: 15px;
  height: 15px;
}

/* Center the primary navigation label/icon group while leaving the planning
   count badge pinned to the right edge of its bar. */
.nav-button:not(.trash-nav) {
  position: relative;
  justify-content: center !important;
}

.planning-nav > strong {
  position: absolute;
  right: 10px;
  margin-left: 0 !important;
}

.icon-only-action {
  justify-content: center;
  padding: 8px 10px;
}

.history-actions .ui-icon {
  width: 17px;
  height: 17px;
}

.row-actions a .ui-icon,
.row-icon-action .ui-icon,
.manual-table-actions .ui-icon {
  width: 16px;
  height: 16px;
}

.asset-placeholder-visual {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: linear-gradient(145deg, #eef1f7, #dfe5f1);
  color: #7c8799;
}

.asset-placeholder-visual .ui-icon {
  width: 28px;
  height: 28px;
}

.product-image-quick-thumb .asset-placeholder-visual .ui-icon {
  width: 24px;
  height: 24px;
}

/* Let the split editor grow with all slides. The page owns vertical scrolling;
   the structure map remains sticky beside the long form instead of creating a
   clipped nested scroll box. */
@media (min-width: 941px) {
  html:has(body[data-editor-layout="split"]),
  body[data-editor-layout="split"] {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body[data-editor-layout="split"] .app-shell,
  body[data-editor-layout="split"] .workspace {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  body[data-editor-layout="split"] #editorView.is-active {
    height: auto !important;
    min-height: calc(100vh - 76px) !important;
    overflow: visible !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout {
    height: auto !important;
    min-height: calc(100vh - 108px) !important;
    overflow: visible !important;
    align-items: start !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column,
  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column > #contentPanel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-content-layout {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: none !important;
    align-items: start !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-form-column {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-structure-panel {
    position: sticky !important;
    top: 12px !important;
    align-self: start !important;
    max-height: calc(100vh - 132px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* Compact team chat in the topbar. The conversation stays in a popover so it
   is available on every dashboard view without taking over the editor. */
.workspace { position: relative; }

.topbar-chat-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.topbar-chat-toggle:hover,
.topbar-chat-toggle.has-unread {
  border-color: color-mix(in srgb, var(--purple) 34%, var(--line));
  background: var(--brand-cloud);
}

.topbar-chat-toggle .ui-icon { width: 17px; height: 17px; }
.ui-icon-chat-dots { -webkit-mask-image: url('/assets/icons/chat-dots.svg'); mask-image: url('/assets/icons/chat-dots.svg'); }

.topbar-chat-toggle > strong {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: #d74435;
  color: #ffffff;
  font-size: 10px;
  line-height: 1;
}
.topbar-chat-toggle > strong[hidden] { display: none !important; }

.toolbar .topbar-chat-toggle {
  flex: 0 0 auto;
}

.chat-nav {
  position: relative;
}

.chat-nav > strong {
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: #d74435;
  color: #ffffff;
  font-size: 10px;
  line-height: 1;
}

.chat-nav > strong[hidden] { display: none !important; }

.chat-nav.has-unread {
  border-color: color-mix(in srgb, var(--purple) 34%, rgba(255, 255, 255, 0.16));
}

.chat-popover {
  position: absolute;
  /* The popover is a sibling of the topbar inside .workspace. Anchor it to
     the topbar's actual height instead of the full workspace height. */
  top: 88px;
  right: 22px;
  z-index: 90;
  width: min(440px, calc(100vw - 34px));
  height: min(680px, calc(100vh - 108px));
  min-height: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 60px rgba(20, 23, 32, .22);
}

.chat-popover[hidden] { display: none !important; }

.chat-popover-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.chat-popover-header h2 { margin: 0; font-size: 20px; }
.chat-close-button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.chat-conversation-list {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  min-height: 76px;
  box-sizing: border-box;
  padding: 10px 12px 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
  border-bottom: 1px solid var(--line);
  background: #fbfcff;
}

.chat-conversation-list::-webkit-scrollbar { height: 8px; }
.chat-conversation-list::-webkit-scrollbar-track { background: transparent; }
.chat-conversation-list::-webkit-scrollbar-thumb { border-radius: 999px; background: #8a8f99; }

.chat-conversation-button {
  min-width: 150px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.chat-conversation-button:hover { background: #f1f3fa; }
.chat-conversation-button.is-active { border-color: color-mix(in srgb, var(--purple) 28%, var(--line)); background: var(--brand-cloud); }
.chat-conversation-button > span:not(.chat-avatar) { min-width: 0; display: grid; gap: 1px; }
.chat-conversation-button strong,
.chat-conversation-button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conversation-button strong { font-size: 11px; }
.chat-conversation-button small { color: var(--muted); font-size: 10px; }
.chat-conversation-button > b { min-width: 18px; padding: 3px 4px; border-radius: 999px; background: #d74435; color: #fff; font-size: 9px; text-align: center; }

.chat-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 10px;
  background: var(--chat-user-color, var(--purple));
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-user-avatar img,
.account-dialog-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.account-avatar-upload small, .field > small { display: block; color: var(--muted); font-size: 11px; line-height: 1.45; }
.chat-conversation-avatar { width: 30px; height: 30px; border-radius: 9px; }

.chat-thread {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  overflow-y: auto;
  background: #f7f8fb;
}

.chat-message { 
  max-width: 88%;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  align-self: flex-start;
}
.chat-message-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.chat-message:not(.is-own) .chat-message-content { align-items: flex-start; }

.chat-date-separator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.chat-date-separator::before,
.chat-date-separator::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--line);
}

.chat-date-separator span {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.chat-message.is-own { align-self: flex-end; flex-direction: row; }
.chat-message-body { min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 13px 13px 13px 4px; background: #fff; box-shadow: 0 3px 12px rgba(20, 23, 32, .04); }
.chat-message.is-own .chat-message-body { border-color: color-mix(in srgb, var(--purple) 20%, var(--line)); border-radius: 13px 13px 4px 13px; background: var(--brand-cloud); }
.chat-message-body header { display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px; }
.chat-message-body header strong { font-size: 11px; }
.chat-message-body header time { color: var(--muted); font-size: 9px; white-space: nowrap; }
.chat-message-body p { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message-read-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: 3px;
  margin-right: 5px;
  color: var(--text-accent);
  cursor: help;
}
.chat-message-read-status .ui-icon-show { width: 13px; height: 13px; }
.chat-message-read-label { margin-left: 3px; font-size: 8px; font-weight: 400; }
.chat-message-read-status::after {
  content: attr(data-readers);
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 5;
  width: max-content;
  max-width: 230px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity .15s ease, transform .15s ease;
}
.chat-message-read-status:hover::after,
.chat-message-read-status:focus-visible::after { opacity: 1; transform: translateY(0); }
.chat-message-body footer { display: flex; gap: 8px; margin-top: 6px; opacity: .7; }
.chat-message-body footer button,
.chat-compose-heading button { padding: 0; border: 0; background: transparent; color: var(--text-accent); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.chat-message-body footer button:hover,
.chat-compose-heading button:hover { text-decoration: underline; }
.chat-empty,
.chat-readonly-copy { margin: auto; color: var(--muted); font-size: 12px; text-align: center; }

.chat-compose { display: grid; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.chat-compose-heading { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 800; }
.chat-compose textarea { width: 100%; min-height: 64px; resize: vertical; }
.chat-compose-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-mention-list { display: flex; gap: 4px; min-width: 0; overflow-x: auto; }
.chat-mention-list button { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; background: #fbfcff; color: var(--text-accent); font: inherit; font-size: 9px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.chat-mention-list button:hover { border-color: var(--purple); background: var(--brand-cloud); }
.chat-compose .login-status { min-height: 0; margin: 0; }

@media (max-width: 720px) {
  .topbar-chat-label { display: none; }
  .topbar-chat-toggle { padding-inline: 8px; }
  .chat-popover { right: 12px; width: min(440px, calc(100vw - 24px)); }
}

/* Keep the structure map outside the scrolling surface. Only the editor form
   to its right should move, so the map never travels or jumps with the cards. */
@media (min-width: 941px) {
  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column {
    overflow: hidden !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column > #contentPanel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-content-layout {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-form-column {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-structure-panel {
    position: sticky !important;
    top: 12px !important;
    align-self: start !important;
    height: max-content !important;
    max-height: calc(100vh - 132px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

.manual-table-editor .mini-header-input,
.manual-table-editor .manual-column-editor-cell .field input,
.manual-table-editor .manual-column-editor-cell .field select,
.manual-table-editor .editor-table-cell-field input {
  min-height: 28px;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 12px;
}

.manual-table-editor .editor-table-cell-field {
  gap: 0;
}

.manual-table-editor .manual-table-actions.compact-actions {
  gap: 4px;
  margin: 5px 0 0;
}

.manual-table-editor .manual-table-actions.compact-actions .secondary-action,
.manual-table-editor .manual-row-tools .secondary-action {
  min-height: 27px;
  padding: 0 7px;
  border-radius: 7px;
  font-size: 12px;
}

.manual-table-editor .manual-row-tools {
  display: flex;
  gap: 4px;
  align-items: center;
  width: 158px;
  min-width: 158px;
}

.manual-table-editor .manual-row-tools-head {
  width: 158px;
  min-width: 158px;
}

/* Gecentreerde vierkante NG-logo tegel */
.brand-mark {
  padding: 0;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  margin: 0;
}

.asset-thumb img[src$="/assets/logo-ng.png"],
.asset-thumb img[src$="/assets/logo-ng-mark.png"] {
  object-fit: contain;
  object-position: center center;
  background: #ffffff;
}

/* Productdia: tabel als hoofdactie, foto als subtiele chip */
.product-editor-main-actions {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 340px);
  gap: 10px;
  align-items: stretch;
  margin: 10px 0 8px;
}

.product-table-action-card {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 64px;
  padding: 10px;
  border: 1px dashed rgba(83, 65, 165, 0.28);
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff, #f4f8fd);
}

.product-add-table-action {
  flex: 1 1 260px;
  min-height: 44px;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 12px 26px rgba(83, 65, 165, 0.18);
}

.product-add-mini-table-action {
  flex: 0 1 190px;
  min-height: 38px;
  justify-content: center;
}

.product-image-quick {
  width: 100%;
  min-width: 0;
  min-height: 64px;
  border: 1px solid #dfe6f1;
  border-radius: 14px;
  background: #ffffff;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.product-image-quick:hover,
.product-image-quick:focus-visible {
  border-color: rgba(83, 65, 165, 0.48);
  box-shadow: 0 0 0 3px rgba(83, 65, 165, 0.09);
  outline: none;
}

.product-image-quick-thumb {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid #dfe6f1;
  border-radius: 10px;
  background: #f3f6fb;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  padding: 4px;
}

.product-image-quick-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.product-image-quick-copy {
  min-width: 0;
}

.product-image-quick-copy strong,
.product-image-quick-copy small {
  display: block;
}

.product-image-quick-copy strong {
  font-size: 13px;
  line-height: 1.15;
}

.product-image-quick-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.image-bank-card {
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.image-bank-card:hover,
.image-bank-card:focus-visible {
  border-color: rgba(83, 65, 165, 0.42);
  box-shadow: 0 0 0 3px rgba(83, 65, 165, 0.08);
  outline: none;
}

.image-bank-card-action {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.image-bank-card.is-selected .image-bank-card-action {
  border-color: rgba(83, 65, 165, 0.3);
  background: rgba(83, 65, 165, 0.08);
  color: var(--text-accent);
}

@media (max-width: 980px) {
  .product-editor-main-actions {
    grid-template-columns: 1fr;
  }
}

/* Dia-knoppen */
.page-duplicate-button svg,
.page-delete-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Herstel naast-elkaar layout */
body[data-editor-layout="split"] #editorView.is-active {
  height: calc(100vh - 76px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 16px !important;
  background: transparent;
}

body[data-editor-layout="split"] .content-grid.is-split-layout {
  display: grid !important;
  grid-template-columns: minmax(460px, var(--editor-column-width)) 16px minmax(340px, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
  gap: 12px !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  align-items: stretch !important;
  position: relative;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .model-column {
  grid-area: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: auto !important;
  padding: 0 4px 24px 0 !important;
  z-index: auto !important;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .editor-splitter {
  display: block !important;
  grid-area: auto !important;
  min-height: 100% !important;
  cursor: col-resize !important;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .preview-column {
  grid-area: auto !important;
  order: initial !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  display: flex !important;
  grid-template-rows: none !important;
  width: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  border-radius: 22px;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .preview-column iframe {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .preview-height-handle,
body[data-editor-layout="split"] .content-grid.is-split-layout .sticky-preview-backdrop {
  display: none !important;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .editor-tabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  margin: 0 0 12px !important;
  box-shadow: var(--soft-shadow) !important;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .editor-panel {
  min-height: 0 !important;
  overflow: visible !important;
  padding-bottom: 36px;
}

/* Compacte previewkolom in naast-elkaar */
body[data-editor-layout="split"] .content-grid.is-split-layout {
  grid-template-columns: minmax(520px, var(--editor-column-width)) 10px minmax(320px, 1fr) !important;
  gap: 8px !important;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .editor-splitter::before {
  width: 3px;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .preview-column {
  justify-self: stretch !important;
  background: #d4dce7;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .preview-status {
  min-height: 34px;
  padding: 7px 12px;
}

/* Naast elkaar: previewhoogte verstelbaar houden en editor zelfstandig laten scrollen. */
body[data-editor-layout="split"] .content-grid.is-split-layout .model-column {
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 6px 140px 0 !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .preview-column {
  align-self: start !important;
  display: grid !important;
  grid-template-rows: 34px minmax(0, 1fr) 14px !important;
  height: var(--preview-panel-height, 280px) !important;
  min-height: var(--preview-panel-height, 280px) !important;
  max-height: var(--preview-panel-height, 280px) !important;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .preview-column iframe {
  grid-row: 2 !important;
  height: 100% !important;
  min-height: 0 !important;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .preview-height-handle {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  grid-row: 3 !important;
  grid-column: 1 !important;
  display: block !important;
  height: 14px;
  width: 100%;
  border: 0;
  border-radius: 0 0 16px 16px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(210, 217, 228, 0.85);
  cursor: row-resize;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .preview-height-handle::before {
  content: "";
  position: absolute;
  left: 34%;
  right: 34%;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  background: rgba(83, 65, 165, 0.34);
  transform: translateY(-50%);
}

body[data-editor-layout="split"] .content-grid.is-split-layout .preview-height-handle:hover::before,
body[data-editor-layout="split"] .content-grid.is-split-layout .preview-height-handle:focus-visible::before,
body[data-editor-layout="split"] .content-grid.is-preview-height-resizing .preview-height-handle::before {
  background: #5341A5;
  box-shadow: 0 0 0 5px rgba(83, 65, 165, 0.14);
}

/* Finale split-layout: links betrouwbaar scrollen, rechts preview-pane over volle hoogte. */
body[data-editor-layout="split"] #editorView.is-active {
  height: calc(100vh - 76px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 12px 14px 14px !important;
}

body[data-editor-layout="split"] .content-grid.is-split-layout {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .model-column {
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  padding: 0 10px 220px 0 !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .model-column > .editor-tabs,
body[data-editor-layout="split"] .content-grid.is-split-layout .model-column > .editor-panel {
  flex: 0 0 auto !important;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .model-column > .editor-panel[hidden] {
  display: none !important;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .preview-column {
  align-self: stretch !important;
  position: sticky !important;
  top: 0 !important;
  display: grid !important;
  grid-template-rows: 34px minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  background: #d4dce7 !important;
  border-radius: 18px;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .preview-column iframe {
  grid-row: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

body[data-editor-layout="split"] .content-grid.is-split-layout .preview-height-handle {
  display: none !important;
}

.image-layout-actions {
  flex-wrap: wrap;
}

.image-layout-note {
  margin-top: 8px;
}

.image-layout-actions .secondary-action {
  white-space: nowrap;
}
.general-visual-editor {
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--brand-cloud);
}

.general-visual-editor-heading,
.general-visual-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.general-visual-editor-heading {
  justify-content: space-between;
  margin-bottom: 10px;
}

.general-visual-editor-heading div,
.general-visual-item-copy {
  display: grid;
  gap: 4px;
}

.general-visual-editor-heading span {
  color: var(--muted);
  font-size: 0.86rem;
}

.general-visual-position-fields {
  margin-bottom: 10px;
}

.general-visual-items {
  display: grid;
  gap: 7px;
}

.general-visual-item {
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.general-visual-item .asset-thumb {
  width: 58px;
  height: 42px;
  flex: 0 0 58px;
}

.general-visual-item-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.general-visual-item-copy .secondary-action {
  justify-self: start;
}

.general-visual-remove {
  margin-left: auto;
}

/* Account home and login */
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(189, 166, 244, 0.55), transparent 28%),
    radial-gradient(circle at 84% 86%, rgba(83, 65, 165, 0.24), transparent 30%),
    linear-gradient(145deg, #f8f7fc 0%, #ede6fd 50%, #dbe1e8 100%);
}

.login-screen[hidden],
.app-shell[hidden] {
  display: none !important;
}

.login-card {
  width: min(560px, calc(100vw - 48px));
  padding: 42px;
  border: 1px solid rgba(83, 65, 165, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 32px 90px rgba(20, 9, 77, 0.16);
}

.login-legal {
  margin: 24px 0 0;
  text-align: center;
  font-size: 0.78rem;
}

.login-legal a {
  color: inherit;
}

.two-factor-recovery-button {
  width: 100%;
  margin-top: 14px;
}

.recovery-code-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}

.recovery-code-list code {
  padding: 9px 10px;
  border-radius: 8px;
  background: #f2eef9;
  color: #332764;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}

.login-logo {
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  overflow: hidden;
  border-radius: 27px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(20, 9, 77, 0.18);
}

.login-logo img {
  width: 70%;
  height: 70%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.login-heading {
  text-align: center;
}

.login-card > .login-heading {
  margin-bottom: 26px;
}

.login-card .login-form {
  display: grid;
  gap: 16px;
}

/* The login form is hidden while the 2FA challenge is active. Keep the
   hidden attribute authoritative even though the form gets a grid layout. */
.login-card .login-form[hidden] {
  display: none !important;
}

.login-card .field {
  gap: 8px;
}

.login-card .login-status {
  margin: -2px 0 0;
}

.login-heading h1 {
  margin: 4px 0 8px;
  font-size: 34px;
  line-height: 1.05;
}

.login-heading > p:last-child {
  margin: 0;
  color: var(--muted);
}

.login-users {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 30px 0 22px;
}

.login-user {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.login-user:hover,
.login-user.is-selected {
  border-color: color-mix(in srgb, var(--user-color) 55%, #ffffff);
  background: color-mix(in srgb, var(--user-color) 8%, #ffffff);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--user-color) 14%, transparent);
}

.login-user > strong,
.sidebar-user-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--user-color);
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
}

.login-user span,
.login-user small {
  display: block;
}

.login-user small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.login-status {
  min-height: 20px;
  margin: 8px 0;
  color: #a43f32;
  font-size: 13px;
}

.two-factor-panel[hidden] {
  display: none !important;
}

.two-factor-panel .login-heading h2 {
  margin: 4px 0 10px;
  font-size: 26px;
  line-height: 1.1;
}

.two-factor-panel .login-heading {
  margin-bottom: 24px;
}

.two-factor-panel .login-form {
  gap: 12px;
}

.two-factor-panel .login-status:empty {
  display: none;
}

.two-factor-setup {
  margin: 24px 0 22px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8f7fc;
}

.two-factor-setup p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.two-factor-qr {
  display: grid;
  place-items: center;
  width: min(240px, 100%);
  aspect-ratio: 1;
  margin: 16px auto 12px;
  padding: 12px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(25, 20, 50, 0.12);
}

.two-factor-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.two-factor-qr-help {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.two-factor-actions {
  display: flex;
  gap: 10px;
}

.two-factor-actions > button {
  flex: 1 1 0;
}

.login-submit {
  width: 100%;
  min-height: 44px;
}

.sidebar-user {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 8px;
}

.sidebar-footer .trash-nav {
  margin-top: 0;
}

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

.sidebar-user-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sidebar-user-copy small {
  color: #c7d1df;
}

.sidebar-user-avatar {
  box-shadow: 0 0 0 1px #ffffff;
}

.viewer-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 9px 12px;
  border: 1px solid #dbe1e8;
  border-radius: 10px;
  background: #f2f4f7;
  color: #4b5666;
  font-weight: 650;
}

.account-dialog-avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 16px;
  background: var(--user-color);
  color: #ffffff;
  font-size: 23px;
  font-weight: 850;
}

.typography-preset-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--purple) 18%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--purple) 5%, #ffffff);
}

.typography-preset-bar > div:first-child {
  display: grid;
  gap: 2px;
}

.typography-preset-bar span {
  color: var(--muted);
  font-size: 12px;
}

.typography-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.typography-setting-group {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfe;
}

.typography-setting-group h3 {
  margin: 0 0 12px;
  color: var(--text-accent);
  font-size: 15px;
}

.typography-style-list {
  display: grid;
  gap: 9px;
}

.typography-style-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(0, 2fr);
  gap: 18px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--purple) 13%, var(--line));
  border-left: 4px solid color-mix(in srgb, var(--purple) 55%, #ffffff);
  border-radius: 10px;
  background: #ffffff;
}

.typography-style-label {
  display: grid;
  gap: 3px;
}

.typography-style-label strong {
  color: var(--ink);
  font-size: 14px;
}

.typography-style-label span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.typography-style-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.typography-style-controls-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.typography-style-controls-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.typography-style-controls-one {
  grid-template-columns: minmax(0, 1fr);
  max-width: 320px;
}

@media (max-width: 1320px) {
  .typography-style-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .typography-style-controls-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Planning */
.planning-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
}

.planning-nav strong {
  min-width: 24px;
  min-height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 12px;
}

.planning-nav.active strong {
  background: rgba(255, 255, 255, 0.2);
}

.planning-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.planning-summary article {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid rgba(215, 222, 235, 0.92);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px rgba(20, 23, 32, 0.04);
}

.planning-summary strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.planning-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.planning-layout {
  display: grid;
  grid-template-columns: minmax(720px, 1fr) minmax(300px, 360px);
  gap: 12px;
  align-items: start;
}

.planning-calendar-panel {
  min-width: 0;
}

.planning-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.planning-calendar-toolbar h2,
.planning-agenda-panel h2 {
  margin: 2px 0 0;
  font-size: 19px;
  text-transform: capitalize;
}

.planning-month-actions,
.planning-detail-actions,
.planning-agenda-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.planning-weekdays,
.planning-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.planning-weekdays {
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: #f6f5fb;
}

.planning-weekdays span {
  padding: 9px 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
}

.planning-calendar {
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.planning-day {
  min-width: 0;
  min-height: 132px;
  padding: 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.planning-day:nth-last-child(7) {
  border-radius: 0 0 0 12px;
}

.planning-day:last-child {
  border-radius: 0 0 12px 0;
}

.planning-day.is-outside {
  background: #f7f8fb;
}

.planning-day.is-outside .planning-day-tasks,
.planning-day.is-outside time {
  opacity: 0.56;
}

.planning-day.is-today {
  background: color-mix(in srgb, var(--purple) 5%, #ffffff);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--purple) 55%, #ffffff);
}

.planning-day > header {
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
}

.planning-day > header time {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.planning-day.is-today > header time {
  background: var(--purple);
  color: #ffffff;
}

.planning-day > header button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.planning-day > header button:hover {
  background: var(--brand-cloud);
  color: var(--text-accent);
}

.planning-day-tasks {
  display: grid;
  gap: 4px;
}

.planning-task-chip {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 6px 7px;
  border: 1px solid color-mix(in srgb, var(--task-color) 28%, #ffffff);
  border-left: 3px solid var(--task-color);
  border-radius: 7px;
  background: color-mix(in srgb, var(--task-color) 8%, #ffffff);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.planning-task-chip:hover {
  background: color-mix(in srgb, var(--task-color) 15%, #ffffff);
}

.planning-task-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
}

.planning-task-chip i {
  flex: 0 0 auto;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--task-color);
  color: #ffffff;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
}

.planning-task-chip.is-done {
  opacity: 0.72;
}

.planning-task-chip.is-done span {
  text-decoration: line-through;
}

.planning-agenda-panel {
  position: sticky;
  top: 12px;
}

.planning-agenda-panel .panel-heading {
  align-items: flex-end;
}

.planning-agenda-list {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 295px);
  overflow: auto;
  padding-right: 2px;
}

.planning-agenda-item {
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--task-color) 22%, var(--line));
  border-left: 4px solid var(--task-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--task-color) 5%, #ffffff);
}

.planning-agenda-main {
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.planning-agenda-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.planning-agenda-date {
  min-height: 48px;
  display: grid;
  place-content: center;
  gap: 1px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--task-color) 11%, #ffffff);
  color: var(--task-color);
  text-align: center;
}

.planning-agenda-date strong {
  font-size: 20px;
  line-height: 0.95;
}

.planning-agenda-date span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.planning-agenda-date-line {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.planning-agenda-main time,
.planning-agenda-meta {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.planning-agenda-main time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  text-transform: capitalize;
}

.planning-agenda-copy > strong {
  font-size: 13px;
}

.planning-deadline {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef1f6;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

.planning-deadline.is-upcoming {
  background: color-mix(in srgb, var(--task-color) 10%, #ffffff);
  color: var(--task-color);
}

.planning-deadline.is-today {
  background: #fff2d9;
  color: #9a5a13;
}

.planning-deadline.is-overdue {
  background: #fae6e3;
  color: #9d2f28;
}

.planning-deadline.is-done {
  background: #e6f3ed;
  color: #2d6b55;
}

.planning-agenda-actions {
  margin-top: 8px;
}

.planning-agenda-actions .secondary-action {
  min-height: 27px;
  padding: 0 8px;
  border-color: var(--line);
  font-size: 10px;
}

.planning-empty {
  display: grid;
  gap: 5px;
  padding: 22px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}

.planning-empty strong {
  color: var(--ink);
}

.planning-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.planning-task-form {
  display: grid;
  gap: 13px;
}

.planning-form-help {
  margin: -5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.planning-new-category-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
}

.planning-task-detail {
  display: grid;
  gap: 15px;
}

.planning-status-pill {
  justify-self: start;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--task-color) 10%, #ffffff);
  color: var(--task-color);
  font-size: 11px;
  font-weight: 850;
}

.planning-task-detail dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

.planning-task-detail dl > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.planning-task-detail dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.planning-task-detail dd {
  margin: 0;
  color: var(--ink);
  white-space: pre-wrap;
}

.planning-missing-pdf {
  color: #9d2f28;
  font-size: 11px;
  font-weight: 750;
}

@media (max-width: 1320px) {
  .planning-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .planning-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .planning-agenda-panel {
    position: static;
  }

  .planning-agenda-list {
    max-height: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .planning-summary,
  .planning-agenda-list,
  .planning-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .planning-calendar-panel {
    overflow-x: auto;
  }

  .planning-weekdays,
  .planning-calendar {
    min-width: 720px;
  }
}

/* Dia-notities en profielmeldingen */
.slide-note-placement-action {
  gap: 6px;
}

.slide-note-placement-action > span {
  color: var(--purple);
  font-size: 16px;
}

.slide-note-placement-action.is-active {
  border-color: var(--purple);
  background: var(--brand-cloud);
  color: var(--text-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 12%, transparent);
}

.slide-notes-overview-action {
  gap: 7px;
}

.slide-notes-overview-action strong {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-cloud);
  color: var(--text-accent);
  font-size: 10px;
}

.sidebar-notification-badge {
  min-width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  margin-left: auto;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: #d74435;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
}

.account-notifications {
  margin: 20px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #f8f9fc;
}

.account-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.account-section-heading h3 {
  margin: 0;
  font-size: 16px;
}

.account-section-heading > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.account-notification-list,
.slide-note-messages,
.slide-note-overview {
  display: grid;
  gap: 8px;
}

.account-notification-list {
  max-height: 300px;
  overflow: auto;
}

.account-notification {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 8px;
  gap: 9px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.account-notification.is-unread {
  border-color: color-mix(in srgb, var(--purple) 30%, var(--line));
  background: color-mix(in srgb, var(--purple) 4%, #ffffff);
}

.account-notification > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.account-notification strong,
.account-notification small,
.account-notification em {
  display: block;
}

.account-notification small {
  color: var(--muted);
  font-size: 10px;
}

.account-notification em {
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-notification > i {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--purple);
}

.notification-avatar,
.slide-note-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--notification-color, var(--message-color, var(--purple)));
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.account-notification-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}

.slide-note-form,
.slide-note-thread,
.slide-note-reply-form {
  display: grid;
  gap: 12px;
}

.note-mention-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.note-mention-row > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.note-mention-row button {
  min-height: 27px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--mention-color) 30%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--mention-color) 7%, #ffffff);
  color: var(--mention-color);
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
}

.slide-note-thread-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}

.slide-note-thread-heading > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.slide-note-thread-heading small {
  color: var(--muted);
  font-size: 10px;
}

.slide-note-status {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.slide-note-status.is-open {
  background: var(--brand-cloud);
  color: var(--text-accent);
}

.slide-note-status.is-resolved {
  background: #e6f3ed;
  color: #2d6b55;
}

.slide-note-message {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #ffffff;
}

.slide-note-message header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.slide-note-message time {
  color: var(--muted);
  font-size: 10px;
}

.slide-note-message p {
  margin: 5px 0 0;
  white-space: pre-wrap;
  line-height: 1.45;
}

.slide-note-resolved-copy {
  margin: 0;
  padding: 10px;
  border-radius: 9px;
  background: #e6f3ed;
  color: #2d6b55;
  font-size: 12px;
  font-weight: 750;
}

.slide-note-overview-item {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--note-color);
  border-radius: 11px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.slide-note-overview-item.is-resolved {
  opacity: 0.68;
}

.slide-note-overview-dot {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--note-color);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
}

.slide-note-overview-item > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.slide-note-overview-item small {
  color: var(--muted);
  font-size: 10px;
}

.slide-note-overview-item em {
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
}

/* Fixed document map beside the long-form editor. */
.editor-content-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.editor-form-column {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.editor-add-slide-top {
  justify-self: start;
}

.editor-structure-panel {
  position: sticky;
  top: 0;
  z-index: 7;
  min-width: 0;
  max-height: calc(100vh - 116px);
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 34px rgba(20,23,32,.08);
  scrollbar-width: thin;
}

.editor-structure-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid var(--line);
}

.editor-structure-header .eyebrow { margin-bottom: 3px; }
.editor-structure-header h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.editor-structure-header > span { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: var(--brand-cloud); color: var(--text-accent); font-size: 11px; font-weight: 800; }
.editor-structure-list { display: grid; gap: 4px; padding: 10px 0; }

.editor-structure-item {
  width: 100%;
  display: grid;
  grid-template-columns: 18px minmax(0,1fr) 16px;
  align-items: center;
  gap: 5px;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.editor-structure-item:hover { background: #f5f7fb; border-color: var(--line); }
.editor-structure-item.is-active { background: var(--brand-cloud); border-color: color-mix(in srgb, var(--purple) 30%, var(--line)); }
.editor-structure-index { color: var(--text-accent); font-size: 16px; line-height: 1; text-align: center; }
.editor-structure-item strong, .editor-structure-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-structure-item strong { font-size: 12px; font-weight: 800; }
.editor-structure-item small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.editor-structure-chevron { color: var(--muted); font-size: 18px; line-height: 1; text-align: center; }
.editor-structure-add { width: 100%; min-height: 36px; border: 1px dashed var(--line); border-radius: 9px; background: #fff; color: var(--text-accent); font: inherit; font-weight: 800; cursor: pointer; }
.editor-structure-add:hover { border-color: var(--text-accent); background: var(--brand-cloud); }

@media (max-width: 940px) {
  .editor-content-layout { grid-template-columns: 1fr; }
  .editor-structure-panel { position: relative; top: auto; max-height: none; }
  .editor-structure-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Keep the structure map in place; only the long editor column scrolls. */
body[data-screen="editor"] #editorView.is-active { overflow: hidden !important; }
body[data-screen="editor"] .content-grid { height: 100% !important; min-height: 0 !important; overflow: hidden !important; }
body[data-screen="editor"] .model-column { height: 100%; min-height: 0; max-height: 100% !important; overflow: hidden !important; }
body[data-screen="editor"] #contentPanel { min-height: 0; flex: 1 1 auto; }
.editor-content-layout { height: 100%; min-height: 0; align-items: stretch; }
.editor-structure-panel { position: sticky; top: 12px; align-self: start; height: max-content; max-height: calc(100vh - 132px); overflow-y: auto; overflow-x: hidden; }
.editor-form-column { max-height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 8px; }

/* Product table options share one compact accordion row. */
.product-table-option-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.product-table-option-panel {
  display: block;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
}

.product-table-option-panel > summary {
  grid-row: 1;
  position: relative;
  z-index: 2;
  min-height: 38px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 9px 12px;
  border: 1px dashed rgba(83, 65, 165, 0.18);
  border-radius: 8px;
  background: #fbfcff;
  color: var(--text-accent);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.product-table-option-panel[data-product-table-option="settings"] > summary { grid-column: 1; }
.product-table-option-panel[data-product-table-option="pills"] > summary { grid-column: 2; }
.product-table-option-panel[data-product-table-option="extra"] > summary { grid-column: 3; }

/* Keep the inactive tabs readable, but visually secondary while one panel is open. */
.product-table-option-panels:has(.product-table-option-panel[open]) > .product-table-option-panel:not([open]) > summary {
  color: #8c96a8;
  border-color: #dfe4ee;
  background: #fbfcff;
}

.product-table-option-panel[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-style: solid;
  border-bottom-color: transparent;
  background: #ffffff;
  color: var(--text-accent);
}

.product-table-option-panel > .product-table-option-body {
  grid-row: auto;
  position: relative;
  z-index: 1;
  min-width: 0;
  width: calc(300% + 16px);
  margin: -8px 0 0;
  padding: 18px 10px 10px;
  border: 1px solid rgba(83, 65, 165, 0.18);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #fbfcff;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

.product-table-option-panel[data-product-table-option="settings"] > .product-table-option-body > *,
.product-table-option-panel[data-product-table-option="pills"] > .product-table-option-body > *,
.product-table-option-panel[data-product-table-option="extra"] > .product-table-option-body > * {
  grid-column: 1;
  min-width: 0;
}

.product-table-option-panel[data-product-table-option="pills"] > .product-table-option-body > * {
  grid-column: 2;
}

.product-table-option-panel[data-product-table-option="extra"] > .product-table-option-body > * {
  grid-column: 3;
}

.product-table-option-body > .field-grid {
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The details element remains in its title column; only its body grows across the row. */
.product-table-option-panel[data-product-table-option="pills"] > .product-table-option-body {
  margin-left: calc(-100% - 8px);
}

.product-table-option-panel[data-product-table-option="extra"] > .product-table-option-body {
  margin-left: calc(-200% - 16px);
}

.product-table-option-panel:not([open]) > .product-table-option-body {
  display: none;
}

.product-table-option-panel[open] > .product-table-option-body {
  display: block;
}

/* The open body spans the row while all three summaries stay visible above it. */
.product-table-option-panel[open] {
  grid-column: auto;
}

@media (max-width: 760px) {
  .product-table-option-panels { grid-template-columns: 1fr; grid-template-rows: none; }
  .product-table-option-panel > summary,
  .product-table-option-panel[data-product-table-option="settings"] > summary,
  .product-table-option-panel[data-product-table-option="pills"] > summary,
  .product-table-option-panel[data-product-table-option="extra"] > summary {
    grid-column: 1;
    grid-row: auto;
  }
  .product-table-option-panel > .product-table-option-body {
    grid-row: auto;
    margin-top: -8px;
    width: 100%;
    margin-left: 0 !important;
    grid-template-columns: 1fr;
  }
  .product-table-option-panel[data-product-table-option="settings"] > .product-table-option-body > *,
  .product-table-option-panel[data-product-table-option="pills"] > .product-table-option-body > *,
  .product-table-option-panel[data-product-table-option="extra"] > .product-table-option-body > * {
    grid-column: 1;
  }
}

/* Compact row controls: keep them at the left edge and use icons only. */
.manual-row-tools,
.manual-row-tools-head {
  width: 82px;
  min-width: 82px;
}

.manual-table-editor .manual-row-tools,
.manual-table-editor .manual-row-tools-head {
  width: 82px;
  min-width: 82px;
}

.manual-row-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 3px !important;
  background: #fbfcff;
  white-space: nowrap;
}

.manual-row-tools .field {
  flex: 0 0 24px;
  width: 24px;
  margin: 0;
}

.manual-row-tools .field > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.manual-row-tools .field input[type="color"] {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 2px;
}

.row-icon-action {
  width: 24px;
  min-width: 24px;
  height: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

.row-icon-action:hover,
.row-icon-action:focus-visible,
.row-icon-action:focus,
.row-icon-action:active {
  border: 0 !important;
  background: transparent !important;
  color: var(--text-accent);
  box-shadow: none;
}

.row-icon-action.row-delete-action {
  color: var(--ink);
}

.row-icon-action svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* The row action column is the same width in every table type. */
.general-info-editor .manual-row-tools,
.manual-table-editor .manual-row-tools {
  width: 82px !important;
  min-width: 82px !important;
  justify-content: center !important;
  gap: 2px !important;
  background: transparent;
}

.general-info-editor .manual-row-tools-head,
.manual-table-editor .manual-row-tools-head {
  width: 82px !important;
  min-width: 82px !important;
}

.manual-row-tools button.row-icon-action,
.manual-row-tools button.row-icon-action:hover,
.manual-row-tools button.row-icon-action:focus,
.manual-row-tools button.row-icon-action:active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

@media (max-width: 940px) {
  body[data-screen="editor"] #editorView.is-active,
  body[data-screen="editor"] .content-grid,
  body[data-screen="editor"] .model-column { overflow: visible !important; height: auto !important; max-height: none !important; }
  .editor-content-layout { height: auto; }
  .editor-form-column { max-height: none; overflow: visible; padding-right: 0; }
  .editor-structure-panel { position: sticky !important; top: 12px !important; align-self: start; height: max-content; max-height: calc(100vh - 132px) !important; overflow-y: auto !important; overflow-x: hidden; }
}

/* Keep the document structure visible even when the editor switches to a narrow layout. */
@media (max-width: 940px) {
  body[data-screen="editor"] #editorView.is-active { overflow-y: auto !important; overflow-x: hidden !important; height: calc(100vh - 68px) !important; }
  .editor-structure-panel { position: sticky !important; top: 12px !important; }
}

/* Final split-editor scroll ownership: only the right editor form scrolls. */
@media (min-width: 941px) {
  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column {
    overflow: hidden !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column > #contentPanel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-content-layout {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-form-column {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-structure-panel {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* Final editor scroll fix: one continuous editor scroll column. The structure
   map stays sticky inside that column while every editor card remains in flow. */
@media (min-width: 941px) {
  body[data-editor-layout="split"] .app-shell,
  body[data-editor-layout="split"] .workspace {
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body[data-editor-layout="split"] #editorView.is-active {
    height: calc(100vh - 76px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 28px !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout .model-column > #contentPanel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-content-layout {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: none !important;
    align-items: start !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-form-column {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  body[data-editor-layout="split"] .content-grid.is-split-layout #contentPanel .editor-structure-panel {
    position: sticky !important;
    top: 12px !important;
    align-self: start !important;
    max-height: calc(100vh - 132px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}