:root {
  --geel: #14467b;          /* huisstijlblauw */
  --geel-tekst: #ffffff;    /* tekstkleur op primaire knoppen */
  --primair-donker: #0d3159;
  --primair-licht: #dce8f5;
  --donker: #0d2543;
  --donker2: #14355e;
  --grijs: #6b7280;
  --grijs-licht: #e5e7eb;
  --achtergrond: #f4f5f7;
  --wit: #ffffff;
  --groen: #16a34a;
  --rood: #dc2626;
  --blauw: #2563eb;
  --oranje: #ea580c;
  --font: Verdana, Geneva, Tahoma, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--achtergrond);
  color: var(--donker);
}
h1, h2, h3, h4, button, input, select, textarea { font-family: var(--font); }
.verborgen { display: none !important; }

/* Login */
.login-scherm {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--donker), var(--donker2));
}
.login-kaart {
  background: var(--wit);
  padding: 2.5rem;
  border-radius: 12px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.login-kaart h1 { margin: 0 0 0.25rem; font-size: 1.5rem; }
.login-logo { display: block; height: 90px; width: auto; margin: 0 auto 0.75rem; }
.subtitel { color: var(--grijs); margin: 0 0 1.5rem; text-align: center; }
.login-kaart form { display: flex; flex-direction: column; gap: 1rem; }
.login-kaart label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; }
.login-kaart input {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--grijs-licht);
  border-radius: 8px;
  font-size: 1rem;
}
.login-kaart button {
  margin-top: 0.5rem;
  background: var(--geel);
  color: var(--geel-tekst);
  border: none;
  padding: 0.75rem;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
}
.login-kaart button:hover { background: var(--primair-donker); }
.foutmelding { color: var(--rood); font-size: 0.85rem; min-height: 1.2em; margin: 0; }

/* App layout */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  background: var(--donker);
  color: var(--wit);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.5rem;
  flex-wrap: wrap;
}
.topbar-titel { font-weight: 700; font-size: 1.1rem; }
.topbar-logo { height: 40px; width: auto; display: block; background: #fff; padding: 4px 10px; border-radius: 6px; }
.topbar-nav { display: flex; gap: 0.5rem; flex: 1; flex-wrap: wrap; }
.tab-knop {
  background: transparent;
  border: none;
  color: #cbd0d8;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}
.tab-knop:hover { background: rgba(255,255,255,0.08); color: var(--wit); }
.tab-knop.actief { background: var(--geel); color: var(--geel-tekst); font-weight: 700; }
.topbar-gebruiker { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; }

.content { padding: 1.5rem; max-width: 1100px; margin: 0 auto; width: 100%; }
.sectie-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }
h2 { margin-top: 0; }

.knop-primair {
  background: var(--geel);
  color: var(--geel-tekst);
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}
.knop-primair:hover { background: var(--primair-donker); }
.knop-secundair {
  background: transparent;
  border: 1px solid #4b5060;
  color: var(--wit);
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
}
.knop-secundair-licht {
  background: var(--achtergrond);
  border: 1px solid var(--grijs-licht);
  color: var(--donker);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
}
.knop-secundair-licht:hover { background: var(--grijs-licht); }
.knop-klein {
  background: var(--wit);
  border: 1px solid var(--grijs-licht);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
}
.knop-klein.gevaar { color: var(--rood); border-color: #fca5a5; }

.kaarten-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-kaart {
  background: var(--wit);
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.stat-kaart .getal { font-size: 1.8rem; font-weight: 800; }
.stat-kaart .label { color: var(--grijs); font-size: 0.85rem; }

.lijst { display: flex; flex-direction: column; gap: 0.6rem; }
.lijst-item {
  background: var(--wit);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  cursor: pointer;
}
.lijst-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.lijst-item .titel { font-weight: 700; }
.lijst-item .meta { color: var(--grijs); font-size: 0.85rem; }

.badge { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.badge-nieuw { background: var(--primair-licht); color: var(--geel); }
.badge-in_uitvoering { background: #fef3c7; color: var(--oranje); }
.badge-afgerond { background: #dcfce7; color: var(--groen); }
.badge-geannuleerd { background: #fee2e2; color: var(--rood); }
.badge-open { background: #e5e7eb; color: var(--grijs); }
.badge-bezig { background: #fef3c7; color: var(--oranje); }
.badge-klaar { background: #dcfce7; color: var(--groen); }
.badge-aangevraagd { background: #fef3c7; color: var(--oranje); }
.badge-goedgekeurd { background: #dcfce7; color: var(--groen); }
.badge-afgewezen { background: #fee2e2; color: var(--rood); }
.badge-contact_gelegd { background: #dbeafe; color: var(--blauw); }
.badge-afspraak_gepland { background: #fef3c7; color: var(--oranje); }
.badge-offerte_uitgebracht { background: #ede9fe; color: #7c3aed; }
.badge-gewonnen { background: #dcfce7; color: var(--groen); }
.badge-concept { background: #e5e7eb; color: #4b5563; }
.badge-verzonden { background: #dbeafe; color: var(--blauw); }
.badge-verlopen { background: #fee2e2; color: var(--rood); }
.badge-mb-gesynchroniseerd { background: #dcfce7; color: var(--groen); }
.badge-mb-fout { background: #fee2e2; color: var(--rood); }
.badge-mb-niet_gesynchroniseerd { background: #e5e7eb; color: #4b5563; }
.badge-onedrive-niet_aangemaakt { background: #e5e7eb; color: #4b5563; }
.badge-onedrive-traject { background: #dbeafe; color: var(--blauw); }
.badge-onedrive-project { background: #dcfce7; color: var(--groen); }
.badge-onedrive-archief_vervallen { background: #fee2e2; color: var(--rood); }
.badge-onedrive-archief_revisie { background: #ede9fe; color: #7c3aed; }
.badge-onedrive-fout { background: #fee2e2; color: var(--rood); }

.subtab-nav {
  display: flex; gap: 0.5rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--grijs-licht); padding-bottom: 0.5rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: thin;
}
.subtab-knop { background: transparent; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-size: 0.9rem; color: var(--grijs); flex-shrink: 0; white-space: nowrap; }
.subtab-knop:hover { background: var(--achtergrond); }
.subtab-knop.actief { background: var(--achtergrond); color: var(--geel); font-weight: 700; }
.subtab-inhoud.verborgen { display: none; }

.calc-tabel { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.calc-tabel th { text-align: left; font-size: 0.75rem; color: var(--grijs); padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--grijs-licht); }
.calc-tabel td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--grijs-licht); font-size: 0.9rem; }
.calc-tabel tfoot td { font-weight: 700; border-bottom: none; padding-top: 0.6rem; }

.week-navigatie { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; }
.week-navigatie button { background: var(--wit); border: 1px solid var(--grijs-licht); border-radius: 6px; padding: 0.4rem 0.8rem; cursor: pointer; }

.planning-tabel { border-collapse: collapse; width: 100%; min-width: 1100px; font-size: 0.82rem; }
.planning-tabel th, .planning-tabel td { border: 1px solid var(--grijs-licht); padding: 0.3rem 0.4rem; text-align: left; vertical-align: top; }
.planning-tabel thead th { background: var(--donker); color: var(--wit); position: sticky; top: 0; }
.planning-tabel thead .pt-dag-datum { font-weight: 400; font-size: 0.72rem; opacity: 0.85; display: block; }
.planning-tabel .pt-medewerker-cel { font-weight: 700; background: var(--achtergrond); white-space: nowrap; }
.planning-tabel .pt-weeklijst-cel { text-align: center; background: var(--achtergrond); }
.planning-tabel .pt-dag-cel { min-width: 110px; cursor: pointer; }
.planning-tabel .pt-dag-cel:hover { background: var(--achtergrond); }
.planning-tabel .pt-dag-cel.pt-leeg { color: var(--grijs); }
.planning-tabel .pt-project { display: block; font-weight: 600; }
.planning-tabel .pt-uren { display: block; color: var(--grijs); font-size: 0.75rem; }
.planning-tabel .pt-weekend { background: #fafafa; }

.weergave-toggle { display: flex; border: 1px solid var(--grijs-licht); border-radius: 6px; overflow: hidden; }
.weergave-knop { background: var(--wit); border: none; padding: 0.4rem 0.8rem; cursor: pointer; font-size: 0.85rem; border-right: 1px solid var(--grijs-licht); }
.weergave-knop:last-child { border-right: none; }
.weergave-knop.actief { background: var(--geel); color: var(--geel-tekst); font-weight: 700; }

.pk-cel { width: 26px; min-width: 26px; height: 26px; cursor: pointer; padding: 0 !important; border: 1px solid var(--wit); }
.pk-cel-maand { width: 46px; min-width: 46px; }
.pk-leeg { background: var(--achtergrond); }
.pk-laag { background: #dcfce7; }
.pk-midden { background: #86efac; }
.pk-vol { background: #16a34a; }
.pk-over { background: #f59e0b; }
.planning-tabel .pt-toevoegen-rij td { background: var(--achtergrond); text-align: center; }
.planning-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; }
.dag-kolom { background: var(--wit); border-radius: 10px; padding: 0.75rem; min-height: 120px; }
.dag-kolom h4 { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--grijs); }
.planning-item { background: var(--achtergrond); border-radius: 6px; padding: 0.4rem 0.5rem; font-size: 0.8rem; margin-bottom: 0.4rem; cursor: pointer; }
.planning-item .p-medewerker { font-weight: 700; }

/* Modal */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 3rem 1rem; overflow-y: auto; z-index: 50;
}
.modal-inhoud {
  background: var(--wit); border-radius: 12px; padding: 1.75rem;
  width: 100%; max-width: 480px; position: relative;
}
.modal-groot { max-width: 700px; }
.modal-sluiten {
  position: absolute; top: 0.75rem; right: 0.9rem;
  background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--grijs);
}
.formulier { display: flex; flex-direction: column; gap: 0.9rem; }
.formulier label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; }
.formulier input, .formulier select, .formulier textarea {
  padding: 0.55rem 0.7rem; border: 1px solid var(--grijs-licht); border-radius: 6px; font-size: 0.95rem; font-family: inherit;
}
.formulier textarea { min-height: 70px; resize: vertical; }
.formulier-acties { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.5rem; }

.detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }
.detail-sectie { margin-top: 1.5rem; }
.detail-sectie h4 { margin-bottom: 0.5rem; }
.chip { display: inline-block; background: var(--achtergrond); padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.8rem; margin: 0.15rem; }

@media (max-width: 700px) {
  .topbar { flex-direction: column; align-items: flex-start; }
  .topbar-nav { width: 100%; }
}

.ios-installatie-hint {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--donker); color: #fff; padding: 0.6rem 1rem; font-size: 0.85rem;
}
.ios-installatie-hint button {
  background: transparent; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 0 0.3rem;
}