/* Melloxx CRM — één stylesheet, geen framework, geen CDN. */

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --border: #dfe3e8;
  --ink: #1c2530;
  --ink-soft: #5b6673;
  --accent: #1f5fa9;
  --accent-soft: #e8f0fa;
  --ok: #1f7a4d;
  --warn: #a8620a;
  --bad: #a32a2a;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(20, 30, 45, 0.07);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

a { color: var(--accent); }
a:hover { text-decoration: none; }

/* --- Kop en navigatie --- */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  margin-right: 0.5rem;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  display: block;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.94rem;
}

.nav a:hover { background: var(--accent-soft); color: var(--accent); }
.nav a.active { background: var(--accent); color: #fff; }

/* --- Bladzijde --- */

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.6rem; }
h3 { font-size: 1rem; margin: 0 0 0.4rem; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.page-head h1 { margin: 0; }

.muted { color: var(--ink-soft); }
.small { font-size: 0.86rem; }

/* --- Kaarten en raster --- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-bottom: 1rem;
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.stat { font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.stat-label { color: var(--ink-soft); font-size: 0.86rem; }

/* --- Tabellen --- */

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); }

tbody tr:hover { background: #fafbfc; }

td.right, th.right { text-align: right; }

/* --- Formulieren --- */

.form-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.field { display: flex; flex-direction: column; gap: 0.25rem; }
.field.wide { grid-column: 1 / -1; }

label { font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"], input[type="url"], input[type="tel"],
select, textarea {
  font: inherit;
  color: inherit;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  width: 100%;
  min-width: 0;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}

textarea { min-height: 7rem; resize: vertical; }

.form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

.error-text { color: var(--bad); font-size: 0.84rem; }

/* --- Knoppen --- */

.btn {
  display: inline-block;
  font: inherit;
  font-size: 0.92rem;
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { filter: brightness(1.08); }
.btn.secondary { background: #fff; color: var(--accent); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.small { font-size: 0.82rem; padding: 0.25rem 0.55rem; }

/* --- Meldingen --- */

.flash {
  background: #e7f4ec;
  border: 1px solid #b9dcc7;
  color: var(--ok);
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.alert {
  background: #fdecec;
  border: 1px solid #f0bcbc;
  color: var(--bad);
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

/* --- Labels --- */

.badge {
  display: inline-block;
  font-size: 0.76rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}

.badge.ok { background: #e7f4ec; color: var(--ok); }
.badge.warn { background: #fdf1e0; color: var(--warn); }
.badge.bad { background: #fdecec; color: var(--bad); }
.badge.grey { background: #eceef1; color: var(--ink-soft); }

/* --- Pijplijn --- */

/* Zes fases. Op een telefoon onder elkaar, daarna twee, drie en op een laptop
   zes kolommen naast elkaar. De kolommen krimpen mee (minmax(0, 1fr)), zodat
   de pagina nooit zijwaarts hoeft te schuiven. */
.pipeline {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  padding-bottom: 0.5rem;
}

.pipeline-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem;
  min-width: 0;
}

.pipeline-col h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.92rem;
}

.lead-card {
  display: block;
  overflow-wrap: anywhere;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.5rem;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
}

.lead-card:hover { border-color: var(--accent); }
/* Een bedrag mag nooit middenin afbreken, ook niet in een smalle kolom. */
.nowrap { white-space: nowrap; }
.lead-card .lead-title { font-weight: 600; font-size: 0.9rem; }

/* De breedtes staan na de basisregels, anders wint de basis van de media-query. */
@media (min-width: 560px) {
  .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
  .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1180px) {
  .pipeline {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .pipeline-col { padding: 0.5rem; }
  .pipeline-col h3 { font-size: 0.88rem; }
  .lead-card { padding: 0.4rem 0.45rem; }
  .lead-card .lead-title { font-size: 0.86rem; }
}

/* --- Login --- */

.login-wrap {
  max-width: 380px;
  margin: 8vh auto;
  padding: 0 1rem;
}

/* --- Kennispagina --- */

.prose { max-width: 44rem; }
.prose h1, .prose h2, .prose h3 { margin-top: 1.4rem; }
.prose pre { background: #f0f2f5; padding: 0.75rem; border-radius: var(--radius); overflow-x: auto; }
.prose code { background: #f0f2f5; padding: 0.1rem 0.3rem; border-radius: 4px; font-size: 0.9em; }
.prose blockquote { border-left: 3px solid var(--border); margin-left: 0; padding-left: 0.9rem; color: var(--ink-soft); }
.prose table { font-size: 0.92rem; }

/* --- Lijst zonder opsommingstekens --- */

.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.plain-list li:last-child { border-bottom: 0; }

.inline-form { display: inline; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.filters .field { flex: 0 1 220px; }

/* --- Telefoon --- */

@media (max-width: 720px) {
  body { font-size: 15px; }
  main { padding: 1rem 0.75rem 2.5rem; }
  .topbar-inner { padding: 0.5rem 0.75rem; }
  .nav a { padding: 0.3rem 0.45rem; font-size: 0.88rem; }
  h1 { font-size: 1.25rem; }
  .stat { font-size: 1.4rem; }
  .form-grid { grid-template-columns: 1fr; }
}

/* --- Kleine hulpklassen (de CSP verbiedt style-attributen in de HTML) --- */

.no-margin { margin: 0; }
.no-margin-top { margin-top: 0; }
.gap-top { margin-top: 1rem; }
.gap-top-small { margin-top: 0.75rem; }
.tall-input { min-height: 20rem; }

.task-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  justify-content: space-between;
}

/* Golf 3: de outreach-werkruimte. */

/* Een concepttekst mag nooit buiten het scherm lopen op een telefoon. */
.draft-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0 0 1rem;
  font: inherit;
}

/* De blokken van de werkruimte volgen dezelfde raster als het dashboard. */
.section-title {
  margin: 1.6rem 0 0.6rem;
}

/* Filters en knoppenrijen breken netjes af op een smal scherm. */
.filters,
.inline-form {
  flex-wrap: wrap;
}