/* Perito Beldashboard - huisstijl Studio Pelé (dec 2025)
   Primair: blauw #3290ce, oranje #f16529, wit, zwart, zwart 10%
   Secundair: donkerblauw #02799f, donkerrood #933034, rood #ea1d23
   Typografie: Poppins, fallback Arial */

:root {
  --blauw: #3290ce;
  --oranje: #f16529;
  --donkerblauw: #02799f;
  --donkerrood: #933034;
  --rood: #ea1d23;
  --grijs: #e6e6e6;      /* zwart 10% */
  --grijs-licht: #f5f5f5;
  --tekst: #1a1a1a;
  --tekst-zacht: #6b6b6b;
  --wit: #ffffff;
  --radius: 10px;
  --schaduw: 0 1px 3px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 15px;
  color: var(--tekst);
  background: var(--grijs-licht);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Topbar ---------- */

.topbar { background: var(--wit); box-shadow: var(--schaduw); }

.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo { height: 34px; width: auto; display: block; }
.brand-name {
  font-weight: 600;
  color: var(--blauw);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.nav { display: flex; gap: 14px; margin-left: auto; }
.nav a {
  text-decoration: none;
  color: var(--tekst-zacht);
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
}
.nav a.active, .nav a:hover { color: var(--blauw); background: var(--grijs-licht); }

.mode-badge {
  background: var(--oranje);
  color: var(--wit);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Kleurbanden: blauw, donkerblauw, donkerrood, rood, oranje (koel naar warm) */
.kleurband { display: flex; height: 4px; }
.kleurband span { flex: 1; }
.kleurband .b1 { background: var(--blauw); }
.kleurband .b2 { background: var(--donkerblauw); }
.kleurband .b3 { background: var(--donkerrood); }
.kleurband .b4 { background: var(--rood); }
.kleurband .b5 { background: var(--oranje); }

/* ---------- Layout ---------- */

.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 16px 40px;
  width: 100%;
  flex: 1;
}

.page-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 12px;
}

h1 { font-size: 1.35rem; font-weight: 600; margin: 0; }
h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 10px; color: var(--tekst); }
h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 6px; color: var(--donkerblauw); }
h4 { font-size: 0.85rem; font-weight: 600; margin: 10px 0 4px; color: var(--tekst-zacht); }

.muted { color: var(--tekst-zacht); }
.small { font-size: 0.82rem; }
.warn { color: var(--donkerrood); }
.back { color: var(--blauw); text-decoration: none; font-weight: 500; }
.back:hover { text-decoration: underline; }

.card {
  background: var(--wit);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 16px;
  margin-bottom: 16px;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

.count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--wit);
  background: var(--blauw);
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: middle;
}

/* ---------- Filterbar ---------- */

.filterbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filterbar label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--tekst-zacht);
}

select, input[type="text"], input[type="date"], textarea {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 7px 10px;
  border: 1px solid var(--grijs);
  border-radius: 6px;
  background: var(--wit);
  color: var(--tekst);
}
select:focus, input:focus, textarea:focus {
  outline: 2px solid var(--blauw);
  outline-offset: 0;
  border-color: var(--blauw);
}

.btn {
  display: inline-block;
  background: var(--blauw);
  color: var(--wit);
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--donkerblauw); }
.btn-ghost { background: transparent; color: var(--blauw); border: 1px solid var(--blauw); }
.btn-ghost:hover { background: var(--grijs-licht); color: var(--donkerblauw); }

/* ---------- Tabellen ---------- */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { border-collapse: collapse; width: 100%; }

th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--grijs);
  font-size: 0.88rem;
  vertical-align: top;
}

thead th {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tekst-zacht);
  border-bottom: 2px solid var(--grijs);
  white-space: nowrap;
}

tbody tr:hover { background: var(--grijs-licht); }

.org a { color: var(--blauw); font-weight: 500; text-decoration: none; }
.org a:hover { text-decoration: underline; }
.nofile { color: var(--oranje); font-weight: 700; margin-left: 4px; }

.sort { color: inherit; text-decoration: none; }
.sort:hover { color: var(--blauw); }
.sort.sorted-asc::after { content: " \2191"; color: var(--blauw); }
.sort.sorted-desc::after { content: " \2193"; color: var(--blauw); }

/* Key-value tabel (leadinfo) */
.kv th {
  width: 40%;
  color: var(--tekst-zacht);
  font-weight: 500;
  font-size: 0.85rem;
}

/* ---------- Statusbadges ---------- */

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.st-nieuw       { background: var(--grijs); color: var(--tekst); }
.st-bellen      { background: var(--blauw); color: var(--wit); }
.st-terugbellen { background: var(--wit); color: var(--blauw); border-color: var(--blauw); }
.st-mail        { background: var(--wit); color: var(--donkerblauw); border-color: var(--donkerblauw); }
.st-afspraak    { background: var(--oranje); color: var(--wit); }
.st-offerte     { background: var(--donkerrood); color: var(--wit); }
.st-klant       { background: var(--donkerblauw); color: var(--wit); }
.st-afgewezen   { background: var(--wit); color: var(--rood); border-color: var(--rood); }
.st-parkeer     { background: var(--wit); color: var(--tekst-zacht); border-color: var(--grijs); }
.st-onbekend    { background: var(--grijs-licht); color: var(--tekst-zacht); border-color: var(--grijs); }

/* ---------- Leaddetail ---------- */

.mdtext { font-size: 0.9rem; line-height: 1.55; }
.mdtext ul { margin: 4px 0 8px; padding-left: 20px; }
.mdtext p { margin: 6px 0; }
.checklist { list-style: none; padding-left: 4px; }
.checklist .box { margin-right: 4px; }
.checklist li.done { color: var(--tekst-zacht); }

.next-action { border-left: 4px solid var(--oranje); }

.logentry {
  border: 1px solid var(--grijs);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.logentry:last-child { margin-bottom: 0; }

details.wispr {
  margin-top: 8px;
  background: var(--grijs-licht);
  border-radius: 6px;
  padding: 8px 12px;
}
details.wispr summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--donkerblauw);
}

.error-card { border-left: 4px solid var(--rood); }

code {
  background: var(--grijs-licht);
  border: 1px solid var(--grijs);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.85em;
}

/* ---------- Login ---------- */

.login-page {
  align-items: center;
  justify-content: center;
}

.login-box {
  width: 100%;
  max-width: 340px;
  margin: 15vh auto 0;
  text-align: center;
}

.login-logo { height: 48px; margin-bottom: 8px; }

.login-box form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  text-align: left;
}

.login-band {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

/* ---------- Footer ---------- */

.footer {
  text-align: center;
  padding: 14px;
  font-size: 0.75rem;
  color: var(--tekst-zacht);
}

/* ---------- Mobiel ---------- */

@media (max-width: 640px) {
  body { font-size: 14px; }
  .topbar-inner { padding: 8px 12px; gap: 10px; }
  .brand-name { display: none; }
  .content { padding: 12px 10px 30px; }
  .card { padding: 12px; }
  .filterbar { gap: 8px; }
  th, td { padding: 6px 8px; }
}