@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/playfair-display-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/playfair-display-latin-600-normal.woff2") format("woff2"); }
:root {
  /* BeYou huisstijl */
  color-scheme: light;
  --bg: #f8f4f0;
  --kaart: #ffffff;
  --tekst: #2e2724;
  --zacht: #7c706a;
  --lijn: #ebe3dc;
  --lijn-sterk: #d9cdc2;
  --accent: #4c433f;          /* donkerbruin */
  --accent-hover: #362f2c;
  --accent-licht: #efe7e1;    /* crème */
  --zand: #cbb8a4;            /* taupe */
  --roze: #ecacad;            /* roze accent */
  --gevaar: #b4322b;
  --radius: 8px;
  --schaduw: 0 1px 2px rgba(76, 67, 63, .06), 0 1px 1px rgba(76, 67, 63, .04);
  --kopfont: "Playfair Display", Georgia, serif;

  --werk-bg: #efe7e1;  --werk: #4c433f;
  --verlof-bg: #e3eee5; --verlof: #3b6a48;
  --snipper-bg: #f9e3e3; --snipper: #a2474d;
  --bijzonder-bg: #ece7f4; --bijzonder: #5e4a8a;
  --ziek-bg: #f7dedb; --ziek: #b4322b;
  --feestdag-bg: #f6ecd6; --feestdag: #8a5d12;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tekst);
  font: 15px/1.55 "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-family: var(--kopfont); font-weight: 400; font-size: 1.75rem; margin: .2rem 0 1rem; letter-spacing: 0; }
h2 { font-family: var(--kopfont); font-weight: 400; font-size: 1.3rem; margin: 2rem 0 .75rem; }
.zacht { color: var(--zacht); font-weight: normal; }
.klein { font-size: .85rem; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 20px; padding-bottom: 60px; }
main.smal { max-width: 460px; }
main.middel { max-width: 860px; }

/* kopbalk */
.top { background: #fff; box-shadow: inset 0 3px 0 var(--accent-licht); border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 10; }
.top-in { display: flex; align-items: center; gap: 20px; min-height: 56px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--tekst); }
.brand:hover { text-decoration: none; }
.brand-naam { font-family: var(--kopfont); font-size: 1.45rem; font-weight: 400; letter-spacing: .01em; line-height: 1; }
.brand-naam i { font-style: normal; color: var(--roze); font-size: .7em; vertical-align: .55em; margin-left: 1px; }
.brand-sub { font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; color: var(--zacht); font-weight: 500; padding-left: 10px; border-left: 1px solid var(--lijn-sterk); }
.nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav a { padding: 8px 12px; border-radius: 8px; color: var(--zacht); white-space: nowrap; font-weight: 500; }
.nav a:hover { background: var(--bg); text-decoration: none; color: var(--tekst); }
.nav a.actief { background: var(--accent-licht); color: var(--accent); }
.wie { display: flex; align-items: center; gap: 12px; font-size: .9rem; }
.wie form { margin: 0; }
.linkknop { background: none; border: 0; padding: 0; color: var(--zacht); font: inherit; cursor: pointer; }
.linkknop:hover { color: var(--tekst); text-decoration: underline; }
@media (max-width: 760px) {
  .top-in { gap: 6px 12px; padding-top: 8px; }
  .nav { order: 3; flex-basis: 100%; margin: 0 -16px; padding: 0 12px 6px; }
  .wie { margin-left: auto; }
}

/* blokken */
.kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 18px; box-shadow: var(--schaduw); }
.kaart.geen-pad { padding: 0; overflow: hidden; }
.kaart + .kaart { margin-top: 12px; }
.kaart.leeg { text-align: center; color: var(--zacht); padding: 32px 18px; }
.kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kop h1, .kop h2 { margin: 0; }
h2 + .kaart, .kop + .kaart { margin-top: 0; }
.knoppen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.raster-2 > .kaart + .kaart, .raster-3 > .kaart + .kaart { margin-top: 0; }
@media (max-width: 800px) { .raster-2, .raster-3 { grid-template-columns: 1fr; } }
.scroll { max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); font-weight: 600; margin-bottom: 4px; }
.groot { font-family: var(--kopfont); font-size: 2.1rem; font-weight: 400; letter-spacing: 0; line-height: 1.2; }
.groot small { font-size: .9rem; font-weight: 500; color: var(--zacht); letter-spacing: 0; }
.groot-ish { font-size: 1.1rem; font-weight: 600; margin: 2px 0; }
.neg { color: var(--gevaar); }
.pos { color: var(--verlof); }
.lijst { margin: 0; padding-left: 18px; }
.teller { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 99px; background: var(--roze); color: #4c2a2b; font-size: .8rem; text-align: center; vertical-align: 2px; }

/* knoppen & formulieren */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
  border: 1px solid var(--lijn-sterk); border-radius: 8px; background: #fff; color: var(--tekst);
  font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; }
.knop:hover { background: var(--bg); text-decoration: none; }
.knop.primair { background: var(--accent); border-color: var(--accent); color: #fff; }
.knop.primair:hover { background: var(--accent-hover); }
.knop.gevaar { color: var(--gevaar); }
.knop.klein { height: 30px; padding: 0 10px; font-size: .85rem; }
.knop.breed { width: 100%; }
.inline { display: inline-flex; margin: 0; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: block; font-weight: 500; font-size: .92rem; }
.form label > input:not([type=checkbox]):not([type=radio]), .form label > select { display: block; margin-top: 4px; }
.form label.check, label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: normal; }
.form label[hidden] { display: none; }
input, select { font: inherit; color: inherit; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], select {
  height: 38px; padding: 0 10px; border: 1px solid var(--lijn-sterk); border-radius: 8px; background: #fff; width: 100%; min-width: 0; }
input:focus, select:focus, .knop:focus-visible { outline: 2px solid var(--zand); outline-offset: 1px; }
.knoppen input, .knoppen select { width: auto; }
input[type=checkbox], input[type=radio] { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.rij[hidden] { display: none; }
fieldset { border: 1px solid var(--lijn); border-radius: 8px; padding: 10px 14px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form > * { min-width: 0; }
legend { font-weight: 600; padding: 0 6px; font-size: .92rem; }
.rij-knoppen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.rij-knoppen input { flex: 1 1 160px; }
.hint { align-self: center; }

/* meldingen */
.melding { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; border: 1px solid; }
.m-ok { background: #e3eee5; border-color: #c3dac9; color: #2f5a3b; }
.m-fout { background: #fdecea; border-color: #f4c7c2; color: #8f1d13; }
.m-info { background: #fff8e6; border-color: #f1dca4; color: #6b4a07; font-weight: 500; }

/* chips */
.chip { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: .8rem; font-weight: 600; white-space: nowrap; line-height: 1.7; }
.t-werk { background: var(--werk-bg); color: var(--werk); }
.t-verlof { background: var(--verlof-bg); color: var(--verlof); }
.t-snipper { background: var(--snipper-bg); color: var(--snipper); }
.t-bijzonder { background: var(--bijzonder-bg); color: var(--bijzonder); }
.t-ziek { background: var(--ziek-bg); color: var(--ziek); }
.t-feestdag { background: var(--feestdag-bg); color: var(--feestdag); }
.legenda { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.status { display: inline-block; padding: 0 8px; border-radius: 99px; font-size: .78rem; font-weight: 600; background: var(--bg); color: var(--zacht); }
.s-goedgekeurd { background: var(--verlof-bg); color: var(--verlof); }
.s-aangevraagd { background: #fff3d6; color: #8a5a00; }
.s-afgewezen { background: #fdecea; color: var(--gevaar); }

/* tabellen */
.tabel { width: 100%; border-collapse: collapse; background: var(--kaart); }
.tabel th, .tabel td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
.tabel thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--zacht); background: #fbf8f5; font-weight: 600; white-space: nowrap; }
.tabel tbody tr:last-child td, .tabel tbody tr:last-child th { border-bottom: 0; }
.tabel tfoot th, .tabel tfoot td { border-top: 2px solid var(--lijn-sterk); border-bottom: 0; font-weight: 600; background: #fbf8f5; }
.tabel.compact td { padding: 5px 0; border: 0; }
.tabel tr.weekend { background: #fbf8f5; }
.tabel tr.vandaag { background: #fbeeee; }
.tabel tr.gekozen { background: #fff8e6; }
.tabel tr.inactief { opacity: .55; }
.datumcel { width: 110px; white-space: nowrap; font-weight: 600; }
.getal { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechts { text-align: right; }
.rechts form { display: inline; }
table.tabel.kaart { border-collapse: separate; border-spacing: 0; }

/* weekrooster */
.rooster { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; background: var(--kaart);
  border: 1px solid var(--lijn); border-radius: var(--radius); }
.rooster th, .rooster td { border-bottom: 1px solid var(--lijn); border-left: 1px solid var(--lijn); padding: 0; vertical-align: top; }
.rooster thead th { padding: 8px; font-weight: 500; text-align: left; font-size: .9rem; color: var(--zacht); background: #fbf8f5; }
.rooster thead th b { color: var(--tekst); font-size: 1rem; }
.rooster thead th:first-child { border-top-left-radius: var(--radius); }
.rooster thead th:last-child { border-top-right-radius: var(--radius); }
.rooster tbody tr:last-child > * { border-bottom: 0; }
.rooster .naamcel { position: sticky; left: 0; background: #fff; border-left: 0; padding: 10px 12px; text-align: left; font-weight: 600; min-width: 150px; z-index: 1; }
.rooster thead .naamcel { background: #fbf8f5; }
.rooster td.getal { padding: 10px 12px; font-weight: 600; }
.rooster th.weekend, .rooster td.weekend { background: #fbf8f5; }
.rooster th.vandaag { color: var(--accent); box-shadow: inset 0 3px 0 var(--roze); }
.rooster td.vandaag { background: #fcf9f6; }
.rooster tr.eigen .naamcel { color: var(--accent); }
.rooster td .chip { display: block; margin: 6px 6px 0; text-align: center; }
.rooster td .chip:last-child { margin-bottom: 6px; }
.celklik { display: block; min-height: 44px; color: inherit; }
.celklik:hover { background: var(--bg); text-decoration: none; }
.celklik .plus { display: block; text-align: center; line-height: 44px; color: transparent; font-size: 1.2rem; }
.celklik:hover .plus { color: var(--zacht); }
.fd { font-size: .72rem; color: var(--feestdag); font-weight: 600; }

/* jaaroverzicht */
.raster-zij { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
@media (max-width: 960px) { .raster-zij { grid-template-columns: 1fr; } }
.maanden { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.maand { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 10px 12px 12px; box-shadow: var(--schaduw); }
.maandnaam { font-family: var(--kopfont); font-size: 1.05rem; margin-bottom: 4px; }
.mini { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.mini th { font-size: .7rem; color: var(--zacht); font-weight: 600; }
.mini td { text-align: center; font-size: .78rem; height: 26px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.mini td a { display: block; color: inherit; line-height: 26px; border-radius: 5px; }
.mini td a:hover { text-decoration: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.mini td.t-werk { background: var(--werk-bg); color: var(--werk); }
.mini td.vandaag { box-shadow: inset 0 0 0 2px var(--roze); font-weight: 700; }
.mini td.buiten { background: none; }
aside .kaart + .kaart { margin-top: 12px; }

/* saldo */
.saldo-hoofd { margin-bottom: 8px; }
.saldo-regels { margin: 0 0 12px; font-size: .9rem; }
.saldo-regels div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed var(--lijn); }
.saldo-regels dt { color: var(--zacht); }
.saldo-regels dd { margin: 0; font-variant-numeric: tabular-nums; }

/* verlof */
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.kaarten .kaart + .kaart { margin-top: 0; }
.opm { margin: 6px 0 0; font-style: italic; color: var(--zacht); }

/* contracten */
.contract.lopend { border-left: 4px solid var(--zand); }
.contract-cijfers { display: flex; gap: 32px; margin: 4px 0 12px; }
.contract-cijfers b { font-size: 1.2rem; }
.weekpatroon { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.weekpatroon div { background: var(--werk-bg); color: var(--werk); border-radius: 6px; padding: 6px; font-size: .8rem; font-weight: 600; text-align: center; }
.weekpatroon div span { display: block; text-transform: uppercase; font-size: .7rem; opacity: .7; }
.weekpatroon div.vrij { background: var(--bg); color: var(--zacht); }
@media (max-width: 600px) { .weekpatroon { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.patroon { width: 100%; border-collapse: collapse; }
.patroon th, .patroon td { padding: 4px 6px; text-align: left; }
.patroon thead th { font-size: .75rem; text-transform: uppercase; color: var(--zacht); }
.patroon tbody th { font-weight: 500; }
.patroon tr.vrij input[type=time], .patroon tr.vrij input[type=number] { opacity: .35; }
.patroon tfoot th, .patroon tfoot td { border-top: 1px solid var(--lijn); padding-top: 8px; }
@media (max-width: 600px) {
  .patroon thead th:nth-child(5), .patroon td:nth-child(5) { display: none; }
  .patroon input[type=time] { padding: 0 4px; min-width: 88px; }
  .patroon th, .patroon td { padding: 3px; }
  fieldset { min-width: 0; }
}

.login { margin-top: 10vh; }
.groot-brand { justify-content: center; width: 100%; margin-bottom: 22px; }
.groot-brand .brand-naam { font-size: 2.2rem; }

@media print {
  .top, .knoppen, .melding, .legenda + *, .celklik .plus { display: none !important; }
  body { background: #fff; font-size: 11px; }
  main.wrap { max-width: none; padding: 0; }
  .kaart, .maand, .rooster { box-shadow: none; }
  .rooster { min-width: 0; }
  .scroll { overflow: visible; }
  .chip, .mini td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .raster-zij { grid-template-columns: 1fr 200px; }
  .maanden { grid-template-columns: repeat(4, 1fr); }
}

/* voorstel (concept) */
.chip.concept { background: repeating-linear-gradient(135deg, #fff 0 5px, var(--accent-licht) 5px 10px); color: var(--zacht); outline: 1px dashed var(--zand); outline-offset: -1px; }
.voorstel-balk { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fffaf3; border: 1px dashed var(--zand); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; }
@media print { .voorstel-balk, .chip.concept { display: none !important; } }
.patroon .kort { display: none; }
@media (max-width: 600px) { .patroon .lang { display: none; } .patroon .kort { display: inline; } }