/* Gedeeld/mijn-omgeving/mijn-omgeving.css
   Mijn omgeving voor ClassPilot en Talententest (13 okt 2026): dezelfde opbouw op beide sites.
   Een vaste zijbalk links (inklapbaar, op een telefoon een uitschuifpaneel), de inhoud in
   de volle breedte, kaarten direct op de pagina en binnen een kaart geen kaders.
   Huisstijl per site via deze variabelen (zet ze op :root in de site): */

:root {
    --mo-accent: #00a676;
    --mo-accent-donker: #047857;
    --mo-accent-licht: #e6f6f0;
    --mo-tekst: #2c2c2c;
    --mo-zacht: #6b7280;
    --mo-flauw: #9ca3af;
    --mo-lijn: #ece8df;
    --mo-lijn-zacht: #f0ede6;
    --mo-vlak: #ffffff;
    --mo-hover: #f6f4ee;
    --mo-achtergrond: #f4f1ea;
    --mo-gevaar: #b91c1c;
    --mo-kop-font: inherit;
    --mo-tekst-font: inherit;
    --mo-nav-h: 80px;
    --mo-zb-b: 16rem;
    --mo-zb-icoon: 4.25rem;
    --mo-zb-nu: var(--mo-zb-b);
}
html.mo-ingeklapt { --mo-zb-nu: var(--mo-zb-icoon); }

/* ---- Pagina ---------------------------------------------------------- */
.mo-dash:not(.hidden):not([hidden]) { display: block; margin-left: var(--mo-zb-nu); background: var(--mo-achtergrond); min-height: calc(100vh - var(--mo-nav-h)); transition: margin-left .2s ease; font-family: var(--mo-tekst-font); color: var(--mo-tekst); }
.mo-dash__wrap { display: grid; gap: 2.25rem; align-content: start; padding: 2.5rem clamp(1.25rem, 3vw, 3rem) 4rem; min-width: 0; }
.mo-dash__menu { display: none; }
.mo-dash__titel { margin: 0; font-family: var(--mo-kop-font); font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--mo-tekst); }
.mo-dash__titel span { color: var(--mo-accent); }
.mo-dash__lead { margin: .6rem 0 0; font-size: 1.05rem; font-weight: 500; color: var(--mo-zacht); max-width: 38rem; }
.mo-dash__verder { margin: .9rem 0 0; }
.mo-dash__verder a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; color: var(--mo-accent-donker); text-decoration: none; }
.mo-dash__verder a:hover { text-decoration: underline; }
.mo-dash__onbevestigd { display: block; color: #b45309; font-weight: 700; font-size: .75rem; }

/* Navigatiebalk en footer van de site (het script zet de klassen mo-nav en mo-footer).
   Navigatiebalk en zijbalk vormen samen één witte omlijsting, zonder schaduw of overgang. */
html.mo-actief .mo-nav {
    background: var(--mo-vlak) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--mo-lijn) !important;
    transition: none !important;
}
@media (min-width: 900px) {
    html.mo-actief .mo-nav { padding-left: 1.25rem !important; padding-right: 1.5rem !important; }
    html.mo-actief .mo-nav > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; width: auto !important; }
}
html.mo-actief .mo-footer { margin-left: var(--mo-zb-nu); transition: margin-left .2s ease; }
/* overflow-x: hidden op body maakt een sticky navigatiebalk onwerkzaam (Talententest);
   clip voorkomt net zo goed horizontaal scrollen, maar laat sticky werken. */
html.mo-actief body { overflow-x: clip !important; }
html.mo-actief .mo-verborgen { display: none !important; }

/* ---- Zijbalk --------------------------------------------------------- */
.mo-zb { position: fixed; left: 0; top: var(--mo-nav-h); bottom: 0; width: var(--mo-zb-nu); transition: width .2s ease; display: flex; flex-direction: column; background: var(--mo-vlak); border-right: 1px solid var(--mo-lijn); overflow: hidden; z-index: 20; font-family: var(--mo-tekst-font); }
.mo-dash.hidden ~ .mo-zb, .mo-dash[hidden] ~ .mo-zb { display: none; }
.mo-zb__kop { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1rem .5rem 1.25rem; }
.mo-zb__titel { font-family: var(--mo-kop-font); font-weight: 800; font-size: 1rem; color: var(--mo-tekst); white-space: nowrap; }
.mo-zb__knop { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: .7rem; background: transparent; color: var(--mo-zacht); font-size: 1.15rem; cursor: pointer; }
.mo-zb__knop:hover { background: var(--mo-accent-licht); color: var(--mo-accent-donker); }
.mo-zb__inhoud { flex: 1; min-height: 0; overflow: hidden; padding: 0 .75rem; }
.mo-zb__groep { margin: clamp(.6rem, 1.6vh, 1.4rem) 0 .45rem; padding: 0 .6rem; font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--mo-flauw); white-space: nowrap; }
.mo-zb__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.mo-zb__menu a, .mo-zb__menu button { position: relative; display: flex; align-items: center; gap: .7rem; width: 100%; height: clamp(2.2rem, 4.6vh, 2.6rem); padding: 0 .6rem; border: 0; border-radius: .75rem; background: transparent; color: #4b5563; font: inherit; font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap; cursor: pointer; text-align: left; }
.mo-zb__menu .hidden, .mo-zb__menu [hidden] { display: none; }
.mo-zb__menu i { font-size: 1.2rem; flex: 0 0 1.25rem; text-align: center; }
.mo-zb__menu a:hover, .mo-zb__menu button:hover { background: var(--mo-hover); color: var(--mo-tekst); }
.mo-zb__menu [aria-current="true"] { background: var(--mo-accent-licht); color: var(--mo-accent-donker); }
.mo-zb__voet { border-top: 1px solid var(--mo-lijn); padding: .75rem; display: grid; gap: .25rem; }
.mo-zb__wie { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: .75rem; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.mo-zb__wie:hover { background: var(--mo-hover); }
.mo-zb__avatar { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: .7rem; background: var(--mo-accent-licht); color: var(--mo-accent-donker); font-size: 1.1rem; }
.mo-zb__wie-tekst { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.mo-zb__naam { font-weight: 800; font-size: .9rem; color: var(--mo-tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-zb__mail, .mo-zb__abo { display: block; font-size: .75rem; font-weight: 500; color: var(--mo-zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-zb__tandwiel { color: var(--mo-flauw); flex: 0 0 auto; }
.mo-zb__uit { display: flex; align-items: center; gap: .7rem; height: 2.4rem; padding: 0 .6rem; border: 0; border-radius: .75rem; background: transparent; color: #4b5563; font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; white-space: nowrap; }
.mo-zb__uit i { font-size: 1.2rem; flex: 0 0 1.25rem; }
.mo-zb__uit:hover { background: #fef2f2; color: var(--mo-gevaar); }

/* Ingeklapt: alleen iconen, met een tooltip op de naam. */
html.mo-ingeklapt .mo-zb__titel,
html.mo-ingeklapt .mo-zb__groep,
html.mo-ingeklapt .mo-zb__menu span,
html.mo-ingeklapt .mo-zb__wie-tekst,
html.mo-ingeklapt .mo-zb__tandwiel,
html.mo-ingeklapt .mo-zb__uit span { display: none; }
html.mo-ingeklapt .mo-zb__kop { justify-content: center; padding: 1rem .5rem .5rem; }
html.mo-ingeklapt .mo-zb__groep + .mo-zb__menu { margin-top: .9rem; }
html.mo-ingeklapt .mo-zb__menu a, html.mo-ingeklapt .mo-zb__menu button,
html.mo-ingeklapt .mo-zb__uit, html.mo-ingeklapt .mo-zb__wie { justify-content: center; padding: 0; }
html.mo-ingeklapt .mo-zb__wie { height: 2.75rem; position: relative; }
html.mo-ingeklapt .mo-zb__uit { position: relative; }
html.mo-ingeklapt .mo-zb, html.mo-ingeklapt .mo-zb__inhoud { overflow: visible; }
html.mo-ingeklapt .mo-zb [data-tip]:hover::after,
html.mo-ingeklapt .mo-zb [data-tip]:focus-visible::after {
    content: attr(data-tip); position: absolute; left: calc(100% + .6rem); top: 50%; transform: translateY(-50%);
    padding: .35rem .6rem; border-radius: .5rem; background: var(--mo-tekst); color: #fff; font-size: .8rem; font-weight: 700; white-space: nowrap; pointer-events: none; z-index: 30;
}

/* Lage schermen: groepskoppen weg, zodat de zijbalk nooit hoeft te scrollen. */
html.mo-krap .mo-zb__groep { display: none; }
html.mo-krap .mo-zb__menu + .mo-zb__groep + .mo-zb__menu { margin-top: .5rem; }
@media (max-height: 760px) and (min-width: 900px) {
    .mo-zb__groep { display: none; }
    .mo-zb__menu { gap: .1rem; }
    .mo-zb__menu + .mo-zb__groep + .mo-zb__menu { margin-top: .5rem; }
    .mo-zb__menu a, .mo-zb__menu button, .mo-zb__uit { height: 2.15rem; }
}

/* ---- Kaarten, stappen en knoppen ------------------------------------- */
.mo-kaart { background: var(--mo-vlak); border-radius: 1.75rem; padding: 1.75rem; box-shadow: 0 10px 34px rgba(0,0,0,.05); }
.mo-kaart__titel { margin: 0 0 1rem; font-family: var(--mo-kop-font); font-size: 1.5rem; font-weight: 800; color: var(--mo-tekst); }
.mo-kaart__voet { margin: 1rem 0 0; font-size: .85rem; font-weight: 600; color: var(--mo-zacht); }
.mo-kaart__voet a { color: var(--mo-accent-donker); font-weight: 800; }
.mo-stappen { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.5rem; counter-reset: stap; }
.mo-stappen li { counter-increment: stap; position: relative; padding-left: 2.1rem; color: var(--mo-zacht); font-size: .92rem; font-weight: 500; line-height: 1.45; }
.mo-stappen li::before { content: counter(stap); position: absolute; left: 0; top: .05rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--mo-tekst); color: #fff; font-weight: 800; font-size: .8rem; }
.mo-stappen strong { color: var(--mo-tekst); }
.mo-keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
.mo-keuze { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.4rem; padding: .7rem 1rem; border: 0; border-radius: 1rem; background: var(--mo-accent); color: #fff; font: inherit; font-weight: 800; text-decoration: none; text-align: center; line-height: 1.2; cursor: pointer; transition: background .15s; }
.mo-keuze:hover { background: var(--mo-accent-donker); }
.mo-keuze i { font-size: 1.35rem; }
.mo-keuze--anders { background: var(--mo-vlak); color: var(--mo-tekst); box-shadow: inset 0 0 0 1px #e5e7eb; }
.mo-keuze--anders:hover { background: var(--mo-accent-licht); }
.mo-keuze[aria-disabled="true"] { background: var(--mo-hover); color: var(--mo-zacht); cursor: default; }
.mo-keuze small { display: block; font-size: .72rem; font-weight: 700; opacity: .85; }

/* ---- Secties en lijsten ---------------------------------------------- */
.mo-sectie { display: grid; gap: .75rem; }
.mo-sectie__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mo-sectie__kop h2 { margin: 0; font-family: var(--mo-kop-font); font-size: 1.35rem; font-weight: 800; color: var(--mo-tekst); }
.mo-sectie__actie:not(.hidden):not([hidden]) { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; padding: 0; font: inherit; font-weight: 800; font-size: .9rem; color: var(--mo-accent-donker); cursor: pointer; text-decoration: none; }
.mo-sectie__intro { margin: 0; color: var(--mo-zacht); font-size: .9rem; font-weight: 500; }
.mo-sectie__intro:empty { display: none; }
.mo-regel { display: flex; align-items: flex-start; gap: .5rem; margin: 0; color: var(--mo-zacht); font-size: .9rem; font-weight: 500; }
.mo-regel i { font-size: 1.1rem; margin-top: .1rem; }
.mo-regel strong { color: var(--mo-tekst); }

.mo-lijst { background: var(--mo-vlak); border-radius: 1.75rem; box-shadow: 0 10px 34px rgba(0,0,0,.05); overflow: hidden; }
.mo-lijst__leeg { margin: 0; padding: 1.4rem 1.75rem; color: var(--mo-zacht); font-size: .95rem; font-weight: 500; line-height: 1.5; }
.mo-lijst__leeg strong { display: block; color: var(--mo-tekst); margin-bottom: .2rem; }
.mo-lijst__leeg a { color: var(--mo-accent-donker); font-weight: 800; }
.mo-rij { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.75rem; border-top: 1px solid var(--mo-lijn-zacht); text-decoration: none; color: inherit; }
.mo-rij:first-child { border-top: 0; }
a.mo-rij:hover { background: #faf8f3; }
.mo-rij__icoon { font-size: 1.6rem; flex: 0 0 auto; }
.mo-rij__tekst { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.mo-rij__titel { font-weight: 800; color: var(--mo-tekst); }
.mo-rij__status { margin-left: .4rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.mo-rij__meta { font-size: .82rem; font-weight: 500; color: var(--mo-zacht); }
.mo-rij__code { font-family: ui-monospace, monospace; font-weight: 800; color: var(--mo-tekst); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.mo-rij__feedback { font-size: .82rem; font-weight: 800; color: var(--mo-accent-donker); text-decoration: none; }
.mo-rij__feedback:hover { text-decoration: underline; }
.mo-rij__acties { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem 1.1rem; }
.mo-rij__actie { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; padding: .35rem 0; font: inherit; font-weight: 700; font-size: .85rem; color: var(--mo-zacht); cursor: pointer; white-space: nowrap; text-decoration: none; }
.mo-rij__actie:hover { color: var(--mo-accent-donker); }
.mo-rij__actie--weg:hover, .mo-rij__actie--weg[data-bevestigd="ja"] { color: var(--mo-gevaar); }
.mo-rij__actie:disabled { opacity: .5; cursor: default; }
.mo-rij__open { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; font-size: .9rem; color: var(--mo-tekst); text-decoration: none; white-space: nowrap; }
.mo-rij__open:hover { color: var(--mo-accent-donker); }

/* ---- Smaller ---------------------------------------------------------- */
@media (max-width: 899px) {
    .mo-dash:not(.hidden):not([hidden]), html.mo-ingeklapt .mo-dash:not(.hidden):not([hidden]) { margin-left: 0; }
    html.mo-actief .mo-footer { margin-left: 0; }
    .mo-zb { width: min(18rem, 85vw); height: calc(100dvh - var(--mo-nav-h)); bottom: auto; transform: translateX(-100%); transition: transform .25s ease; z-index: 90; box-shadow: 0 20px 50px rgba(0,0,0,.18); }
    html.mo-open .mo-zb { transform: none; }
    .mo-zb__dekking:not([hidden]) { position: fixed; inset: var(--mo-nav-h) 0 0 0; background: rgba(17, 24, 39, .35); z-index: 80; }
    .mo-dash__menu { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; padding: .55rem .9rem; border: 1px solid #e5e7eb; border-radius: .8rem; background: var(--mo-vlak); font: inherit; font-weight: 800; font-size: .9rem; color: var(--mo-tekst); cursor: pointer; }
    .mo-stappen { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .mo-dash__wrap { padding-top: 1.5rem; }
    .mo-kaart { padding: 1.25rem; }
    .mo-keuzes { grid-template-columns: 1fr; }
    .mo-rij { flex-wrap: wrap; align-items: flex-start; padding: 1rem 1.25rem; }
    .mo-rij__tekst { flex: 1 1 calc(100% - 3rem); }
    .mo-rij__acties { margin-left: 2.6rem; justify-content: flex-start; }
    .mo-lijst__leeg { padding: 1.2rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .mo-dash, .mo-zb, html.mo-actief .mo-footer { transition: none !important; }
}
@media print {
    .mo-zb, .mo-zb__dekking, .mo-dash__menu { display: none !important; }
    .mo-dash:not(.hidden):not([hidden]) { margin-left: 0; }
}