/* ===== 2MF Band Management — Design System ===== */
/* Generated by UI/UX Pro Max: Vibrant & Block-based, Dark Audio + Play Green */
/* Typography: Righteous (headings) + Poppins (body) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Righteous&display=swap');
:root {
/* Color Palette — Dark Audio + Play Green */
--bg: #0F0F23;
--surface: #161831;
--surface-2: #1E2040;
--border: #2A2D52;
--text: #F8FAFC;
--text-muted: #94A3B8;
--primary: #4338CA;
--primary-deep: #1E1B4B;
--primary-hover: #6366F1;
--primary-bg: rgba(67,56,202,.15);
--cta: #22C55E;
--cta-hover: #16A34A;
--cta-bg: rgba(34,197,94,.12);
--accent-green: #22C55E;
--accent-green-bg: rgba(34,197,94,.12);
--accent-orange: #F59E0B;
--accent-orange-bg: rgba(245,158,11,.12);
--accent-red: #EF4444;
--accent-red-bg: rgba(239,68,68,.12);
--accent-blue: #3B82F6;
--accent-blue-bg: rgba(59,130,246,.12);
/* Voorpagina (GigPlano). De lichte secties bestaan alleen daar: het
kleurritme donker/licht is onderdeel van dat ontwerp, geen thema.
Daarom staan ze hier als eigen tokens en niet als variant op --bg. */
--cta-ink: #0B1220; /* tekst óp groen, contrast ≈ 9:1 */
--cta-soft: #4ADE80; /* groene tekst op donker */
--light-bg: #F7F7F5;
--light-card: #FFFFFF;
--light-border: #E4E4DE;
--light-text: #14142B;
--light-muted: #585E77; /* body op licht, contrast ≈ 7:1 */
--text-soft: #B6BFD4; /* body op donker, contrast ≈ 9:1 */
--footer-bg: #0B0B18;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0,0,0,.2);
--shadow-md: 0 4px 12px rgba(0,0,0,.25);
--shadow-lg: 0 10px 25px rgba(0,0,0,.3);
/* Layout */
--radius: 12px;
--radius-sm: 8px;
--sidebar-w: 260px;
--topbar-h: 56px;
/* Transitions */
--transition: 200ms ease;
color-scheme: dark;
}
/* ===== Licht thema =====
Zelfde variabelen, omgeklapte vlakken/tekst. Actief via
(cookie 'theme', per gebruiker bewaard op
User.Theme; toggle in de sidebar-footer). Merk-indigo blijft; de groene
CTA een tint donkerder zodat wit-op-groen leesbaar blijft. */
[data-theme="light"] {
--bg: #F1F5F9;
--surface: #FFFFFF;
--surface-2: #F8FAFC;
--border: #E2E8F0;
--text: #0F172A;
--text-muted: #64748B;
--primary-deep: #EEF2FF;
--primary-bg: rgba(67,56,202,.08);
--cta: #16A34A;
--cta-hover: #15803D;
--cta-bg: rgba(22,163,74,.10);
--accent-green: #15803D;
--accent-green-bg: rgba(22,163,74,.10);
--accent-orange: #B45309;
--accent-orange-bg: rgba(217,119,6,.10);
--accent-red: #DC2626;
--accent-red-bg: rgba(239,68,68,.08);
--accent-blue: #1D4ED8;
--accent-blue-bg: rgba(37,99,235,.08);
--shadow-sm: 0 1px 2px rgba(15,23,42,.06);
--shadow-md: 0 4px 12px rgba(15,23,42,.08);
--shadow-lg: 0 10px 25px rgba(15,23,42,.10);
color-scheme: light;
}
/* Thema-toggle (sidebar-footer): toon het icoon van het thema waar je
NAARTOE schakelt — zon in donker, maan in licht. Puur CSS, geen re-render. */
.theme-toggle .theme-icon-moon { display: none; }
[data-theme="light"] .theme-toggle .theme-icon-sun { display: none; }
[data-theme="light"] .theme-toggle .theme-icon-moon { display: block; }
/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
background: var(--bg); color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* ===== Skip Link (Accessibility) ===== */
.skip-link {
position: absolute; top: -100px; left: 16px;
background: var(--cta); color: #fff; padding: 8px 16px;
border-radius: var(--radius-sm); z-index: 9999;
font-size: .85rem; text-decoration: none;
}
.skip-link:focus { top: 16px; }
/* ===== App Shell ===== */
.app-shell {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
grid-template-rows: var(--topbar-h) 1fr;
min-height: 100vh;
}
/* ===== Sidebar ===== */
.sidebar {
grid-row: 1 / -1;
background: var(--surface);
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
overflow-y: auto;
}
.sidebar-brand {
padding: 20px 20px 12px;
display: flex; align-items: center; gap: 12px;
}
.sidebar-logo {
width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), var(--cta));
border-radius: 12px; display: flex; align-items: center;
justify-content: center; font-weight: 800; font-size: 15px; color: #fff;
flex-shrink: 0; font-family: 'Righteous', sans-serif;
}
.sidebar-brand-name { font-weight: 700; font-size: 1.15rem; font-family: 'Righteous', sans-serif; }
.sidebar-brand-sub { font-size: .72rem; color: var(--text-muted); margin-top: 1px; }
.nav-section {
padding: var(--space-md) 12px var(--space-xs);
font-size: .68rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted);
}
.nav-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px; margin: 2px 8px; border-radius: var(--radius-sm);
color: var(--text-muted); text-decoration: none; font-size: .88rem;
transition: all var(--transition); cursor: pointer;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item:focus-visible {
outline: 2px solid var(--cta); outline-offset: 2px;
}
.nav-item.active {
background: var(--primary-bg); color: var(--primary-hover); font-weight: 600;
border-left: 3px solid var(--cta);
}
.nav-icon { width: 20px; height: 20px; flex-shrink: 0; }
.nav-badge {
margin-left: auto; background: var(--cta); color: #fff;
font-size: .68rem; padding: 2px 8px; border-radius: 99px; font-weight: 600;
}
.sidebar-footer {
margin-top: auto; padding: var(--space-md); border-top: 1px solid var(--border);
}
.user-card { display: flex; align-items: center; gap: 10px; }
.user-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--cta));
display: flex; align-items: center;
justify-content: center; font-weight: 700; color: #fff; font-size: .85rem;
}
.user-name { font-size: .85rem; font-weight: 600; }
.user-role { font-size: .72rem; color: var(--text-muted); }
.build-tag {
margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border);
font-size: .68rem; color: var(--text-muted);
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
letter-spacing: .02em; text-align: center; user-select: all; cursor: help;
}
/* ===== Topbar ===== */
.topbar {
background: var(--surface); border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
padding: 0 var(--space-lg);
}
.topbar-title {
font-size: 1rem; font-weight: 600;
font-family: 'Righteous', sans-serif;
letter-spacing: .02em;
/* Krimpen mag, en dan met puntjes. Zonder dit duwt een lange bandnaam de
hele kolom breder dan het scherm (zie .app-shell hieronder); mét dit
wordt hij netjes afgekapt in plaats van halverwege afgesneden. */
min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* De twee helften van de topbar moeten onder hun min-content kunnen: een
flex-item weigert dat standaard (min-width: auto). */
.topbar > * { min-width: 0; }
.topbar-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* ===== Main Content ===== */
.main-content { padding: var(--space-lg); overflow-y: auto; }
/* ===== Headings ===== */
h1 { font-family: 'Righteous', sans-serif; font-size: 1.5rem; font-weight: 400; margin: 0 0 var(--space-md); letter-spacing: .02em; }
h3 { font-family: 'Righteous', sans-serif; font-size: 1rem; font-weight: 400; margin: 0; letter-spacing: .01em; }
h4 { font-size: .88rem; font-weight: 600; margin: var(--space-md) 0 var(--space-sm); }
/* ===== Buttons ===== */
.btn {
display: inline-flex; align-items: center; gap: 6px;
background: var(--surface-2); border: 1px solid var(--border);
color: var(--text); padding: 9px 16px; border-radius: var(--radius-sm);
font-size: .84rem; cursor: pointer; text-decoration: none;
transition: all var(--transition); font-family: inherit;
}
.btn:hover { background: var(--border); color: var(--text); }
.btn:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
.btn-primary {
background: var(--cta); border: 1px solid var(--cta); color: #fff;
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 16px; border-radius: var(--radius-sm);
font-size: .84rem; cursor: pointer; text-decoration: none;
transition: all var(--transition); font-family: inherit;
font-weight: 600;
}
.btn-primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); transform: translateY(-1px); }
.btn-primary:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
.btn-danger {
background: var(--accent-red-bg); border: 1px solid rgba(239,68,68,.3);
color: var(--accent-red); padding: 9px 16px; border-radius: var(--radius-sm);
font-size: .84rem; cursor: pointer; transition: all var(--transition); font-family: inherit;
}
.btn-danger:hover { background: rgba(239,68,68,.2); }
.btn-sm { padding: 5px 10px; font-size: .78rem; }
.btn-icon {
background: var(--surface-2); border: 1px solid var(--border);
color: var(--text-muted); width: 34px; height: 34px; border-radius: var(--radius-sm);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; font-size: .85rem; transition: all var(--transition); padding: 0;
}
.btn-icon:hover { color: var(--text); background: var(--border); }
.btn-icon:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
/* ===== Cards ===== */
.card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); overflow: hidden;
transition: box-shadow var(--transition);
}
.card-header {
padding: var(--space-md) 20px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
}
.card-header h3 { font-size: .95rem; }
.card-body { padding: var(--space-md) 20px; }
.card-body-flush { padding: 0; overflow: visible; }
/* ===== Stats Cards ===== */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); }
/* Kolomaantal als klasse en niet als inline style: inline wint van elke
media query, en daardoor stonden zes stat-kaarten ook op een telefoon
naast elkaar (680 px in een scherm van 390). */
.stats-grid-2 { grid-template-columns: repeat(2, 1fr); }
.stats-grid-3 { grid-template-columns: repeat(3, 1fr); }
.stats-grid-4 { grid-template-columns: repeat(4, 1fr); }
.stats-grid-6 { grid-template-columns: repeat(6, 1fr); }
.stat-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 20px;
transition: all var(--transition);
}
.stat-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.stat-label { font-size: .78rem; color: var(--text-muted); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: 8px; }
.stat-value { font-size: 1.8rem; font-weight: 700; line-height: 1; font-family: 'Righteous', sans-serif; }
.stat-change { font-size: .75rem; margin-top: 6px; }
.stat-change.up { color: var(--accent-green); }
.stat-icon {
width: 36px; height: 36px; border-radius: 10px;
display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.stat-icon.purple { background: var(--primary-bg); color: var(--primary-hover); }
.stat-icon.green { background: var(--accent-green-bg); color: var(--accent-green); }
.stat-icon.orange { background: var(--accent-orange-bg); color: var(--accent-orange); }
.stat-icon.blue { background: var(--accent-blue-bg); color: var(--accent-blue); }
/* ===== Panels Grid ===== */
.panels-grid { display: grid; grid-template-columns: 1fr 360px; gap: 20px; }
/* ===== Badges ===== */
.badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 99px; font-size: .73rem; font-weight: 600;
}
.badge-green, .badge-success { background: var(--accent-green-bg); color: var(--accent-green); }
.badge-orange, .badge-warning { background: var(--accent-orange-bg); color: var(--accent-orange); }
.badge-red { background: var(--accent-red-bg); color: var(--accent-red); }
.badge-blue { background: var(--accent-blue-bg); color: var(--accent-blue); }
.badge-purple { background: var(--primary-bg); color: var(--primary-hover); }
.badge-grey, .badge-gray { background: rgba(148,163,184,.15); color: var(--text-muted); }
/* ===== Tables ===== */
/* Table wrapper for horizontal scroll on mobile */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; min-width: 700px; }
.table th {
text-align: left; padding: 12px 20px; font-size: .72rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
border-bottom: 1px solid var(--border); background: var(--surface-2);
white-space: nowrap;
}
.table td { padding: 14px 20px; font-size: .85rem; border-bottom: 1px solid var(--border); }
.table tr { transition: background var(--transition); }
.table tr:hover td { background: rgba(67,56,202,.06); }
.table-actions { display: flex; gap: 6px; flex-shrink: 0; }
/* Mobile card view for tables */
.mobile-cards { display: none; }
@media (max-width: 768px) {
.desktop-table { display: none; }
.mobile-cards { display: flex; flex-direction: column; gap: 12px; padding: var(--space-md); }
.mobile-card {
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 14px;
}
.mobile-card-header {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 8px;
margin-bottom: 10px;
}
.mobile-card-title { font-weight: 600; font-size: .9rem; word-break: break-word; }
.mobile-card-row {
display: flex; justify-content: space-between; align-items: center;
gap: 12px;
padding: 4px 0; font-size: .82rem;
}
.mobile-card-row > span:last-child { text-align: right; word-break: break-word; min-width: 0; }
.mobile-card-label { color: var(--text-muted); flex-shrink: 0; }
.mobile-card-actions {
display: flex; gap: 8px; margin-top: 10px; padding-top: 10px;
border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.mobile-card-actions .btn, .mobile-card-actions .btn-icon {
flex: 1 1 auto; min-width: 80px; justify-content: center; padding: 8px;
}
}
/* ===== Gig List ===== */
.gig-item {
display: flex; align-items: center; gap: 14px;
padding: 14px 20px; border-bottom: 1px solid var(--border);
transition: background var(--transition);
}
.gig-item:last-child { border-bottom: none; }
.gig-item:hover { background: rgba(67,56,202,.06); }
.gig-date { text-align: center; min-width: 50px; }
.gig-day { font-size: 1.4rem; font-weight: 700; line-height: 1; font-family: 'Righteous', sans-serif; }
.gig-month { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.gig-title { font-size: .88rem; font-weight: 600; }
.gig-loc { font-size: .78rem; color: var(--text-muted); }
.gig-status { margin-left: auto; }
/* ===== Timeline ===== */
.timeline-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.timeline-item:last-child { border-bottom: none; }
.timeline-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.timeline-dot.green { background: var(--accent-green); }
.timeline-dot.orange { background: var(--accent-orange); }
.timeline-dot.blue { background: var(--accent-blue); }
.timeline-dot.purple { background: var(--primary); }
.timeline-text { font-size: .84rem; line-height: 1.6; }
.timeline-time { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
/* ── Activiteitenregel als link ─────────────────────────────────────────────
De regels in "recente activiteit" wijzen naar de boeking waar ze over gaan.
Als en niet als rij met een klik-handler: dan werkt middelklik, "openen
in nieuw tabblad" en toetsenbordnavigatie zoals overal, en hoeft er geen
circuit te staan voor een navigatie. */
.timeline-dot.red { background: var(--accent-red, #EF4444); }
a.timeline-link {
align-items: flex-start;
color: inherit;
text-decoration: none;
border-radius: 8px;
padding: 12px 8px;
margin: 0 -8px;
transition: background .12s ease;
}
a.timeline-link:hover { background: var(--surface-2); }
a.timeline-link:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
.timeline-body { flex: 1; min-width: 0; }
.timeline-status { color: var(--text-muted); }
.timeline-show {
font-size: .78rem;
color: var(--text);
margin-top: 2px;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.timeline-geen-datum { color: var(--text-muted); font-style: italic; }
.timeline-chevron {
color: var(--text-muted);
flex-shrink: 0;
margin-top: 2px;
}
a.timeline-link:hover .timeline-chevron { color: var(--cta); }
/* ===== Forms ===== */
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.form-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 20px;
}
.form-card h3 {
font-size: .95rem; margin: 0 0 14px;
color: var(--cta); font-family: 'Righteous', sans-serif;
}
.form-card h4 { font-size: .82rem; font-weight: 600; margin: var(--space-md) 0 10px; color: var(--text); }
.form-hint-block { font-size: .78rem; color: var(--text-muted); margin: -8px 0 14px; }
.label {
display: block; font-size: .78rem; color: var(--text-muted);
margin-bottom: 5px; margin-top: 12px; font-weight: 500;
}
.input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
width: 100%; max-width: 100%;
padding: 10px 14px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text); font-size: .85rem;
outline: none; transition: border-color var(--transition), box-shadow var(--transition);
font-family: inherit; line-height: 1.5;
}
.input:focus, input:focus, select:focus, textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(67,56,202,.2);
}
.input::placeholder, input::placeholder, textarea::placeholder { color: var(--text-muted); }
select { appearance: none; cursor: pointer; }
textarea { min-height: 80px; resize: vertical; }
.checkbox {
display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px;
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
margin-top: 3px; accent-color: var(--cta);
width: auto; padding: 0; cursor: pointer;
}
.checkbox label { font-size: .84rem; line-height: 1.5; cursor: pointer; }
.form-section-divider {
font-size: .72rem; font-weight: 600; text-transform: uppercase;
letter-spacing: .08em; color: var(--text-muted);
margin: 20px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
/* ===== Search Bar ===== */
.search-bar {
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 8px 14px; font-size: .85rem;
color: var(--text); width: 240px; outline: none; font-family: inherit;
transition: border-color var(--transition);
}
.search-bar::placeholder { color: var(--text-muted); }
.search-bar:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(67,56,202,.2); }
/* ===== Alerts ===== */
.alert { background: var(--accent-orange-bg); border: 1px solid rgba(245,158,11,.3); padding: 12px var(--space-md); border-radius: var(--radius-sm); color: var(--accent-orange); font-size: .85rem; }
.alert-error { background: var(--accent-red-bg); border-color: rgba(239,68,68,.3); color: var(--accent-red); }
.alert-success { background: var(--accent-green-bg); border-color: rgba(34,197,94,.3); color: var(--accent-green); }
/* ===== Modal ===== */
.modal-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center; z-index: 100;
}
/* ===== Login (no sidebar) ===== */
.login-shell {
min-height: 100vh; display: flex; align-items: center;
justify-content: center; background: var(--bg);
}
/* Light card zodat het donkere 4am.nl wordmark uit het logo goed leesbaar is. */
.login-card {
background: #ffffff; color: #1e1b4b;
border: 1px solid rgba(0,0,0,.08);
border-radius: var(--radius); padding: var(--space-xl); width: 100%; max-width: 460px;
box-shadow: var(--shadow-lg);
}
.login-card h1 { font-size: 1.3rem; margin-bottom: 4px; color: #1e1b4b; }
.login-card .sub { color: #64748b; font-size: .85rem; margin-bottom: var(--space-lg); }
.login-card .label { color: #334155; }
.login-card .input {
background: #f8fafc; color: #0f172a;
border: 1px solid #cbd5e1;
}
.login-card .input:focus { border-color: var(--primary); background: #ffffff; }
.login-card a { color: var(--primary); }
.login-card .alert-error { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.login-card .alert-success { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
/* Checklist-rijen in de onboarding-bevestiging.
Deze kaart is met opzet áltijd licht (zie .login-card hierboven: vaste
#ffffff met donkere tekst), ook wanneer de rest van de app in donkere modus
staat. Daarom mogen de rijen erbinnen géén thema-token als achtergrond
gebruiken: --surface-2 is in donkere modus #1E2040, en dat gaf donkere tekst
op een donker vlak — onleesbaar, en alleen in donkere modus zichtbaar. */
.login-card .onb-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-radius: 8px;
background: #f8fafc; color: #1e1b4b;
border: 1px solid #e2e8f0;
}
.login-card .onb-row strong { color: #1e1b4b; }
.login-card .onb-row .onb-row-hint { color: #64748b; font-size: .85rem; }
.login-card .onb-row-mark { font-size: 1.2rem; line-height: 1; }
.login-card .onb-row-mark-done { color: #15803d; }
.login-card .onb-row-mark-todo { color: #64748b; }
.login-card .onb-row-mark-warn { color: #b45309; }
/* ===== Publieke klant-layout (geen sidebar/topbar) ===== */
.public-shell {
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--bg);
}
.public-header {
padding: 20px 24px;
border-bottom: 1px solid var(--border);
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
}
.public-main {
flex: 1;
padding: 32px 20px;
max-width: 900px;
margin: 0 auto;
width: 100%;
}
.public-footer {
padding: 20px;
text-align: center;
border-top: 1px solid var(--border);
background: var(--surface);
}
/* ===== Utilities ===== */
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: var(--space-md); }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: var(--space-lg); }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: var(--space-md); }
.mb-24 { margin-bottom: var(--space-lg); }
.gap-8 { gap: var(--space-sm); }
.flex { display: flex; }
.flex-end { justify-content: flex-end; }
.items-center { align-items: center; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: .85rem; }
/* ===== Validation ===== */
.validation-message { color: var(--accent-red); font-size: .78rem; margin-top: 4px; }
/* ===== Mobile menu (hamburger + drawer) ===== */
.mobile-menu-toggle {
display: none;
background: transparent; border: none;
color: var(--text); padding: 8px; cursor: pointer;
border-radius: var(--radius-sm);
margin-right: 8px;
}
.mobile-menu-toggle:hover { background: var(--surface-2); }
.mobile-menu-toggle svg { width: 24px; height: 24px; display: block; }
.mobile-backdrop {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,.55); z-index: 998;
-webkit-tap-highlight-color: transparent;
}
.mobile-backdrop.is-visible {
display: block;
animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Tap highlight + larger hit area op touch devices */
.mobile-menu-toggle {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
min-width: 44px; min-height: 44px;
}
/* ===== Responsive ===== */
@media (max-width: 1200px) { .panels-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
/* minmax(0, 1fr) en niet 1fr: een fr-track heeft van zichzelf een minimum
van min-content, en de topbar (hamburger + logo + bandnaam, alles op één
regel) is minstens 549 px breed. Daardoor werd de kolom 549 px in een
scherm van 390 en stond op élke pagina ~40% buiten beeld — niet alleen
de topbar, want main-content zit in dezelfde kolom. */
.app-shell { grid-template-columns: minmax(0, 1fr); }
.sidebar {
display: flex;
position: fixed; top: 0; left: 0;
width: var(--sidebar-w); max-width: 85vw; height: 100vh;
z-index: 999;
transform: translateX(-100%);
transition: transform var(--transition);
box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.sidebar.is-open { transform: translateX(0); }
.mobile-menu-toggle { display: inline-flex; }
.mobile-backdrop.is-visible { display: block; }
/* [class*="stats-grid"] vangt ook stats-grid-4/-6 en wat er later bij komt;
een opsomming raakt achter zodra iemand een variant toevoegt. */
[class*="stats-grid"] { grid-template-columns: repeat(2, 1fr); }
.form-grid { grid-template-columns: 1fr; }
.form-grid-2 { grid-template-columns: 1fr; }
h1 { font-size: 1.2rem; }
.topbar { padding: 0 var(--space-md); }
.topbar-title { font-size: .95rem; }
/* Search bar groeit mee met container (voorkomt horizontale scroll op smalle schermen). */
.search-bar { width: 100%; max-width: 100%; min-width: 0; }
/* Page headers met titel + zoek + knoppen mogen wrappen zodat niets overschrijft. */
.page-header,
.card-header { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 480px) {
[class*="stats-grid"] { grid-template-columns: 1fr; }
.main-content { padding: var(--space-md); }
/* Tabs in bijv. boekingsformulier moeten wrappen i.p.v. afgekapt worden. */
.form-grid-2 > div { min-width: 0; }
/* Modal-kaart vult bijna hele viewport op kleine telefoons. */
.modal-backdrop > .card { width: 98% !important; max-height: 95vh; }
}
/* ===== Agenda matrix — mobiele compact-mode met zoom =====
Desktop (> 768px) blijft 100% ongewijzigd: de `.agenda-matrix` wrapper heeft
geen effect. Onder 768px krijgt de wrapper een --zoom variabele (default 1.0)
en schalen cell-afmetingen, fonts, padding mee. Ctrl+wheel / pinch / slider
verandert --zoom (zie agenda-zoom.js). De inline styles op | / | worden
hier bewust met !important overruled om de huidige Agenda.razor niet overhoop
te gooien. */
.agenda-zoom-controls { display: none; } /* desktop: geen controls */
.agenda-zoom-hint {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,.72); color: #fff;
padding: 8px 18px; border-radius: 16px;
font-size: .82rem; font-weight: 600;
pointer-events: none; opacity: 0;
transition: opacity .18s;
z-index: 10;
}
.agenda-zoom-hint.show { opacity: 1; }
@media (max-width: 768px) {
.agenda-matrix { --zoom: 1; position: relative; }
.agenda-zoom-controls {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; background: var(--surface);
border-bottom: 1px solid var(--border);
font-size: .78rem; color: var(--text-muted);
}
.agenda-zoom-controls .agenda-zoom-slider {
flex: 1; accent-color: var(--primary-hover);
}
.agenda-zoom-controls .agenda-zoom-label {
font-family: 'Righteous', monospace;
color: var(--text); min-width: 46px; text-align: center;
}
.agenda-zoom-controls button {
background: transparent; border: 1px solid var(--border); color: var(--text);
border-radius: var(--radius-sm); width: 32px; height: 32px;
font-size: 16px; cursor: pointer; font-family: inherit;
}
/* Compacter startpunt én schaling op basis van --zoom.
De inline-styles uit Agenda.razor hebben specificity 1000; we gebruiken
!important om ze te overrulen binnen de matrix-wrapper. */
.agenda-matrix table { min-width: 0 !important; }
.agenda-matrix thead th {
padding: calc(2px * var(--zoom)) 0 !important;
font-size: calc(7px * var(--zoom)) !important;
min-width: calc(18px * var(--zoom)) !important;
}
.agenda-matrix thead th:first-child {
min-width: calc(80px * var(--zoom)) !important;
padding: calc(4px * var(--zoom)) calc(6px * var(--zoom)) !important;
font-size: calc(10px * var(--zoom)) !important;
}
.agenda-matrix thead th > div:first-child { font-size: calc(7px * var(--zoom)) !important; }
.agenda-matrix thead th > div:last-child { font-size: calc(9px * var(--zoom)) !important; }
.agenda-matrix tbody td {
padding: 0 !important;
height: calc(18px * var(--zoom)) !important;
min-width: calc(18px * var(--zoom)) !important;
font-size: calc(9px * var(--zoom)) !important;
}
.agenda-matrix tbody td:first-child {
min-width: calc(80px * var(--zoom)) !important;
width: calc(80px * var(--zoom)) !important;
padding: calc(2px * var(--zoom)) calc(6px * var(--zoom)) !important;
font-size: calc(10px * var(--zoom)) !important;
}
/* Prevent page-zoom op pinch — we willen ALLEEN de matrix zoomen. */
.agenda-matrix { touch-action: pan-x pan-y; }
}
/* =====================================================================
Rider edit mode — sidebar inklappen voor extra werkruimte
Wordt door rider-editor.js geactiveerd via body-class .rider-edit-mode
wanneer de gebruiker /riders/nieuw of /riders/{id} opent.
===================================================================== */
@media (min-width: 901px) {
body.rider-edit-mode .app-shell {
grid-template-columns: 56px 1fr;
transition: grid-template-columns .25s ease;
}
body.rider-edit-mode .sidebar {
overflow: hidden;
}
/* Toon alleen iconen — alle tekst-content verbergen */
body.rider-edit-mode .sidebar-brand-name,
body.rider-edit-mode .sidebar-brand-sub,
body.rider-edit-mode .nav-section,
body.rider-edit-mode .nav-item span:not(.nav-icon-wrap),
body.rider-edit-mode .user-name,
body.rider-edit-mode .user-role,
body.rider-edit-mode .build-tag {
display: none !important;
}
body.rider-edit-mode .sidebar-brand {
padding: 16px 8px 12px;
justify-content: center;
}
body.rider-edit-mode .sidebar-logo {
width: 32px; height: 32px;
}
body.rider-edit-mode .nav-item {
justify-content: center;
padding: 10px 8px;
margin: 2px 4px;
}
body.rider-edit-mode .nav-item .nav-icon {
width: 20px; height: 20px;
}
body.rider-edit-mode .nav-badge {
display: none;
}
body.rider-edit-mode .user-card {
justify-content: center;
padding: 0;
}
body.rider-edit-mode .sidebar-footer {
padding: 8px;
}
/* Toggle: wanneer user expliciet de sidebar weer open wil tijdens editing */
body.rider-edit-mode.rider-sidebar-open .app-shell {
grid-template-columns: var(--sidebar-w) 1fr;
}
body.rider-edit-mode.rider-sidebar-open .sidebar-brand-name,
body.rider-edit-mode.rider-sidebar-open .sidebar-brand-sub,
body.rider-edit-mode.rider-sidebar-open .nav-section,
body.rider-edit-mode.rider-sidebar-open .nav-item span,
body.rider-edit-mode.rider-sidebar-open .user-name,
body.rider-edit-mode.rider-sidebar-open .user-role,
body.rider-edit-mode.rider-sidebar-open .build-tag {
display: revert !important;
}
body.rider-edit-mode.rider-sidebar-open .sidebar-brand {
padding: 20px 20px 12px;
justify-content: flex-start;
}
body.rider-edit-mode.rider-sidebar-open .nav-item {
justify-content: flex-start;
padding: 10px 16px;
margin: 2px 8px;
}
body.rider-edit-mode.rider-sidebar-open .nav-badge {
display: inline;
}
}
/* Sidebar-toggle knop in de topbar — alleen zichtbaar tijdens edit-mode.
Geeft de gebruiker een eenvoudige manier om het menu weer uit te klappen. */
.rider-sidebar-toggle {
display: none;
}
body.rider-edit-mode .rider-sidebar-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text-muted);
padding: 7px 12px;
border-radius: var(--radius-sm);
font-size: .78rem;
font-family: inherit;
cursor: pointer;
margin-right: 12px;
transition: all var(--transition);
}
body.rider-edit-mode .rider-sidebar-toggle:hover {
background: var(--border);
color: var(--text);
}
body.rider-edit-mode .rider-sidebar-toggle svg {
width: 14px; height: 14px;
}
body.rider-edit-mode.rider-sidebar-open .rider-sidebar-toggle .label-collapse,
body.rider-edit-mode:not(.rider-sidebar-open) .rider-sidebar-toggle .label-expand {
display: inline;
}
body.rider-edit-mode.rider-sidebar-open .rider-sidebar-toggle .label-expand,
body.rider-edit-mode:not(.rider-sidebar-open) .rider-sidebar-toggle .label-collapse {
display: none;
}
/* ── Fase 1 UX-veegronde ─────────────────────────────────────────────── */
/* Klikbare tabelrijen (boekingen, repertoire): hele rij is de primaire
actie; de actie-kolom stopt de klik-bubbel in de component zelf. */
.row-link { cursor: pointer; }
.row-link:hover td { background: var(--surface-2, rgba(99, 102, 241, .07)); }
/* Legenda onder de boekingen-tabel voor de checklist-iconen. */
.checklist-legend {
display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
padding: 10px 16px; border-top: 1px solid var(--border);
color: var(--text-muted); font-size: .76rem;
}
.checklist-legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.checklist-legend-item svg { opacity: .7; }
/* Eigen Blazor-reconnect-overlay (markup in _Host.cshtml). Het framework
wisselt de components-reconnect-*-classes; wij stylen alleen de states. */
.reconnect-modal {
position: fixed; inset: 0; z-index: 9999;
display: none; align-items: center; justify-content: center;
background: rgba(10, 10, 26, .72); backdrop-filter: blur(2px);
}
.reconnect-modal.components-reconnect-show,
.reconnect-modal.components-reconnect-failed,
.reconnect-modal.components-reconnect-rejected { display: flex; }
.reconnect-card {
background: var(--card, #14142c); color: var(--text, #ececf4);
border: 1px solid var(--border, #2d2d54); border-radius: 12px;
padding: 26px 32px; max-width: 340px; text-align: center;
box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.reconnect-card .reconnect-msg { margin: 0; font-size: .92rem; display: none; }
.reconnect-card a { color: var(--cta, #22c55e); font-weight: 600; }
.reconnect-modal.components-reconnect-show .reconnect-msg-show { display: block; }
.reconnect-modal.components-reconnect-failed .reconnect-msg-failed,
.reconnect-modal.components-reconnect-rejected .reconnect-msg-failed { display: block; }
.reconnect-spinner {
width: 26px; height: 26px; margin: 0 auto 12px;
border: 3px solid var(--border, #2d2d54); border-top-color: var(--cta, #22c55e);
border-radius: 50%; animation: reconnect-spin 1s linear infinite;
}
.reconnect-modal.components-reconnect-failed .reconnect-spinner,
.reconnect-modal.components-reconnect-rejected .reconnect-spinner { display: none; }
@keyframes reconnect-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .reconnect-spinner { animation: none; } }
/* ═══════════════════════════════════════════════════════════════════════
Mobiele bedienbaarheid (≤768px)
Twee concrete problemen uit de benchmark van 25-07-2026:
1. Ruim een derde van de bedienbare elementen was < 32px hoog. De
richtlijn (WCAG 2.5.5 / Apple HIG) is 44px; op een telefoon in een
donkere zaal is dat het verschil tussen "aangevinkt" en "mis".
2. Formuliervelden stonden op .85rem (≈13px). Safari op iOS zoomt
automatisch in zodra een veld kleiner dan 16px focus krijgt,
waardoor het hele formulier verspringt bij élk veld. 16px is
daarom geen smaakkeuze maar de drempel die dat gedrag uitzet.
min-height i.p.v. height: de layout mag groeien, niets wordt afgekapt.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.input,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"],
input[type="password"], input[type="search"], input[type="url"],
select, textarea {
font-size: 16px; /* zet iOS auto-zoom uit — niet verlagen */
min-height: 44px;
padding-top: 11px; padding-bottom: 11px;
}
textarea { min-height: 88px; }
.btn, .btn-primary, button[type="submit"], button[type="button"] {
min-height: 44px;
font-size: .9rem;
}
/* Compacte varianten blijven visueel kleiner, maar houden een
bruikbaar raakvlak. */
.btn-sm {
min-height: 40px;
padding: 8px 14px;
font-size: .84rem;
}
.btn-icon { width: 44px; height: 44px; }
/* Checkbox/radio: het vierkantje zelf groter én de hele rij aantikbaar,
zodat je niet precies het hokje hoeft te raken. */
input[type="checkbox"], input[type="radio"] {
width: 20px; height: 20px;
min-height: 20px; /* overschrijft de generieke regel hierboven */
flex-shrink: 0;
}
.checkbox {
min-height: 44px;
display: flex; align-items: center; gap: 10px;
}
/* Tabelacties (bv. 🗑 per prijsregel) staan vaak los in een cel. */
table .btn, table .btn-sm, table button { min-height: 40px; }
}
/* ═══════════════════════════════════════════════════════════════════════
Agenda: meerdere shows per dag in één cel (MVP 2)
De agenda is een matrix van bandlid × dag, en een cel kon één toestand
tonen: één kleur voor één boeking. Bands die meerdere shows op een dag
doen (tape-acts, party-acts) zagen daardoor maar één van hun shows.
Oplossing: de cel splitst in evenveel segmenten als er shows zijn, op
tijd gesorteerd van boven naar onder. Daarmee is de verticale as
impliciet een tijdas zonder dat we uren tonen — een tijdlijn in een cel
van ~26px is onleesbaar.
Afwezigheid is geen eigen kleur meer maar een arcering ÓVER het segment
dat het raakt. Zo zie je "speelt 's avonds wel, 's middags niet" in één
cel, en botst er iets, dan krijgt de cel een rode rand.
═══════════════════════════════════════════════════════════════════════ */
.ag-cell {
display: flex; flex-direction: column; gap: 1px;
min-height: 26px; height: 100%; padding: 1px;
}
.ag-seg { flex: 1; min-height: 5px; border-radius: 2px; }
/* Arcering = dit segment overlapt met een afwezigheid van dit lid. */
.ag-seg-afw {
background-image: repeating-linear-gradient(135deg,
rgba(239, 68, 68, .92) 0 3px, rgba(239, 68, 68, 0) 3px 7px);
}
/* Hele dag afwezig zonder show: grijze arcering i.p.v. een vlak, zodat
"afwezig" en "geboekt" visueel nooit op elkaar lijken. */
.ag-seg-vrij-afw {
background: rgba(148, 163, 184, .16);
background-image: repeating-linear-gradient(135deg,
rgba(148, 163, 184, .75) 0 3px, rgba(148, 163, 184, 0) 3px 7px);
}
.ag-conflict { outline: 2px solid var(--accent-red); outline-offset: -2px; border-radius: 4px; }
/* Aantal shows op deze dag. Alleen vanaf 2 — bij één show is het ruis. */
.ag-count {
position: absolute; right: 1px; bottom: 0;
font-size: .55rem; line-height: 1.4; color: #fff;
background: rgba(0, 0, 0, .55); border-radius: 3px; padding: 0 3px;
pointer-events: none;
}
/* Vanaf vier shows vatten we de rest samen: meer dan drie streepjes van
een paar pixels leest niemand meer. */
.ag-seg-rest {
background: repeating-linear-gradient(90deg,
var(--text-muted) 0 2px, transparent 2px 5px);
opacity: .8;
}
/* ═══════════════════════════════════════════════════════════════════════
Speeltijd-veld + Dagplanning-popup
Bij het aanmaken van een aanvraag/optie kun je naast de datum ook een
speeltijd kiezen. De popup toont eerst de dag (wat staat er al?) en dan
de keuze — want de winst zit in zien of het past, niet in het invoeren.
Invoer verschilt per schermgrootte, resultaat niet: op desktop een
raster van uren (één klik), op mobiel twee steppers (één duim). Beide
staan in de markup; CSS schakelt om op 640px.
═══════════════════════════════════════════════════════════════════════ */
.sp-veld {
display: flex; align-items: center; gap: 10px;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 10px 12px; min-height: 46px; cursor: pointer;
}
.sp-veld:hover { border-color: var(--primary-hover); }
.sp-veld:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
.sp-veld-icon { font-size: 1.05rem; }
.sp-veld-tijd { font-family: 'Righteous', monospace; font-size: 1rem; }
.sp-veld-leeg { color: var(--text-muted); }
.sp-veld-actie { color: var(--primary-hover); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.sp-veld-wis {
background: none; border: 0; color: var(--text-muted); cursor: pointer;
font-size: 1.15rem; line-height: 1; padding: 2px 6px;
}
.sp-veld-wis:hover { color: var(--accent-red); }
.sp-hint { font-size: .75rem; color: var(--text-muted); margin-top: 5px; }
.sp-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1000; }
.sp-modal {
position: fixed; z-index: 1001; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden;
}
.sp-modal-head {
padding: 14px 17px; border-bottom: 1px solid var(--border);
display: flex; justify-content: space-between; align-items: center; gap: 10px;
flex-shrink: 0;
}
.sp-modal-titel { font-family: 'Righteous', sans-serif; font-size: 1rem; }
.sp-modal-sub { color: var(--text-muted); font-size: .78rem; }
/* min-height:0 is hier niet optioneel: een flex-item staat standaard op
min-height:auto en krimpt dus nooit onder z'n inhoud. Zonder deze regel
groeit de body door de max-height van de modal heen, wordt de voet met de
knoppen eronder geschoven en knipt overflow:hidden hem weg. */
.sp-modal-body { padding: 15px 17px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.sp-modal-foot {
padding: 13px 17px; border-top: 1px solid var(--border);
display: flex; gap: 9px; justify-content: flex-end;
flex-shrink: 0;
}
.sp-label-klein { font-size: .75rem; color: var(--text-muted); }
.sp-leeg-dag {
margin-top: 6px; padding: 14px; text-align: center; font-size: .82rem;
color: var(--text-muted); background: var(--surface-2);
border: 1px dashed var(--border); border-radius: 9px;
}
/* Dag-tijdlijn: 12:00 tot 03:00 de volgende dag. */
.sp-tl {
position: relative; background: var(--surface-2); border-radius: 9px;
height: 56px; margin-top: 6px; overflow: hidden;
}
.sp-tl-uur { position: absolute; top: 0; bottom: 0; border-left: 1px solid rgba(148,163,184,.14); }
.sp-tl-uur span { position: absolute; top: 2px; left: 3px; font-size: .6rem; color: var(--text-muted); }
.sp-blok {
position: absolute; top: 20px; height: 30px; border-radius: 5px;
font-size: .68rem; display: flex; align-items: center; justify-content: center;
overflow: hidden; white-space: nowrap; padding: 0 4px; font-weight: 600;
}
.sp-blok-bestaand { background: var(--accent-green); color: #04240f; }
.sp-blok-optie { background: var(--accent-blue); color: #041426; }
.sp-blok-nieuw { background: var(--accent-orange); color: #2b1a00; outline: 2px solid rgba(255,255,255,.25); }
.sp-blok-botst { outline: 2px solid var(--accent-red); }
.sp-verdict { margin: 9px 0 0; font-size: .82rem; padding: 10px 12px; }
.sp-verdict-uitleg { font-size: .76rem; opacity: .85; margin-top: 4px; }
/* Uur-raster (desktop). */
.sp-starttijd-kop {
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px; flex-wrap: wrap;
}
/* .label is globaal width:100% en zou de schakelaar naar de volgende regel
duwen; hier mag hij krimpen tot z'n tekst. */
.sp-starttijd-kop .label { width: auto; margin-bottom: 0; }
.sp-stap-schakelaar { display: flex; gap: 5px; }
.sp-stap-schakelaar .chip { font-size: .72rem; padding: 3px 9px; }
.sp-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 6px; }
/* Halve uren verdubbelen het aantal knoppen. Acht kolommen houdt het op vier
rijen in plaats van vijf, en de labels zijn even breed (HH:mm). */
.sp-raster.fijn { grid-template-columns: repeat(8, 1fr); gap: 5px; }
.sp-raster.fijn .sp-uur { padding: 7px 2px; font-size: .82rem; }
.sp-uur {
padding: 9px 0; min-height: 44px; text-align: center;
background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px;
color: var(--text); font-family: 'Righteous', monospace; font-size: .85rem; cursor: pointer;
}
.sp-uur:hover { border-color: var(--primary-hover); }
.sp-uur.on { background: var(--primary); border-color: var(--primary-hover); color: #fff; }
.sp-uur.bezet { opacity: .34; text-decoration: line-through; }
/* Steppers (mobiel). */
.sp-stepper-wrap { display: none; }
.sp-stepper {
display: flex; align-items: center; border: 1px solid var(--border);
border-radius: 8px; overflow: hidden; background: var(--surface-2); margin-top: 6px;
}
.sp-stepper button {
flex: none; width: 52px; height: 48px; background: transparent; border: 0;
color: var(--text); font-size: 1.2rem; cursor: pointer;
}
.sp-stepper button:hover { background: var(--border); }
.sp-stepper .waarde { flex: 1; text-align: center; font-family: 'Righteous', monospace; font-size: 1.05rem; }
.sp-presets { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 7px; }
.sp-presets .chip {
background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
padding: 8px 13px; border-radius: 99px; font-size: .82rem; cursor: pointer;
min-height: 40px; display: inline-flex; align-items: center;
}
.sp-presets .chip.on {
background: var(--primary-bg); border-color: var(--primary-hover);
color: var(--text); font-weight: 600;
}
.sp-resultaat {
display: flex; align-items: center; gap: 10px; margin-top: 15px; padding: 11px 13px;
background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
}
.sp-resultaat-label { color: var(--text-muted); font-size: .8rem; }
.sp-resultaat-tijd { font-family: 'Righteous', monospace; font-size: 1.15rem; }
/* Wanneer je dit veld nodig hebt. Loopt op desktop achter «optioneel» aan,
gescheiden door een punt. */
.sp-veld-toelichting { opacity: .6; }
.sp-veld-toelichting::before { content: " \00b7 "; }
@media (max-width: 640px) {
.sp-raster { display: none; }
.sp-stepper-wrap { display: block; }
/* De schakelaar stuurt alleen het raster aan, en dat is hier verborgen. De
steppers lopen sowieso al in stappen van 30 minuten. */
.sp-stap-schakelaar { display: none; }
/* Duim-formaat binnen de popup: de duur-chips stonden op 40px en er staan er
nu zeven op twee rijen. Bewust alleen hier, niet op .chip globaal. */
.sp-modal .chip { min-height: 44px; }
/* Voorpagina-header compacter op smalle schermen.
Dit is de enige media query op de voorpagina, en met opzet: het
"geen breakpoints"-principe uit het ontwerp gaat over de inhoudsgrids
(die vouwen vanzelf), niet over een header die door de taalkeuze vier
rijen hoog werd. Sticky × 239px is bijna een derde van een
375×812-scherm, permanent. Met kleinere maten en strakkere gaps zakt
dat naar drie rijen.
De taalkeuze houdt z'n 44px hoogte — dat is de ondergrens voor een
duim — maar mag smaller, want twee letters passen daar ruim in. */
Wat wijkt: de twee anker-links. Op een telefoon scroll je toch, en
"Hoe het werkt" en "Prijs" staan een halve veeg lager op de pagina —
ze kosten daar meer dan ze opleveren. "Inloggen" blijft staan, want dat
is een bestemming en geen sprong binnen de pagina. */
.gp-head-row { padding: 8px 16px; gap: 8px 12px; }
.gp-nav { gap: 14px; font-size: 14px; }
.gp-nav a[href^="#"] { display: none; }
.gp-talen { gap: 0; }
.gp-talen a { min-width: 32px; padding: 0 2px; font-size: 12.5px; }
.gp-word { font-size: 19px; }
/* Smal scherm: eigen regel in plaats van een afgebroken staart. Geldt voor
elke taal — het Franse equivalent is nog een stuk langer. */
.sp-veld-toelichting { display: block; }
.sp-veld-toelichting::before { content: none; }
.sp-modal {
left: 0; right: 0; bottom: 0; top: auto; transform: none;
width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0;
}
.sp-modal-foot { flex-direction: column-reverse; }
.sp-modal-foot .btn, .sp-modal-foot .btn-primary { width: 100%; justify-content: center; }
}
/* ══════════════════════════════════════════════════════════════════════
Voorpagina GigPlano (/ voor anonieme bezoekers)
──────────────────────────────────────────────────────────────────────
Bewust géén media queries: alle kolommen zijn auto-fit/minmax en alle
typografie clamp(). Daarom vouwt de pagina vanzelf en overleeft hij ook
de ~30% langere Duitse samenstellingen zonder losse breakpoints.
Alles staat onder .gp- zodat het niets in de app kan raken.
══════════════════════════════════════════════════════════════════════ */
/* De voorpagina staat los van het app-thema.
Het kleurritme donker/licht is hier ontwerp, geen voorkeur: donker bij de
app en de zaal, licht waar het op een telefoon buiten beter leest. Zou de
pagina met [data-theme="light"] meeklappen, dan verandert de helft van de
tokens wél (--bg, --text, --text-muted, --cta) en de andere helft niet
(--text-soft, --light-*, --footer-bg) — en botsen ze. Dat leverde precies
de onleesbare plekken op: "per maand" kwam op 3,4:1 en de subkop van de
hero werd lichtgrijs op lichtgrijs.
Daarom worden alle gebruikte tokens hier opnieuw gezet. Custom properties
erven, dus dit ene blok pint de hele pagina vast zonder dat elke regel
eronder aangepast hoeft te worden. Een bezoeker ziet dezelfde pagina,
ongeacht wat er in zijn account staat. */
.gp-page {
--bg: #0F0F23;
--surface: #161831;
--surface-2: #1E2040;
--border: #2A2D52;
--text: #F8FAFC;
--text-muted: #94A3B8;
--primary: #4338CA;
--primary-hover: #6366F1;
--cta: #22C55E;
--cta-hover: #16A34A;
--accent-orange: #F59E0B;
width: 100%; overflow-x: hidden;
}
/* De app zet h1/h3 globaal op Righteous. Op deze pagina is Righteous alleen
voor getallen en één datumkop — koppen en woordmerk horen in Poppins 600,
anders leest de hero als een bandlogo in plaats van als een propositie.
Element-selectors winnen van een geërfde waarde, dus dit moet expliciet.
Alleen font-family: grootte, marge en letter-spacing komen van de
.gp-*-klassen en die winnen al van een kale element-selector. */
.gp-page h1, .gp-page h2, .gp-page h3, .gp-page .gp-word {
font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}
/* Losse links erven de kleur van hun sectie; knoppen en de slot-link zetten
hun eigen kleur. Die uitzonderingen moeten hieronder expliciet terug,
want ".gp-page a" is specifieker dan een losse knopklasse — zonder dat
kregen álle knoppen de lichte app-tekstkleur en werd de witte Free-knop
onleesbaar (en groen/wit haalde 2,2:1 in plaats van de bedoelde 9:1). */
.gp-page a { color: inherit; text-decoration: none; }
.gp-page a:hover { text-decoration: underline; }
.gp-page a.gp-btn-cta { color: var(--cta-ink); }
.gp-page a.gp-btn-ghost { color: var(--text); }
.gp-page a.gp-plan-knop-outline { color: var(--light-text); }
.gp-page a.gp-plan-knop-outline:hover { color: var(--light-card); }
.gp-page a.gp-slot-link { color: #A5B4FC; }
/* Focus blijft zichtbaar: de app wordt met toetsenbord én in donkere zalen
gebruikt. Niet weghalen. */
.gp-page :focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; border-radius: 4px; }
.gp-in { max-width: 1160px; margin: 0 auto; padding-inline: 20px; }
/* min-width:0 op grid-kinderen is wat de ellipsis in de agendakaart laat
werken én wat horizontale scroll op 375px voorkomt. */
.gp-page [class^="gp-grid"] > * { min-width: 0; }
/* ── Header ─────────────────────────────────────────────────────────── */
.gp-head {
position: sticky; top: 0; z-index: 20;
background: rgba(15,15,35,.92); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--surface-2);
}
.gp-head-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 20px; }
.gp-lockup { display: flex; align-items: center; gap: 11px; margin-right: auto; min-height: 44px; }
.gp-word { font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.gp-word .gig { opacity: .55; }
.gp-nav { display: flex; align-items: center; gap: 22px; font-size: 15px; color: var(--text-muted); }
/* 44px is de harde ondergrens voor raakvlakken in deze app. Het ontwerp gaf
deze links padding:8px (≈40px); als flex-item met min-height halen ze de
norm zonder dat de header hoger wordt — de groene knop is toch al 44. Zo
blijft het ook zonder media query kloppen. */
.gp-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
/* Taalkeuze: twee-letter-codes, want vlaggen zijn landen en geen talen en
volledige taalnamen kosten hier de halve header. De actieve staat is
groen én vetter — kleur alleen is voor kleurblinde bezoekers geen
onderscheid. */
.gp-talen { display: flex; align-items: center; gap: 2px; }
.gp-talen a {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; min-width: 34px; padding: 0 4px;
font-size: 13px; font-weight: 500; color: var(--text-muted);
border-radius: 8px; text-transform: uppercase;
}
.gp-talen a:hover { color: var(--text); text-decoration: none; background: var(--surface); }
.gp-talen a.on { color: var(--cta-soft); font-weight: 700; }
/* ── Knoppen ────────────────────────────────────────────────────────── */
.gp-btn {
display: inline-flex; align-items: center; justify-content: center;
border-radius: 12px; font-weight: 600; text-align: center;
}
.gp-btn:hover { text-decoration: none; }
.gp-btn-sm { min-height: 44px; padding: 0 20px; border-radius: 10px; font-size: 15px; }
.gp-btn-cta { background: var(--cta); color: var(--cta-ink); }
.gp-btn-cta:hover { background: var(--cta-hover); }
.gp-btn-hero { min-height: 52px; padding: 0 28px; font-size: 17px; }
.gp-btn-ghost {
min-height: 52px; padding: 0 22px; border: 1px solid var(--border);
color: var(--text); font-size: 16px; font-weight: 500;
}
.gp-btn-ghost:hover { border-color: var(--primary-hover); }
.gp-btn-slot { min-height: 54px; padding: 0 32px; font-size: 17px; }
/* ── Secties ────────────────────────────────────────────────────────── */
.gp-sec { padding-block: clamp(56px, 7vw, 96px); }
.gp-sec-light { background: var(--light-bg); }
.gp-sec-dark { background: var(--bg); }
/* Twee secties delen één lichte achtergrond; de tweede krijgt daarom geen
bovenpadding, anders valt er een gat in wat één vlak moet zijn. */
.gp-sec-join { padding-top: 0; }
.gp-hero {
padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 104px);
background: radial-gradient(1100px 520px at 18% -10%, var(--surface-2) 0%, var(--bg) 62%);
}
.gp-kolom { display: flex; flex-direction: column; }
.gp-kop { display: flex; flex-direction: column; gap: 14px; max-width: 34em; }
.gp-kop-breed { max-width: 36em; }
.gp-h1 {
margin: 0; font-size: clamp(34px, 5.2vw, 58px); line-height: 1.06;
letter-spacing: -.025em; font-weight: 600; color: var(--text); text-wrap: balance;
}
.gp-h1 .accent { color: var(--cta); }
.gp-h2 {
margin: 0; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15;
letter-spacing: -.02em; font-weight: 600; text-wrap: balance;
}
.gp-h2-klein { margin: 0; font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; letter-spacing: -.015em; }
.gp-h2-slot { margin: 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.12; letter-spacing: -.02em; font-weight: 600; text-wrap: balance; }
.op-licht { color: var(--light-text); }
.op-donker { color: var(--text); }
.gp-lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--light-muted); text-wrap: pretty; }
/* ── Hero ───────────────────────────────────────────────────────────── */
.gp-grid-hero {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: clamp(36px, 5vw, 64px); align-items: center;
}
.gp-hero-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.gp-badge {
display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px;
border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
font-size: 13.5px; color: var(--text-muted);
}
.gp-badge .stip { width: 7px; height: 7px; border-radius: 99px; background: var(--cta); flex: none; }
.gp-sub { margin: 0; max-width: 30em; font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: var(--text-soft); text-wrap: pretty; }
.gp-knoppen { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.gp-fijn { font-size: 14.5px; color: var(--text-muted); }
.gp-visual { display: flex; justify-content: center; }
/* ── Agendakaart (statische mock-UI, geen live data) ────────────────── */
.gp-agenda {
width: 100%; max-width: 460px; border: 1px solid var(--border); border-radius: 18px;
background: var(--surface); box-shadow: 0 30px 70px rgba(0,0,0,.45); overflow: hidden;
}
.gp-agenda-kop { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.gp-agenda-kop .stip { width: 9px; height: 9px; border-radius: 9px; background: var(--accent-orange); flex: none; }
.gp-agenda-titel { font-size: 14.5px; font-weight: 500; color: var(--text); }
.gp-agenda-maand { margin-left: auto; font-size: 13px; color: var(--text-muted); }
.gp-rij { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--surface-2); }
.gp-rij:last-child { border-bottom: 0; }
.gp-datum { flex: none; width: 46px; text-align: center; }
.gp-datum .dag { font-family: 'Righteous', 'Poppins', sans-serif; font-size: 20px; color: var(--text); line-height: 1.1; }
.gp-datum .maand { font-size: 11px; letter-spacing: .08em; color: var(--text-muted); }
.gp-rij-mid { min-width: 0; flex: 1; }
.gp-rij-titel { font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-rij-sub { font-size: 13px; color: var(--text-muted); }
.gp-rij-sub.waarschuwing { color: var(--accent-orange); }
.gp-pill { flex: none; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 999px; }
.gp-pill-groen { background: rgba(34,197,94,.14); color: var(--cta-soft); }
.gp-pill-oranje { background: rgba(245,158,11,.14); color: #FBBF24; }
.gp-pill-blauw { background: rgba(99,102,241,.16); color: #A5B4FC; }
.gp-agenda-voet {
display: flex; align-items: center; gap: 10px; padding: 14px 18px;
border-top: 1px solid var(--border); background: var(--surface-2); font-size: 13.5px; color: var(--text-soft);
}
.gp-agenda-voet .ok { margin-left: auto; color: var(--cta-soft); }
/* ── Kaartenrijen ───────────────────────────────────────────────────── */
.gp-grid-probleem { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.gp-kaart {
padding: 24px; border-radius: 14px; background: var(--light-card);
border: 1px solid var(--light-border); display: flex; flex-direction: column; gap: 8px;
}
.gp-kaart-titel { font-size: 17px; font-weight: 600; color: var(--light-text); }
.gp-kaart-tekst { font-size: 15px; line-height: 1.6; color: var(--light-muted); text-wrap: pretty; }
.gp-grid-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.gp-feature {
display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 16px;
background: var(--light-card); border: 1px solid var(--light-border);
}
.gp-kicker-rij { display: flex; align-items: center; gap: 10px; }
.gp-vierkant { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.gp-kicker { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--light-muted); }
.gp-h3 { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 600; color: var(--light-text); text-wrap: balance; }
.gp-body { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--light-muted); text-wrap: pretty; }
/* ── Band-sectie ────────────────────────────────────────────────────── */
.gp-grid-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }
.gp-band-tekst { display: flex; flex-direction: column; gap: 18px; }
.gp-band-p { margin: 0; font-size: 17.5px; line-height: 1.65; color: var(--text-soft); max-width: 32em; text-wrap: pretty; }
.gp-lijst { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.gp-lijst li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--text-soft); }
.gp-lijst li::before {
content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px;
background: var(--cta); margin-top: 8px;
}
.gp-lidkaart {
width: 100%; max-width: 330px; border: 1px solid var(--border); border-radius: 24px;
background: var(--surface); padding: 22px 20px; display: flex; flex-direction: column; gap: 16px;
box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.gp-lid-kicker { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.gp-lid-datum { font-family: 'Righteous', 'Poppins', sans-serif; font-size: 23px; color: var(--text); }
.gp-lid-sub { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
.gp-tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gp-tegel { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.gp-tegel .label { font-size: 12px; color: var(--text-muted); }
.gp-tegel .waarde { font-size: 17px; color: var(--text); }
.gp-lid-knop {
display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
border-radius: 12px; border: 1px solid var(--border); color: var(--text-soft); font-size: 15px;
}
/* ── Prijs ──────────────────────────────────────────────────────────── */
.gp-grid-prijs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: stretch; }
.gp-plan { display: flex; flex-direction: column; gap: 18px; padding: 30px; border-radius: 16px; }
.gp-plan-free { background: var(--light-card); border: 1px solid var(--light-border); }
.gp-plan-pro { background: var(--light-text); border: 1px solid var(--light-text); }
.gp-plan-kicker { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--light-muted); }
.gp-plan-pro .gp-plan-kicker { color: var(--text-muted); }
.gp-prijs-rij { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gp-prijs { font-family: 'Righteous', 'Poppins', sans-serif; font-size: clamp(42px, 5vw, 54px); line-height: 1; }
.gp-plan-free .gp-prijs { color: var(--light-text); }
.gp-plan-pro .gp-prijs { color: var(--text); }
.gp-prijs-per { font-size: 16px; color: var(--text-muted); }
.gp-plan-regel { font-size: 16.5px; font-weight: 500; }
.gp-plan-free .gp-plan-regel { color: var(--light-text); }
.gp-plan-pro .gp-plan-regel { color: var(--text); }
.gp-plan-pro .gp-body { color: var(--text-soft); }
.gp-plan-pill { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: rgba(34,197,94,.16); color: var(--cta-soft); }
/* margin-top:auto houdt beide knoppen op dezelfde hoogte, ook als de ene
kaart een regel meer tekst heeft. */
.gp-plan-knop { margin-top: auto; min-height: 50px; font-size: 16px; }
.gp-plan-knop-outline { border: 1px solid var(--light-text); color: var(--light-text); }
.gp-plan-knop-outline:hover { background: var(--light-text); color: var(--light-card); }
/* ── Vertrouwen ─────────────────────────────────────────────────────── */
.gp-grid-vertrouwen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.gp-tegel-licht {
padding: 20px; border-radius: 12px; border: 1px solid var(--light-border);
background: var(--light-card); display: flex; flex-direction: column; gap: 6px;
}
.gp-tegel-licht .titel { font-size: 15.5px; font-weight: 600; color: var(--light-text); }
.gp-tegel-licht .tekst { font-size: 14.5px; line-height: 1.55; color: var(--light-muted); }
/* ── Slot + footer ──────────────────────────────────────────────────── */
.gp-slot { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.gp-slot p { margin: 0; max-width: 34em; font-size: 17.5px; line-height: 1.6; color: var(--text-soft); text-wrap: pretty; }
.gp-slot-link { color: #A5B4FC; }
/* ─── Blog ──────────────────────────────────────────────────────────────
Leeft binnen .gp-page, dus met dezelfde gepinde tokens als de voorpagina:
de blog hoort visueel bij de marketingkant en niet bij de app-chrome.
Leesbreedte op 68ch — langer dan ~75 tekens per regel leest merkbaar
slechter in een lap tekst. */
.gp-blog-head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--surface-2);
max-width: 1100px; margin: 0 auto;
}
.gp-blog-terug { font-family: 'Righteous', sans-serif; font-size: 1.15rem; color: var(--text); text-decoration: none; }
.gp-blog-naarsite { color: var(--text-muted); text-decoration: none; font-size: .88rem; }
.gp-blog-naarsite:hover, .gp-blog-terug:hover { color: var(--cta); }
.gp-blog-wrap { max-width: 68ch; margin: 0 auto; padding: 40px 20px 56px; }
.gp-blog-h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2; margin: 6px 0 14px; color: var(--text); }
.gp-blog-intro { color: var(--text-muted); font-size: 1.02rem; line-height: 1.7; }
.gp-blog-leeg { color: var(--text-muted); padding: 28px 0; }
.gp-blog-datum { color: var(--text-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.gp-blog-lijst { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; }
.gp-blog-kaart { background: var(--surface); border: 1px solid var(--surface-2); border-radius: 12px; }
.gp-blog-kaart:hover { border-color: var(--cta); }
.gp-blog-kaart-link { display: block; padding: 20px 22px; text-decoration: none; }
.gp-blog-kaart-titel { font-size: 1.22rem; line-height: 1.3; margin: 6px 0 8px; color: var(--text); }
.gp-blog-kaart-tekst { color: var(--text-muted); line-height: 1.65; margin: 0 0 10px; }
.gp-blog-meer { color: var(--cta); font-weight: 600; font-size: .9rem; text-decoration: none; }
.gp-blog-talen { margin-top: 28px; color: var(--text-muted); font-size: .85rem; }
.gp-blog-talen a { color: var(--cta); text-decoration: none; margin-left: 8px; }
/* Gerenderde Markdown. Alleen de elementen die Markdig kan produceren; er is
geen ruwe HTML, dus deze lijst is compleet. */
.gp-artikel { color: var(--text); line-height: 1.75; }
.gp-artikel h2 { font-size: 1.35rem; margin: 30px 0 10px; line-height: 1.3; }
.gp-artikel h3 { font-size: 1.12rem; margin: 24px 0 8px; }
.gp-artikel p { margin: 0 0 16px; }
.gp-artikel ul, .gp-artikel ol { margin: 0 0 16px; padding-left: 22px; }
.gp-artikel li { margin-bottom: 6px; }
.gp-artikel a { color: var(--cta); }
.gp-artikel strong { color: var(--text); }
.gp-artikel blockquote {
margin: 20px 0; padding: 4px 0 4px 16px;
border-left: 3px solid var(--cta); color: var(--text-muted);
}
.gp-artikel code {
background: var(--surface-2); padding: 2px 6px; border-radius: 4px;
font-size: .88em; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.gp-artikel pre { background: var(--surface-2); padding: 14px; border-radius: 8px; overflow-x: auto; }
.gp-artikel pre code { background: none; padding: 0; }
.gp-artikel img { max-width: 100%; height: auto; border-radius: 8px; }
.gp-artikel table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: .92rem; }
.gp-artikel th, .gp-artikel td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--surface-2); }
/* Credit-regel naar 2mf.nl: bewust rustig, maar wel een echte link. */
.gp-2mf { text-align: center; padding: 0 20px 28px; margin: 0; font-size: .78rem; color: var(--text-muted); }
.gp-2mf a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid var(--surface-2); }
.gp-2mf a:hover { color: var(--cta); border-bottom-color: var(--cta); }
.gp-foot { background: var(--footer-bg); border-top: 1px solid var(--surface-2); padding: 36px 20px; }
.gp-foot-row { max-width: 1160px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.gp-foot-merk { display: flex; align-items: center; gap: 10px; margin-right: auto; font-size: 15px; color: var(--text-muted); }
.gp-foot-nav { display: flex; flex-wrap: wrap; gap: 22px; font-size: 15px; color: var(--text-muted); }
.gp-foot-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
/* ── Nummerpaspoort ─────────────────────────────────────────────────────────
Toonsoort, tempo en duur worden rechtstreeks in de repertoiretabel
ingevuld. Er is niets te importeren — die data zit in hoofden — dus is het
invullen zelf de klus: honderd nummers × drie velden. Daarom smalle velden
zonder eigen rand, zodat de tabel een tabel blijft en niet honderd
formuliervakjes wordt, en tab-navigatie door een kolom natuurlijk aanvoelt. */
.cel-invoer { padding-top: 4px; padding-bottom: 4px; }
.input-mini {
padding: 5px 8px;
font-size: .82rem;
min-height: 32px;
}
td .input-mini {
background: transparent;
border-color: transparent;
width: 100%;
}
td .input-mini:hover { border-color: var(--border); }
td .input-mini:focus { background: var(--surface-2); border-color: var(--primary); }
/* Een onleesbare duur wordt niet opgeslagen. De invoer blijft staan zodat de
gebruiker ziet wát er niet klopte.
Rand én vlak, en niet alleen een rand: in een cel die normaal randloos is,
is 1px rood te weinig signaal voor "dit is niet bewaard". En transition
expliciet uit — .input heeft een transition op border-color staan, en een
elke recalc opnieuw startende transitie houdt de getoonde kleur op de
beginwaarde. Dan kleurt de rand nooit door. */
.input-fout, td .input-fout {
border-color: var(--accent-red) !important;
background: var(--accent-red-bg) !important;
transition: none !important;
}
.link-rij {
display: grid;
grid-template-columns: 130px 1fr 1fr 32px;
gap: 6px;
align-items: center;
margin-bottom: 6px;
}
@media (max-width: 640px) {
.link-rij { grid-template-columns: 1fr 32px; }
.link-rij > select { grid-column: 1 / -1; }
}
/* ── Akkoordenschema ───────────────────────────────────────────────────────
Akkoord boven de lettergreep waar het valt. Vandaar per stukje een kolom:
de tekst bepaalt de breedte, het akkoord zweeft erboven. Monospace omdat
akkoordkolommen anders bij elke regel verschuiven. */
.schema {
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
font-size: .88rem;
line-height: 1.25;
overflow-x: auto;
}
.schema-regel { display: flex; flex-wrap: wrap; margin-bottom: 2px; }
.schema-deel { display: inline-flex; flex-direction: column; }
.schema-akkoord {
color: var(--primary-hover);
font-weight: 600;
min-height: 1.2em;
white-space: pre;
}
.schema-tekst { white-space: pre; }
.schema-leeg { height: .9em; }
.schema-commentaar { color: var(--text-muted); font-style: italic; margin: 4px 0; }
.schema-directive { color: var(--accent-orange); margin: 4px 0; }
/* ── Materiaal bij een nummer ───────────────────────────────────────────────
Partituren, akkoordbladen, opnames en links. De sleepzone is een label om
een verstopte file-input heen: dan werkt zowel klikken als slepen, zonder
eigen drag-handlers. */
.sleepzone {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
text-align: center;
padding: 20px 16px;
border: 2px dashed var(--border);
border-radius: var(--radius);
background: var(--surface-2);
cursor: pointer;
transition: border-color var(--transition), background var(--transition);
}
.sleepzone:hover, .sleepzone:focus-within { border-color: var(--primary); }
.sleepzone input[type="file"] {
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
opacity: 0;
cursor: pointer;
}
.sleepzone { position: relative; }
.sleepzone-titel { font-weight: 600; font-size: .9rem; color: var(--text); }
.sleepzone-hint { font-size: .78rem; color: var(--text-muted); }
.stapel-kop {
margin: 14px 0 4px;
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-muted);
}
.bijlage-rij {
display: grid;
grid-template-columns: minmax(0, 1fr) 140px 68px auto auto;
gap: 8px;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid var(--border-soft, var(--border));
}
.bijlage-naam {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .86rem;
}
.bijlage-meta {
font-size: .76rem;
color: var(--text-muted);
text-align: right;
font-variant-numeric: tabular-nums;
}
.bijlage-rol { padding: 3px 6px; font-size: .76rem; min-height: 28px; }
.bijlage-audio { width: 100%; margin: 4px 0 10px; height: 34px; }
@media (max-width: 640px) {
/* Op een telefoon past die rij niet naast elkaar; naam boven, de rest eronder. */
.bijlage-rij { grid-template-columns: minmax(0, 1fr) auto auto; }
.bijlage-rol { grid-column: 1 / -1; }
.bijlage-meta { text-align: left; }
}
/* ═══════════════════════════════════════════════════════════════════════
Mobiele correcties uit de productaudit
═══════════════════════════════════════════════════════════════════════
De fundering was goed -- geen horizontale paginaoverflow op vier breedtes,
echte tabel-naar-kaart-transformaties, een nette la -- maar drie primaire
schermen waren verkleind in plaats van aangepast. Gemeten op 390x844.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Topbalk: de titel " Band Management" liep over drie regels en
zakte door de onderrand heen, op ELK scherm. De balk heeft een vaste
hoogte (--topbar-h), dus de titel moet krimpen in plaats van groeien. */
.topbar { gap: 8px; }
.topbar-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1;
}
.topbar-actions { flex-shrink: 0; }
/* Dashboard-takenlijst: hield de driekoloms bureaubladrij vast. De twee
knoppen ("een week uitstellen" / "niet meer tonen") behielden hun volle
breedte en persten de taaktitel in ~130px, die dan over vijf regels
wikkelde. Elke rij werd zo ~350px hoog; met 13 taken 4.500px scrollen.
Nu: datum en titel naast elkaar, knoppen op een eigen regel eronder. */
.gig-item {
flex-wrap: wrap;
row-gap: 8px;
}
.gig-item > a { flex: 1 1 100%; order: 2; }
.gig-item .gig-date { order: 1; }
.gig-item .gig-status {
order: 3;
margin-left: 0;
width: 100%;
justify-content: flex-end;
}
/* Tabstrip in de boekingseditor: tien tabs wikkelden over vier regels,
samen met de actieknoppen ~820px aan chrome vóór het eerste veld -- een
volledig telefoonscherm. De container had al overflow-x:auto, maar
flex-wrap:wrap won. Nu één rij die horizontaal schuift. */
.tabstrip {
flex-wrap: nowrap !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.tabstrip > button { flex: 0 0 auto; white-space: nowrap; }
/* Agenda: de namenkolom nam ~400px van de 390px beschikbare breedte, dus er
bleven 11 van de 31 dagen over. Smaller maken levert direct dagen op. */
.naamkolom {
min-width: 96px !important;
max-width: 120px;
font-size: .74rem !important;
padding: 6px !important;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* Focusring op de paginatitel weghalen -- ZONDER de focus zelf weg te halen.
Bij elke navigatie krijgt de programmatisch focus. Dat is
goed en bewust: het is wat een schermlezer vertelt dat de pagina veranderd
is, en de meeste SPA's vergeten dat. Maar de browser tekent er ook de
toetsenbord-focusring omheen, en die leest als een validatiefout of een
bewerkbaar veld -- het was de meest herhaalde visuele fout in de audit,
zichtbaar op vrijwel elk scherm en ook op de marketingsite.
Een kop is geen bedienbaar element: niemand tabt ernaartoe, hij wordt alleen
programmatisch gefocust. De ring weghalen kost dus geen enkele
toetsenbordgebruiker iets, en de aankondiging blijft intact. Verwijder NOOIT
het tabindex of de focus zelf om dit op te lossen. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
outline: none;
box-shadow: none;
}
/* Eén lange waarde mag de tabel niet opblazen.
Een klant die op het aanvraagformulier een ononderbroken reeks van 600
tekens in "Locatie naam" typt, rekte de boekingentabel van 1.168 naar
6.598 px binnen een container van 1.130 px. Gevolg: ELKE rij verloor zijn
identiteitskolommen uit beeld, en op de telefoon werd het 17 schermen
horizontaal scrollen om bij de knoppen te komen. Er stond geen maxlength en
geen word-break. Twee testers vonden dit los van elkaar.
overflow-wrap breekt alleen waar het moet (een gewone lange zin blijft dus
normaal afbreken); het harde word-break is het vangnet voor een reeks zonder
enig breekpunt. */
.table td,
.table th {
overflow-wrap: anywhere;
word-break: break-word;
}
/* De tekstkolommen krijgen daarbij een plafond, zodat één cel de rest niet
wegdrukt. Getal- en actiekolommen blijven ongemoeid (die staan op nowrap). */
.table td { max-width: 420px; }
/* ===== Onbeantwoorde vraag =====
Op de L&G-tab moet een lege vraag te onderscheiden zijn van een antwoord:
de techniekploeg kiest daarop podium en tilweg. Cursief + gedempt, zodat
het leest als een opmerking en niet als een waarde. Niet alleen kleur:
die valt weg voor wie kleur slecht onderscheidt. */
.niet-ingevuld { color: var(--text-muted); font-style: italic; }
|