/* ======= SECTIE NAVIGATOR ======= */
#section-nav {
  display: none; overflow-x: auto; gap: 6px;
  padding: 4px 0 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#section-nav::-webkit-scrollbar { display: none; }
.snav-btn {
  white-space: nowrap; padding: 7px 14px;
  border: 1.5px solid var(--border); border-radius: 20px;
  background: #fff; font-size: 13px; cursor: pointer;
  flex-shrink: 0; color: var(--blue); font-weight: 600; transition: all 0.15s;
}
.snav-btn.actief { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ======= MOBIEL OPSLAAN-BALK ======= */
#mobile-save-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  padding: 10px 16px; background: #fff;
  box-shadow: 0 -3px 16px rgba(0,0,0,0.13);
  gap: 10px; z-index: 80;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
#mobile-save-bar .btn-primary { flex: 1; justify-content: center; padding: 14px; }

/* ======= HAMBURGER BUTTON ======= */
#btn-hamburger {
  display: none;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 20px; padding: 4px 10px; border-radius: 6px; cursor: pointer;
  line-height: 1;
}

/* ======= MOBIEL DROPDOWN MENU ======= */
#mobile-menu {
  position: fixed; top: 56px; right: 0;
  background: var(--blue); color: #fff;
  width: 220px; z-index: 200;
  border-radius: 0 0 0 10px;
  box-shadow: -2px 4px 16px rgba(0,0,0,0.35);
  flex-direction: column; padding: 8px 0;
}
#mobile-menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: none; color: #fff;
  padding: 13px 20px; font-size: 15px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#mobile-menu button:last-child { border-bottom: none; }
#mobile-menu button:hover { background: rgba(255,255,255,0.12); }
#mobile-menu-overlay {
  position: fixed; inset: 0; z-index: 199;
  background: rgba(0,0,0,0.25);
}

/* ======= MOBILE ======= */
@media (max-width: 768px) {
  #user-naam { display: none; }
  #btn-hamburger { display: block; }
  #user-info { display: none; }

  #screen-dashboard { padding: 12px; }
  .dash-header { margin-bottom: 12px; }

  #section-nav { display: flex; }

  .form-section-header {
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; user-select: none;
  }
  .form-section-header .sectie-pijl {
    font-size: 11px; opacity: 0.7; margin-left: 8px;
    transition: transform 0.2s; flex-shrink: 0;
  }
  .form-section.collapsed .sectie-pijl { transform: rotate(-90deg); }
  .form-section.collapsed .form-body { display: none; }

  #mobile-save-bar { display: flex; }
  .form-actions { display: none; }
  #screen-form { padding: 12px 12px 80px; }
  .form-body { padding: 14px 14px; }

  .radio-btn { padding: 14px 8px; font-size: 14px; min-height: 48px; }
  .check-row { gap: 8px; padding: 10px 0; }
  .field input, .field select, .field textarea { padding: 13px 13px; font-size: 16px; }

  .meting-table input { padding: 11px 4px; font-size: 15px; }
  .meting-table th { font-size: 11px; padding: 8px 4px; }

  .rapport-card { padding: 12px 14px; }
  .rapport-card .rc-info h3 { font-size: 14px; }
}

@media (max-width: 400px) {
  .radio-group { gap: 5px; }
  .radio-btn { font-size: 13px; padding: 13px 5px; }
}

@media (min-width: 769px) {
  #section-nav { display: none !important; }
  #mobile-save-bar { display: none !important; }
}