/* Sportleads Pages – klantdashboard. Licht en rustig; de klantkleur komt terug in accenten. */
body.slp-dash-pagina { margin: 0; background: #f4f4f1; color: #1d1d1f; font: 400 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body.slp-dash-pagina *, body.slp-dash-pagina *::before, body.slp-dash-pagina *::after { box-sizing: border-box; }
@font-face { font-family: Inter; src: url(fonts/inter-latin.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
.slp-dash-main { max-width: 1180px; margin: 0 auto; padding: 28px 16px 48px; }
.slp-dash a { color: #1d1d1f; }
.slp-dash h1 { font-size: 24px; margin: 0; line-height: 1.2; }
.slp-dash h2 { font-size: 17px; margin: 0 0 14px; }

.slp-dash-kop { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.slp-dash-merk { display: flex; gap: 14px; align-items: center; }
.slp-dash-merk img { height: 48px; width: auto; background: #111; border-radius: 10px; padding: 6px; }
.slp-dash-merk p { margin: 2px 0 0; color: #6b6b70; }
.slp-dash-acties { display: flex; gap: 12px; align-items: center; }
.slp-dash-klantkeuze select { font: inherit; padding: 8px 10px; border: 1px solid #d8d8d2; border-radius: 8px; background: #fff; }
.slp-dash-uit { font-size: 14px; color: #6b6b70 !important; }

.slp-periodes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.slp-periodes a { text-decoration: none; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #e3e3dd; font-size: 14px; }
.slp-periodes a[aria-current] { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }

.slp-tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.slp-tegel { background: #fff; border: 1px solid #e3e3dd; border-radius: 14px; padding: 18px 18px 16px; border-top: 3px solid var(--sl-kleur, #ff8a00); }
.slp-tegel > span:first-child { display: block; color: #6b6b70; font-size: 14px; }
.slp-tegel b { display: block; font-size: 32px; line-height: 1.15; margin: 4px 0 2px; font-weight: 700; }
.slp-vs { display: block; font-size: 12.5px; color: #6b6b70; }
@media (max-width: 860px) { .slp-tegels { grid-template-columns: 1fr 1fr; } }

.slp-melding { background: #fff8e6; border: 1px solid #f1d58a; border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; }

.slp-blok { background: #fff; border: 1px solid #e3e3dd; border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.slp-blok-kop { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.slp-blok-kop h2 { margin: 0; }
.slp-wis { font-size: 13px; font-weight: 400; margin-left: 8px; color: #6b6b70 !important; }
.slp-knop-dash { display: inline-block; text-decoration: none; background: #1d1d1f; color: #fff !important; padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; }
.slp-knop-dash:hover { background: #000; }

.slp-grafiek-w { width: 100%; }
.slp-grafiek { width: 100%; height: 180px; display: block; }
.slp-grafiek rect { fill: var(--sl-kleur, #ff8a00); }
.slp-grafiek rect.nul { fill: #e3e3dd; }
.slp-as { display: flex; justify-content: space-between; font-size: 12px; color: #6b6b70; margin-top: 6px; }

.slp-tabel-w { overflow-x: auto; }
.slp-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.slp-tabel th { text-align: left; font-weight: 600; color: #6b6b70; padding: 8px 10px; border-bottom: 1px solid #e3e3dd; white-space: nowrap; }
.slp-tabel td { padding: 10px; border-bottom: 1px solid #efefea; vertical-align: top; }
.slp-tabel tr:last-child td { border-bottom: 0; }
.slp-leads tr.st-nieuw td:first-child { box-shadow: inset 3px 0 0 var(--sl-kleur, #ff8a00); }
.slp-details span { display: block; font-size: 13px; }
.slp-details em { font-style: normal; color: #6b6b70; }
.slp-status { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid #d8d8d2; border-radius: 8px; background: #fff; }
.slp-status.bewaard { border-color: #2e9e5b; }
.slp-leeg { color: #6b6b70; margin: 0; }
.slp-dash-voet { color: #6b6b70; font-size: 13px; text-align: center; }

@media (max-width: 760px) {
	.slp-leads thead { display: none; }
	.slp-leads, .slp-leads tbody, .slp-leads tr, .slp-leads td { display: block; width: 100%; }
	.slp-leads tr { border: 1px solid #e3e3dd; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
	.slp-leads td { border: 0; padding: 3px 0; }
	.slp-leads td[data-l]:not([data-l="Naam"]):not(:empty)::before { content: attr(data-l) ": "; color: #6b6b70; font-size: 13px; }
	.slp-leads tr.st-nieuw td:first-child { box-shadow: none; }
	.slp-leads tr.st-nieuw { border-left: 3px solid var(--sl-kleur, #ff8a00); }
}

/* Inloggen */
.slp-dash-login { max-width: 400px; margin: 8vh auto 0; background: #fff; border: 1px solid #e3e3dd; border-radius: 14px; padding: 28px; }
.slp-dash-login h1 { font-size: 24px; margin: 0 0 6px; }
.slp-dash-login p { color: #6b6b70; }
.slp-dash-login form p { margin: 0 0 14px; color: #1d1d1f; }
.slp-dash-login label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.slp-dash-login input[type=text], .slp-dash-login input[type=password] { width: 100%; font: inherit; padding: 11px 12px; border: 1px solid #d8d8d2; border-radius: 8px; }
.slp-dash-login .login-remember label { display: inline; font-weight: 400; }
.slp-dash-login input[type=submit] { width: 100%; font: inherit; font-weight: 600; background: #1d1d1f; color: #fff; border: 0; border-radius: 8px; padding: 12px; cursor: pointer; }
.slp-dash-vergeten { margin: 4px 0 0; font-size: 14px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }