/* Rosteris — plannersportaal.
   Beeldtaal van de weg: bordblauw voor handelingen, werkgeel voor wat nog open staat,
   verbodsrood voor regelconflicten. Alles verder rustig en grijs als asfalt. */

@font-face {
  font-family: "Overpass";
  src: url("fonts/overpass.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --asfalt: #2b3035;
  --asfalt-zacht: #5d656d;
  --grind: #f2f3f1;
  --berm: #ffffff;
  --lijn: #d9dcdf;
  --blauw: #0b4f9c;
  --blauw-donker: #083c77;
  --geel: #f7c600;
  --rood: #c8102e;
  --rood-zacht: #fbe9ec;
  --groen: #2f7d4f;
  --focus: #0b4f9c;
  --r-klein: 3px;
  --r: 6px;
  --stap: 8px;
  font-family: "Overpass", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--asfalt);
  background: var(--grind);
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 var(--stap); max-width: 70ch; }
a { color: var(--blauw); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- Opbouw ---------- */

.schil { display: grid; grid-template-columns: 262px 1fr; min-height: 100vh; }
.merk { font-weight: 800; font-size: 1.3rem; letter-spacing: 0.01em; padding: 0 10px 18px; color: #fff; }
.merk span { display: block; font-size: 0.78rem; font-weight: 400; color: #aeb5bc; letter-spacing: 0; }

.inhoud { padding: 24px 32px 48px; min-width: 0; }
.kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.kop .acties { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sub { color: var(--asfalt-zacht); }

/* ---------- Bedieningselementen ---------- */

button, .knop {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--r-klein);
  padding: 7px 14px; border: 1px solid var(--blauw); background: var(--blauw); color: #fff;
}
button:hover { background: var(--blauw-donker); }
a.knop { display: inline-block; text-decoration: none; }
a.knop:hover { background: var(--blauw-donker); }
button.stil, .knop.stil { background: var(--berm); color: var(--blauw); border-color: var(--lijn); }
button.stil:hover, .knop.stil:hover { border-color: var(--blauw); background: var(--berm); }
button.gevaar { background: var(--rood); border-color: var(--rood); }
button:disabled { opacity: 0.5; cursor: default; }
input, select, textarea {
  font: inherit; color: inherit; background: var(--berm); border: 1px solid #b9bfc5;
  border-radius: var(--r-klein); padding: 6px 8px; min-width: 0;
}
textarea { width: 100%; min-height: 70px; }
label { display: flex; flex-direction: column; gap: 3px; font-size: 0.88rem; font-weight: 600; }
label.rij { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; }
.velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; margin-bottom: 14px; }
.velden .breed { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--lijn); border-radius: var(--r); padding: 10px 14px 12px; margin: 0 0 14px; }
legend { font-weight: 600; font-size: 0.88rem; padding: 0 4px; }
.dagen { display: flex; gap: 10px; flex-wrap: wrap; }

.vlak { background: var(--berm); border: 1px solid var(--lijn); border-radius: var(--r); padding: 18px 20px; margin-bottom: 20px; }
.vlak > h2 { margin-bottom: 12px; }

table.lijst { width: 100%; border-collapse: collapse; background: var(--berm); border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; }
.lijst th, .lijst td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.lijst th { font-size: 0.85rem; color: var(--asfalt-zacht); font-weight: 600; background: #f8f9f8; }
.lijst tr:last-child td { border-bottom: 0; }
.lijst tr.klikbaar { cursor: pointer; }
.lijst tr.klikbaar:hover td { background: #f6f8fb; }
.tabelhouder { overflow-x: auto; }

.label { white-space: nowrap; display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: #e6e9ec; }
.label.goed { background: #e3f1e8; color: var(--groen); }
.label.let { background: #fff4c7; color: #6b5500; }
.label.fout { background: var(--rood-zacht); color: var(--rood); }

.leeg { border: 1px dashed #b9bfc5; border-radius: var(--r); padding: 22px; text-align: center; color: var(--asfalt-zacht); background: var(--berm); }
.leeg p { margin: 0 auto 10px; }

/* ---------- Inloggen ---------- */

.poort { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(180deg, var(--asfalt) 0 38%, var(--grind) 38% 100%); }
.poort .vlak { width: min(400px, 100%); padding: 28px; box-shadow: 0 10px 30px rgba(20, 24, 28, 0.18); }
.poort .merk { color: var(--asfalt); padding: 0 0 18px; }
.poort .merk span { color: var(--asfalt-zacht); }
.poort label { margin-bottom: 12px; }
.poort button { width: 100%; margin-top: 6px; }
.qr { display: grid; place-items: center; padding: 12px; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); margin: 10px 0; }
.geheim { font-family: inherit; letter-spacing: 0.08em; word-break: break-all; font-size: 0.85rem; color: var(--asfalt-zacht); }

/* ---------- Rooster ---------- */

.weeknav { display: flex; align-items: center; gap: 6px; }
.weeknav strong { min-width: 190px; text-align: center; }
.vast { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--asfalt-zacht); font-size: 0.9rem; }



.mijn-dienst { background: var(--berm); border: 1px solid var(--lijn); border-left: 4px solid var(--blauw); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; }
.mijn-dienst.nu { border-left-color: var(--geel); }
.mijn-dienst .tijd { font-weight: 700; font-size: 1.05rem; }
.mijn-dienst .knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.klokstatus { display: flex; align-items: center; gap: 10px; background: var(--asfalt); color: #fff; border-radius: var(--r); padding: 12px 16px; margin-bottom: 16px; }
.klokstatus strong { font-size: 1.05rem; }
.klokstatus.werk { background: var(--groen); }
.klokstatus.pauze { background: #6b5500; }


/* ---------- Zijpaneel ---------- */

.paneel-achter { position: fixed; inset: 0; background: rgba(20, 24, 28, 0.35); z-index: 900; }
.paneel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--berm);
  z-index: 901; display: flex; flex-direction: column; box-shadow: -12px 0 28px rgba(20, 24, 28, 0.2);
}
.paneel > header { padding: 18px 20px 12px; border-bottom: 1px solid var(--lijn); display: flex; justify-content: space-between; gap: 10px; }
.paneel .romp { padding: 14px 20px 24px; overflow-y: auto; flex: 1; }
@media (prefers-reduced-motion: no-preference) {
  .paneel { animation: inschuiven 160ms ease-out; }
  @keyframes inschuiven { from { transform: translateX(24px); } to { transform: none; } }
}

.kandidaat { border: 1px solid var(--lijn); border-radius: var(--r); padding: 9px 11px; margin-bottom: 8px; }
.kandidaat.nee { border-left: 4px solid var(--rood); }
.kandidaat.ja { border-left: 4px solid var(--groen); }
.kandidaat .boven { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kandidaat ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.85rem; }
.kandidaat li.over { color: var(--rood); }
.kandidaat li.waar { color: #6b5500; }
.zoekveld { width: 100%; margin-bottom: 12px; }

/* ---------- Kaart ---------- */

.kaart { height: 380px; border-radius: var(--r); border: 1px solid var(--lijn); margin-bottom: 12px; }
.adreslijst { list-style: none; margin: 6px 0 12px; padding: 0; border: 1px solid var(--lijn); border-radius: var(--r); }
.adreslijst li button { width: 100%; text-align: left; background: var(--berm); color: var(--asfalt); border: 0; border-bottom: 1px solid var(--lijn); border-radius: 0; font-weight: 400; }
.adreslijst li:last-child button { border-bottom: 0; }
.adreslijst li button:hover { background: #f6f8fb; }
.speld { width: 16px; height: 16px; border-radius: 50%; background: var(--blauw); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--blauw); }
.speld.post { background: var(--geel); box-shadow: 0 0 0 2px var(--asfalt); }
.speld.meld { background: var(--groen); box-shadow: 0 0 0 2px var(--groen); }

/* ---------- Meldingen ---------- */

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--asfalt); color: #fff;
  padding: 10px 18px; border-radius: var(--r); z-index: 1000; font-weight: 600; max-width: 90vw; }
.toast.fout { background: var(--rood); }
.foutvak { background: var(--rood-zacht); color: var(--rood); border: 1px solid #f0bcc5; border-radius: var(--r); padding: 10px 12px; margin-bottom: 12px; font-weight: 600; }

dialog { border: 0; border-radius: var(--r); padding: 20px 22px; width: min(460px, 94vw); box-shadow: 0 16px 40px rgba(20, 24, 28, 0.3); }
dialog::backdrop { background: rgba(20, 24, 28, 0.4); }
dialog h2 { margin-bottom: 8px; }
dialog .knoppen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---------- Smal scherm ---------- */

@media (max-width: 820px) {
  .schil { grid-template-columns: 1fr; }
  .inhoud { padding: 18px 14px 40px; }
  .week { grid-template-columns: 1fr; }
}

/* ---------- Documenten en afwezigheid ---------- */
.pagina h2, .pagina h3, .pagina h4 { margin: 14px 0 6px; }
.pagina ul { padding-left: 20px; }
.pagina p, .pagina li { max-width: 70ch; }
.doc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--lijn); border-radius: var(--r); padding: 9px 11px; margin-bottom: 6px; background: var(--berm); }
.doc .titel { font-weight: 600; }
.doc .knoppen { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--lijn); }
.tabs a { padding: 8px 12px; text-decoration: none; color: var(--asfalt-zacht); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a[aria-current="page"] { color: var(--asfalt); border-bottom-color: var(--blauw); }

/* ---------- Dashboard ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
a.kpi { text-decoration: none; color: inherit; margin: 0; padding: 14px 16px; border-left: 4px solid var(--lijn); }
a.kpi:hover { border-color: var(--blauw); }
a.kpi.let { border-left-color: var(--geel); }
a.kpi.fout { border-left-color: var(--rood); }
.kpi .getal { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 20px; }
.rijstaaf { display: grid; grid-template-columns: minmax(90px, 1fr) 170px 70px; align-items: center; gap: 8px; font-size: 0.9rem; margin: 3px 0; }

/* ---------- Roostermatrix (rijen = opdrachten, kolommen = dagen) ---------- */
.roosterbalk { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.roosterbalk .zoekfilter input { min-width: 240px; }
.navgroep { display: flex; flex-wrap: wrap; gap: 14px; }
.navblok { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 4px; }
.navblok .deze { grid-column: 1 / -1; text-align: center; font-size: 0.78rem; }
.navblok .pijl { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #8d9197; color: #fff;
  text-decoration: none; font-size: 1.3rem; line-height: 1; }
.navblok .pijl:hover, .navblok .pijl:focus-visible { background: var(--blauw); }
.navblok .navlabel { border: 1px solid var(--lijn); background: #fff; border-radius: 4px; padding: 4px 14px; min-width: 96px; text-align: center;
  color: var(--asfalt); text-decoration: none; }
.navblok .navlabel.actief { border-color: var(--blauw); font-weight: 700; box-shadow: inset 0 -2px 0 var(--blauw); }
.roostersom { margin: 6px 0 8px; }
.roostersom .rood { color: var(--rood); font-weight: 700; }
.tijdwissel { margin: 0 0 8px; padding: 7px 10px; border-radius: 4px; background: #fff4e0; color: #8a4b00; font-size: 0.9rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.matrixhouder { overflow: auto; max-height: calc(100vh - 250px); min-height: 200px; border: 1px solid #c7cbd1; background: #fff; }
table.matrix { border-collapse: separate; border-spacing: 0; font-size: 0.86rem; }
.matrix th, .matrix td { border-right: 1px solid #dcdfe3; border-bottom: 1px solid #dcdfe3; }
.matrix thead th { position: sticky; z-index: 2; }
.matrix .wkkop { top: 0; height: 30px; background: #d5d8dc; color: #2b2f33; font-weight: 600; text-align: left; padding-left: 10px; white-space: nowrap;
  border-left: 2px solid #aeb3b9; }
.matrix .wkkop > span:first-child { text-decoration: underline; }
.matrix .wkkop .vast { font-size: 0.72rem; margin-left: 6px; }
.matrix .wkkop button.klein { padding: 1px 8px; font-size: 0.72rem; margin-left: 6px; }
.matrix .dagkop.weekstart, .matrix td.cel.weekstart { border-left: 2px solid #aeb3b9; }
.matrix .dagkop { top: 30px; height: 44px; background: #b4b8be; color: #fff; font-weight: 700; min-width: 150px; white-space: nowrap; }
.matrix .dagkop.vandaag { background: var(--blauw); }
.matrix .rkop { position: sticky; left: 0; z-index: 1; background: #fff; width: 190px; min-width: 190px; max-width: 190px; text-align: left;
  vertical-align: top; padding: 6px 8px; font-weight: 400; }
.matrix thead .rkop.hoek { z-index: 3; top: 0; background: #fff; vertical-align: bottom; font-weight: 600; }
.matrix .rkop a { color: var(--blauw); }
.matrix .rkop .ref { font-size: 0.8rem; color: var(--asfalt-zacht); margin-top: 1px; word-break: break-word; }
.matrix .rinfo { margin-top: 12px; font-size: 0.76rem; font-style: italic; color: #8a9097; }
.matrix td.cel { position: relative; vertical-align: top; min-width: 150px; width: 150px; height: 120px; padding: 3px 3px 24px; }
.matrix td.cel.weekend { background: #fffbe0; }
.matrix td.cel.vandaag { background: #eef4ff; }
.matrix .blokken { display: flex; flex-direction: column; gap: 3px; }
.matrix .celvoet { position: absolute; left: 3px; right: 5px; bottom: 3px; display: flex; justify-content: space-between; align-items: flex-end; }
.matrix .celdatum { font-size: 0.68rem; font-style: italic; color: #a3a8ae; }
.matrix .plus { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 3px; background: #9fd49b; color: #fff; font-weight: 700; line-height: 18px;
  opacity: 0.55; }
.matrix .plus:hover, .matrix .plus:focus-visible { opacity: 1; background: var(--groen); }
.matrix .plek.dienst { display: block; width: 100%; text-align: left; border: 0; border-right: 4px solid transparent; border-radius: 3px;
  padding: 3px 6px; color: #1d1f22; font-size: 0.8rem; font-weight: 400; line-height: 1.35; cursor: pointer; }
.matrix .plek.dienst:hover, .matrix .plek.dienst:focus-visible { outline: 2px solid var(--blauw); outline-offset: 0; }
.matrix .plek.open { background: #fff; border: 1px dashed var(--rood); border-right: 4px solid var(--rood); color: var(--rood); }
.matrix .plek.overschreven { border-right-color: #f47b20; }
.matrix .plek.geklokt { border-right-color: var(--groen); }
.matrix .plek .r1, .matrix .plek .r2 { display: flex; align-items: center; gap: 5px; }
.matrix .plek .r2 { margin-top: 1px; }
.matrix .plek .r3 { display: block; font-size: 0.7rem; color: #2f3337; margin-top: 1px; }
.matrix .icoon { display: inline-flex; width: 15px; height: 15px; flex: none; }
.matrix .icoon svg { width: 100%; height: 100%; }
.matrix tr[hidden], .matrix .plek[hidden] { display: none; }
@media (max-width: 700px) {
  .matrix .rkop { width: 120px; min-width: 120px; max-width: 120px; }
  .matrixhouder { max-height: none; }
}
.roostersom .snel { display: inline-flex; gap: 7px; white-space: nowrap; margin-left: 6px; }

/* ---------- Hoofdmenu (groepen zoals Secusoft) ---------- */
.rail { background: #1c1e3f; color: #fff; display: flex; flex-direction: column; min-height: 100vh; position: sticky; top: 0; align-self: start;
  max-height: 100vh; overflow-y: auto; font-size: 0.95rem; }
.rail .topbalk { display: flex; align-items: center; gap: 10px; background: #0f9ad3; padding: 8px 10px; min-height: 48px; }
.rail .huis { display: inline-flex; width: 30px; height: 30px; color: #fff; flex: none; }
.rail .huis svg { width: 100%; height: 100%; }
.rail .bedrijf { flex: 1; min-width: 0; font-weight: 600; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .snelmenu { position: relative; }
.rail .snelmenu summary { list-style: none; cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; color: #7ed957;
  font-size: 2rem; font-weight: 800; line-height: 1; }
.rail .snelmenu summary::-webkit-details-marker { display: none; }
.rail .snellijst { position: absolute; right: 0; top: 34px; z-index: 30; background: #fff; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  padding: 6px; min-width: 210px; display: flex; flex-direction: column; }
.rail .snellijst button { background: none; border: 0; color: var(--asfalt); text-align: left; padding: 8px 10px; border-radius: 4px; font-weight: 500; }
.rail .snellijst button::before { content: "+ "; color: var(--groen); font-weight: 800; }
.rail .snellijst button:hover, .rail .snellijst button:focus-visible { background: #eef4ff; }
.rail .menuknop { display: none; background: none; border: 0; color: #fff; width: 32px; height: 32px; padding: 3px; }
.rail .menuknop svg { width: 100%; height: 100%; }
.rail .groep ul { list-style: none; margin: 0; padding: 0; }
.rail .groepkop { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 0; color: #fff; text-transform: uppercase;
  font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em; padding: 8px 12px; text-align: left; }
.rail .groepkop svg { width: 30px; height: 26px; flex: none; }
.rail .groepkop[aria-expanded="false"] { opacity: 0.85; }
.rail .item { display: grid; grid-template-columns: 1fr 30px 34px; align-items: center; border-bottom: 1px solid rgba(0,0,0,.18); min-height: 34px; }
.rail .item .naam { color: #fff; text-decoration: none; padding: 7px 8px 7px 12px; }
.rail .item .naam:hover { text-decoration: underline; }
.rail .item .plus { background: none; border: 0; color: #fff; font-size: 1.35rem; font-weight: 700; padding: 0; width: 30px; height: 30px; line-height: 1; }
.rail .item .plus.leeg { opacity: 0.25; display: grid; place-items: center; height: 30px; }
.rail .item button.plus:hover, .rail .item button.plus:focus-visible { color: #7ed957; }
.rail .item .lijst { display: inline-flex; width: 30px; height: 26px; color: #fff; margin: 0 2px; padding: 2px 3px; border-radius: 3px; }
.rail .item .lijst svg { width: 100%; height: 100%; }
.rail .item.actief { background: #13152e !important; }
.rail .item.actief .naam::before { content: "› "; font-weight: 800; }
.rail .item.actief .lijst { background: #1f7a2e; }
.rail .teal .groepkop { background: #0f9ad3; }   .rail .teal .item { background: #1b5877; }
.rail .blauw .groepkop { background: #2449a6; }  .rail .blauw .item { background: #202c6a; }
.rail .paars .groepkop { background: #8b46a8; }  .rail .paars .item { background: #45296b; }
.rail .groen .groepkop { background: #1d8a52; }  .rail .groen .item { background: #175a3c; }
.rail .onder { margin-top: auto; padding: 16px 10px 0; font-size: 0.85rem; color: #d7dae8; }
.rail .onder select { width: 100%; margin: 6px 0; }
.rail .onder .wie { margin-bottom: 6px; }
.rail .onder .online { display: inline-flex; align-items: center; gap: 6px; color: #fff; margin-bottom: 8px; }
.rail .onder .online svg { width: 20px; height: 20px; }
.rail .onder .links a { color: #fff; }
.rail .inklappen { display: block; margin: 16px -10px 0 auto; background: #1f9d4c; color: #fff; border: 0; border-radius: 0; padding: 8px 14px; font-weight: 500; }
@media (max-width: 820px) {
  .rail { position: static; min-height: 0; max-height: none; }
  .rail .menuknop { display: inline-flex; }
  .rail .groepen, .rail .onder { display: none; }
  .rail.open .groepen, .rail.open .onder { display: block; }
  .rail.open .onder { padding-bottom: 12px; }
}