/* Desktop-indeling "menu links": vaste zwarte navigatie links in groepen, witte bovenbalk met paginanaam,
   zoeken en je naam, strakke kaarten en een beginscherm met de cijfers bovenaan.
   Dit blad staat aan of uit via het knopje in de bovenbalk (zie kiesIndeling in app.js). */
@media (min-width: 1100px) {
  :root { --nav-b: 236px; --top-h: 58px; --radius: 10px;
    --schaduw: 0 1px 2px rgba(16,16,16,.05), 0 4px 14px rgba(16,16,16,.05); }
  body { background: #f1f2f4; font-size: 14.5px; line-height: 1.5; }

  /* ---- navigatie links ---- */
  header.hoofdbalk {
    position: fixed; inset: 0 auto 0 0; width: var(--nav-b); z-index: 50;
    flex-direction: column; align-items: stretch; gap: 0; padding: 0 10px 14px; overflow-y: auto;
  }
  header.hoofdbalk #naar-start {
    gap: 12px !important; padding: 16px 8px 16px; margin: 0 -10px 6px; padding-left: 18px;
    border-bottom: 3px solid var(--geel);
  }
  header.hoofdbalk img { height: 46px; }
  header.hoofdbalk .titel { font-size: 15.5px; line-height: 1.2; }
  header.hoofdbalk .titel small { font-size: 10.5px; margin-top: 3px; }
  nav.menu { flex-direction: column; flex-wrap: nowrap; margin: 0; gap: 2px; }
  .menukop { display: block; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
    color: #8d8d8d; padding: 14px 10px 4px; }
  nav.menu a { padding: 8px 10px; font-size: 14px; border-radius: 7px; gap: 10px; color: #e8e8e8; }
  nav.menu a svg { width: 18px; height: 18px; flex: none; }
  nav.menu a:hover { background: #ffffff14; }
  nav.menu a.actief { background: var(--geel); color: var(--zwart); }

  /* ---- bovenbalk ---- */
  .kop-rechts {
    position: fixed; top: 0; left: var(--nav-b); right: 0; height: var(--top-h); z-index: 40; margin: 0;
    background: var(--wit); border-bottom: 1px solid #e2e3e6; padding: 0 28px; gap: 12px; color: var(--zwart);
  }
  #paginatitel { display: block; font-size: 18px; font-weight: 800; margin-right: 14px; white-space: nowrap; min-width: 150px; }
  .kop-rechts .bel { color: var(--grijs-700); font-size: 18px; }
  #zoekknop {
    display: flex; align-items: center; gap: 9px; flex: 1; max-width: 480px; text-align: left; font-size: 14px;
    background: #f6f7f8; border: 1px solid #e2e3e6; border-radius: 7px; padding: 8px 12px; color: var(--grijs-500);
  }
  #zoekknop:hover { border-color: var(--grijs-500); }
  .zoektekst { display: inline; font-size: 14px; }
  .kop-rechts #indeling-knop { margin-left: auto; font-size: 14px; border: 1px solid #e2e3e6; border-radius: 7px;
    padding: 7px 11px; background: var(--wit); color: var(--grijs-700); font-weight: 600; }
  .kop-rechts #indeling-knop:hover { border-color: var(--grijs-500); }
  .kop-rechts .wie { display: block; line-height: 1.2; }
  .kop-rechts .wie strong { display: block; font-size: 13.5px; }
  .kop-rechts .wie span { font-size: 12px; color: var(--grijs-500); text-transform: capitalize; }

  /* ---- werkvlak ---- */
  main { margin: 0 0 0 var(--nav-b); padding: calc(var(--top-h) + 22px) 28px 40px; max-width: 1640px; }
  #meekijkbalk { margin-left: var(--nav-b); position: fixed !important; top: 0; right: 0; left: 0; }
  body:has(#meekijkbalk) .kop-rechts { top: 40px; }
  body:has(#meekijkbalk) main { padding-top: calc(var(--top-h) + 62px); }

  /* ---- beginscherm: cijfers bovenaan, je taken links, het park kleiner rechts ---- */
  body[data-pagina="overzicht"] #inhoud {
    display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0 18px; align-items: start;
  }
  body[data-pagina="overzicht"] #inhoud > * { grid-column: 1 / -1; order: 6; }
  body[data-pagina="overzicht"] #inhoud > .installtip { order: 0; }
  body[data-pagina="overzicht"] #inhoud > .welkom { order: 1; }
  body[data-pagina="overzicht"] #inhoud > .kpi-rij { order: 2; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  body[data-pagina="overzicht"] #inhoud > .blokrij { order: 3; grid-column: 1; grid-template-columns: 1fr; }
  body[data-pagina="overzicht"] #inhoud > .parkblok { order: 3; grid-column: 2; }
  body[data-pagina="overzicht"] #inhoud > .uitleg { order: 5; }
  /* Zonder kaart (of zonder takenblokken) mag het andere blok de volle breedte nemen. */
  body[data-pagina="overzicht"] #inhoud:not(:has(> .parkblok)) > .blokrij,
  body[data-pagina="overzicht"] #inhoud:not(:has(> .blokrij)) > .parkblok { grid-column: 1 / -1; }

  /* De chatknop mag niet over de knoppen van een geopend paneel vallen. */
  body:has(.overlay) #gzchat-knop { display: none; }

  /* ---- kaarten en bouwstenen: strakker ---- */
  .kaart, .kpi { border: 1px solid #e2e3e6; }
  .kpi .waarde { font-size: 28px; }
  .uitleg { border-radius: 8px; }
  .knop { border-radius: 7px; }
  .knop.stil { border-color: #d9dbdf; }
  .knop.stil:hover { border-color: var(--grijs-500); filter: none; }
  input, select, textarea { border-radius: 7px; border-color: #d9dbdf; }
  .tabs { border-bottom-width: 1px; }
  h1 { font-size: 24px; }
}