/* Huisstijl C.P. de Hoop Urenregistratie — gelijkgetrokken met cpdehoop.nl.
   Kleuren en typografie komen uit de site-CSS
   (Kantoor OS/projects/website-kantoor/_ACTIEF/1-AANVULLENDE-CSS.css):
   navy als donkere vlakken, blauw als accent, off-white als achtergrond,
   serif koppen op sans body. Werkschermen blijven rustig: veel wit, weinig
   kleur — de kleur zit in de balk, de knoppen en de actieve menu-items. */

:root {
  /* Site-palet, 1-op-1 overgenomen */
  --kleur-navy: #102035;
  --kleur-navy-mid: #1a3350;
  --kleur-tekst: #1a1a1a;
  --kleur-tekst-zacht: #4a5568;
  --kleur-rand: #e2e8f0;
  --kleur-achtergrond: #f7f9fc;
  --kleur-vlak: #ffffff;
  --kleur-primair: #007dbc;
  --kleur-primair-donker: #005f91;
  --kleur-primair-licht: #e8f4fb;
  --kleur-fout: #b42318;
  --kleur-fout-vlak: #fdecea;
  --kleur-info: #005f91;
  --kleur-info-vlak: #e8f4fb;
  --radius: 6px;
  --radius-groot: 8px;
  --schaduw: 0 1px 3px rgba(16, 32, 53, 0.06);
  /* Site: DM Sans (body) + Playfair Display (koppen). De fonts worden hier
     niet van internet geladen — de app moet ook offline op kantoor werken.
     Staan ze op de pc, dan pakt de browser ze; anders valt hij netjes terug
     op systeem-sans en Georgia, wat dezelfde sans/serif-verhouding geeft. */
  --font-body: "DM Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-kop: "Playfair Display", Georgia, "Times New Roman", serif;
  font-family: var(--font-body);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--kleur-tekst);
  background: var(--kleur-achtergrond);
  font-size: 15px;
  line-height: 1.5;
}

/* --- Topbalk --- */
.topbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 24px;
  background: var(--kleur-navy);
  color: #fff;
}

.topbalk-logo {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 1.1em;
  letter-spacing: -0.2px;
}

.topbalk-sub {
  font-family: var(--font-body);
  font-weight: 400;
  opacity: 0.8;
  margin-left: 6px;
  font-size: 0.9em;
}

.topbalk-gebruiker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.92em;
}

.gebruiker-rol {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 0.82em;
}

.uitlog-knop {
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 4px 12px;
  border-radius: var(--radius);
}

.uitlog-knop:hover { background: rgba(255, 255, 255, 0.12); }

/* --- Indeling met zijbalk --- */
.app-indeling {
  display: flex;
  flex: 1;
  align-items: stretch;
}

.zijbalk {
  width: 220px;
  flex-shrink: 0;
  background: var(--kleur-vlak);
  border-right: 1px solid var(--kleur-rand);
  padding: 18px 0;
}

.menu-groep { margin-bottom: 18px; }

.menu-kop {
  padding: 0 20px 6px;
  font-size: 0.74em;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--kleur-tekst-zacht);
}

.zijbalk ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.zijbalk a {
  display: block;
  padding: 8px 20px;
  color: var(--kleur-tekst);
  text-decoration: none;
  border-left: 3px solid transparent;
}

.zijbalk a:hover { background: var(--kleur-primair-licht); }

.zijbalk a.actief {
  background: var(--kleur-primair-licht);
  border-left-color: var(--kleur-primair);
  font-weight: 600;
  color: var(--kleur-primair-donker);
}

/* --- Inhoud --- */
.inhoud {
  flex: 1;
  padding: 28px 32px;
}

.midden-scherm {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
}

.kaart {
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 28px 30px;
  max-width: 760px;
}

.inlog-kaart {
  width: 100%;
  max-width: 380px;
}

/* Koppen in de serif van de site, in navy — net als op cpdehoop.nl. */
/* (.menu-kop blijft sans: dat is een labeltje, geen titel.) */
h1, h2, h3, .kaart-kop {
  font-family: var(--font-kop);
  color: var(--kleur-navy);
  letter-spacing: -0.2px;
}

.kaart h1 {
  margin: 0 0 6px;
  font-size: 1.4em;
}

.kaart-intro {
  color: var(--kleur-tekst-zacht);
  margin-top: 0;
}

/* --- Formulieren --- */
label {
  display: block;
  margin: 14px 0 4px;
  font-weight: 600;
  font-size: 0.9em;
}

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  font-size: 1em;
  background: #fff;
}

input:focus {
  outline: none;
  border-color: var(--kleur-primair);
  box-shadow: 0 0 0 3px var(--kleur-primair-licht);
}

/* --- Knoppen --- */
.knop {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  background: #fff;
  color: var(--kleur-tekst);
  text-decoration: none;
  font-size: 0.95em;
  cursor: pointer;
}

.knop:hover { background: var(--kleur-achtergrond); }

.knop-primair {
  margin-top: 20px;
  width: 100%;
  background: var(--kleur-primair);
  border-color: var(--kleur-primair);
  color: #fff;
  font-weight: 600;
}

.knop-primair:hover { background: var(--kleur-primair-donker); }

/* --- Meldingen --- */
.melding {
  padding: 11px 14px;
  border-radius: var(--radius);
  margin: 14px 0;
  font-size: 0.92em;
}

.melding-fout {
  background: var(--kleur-fout-vlak);
  color: var(--kleur-fout);
  border: 1px solid #f3c4c0;
}

.melding-info {
  background: var(--kleur-info-vlak);
  color: var(--kleur-info);
  border: 1px solid #bcdff5;
}

/* --- Schermkop met acties --- */
.scherm-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.scherm-kop h1 { margin: 0; font-size: 1.4em; }

/* --- Week-/periodenavigatie --- */
.week-nav, .periode-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.week-label { font-size: 0.95em; }
.week-bereik { color: var(--kleur-tekst-zacht); margin-left: 8px; font-size: 0.9em; }
.week-kies { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.week-kies span { font-size: 0.82em; color: var(--kleur-tekst-zacht); }
.week-kies input[type="date"] { width: auto; padding: 6px 8px; }
.periode-nav { margin-bottom: 16px; }
.periode-label { font-weight: 600; }

.periode-schakel { display: inline-flex; gap: 6px; }
.knop-actief {
  background: var(--kleur-primair);
  border-color: var(--kleur-primair);
  color: #fff;
  font-weight: 600;
}
.knop-actief:hover { background: var(--kleur-primair-donker); }

/* --- Snelle invoer --- */
.invoer-kaart { max-width: none; margin-bottom: 18px; padding: 18px 20px; }
.invoer-titel { font-weight: 600; margin-bottom: 10px; }
.invoer-fout { margin-top: 0; }
.invoer-grid {
  display: grid;
  grid-template-columns: 150px minmax(220px, 1.4fr) 110px 140px 90px;
  gap: 10px 14px;
  align-items: end;
}
.invoer-grid .veld { position: relative; }
.invoer-grid label { margin: 0 0 4px; }
.veld-omschrijving { grid-column: 1 / 4; }
.veld-acties { grid-column: 4 / 6; display: flex; gap: 8px; align-items: end; }
.invoer-grid input, .invoer-grid select { padding: 8px 10px; }
.invoer-knop { margin-top: 0; width: auto; }

/* Klant-suggesties */
.klant-suggesties {
  position: absolute;
  z-index: 20;
  left: 0; right: 0;
  top: 100%;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  max-height: 260px;
  overflow-y: auto;
}
.klant-suggestie { padding: 7px 11px; cursor: pointer; font-size: 0.92em; }
.klant-suggestie:hover { background: var(--kleur-primair-licht); }
.klant-nr {
  display: inline-block;
  min-width: 46px;
  font-variant-numeric: tabular-nums;
  color: var(--kleur-tekst-zacht);
  font-weight: 600;
}
.klant-familie { color: var(--kleur-tekst-zacht); font-size: 0.9em; }

/* --- Tabellen --- */
.tabel-kaart { max-width: none; padding: 0; overflow-x: auto; }
.uren-tabel, .overzicht-tabel, .mutatie-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}
.uren-tabel th, .overzicht-tabel th, .mutatie-tabel th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--kleur-rand);
  color: var(--kleur-tekst-zacht);
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.uren-tabel td, .overzicht-tabel td, .mutatie-tabel td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--kleur-rand);
  vertical-align: top;
}
.uren-tabel tbody tr:hover { background: #fafbfc; }
.k-uren, .k-getal, .k-boekjaar { text-align: right; font-variant-numeric: tabular-nums; }
.uren-tabel .k-boekjaar { text-align: center; }
.weekdag { display: block; font-size: 0.8em; color: var(--kleur-tekst-zacht); }
.leeg-rij td, .leeg-melding {
  color: var(--kleur-tekst-zacht);
  padding: 18px 12px;
  font-style: italic;
}

/* Soort-labels */
.soort-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.82em;
  border: 1px solid var(--kleur-rand);
  background: #fff;
}
.soort-declarabel { background: #e8f2ec; border-color: #bfe0cd; color: #1c6b45; }
.soort-overig { background: #eef1f4; border-color: #d5dce3; color: #445; }
.soort-vrij { background: #e8f4fb; border-color: #bcdff5; color: #005f91; }
.soort-feest { background: #fbf0e4; border-color: #f0d8b8; color: #8a5a12; }
.soort-ziekte { background: #fdecea; border-color: #f3c4c0; color: #a3352b; }

.afgeletterd { background: #fafafa; color: var(--kleur-tekst-zacht); }
.slot { font-size: 1.1em; }
.factuurnr { font-size: 0.82em; color: var(--kleur-tekst-zacht); margin-left: 6px; }

/* Knoppen klein / gevaar */
.knop-klein { padding: 4px 10px; font-size: 0.85em; }
.knop-gevaar { color: var(--kleur-fout); border-color: #f3c4c0; }
.knop-gevaar:hover { background: var(--kleur-fout-vlak); }

/* Totaalregels */
.totaal-rij td { border-top: 2px solid var(--kleur-rand); border-bottom: none; font-size: 0.95em; }
.totaal-label { font-weight: 600; }
.totaal-soorten { text-align: right; }
.tot-item { margin-left: 14px; color: var(--kleur-tekst-zacht); }
.tot-item strong, .tot-totaal strong { color: var(--kleur-tekst); }
.totaal-eind { text-align: right; }
.tot-totaal strong { font-size: 1.05em; }

/* --- Vakantie --- */
.pot-kaarten { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.pot-kaart { flex: 1; min-width: 260px; max-width: none; }
.pot-kaart h2 { margin: 0 0 6px; font-size: 1.05em; }
.pot-saldo { font-size: 1.9em; font-weight: 700; color: var(--kleur-primair); }
.pot-eenheid { font-size: 0.5em; font-weight: 400; color: var(--kleur-tekst-zacht); }
.pot-detail { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.9em; }
.pot-detail td { padding: 5px 0; border-bottom: 1px solid var(--kleur-rand); }
.pot-detail td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.pot-detail-saldo td { border-bottom: none; border-top: 2px solid var(--kleur-rand); font-weight: 700; padding-top: 8px; }
.getal-plus { color: #1c6b45; }
.getal-min { color: var(--kleur-fout); }

/* --- Eigenaar: filters --- */
.filter-kaart { max-width: none; margin-bottom: 16px; }
.filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px 14px;
  align-items: end;
}
.filter-grid label { margin: 0 0 4px; }
.filter-grid input, .filter-grid select { padding: 8px 10px; width: 100%; }
.veld-trefwoord { grid-column: span 2; }
.veld-filter-acties { display: flex; gap: 8px; align-items: end; }
.filter-knop { margin-top: 0; width: auto; }
@media (max-width: 900px) { .filter-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Totaal-balk --- */
.totaal-balk {
  max-width: none; display: flex; gap: 28px; flex-wrap: wrap;
  padding: 12px 18px; margin-bottom: 14px; align-items: center;
}
.totaal-balk strong { color: var(--kleur-primair-donker); }

/* --- Afletter-balk --- */
.afletter-balk { max-width: none; margin-bottom: 14px; padding: 14px 18px; }
.afletter-alles { display: block; font-weight: 400; margin-bottom: 10px; }
.afletter-actie { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.afletter-actie input[type="text"] { width: 220px; }
.afletter-actie .knop-primair { margin-top: 0; width: auto; }
.afletter-actie .bedrag-veld { width: 150px; }
.afletter-balk .melding { margin-bottom: 0; }
.hint { font-size: 0.84em; color: var(--kleur-tekst-zacht); margin: 8px 0 0; }

/* --- Facturen: berekend vs. werkelijk gefactureerd --- */
.facturen-kaart { max-width: none; margin-bottom: 14px; padding: 14px 18px; }
.facturen-kaart .kaart-kop { font-size: 1em; margin: 0 0 10px; }
.facturen-tabel { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.facturen-tabel th, .facturen-tabel td { padding: 6px 9px; border-bottom: 1px solid var(--kleur-rand); }
.facturen-tabel th { text-align: left; color: var(--kleur-tekst-zacht); font-weight: 600; }
.facturen-tabel .k-getal { text-align: right; font-variant-numeric: tabular-nums; }
.factuur-bedrag-veld {
  width: 120px; padding: 5px 8px; text-align: right; font-variant-numeric: tabular-nums;
  border: 1px solid var(--kleur-rand); border-radius: var(--radius);
}
.verschil-afwijkend { color: #b4531a; font-weight: 600; }
.c-factuur-status { font-size: 0.82em; }
.status-ok { color: var(--kleur-primair-donker); }
.status-fout { color: #a52c2c; }

/* --- Beheer-tabel --- */
.beheer-tabel { font-size: 0.88em; }
.beheer-tabel .k-check { width: 30px; text-align: center; }
.beheer-tabel td, .beheer-tabel th { padding: 7px 9px; }
.oms-klant-veld {
  width: 100%; min-width: 140px; padding: 5px 8px; font-size: 0.95em;
  border: 1px solid transparent; border-radius: var(--radius); background: #fbfcfd;
}
.oms-klant-veld:hover { border-color: var(--kleur-rand); }
.oms-klant-veld:focus { border-color: var(--kleur-primair); background: #fff; }
.oms-klant-veld.opgeslagen { border-color: #bfe0cd; background: #e8f2ec; }
.bewerk-veld { width: 100%; min-width: 70px; padding: 5px 7px; font-size: 0.95em; }
.beheer-tabel .c-acties { white-space: nowrap; }
.beheer-tabel .c-acties .knop { margin-left: 2px; }

/* --- Paginering --- */
.paginering { display: flex; gap: 14px; align-items: center; margin-top: 14px; }
.pagina-label { color: var(--kleur-tekst-zacht); font-size: 0.9em; }

/* --- OHW --- */
.ohw-toggle {
  border: none; background: none; cursor: pointer; font-size: 0.9em;
  color: var(--kleur-primair); padding: 0 6px 0 0; width: 20px;
}
.ohw-familie-rij { font-weight: 600; }
.ohw-subaantal { color: var(--kleur-tekst-zacht); font-weight: 400; font-size: 0.85em; }
.ohw-sub-rij { background: #fafbfc; font-weight: 400; }
.ohw-sub-naam { padding-left: 34px; }
.k-familie { width: auto; }

/* --- Omzet --- */
.omzet-tabel { font-size: 0.86em; }
.omzet-tabel .k-week { white-space: nowrap; font-weight: 600; }
.omzet-tabel .k-vorig { color: var(--kleur-tekst-zacht); border-left: 1px solid var(--kleur-rand); }
.omzet-tabel .nul { color: #b8c0c8; }

/* --- Facturatieverschil --- */
.verschil-plus { color: var(--kleur-primair-donker); }
.verschil-min { color: #a52c2c; }

/* --- Fase 3b: export-knop --- */
.knop-export {
  margin-top: 0;
  background: var(--kleur-primair-licht);
  border-color: #bcdff5;
  color: var(--kleur-primair-donker);
  font-weight: 600;
  white-space: nowrap;
}
.knop-export:hover { background: #d3e9f6; }

/* --- Fase 3b: meldingen extra --- */
.melding-waarschuwing { background: #fbf0e4; color: #8a5a12; border: 1px solid #f0d8b8; }
.melding-wachtwoord {
  background: #e8f2ec; color: #1c6b45; border: 1px solid #bfe0cd;
  font-size: 0.95em;
}
.melding-wachtwoord strong { font-size: 1.1em; letter-spacing: 0.4px; }

/* --- Fase 3b: mini-formulieren (toevoegen) --- */
.beheer-formulieren { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.mini-form { max-width: none; flex: 1; min-width: 320px; padding: 16px 18px; margin-bottom: 16px; }
.mini-form-titel { font-weight: 600; margin-bottom: 10px; }
.mini-form-uitleg { color: var(--kleur-tekst-zacht); font-size: 0.85em; margin: 10px 0 0; }
.mini-form-rij { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mini-form-rij input, .mini-form-rij select { width: auto; flex: 1; min-width: 120px; padding: 8px 10px; }
.mini-form-rij .knop { margin-top: 0; width: auto; white-space: nowrap; }

/* Account-aanmaak-grid */
.account-grid {
  display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px 14px; align-items: end;
}
.account-grid .veld label { margin: 0 0 4px; }
.account-grid input, .account-grid select { padding: 8px 10px; }
.veld-account-actie { display: flex; align-items: end; }
.veld-account-actie .knop { margin-top: 0; width: 100%; }
@media (max-width: 900px) { .account-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Fase 3b: status/rol-tags --- */
.status-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.8em; border: 1px solid var(--kleur-rand); }
.status-actief { background: #e8f2ec; border-color: #bfe0cd; color: #1c6b45; }
.status-inactief { background: #f1f3f5; border-color: #d5dce3; color: #66707a; }
.rol-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.8em; border: 1px solid var(--kleur-rand); }
.rol-eigenaar { background: var(--kleur-primair-licht); border-color: #bcdff5; color: var(--kleur-primair-donker); }
.rol-medewerker { background: #eef1f4; border-color: #d5dce3; color: #445; }
.inactief-rij { color: var(--kleur-tekst-zacht); background: #fbfbfc; }
.k-nr { width: 70px; }
.k-uitleg { color: var(--kleur-tekst-zacht); font-size: 0.85em; font-style: italic; }
.intern-label {
  margin-left: 8px; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--kleur-tekst-zacht); border: 1px solid var(--kleur-rand); border-radius: 999px; padding: 0 6px;
}

/* --- Fase 3b: klanten-tabel inline hernoemen --- */
.hernoem-form { display: inline-flex; gap: 6px; align-items: center; width: 100%; }
.hernoem-form input { flex: 1; min-width: 120px; padding: 5px 8px; font-size: 0.95em; }
.hernoem-form .knop { margin-top: 0; }
.klanten-tabel .sub-nr { padding-left: 26px; }
.klanten-tabel .k-status { width: 90px; }
.klanten-tabel .k-acties { width: 120px; white-space: nowrap; }

/* --- Fase 3b: medewerker-detail --- */
.detail-kolommen { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 4px; }
.detail-kolommen .kaart { flex: 1; min-width: 320px; }
.detail-kolommen h2, .kaart h2 { font-size: 1.1em; margin: 0 0 12px; }
.detail-veld { margin-bottom: 8px; }
.detail-veld label { margin: 0 0 3px; }
.tarief-tabel { margin-bottom: 14px; }
.tarief-form, .mutatie-form { margin-top: 8px; }
.inline-veld { display: inline-flex; flex-direction: column; gap: 3px; margin: 0; font-weight: 400; }
.inline-veld span { font-size: 0.82em; color: var(--kleur-tekst-zacht); font-weight: 600; }
.inline-veld input, .inline-veld select { width: auto; padding: 7px 9px; }
.mutatie-grid { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.mutatie-grid .knop { margin-top: 0; }
.inline-breed { flex: 1; min-width: 200px; }
.inline-breed input { width: 100%; }
.pot-kaarten .pot-mini {
  flex: 1; min-width: 240px; border: 1px solid var(--kleur-rand);
  border-radius: var(--radius); padding: 12px 14px; background: #fbfcfd;
}
.pot-mini-naam { font-size: 0.85em; color: var(--kleur-tekst-zacht); }
.pot-mini-saldo { font-size: 1.4em; font-weight: 700; color: var(--kleur-primair); }
.pot-mini-detail { font-size: 0.8em; color: var(--kleur-tekst-zacht); margin-top: 4px; }

/* --- Voettekst --- */
.voettekst {
  padding: 14px 24px;
  color: var(--kleur-tekst-zacht);
  font-size: 0.82em;
  text-align: center;
  border-top: 1px solid var(--kleur-rand);
  background: var(--kleur-vlak);
}