:root{--navy:#0b2b56;--blue:#1769e0;--bg:#f5f7fb;--line:#dfe5ee;--text:#12213a;--muted:#718096}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
.topbar{background:linear-gradient(135deg,#092548,#0b376c);color:#fff;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:4}.brand{font-size:24px}.brand span{color:#58a6ff}
.nav{display:flex;gap:8px;padding:10px;background:#fff;border-bottom:1px solid var(--line);overflow:auto;position:sticky;top:64px;z-index:3}.nav button{border:0;background:transparent;padding:11px 14px;border-radius:10px;font-weight:700;color:#56657a}.nav button.active{background:#eaf2ff;color:var(--blue)}
main{max-width:1100px;margin:auto;padding:18px 14px 80px}.view{display:none}.view.active{display:block}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:14px;box-shadow:0 8px 24px #0b2b5610}
h1{margin-top:0}.muted{color:var(--muted)}.big{font-size:48px;font-weight:900;color:var(--blue)}.pill{display:inline-block;padding:7px 10px;border-radius:999px;background:#eaf2ff;color:var(--blue);font-weight:700}
.progress{height:16px;background:#e8edf4;border-radius:999px;overflow:hidden}.progress>div{height:100%;background:linear-gradient(90deg,#1769e0,#36b1ff)}
.module-head{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;cursor:pointer}.module-body{display:none;border-top:1px solid var(--line);margin-top:12px}.module.open .module-body{display:block}
.skill{display:grid;grid-template-columns:1fr 70px 1.3fr;gap:12px;padding:12px 0;border-bottom:1px solid #edf0f4}.score{font-size:20px;font-weight:900;color:var(--blue);text-align:center}
.row{display:grid;grid-template-columns:100px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}.badge{padding:6px 9px;border-radius:999px;font-size:12px;font-weight:700}.ok{background:#e8f7ec;color:#2f9e44}.warn{background:#fff3df;color:#d97706}.info{background:#eaf2ff;color:var(--blue)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.kpi{border:1px solid var(--line);border-radius:14px;padding:14px}.kpi strong{display:block;font-size:26px;margin-top:6px}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.day{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}.day h3{font-size:14px}.chip{background:#eef4ff;border-radius:9px;padding:8px;margin:6px 0;font-size:13px}
button.action{border:0;background:var(--blue);color:#fff;border-radius:10px;padding:9px 12px;font-weight:700}.notice{background:#eef6ff;border:1px solid #d8e8ff;padding:14px;border-radius:14px;margin-bottom:14px}
@media(max-width:800px){.grid{grid-template-columns:1fr}.days{grid-template-columns:repeat(2,1fr)}.skill{grid-template-columns:1fr 50px}.skill div:last-child{grid-column:1/-1}.row{grid-template-columns:72px 1fr}.row> :last-child{grid-column:2}}
@media(max-width:520px){.days{grid-template-columns:1fr}.brand{font-size:20px}}

/* v1.1 layout polish */
body{min-width:320px}
.topbar{
  min-height:72px;
  padding-left:max(22px,calc((100vw - 1100px)/2 + 14px));
  padding-right:max(22px,calc((100vw - 1100px)/2 + 14px));
}
.nav{
  min-height:54px;
  padding-left:max(14px,calc((100vw - 1100px)/2 + 14px));
  padding-right:max(14px,calc((100vw - 1100px)/2 + 14px));
  align-items:center;
}
.nav button{min-width:118px;text-align:center}
main{width:100%;max-width:1100px;padding-top:28px}
.view>h1{margin-bottom:6px}
.view>p.muted{margin-top:0;margin-bottom:22px}
.card{width:100%}
.card>.big:first-child{margin-bottom:8px}
.progress{margin-top:10px}
.module-head{min-height:84px}
.module-head>div:first-child{min-width:0}
.module-head strong{display:block;font-size:18px;margin-bottom:4px}
.module-head .progress{max-width:760px}
.module-body{padding:0 4px}
.skill{min-height:58px;align-items:center}
.row{min-height:70px;align-items:center}
.grid{margin:18px 0 14px}
.days{align-items:stretch}
.day{min-height:155px;display:flex;flex-direction:column}
.day h3{margin:0 0 10px}
.day .action{margin-top:auto;width:100%}
.notice{line-height:1.45}

@media(max-width:800px){
  .topbar{padding-left:16px;padding-right:16px}
  .nav{padding-left:10px;padding-right:10px}
  .nav button{min-width:auto;flex:1}
  main{padding-top:20px}
}
@media(max-width:560px){
  .topbar{min-height:64px}
  .nav{top:64px}
  .nav button{padding:10px 11px;font-size:13px}
  main{padding-left:12px;padding-right:12px}
  .card{border-radius:16px;padding:15px}
  .big{font-size:42px}
}

.availability-chip{display:flex;align-items:center;justify-content:space-between;gap:8px}
.remove-time{border:0;background:transparent;color:#b42318;font-size:20px;font-weight:900;line-height:1;cursor:pointer;padding:0 3px;border-radius:6px}
.remove-time:hover{background:#ffe8e8}

.hidden{display:none!important}


/* v1.6 PWA + huisstijl */
.brand-app{display:flex;align-items:center;gap:10px}
.brand-app img{width:42px;height:42px;border-radius:11px;background:#fff;object-fit:contain;padding:4px}
.brand-app strong{display:block;line-height:1}
.brand-app small{display:block;margin-top:4px;color:#cbd8e8;font-size:11px;font-weight:600}
.login-card{overflow:hidden}
.login-brand{text-align:center;margin:-18px -18px 22px;padding:22px 18px 18px;background:linear-gradient(180deg,#fff,#f8fbff)}
.login-brand img{display:block;width:min(420px,92%);height:auto;margin:0 auto 10px}
.portal-wordmark{font-weight:900;letter-spacing:.035em;font-size:30px;color:#0b2b56}
.portal-wordmark span{color:#1769e0}
.install-panel{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
.install-btn{border:1px solid #cfe0f7;background:#edf5ff;color:#145dbb;border-radius:12px;padding:11px 16px;font-weight:800;cursor:pointer}
.install-btn:hover{background:#e2efff}
.install-btn[hidden]{display:none}
.install-hint{font-size:12px;margin-top:8px;line-height:1.4}
@media(max-width:520px){
  .brand-app small{display:none}
  .login-brand img{width:96%}
  .portal-wordmark{font-size:25px}
}


/* v1.7 - leerlingvriendelijke voortgang */
.progress-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 28px;margin-bottom:14px;border-radius:20px;background:linear-gradient(135deg,#092548,#0b376c);color:#fff;box-shadow:0 10px 30px #0b2b5622}
.progress-hero h1{margin:4px 0 8px;font-size:30px}
.progress-hero p{margin:0;color:#d6e3f3}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:.14em;color:#73b5ff}
.progress-ring{--progress:0deg;width:122px;height:122px;flex:0 0 122px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#45a3ff var(--progress),#ffffff25 0)}
.progress-ring:before{content:"";position:absolute}
.progress-ring>div{width:94px;height:94px;border-radius:50%;background:#0a2d58;display:flex;flex-direction:column;align-items:center;justify-content:center}
.progress-ring strong{font-size:29px}.progress-ring span{font-size:11px;color:#c9d9eb}
.progress-status{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;margin-bottom:14px;border:1px solid}
.progress-status strong,.progress-status span{display:block}.progress-status>div>span{font-size:12px;margin-top:3px;opacity:.8}
.status-icon{width:34px;height:34px;display:grid!important;place-items:center;border-radius:50%;font-weight:900;background:#fff9}
.level-green{background:#eaf8ef!important;color:#247a3b!important;border-color:#c8ebd3!important}
.level-blue{background:#eaf3ff!important;color:#1769e0!important;border-color:#cee1fb!important}
.level-yellow{background:#fff6e5!important;color:#a96400!important;border-color:#f5dfb4!important}
.level-red{background:#fff0ee!important;color:#b43b2d!important;border-color:#f2cec8!important}
.progress-module{padding:0;overflow:hidden}
.progress-module .module-head{padding:17px 18px}
.module-main{min-width:0;width:100%}
.module-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:3px}
.module-title-row>strong{font-size:18px}
.module-status{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid}
.module-percent{font-size:25px;font-weight:900;color:var(--blue);min-width:58px;text-align:right}
.progress-module .module-body{padding:0 18px 6px}
.progress-skill{grid-template-columns:minmax(160px,1fr) 54px minmax(190px,1.1fr)}
.skill-name{font-weight:700}
.skill-status{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800}
.skill-good{background:#e8f7ec;color:#2f8b45}
.skill-progress{background:#eaf2ff;color:#1769e0}
.skill-attention{background:#fff0e7;color:#b85d16}
.skill-none{background:#eef1f5;color:#69778a}
.skill-explain{margin-top:4px;font-size:11px}
.progress-legend{margin-top:18px}
.legend-grid{display:flex;flex-wrap:wrap;gap:18px;margin:13px 0}
.legend-grid span{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700}
.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.legend-dot.attention{background:#e98a44}.legend-dot.progress{background:#458be5}.legend-dot.good{background:#4ca868}
.progress-legend p{font-size:12px;margin-bottom:0}
@media(max-width:620px){
 .progress-hero{padding:20px;align-items:flex-start}
 .progress-hero h1{font-size:23px}
 .progress-ring{width:92px;height:92px;flex-basis:92px}
 .progress-ring>div{width:70px;height:70px}.progress-ring strong{font-size:22px}
 .progress-skill{grid-template-columns:1fr 44px}
 .progress-skill>div:last-child{grid-column:1/-1}
 .module-title-row{display:block}.module-status{margin-top:6px}
}