/* Urenregistratie Zizonu */
:root {
  --bg: #f5f6f8; --kaart: #ffffff; --tekst: #1d2330; --zacht: #5d6677; --lijn: #e1e5ec;
  --merk: #1f6f78; --merk-tekst: #ffffff; --merk-zacht: #e3f1f2;
  --fout: #b42318; --fout-zacht: #fdecea; --ok: #1a7f4b; --ok-zacht: #e6f4ec;
  --let-op: #9a6700; --let-op-zacht: #fff5d6;
  --rond: 10px; --schaduw: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151b; --kaart: #1b2029; --tekst: #e7eaf0; --zacht: #9aa3b2; --lijn: #2c3340;
    --merk: #4fb3bd; --merk-tekst: #0c1216; --merk-zacht: #173338;
    --fout: #ff8a80; --fout-zacht: #3a1d1b; --ok: #6fd39c; --ok-zacht: #173325;
    --let-op: #f2c14e; --let-op-zacht: #3a3016;
    --schaduw: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--tekst); font-size: 15px; line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
.laden { padding: 2rem; color: var(--zacht); text-align: center; }
.verborgen { display: none !important; }

/* Kopbalk */
.kop { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1rem; background: var(--kaart); border-bottom: 1px solid var(--lijn); }
.kop h1 { font-size: 1.05rem; margin: 0; }
.kop .ruimte { flex: 1; }
.kop .wie { color: var(--zacht); font-size: .9rem; }
.label-beheer { background: var(--let-op-zacht); color: var(--let-op); border-radius: 99px; padding: .1rem .55rem; font-size: .78rem; font-weight: 600; }

main { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond); box-shadow: var(--schaduw);
  padding: 1rem; margin-bottom: 1rem; }
.kaart h2 { font-size: 1rem; margin: 0 0 .75rem; }

/* Knoppen */
.knop { border: 1px solid var(--lijn); background: var(--kaart); border-radius: 8px; padding: .5rem .9rem; cursor: pointer; white-space: nowrap; }
.knop:hover { border-color: var(--merk); }
.knop.hoofd { background: var(--merk); color: var(--merk-tekst); border-color: var(--merk); font-weight: 600; }
.knop.klein { padding: .25rem .55rem; font-size: .85rem; }
.knop.gevaar { color: var(--fout); }
.knop:disabled { opacity: .55; cursor: default; }
.link { background: none; border: 0; color: var(--merk); cursor: pointer; padding: 0; text-decoration: underline; }

/* Formulieren */
.veld { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.veld label { font-size: .82rem; color: var(--zacht); font-weight: 600; }
.veld input, .veld select, .veld textarea { width: 100%; border: 1px solid var(--lijn); border-radius: 8px; padding: .5rem .6rem; background: var(--kaart); }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: 2px solid var(--merk); outline-offset: -1px; border-color: var(--merk); }
.veld textarea { min-height: 4.5rem; resize: vertical; }
.veld .ongeldig { border-color: var(--fout); background: var(--fout-zacht); }
.vast { padding: .5rem .6rem; border: 1px dashed var(--lijn); border-radius: 8px; color: var(--zacht); }
.invoer-raster { display: grid; gap: .75rem; grid-template-columns: 2fr 1.2fr .8fr 1.2fr 1fr; }
.invoer-raster .breed { grid-column: 1 / -1; }
.acties { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .75rem; }
@media (max-width: 760px) {
  .invoer-raster { grid-template-columns: 1fr 1fr; }
  .invoer-raster .project, .invoer-raster .beschrijving { grid-column: 1 / -1; }
}

/* Meldingen */
.melding { border-radius: 8px; padding: .55rem .8rem; margin: .5rem 0; }
.melding.fout { background: var(--fout-zacht); color: var(--fout); }
.melding.ok { background: var(--ok-zacht); color: var(--ok); }
.melding.info { background: var(--merk-zacht); }
.toast { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 50; box-shadow: var(--schaduw); max-width: calc(100% - 2rem); }

/* Inloggen */
.inlog { max-width: 420px; margin: 8vh auto; }
.namen { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: 1rem; }
.namen .knop { padding: .8rem; font-size: 1rem; }
.namen .knop.gekozen { background: var(--merk); color: var(--merk-tekst); border-color: var(--merk); }
.wachtwoord input { font-size: 1.05rem; }
/* onzichtbaar maar aanwezig: naamveld voor wachtwoordmanagers */
.voor-schermlezer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Periode: maand + weken */
.periode { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.periode .maand { font-weight: 700; min-width: 9.5rem; text-align: center; }
.weken { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .75rem; }
.chip { border: 1px solid var(--lijn); background: var(--kaart); border-radius: 99px; padding: .3rem .7rem; cursor: pointer; font-size: .86rem; }
.chip.actief { background: var(--merk); color: var(--merk-tekst); border-color: var(--merk); }
.chip small { opacity: .8; }
.slot { color: var(--let-op); font-weight: 600; font-size: .85rem; }

/* Totalen */
.totaal { font-size: 1.6rem; font-weight: 700; }
.totaal small { font-size: .9rem; font-weight: 400; color: var(--zacht); }
.samenvatting { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .samenvatting { grid-template-columns: 1fr; } }
.samenvatting table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.samenvatting td { padding: .2rem 0; border-bottom: 1px solid var(--lijn); }
.samenvatting td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.samenvatting h3 { font-size: .85rem; color: var(--zacht); margin: 0 0 .35rem; }

/* Lijst per dag (medewerker) */
.dag { margin-bottom: .9rem; }
.dag-kop { display: flex; justify-content: space-between; font-weight: 700; font-size: .9rem; color: var(--zacht);
  border-bottom: 1px solid var(--lijn); padding-bottom: .25rem; margin-bottom: .35rem; }
.regel { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; padding: .5rem 0; border-bottom: 1px dashed var(--lijn); }
.regel:last-child { border-bottom: 0; }
.regel .titel { font-weight: 600; }
.regel .uren { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.regel .tekst { grid-column: 1 / -1; white-space: pre-wrap; overflow-wrap: anywhere; }
.regel .knoppen { grid-column: 1 / -1; display: flex; gap: .4rem; }
.status { display: inline-block; font-size: .75rem; border-radius: 99px; padding: 0 .5rem; background: var(--merk-zacht); margin-left: .35rem; font-weight: 600; }
.leeg { color: var(--zacht); padding: 1rem 0; text-align: center; }

/* Tabellen (beheer) */
.tabel-wrap { overflow-x: auto; }
table.lijst { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.lijst th { text-align: left; color: var(--zacht); font-size: .8rem; border-bottom: 2px solid var(--lijn); padding: .4rem .5rem; white-space: nowrap; }
table.lijst td { border-bottom: 1px solid var(--lijn); padding: .45rem .5rem; vertical-align: top; }
table.lijst td.getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.lijst td.tekst { min-width: 16rem; white-space: pre-wrap; overflow-wrap: anywhere; }
table.lijst tr.bewerken td { background: var(--merk-zacht); }
.filters { display: grid; gap: .6rem; grid-template-columns: repeat(4, 1fr) auto; align-items: end; }
@media (max-width: 760px) { .filters { grid-template-columns: 1fr 1fr; } }

/* Tabs */
.tabs { display: flex; gap: .25rem; overflow-x: auto; margin-bottom: 1rem; border-bottom: 1px solid var(--lijn); }
.tab { border: 0; background: none; padding: .55rem .8rem; cursor: pointer; border-bottom: 2px solid transparent; color: var(--zacht); white-space: nowrap; }
.tab.actief { color: var(--tekst); border-bottom-color: var(--merk); font-weight: 600; }

/* Dialoog */
dialog { border: 1px solid var(--lijn); border-radius: var(--rond); background: var(--kaart); color: var(--tekst); padding: 1rem; width: min(560px, calc(100% - 2rem)); }
dialog::backdrop { background: rgba(0, 0, 0, .4); }