/* Documentatie: kijkvenster en delen */
.docs-modal { max-width: min(1180px, 96vw); width: 96vw; }
.docs-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.docs-bar .hint { margin: 0; }
.docs-frame { display: block; width: 100%; height: min(74vh, 900px); border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.docs-add { display: grid; grid-template-columns: 1.2fr 1.4fr 150px auto auto; gap: 8px; align-items: center; margin: 12px 0 4px; }
.docs-add input, .docs-add select, .docs-search { border: 1px solid var(--field-line); border-radius: 8px; padding: 9px 11px; background: var(--field); color: inherit; font: inherit; min-width: 0; }
.docs-search { width: 100%; margin-bottom: 12px; }
.docs-users { display: flex; flex-direction: column; gap: 4px; grid-column: 1 / -1; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); max-height: 240px; overflow: auto; }
.docs-users small { color: var(--muted); font-weight: 400; }
.docs-dyn { display: contents; }
@media (max-width: 820px) {
  .docs-add { grid-template-columns: 1fr; }
  .docs-frame { height: 68vh; }
}

/* Document maken in het platform */
.docs-how, .dbe-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dbe-menu { grid-template-columns: repeat(3, 1fr); }
.docs-pick { display: flex; flex-direction: column; gap: 3px; text-align: left; border: 1px solid var(--line); background: var(--card); color: inherit; border-radius: 9px; padding: 10px 12px; cursor: pointer; font: inherit; }
.docs-pick small { color: var(--muted); font-weight: 400; line-height: 1.35; }
.docs-pick:hover, .docs-pick.on { border-color: var(--blue-d); box-shadow: 0 0 0 1px var(--blue-d) inset; }
.dbe .page-head h1 { margin-top: 10px; }
.dbe-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dbe-edit { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dbe-prev { position: sticky; top: 12px; }
.dbe-frame { display: block; width: 100%; height: calc(100vh - 28px); border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.dbe-sec { display: flex; flex-direction: column; gap: 10px; }
.dbe-kind { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dbe-row { display: flex; gap: 6px; align-items: center; min-width: 0; }
.dbe-row .grow, .dbe-row > input, .dbe-row > textarea { flex: 1 1 0; min-width: 0; }
.dbe-row > input.short { flex: 0 1 190px; }
.dbe input[type=text], .dbe textarea, .dbe select { border: 1px solid var(--field-line); border-radius: 8px; padding: 7px 9px; background: var(--field); color: var(--text); font: inherit; font-size: 14px; }
.dbe textarea { width: 100%; resize: vertical; line-height: 1.45; display: block; }
.dbe textarea.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.dbe input.strong { font-weight: 700; }
.dbe-block { border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 7px; }
.dbe-sub { border-left: 3px solid var(--line); padding-left: 10px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.dbe-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dbe-ib { flex: none; width: 28px; height: 28px; border: 1px solid var(--line); background: var(--card); color: inherit; border-radius: 7px; cursor: pointer; font: inherit; line-height: 1; padding: 0; }
.dbe-ib:disabled { opacity: .35; cursor: default; }
.dbe-ib:hover:not(:disabled) { border-color: var(--blue-d); }
.dbe-hint { color: var(--muted); font-size: 12.5px; }
.dbe-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--line); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dbe-via { padding-left: 28px; color: var(--muted); }
.dbe-via input { font-size: 13px !important; }
.dbe-node { display: flex; flex-direction: column; gap: 4px; border-left: 3px solid var(--line); padding-left: 8px; }
.dbe-node select { flex: none; width: 112px; }
.dbe-node2 { padding-left: 62px; }
.dbe-node2 input { font-size: 13px !important; }
.dbe-table .dbe-ib { font-weight: 400; }
.dbe-scroll { overflow-x: auto; }
.dbe-table { border-collapse: collapse; width: 100%; }
.dbe-table th, .dbe-table td { padding: 2px; vertical-align: top; min-width: 120px; }
.dbe-table th input { width: 100%; font-weight: 700; }
.dbe-table .dbe-acts { min-width: 0; white-space: nowrap; width: 1%; }
.dbe-table .dbe-acts .dbe-ib { margin-left: 2px; }
.dbe-img { max-width: 100%; max-height: 220px; border: 1px solid var(--line); border-radius: 8px; align-self: flex-start; }
.dbe-addb { align-self: flex-start; }
@media (max-width: 1100px) {
  .dbe-cols { grid-template-columns: 1fr; }
  .dbe-prev { position: static; }
  .dbe-frame { height: 70vh; }
  .dbe-menu { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .docs-how, .dbe-menu, .dbe-cards { grid-template-columns: 1fr; } }
.dbe-devsel { flex: 0 1 170px !important; min-width: 0; font-size: 13px !important; }