html, body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    /* Kaart in de calcite-shell default slot */
    #viewDiv {
      width: 100%;
      height: 100%;
    }

    /* Sketch toolbar wrapper */
    #sketchToolbar {
      display: flex;
      align-items: center;
      background: #BDE5FB;
      border: 2px solid #005D76;
      border-radius: 8px;
      padding: 6px 8px;
      gap: 4px;
      position: relative;
    }

    #sketchToolbar calcite-action {
      --calcite-action-indicator-color: #005D76;
    }

    /* Actieve knop markering */
    #sketchToolbar calcite-action[active] {
      background: rgba(0, 93, 118, 0.15);
      border-radius: 4px;
    }

    /* Sketch-widget opvallender maken als hoofdfunctie */
    #sketchWidget {
      --calcite-color-brand: #005D76;
      --calcite-color-brand-hover: #0097D9;
      --calcite-color-brand-press: #15292F;
      --calcite-color-foreground-1: #BDE5FB;
    }

    /* Zijpaneel (Calcite Shell Panel) */
    calcite-shell-panel {
      --calcite-shell-panel-width: 420px;
      --calcite-shell-panel-max-width: 900px;
    }

    #sidePanel {
      font-family: Arial, Helvetica, sans-serif;
    }

    #sidePanel calcite-block {
      --calcite-block-border-color: #bbb;
    }

    /* Popup-styling die je al had */
    .esri-popup__main-container {
      display: flex;
      position: relative;
      width: 740px;
      min-height: 250px;
      max-height: 800px;
      overflow: hidden;
      pointer-events: auto;
    }

    .esri-view-height-less-than-medium .esri-popup__main-container {
      max-height: 800px;
    }
    
    .esri-view .esri-view-surface--touch-none:focus::after {
      outline: none !important;
    }

    .esri-view-width-xlarge .esri-popup__main-container {
      width: 540px;
    }

    .esri-expand__popover-content .esri-widget--panel {
      width: auto;
    }

    /* ============================================================
   HUISSTIJL – Kleurenpalet
   1: #005D76  (donker teal – primair)
   2: #81D0F7  (licht blauw – accent)
   3: #0097D9  (medium blauw – hover)
   4: #15292F  (zeer donker – tekst/header)
   5: #BDE5FB  (zeer licht blauw – achtergronden)
   6: #49B5E4  (hemelsblauw – secundair)
   ============================================================ */

    /* Calcite Design System – brand tokens */
    :root {
      --calcite-color-brand: #005D76;
      --calcite-color-brand-hover: #0097D9;
      --calcite-color-brand-press: #15292F;
    }

    /* Navigatiebalk */
    calcite-navigation {
      --calcite-navigation-background: #005D76;
      --calcite-color-foreground-1: #005D76;
      --calcite-color-text-1: #ffffff;
      --calcite-color-text-2: #BDE5FB;
    }

    calcite-navigation-logo {
      --calcite-color-text-1: #ffffff;
      --calcite-color-text-2: #BDE5FB;
      font-family: 'Aptos Display', 'Segoe UI', Arial, sans-serif;
      font-size: 1.4rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    calcite-navigation calcite-button {
      --calcite-color-brand: #0097D9;
      --calcite-color-brand-hover: #49B5E4;
      --calcite-color-brand-press: #005D76;
    }

    /* Zijpaneel accenten */
    calcite-shell-panel {
      --calcite-color-brand: #005D76;
    }

    #sidePanel calcite-block {
      --calcite-color-brand: #005D76;
    }

    /* Knoppen algemeen */
    calcite-button {
      --calcite-color-brand: #005D76;
      --calcite-color-brand-hover: #0097D9;
      --calcite-color-brand-press: #15292F;
    }

    /* Switches / toggles */
    calcite-switch {
      --calcite-color-brand: #0097D9;
      --calcite-color-brand-hover: #49B5E4;
    }

    /* Loader */
    calcite-loader {
      --calcite-color-brand: #005D76;
      --calcite-color-brand-hover: #0097D9;
      --calcite-color-brand-press: #49B5E4;
    }

    /* Expand-widgets op de kaart */
    arcgis-expand {
      --calcite-color-brand: #005D76;
    }

    /* Links */
    a {
      color: #0097D9;
    }
    a:hover {
      color: #49B5E4;
    }