commit 6295c58d336f0bb73c325e323c54f9aabf4406ae
Author: Sam <sam@geyskens.eu>
Date:   Sat Feb 28 00:02:02 2026 +0100

    first commit

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..75e80c8
--- /dev/null
+++ b/README.md
@@ -0,0 +1,212 @@
+# Leerdoelen Tracker
+
+Leerdoelen-opvolgsysteem voor GO! scholengroepen.
+
+## Rollenstructuur
+
+| Rol | Wat kan die? |
+|---|---|
+| `superadmin` | Platformbeheer, scholengroep ICT aanwijzen |
+| `scholengroep_ict` | Scholen aanmaken, school ICT en directeurs toewijzen |
+| `school_ict` | Leerkrachten en klassen van eigen school beheren |
+| `director` | Overzicht van eigen school raadplegen |
+| `teacher` | Leerdoelen invullen |
+
+Alle gebruikers (behalve superadmin) loggen in via **Microsoft Entra ID**.
+
+---
+
+## Snelle start
+
+```bash
+# 1. Configuratie
+cp .env.example .env
+# Vul POSTGRES_PASSWORD, SECRET_KEY, BASE_URL en Entra gegevens in
+
+# 2. JSON doelen klaarzetten
+#    Voer converteer_doelen.py uit en kopieer de doelen/ map hier
+
+# 3. Opstarten
+docker compose up -d
+
+# 4. Superadmin wachtwoord instellen
+# Ga naar http://localhost/auth/setup
+```
+
+---
+
+## Entra ID configureren
+
+1. Ga naar https://portal.azure.com → **App registrations** → **New registration**
+2. Naam: `Leerdoelen Tracker`
+3. **Supported account types**: kies **"Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant)"**
+   - Dit is cruciaal! Elke school heeft een eigen tenant.
+4. **Redirect URI**: `https://jouwdomain.be/auth/callback`
+5. Na aanmaken → **Certificates & secrets** → nieuwe client secret aanmaken
+6. Kopieer **Application (client) ID** en de secret naar `.env`
+
+### Benodigde API permissions
+- `openid` (ingebouwd)
+- `profile` (ingebouwd)
+- `email` (ingebouwd)
+- `User.Read` (Microsoft Graph)
+
+---
+
+## Opstartflow voor een nieuwe scholengroep
+
+### Stap 1: Superadmin setup (eenmalig)
+```
+http://jouwdomain.be/auth/setup
+→ Stel wachtwoord in voor admin@leerdoelen.local
+```
+
+### Stap 2: Scholengroep ICT toevoegen (superadmin)
+```
+Dashboard → Scholengroep ICT → Toevoegen
+→ Vul Microsoft e-mailadres in van de ICT-medewerker
+→ Zij loggen in via "Inloggen met Microsoft" en krijgen automatisch de juiste rol
+```
+
+### Stap 3: Scholen aanmaken (scholengroep ICT)
+```
+Dashboard → School toevoegen
+→ Naam: "Basisschool De Krekel"
+→ E-maildomeinen: "dekrekel.be" (optioneel, voor automatische koppeling)
+```
+
+### Stap 4: Directeur/School ICT toevoegen (scholengroep ICT)
+```
+Dashboard → Gebruiker toevoegen
+→ Selecteer school, vul Microsoft e-mail in, kies rol
+```
+
+### Stap 5: Leerkrachten toevoegen (school ICT of directeur)
+```
+Directeur dashboard → Leerkracht toevoegen
+```
+
+---
+
+## Automatische schoolkoppeling via e-maildomein
+
+Als je een e-maildomein koppelt aan een school (bv. `dekrekel.be`),
+dan wordt elke nieuwe gebruiker die inlogt met een adres op dat domein
+**automatisch** aan die school gekoppeld met de rol `teacher`.
+
+Handig als leerkrachten zelf de URL krijgen en inloggen zonder dat je
+ze eerst handmatig hoeft toe te voegen.
+
+---
+
+## Onderhoud
+
+### Database backup
+```bash
+docker compose exec db pg_dump -U leerdoelen leerdoelen > backup_$(date +%Y%m%d).sql
+```
+
+### Doelen updaten
+```bash
+# Nieuwe JSON bestanden kopiëren
+cp -r doelen/ /pad/naar/leerdoelen/doelen/
+docker compose restart backend
+```
+
+### Logs
+```bash
+docker compose logs -f backend
+```
+
+---
+
+## CI/CD via Gitea Actions
+
+### Hoe het werkt
+
+Bij elke push op `main`:
+1. Runner bouwt de Docker image van `./backend`
+2. Image wordt gepusht naar de Gitea Container Registry met twee tags:
+   - `:latest` — altijd de meest recente versie
+   - `:sha-<commithash>` — voor traceerbaarheid en rollback
+3. Runner SSH't naar de VPS → `docker compose pull && docker compose up -d`
+
+### Eenmalige setup in Gitea
+
+#### 1. Repository variabelen (Settings → Actions → Variables)
+
+| Naam | Waarde | Uitleg |
+|---|---|---|
+| `GITEA_REGISTRY` | `gitea.jouwdomein.be` | Hostname van je Gitea instantie |
+
+#### 2. Repository secrets (Settings → Actions → Secrets)
+
+| Naam | Waarde | Uitleg |
+|---|---|---|
+| `REGISTRY_USER` | `jouw-gitea-gebruikersnaam` | Gitea login voor de registry |
+| `REGISTRY_TOKEN` | `gitea_xxxx...` | Gitea Access Token (Settings → Applications → Generate token, scope: `package:write`) |
+| `DEPLOY_HOST` | `123.456.789.0` | IP of hostnaam van de app-VPS |
+| `DEPLOY_USER` | `deploy` | SSH gebruiker op de VPS |
+| `DEPLOY_SSH_KEY` | `-----BEGIN OPENSSH...` | Privésleutel (zie stap 3) |
+| `DEPLOY_PORT` | `22` | SSH poort (weglaten = standaard 22) |
+| `DEPLOY_PATH` | `/opt/leerdoelen` | Pad naar de docker-compose map op de VPS |
+
+#### 3. SSH deploy key aanmaken
+
+Voer dit uit op je **lokale machine** (niet op de VPS):
+
+```bash
+ssh-keygen -t ed25519 -C "gitea-deploy" -f ~/.ssh/gitea_deploy -N ""
+```
+
+Publieke sleutel toevoegen aan de VPS:
+```bash
+cat ~/.ssh/gitea_deploy.pub | ssh user@jouw-vps "cat >> ~/.ssh/authorized_keys"
+```
+
+Privésleutel kopiëren naar Gitea secret `DEPLOY_SSH_KEY`:
+```bash
+cat ~/.ssh/gitea_deploy
+```
+
+#### 4. `.env` op de VPS aanpassen
+
+Voeg toe aan `/opt/leerdoelen/.env`:
+```
+BACKEND_IMAGE=gitea.jouwdomein.be/jouw-org/leerdoelen-tracker:latest
+```
+
+#### 5. Eerste push
+
+```bash
+git init
+git remote add origin https://gitea.jouwdomein.be/jouw-org/leerdoelen-tracker.git
+git add .
+git commit -m "Initial commit"
+git push -u origin main
+```
+
+De pipeline start automatisch. Je kan de voortgang volgen via
+**Gitea → jouw repo → Actions**.
+
+### Handmatig deployen
+
+Via de Gitea UI: **Actions → Build, Push & Deploy → Run workflow**
+
+Of via de VPS zelf (zonder pipeline):
+```bash
+cd /opt/leerdoelen
+docker compose pull backend
+docker compose up -d --no-deps backend
+```
+
+### Rollback naar vorige versie
+
+```bash
+# Bekijk beschikbare tags in de registry
+# Pas de image tag aan in .env:
+BACKEND_IMAGE=gitea.jouwdomein.be/jouw-org/leerdoelen-tracker:sha-a1b2c3d4
+
+docker compose pull backend
+docker compose up -d --no-deps backend
+```
diff --git a/backend/Dockerfile b/backend/Dockerfile
new file mode 100644
index 0000000..230e767
--- /dev/null
+++ b/backend/Dockerfile
@@ -0,0 +1,27 @@
+FROM python:3.12-slim
+
+WORKDIR /app
+
+# Systeem dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libpq-dev \
+    gcc \
+    && rm -rf /var/lib/apt/lists/*
+
+# Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# App code + entrypoint (chmod als root, vóór USER switch)
+COPY . .
+COPY entrypoint.sh /app/entrypoint.sh
+RUN chmod +x /app/entrypoint.sh
+
+# Non-root user voor security
+RUN useradd -m appuser && chown -R appuser:appuser /app
+USER appuser
+
+EXPOSE 5000
+
+ENTRYPOINT ["/app/entrypoint.sh"]
+CMD ["gunicorn", "--bind", "0.0.0.0:5000", "--workers", "4", "--timeout", "120", "app:app"]
diff --git a/backend/app.py b/backend/app.py
new file mode 100644
index 0000000..3138d58
--- /dev/null
+++ b/backend/app.py
@@ -0,0 +1,76 @@
+import os
+from flask import Flask
+from flask_sqlalchemy import SQLAlchemy
+from flask_login import LoginManager
+from flask_migrate import Migrate
+from werkzeug.middleware.proxy_fix import ProxyFix
+
+db = SQLAlchemy()
+login_manager = LoginManager()
+migrate = Migrate()
+
+
+def create_app():
+    app = Flask(__name__, template_folder='templates', static_folder='static')
+
+    # Config
+    app.config['SECRET_KEY'] = os.environ['SECRET_KEY']
+    app.config['SQLALCHEMY_DATABASE_URI'] = os.environ['DATABASE_URL']
+    app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+    app.config['BASE_URL'] = os.environ.get('BASE_URL', 'http://localhost')
+    app.config['ORG_NAME']  = os.environ.get('ORG_NAME', 'GO! Scholengroep')
+
+    # OAuth2 config (voor later)
+    app.config['MICROSOFT_CLIENT_ID'] = os.environ.get('MICROSOFT_CLIENT_ID')
+    app.config['MICROSOFT_CLIENT_SECRET'] = os.environ.get('MICROSOFT_CLIENT_SECRET')
+    app.config['MICROSOFT_TENANT_ID'] = os.environ.get('MICROSOFT_TENANT_ID', 'common')
+    app.config['GOOGLE_CLIENT_ID'] = os.environ.get('GOOGLE_CLIENT_ID')
+    app.config['GOOGLE_CLIENT_SECRET'] = os.environ.get('GOOGLE_CLIENT_SECRET')
+
+    # ProxyFix: Flask zit achter nginx als reverse proxy.
+    # x_for=1, x_proto=1 zorgt dat Flask de echte client IP en https ziet.
+    app.wsgi_app = ProxyFix(app.wsgi_app, x_for=1, x_proto=1, x_host=1)
+
+    # Extensions
+    db.init_app(app)
+    migrate.init_app(app, db)
+    login_manager.init_app(app)
+    login_manager.login_view = 'auth.login'
+    login_manager.login_message = 'Gelieve in te loggen.'
+
+    # Import models (zodat Flask-Migrate ze kent)
+    from models import User, School, SchoolYear, Class, TeacherClass, Assessment
+
+    @login_manager.user_loader
+    def load_user(user_id):
+        return User.query.get(int(user_id))
+
+    # Blueprints registreren
+    from routes.auth import auth_bp
+    from routes.api import api_bp
+    from routes.admin import admin_bp
+    from routes.pages import pages_bp
+
+    app.register_blueprint(auth_bp, url_prefix='/auth')
+    app.register_blueprint(api_bp, url_prefix='/api')
+    app.register_blueprint(admin_bp, url_prefix='/admin')
+    app.register_blueprint(pages_bp)
+
+    # ── Auditlog cleanup (1 jaar bewaren) ─────────────────────────────────────
+    @app.cli.command('cleanup-audit')
+    def cleanup_audit():
+        """Verwijder auditlog entries ouder dan 1 jaar. Voer uit via cron of handmatig."""
+        from models import AuditLog
+        from datetime import datetime, timedelta
+        cutoff  = datetime.utcnow() - timedelta(days=365)
+        deleted = AuditLog.query.filter(AuditLog.timestamp < cutoff).delete()
+        db.session.commit()
+        print(f"Verwijderd: {deleted} audit entries ouder dan {cutoff.date()}")
+
+    return app
+
+
+app = create_app()
+
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0', port=5000)
diff --git a/backend/entrypoint.sh b/backend/entrypoint.sh
new file mode 100755
index 0000000..974e4c8
--- /dev/null
+++ b/backend/entrypoint.sh
@@ -0,0 +1,8 @@
+#!/bin/bash
+set -e
+
+echo "→ Flask-Migrate: database upgraden naar laatste versie..."
+flask db upgrade
+
+echo "→ App starten..."
+exec "$@"
diff --git a/backend/migrations/alembic.ini b/backend/migrations/alembic.ini
new file mode 100644
index 0000000..fc4ec07
--- /dev/null
+++ b/backend/migrations/alembic.ini
@@ -0,0 +1,37 @@
+[alembic]
+script_location = migrations
+prepend_sys_path = .
+
+[loggers]
+keys = root,sqlalchemy,alembic
+
+[handlers]
+keys = console
+
+[formatters]
+keys = generic
+
+[logger_root]
+level = WARN
+handlers = console
+qualname =
+
+[logger_sqlalchemy]
+level = WARN
+handlers =
+qualname = sqlalchemy.engine
+
+[logger_alembic]
+level = INFO
+handlers =
+qualname = alembic
+
+[handler_console]
+class = StreamHandler
+args = (sys.stderr,)
+level = NOTSET
+formatter = generic
+
+[formatter_generic]
+format = %(levelname)-5.5s [%(name)s] %(message)s
+datefmt = %H:%M:%S
diff --git a/backend/migrations/env.py b/backend/migrations/env.py
new file mode 100644
index 0000000..0bd01de
--- /dev/null
+++ b/backend/migrations/env.py
@@ -0,0 +1,64 @@
+import logging
+from logging.config import fileConfig
+from flask import current_app
+from alembic import context
+
+config = context.config
+fileConfig(config.config_file_name)
+logger = logging.getLogger('alembic.env')
+
+
+def get_engine():
+    try:
+        return current_app.extensions['migrate'].db.get_engine()
+    except (TypeError, AttributeError):
+        return current_app.extensions['migrate'].db.engine
+
+
+def get_engine_url():
+    try:
+        return get_engine().url.render_as_string(hide_password=False).replace('%', '%%')
+    except AttributeError:
+        return str(get_engine().url).replace('%', '%%')
+
+
+config.set_main_option('sqlalchemy.url', get_engine_url())
+target_db = current_app.extensions['migrate'].db
+
+
+def get_metadata():
+    if hasattr(target_db, 'metadatas'):
+        return target_db.metadatas[None]
+    return target_db.metadata
+
+
+def run_migrations_offline():
+    url = config.get_main_option("sqlalchemy.url")
+    context.configure(url=url, target_metadata=get_metadata(), literal_binds=True)
+    with context.begin_transaction():
+        context.run_migrations()
+
+
+def run_migrations_online():
+    def process_revision_directives(context, revision, directives):
+        if getattr(config.cmd_opts, 'autogenerate', False):
+            script = directives[0]
+            if script.upgrade_ops.is_empty():
+                directives[:] = []
+                logger.info('No changes in schema detected.')
+
+    conf_args = current_app.extensions['migrate'].configure_args
+    if conf_args.get("process_revision_directives") is None:
+        conf_args["process_revision_directives"] = process_revision_directives
+
+    connectable = get_engine()
+    with connectable.connect() as connection:
+        context.configure(connection=connection, target_metadata=get_metadata(), **conf_args)
+        with context.begin_transaction():
+            context.run_migrations()
+
+
+if context.is_offline_mode():
+    run_migrations_offline()
+else:
+    run_migrations_online()
diff --git a/backend/migrations/script.py.mako b/backend/migrations/script.py.mako
new file mode 100644
index 0000000..2c01563
--- /dev/null
+++ b/backend/migrations/script.py.mako
@@ -0,0 +1,24 @@
+"""${message}
+
+Revision ID: ${up_revision}
+Revises: ${down_revision | comma,n}
+Create Date: ${create_date}
+
+"""
+from alembic import op
+import sqlalchemy as sa
+${imports if imports else ""}
+
+# revision identifiers, used by Alembic.
+revision = ${repr(up_revision)}
+down_revision = ${repr(down_revision)}
+branch_labels = ${repr(branch_labels)}
+depends_on = ${repr(depends_on)}
+
+
+def upgrade():
+    ${upgrades if upgrades else "pass"}
+
+
+def downgrade():
+    ${downgrades if downgrades else "pass"}
diff --git a/backend/migrations/versions/0001_initial_schema.py b/backend/migrations/versions/0001_initial_schema.py
new file mode 100644
index 0000000..5dd5534
--- /dev/null
+++ b/backend/migrations/versions/0001_initial_schema.py
@@ -0,0 +1,122 @@
+"""Initial schema
+
+Revision ID: 0001
+Revises:
+Create Date: 2025-01-01 00:00:00
+"""
+from alembic import op
+import sqlalchemy as sa
+from sqlalchemy.dialects import postgresql
+
+revision = '0001'
+down_revision = None
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # Alle tabellen aanmaken als ze nog niet bestaan
+    # (idempotent via checkfirst=True)
+    op.execute("""
+        CREATE TABLE IF NOT EXISTS schools (
+            id SERIAL PRIMARY KEY,
+            name VARCHAR(255) NOT NULL,
+            slug VARCHAR(100) NOT NULL UNIQUE,
+            email_domains TEXT[] NOT NULL DEFAULT '{}',
+            created_at TIMESTAMP DEFAULT NOW()
+        )
+    """)
+    op.execute("""
+        CREATE TABLE IF NOT EXISTS school_years (
+            id SERIAL PRIMARY KEY,
+            school_id INTEGER REFERENCES schools(id) ON DELETE CASCADE,
+            label VARCHAR(20) NOT NULL UNIQUE,
+            is_active BOOLEAN DEFAULT TRUE,
+            created_at TIMESTAMP DEFAULT NOW()
+        )
+    """)
+    op.execute("""
+        CREATE TABLE IF NOT EXISTS users (
+            id SERIAL PRIMARY KEY,
+            email VARCHAR(255) NOT NULL UNIQUE,
+            password_hash VARCHAR(255),
+            first_name VARCHAR(100),
+            last_name VARCHAR(100),
+            role VARCHAR(20) NOT NULL DEFAULT 'teacher',
+            school_id INTEGER REFERENCES schools(id) ON DELETE SET NULL,
+            is_active BOOLEAN DEFAULT TRUE,
+            created_at TIMESTAMP DEFAULT NOW(),
+            last_login TIMESTAMP,
+            oauth_provider VARCHAR(20),
+            oauth_id VARCHAR(255),
+            entra_tenant_id VARCHAR(255)
+        )
+    """)
+    op.execute("""
+        CREATE TABLE IF NOT EXISTS classes (
+            id SERIAL PRIMARY KEY,
+            school_id INTEGER NOT NULL REFERENCES schools(id) ON DELETE CASCADE,
+            name VARCHAR(50) NOT NULL,
+            created_at TIMESTAMP DEFAULT NOW(),
+            UNIQUE(school_id, name)
+        )
+    """)
+    op.execute("""
+        CREATE TABLE IF NOT EXISTS teacher_classes (
+            user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
+            class_id INTEGER REFERENCES classes(id) ON DELETE CASCADE,
+            PRIMARY KEY (user_id, class_id)
+        )
+    """)
+    op.execute("""
+        CREATE TABLE IF NOT EXISTS assessments (
+            id SERIAL PRIMARY KEY,
+            user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+            school_id INTEGER NOT NULL REFERENCES schools(id) ON DELETE CASCADE,
+            school_year_id INTEGER NOT NULL REFERENCES school_years(id) ON DELETE CASCADE,
+            vak_id VARCHAR(50) NOT NULL,
+            goal_id VARCHAR(50) NOT NULL,
+            status VARCHAR(10) NOT NULL,
+            updated_at TIMESTAMP DEFAULT NOW(),
+            UNIQUE(user_id, school_year_id, vak_id, goal_id)
+        )
+    """)
+    op.execute("""
+        CREATE TABLE IF NOT EXISTS audit_logs (
+            id SERIAL PRIMARY KEY,
+            timestamp TIMESTAMP NOT NULL DEFAULT NOW(),
+            user_id INTEGER REFERENCES users(id) ON DELETE SET NULL,
+            school_id INTEGER REFERENCES schools(id) ON DELETE SET NULL,
+            action VARCHAR(50) NOT NULL,
+            category VARCHAR(20) NOT NULL,
+            target_type VARCHAR(50),
+            target_id VARCHAR(100),
+            detail TEXT,
+            ip_address VARCHAR(45)
+        )
+    """)
+    op.execute("CREATE INDEX IF NOT EXISTS ix_audit_logs_timestamp ON audit_logs(timestamp)")
+    op.execute("CREATE INDEX IF NOT EXISTS ix_audit_logs_action ON audit_logs(action)")
+    op.execute("CREATE INDEX IF NOT EXISTS ix_audit_logs_category ON audit_logs(category)")
+
+    # Verwijder school_year_id van classes als die nog bestaat (oude structuur)
+    op.execute("""
+        DO $$ BEGIN
+            IF EXISTS (
+                SELECT 1 FROM information_schema.columns
+                WHERE table_name='classes' AND column_name='school_year_id'
+            ) THEN
+                ALTER TABLE classes DROP COLUMN school_year_id;
+            END IF;
+        END $$
+    """)
+
+
+def downgrade():
+    op.execute("DROP TABLE IF EXISTS audit_logs CASCADE")
+    op.execute("DROP TABLE IF EXISTS assessments CASCADE")
+    op.execute("DROP TABLE IF EXISTS teacher_classes CASCADE")
+    op.execute("DROP TABLE IF EXISTS classes CASCADE")
+    op.execute("DROP TABLE IF EXISTS users CASCADE")
+    op.execute("DROP TABLE IF EXISTS school_years CASCADE")
+    op.execute("DROP TABLE IF EXISTS schools CASCADE")
diff --git a/backend/models.py b/backend/models.py
new file mode 100644
index 0000000..29bfdd4
--- /dev/null
+++ b/backend/models.py
@@ -0,0 +1,206 @@
+from datetime import datetime
+from flask_login import UserMixin
+from werkzeug.security import generate_password_hash, check_password_hash
+from app import db
+
+
+class School(db.Model):
+    __tablename__ = 'schools'
+
+    id             = db.Column(db.Integer, primary_key=True)
+    name           = db.Column(db.String(255), nullable=False)
+    slug           = db.Column(db.String(100), nullable=False, unique=True)
+    email_domains  = db.Column(db.ARRAY(db.Text), nullable=False, default=list)
+    created_at     = db.Column(db.DateTime, default=datetime.utcnow)
+
+    users        = db.relationship('User', back_populates='school', lazy='dynamic')
+    school_years = db.relationship('SchoolYear', back_populates='school', lazy='dynamic')
+    classes      = db.relationship('Class', back_populates='school', lazy='dynamic')
+
+    def to_dict(self):
+        return {
+            'id':            self.id,
+            'name':          self.name,
+            'slug':          self.slug,
+            'email_domains': self.email_domains or [],
+        }
+
+
+class SchoolYear(db.Model):
+    __tablename__ = 'school_years'
+
+    id         = db.Column(db.Integer, primary_key=True)
+    # school_id=None = globaal schooljaar voor alle scholen
+    school_id  = db.Column(db.Integer, db.ForeignKey('schools.id', ondelete='CASCADE'), nullable=True)
+    label      = db.Column(db.String(20), nullable=False, unique=True)
+    is_active  = db.Column(db.Boolean, default=True)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+
+    school      = db.relationship('School', back_populates='school_years')
+    assessments = db.relationship('Assessment', back_populates='school_year', lazy='dynamic')
+
+    def to_dict(self):
+        return {'id': self.id, 'label': self.label, 'is_active': self.is_active}
+
+
+class Class(db.Model):
+    __tablename__ = 'classes'
+
+    id        = db.Column(db.Integer, primary_key=True)
+    school_id = db.Column(db.Integer, db.ForeignKey('schools.id', ondelete='CASCADE'), nullable=False)
+    name      = db.Column(db.String(50), nullable=False)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+
+    school   = db.relationship('School', back_populates='classes')
+    teachers = db.relationship('User', secondary='teacher_classes', back_populates='classes')
+
+    __table_args__ = (
+        db.UniqueConstraint('school_id', 'name', name='uq_class_school_name'),
+    )
+
+    def to_dict(self):
+        return {
+            'id':       self.id,
+            'name':     self.name,
+            'school_id': self.school_id,
+            'teachers': [{'id': t.id, 'full_name': t.full_name} for t in self.teachers],
+        }
+
+
+class TeacherClass(db.Model):
+    __tablename__ = 'teacher_classes'
+
+    user_id  = db.Column(db.Integer, db.ForeignKey('users.id',    ondelete='CASCADE'), primary_key=True)
+    class_id = db.Column(db.Integer, db.ForeignKey('classes.id',  ondelete='CASCADE'), primary_key=True)
+
+
+class User(UserMixin, db.Model):
+    __tablename__ = 'users'
+
+    id              = db.Column(db.Integer, primary_key=True)
+    email           = db.Column(db.String(255), nullable=False, unique=True)
+    password_hash   = db.Column(db.String(255))
+    first_name      = db.Column(db.String(100))
+    last_name       = db.Column(db.String(100))
+    role            = db.Column(db.String(20), nullable=False, default='teacher')
+    school_id       = db.Column(db.Integer, db.ForeignKey('schools.id', ondelete='SET NULL'))
+    is_active       = db.Column(db.Boolean, default=True)
+    created_at      = db.Column(db.DateTime, default=datetime.utcnow)
+    last_login      = db.Column(db.DateTime)
+    oauth_provider  = db.Column(db.String(20))
+    oauth_id        = db.Column(db.String(255))
+    entra_tenant_id = db.Column(db.String(255))
+
+    school  = db.relationship('School', back_populates='users')
+    classes = db.relationship('Class', secondary='teacher_classes', back_populates='teachers')
+
+    @property
+    def is_superadmin(self):      return self.role == 'superadmin'
+    @property
+    def is_scholengroep_ict(self): return self.role in ('superadmin', 'scholengroep_ict')
+    @property
+    def is_school_ict(self):      return self.role in ('superadmin', 'scholengroep_ict', 'school_ict')
+    @property
+    def is_director(self):        return self.role in ('superadmin', 'scholengroep_ict', 'school_ict', 'director')
+    @property
+    def is_teacher(self):         return self.role == 'teacher'
+
+    def set_password(self, password):
+        self.password_hash = generate_password_hash(password)
+
+    def check_password(self, password):
+        if not self.password_hash:
+            return False
+        return check_password_hash(self.password_hash, password)
+
+    @property
+    def full_name(self):
+        if self.first_name and self.last_name:
+            return f"{self.first_name} {self.last_name}"
+        return self.email
+
+    @property
+    def class_names(self):
+        return [c.name for c in self.classes]
+
+    def to_dict(self):
+        return {
+            'id':          self.id,
+            'email':       self.email,
+            'first_name':  self.first_name,
+            'last_name':   self.last_name,
+            'full_name':   self.full_name,
+            'role':        self.role,
+            'school_id':   self.school_id,
+            'school_name': self.school.name if self.school else None,
+            'school':      self.school.to_dict() if self.school else None,
+            'last_login':  self.last_login.isoformat() if self.last_login else None,
+            'created_at':  self.created_at.isoformat() if self.created_at else None,
+            'classes':     [{'id': c.id, 'name': c.name} for c in self.classes],
+        }
+
+
+class Assessment(db.Model):
+    __tablename__ = 'assessments'
+
+    id             = db.Column(db.Integer, primary_key=True)
+    user_id        = db.Column(db.Integer, db.ForeignKey('users.id',        ondelete='CASCADE'), nullable=False)
+    school_id      = db.Column(db.Integer, db.ForeignKey('schools.id',      ondelete='CASCADE'), nullable=False)
+    school_year_id = db.Column(db.Integer, db.ForeignKey('school_years.id', ondelete='CASCADE'), nullable=False)
+    vak_id         = db.Column(db.String(50), nullable=False)
+    goal_id        = db.Column(db.String(50), nullable=False)
+    status         = db.Column(db.String(10), nullable=False)
+    updated_at     = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+    user        = db.relationship('User')
+    school      = db.relationship('School')
+    school_year = db.relationship('SchoolYear', back_populates='assessments')
+
+    __table_args__ = (
+        db.UniqueConstraint('user_id', 'school_year_id', 'vak_id', 'goal_id'),
+    )
+
+    def to_dict(self):
+        return {
+            'id':         self.id,
+            'vak_id':     self.vak_id,
+            'goal_id':    self.goal_id,
+            'status':     self.status,
+            'updated_at': self.updated_at.isoformat() if self.updated_at else None,
+        }
+
+
+class AuditLog(db.Model):
+    __tablename__ = 'audit_logs'
+
+    id         = db.Column(db.Integer, primary_key=True)
+    timestamp  = db.Column(db.DateTime, default=datetime.utcnow, nullable=False, index=True)
+    user_id    = db.Column(db.Integer, db.ForeignKey('users.id', ondelete='SET NULL'), nullable=True)
+    school_id  = db.Column(db.Integer, db.ForeignKey('schools.id', ondelete='SET NULL'), nullable=True)
+    action     = db.Column(db.String(50), nullable=False, index=True)
+    # categorie: auth | user | school | class | assessment | doelen | system
+    category   = db.Column(db.String(20), nullable=False, index=True)
+    target_type = db.Column(db.String(50))   # bv. 'user', 'school', 'class'
+    target_id   = db.Column(db.String(100))  # id of naam van het object
+    detail      = db.Column(db.Text)         # extra context in JSON string
+    ip_address  = db.Column(db.String(45))   # IPv4 of IPv6
+
+    user   = db.relationship('User',   foreign_keys=[user_id])
+    school = db.relationship('School', foreign_keys=[school_id])
+
+    def to_dict(self):
+        return {
+            'id':          self.id,
+            'timestamp':   self.timestamp.isoformat(),
+            'user_id':     self.user_id,
+            'user_name':   self.user.full_name if self.user else 'Systeem',
+            'user_email':  self.user.email     if self.user else None,
+            'school_id':   self.school_id,
+            'school_name': self.school.name    if self.school else None,
+            'action':      self.action,
+            'category':    self.category,
+            'target_type': self.target_type,
+            'target_id':   self.target_id,
+            'detail':      self.detail,
+            'ip_address':  self.ip_address,
+        }
diff --git a/backend/requirements.txt b/backend/requirements.txt
new file mode 100644
index 0000000..f22efd4
--- /dev/null
+++ b/backend/requirements.txt
@@ -0,0 +1,12 @@
+flask==3.0.3
+flask-login==0.6.3
+flask-sqlalchemy==3.1.1
+flask-migrate==4.0.7
+flask-cors==4.0.1
+psycopg2-binary==2.9.9
+gunicorn==22.0.0
+python-dotenv==1.0.1
+werkzeug==3.0.3
+sqlalchemy==2.0.31
+authlib==1.3.1        # OAuth2 (Microsoft + Google, later)
+requests==2.32.3
diff --git a/backend/routes/__init__.py b/backend/routes/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/backend/routes/admin.py b/backend/routes/admin.py
new file mode 100644
index 0000000..ce3985c
--- /dev/null
+++ b/backend/routes/admin.py
@@ -0,0 +1,544 @@
+"""
+Admin routes
+
+Toegang per rol:
+  superadmin        → alles
+  scholengroep_ict  → scholen + gebruikers beheren, doelen uploaden
+  school_ict        → leerkrachten en klassen van eigen school beheren
+"""
+
+import re
+import json as jsonlib
+from flask import Blueprint, jsonify, request
+from services.audit import audit_log
+from flask_login import login_required, current_user
+from models import User, School, SchoolYear, Class, TeacherClass
+from app import db
+from functools import wraps
+
+admin_bp = Blueprint('admin', __name__)
+
+VALID_ROLES = ('superadmin', 'scholengroep_ict', 'school_ict', 'director', 'teacher')
+
+
+# ── Toegangsdecorators ────────────────────────────────────────────────────────
+
+def superadmin_required(f):
+    @wraps(f)
+    def decorated(*args, **kwargs):
+        if not current_user.is_superadmin:
+            return jsonify({'error': 'Geen toegang — superadmin vereist'}), 403
+        return f(*args, **kwargs)
+    return decorated
+
+def scholengroep_ict_required(f):
+    @wraps(f)
+    def decorated(*args, **kwargs):
+        if not current_user.is_scholengroep_ict:
+            return jsonify({'error': 'Geen toegang — scholengroep ICT vereist'}), 403
+        return f(*args, **kwargs)
+    return decorated
+
+def school_ict_required(f):
+    @wraps(f)
+    def decorated(*args, **kwargs):
+        if not current_user.is_school_ict:
+            return jsonify({'error': 'Geen toegang — school ICT vereist'}), 403
+        return f(*args, **kwargs)
+    return decorated
+
+
+# ── Scholen (scholengroep_ict) ────────────────────────────────────────────────
+
+@admin_bp.route('/schools', methods=['GET'])
+@login_required
+@scholengroep_ict_required
+def list_schools():
+    schools = School.query.order_by(School.name).all()
+    result = []
+    for s in schools:
+        d = s.to_dict()
+        d['user_count'] = User.query.filter_by(school_id=s.id, is_active=True).count()
+        result.append(d)
+    return jsonify({'schools': result})
+
+
+@admin_bp.route('/schools', methods=['POST'])
+@login_required
+@scholengroep_ict_required
+def create_school():
+    data    = request.get_json() or {}
+    name    = data.get('name', '').strip()
+    slug    = data.get('slug', '').strip().lower()
+    domains = [d.strip().lower() for d in data.get('email_domains', []) if d.strip()]
+
+    if not name:
+        return jsonify({'error': 'Naam is verplicht'}), 400
+    if not slug:
+        slug = re.sub(r'[^a-z0-9]+', '-', name.lower()).strip('-')
+    if School.query.filter_by(slug=slug).first():
+        return jsonify({'error': f'Slug "{slug}" is al in gebruik'}), 409
+
+    school = School(name=name, slug=slug, email_domains=domains)
+    db.session.add(school)
+    db.session.flush()
+    audit_log('school.create', 'school', target_type='school', target_id=str(school.id),
+              detail={'name': name, 'slug': slug}, school_id=school.id)
+    db.session.commit()
+    return jsonify({'school': school.to_dict()}), 201
+
+
+@admin_bp.route('/schools/<int:school_id>', methods=['PUT'])
+@login_required
+@scholengroep_ict_required
+def update_school(school_id):
+    school = School.query.get_or_404(school_id)
+    data   = request.get_json() or {}
+    if 'name' in data:
+        school.name = data['name'].strip()
+    if 'email_domains' in data:
+        school.email_domains = [d.strip().lower() for d in data['email_domains'] if d.strip()]
+    db.session.commit()
+    return jsonify({'school': school.to_dict()})
+
+
+@admin_bp.route('/schools/<int:school_id>', methods=['DELETE'])
+@login_required
+@scholengroep_ict_required
+def delete_school(school_id):
+    school = School.query.get_or_404(school_id)
+    school_name = school.name
+    try:
+        audit_log('school.delete', 'school', target_type='school', target_id=str(school_id),
+                  detail={'name': school_name}, school_id=school_id)
+        db.session.flush()
+        db.session.execute(
+            db.text("DELETE FROM schools WHERE id = :id"),
+            {"id": school_id}
+        )
+        db.session.commit()
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'error': f'Verwijderen mislukt: {str(e)}'}), 500
+    return jsonify({'deleted': True})
+
+
+
+# ── Schooljaren (globaal — niet per school) ──────────────────────────────────
+
+@admin_bp.route('/years', methods=['GET'])
+@login_required
+@school_ict_required
+def list_years():
+    """Alle globale schooljaren, nieuwste eerst."""
+    years = SchoolYear.query.filter_by(school_id=None)                            .order_by(SchoolYear.label.desc()).all()
+    return jsonify({'years': [y.to_dict() for y in years]})
+
+
+@admin_bp.route('/years', methods=['POST'])
+@login_required
+@scholengroep_ict_required
+def create_year():
+    """Maak een nieuw globaal schooljaar aan."""
+    data  = request.get_json() or {}
+    label = data.get('label', '').strip()
+
+    if not label:
+        return jsonify({'error': 'Label is verplicht (bv. 2025-2026)'}), 400
+    if SchoolYear.query.filter_by(label=label).first():
+        return jsonify({'error': f'Schooljaar {label} bestaat al'}), 409
+
+    if data.get('set_active', True):
+        SchoolYear.query.filter_by(school_id=None, is_active=True)                        .update({'is_active': False})
+
+    year = SchoolYear(school_id=None, label=label,
+                      is_active=data.get('set_active', True))
+    db.session.add(year)
+    db.session.flush()
+    audit_log('year.create', 'system', target_type='school_year', target_id=str(year.id),
+              detail={'label': label, 'active': year.is_active})
+    db.session.commit()
+    return jsonify({'year': year.to_dict()}), 201
+
+
+@admin_bp.route('/years/<int:year_id>/activate', methods=['PUT'])
+@login_required
+@scholengroep_ict_required
+def activate_year(year_id):
+    """Zet een schooljaar als actief (deactiveert de rest)."""
+    year = SchoolYear.query.filter_by(id=year_id, school_id=None).first_or_404()
+    SchoolYear.query.filter_by(school_id=None, is_active=True)                    .update({'is_active': False})
+    year.is_active = True
+    audit_log('year.activate', 'system', target_type='school_year', target_id=str(year_id),
+              detail={'label': year.label})
+    db.session.commit()
+    return jsonify({'year': year.to_dict()})
+
+
+# ── Gebruikers per school ─────────────────────────────────────────────────────
+
+@admin_bp.route('/schools/<int:school_id>/users', methods=['GET'])
+@login_required
+@school_ict_required
+def list_school_users(school_id):
+    if not current_user.is_scholengroep_ict and current_user.school_id != school_id:
+        return jsonify({'error': 'Geen toegang tot deze school'}), 403
+    users = User.query.filter_by(school_id=school_id, is_active=True)\
+                      .order_by(User.last_name, User.first_name).all()
+    return jsonify({'users': [u.to_dict() for u in users]})
+
+
+@admin_bp.route('/schools/<int:school_id>/users', methods=['POST'])
+@login_required
+@school_ict_required
+def add_user_to_school(school_id):
+    if not current_user.is_scholengroep_ict and current_user.school_id != school_id:
+        return jsonify({'error': 'Geen toegang tot deze school'}), 403
+
+    School.query.get_or_404(school_id)
+    data  = request.get_json() or {}
+    email = data.get('email', '').strip().lower()
+    role  = data.get('role', 'teacher')
+
+    if not email:
+        return jsonify({'error': 'E-mailadres is verplicht'}), 400
+
+    allowed_roles = ('teacher', 'director', 'school_ict')
+    if current_user.role == 'school_ict' and role not in allowed_roles:
+        return jsonify({'error': f'Rol "{role}" mag niet worden toegewezen door school ICT'}), 403
+    if role not in VALID_ROLES:
+        return jsonify({'error': f'Ongeldige rol: {role}'}), 400
+
+    existing = User.query.filter_by(email=email).first()
+    if existing:
+        # Account bestaat al (ook als uitgeschakeld) — activeer en update rol/school
+        existing.school_id = school_id
+        existing.role      = role
+        existing.is_active = True
+        db.session.commit()
+        return jsonify({'user': existing.to_dict(), 'linked': True})
+
+    user = User(
+        email=email,
+        first_name=data.get('first_name', '').strip(),
+        last_name=data.get('last_name', '').strip(),
+        role=role,
+        school_id=school_id,
+        is_active=True,
+    )
+    db.session.add(user)
+    db.session.commit()
+    return jsonify({'user': user.to_dict(), 'linked': False}), 201
+
+
+@admin_bp.route('/schools/<int:school_id>/users/<int:user_id>/role', methods=['PUT'])
+@login_required
+@school_ict_required
+def update_user_role(school_id, user_id):
+    if not current_user.is_scholengroep_ict and current_user.school_id != school_id:
+        return jsonify({'error': 'Geen toegang tot deze school'}), 403
+    user = User.query.filter_by(id=user_id, school_id=school_id).first_or_404()
+    data = request.get_json() or {}
+    role = data.get('role', '')
+    allowed = ('teacher', 'director', 'school_ict')
+    if current_user.role == 'school_ict' and role not in allowed:
+        return jsonify({'error': f'Rol "{role}" mag niet worden toegewezen'}), 403
+    if role not in VALID_ROLES:
+        return jsonify({'error': f'Ongeldige rol: {role}'}), 400
+    user.role = role
+    db.session.commit()
+    return jsonify({'user': user.to_dict()})
+
+
+@admin_bp.route('/schools/<int:school_id>/users/<int:user_id>', methods=['DELETE'])
+@login_required
+@school_ict_required
+def remove_user_from_school(school_id, user_id):
+    if not current_user.is_scholengroep_ict and current_user.school_id != school_id:
+        return jsonify({'error': 'Geen toegang tot deze school'}), 403
+    user = User.query.filter_by(id=user_id, school_id=school_id).first_or_404()
+    user.is_active = False
+    audit_log('user.deactivate', 'user', target_type='user', target_id=str(user_id),
+              detail={'email': user.email, 'role': user.role},
+              school_id=current_user.school_id)
+    db.session.commit()
+    return jsonify({'deleted': True})
+
+
+# ── Scholengroep ICT beheer (superadmin) ──────────────────────────────────────
+
+@admin_bp.route('/scholengroep-ict', methods=['GET'])
+@login_required
+@superadmin_required
+def list_scholengroep_ict():
+    users = User.query.filter_by(role='scholengroep_ict', is_active=True)\
+                      .order_by(User.last_name).all()
+    return jsonify({'users': [u.to_dict() for u in users]})
+
+
+@admin_bp.route('/scholengroep-ict', methods=['POST'])
+@login_required
+@superadmin_required
+def add_scholengroep_ict():
+    data  = request.get_json() or {}
+    email = data.get('email', '').strip().lower()
+    if not email:
+        return jsonify({'error': 'E-mailadres is verplicht'}), 400
+
+    user = User.query.filter_by(email=email).first()
+    if user:
+        user.role      = 'scholengroep_ict'
+        user.school_id = None
+        user.is_active = True
+        db.session.commit()
+        return jsonify({'user': user.to_dict()})
+
+    user = User(
+        email=email,
+        first_name=data.get('first_name', '').strip(),
+        last_name=data.get('last_name', '').strip(),
+        role='scholengroep_ict',
+        is_active=True,
+    )
+    db.session.add(user)
+    db.session.flush()
+    audit_log('user.create', 'user', target_type='user', target_id=str(user.id),
+              detail={'email': email, 'role': user.role, 'school_id': school_id},
+              school_id=school_id)
+    db.session.commit()
+    return jsonify({'user': user.to_dict()}), 201
+
+
+@admin_bp.route('/scholengroep-ict/<int:user_id>', methods=['DELETE'])
+@login_required
+@superadmin_required
+def remove_scholengroep_ict(user_id):
+    user = User.query.get_or_404(user_id)
+    if user.role != 'scholengroep_ict':
+        return jsonify({'error': 'Gebruiker is geen scholengroep ICT'}), 400
+    user.is_active = False
+    db.session.commit()
+    return jsonify({'ok': True})
+
+
+# ── Doelen upload (scholengroep_ict) ──────────────────────────────────────────
+
+@admin_bp.route('/doelen', methods=['GET'])
+@login_required
+@scholengroep_ict_required
+def list_doelen():
+    from services.doelen import load_index, list_installed_vakken
+    index     = load_index()
+    installed = set(list_installed_vakken())
+    return jsonify({
+        'vakken':    index.get('vakken', []),
+        'versie':    index.get('versie'),
+        'installed': list(installed),
+    })
+
+
+@admin_bp.route('/doelen/upload', methods=['POST'])
+@login_required
+@scholengroep_ict_required
+def upload_doelen():
+    """
+    Upload één of meerdere vak JSON bestanden via multipart/form-data (veld: 'files').
+    Bij maandelijkse update gewoon opnieuw uploaden — overschrijft bestaande bestanden.
+    """
+    from services.doelen import validate_vak_json, save_vak, is_valid_vak_id
+
+    if 'files' not in request.files:
+        return jsonify({'error': 'Geen bestanden ontvangen (verwacht veld "files")'}), 400
+
+    results = []
+
+    for file in request.files.getlist('files'):
+        if not file.filename:
+            continue
+
+        result = {'filename': file.filename, 'ok': False}
+
+        if not file.filename.lower().endswith('.json'):
+            result['error'] = 'Alleen .json bestanden zijn toegestaan'
+            results.append(result)
+            continue
+
+        try:
+            data = jsonlib.loads(file.read().decode('utf-8'))
+        except Exception:
+            result['error'] = 'Ongeldig JSON — kon bestand niet lezen'
+            results.append(result)
+            continue
+
+        # Vak ID: uit het bestand zelf, anders van de bestandsnaam
+        vak_id = (data.get('vak') or file.filename[:-5]).lower().strip()
+
+        if not is_valid_vak_id(vak_id):
+            result['error'] = f'Ongeldig vak ID: "{vak_id}"'
+            results.append(result)
+            continue
+
+        errors = validate_vak_json(data)
+        if errors:
+            result['error'] = '; '.join(errors)
+            results.append(result)
+            continue
+
+        doelzinnen = [r for r in data['rijen'] if r.get('type') == 'doelzin']
+        save_vak(vak_id, data)
+
+        result.update({
+            'ok':               True,
+            'vak_id':           vak_id,
+            'vak_naam':         data.get('vakNaam') or vak_id,
+            'aantalDoelzinnen': len(doelzinnen),
+            'versie':           data.get('versie', '?'),
+        })
+        results.append(result)
+
+    ok_count  = sum(1 for r in results if r['ok'])
+    err_count = len(results) - ok_count
+
+    return jsonify({
+        'ok':      ok_count,
+        'errors':  err_count,
+        'results': results,
+    }), (200 if ok_count > 0 else 400)
+
+
+@admin_bp.route('/doelen/<vak_id>', methods=['DELETE'])
+@login_required
+@scholengroep_ict_required
+def delete_doelen(vak_id):
+    from services.doelen import delete_vak, is_valid_vak_id
+    if not is_valid_vak_id(vak_id):
+        return jsonify({'error': 'Ongeldig vak ID'}), 400
+    if not delete_vak(vak_id):
+        return jsonify({'error': 'Bestand niet gevonden'}), 404
+    return jsonify({'deleted': True, 'vak_id': vak_id})
+
+
+# ── Globale statistieken (superadmin) ─────────────────────────────────────────
+
+@admin_bp.route('/stats')
+@login_required
+@scholengroep_ict_required
+def global_stats():
+    return jsonify({
+        'schools':          School.query.count(),
+        'users':            User.query.filter_by(is_active=True).count(),
+        'teachers':         User.query.filter_by(role='teacher',         is_active=True).count(),
+        'directors':        User.query.filter_by(role='director',        is_active=True).count(),
+        'school_ict':       User.query.filter_by(role='school_ict',      is_active=True).count(),
+        'scholengroep_ict': User.query.filter_by(role='scholengroep_ict',is_active=True).count(),
+    })
+
+
+# ── Klassen ───────────────────────────────────────────────────────────────────
+
+@admin_bp.route('/schools/<int:school_id>/classes', methods=['GET'])
+@login_required
+@school_ict_required
+def list_classes(school_id):
+    if not current_user.is_scholengroep_ict and current_user.school_id != school_id:
+        return jsonify({'error': 'Geen toegang'}), 403
+    classes = Class.query.filter_by(school_id=school_id)                         .order_by(Class.name).all()
+    return jsonify({'classes': [c.to_dict() for c in classes]})
+
+
+@admin_bp.route('/schools/<int:school_id>/classes', methods=['POST'])
+@login_required
+@school_ict_required
+def create_class(school_id):
+    if not current_user.is_scholengroep_ict and current_user.school_id != school_id:
+        return jsonify({'error': 'Geen toegang'}), 403
+    data = request.get_json() or {}
+    name = data.get('name', '').strip()
+    if not name:
+        return jsonify({'error': 'Naam is verplicht'}), 400
+    if Class.query.filter_by(school_id=school_id, name=name).first():
+        return jsonify({'error': f'Klas "{name}" bestaat al'}), 409
+
+    klas = Class(school_id=school_id, name=name)
+    db.session.add(klas)
+    db.session.flush()
+    audit_log('class.create', 'class', target_type='class', target_id=str(klas.id),
+              detail={'name': name}, school_id=school_id)
+    db.session.commit()
+    return jsonify({'class': klas.to_dict()}), 201
+
+
+@admin_bp.route('/schools/<int:school_id>/classes/<int:class_id>', methods=['DELETE'])
+@login_required
+@school_ict_required
+def delete_class(school_id, class_id):
+    if not current_user.is_scholengroep_ict and current_user.school_id != school_id:
+        return jsonify({'error': 'Geen toegang'}), 403
+    klas = Class.query.filter_by(id=class_id, school_id=school_id).first_or_404()
+    audit_log('class.delete', 'class', target_type='class', target_id=str(class_id),
+              detail={'name': klas.name}, school_id=school_id)
+    db.session.delete(klas)
+    db.session.commit()
+    return jsonify({'deleted': True})
+
+
+@admin_bp.route('/schools/<int:school_id>/classes/<int:class_id>/teachers', methods=['PUT'])
+@login_required
+@school_ict_required
+def set_class_teachers(school_id, class_id):
+    """Vervang alle leerkrachten van een klas in één keer."""
+    if not current_user.is_scholengroep_ict and current_user.school_id != school_id:
+        return jsonify({'error': 'Geen toegang'}), 403
+    klas      = Class.query.filter_by(id=class_id, school_id=school_id).first_or_404()
+    data      = request.get_json() or {}
+    user_ids  = data.get('user_ids', [])
+
+    teachers = User.query.filter(
+        User.id.in_(user_ids),
+        User.school_id == school_id,
+        User.is_active == True
+    ).all()
+
+    klas.teachers = teachers
+    audit_log('class.teachers_updated', 'class', target_type='class', target_id=str(class_id),
+              detail={'name': klas.name, 'teacher_ids': user_ids}, school_id=school_id)
+    db.session.commit()
+    return jsonify({'class': klas.to_dict()})
+
+
+@admin_bp.route('/users/<int:user_id>/classes', methods=['GET'])
+@login_required
+def get_user_classes(user_id):
+    """Geeft klassen terug van een specifieke leerkracht (voor leerkracht zelf of beheerder)."""
+    if current_user.id != user_id and not current_user.is_school_ict:
+        return jsonify({'error': 'Geen toegang'}), 403
+    user    = User.query.get_or_404(user_id)
+    classes = Class.query.filter_by(school_id=user.school_id)                         .order_by(Class.name).all()
+    return jsonify({
+        'all_classes':  [{'id': c.id, 'name': c.name} for c in classes],
+        'my_classes':   [{'id': c.id, 'name': c.name} for c in user.classes],
+    })
+
+
+@admin_bp.route('/users/<int:user_id>/classes', methods=['PUT'])
+@login_required
+def set_user_classes(user_id):
+    """Leerkracht stelt eigen klassen in, of beheerder doet het."""
+    if current_user.id != user_id and not current_user.is_school_ict:
+        return jsonify({'error': 'Geen toegang'}), 403
+    user     = User.query.get_or_404(user_id)
+    data     = request.get_json() or {}
+    class_ids = data.get('class_ids', [])
+
+    classes = Class.query.filter(
+        Class.id.in_(class_ids),
+        Class.school_id == user.school_id
+    ).all()
+
+    user.classes = classes
+    audit_log('class.user_assignment', 'class', target_type='user', target_id=str(user_id),
+              detail={'class_ids': class_ids, 'class_names': [c.name for c in classes]},
+              school_id=user.school_id)
+    db.session.commit()
+    return jsonify({'classes': [{'id': c.id, 'name': c.name} for c in user.classes]})
+
diff --git a/backend/routes/api.py b/backend/routes/api.py
new file mode 100644
index 0000000..87c6fa8
--- /dev/null
+++ b/backend/routes/api.py
@@ -0,0 +1,316 @@
+from datetime import datetime
+from flask import Blueprint, jsonify, request
+from flask_login import login_required, current_user
+from models import User, SchoolYear, Assessment, School, Class, AuditLog
+from app import db
+from services.doelen import load_index, load_vak, is_valid_vak_id
+from services.audit import audit_log
+from functools import wraps
+
+api_bp = Blueprint('api', __name__)
+
+
+def director_required(f):
+    @wraps(f)
+    def decorated(*args, **kwargs):
+        if not current_user.is_director:
+            return jsonify({'error': 'Geen toegang'}), 403
+        return f(*args, **kwargs)
+    return decorated
+
+
+def get_active_year(school_id=None):
+    """Geeft het globaal actief schooljaar terug (school_id wordt genegeerd)."""
+    return SchoolYear.query.filter_by(school_id=None, is_active=True).first()
+
+
+# ── Doelen (statische JSON bestanden) ─────────────────────────────────────────
+
+@api_bp.route('/doelen/index')
+@login_required
+def doelen_index():
+    data = load_index()
+    if not data['vakken']:
+        return jsonify({
+            'error': 'Geen doelen gevonden. Upload eerst de JSON bestanden via het beheerderspaneel.'
+        }), 404
+    return jsonify(data)
+
+
+@api_bp.route('/doelen/<vak_id>')
+@login_required
+def doelen_vak(vak_id):
+    if not is_valid_vak_id(vak_id):
+        return jsonify({'error': 'Ongeldig vak ID'}), 400
+    data = load_vak(vak_id)
+    if not data:
+        return jsonify({'error': f'Vak "{vak_id}" niet gevonden'}), 404
+    return jsonify(data)
+
+
+# ── Beoordelingen ─────────────────────────────────────────────────────────────
+
+@api_bp.route('/assessments', methods=['GET'])
+@login_required
+def get_assessments():
+    if not current_user.school_id:
+        return jsonify({'assessments': []})
+    school_year = get_active_year(current_user.school_id)
+    if not school_year:
+        return jsonify({'assessments': []})
+
+    year_id = request.args.get('year_id', school_year.id)
+    vak_id  = request.args.get('vak_id')
+
+    query = Assessment.query.filter_by(user_id=current_user.id, school_year_id=year_id)
+    if vak_id:
+        query = query.filter_by(vak_id=vak_id)
+
+    return jsonify({'assessments': [a.to_dict() for a in query.all()]})
+
+
+@api_bp.route('/assessments', methods=['POST'])
+@login_required
+def save_assessment():
+    data    = request.get_json() or {}
+    vak_id  = (data.get('vak_id') or '').strip()
+    goal_id = (data.get('goal_id') or '').strip()
+    status  = (data.get('status') or '').strip()
+
+    if not vak_id or not goal_id:
+        return jsonify({'error': 'vak_id en goal_id zijn verplicht'}), 400
+    if status not in ('groen', 'oranje', 'roze', ''):
+        return jsonify({'error': 'Ongeldige status — gebruik groen, oranje, roze of leeg'}), 400
+    if not current_user.school_id:
+        return jsonify({'error': 'Account is nog niet gekoppeld aan een school'}), 400
+
+    school_year = get_active_year(current_user.school_id)
+    if not school_year:
+        return jsonify({'error': 'Geen actief schooljaar gevonden'}), 400
+
+    assessment = Assessment.query.filter_by(
+        user_id=current_user.id,
+        school_year_id=school_year.id,
+        vak_id=vak_id,
+        goal_id=goal_id,
+    ).first()
+
+    if status == '':
+        if assessment:
+            db.session.delete(assessment)
+            db.session.commit()
+        return jsonify({'deleted': True})
+
+    if assessment:
+        assessment.status     = status
+        assessment.updated_at = datetime.utcnow()
+    else:
+        assessment = Assessment(
+            user_id=current_user.id,
+            school_id=current_user.school_id,
+            school_year_id=school_year.id,
+            vak_id=vak_id,
+            goal_id=goal_id,
+            status=status,
+        )
+        db.session.add(assessment)
+
+    db.session.commit()
+    # Auditlog enkel bij statuswijziging (niet bij elke klik)
+    audit_log('assessment.save', 'assessment',
+              target_type='goal', target_id=f'{vak_id}:{goal_id}',
+              detail={'status': status})
+    return jsonify({'assessment': assessment.to_dict()})
+
+
+# ── Directeur schooloverzicht ──────────────────────────────────────────────────
+
+@api_bp.route('/school/overview')
+@login_required
+@director_required
+def school_overview():
+    if not current_user.school_id:
+        return jsonify({'error': 'Geen school gekoppeld'}), 400
+    school_year = get_active_year(current_user.school_id)
+    if not school_year:
+        return jsonify({'error': 'Geen actief schooljaar'}), 400
+
+    # year_id param: directeur/admin kan wisselen, leerkracht zit vast aan actief jaar
+    year_id_param = request.args.get('year_id')
+    if year_id_param and current_user.is_director:
+        year_id = int(year_id_param)
+        selected_year = SchoolYear.query.filter_by(
+            id=year_id, school_id=current_user.school_id
+        ).first() or school_year
+    else:
+        selected_year = school_year
+        year_id       = school_year.id
+
+    vak_id  = request.args.get('vak_id')
+
+    teachers = User.query.filter_by(
+        school_id=current_user.school_id, role='teacher', is_active=True
+    ).all()
+
+    query = Assessment.query.filter_by(
+        school_id=current_user.school_id, school_year_id=year_id
+    )
+    if vak_id:
+        query = query.filter_by(vak_id=vak_id)
+
+    by_teacher = {t.id: {} for t in teachers}
+    for a in query.all():
+        by_teacher.setdefault(a.user_id, {})
+        by_teacher[a.user_id].setdefault(a.vak_id, {})
+        by_teacher[a.user_id][a.vak_id][a.goal_id] = a.status
+
+    return jsonify({
+        'school_year':            selected_year.to_dict(),
+        'teachers':               [t.to_dict() for t in teachers],
+        'assessments_by_teacher': by_teacher,
+    })
+
+
+# ── Gebruikersbeheer (school_ict / directeur) ──────────────────────────────────
+
+@api_bp.route('/users', methods=['GET'])
+@login_required
+@director_required
+def list_users():
+    users = User.query.filter_by(
+        school_id=current_user.school_id, is_active=True
+    ).order_by(User.last_name, User.first_name).all()
+    return jsonify({'users': [u.to_dict() for u in users]})
+
+
+@api_bp.route('/users', methods=['POST'])
+@login_required
+@director_required
+def create_user():
+    data  = request.get_json() or {}
+    email = data.get('email', '').strip().lower()
+    if not email:
+        return jsonify({'error': 'E-mailadres is verplicht'}), 400
+    if User.query.filter_by(email=email).first():
+        return jsonify({'error': 'E-mailadres is al in gebruik'}), 409
+    user = User(
+        email=email,
+        first_name=data.get('first_name', '').strip(),
+        last_name=data.get('last_name', '').strip(),
+        role='teacher',
+        school_id=current_user.school_id,
+    )
+    db.session.add(user)
+    db.session.commit()
+    return jsonify({'user': user.to_dict()}), 201
+
+
+@api_bp.route('/users/<int:user_id>', methods=['DELETE'])
+@login_required
+@director_required
+def delete_user(user_id):
+    user = User.query.filter_by(
+        id=user_id, school_id=current_user.school_id
+    ).first_or_404()
+    user.is_active = False
+    db.session.commit()
+    return jsonify({'deleted': True})
+
+
+
+# ── Schooljaren (directeur/admin leesbaar) ────────────────────────────────────
+
+@api_bp.route('/school/years')
+@login_required
+@director_required
+def get_school_years():
+    """Geeft alle globale schooljaren terug (voor jaarselectie in directeur dashboard)."""
+    years = SchoolYear.query.filter_by(school_id=None)                            .order_by(SchoolYear.label.desc()).all()
+    return jsonify({'years': [y.to_dict() for y in years]})
+
+
+# ── Huidig ingelogde gebruiker ────────────────────────────────────────────────
+
+@api_bp.route('/me')
+@login_required
+def me():
+    school_year = get_active_year(current_user.school_id) if current_user.school_id else None
+    return jsonify({
+        'user':        current_user.to_dict(),
+        'school_year': school_year.to_dict() if school_year else None,
+    })
+
+
+# ── Klassen voor leerkracht (zelf instellen) ──────────────────────────────────
+
+@api_bp.route('/my/classes', methods=['GET'])
+@login_required
+def my_classes():
+    """Geeft alle beschikbare klassen en eigen klassen terug."""
+    if not current_user.school_id:
+        return jsonify({'all_classes': [], 'my_classes': []})
+    all_cls = Class.query.filter_by(school_id=current_user.school_id)                         .order_by(Class.name).all()
+    return jsonify({
+        'all_classes': [{'id': c.id, 'name': c.name} for c in all_cls],
+        'my_classes':  [{'id': c.id, 'name': c.name} for c in current_user.classes],
+    })
+
+
+@api_bp.route('/my/classes', methods=['PUT'])
+@login_required
+def set_my_classes():
+    """Leerkracht stelt eigen klassen in."""
+    data      = request.get_json() or {}
+    class_ids = data.get('class_ids', [])
+    classes   = Class.query.filter(
+        Class.id.in_(class_ids),
+        Class.school_id == current_user.school_id
+    ).all()
+    current_user.classes = classes
+    audit_log('class.user_assignment', 'class', target_type='user',
+              target_id=str(current_user.id),
+              detail={'class_ids': class_ids, 'class_names': [c.name for c in classes]})
+    db.session.commit()
+    return jsonify({'my_classes': [{'id': c.id, 'name': c.name} for c in current_user.classes]})
+
+
+
+# ── Auditlog ──────────────────────────────────────────────────────────────────
+
+@api_bp.route('/audit-log')
+@login_required
+def get_audit_log():
+    if not current_user.is_school_ict:
+        return jsonify({'error': 'Geen toegang'}), 403
+
+    page      = int(request.args.get('page', 1))
+    per_page  = int(request.args.get('per_page', 50))
+    category  = request.args.get('category')
+    search    = request.args.get('search', '').strip()
+
+    query = AuditLog.query
+
+    # School ICT ziet enkel eigen school
+    if not current_user.is_scholengroep_ict:
+        query = query.filter(AuditLog.school_id == current_user.school_id)
+
+    if category:
+        query = query.filter(AuditLog.category == category)
+    if search:
+        query = query.filter(
+            db.or_(
+                AuditLog.action.ilike(f'%{search}%'),
+                AuditLog.detail.ilike(f'%{search}%'),
+            )
+        )
+
+    total   = query.count()
+    entries = query.order_by(AuditLog.timestamp.desc())                   .offset((page - 1) * per_page).limit(per_page).all()
+
+    return jsonify({
+        'total':   total,
+        'page':    page,
+        'pages':   (total + per_page - 1) // per_page,
+        'entries': [e.to_dict() for e in entries],
+    })
+
diff --git a/backend/routes/auth.py b/backend/routes/auth.py
new file mode 100644
index 0000000..82e429f
--- /dev/null
+++ b/backend/routes/auth.py
@@ -0,0 +1,291 @@
+"""
+Auth routes - Microsoft Entra ID (Azure AD) OAuth2 + superadmin fallback
+
+Flow voor Entra login:
+1. Gebruiker klikt "Login met Microsoft"
+2. Redirect naar Microsoft /authorize (common endpoint, werkt voor alle tenants)
+3. Microsoft redirect terug naar /auth/callback met een code
+4. We wisselen de code in voor tokens
+5. We lezen het id_token uit → email, naam, oid, tid
+6. We zoeken of maken de gebruiker aan in onze DB
+7. We koppelen aan de juiste school via e-maildomein of bestaand account
+"""
+
+import os
+import secrets
+import logging
+from datetime import datetime
+from urllib.parse import urlencode
+
+import requests
+from services.audit import audit_log
+from flask import (Blueprint, render_template, request, redirect,
+                   url_for, flash, jsonify, session, current_app)
+from flask_login import login_user, logout_user, login_required, current_user
+from models import User, School
+from app import db
+
+logger   = logging.getLogger(__name__)
+auth_bp  = Blueprint('auth', __name__)
+
+ENTRA_AUTHORITY    = "https://login.microsoftonline.com/common"
+ENTRA_AUTH_URL     = f"{ENTRA_AUTHORITY}/oauth2/v2.0/authorize"
+ENTRA_TOKEN_URL    = f"{ENTRA_AUTHORITY}/oauth2/v2.0/token"
+ENTRA_USERINFO_URL = "https://graph.microsoft.com/v1.0/me"
+ENTRA_SCOPES       = "openid profile email User.Read"
+
+
+def _entra_client_id():
+    return current_app.config.get('MICROSOFT_CLIENT_ID')
+
+def _entra_client_secret():
+    return current_app.config.get('MICROSOFT_CLIENT_SECRET')
+
+def _callback_url():
+    base = current_app.config.get('BASE_URL', 'http://localhost').rstrip('/')
+    return f"{base}/auth/callback"
+
+def _find_school_for_email(email: str):
+    domain = email.split('@')[-1].lower()
+    schools = School.query.all()
+    for school in schools:
+        if school.email_domains and domain in [d.lower() for d in school.email_domains]:
+            return school
+    return None
+
+def _get_or_create_user(email, first_name, last_name, oid, tid):
+    user = User.query.filter_by(oauth_provider='microsoft', oauth_id=oid).first()
+    if user:
+        user.first_name      = first_name or user.first_name
+        user.last_name       = last_name  or user.last_name
+        user.email           = email
+        user.entra_tenant_id = tid
+        db.session.commit()
+        return user, False
+
+    user = User.query.filter_by(email=email).first()
+    if user:
+        user.oauth_provider  = 'microsoft'
+        user.oauth_id        = oid
+        user.entra_tenant_id = tid
+        user.first_name      = first_name or user.first_name
+        user.last_name       = last_name  or user.last_name
+        db.session.commit()
+        return user, False
+
+    school = _find_school_for_email(email)
+    user = User(
+        email=email, first_name=first_name, last_name=last_name,
+        role='teacher', school_id=school.id if school else None,
+        oauth_provider='microsoft', oauth_id=oid,
+        entra_tenant_id=tid, is_active=True,
+    )
+    db.session.add(user)
+    db.session.commit()
+    return user, True
+
+
+@auth_bp.route('/superadmin')
+def superadmin_page():
+    """Directe loginpagina voor de platformbeheerder."""
+    if current_user.is_authenticated:
+        return redirect(url_for('pages.dashboard'))
+    return render_template('superadmin_login.html')
+
+
+@auth_bp.route('/login')
+def login():
+    if current_user.is_authenticated:
+        return redirect(url_for('pages.dashboard'))
+    entra_configured = bool(_entra_client_id() and _entra_client_secret())
+    org_name = current_app.config.get('ORG_NAME', 'GO! Scholengroep')
+    return render_template('login.html', entra_configured=entra_configured, org_name=org_name)
+
+
+@auth_bp.route('/logout')
+@login_required
+def logout():
+    audit_log('logout', 'auth')
+    logout_user()
+    if _entra_client_id():
+        post_logout = current_app.config.get('BASE_URL', 'http://localhost') + '/auth/login'
+        return redirect(
+            f"https://login.microsoftonline.com/common/oauth2/v2.0/logout"
+            f"?post_logout_redirect_uri={post_logout}"
+        )
+    return redirect(url_for('auth.login'))
+
+
+@auth_bp.route('/microsoft')
+def microsoft_login():
+    if not _entra_client_id():
+        flash('Microsoft login is niet geconfigureerd.', 'error')
+        return redirect(url_for('auth.login'))
+
+    state = secrets.token_urlsafe(32)
+    session['oauth_state'] = state
+
+    params = {
+        'client_id':     _entra_client_id(),
+        'response_type': 'code',
+        'redirect_uri':  _callback_url(),
+        'scope':         ENTRA_SCOPES,
+        'state':         state,
+        'response_mode': 'query',
+        'prompt':        'select_account',
+    }
+    return redirect(f"{ENTRA_AUTH_URL}?{urlencode(params)}")
+
+
+@auth_bp.route('/callback')
+def microsoft_callback():
+    error = request.args.get('error')
+    if error:
+        logger.warning(f"Entra fout: {error} — {request.args.get('error_description')}")
+        flash('Inloggen via Microsoft mislukt. Probeer opnieuw.', 'error')
+        return redirect(url_for('auth.login'))
+
+    state          = request.args.get('state', '')
+    expected_state = session.pop('oauth_state', None)
+    if not expected_state or state != expected_state:
+        logger.warning("OAuth2 state mismatch")
+        flash('Ongeldige sessie. Probeer opnieuw in te loggen.', 'error')
+        return redirect(url_for('auth.login'))
+
+    code = request.args.get('code')
+    if not code:
+        flash('Geen autorisatiecode ontvangen van Microsoft.', 'error')
+        return redirect(url_for('auth.login'))
+
+    try:
+        token_resp = requests.post(ENTRA_TOKEN_URL, data={
+            'client_id':     _entra_client_id(),
+            'client_secret': _entra_client_secret(),
+            'code':          code,
+            'redirect_uri':  _callback_url(),
+            'grant_type':    'authorization_code',
+            'scope':         ENTRA_SCOPES,
+        }, timeout=15)
+        token_resp.raise_for_status()
+        tokens = token_resp.json()
+    except requests.RequestException as e:
+        logger.error(f"Token uitwisseling mislukt: {e}")
+        flash('Kon niet communiceren met Microsoft. Probeer opnieuw.', 'error')
+        return redirect(url_for('auth.login'))
+
+    access_token = tokens.get('access_token')
+    if not access_token:
+        flash('Geen access token ontvangen van Microsoft.', 'error')
+        return redirect(url_for('auth.login'))
+
+    try:
+        graph_resp = requests.get(
+            ENTRA_USERINFO_URL,
+            headers={'Authorization': f'Bearer {access_token}'},
+            params={'$select': 'id,displayName,givenName,surname,mail,userPrincipalName'},
+            timeout=10
+        )
+        graph_resp.raise_for_status()
+        profile = graph_resp.json()
+    except requests.RequestException as e:
+        logger.error(f"Graph API mislukt: {e}")
+        flash('Kon gebruikersgegevens niet ophalen bij Microsoft.', 'error')
+        return redirect(url_for('auth.login'))
+
+    email      = (profile.get('mail') or profile.get('userPrincipalName', '')).lower().strip()
+    first_name = profile.get('givenName') or ''
+    last_name  = profile.get('surname') or ''
+    oid        = profile.get('id', '')
+    tid        = ''  # tenant wordt opgeslagen via de oid
+
+    if not email or not oid:
+        flash('Onvoldoende profielgegevens ontvangen van Microsoft.', 'error')
+        return redirect(url_for('auth.login'))
+
+    user, is_new = _get_or_create_user(email, first_name, last_name, oid, tid)
+
+    if not user.is_active:
+        flash('Uw account is gedeactiveerd. Contacteer uw ICT-beheerder.', 'error')
+        return redirect(url_for('auth.login'))
+
+    if not user.school_id and not user.is_scholengroep_ict and not user.is_superadmin:
+        flash(
+            'Uw account is aangemaakt maar nog niet gekoppeld aan een school. '
+            'Contacteer uw ICT-beheerder.', 'warning'
+        )
+
+    login_user(user, remember=True)
+    user.last_login = datetime.utcnow()
+    audit_log('login.success', 'auth', detail={'provider': 'microsoft', 'new_user': is_new})
+    db.session.commit()
+
+    logger.info(f"Entra login: {email} (nieuw: {is_new}, school_id: {user.school_id})")
+    return redirect(request.args.get('next') or url_for('pages.dashboard'))
+
+
+@auth_bp.route('/setup', methods=['GET', 'POST'])
+def setup():
+    admin = User.query.filter_by(role='superadmin').first()
+    if admin and admin.password_hash:
+        flash('Setup is al voltooid.', 'info')
+        return redirect(url_for('auth.login'))
+
+    if request.method == 'POST':
+        data     = request.get_json() if request.is_json else request.form
+        password = data.get('password', '')
+        confirm  = data.get('confirm', '')
+
+        if len(password) < 12:
+            if request.is_json:
+                return jsonify({'error': 'Wachtwoord moet minstens 12 tekens zijn'}), 400
+            flash('Wachtwoord moet minstens 12 tekens zijn', 'error')
+            return render_template('setup.html')
+
+        if password != confirm:
+            if request.is_json:
+                return jsonify({'error': 'Wachtwoorden komen niet overeen'}), 400
+            flash('Wachtwoorden komen niet overeen', 'error')
+            return render_template('setup.html')
+
+        if not admin:
+            admin = User(email='admin@leerdoelen.local', role='superadmin',
+                         first_name='Super', last_name='Admin')
+            db.session.add(admin)
+
+        admin.set_password(password)
+        db.session.commit()
+
+        if request.is_json:
+            return jsonify({'message': 'Setup voltooid', 'redirect': url_for('auth.login')})
+        flash('Setup voltooid! Je kan nu inloggen.', 'success')
+        return redirect(url_for('auth.login'))
+
+    return render_template('setup.html')
+
+
+@auth_bp.route('/superadmin-login', methods=['POST'])
+def superadmin_login():
+    """Fallback login ENKEL voor de superadmin — niet voor gewone gebruikers."""
+    if current_user.is_authenticated:
+        return redirect(url_for('pages.dashboard'))
+
+    data     = request.get_json() if request.is_json else request.form
+    email    = data.get('email', '').strip().lower()
+    password = data.get('password', '')
+
+    user = User.query.filter_by(email=email, role='superadmin', is_active=True).first()
+
+    if not user or not user.check_password(password):
+        if request.is_json:
+            return jsonify({'error': 'Ongeldig e-mailadres of wachtwoord'}), 401
+        flash('Ongeldig e-mailadres of wachtwoord', 'error')
+        return redirect(url_for('auth.login'))
+
+    login_user(user, remember=False)
+    user.last_login = datetime.utcnow()
+    audit_log('login.success', 'auth', detail={'provider': 'superadmin'}, user_id=user.id)
+    db.session.commit()
+
+    if request.is_json:
+        return jsonify({'redirect': url_for('pages.dashboard')})
+    return redirect(url_for('pages.dashboard'))
diff --git a/backend/routes/pages.py b/backend/routes/pages.py
new file mode 100644
index 0000000..93f1e2f
--- /dev/null
+++ b/backend/routes/pages.py
@@ -0,0 +1,60 @@
+from flask import Blueprint, render_template, redirect, url_for, current_app
+from flask_login import login_required, current_user
+
+pages_bp = Blueprint('pages', __name__)
+
+
+def _org_name():
+    return current_app.config.get('ORG_NAME', 'GO! Scholengroep')
+
+
+def _beheer_required(fn):
+    """Decorator: alleen superadmin en scholengroep_ict."""
+    from functools import wraps
+    from flask import abort
+    @wraps(fn)
+    def wrapper(*args, **kwargs):
+        if not current_user.is_authenticated:
+            return redirect(url_for('auth.login'))
+        if not (current_user.is_superadmin or current_user.role == 'scholengroep_ict'):
+            abort(403)
+        return fn(*args, **kwargs)
+    return wrapper
+
+
+@pages_bp.route('/')
+def index():
+    if current_user.is_authenticated:
+        return redirect(url_for('pages.dashboard'))
+    return redirect(url_for('auth.login'))
+
+
+@pages_bp.route('/dashboard')
+@login_required
+def dashboard():
+    org = _org_name()
+    if current_user.is_superadmin or current_user.role == 'scholengroep_ict':
+        return render_template('scholengroep_ict.html',
+                               is_superadmin=current_user.is_superadmin,
+                               org_name=org)
+    if current_user.role == 'school_ict':
+        return render_template('school_ict.html', org_name=org)
+    if current_user.role == 'director':
+        return render_template('directeur.html', org_name=org)
+    return render_template('leerkracht.html', org_name=org)
+
+
+@pages_bp.route('/doelen-beheer')
+@login_required
+@_beheer_required
+def doelen_beheer():
+    """Aparte pagina voor het beheer van leerdoelen bestanden."""
+    return render_template('doelen_beheer.html',
+                           is_superadmin=current_user.is_superadmin,
+                           org_name=_org_name())
+
+
+@pages_bp.route('/admin')
+@login_required
+def admin_page():
+    return redirect(url_for('pages.dashboard'))
diff --git a/backend/services/__init__.py b/backend/services/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/backend/services/audit.py b/backend/services/audit.py
new file mode 100644
index 0000000..88cecb2
--- /dev/null
+++ b/backend/services/audit.py
@@ -0,0 +1,69 @@
+"""
+Audit logging service.
+Gebruik: from services.audit import audit_log
+         audit_log('user.create', 'user', target_id=str(user.id), detail={'email': email})
+"""
+import json
+from datetime import datetime
+from flask import request
+from flask_login import current_user
+from app import db
+
+
+def audit_log(action: str, category: str, *,
+              target_type: str = None, target_id: str = None,
+              detail: dict = None, school_id: int = None,
+              user_id: int = None):
+    """
+    Schrijf een audit entry naar de database.
+
+    action:      korte actienaam, bv. 'user.create', 'school.delete', 'login.success'
+    category:    auth | user | school | class | assessment | doelen | system
+    target_type: wat er veranderd is, bv. 'user', 'school', 'class'
+    target_id:   identifier van het object (als string)
+    detail:      dict met extra context, wordt als JSON opgeslagen
+    school_id:   override school_id (standaard current_user.school_id)
+    user_id:     override user_id (standaard current_user.id)
+    """
+    from models import AuditLog
+
+    try:
+        uid = user_id
+        sid = school_id
+
+        if uid is None:
+            try:
+                uid = current_user.id if current_user.is_authenticated else None
+            except Exception:
+                uid = None
+
+        if sid is None:
+            try:
+                sid = current_user.school_id if current_user.is_authenticated else None
+            except Exception:
+                sid = None
+
+        ip = None
+        try:
+            ip = request.remote_addr
+        except Exception:
+            pass
+
+        entry = AuditLog(
+            timestamp   = datetime.utcnow(),
+            user_id     = uid,
+            school_id   = sid,
+            action      = action,
+            category    = category,
+            target_type = target_type,
+            target_id   = str(target_id) if target_id is not None else None,
+            detail      = json.dumps(detail, ensure_ascii=False) if detail else None,
+            ip_address  = ip,
+        )
+        db.session.add(entry)
+        # Geen commit hier — de aanroeper commit zelf (of we flushen mee)
+        db.session.flush()
+    except Exception as e:
+        # Audit failures mogen de hoofdflow nooit blokkeren
+        import logging
+        logging.getLogger(__name__).warning(f"Audit log failed: {e}")
diff --git a/backend/services/doelen.py b/backend/services/doelen.py
new file mode 100644
index 0000000..a151169
--- /dev/null
+++ b/backend/services/doelen.py
@@ -0,0 +1,137 @@
+"""
+Doelen service - centrale logica voor vak ID's, namen, validatie en upload.
+Eén bron van waarheid. Geen andere plek in de app definieert vaknamen.
+"""
+
+import os
+import json
+import re
+
+DOELEN_DIR = os.path.join(os.path.dirname(os.path.dirname(__file__)), 'doelen')
+
+VAK_NAMEN = {
+    'doelenset-bao-aardrijkskunde':         'Aardrijkskunde',
+    'doelenset-bao-burgerschap':            'Burgerschap',
+    'doelenset-bao-frans':                  'Frans',
+    'doelenset-bao-geschiedenis':           'Geschiedenis',
+    'doelenset-bao-ict':                    'ICT',
+    'doelenset-bao-leren-leren':            'Leren leren',
+    'doelenset-bao-lichamelijke-opvoeding': 'Lichamelijke opvoeding',
+    'doelenset-bao-muzische-vorming':       'Muzische vorming',
+    'doelenset-bao-nederlands':             'Nederlands',
+    'doelenset-bao-sociale-vaardigheden':   'Sociale vaardigheden',
+    'doelenset-bao-wetenschap-techniek':    'Wetenschap en techniek',
+    'doelenset-bao-wiskunde':               'Wiskunde',
+}
+
+
+def vak_naam(vak_id):
+    if vak_id in VAK_NAMEN:
+        return VAK_NAMEN[vak_id]
+    cleaned = re.sub(r'^doelenset-bao-', '', vak_id)
+    return cleaned.replace('-', ' ').title()
+
+
+def is_valid_vak_id(vak_id):
+    return bool(re.match(r'^[a-z0-9][a-z0-9\-]{2,78}[a-z0-9]$', vak_id))
+
+
+def get_doelen_path(vak_id):
+    return os.path.join(DOELEN_DIR, f'{vak_id}.json')
+
+
+def list_installed_vakken():
+    if not os.path.exists(DOELEN_DIR):
+        return []
+    return sorted([
+        f[:-5] for f in os.listdir(DOELEN_DIR)
+        if f.endswith('.json') and f != 'index.json' and is_valid_vak_id(f[:-5])
+    ])
+
+
+def load_index():
+    path = os.path.join(DOELEN_DIR, 'index.json')
+    if not os.path.exists(path):
+        rebuild_index()
+    with open(path, encoding='utf-8') as f:
+        data = json.load(f)
+    for vak in data.get('vakken', []):
+        vak['naam'] = vak_naam(vak['id'])
+    data['vakken'].sort(key=lambda v: v['naam'])
+    return data
+
+
+def load_vak(vak_id):
+    if not is_valid_vak_id(vak_id):
+        return None
+    path = get_doelen_path(vak_id)
+    if not os.path.exists(path):
+        return None
+    with open(path, encoding='utf-8') as f:
+        data = json.load(f)
+    data['vakNaam'] = vak_naam(vak_id)
+    return data
+
+
+def validate_vak_json(data):
+    errors = []
+    for key in ['vak', 'versie', 'rijen']:
+        if key not in data:
+            errors.append(f'Verplicht veld ontbreekt: "{key}"')
+    if errors:
+        return errors
+    if not isinstance(data['rijen'], list) or len(data['rijen']) == 0:
+        errors.append('"rijen" moet een niet-lege lijst zijn')
+        return errors
+    doelzinnen = [r for r in data['rijen'] if r.get('type') == 'doelzin']
+    if not doelzinnen:
+        errors.append('Geen doelzinnen gevonden (type="doelzin") — verkeerd bestand?')
+    else:
+        zonder_nr = [r for r in doelzinnen if not r.get('goNr')]
+        if zonder_nr:
+            errors.append(f'{len(zonder_nr)} doelzin(nen) missen een GO! nummer (goNr)')
+    vak_id = data.get('vak', '')
+    if vak_id and not is_valid_vak_id(vak_id):
+        errors.append(f'Ongeldig vak ID: "{vak_id}"')
+    return errors
+
+
+def save_vak(vak_id, data):
+    os.makedirs(DOELEN_DIR, exist_ok=True)
+    data['vakNaam'] = vak_naam(vak_id)
+    path = get_doelen_path(vak_id)
+    with open(path, 'w', encoding='utf-8') as f:
+        json.dump(data, f, ensure_ascii=False, indent=2)
+    rebuild_index()
+
+
+def delete_vak(vak_id):
+    path = get_doelen_path(vak_id)
+    if not os.path.exists(path):
+        return False
+    os.remove(path)
+    rebuild_index()
+    return True
+
+
+def rebuild_index():
+    os.makedirs(DOELEN_DIR, exist_ok=True)
+    vakken = []
+    for vak_id in list_installed_vakken():
+        try:
+            data = load_vak(vak_id)
+            if not data:
+                continue
+            doelzinnen = [r for r in data.get('rijen', []) if r.get('type') == 'doelzin']
+            vakken.append({
+                'id':               vak_id,
+                'naam':             vak_naam(vak_id),
+                'aantalDoelzinnen': len(doelzinnen),
+                'versie':           data.get('versie', '?'),
+            })
+        except Exception:
+            pass
+    vakken.sort(key=lambda v: v['naam'])
+    index = {'versie': '2025-01', 'vakken': vakken}
+    with open(os.path.join(DOELEN_DIR, 'index.json'), 'w', encoding='utf-8') as f:
+        json.dump(index, f, ensure_ascii=False, indent=2)
diff --git a/backend/templates/admin.html b/backend/templates/admin.html
new file mode 100644
index 0000000..ca4294d
--- /dev/null
+++ b/backend/templates/admin.html
@@ -0,0 +1,479 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Platform Beheer - Leerdoelen Tracker</title>
+    <style>
+        :root {
+            --primary: #4f46e5; --primary-dark: #4338ca;
+            --success: #10b981; --danger: #ef4444; --warning: #f59e0b;
+            --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
+            --gray-300: #d1d5db; --gray-500: #6b7280; --gray-600: #4b5563;
+            --gray-700: #374151; --gray-800: #1f2937;
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--gray-100); color: var(--gray-800); }
+        .container { max-width: 1400px; margin: 0 auto; padding: 1rem; }
+        .header { background: linear-gradient(135deg, #1f2937, #374151); color: white; border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
+        .header h1 { font-size: 1.4rem; display: flex; align-items: center; gap: 0.5rem; }
+        .badge { font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 4px; background: rgba(255,255,255,0.2); }
+        .btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s; text-decoration: none; }
+        .btn-primary { background: var(--primary); color: white; }
+        .btn-primary:hover { background: var(--primary-dark); }
+        .btn-danger { background: var(--danger); color: white; }
+        .btn-danger:hover { background: #dc2626; }
+        .btn-secondary { background: var(--gray-200); color: var(--gray-700); }
+        .btn-secondary:hover { background: var(--gray-300); }
+        .btn-light { background: rgba(255,255,255,0.15); color: white; border: 1px solid rgba(255,255,255,0.25); }
+        .btn-light:hover { background: rgba(255,255,255,0.25); }
+        .btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
+        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
+        .stat-card { background: white; border-radius: 10px; padding: 1rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+        .stat-value { font-size: 1.8rem; font-weight: 700; color: var(--primary); }
+        .stat-label { font-size: 0.75rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.2rem; }
+        .section { background: white; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+        .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.5rem; }
+        .section-header h2 { font-size: 1.05rem; color: var(--gray-700); }
+        table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
+        th { padding: 0.6rem 0.75rem; text-align: left; font-weight: 600; color: var(--gray-600); border-bottom: 2px solid var(--gray-200); white-space: nowrap; background: var(--gray-50); }
+        td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
+        tr:hover td { background: var(--gray-50); }
+        .role-badge { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
+        .role-superadmin { background: #fef3c7; color: #92400e; }
+        .role-scholengroep_ict { background: #ddd6fe; color: #4c1d95; }
+        .role-school_ict { background: #dbeafe; color: #1e40af; }
+        .role-director { background: #d1fae5; color: #065f46; }
+        .role-teacher { background: var(--gray-100); color: var(--gray-600); }
+        .domain-chip { display: inline-block; padding: 0.15rem 0.5rem; background: #eff6ff; color: #1d4ed8; border-radius: 4px; font-size: 0.75rem; margin: 0.1rem; border: 1px solid #bfdbfe; }
+        .empty-row td { text-align: center; color: var(--gray-500); padding: 2rem; font-style: italic; }
+        /* Modal */
+        .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
+        .modal-overlay.active { display: flex; }
+        .modal { background: white; border-radius: 12px; padding: 1.75rem; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; }
+        .modal h2 { font-size: 1.15rem; margin-bottom: 1.25rem; color: var(--gray-800); }
+        .form-group { margin-bottom: 1rem; }
+        .form-group label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-600); margin-bottom: 0.35rem; }
+        .form-group input, .form-group textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 0.9rem; }
+        .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
+        .form-hint { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.3rem; }
+        .modal-buttons { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.25rem; }
+        .form-error { color: var(--danger); font-size: 0.82rem; margin-top: 0.75rem; display: none; }
+        .notification { position: fixed; bottom: 1rem; right: 1rem; padding: 0.85rem 1.25rem; border-radius: 8px; color: white; font-weight: 500; transform: translateY(100px); opacity: 0; transition: all 0.3s; z-index: 2000; font-size: 0.9rem; }
+        .notification.show { transform: translateY(0); opacity: 1; }
+        .notification.success { background: var(--success); }
+        .notification.error { background: var(--danger); }
+    
+@media (prefers-color-scheme: dark) {
+    :root {
+        --gray-50:  #1a1a2e;
+        --gray-100: #16213e;
+        --gray-200: #0f3460;
+        --gray-300: #1a1a3e;
+        --gray-400: #6b7280;
+        --gray-500: #9ca3af;
+        --gray-600: #d1d5db;
+        --gray-700: #e5e7eb;
+        --gray-800: #f3f4f6;
+        --gray-900: #f9fafb;
+    }
+
+    body { background: #0f172a; color: #e2e8f0; }
+
+    /* Kaarten en secties */
+    .card, .section, .stat-card, .school-card,
+    .table-container, .filters-container, .legend-container,
+    .stats-bar .stat-card, .stats-overview, .vak-stats,
+    .import-section, .detail-section, .filters-bar,
+    .header:not([class*="gradient"]) {
+        background: #1e293b !important;
+        border-color: #334155 !important;
+    }
+
+    /* Header kaart in leerkracht.html */
+    .header { background: #1e293b !important; }
+
+    /* Tabellen */
+    thead, th { background: #1e293b !important; color: #94a3b8 !important; border-color: #334155 !important; }
+    td { border-color: #1e293b !important; color: #e2e8f0; }
+    tr:hover td, tr:hover { background: #263548 !important; }
+    tr.status-groen   { background: #064e3b !important; }
+    tr.status-groen:hover  { background: #065f46 !important; }
+    tr.status-oranje  { background: #451a03 !important; }
+    tr.status-oranje:hover { background: #78350f !important; }
+    tr.status-roze    { background: #500724 !important; }
+    tr.status-roze:hover   { background: #701a35 !important; }
+
+    /* Inputs en selects */
+    input, select, textarea {
+        background: #0f172a !important;
+        color: #e2e8f0 !important;
+        border-color: #334155 !important;
+    }
+    input::placeholder { color: #64748b !important; }
+    input:focus, select:focus, textarea:focus {
+        border-color: #6366f1 !important;
+        box-shadow: 0 0 0 3px rgba(99,102,241,0.2) !important;
+    }
+
+    /* Role select inline */
+    .role-select {
+        background: #1e293b !important;
+        color: #e2e8f0 !important;
+        border-color: #334155 !important;
+    }
+
+    /* Modals */
+    .modal { background: #1e293b !important; color: #e2e8f0; }
+    .modal h2 { color: #f1f5f9; }
+
+    /* Knoppen */
+    .btn-secondary { background: #334155 !important; color: #e2e8f0 !important; }
+    .btn-secondary:hover { background: #475569 !important; }
+
+    /* Status selector knoppen (leerkracht tabel) */
+    .status-selector.status-none { background: #1e293b !important; border-color: #475569 !important; color: #64748b !important; }
+
+    /* Stat cards */
+    .stat-card { background: #1e293b !important; }
+
+    /* School card header */
+    .school-card-header { background: #162032 !important; border-color: #334155 !important; }
+    .school-card { border-color: #334155 !important; }
+
+    /* Drop zone */
+    .drop-zone { background: #162032 !important; border-color: #334155 !important; }
+    .drop-zone:hover, .drop-zone.over { background: #1a2744 !important; border-color: #6366f1 !important; }
+
+    /* Domain chips */
+    .domain-chip { background: #1e3a5f !important; border-color: #2563eb !important; color: #93c5fd !important; }
+
+    /* Badges */
+    .leeftijd-badge { background: #334155 !important; color: #94a3b8 !important; }
+    .ebg-begrijpen { color: #1f2937 !important; }
+
+    /* MIA container */
+    .mia-container { background: #162032 !important; }
+    .mia-item { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
+    .mia-item.niet-aanklikbaar { background: #162032 !important; color: #64748b !important; }
+
+    /* Not configured box */
+    .not-configured { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
+    .not-configured code { background: #0f172a !important; color: #a5b4fc !important; }
+
+    /* Profile section */
+    .profile-section { background: #162032 !important; }
+
+    /* Leeftijd checkboxes */
+    .leeftijd-checkbox { border-color: #334155 !important; color: #e2e8f0; }
+    .leeftijd-checkbox:has(input:checked) { background: var(--primary) !important; }
+
+    /* Vak indicator */
+    .vak-indicator { /* gradient blijft, ziet er goed uit */ }
+
+    /* Progress bars achtergrond */
+    .progress-bar { background: #334155 !important; }
+
+    /* Vak card */
+    .vak-card { background: #162032 !important; }
+
+    /* Upload results */
+    .upload-ok  { background: #064e3b !important; border-color: #065f46 !important; }
+    .upload-err { background: #450a0a !important; border-color: #7f1d1d !important; }
+
+    /* Alert boxes */
+    .alert-error   { background: #450a0a !important; border-color: #7f1d1d !important; color: #fca5a5 !important; }
+    .alert-success { background: #064e3b !important; border-color: #065f46 !important; color: #6ee7b7 !important; }
+    .alert-warning { background: #451a03 !important; border-color: #78350f !important; color: #fcd34d !important; }
+    .alert-info    { background: #1e3a5f !important; border-color: #1d4ed8 !important; color: #93c5fd !important; }
+
+    /* Error text */
+    .form-error, #sa-error, #addUser-error { color: #f87171 !important; }
+    .form-hint { color: #64748b !important; }
+
+    /* Superadmin toggle */
+    .superadmin-toggle { border-color: #334155 !important; }
+    .superadmin-toggle button { color: #475569 !important; }
+    .superadmin-toggle button:hover { color: #94a3b8 !important; }
+
+    /* Superadmin form inputs */
+    .superadmin-form label { color: #94a3b8 !important; }
+
+    /* Footer */
+    .footer { color: #64748b !important; }
+    .status-legend { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
+
+    /* Scrollbar (webkit) */
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
+    ::-webkit-scrollbar-track { background: #0f172a; }
+    ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
+    ::-webkit-scrollbar-thumb:hover { background: #475569; }
+}
+</style>
+</head>
+<body>
+<div class="container">
+    <div class="header">
+        <h1>⚙️ Platform Beheer <span class="badge">Superadmin</span></h1>
+        <a href="/auth/logout" class="btn btn-light">Uitloggen</a>
+    </div>
+
+    <!-- Stats -->
+    <div class="stats-grid" id="statsGrid">
+        <div class="stat-card"><div class="stat-value" id="st-schools">-</div><div class="stat-label">Scholen</div></div>
+        <div class="stat-card"><div class="stat-value" id="st-sg-ict">-</div><div class="stat-label">Scholengroep ICT</div></div>
+        <div class="stat-card"><div class="stat-value" id="st-school-ict">-</div><div class="stat-label">School ICT</div></div>
+        <div class="stat-card"><div class="stat-value" id="st-directors">-</div><div class="stat-label">Directeurs</div></div>
+        <div class="stat-card"><div class="stat-value" id="st-teachers">-</div><div class="stat-label">Leerkrachten</div></div>
+    </div>
+
+    <!-- Scholengroep ICT -->
+    <div class="section">
+        <div class="section-header">
+            <h2>👥 Scholengroep ICT medewerkers</h2>
+            <button class="btn btn-primary btn-sm" onclick="openModal('addSgIct')">+ Toevoegen</button>
+        </div>
+        <table>
+            <thead><tr><th>Naam</th><th>E-mail</th><th>Laatste login</th><th></th></tr></thead>
+            <tbody id="sgIctTable"><tr class="empty-row"><td colspan="4">Laden...</td></tr></tbody>
+        </table>
+    </div>
+
+    <!-- Scholen -->
+    <div class="section">
+        <div class="section-header">
+            <h2>🏫 Scholen</h2>
+            <button class="btn btn-primary btn-sm" onclick="openModal('addSchool')">+ School toevoegen</button>
+        </div>
+        <table>
+            <thead><tr><th>Naam</th><th>Slug</th><th>E-maildomeinen</th><th>Gebruikers</th><th></th></tr></thead>
+            <tbody id="schoolsTable"><tr class="empty-row"><td colspan="5">Laden...</td></tr></tbody>
+        </table>
+    </div>
+</div>
+
+<!-- Modal: scholengroep ICT toevoegen -->
+<div class="modal-overlay" id="modal-addSgIct">
+    <div class="modal">
+        <h2>Scholengroep ICT toevoegen</h2>
+        <p style="color:var(--gray-500);font-size:0.85rem;margin-bottom:1rem;">
+            Deze persoon kan alle scholen beheren en directeurs/school ICT toewijzen.
+            Zij loggen in via hun Microsoft account.
+        </p>
+        <div class="form-group"><label>Voornaam</label><input type="text" id="sgFirstName"></div>
+        <div class="form-group"><label>Achternaam</label><input type="text" id="sgLastName"></div>
+        <div class="form-group">
+            <label>E-mailadres (Microsoft account)</label>
+            <input type="email" id="sgEmail">
+            <div class="form-hint">Het account wordt aangemaakt en geactiveerd bij eerste Entra login.</div>
+        </div>
+        <div class="form-error" id="sg-error"></div>
+        <div class="modal-buttons">
+            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
+            <button class="btn btn-primary" onclick="addSgIct()">Toevoegen</button>
+        </div>
+    </div>
+</div>
+
+<!-- Modal: school toevoegen -->
+<div class="modal-overlay" id="modal-addSchool">
+    <div class="modal">
+        <h2>School toevoegen</h2>
+        <div class="form-group">
+            <label>Naam van de school</label>
+            <input type="text" id="schoolName" placeholder="bv. Basisschool De Krekel">
+        </div>
+        <div class="form-group">
+            <label>Slug (optioneel)</label>
+            <input type="text" id="schoolSlug" placeholder="bv. de-krekel (auto-gegenereerd)">
+            <div class="form-hint">Wordt gebruikt in interne identificatie. Kleine letters, streepjes.</div>
+        </div>
+        <div class="form-group">
+            <label>E-maildomeinen</label>
+            <input type="text" id="schoolDomains" placeholder="bv. dekrekel.be, sintjan.gent.be">
+            <div class="form-hint">Komma-gescheiden. Leerkrachten met dit domein worden automatisch aan deze school gekoppeld.</div>
+        </div>
+        <div class="form-error" id="school-error"></div>
+        <div class="modal-buttons">
+            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
+            <button class="btn btn-primary" onclick="addSchool()">Toevoegen</button>
+        </div>
+    </div>
+</div>
+
+<!-- Modal: school bewerken -->
+<div class="modal-overlay" id="modal-editSchool">
+    <div class="modal">
+        <h2>School bewerken</h2>
+        <input type="hidden" id="editSchoolId">
+        <div class="form-group"><label>Naam</label><input type="text" id="editSchoolName"></div>
+        <div class="form-group">
+            <label>E-maildomeinen</label>
+            <input type="text" id="editSchoolDomains">
+            <div class="form-hint">Komma-gescheiden. Leerkrachten met dit domein worden automatisch aan deze school gekoppeld.</div>
+        </div>
+        <div class="form-error" id="edit-school-error"></div>
+        <div class="modal-buttons">
+            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
+            <button class="btn btn-primary" onclick="saveSchool()">Opslaan</button>
+        </div>
+    </div>
+</div>
+
+<div class="notification" id="notification"></div>
+
+<script>
+document.addEventListener('DOMContentLoaded', async () => {
+    await loadStats();
+    await loadSgIct();
+    await loadSchools();
+});
+
+async function loadStats() {
+    const res  = await fetch('/admin/stats');
+    if (!res.ok) return;
+    const data = await res.json();
+    document.getElementById('st-schools').textContent    = data.schools;
+    document.getElementById('st-sg-ict').textContent     = data.scholengroep_ict;
+    document.getElementById('st-school-ict').textContent = data.school_ict;
+    document.getElementById('st-directors').textContent  = data.directors;
+    document.getElementById('st-teachers').textContent   = data.teachers;
+}
+
+async function loadSgIct() {
+    const res  = await fetch('/admin/scholengroep-ict');
+    const data = await res.json();
+    const tbody = document.getElementById('sgIctTable');
+    if (!data.users?.length) {
+        tbody.innerHTML = '<tr class="empty-row"><td colspan="4">Geen scholengroep ICT medewerkers</td></tr>';
+        return;
+    }
+    tbody.innerHTML = data.users.map(u => `
+        <tr>
+            <td>${u.full_name}</td>
+            <td>${u.email}</td>
+            <td style="color:var(--gray-500);font-size:0.8rem;">${u.last_login ? new Date(u.last_login).toLocaleDateString('nl-BE') : 'Nog niet ingelogd'}</td>
+            <td><button class="btn btn-danger btn-sm" onclick="removeSgIct(${u.id})">Verwijderen</button></td>
+        </tr>`).join('');
+}
+
+async function loadSchools() {
+    const res   = await fetch('/admin/schools');
+    const data  = await res.json();
+    const tbody = document.getElementById('schoolsTable');
+    if (!data.schools?.length) {
+        tbody.innerHTML = '<tr class="empty-row"><td colspan="5">Nog geen scholen aangemaakt</td></tr>';
+        return;
+    }
+    tbody.innerHTML = data.schools.map(s => `
+        <tr>
+            <td><strong>${s.name}</strong></td>
+            <td style="color:var(--gray-500);font-family:monospace;font-size:0.8rem;">${s.slug}</td>
+            <td>${(s.email_domains||[]).map(d=>`<span class="domain-chip">${d}</span>`).join('')||'<em style="color:var(--gray-400)">geen</em>'}</td>
+            <td style="color:var(--gray-500);">${s.user_count}</td>
+            <td style="display:flex;gap:0.4rem;">
+                <button class="btn btn-secondary btn-sm" onclick="editSchool(${s.id},'${s.name.replace(/'/g,"\\'")}','${(s.email_domains||[]).join(', ')}')">Bewerken</button>
+                <button class="btn btn-danger btn-sm" onclick="deleteSchool(${s.id},'${s.name.replace(/'/g,"\\'")}')">Verwijderen</button>
+            </td>
+        </tr>`).join('');
+}
+
+// ── Scholengroep ICT ──────────────────────────────────────────────────────────
+async function addSgIct() {
+    const err = document.getElementById('sg-error');
+    err.style.display = 'none';
+    const res = await fetch('/admin/scholengroep-ict', {
+        method: 'POST', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({
+            email:      document.getElementById('sgEmail').value,
+            first_name: document.getElementById('sgFirstName').value,
+            last_name:  document.getElementById('sgLastName').value,
+        })
+    });
+    const data = await res.json();
+    if (!res.ok) { err.textContent = data.error; err.style.display = 'block'; return; }
+    closeModal(); notify('Scholengroep ICT toegevoegd', 'success');
+    await loadSgIct(); await loadStats();
+}
+
+async function removeSgIct(userId) {
+    if (!confirm('Scholengroep ICT verwijderen?')) return;
+    await fetch(`/admin/schools/1/users/${userId}`, { method: 'DELETE' }); // TODO: proper endpoint
+    notify('Verwijderd', 'success');
+    await loadSgIct(); await loadStats();
+}
+
+// ── Scholen ───────────────────────────────────────────────────────────────────
+async function addSchool() {
+    const err = document.getElementById('school-error');
+    err.style.display = 'none';
+    const domains = document.getElementById('schoolDomains').value
+        .split(',').map(d=>d.trim()).filter(Boolean);
+    const res = await fetch('/admin/schools', {
+        method: 'POST', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({
+            name:         document.getElementById('schoolName').value,
+            slug:         document.getElementById('schoolSlug').value,
+            email_domains: domains,
+        })
+    });
+    const data = await res.json();
+    if (!res.ok) { err.textContent = data.error; err.style.display = 'block'; return; }
+    closeModal(); notify('School aangemaakt', 'success');
+    await loadSchools(); await loadStats();
+}
+
+function editSchool(id, name, domainsStr) {
+    document.getElementById('editSchoolId').value     = id;
+    document.getElementById('editSchoolName').value   = name;
+    document.getElementById('editSchoolDomains').value = domainsStr;
+    openModal('editSchool');
+}
+
+async function saveSchool() {
+    const err = document.getElementById('edit-school-error');
+    err.style.display = 'none';
+    const id      = document.getElementById('editSchoolId').value;
+    const domains = document.getElementById('editSchoolDomains').value
+        .split(',').map(d=>d.trim()).filter(Boolean);
+    const res = await fetch(`/admin/schools/${id}`, {
+        method: 'PUT', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({
+            name:         document.getElementById('editSchoolName').value,
+            email_domains: domains,
+        })
+    });
+    const data = await res.json();
+    if (!res.ok) { err.textContent = data.error; err.style.display = 'block'; return; }
+    closeModal(); notify('School opgeslagen', 'success');
+    await loadSchools();
+}
+
+async function deleteSchool(id, name) {
+    if (!confirm(`School "${name}" permanent verwijderen? Dit verwijdert alle data!`)) return;
+    const res = await fetch(`/admin/schools/${id}`, { method: 'DELETE' });
+    if (!res.ok) { notify('Verwijderen mislukt', 'error'); return; }
+    notify('School verwijderd', 'success');
+    await loadSchools(); await loadStats();
+}
+
+// ── Modal helpers ─────────────────────────────────────────────────────────────
+function openModal(id) {
+    document.querySelectorAll('.modal-overlay').forEach(m => m.classList.remove('active'));
+    document.getElementById(`modal-${id}`).classList.add('active');
+}
+function closeModal() {
+    document.querySelectorAll('.modal-overlay').forEach(m => m.classList.remove('active'));
+}
+document.querySelectorAll('.modal-overlay').forEach(overlay => {
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) closeModal(); });
+});
+
+function notify(msg, type='success') {
+    const el = document.getElementById('notification');
+    el.textContent = msg; el.className = `notification ${type} show`;
+    setTimeout(() => el.classList.remove('show'), 3000);
+}
+</script>
+</body>
+</html>
diff --git a/backend/templates/directeur.html b/backend/templates/directeur.html
new file mode 100644
index 0000000..74c0add
--- /dev/null
+++ b/backend/templates/directeur.html
@@ -0,0 +1,919 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Directeur Dashboard - Leerdoelen Tracker</title>
+    <style>
+        :root {
+            --primary: #4f46e5; --primary-dark: #4338ca;
+            --success: #10b981; --warning: #f59e0b; --danger: #ef4444;
+            --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
+            --gray-300: #d1d5db; --gray-500: #6b7280; --gray-600: #4b5563;
+            --gray-700: #374151; --gray-800: #1f2937;
+            --status-groen: #10b981; --status-oranje: #f59e0b; --status-roze: #ec4899;
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--gray-100); color: var(--gray-800); }
+        .container { max-width: 1600px; margin: 0 auto; padding: 1rem; }
+        .header { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
+        .header h1 { font-size: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
+        .btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s; text-decoration: none; }
+        .btn-light { background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); }
+        .btn-light:hover { background: rgba(255,255,255,0.3); }
+        .btn-primary { background: var(--primary); color: white; }
+        .btn-primary:hover { background: var(--primary-dark); }
+        .btn-secondary { background: var(--gray-200); color: var(--gray-700); }
+        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
+        .stat-card { background: white; border-radius: 8px; padding: 1rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+        .stat-value { font-size: 2rem; font-weight: 700; }
+        .stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); margin-top: 0.25rem; }
+        .section { background: white; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+        .section h2 { font-size: 1.1rem; color: var(--gray-700); margin-bottom: 1rem; }
+        .filters-bar { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
+        .filter-group { display: flex; flex-direction: column; gap: 0.25rem; }
+        .filter-group label { font-size: 0.75rem; font-weight: 500; color: var(--gray-500); }
+        .filter-group select, .filter-group input { padding: 0.5rem; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 0.9rem; min-width: 150px; }
+        .table-scroll { overflow-x: auto; }
+        table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
+        thead { background: var(--gray-50); }
+        th { padding: 0.75rem 0.5rem; text-align: center; font-weight: 600; color: var(--gray-600); border-bottom: 2px solid var(--gray-200); white-space: nowrap; }
+        th.goal-header { text-align: left; min-width: 250px; }
+        th.teacher-header { min-width: 80px; font-size: 0.75rem; }
+        td { padding: 0.5rem; border-bottom: 1px solid var(--gray-100); text-align: center; }
+        td.goal-cell { text-align: left; }
+        tr:hover { background: var(--gray-50); }
+        .goal-code { font-weight: 600; color: var(--gray-700); }
+        .goal-desc { font-size: 0.8rem; color: var(--gray-500); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .status-indicator { width: 24px; height: 24px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: bold; }
+        .status-indicator.groen { background: var(--status-groen); color: white; }
+        .status-indicator.oranje { background: var(--status-oranje); color: white; }
+        .status-indicator.roze { background: var(--status-roze); color: white; }
+        .status-indicator.none { background: var(--gray-200); color: var(--gray-400); }
+        .progress-bar { height: 8px; background: var(--gray-200); border-radius: 4px; overflow: hidden; min-width: 60px; }
+        .progress-bar-inner { height: 100%; display: flex; }
+        .p-groen { background: var(--status-groen); }
+        .p-oranje { background: var(--status-oranje); }
+        .p-roze { background: var(--status-roze); }
+        .leeftijd-badge { font-size: 0.7rem; padding: 0.15rem 0.35rem; background: var(--gray-200); border-radius: 3px; }
+        .empty-state { text-align: center; padding: 3rem; color: var(--gray-500); }
+        .loading { text-align: center; padding: 3rem; color: var(--gray-500); }
+        .notification { position: fixed; bottom: 1rem; right: 1rem; padding: 1rem 1.5rem; border-radius: 8px; color: white; font-weight: 500; transform: translateY(100px); opacity: 0; transition: all 0.3s; z-index: 1001; }
+        .notification.show { transform: translateY(0); opacity: 1; }
+        .notification.success { background: var(--success); }
+        .notification.error { background: var(--danger); }
+        /* Leerkrachten beheer */
+        .teacher-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
+        .teacher-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--gray-100); border-radius: 9999px; font-size: 0.85rem; }
+        .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
+        .modal-overlay.active { display: flex; }
+        .modal { background: white; border-radius: 12px; padding: 1.5rem; max-width: 450px; width: 90%; }
+        .modal h2 { margin-bottom: 1rem; }
+        .form-group { margin-bottom: 1rem; }
+        .form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.35rem; }
+        .form-group input { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 0.9rem; }
+        .modal-buttons { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
+    
+@media (prefers-color-scheme: dark) {
+    :root {
+        --gray-50:  #1a1a2e;
+        --gray-100: #16213e;
+        --gray-200: #0f3460;
+        --gray-300: #1a1a3e;
+        --gray-400: #6b7280;
+        --gray-500: #9ca3af;
+        --gray-600: #d1d5db;
+        --gray-700: #e5e7eb;
+        --gray-800: #f3f4f6;
+        --gray-900: #f9fafb;
+    }
+
+    body { background: #0f172a; color: #e2e8f0; }
+
+    /* Kaarten en secties */
+    .card, .section, .stat-card, .school-card,
+    .table-container, .filters-container, .legend-container,
+    .stats-bar .stat-card, .stats-overview, .vak-stats,
+    .import-section, .detail-section, .filters-bar,
+    .header:not([class*="gradient"]) {
+        background: #1e293b !important;
+        border-color: #334155 !important;
+    }
+
+    /* Header kaart in leerkracht.html */
+    .header { background: #1e293b !important; }
+
+    /* Tabellen */
+    thead, th { background: #1e293b !important; color: #94a3b8 !important; border-color: #334155 !important; }
+    td { border-color: #1e293b !important; color: #e2e8f0; }
+    tr:hover td, tr:hover { background: #263548 !important; }
+    tr.status-groen   { background: #064e3b !important; }
+    tr.status-groen:hover  { background: #065f46 !important; }
+    tr.status-oranje  { background: #451a03 !important; }
+    tr.status-oranje:hover { background: #78350f !important; }
+    tr.status-roze    { background: #500724 !important; }
+    tr.status-roze:hover   { background: #701a35 !important; }
+
+    /* Inputs en selects */
+    input, select, textarea {
+        background: #0f172a !important;
+        color: #e2e8f0 !important;
+        border-color: #334155 !important;
+    }
+    input::placeholder { color: #64748b !important; }
+    input:focus, select:focus, textarea:focus {
+        border-color: #6366f1 !important;
+        box-shadow: 0 0 0 3px rgba(99,102,241,0.2) !important;
+    }
+
+    /* Role select inline */
+    .role-select {
+        background: #1e293b !important;
+        color: #e2e8f0 !important;
+        border-color: #334155 !important;
+    }
+
+    /* Modals */
+    .modal { background: #1e293b !important; color: #e2e8f0; }
+    .modal h2 { color: #f1f5f9; }
+
+    /* Knoppen */
+    .btn-secondary { background: #334155 !important; color: #e2e8f0 !important; }
+    .btn-secondary:hover { background: #475569 !important; }
+
+    /* Status selector knoppen (leerkracht tabel) */
+    .status-selector.status-none { background: #1e293b !important; border-color: #475569 !important; color: #64748b !important; }
+
+    /* Stat cards */
+    .stat-card { background: #1e293b !important; }
+
+    /* School card header */
+    .school-card-header { background: #162032 !important; border-color: #334155 !important; }
+    .school-card { border-color: #334155 !important; }
+
+    /* Drop zone */
+    .drop-zone { background: #162032 !important; border-color: #334155 !important; }
+    .drop-zone:hover, .drop-zone.over { background: #1a2744 !important; border-color: #6366f1 !important; }
+
+    /* Domain chips */
+    .domain-chip { background: #1e3a5f !important; border-color: #2563eb !important; color: #93c5fd !important; }
+
+    /* Badges */
+    .leeftijd-badge { background: #334155 !important; color: #94a3b8 !important; }
+    .ebg-begrijpen { color: #1f2937 !important; }
+
+    /* MIA container */
+    .mia-container { background: #162032 !important; }
+    .mia-item { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
+    .mia-item.niet-aanklikbaar { background: #162032 !important; color: #64748b !important; }
+
+    /* Not configured box */
+    .not-configured { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
+    .not-configured code { background: #0f172a !important; color: #a5b4fc !important; }
+
+    /* Profile section */
+    .profile-section { background: #162032 !important; }
+
+    /* Leeftijd checkboxes */
+    .leeftijd-checkbox { border-color: #334155 !important; color: #e2e8f0; }
+    .leeftijd-checkbox:has(input:checked) { background: var(--primary) !important; }
+
+    /* Vak indicator */
+    .vak-indicator { /* gradient blijft, ziet er goed uit */ }
+
+    /* Progress bars achtergrond */
+    .progress-bar { background: #334155 !important; }
+
+    /* Vak card */
+    .vak-card { background: #162032 !important; }
+
+    /* Upload results */
+    .upload-ok  { background: #064e3b !important; border-color: #065f46 !important; }
+    .upload-err { background: #450a0a !important; border-color: #7f1d1d !important; }
+
+    /* Alert boxes */
+    .alert-error   { background: #450a0a !important; border-color: #7f1d1d !important; color: #fca5a5 !important; }
+    .alert-success { background: #064e3b !important; border-color: #065f46 !important; color: #6ee7b7 !important; }
+    .alert-warning { background: #451a03 !important; border-color: #78350f !important; color: #fcd34d !important; }
+    .alert-info    { background: #1e3a5f !important; border-color: #1d4ed8 !important; color: #93c5fd !important; }
+
+    /* Error text */
+    .form-error, #sa-error, #addUser-error { color: #f87171 !important; }
+    .form-hint { color: #64748b !important; }
+
+    /* Superadmin toggle */
+    .superadmin-toggle { border-color: #334155 !important; }
+    .superadmin-toggle button { color: #475569 !important; }
+    .superadmin-toggle button:hover { color: #94a3b8 !important; }
+
+    /* Superadmin form inputs */
+    .superadmin-form label { color: #94a3b8 !important; }
+
+    /* Footer */
+    .footer { color: #64748b !important; }
+    .status-legend { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
+
+    /* Scrollbar (webkit) */
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
+    ::-webkit-scrollbar-track { background: #0f172a; }
+    ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
+    ::-webkit-scrollbar-thumb:hover { background: #475569; }
+}
+</style>
+</head>
+<body>
+<div class="container">
+    <div class="header">
+        <div>
+            <h1>🏫 Directeur Dashboard</h1>
+            <div style="opacity:0.85;font-size:0.85rem;margin-top:0.25rem;" id="schoolInfo"></div>
+        </div>
+        <div style="display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;">
+            <div style="display:flex;flex-direction:column;gap:0.2rem;">
+                <label style="font-size:0.7rem;opacity:0.75;text-transform:uppercase;letter-spacing:0.05em;">Schooljaar</label>
+                <select id="jaarSelector" onchange="switchJaar()"
+                    style="padding:0.35rem 0.6rem;border:1px solid rgba(255,255,255,0.3);border-radius:6px;background:rgba(255,255,255,0.15);color:white;font-size:0.85rem;cursor:pointer;">
+                    <option value="">Laden...</option>
+                </select>
+            </div>
+            <button class="btn btn-light" onclick="loadOverview()">↻ Vernieuwen</button>
+            <a href="/auth/logout" class="btn btn-light">Uitloggen</a>
+        </div>
+    </div>
+
+    <!-- Stats -->
+    <div class="stats-grid" id="statsGrid">
+        <div class="stat-card"><div class="stat-value" id="statTeachers">-</div><div class="stat-label">Leerkrachten</div></div>
+        <div class="stat-card"><div class="stat-value" id="statVakken">-</div><div class="stat-label">Vakken</div></div>
+        <div class="stat-card"><div class="stat-value" id="statBeoordeeld">-</div><div class="stat-label">Beoordelingen</div></div>
+        <div class="stat-card" style="border-left:3px solid var(--status-groen)"><div class="stat-value" id="statGroen">-</div><div class="stat-label">Groen</div></div>
+        <div class="stat-card" style="border-left:3px solid var(--status-oranje)"><div class="stat-value" id="statOranje">-</div><div class="stat-label">Oranje</div></div>
+        <div class="stat-card" style="border-left:3px solid var(--status-roze)"><div class="stat-value" id="statRoze">-</div><div class="stat-label">Roze</div></div>
+    </div>
+
+    <!-- Leerkrachten beheer -->
+    <div class="section">
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
+            <h2>👩‍🏫 Leerkrachten</h2>
+            <button class="btn btn-primary" onclick="openAddTeacher()">+ Leerkracht toevoegen</button>
+        </div>
+        <div class="teacher-list" id="teacherList">Laden...</div>
+    </div>
+
+    <!-- Tab navigatie -->
+    <div style="display:flex;gap:.25rem;margin-bottom:.5rem;">
+        <button class="tab-btn active" onclick="switchTab('doelen')" id="tab-doelen">📋 Doelen</button>
+        <button class="tab-btn" onclick="switchTab('klassen')" id="tab-klassen">🏫 Klasoverzicht</button>
+        <button class="tab-btn" onclick="switchTab('vergelijk')" id="tab-vergelijk">⚖️ Klasvergelijking</button>
+    </div>
+
+    <!-- Tab: Doelen (bestaande view) -->
+    <div id="panel-doelen" class="section">
+        <div class="filters-bar">
+            <div class="filter-group">
+                <label>Vak</label>
+                <select id="filterVak" onchange="applyFilters()">
+                    <option value="all">Alle vakken</option>
+                </select>
+            </div>
+            <div class="filter-group">
+                <label>Leerkracht</label>
+                <select id="filterTeacher" onchange="applyFilters()">
+                    <option value="all">Alle leerkrachten</option>
+                </select>
+            </div>
+            <div class="filter-group">
+                <label>Klas</label>
+                <select id="filterKlas" onchange="applyFilters()">
+                    <option value="all">Alle klassen</option>
+                </select>
+            </div>
+            <div class="filter-group">
+                <label>Status</label>
+                <select id="filterStatus" onchange="applyFilters()">
+                    <option value="all">Alle statussen</option>
+                    <option value="consensus">✓ Iedereen groen</option>
+                    <option value="verschil">⚠ Verschillen</option>
+                    <option value="niemand">○ Niemand beoordeeld</option>
+                </select>
+            </div>
+            <div class="filter-group">
+                <label>Zoeken</label>
+                <input type="text" id="filterSearch" placeholder="Code of beschrijving..." oninput="applyFilters()">
+            </div>
+        </div>
+
+        <div class="table-scroll">
+            <table>
+                <thead id="tableHead">
+                    <tr><th class="goal-header">Doel</th><th>Samenvatting</th></tr>
+                </thead>
+                <tbody id="tableBody">
+                    <tr><td colspan="3" class="loading">Laden...</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<!-- Modal: leerkracht toevoegen -->
+<div class="modal-overlay" id="addTeacherModal">
+    <div class="modal">
+        <h2>Leerkracht toevoegen</h2>
+        <div class="form-group"><label>Voornaam</label><input type="text" id="newFirstName"></div>
+        <div class="form-group"><label>Achternaam</label><input type="text" id="newLastName"></div>
+        <div class="form-group"><label>E-mailadres</label><input type="email" id="newEmail"></div>
+        <div class="form-group"><label>Tijdelijk wachtwoord</label><input type="password" id="newPassword"></div>
+        <div id="addTeacherError" style="color:var(--danger);font-size:0.85rem;display:none;"></div>
+        <div class="modal-buttons">
+            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
+            <button class="btn btn-primary" onclick="addTeacher()">Toevoegen</button>
+        </div>
+    </div>
+</div>
+
+<div class="notification" id="notification"></div>
+
+<script>
+let teachers     = [];
+let allGoals     = {};
+let vakData      = {};
+let overviewData = null;
+let activeYearId = null;   // null = huidig actief jaar
+
+document.addEventListener('DOMContentLoaded', async () => {
+    await loadUser();
+    await loadJaren();
+    await loadTeachers();
+    await loadOverview();
+});
+
+async function loadUser() {
+    const res  = await fetch('/api/me');
+    const data = await res.json();
+    document.getElementById('schoolInfo').textContent =
+        `${data.user.full_name} — ${data.user.school?.name || ''}`;
+}
+
+async function loadJaren() {
+    const res  = await fetch('/api/school/years');
+    if (!res.ok) return;
+    const data = await res.json();
+    const sel  = document.getElementById('jaarSelector');
+    sel.innerHTML = '';
+    data.years.forEach(y => {
+        const opt   = document.createElement('option');
+        opt.value   = y.id;
+        opt.textContent = y.label + (y.is_active ? ' (huidig)' : '');
+        if (y.is_active) { opt.selected = true; activeYearId = y.id; }
+        sel.appendChild(opt);
+    });
+    if (!activeYearId && data.years.length) activeYearId = data.years[0].id;
+}
+
+async function switchJaar() {
+    activeYearId = document.getElementById('jaarSelector').value || null;
+    await loadOverview();
+}
+
+async function loadTeachers() {
+    const res  = await fetch('/api/users');
+    const data = await res.json();
+    teachers   = data.users.filter(u => u.role === 'teacher');
+    renderTeacherList();
+    populateTeacherFilter();
+    populateKlasFilter();
+}
+
+function populateKlasFilter() {
+    const allKlassen = [...new Set(
+        teachers.flatMap(t => (t.classes || []).map(c => c.name))
+    )].sort();
+    const sel = document.getElementById('filterKlas');
+    sel.innerHTML = '<option value="all">Alle klassen</option>';
+    allKlassen.forEach(k => {
+        const o = document.createElement('option');
+        o.value = o.textContent = k;
+        sel.appendChild(o);
+    });
+}
+
+function renderTeacherList() {
+    const el = document.getElementById('teacherList');
+    if (!teachers.length) { el.innerHTML = '<em style="color:var(--gray-500)">Nog geen leerkrachten</em>'; return; }
+    el.innerHTML = teachers.map(t => `
+        <div class="teacher-chip">
+            <span>${t.full_name}</span>
+            <button onclick="removeTeacher(${t.id})"
+                style="width:18px;height:18px;border-radius:50%;border:none;background:var(--gray-300);cursor:pointer;font-size:0.7rem;"
+                title="Verwijderen">×</button>
+        </div>`).join('');
+}
+
+async function loadOverview() {
+    const vakFilter = document.getElementById('filterVak').value || 'all';
+    const params    = new URLSearchParams();
+    if (vakFilter !== 'all') params.set('vak_id', vakFilter);
+    if (activeYearId)        params.set('year_id', activeYearId);
+    const url = `/api/school/overview?${params.toString()}`;
+    const res  = await fetch(url);
+    if (!res.ok) { showNotification('Kon overzicht niet laden', 'error'); return; }
+    overviewData = await res.json();
+
+    // Laad vak data voor doelomschrijvingen
+    await loadVakData();
+    updateStats();
+    populateVakFilter();
+    applyFilters();
+}
+
+async function loadVakData() {
+    // Verzamel unieke vakken uit assessments
+    const vakIds = new Set();
+    Object.values(overviewData.assessments_by_teacher).forEach(teacherVakken => {
+        Object.keys(teacherVakken).forEach(v => vakIds.add(v));
+    });
+
+    for (const vakId of vakIds) {
+        if (!vakData[vakId]) {
+            const res = await fetch(`/api/doelen/${vakId}`);
+            if (res.ok) {
+                vakData[vakId] = await res.json();
+                processVakGoals(vakId);
+            }
+        }
+    }
+}
+
+function processVakGoals(vakId) {
+    const data = vakData[vakId];
+    if (!data?.rijen) return;
+    const sectieLookup = {};
+    data.rijen.forEach(r => {
+        if (['onderwerp','rubriek','subrubriek','subthema'].includes(r.type))
+            sectieLookup[r.id] = r.inhoud;
+    });
+    allGoals[vakId] = data.rijen
+        .filter(r => r.type === 'doelzin' && r.goNr)
+        .map(r => ({
+            id: r.goNr, goNr: r.goNr, inhoud: r.inhoud,
+            sectie: r.parentId ? sectieLookup[r.parentId] : null,
+            leeftijden: r.leeftijden || []
+        }));
+}
+
+function updateStats() {
+    const byTeacher = overviewData.assessments_by_teacher;
+    const vakken    = new Set();
+    let groen=0, oranje=0, roze=0;
+
+    Object.values(byTeacher).forEach(tv => {
+        Object.entries(tv).forEach(([vakId, goals]) => {
+            vakken.add(vakId);
+            Object.values(goals).forEach(s => {
+                if (s==='groen') groen++;
+                else if (s==='oranje') oranje++;
+                else if (s==='roze') roze++;
+            });
+        });
+    });
+
+    document.getElementById('statTeachers').textContent = overviewData.teachers.length;
+    document.getElementById('statVakken').textContent   = vakken.size;
+    document.getElementById('statBeoordeeld').textContent = groen+oranje+roze;
+    document.getElementById('statGroen').textContent    = groen;
+    document.getElementById('statOranje').textContent   = oranje;
+    document.getElementById('statRoze').textContent     = roze;
+}
+
+function populateVakFilter() {
+    const vakIds = new Set(Object.keys(allGoals));
+    const sel = document.getElementById('filterVak');
+    const cur = sel.value;
+    sel.innerHTML = '<option value="all">Alle vakken</option>';
+    [...vakIds].sort((a,b) => vakNaam(a).localeCompare(vakNaam(b),'nl')).forEach(v => {
+        const o = document.createElement('option');
+        o.value = v; o.textContent = vakNaam(v);
+        sel.appendChild(o);
+    });
+    sel.value = cur;
+}
+
+function populateTeacherFilter() {
+    const sel = document.getElementById('filterTeacher');
+    sel.innerHTML = '<option value="all">Alle leerkrachten</option>';
+    teachers.forEach(t => {
+        const o = document.createElement('option');
+        o.value = t.id; o.textContent = t.full_name;
+        sel.appendChild(o);
+    });
+}
+
+function applyFilters() {
+    if (!overviewData) return;
+    const vakFilter     = document.getElementById('filterVak').value;
+    const teacherFilter = document.getElementById('filterTeacher').value;
+    const statusFilter  = document.getElementById('filterStatus').value;
+    const search        = document.getElementById('filterSearch').value.toLowerCase();
+
+    const shownTeachers = teacherFilter === 'all'
+        ? overviewData.teachers
+        : overviewData.teachers.filter(t => t.id == teacherFilter);
+
+    const shownVakken = vakFilter === 'all' ? Object.keys(allGoals) : [vakFilter];
+
+    // Build header
+    let hdr = `<tr><th class="goal-header">Doel</th><th>Leeftijden</th>`;
+    shownTeachers.forEach(t => {
+        hdr += `<th class="teacher-header">${t.full_name}</th>`;
+    });
+    hdr += '<th>Samenvatting</th></tr>';
+    document.getElementById('tableHead').innerHTML = hdr;
+
+    // Build rows
+    const rows = [];
+    shownVakken.forEach(vakId => {
+        (allGoals[vakId] || []).forEach(goal => {
+            if (search && !`${goal.goNr} ${goal.inhoud}`.toLowerCase().includes(search)) return;
+
+            const statussen = shownTeachers.map(t => {
+                return overviewData.assessments_by_teacher[t.id]?.[vakId]?.[goal.id] || '';
+            });
+
+            if (statusFilter === 'consensus' && !statussen.every(s => s === 'groen')) return;
+            if (statusFilter === 'niemand'   && statussen.some(s => s)) return;
+            if (statusFilter === 'verschil') {
+                const filled = statussen.filter(s => s);
+                if (filled.length <= 1 || new Set(filled).size <= 1) return;
+            }
+
+            rows.push({ vakId, goal, statussen });
+        });
+    });
+
+    if (!rows.length) {
+        document.getElementById('tableBody').innerHTML =
+            `<tr><td colspan="${shownTeachers.length+3}" class="empty-state">Geen doelen gevonden</td></tr>`;
+        return;
+    }
+
+    document.getElementById('tableBody').innerHTML = rows.map(({ goal, statussen }) => {
+        const groen  = statussen.filter(s=>s==='groen').length;
+        const oranje = statussen.filter(s=>s==='oranje').length;
+        const roze   = statussen.filter(s=>s==='roze').length;
+        const total  = statussen.length || 1;
+
+        let row = `<tr>
+            <td class="goal-cell">
+                <div class="goal-code">${goal.goNr}</div>
+                <div class="goal-desc" title="${goal.inhoud}">${goal.inhoud}</div>
+            </td>
+            <td>${goal.leeftijden.map(l=>`<span class="leeftijd-badge">${l}</span>`).join(' ')}</td>`;
+
+        statussen.forEach(s => {
+            const sym = s==='groen'?'✓':s==='oranje'?'~':s==='roze'?'!':'○';
+            row += `<td><div class="status-indicator ${s||'none'}">${sym}</div></td>`;
+        });
+
+        row += `<td>
+            <div class="progress-bar">
+                <div class="progress-bar-inner">
+                    <div class="p-groen"  style="width:${groen/total*100}%"></div>
+                    <div class="p-oranje" style="width:${oranje/total*100}%"></div>
+                    <div class="p-roze"   style="width:${roze/total*100}%"></div>
+                </div>
+            </div>
+        </td></tr>`;
+        return row;
+    }).join('');
+}
+
+// ── Leerkrachten beheer ───────────────────────────────────────────────────────
+function openAddTeacher() {
+    document.getElementById('addTeacherModal').classList.add('active');
+}
+function closeModal() {
+    document.getElementById('addTeacherModal').classList.remove('active');
+}
+
+async function addTeacher() {
+    const errorEl = document.getElementById('addTeacherError');
+    errorEl.style.display = 'none';
+
+    const res = await fetch('/api/users', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            first_name: document.getElementById('newFirstName').value,
+            last_name:  document.getElementById('newLastName').value,
+            email:      document.getElementById('newEmail').value,
+            password:   document.getElementById('newPassword').value,
+        })
+    });
+
+    const data = await res.json();
+    if (!res.ok) {
+        errorEl.textContent   = data.error;
+        errorEl.style.display = 'block';
+        return;
+    }
+
+    closeModal();
+    showNotification(`${data.user.full_name} toegevoegd!`, 'success');
+    await loadTeachers();
+    await loadOverview();
+}
+
+async function removeTeacher(userId) {
+    if (!confirm('Leerkracht deactiveren?')) return;
+    await fetch(`/api/users/${userId}`, { method: 'DELETE' });
+    showNotification('Leerkracht verwijderd', 'success');
+    await loadTeachers();
+    await loadOverview();
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function vakNaam(id) {
+    return id.replace(/^doelenset-bao-/, '').replace(/-/g, ' ')
+             .replace(/\b\w/g, c => c.toUpperCase());
+}
+
+function showNotification(msg, type='success') {
+    const el = document.getElementById('notification');
+    el.textContent = msg;
+    el.className   = `notification ${type} show`;
+    setTimeout(() => el.classList.remove('show'), 3000);
+}
+
+// ── Tab navigatie ─────────────────────────────────────────────────────────────
+function switchTab(tab) {
+    ['doelen', 'klassen', 'vergelijk'].forEach(t => {
+        document.getElementById(`panel-${t}`).style.display = t === tab ? 'block' : 'none';
+        document.getElementById(`tab-${t}`).classList.toggle('active', t === tab);
+    });
+    if (tab === 'klassen')  renderKlasOverzicht();
+    if (tab === 'vergelijk') setupVergelijking();
+}
+
+// ── Klasoverzicht ─────────────────────────────────────────────────────────────
+function renderKlasOverzicht() {
+    if (!overviewData) return;
+    const container = document.getElementById('klasOverzichtContent');
+
+    // Groepeer leerkrachten per klas
+    const klasMap = {};   // { klasNaam: [teacher, ...] }
+    const noKlas  = [];
+
+    overviewData.teachers.forEach(t => {
+        const klassen = t.classes || [];
+        if (!klassen.length) {
+            noKlas.push(t);
+        } else {
+            klassen.forEach(c => {
+                (klasMap[c.name] = klasMap[c.name] || []).push(t);
+            });
+        }
+    });
+
+    if (!Object.keys(klasMap).length && !noKlas.length) {
+        container.innerHTML = '<p style="color:var(--gray-400);font-style:italic;">Geen klassen gevonden. Koppel leerkrachten aan klassen via het ICT-beheerscherm.</p>';
+        return;
+    }
+
+    const byTeacher = overviewData.assessments_by_teacher;
+
+    function teacherStats(t) {
+        const vakken = byTeacher[t.id] || {};
+        let groen=0, oranje=0, roze=0, total=0;
+        Object.values(vakken).forEach(goals => {
+            Object.values(goals).forEach(s => {
+                total++;
+                if (s==='groen') groen++;
+                else if (s==='oranje') oranje++;
+                else if (s==='roze') roze++;
+            });
+        });
+        return { groen, oranje, roze, total, beoordeeld: groen+oranje+roze };
+    }
+
+    function klasCard(naam, leraren) {
+        const totaalDoelen = Object.keys(allGoals).reduce((sum, v) => sum + (allGoals[v]?.length || 0), 0);
+        const rows = leraren.map(t => {
+            const s   = teacherStats(t);
+            const pct = totaalDoelen > 0 ? Math.round(s.beoordeeld / totaalDoelen * 100) : 0;
+            return `
+                <div class="klas-progress-row">
+                    <span class="klas-label" title="${t.email}">${t.full_name.split(' ')[0]}</span>
+                    <div class="klas-progress-bar">
+                        <div style="width:${totaalDoelen>0?s.groen/totaalDoelen*100:0}%;background:var(--status-groen)"></div>
+                        <div style="width:${totaalDoelen>0?s.oranje/totaalDoelen*100:0}%;background:var(--status-oranje)"></div>
+                        <div style="width:${totaalDoelen>0?s.roze/totaalDoelen*100:0}%;background:var(--status-roze)"></div>
+                    </div>
+                    <span class="klas-pct">${pct}%</span>
+                </div>`;
+        }).join('');
+
+        const heeftBeoordeeld = leraren.filter(t => teacherStats(t).beoordeeld > 0).length;
+        const badge = heeftBeoordeeld === leraren.length
+            ? `<span style="background:#d1fae5;color:#065f46;font-size:.72rem;padding:.15rem .5rem;border-radius:4px;">✓ Iedereen actief</span>`
+            : heeftBeoordeeld > 0
+                ? `<span style="background:#fef3c7;color:#92400e;font-size:.72rem;padding:.15rem .5rem;border-radius:4px;">${heeftBeoordeeld}/${leraren.length} actief</span>`
+                : `<span style="background:#fee2e2;color:#991b1b;font-size:.72rem;padding:.15rem .5rem;border-radius:4px;">○ Nog niemand</span>`;
+
+        return `
+            <div style="background:var(--gray-50);border-radius:8px;padding:1rem;margin-bottom:.75rem;">
+                <div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;">
+                    <strong style="font-size:1rem;">🏫 ${naam}</strong>
+                    <span style="color:var(--gray-400);font-size:.82rem;">${leraren.length} leerkracht${leraren.length!==1?'en':''}</span>
+                    ${badge}
+                </div>
+                ${rows}
+            </div>`;
+    }
+
+    let html = Object.entries(klasMap).sort((a,b) => a[0].localeCompare(b[0],'nl'))
+        .map(([naam, leraren]) => klasCard(naam, leraren)).join('');
+
+    if (noKlas.length) {
+        html += `<div style="border:1px dashed var(--gray-300);border-radius:8px;padding:1rem;">
+            <strong style="color:var(--gray-500);font-size:.9rem;">Geen klas toegewezen (${noKlas.length})</strong>
+            <div style="margin-top:.5rem;">${noKlas.map(t => `<span style="font-size:.82rem;color:var(--gray-500);margin-right:.5rem;">${t.full_name}</span>`).join('')}</div>
+        </div>`;
+    }
+
+    container.innerHTML = html;
+}
+
+// ── Klasvergelijking ──────────────────────────────────────────────────────────
+function setupVergelijking() {
+    // Vul de klas dropdowns
+    const allKlassen = [...new Set(
+        overviewData?.teachers.flatMap(t => (t.classes||[]).map(c => c.name)) || []
+    )].sort();
+
+    ['vergelijkKlasA', 'vergelijkKlasB', 'vergelijkVak'].forEach(id => {
+        const sel = document.getElementById(id);
+        if (id.startsWith('vergelijkKlas')) {
+            const cur = sel.value;
+            sel.innerHTML = '<option value="">— Kies klas —</option>';
+            allKlassen.forEach(k => {
+                const o = document.createElement('option');
+                o.value = o.textContent = k;
+                sel.appendChild(o);
+            });
+            sel.value = cur;
+        } else {
+            // Vak select
+            const cur = sel.value;
+            sel.innerHTML = '<option value="all">Alle vakken</option>';
+            Object.keys(allGoals).sort((a,b) => vakNaam(a).localeCompare(vakNaam(b),'nl')).forEach(v => {
+                const o = document.createElement('option');
+                o.value = v; o.textContent = vakNaam(v);
+                sel.appendChild(o);
+            });
+            sel.value = cur;
+        }
+    });
+
+    renderVergelijking();
+}
+
+function renderVergelijking() {
+    const klasA  = document.getElementById('vergelijkKlasA').value;
+    const klasB  = document.getElementById('vergelijkKlasB').value;
+    const vakSel = document.getElementById('vergelijkVak').value;
+    const container = document.getElementById('vergelijkContent');
+
+    if (!klasA || !klasB) {
+        container.innerHTML = '<p style="color:var(--gray-400);font-style:italic;">Selecteer twee klassen om te vergelijken.</p>';
+        return;
+    }
+    if (klasA === klasB) {
+        container.innerHTML = '<p style="color:var(--gray-400);font-style:italic;">Kies twee verschillende klassen.</p>';
+        return;
+    }
+
+    const byTeacher = overviewData.assessments_by_teacher;
+
+    function leraarenVanKlas(naam) {
+        return overviewData.teachers.filter(t => (t.classes||[]).some(c => c.name === naam));
+    }
+
+    // Aggregeer statussen per goal per klas (gemiddeld over alle leerkrachten)
+    function klasStatussen(leraren, vakFilter) {
+        const result = {};   // { goalId: { groen: n, oranje: n, roze: n, total: n } }
+        const vakken = vakFilter === 'all' ? Object.keys(allGoals) : [vakFilter];
+        vakken.forEach(vakId => {
+            (allGoals[vakId] || []).forEach(goal => {
+                const key = `${vakId}:${goal.id}`;
+                result[key] = { label: goal.goNr, desc: goal.inhoud, vakId, goalId: goal.id, groen:0, oranje:0, roze:0, total:leraren.length };
+                leraren.forEach(t => {
+                    const s = byTeacher[t.id]?.[vakId]?.[goal.id] || '';
+                    if (s==='groen') result[key].groen++;
+                    else if (s==='oranje') result[key].oranje++;
+                    else if (s==='roze') result[key].roze++;
+                });
+            });
+        });
+        return result;
+    }
+
+    const lerarenA = leraarenVanKlas(klasA);
+    const lerarenB = leraarenVanKlas(klasB);
+
+    if (!lerarenA.length || !lerarenB.length) {
+        container.innerHTML = `<p style="color:var(--gray-400);">Een van de geselecteerde klassen heeft geen leerkrachten.</p>`;
+        return;
+    }
+
+    const statA = klasStatussen(lerarenA, vakSel);
+    const statB = klasStatussen(lerarenB, vakSel);
+    const allKeys = [...new Set([...Object.keys(statA), ...Object.keys(statB)])];
+
+    // Bereken score per goal (% beoordeeld als groen+oranje+roze)
+    function score(stat) {
+        return stat.total > 0 ? (stat.groen + stat.oranje + stat.roze) / stat.total : 0;
+    }
+
+    // Toon enkel goals met verschil of beide beoordeeld
+    const rows = allKeys.map(k => {
+        const a = statA[k] || { groen:0, oranje:0, roze:0, total: lerarenA.length, label: k };
+        const b = statB[k] || { groen:0, oranje:0, roze:0, total: lerarenB.length, label: k };
+        const pctA = Math.round(score(a) * 100);
+        const pctB = Math.round(score(b) * 100);
+        const diff = Math.abs(pctA - pctB);
+        return { key: k, a, b, pctA, pctB, diff };
+    }).filter(r => r.pctA > 0 || r.pctB > 0)
+      .sort((x, y) => y.diff - x.diff);   // grootste verschil eerst
+
+    if (!rows.length) {
+        container.innerHTML = '<p style="color:var(--gray-400);font-style:italic;">Nog geen beoordelingen in de geselecteerde klassen.</p>';
+        return;
+    }
+
+    const diffColor = diff => diff >= 50 ? '#ef4444' : diff >= 25 ? '#f59e0b' : '#10b981';
+
+    container.innerHTML = `
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;">
+            <div style="text-align:center;padding:.75rem;background:var(--gray-50);border-radius:8px;">
+                <div style="font-size:1.5rem;font-weight:700;color:var(--primary);">${lerarenA.length}</div>
+                <div style="font-size:.8rem;color:var(--gray-500);">Leerkrachten klas ${klasA}</div>
+            </div>
+            <div style="text-align:center;padding:.75rem;background:var(--gray-50);border-radius:8px;">
+                <div style="font-size:1.5rem;font-weight:700;color:var(--primary);">${lerarenB.length}</div>
+                <div style="font-size:.8rem;color:var(--gray-500);">Leerkrachten klas ${klasB}</div>
+            </div>
+        </div>
+        <p style="font-size:.82rem;color:var(--gray-400);margin-bottom:.75rem;">
+            ${rows.length} beoordeelde doelen — gesorteerd op grootste verschil. Balk toont % leerkrachten dat een status gaf.
+        </p>
+        <div style="overflow-x:auto;">
+        <table style="width:100%;font-size:.82rem;border-collapse:collapse;">
+            <thead style="background:var(--gray-50);">
+                <tr>
+                    <th style="padding:.5rem;text-align:left;border-bottom:2px solid var(--gray-200);">Doel</th>
+                    <th style="padding:.5rem;text-align:center;border-bottom:2px solid var(--gray-200);min-width:130px;">${klasA}</th>
+                    <th style="padding:.5rem;text-align:center;border-bottom:2px solid var(--gray-200);min-width:50px;">Δ</th>
+                    <th style="padding:.5rem;text-align:center;border-bottom:2px solid var(--gray-200);min-width:130px;">${klasB}</th>
+                </tr>
+            </thead>
+            <tbody>
+                ${rows.map(r => `
+                    <tr style="border-bottom:1px solid var(--gray-100);">
+                        <td style="padding:.4rem .5rem;">
+                            <strong>${r.a.label || r.key.split(':')[1]}</strong>
+                            <div style="color:var(--gray-400);font-size:.75rem;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+                                 title="${r.a.desc || ''}">${r.a.desc || ''}</div>
+                        </td>
+                        <td style="padding:.4rem .5rem;">
+                            <div class="vergelijk-bar-wrap">
+                                <div style="height:100%;display:flex;">
+                                    <div style="width:${r.a.total>0?r.a.groen/r.a.total*100:0}%;background:var(--status-groen)"></div>
+                                    <div style="width:${r.a.total>0?r.a.oranje/r.a.total*100:0}%;background:var(--status-oranje)"></div>
+                                    <div style="width:${r.a.total>0?r.a.roze/r.a.total*100:0}%;background:var(--status-roze)"></div>
+                                </div>
+                            </div>
+                            <div style="text-align:center;font-size:.75rem;color:var(--gray-500);">${r.pctA}%</div>
+                        </td>
+                        <td style="text-align:center;padding:.4rem;font-weight:700;font-size:.85rem;color:${diffColor(r.diff)};">
+                            ${r.diff > 0 ? r.diff + '%' : '='}
+                        </td>
+                        <td style="padding:.4rem .5rem;">
+                            <div class="vergelijk-bar-wrap">
+                                <div style="height:100%;display:flex;">
+                                    <div style="width:${r.b.total>0?r.b.groen/r.b.total*100:0}%;background:var(--status-groen)"></div>
+                                    <div style="width:${r.b.total>0?r.b.oranje/r.b.total*100:0}%;background:var(--status-oranje)"></div>
+                                    <div style="width:${r.b.total>0?r.b.roze/r.b.total*100:0}%;background:var(--status-roze)"></div>
+                                </div>
+                            </div>
+                            <div style="text-align:center;font-size:.75rem;color:var(--gray-500);">${r.pctB}%</div>
+                        </td>
+                    </tr>`).join('')}
+            </tbody>
+        </table>
+        </div>`;
+}
+
+</script>
+</body>
+</html>
diff --git a/backend/templates/doelen_beheer.html b/backend/templates/doelen_beheer.html
new file mode 100644
index 0000000..ee5d2b0
--- /dev/null
+++ b/backend/templates/doelen_beheer.html
@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Leerdoelen bestanden – {{ org_name }}</title>
+    <style>
+        :root {
+            --primary:#4f46e5;--primary-dark:#4338ca;--success:#10b981;
+            --danger:#ef4444;--warning:#f59e0b;
+            --gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;
+            --gray-300:#d1d5db;--gray-500:#6b7280;--gray-600:#4b5563;
+            --gray-700:#374151;--gray-800:#1f2937;
+        }
+        *{margin:0;padding:0;box-sizing:border-box;}
+        body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--gray-100);color:var(--gray-800);}
+        .container{max-width:900px;margin:0 auto;padding:1rem;}
+        .header{background:linear-gradient(135deg,#065f46,#047857);color:white;border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
+        .header h1{font-size:1.3rem;display:flex;align-items:center;gap:.6rem;}
+        .header-sub{opacity:.85;font-size:.85rem;margin-top:.2rem;}
+        .nav-link{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;background:rgba(255,255,255,.15);color:white;border:1px solid rgba(255,255,255,.25);border-radius:6px;text-decoration:none;font-size:.85rem;font-weight:500;transition:background .2s;}
+        .nav-link:hover{background:rgba(255,255,255,.25);}
+        .section{background:white;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,.1);}
+        .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem;}
+        .section-header h2{font-size:1.05rem;color:var(--gray-700);}
+        .section-hint{color:var(--gray-500);font-size:.83rem;margin-bottom:1.25rem;line-height:1.6;}
+        .btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem 1rem;border:none;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;text-decoration:none;}
+        .btn-danger{background:var(--danger);color:white;} .btn-danger:hover{background:#dc2626;}
+        .btn-sm{padding:.25rem .55rem;font-size:.78rem;}
+        table{width:100%;border-collapse:collapse;font-size:.875rem;}
+        th{padding:.65rem .75rem;text-align:left;font-weight:600;color:var(--gray-600);border-bottom:2px solid var(--gray-200);background:var(--gray-50);white-space:nowrap;}
+        td{padding:.6rem .75rem;border-bottom:1px solid var(--gray-100);vertical-align:middle;}
+        tr:hover td{background:var(--gray-50);}
+        .empty-row td{text-align:center;color:var(--gray-500);padding:2.5rem;font-style:italic;}
+        .drop-zone{border:2px dashed var(--gray-300);border-radius:10px;padding:2.5rem;text-align:center;cursor:pointer;transition:all .2s;background:var(--gray-50);}
+        .drop-zone:hover,.drop-zone.over{border-color:var(--primary);background:rgba(79,70,229,.04);}
+        .drop-icon{font-size:2.5rem;margin-bottom:.75rem;}
+        .drop-zone strong{font-size:1rem;}
+        .drop-zone p{color:var(--gray-500);font-size:.83rem;margin-top:.4rem;}
+        .versie-badge{background:#d1fae5;color:#065f46;padding:.2rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600;}
+        .upload-ok{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;padding:.85rem 1rem;margin-bottom:.5rem;}
+        .upload-ok strong{color:#15803d;}
+        .upload-err{background:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:.85rem 1rem;}
+        .upload-err strong{color:#dc2626;}
+        .upload-ok ul,.upload-err ul{margin:.4rem 0 0 1.25rem;font-size:.82rem;}
+        .upload-ok li{color:#166534;}
+        .upload-err li{color:#991b1b;}
+        .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.75rem;margin-bottom:1.5rem;}
+        .stat{background:white;border-radius:10px;padding:.9rem;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.08);}
+        .stat-value{font-size:1.7rem;font-weight:700;color:#047857;}
+        .stat-label{font-size:.72rem;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em;margin-top:.2rem;}
+        .notification{position:fixed;bottom:1rem;right:1rem;padding:.85rem 1.25rem;border-radius:8px;color:white;font-weight:500;transform:translateY(100px);opacity:0;transition:all .3s;z-index:2000;}
+        .notification.show{transform:translateY(0);opacity:1;}
+        .notification.success{background:var(--success);}
+        .notification.error{background:var(--danger);}
+        .notification.warning{background:var(--warning);}
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --gray-50:#1a1a2e;--gray-100:#16213e;--gray-200:#0f3460;
+                --gray-300:#1a1a3e;--gray-500:#9ca3af;--gray-600:#d1d5db;
+                --gray-700:#e5e7eb;--gray-800:#f3f4f6;
+            }
+            body{background:#0f172a;color:#e2e8f0;}
+            .section,.stat{background:#1e293b !important;border-color:#334155;}
+            th{background:#1e293b !important;color:#94a3b8 !important;border-color:#334155 !important;}
+            td{border-color:#1e293b !important;color:#e2e8f0;}
+            tr:hover td{background:#263548 !important;}
+            .drop-zone{background:#162032 !important;border-color:#334155 !important;}
+            .drop-zone:hover,.drop-zone.over{background:#1a2744 !important;border-color:#6366f1 !important;}
+            .upload-ok{background:#064e3b !important;border-color:#065f46 !important;}
+            .upload-err{background:#450a0a !important;border-color:#7f1d1d !important;}
+            .versie-badge{background:#064e3b !important;color:#6ee7b7 !important;}
+            ::-webkit-scrollbar{width:8px;} ::-webkit-scrollbar-track{background:#0f172a;} ::-webkit-scrollbar-thumb{background:#334155;border-radius:4px;}
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+
+    <div class="header">
+        <div>
+            <h1>📂 Leerdoelen bestanden</h1>
+            <div class="header-sub">{{ org_name }}</div>
+        </div>
+        <a href="/dashboard" class="nav-link">← Terug naar beheer</a>
+    </div>
+
+    <!-- Stats -->
+    <div class="stat-row" id="statRow">
+        <div class="stat"><div class="stat-value" id="statVakken">-</div><div class="stat-label">Vakken</div></div>
+        <div class="stat"><div class="stat-value" id="statDoelen">-</div><div class="stat-label">Doelzinnen</div></div>
+        <div class="stat"><div class="stat-value" id="statVersie">-</div><div class="stat-label">Versie</div></div>
+    </div>
+
+    <!-- Upload -->
+    <div class="section">
+        <div class="section-header">
+            <h2>⬆️ Nieuwe bestanden uploaden</h2>
+        </div>
+        <p class="section-hint">
+            Sleep de JSON bestanden van GO! hierheen of klik om te bladeren.
+            Meerdere bestanden tegelijk zijn mogelijk. Bij een update gewoon opnieuw uploaden —
+            bestaande bestanden worden automatisch overschreven en de index wordt bijgewerkt.
+        </p>
+        <div class="drop-zone" id="dropZone"
+             onclick="document.getElementById('fileInput').click()"
+             ondragover="event.preventDefault();this.classList.add('over')"
+             ondragleave="this.classList.remove('over')"
+             ondrop="this.classList.remove('over');handleDrop(event)">
+            <div class="drop-icon">📄</div>
+            <strong>Klik of sleep JSON bestanden hier</strong>
+            <p>Meerdere bestanden tegelijk · Enkel .json · Max. 10 MB per bestand</p>
+        </div>
+        <input type="file" id="fileInput" accept=".json" multiple style="display:none"
+               onchange="uploadDoelen(this.files)">
+        <div id="uploadResults" style="margin-top:.85rem;display:none;"></div>
+    </div>
+
+    <!-- Geïnstalleerde vakken -->
+    <div class="section">
+        <div class="section-header">
+            <h2>📚 Geïnstalleerde vakken</h2>
+            <span id="doelenVersie"></span>
+        </div>
+        <table>
+            <thead>
+                <tr>
+                    <th>Vak</th>
+                    <th>Bestand ID</th>
+                    <th>Doelzinnen</th>
+                    <th>Versie</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody id="doelenBody">
+                <tr class="empty-row"><td colspan="5">Laden...</td></tr>
+            </tbody>
+        </table>
+    </div>
+
+</div>
+<div class="notification" id="notification"></div>
+<script>
+document.addEventListener('DOMContentLoaded', loadDoelen);
+
+async function loadDoelen() {
+    const res  = await fetch('/admin/doelen');
+    if (!res.ok) return;
+    const data = await res.json();
+
+    // Versie badge
+    if (data.versie) {
+        document.getElementById('doelenVersie').innerHTML =
+            `<span class="versie-badge">index versie ${data.versie}</span>`;
+        document.getElementById('statVersie').textContent = data.versie;
+    }
+
+    // Stats
+    const vakken = data.vakken || [];
+    document.getElementById('statVakken').textContent = vakken.length;
+    document.getElementById('statDoelen').textContent =
+        vakken.reduce((s, v) => s + (v.aantalDoelzinnen || 0), 0).toLocaleString('nl-BE');
+
+    // Tabel
+    const tbody = document.getElementById('doelenBody');
+    if (!vakken.length) {
+        tbody.innerHTML = '<tr class="empty-row"><td colspan="5">Nog geen doelen geüpload</td></tr>';
+        return;
+    }
+    tbody.innerHTML = vakken.map(v => `
+        <tr>
+            <td><strong>${v.naam}</strong></td>
+            <td style="font-family:monospace;font-size:.78rem;color:var(--gray-500);">${v.id}</td>
+            <td>${(v.aantalDoelzinnen||0).toLocaleString('nl-BE')}</td>
+            <td><span class="versie-badge">${v.versie || '?'}</span></td>
+            <td>
+                <button class="btn btn-danger btn-sm"
+                    onclick="deleteDoelen('${v.id}','${v.naam.replace(/'/g,"\\'")}')">
+                    Verwijderen
+                </button>
+            </td>
+        </tr>`).join('');
+}
+
+function handleDrop(e) { e.preventDefault(); uploadDoelen(e.dataTransfer.files); }
+
+async function uploadDoelen(files) {
+    if (!files?.length) return;
+    const el = document.getElementById('uploadResults');
+    el.style.display = 'block';
+    el.innerHTML = `<p style="color:var(--gray-500);font-size:.85rem;">⏳ Uploaden van ${files.length} bestand(en)...</p>`;
+    const fd = new FormData();
+    for (const f of files) fd.append('files', f);
+    const res  = await fetch('/admin/doelen/upload', { method: 'POST', body: fd });
+    const data = await res.json();
+    const ok   = data.results.filter(r => r.ok);
+    const err  = data.results.filter(r => !r.ok);
+    let html   = '';
+    if (ok.length)  html += `<div class="upload-ok"><strong>✓ ${ok.length} bestand(en) geüpload</strong><ul>${ok.map(r=>`<li>${r.vak_naam} — ${r.aantalDoelzinnen} doelzinnen (v${r.versie})</li>`).join('')}</ul></div>`;
+    if (err.length) html += `<div class="upload-err"><strong>✗ ${err.length} mislukt</strong><ul>${err.map(r=>`<li>${r.filename}: ${r.error}</li>`).join('')}</ul></div>`;
+    el.innerHTML = html;
+    await loadDoelen();
+    setTimeout(() => { el.style.display='none'; }, 12000);
+}
+
+async function deleteDoelen(vakId, vakNaam) {
+    if (!confirm(`Doelen voor "${vakNaam}" verwijderen?`)) return;
+    const res = await fetch(`/admin/doelen/${vakId}`, { method: 'DELETE' });
+    if (!res.ok) { notify('Verwijderen mislukt', 'error'); return; }
+    notify(`${vakNaam} verwijderd`, 'success');
+    await loadDoelen();
+}
+
+function notify(msg, type='success') {
+    const el = document.getElementById('notification');
+    el.textContent = msg;
+    el.className   = `notification ${type} show`;
+    setTimeout(() => el.classList.remove('show'), 3500);
+}
+</script>
+</body>
+</html>
diff --git a/backend/templates/leerkracht.html b/backend/templates/leerkracht.html
new file mode 100644
index 0000000..f01c050
--- /dev/null
+++ b/backend/templates/leerkracht.html
@@ -0,0 +1,669 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Leerdoelen Tracker</title>
+    <style>
+        /* Zelfde CSS als origineel - ingekort voor leesbaarheid */
+        :root {
+            --primary: #4f46e5; --primary-dark: #4338ca;
+            --success: #10b981; --warning: #f59e0b; --danger: #ef4444;
+            --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
+            --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280;
+            --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937;
+            --kleur-engageren: #c084fc; --kleur-begrijpen: #fbbf24; --kleur-gebruiken: #34d399;
+            --status-groen: #10b981; --status-groen-bg: #d1fae5;
+            --status-oranje: #f59e0b; --status-oranje-bg: #fef3c7;
+            --status-roze: #ec4899; --status-roze-bg: #fce7f3;
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--gray-100); color: var(--gray-800); }
+        .container { max-width: 1400px; margin: 0 auto; padding: 1rem; }
+        .header { background: white; border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
+        .header h1 { font-size: 1.4rem; color: var(--gray-900); display: flex; align-items: center; gap: 0.5rem; }
+        .user-info { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; color: var(--gray-600); }
+        .user-info strong { color: var(--gray-800); }
+        .btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.85rem; border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s; text-decoration: none; }
+        .btn-secondary { background: var(--gray-100); color: var(--gray-700); }
+        .btn-secondary:hover { background: var(--gray-200); }
+        .btn-danger { background: var(--danger); color: white; }
+        .vak-selector { background: white; border-radius: 12px; padding: 1rem 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
+        .vak-selector label { font-weight: 600; color: var(--gray-700); font-size: 0.9rem; }
+        .vak-selector select { padding: 0.5rem 0.75rem; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 0.95rem; min-width: 250px; cursor: pointer; }
+        .vak-selector select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
+        .stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
+        .stat-card { background: white; border-radius: 8px; padding: 0.75rem 1rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+        .stat-card.highlight { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; }
+        .stat-value { font-size: 1.5rem; font-weight: 700; }
+        .stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
+        .filters-container { background: white; border-radius: 12px; padding: 1rem 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+        .filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
+        .filter-group { display: flex; flex-direction: column; gap: 0.25rem; }
+        .filter-group label { font-size: 0.75rem; font-weight: 500; color: var(--gray-500); }
+        .filter-group input, .filter-group select { padding: 0.5rem; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 0.9rem; }
+        .filter-group input:focus, .filter-group select:focus { outline: none; border-color: var(--primary); }
+        .leeftijd-checkboxes { display: flex; flex-wrap: wrap; gap: 0.35rem; }
+        .leeftijd-checkbox { display: flex; align-items: center; gap: 0.25rem; padding: 0.3rem 0.5rem; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; user-select: none; }
+        .leeftijd-checkbox:has(input:checked) { background: var(--primary); border-color: var(--primary); color: white; }
+        .leeftijd-checkbox input { display: none; }
+        .table-container { background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; }
+        .table-scroll { overflow-x: auto; }
+        table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
+        thead { background: var(--gray-50); }
+        th { padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: var(--gray-600); border-bottom: 2px solid var(--gray-200); white-space: nowrap; }
+        td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
+        tr:hover { background: var(--gray-50); }
+        tr.status-groen { background: var(--status-groen-bg); }
+        tr.status-oranje { background: var(--status-oranje-bg); }
+        tr.status-roze { background: var(--status-roze-bg); }
+        .status-selector { width: 32px; height: 32px; border-radius: 6px; border: 2px solid var(--gray-300); background: white; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: bold; transition: all 0.15s; }
+        .status-selector:hover { transform: scale(1.1); }
+        .status-selector.status-none { color: var(--gray-400); }
+        .status-selector.status-none::after { content: '○'; }
+        .status-selector.status-groen { background: var(--status-groen); border-color: var(--status-groen); color: white; }
+        .status-selector.status-groen::after { content: '✓'; }
+        .status-selector.status-oranje { background: var(--status-oranje); border-color: var(--status-oranje); color: white; }
+        .status-selector.status-oranje::after { content: '~'; }
+        .status-selector.status-roze { background: var(--status-roze); border-color: var(--status-roze); color: white; }
+        .status-selector.status-roze::after { content: '!'; }
+        .ebg-badge { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
+        .ebg-engageren { background: var(--kleur-engageren); color: white; }
+        .ebg-begrijpen { background: var(--kleur-begrijpen); color: var(--gray-800); }
+        .ebg-gebruiken { background: var(--kleur-gebruiken); color: white; }
+        .leeftijden { display: flex; flex-wrap: wrap; gap: 0.25rem; }
+        .leeftijd-badge { font-size: 0.7rem; padding: 0.15rem 0.35rem; background: var(--gray-200); border-radius: 3px; color: var(--gray-600); }
+        .beschrijving-cell { max-width: 400px; }
+        .mia-container { background: var(--gray-50); border-radius: 6px; padding: 0.5rem; font-size: 0.8rem; margin-top: 0.5rem; }
+        .mia-items { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
+        .mia-item { background: white; padding: 0.2rem 0.4rem; border-radius: 3px; border: 1px solid var(--gray-200); }
+        .empty-state { text-align: center; padding: 3rem; color: var(--gray-500); }
+        .loading { text-align: center; padding: 3rem; color: var(--gray-500); }
+        .spinner { width: 40px; height: 40px; border: 3px solid var(--gray-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        .notification { position: fixed; bottom: 1rem; right: 1rem; padding: 1rem 1.5rem; border-radius: 8px; color: white; font-weight: 500; transform: translateY(100px); opacity: 0; transition: all 0.3s; z-index: 1001; }
+        .notification.show { transform: translateY(0); opacity: 1; }
+        .notification.success { background: var(--success); }
+        .notification.error { background: var(--danger); }
+        .saving-indicator { font-size: 0.8rem; color: var(--gray-400); margin-left: auto; }
+    
+@media (prefers-color-scheme: dark) {
+    :root {
+        --gray-50:  #1a1a2e;
+        --gray-100: #16213e;
+        --gray-200: #0f3460;
+        --gray-300: #1a1a3e;
+        --gray-400: #6b7280;
+        --gray-500: #9ca3af;
+        --gray-600: #d1d5db;
+        --gray-700: #e5e7eb;
+        --gray-800: #f3f4f6;
+        --gray-900: #f9fafb;
+    }
+
+    body { background: #0f172a; color: #e2e8f0; }
+
+    /* Kaarten en secties */
+    .card, .section, .stat-card, .school-card,
+    .table-container, .filters-container, .legend-container,
+    .stats-bar .stat-card, .stats-overview, .vak-stats,
+    .import-section, .detail-section, .filters-bar,
+    .header:not([class*="gradient"]) {
+        background: #1e293b !important;
+        border-color: #334155 !important;
+    }
+
+    /* Header kaart in leerkracht.html */
+    .header { background: #1e293b !important; }
+
+    /* Tabellen */
+    thead, th { background: #1e293b !important; color: #94a3b8 !important; border-color: #334155 !important; }
+    td { border-color: #1e293b !important; color: #e2e8f0; }
+    tr:hover td, tr:hover { background: #263548 !important; }
+    tr.status-groen   { background: #064e3b !important; }
+    tr.status-groen:hover  { background: #065f46 !important; }
+    tr.status-oranje  { background: #451a03 !important; }
+    tr.status-oranje:hover { background: #78350f !important; }
+    tr.status-roze    { background: #500724 !important; }
+    tr.status-roze:hover   { background: #701a35 !important; }
+
+    /* Inputs en selects */
+    input, select, textarea {
+        background: #0f172a !important;
+        color: #e2e8f0 !important;
+        border-color: #334155 !important;
+    }
+    input::placeholder { color: #64748b !important; }
+    input:focus, select:focus, textarea:focus {
+        border-color: #6366f1 !important;
+        box-shadow: 0 0 0 3px rgba(99,102,241,0.2) !important;
+    }
+
+    /* Role select inline */
+    .role-select {
+        background: #1e293b !important;
+        color: #e2e8f0 !important;
+        border-color: #334155 !important;
+    }
+
+    /* Modals */
+    .modal { background: #1e293b !important; color: #e2e8f0; }
+    .modal h2 { color: #f1f5f9; }
+
+    /* Knoppen */
+    .btn-secondary { background: #334155 !important; color: #e2e8f0 !important; }
+    .btn-secondary:hover { background: #475569 !important; }
+
+    /* Status selector knoppen (leerkracht tabel) */
+    .status-selector.status-none { background: #1e293b !important; border-color: #475569 !important; color: #64748b !important; }
+
+    /* Stat cards */
+    .stat-card { background: #1e293b !important; }
+
+    /* School card header */
+    .school-card-header { background: #162032 !important; border-color: #334155 !important; }
+    .school-card { border-color: #334155 !important; }
+
+    /* Drop zone */
+    .drop-zone { background: #162032 !important; border-color: #334155 !important; }
+    .drop-zone:hover, .drop-zone.over { background: #1a2744 !important; border-color: #6366f1 !important; }
+
+    /* Domain chips */
+    .domain-chip { background: #1e3a5f !important; border-color: #2563eb !important; color: #93c5fd !important; }
+
+    /* Badges */
+    .leeftijd-badge { background: #334155 !important; color: #94a3b8 !important; }
+    .ebg-begrijpen { color: #1f2937 !important; }
+
+    /* MIA container */
+    .mia-container { background: #162032 !important; }
+    .mia-item { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
+    .mia-item.niet-aanklikbaar { background: #162032 !important; color: #64748b !important; }
+
+    /* Not configured box */
+    .not-configured { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
+    .not-configured code { background: #0f172a !important; color: #a5b4fc !important; }
+
+    /* Profile section */
+    .profile-section { background: #162032 !important; }
+
+    /* Leeftijd checkboxes */
+    .leeftijd-checkbox { border-color: #334155 !important; color: #e2e8f0; }
+    .leeftijd-checkbox:has(input:checked) { background: var(--primary) !important; }
+
+    /* Vak indicator */
+    .vak-indicator { /* gradient blijft, ziet er goed uit */ }
+
+    /* Progress bars achtergrond */
+    .progress-bar { background: #334155 !important; }
+
+    /* Vak card */
+    .vak-card { background: #162032 !important; }
+
+    /* Upload results */
+    .upload-ok  { background: #064e3b !important; border-color: #065f46 !important; }
+    .upload-err { background: #450a0a !important; border-color: #7f1d1d !important; }
+
+    /* Alert boxes */
+    .alert-error   { background: #450a0a !important; border-color: #7f1d1d !important; color: #fca5a5 !important; }
+    .alert-success { background: #064e3b !important; border-color: #065f46 !important; color: #6ee7b7 !important; }
+    .alert-warning { background: #451a03 !important; border-color: #78350f !important; color: #fcd34d !important; }
+    .alert-info    { background: #1e3a5f !important; border-color: #1d4ed8 !important; color: #93c5fd !important; }
+
+    /* Error text */
+    .form-error, #sa-error, #addUser-error { color: #f87171 !important; }
+    .form-hint { color: #64748b !important; }
+
+    /* Superadmin toggle */
+    .superadmin-toggle { border-color: #334155 !important; }
+    .superadmin-toggle button { color: #475569 !important; }
+    .superadmin-toggle button:hover { color: #94a3b8 !important; }
+
+    /* Superadmin form inputs */
+    .superadmin-form label { color: #94a3b8 !important; }
+
+    /* Footer */
+    .footer { color: #64748b !important; }
+    .status-legend { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
+
+    /* Scrollbar (webkit) */
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
+    ::-webkit-scrollbar-track { background: #0f172a; }
+    ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
+    ::-webkit-scrollbar-thumb:hover { background: #475569; }
+}
+</style>
+</head>
+<body>
+<div class="container">
+    <div class="header">
+        <h1>📚 Leerdoelen Tracker</h1>
+        <div class="user-info">
+            <span id="userInfo">Laden...</span>
+            <span class="saving-indicator" id="savingIndicator"></span>
+        </div>
+        <div style="display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;">
+            <div id="klasSelector" style="display:none;align-items:center;gap:.4rem;">
+                <label style="font-size:.75rem;color:var(--gray-400);white-space:nowrap;">Mijn klassen:</label>
+                <div id="klasChips" style="display:flex;gap:.3rem;flex-wrap:wrap;"></div>
+                <button onclick="openKlasModal()"
+                    style="background:none;border:1px dashed var(--gray-500);border-radius:4px;color:var(--gray-400);font-size:.75rem;padding:.2rem .5rem;cursor:pointer;">
+                    ✎ Wijzigen
+                </button>
+            </div>
+            <a href="/auth/logout" class="btn btn-secondary">Uitloggen</a>
+        </div>
+    </div>
+
+    <div class="vak-selector">
+        <label>Vak:</label>
+        <select id="vakSelector" onchange="switchVak()">
+            <option value="">-- Kies een vak --</option>
+        </select>
+        <span id="vakProgress" style="color: var(--gray-500); font-size: 0.85rem;"></span>
+    </div>
+
+    <div class="stats-bar">
+        <div class="stat-card"><div class="stat-value" id="statTotal">-</div><div class="stat-label">Totaal</div></div>
+        <div class="stat-card" style="border-left: 3px solid var(--status-groen);"><div class="stat-value" id="statGroen">-</div><div class="stat-label">Groen</div></div>
+        <div class="stat-card" style="border-left: 3px solid var(--status-oranje);"><div class="stat-value" id="statOranje">-</div><div class="stat-label">Oranje</div></div>
+        <div class="stat-card" style="border-left: 3px solid var(--status-roze);"><div class="stat-value" id="statRoze">-</div><div class="stat-label">Roze</div></div>
+        <div class="stat-card highlight"><div class="stat-value" id="statBeoordeeld">-</div><div class="stat-label">Beoordeeld</div></div>
+    </div>
+
+    <div class="filters-container">
+        <div class="filters-grid">
+            <div class="filter-group">
+                <label>Zoeken</label>
+                <input type="text" id="searchInput" placeholder="Zoek in beschrijving of code..." oninput="applyFilters()">
+            </div>
+            <div class="filter-group">
+                <label>Status</label>
+                <select id="statusFilter" onchange="applyFilters()">
+                    <option value="all">Alle statussen</option>
+                    <option value="groen">✓ Groen</option>
+                    <option value="oranje">~ Oranje</option>
+                    <option value="roze">! Roze</option>
+                    <option value="none">○ Geen status</option>
+                </select>
+            </div>
+            <div class="filter-group">
+                <label>E/B/G</label>
+                <select id="ebgFilter" onchange="applyFilters()">
+                    <option value="all">Alle types</option>
+                    <option value="engageren">Engageren</option>
+                    <option value="begrijpen">Begrijpen</option>
+                    <option value="gebruiken">Gebruiken</option>
+                </select>
+            </div>
+            <div class="filter-group">
+                <label>Sectie</label>
+                <select id="sectieFilter" onchange="applyFilters()">
+                    <option value="all">Alle secties</option>
+                </select>
+            </div>
+            <div class="filter-group" style="grid-column: span 2;">
+                <label>Leeftijd</label>
+                <div class="leeftijd-checkboxes">
+                    {% for age in ['3-4','4-5','5-6','6-7','7-8','8-9','9-10','10-11','11-12'] %}
+                    <label class="leeftijd-checkbox"><input type="checkbox" value="{{ age }}" onchange="applyFilters()"><span>{{ age }}</span></label>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="table-container">
+        <div class="table-scroll">
+            <table>
+                <thead>
+                    <tr>
+                        <th style="width:50px;">Status</th>
+                        <th>Code</th>
+                        <th>E/B/G</th>
+                        <th>Leeftijden</th>
+                        <th>Sectie</th>
+                        <th>Beschrijving</th>
+                    </tr>
+                </thead>
+                <tbody id="tableBody">
+                    <tr><td colspan="6" class="empty-state">Selecteer een vak om te beginnen</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<!-- Klassen modal -->
+<div id="klasModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center;">
+    <div style="background:var(--gray-800, white);border-radius:12px;padding:1.5rem;max-width:400px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.3);">
+        <h2 style="font-size:1.1rem;margin-bottom:.5rem;">📚 Mijn klassen instellen</h2>
+        <p style="font-size:.85rem;color:var(--gray-400);margin-bottom:1rem;">
+            Selecteer de klassen waarvoor jij beoordelingen invult.
+        </p>
+        <div id="klasCheckboxes" style="display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;max-height:250px;overflow-y:auto;"></div>
+        <div style="display:flex;gap:.5rem;justify-content:flex-end;">
+            <button onclick="closeKlasModal()" class="btn btn-secondary">Annuleren</button>
+            <button onclick="saveKlassen()" class="btn btn-primary">Opslaan</button>
+        </div>
+    </div>
+</div>
+
+<div class="notification" id="notification"></div>
+
+<script>
+// ── State ────────────────────────────────────────────────────────────────────
+let currentUser   = null;
+let currentVakId  = null;
+let vakData       = {};      // cache van geladen vak JSON
+let assessments   = {};      // { goal_id: status } voor huidig vak
+let doelzinnen    = [];
+let filteredData  = [];
+let saveTimeout   = null;
+
+// ── Init ─────────────────────────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', async () => {
+    await loadUser();
+    await loadVakken();
+});
+
+async function loadUser() {
+    const res  = await fetch('/api/me');
+    const data = await res.json();
+    currentUser = data.user;
+    document.getElementById('userInfo').textContent =
+        `${currentUser.full_name} — ${currentUser.school?.name || ''}`;
+    await loadKlassen();
+}
+
+// ── Klassen ───────────────────────────────────────────────────────────────────
+let allKlassen = [];
+let myKlassen  = [];
+
+async function loadKlassen() {
+    const res  = await fetch('/api/my/classes');
+    if (!res.ok) return;
+    const data = await res.json();
+    allKlassen = data.all_classes || [];
+    myKlassen  = data.my_classes  || [];
+    renderKlasChips();
+    if (allKlassen.length > 0) {
+        document.getElementById('klasSelector').style.display = 'flex';
+    }
+}
+
+function renderKlasChips() {
+    const container = document.getElementById('klasChips');
+    if (!myKlassen.length) {
+        container.innerHTML = '<span style="font-size:.75rem;color:var(--gray-500);font-style:italic;">Geen klas</span>';
+    } else {
+        container.innerHTML = myKlassen.map(c =>
+            `<span style="background:var(--primary);color:white;padding:.15rem .5rem;border-radius:4px;font-size:.75rem;">${c.name}</span>`
+        ).join('');
+    }
+}
+
+function openKlasModal() {
+    const container = document.getElementById('klasCheckboxes');
+    container.innerHTML = allKlassen.map(c => `
+        <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.4rem;border-radius:4px;">
+            <input type="checkbox" value="${c.id}"
+                ${myKlassen.some(m => m.id === c.id) ? 'checked' : ''}>
+            <span>${c.name}</span>
+        </label>`).join('');
+    document.getElementById('klasModal').style.display = 'flex';
+}
+
+function closeKlasModal() {
+    document.getElementById('klasModal').style.display = 'none';
+}
+
+async function saveKlassen() {
+    const checked  = [...document.querySelectorAll('#klasCheckboxes input:checked')].map(i => parseInt(i.value));
+    const res      = await fetch('/api/my/classes', {
+        method: 'PUT', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ class_ids: checked })
+    });
+    if (!res.ok) { showNotification('Opslaan mislukt', 'error'); return; }
+    const data = await res.json();
+    myKlassen  = data.my_classes;
+    renderKlasChips();
+    closeKlasModal();
+    showNotification('Klassen opgeslagen', 'success');
+}
+
+async function loadVakken() {
+    const res  = await fetch('/api/doelen/index');
+    if (!res.ok) { showNotification('Kon vakken niet laden', 'error'); return; }
+    const data = await res.json();
+
+    const sel    = document.getElementById('vakSelector');
+    // Sorteer op naam — API levert ze al gesorteerd, maar voor de zekerheid
+    const sorted = [...data.vakken].sort((a,b) => (a.naam||a.id).localeCompare(b.naam||b.id, 'nl'));
+
+    sorted.forEach(v => {
+        const opt       = document.createElement('option');
+        opt.value       = v.id;
+        // Gebruik naam uit API, fallback op lokale functie
+        opt.textContent = `${v.naam || vakNaam(v.id)} (${v.aantalDoelzinnen} doelen)`;
+        sel.appendChild(opt);
+    });
+}
+
+// ── Vak wisselen ─────────────────────────────────────────────────────────────
+async function switchVak() {
+    const vakId = document.getElementById('vakSelector').value;
+    if (!vakId) {
+        currentVakId = null; doelzinnen = []; renderEmptyState(); updateStats(); return;
+    }
+    currentVakId = vakId;
+    showLoading();
+
+    // Laad vak data (cache)
+    if (!vakData[vakId]) {
+        const res = await fetch(`/api/doelen/${vakId}`);
+        if (!res.ok) { showNotification(`Kon ${vakId} niet laden`, 'error'); return; }
+        vakData[vakId] = await res.json();
+    }
+
+    // Laad beoordelingen voor dit vak
+    const res2 = await fetch(`/api/assessments?vak_id=${vakId}`);
+    const data2 = await res2.json();
+    assessments = {};
+    data2.assessments.forEach(a => { assessments[a.goal_id] = a.status; });
+
+    processVakData(vakId);
+    populateSectieFilter();
+    resetFilters();
+}
+
+function processVakData(vakId) {
+    const data = vakData[vakId];
+    doelzinnen = [];
+    const sectieLookup = {};
+    data.rijen.forEach(r => {
+        if (['onderwerp','rubriek','subrubriek','subthema'].includes(r.type))
+            sectieLookup[r.id] = r.inhoud;
+    });
+    const miaPerDoel = {};
+    data.rijen.forEach(r => {
+        if (r.parentDoelzinId && r.type?.startsWith('MIA')) {
+            (miaPerDoel[r.parentDoelzinId] = miaPerDoel[r.parentDoelzinId] || []).push(r);
+        }
+    });
+    data.rijen.forEach(r => {
+        if (r.type === 'doelzin' && r.goNr) {
+            doelzinnen.push({
+                id: r.goNr, inhoud: r.inhoud, goNr: r.goNr,
+                kennisverwerking: r.kennisverwerking,
+                leeftijden: r.leeftijden || [],
+                sectie: r.parentId ? sectieLookup[r.parentId] : null,
+                mia: miaPerDoel[r.id] || []
+            });
+        }
+    });
+}
+
+// ── Filters ───────────────────────────────────────────────────────────────────
+function applyFilters() {
+    if (!currentVakId) return;
+    const search   = document.getElementById('searchInput').value.toLowerCase();
+    const status   = document.getElementById('statusFilter').value;
+    const ebg      = document.getElementById('ebgFilter').value;
+    const sectie   = document.getElementById('sectieFilter').value;
+    const leeftijd = [...document.querySelectorAll('.leeftijd-checkboxes input:checked')].map(c => c.value);
+
+    filteredData = doelzinnen.filter(d => {
+        if (search && !`${d.goNr} ${d.inhoud}`.toLowerCase().includes(search)) return false;
+        const ds = assessments[d.id] || '';
+        if (status === 'none' && ds) return false;
+        if (status !== 'all' && status !== 'none' && ds !== status) return false;
+        if (ebg !== 'all' && (d.kennisverwerking||'').toLowerCase() !== ebg) return false;
+        if (sectie !== 'all' && d.sectie !== sectie) return false;
+        if (leeftijd.length > 0 && !leeftijd.some(l => d.leeftijden.includes(l))) return false;
+        return true;
+    });
+
+    renderTable();
+    updateStats();
+}
+
+function resetFilters() {
+    document.getElementById('searchInput').value = '';
+    document.getElementById('statusFilter').value = 'all';
+    document.getElementById('ebgFilter').value = 'all';
+    document.getElementById('sectieFilter').value = 'all';
+    document.querySelectorAll('.leeftijd-checkboxes input').forEach(c => c.checked = false);
+    applyFilters();
+}
+
+function populateSectieFilter() {
+    const secties = [...new Set(doelzinnen.map(d => d.sectie).filter(Boolean))].sort();
+    const sel = document.getElementById('sectieFilter');
+    sel.innerHTML = '<option value="all">Alle secties</option>';
+    secties.forEach(s => { const o = document.createElement('option'); o.value = o.textContent = s; sel.appendChild(o); });
+}
+
+// ── Render ────────────────────────────────────────────────────────────────────
+function renderTable() {
+    const tbody = document.getElementById('tableBody');
+    if (!filteredData.length) {
+        tbody.innerHTML = `<tr><td colspan="6" class="empty-state">${currentVakId ? 'Geen doelen gevonden' : 'Selecteer een vak'}</td></tr>`;
+        return;
+    }
+    tbody.innerHTML = filteredData.map(d => {
+        const s   = assessments[d.id] || '';
+        const ebg = (d.kennisverwerking||'').toLowerCase();
+        return `
+        <tr class="${s ? 'status-'+s : ''}">
+            <td><button class="status-selector status-${s||'none'}" onclick="cycleStatus('${d.id}')"></button></td>
+            <td><strong>${d.goNr}</strong></td>
+            <td>${ebg ? `<span class="ebg-badge ebg-${ebg}">${ebg.charAt(0).toUpperCase()+ebg.slice(1)}</span>` : '-'}</td>
+            <td><div class="leeftijden">${d.leeftijden.map(l=>`<span class="leeftijd-badge">${l}</span>`).join('')}</div></td>
+            <td>${d.sectie||'-'}</td>
+            <td class="beschrijving-cell">
+                ${d.inhoud}
+                ${renderMIA(d.mia)}
+            </td>
+        </tr>`;
+    }).join('');
+}
+
+function renderMIA(items) {
+    if (!items?.length) return '';
+    const aankl  = items.filter(m => m.type === 'MIA - aanklikbaar');
+    const niet   = items.filter(m => m.type === 'MIA - niet aanklikbaar');
+    const titels = items.filter(m => m.type === 'MIA - titel');
+    if (!aankl.length && !niet.length) return '';
+    return `<div class="mia-container">
+        ${titels.length ? `<strong>${titels.map(t=>t.inhoud).join(' ')}</strong>` : ''}
+        <div class="mia-items">
+            ${aankl.map(m=>`<span class="mia-item">${m.inhoud}</span>`).join('')}
+            ${niet.map(m=>`<span class="mia-item" style="opacity:.6;font-style:italic">${m.inhoud}</span>`).join('')}
+        </div></div>`;
+}
+
+function showLoading() {
+    document.getElementById('tableBody').innerHTML =
+        `<tr><td colspan="6" class="loading"><div class="spinner"></div>Laden...</td></tr>`;
+}
+
+function renderEmptyState() {
+    document.getElementById('tableBody').innerHTML =
+        `<tr><td colspan="6" class="empty-state">Selecteer een vak om te beginnen</td></tr>`;
+}
+
+// ── Status ────────────────────────────────────────────────────────────────────
+function cycleStatus(goalId) {
+    const cycle = ['', 'groen', 'oranje', 'roze'];
+    const cur   = assessments[goalId] || '';
+    const next  = cycle[(cycle.indexOf(cur) + 1) % cycle.length];
+
+    if (next === '') delete assessments[goalId];
+    else assessments[goalId] = next;
+
+    // Optimistisch de UI updaten
+    renderTable();
+    updateStats();
+
+    // Debounced save naar API
+    clearTimeout(saveTimeout);
+    setSavingIndicator('Opslaan...');
+    saveTimeout = setTimeout(() => saveToApi(goalId, next), 500);
+}
+
+async function saveToApi(goalId, status) {
+    try {
+        const res = await fetch('/api/assessments', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ vak_id: currentVakId, goal_id: goalId, status })
+        });
+        if (!res.ok) throw new Error('Opslaan mislukt');
+        setSavingIndicator('✓ Opgeslagen');
+        setTimeout(() => setSavingIndicator(''), 2000);
+    } catch(e) {
+        showNotification('Opslaan mislukt!', 'error');
+        setSavingIndicator('⚠ Fout bij opslaan');
+    }
+}
+
+function setSavingIndicator(text) {
+    document.getElementById('savingIndicator').textContent = text;
+}
+
+// ── Stats ─────────────────────────────────────────────────────────────────────
+function updateStats() {
+    const total   = doelzinnen.length;
+    const vals    = Object.values(assessments);
+    const groen   = vals.filter(s=>s==='groen').length;
+    const oranje  = vals.filter(s=>s==='oranje').length;
+    const roze    = vals.filter(s=>s==='roze').length;
+    const pct     = total > 0 ? Math.round((groen+oranje+roze)/total*100) : 0;
+
+    document.getElementById('statTotal').textContent    = total || '-';
+    document.getElementById('statGroen').textContent    = groen || '-';
+    document.getElementById('statOranje').textContent   = oranje || '-';
+    document.getElementById('statRoze').textContent     = roze || '-';
+    document.getElementById('statBeoordeeld').textContent = total > 0 ? `${pct}%` : '-';
+    document.getElementById('vakProgress').textContent  =
+        currentVakId ? `${groen+oranje+roze}/${total} beoordeeld` : '';
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function vakNaam(id) {
+    // Naam komt uit de API (index.json via /api/doelen/index, veld 'naam').
+    // Deze functie is enkel een fallback als de naam niet beschikbaar is.
+    return id.replace(/^doelenset-bao-/, '').replace(/-/g, ' ')
+             .replace(/\b\w/g, c => c.toUpperCase());
+}
+
+function showNotification(msg, type='success') {
+    const el = document.getElementById('notification');
+    el.textContent = msg;
+    el.className   = `notification ${type} show`;
+    setTimeout(() => el.classList.remove('show'), 3000);
+}
+</script>
+</body>
+</html>
diff --git a/backend/templates/login.html b/backend/templates/login.html
new file mode 100644
index 0000000..1a882ce
--- /dev/null
+++ b/backend/templates/login.html
@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Inloggen - Leerdoelen Tracker</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .card {
+            background: white;
+            border-radius: 16px;
+            padding: 2.5rem;
+            width: 100%;
+            max-width: 400px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
+        }
+        .logo { text-align: center; margin-bottom: 2rem; }
+        .logo .icon { font-size: 3rem; margin-bottom: 0.5rem; }
+        .logo h1 { font-size: 1.4rem; color: #1f2937; font-weight: 700; }
+        .logo p { color: #6b7280; font-size: 0.85rem; margin-top: 0.25rem; }
+
+        .btn-microsoft {
+            width: 100%;
+            padding: 0.85rem;
+            background: #0078d4;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.75rem;
+            text-decoration: none;
+            transition: background 0.2s;
+            margin-bottom: 1rem;
+        }
+        .btn-microsoft:hover { background: #006cbe; }
+
+        .alert {
+            padding: 0.85rem 1rem;
+            border-radius: 8px;
+            margin-bottom: 1.25rem;
+            font-size: 0.875rem;
+            line-height: 1.5;
+        }
+        .alert-error   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
+        .alert-success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
+        .alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
+
+        .not-configured {
+            text-align: center; padding: 1.5rem; background: #f9fafb;
+            border-radius: 8px; color: #6b7280; font-size: 0.9rem;
+            border: 1px dashed #d1d5db;
+        }
+        .not-configured code {
+            background: #e5e7eb; padding: 0.15rem 0.4rem;
+            border-radius: 4px; font-size: 0.8rem;
+        }
+
+        /* Superadmin fallback */
+        .superadmin-toggle {
+            text-align: center;
+            margin-top: 1.5rem;
+            padding-top: 1rem;
+            border-top: 1px solid #f3f4f6;
+        }
+        .superadmin-toggle button {
+            background: none; border: none;
+            color: #9ca3af; font-size: 0.75rem;
+            cursor: pointer; text-decoration: underline;
+            text-underline-offset: 2px;
+        }
+        .superadmin-toggle button:hover { color: #6b7280; }
+
+        .superadmin-form { display: none; margin-top: 1rem; }
+        .superadmin-form.visible { display: block; }
+        .superadmin-form .form-group { margin-bottom: 0.75rem; }
+        .superadmin-form label {
+            display: block; font-size: 0.8rem;
+            font-weight: 600; color: #374151; margin-bottom: 0.3rem;
+        }
+        .superadmin-form input {
+            width: 100%; padding: 0.6rem 0.75rem;
+            border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem;
+        }
+        .superadmin-form input:focus {
+            outline: none; border-color: #4f46e5;
+            box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
+        }
+        .btn-superadmin {
+            width: 100%; padding: 0.6rem;
+            background: #6b7280; color: white;
+            border: none; border-radius: 6px;
+            font-size: 0.85rem; font-weight: 600; cursor: pointer;
+        }
+        .btn-superadmin:hover { background: #4b5563; }
+        #sa-error { color: #dc2626; font-size: 0.8rem; margin-top: 0.5rem; display: none; }
+    
+@media (prefers-color-scheme: dark) {
+    :root {
+        --gray-50:  #1a1a2e;
+        --gray-100: #16213e;
+        --gray-200: #0f3460;
+        --gray-300: #1a1a3e;
+        --gray-400: #6b7280;
+        --gray-500: #9ca3af;
+        --gray-600: #d1d5db;
+        --gray-700: #e5e7eb;
+        --gray-800: #f3f4f6;
+        --gray-900: #f9fafb;
+    }
+
+    body { background: #0f172a; color: #e2e8f0; }
+
+    /* Kaarten en secties */
+    .card, .section, .stat-card, .school-card,
+    .table-container, .filters-container, .legend-container,
+    .stats-bar .stat-card, .stats-overview, .vak-stats,
+    .import-section, .detail-section, .filters-bar,
+    .header:not([class*="gradient"]) {
+        background: #1e293b !important;
+        border-color: #334155 !important;
+    }
+
+    /* Header kaart in leerkracht.html */
+    .header { background: #1e293b !important; }
+
+    /* Tabellen */
+    thead, th { background: #1e293b !important; color: #94a3b8 !important; border-color: #334155 !important; }
+    td { border-color: #1e293b !important; color: #e2e8f0; }
+    tr:hover td, tr:hover { background: #263548 !important; }
+    tr.status-groen   { background: #064e3b !important; }
+    tr.status-groen:hover  { background: #065f46 !important; }
+    tr.status-oranje  { background: #451a03 !important; }
+    tr.status-oranje:hover { background: #78350f !important; }
+    tr.status-roze    { background: #500724 !important; }
+    tr.status-roze:hover   { background: #701a35 !important; }
+
+    /* Inputs en selects */
+    input, select, textarea {
+        background: #0f172a !important;
+        color: #e2e8f0 !important;
+        border-color: #334155 !important;
+    }
+    input::placeholder { color: #64748b !important; }
+    input:focus, select:focus, textarea:focus {
+        border-color: #6366f1 !important;
+        box-shadow: 0 0 0 3px rgba(99,102,241,0.2) !important;
+    }
+
+    /* Role select inline */
+    .role-select {
+        background: #1e293b !important;
+        color: #e2e8f0 !important;
+        border-color: #334155 !important;
+    }
+
+    /* Modals */
+    .modal { background: #1e293b !important; color: #e2e8f0; }
+    .modal h2 { color: #f1f5f9; }
+
+    /* Knoppen */
+    .btn-secondary { background: #334155 !important; color: #e2e8f0 !important; }
+    .btn-secondary:hover { background: #475569 !important; }
+
+    /* Status selector knoppen (leerkracht tabel) */
+    .status-selector.status-none { background: #1e293b !important; border-color: #475569 !important; color: #64748b !important; }
+
+    /* Stat cards */
+    .stat-card { background: #1e293b !important; }
+
+    /* School card header */
+    .school-card-header { background: #162032 !important; border-color: #334155 !important; }
+    .school-card { border-color: #334155 !important; }
+
+    /* Drop zone */
+    .drop-zone { background: #162032 !important; border-color: #334155 !important; }
+    .drop-zone:hover, .drop-zone.over { background: #1a2744 !important; border-color: #6366f1 !important; }
+
+    /* Domain chips */
+    .domain-chip { background: #1e3a5f !important; border-color: #2563eb !important; color: #93c5fd !important; }
+
+    /* Badges */
+    .leeftijd-badge { background: #334155 !important; color: #94a3b8 !important; }
+    .ebg-begrijpen { color: #1f2937 !important; }
+
+    /* MIA container */
+    .mia-container { background: #162032 !important; }
+    .mia-item { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
+    .mia-item.niet-aanklikbaar { background: #162032 !important; color: #64748b !important; }
+
+    /* Not configured box */
+    .not-configured { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
+    .not-configured code { background: #0f172a !important; color: #a5b4fc !important; }
+
+    /* Profile section */
+    .profile-section { background: #162032 !important; }
+
+    /* Leeftijd checkboxes */
+    .leeftijd-checkbox { border-color: #334155 !important; color: #e2e8f0; }
+    .leeftijd-checkbox:has(input:checked) { background: var(--primary) !important; }
+
+    /* Vak indicator */
+    .vak-indicator { /* gradient blijft, ziet er goed uit */ }
+
+    /* Progress bars achtergrond */
+    .progress-bar { background: #334155 !important; }
+
+    /* Vak card */
+    .vak-card { background: #162032 !important; }
+
+    /* Upload results */
+    .upload-ok  { background: #064e3b !important; border-color: #065f46 !important; }
+    .upload-err { background: #450a0a !important; border-color: #7f1d1d !important; }
+
+    /* Alert boxes */
+    .alert-error   { background: #450a0a !important; border-color: #7f1d1d !important; color: #fca5a5 !important; }
+    .alert-success { background: #064e3b !important; border-color: #065f46 !important; color: #6ee7b7 !important; }
+    .alert-warning { background: #451a03 !important; border-color: #78350f !important; color: #fcd34d !important; }
+    .alert-info    { background: #1e3a5f !important; border-color: #1d4ed8 !important; color: #93c5fd !important; }
+
+    /* Error text */
+    .form-error, #sa-error, #addUser-error { color: #f87171 !important; }
+    .form-hint { color: #64748b !important; }
+
+    /* Superadmin toggle */
+    .superadmin-toggle { border-color: #334155 !important; }
+    .superadmin-toggle button { color: #475569 !important; }
+    .superadmin-toggle button:hover { color: #94a3b8 !important; }
+
+    /* Superadmin form inputs */
+    .superadmin-form label { color: #94a3b8 !important; }
+
+    /* Footer */
+    .footer { color: #64748b !important; }
+    .status-legend { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
+
+    /* Scrollbar (webkit) */
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
+    ::-webkit-scrollbar-track { background: #0f172a; }
+    ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
+    ::-webkit-scrollbar-thumb:hover { background: #475569; }
+}
+</style>
+</head>
+<body>
+    <div class="card">
+        <div class="logo">
+            <div class="icon">📚</div>
+            <h1>Leerdoelen Tracker</h1>
+            <p>{{ org_name }}</p>
+        </div>
+
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% for category, message in messages %}
+                <div class="alert alert-{{ category }}">{{ message }}</div>
+            {% endfor %}
+        {% endwith %}
+
+        {% if entra_configured %}
+            <a href="/auth/microsoft" class="btn-microsoft">
+                <svg width="20" height="20" viewBox="0 0 21 21">
+                    <rect x="1" y="1" width="9" height="9" fill="#f25022"/>
+                    <rect x="11" y="1" width="9" height="9" fill="#7fba00"/>
+                    <rect x="1" y="11" width="9" height="9" fill="#00a4ef"/>
+                    <rect x="11" y="11" width="9" height="9" fill="#ffb900"/>
+                </svg>
+                Inloggen met Microsoft
+            </a>
+            <p style="text-align:center; color:#6b7280; font-size:0.8rem;">
+                Log in met uw school Microsoft account
+            </p>
+        {% else %}
+            <div class="not-configured">
+                <strong>Microsoft login niet geconfigureerd</strong><br><br>
+                Stel <code>MICROSOFT_CLIENT_ID</code> en <code>MICROSOFT_CLIENT_SECRET</code>
+                in de <code>.env</code> in om Entra login te activeren.
+            </div>
+        {% endif %}
+
+        <!-- Superadmin fallback — zichtbaar maar discreet -->
+        <div class="superadmin-toggle">
+            <button onclick="toggleSuperadmin()">Platformbeheerder</button>
+        </div>
+
+        <div class="superadmin-form" id="superadminForm">
+            <div style="font-size:0.8rem; color:#6b7280; margin-bottom:0.75rem; text-align:center;">
+                Platformbeheerder toegang
+            </div>
+            <div class="form-group">
+                <label>E-mail</label>
+                <input type="email" id="saEmail" value="admin@leerdoelen.local" autocomplete="username">
+            </div>
+            <div class="form-group">
+                <label>Wachtwoord</label>
+                <input type="password" id="saPassword" autocomplete="current-password">
+            </div>
+            <button class="btn-superadmin" onclick="superadminLogin()">Inloggen</button>
+            <div id="sa-error"></div>
+        </div>
+    </div>
+
+    <script>
+        let saVisible = false;
+
+        function toggleSuperadmin() {
+            saVisible = !saVisible;
+            document.getElementById('superadminForm').classList.toggle('visible', saVisible);
+            if (saVisible) document.getElementById('saPassword').focus();
+        }
+
+        async function superadminLogin() {
+            const errorEl = document.getElementById('sa-error');
+            errorEl.style.display = 'none';
+
+            const res = await fetch('/auth/superadmin-login', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    email:    document.getElementById('saEmail').value,
+                    password: document.getElementById('saPassword').value,
+                })
+            });
+
+            const data = await res.json();
+            if (res.ok) {
+                window.location.href = data.redirect || '/dashboard';
+            } else {
+                errorEl.textContent   = data.error || 'Inloggen mislukt';
+                errorEl.style.display = 'block';
+            }
+        }
+
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && saVisible) superadminLogin();
+        });
+    </script>
+</body>
+</html>
diff --git a/backend/templates/scholengroep_ict.html b/backend/templates/scholengroep_ict.html
new file mode 100644
index 0000000..625d5a1
--- /dev/null
+++ b/backend/templates/scholengroep_ict.html
@@ -0,0 +1,660 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Beheer – {{ org_name }}</title>
+    <style>
+        :root {
+            --primary:#4f46e5;--primary-dark:#4338ca;--success:#10b981;
+            --danger:#ef4444;--warning:#f59e0b;
+            --gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;
+            --gray-300:#d1d5db;--gray-500:#6b7280;--gray-600:#4b5563;
+            --gray-700:#374151;--gray-800:#1f2937;
+        }
+        *{margin:0;padding:0;box-sizing:border-box;}
+        body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--gray-100);color:var(--gray-800);}
+        .container{max-width:1200px;margin:0 auto;padding:1rem;}
+
+        .header{color:white;border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
+        .header.is-superadmin{background:linear-gradient(135deg,#1f2937,#374151);}
+        .header.is-sgict{background:linear-gradient(135deg,#4c1d95,#5b21b6);}
+        .header-left h1{font-size:1.35rem;display:flex;align-items:center;gap:.6rem;}
+        .header-left .org{opacity:.8;font-size:.85rem;margin-top:.25rem;}
+        .header-badge{font-size:.7rem;padding:.2rem .5rem;border-radius:4px;background:rgba(255,255,255,.2);font-weight:500;}
+        .header-actions{display:flex;gap:.5rem;flex-wrap:wrap;}
+        .btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem 1rem;border:none;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;text-decoration:none;}
+        .btn-primary{background:var(--primary);color:white;} .btn-primary:hover{background:var(--primary-dark);}
+        .btn-secondary{background:var(--gray-200);color:var(--gray-700);} .btn-secondary:hover{background:var(--gray-300);}
+        .btn-danger{background:var(--danger);color:white;} .btn-danger:hover{background:#dc2626;}
+        .btn-light{background:rgba(255,255,255,.15);color:white;border:1px solid rgba(255,255,255,.25);} .btn-light:hover{background:rgba(255,255,255,.25);}
+        .btn-sm{padding:.25rem .55rem;font-size:.78rem;}
+
+        /* Stats */
+        .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin-bottom:1.5rem;}
+        .stat-card{background:white;border-radius:10px;padding:.9rem;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.08);}
+        .stat-value{font-size:1.7rem;font-weight:700;color:var(--primary);}
+        .stat-label{font-size:.72rem;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em;margin-top:.2rem;}
+
+        .section{background:white;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,.1);}
+        .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap;gap:.5rem;}
+        .section-header h2{font-size:1.05rem;color:var(--gray-700);}
+        .section-hint{color:var(--gray-500);font-size:.83rem;margin-bottom:1rem;line-height:1.5;}
+
+        table{width:100%;border-collapse:collapse;font-size:.875rem;}
+        th{padding:.6rem .75rem;text-align:left;font-weight:600;color:var(--gray-600);border-bottom:2px solid var(--gray-200);background:var(--gray-50);white-space:nowrap;}
+        td{padding:.55rem .75rem;border-bottom:1px solid var(--gray-100);vertical-align:middle;}
+        tr:hover td{background:var(--gray-50);}
+        .empty-row td{text-align:center;color:var(--gray-500);padding:2rem;font-style:italic;}
+
+        .domain-chip{display:inline-block;padding:.15rem .45rem;background:#eff6ff;color:#1d4ed8;border-radius:4px;font-size:.72rem;margin:.1rem;border:1px solid #bfdbfe;}
+
+        /* Scholen grid */
+        .schools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1rem;}
+        .school-card{border:1px solid var(--gray-200);border-radius:10px;overflow:hidden;}
+        .school-card-header{padding:.9rem 1.1rem;background:var(--gray-50);border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;}
+        .school-card-header h3{font-size:.95rem;}
+        .school-card-body{padding:.75rem 1.1rem;}
+        .user-row{display:flex;align-items:center;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid var(--gray-100);font-size:.84rem;gap:.5rem;}
+        .user-row:last-child{border-bottom:none;}
+        .user-info{flex:1;min-width:0;}
+        .user-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+        .user-email{color:var(--gray-400);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+        .user-actions{display:flex;align-items:center;gap:.3rem;flex-shrink:0;}
+        .role-select{padding:.2rem .4rem;border:1px solid var(--gray-300);border-radius:4px;font-size:.75rem;cursor:pointer;background:white;color:var(--gray-700);}
+        .role-select:focus{outline:none;border-color:var(--primary);}
+        .group-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400);margin:.6rem 0 .3rem;display:flex;justify-content:space-between;}
+
+        /* Modal */
+        .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center;}
+        .modal-overlay.active{display:flex;}
+        .modal{background:white;border-radius:12px;padding:1.75rem;max-width:490px;width:90%;max-height:90vh;overflow-y:auto;}
+        .modal h2{font-size:1.1rem;margin-bottom:1.2rem;}
+        .form-group{margin-bottom:1rem;}
+        .form-group label{display:block;font-size:.82rem;font-weight:600;color:var(--gray-600);margin-bottom:.35rem;}
+        .form-group input,.form-group select,.form-group textarea{width:100%;padding:.6rem .75rem;border:1px solid var(--gray-300);border-radius:6px;font-size:.9rem;}
+        .form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1);}
+        .form-hint{font-size:.75rem;color:var(--gray-500);margin-top:.3rem;}
+        .modal-buttons{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.25rem;}
+        .form-error{color:var(--danger);font-size:.82rem;margin-top:.5rem;display:none;}
+
+        .notification{position:fixed;bottom:1rem;right:1rem;padding:.85rem 1.25rem;border-radius:8px;color:white;font-weight:500;transform:translateY(100px);opacity:0;transition:all .3s;z-index:2000;}
+        .notification.show{transform:translateY(0);opacity:1;}
+        .notification.success{background:var(--success);}
+        .notification.error{background:var(--danger);}
+        .notification.warning{background:var(--warning);}
+
+        @media (prefers-color-scheme: dark) {
+            :root{--gray-50:#1a1a2e;--gray-100:#16213e;--gray-200:#0f3460;--gray-300:#1a1a3e;--gray-500:#9ca3af;--gray-600:#d1d5db;--gray-700:#e5e7eb;--gray-800:#f3f4f6;}
+            body{background:#0f172a;color:#e2e8f0;}
+            .section,.stat-card,.modal{background:#1e293b !important;}
+            th{background:#1e293b !important;color:#94a3b8 !important;border-color:#334155 !important;}
+            td{border-color:#1e293b !important;color:#e2e8f0;}
+            tr:hover td{background:#263548 !important;}
+            .school-card{border-color:#334155 !important;}
+            .school-card-header{background:#162032 !important;border-color:#334155 !important;}
+            .domain-chip{background:#1e3a5f !important;border-color:#2563eb !important;color:#93c5fd !important;}
+            .role-select,.form-group input,.form-group select{background:#0f172a !important;color:#e2e8f0 !important;border-color:#334155 !important;}
+            .btn-secondary{background:#334155 !important;color:#e2e8f0 !important;}
+            .btn-secondary:hover{background:#475569 !important;}
+            ::-webkit-scrollbar{width:8px;} ::-webkit-scrollbar-track{background:#0f172a;} ::-webkit-scrollbar-thumb{background:#334155;border-radius:4px;}
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+
+    <div class="header {{ 'is-superadmin' if is_superadmin else 'is-sgict' }}">
+        <div class="header-left">
+            <h1>
+                {{ '⚙️' if is_superadmin else '🔧' }}
+                {{ 'Platform Beheer' if is_superadmin else 'Scholengroep ICT Beheer' }}
+                {% if is_superadmin %}<span class="header-badge">Superadmin</span>{% endif %}
+            </h1>
+            <div class="org">{{ org_name }}</div>
+        </div>
+        <div class="header-actions">
+            <a href="/doelen-beheer" class="btn btn-light">📂 Leerdoelen bestanden</a>
+            <a href="/auth/logout" class="btn btn-light">Uitloggen</a>
+        </div>
+    </div>
+
+    <!-- Stats — zichtbaar voor iedereen in deze pagina -->
+    <div class="stats-grid" id="statsGrid">
+        <div class="stat-card"><div class="stat-value" id="st-schools">-</div><div class="stat-label">Scholen</div></div>
+        <div class="stat-card"><div class="stat-value" id="st-sg-ict">-</div><div class="stat-label">Scholengr. ICT</div></div>
+        <div class="stat-card"><div class="stat-value" id="st-school-ict">-</div><div class="stat-label">School ICT</div></div>
+        <div class="stat-card"><div class="stat-value" id="st-directors">-</div><div class="stat-label">Directeurs</div></div>
+        <div class="stat-card"><div class="stat-value" id="st-teachers">-</div><div class="stat-label">Leerkrachten</div></div>
+    </div>
+
+    <!-- Scholengroep ICT accounts — alleen superadmin -->
+    {% if is_superadmin %}
+    <div class="section">
+        <div class="section-header">
+            <h2>👥 Scholengroep ICT medewerkers</h2>
+            <button class="btn btn-primary btn-sm" onclick="openModal('addSgIct')">+ Toevoegen</button>
+        </div>
+        <p class="section-hint">
+            Scholengroep ICT medewerkers kunnen alle scholen en gebruikers beheren,
+            maar kunnen geen scholen aanmaken of andere scholengroep ICT accounts toevoegen.
+        </p>
+        <table>
+            <thead><tr><th>Naam</th><th>E-mail</th><th>Laatste login</th><th></th></tr></thead>
+            <tbody id="sgIctTable"><tr class="empty-row"><td colspan="4">Laden...</td></tr></tbody>
+        </table>
+    </div>
+    {% endif %}
+
+
+    <!-- Schooljaren — globaal -->
+    <div class="section">
+        <div class="section-header">
+            <h2>📅 Schooljaren</h2>
+            <button class="btn btn-primary btn-sm" onclick="openModal('addJaar')">+ Nieuw schooljaar</button>
+        </div>
+        <p class="section-hint">
+            Het actieve schooljaar geldt voor alle scholen tegelijk.
+            Leerkrachten werken automatisch in het actieve jaar.
+            Directeurs kunnen alle jaren raadplegen via hun dashboard.
+        </p>
+        <table>
+            <thead><tr><th>Schooljaar</th><th>Status</th><th></th></tr></thead>
+            <tbody id="jarenTable"><tr class="empty-row"><td colspan="3">Laden...</td></tr></tbody>
+        </table>
+    </div>
+
+    <!-- Scholen beheren — iedereen -->
+    <div class="section">
+        <div class="section-header">
+            <h2>🏫 Scholen</h2>
+            <button class="btn btn-primary btn-sm" onclick="openModal('addSchool')">+ School toevoegen</button>
+        </div>
+        <table>
+            <thead>
+                <tr>
+                    <th>Naam</th>
+                    <th>E-maildomeinen</th>
+                    <th>Gebruikers</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody id="schoolsTable"><tr class="empty-row"><td colspan="4">Laden...</td></tr></tbody>
+        </table>
+    </div>
+
+    <!-- Scholen & gebruikers detail -->
+    <div class="section">
+        <div class="section-header">
+            <h2>👥 Gebruikers per school</h2>
+            <button class="btn btn-primary btn-sm" onclick="openModal('addUser')">+ Gebruiker toevoegen</button>
+        </div>
+        <div class="schools-grid" id="schoolsGrid">Laden...</div>
+    </div>
+
+</div>
+
+<!-- Modals -->
+
+<div class="modal-overlay" id="modal-addSchool">
+    <div class="modal">
+        <h2>🏫 School toevoegen</h2>
+        <div class="form-group"><label>Naam</label><input type="text" id="schoolName" placeholder="Basisschool De Krekel"></div>
+        <div class="form-group"><label>Slug (optioneel)</label><input type="text" id="schoolSlug" placeholder="auto-gegenereerd"><div class="form-hint">Kleine letters en streepjes.</div></div>
+        <div class="form-group"><label>E-maildomeinen</label><input type="text" id="schoolDomains" placeholder="dekrekel.be, sintjan.gent.be"><div class="form-hint">Komma-gescheiden. Gebruikers met dit domein worden automatisch gekoppeld.</div></div>
+        <div class="form-error" id="school-error"></div>
+        <div class="modal-buttons">
+            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
+            <button class="btn btn-primary" onclick="addSchool()">Toevoegen</button>
+        </div>
+    </div>
+</div>
+
+<div class="modal-overlay" id="modal-editSchool">
+    <div class="modal">
+        <h2>School bewerken</h2>
+        <input type="hidden" id="editSchoolId">
+        <div class="form-group"><label>Naam</label><input type="text" id="editSchoolName"></div>
+        <div class="form-group"><label>E-maildomeinen</label><input type="text" id="editSchoolDomains"><div class="form-hint">Komma-gescheiden.</div></div>
+        <div class="form-error" id="edit-school-error"></div>
+        <div class="modal-buttons">
+            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
+            <button class="btn btn-primary" onclick="saveSchool()">Opslaan</button>
+        </div>
+    </div>
+</div>
+
+{% if is_superadmin %}
+<div class="modal-overlay" id="modal-addSgIct">
+    <div class="modal">
+        <h2>Scholengroep ICT toevoegen</h2>
+        <p style="color:var(--gray-500);font-size:.85rem;margin-bottom:1rem;">Logt in via Microsoft. Kan alle scholen en gebruikers beheren.</p>
+        <div class="form-group"><label>Voornaam</label><input type="text" id="sgFirstName"></div>
+        <div class="form-group"><label>Achternaam</label><input type="text" id="sgLastName"></div>
+        <div class="form-group"><label>E-mailadres</label><input type="email" id="sgEmail"></div>
+        <div class="form-error" id="sg-error"></div>
+        <div class="modal-buttons">
+            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
+            <button class="btn btn-primary" onclick="addSgIct()">Toevoegen</button>
+        </div>
+    </div>
+</div>
+{% endif %}
+
+<div class="modal-overlay" id="modal-addJaar">
+    <div class="modal">
+        <h2>📅 Nieuw schooljaar aanmaken</h2>
+        <p style="color:var(--gray-500);font-size:.85rem;margin-bottom:1rem;">
+            Geldt voor alle scholen tegelijk. Het nieuwe jaar wordt automatisch
+            actief — het vorige jaar blijft bewaard voor historiek.
+        </p>
+        <div class="form-group">
+            <label>Schooljaar label</label>
+            <input type="text" id="jaarLabel" placeholder="bv. 2026-2027">
+            <div class="form-hint">Formaat: JJJJ-JJJJ</div>
+        </div>
+        <div class="form-error" id="jaar-error"></div>
+        <div class="modal-buttons">
+            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
+            <button class="btn btn-primary" onclick="addJaar()">Aanmaken</button>
+        </div>
+    </div>
+</div>
+
+<div class="modal-overlay" id="modal-addUser">
+    <div class="modal">
+        <h2>Gebruiker toevoegen</h2>
+        <p style="color:var(--gray-500);font-size:.85rem;margin-bottom:1rem;">Bestaand e-mailadres? Account wordt heractiveerd en bijgewerkt.</p>
+        <div class="form-group"><label>School</label><select id="addUserSchool"></select></div>
+        <div class="form-group"><label>Voornaam</label><input type="text" id="addUserFirst"></div>
+        <div class="form-group"><label>Achternaam</label><input type="text" id="addUserLast"></div>
+        <div class="form-group"><label>E-mailadres (Microsoft account)</label><input type="email" id="addUserEmail"></div>
+        <div class="form-group">
+            <label>Rol</label>
+            <select id="addUserRole">
+                <option value="teacher">Leerkracht</option>
+                <option value="director">Directeur</option>
+                <option value="school_ict">School ICT</option>
+            </select>
+        </div>
+        <div class="form-error" id="addUser-error"></div>
+        <div class="modal-buttons">
+            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
+            <button class="btn btn-primary" onclick="addUser()">Toevoegen</button>
+        </div>
+    </div>
+</div>
+
+<div class="notification" id="notification"></div>
+
+<script>
+const IS_SUPERADMIN = {{ 'true' if is_superadmin else 'false' }};
+let schools = [];
+
+const SCHOOL_ROLLEN = [
+    { value: 'teacher',    label: 'Leerkracht' },
+    { value: 'director',   label: 'Directeur'  },
+    { value: 'school_ict', label: 'School ICT' },
+];
+
+document.addEventListener('DOMContentLoaded', async () => {
+    const tasks = [loadStats(), loadSchoolsTable(), loadSchoolsGrid()];
+    if (IS_SUPERADMIN) tasks.push(loadSgIct());
+    await Promise.all(tasks);
+    await loadJaren();
+    await loadAuditLog();
+});
+
+// ── Stats ─────────────────────────────────────────────────────────────────────
+async function loadStats() {
+    const res = await fetch('/admin/stats');
+    if (!res.ok) return;
+    const d = await res.json();
+    document.getElementById('st-schools').textContent    = d.schools;
+    document.getElementById('st-sg-ict').textContent     = d.scholengroep_ict;
+    document.getElementById('st-school-ict').textContent = d.school_ict;
+    document.getElementById('st-directors').textContent  = d.directors;
+    document.getElementById('st-teachers').textContent   = d.teachers;
+}
+
+// ── Scholengroep ICT (superadmin) ─────────────────────────────────────────────
+async function loadSgIct() {
+    const res   = await fetch('/admin/scholengroep-ict');
+    const data  = await res.json();
+    const tbody = document.getElementById('sgIctTable');
+    if (!data.users?.length) {
+        tbody.innerHTML = '<tr class="empty-row"><td colspan="4">Geen scholengroep ICT medewerkers</td></tr>';
+        return;
+    }
+    tbody.innerHTML = data.users.map(u => `
+        <tr>
+            <td>${u.full_name}</td>
+            <td style="color:var(--gray-500);font-size:.82rem;">${u.email}</td>
+            <td style="color:var(--gray-500);font-size:.8rem;">${u.last_login ? new Date(u.last_login).toLocaleDateString('nl-BE') : 'Nog niet ingelogd'}</td>
+            <td><button class="btn btn-danger btn-sm" onclick="removeSgIct(${u.id},'${u.full_name.replace(/'/g,"\\'")}')">Verwijderen</button></td>
+        </tr>`).join('');
+}
+
+async function addSgIct() {
+    const err = document.getElementById('sg-error');
+    err.style.display = 'none';
+    const res = await fetch('/admin/scholengroep-ict', {
+        method: 'POST', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ email: document.getElementById('sgEmail').value, first_name: document.getElementById('sgFirstName').value, last_name: document.getElementById('sgLastName').value })
+    });
+    const data = await res.json();
+    if (!res.ok) { err.textContent = data.error; err.style.display = 'block'; return; }
+    closeModal(); notify('Scholengroep ICT toegevoegd', 'success');
+    await Promise.all([loadSgIct(), loadStats()]);
+}
+
+async function removeSgIct(userId, naam) {
+    if (!confirm(`${naam} verwijderen als scholengroep ICT?`)) return;
+    const res = await fetch(`/admin/scholengroep-ict/${userId}`, { method: 'DELETE' });
+    if (!res.ok) { notify('Verwijderen mislukt', 'error'); return; }
+    notify(`${naam} verwijderd`, 'success');
+    await Promise.all([loadSgIct(), loadStats()]);
+}
+
+// ── Scholen tabel ─────────────────────────────────────────────────────────────
+async function loadSchoolsTable() {
+    const res  = await fetch('/admin/schools');
+    const data = await res.json();
+    schools    = data.schools || [];
+    const tbody = document.getElementById('schoolsTable');
+    if (!schools.length) {
+        tbody.innerHTML = `<tr class="empty-row"><td colspan="4">Nog geen scholen aangemaakt</td></tr>`;
+        return;
+    }
+    tbody.innerHTML = schools.map(s => `
+        <tr>
+            <td><strong>${s.name}</strong></td>
+            <td>${(s.email_domains||[]).map(d=>`<span class="domain-chip">${d}</span>`).join('') || '<em style="color:var(--gray-400)">geen</em>'}</td>
+            <td style="color:var(--gray-500);">${s.user_count}</td>
+            <td style="display:flex;gap:.35rem;">
+                <button class="btn btn-secondary btn-sm" onclick="editSchool(${s.id},'${s.name.replace(/'/g,"\\'")}','${(s.email_domains||[]).join(', ')}')">Bewerken</button>
+                <button class="btn btn-danger btn-sm" onclick="deleteSchool(${s.id},'${s.name.replace(/'/g,"\\'")}')">Verwijderen</button>
+            </td>
+        </tr>`).join('');
+
+    // Vul ook de school select in het "gebruiker toevoegen" modal
+    document.getElementById('addUserSchool').innerHTML =
+        schools.map(s => `<option value="${s.id}">${s.name}</option>`).join('');
+}
+
+async function addSchool() {
+    const err = document.getElementById('school-error');
+    err.style.display = 'none';
+    const res = await fetch('/admin/schools', {
+        method: 'POST', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ name: document.getElementById('schoolName').value, slug: document.getElementById('schoolSlug').value, email_domains: document.getElementById('schoolDomains').value.split(',').map(d=>d.trim()).filter(Boolean) })
+    });
+    const data = await res.json();
+    if (!res.ok) { err.textContent = data.error; err.style.display = 'block'; return; }
+    closeModal(); notify('School aangemaakt', 'success');
+    await Promise.all([loadSchoolsTable(), loadSchoolsGrid(), loadStats()]);
+}
+
+function editSchool(id, name, domainsStr) {
+    document.getElementById('editSchoolId').value      = id;
+    document.getElementById('editSchoolName').value    = name;
+    document.getElementById('editSchoolDomains').value = domainsStr;
+    openModal('editSchool');
+}
+
+async function saveSchool() {
+    const err = document.getElementById('edit-school-error');
+    err.style.display = 'none';
+    const id = document.getElementById('editSchoolId').value;
+    const res = await fetch(`/admin/schools/${id}`, {
+        method: 'PUT', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ name: document.getElementById('editSchoolName').value, email_domains: document.getElementById('editSchoolDomains').value.split(',').map(d=>d.trim()).filter(Boolean) })
+    });
+    const data = await res.json();
+    if (!res.ok) { err.textContent = data.error; err.style.display = 'block'; return; }
+    closeModal(); notify('School opgeslagen', 'success');
+    await Promise.all([loadSchoolsTable(), loadSchoolsGrid()]);
+}
+
+async function deleteSchool(id, name) {
+    if (!confirm(`School "${name}" permanent verwijderen? Dit verwijdert alle gekoppelde data!`)) return;
+    const res = await fetch(`/admin/schools/${id}`, { method: 'DELETE' });
+    if (!res.ok) { notify('Verwijderen mislukt', 'error'); return; }
+    notify('School verwijderd', 'success');
+    await Promise.all([loadSchoolsTable(), loadSchoolsGrid(), loadStats()]);
+}
+
+// ── Gebruikers grid ───────────────────────────────────────────────────────────
+async function loadSchoolsGrid() {
+    const res  = await fetch('/admin/schools');
+    const data = await res.json();
+    schools    = data.schools || [];
+    const grid = document.getElementById('schoolsGrid');
+    if (!schools.length) {
+        grid.innerHTML = '<p style="color:var(--gray-500);font-style:italic;padding:.5rem 0;">Nog geen scholen aangemaakt.</p>';
+        return;
+    }
+    grid.innerHTML = '';
+    await Promise.all(schools.map(s => renderSchoolCard(s, grid)));
+}
+
+async function renderSchoolCard(school, container) {
+    const res   = await fetch(`/admin/schools/${school.id}/users`);
+    const data  = await res.json();
+    const users = data.users || [];
+    const byRole = {
+        school_ict: users.filter(u => u.role === 'school_ict'),
+        director:   users.filter(u => u.role === 'director'),
+        teacher:    users.filter(u => u.role === 'teacher'),
+    };
+    const card = document.createElement('div');
+    card.className = 'school-card';
+    card.id        = `school-card-${school.id}`;
+    card.innerHTML = `
+        <div class="school-card-header">
+            <div>
+                <h3>${school.name}</h3>
+                <div style="margin-top:.35rem;">${(school.email_domains||[]).map(d=>`<span class="domain-chip">${d}</span>`).join('') || '<span style="color:var(--gray-400);font-size:.75rem;">geen domeinen</span>'}</div>
+            </div>
+            <span style="color:var(--gray-500);font-size:.8rem;white-space:nowrap;">${users.length} gebruikers</span>
+        </div>
+        <div class="school-card-body">
+            ${renderUserGroup(school.id,'School ICT',byRole.school_ict)}
+            ${renderUserGroup(school.id,'Directeurs',byRole.director)}
+            ${renderUserGroup(school.id,'Leerkrachten',byRole.teacher,5)}
+        </div>`;
+    container.appendChild(card);
+}
+
+function renderUserGroup(schoolId, label, users, maxShow=99) {
+    if (!users.length) return '';
+    const shown  = users.slice(0, maxShow);
+    const hidden = users.length - shown.length;
+    return `
+        <div class="group-label"><span>${label}</span><span style="font-weight:400;text-transform:none;letter-spacing:0;">${users.length}</span></div>
+        ${shown.map(u => `
+            <div class="user-row">
+                <div class="user-info">
+                    <div class="user-name">${u.full_name}</div>
+                    <div class="user-email">${u.email}</div>
+                    <div class="user-email" style="color:var(--gray-400);font-size:.7rem;">
+                        ${u.last_login
+                            ? '↩ ' + new Date(u.last_login).toLocaleString('nl-BE', {day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit'})
+                            : 'Nog niet ingelogd'}
+                    </div>
+                </div>
+                <div class="user-actions">
+                    <select class="role-select" onchange="changeRole(${schoolId},${u.id},this.value,'${u.full_name.replace(/'/g,"\\'")}',this)">
+                        ${SCHOOL_ROLLEN.map(r=>`<option value="${r.value}" ${r.value===u.role?'selected':''}>${r.label}</option>`).join('')}
+                    </select>
+                    <button class="btn btn-danger btn-sm" onclick="removeUser(${schoolId},${u.id},'${u.full_name.replace(/'/g,"\\'")}')">×</button>
+                </div>
+            </div>`).join('')}
+        ${hidden > 0 ? `<div style="color:var(--gray-500);font-size:.8rem;padding:.3rem 0 0;">+ ${hidden} meer...</div>` : ''}`;
+}
+
+async function changeRole(schoolId, userId, newRole, naam, selectEl) {
+    const res = await fetch(`/admin/schools/${schoolId}/users/${userId}/role`, {
+        method: 'PUT', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ role: newRole })
+    });
+    if (!res.ok) { notify((await res.json()).error || 'Wijzigen mislukt', 'error'); await refreshCard(schoolId); return; }
+    notify(`${naam} is nu ${SCHOOL_ROLLEN.find(r=>r.value===newRole)?.label}`, 'success');
+    await refreshCard(schoolId);
+}
+
+async function addUser() {
+    const err = document.getElementById('addUser-error');
+    err.style.display = 'none';
+    const schoolId = document.getElementById('addUserSchool').value;
+    const res = await fetch(`/admin/schools/${schoolId}/users`, {
+        method: 'POST', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ email: document.getElementById('addUserEmail').value, first_name: document.getElementById('addUserFirst').value, last_name: document.getElementById('addUserLast').value, role: document.getElementById('addUserRole').value })
+    });
+    const data = await res.json();
+    if (!res.ok) { err.textContent = data.error; err.style.display = 'block'; return; }
+    closeModal(); notify(data.linked ? 'Account heractiveerd en bijgewerkt' : 'Gebruiker toegevoegd', 'success');
+    await Promise.all([refreshCard(parseInt(schoolId)), loadStats()]);
+}
+
+async function removeUser(schoolId, userId, naam) {
+    if (!confirm(`${naam} verwijderen?`)) return;
+    const res = await fetch(`/admin/schools/${schoolId}/users/${userId}`, { method: 'DELETE' });
+    if (!res.ok) { notify('Verwijderen mislukt', 'error'); return; }
+    notify(`${naam} verwijderd`, 'success');
+    await Promise.all([refreshCard(schoolId), loadStats()]);
+}
+
+async function refreshCard(schoolId) {
+    const card   = document.getElementById(`school-card-${schoolId}`);
+    const school = schools.find(s => s.id === schoolId);
+    if (card && school) { card.remove(); await renderSchoolCard(school, document.getElementById('schoolsGrid')); }
+}
+
+// ── Schooljaren ───────────────────────────────────────────────────────────────
+async function loadJaren() {
+    const tbody = document.getElementById('jarenTable');
+    const res   = await fetch('/admin/years');
+    if (!res.ok) { tbody.innerHTML = '<tr class="empty-row"><td colspan="3">Fout bij laden</td></tr>'; return; }
+    const data  = await res.json();
+    const years = data.years || [];
+
+    if (!years.length) {
+        tbody.innerHTML = '<tr class="empty-row"><td colspan="3">Nog geen schooljaren aangemaakt</td></tr>';
+    } else {
+        tbody.innerHTML = years.map(y => `
+            <tr>
+                <td><strong>${y.label}</strong></td>
+                <td>${y.is_active
+                    ? '<span style="background:#d1fae5;color:#065f46;padding:.2rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600;">✓ Actief</span>'
+                    : '<span style="color:var(--gray-400);font-size:.82rem;">Inactief</span>'}
+                </td>
+                <td>${!y.is_active
+                    ? `<button class="btn btn-secondary btn-sm" onclick="activeerJaar(${y.id},'${y.label}')">Activeren</button>`
+                    : ''}
+                </td>
+            </tr>`).join('');
+    }
+
+    // Stel default jaar label in op volgend schooljaar
+    const now     = new Date();
+    const startJr = now.getMonth() >= 8 ? now.getFullYear() + 1 : now.getFullYear();
+    const suggest = `${startJr}-${startJr + 1}`;
+    const inp     = document.getElementById('jaarLabel');
+    if (inp && !inp.value) inp.value = suggest;
+}
+
+async function addJaar() {
+    const err   = document.getElementById('jaar-error');
+    err.style.display = 'none';
+    const label = document.getElementById('jaarLabel').value.trim();
+    const res   = await fetch('/admin/years', {
+        method: 'POST', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ label, set_active: true })
+    });
+    const data = await res.json();
+    if (!res.ok) { err.textContent = data.error; err.style.display = 'block'; return; }
+    closeModal();
+    notify(`Schooljaar ${label} aangemaakt en geactiveerd`, 'success');
+    await loadJaren();
+}
+
+async function activeerJaar(yearId, label) {
+    if (!confirm(`Schooljaar ${label} activeren? Leerkrachten werken daarna in dit jaar.`)) return;
+    const res = await fetch(`/admin/years/${yearId}/activate`, { method: 'PUT' });
+    if (!res.ok) { notify('Activeren mislukt', 'error'); return; }
+    notify(`${label} is nu het actieve schooljaar`, 'success');
+    await loadJaren();
+}
+
+
+// ── Auditlog ──────────────────────────────────────────────────────────────────
+async function loadAuditLog(page = 1) {
+    const category = document.getElementById('auditCategory')?.value || '';
+    const search   = document.getElementById('auditSearch')?.value   || '';
+    const schoolF  = document.getElementById('auditSchoolFilter')?.value || '';
+    const params   = new URLSearchParams({ page, per_page: 25 });
+    if (category) params.set('category', category);
+    if (search)   params.set('search', search);
+
+    const res  = await fetch(`/api/audit-log?${params}`);
+    if (!res.ok) return;
+    const data = await res.json();
+
+    // Vul school filter als die leeg is
+    const schoolSel = document.getElementById('auditSchoolFilter');
+    if (schoolSel && schoolSel.options.length <= 1 && schools.length) {
+        schools.forEach(s => {
+            const o = document.createElement('option');
+            o.value = s.id; o.textContent = s.name;
+            schoolSel.appendChild(o);
+        });
+    }
+
+    // Filter client-side op school (API filtert niet op school_id voor superadmin)
+    let entries = data.entries;
+    if (schoolF) entries = entries.filter(e => e.school_id == schoolF);
+
+    const tbody = document.getElementById('auditTable');
+    if (!entries.length) {
+        tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;color:var(--gray-400);">Geen entries gevonden</td></tr>';
+    } else {
+        tbody.innerHTML = entries.map(e => {
+            const ts = new Date(e.timestamp).toLocaleString('nl-BE', {day:'2-digit',month:'2-digit',year:'2-digit',hour:'2-digit',minute:'2-digit'});
+            const detail = e.detail ? (() => { try { return Object.entries(JSON.parse(e.detail)).map(([k,v]) => `<span style="font-size:.73rem;background:var(--gray-100);padding:.1rem .3rem;border-radius:3px;display:inline-block;">${k}: ${v}</span>`).join(' '); } catch { return e.detail; } })() : '';
+            return `<tr>
+                <td style="white-space:nowrap;font-size:.8rem;">${ts}</td>
+                <td style="font-size:.82rem;">${e.user_name || '—'}</td>
+                <td style="font-size:.8rem;color:var(--gray-500);">${e.school_name || '—'}</td>
+                <td><code style="font-size:.78rem;background:var(--gray-100);padding:.15rem .35rem;border-radius:3px;">${e.action}</code></td>
+                <td style="font-size:.78rem;">${detail}</td>
+                <td style="font-size:.75rem;color:var(--gray-400);">${e.ip_address || ''}</td>
+            </tr>`;
+        }).join('');
+    }
+
+    const pager = document.getElementById('auditPager');
+    if (data.pages <= 1) { pager.innerHTML = ''; return; }
+    pager.innerHTML = Array.from({length: data.pages}, (_, i) => `
+        <button onclick="loadAuditLog(${i+1})"
+            style="padding:.3rem .6rem;border:1px solid var(--gray-300);border-radius:4px;cursor:pointer;min-width:36px;
+                   ${i+1 === data.page ? 'background:var(--primary);color:white;border-color:var(--primary);' : ''}">
+            ${i+1}
+        </button>`).join('');
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function openModal(id) {
+    document.querySelectorAll('.modal-overlay').forEach(m => m.classList.remove('active'));
+    document.getElementById(`modal-${id}`)?.classList.add('active');
+}
+function closeModal() { document.querySelectorAll('.modal-overlay').forEach(m => m.classList.remove('active')); }
+document.querySelectorAll('.modal-overlay').forEach(o => o.addEventListener('click', e => { if (e.target===o) closeModal(); }));
+function notify(msg, type='success') {
+    const el = document.getElementById('notification');
+    el.textContent = msg; el.className = `notification ${type} show`;
+    setTimeout(() => el.classList.remove('show'), 3500);
+}
+</script>
+</body>
+</html>
diff --git a/backend/templates/school_ict.html b/backend/templates/school_ict.html
new file mode 100644
index 0000000..c29e9ac
--- /dev/null
+++ b/backend/templates/school_ict.html
@@ -0,0 +1,540 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>School ICT - Leerdoelen Tracker</title>
+    <style>
+        :root {
+            --primary:#4f46e5;--primary-dark:#4338ca;--success:#10b981;
+            --danger:#ef4444;--warning:#f59e0b;
+            --gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;
+            --gray-300:#d1d5db;--gray-500:#6b7280;--gray-600:#4b5563;
+            --gray-700:#374151;--gray-800:#1f2937;
+        }
+        *{margin:0;padding:0;box-sizing:border-box;}
+        body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--gray-100);color:var(--gray-800);}
+        .container{max-width:900px;margin:0 auto;padding:1rem;}
+        .header{background:linear-gradient(135deg,#1e40af,#1d4ed8);color:white;border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
+        .header h1{font-size:1.3rem;}
+        .header .school-name{opacity:.85;font-size:.9rem;margin-top:.2rem;}
+        .section{background:white;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,.1);}
+        .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap;gap:.5rem;}
+        .section-header h2{font-size:1.05rem;color:var(--gray-700);}
+        .btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem 1rem;border:none;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;text-decoration:none;}
+        .btn-primary{background:var(--primary);color:white;} .btn-primary:hover{background:var(--primary-dark);}
+        .btn-secondary{background:var(--gray-200);color:var(--gray-700);} .btn-secondary:hover{background:var(--gray-300);}
+        .btn-danger{background:var(--danger);color:white;} .btn-danger:hover{background:#dc2626;}
+        .btn-light{background:rgba(255,255,255,.15);color:white;border:1px solid rgba(255,255,255,.25);} .btn-light:hover{background:rgba(255,255,255,.25);}
+        .btn-sm{padding:.25rem .55rem;font-size:.78rem;}
+        table{width:100%;border-collapse:collapse;font-size:.875rem;}
+        th{padding:.65rem .75rem;text-align:left;font-weight:600;color:var(--gray-600);border-bottom:2px solid var(--gray-200);background:var(--gray-50);}
+        td{padding:.6rem .75rem;border-bottom:1px solid var(--gray-100);vertical-align:middle;}
+        tr:hover td{background:var(--gray-50);}
+        .empty-row td{text-align:center;color:var(--gray-500);padding:2.5rem;font-style:italic;}
+        .role-select{padding:.25rem .45rem;border:1px solid var(--gray-300);border-radius:4px;font-size:.8rem;cursor:pointer;background:white;}
+        .role-select:focus{outline:none;border-color:var(--primary);}
+        .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center;}
+        .modal-overlay.active{display:flex;}
+        .modal{background:white;border-radius:12px;padding:1.75rem;max-width:440px;width:90%;}
+        .modal h2{font-size:1.1rem;margin-bottom:1.2rem;}
+        .form-group{margin-bottom:1rem;}
+        .form-group label{display:block;font-size:.82rem;font-weight:600;color:var(--gray-600);margin-bottom:.35rem;}
+        .form-group input,.form-group select{width:100%;padding:.6rem .75rem;border:1px solid var(--gray-300);border-radius:6px;font-size:.9rem;}
+        .form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1);}
+        .modal-buttons{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.25rem;}
+        .form-error{color:var(--danger);font-size:.82rem;margin-top:.5rem;display:none;}
+        .notification{position:fixed;bottom:1rem;right:1rem;padding:.85rem 1.25rem;border-radius:8px;color:white;font-weight:500;transform:translateY(100px);opacity:0;transition:all .3s;z-index:2000;}
+        .notification.show{transform:translateY(0);opacity:1;}
+        .notification.success{background:var(--success);}
+        .notification.error{background:var(--danger);}
+        .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin-bottom:1.5rem;}
+        .stat{background:var(--gray-50);border-radius:8px;padding:.85rem;text-align:center;}
+        .stat-value{font-size:1.75rem;font-weight:700;color:var(--primary);}
+        .stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);margin-top:.2rem;}
+    
+@media (prefers-color-scheme: dark) {
+    :root {
+        --gray-50:  #1a1a2e;
+        --gray-100: #16213e;
+        --gray-200: #0f3460;
+        --gray-300: #1a1a3e;
+        --gray-400: #6b7280;
+        --gray-500: #9ca3af;
+        --gray-600: #d1d5db;
+        --gray-700: #e5e7eb;
+        --gray-800: #f3f4f6;
+        --gray-900: #f9fafb;
+    }
+
+    body { background: #0f172a; color: #e2e8f0; }
+
+    /* Kaarten en secties */
+    .card, .section, .stat-card, .school-card,
+    .table-container, .filters-container, .legend-container,
+    .stats-bar .stat-card, .stats-overview, .vak-stats,
+    .import-section, .detail-section, .filters-bar,
+    .header:not([class*="gradient"]) {
+        background: #1e293b !important;
+        border-color: #334155 !important;
+    }
+
+    /* Header kaart in leerkracht.html */
+    .header { background: #1e293b !important; }
+
+    /* Tabellen */
+    thead, th { background: #1e293b !important; color: #94a3b8 !important; border-color: #334155 !important; }
+    td { border-color: #1e293b !important; color: #e2e8f0; }
+    tr:hover td, tr:hover { background: #263548 !important; }
+    tr.status-groen   { background: #064e3b !important; }
+    tr.status-groen:hover  { background: #065f46 !important; }
+    tr.status-oranje  { background: #451a03 !important; }
+    tr.status-oranje:hover { background: #78350f !important; }
+    tr.status-roze    { background: #500724 !important; }
+    tr.status-roze:hover   { background: #701a35 !important; }
+
+    /* Inputs en selects */
+    input, select, textarea {
+        background: #0f172a !important;
+        color: #e2e8f0 !important;
+        border-color: #334155 !important;
+    }
+    input::placeholder { color: #64748b !important; }
+    input:focus, select:focus, textarea:focus {
+        border-color: #6366f1 !important;
+        box-shadow: 0 0 0 3px rgba(99,102,241,0.2) !important;
+    }
+
+    /* Role select inline */
+    .role-select {
+        background: #1e293b !important;
+        color: #e2e8f0 !important;
+        border-color: #334155 !important;
+    }
+
+    /* Modals */
+    .modal { background: #1e293b !important; color: #e2e8f0; }
+    .modal h2 { color: #f1f5f9; }
+
+    /* Knoppen */
+    .btn-secondary { background: #334155 !important; color: #e2e8f0 !important; }
+    .btn-secondary:hover { background: #475569 !important; }
+
+    /* Status selector knoppen (leerkracht tabel) */
+    .status-selector.status-none { background: #1e293b !important; border-color: #475569 !important; color: #64748b !important; }
+
+    /* Stat cards */
+    .stat-card { background: #1e293b !important; }
+
+    /* School card header */
+    .school-card-header { background: #162032 !important; border-color: #334155 !important; }
+    .school-card { border-color: #334155 !important; }
+
+    /* Drop zone */
+    .drop-zone { background: #162032 !important; border-color: #334155 !important; }
+    .drop-zone:hover, .drop-zone.over { background: #1a2744 !important; border-color: #6366f1 !important; }
+
+    /* Domain chips */
+    .domain-chip { background: #1e3a5f !important; border-color: #2563eb !important; color: #93c5fd !important; }
+
+    /* Badges */
+    .leeftijd-badge { background: #334155 !important; color: #94a3b8 !important; }
+    .ebg-begrijpen { color: #1f2937 !important; }
+
+    /* MIA container */
+    .mia-container { background: #162032 !important; }
+    .mia-item { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
+    .mia-item.niet-aanklikbaar { background: #162032 !important; color: #64748b !important; }
+
+    /* Not configured box */
+    .not-configured { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
+    .not-configured code { background: #0f172a !important; color: #a5b4fc !important; }
+
+    /* Profile section */
+    .profile-section { background: #162032 !important; }
+
+    /* Leeftijd checkboxes */
+    .leeftijd-checkbox { border-color: #334155 !important; color: #e2e8f0; }
+    .leeftijd-checkbox:has(input:checked) { background: var(--primary) !important; }
+
+    /* Vak indicator */
+    .vak-indicator { /* gradient blijft, ziet er goed uit */ }
+
+    /* Progress bars achtergrond */
+    .progress-bar { background: #334155 !important; }
+
+    /* Vak card */
+    .vak-card { background: #162032 !important; }
+
+    /* Upload results */
+    .upload-ok  { background: #064e3b !important; border-color: #065f46 !important; }
+    .upload-err { background: #450a0a !important; border-color: #7f1d1d !important; }
+
+    /* Alert boxes */
+    .alert-error   { background: #450a0a !important; border-color: #7f1d1d !important; color: #fca5a5 !important; }
+    .alert-success { background: #064e3b !important; border-color: #065f46 !important; color: #6ee7b7 !important; }
+    .alert-warning { background: #451a03 !important; border-color: #78350f !important; color: #fcd34d !important; }
+    .alert-info    { background: #1e3a5f !important; border-color: #1d4ed8 !important; color: #93c5fd !important; }
+
+    /* Error text */
+    .form-error, #sa-error, #addUser-error { color: #f87171 !important; }
+    .form-hint { color: #64748b !important; }
+
+    /* Superadmin toggle */
+    .superadmin-toggle { border-color: #334155 !important; }
+    .superadmin-toggle button { color: #475569 !important; }
+    .superadmin-toggle button:hover { color: #94a3b8 !important; }
+
+    /* Superadmin form inputs */
+    .superadmin-form label { color: #94a3b8 !important; }
+
+    /* Footer */
+    .footer { color: #64748b !important; }
+    .status-legend { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
+
+    /* Scrollbar (webkit) */
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
+    ::-webkit-scrollbar-track { background: #0f172a; }
+    ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
+    ::-webkit-scrollbar-thumb:hover { background: #475569; }
+}
+</style>
+</head>
+<body>
+<div class="container">
+    <div class="header">
+        <div>
+            <h1>🏫 School ICT Beheer</h1>
+            <div class="school-name" id="schoolName">Laden...</div>
+        </div>
+        <a href="/auth/logout" class="btn btn-light">Uitloggen</a>
+    </div>
+
+    <!-- Statistieken -->
+    <div class="stat-grid" id="statGrid">
+        <div class="stat"><div class="stat-value" id="statTotal">-</div><div class="stat-label">Gebruikers</div></div>
+        <div class="stat"><div class="stat-value" id="statICT">-</div><div class="stat-label">School ICT</div></div>
+        <div class="stat"><div class="stat-value" id="statDir">-</div><div class="stat-label">Directeurs</div></div>
+        <div class="stat"><div class="stat-value" id="statTeach">-</div><div class="stat-label">Leerkrachten</div></div>
+    </div>
+
+    <!-- Gebruikersbeheer -->
+    <div class="section">
+        <div class="section-header">
+            <h2>👥 Gebruikers</h2>
+            <button class="btn btn-primary btn-sm" onclick="openModal()">+ Gebruiker toevoegen</button>
+        </div>
+        <table>
+            <thead>
+                <tr>
+                    <th>Naam</th>
+                    <th>E-mail</th>
+                    <th>Rol</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody id="usersBody">
+                <tr class="empty-row"><td colspan="4">Laden...</td></tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<!-- Modal: gebruiker toevoegen -->
+<div class="modal-overlay" id="addModal">
+    <div class="modal">
+        <h2>Gebruiker toevoegen</h2>
+        <p style="color:var(--gray-500);font-size:.85rem;margin-bottom:1rem;">
+            Het account wordt aangemaakt en geactiveerd bij de eerste Microsoft login.
+            Als het e-mailadres al bestaat wordt het account heractiveerd.
+        </p>
+        <div class="form-group"><label>Voornaam</label><input type="text" id="addFirst"></div>
+        <div class="form-group"><label>Achternaam</label><input type="text" id="addLast"></div>
+        <div class="form-group">
+            <label>E-mailadres (Microsoft account)</label>
+            <input type="email" id="addEmail">
+        </div>
+        <div class="form-group">
+            <label>Rol</label>
+            <select id="addRole">
+                <option value="teacher">Leerkracht — vult leerdoelen in</option>
+                <option value="director">Directeur — leest schooloverzicht</option>
+                <option value="school_ict">School ICT — beheert gebruikers</option>
+            </select>
+        </div>
+        <div class="form-error" id="addError"></div>
+        <div class="modal-buttons">
+            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
+            <button class="btn btn-primary" onclick="addUser()">Toevoegen</button>
+        </div>
+    </div>
+</div>
+
+<div class="notification" id="notification"></div>
+
+<script>
+let mySchoolId = null;
+
+const ROLLEN = [
+    { value: 'teacher',    label: 'Leerkracht' },
+    { value: 'director',   label: 'Directeur'  },
+    { value: 'school_ict', label: 'School ICT' },
+];
+
+document.addEventListener('DOMContentLoaded', async () => {
+    const me = await fetch('/api/me').then(r => r.json());
+    mySchoolId = me.user?.school_id;
+    document.getElementById('schoolName').textContent = me.user?.school_name || '';
+    await loadUsers();
+    await loadKlassen();
+    await loadAuditLog();
+});
+
+async function loadUsers() {
+    if (!mySchoolId) return;
+    const res   = await fetch(`/admin/schools/${mySchoolId}/users`);
+    const data  = await res.json();
+    const users = data.users || [];
+
+    // Stats
+    document.getElementById('statTotal').textContent = users.length;
+    document.getElementById('statICT').textContent   = users.filter(u => u.role === 'school_ict').length;
+    document.getElementById('statDir').textContent   = users.filter(u => u.role === 'director').length;
+    document.getElementById('statTeach').textContent = users.filter(u => u.role === 'teacher').length;
+
+    const tbody = document.getElementById('usersBody');
+    if (!users.length) {
+        tbody.innerHTML = '<tr class="empty-row"><td colspan="4">Nog geen gebruikers</td></tr>';
+        return;
+    }
+
+    tbody.innerHTML = users.map(u => `
+        <tr>
+            <td><strong>${u.full_name}</strong></td>
+            <td style="color:var(--gray-500);font-size:.82rem;">${u.email}</td>
+            <td>
+                <select class="role-select"
+                    onchange="changeRole(${u.id}, this.value, '${u.full_name.replace(/'/g,"\\'")}', this)">
+                    ${ROLLEN.map(r =>
+                        `<option value="${r.value}" ${r.value === u.role ? 'selected' : ''}>${r.label}</option>`
+                    ).join('')}
+                </select>
+            </td>
+            <td>
+                <button class="btn btn-danger btn-sm"
+                    onclick="removeUser(${u.id}, '${u.full_name.replace(/'/g,"\\'")}')">
+                    Verwijderen
+                </button>
+            </td>
+        </tr>`).join('');
+}
+
+async function changeRole(userId, newRole, naam, selectEl) {
+    const res = await fetch(`/admin/schools/${mySchoolId}/users/${userId}/role`, {
+        method:  'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body:    JSON.stringify({ role: newRole }),
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        notify(data.error || 'Wijzigen mislukt', 'error');
+        await loadUsers(); // reset
+        return;
+    }
+    notify(`${naam} is nu ${ROLLEN.find(r => r.value === newRole)?.label}`, 'success');
+    await loadUsers();
+}
+
+async function addUser() {
+    const errEl = document.getElementById('addError');
+    errEl.style.display = 'none';
+    const res = await fetch(`/admin/schools/${mySchoolId}/users`, {
+        method:  'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            email:      document.getElementById('addEmail').value,
+            first_name: document.getElementById('addFirst').value,
+            last_name:  document.getElementById('addLast').value,
+            role:       document.getElementById('addRole').value,
+        }),
+    });
+    const data = await res.json();
+    if (!res.ok) { errEl.textContent = data.error; errEl.style.display = 'block'; return; }
+    closeModal();
+    notify(data.linked ? 'Account heractiveerd en bijgewerkt' : 'Gebruiker toegevoegd', 'success');
+    await loadUsers();
+}
+
+async function removeUser(userId, naam) {
+    if (!confirm(`${naam} verwijderen?`)) return;
+    const res = await fetch(`/admin/schools/${mySchoolId}/users/${userId}`, { method: 'DELETE' });
+    if (!res.ok) { notify('Verwijderen mislukt', 'error'); return; }
+    notify(`${naam} verwijderd`, 'success');
+    await loadUsers();
+}
+
+function openModal() {
+    document.getElementById('addModal').classList.add('active');
+}
+function closeModal() {
+    document.getElementById('addModal').classList.remove('active');
+    document.getElementById('addError').style.display = 'none';
+}
+document.getElementById('addModal').addEventListener('click', e => {
+    if (e.target === document.getElementById('addModal')) closeModal();
+});
+
+function notify(msg, type = 'success') {
+    const el = document.getElementById('notification');
+    el.textContent = msg;
+    el.className   = `notification ${type} show`;
+    setTimeout(() => el.classList.remove('show'), 3500);
+}
+
+// ── Klassen ───────────────────────────────────────────────────────────────────
+let allKlassen = [];
+
+async function loadKlassen() {
+    if (!mySchoolId) return;
+    const res  = await fetch(`/admin/schools/${mySchoolId}/classes`);
+    const data = await res.json();
+    allKlassen = data.classes || [];
+
+    const container = document.getElementById('klassenList');
+    if (!allKlassen.length) {
+        container.innerHTML = '<p style="color:var(--gray-400);font-style:italic;">Nog geen klassen aangemaakt.</p>';
+        return;
+    }
+
+    container.innerHTML = `
+        <table>
+            <thead><tr><th>Klas</th><th>Leerkrachten</th><th></th></tr></thead>
+            <tbody>
+                ${allKlassen.map(c => `
+                    <tr>
+                        <td><strong>${c.name}</strong></td>
+                        <td style="font-size:.85rem;color:var(--gray-500);">
+                            ${c.teachers?.length
+                                ? c.teachers.map(t => t.full_name).join(', ')
+                                : '<em>Geen leerkracht gekoppeld</em>'}
+                        </td>
+                        <td style="white-space:nowrap;">
+                            <button class="btn btn-secondary btn-sm" onclick="openAssignTeachers(${c.id}, '${c.name.replace(/'/g,"\'")}', ${JSON.stringify(c.teachers?.map(t=>t.id)||[])})">
+                                Leerkrachten
+                            </button>
+                            <button class="btn btn-danger btn-sm" onclick="deleteKlas(${c.id}, '${c.name.replace(/'/g,"\'")}')">
+                                ×
+                            </button>
+                        </td>
+                    </tr>`).join('')}
+            </tbody>
+        </table>`;
+}
+
+async function openAddKlas() {
+    const name = prompt('Naam van de nieuwe klas (bv. 3A):');
+    if (!name?.trim()) return;
+    const res = await fetch(`/admin/schools/${mySchoolId}/classes`, {
+        method: 'POST', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ name: name.trim() })
+    });
+    const data = await res.json();
+    if (!res.ok) { notify(data.error || 'Aanmaken mislukt', 'error'); return; }
+    notify(`Klas ${name} aangemaakt`, 'success');
+    await loadKlassen();
+}
+
+async function deleteKlas(classId, name) {
+    if (!confirm(`Klas "${name}" verwijderen? Leerkrachtkoppelingen worden ook verwijderd.`)) return;
+    const res = await fetch(`/admin/schools/${mySchoolId}/classes/${classId}`, { method: 'DELETE' });
+    if (!res.ok) { notify('Verwijderen mislukt', 'error'); return; }
+    notify(`Klas ${name} verwijderd`, 'success');
+    await loadKlassen();
+}
+
+// Assign modal voor leerkrachten aan klas
+let assignClassId = null;
+async function openAssignTeachers(classId, className, currentTeacherIds) {
+    assignClassId = classId;
+    const teachers = await fetch(`/admin/schools/${mySchoolId}/users`)
+        .then(r => r.json()).then(d => d.users?.filter(u => u.role === 'teacher') || []);
+
+    const html = `
+        <div style="position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;" id="assignModal">
+            <div style="background:white;border-radius:12px;padding:1.5rem;max-width:400px;width:90%;">
+                <h3 style="margin-bottom:1rem;">Leerkrachten voor klas ${className}</h3>
+                <div style="max-height:250px;overflow-y:auto;display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem;">
+                    ${teachers.length
+                        ? teachers.map(t => `
+                            <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+                                <input type="checkbox" value="${t.id}" ${currentTeacherIds.includes(t.id) ? 'checked' : ''}>
+                                ${t.full_name} <span style="font-size:.75rem;color:gray;">(${t.email})</span>
+                            </label>`).join('')
+                        : '<em style="color:gray;">Geen leerkrachten beschikbaar</em>'}
+                </div>
+                <div style="display:flex;gap:.5rem;justify-content:flex-end;">
+                    <button onclick="document.getElementById('assignModal').remove()" class="btn btn-secondary">Annuleren</button>
+                    <button onclick="saveAssignTeachers()" class="btn btn-primary">Opslaan</button>
+                </div>
+            </div>
+        </div>`;
+    document.body.insertAdjacentHTML('beforeend', html);
+}
+
+async function saveAssignTeachers() {
+    const ids = [...document.querySelectorAll('#assignModal input:checked')].map(i => parseInt(i.value));
+    const res = await fetch(`/admin/schools/${mySchoolId}/classes/${assignClassId}/teachers`, {
+        method: 'PUT', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ user_ids: ids })
+    });
+    document.getElementById('assignModal')?.remove();
+    if (!res.ok) { notify('Opslaan mislukt', 'error'); return; }
+    notify('Leerkrachten bijgewerkt', 'success');
+    await loadKlassen();
+}
+
+// ── Auditlog ──────────────────────────────────────────────────────────────────
+let auditPage = 1;
+
+async function loadAuditLog(page = 1) {
+    auditPage = page;
+    const category = document.getElementById('auditCategory').value;
+    const search   = document.getElementById('auditSearch').value;
+    const params   = new URLSearchParams({ page, per_page: 25 });
+    if (category) params.set('category', category);
+    if (search)   params.set('search', search);
+
+    const res  = await fetch(`/api/audit-log?${params}`);
+    if (!res.ok) return;
+    const data = await res.json();
+
+    const tbody = document.getElementById('auditTable');
+    if (!data.entries.length) {
+        tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--gray-400);">Geen entries gevonden</td></tr>';
+    } else {
+        tbody.innerHTML = data.entries.map(e => {
+            const ts   = new Date(e.timestamp).toLocaleString('nl-BE', {day:'2-digit',month:'2-digit',year:'2-digit',hour:'2-digit',minute:'2-digit'});
+            const detail = e.detail ? (() => { try { return Object.entries(JSON.parse(e.detail)).map(([k,v]) => `<span style="font-size:.75rem;background:var(--gray-100);padding:.1rem .3rem;border-radius:3px;">${k}: ${v}</span>`).join(' '); } catch { return e.detail; } })() : '';
+            return `<tr>
+                <td style="white-space:nowrap;font-size:.8rem;">${ts}</td>
+                <td style="font-size:.82rem;">${e.user_name || '—'}</td>
+                <td><code style="font-size:.78rem;background:var(--gray-100);padding:.15rem .35rem;border-radius:3px;">${e.action}</code></td>
+                <td style="font-size:.8rem;">${detail}</td>
+                <td style="font-size:.75rem;color:var(--gray-400);">${e.ip_address || ''}</td>
+            </tr>`;
+        }).join('');
+    }
+
+    // Paginering
+    const pager = document.getElementById('auditPager');
+    if (data.pages <= 1) { pager.innerHTML = ''; return; }
+    pager.innerHTML = Array.from({length: data.pages}, (_, i) => `
+        <button onclick="loadAuditLog(${i+1})"
+            style="padding:.3rem .6rem;border:1px solid var(--gray-300);border-radius:4px;cursor:pointer;
+                   ${i+1 === data.page ? 'background:var(--primary);color:white;border-color:var(--primary);' : ''}">
+            ${i+1}
+        </button>`).join('');
+}
+</script>
+</body>
+</html>
diff --git a/backend/templates/setup.html b/backend/templates/setup.html
new file mode 100644
index 0000000..e412891
--- /dev/null
+++ b/backend/templates/setup.html
@@ -0,0 +1,282 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Eerste Setup - Leerdoelen Tracker</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: #f3f4f6;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .card {
+            background: white;
+            border-radius: 12px;
+            padding: 2.5rem;
+            width: 100%;
+            max-width: 480px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+        }
+        .logo { text-align: center; margin-bottom: 1.5rem; }
+        .logo h1 { font-size: 1.5rem; color: #1f2937; }
+        .setup-info {
+            background: #eff6ff;
+            border: 1px solid #bfdbfe;
+            border-radius: 8px;
+            padding: 1rem;
+            margin-bottom: 1.5rem;
+            font-size: 0.9rem;
+            color: #1e40af;
+        }
+        .form-group { margin-bottom: 1.25rem; }
+        label {
+            display: block;
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: #374151;
+            margin-bottom: 0.4rem;
+        }
+        input {
+            width: 100%;
+            padding: 0.65rem 0.85rem;
+            border: 1px solid #d1d5db;
+            border-radius: 6px;
+            font-size: 0.95rem;
+        }
+        input:focus {
+            outline: none;
+            border-color: #4f46e5;
+            box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
+        }
+        .btn-primary {
+            width: 100%;
+            padding: 0.75rem;
+            background: #4f46e5;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+        }
+        .btn-primary:hover { background: #4338ca; }
+        .alert-error {
+            padding: 0.75rem 1rem;
+            border-radius: 6px;
+            margin-bottom: 1rem;
+            font-size: 0.9rem;
+            background: #fef2f2;
+            color: #dc2626;
+            border: 1px solid #fecaca;
+            display: none;
+        }
+    
+@media (prefers-color-scheme: dark) {
+    :root {
+        --gray-50:  #1a1a2e;
+        --gray-100: #16213e;
+        --gray-200: #0f3460;
+        --gray-300: #1a1a3e;
+        --gray-400: #6b7280;
+        --gray-500: #9ca3af;
+        --gray-600: #d1d5db;
+        --gray-700: #e5e7eb;
+        --gray-800: #f3f4f6;
+        --gray-900: #f9fafb;
+    }
+
+    body { background: #0f172a; color: #e2e8f0; }
+
+    /* Kaarten en secties */
+    .card, .section, .stat-card, .school-card,
+    .table-container, .filters-container, .legend-container,
+    .stats-bar .stat-card, .stats-overview, .vak-stats,
+    .import-section, .detail-section, .filters-bar,
+    .header:not([class*="gradient"]) {
+        background: #1e293b !important;
+        border-color: #334155 !important;
+    }
+
+    /* Header kaart in leerkracht.html */
+    .header { background: #1e293b !important; }
+
+    /* Tabellen */
+    thead, th { background: #1e293b !important; color: #94a3b8 !important; border-color: #334155 !important; }
+    td { border-color: #1e293b !important; color: #e2e8f0; }
+    tr:hover td, tr:hover { background: #263548 !important; }
+    tr.status-groen   { background: #064e3b !important; }
+    tr.status-groen:hover  { background: #065f46 !important; }
+    tr.status-oranje  { background: #451a03 !important; }
+    tr.status-oranje:hover { background: #78350f !important; }
+    tr.status-roze    { background: #500724 !important; }
+    tr.status-roze:hover   { background: #701a35 !important; }
+
+    /* Inputs en selects */
+    input, select, textarea {
+        background: #0f172a !important;
+        color: #e2e8f0 !important;
+        border-color: #334155 !important;
+    }
+    input::placeholder { color: #64748b !important; }
+    input:focus, select:focus, textarea:focus {
+        border-color: #6366f1 !important;
+        box-shadow: 0 0 0 3px rgba(99,102,241,0.2) !important;
+    }
+
+    /* Role select inline */
+    .role-select {
+        background: #1e293b !important;
+        color: #e2e8f0 !important;
+        border-color: #334155 !important;
+    }
+
+    /* Modals */
+    .modal { background: #1e293b !important; color: #e2e8f0; }
+    .modal h2 { color: #f1f5f9; }
+
+    /* Knoppen */
+    .btn-secondary { background: #334155 !important; color: #e2e8f0 !important; }
+    .btn-secondary:hover { background: #475569 !important; }
+
+    /* Status selector knoppen (leerkracht tabel) */
+    .status-selector.status-none { background: #1e293b !important; border-color: #475569 !important; color: #64748b !important; }
+
+    /* Stat cards */
+    .stat-card { background: #1e293b !important; }
+
+    /* School card header */
+    .school-card-header { background: #162032 !important; border-color: #334155 !important; }
+    .school-card { border-color: #334155 !important; }
+
+    /* Drop zone */
+    .drop-zone { background: #162032 !important; border-color: #334155 !important; }
+    .drop-zone:hover, .drop-zone.over { background: #1a2744 !important; border-color: #6366f1 !important; }
+
+    /* Domain chips */
+    .domain-chip { background: #1e3a5f !important; border-color: #2563eb !important; color: #93c5fd !important; }
+
+    /* Badges */
+    .leeftijd-badge { background: #334155 !important; color: #94a3b8 !important; }
+    .ebg-begrijpen { color: #1f2937 !important; }
+
+    /* MIA container */
+    .mia-container { background: #162032 !important; }
+    .mia-item { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
+    .mia-item.niet-aanklikbaar { background: #162032 !important; color: #64748b !important; }
+
+    /* Not configured box */
+    .not-configured { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
+    .not-configured code { background: #0f172a !important; color: #a5b4fc !important; }
+
+    /* Profile section */
+    .profile-section { background: #162032 !important; }
+
+    /* Leeftijd checkboxes */
+    .leeftijd-checkbox { border-color: #334155 !important; color: #e2e8f0; }
+    .leeftijd-checkbox:has(input:checked) { background: var(--primary) !important; }
+
+    /* Vak indicator */
+    .vak-indicator { /* gradient blijft, ziet er goed uit */ }
+
+    /* Progress bars achtergrond */
+    .progress-bar { background: #334155 !important; }
+
+    /* Vak card */
+    .vak-card { background: #162032 !important; }
+
+    /* Upload results */
+    .upload-ok  { background: #064e3b !important; border-color: #065f46 !important; }
+    .upload-err { background: #450a0a !important; border-color: #7f1d1d !important; }
+
+    /* Alert boxes */
+    .alert-error   { background: #450a0a !important; border-color: #7f1d1d !important; color: #fca5a5 !important; }
+    .alert-success { background: #064e3b !important; border-color: #065f46 !important; color: #6ee7b7 !important; }
+    .alert-warning { background: #451a03 !important; border-color: #78350f !important; color: #fcd34d !important; }
+    .alert-info    { background: #1e3a5f !important; border-color: #1d4ed8 !important; color: #93c5fd !important; }
+
+    /* Error text */
+    .form-error, #sa-error, #addUser-error { color: #f87171 !important; }
+    .form-hint { color: #64748b !important; }
+
+    /* Superadmin toggle */
+    .superadmin-toggle { border-color: #334155 !important; }
+    .superadmin-toggle button { color: #475569 !important; }
+    .superadmin-toggle button:hover { color: #94a3b8 !important; }
+
+    /* Superadmin form inputs */
+    .superadmin-form label { color: #94a3b8 !important; }
+
+    /* Footer */
+    .footer { color: #64748b !important; }
+    .status-legend { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
+
+    /* Scrollbar (webkit) */
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
+    ::-webkit-scrollbar-track { background: #0f172a; }
+    ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
+    ::-webkit-scrollbar-thumb:hover { background: #475569; }
+}
+</style>
+</head>
+<body>
+    <div class="card">
+        <div class="logo">
+            <h1>📚 Leerdoelen Tracker</h1>
+        </div>
+
+        <div class="setup-info">
+            <strong>🔧 Eerste installatie</strong><br>
+            Stel een wachtwoord in voor het superadmin account.
+            Dit scherm verdwijnt na de eerste keer.
+        </div>
+
+        <div class="alert-error" id="error-msg"></div>
+
+        <form id="setupForm">
+            <div class="form-group">
+                <label>Admin e-mailadres</label>
+                <input type="text" value="admin@leerdoelen.local" disabled>
+            </div>
+            <div class="form-group">
+                <label for="password">Wachtwoord (min. 12 tekens)</label>
+                <input type="password" id="password" required minlength="12">
+            </div>
+            <div class="form-group">
+                <label for="confirm">Bevestig wachtwoord</label>
+                <input type="password" id="confirm" required minlength="12">
+            </div>
+            <button type="submit" class="btn-primary">Setup voltooien</button>
+        </form>
+    </div>
+
+    <script>
+        document.getElementById('setupForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const errorEl = document.getElementById('error-msg');
+            errorEl.style.display = 'none';
+
+            const res = await fetch('/auth/setup', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    password: document.getElementById('password').value,
+                    confirm:  document.getElementById('confirm').value
+                })
+            });
+
+            const data = await res.json();
+            if (res.ok) {
+                window.location.href = data.redirect || '/auth/login';
+            } else {
+                errorEl.textContent   = data.error;
+                errorEl.style.display = 'block';
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/backend/templates/superadmin_login.html b/backend/templates/superadmin_login.html
new file mode 100644
index 0000000..ce24c7c
--- /dev/null
+++ b/backend/templates/superadmin_login.html
@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Platformbeheerder - Leerdoelen Tracker</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .card {
+            background: white;
+            border-radius: 16px;
+            padding: 2.5rem;
+            width: 100%;
+            max-width: 380px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+        }
+        .logo { text-align: center; margin-bottom: 2rem; }
+        .logo .icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
+        .logo h1 { font-size: 1.2rem; color: #1f2937; font-weight: 700; }
+        .logo p { color: #6b7280; font-size: 0.82rem; margin-top: 0.25rem; }
+        .form-group { margin-bottom: 1rem; }
+        .form-group label {
+            display: block; font-size: 0.82rem; font-weight: 600;
+            color: #374151; margin-bottom: 0.35rem;
+        }
+        .form-group input {
+            width: 100%; padding: 0.65rem 0.85rem;
+            border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.95rem;
+        }
+        .form-group input:focus {
+            outline: none; border-color: #4f46e5;
+            box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
+        }
+        .btn {
+            width: 100%; padding: 0.75rem;
+            background: #1f2937; color: white;
+            border: none; border-radius: 8px;
+            font-size: 0.95rem; font-weight: 600;
+            cursor: pointer; transition: background 0.2s;
+            margin-top: 0.5rem;
+        }
+        .btn:hover { background: #111827; }
+        .error {
+            background: #fef2f2; color: #dc2626;
+            border: 1px solid #fecaca; border-radius: 6px;
+            padding: 0.75rem; font-size: 0.85rem;
+            margin-bottom: 1rem; display: none;
+        }
+        .flash {
+            padding: 0.75rem; border-radius: 6px;
+            margin-bottom: 1rem; font-size: 0.85rem;
+        }
+        .flash-error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
+        .flash-success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
+        .back-link {
+            display: block; text-align: center; margin-top: 1.25rem;
+            color: #9ca3af; font-size: 0.8rem; text-decoration: none;
+        }
+        .back-link:hover { color: #6b7280; }
+    
+@media (prefers-color-scheme: dark) {
+    :root {
+        --gray-50:  #1a1a2e;
+        --gray-100: #16213e;
+        --gray-200: #0f3460;
+        --gray-300: #1a1a3e;
+        --gray-400: #6b7280;
+        --gray-500: #9ca3af;
+        --gray-600: #d1d5db;
+        --gray-700: #e5e7eb;
+        --gray-800: #f3f4f6;
+        --gray-900: #f9fafb;
+    }
+
+    body { background: #0f172a; color: #e2e8f0; }
+
+    /* Kaarten en secties */
+    .card, .section, .stat-card, .school-card,
+    .table-container, .filters-container, .legend-container,
+    .stats-bar .stat-card, .stats-overview, .vak-stats,
+    .import-section, .detail-section, .filters-bar,
+    .header:not([class*="gradient"]) {
+        background: #1e293b !important;
+        border-color: #334155 !important;
+    }
+
+    /* Header kaart in leerkracht.html */
+    .header { background: #1e293b !important; }
+
+    /* Tabellen */
+    thead, th { background: #1e293b !important; color: #94a3b8 !important; border-color: #334155 !important; }
+    td { border-color: #1e293b !important; color: #e2e8f0; }
+    tr:hover td, tr:hover { background: #263548 !important; }
+    tr.status-groen   { background: #064e3b !important; }
+    tr.status-groen:hover  { background: #065f46 !important; }
+    tr.status-oranje  { background: #451a03 !important; }
+    tr.status-oranje:hover { background: #78350f !important; }
+    tr.status-roze    { background: #500724 !important; }
+    tr.status-roze:hover   { background: #701a35 !important; }
+
+    /* Inputs en selects */
+    input, select, textarea {
+        background: #0f172a !important;
+        color: #e2e8f0 !important;
+        border-color: #334155 !important;
+    }
+    input::placeholder { color: #64748b !important; }
+    input:focus, select:focus, textarea:focus {
+        border-color: #6366f1 !important;
+        box-shadow: 0 0 0 3px rgba(99,102,241,0.2) !important;
+    }
+
+    /* Role select inline */
+    .role-select {
+        background: #1e293b !important;
+        color: #e2e8f0 !important;
+        border-color: #334155 !important;
+    }
+
+    /* Modals */
+    .modal { background: #1e293b !important; color: #e2e8f0; }
+    .modal h2 { color: #f1f5f9; }
+
+    /* Knoppen */
+    .btn-secondary { background: #334155 !important; color: #e2e8f0 !important; }
+    .btn-secondary:hover { background: #475569 !important; }
+
+    /* Status selector knoppen (leerkracht tabel) */
+    .status-selector.status-none { background: #1e293b !important; border-color: #475569 !important; color: #64748b !important; }
+
+    /* Stat cards */
+    .stat-card { background: #1e293b !important; }
+
+    /* School card header */
+    .school-card-header { background: #162032 !important; border-color: #334155 !important; }
+    .school-card { border-color: #334155 !important; }
+
+    /* Drop zone */
+    .drop-zone { background: #162032 !important; border-color: #334155 !important; }
+    .drop-zone:hover, .drop-zone.over { background: #1a2744 !important; border-color: #6366f1 !important; }
+
+    /* Domain chips */
+    .domain-chip { background: #1e3a5f !important; border-color: #2563eb !important; color: #93c5fd !important; }
+
+    /* Badges */
+    .leeftijd-badge { background: #334155 !important; color: #94a3b8 !important; }
+    .ebg-begrijpen { color: #1f2937 !important; }
+
+    /* MIA container */
+    .mia-container { background: #162032 !important; }
+    .mia-item { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
+    .mia-item.niet-aanklikbaar { background: #162032 !important; color: #64748b !important; }
+
+    /* Not configured box */
+    .not-configured { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
+    .not-configured code { background: #0f172a !important; color: #a5b4fc !important; }
+
+    /* Profile section */
+    .profile-section { background: #162032 !important; }
+
+    /* Leeftijd checkboxes */
+    .leeftijd-checkbox { border-color: #334155 !important; color: #e2e8f0; }
+    .leeftijd-checkbox:has(input:checked) { background: var(--primary) !important; }
+
+    /* Vak indicator */
+    .vak-indicator { /* gradient blijft, ziet er goed uit */ }
+
+    /* Progress bars achtergrond */
+    .progress-bar { background: #334155 !important; }
+
+    /* Vak card */
+    .vak-card { background: #162032 !important; }
+
+    /* Upload results */
+    .upload-ok  { background: #064e3b !important; border-color: #065f46 !important; }
+    .upload-err { background: #450a0a !important; border-color: #7f1d1d !important; }
+
+    /* Alert boxes */
+    .alert-error   { background: #450a0a !important; border-color: #7f1d1d !important; color: #fca5a5 !important; }
+    .alert-success { background: #064e3b !important; border-color: #065f46 !important; color: #6ee7b7 !important; }
+    .alert-warning { background: #451a03 !important; border-color: #78350f !important; color: #fcd34d !important; }
+    .alert-info    { background: #1e3a5f !important; border-color: #1d4ed8 !important; color: #93c5fd !important; }
+
+    /* Error text */
+    .form-error, #sa-error, #addUser-error { color: #f87171 !important; }
+    .form-hint { color: #64748b !important; }
+
+    /* Superadmin toggle */
+    .superadmin-toggle { border-color: #334155 !important; }
+    .superadmin-toggle button { color: #475569 !important; }
+    .superadmin-toggle button:hover { color: #94a3b8 !important; }
+
+    /* Superadmin form inputs */
+    .superadmin-form label { color: #94a3b8 !important; }
+
+    /* Footer */
+    .footer { color: #64748b !important; }
+    .status-legend { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
+
+    /* Scrollbar (webkit) */
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
+    ::-webkit-scrollbar-track { background: #0f172a; }
+    ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
+    ::-webkit-scrollbar-thumb:hover { background: #475569; }
+}
+</style>
+</head>
+<body>
+    <div class="card">
+        <div class="logo">
+            <div class="icon">⚙️</div>
+            <h1>Platformbeheerder</h1>
+            <p>Leerdoelen Tracker — beheerderstoegang</p>
+        </div>
+
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% for category, message in messages %}
+                <div class="flash flash-{{ category }}">{{ message }}</div>
+            {% endfor %}
+        {% endwith %}
+
+        <div class="error" id="errorMsg"></div>
+
+        <div class="form-group">
+            <label>E-mailadres</label>
+            <input type="email" id="email" value="admin@leerdoelen.local"
+                   autocomplete="username" autofocus>
+        </div>
+        <div class="form-group">
+            <label>Wachtwoord</label>
+            <input type="password" id="password" autocomplete="current-password">
+        </div>
+        <button class="btn" onclick="doLogin()">Inloggen</button>
+
+        <a href="/auth/login" class="back-link">← Terug naar normale loginpagina</a>
+    </div>
+
+    <script>
+        document.getElementById('password').addEventListener('keydown', e => {
+            if (e.key === 'Enter') doLogin();
+        });
+
+        async function doLogin() {
+            const errorEl = document.getElementById('errorMsg');
+            errorEl.style.display = 'none';
+
+            const res = await fetch('/auth/superadmin-login', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    email:    document.getElementById('email').value,
+                    password: document.getElementById('password').value,
+                })
+            });
+
+            const data = await res.json();
+            if (res.ok) {
+                window.location.href = data.redirect || '/dashboard';
+            } else {
+                errorEl.textContent   = data.error || 'Inloggen mislukt';
+                errorEl.style.display = 'block';
+            }
+        }
+    </script>
+</body>
+</html>
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..4a75a33
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,55 @@
+version: '3.9'
+
+services:
+  db:
+    image: postgres:16-alpine
+    container_name: leerdoelen_db
+    restart: unless-stopped
+    environment:
+      POSTGRES_DB: ${POSTGRES_DB:-leerdoelen}
+      POSTGRES_USER: ${POSTGRES_USER:-leerdoelen}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+      - ./postgres/init.sql:/docker-entrypoint-initdb.d/init.sql
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-leerdoelen}"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  backend:
+    # In productie: image uit de Gitea registry (gezet door CI/CD pipeline)
+    # Lokaal ontwikkelen: verander naar 'build: ./backend'
+    image: ${BACKEND_IMAGE:-leerdoelen-backend:local}
+    build:
+      context: ./backend
+      # 'build' wordt genegeerd als 'image' al bestaat in de registry.
+      # Gebruik 'docker compose build' om lokaal te (her)bouwen.
+    container_name: leerdoelen_backend
+    restart: unless-stopped
+    environment:
+      DATABASE_URL: postgresql://${POSTGRES_USER:-leerdoelen}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB:-leerdoelen}
+      SECRET_KEY: ${SECRET_KEY}
+      FLASK_ENV: ${FLASK_ENV:-production}
+      FLASK_APP: app.py
+      # OAuth2 - later in te vullen
+      MICROSOFT_CLIENT_ID: ${MICROSOFT_CLIENT_ID:-}
+      MICROSOFT_CLIENT_SECRET: ${MICROSOFT_CLIENT_SECRET:-}
+      GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID:-}
+      GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET:-}
+      BASE_URL: ${BASE_URL:-http://localhost}
+      ORG_NAME: ${ORG_NAME:-GO! Scholengroep}
+    volumes:
+      - ./doelen:/app/doelen:ro   # JSON doelen bestanden (read-only)
+    ports:
+      - "127.0.0.1:${APP_PORT:-5000}:5000"
+    depends_on:
+      db:
+        condition: service_healthy
+
+  # Nginx container verwijderd — SSL offloading gebeurt door de host nginx.
+  # Flask is bereikbaar op 127.0.0.1:${APP_PORT} van de host.
+
+volumes:
+  postgres_data:
diff --git a/doelen/.gitkeep b/doelen/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/migrate.sh b/migrate.sh
new file mode 100755
index 0000000..d155a8c
--- /dev/null
+++ b/migrate.sh
@@ -0,0 +1,43 @@
+#!/bin/bash
+# ══════════════════════════════════════════════════════════════════════════════
+# Flask-Migrate helper
+# Gebruik: ./migrate.sh [init|migrate|upgrade|history|current]
+#
+# Draait de migratie commando's BINNEN de backend container.
+# Zorg dat de containers draaien: docker compose up -d
+# ══════════════════════════════════════════════════════════════════════════════
+
+CONTAINER="leerdoelen_backend"
+CMD=${1:-upgrade}
+MSG=${2:-"auto migration"}
+
+case "$CMD" in
+  init)
+    echo "→ Initialiseer migrations/ map (eenmalig)"
+    docker exec $CONTAINER flask db init
+    ;;
+  migrate)
+    echo "→ Genereer nieuwe migratie: '$MSG'"
+    docker exec $CONTAINER flask db migrate -m "$MSG"
+    echo ""
+    echo "⚠ Controleer de gegenereerde migratie in migrations/versions/ voor je upgrade!"
+    ;;
+  upgrade)
+    echo "→ Voer alle openstaande migraties uit"
+    docker exec $CONTAINER flask db upgrade
+    ;;
+  downgrade)
+    echo "→ Zet één stap terug"
+    docker exec $CONTAINER flask db downgrade
+    ;;
+  history)
+    docker exec $CONTAINER flask db history
+    ;;
+  current)
+    docker exec $CONTAINER flask db current
+    ;;
+  *)
+    echo "Gebruik: ./migrate.sh [init|migrate 'beschrijving'|upgrade|downgrade|history|current]"
+    exit 1
+    ;;
+esac
diff --git a/nginx/nginx.conf b/nginx/nginx.conf
new file mode 100644
index 0000000..17fd5e7
--- /dev/null
+++ b/nginx/nginx.conf
@@ -0,0 +1,63 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    # Logging
+    access_log /var/log/nginx/access.log;
+    error_log  /var/log/nginx/error.log;
+
+    # Gzip
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
+
+    # Rate limiting
+    limit_req_zone $binary_remote_addr zone=login:10m rate=10r/m;
+    limit_req_zone $binary_remote_addr zone=api:10m   rate=60r/m;
+
+    upstream flask {
+        server backend:5000;
+    }
+
+    server {
+        listen 80;
+        server_name _;
+
+        # Security headers
+        add_header X-Frame-Options       "SAMEORIGIN"   always;
+        add_header X-Content-Type-Options "nosniff"      always;
+        add_header X-XSS-Protection      "1; mode=block" always;
+
+        client_max_body_size 10M;
+
+        # Rate limiting op login
+        location /auth/login {
+            limit_req zone=login burst=5 nodelay;
+            proxy_pass         http://flask;
+            proxy_set_header   Host $host;
+            proxy_set_header   X-Real-IP $remote_addr;
+            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+        }
+
+        # Rate limiting op API
+        location /api/ {
+            limit_req zone=api burst=20 nodelay;
+            proxy_pass         http://flask;
+            proxy_set_header   Host $host;
+            proxy_set_header   X-Real-IP $remote_addr;
+            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+        }
+
+        # Alle andere requests
+        location / {
+            proxy_pass         http://flask;
+            proxy_set_header   Host $host;
+            proxy_set_header   X-Real-IP $remote_addr;
+            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_read_timeout 60s;
+        }
+    }
+}
diff --git a/nginx/proxy-params.conf b/nginx/proxy-params.conf
new file mode 100644
index 0000000..a8dd1cc
--- /dev/null
+++ b/nginx/proxy-params.conf
@@ -0,0 +1,10 @@
+# /etc/nginx/snippets/proxy-params.conf
+# Herbruikbaar snippet voor proxy headers.
+# Aanmaken met: sudo nano /etc/nginx/snippets/proxy-params.conf
+
+proxy_set_header Host               $host;
+proxy_set_header X-Real-IP          $remote_addr;
+proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
+proxy_set_header X-Forwarded-Proto  $scheme;
+proxy_http_version                  1.1;
+proxy_set_header Connection         "";
diff --git a/nginx/vhost-host.conf b/nginx/vhost-host.conf
new file mode 100644
index 0000000..49d9387
--- /dev/null
+++ b/nginx/vhost-host.conf
@@ -0,0 +1,24 @@
+# /etc/nginx/sites-available/leerdoelen
+#
+# Vereisten op de host:
+#   certbot --nginx -d leerdoelen.jouwdomein.be
+# Of als je al een wildcard cert hebt, pas ssl_certificate paden aan.
+
+server {
+    listen 80;
+    server_name leerdoelen.jouwdomein.be;
+
+    # Certbot voegt hier automatisch de SSL redirect en het 443 blok aan toe.
+    # Voer daarna uit: certbot --nginx -d leerdoelen.jouwdomein.be
+
+    access_log /var/log/nginx/leerdoelen.access.log;
+    error_log  /var/log/nginx/leerdoelen.error.log;
+
+    location / {
+        proxy_pass         http://127.0.0.1:5000;
+        include            /etc/nginx/snippets/proxy-params.conf;
+
+        client_max_body_size 10M;
+        proxy_read_timeout   60s;
+    }
+}
diff --git a/postgres/init.sql b/postgres/init.sql
new file mode 100644
index 0000000..b482e03
--- /dev/null
+++ b/postgres/init.sql
@@ -0,0 +1,129 @@
+-- ================================================
+-- LEERDOELEN TRACKER - DATABASE SCHEMA
+-- ================================================
+
+-- Scholengroep scholen
+CREATE TABLE schools (
+    id              SERIAL PRIMARY KEY,
+    name            VARCHAR(255) NOT NULL,
+    slug            VARCHAR(100) NOT NULL UNIQUE,
+    -- Eén of meerdere e-maildomeinen gekoppeld aan deze school
+    -- bv. '{"dekrekel.be", "sintjan.gent.be"}'
+    email_domains   TEXT[]       NOT NULL DEFAULT '{}',
+    created_at      TIMESTAMP DEFAULT NOW()
+);
+
+-- Gebruikers
+-- Rollen:
+--   superadmin       → ontwikkelaar/beheerder van het platform
+--   scholengroep_ict → maakt scholen aan, wijst directeurs en school_ict toe
+--   school_ict       → beheert klassen en leerkrachten van één school
+--   director         → leest overzicht van zijn school, geen beheer
+--   teacher          → vult leerdoelen in
+CREATE TABLE users (
+    id              SERIAL PRIMARY KEY,
+    email           VARCHAR(255) NOT NULL UNIQUE,
+    password_hash   VARCHAR(255),               -- enkel voor superadmin fallback
+    first_name      VARCHAR(100),
+    last_name       VARCHAR(100),
+    role            VARCHAR(20) NOT NULL DEFAULT 'teacher'
+                    CHECK (role IN ('superadmin', 'scholengroep_ict', 'school_ict', 'director', 'teacher')),
+    school_id       INTEGER REFERENCES schools(id) ON DELETE SET NULL,
+    is_active       BOOLEAN DEFAULT TRUE,
+    created_at      TIMESTAMP DEFAULT NOW(),
+    last_login      TIMESTAMP,
+    -- Entra / OAuth2
+    oauth_provider  VARCHAR(20),               -- 'microsoft' | NULL
+    oauth_id        VARCHAR(255),              -- Entra object ID (oid claim)
+    entra_tenant_id VARCHAR(255)               -- tenant van de gebruiker
+);
+
+CREATE INDEX idx_users_school ON users(school_id);
+CREATE INDEX idx_users_email ON users(email);
+
+-- School jaar (om data per jaar bij te houden)
+CREATE TABLE school_years (
+    id          SERIAL PRIMARY KEY,
+    school_id   INTEGER NOT NULL REFERENCES schools(id) ON DELETE CASCADE,
+    label       VARCHAR(20) NOT NULL,           -- bv. "2024-2025"
+    is_active   BOOLEAN DEFAULT TRUE,
+    created_at  TIMESTAMP DEFAULT NOW(),
+    UNIQUE(school_id, label)
+);
+
+-- Klassen per school per jaar
+CREATE TABLE classes (
+    id              SERIAL PRIMARY KEY,
+    school_id       INTEGER NOT NULL REFERENCES schools(id) ON DELETE CASCADE,
+    school_year_id  INTEGER NOT NULL REFERENCES school_years(id) ON DELETE CASCADE,
+    name            VARCHAR(50) NOT NULL,       -- bv. "3A", "4B"
+    created_at      TIMESTAMP DEFAULT NOW(),
+    UNIQUE(school_id, school_year_id, name)
+);
+
+-- Koppeling leerkracht aan klas (een leerkracht kan meerdere klassen hebben)
+CREATE TABLE teacher_classes (
+    user_id     INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    class_id    INTEGER NOT NULL REFERENCES classes(id) ON DELETE CASCADE,
+    PRIMARY KEY (user_id, class_id)
+);
+
+-- Beoordelingen van leerdoelen
+CREATE TABLE assessments (
+    id              SERIAL PRIMARY KEY,
+    user_id         INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    school_id       INTEGER NOT NULL REFERENCES schools(id) ON DELETE CASCADE,
+    school_year_id  INTEGER NOT NULL REFERENCES school_years(id) ON DELETE CASCADE,
+    vak_id          VARCHAR(50) NOT NULL,       -- bv. "wiskunde", "nederlands"
+    goal_id         VARCHAR(50) NOT NULL,       -- GO! nummer, bv. "WIS.L4.01"
+    status          VARCHAR(10) NOT NULL
+                    CHECK (status IN ('groen', 'oranje', 'roze')),
+    updated_at      TIMESTAMP DEFAULT NOW(),
+    UNIQUE(user_id, school_year_id, vak_id, goal_id)
+);
+
+CREATE INDEX idx_assessments_school_year ON assessments(school_id, school_year_id);
+CREATE INDEX idx_assessments_user ON assessments(user_id);
+CREATE INDEX idx_assessments_vak ON assessments(vak_id);
+
+-- Audit log (wie heeft wat gewijzigd)
+CREATE TABLE audit_log (
+    id          SERIAL PRIMARY KEY,
+    user_id     INTEGER REFERENCES users(id) ON DELETE SET NULL,
+    action      VARCHAR(50) NOT NULL,
+    details     JSONB,
+    created_at  TIMESTAMP DEFAULT NOW()
+);
+
+-- ================================================
+-- SEED DATA - standaard superadmin
+-- Wachtwoord wordt gezet via de setup route
+-- ================================================
+INSERT INTO schools (name, slug) VALUES ('Demo School', 'demo-school');
+
+INSERT INTO users (email, role, first_name, last_name, school_id)
+VALUES ('admin@leerdoelen.local', 'superadmin', 'Super', 'Admin', 1);
+
+INSERT INTO school_years (school_id, label, is_active)
+VALUES (1, '2024-2025', TRUE);
+
+
+-- ── Migratie: globale schooljaren (uitvoeren op bestaande installaties) ───────
+-- Dit blok is idempotent (IF NOT EXISTS / DO UPDATE) dus veilig om opnieuw te draaien.
+
+-- 1. school_id nullable maken (was NOT NULL)
+ALTER TABLE school_years ALTER COLUMN school_id DROP NOT NULL;
+
+-- 2. Unieke constraint op label zodat elk jaar maar één keer bestaat
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM pg_constraint WHERE conname = 'school_years_label_key'
+    ) THEN
+        ALTER TABLE school_years ADD CONSTRAINT school_years_label_key UNIQUE (label);
+    END IF;
+END $$;
+
+-- 3. Bestaande jaren zonder school_id=NULL (indien ze al bestaan) behouden
+--    Bestaande per-school jaren omzetten naar globale jaren:
+UPDATE school_years SET school_id = NULL WHERE school_id IS NOT NULL;
diff --git a/postgres/migrate_v3_global_years.sql b/postgres/migrate_v3_global_years.sql
new file mode 100644
index 0000000..8810a99
--- /dev/null
+++ b/postgres/migrate_v3_global_years.sql
@@ -0,0 +1,34 @@
+-- ══════════════════════════════════════════════════════════════════════════════
+-- MIGRATIE v3: Globale schooljaren
+-- Uitvoeren op bestaande installaties die al draaien.
+-- Commando: docker exec -i leerdoelen_db psql -U leerdoelen leerdoelen < migrate_v3_global_years.sql
+-- ══════════════════════════════════════════════════════════════════════════════
+
+BEGIN;
+
+-- 1. school_id nullable maken (was NOT NULL)
+ALTER TABLE school_years ALTER COLUMN school_id DROP NOT NULL;
+
+-- 2. Unieke constraint op label (elk schooljaar bestaat maar één keer)
+DO $$
+BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM pg_constraint WHERE conname = 'school_years_label_key'
+    ) THEN
+        ALTER TABLE school_years ADD CONSTRAINT school_years_label_key UNIQUE (label);
+    END IF;
+END $$;
+
+-- 3. Bestaande per-school jaren omzetten naar globale jaren
+--    (dubbele labels samenvoegen: bewaar het actieve, verwijder de rest)
+DELETE FROM school_years sy1
+USING school_years sy2
+WHERE sy1.label = sy2.label
+  AND sy1.id > sy2.id;
+
+UPDATE school_years SET school_id = NULL;
+
+COMMIT;
+
+-- Controleer resultaat:
+SELECT id, label, is_active, school_id FROM school_years ORDER BY label DESC;
diff --git a/postgres/migrate_v4_classes_auditlog.sql b/postgres/migrate_v4_classes_auditlog.sql
new file mode 100644
index 0000000..2261b64
--- /dev/null
+++ b/postgres/migrate_v4_classes_auditlog.sql
@@ -0,0 +1,58 @@
+-- ══════════════════════════════════════════════════════════════════════════════
+-- MIGRATIE v4: Klassen zonder school_year_id + Auditlog tabel
+-- Uitvoeren op bestaande installaties:
+--   docker exec -i leerdoelen_db psql -U leerdoelen leerdoelen < postgres/migrate_v4_classes_auditlog.sql
+-- ══════════════════════════════════════════════════════════════════════════════
+
+BEGIN;
+
+-- 1. Verwijder school_year_id van classes (klassen zijn nu schooljaar-onafhankelijk)
+DO $$ BEGIN
+    IF EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_name='classes' AND column_name='school_year_id'
+    ) THEN
+        ALTER TABLE classes DROP CONSTRAINT IF EXISTS classes_school_year_id_fkey;
+        ALTER TABLE classes DROP COLUMN school_year_id;
+        RAISE NOTICE 'school_year_id verwijderd van classes';
+    ELSE
+        RAISE NOTICE 'school_year_id bestond al niet — niets te doen';
+    END IF;
+END $$;
+
+-- 2. Unieke constraint op (school_id, name) voor klassen
+DO $$ BEGIN
+    IF NOT EXISTS (
+        SELECT 1 FROM pg_constraint WHERE conname = 'uq_class_school_name'
+    ) THEN
+        ALTER TABLE classes ADD CONSTRAINT uq_class_school_name UNIQUE (school_id, name);
+        RAISE NOTICE 'Unique constraint uq_class_school_name toegevoegd';
+    END IF;
+END $$;
+
+-- 3. Auditlog tabel aanmaken
+CREATE TABLE IF NOT EXISTS audit_logs (
+    id          SERIAL PRIMARY KEY,
+    timestamp   TIMESTAMP NOT NULL DEFAULT NOW(),
+    user_id     INTEGER REFERENCES users(id) ON DELETE SET NULL,
+    school_id   INTEGER REFERENCES schools(id) ON DELETE SET NULL,
+    action      VARCHAR(50) NOT NULL,
+    category    VARCHAR(20) NOT NULL,
+    target_type VARCHAR(50),
+    target_id   VARCHAR(100),
+    detail      TEXT,
+    ip_address  VARCHAR(45)
+);
+
+CREATE INDEX IF NOT EXISTS ix_audit_logs_timestamp ON audit_logs(timestamp);
+CREATE INDEX IF NOT EXISTS ix_audit_logs_action    ON audit_logs(action);
+CREATE INDEX IF NOT EXISTS ix_audit_logs_category  ON audit_logs(category);
+
+COMMIT;
+
+-- Controleer resultaat
+SELECT 'classes kolommen:' AS info;
+SELECT column_name, data_type FROM information_schema.columns WHERE table_name = 'classes' ORDER BY ordinal_position;
+
+SELECT 'audit_logs tabel:' AS info;
+SELECT COUNT(*) AS entries FROM audit_logs;