/* Joep portaal — merkrichting v1 (donkerblauw/geel), mobile-first. */

:root {
  --blauw: #122947;
  --blauw-licht: #1d3a5f;
  --geel: #ffd43b;
  --geel-donker: #f5c211;
  --wit: #ffffff;
  --grijs-bg: #f4f6f9;
  --grijs-rand: #dde3ea;
  --tekst: #1c2733;
  --tekst-gedempt: #5d6b7a;
  --rood: #d6453d;
  --groen: #2f9e62;
  --oranje: #e8930c;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--grijs-bg);
  color: var(--tekst);
  font-size: 16px;
  line-height: 1.5;
}

/* --- Topbar --- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--blauw);
  color: var(--wit);
  flex-wrap: wrap;
}
.brand { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.brand-dot { color: var(--geel); }
.nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav a {
  color: #cdd9e8;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
}
.nav a.actief { background: var(--blauw-licht); color: var(--wit); }
.nav a:hover { color: var(--wit); }

/* --- Layout --- */
.app { max-width: 860px; margin: 0 auto; padding: 20px 16px 60px; }
.pagina-titel { margin: 8px 0 16px; font-size: 1.4rem; }
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

.kaart {
  background: var(--wit);
  border: 1px solid var(--grijs-rand);
  border-radius: var(--radius);
  padding: 16px;
}
.kaart h3 { margin: 0 0 4px; font-size: 0.85rem; color: var(--tekst-gedempt); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.kaart .groot { font-size: 1.9rem; font-weight: 800; }

.sectie { margin-top: 24px; }

/* --- ROI-kaart --- */
.roi-kaart {
  background: var(--blauw);
  color: var(--wit);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 16px;
}
.roi-kaart .groot { font-size: 2.2rem; font-weight: 800; color: var(--geel); }
.roi-uitleg { color: #b8c7d9; font-size: 0.9rem; margin-top: 8px; }

/* --- Maandkiezer --- */
.maandkiezer { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.maandkiezer .maand { font-weight: 700; min-width: 140px; text-align: center; }

/* --- Gesprekkenlijst --- */
.gesprek {
  background: var(--wit);
  border: 1px solid var(--grijs-rand);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.gesprek .wanneer { color: var(--tekst-gedempt); font-size: 0.85rem; margin-left: auto; }
.gesprek .probleem { width: 100%; color: var(--tekst-gedempt); font-size: 0.95rem; }
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--wit);
  background: var(--tekst-gedempt);
}
.badge.spoed { background: var(--rood); }
.badge.afspraak { background: var(--groen); }
.badge.offerte { background: var(--oranje); }
.badge.vraag { background: var(--blauw-licht); }
.badge.terugbellen { background: var(--blauw-licht); }
.badge.wijzigen { background: var(--oranje); }
.badge.verkoper { background: #98a4b1; }

/* --- Formulieren --- */
form.paneel, .paneel {
  background: var(--wit);
  border: 1px solid var(--grijs-rand);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 16px;
}
label { display: block; font-weight: 600; margin: 14px 0 4px; }
input[type="email"], input[type="password"], input[type="text"], input[type="time"],
input[type="number"], select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--grijs-rand);
  border-radius: 8px;
  font: inherit;
  background: var(--wit);
}
.check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; }
.check input { width: 20px; height: 20px; margin-top: 2px; }
.check label { margin: 0; }
.veld-hint { color: var(--tekst-gedempt); font-size: 0.85rem; margin-top: 2px; }
.rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.btn {
  background: var(--geel);
  color: var(--blauw);
  border: 0;
  padding: 12px 20px;
  font: inherit;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 16px;
}
.btn:hover { background: var(--geel-donker); }
.btn[disabled] { opacity: 0.6; cursor: wait; }
.btn-gevaar { background: #fbe4e2; color: var(--rood); }
.btn-gevaar:hover { background: #f6cfcc; }
.btn-ghost {
  background: transparent;
  color: #cdd9e8;
  border: 1px solid var(--blauw-licht);
  border-radius: 8px;
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
}
.btn-ghost:hover { color: var(--wit); }

.melding { border-radius: 8px; padding: 12px 14px; margin-top: 14px; font-weight: 600; }
.melding.ok { background: #e2f3e9; color: var(--groen); }
.melding.fout { background: #fbe4e2; color: var(--rood); }
.melding.info { background: #fff6d6; color: #8a6d00; }

.login-wrap { max-width: 380px; margin: 8vh auto 0; }
.login-wrap .brand { color: var(--blauw); font-size: 2rem; text-align: center; margin-bottom: 12px; }
.link { background: none; border: 0; color: var(--blauw-licht); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; margin-top: 12px; }

.leeg { color: var(--tekst-gedempt); text-align: center; padding: 40px 0; }