/* ARC Limburg huisstijl - trajectportaal
   Kleuren afgeleid van het ARC Limburg logo (groen / goud / oranje). */
:root{
  --arc-blauw:#157a3c;          /* primair diepgroen (voorheen blauw) */
  --arc-blauw-licht:#1f9d4e;    /* lichter groen voor hover/links */
  --arc-groen:#2ec27a;          /* mintgroen (de A) */
  --arc-groen-licht:#e7f5ec;    /* zacht groen vlak */
  --arc-goud:#d9a800;           /* goud (de R) */
  --arc-goud-licht:#fbf3d6;     /* zacht goud vlak */
  --arc-accent:#f26a37;         /* oranje (de C) */
  --arc-accent-licht:#fde6dc;   /* zacht oranje vlak */
  --grijs-bg:#f4f7f5;
  --grijs-lijn:#e2ebe5;
  --tekst:#233028;
  --tekst-zacht:#5b6b60;
  --rood:#c0392b;
  --radius:10px;
  --schaduw:0 1px 3px rgba(21,122,60,.08),0 4px 14px rgba(21,122,60,.06);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--tekst);background:var(--grijs-bg);line-height:1.5}
a{color:var(--arc-blauw-licht);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--arc-blauw);margin:0 0 .4em}
.container{max-width:1080px;margin:0 auto;padding:24px}

/* Topbar */
.topbar{background:var(--arc-blauw);color:#fff;padding:0}
.topbar .inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:12px 24px}
.logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px;color:#fff}
.logo-driehoek{display:grid;place-items:center;background:#fff;padding:5px;border-radius:8px}
.logo-driehoek .driehoek{height:30px;width:auto;display:block}
.logo-tekst{font-weight:600;letter-spacing:.01em;border-left:1px solid rgba(255,255,255,.35);padding-left:12px}
.topbar nav{margin-left:auto;display:flex;align-items:center;gap:18px}
.topbar nav a{color:#dbe7ef}
.topbar nav a:hover{color:#fff;text-decoration:none}
.rolbadge{background:rgba(255,255,255,.15);padding:3px 10px;border-radius:20px;font-size:12px;text-transform:uppercase;letter-spacing:.04em}

/* Preview-banner */
.preview-bar{background:var(--arc-accent);color:#3b2a00;text-align:center;padding:8px 16px;font-weight:600;font-size:14px}
.preview-bar a,.preview-bar form{display:inline}
.preview-bar button{margin-left:12px}

/* Cards */
.card{background:#fff;border:1px solid var(--grijs-lijn);border-radius:var(--radius);box-shadow:var(--schaduw);padding:20px;margin-bottom:18px}
.card h2{font-size:18px;display:flex;align-items:center;gap:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}

/* Traject-kaart */
.traject-kaart{display:block;background:#fff;border:1px solid var(--grijs-lijn);border-radius:var(--radius);padding:18px;box-shadow:var(--schaduw);transition:transform .08s,box-shadow .12s}
.traject-kaart:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(27,73,101,.12);text-decoration:none}
.traject-kaart .naam{font-weight:700;color:var(--arc-blauw);font-size:16px}
.meta{color:var(--tekst-zacht);font-size:13px;margin-top:4px}

/* Badges/pills */
.pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:600}
.pill.groen{background:var(--arc-groen-licht);color:var(--arc-groen)}
.pill.blauw{background:var(--arc-groen-licht);color:var(--arc-blauw)}
.pill.grijs{background:#eef1ef;color:var(--tekst-zacht)}
.pill.rood{background:#fbe6e3;color:var(--rood)}
.pill.oranje{background:var(--arc-accent-licht);color:#c24a1c}
.pill.goud{background:var(--arc-goud-licht);color:#8a6d00}

/* Zichtbaarheid vinkje */
.zicht{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;border:1px solid var(--grijs-lijn);background:#fff;cursor:pointer;color:var(--tekst-zacht)}
.zicht.aan{background:var(--arc-groen-licht);color:var(--arc-groen);border-color:#bfe0d4}
.zicht:hover{border-color:var(--arc-groen)}

/* Tabel */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--grijs-lijn);vertical-align:top}
th{color:var(--tekst-zacht);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
tr:last-child td{border-bottom:none}

/* Forms */
label{display:block;font-size:13px;font-weight:600;color:var(--tekst-zacht);margin:10px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--grijs-lijn);border-radius:8px;font-size:14px;font-family:inherit;background:#fff}
textarea{min-height:80px;resize:vertical}
.check{display:flex;align-items:center;gap:8px;margin:12px 0}
.check input{width:auto}
.check label{margin:0}
.btn{display:inline-block;background:var(--arc-blauw);color:#fff;border:none;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--arc-blauw-licht);text-decoration:none;color:#fff}
.btn.groen{background:var(--arc-groen)}
.btn.klein{padding:6px 12px;font-size:13px}
.btn.grijs{background:#e7ecef;color:var(--tekst)}
.btn.grijs:hover{background:#d8e0e4;color:var(--tekst)}

/* Tabs binnen traject */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--grijs-lijn)}
.tabs a{padding:9px 14px;font-size:14px;font-weight:600;color:var(--tekst-zacht);border-bottom:2px solid transparent}
.tabs a.actief{color:var(--arc-blauw);border-bottom-color:var(--arc-groen)}
.tabs a:hover{text-decoration:none;color:var(--arc-blauw)}

/* Berichten */
.chat{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.bubble{max-width:70%;padding:10px 14px;border-radius:14px;font-size:14px}
.bubble .van{font-size:11px;font-weight:700;opacity:.7;margin-bottom:2px}
.bubble.mij{align-self:flex-end;background:var(--arc-blauw);color:#fff;border-bottom-right-radius:4px}
.bubble.ander{align-self:flex-start;background:#fff;border:1px solid var(--grijs-lijn);border-bottom-left-radius:4px}
.bubble .tijd{font-size:10px;opacity:.6;margin-top:3px}

.leeg{color:var(--tekst-zacht);font-style:italic;padding:12px 0}
.melding{background:var(--arc-groen-licht);color:var(--arc-groen);padding:10px 14px;border-radius:8px;margin-bottom:14px;font-weight:600}
.muted{color:var(--tekst-zacht);font-size:13px}
.rij-acties{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs{font-size:13px;color:var(--tekst-zacht);margin-bottom:10px}
.dossierkop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:8px}
details.form-blok{border:1px dashed var(--grijs-lijn);border-radius:8px;padding:8px 14px;margin-top:14px}
details.form-blok summary{cursor:pointer;font-weight:600;color:var(--arc-blauw)}
.wg-uit{color:var(--tekst-zacht)}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,var(--arc-blauw),var(--arc-groen))}
.login-card{background:#fff;padding:34px;border-radius:16px;box-shadow:0 18px 50px rgba(27,73,101,.28);width:380px;max-width:92vw;text-align:center}
.login-logo{margin-bottom:18px}
.login-logo img{height:56px;width:auto}
.login-card h1{font-size:22px;margin-bottom:2px}
.login-sub{color:var(--tekst-zacht);font-size:14px;margin:0 0 20px}
.login-card form{text-align:left}
.demo{margin-top:18px;font-size:12px;color:var(--tekst-zacht);border-top:1px solid var(--grijs-lijn);padding-top:12px;text-align:left}
.demo code{background:var(--grijs-bg);padding:1px 5px;border-radius:4px}
footer{text-align:center;color:var(--tekst-zacht);font-size:13px;line-height:1.7;padding:28px 24px;border-top:1px solid var(--grijs-lijn);margin-top:20px}
footer a{color:var(--arc-blauw-licht)}
footer .footer-klein{font-size:11.5px;opacity:.85}