:root {
  /* Hoofdkleuren gebaseerd op EveAI kleurenschema */
  --jse-theme-color: var(--bs-primary); /* Paars als hoofdkleur */
  --jse-theme-color-highlight: var(--bs-secondary); /* Secundair paars voor highlights */

  /* Achtergrondkleuren */
  --jse-background-color: #fff;
  --jse-panel-background: #f8f9fa;
  --jse-panel-border: 1px solid var(--bs-secondary);
  --jse-panel-border-radius: 0.375rem;

  /* Tekstkleuren */
  --jse-text-color: var(--bs-body-color);
  --jse-text-color-inverse: #ffffff;

  /* Navigatie */
  --jse-navigation-bar-background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%);
  --jse-navigation-bar-background-highlight: var(--bs-secondary);
  --jse-navigation-bar-text-color: #ffffff;

  /* Status balk */
  --jse-status-bar-background: var(--bs-light);
  --jse-status-bar-color: var(--bs-body-color);
  --jse-status-bar-border: 1px solid var(--bs-secondary);
  --jse-status-bar-border-radius: 0 0 0.375rem 0.375rem;

  /* Main menu bar */
  --jse-main-menu-background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%);
  --jse-main-menu-color: #ffffff;
  --jse-main-menu-button-background-highlight: var(--bs-secondary);
  --jse-main-menu-button-color-highlight: #ffffff;

  /* Contextmenu */
  --jse-context-menu-background: #fff;
  --jse-context-menu-background-highlight: var(--bs-secondary);
  --jse-context-menu-color: var(--bs-body-color);
  --jse-context-menu-color-highlight: #ffffff;
  --jse-context-menu-border: 1px solid var(--bs-secondary);
  --jse-context-menu-box-shadow: 0 4px 8px rgba(118, 89, 154, 0.2);
  --jse-context-menu-border-radius: 0.375rem;

  /* Knoppen */
  --jse-button-background: var(--bs-primary);
  --jse-button-background-highlight: var(--bs-secondary);
  --jse-button-color: #ffffff;
  --jse-button-color-highlight: #ffffff;
  --jse-button-border-radius: 0.375rem;

  /* JSON Tree Mode */
  --jse-key-color: var(--bs-info);
  --jse-delimiter-color: #666;
  --jse-string-color: var(--bs-primary);
  --jse-number-color: var(--bs-warning);
  --jse-boolean-color: var(--bs-danger);
  --jse-null-color: #888;
  --jse-invalid-color: #e0b4b4;
  --jse-readonly-color: #888;
  --jse-readonly-background-color: #f0f0f0;

  /* Selectie */
  --jse-selection-background-color: rgba(118, 89, 154, 0.2);
  --jse-selection-background-inactive-color: rgba(118, 89, 154, 0.1);

  /* Foutmeldingen */
  --jse-error-color: var(--bs-danger);
  --jse-error-background-color: rgba(156, 45, 102, 0.1);

  /* Tooltips */
  --jse-tooltip-background: var(--bs-primary);
  --jse-tooltip-color: #ffffff;
  --jse-tooltip-border-radius: 0.375rem;
  --jse-tooltip-box-shadow: 0 4px 8px rgba(118, 89, 154, 0.2);
}

/* Extra stijlen voor de containers */
.jsoneditor-initialized {
  border: 1px solid var(--bs-secondary);
  border-radius: 0.375rem;
  min-height: 300px;
  box-shadow: 0 4px 8px rgba(118, 89, 154, 0.1);
}

.jsoneditor-readonly-mode {
  background-color: var(--bs-light);
}

/* Stijlen voor de knoppen in de editor */
.jse-button {
  border: none !important;
  transition: background-color 0.3s ease;
}

/* Stijlen voor veldlabels in de boom */
.jse-tree .jse-key {
  font-weight: 500;
}

/* Stijlen voor waarden in de boom */
.jse-tree .jse-value {
  font-family: monospace;
}

/* Verbeter de leesbaarheid van de tekstmodus */
.jse-text-mode {
  font-family: monospace;
  line-height: 1.5;
}