/* Editor-lay-out: drie kolommen (boom / canvas / palet) over de volle
   vensterbreedte. Zie ArchitriumStories/epics/startscherm-en-editor/04-editor-lay-out-tree-canvas-properties.md. */

/* De editor over het hele scherm, in dezelfde indeling als de modelviewer
   (story startscherm-en-editor/86; zie .viewer-page in model.css): een smalle
   kopbalk met het logo en het menu, meldingen als smalle balk, één werkbalk over
   de volle breedte, de drie panelen in de rest van het venster en een
   statusbalk onderaan. De pagina zelf scrolt niet; wat niet past, scrolt binnen
   een paneel. Op een smal scherm staat alles onder elkaar (media query verderop). */
body.editor-page {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
}
.editor-page #page:not([hidden]) {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.editor-page #app-header {
  flex: none;
  box-sizing: border-box;
  height: 3.25rem;
  margin: 0;
  padding: 0 0.5rem 0 0.75rem;
  border-bottom: 1px solid #e2e8f0;
}
.editor-page #app-header .logo,
.editor-page #app-header .organization-logo {
  width: auto;
  height: 2.6rem;
}
.editor-page #menu-toggle {
  width: 2.25rem;
  height: 2.25rem;
}
/* Meldingen boven de werkbalk: een smalle balk over de volle breedte. */
.editor-page #page > p {
  flex: none;
  margin: 0;
  padding: 0.35rem 0.75rem;
  border: none;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;
}
.editor-page #editor-content:not([hidden]) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* De werkbalk over de volle breedte, met links en rechts de knoppen om de
   boom en het palet in en uit te klappen (editor-panels.js). */
#editor-toolbar-row {
  flex: none;
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
#editor-toolbar-row > .toolbar-button.icon-button {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0.3rem 0.25rem;
  background: transparent;
}
#editor-toolbar-row > .toolbar-button.icon-button svg {
  width: 18px;
  height: 18px;
}
#editor-toolbar-row > .toolbar-button.icon-button[aria-pressed="true"] {
  background: #e2e8f0;
}
#editor-layout.tree-collapsed #editor-tree-panel,
#editor-layout.palette-collapsed #editor-palette-panel {
  display: none;
}

/* De statusbalk onderaan, met de aanwijzing voor het canvas op één regel. De
   links naar de voorwaarden, privacy en about (legal-links.js) staan er rechts
   in; daarvoor houdt de balk rechts ruimte vrij. */
#editor-statusbar {
  flex: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 15rem 0 0.75rem;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}
.editor-page .legal-links {
  bottom: 0.2rem;
  background: none;
}

/* Modelnaam met Nieuw / importeren / exporteren ernaast (lokaal model). */
#editor-tree-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
#editor-tree-panel .panel-header h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

/* Naam van het model: klikken om aan te passen (story startscherm-en-editor/31). */
.model-title {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  margin: 0 0 0 -0.25rem;
  padding: 0.1rem 0.25rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  font: inherit;
  color: inherit;
  cursor: text;
}
.model-title:hover,
.model-title:focus-visible {
  border-color: #cbd5e1;
  background: #fff;
}
.model-title-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-title-icon {
  display: inline-flex;
  flex: 0 0 auto;
  opacity: 0;
  color: #64748b;
}
.model-title-icon svg {
  width: 12px;
  height: 12px;
}
.model-title:hover .model-title-icon,
.model-title:focus-visible .model-title-icon {
  opacity: 1;
}
.model-title-input {
  width: 100%;
  margin: 0;
  padding: 0.1rem 0.25rem;
  font: inherit;
  border: 1px solid #ff7e5f;
  border-radius: 4px;
}

/* Boom-stijl (zelfde mappenstructuur als Archi). */
.editor-tree .tree-folder {
  margin: 0.15rem 0 0.15rem 1.2rem;
}
.editor-tree > .tree-folder {
  margin-left: 0;
}

.tree-folder > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.3rem 0.4rem 0.3rem 0.6rem;
  border-radius: 4px;
  list-style-position: inside;
}

/* Hetzelfde pijltje in de viewboom (.tree-toggle) en bij de mappen in de
   modelboom (summary), in CSS getekend: het eigen pijltje van de browser bij
   een <summary> volgt de (grotere, vette) tekst en verschilt per browser. */
.editor-tree .tree-folder > summary {
  list-style: none;
}
.editor-tree .tree-folder > summary::-webkit-details-marker {
  display: none;
}
.tree-toggle::before,
.editor-tree .tree-folder > summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #64748b;
  vertical-align: 0.05em;
  transition: transform 0.15s ease;
}
.editor-tree .tree-folder > summary::before {
  margin-right: 0.45rem;
}
.tree-toggle[aria-expanded="true"]::before,
.editor-tree .tree-folder[open] > summary::before {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  .tree-toggle::before,
  .editor-tree .tree-folder > summary::before {
    transition: none;
  }
}
.tree-folder > summary:hover {
  background: #eef2f7;
}

.tree-folder > .tree-item-list {
  margin: 0.1rem 0 0.2rem 1.2rem;
}
/* Een submap in de modelboom staat al in een ingesprongen lijst. */
.tree-item-list > li > .tree-folder {
  margin-left: 0;
}

/* Volgorde in de modelboom door slepen (story startscherm-en-editor/27):
   een invoeglijn boven of onder het item waar het terechtkomt. */
.model-drop-before {
  box-shadow: inset 0 2px 0 #ff7e5f;
}
.model-drop-after {
  box-shadow: inset 0 -2px 0 #ff7e5f;
}
#editor-elements-tree [draggable="true"].dragging {
  opacity: 0.5;
}

.tree-item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tree-item-list li { margin: 0; }

.tree-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  width: 100%;
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: 4px;
  background: none;
  color: #0f172a;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tree-row:hover {
  background: #eef2f7;
}
.tree-row-icon {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-top: 0.1rem;
  display: inline-flex;
  color: #64748b;
}
.tree-row-icon img,
.tree-row-icon svg {
  width: 15px;
  height: 15px;
}
.tree-row-name {
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

/* Drieluik-indeling: boom links, canvas midden, palet rechts. */
#editor-layout {
  /* De koppen van de boom (modelnaam) en het palet zijn even hoog als de
     werkbalk boven het canvas, zodat ze één lijn vormen. */
  --editor-bar-height: 2.25rem;
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 0;
  min-height: 0;
  border: none;
  border-radius: 0;
}

/* Boompaneel links (Views en Model). */
#editor-tree-panel {
  /* Iets breder dan de boom in de viewer: in de kop staan de knoppen om op te slaan. */
  flex: 0 0 320px;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid #e2e8f0;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Panel header for tree panel */
.panel-header {
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.5rem 1rem;
  margin: 0;
  flex-shrink: 0;
}

.panel-header h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
}

/* Panel content wrapper that scrolls */
.panel-content {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.panel-block {
  padding: 0.5rem;
}
/* Views en Model in de editor: geen (afgeronde) rand om het blok; de
   gedeelde .panel-block uit style.css houdt die elders wel. */
#editor-tree-panel .tree-section.panel-block {
  border: none;
  border-radius: 0;
  /* Links evenveel ruimte als de titel erboven (.panel-header), zodat het
     pijltje van Views en Model niet tegen de rand staat; de bomen en
     meldingen in het blok schuiven mee. */
  padding: 0.5rem 0.75rem 0.5rem 1rem;
}

/* Canvas-paneel midden (het tekengebied). */
#editor-canvas-panel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #f8fafc;
  border: none;
  border-radius: 0;
  overflow: hidden;
}

/* Paletpaneel rechts. */
#editor-palette-panel {
  flex: 0 0 300px;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid #e2e8f0;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

#editor-palette-panel .panel-header {
  flex-shrink: 0;
}
#editor-tree-panel .panel-header,
#editor-palette-panel .panel-header {
  box-sizing: border-box;
  height: var(--editor-bar-height);
  padding: 0 0.5rem 0 0.75rem;
  align-items: center;
}
/* De koppen zoals in de viewer. */
#editor-tree-panel .panel-header h3,
#editor-palette-panel .panel-header h3 {
  font-size: 0.85rem;
}
/* De kop van de boom: de volledige modelnaam, over meer regels als hij lang is,
   en de knoppen op een eigen regel eronder (story startscherm-en-editor/87). */
#editor-tree-panel .panel-header {
  height: auto;
  min-height: var(--editor-bar-height);
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.1rem 0.25rem;
  padding: 0.45rem 0.5rem 0.3rem 0.75rem;
}
#editor-tree-panel .panel-header h3 {
  flex: 0 0 100%;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* De naam is een knop om hem te wijzigen: ook die breekt af in plaats van af te kappen. */
#editor-tree-panel .panel-header .model-title {
  text-align: left;
}
#editor-tree-panel .panel-header .model-title-name {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}

#editor-palette-hint {
  padding: 1rem;
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#editor-palette-content {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Palette content styling */
#editor-palette-content {
  padding: 0.5rem;
}

.palette-section {
  margin-bottom: 1rem;
}

.palette-section h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.palette-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, 28px);
  gap: 0.25rem;
}

.palette-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  cursor: grab;
  transition: background 0.2s, border-color 0.2s;
}

.palette-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.palette-item:active {
  cursor: grabbing;
}

.palette-item.dragging {
  opacity: 0.5;
}

.palette-item-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #475569;
}

.palette-item-icon svg {
  width: 100%;
  height: 100%;
}

/* ArchiMate-iconen zijn 32×32 PNG's; op 16×16 getoond (precies de helft,
   net als het palet in Archi), zodat ze scherp blijven. */
.palette-item-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* Een relatietype wordt aangeklikt (geselecteerd), niet gesleept
   (story startscherm-en-editor/15). */
.palette-item-relation {
  cursor: pointer;
}
.palette-item-relation.is-active {
  background: #ffe6dd;
  border-color: #ff7e5f;
  box-shadow: inset 0 0 0 1px #ff7e5f;
}

/* Views en Model zijn inklapbare blokken. */
.panel-content > .panel-block:first-child {
  margin-top: 0;
}
.tree-section.panel-block > summary {
  cursor: pointer;
  /* Het pijltje binnen de regel, ook in browsers die het anders ernaast zetten. */
  list-style-position: inside;
  margin: 0 0 0.5rem;
  padding: 0.1rem 0.2rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.tree-section.panel-block > summary:hover {
  background: #eef2f7;
}

/* Knoppen "Map toevoegen" / "View toevoegen" naast de titel Views
   (story startscherm-en-editor/11). Kleiner dan de standaard .icon-button,
   zodat de titelregel niet hoger wordt. */
.tree-section-actions {
  display: inline-flex;
  gap: 0.15rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.tree-section-actions .icon-button {
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  color: #64748b;
}
.tree-section-actions .icon-button:hover {
  background: #ffd2c2;
  color: #b83a1d;
}

/* Viewboom: uitklapknop + selecteerbare regel per map/view. */
#editor-views-tree .tree-item-list .tree-item-list {
  margin-left: 0.9rem;
}
.tree-node {
  display: flex;
  align-items: flex-start;
}
.tree-toggle {
  flex: 0 0 1.1rem;
  width: 1.1rem;
  padding: 0.25rem 0;
  border: none;
  background: none;
  color: #64748b;
  line-height: 1.4;
  cursor: pointer;
}
.tree-toggle[aria-hidden="true"] {
  visibility: hidden;
  cursor: default;
}
.tree-node .tree-row {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.85rem;
}
.tree-row.is-selected {
  background: #ffe6dd;
}
.tree-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tree-row-meta {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: #64748b;
}

/* Verwijder-icoon achter een view, element of relatie in de boom (story
   startscherm-en-editor/18). Ingetogen, zodat de boom rustig blijft. */
.tree-delete.icon-button {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  color: #94a3b8;
}
.tree-delete.icon-button:hover,
.tree-delete.icon-button:focus-visible {
  background: #ffd2c2;
  color: #b83a1d;
}
.tree-delete.icon-button svg {
  width: 14px;
  height: 14px;
}
#editor-elements-tree .tree-node .tree-row {
  flex: 1 1 auto;
  min-width: 0;
}

.tree-row:focus-visible {
  outline: 2px solid #ff7e5f;
  outline-offset: -2px;
}

/* Verplaatsen door slepen (story startscherm-en-editor/12). De lege ruimte
   onder de boom is ook een doel (naar de root), dus die moet er zijn. */
#editor-views-tree {
  min-height: 2rem;
  padding-bottom: 1rem;
  border-radius: 4px;
}
.tree-row.dragging {
  opacity: 0.5;
}
.tree-node.drop-target > .tree-row,
#editor-views-tree.drop-target,
#editor-views-block > summary.drop-target {
  background: #ffe6dd;
  box-shadow: inset 0 0 0 1px #ff7e5f;
}

/* Palet-item is met het toetsenbord te bedienen (Enter plaatst het element). */
.palette-item:focus-visible {
  outline: 2px solid #ff7e5f;
  outline-offset: 1px;
}

/* Eigenschappenpopup van een element, relatie of het model (story
   startscherm-en-editor/13 en /16). De typeregel toont het icoon van het
   element of de relatie, net als in het palet. */
#editor-element-type {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
#editor-element-type img {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
#editor-element-dialog textarea {
  font: inherit;
  padding: 0.4rem;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.75rem;
  resize: vertical;
}
.element-properties {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.element-property-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
  gap: 0.35rem;
  align-items: center;
}
.element-property-row input {
  margin-bottom: 0;
}
.element-property-row .icon-button {
  width: 1.75rem;
  height: 1.75rem;
}

/* Elementen verplaatsen en van formaat veranderen (story
   startscherm-en-editor/14). Zonder touch-action: none zou de browser een
   aanraking op het canvas zelf als scrollen/zoomen afhandelen en de sleep
   afbreken. */
#editor-canvas-svg {
  touch-action: none;
}
#editor-canvas-svg .diagram-object.is-editable {
  cursor: move;
}
#editor-canvas-svg .diagram-object.is-selected rect,
#editor-canvas-svg .diagram-object.is-selected > path {
  stroke: #ff7e5f;
  stroke-width: 2;
}
.resize-handle {
  fill: #fff;
  stroke: #ff7e5f;
  stroke-width: 1.5;
}
/* Sleepbolletjes van een geselecteerde relatie (story startscherm-en-editor/26):
   wit op een knikpunt (verplaatsen), gevuld midden op een recht deel (splitsen). */
.bend-handle {
  stroke: #ff7e5f;
  stroke-width: 1.5;
  cursor: move;
  touch-action: none;
}
.bendpoint-handle {
  fill: #fff;
}
.bendpoint-add-handle {
  fill: #ffd2c2;
}
.bend-handle:hover {
  fill: #ff7e5f;
}
/* Magic connector: het overzicht van toegestane relaties per richting
   (story startscherm-en-editor/17). */
.magic-direction {
  margin-bottom: 1rem;
}
.magic-direction h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
  overflow-wrap: anywhere;
}
.magic-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.35rem;
}
/* Bestaande relatie hergebruiken (story startscherm-en-editor/28): de
   keuzes hebben lange teksten, dus onder elkaar. */
.reuse-options {
  grid-template-columns: 1fr;
  margin-bottom: 0.75rem;
}
.magic-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  text-align: left;
  font-size: 0.85rem;
}
.magic-option:hover,
.magic-option:focus-visible {
  border-color: #ff7e5f;
  background: #ffe6dd;
}
.magic-option img {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

/* Geselecteerde relatie op het canvas (story startscherm-en-editor/19). */
#editor-canvas-svg .diagram-connection-group.is-selected .diagram-connection {
  stroke: #ff7e5f;
  stroke-width: calc(var(--line-width, 1.5px) + 1px);
}

/* Het gekozen bronelement van een nieuwe relatie. */
#editor-canvas-svg .diagram-object.is-relation-source rect,
#editor-canvas-svg .diagram-object.is-relation-source > path {
  stroke: #0284c7;
  stroke-width: 2.5;
  stroke-dasharray: 5 3;
}
#editor-relation-status {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  margin: 0;
  padding: 0.35rem 0.75rem;
  border: 1px solid #ff7e5f;
  border-radius: 999px;
  background: #fff;
  font-size: 0.8rem;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  pointer-events: none;
}

.selection-marquee {
  fill: rgba(255, 126, 95, 0.08);
  stroke: #ff7e5f;
  stroke-width: 1;
  stroke-dasharray: 4 3;
  pointer-events: none;
}
.resize-handle-nw, .resize-handle-se { cursor: nwse-resize; }
.resize-handle-ne, .resize-handle-sw { cursor: nesw-resize; }
.resize-handle-n, .resize-handle-s { cursor: ns-resize; }
.resize-handle-e, .resize-handle-w { cursor: ew-resize; }
/* Scheidslijn van een alt- of par-fragment verslepen (story startscherm-en-editor/45). */
.separator-handle {
  fill: #ff7e5f;
  stroke: #fff;
  stroke-width: 1;
  cursor: ns-resize;
}
/* Een bericht in een sequentiediagram omhoog of omlaag slepen (story 45). */
.uml-message-draggable {
  cursor: ns-resize;
}

/* Werkbalk boven het canvas (story startscherm-en-editor/21). */
#editor-toolbar {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  /* Past hij niet op één regel, dan loopt hij over meer regels. */
  min-height: 2.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0;
  padding: 0.25rem 0.5rem;
  background: transparent;
}
.toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0 0.5rem;
  border-right: 1px solid #e2e8f0;
}
.toolbar-group:last-child {
  border-right: none;
}
/* De knop voor de rondleiding staat helemaal rechts. */
.toolbar-group[data-group="help"] {
  margin-left: auto;
  border-left: 1px solid #e2e8f0;
}
.toolbar-button.icon-button {
  width: 1.75rem;
  height: 1.75rem;
  background: transparent;
}
.toolbar-button.icon-button.is-active {
  background: #ffe6dd;
  color: #b83a1d;
}
.toolbar-button.icon-button:disabled {
  color: #cbd5e1;
  background: transparent;
  cursor: default;
}
.toolbar-select {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.2rem 0.3rem;
  max-width: 11rem;
}
.toolbar-select-size {
  max-width: 6.5rem;
}
/* De kleuren van de ArchiMate-lagen (story 90): een menu onder de knop. */
.toolbar-layer-colors {
  position: relative;
  display: inline-flex;
}
.toolbar-layer-colors-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  padding: 0.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.15);
}
.toolbar-layer-colors-menu[hidden] {
  display: none;
}
/* De transparantie (story startscherm-en-editor/97): hetzelfde menu, met een schuif onderaan. */
.toolbar-opacity {
  position: relative;
  display: inline-flex;
}
.toolbar-opacity-menu {
  min-width: 11rem;
}
.toolbar-opacity-menu [aria-checked="true"] {
  font-weight: 600;
}
.toolbar-opacity-slider {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.5rem;
  align-items: center;
  padding: 0.4rem 0.5rem 0.3rem;
  border-top: 1px solid #e2e8f0;
  margin-top: 0.25rem;
  font-size: 0.85rem;
}
.toolbar-opacity-slider span {
  grid-column: 1 / -1;
}
.toolbar-opacity-slider output {
  min-width: 2.5rem;
  text-align: right;
}
.toolbar-layer-color {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border: none;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.toolbar-layer-color:hover,
.toolbar-layer-color:focus-visible {
  background: #f1f5f9;
}
.toolbar-layer-color-swatch {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid #94a3b8;
  border-radius: 3px;
}
.toolbar-color {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0;
  cursor: pointer;
}
.toolbar-color input[type="color"] {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  padding: 0.1rem;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.toolbar-color input[type="color"]:disabled {
  opacity: 0.4;
  cursor: default;
}
/* Een klein teken voor welke kleur het is: vlak, lijn of tekst. */
.toolbar-color-label {
  display: inline-block;
  width: 10px;
  height: 10px;
}
.toolbar-color-fill_color { background: #cbd5e1; }
.toolbar-color-line_color { border: 2px solid #64748b; box-sizing: border-box; }
.toolbar-color-font_color { border-bottom: 2px solid #64748b; box-sizing: border-box; }

/* Aanmaakdialoog voor map/view. */
#editor-create-dialog select {
  font: inherit;
  padding: 0.4rem;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.75rem;
}

/* Canvas met rooster en zoom/pan — de SVG vult het hele paneel. */
#editor-canvas-viewport {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
  height: 100%;
}
#editor-canvas-svg {
  width: 100%;
  height: 100%;
  display: block;
}
#editor-canvas-hint {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: #64748b;
}

/* Responsief: onder elkaar op kleine schermen. */
@media (max-width: 720px) {
  /* De pagina scrolt weer: geen gedeelde hoogte. */
  body.editor-page {
    height: auto;
    overflow: visible;
  }
  .editor-page #page:not([hidden]) {
    height: auto;
  }
  #editor-statusbar {
    padding-right: 0.75rem;
  }
  #editor-layout {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  #editor-tree-panel {
    flex-basis: auto;
    width: 100%;
    max-height: 40vh;
  }
  #editor-canvas-panel {
    flex-basis: auto;
    min-height: 50vh;
  }
  #editor-palette-panel {
    flex-basis: auto;
    width: 100%;
    max-height: 40vh;
  }
}


/* Viewpoints (story startscherm-en-editor/32): een element dat het viewpoint
   van de view niet toestaat, staat er vaag, zoals in Archi. */
#editor-canvas-svg .diagram-object.is-ghosted {
  opacity: 0.35;
}
#editor-palette-viewpoint {
  margin: 0.5rem 0.75rem 0;
}

/* De tekst van een geselecteerde map, over het canvas heen. */
#editor-folder-info {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 1.5rem 2rem;
  background: #fff;
  box-sizing: border-box;
}
.folder-info-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.folder-info-header h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
}
.folder-info-text {
  max-width: 48rem;
}
.folder-info-text p {
  margin: 0 0 0.75rem;
  line-height: 1.55;
}
.folder-info-children {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  max-width: 48rem;
}
.folder-info-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: none;
  border-radius: 4px;
  background: none;
  font: inherit;
  text-align: left;
  color: #0284c7;
  cursor: pointer;
}
.folder-info-link:hover,
.folder-info-link:focus-visible {
  background: #eef2f7;
}
.folder-info-link svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #64748b;
}
.folder-info-meta {
  margin-left: auto;
  font-size: 0.8rem;
  color: #64748b;
}

/* Balk boven de editor als het voorbeeldproject open is (story 32). */
.example-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid #ffd2c2;
  border-radius: 6px;
  background: #fff4ef;
  font-size: 0.9rem;
}
.example-banner[hidden] {
  display: none;
}
.example-banner a {
  font-weight: 600;
  white-space: nowrap;
}

/* Attributen en operaties van een UML-klasse (story 42): regels code. */
#editor-element-uml textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}

/* Multipliciteit en rolnamen (story 49): twee kolommen, bron en doel. */
#editor-element-uml-ends {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.75rem;
  align-items: end;
}
#editor-element-uml-ends[hidden] {
  display: none;
}
#editor-element-uml-ends .hint {
  grid-column: 1 / -1;
}
/* Interface als bolletje (story 49): het vinkje vóór de tekst. */
.checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.checkbox-field[hidden] {
  display: none;
}
.checkbox-field input {
  width: auto;
  margin: 0;
}

/* Ruimte onder het palet voor de links rechtsonder (story 58), zodat het
   laatste palet-item er niet onder verdwijnt. */
#editor-palette-content {
  padding-bottom: 1.75rem;
}

/* Relatie bij nesten (story startscherm-en-editor/61): per kind een regel met een keuze. */
.nesting-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}
.nesting-rows label {
  overflow-wrap: anywhere;
}

/* Eigen mappen in de modelboom (story startscherm-en-editor/65): de naam en
   de knoppen (nieuwe map, verwijderen) op één regel, en een markering als iets
   ín een map wordt gezet. */
#editor-elements-tree .tree-folder > summary {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
#editor-elements-tree .tree-folder-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tree-add-folder.icon-button {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  color: #94a3b8;
}
.tree-add-folder.icon-button:hover,
.tree-add-folder.icon-button:focus-visible {
  background: #ffd2c2;
  color: #b83a1d;
}
.tree-add-folder.icon-button svg {
  width: 14px;
  height: 14px;
}
.model-drop-into {
  background: #ffe6dd;
  box-shadow: inset 0 0 0 2px #ff7e5f;
}

/* Een map met inhoud kan niet weg (story startscherm-en-editor/66): het
   prullenbakje is vaag en licht niet op; de tooltip zegt waarom. */
.tree-delete.icon-button.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tree-delete.icon-button.is-disabled:hover,
.tree-delete.icon-button.is-disabled:focus-visible {
  background: transparent;
  color: #94a3b8;
}

/* Je werk beter beschermen (story startscherm-en-editor/68): wanneer het model
   voor het laatst als bestand is opgeslagen, en de herinnering daaraan. */
.backup-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Even ver van de rand als de paneelkop (.panel-header: 1rem). */
  margin: 0.5rem 1rem 0;
  font-size: 0.75rem;
  color: #64748b;
}
.backup-status[hidden] {
  display: none;
}
.backup-status span {
  flex: 1 1 auto;
}
/* Nog nooit als bestand opgeslagen (story 79): een alarm. */
.backup-status.is-alarm {
  padding: 0.5rem 0.6rem;
  border: 1px solid #fca5a5;
  border-left: 4px solid #dc2626;
  border-radius: 6px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 0.8rem;
  font-weight: 600;
}
.backup-status.is-alarm::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: #dc2626;
  /* Een waarschuwingsdriehoek met uitroepteken. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm0 6 1 8h-2l1-8zm-1.2 10h2.4v2.4h-2.4z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm0 6 1 8h-2l1-8zm-1.2 10h2.4v2.4h-2.4z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: backup-alarm 1.6s ease-in-out infinite;
}
.backup-status.is-alarm button {
  flex: 0 0 auto;
  padding: 0.2rem 0.6rem;
  border: 0;
  border-radius: 4px;
  background: #dc2626;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.backup-status.is-alarm button:hover,
.backup-status.is-alarm button:focus-visible {
  background: #b91c1c;
}
@keyframes backup-alarm {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .backup-status.is-alarm::before {
    animation: none;
  }
}
.backup-reminder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
  color: #78350f;
  font-size: 0.9rem;
}
.backup-reminder[hidden] {
  display: none;
}
.backup-reminder span {
  flex: 1 1 18rem;
}

/* Naam direct op het canvas wijzigen (story startscherm-en-editor/70): een
   tekstveld over het object heen. */
.direct-edit {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  padding: 0.3rem 0.4rem;
  border: 2px solid #ff7e5f;
  border-radius: 4px;
  background: #fff;
  font: 12px system-ui, sans-serif;
  text-align: center;
  resize: none;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

/* Zoeken in de modelboom (story startscherm-en-editor/71). */
.model-search {
  width: 100%;
  box-sizing: border-box;
  margin: 0.25rem 0 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font: inherit;
  font-size: 0.85rem;
}

/* "Komt voor in" (story startscherm-en-editor/72): de views als links. */
.appears-in-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.appears-in-link {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.3rem 0.4rem;
  border: none;
  border-radius: 4px;
  background: none;
  color: #0284c7;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.appears-in-link:hover,
.appears-in-link:focus-visible {
  background: #eef2f7;
}

/* Overzichtskaartje (story startscherm-en-editor/76): rechtsonder op het
   canvas, boven de tekening maar onder een tekstveld (.direct-edit). */
#editor-minimap {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  padding: 4px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  line-height: 0;
}
#editor-minimap[hidden] {
  display: none;
}
#editor-minimap-svg {
  display: block;
  cursor: pointer;
  touch-action: none;
}
#editor-minimap-content {
  pointer-events: none;
}
#editor-minimap-frame {
  fill: rgba(255, 126, 95, 0.12);
  stroke: #ff7e5f;
  stroke-width: 1.5;
}

/* Contextmenu met de rechtermuisknop (story startscherm-en-editor/75). */
.context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 13rem;
  padding: 0.25rem 0;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  font-size: 0.85rem;
}
.context-menu-item {
  display: flex;
  width: 100%;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border: 0;
  background: none;
  color: #0f172a;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.context-menu-item:hover,
.context-menu-item:focus {
  background: #fff1ec;
  outline: none;
}
.context-menu-item:focus-visible {
  outline: 2px solid #ff7e5f;
  outline-offset: -2px;
}
.context-menu-item.is-disabled {
  color: #94a3b8;
  cursor: default;
}
.context-menu-item.is-disabled:hover,
.context-menu-item.is-disabled:focus {
  background: #f1f5f9;
}
.context-menu-item kbd {
  font: inherit;
  color: #64748b;
}
.context-menu-separator {
  height: 1px;
  margin: 0.25rem 0;
  background: #e2e8f0;
}

/* Modelcontrole (story startscherm-en-editor/74); .modal-wide staat in style.css. */
.check-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.25rem 1rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.85rem;
}
.check-options legend {
  padding: 0 0.25rem;
  color: #64748b;
}
.check-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}
/* Niet de algemene invoerstijl (volle breedte, marge eronder) uit style.css. */
.check-option input {
  flex: none;
  width: auto;
  margin: 0;
}
.check-results {
  max-height: 50vh;
  overflow-y: auto;
}
.check-level h4 {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.9rem;
}
.check-level-error h4 {
  color: #b91c1c;
}
.check-level-warning h4 {
  color: #b45309;
}
.check-level-advice h4 {
  color: #1d4ed8;
}
.check-level ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.check-issue {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #0f172a;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.check-issue:hover,
.check-issue:focus-visible {
  background: #fff1ec;
}
.check-issue strong {
  font-weight: 600;
}