@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Ubuntu:wght@500;700&display=swap');

/* Huisstijl afgeleid van solipsis.nl: magenta/teal accenten, donkernavy voor
   tegels/kaarten-op-donker, Open Sans/Ubuntu. Variabelenamen (--blue/--amber/
   --green/--red) blijven ongewijzigd t.o.v. het vorige (donkere) thema — alleen
   de kleurwaarden zijn vervangen — zodat de pagina-specifieke <style>-blokken
   die deze variabelen gebruiken vanzelf meekleuren zonder overal aangepast te
   hoeven worden. */
:root{
  --bg:#ffffff; --bg2:#fbfafa; --card:#ffffff; --card2:#f5f1f2;
  --border:#e6e1e2; --text:#002835; --muted:#5c7480;
  --blue:#a93a6d; --teal:#00658d; --amber:#e0a339; --green:#2f9e77; --red:#d64550;
  --navy:#002835;
  --shadow:0 2px 14px rgba(0,40,53,.08);
  --font-body:'Open Sans',Helvetica,Arial,sans-serif;
  --font-head:'Ubuntu',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono','Fira Code',Consolas,ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:14px}
h1,h2,h3{font-family:var(--font-head)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1500px;margin:0 auto;padding:20px}
.hidden{display:none}

.app-header{background:var(--bg2);border-bottom:1px solid var(--border)}
.app-header h1{font-size:22px;margin:0;font-weight:700;color:var(--navy)}
.app-header .sub{color:var(--muted);font-size:13px;margin-top:2px}
.header-row{display:flex;justify-content:space-between;align-items:center;padding-top:16px;padding-bottom:16px}
.header-brand{display:flex;align-items:center;gap:14px}
.brand-logo{height:36px;width:auto;display:block}
.user-badge{background:var(--card);border:1px solid var(--border);
  padding:8px 14px;border-radius:999px;font-size:13px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow)}
.user-badge .avatar{width:26px;height:26px;border-radius:50%;background:var(--blue);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px}
.user-badge a{color:var(--muted);font-size:12px}

.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:22px;margin-top:30px}
.tile{display:block;background:var(--navy);border:1px solid var(--navy);
  border-radius:24px;padding:28px;color:#fbfafa;transition:all .2s;text-decoration:none;box-shadow:var(--shadow)}
.tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,40,53,.18);text-decoration:none}
.tile-icon{width:46px;height:46px;border-radius:50%;background:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
.tile h3{margin:0 0 10px 0;font-size:18px;font-weight:700;color:#fff}
.tile p{margin:0;color:#c7d3d8;font-size:13px;line-height:1.6}

.no-access{background:var(--card);border:1px solid var(--border);
  border-radius:24px;padding:40px;text-align:center;margin-top:30px;box-shadow:var(--shadow)}
.no-access h2{margin:0 0 10px 0}
.no-access p{color:var(--muted);max-width:500px;margin:0 auto}