/* Eén thema voor alle persoonlijke pagina's binnen de website (Mijn account, Berichten, Leeromgeving, Lessen, Opleiding,
   Praktijk, Opdrachten, Bestellingen, Betalingen): dezelfde paginakop, knoppen, tabbladen, kaarten, formulieren en meldingen.
   Alleen actief op [data-member-site]; het beheerportaal (body.portal) houdt zijn eigen thema. */
[data-member-site]{--m-accent:var(--site-accent,#157c77);--m-ink:var(--site-heading,#253f40);--m-muted:var(--site-text,#5d6f70);--m-line:#dde5e7;--m-soft:var(--site-sidebar,#eef6f4);--m-bg:#f7fafa;--m-radius:12px;--m-font:var(--academy-font,'Open Sans',sans-serif)}
[data-member-site] .member-area{max-width:1100px;font-family:var(--m-font)}
[data-member-site] .member-area [hidden]{display:none!important}
/* Paginakop: titel en toelichting links, acties (Vernieuwen, extra knoppen) rechts. */
[data-member-site] .member-head{display:flex;align-items:flex-start;justify-content:flex-end;gap:1.2em 2em;flex-wrap:wrap;margin:0 0 1.2em}
[data-member-site] .member-head[hidden]{display:none!important}
[data-member-site] .member-head-text{flex:1 1 20em;min-width:0}
[data-member-site] .member-head-text>header{margin:0}
[data-member-site] .member-head-text>header:after,[data-member-site] .member-head-text>header h1:after,[data-member-site] .member-head-text>header h2:after{display:none}
/* De paginanaam is klein en op elke pagina gelijk; de zijbalk laat al zien waar je bent. */
[data-member-site] .member-head-text>header h1,[data-member-site] .member-head-text>header h2{margin:0;font-family:var(--m-font);font-size:1.15em;line-height:1.4;letter-spacing:.02em;text-transform:uppercase;color:var(--m-muted);font-weight:700;overflow-wrap:anywhere}
[data-member-site] .member-head-text>header p{margin:.3em 0 0;font-size:.9em;color:var(--m-muted)}
[data-member-site] .member-head-text>header .work-eyebrow{display:none}
[data-member-site] .member-head-text>p{margin:.35em 0 0;color:var(--m-ink);font-size:.95em;line-height:1.6;max-width:60em}
/* Op persoonlijke pagina's blijft de zijbalk bij zoeken en het menu: geen uitgelichte pagina's en contactblok eronder. */
[data-member-site] #sidebar section:has(.mini-posts),[data-member-site] #sidebar section:has(ul.contact){display:none!important}
[data-member-site] .member-head-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;flex:none;padding-top:.4em}
[data-member-site] .member-head-actions:empty{display:none}
[data-member-site] .member-area .member-hidden-link{display:none!important}
/* Statusregel: alleen zichtbaar met tekst; fouten als rood kader. */
[data-member-site] .member-area p[role=status]{margin:0 0 1.2em;min-height:0}
[data-member-site] .member-area p[role=status]:empty{display:none}
[data-member-site] .member-area p[role=status]:not(:empty){padding:.8em 1em;border:1px solid var(--m-line);border-radius:8px;background:var(--m-bg);color:var(--m-ink);font-size:.92em;line-height:1.5}
[data-member-site] .member-area p[role=status].app-error,[data-member-site] .member-area p[role=status].error,[data-member-site] .member-area p[role=status].planning-error,[data-member-site] .member-area p[role=status].cohort-error,[data-member-site] .member-area p[role=status].work-error{background:#fdf1ef;border-color:#e8b9b3;color:#8a2a1f}
/* Melding bovenaan (nieuw bericht, herinnering): rustige kaart onder de paginakop. */
[data-member-site] .account-notifications{margin:0 0 1.4em}
/* Knoppen: normale letters, afgeronde hoeken; primair gevuld in de accentkleur met witte tekst. */
[data-member-site] :is(.member-area,dialog.app-dialog,dialog.cohort-dialog,dialog.planning-dialog) :is(button,.button):not(.chat-back,.chat-row,.notice-dismiss,.learning-surface *,.course-lessons *,.site-cart-panel *,.mui-icon-btn,.mui-fab,.mui-cal-day,.mui-chip){display:inline-flex;align-items:center;justify-content:center;gap:.4em;box-sizing:border-box;height:auto;min-height:2.9em;padding:.55em 1.15em;border:1px solid #cfd9dc;border-radius:8px;background:#fff;box-shadow:none;font-family:var(--m-font);font-size:.9em;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.4;white-space:normal;text-align:center;color:var(--m-ink)!important;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
[data-member-site] :is(.member-area,dialog.app-dialog,dialog.cohort-dialog,dialog.planning-dialog) :is(button,.button):not(.chat-back,.chat-row,.notice-dismiss,.learning-surface *,.course-lessons *,.site-cart-panel *,.mui-icon-btn,.mui-fab,.mui-cal-day,.mui-chip):hover{background:var(--m-bg);border-color:#a9bcc1;color:var(--m-ink)!important;box-shadow:none}
[data-member-site] :is(.member-area,dialog.app-dialog,dialog.cohort-dialog,dialog.planning-dialog) :is(button,.button).primary:not(.learning-surface *){background:var(--m-accent);border-color:var(--m-accent);color:#fff!important}
[data-member-site] :is(.member-area,dialog.app-dialog,dialog.cohort-dialog,dialog.planning-dialog) :is(button,.button).primary:not(.learning-surface *):hover{background:color-mix(in srgb,var(--m-accent) 85%,black);border-color:color-mix(in srgb,var(--m-accent) 85%,black);color:#fff!important}
[data-member-site] :is(.member-area,dialog.app-dialog,dialog.cohort-dialog,dialog.planning-dialog) :is(button,.button).small:not(.learning-surface *){min-height:2.5em;padding:.4em .9em;font-size:.82em}
[data-member-site] :is(.member-area,dialog) button:disabled,[data-member-site] :is(.member-area,dialog) .button[disabled]{opacity:.5;cursor:not-allowed}
[data-member-site] :is(.member-area,dialog) :is(button,.button):focus-visible{outline:3px solid var(--m-ink);outline-offset:2px}
[data-member-site] .member-area .app-row .app-actions{margin:0}
[data-member-site] .member-area .logout-control{margin-top:1.5em}
/* Tabbladen: één keuzebalk, het gekozen tabblad wit met accentkleur. */
[data-member-site] .member-area :is(.app-tabs,.planning-tabs){display:inline-flex;flex-wrap:wrap;gap:.25em;margin:0 0 1.4em;padding:.3em;border:1px solid var(--m-line);border-radius:10px;background:#eef2f3}
[data-member-site] .member-area.member-area :is(.app-tabs,.planning-tabs) :is(button,.button){min-height:2.5em;padding:.45em 1em;background:transparent;border-color:transparent;border-radius:7px;font-size:.88em;color:var(--m-muted)!important;box-shadow:none}
[data-member-site] .member-area.member-area :is(.app-tabs,.planning-tabs) :is(button,.button):hover{background:#ffffff99;border-color:transparent;color:var(--m-ink)!important}
[data-member-site] .member-area.member-area :is(.app-tabs,.planning-tabs) :is(.button.primary,button.primary,[aria-selected=true],[aria-current=page]),[data-member-site] .member-area.member-area :is(.app-tabs,.planning-tabs) :is(.button.primary,button.primary,[aria-selected=true],[aria-current=page]):hover{background:#fff;border-color:#dfe6e8;color:var(--m-accent)!important;box-shadow:0 1px 3px #26373e14}
[data-member-site] .member-area :is(.app-tabs,.planning-tabs) :is(button,.button):focus-visible{outline-offset:-3px}
/* Werkbalken, actierijen en paginering. */
[data-member-site] .member-area :is(.app-actions,.app-toolbar,.cohort-actions,.cohort-toolbar,.planning-actions,.planning-top,.planning-heading,.work-actions){display:flex;align-items:center;flex-wrap:wrap;gap:.6em}
[data-member-site] .member-area :is(.app-actions,.cohort-actions,.planning-actions,.work-actions){margin:1em 0}
[data-member-site] .member-area :is(.app-toolbar,.cohort-toolbar,.planning-heading){justify-content:space-between;margin:1.2em 0 1em}
[data-member-site] .member-area :is(.app-toolbar,.cohort-toolbar,.planning-heading) h2{margin:0}
[data-member-site] .member-area .app-toolbar label{margin:0 0 .3em}
[data-member-site] .member-area .member-pager{justify-content:flex-start;gap:.8em;font-size:.9em;color:var(--m-muted)}
[data-member-site] .member-area .member-pager span{min-width:6em;text-align:center}
/* Koppen binnen de pagina: geen onderstreping, rustige maat. */
[data-member-site] .member-area h2:not(.chat-head *,.learning-surface *,.member-head-text *){font-family:var(--m-font);font-size:1.35em;letter-spacing:-.02em;color:var(--m-ink);margin:1.4em 0 .7em}
[data-member-site] .member-area h3:not(.learning-surface *){font-family:var(--m-font);font-size:1.08em;color:var(--m-ink);margin:0 0 .4em}
[data-member-site] .member-area header.major{margin:1.6em 0 .8em}
[data-member-site] .member-area header.major>:last-child,[data-member-site] .member-head-text>header>:last-child{border-bottom:0;display:block;margin:0;padding:0}
[data-member-site] .member-area header.major h2{margin:0}
/* Inbox zonder geopend gesprek: de gesprekkenlijst gebruikt de volle breedte. */
[data-member-site] .chat-layout:not(.is-chatting){grid-template-columns:minmax(0,1fr)}
[data-member-site] .chat-layout:not(.is-chatting) .chat-list-pane{max-width:44em}
[data-member-site] .member-area details>summary{font-family:var(--m-font);font-weight:700;color:var(--m-ink);cursor:pointer}
/* Kaarten, rijen en lege staten. */
[data-member-site] .member-area :is(.app-card,.cohort-card,.work-card,.lesson-item,.coursework-card,.practice-session,.setup-grid>details,.planning-form,.account-details,.mailbox-message){background:#fff;border:1px solid var(--m-line);border-radius:var(--m-radius);padding:1.4em;box-shadow:0 1px 2px #1b2a2e08;min-width:0;overflow-wrap:anywhere}
[data-member-site] .member-area .account-details{margin:0 0 1em;border-bottom:1px solid var(--m-line)}
[data-member-site] .member-area .account-details>summary{margin:0;font-size:1.05em}
[data-member-site] .member-area .account-details[open]>summary{margin-bottom:1.2em}
[data-member-site] .member-area :is(.app-card,.cohort-card,.work-card,.coursework-card) p{margin:.5em 0;color:var(--m-muted);font-size:.95em;line-height:1.65}
[data-member-site] .member-area .lesson-item{margin:.8em 0;border-left:4px solid var(--m-accent)}
[data-member-site] .member-area :is(.app-grid,.cohort-list,.coursework-cards,.work-grid){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2em;margin:1.2em 0;align-items:start}
[data-member-site] .member-area :is(.app-empty,.cohort-empty,.planning-empty,.admin-empty){grid-column:1/-1;margin:1em 0;padding:1.6em;border:1px dashed #c9d5d8;border-radius:10px;background:var(--m-bg);color:var(--m-muted);text-align:center;line-height:1.6}
[data-member-site] .member-area .planning-empty h2{margin:0 0 .4em}
[data-member-site] .member-area :is(.app-row,.cohort-roster-row,.progress-row){padding:1em 0;border-bottom:1px solid var(--m-line)}
[data-member-site] .member-area :is(.app-row,.cohort-roster-row):last-child{border-bottom:0}
[data-member-site] .member-area :is(.app-row,.cohort-roster-row) p{margin:.3em 0;font-size:.95em;color:var(--m-muted)}
[data-member-site] .member-area :is(.app-row,.cohort-roster-row) h3{margin:0 0 .2em}
/* Cijfertegels (praktijkuren, lestegoed, leerroute). */
[data-member-site] .member-area :is(.summary-card,.practice-metric,.work-stat){padding:1.2em 1.3em;background:#fff;border:1px solid var(--m-line);border-radius:var(--m-radius);min-width:0}
[data-member-site] .member-area :is(.summary-card,.practice-metric,.work-stat) strong{display:block;font-family:var(--m-font);font-size:1.8em;line-height:1.2;color:var(--m-accent);margin:.2em 0}
[data-member-site] .member-area :is(.summary-cards,.practice-metrics){display:grid;grid-template-columns:repeat(auto-fit,minmax(11em,1fr));gap:1em;margin:1.2em 0}
[data-member-site] .learning-journey{padding:1.6em;margin:0 0 1.4em;background:var(--m-soft);border:1px solid #d7e5e2;border-radius:var(--m-radius)}
[data-member-site] .learning-journey h2{margin:.3em 0 .4em}
[data-member-site] .learning-journey p{color:var(--m-muted)}
[data-member-site] .journey-metrics strong{color:var(--m-accent)}
/* Badges en statuslabels. */
[data-member-site] .member-area :is(.cohort-badge,.lesson-status,.practice-badge,.admin-badge){display:inline-block;padding:.25em .7em;border-radius:1em;background:#eef2f3;color:var(--m-ink);font-size:.8em;font-weight:600;line-height:1.5}
[data-member-site] .member-area :is(.cohort-badge.open,.lesson-status.completed){background:#e6f4ec;color:#27603f}
/* Selectievakjes en keuzerondjes: het thema verbergt de echte vakjes (opacity 0, z-index -1) en tekent ze via een
   volgend label. Op persoonlijke pagina's staat het vakje ín het label, en sinds de grijze paginagrond verdween het
   erachter (24 september 2026). Hier krijgen ze hun gewone uiterlijk terug, in de accentkleur. */
[data-member-site] .member-area input[type=checkbox]:not(.learning-surface *),[data-member-site] .member-area input[type=radio]:not(.learning-surface *){appearance:auto;-webkit-appearance:auto;display:inline-block;position:static;float:none;opacity:1;z-index:auto;width:1.15em;height:1.15em;margin:0 .55em 0 0;flex:none;accent-color:var(--m-accent);cursor:pointer;vertical-align:middle}
[data-member-site] .member-area :is(.app-check,.planning-check,.cohort-check,.work-checks label,.planning-checks label,.otp-consent){cursor:pointer}
/* Formulieren: gelijke velden, rustige labels, accentkleur bij focus. */
[data-member-site] .member-area label{font-family:var(--m-font);font-size:.88em;font-weight:600;color:#40545a;margin:0 0 .35em}
[data-member-site] :is(.member-area,dialog.app-dialog,dialog.cohort-dialog,dialog.planning-dialog) :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=hidden],[type=file]),select,textarea):not(.learning-surface *){box-sizing:border-box;width:100%;max-width:100%;min-width:0;padding:.65em .85em;border:1px solid #cfd9dc;border-radius:8px;background:#fff;color:var(--m-ink);font-family:var(--m-font);font-size:.95em;line-height:1.5;box-shadow:none}
[data-member-site] :is(.member-area,dialog.app-dialog,dialog.cohort-dialog,dialog.planning-dialog) :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=hidden],[type=file]),select):not(.learning-surface *){height:2.9em}
[data-member-site] :is(.member-area,dialog) :is(input,select,textarea):not(.learning-surface *):focus{border-color:var(--m-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-accent) 18%,white);outline:none}
[data-member-site] .member-area input:not([type=checkbox],[type=radio],.learning-surface *){margin-bottom:1em}
[data-member-site] .member-area .course-lessons button{border:0;background:none;justify-content:flex-start;text-align:left;font-weight:400;padding:.3em}
[data-member-site] .member-area .app-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(14em,1fr));gap:1em;margin:1em 0}
[data-member-site] .member-area .app-fields input,[data-member-site] .member-area .app-toolbar input,[data-member-site] .member-area .app-toolbar select{margin-bottom:0}
[data-member-site] .member-area .app-toolbar>div{min-width:12em}
[data-member-site] .member-area :is(.app-check,.cohort-check,.planning-check){display:flex;align-items:flex-start;gap:.6em;font-weight:400;text-transform:none;letter-spacing:0;color:var(--m-ink)}
[data-member-site] .member-area :is(.app-help,.field-note,.planning-help,.cohort-help){font-size:.85em;color:var(--m-muted);line-height:1.6}
[data-member-site] .member-area fieldset{border:1px solid var(--m-line);border-radius:10px;padding:1em 1.2em;margin:1em 0}
[data-member-site] .member-area legend{font-weight:700;color:var(--m-ink);padding:0 .4em}
/* Dialoogvensters. */
[data-member-site] dialog:is(.app-dialog,.cohort-dialog,.planning-dialog){border:1px solid var(--m-line);border-radius:14px;padding:1.8em;color:var(--m-ink);box-shadow:0 20px 70px #16303840;font-family:var(--m-font)}
[data-member-site] dialog h2{font-family:var(--m-font);font-size:1.4em;color:var(--m-ink)}
[data-member-site] dialog label{font-size:.88em;font-weight:600;color:#40545a;margin:1em 0 .35em}
[data-member-site] dialog .app-dialog-error:not(:empty),[data-member-site] dialog .cohort-dialog-error:not(:empty),[data-member-site] dialog .dialog-error:not(:empty){padding:.7em .9em;margin:1em 0 0;border:1px solid #e8b9b3;border-radius:8px;background:#fdf1ef;color:#8a2a1f;font-size:.9em}
/* Accountpagina: knoppen en snelkoppelingen. */
[data-member-site] .account-shortcuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:.7em}
[data-member-site] .account-shortcuts p{display:flex;gap:.6em;flex-wrap:wrap}
[data-member-site] .account-shortcuts .button{flex:1;justify-content:flex-start;text-align:left;border-left:4px solid var(--m-accent)}
[data-member-site] .member-area .auth-form>button{margin:.6em .5em .6em 0}
/* Inbox: lijstwerkbalk en bericht-tabbladen. */
[data-member-site] .chat-list-pane .app-toolbar{margin:0 0 1em}
[data-member-site] .chat-list-pane .app-toolbar label{display:block}
[data-member-site] .chat-pane{border-radius:var(--m-radius)}
[data-member-site] .chat-list{border-radius:var(--m-radius)}
@media(max-width:736px){
  [data-member-site] .member-head{margin-bottom:1.1em;padding-bottom:.9em}
  [data-member-site] .member-head-text>header h1,[data-member-site] .member-head-text>header h2{font-size:1.05em}
  [data-member-site] .member-head-actions{width:100%;padding-top:0}
  [data-member-site] .member-area :is(.app-grid,.cohort-list,.coursework-cards,.work-grid){grid-template-columns:1fr}
  [data-member-site] .member-area :is(.app-card,.cohort-card,.work-card,.lesson-item,.coursework-card,.account-details){padding:1.1em}
  [data-member-site] .member-area :is(.app-tabs,.planning-tabs){display:flex}
  [data-member-site] .member-area :is(.app-tabs,.planning-tabs) :is(button,.button){flex:1 1 auto}
  [data-member-site] .member-area :is(.app-row,.cohort-roster-row){flex-direction:column;align-items:flex-start}
  [data-member-site] dialog:is(.app-dialog,.cohort-dialog,.planning-dialog){padding:1.2em}
}
/* Dashboardstrook: tegels met de cijfers van deze pagina en een kaart met het eerstvolgende moment. */
[data-member-site] .member-dash{margin:0 0 1.6em;display:flex;flex-direction:column;gap:1em}
[data-member-site] .member-dash[hidden]{display:none!important}
[data-member-site] .member-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5em,1fr));gap:.9em}
[data-member-site] .member-tile{position:relative;display:flex;flex-direction:column;gap:.15em;padding:1.05em 1.15em 1em;background:#fff;border:1px solid var(--m-line);border-radius:var(--m-radius);box-shadow:0 1px 2px #1b2a2e08;color:var(--m-ink);text-decoration:none;border-top:4px solid #b9c9cc;min-width:0;overflow-wrap:anywhere}
[data-member-site] a.member-tile{border-bottom:1px solid var(--m-line)}
[data-member-site] a.member-tile:hover{border-color:var(--m-accent);color:var(--m-ink)}
[data-member-site] .member-tile.is-accent{border-top-color:var(--m-accent)}
[data-member-site] .member-tile.is-ok{border-top-color:#3d9a6a}
[data-member-site] .member-tile.is-warn{border-top-color:#d98b2b}
[data-member-site] .member-tile.is-muted{border-top-color:#c9d5d8}
[data-member-site] .member-tile-label{font-size:.78em;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--m-muted)}
[data-member-site] .member-tile-value{font-family:var(--m-font);font-size:1.75em;line-height:1.15;letter-spacing:-.02em;color:var(--m-ink)}
[data-member-site] .member-tile.is-accent .member-tile-value{color:var(--m-accent)}
[data-member-site] .member-tile.is-ok .member-tile-value{color:#2f7d55}
[data-member-site] .member-tile.is-warn .member-tile-value{color:#b5701f}
[data-member-site] .member-tile-note{font-size:.85em;color:var(--m-muted);line-height:1.45}
[data-member-site] .member-tile-bar{display:block;height:.45em;margin:.4em 0 .15em;border-radius:1em;background:#e6eeef;overflow:hidden}
[data-member-site] .member-tile-fill{display:block;height:100%;border-radius:1em;background:var(--m-accent)}
[data-member-site] .member-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(16em,1fr));gap:.9em}
[data-member-site] .member-card{padding:1.2em 1.3em;background:#fff;border:1px solid var(--m-line);border-left:5px solid #b9c9cc;border-radius:var(--m-radius);box-shadow:0 1px 2px #1b2a2e08;min-width:0}
[data-member-site] .member-card.is-accent{border-left-color:var(--m-accent);background:var(--m-soft)}
[data-member-site] .member-card h3{margin:0 0 .35em;font-size:1.05em}
[data-member-site] .member-card p{margin:.15em 0;font-size:.95em;color:var(--m-muted);line-height:1.5}
[data-member-site] .member-card-link{display:inline-block;margin-top:.5em;font-weight:700;color:var(--m-accent)}
@media(max-width:736px){[data-member-site] .member-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6em}[data-member-site] .member-tile{padding:.85em .9em}[data-member-site] .member-tile-value{font-size:1.45em}}
/* Accountpagina: snelkoppelingen als gelijke tegels; de rollen staan al in de welkomstkaart. */
[data-member-site] .account-quick{margin:0 0 1.6em}
[data-member-site] .account-quick h2{margin:0 0 .7em}
[data-member-site] .account-shortcuts p{display:contents}
[data-member-site] .account-shortcuts p[hidden]{display:none}
[data-member-site] .account-shortcuts .button{margin:0;min-height:3.4em}
[data-member-site] .account-quick #account-roles{display:none}
/* Met een dashboardstrook zijn de oude cijferblokken op dezelfde pagina overbodig. */
[data-member-site] .member-dash~#practice-metrics,[data-member-site] .member-dash~.work-grid#work-summary,[data-member-site] .member-dash~#learning-journey .journey-metrics{display:none}
[data-member-site] .member-dash~#learning-journey{margin-top:0}

/* 13 September 2026: the users workspace renders inside the website; its table header keeps readable colours. */
[data-member-site] #main .users-workspace .users-table th{color:var(--m-muted);background:var(--m-soft);text-transform:none;letter-spacing:0}
[data-member-site] .users-workspace .users-title h1{font-family:var(--m-font);font-size:1.15em;letter-spacing:.02em;text-transform:uppercase;color:var(--m-muted)}
[data-member-site] .users-workspace .users-title p{color:var(--m-muted);font-size:.9em}