/* NGA Sport Platform — v3.33 Looks (paneel en kleine aanpassingen per look) */
.nga-th-knop {
  display: flex; align-items: center; gap: .5rem; width: 100%; margin-bottom: .35rem;
  padding: .45rem .6rem; border-radius: calc(var(--radius) - 2px); border: 1px solid hsl(var(--sidebar-border));
  background: transparent; color: hsl(var(--sidebar-foreground)); font: inherit; font-size: .8125rem; font-weight: 500; cursor: pointer;
}
.nga-th-knop:hover { background: hsl(var(--sidebar-accent)); }
.nga-th-zweef {
  position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60; width: 40px; height: 40px; margin: 0;
  justify-content: center; padding: 0; border-radius: 999px; background: hsl(var(--card)); color: hsl(var(--foreground));
  border-color: hsl(var(--border)); box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.nga-th-achter { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.35); display: flex; justify-content: flex-end; }
.nga-th-paneel {
  width: 380px; max-width: 100%; height: 100%; overflow-y: auto; background: hsl(var(--background)); color: hsl(var(--foreground));
  border-left: 1px solid hsl(var(--border)); padding: 18px 18px calc(24px + env(safe-area-inset-bottom)); box-shadow: -10px 0 30px rgba(0,0,0,.18);
  font-family: var(--font-sans);
}
.nga-th-kop { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.nga-th-kop h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: hsl(var(--foreground)) !important; }
.nga-th-kop p { margin: 2px 0 0; font-size: .8rem; color: hsl(var(--muted-foreground)); }
.nga-th-x { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: inherit; border-radius: 8px; width: 32px; height: 32px; cursor: pointer; }
.nga-th-sectie { margin-top: 18px; }
.nga-th-sectie h3 { margin: 0 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: hsl(var(--muted-foreground)) !important; }
.nga-th-looks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nga-th-look {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px; text-align: left; cursor: pointer;
  border: 2px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); color: inherit; font: inherit;
}
.nga-th-look.aan { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .18); }
.nga-th-look .nm { font-weight: 600; font-size: .85rem; margin-top: 6px; }
.nga-th-look .om { font-size: .72rem; color: hsl(var(--muted-foreground)); }
.nga-th-mini { display: flex; width: 100%; height: 64px; border: 1px solid; border-radius: 8px; overflow: hidden; }
.nga-th-mini .zb { width: 28%; border-right: 1px solid; padding: 6px 4px; display: flex; flex-direction: column; gap: 4px; }
.nga-th-mini .zb i { display: block; height: 5px; border-radius: 3px; }
.nga-th-mini .ih { flex: 1; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.nga-th-mini .ih b { display: block; height: 6px; width: 55%; border-radius: 3px; }
.nga-th-mini .kr { flex: 1; border: 1px solid; border-radius: 4px; padding: 3px; }
.nga-th-mini .kr i { display: block; height: 4px; width: 40%; border-radius: 2px; }
.nga-th-kleuren { display: flex; flex-wrap: wrap; gap: 10px; }
.nga-th-kleur { width: 32px; height: 32px; border-radius: 999px; border: 2px solid hsl(var(--background)); box-shadow: 0 0 0 1px hsl(var(--border)); cursor: pointer; }
.nga-th-kleur.aan { box-shadow: 0 0 0 2px hsl(var(--foreground)); }
.nga-th-schuif { display: flex; align-items: center; gap: 10px; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.nga-th-schuif input { flex: 1; accent-color: hsl(var(--primary)); }
.nga-th-seg { display: flex; flex-wrap: wrap; gap: 4px; background: hsl(var(--muted)); padding: 3px; border-radius: 10px; }
.nga-th-seg button { flex: 1 1 auto; border: 0; background: transparent; color: hsl(var(--muted-foreground)); font: inherit; font-size: .8rem; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.nga-th-seg button.aan { background: hsl(var(--background)); color: hsl(var(--foreground)); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.nga-th-voet { margin-top: 22px; }
.nga-th-reset { width: 100%; padding: 9px; border-radius: 10px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }
.nga-th-reset[disabled] { opacity: .45; cursor: default; }
@media (max-width: 640px) {
  .nga-th-achter { align-items: flex-end; }
  .nga-th-paneel { width: 100%; height: auto; max-height: 88vh; border-left: 0; border-top: 1px solid hsl(var(--border)); border-radius: 18px 18px 0 0; }
}

/* Titels in accentkleur (NGA Nacht standaard). */
html.nga-kop-accent main h1, html.nga-kop-accent main h2 { color: hsl(var(--nga-link)); }

/* Kleine verfijningen voor de looks. */
html.nga-thema.dark { color-scheme: dark; }
html.nga-thema.dark input, html.nga-thema.dark select, html.nga-thema.dark textarea { color-scheme: dark; }
html.nga-thema.dark .nga-st-vaan-bezocht { background: rgba(22, 163, 74, 0.22); color: #4ade80; }
html.nga-thema.dark .nga-st-vaan-niet_bezocht { background: rgba(220, 38, 38, 0.22); color: #f87171; }
html.nga-thema.dark .nga-twijfel { background: rgba(245, 158, 11, .18) !important; color: #fbbf24 !important; }
html.nga-thema.dark .nga-join-ook { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
html[data-nga-look="nacht"] [data-sidebar="sidebar"] { border-right: 3px solid hsl(var(--primary)); }
html.nga-schaduw main .rounded-lg.border, html.nga-schaduw main .rounded-xl.border { box-shadow: var(--shadow); }
/* Telefoon: niets mag buiten het scherm lopen. */
@media (max-width: 640px) {
  html.nga-thema main { overflow-x: hidden; }
  html.nga-thema main table { max-width: 100%; }
}