/* App chrome uses the homepage's navy blue. Diagram/plan colours are unchanged. */
/* A restored legacy workspace must never put its controls over the V3 editor. */
body:has(#v3Embed)[data-pe-tab='plan'] #appTool {
  display: none !important;
}
:root {
  --o1: #1e6285;
  --o2: #337a9f;
  --o3: #123c55;
  --t-bg: #f2f7fa;
  --t-bg2: #e5eff5;
  --t-ink: #112c3d;
  --t-muted: #506777;
  --t-line: #d0dfe8;
  --t-grad: linear-gradient(100deg, #256889, #112c3d);
  --accent: #1e6285;
  --accent-soft: #e5eff5;
  --ink: #112c3d;
  --line: #d0dfe8;
  --paper: #f2f7fa;
  --muted: #506777;
}
.app-nav {
  background: #112c3d;
  color: #fff;
  border-bottom-color: #34566a;
}
.app-nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: white;
  font:
    800 20px/1.1 'Instrument Sans',
    system-ui,
    sans-serif;
  white-space: nowrap;
}
.app-nav-logo img {
  display: block;
  width: 36px;
  height: 42px;
  object-fit: contain;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.app-nav-logo span {
  color: #e2540e;
}
.app-nav .app-tab {
  color: #d6e5ee;
}
.app-nav .app-tab:hover {
  background: #21475d;
  color: white;
}
.app-nav .app-tab.active {
  background: #285972;
  color: white !important;
}
.app-nav .app-tab.active::after {
  background: #e2540e;
}
.app-nav-right button,
.app-nav-right a {
  color: #edf5f9;
}
.app-nav-right button:hover,
.app-nav-right a:hover {
  background: #285972;
  color: white;
}
.app-nav-right .nav-pdf-btn {
  background: #e2540e;
  color: white;
  box-shadow: none;
}
.app-nav-right .nav-pdf-btn:hover {
  background: #e2540e;
}
.choose-screen {
  background:
    linear-gradient(#dce8ef 1px, transparent 1px),
    linear-gradient(90deg, #dce8ef 1px, transparent 1px), #f2f7fa;
  background-size: 42px 42px;
}
#app > header {
  background: #e8f1f6 !important;
  border-color: #c7dbe6 !important;
}
#app .panel {
  background: #f7fafc !important;
  border-color: #d0dfe8 !important;
}
#tools .tool.active,
#tools .tool-primary {
  background: #1e6285 !important;
  color: white !important;
  border-color: #1e6285 !important;
}
#tools button,
#tools summary {
  border-color: #c7dbe6 !important;
  color: #193e54 !important;
}
#app .brand {
  color: #112c3d;
}
#app .brand b {
  color: #1e6285;
}
.diagram-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
}
.diagram-tools button {
  padding: 8px 13px;
  border: 1px solid #c7dbe6;
  border-radius: 6px;
  background: white;
  color: #193e54;
  cursor: pointer;
}
.diagram-tools output,
.diagram-tools span {
  font-size: 12px;
  color: #506777;
}
#eendraadSvgWrap.diagram-viewport {
  height: min(65vh, 720px);
  min-height: 260px;
  overflow: auto;
  padding: 0;
  cursor: grab;
  touch-action: none;
  overscroll-behavior: contain;
  text-align: left;
}
#eendraadSvgWrap.diagram-viewport.dragging {
  cursor: grabbing;
}
#eendraadSvgWrap.diagram-viewport > svg {
  display: block;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  user-select: none;
}
@media (max-width: 768px) {
  .app-nav-logo {
    font-size: 18px;
    gap: 7px;
  }
  .app-nav-logo img {
    width: 29px;
    height: 34px;
  }
  #eendraadSvgWrap.diagram-viewport {
    height: 55vh;
  }
}

.diagram-tools[hidden] {
  display: none;
}

#peInstallationBtn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
}

/* Keep the two help entry points from covering one another on small screens. */
body:has(#aiPanel.open) .pe-vraag-knop {
  display: none !important;
}
#aiPanel #aiBody > p {
  font-size: 12px;
  line-height: 1.5;
}
#aiPanel #aiChatInput {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 76px;
  margin: 6px 0 10px;
  padding: 10px;
  border: 1px solid #bbcbd3;
  border-radius: 8px;
  font: inherit;
  resize: vertical;
}
#aiPanel #peAssistantSend {
  min-height: 40px;
}