/* Wat de echte site anders doet dan de klikbare mockup. */
body::before { background: var(--ns-navy); }
.ns-pre-rechts > a.is-bel { font-weight: 500; color: var(--ns-sub); }
.ns-slot-bel a, .ns-belkaart a, .ns-voet-contact a { color: inherit; }
.ns-logoplek img { max-height: 40px; width: auto; }
[hidden] { display: none !important; }
/* Keuzeknoppen en vinktegels zijn echte radio's en vinkjes: het vakje zelf is onzichtbaar, de tegel toont de keuze. */
.ns-keuze, .ns-vinktegel { position: relative; }
.ns-keuze input, .ns-vinktegel input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ns-keuze:has(input:focus-visible), .ns-vinktegel:has(input:focus-visible) { outline: 2px solid var(--ns-turk-tekst); outline-offset: 2px; }
.ns-drop:has(input:focus-visible) { outline: 2px solid var(--ns-turk-tekst); outline-offset: 2px; }
.ns-vanger { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
fieldset.ns-stap { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 20px; }
.ns-vac-link { color: inherit; }
.ns-vac-link:hover { color: var(--ns-turk-tekst); }
.ns-leeg { display: grid; gap: 8px; justify-items: start; padding: 24px; margin-bottom: 16px; }
@container ns (max-width: 1040px) {
  .ns-filters.is-open { display: grid; position: static; margin-bottom: 16px; }
}
.ns-dagtegel, .ns-tijdtegel { position: relative; display: grid; place-items: center; }
.ns-dagtegel input, .ns-tijdtegel input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ns-dagtegel:has(input:focus-visible), .ns-tijdtegel:has(input:focus-visible) { outline: 2px solid var(--ns-turk-tekst); outline-offset: 2px; }
.ns-tijden-dag { display: grid; gap: 8px; }
.ns-tijden-dag > b { font-size: 14px; color: var(--ns-sub); }
.ns-keur { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Kantoor */
.ns-zb-voet form { margin: 0; }
.ns-zb-uit { appearance: none; background: none; border: 0; font-family: inherit; width: 100%; text-align: left; }
.ns-zoekmini { display: flex; }
.ns-qr { width: 200px; height: 200px; image-rendering: pixelated; border: 1px solid var(--ns-lijn); border-radius: var(--ns-r); }
.ns-notitieform { display: grid; gap: 8px; justify-items: start; margin-bottom: 16px; }
.ns-notitieform textarea { width: 100%; min-height: 72px; }
.ns-notitie { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--ns-lijn2); }
.ns-notitie span { color: var(--ns-zwak); font-size: 14px; }
.ns-notitie p { grid-column: 1 / -1; margin: 0; white-space: pre-wrap; }
.ns-bewaarde-tekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.ns-tabel tr.is-uit td { opacity: .55; }
.ns-vinkrij { display: grid; gap: 12px; }
.ns-vraagrij { padding-top: 12px; border-top: 1px solid var(--ns-lijn2); }
.ns-filterrij { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ns-rijform { margin: 0; }
.ns-knoppen form { margin: 0; }
.ns-melding.is-goed { margin-bottom: 16px; }
code { overflow-wrap: anywhere; }
@container ns (max-width: 860px) {
  .ns-zijbalk.is-open { display: flex; position: fixed; inset: 0 0 64px 0; z-index: 70; overflow: auto; width: auto; }
}
.ns-vertaalrij { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid var(--ns-lijn2); }
.ns-vertaalrij:first-child { border-top: 0; padding-top: 0; }
.ns-vertaalrij p { margin: 0; }
.ns-vertaalrij .ns-knoppen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.ns-controles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ns-controles li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.ns-controles li span { display: grid; gap: 2px; }
.ns-controles small { color: var(--ns-sub); font-size: 14px; }
.ns-controles .is-goed > .ns-i { color: var(--ns-goed); }
.ns-controles .is-fout > .ns-i { color: var(--ns-fout); }
.ns-controles .is-let > .ns-i { color: var(--ns-let); }
.ns-seg label { cursor: pointer; }
.ns-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ns-docform { border-top: 1px solid var(--ns-lijn2); }
a.ns-wiecel { color: inherit; }
/* App: de urenweek */
.ns-urenweek { display: grid; gap: 8px; }
.ns-urendag { display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(3, minmax(0, 1fr)) 64px; gap: 8px 12px; align-items: end; padding: 12px 0; border-top: 1px solid var(--ns-lijn2); }
.ns-urendag > b { align-self: center; }
.ns-urendag label { display: grid; gap: 4px; font-size: 14px; color: var(--ns-sub); }
.ns-urendag em { font-style: normal; font-weight: 700; text-align: right; align-self: center; font-variant-numeric: tabular-nums; }
.ns-urendag.is-uit { opacity: .5; }
.ns-urentotaal { display: flex; justify-content: space-between; font-size: 18px; margin: 8px 0 16px; padding-top: 12px; border-top: 2px solid var(--ns-lijn); }
@container ns (max-width: 640px) {
  .ns-urendag { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ns-urendag > b { grid-column: 1 / -1; }
  .ns-urendag em { grid-column: 1 / -1; text-align: left; }
}
.ns-melding code { display: block; margin: 4px 0; }
.ns-tekst-fout { color: var(--ns-fout); }
a.ns-zb-zoek { text-decoration: none; }
.ns-zoekgroot { margin-bottom: 16px; }
.ns-zoekgroot .ns-zoekveld { width: 100%; }
.ns-beeldraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 12px; }
.ns-beeldraster figure { margin: 0; display: grid; gap: 4px; }
.ns-beeldraster img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ns-r); border: 1px solid var(--ns-lijn); background: var(--ns-grond); }
.ns-beeldraster figcaption { font-size: 13px; color: var(--ns-sub); overflow-wrap: anywhere; }
/* planning */
.ns-planfilter { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ns-planfilter .ns-label { margin: 0; }
.ns-planfilter .ns-veld { width: auto; max-width: 100%; }
.ns-plantabel { min-width: 760px; }
.ns-plantabel th.is-vandaag { color: var(--ns-turk-tekst); }
.ns-plancel.is-leeg { text-align: center; color: var(--ns-zwak); background: transparent; }
a.ns-plancel { text-decoration: none; }
a.ns-plancel:hover { box-shadow: inset 0 0 0 1px var(--ns-turk); }
form.ns-melding { flex-wrap: wrap; align-items: center; }
form.ns-melding > div { flex: 1 1 260px; min-width: 0; }
@media (max-width: 700px) {
  .ns-plantabel { min-width: 880px; }
  .ns-plantabel th:first-child, .ns-plantabel td:first-child { width: 220px; }
}
/* huisvesting */
.ns-bezetting { display: grid; gap: 4px; min-width: 0; }
.ns-bezetting .ns-balkje { max-width: 200px; }
.ns-rij > form.ns-rijform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
@container ns (max-width: 640px) {
  .ns-rij > form { grid-column: 2; justify-self: start; }
  .ns-rij > form.ns-rijform { justify-content: flex-start; }
}
/* verlof: afstemming per opdrachtgever, vastleggen achter één tik */
.ns-afstem { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.ns-afstem + .ns-afstem { margin-top: 16px; }
.ns-afstem summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; }
.ns-afstem summary::-webkit-details-marker { display: none; }
.ns-afstem form { display: grid; gap: 8px; margin-top: 8px; }
.ns-afstemform { display: grid; gap: 8px; margin: 0; }
:is(.ns-afstem, .ns-afstemform) .ns-knoppen { gap: 8px; }