/* ── Voorbeeld werkgeversdashboard (6-10-2026) ──────────────────
   partials/dashboard-mockup.php. Alle maten in em; 1em = 1% van de schermbreedte
   (container query), zodat de verhouding op elk scherm gelijk blijft. */
.dm { margin:0; width:100%; position:relative; text-align:left; }
.dm-scherm { container-type:inline-size; position:relative; overflow:hidden; }
.dm-app, .dm-balk { font-size:10px; font-size:1cqw; }
.dm-app { background:#f8faf9; color:#1a1a1a; line-height:1.3; font-family:inherit; position:relative; aspect-ratio:16/10; overflow:hidden; }
/* Vaste schermverhouding (16:10) zoals een echt browservenster; wat niet past valt onder de rand */
.dm-app::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3em; background:linear-gradient(rgba(248,250,249,0),#f8faf9); pointer-events:none; }
.dm-top { height:4.8em; background:#fff; border-bottom:.1em solid #e8ecea; display:flex; align-items:center; justify-content:space-between; padding:0 2.6em; }
.dm-logo { font-weight:800; font-size:1.9em; color:var(--green); letter-spacing:-.02em; }
.dm-logo b { color:#1a1a1a; font-weight:800; }
.dm-top-r { display:flex; align-items:center; gap:1em; font-size:1.2em; color:#555; }
.dm-top-r b { color:#1a1a1a; font-weight:700; }
.dm-sep { width:.1em; height:1.3em; background:#ddd; }
.dm-uit { border:.1em solid #ccc; border-radius:.35em; padding:.35em .8em; background:#f4f4f4; color:#1a1a1a; }
.dm-main { padding:2.2em 4em 2.4em; }
.dm-kop { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.4em; }
.dm-h { font-size:2.3em; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.dm-sub { font-size:1.2em; color:#666; margin-top:.3em; }
.dm-knop { background:var(--green); color:#fff; font-weight:700; font-size:1.2em; padding:.75em 1.2em; border-radius:.5em; white-space:nowrap; }
.dm-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4em; margin-bottom:1.2em; }
.dm-stat, .dm-kaart { background:#fff; border:.1em solid #e5e9e7; border-radius:.9em; }
.dm-stat { padding:1.1em 1.5em; }
.dm-sl { font-size:1em; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#777; }
.dm-sv { font-size:2.3em; font-weight:800; margin:.25em 0 .15em; line-height:1; }
.dm-ss { font-size:1.05em; color:#555; }
.dm-kaart { padding:1.3em 1.8em; margin-bottom:1.2em; }
.dm-kt { font-size:1.4em; font-weight:700; margin-bottom:.9em; }
.dm-rij { display:flex; gap:1em; align-items:center; }
.dm-veld { border:.1em solid #dfe4e1; border-radius:.45em; padding:.75em 1em; font-size:1.15em; color:#999; white-space:nowrap; overflow:hidden; }
.dm-veld-1 { flex:1.5; } .dm-veld-2 { flex:1; }
.dm-tabel { margin-bottom:0; padding-bottom:.4em; }
.dm-tr { display:grid; grid-template-columns:1.3fr 2.1fr 1.1fr 1.6fr .8fr 1.2fr; align-items:center; gap:1em; padding:.8em 0; border-top:.1em solid #f0f2f1; font-size:1.15em; }
.dm-tr.dm-th { font-size:.95em; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#888; border-top:0; padding:0 0 .8em; }
.dm-naam { font-weight:700; white-space:nowrap; }
.dm-mail { color:#666; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-pil { font-style:normal; display:inline-block; background:var(--green-light); color:var(--green-dark); font-weight:700; font-size:.88em; padding:.3em .8em; border-radius:2em; white-space:nowrap; }
.dm-pil-grijs { background:#f0f1f0; color:#666; }
.dm-vg { display:flex; align-items:center; gap:.7em; }
.dm-bar { flex:1; height:.45em; background:#e8ecea; border-radius:1em; overflow:hidden; }
.dm-bar span { display:block; height:100%; background:var(--green); border-radius:1em; }
.dm-bar span.dm-oranje { background:#f59e0b; } /* 14-10-2026: zelfde oranje als werkgever.html */
.dm-vg b { font-size:.95em; color:var(--green); min-width:2.6em; text-align:right; }
.dm-vg b.dm-oranje-t { color:#f59e0b; }
/* 14-10-2026: licentiebalk met blokjes (zelfde kleuren als werkgever.html) */
.dm-lbalk { display:flex; gap:.25em; height:1em; margin:-.2em 0 .5em; }
.dm-lbalk i { flex:1; border-radius:.25em; }
.dm-lbalk i.g, .dm-lleg i.g { background:#127a53; } .dm-lbalk i.b, .dm-lleg i.b { background:#a7e3c8; box-shadow:inset 0 0 0 .1em #5cbf93; }
.dm-lbalk i.u, .dm-lleg i.u { background:repeating-linear-gradient(135deg,#f6d38b 0 .25em,#fbe6b8 .25em .5em); } .dm-lbalk i.v, .dm-lleg i.v { background:#fff; box-shadow:inset 0 0 0 .1em #b8c4be; }
.dm-lleg { display:flex; align-items:center; gap:1.2em; font-size:1em; color:#555; margin-bottom:.9em; white-space:nowrap; }
.dm-lleg > span { display:inline-flex; align-items:center; gap:.4em; } .dm-lleg i { display:inline-block; width:.85em; height:.85em; border-radius:.15em; }
.dm-lleg b { color:#1a1a1a; } .dm-lleg em { font-style:normal; font-weight:600; color:#1a1a1a; margin-left:auto; }
.dm-grijs { color:#777; white-space:nowrap; }
/* Half scherm (naast tekst): geen uitnodigformulier en geen e-mailkolom, iets grotere letters */
@container (max-width: 680px) {
  .dm-app, .dm-balk { font-size:1.25cqw; }
  .dm-top-r b, .dm-sep, .dm-sub, .dm-uitnodigen .dm-rij { display:none; } /* 14-10-2026: de licentiebalk blijft zichtbaar */
  .dm-uitnodigen .dm-lleg { margin-bottom:0; }
  .dm-main { padding:2em 2.6em; }
  .dm-kop { align-items:center; }
  .dm-stats { gap:1em; }
  .dm-stat { padding:1em 1.2em; }
  .dm-tr { grid-template-columns:1.5fr 1.1fr 1.7fr .9fr 1.2fr; }
  .dm-tr > :nth-child(2) { display:none; }
}
/* Telefoon: ook de tijd en de subregels weg */
@container (max-width: 440px) {
  .dm-app, .dm-balk { font-size:1.6cqw; }
  .dm-main { padding:1.8em 2.2em; }
  .dm-ss { display:none; }
  .dm-stat { padding:.9em 1em; }
  .dm-tr { grid-template-columns:1.5fr 1.1fr 1.5fr 1.1fr; }
  .dm-tr > :nth-child(5) { display:none; }
}
/* Browservenster */
.dm-browser .dm-scherm { border-radius:12px; border:1px solid #dde3e0; background:#fff; box-shadow:0 24px 60px -24px rgba(10,50,35,.35), 0 2px 6px rgba(0,0,0,.05); }
.dm-balk { height:4.2em; background:#f1f3f2; border-bottom:.1em solid #e1e5e3; display:flex; align-items:center; gap:1.6em; padding:0 1.6em; }
.dm-stippen { display:flex; gap:.7em; }
.dm-stippen i { width:1.2em; height:1.2em; border-radius:50%; background:#ff5f57; }
.dm-stippen i:nth-child(2) { background:#febc2e; } .dm-stippen i:nth-child(3) { background:#28c840; }
.dm-adres { flex:0 1 46em; margin:0 auto; transform:translateX(-2.4em); background:#fff; border:.1em solid #e1e5e3; border-radius:.6em; height:2.6em; display:flex; align-items:center; justify-content:center; font-size:1.2em; color:#777; }
/* Homepage: het voorbeeld heeft een eigen hoogte; midden naast de tekst (vervangt de oude vaste hoogte) */
.zakelijk-inner .zakelijk-visual { align-self:center; position:static; min-height:0; overflow:visible; border-radius:0; }

/* ── Voorbeeld locatie-overzicht (14-10-2026, partials/locaties-mockup.php) ──
   Verkleinde weergave van het echte werkgeversdashboard met locaties (compacte tabel: Locatie · Manager · Geslaagd · Licenties). */
.dm-loc .dm-tr { grid-template-columns: 1.6fr 1.5fr 1.5fr .8fr; }
.dm-loc .dm-tr > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-loc .dm-app { aspect-ratio: auto; }
.dm-loc .dm-app::after { display: none; }
.dm-loc-plaats { font-weight:400; color:#777; }
.dm-loc .dm-waarsch { display:block; font-weight:400; font-size:.82em; color:#7a5a00; margin-top:.15em; }
.dm-loc .dm-man-link { color: var(--green); font-weight: 600; text-decoration: underline; }
.dm-loc .dm-r { text-align: right; }
.dm-loc .dm-vg .dm-bar { flex: 0 0 4.5em; }
.dm-loc .dm-van { color:#555; }
.dm-loc .dm-bar span.dm-0 { background:#cbd5e1; }
.dm-loc .dm-zonder, .dm-loc .dm-zonder .dm-naam { color:#888; }
.dm-loc .dm-totaal { font-weight:800; border-top:.2em solid #e5e9e7; }
.dm-loc .dm-totaal .dm-van { color:#1a1a1a; }
@container (max-width: 680px) { .dm-loc .dm-tr { grid-template-columns: 1.5fr 1.3fr 1.6fr .8fr; } .dm-loc .dm-tr > :nth-child(2) { display:block; } }
@container (max-width: 440px) { .dm-loc .dm-tr { grid-template-columns: 1.4fr 1.6fr .8fr; } .dm-loc .dm-tr > :nth-child(2) { display:none; } .dm-loc .dm-tr > .dm-vg { display:flex; } }