/* ===== 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;
}
.topbar-actions { display: flex; align-items: center; gap: 12px; }
/* ===== 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); }
.stats-grid-3 { grid-template-columns: repeat(3, 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; }
/* ===== 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; }
/* ===== 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) {
.app-shell { grid-template-columns: 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; }
.stats-grid, .stats-grid-3 { 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) {
.stats-grid, .stats-grid-3 { 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; }
.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; }
|