:root{
    --kos-ink:#1b1430;
    --kos-ink-2:#241a3f;
    --kos-pink:#e6357f;
    --kos-pink-soft:#ff5fa2;
    --kos-violet:#7c5cff;
    --kos-bg:#f6f6f7;
    --kos-card:#ffffff;
    --kos-line:#e8e8ec;
    --kos-text:#2a2440;
    --kos-muted:#857ea0;
    --sidebar-w:266px;
    --radius:16px;
    --shadow:0 1px 2px rgba(27,20,48,.04),0 8px 24px rgba(27,20,48,.06);
    font-family:'Outfit',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;background:var(--kos-bg);color:var(--kos-text);
    font-family:'Outfit',system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased;
}

/* ---------- Layout ---------- */
.layout{min-height:100vh}
.main{margin-left:var(--sidebar-w);min-width:0;min-height:100vh;display:flex;flex-direction:column}
@media(max-width:991.98px){.main{margin-left:0}}

/* ---------- Sidebar ---------- */
.sidebar{
    width:var(--sidebar-w);
    background:linear-gradient(185deg,var(--kos-ink) 0%,var(--kos-ink-2) 100%);
    color:#cfc7e6;
    position:fixed;top:0;left:0;height:100vh;z-index:1030;display:flex;flex-direction:column;
}

.brand{padding:22px 22px 14px}
.brand-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand-mark{
    display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
    background:linear-gradient(135deg,var(--kos-pink),var(--kos-violet));
    font-size:20px;color:#fff;box-shadow:0 6px 16px rgba(230,53,127,.4);
}
.brand-text{font-weight:600;font-size:20px;line-height:1;display:flex;flex-direction:column}
.brand-text small{font-weight:400;font-size:11px;letter-spacing:3px;color:var(--kos-pink-soft);text-transform:uppercase}

.nav-menu{padding:8px 14px;flex:1;overflow-y:auto}
.nav-label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#6f6792;margin:18px 10px 8px}
.nav-item{
    display:flex;align-items:center;gap:13px;padding:11px 14px;margin:3px 0;border-radius:12px;
    color:#bcb3d8;text-decoration:none;font-weight:400;font-size:15px;position:relative;
    transition:background .15s,color .15s;background:transparent;border:0;width:100%;text-align:left;cursor:pointer;
}
.nav-item i{font-size:18px;width:22px;text-align:center;opacity:.9}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{
    background:linear-gradient(100deg,rgba(230,53,127,.22),rgba(124,92,255,.18));
    color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.nav-item.active::before{
    content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;
    background:linear-gradient(var(--kos-pink),var(--kos-violet));
}
.nav-badge{margin-left:auto;background:var(--kos-pink);color:#fff;font-size:12px;font-weight:600;border-radius:999px;padding:1px 8px}
.sidebar-foot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.07)}

/* ---------- Topbar ---------- */
.topbar{
    position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
    background:rgba(246,246,247,.85);backdrop-filter:blur(10px);
    padding:14px 26px;border-bottom:1px solid var(--kos-line);
    padding-top:max(14px,env(safe-area-inset-top));
}
.topbar-title{font-size:23px;font-weight:600;margin:0;flex:1;color:var(--kos-ink)}
.btn-burger{font-size:24px;line-height:1;border:none;background:transparent;color:var(--kos-ink);padding:0 4px}
.user-chip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--kos-line);border-radius:999px;padding:5px 14px 5px 5px;cursor:pointer;font-weight:500;color:var(--kos-text);text-decoration:none}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--kos-pink),var(--kos-violet));color:#fff;font-weight:600;font-size:14px}
.text-soft{color:#9a92ba}

/* ---------- Content ---------- */
.content{padding:26px;width:100%;max-width:1100px;min-width:0;flex:1}
@media(max-width:576px){.content{padding:18px 16px}.topbar{padding-left:14px;padding-right:14px}}

/* ---------- Cards / tables ---------- */
.card{border:1px solid var(--kos-line);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--kos-card)}
.card-header{background:transparent;border-bottom:1px solid var(--kos-line);font-weight:600;font-size:18px;padding:18px 22px}
.card-body{padding:22px}

.page-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.page-head .spacer{flex:1}

.table{--bs-table-bg:transparent;margin:0}
.table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--kos-muted);font-weight:600;border-bottom:1px solid var(--kos-line);padding:14px 18px;white-space:nowrap}
.table tbody td{padding:14px 18px;border-bottom:1px solid var(--kos-line);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table-hover tbody tr{transition:background .12s}
.table-hover tbody tr:hover{background:#f5f5f7}
.table-wrap{overflow-x:auto;border-radius:var(--radius);-webkit-overflow-scrolling:touch}

/* ---------- Buttons / badges ---------- */
.btn-primary{--bs-btn-bg:var(--kos-pink);--bs-btn-border-color:var(--kos-pink);--bs-btn-hover-bg:#cf2a70;--bs-btn-hover-border-color:#cf2a70;--bs-btn-active-bg:#b8245f;font-weight:500}
.btn-outline-primary{--bs-btn-color:var(--kos-pink);--bs-btn-border-color:var(--kos-pink);--bs-btn-hover-bg:var(--kos-pink);--bs-btn-hover-border-color:var(--kos-pink)}
.btn{border-radius:11px;font-weight:500}
.btn-sm{border-radius:9px}
.badge{font-weight:500;padding:.4em .7em;border-radius:7px}
.badge-soft{background:#f1ecfb;color:var(--kos-violet)}
.badge-pink{background:#fde7f1;color:var(--kos-pink)}
.badge-green{background:#e3f6ec;color:#1f9d55}
.badge-amber{background:#fdf0db;color:#b9770f}
.badge-grey{background:#eceaf2;color:#7a7497}

.form-label{font-weight:500;font-size:14px;color:var(--kos-text);margin-bottom:5px}
.form-control,.form-select{border-radius:11px;border-color:var(--kos-line);padding:.55rem .8rem}
.form-control:focus,.form-select:focus{border-color:var(--kos-pink-soft);box-shadow:0 0 0 .2rem rgba(230,53,127,.12)}

.empty{text-align:center;padding:54px 20px;color:var(--kos-muted)}
.empty i{font-size:46px;opacity:.4;display:block;margin-bottom:10px}

a.row-link{color:inherit;text-decoration:none}
a.row-link:hover{color:var(--kos-pink)}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
    background:radial-gradient(1200px 600px at 20% -10%,rgba(124,92,255,.35),transparent),
               radial-gradient(900px 500px at 110% 20%,rgba(230,53,127,.4),transparent),
               var(--kos-ink);}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:22px;padding:38px 34px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.login-brand .brand-mark{width:46px;height:46px;font-size:24px}
.login-brand h1{font-size:22px;margin:0;color:var(--kos-ink)}
.login-brand p{margin:0;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--kos-pink)}

/* ========================================================= */
/* Portaal-aanvullingen (zelfde tokens als de cms)            */
/* ========================================================= */

/* klikbare tabelrijen */
tr.row-click{cursor:pointer}
.td-arrow{width:42px;text-align:right}
.td-arrow a{color:var(--kos-muted);text-decoration:none}
tr.row-click:hover .td-arrow a{color:var(--kos-pink)}

/* profielstrip */
.profile-strip{display:flex;align-items:center;gap:16px;background:var(--kos-card);border:1px solid var(--kos-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 20px;margin-bottom:18px}
.profile-strip .who{flex:1;min-width:0}
.profile-strip h2{font-size:20px;margin:0 0 4px}
.profile-meta{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--kos-muted);font-size:14px}
.profile-meta i{color:var(--kos-violet);margin-right:4px}
.profile-avatar{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;border-radius:50%;background:linear-gradient(135deg,var(--kos-pink),var(--kos-violet));color:#fff;font-weight:600;font-size:20px}

/* twee kaarten naast elkaar */
.cards-2{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
@media(max-width:820px){.cards-2{grid-template-columns:1fr}}

/* dashboard quick-links */
.quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.quick a{display:flex;align-items:center;gap:14px;background:var(--kos-card);border:1px solid var(--kos-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;text-decoration:none;color:var(--kos-text);transition:transform .15s,box-shadow .15s}
.quick a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(27,20,48,.10)}
.quick .ico{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:#f1ecfb;color:var(--kos-violet);font-size:22px}
.quick .lbl{font-weight:600}
.quick .desc{font-size:13px;color:var(--kos-muted)}
.quick .arrow{margin-left:auto;color:var(--kos-pink)}

/* welkom */
.welcome{background:linear-gradient(120deg,var(--kos-ink),var(--kos-violet));color:#fff;border-radius:var(--radius);padding:24px 26px;margin-bottom:22px}
.welcome .eyebrow{color:#d9ccf6;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin:0}
.welcome h2{margin:4px 0 6px;font-size:26px}
.welcome p{margin:0;color:#e7ddf7}

/* detail datumbadge */
.detail-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.detail-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;flex:0 0 64px;border-radius:16px;background:linear-gradient(135deg,var(--kos-violet),var(--kos-pink));color:#fff;line-height:1}
.detail-date .d{font-size:26px;font-weight:600}
.detail-date .m{font-size:11px;text-transform:uppercase}
.detail-head h2{margin:0;font-size:22px}
.detail-head p{margin:2px 0 0;color:var(--kos-muted);font-size:14px}

/* note */
.note{display:flex;gap:10px;align-items:flex-start;background:#fff7e6;border:1px solid #ffe2a8;color:#8a6400;border-radius:12px;padding:12px 16px;font-size:14px}
.note i{margin-top:2px}

/* sidebar submenu (Projecten) */
.nav-sub{display:flex;flex-direction:column;gap:2px;margin:0 0 6px}
.nav-sub a{display:block;padding:8px 14px 8px 49px;color:#bcb3d8;text-decoration:none;border-radius:10px;font-size:14px}
.nav-sub a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-caret{margin-left:auto;font-size:13px;transition:transform .2s}
.nav-item[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}

/* card footer + dl */
.card-footer-actions{padding:16px 22px;border-top:1px solid var(--kos-line);display:flex;gap:8px}
dl.kv{margin:0}
dl.kv>div{display:grid;grid-template-columns:170px 1fr;gap:8px;padding:7px 0}
dl.kv dt{color:var(--kos-muted);font-weight:500;margin:0}
dl.kv dt i{color:var(--kos-violet);margin-right:6px}
dl.kv dd{margin:0}
@media(max-width:560px){dl.kv>div{grid-template-columns:1fr;gap:2px}}
.text-violet{color:var(--kos-violet)}

/* mobiel: sidebar in/uit (portaal is desktop-first) */
.backdrop{position:fixed;inset:0;background:rgba(20,10,26,.45);opacity:0;visibility:hidden;transition:opacity .2s;z-index:1025}
@media(max-width:991.98px){
  .sidebar{transform:translateX(-100%);transition:transform .25s}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .backdrop{opacity:1;visibility:visible}
}

/* ---------- Dagprogramma (lesdetail) ---------- */
.program{list-style:none;margin:0;padding:0;position:relative}
.program::before{content:"";position:absolute;left:96px;top:6px;bottom:6px;width:2px;background:var(--kos-line)}
.program-row{display:grid;grid-template-columns:84px 16px 1fr;align-items:start;gap:10px;padding:10px 0;position:relative}
.program-time{font-variant-numeric:tabular-nums;font-weight:600;color:var(--kos-ink);font-size:14px;text-align:right;padding-top:1px}
.program-dot{width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--kos-violet);margin-top:3px;justify-self:center;z-index:1}
.program-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.program-name{font-weight:600;color:var(--kos-text)}
.program-coach{font-size:13px;color:var(--kos-muted)}
.program-note{font-size:13px;color:var(--kos-muted);font-style:italic}
.program-row.is-pauze .program-dot{border-color:var(--kos-muted);background:var(--kos-bg)}
.program-row.is-pauze .program-name{color:var(--kos-muted);font-weight:500}
@media(max-width:560px){
  .program::before{left:0;display:none}
  .program-row{grid-template-columns:1fr;gap:2px}
  .program-time{text-align:left}
  .program-dot{display:none}
}

/* rood badge voor afgemeld */
.badge-red{background:#fde8e8;color:#d23b3b}