/**
 * INR Dashboard — voorkant.
 * Designtaal gelijk aan de INR Hub: glas-sidebar, glas-topbar, canvas rechts,
 * zachte gradient met blobs, Inter. Zwart/wit als basis, var(--inr-accent) als subtiel
 * accent. Inter Light (300) voor tekst, Semi Bold (600) voor koppen.
 * Overal !important tegen Elementor en het thema.
 */

.inr-db-root, .inr-db-root *, .inr-db-root *::before, .inr-db-root *::after {
	box-sizing: border-box !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	margin: 0 !important;
	padding: 0 !important;
}

/*
 * Font-basis voor de overige plugin-onderdelen. Deze leven niet onder
 * .inr-db-root maar hebben hun eigen root-wrapper (leeromgeving, leads,
 * begrippen, artikelen enzovoort). Zonder deze regel erven hun elementen die
 * font-family:inherit gebruiken het font van de omringende pagina. Op een kale
 * Elementor Canvas-sjabloon zet het thema daar geen font, waardoor de browser
 * terugvalt op Times. We zetten daarom hier expliciet Inter als basis op elke
 * plugin-root, zodat de erf-keten binnen elk onderdeel weer op Inter uitkomt.
 * Dit voegt alleen een basisfont toe; het overschrijft geen bestaande, bewust
 * gekozen fonts binnen de onderdelen (die staan verderop met hun eigen regels).
 */
[data-leer-root], [data-artikel-root], [data-lit-root], [data-tg-root],
.inr-pp-root, .inr-vs-root, .inr-toegang-root,
.inr-leer, .inr-leads, .inr-begrippen, .inr-experts, .inr-docs,
.inr-art, .inr-cb, .inr-bo, .inr-calc, .inr-ct, .inr-tt, .inr-tool, .inr-trainers {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.inr-db-root {
	--bl: #007BFF !important;
	--inr-accent: #007BFF !important;   /* hoofd-accent (klant kan dit overschrijven) */
	--inr-accent-2: #5B30D6 !important; /* tweede tint (klant kan dit overschrijven) */
	--bk: #0F172A !important;
	--g400: #94A3B8 !important;
	--g500: #64748B !important;
	--g600: #475569 !important;
	--g700: #334155 !important;
	position: relative !important;
	min-height: 100vh !important;
	min-height: 100dvh !important;
	color: #0F172A !important;
	font-weight: 300 !important;
	-webkit-font-smoothing: antialiased !important;
	/* Volledige vensterbreedte, ook als het thema/Elementor een smallere
	   content-container heeft. We breken uit die container met 100vw. */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
.inr-db-root button { font-family: inherit !important; -webkit-appearance: none !important; appearance: none !important; }

/* Cruciaal: veel elementen hebben display:...!important, en dat overschrijft het
   HTML hidden-attribuut (waardoor "verborgen" formulieren tóch zichtbaar blijven).
   Deze regel zorgt dat hidden altijd wint — overal in het dashboard. */
.inr-db-root [hidden] { display: none !important; }


/* ── Achtergrond ── */
.inr-db-bg {
	position: absolute !important; inset: 0 !important; z-index: 0 !important;
	pointer-events: none !important; overflow: hidden !important; border-radius: 18px !important;
	background:
		radial-gradient(900px 600px at 12% -10%, rgba(0,123,255,.08), transparent 60%),
		radial-gradient(700px 500px at 95% 10%, rgba(0,123,255,.05), transparent 65%),
		linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 30%, #F9FBFD 100%) !important;
}
.inr-db-blob { position: absolute !important; border-radius: 50% !important; filter: blur(60px) !important; opacity: .4 !important; }
.inr-db-blob.b1 { width: 340px !important; height: 340px !important; top: -80px !important; right: 18% !important; background: radial-gradient(circle, rgba(0,123,255,.4), transparent 70%) !important; }
.inr-db-blob.b2 { width: 280px !important; height: 280px !important; bottom: 8% !important; left: 32% !important; background: radial-gradient(circle, rgba(0,123,255,.18), transparent 70%) !important; }

/* ── Layout ── */
.inr-db-shell {
	position: relative !important; z-index: 1 !important;
	display: grid !important;
	grid-template-columns: 256px 1fr 320px !important;
	grid-template-rows: auto 1fr !important;
	min-height: calc(100vh - 36px) !important; min-height: calc(100dvh - 36px) !important; gap: 0 !important; padding: 18px !important;
}
.inr-db-sidebar   { grid-row: 1 / span 2 !important; grid-column: 1 !important; }
.inr-db-topbar    { grid-column: 2 / span 2 !important; }
.inr-db-canvas    { grid-column: 2 !important; }
.inr-db-zijpaneel { grid-column: 3 !important; grid-row: 2 !important; }

/* Leeromgeving-modus: geen rechter-zijpaneel. De boom links krijgt fors meer
   ruimte (zodat de ingesprongen subitems lucht hebben), de lezer pakt de rest.
   De grid zit op .inr-db-shell, dus daar grijpen we in. */
.inr-db-leeromgeving-modus .inr-db-shell { grid-template-columns: 340px 1fr !important; }
.inr-db-leeromgeving-modus .inr-db-topbar { grid-column: 2 !important; }

/* De vernieuw-knop in de topbar hoort bij het planningsdashboard: daar zit een
   handler achter die op notificaties controleert. In de leeromgeving is die knop
   nooit gekoppeld (er hangt geen enkele listener aan) en de gegevens zijn daar
   altijd vers, dus hij deed niets. Klanten die meekeken drukten er wel op, in de
   veronderstelling dat ze ermee terug konden. Daarom verbergen we hem hier.

   Bewust in CSS en niet in de markup: de topbar is gedeeld met de planning, en die
   willen we niet aanraken. De planning-root heeft deze modus-klasse niet, dus daar
   verandert er niets. De chip ernaast blijft gewoon staan; flex tekent geen gap meer
   als er nog maar één kind over is. */
.inr-db-leeromgeving-modus .inr-db-refresh-knop { display: none !important; }

/* Tool-focus: als een tool (Align, Narratief, Pressure, C-Model) actief is, vult
   die de werkruimte. Het rechter-zijpaneel (tokens/verdeling) hoort daar niet bij
   en verdwijnt; de sidebar links blijft staan. De grid gaat van drie naar twee
   kolommen, zodat de canvas de vrijgekomen ruimte pakt. */
.inr-db-root.tool-focus .inr-db-zijpaneel { display: none !important; }
.inr-db-root.tool-focus .inr-db-shell { grid-template-columns: 256px 1fr !important; }
.inr-db-root.tool-focus .inr-db-topbar { grid-column: 2 !important; }
.inr-db-root.tool-focus .inr-db-canvas { grid-column: 2 !important; }
.inr-db-leeromgeving-modus .inr-db-canvas { grid-column: 2 !important; }

/* ── Sidebar ── */
.inr-db-sidebar {
	background: rgba(255,255,255,.62) !important;
	backdrop-filter: blur(28px) saturate(180%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
	border: 1px solid rgba(255,255,255,.85) !important; border-radius: 16px !important;
	padding: 22px 16px !important; display: flex !important; flex-direction: column !important;
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.06) !important;
	margin-right: 18px !important;
}
.inr-db-brand { display: flex !important; align-items: center !important; gap: 10px !important; padding: 4px 8px 22px 8px !important; margin-bottom: 10px !important; border-bottom: 1px solid rgba(15,23,42,.06) !important; }
.inr-db-brand-mark { width: 40px !important; height: 40px !important; border-radius: 11px !important; background: linear-gradient(135deg, var(--inr-accent), var(--inr-accent-2)) !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 12px rgba(0,123,255,.28) !important; flex-shrink: 0 !important; }
.inr-db-brand-mark span { color: #fff !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: .04em !important; }
.inr-db-brand-text { display: flex !important; flex-direction: column !important; gap: 1px !important; }
.inr-db-brand-name { font-weight: 600 !important; font-size: 14px !important; letter-spacing: -.01em !important; }
.inr-db-brand-sub { font-weight: 300 !important; font-size: 11px !important; color: #64748B !important; }

.inr-db-nav-label { font-weight: 600 !important; font-size: 10px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #94A3B8 !important; padding: 0 8px !important; margin: 4px 0 8px !important; }
.inr-db-nav { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.inr-db-nav-item {
	display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important;
	padding: 10px 12px !important; border: none !important; background: transparent !important;
	border-radius: 10px !important; cursor: pointer !important; text-align: left !important;
	font-size: 14px !important; font-weight: 500 !important; color: #334155 !important;
	transition: all .18s ease !important; line-height: 1.3 !important;
}
.inr-db-nav-item:hover:not([disabled]) { background: rgba(15,23,42,.04) !important; color: #0F172A !important; }
.inr-db-nav-item.active { background: rgba(0,123,255,.10) !important; color: var(--inr-accent) !important; font-weight: 600 !important; box-shadow: inset 0 0 0 1px rgba(0,123,255,.10) !important; }
.inr-db-nav-item[disabled] { cursor: default !important; opacity: .65 !important; }
.inr-db-nav-icon { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; opacity: .85 !important; display: inline-flex !important; }
.inr-db-nav-icon svg { width: 18px !important; height: 18px !important; }
.inr-db-nav-soon { margin-left: auto !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--inr-accent) !important; background: rgba(0,123,255,.10) !important; padding: 2px 7px !important; border-radius: 99px !important; }

.inr-db-sidebar-spacer { flex: 1 !important; min-height: 20px !important; }
.inr-db-sidebar-foot { padding: 14px 12px 4px !important; border-top: 1px solid rgba(15,23,42,.06) !important; font-size: 11px !important; color: #94A3B8 !important; font-weight: 300 !important; line-height: 1.5 !important; }
.inr-db-sidebar-foot strong { color: #475569 !important; font-weight: 600 !important; }

/* ── Topbar ── */
.inr-db-topbar {
	position: relative !important;
	background: rgba(255,255,255,.55) !important;
	backdrop-filter: blur(28px) saturate(180%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
	border: 1px solid rgba(255,255,255,.8) !important; border-radius: 14px !important;
	padding: 14px 22px !important; display: flex !important; align-items: center !important; justify-content: space-between !important;
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 22px rgba(15,23,42,.05) !important;
	margin-bottom: 18px !important; min-height: 64px !important;
}
.inr-db-topbar-left { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; }
.inr-db-menu-toggle { display: none !important; }
.inr-db-topbar-titles { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
.inr-db-eyebrow { font-weight: 600 !important; font-size: 10px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #94A3B8 !important; }
.inr-db-topbar-title { font-weight: 600 !important; font-size: 17px !important; color: #0F172A !important; letter-spacing: -.01em !important; line-height: 1.25 !important; }
/* Breadcrumb: rol-bewuste navigatiepad-balk in de topbar-left. Toont de
   structuurlagen (Start › Klanten › Klant). Staat los van de BEHEER-dropdown. */
.inr-db-kruimels { display: inline-flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 4px !important; min-width: 0 !important; padding-left: 12px !important; margin-left: 4px !important; border-left: 1px solid rgba(15,23,42,.08) !important; }
.inr-db-kruimel { font-size: 12px !important; font-weight: 500 !important; color: #64748B !important; text-decoration: none !important; padding: 3px 8px !important; border-radius: 7px !important; line-height: 1.3 !important; white-space: nowrap !important; transition: background .12s ease, color .12s ease !important; }
a.inr-db-kruimel:hover { background: rgba(15,23,42,.05) !important; color: #0F172A !important; }
.inr-db-kruimel-huidig { color: #0F172A !important; font-weight: 600 !important; cursor: default !important; }
.inr-db-kruimel-sep { color: #CBD5E1 !important; font-size: 13px !important; user-select: none !important; }
/* Directe wisselknop (klant met beide rechten): dashboard <-> leeromgeving. */
.inr-db-wissel-knop { display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 8px 14px !important; border-radius: 99px !important; background: rgba(0,123,255,.08) !important; border: 1px solid rgba(0,123,255,.18) !important; color: #007BFF !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; transition: background .12s ease !important; }
.inr-db-wissel-knop:hover { background: rgba(0,123,255,.14) !important; }
.inr-db-wissel-knop svg { width: 16px !important; height: 16px !important; flex: none !important; }
.inr-db-chip { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 10px !important; background: rgba(15,23,42,.04) !important; border: 1px solid rgba(15,23,42,.06) !important; border-radius: 99px !important; font-size: 11px !important; font-weight: 500 !important; color: #64748B !important; }
.inr-db-chip-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--inr-accent) !important; }

.inr-db-beheer { position: relative !important; }
.inr-db-beheer-knop { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: rgba(255,255,255,.7) !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 11px !important; padding: 7px 12px !important; cursor: pointer !important; font-family: 'Inter', sans-serif !important; max-width: 260px !important; transition: background .15s ease, border-color .15s ease !important; }
.inr-db-beheer-knop:hover { background: #fff !important; border-color: rgba(15,23,42,.18) !important; }
.inr-db-beheer-knop-label { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--inr-accent) !important; flex-shrink: 0 !important; }
.inr-db-beheer-knop-naam { font-size: 13px !important; font-weight: 600 !important; color: #0F172A !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; }
.inr-db-beheer-chevron { width: 15px !important; height: 15px !important; color: #94A3B8 !important; flex-shrink: 0 !important; }
.inr-db-beheer-paneel { position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; z-index: 2147483600 !important; width: 280px !important; max-width: 80vw !important; background: #fff !important; border: 1px solid rgba(15,23,42,.12) !important; border-radius: 14px !important; box-shadow: 0 12px 40px rgba(15,23,42,.18) !important; overflow: hidden !important; }
.inr-db-beheer-zoek-rij { padding: 12px 12px 8px !important; border-bottom: 1px solid rgba(15,23,42,.07) !important; }
.inr-db-beheer-zoek { width: 100% !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; padding: 9px 12px !important; border: 1px solid rgba(15,23,42,.14) !important; border-radius: 9px !important; background: #fff !important; color: #0F172A !important; box-sizing: border-box !important; }
.inr-db-beheer-lijst { max-height: 320px !important; overflow-y: auto !important; padding: 6px !important; }
.inr-db-beheer-optie { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; border-radius: 9px !important; text-decoration: none !important; cursor: pointer !important; }
.inr-db-beheer-optie:hover { background: rgba(0,123,255,.06) !important; }
.inr-db-beheer-optie.is-actief { background: rgba(0,123,255,.08) !important; }
.inr-db-beheer-optie-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: var(--inr-accent) !important; flex-shrink: 0 !important; opacity: .55 !important; }
.inr-db-beheer-optie-naam { flex: 1 !important; font-size: 14px !important; font-weight: 500 !important; color: #0F172A !important; min-width: 0 !important; }
.inr-db-beheer-vink { width: 16px !important; height: 16px !important; color: var(--inr-accent) !important; flex-shrink: 0 !important; }
.inr-db-beheer-geen { padding: 14px 12px !important; font-size: 13px !important; color: #94A3B8 !important; text-align: center !important; }

/* ── Canvas ── */
.inr-db-canvas {
	background: rgba(255,255,255,.68) !important;
	backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
	border: 1px solid rgba(255,255,255,.85) !important; border-radius: 16px !important;
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 44px rgba(15,23,42,.07) !important;
	overflow: hidden !important;
	margin-right: 18px !important;
}

/* ── Zijpaneel (rechts) ── */
.inr-db-zijpaneel {
	background: rgba(255,255,255,.62) !important;
	backdrop-filter: blur(28px) saturate(180%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
	border: 1px solid rgba(255,255,255,.85) !important; border-radius: 16px !important;
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.06) !important;
	padding: 22px 20px !important;
	position: sticky !important; top: 18px !important;
	align-self: start !important;
}
.inr-db-zij-blok { padding-bottom: 18px !important; }
.inr-db-zij-blok + .inr-db-zij-blok { border-top: 1px solid rgba(15,23,42,.06) !important; padding-top: 18px !important; }
.inr-db-zij-eyebrow { font-weight: 600 !important; font-size: 10px !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: #94A3B8 !important; margin: 0 0 6px 0 !important; }
.inr-db-zij-titel { font-weight: 600 !important; font-size: 16px !important; color: #0F172A !important; letter-spacing: -.01em !important; margin: 0 0 16px 0 !important; }
.inr-db-zij-leeg { font-weight: 300 !important; font-size: 13px !important; color: #94A3B8 !important; margin: 0 !important; }

/* ── Panelen (tabs) ── */
.inr-db-panel { display: none !important; }
.inr-db-panel.active { display: block !important; }

/* ── Hero ── */
.inr-db-hero { padding: 44px 44px 26px !important; }
.inr-db-hero-eyebrow { font-weight: 600 !important; font-size: 11px !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: var(--inr-accent) !important; margin: 0 0 14px 0 !important; }
.inr-db-hero-h1 { font-weight: 600 !important; font-size: 36px !important; line-height: 1.1 !important; color: #0F172A !important; letter-spacing: -.025em !important; margin: 0 0 16px 0 !important; }
.inr-db-hero-lead { font-weight: 300 !important; font-size: 17px !important; line-height: 1.55 !important; color: #475569 !important; margin: 0 !important; max-width: 620px !important; }

.inr-db-divider { border: none !important; border-top: 1px solid rgba(15,23,42,.06) !important; margin: 8px 44px !important; }

/* ── Secties ── */
.inr-db-section { padding: 26px 44px 40px !important; }
.inr-db-section-top { padding-top: 30px !important; }
.inr-db-section-eyebrow { font-weight: 600 !important; font-size: 10px !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: #94A3B8 !important; margin: 0 0 8px 0 !important; }
.inr-db-section-h2 { font-weight: 600 !important; font-size: 22px !important; line-height: 1.25 !important; color: #0F172A !important; letter-spacing: -.018em !important; margin: 0 0 22px 0 !important; }

/* ── Stat-kaarten ── */
.inr-db-stats { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; max-width: 480px !important; }
.inr-db-stat { background: rgba(255,255,255,.72) !important; border: 1px solid rgba(15,23,42,.07) !important; border-radius: 16px !important; padding: 22px 24px !important; }
.inr-db-stat-getal { font-weight: 600 !important; font-size: 34px !important; line-height: 1 !important; color: var(--inr-accent) !important; letter-spacing: -.02em !important; }
.inr-db-stat-label { font-weight: 300 !important; font-size: 13px !important; color: #64748B !important; margin-top: 6px !important; }

/* ── Tabel ── */
.inr-db-tabel-kaart { background: #fff !important; border: 1px solid rgba(15,23,42,.06) !important; border-radius: 18px !important; overflow: hidden !important; box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 18px 40px -24px rgba(15,23,42,.14) !important; }
.inr-db-tabel { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; font-size: 14px !important; font-weight: 300 !important; background: transparent !important; }
.inr-db-tabel th, .inr-db-tabel td { text-align: left !important; padding: 15px 20px !important; border: 0 !important; border-bottom: 1px solid rgba(15,23,42,.05) !important; vertical-align: middle !important; }
.inr-db-tabel tbody tr:last-child td { border-bottom: 0 !important; }
.inr-db-tabel thead th { font-weight: 600 !important; font-size: 10.5px !important; letter-spacing: .07em !important; text-transform: uppercase !important; color: #B0B7C3 !important; padding-top: 17px !important; padding-bottom: 13px !important; border-bottom: 1px solid rgba(15,23,42,.07) !important; }
.inr-db-tabel tbody tr { transition: background .16s ease !important; }
.inr-db-tabel tbody tr:hover { background: rgba(0,123,255,.022) !important; }

/* ── Badges ── */
.inr-db-badge { display: inline-block !important; padding: 3px 10px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 500 !important; background: rgba(15,23,42,.05) !important; color: #475569 !important; white-space: nowrap !important; }
.inr-db-badge-ok { background: rgba(0,123,255,.10) !important; color: var(--inr-accent) !important; }
.inr-db-badge-wacht { background: rgba(15,23,42,.04) !important; color: #94A3B8 !important; }

/* ── Lege staat ── */
.inr-db-empty { padding: 40px 30px !important; text-align: center !important; background: rgba(255,255,255,.5) !important; border: 2px dashed rgba(15,23,42,.10) !important; border-radius: 16px !important; color: #94A3B8 !important; font-weight: 300 !important; font-size: 14px !important; }

/* ── Knop / simpele meldingen ── */
.inr-db-simpel { position: relative !important; z-index: 1 !important; max-width: 520px !important; margin: 0 auto !important; padding: 60px 24px !important; text-align: center !important; }
.inr-db-melding { font-weight: 300 !important; font-size: 18px !important; color: #334155 !important; margin-bottom: 18px !important; }
.inr-db-knop { display: inline-block !important; padding: 11px 22px !important; background: var(--inr-accent, #007BFF) !important; color: #fff !important; border-radius: 10px !important; text-decoration: none !important; font-weight: 600 !important; font-size: 14px !important; box-shadow: 0 4px 12px rgba(0,123,255,.28) !important; transition: all .18s ease !important; }
.inr-db-knop:hover { background: var(--inr-accent, #007BFF) !important; transform: translateY(-1px) !important; }

/* ── Mobiel ── */
.inr-db-menu-backdrop { display: none !important; }
@media (max-width: 768px) {
	.inr-db-shell { display: block !important; padding: 10px !important; }
	.inr-db-bg { border-radius: 12px !important; }
	.inr-db-sidebar {
		position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important;
		width: 280px !important; max-width: 85vw !important; height: 100vh !important; margin: 0 !important;
		border-radius: 0 18px 18px 0 !important; transform: translateX(-105%) !important;
		transition: transform .3s cubic-bezier(.4,0,.2,1) !important; z-index: 2147483000 !important;
		box-shadow: 0 25px 60px rgba(15,23,42,.30) !important; background: #fff !important;
		/* Geen backdrop-filter op mobiel: dat maakt op iOS een eigen stacking-context
		   waardoor de menu-items achter een laag belanden en niet klikbaar zijn. */
		backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
		overflow-y: auto !important; -webkit-overflow-scrolling: touch !important;
	}
	/* De inhoud van de sidebar staat met een eigen positie boven alles binnenin. */
	.inr-db-sidebar > * { position: relative !important; z-index: 1 !important; }
	.inr-db-nav, .inr-db-nav-item { position: relative !important; z-index: 1 !important; pointer-events: auto !important; }
	.inr-db-sidebar-foot, .inr-db-sidebar-versie, .inr-db-versie-knop, .inr-db-uitlog-knop { position: relative !important; z-index: 2 !important; pointer-events: auto !important; }
	.inr-db-root.menu-open .inr-db-sidebar { transform: translateX(0) !important; }
	.inr-db-menu-backdrop { display: block !important; position: fixed !important; inset: 0 !important; background: rgba(15,23,42,.32) !important; z-index: 2147482000 !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .25s ease !important; }
	.inr-db-menu-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; border-radius: 11px !important; background: transparent !important; border: 1px solid rgba(15,23,42,.10) !important; cursor: pointer !important; flex-shrink: 0 !important; }
	.inr-db-menu-toggle svg { width: 20px !important; height: 20px !important; color: #0F172A !important; }
	.inr-db-topbar { padding: 10px 14px !important; min-height: 60px !important; margin-bottom: 10px !important; border-radius: 13px !important; flex-wrap: wrap !important; row-gap: 10px !important; }
	/* De linkerkant (menu + titel) en de rechterkant (knoppen + beheer-balk) elk
	   op een eigen volle regel, zodat er niets meer wordt samengeperst. */
	.inr-db-topbar-left { flex: 1 1 100% !important; }
	.inr-db-topbar-right { flex: 1 1 100% !important; justify-content: flex-end !important; gap: 12px !important; flex-wrap: wrap !important; }
	/* Lange klantnaam in de beheer-balk netjes afkappen i.p.v. de rij opblazen. */
	/* Beheer-knop op mobiel: niet te breed, naam mag afkappen. */
	.inr-db-beheer-knop { max-width: 70vw !important; }
	.inr-db-topbar-title { font-size: 15px !important; }
	.inr-db-canvas { border-radius: 13px !important; margin-right: 0 !important; margin-bottom: 12px !important; }
	.inr-db-zijpaneel { position: static !important; border-radius: 13px !important; margin-bottom: 10px !important; }
	.inr-db-hero { padding: 30px 20px 22px !important; }
	/* De leeromgeving-tegel (uniek scherm voor een deelnemer met alleen
	   leeromgeving-toegang): het icoon stond absoluut bovenaan en viel op mobiel
	   over de eyebrow-tekst heen. We lijnen de inhoud nu vanaf bovenaan uit met
	   genoeg ruimte boven voor het icoon, zodat niets meer overlapt. */
	a.inr-db-hero { justify-content: flex-start !important; min-height: 0 !important; padding: 96px 22px 28px !important; }
	a.inr-db-hero .inr-db-hero-glyph { top: 24px !important; left: 22px !important; }
	a.inr-db-hero .inr-db-hero-glyph svg { width: 32px !important; height: 32px !important; }
	a.inr-db-hero .inr-db-hero-titel { font-size: 26px !important; }
	.inr-db-hero-h1 { font-size: 26px !important; }
	.inr-db-hero-lead { font-size: 15px !important; }
	.inr-db-divider { margin: 4px 20px !important; }
	.inr-db-section { padding: 22px 20px 30px !important; }
	.inr-db-section-h2 { font-size: 19px !important; }
	.inr-db-stats { grid-template-columns: 1fr !important; }
	.inr-db-tabel { font-size: 13px !important; }
	.inr-db-tabel th, .inr-db-tabel td { padding: 9px 8px !important; }
}

/* ── Filterbalk + sorteerbare tabellen ── */
.inr-db-tabelbalk { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; margin: 0 0 14px 0 !important; }
.inr-db-tabelbalk .inr-db-zoek,
.inr-db-tabelbalk .inr-db-filter {
	font-family: 'Inter', sans-serif !important; font-weight: 300 !important; font-size: 13px !important;
	padding: 8px 12px !important; border: 1px solid rgba(15,23,42,.12) !important; border-radius: 10px !important;
	background: rgba(255,255,255,.8) !important; color: #0F172A !important; outline: none !important;
}
.inr-db-tabelbalk .inr-db-zoek { flex: 1 1 220px !important; min-width: 0 !important; }
.inr-db-tabelbalk .inr-db-zoek:focus,
.inr-db-tabelbalk .inr-db-filter:focus { border-color: rgba(0,123,255,.4) !important; box-shadow: 0 0 0 3px rgba(0,123,255,.10) !important; }
.inr-db-tabelbalk .inr-db-filter { cursor: pointer !important; }

.inr-db-tabel.inr-db-sorteerbaar th.inr-db-sort { cursor: pointer !important; user-select: none !important; white-space: nowrap !important; }
.inr-db-tabel.inr-db-sorteerbaar th.inr-db-sort:hover { color: var(--inr-accent) !important; }
.inr-db-sort-pijl { display: inline-block !important; width: 0 !important; height: 0 !important; margin-left: 6px !important; vertical-align: middle !important; opacity: 0 !important; }
.inr-db-tabel.inr-db-sorteerbaar th.gesorteerd .inr-db-sort-pijl { opacity: 1 !important; }
.inr-db-tabel.inr-db-sorteerbaar th.gesorteerd[data-richting="asc"] .inr-db-sort-pijl { border-left: 4px solid transparent !important; border-right: 4px solid transparent !important; border-bottom: 5px solid var(--inr-accent) !important; }
.inr-db-tabel.inr-db-sorteerbaar th.gesorteerd[data-richting="desc"] .inr-db-sort-pijl { border-left: 4px solid transparent !important; border-right: 4px solid transparent !important; border-top: 5px solid var(--inr-accent) !important; }

/* ── Verdelingswiel (donut) in het zijpaneel ── */
.inr-db-wiel { display: flex !important; justify-content: center !important; margin-bottom: 18px !important; }
.inr-db-donut { width: 160px !important; height: 160px !important; display: block !important; }
.inr-db-donut-getal { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 30px !important; fill: #0F172A !important; }
.inr-db-donut-label { font-family: 'Inter', sans-serif !important; font-weight: 300 !important; font-size: 12px !important; fill: #94A3B8 !important; text-transform: uppercase !important; letter-spacing: .1em !important; }
.inr-db-legenda { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.inr-db-legenda-item { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 13px !important; font-weight: 300 !important; color: #334155 !important; }
.inr-db-legenda-stip { width: 12px !important; height: 12px !important; border-radius: 3px !important; flex-shrink: 0 !important; }
.inr-db-legenda-naam { font-weight: 500 !important; color: #0F172A !important; }
.inr-db-legenda-getal { margin-left: auto !important; color: #64748B !important; font-variant-numeric: tabular-nums !important; }

/* ── Planning-kaarten (horizontaal, links-naar-rechts leesbaar) ── */
.inr-db-uitleg { font-weight: 300 !important; font-size: 14px !important; color: #64748B !important; margin: 0 0 20px 0 !important; }
.inr-db-kaarten { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.inr-db-kaart {
	background: rgba(255,255,255,.78) !important;
	border: 1px solid rgba(15,23,42,.08) !important; border-radius: 14px !important;
	overflow: hidden !important;
}
.inr-db-kaart.is-open { border-color: rgba(0,123,255,.22) !important; box-shadow: 0 8px 22px rgba(15,23,42,.06) !important; }

/* De hoofdregel: een grid die van links naar rechts leest. */
.inr-db-rij {
	display: grid !important;
	grid-template-columns: minmax(180px, 2fr) auto auto auto 140px 44px !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 14px 18px !important;
}
.inr-db-rij-onderwerp { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
.inr-db-kaart-dienst { font-weight: 600 !important; font-size: 10px !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--inr-accent) !important; }
.inr-db-kaart-onderwerp { font-weight: 600 !important; font-size: 15px !important; color: #0F172A !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.inr-db-rij-datum { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.inr-db-rij-kop { font-weight: 300 !important; font-size: 10px !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #94A3B8 !important; }
.inr-db-rij-waarde { font-weight: 500 !important; font-size: 14px !important; color: #0F172A !important; white-space: nowrap !important; }
.inr-db-rij-waarde.inr-db-doorgehaald { text-decoration: line-through !important; color: #94A3B8 !important; font-weight: 300 !important; }
/* De tijd onder de datum. Iets kleiner en grijzer: de datum is het anker, de
   tijd de aanvulling. Stond hier eerder niet, waardoor de klant wel zag welke
   dag maar niet hoe laat. */
.inr-db-rij-tijd {
	display: block !important; font-weight: 400 !important; font-size: 12.5px !important;
	color: #64748B !important; white-space: nowrap !important; margin-top: 1px !important;
}
.inr-db-rij-tijd.inr-db-doorgehaald { text-decoration: line-through !important; color: #94A3B8 !important; font-weight: 300 !important; }
.inr-db-rij-pijl { color: var(--inr-accent) !important; font-size: 18px !important; font-weight: 600 !important; text-align: center !important; }
.inr-db-rij-nieuw .inr-db-rij-waarde { color: var(--inr-accent) !important; font-weight: 600 !important; }
.inr-db-rij-status { text-align: left !important; }
.inr-db-rij-acties { display: flex !important; justify-content: flex-end !important; }

/* Als er geen voorstel is, vallen de pijl-kolommen weg; grid schikt automatisch. */
.inr-db-rij:not(:has(.inr-db-rij-pijl)) { grid-template-columns: minmax(180px, 2fr) auto 1fr 140px 44px !important; }

.inr-db-knop-mini { padding: 6px 10px !important; font-size: 13px !important; line-height: 1 !important; }
.inr-db-chevron { display: inline-block !important; transition: transform .2s ease !important; font-size: 16px !important; }
.inr-db-kaart.is-open .inr-db-chevron { transform: rotate(180deg) !important; }

/* Het uitklapbare detail. */
.inr-db-detail { padding: 4px 18px 18px !important; border-top: 1px solid rgba(15,23,42,.06) !important; }

/* Status-badges met INR-kleuraccenten. */
.inr-db-status-badge { display: inline-block !important; padding: 4px 11px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap !important; background: rgba(15,23,42,.06) !important; color: #475569 !important; }
.inr-db-status-badge.st-gepland { background: rgba(40,117,251,.10) !important; color: #2875FB !important; }
.inr-db-status-badge.st-in_goedkeuring { background: rgba(253,118,52,.12) !important; color: #C7560F !important; }
.inr-db-status-badge.st-in_progress { background: rgba(116,72,253,.10) !important; color: #7448FD !important; }
.inr-db-status-badge.st-klaar { background: rgba(90,195,128,.14) !important; color: #2E8B57 !important; }
.inr-db-status-badge.st-geannuleerd { background: rgba(253,76,92,.10) !important; color: #C72D3A !important; }

/* Verzoek van INR. */
.inr-db-verzoek { background: rgba(253,118,52,.08) !important; border: 1px solid rgba(253,118,52,.20) !important; border-radius: 10px !important; padding: 10px 12px !important; font-size: 13px !important; font-weight: 300 !important; color: #334155 !important; margin: 12px 0 0 !important; }
.inr-db-verzoek strong { font-weight: 600 !important; color: #C7560F !important; }

/* Openstaand voorstel. */
.inr-db-voorstel { background: rgba(40,117,251,.05) !important; border: 1px solid rgba(40,117,251,.18) !important; border-radius: 10px !important; padding: 12px 14px !important; margin: 12px 0 0 !important; }
.inr-db-voorstel-kop { font-weight: 600 !important; font-size: 12px !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: #2875FB !important; margin-bottom: 8px !important; }
.inr-db-voorstel-regel { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; font-size: 14px !important; font-weight: 300 !important; color: #334155 !important; }
.inr-db-voorstel-regel strong { font-weight: 600 !important; color: #0F172A !important; }
.inr-db-voorstel-bericht { font-size: 13px !important; font-style: italic !important; color: #64748B !important; margin-top: 8px !important; }
.inr-db-of { font-size: 12px !important; color: #94A3B8 !important; margin-left: 10px !important; }
.inr-db-wacht-tekst { font-size: 13px !important; color: #94A3B8 !important; font-weight: 300 !important; }

/* Kaart-acties en knoppen. */
.inr-db-kaart-acties { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; align-items: center !important; margin-top: 14px !important; }
.inr-db-knop-klein { padding: 8px 14px !important; font-size: 13px !important; margin-top: 10px !important; }
.inr-db-knop-licht { background: rgba(15,23,42,.04) !important; color: #334155 !important; box-shadow: none !important; border: 1px solid rgba(15,23,42,.10) !important; padding: 8px 14px !important; font-size: 13px !important; }
.inr-db-knop-licht:hover { background: rgba(15,23,42,.07) !important; transform: none !important; }
.inr-db-mini-knop { background: none !important; border: none !important; color: #C7560F !important; font-size: 12px !important; text-decoration: underline !important; cursor: pointer !important; margin-left: 8px !important; padding: 0 !important; font-family: inherit !important; }

/* Info-icoon met popup (beheerder). */
.inr-db-info { position: relative !important; display: inline-flex !important; align-items: center !important; margin-left: 4px !important; cursor: help !important; }
.inr-db-info-icoon { width: 18px !important; height: 18px !important; border-radius: 50% !important; background: rgba(0,123,255,.12) !important; color: var(--inr-accent) !important; font-size: 11px !important; font-weight: 700 !important; font-style: italic !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.inr-db-info-popup {
	position: absolute !important; top: calc(100% + 8px) !important; bottom: auto !important; right: 0 !important; left: auto !important; transform: none !important;
	width: 280px !important; max-width: calc(100vw - 48px) !important; background: #0F172A !important; color: #fff !important;
	font-size: 12px !important; font-weight: 300 !important; line-height: 1.5 !important;
	padding: 12px 14px !important; border-radius: 10px !important;
	box-shadow: 0 10px 30px rgba(15,23,42,.25) !important;
	opacity: 0 !important; visibility: hidden !important; transition: opacity .15s ease !important; z-index: 50 !important;
}
.inr-db-info-popup strong { color: #fff !important; font-weight: 600 !important; }
.inr-db-info:hover .inr-db-info-popup, .inr-db-info:focus .inr-db-info-popup { opacity: 1 !important; visibility: visible !important; }

/* Formulieren in de kaart. */
.inr-db-form { margin-top: 12px !important; padding: 14px !important; background: rgba(248,250,252,.8) !important; border: 1px solid rgba(15,23,42,.08) !important; border-radius: 10px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; max-width: 460px !important; }
.inr-db-form label { display: flex !important; flex-direction: column !important; gap: 4px !important; font-size: 12px !important; font-weight: 600 !important; color: #475569 !important; }
.inr-db-form input[type="date"], .inr-db-form input[type="text"], .inr-db-form textarea {
	font-family: 'Inter', sans-serif !important; font-weight: 300 !important; font-size: 14px !important;
	padding: 8px 10px !important; border: 1px solid rgba(15,23,42,.14) !important; border-radius: 8px !important;
	background: #fff !important; color: #0F172A !important; width: 100% !important; box-sizing: border-box !important;
}
.inr-db-form .inr-db-checkrij { flex-direction: row !important; align-items: center !important; gap: 8px !important; font-weight: 300 !important; color: #334155 !important; }
.inr-db-form .inr-db-checkrij input { width: auto !important; }

/* Outlook-tussenscherm: bewerkbare velden vóór het aanmaken. */
.inr-db-outlook-form input[type="time"] {
	font-family: 'Inter', sans-serif !important; font-weight: 300 !important; font-size: 14px !important;
	padding: 8px 10px !important; border: 1px solid rgba(15,23,42,.14) !important; border-radius: 8px !important;
	background: #fff !important; color: #0F172A !important; width: 100% !important; box-sizing: border-box !important;
}
.inr-db-outlook-form .inr-db-veld-label { font-size: 12px !important; font-weight: 600 !important; color: #475569 !important; margin: 2px 0 0 !important; }
.inr-db-outlook-rij2 { display: grid !important; grid-template-columns: 1.4fr 1fr 1fr !important; gap: 10px !important; }
.inr-db-outlook-deelnemers { display: flex !important; flex-direction: column !important; gap: 7px !important; max-height: 180px !important; overflow-y: auto !important; padding: 10px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 8px !important; }
.inr-db-outlook-email { color: #94A3B8 !important; font-weight: 300 !important; font-size: 12px !important; margin-left: 4px !important; }
@media (max-width: 560px) {
	.inr-db-outlook-rij2 { grid-template-columns: 1fr !important; }
}

/* Meldingen binnen de kaart. */
.inr-db-kaart-melding { margin-top: 10px !important; font-size: 13px !important; padding: 8px 12px !important; border-radius: 8px !important; }
.inr-db-kaart-melding.is-ok { background: rgba(90,195,128,.12) !important; color: #2E8B57 !important; }
.inr-db-kaart-melding.is-fout { background: rgba(253,76,92,.10) !important; color: #C72D3A !important; }

/* Op smal scherm: de hoofdregel terug naar onder elkaar. */
@media (max-width: 700px) {
	.inr-db-rij, .inr-db-rij:not(:has(.inr-db-rij-pijl)) { grid-template-columns: 1fr auto !important; gap: 8px 12px !important; }
	.inr-db-rij-onderwerp { grid-column: 1 / -1 !important; }
	.inr-db-rij-pijl { display: none !important; }
	.inr-db-info-popup { left: auto !important; right: 0 !important; top: calc(100% + 8px) !important; bottom: auto !important; transform: none !important; }
}

/* ── Voortgang & tijdlijn in het zijpaneel ── */
.inr-db-voortgang-balk { height: 8px !important; background: rgba(15,23,42,.07) !important; border-radius: 999px !important; overflow: hidden !important; margin: 4px 0 8px !important; }
.inr-db-voortgang-balk span { display: block !important; height: 100% !important; background: linear-gradient(90deg, var(--inr-accent), var(--inr-accent-2)) !important; border-radius: 999px !important; }
.inr-db-voortgang-tekst { font-size: 13px !important; font-weight: 300 !important; color: #64748B !important; margin-bottom: 14px !important; }
.inr-db-fase-kop { font-weight: 600 !important; font-size: 11px !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: #94A3B8 !important; margin-bottom: 8px !important; }
.inr-db-fase { background: rgba(0,123,255,.05) !important; border: 1px solid rgba(0,123,255,.14) !important; border-radius: 10px !important; padding: 10px 12px !important; margin-bottom: 8px !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.inr-db-fase-dienst { font-weight: 600 !important; font-size: 10px !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--inr-accent) !important; }
.inr-db-fase-titel { font-weight: 600 !important; font-size: 14px !important; color: #0F172A !important; }
.inr-db-fase-meta { font-weight: 300 !important; font-size: 12px !important; color: #64748B !important; }

.inr-db-tijd-rij { display: flex !important; justify-content: space-between !important; align-items: baseline !important; font-size: 13px !important; font-weight: 300 !important; color: #64748B !important; margin-bottom: 6px !important; }
.inr-db-tijd-rij strong { font-weight: 600 !important; color: #0F172A !important; font-variant-numeric: tabular-nums !important; }
.inr-db-tijd-getallen { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 10px !important; }
.inr-db-tijd-getal { background: rgba(255,255,255,.7) !important; border: 1px solid rgba(15,23,42,.07) !important; border-radius: 10px !important; padding: 12px !important; text-align: center !important; }
.inr-db-tijd-getal strong { display: block !important; font-weight: 600 !important; font-size: 24px !important; color: var(--inr-accent) !important; line-height: 1 !important; }
.inr-db-tijd-getal span { display: block !important; font-weight: 300 !important; font-size: 11px !important; color: #64748B !important; margin-top: 4px !important; }

/* ── Tokenhouder-foto's ── */
.inr-db-tabel-foto .inr-db-th-foto { width: 56px !important; }
.inr-db-td-foto { position: relative !important; width: 56px !important; }
.inr-db-avatar {
	width: 40px !important; height: 40px !important; border-radius: 50% !important;
	border: 1px solid rgba(15,23,42,.10) !important; background: rgba(0,123,255,.08) !important;
	padding: 0 !important; cursor: pointer !important; position: relative !important; overflow: hidden !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
}
.inr-db-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
/* Toon-variant (Tokenhouders-scherm): alleen weergave, niet klikbaar. De foto
   komt centraal uit het profiel van de gekoppelde gebruiker. */
.inr-db-avatar-toon { cursor: default !important; }
.inr-db-avatar-initiaal { font-weight: 600 !important; font-size: 15px !important; color: var(--inr-accent) !important; }
/* Pen-overlay: vult de hele avatar, prominent in het midden bij hover. */
.inr-db-avatar-overlay { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(15,23,42,.45) !important; opacity: 0 !important; transition: opacity .15s ease !important; }
.inr-db-avatar:hover .inr-db-avatar-overlay, .inr-db-avatar:focus .inr-db-avatar-overlay { opacity: 1 !important; }
.inr-db-avatar-pen { color: #fff !important; font-size: 16px !important; line-height: 1 !important; }

.inr-db-foto-paneel {
	position: absolute !important; top: 48px !important; left: 0 !important; z-index: 60 !important;
	width: 300px !important; max-width: calc(100vw - 40px) !important;
	background: #fff !important; border: 1px solid rgba(15,23,42,.12) !important;
	border-radius: 12px !important; box-shadow: 0 12px 30px rgba(15,23,42,.18) !important; padding: 14px !important;
	box-sizing: border-box !important;
}
.inr-db-foto-tab-knoppen { display: flex !important; gap: 4px !important; margin-bottom: 12px !important; background: rgba(15,23,42,.04) !important; border-radius: 8px !important; padding: 3px !important; }
.inr-db-foto-tabknop { flex: 1 !important; border: none !important; background: transparent !important; padding: 7px !important; font-size: 12px !important; font-weight: 600 !important; color: #64748B !important; border-radius: 6px !important; cursor: pointer !important; font-family: inherit !important; }
.inr-db-foto-tabknop.actief { background: #fff !important; color: var(--inr-accent) !important; box-shadow: 0 1px 3px rgba(15,23,42,.10) !important; }
.inr-db-foto-tab input[type="url"] { width: 100% !important; box-sizing: border-box !important; font-size: 13px !important; font-family: 'Inter', sans-serif !important; padding: 8px 10px !important; border: 1px solid rgba(15,23,42,.14) !important; border-radius: 8px !important; margin-bottom: 6px !important; }
.inr-db-foto-hint { font-size: 11px !important; font-weight: 300 !important; color: #94A3B8 !important; margin: 0 0 10px 0 !important; line-height: 1.4 !important; word-wrap: break-word !important; }

/* Moderne "Kies een foto"-knop (vervangt de standaard file-input). */
.inr-db-file-verborgen { display: none !important; }
.inr-db-kies-knop { display: inline-block !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #334155 !important; background: rgba(15,23,42,.04) !important; border: 1px solid rgba(15,23,42,.12) !important; border-radius: 8px !important; padding: 8px 14px !important; cursor: pointer !important; transition: background .15s ease !important; }
.inr-db-kies-knop:hover { background: rgba(15,23,42,.08) !important; }
.inr-db-bestandsnaam { display: block !important; font-size: 12px !important; font-weight: 300 !important; color: #64748B !important; margin: 8px 0 4px !important; word-break: break-all !important; }

.inr-db-foto-melding { margin-top: 8px !important; font-size: 12px !important; padding: 6px 8px !important; border-radius: 6px !important; line-height: 1.4 !important; }
.inr-db-foto-melding.is-ok { background: rgba(90,195,128,.12) !important; color: #2E8B57 !important; }
.inr-db-foto-melding.is-fout { background: rgba(253,76,92,.10) !important; color: #C72D3A !important; }

/* Op smal scherm het paneel niet buiten beeld laten vallen. */
@media (max-width: 600px) {
	.inr-db-foto-paneel { left: 0 !important; right: auto !important; }
}

/* ── Dienst-tegels bovenaan de planning ── */
.inr-db-dienst-tegels { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin: 0 0 22px 0 !important; }
.inr-db-dienst-tegel {
	flex: 1 1 0 !important; min-width: 130px !important;
	background: rgba(255,255,255,.7) !important; border: 1px solid rgba(15,23,42,.08) !important;
	border-radius: 14px !important; padding: 16px !important;
	display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important;
}
.inr-db-dienst-icoon { display: inline-flex !important; }
.inr-db-dienst-naam { font-weight: 500 !important; font-size: 13px !important; color: #475569 !important; }
.inr-db-dienst-getal { font-weight: 600 !important; font-size: 28px !important; color: #0F172A !important; line-height: 1 !important; }
@media (max-width: 600px) {
	.inr-db-dienst-tegel { flex: 1 1 40% !important; min-width: 0 !important; }
}

/* ── Status-overrule (beheerder) ── */
.inr-db-status-overrule { display: flex !important; align-items: center !important; gap: 10px !important; margin-top: 14px !important; padding: 10px 12px !important; background: rgba(116,72,253,.05) !important; border: 1px solid rgba(116,72,253,.16) !important; border-radius: 10px !important; }
.inr-db-status-overrule label { font-weight: 600 !important; font-size: 11px !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: #7448FD !important; }
.inr-db-status-overrule select { font-family: 'Inter', sans-serif !important; font-weight: 500 !important; font-size: 13px !important; padding: 6px 10px !important; border: 1px solid rgba(15,23,42,.14) !important; border-radius: 8px !important; background: #fff !important; color: #0F172A !important; cursor: pointer !important; }
.inr-db-afgesloten-tekst { font-size: 13px !important; font-weight: 300 !important; color: #94A3B8 !important; }

/* ── Updates / notificaties ── */
.inr-db-nav-item { position: relative !important; }
.inr-db-nav-telling { margin-left: auto !important; min-width: 20px !important; height: 20px !important; padding: 0 6px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700 !important; display: none !important; align-items: center !important; justify-content: center !important; background: #FD4C5C !important; color: #fff !important; }
.inr-db-nav-telling.actief { display: inline-flex !important; }

.inr-db-updates-kop { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; flex-wrap: wrap !important; }
.inr-db-notif-lijst { list-style: none !important; margin: 16px 0 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.inr-db-notif { display: flex !important; gap: 12px !important; padding: 14px 16px !important; background: rgba(255,255,255,.7) !important; border: 1px solid rgba(15,23,42,.08) !important; border-radius: 12px !important; }
.inr-db-notif.is-nieuw { background: rgba(0,123,255,.05) !important; border-color: rgba(0,123,255,.2) !important; }
.inr-db-notif-stip { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: transparent !important; margin-top: 6px !important; flex-shrink: 0 !important; }
.inr-db-notif.is-nieuw .inr-db-notif-stip { background: var(--inr-accent) !important; }
.inr-db-notif-inhoud { flex: 1 !important; min-width: 0 !important; }
.inr-db-notif-tekst { font-size: 14px !important; font-weight: 400 !important; color: #0F172A !important; line-height: 1.45 !important; }
.inr-db-notif.is-nieuw .inr-db-notif-tekst { font-weight: 500 !important; }
.inr-db-notif-tijd { font-size: 12px !important; font-weight: 300 !important; color: #94A3B8 !important; margin-top: 3px !important; }
.inr-db-notif-acties { display: flex !important; gap: 14px !important; flex-wrap: wrap !important; margin-top: 8px !important; }
.inr-db-notif-link { background: none !important; border: none !important; padding: 0 !important; font-family: inherit !important; font-size: 12px !important; font-weight: 600 !important; color: var(--inr-accent) !important; cursor: pointer !important; }
.inr-db-notif-link:hover { text-decoration: underline !important; }
.inr-db-notif-link.inr-db-notif-weg { color: #94A3B8 !important; }

/* Flits-highlight als je vanuit een update naar een planning-kaart springt. */
.inr-db-kaart-flits { animation: inrDbFlits 1.5s ease !important; }
@keyframes inrDbFlits {
	0%, 100% { box-shadow: 0 0 0 0 rgba(0,123,255,0); }
	30% { box-shadow: 0 0 0 4px rgba(0,123,255,.25); }
}

/* ── Intake ── */
.inr-db-intake-stats { display: flex !important; gap: 12px !important; margin: 16px 0 20px !important; }
.inr-db-intake-stat { flex: 0 0 auto !important; background: rgba(255,255,255,.7) !important; border: 1px solid rgba(15,23,42,.08) !important; border-radius: 12px !important; padding: 12px 20px !important; text-align: center !important; }
.inr-db-intake-stat strong { display: block !important; font-size: 24px !important; font-weight: 600 !important; color: var(--inr-accent) !important; line-height: 1 !important; }
.inr-db-intake-stat span { display: block !important; font-size: 12px !important; font-weight: 300 !important; color: #64748B !important; margin-top: 4px !important; }

.inr-db-intake-lijst { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.inr-db-intake-kaart { background: rgba(255,255,255,.78) !important; border: 1px solid rgba(15,23,42,.08) !important; border-radius: 12px !important; padding: 14px 16px !important; display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: flex-start !important; justify-content: space-between !important; }
.inr-db-intake-persoon { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 180px !important; }
.inr-db-intake-naam { font-weight: 600 !important; font-size: 15px !important; color: #0F172A !important; }
.inr-db-intake-contact { font-size: 12px !important; font-weight: 300 !important; color: #64748B !important; }
.inr-db-intake-keuze { flex: 1 1 300px !important; }

.inr-db-intake-gekozen { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
.inr-db-intake-gekozen strong { font-size: 14px !important; color: #0F172A !important; }
.inr-db-intake-badge-ok { background: rgba(90,195,128,.14) !important; color: #2E8B57 !important; font-size: 12px !important; font-weight: 600 !important; padding: 3px 10px !important; border-radius: 999px !important; }
.inr-db-intake-badge-wacht { background: rgba(15,23,42,.06) !important; color: #64748B !important; font-size: 12px !important; font-weight: 500 !important; padding: 3px 10px !important; border-radius: 999px !important; display: inline-block !important; margin-bottom: 10px !important; }

.inr-db-intake-dagen { display: flex !important; gap: 6px !important; margin-bottom: 10px !important; }
.inr-db-intake-dagknop { font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; padding: 6px 12px !important; border-radius: 8px !important; border: 1px solid rgba(15,23,42,.12) !important; background: #fff !important; color: #334155 !important; cursor: pointer !important; }
.inr-db-intake-dagknop.actief { background: var(--inr-accent) !important; color: #fff !important; border-color: var(--inr-accent) !important; }
.inr-db-intake-slots { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 10px !important; }
.inr-db-slotknop { font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; padding: 6px 12px !important; border-radius: 8px !important; border: 1px solid rgba(0,123,255,.3) !important; background: rgba(0,123,255,.05) !important; color: var(--inr-accent) !important; cursor: pointer !important; }
.inr-db-slotknop:hover { background: rgba(0,123,255,.12) !important; }
.inr-db-slotknop.bezet { background: rgba(15,23,42,.05) !important; border-color: rgba(15,23,42,.10) !important; color: #B0B8C4 !important; cursor: not-allowed !important; text-decoration: line-through !important; }
.inr-db-intake-kanniet { background: none !important; border: none !important; padding: 0 !important; font-family: inherit !important; font-size: 12px !important; font-weight: 500 !important; color: #C7560F !important; cursor: pointer !important; text-decoration: underline !important; }
.inr-db-intake-melding { margin-top: 8px !important; font-size: 12px !important; padding: 6px 10px !important; border-radius: 6px !important; }
.inr-db-intake-melding.is-ok { background: rgba(90,195,128,.12) !important; color: #2E8B57 !important; }
.inr-db-intake-melding.is-fout { background: rgba(253,76,92,.10) !important; color: #C72D3A !important; }

/* ── Intake-instellingen (beheerder) ── */
.inr-db-intake-instel { background: rgba(116,72,253,.05) !important; border: 1px solid rgba(116,72,253,.16) !important; border-radius: 12px !important; padding: 14px 16px !important; margin: 0 0 20px !important; }
.inr-db-intake-instel-kop { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
.inr-db-intake-instel-body { margin-top: 14px !important; }
.inr-db-instel-label { display: block !important; font-weight: 600 !important; font-size: 12px !important; color: #475569 !important; margin-bottom: 8px !important; }
.inr-db-dag-chips { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 8px !important; }
.inr-db-dag-chip { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.14) !important; border-radius: 999px !important; padding: 4px 6px 4px 12px !important; font-size: 13px !important; font-weight: 500 !important; color: #0F172A !important; }
.inr-db-dag-chip-x { width: 18px !important; height: 18px !important; border-radius: 50% !important; border: none !important; background: rgba(15,23,42,.08) !important; color: #475569 !important; cursor: pointer !important; font-size: 14px !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; }
.inr-db-dag-chip-x:hover { background: rgba(253,76,92,.15) !important; color: #C72D3A !important; }
.inr-db-dag-toevoeg { display: flex !important; gap: 8px !important; align-items: center !important; margin-bottom: 14px !important; }
.inr-db-dag-toevoeg input[type="date"] { font-family: 'Inter', sans-serif !important; font-size: 13px !important; padding: 6px 10px !important; border: 1px solid rgba(15,23,42,.14) !important; border-radius: 8px !important; }
.inr-db-instel-raster { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-bottom: 14px !important; }
.inr-db-instel-raster label { display: flex !important; flex-direction: column !important; gap: 4px !important; font-size: 11px !important; font-weight: 600 !important; color: #475569 !important; }
.inr-db-instel-raster input { font-family: 'Inter', sans-serif !important; font-size: 13px !important; padding: 6px 10px !important; border: 1px solid rgba(15,23,42,.14) !important; border-radius: 8px !important; width: 90px !important; }
.inr-db-instel-melding { margin-top: 8px !important; font-size: 12px !important; padding: 6px 10px !important; border-radius: 6px !important; }
.inr-db-instel-melding.is-ok { background: rgba(90,195,128,.12) !important; color: #2E8B57 !important; }
.inr-db-instel-melding.is-fout { background: rgba(253,76,92,.10) !important; color: #C72D3A !important; }

/* ── Fix: invoervelden altijd donkere tekst (tegen wit-op-wit van thema) ── */
.inr-db-root input,
.inr-db-root textarea,
.inr-db-root select {
	color: #0F172A !important;
	-webkit-text-fill-color: #0F172A !important;
	background-color: #fff !important;
	opacity: 1 !important;
}
.inr-db-root input::placeholder,
.inr-db-root textarea::placeholder {
	color: #94A3B8 !important;
	-webkit-text-fill-color: #94A3B8 !important;
}
/* Slotknoppen houden hun eigen blauwe tekst; niet overschrijven. */
.inr-db-root .inr-db-slotknop { -webkit-text-fill-color: currentColor !important; background-color: rgba(0,123,255,.05) !important; }
.inr-db-root .inr-db-slotknop.bezet { -webkit-text-fill-color: #B0B8C4 !important; background-color: rgba(15,23,42,.05) !important; }

/* ── Traject (methode-kaart) ── */
.inr-db-traject-kop { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; flex-wrap: wrap !important; }
.inr-db-traject-knoppen { display: flex !important; gap: 8px !important; }
.inr-db-knop-mini.actief { background: var(--inr-accent) !important; color: #fff !important; border-color: var(--inr-accent) !important; }
.inr-db-traject-hint { background: rgba(0,123,255,.06) !important; border: 1px solid rgba(0,123,255,.2) !important; color: #1D4ED8 !important; font-size: 13px !important; padding: 8px 12px !important; border-radius: 8px !important; margin: 12px 0 !important; }

.inr-db-traject-kaart { margin-top: 18px !important; overflow-x: auto !important; padding-bottom: 12px !important; }
.inr-db-traject-rail { display: flex !important; align-items: stretch !important; gap: 4px !important; min-width: min-content !important; }
.inr-db-traject-kolom { display: flex !important; flex-direction: column !important; gap: 10px !important; min-width: 120px !important; }
.inr-db-traject-fase { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #94A3B8 !important; text-align: center !important; margin-bottom: 2px !important; }
.inr-db-traject-tegels { display: flex !important; flex-direction: column !important; gap: 10px !important; justify-content: center !important; flex: 1 !important; }
.inr-db-traject-pijl { display: flex !important; align-items: center !important; color: #CBD5E1 !important; align-self: center !important; flex: 0 0 32px !important; }

.inr-db-traject-tegel {
	display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important;
	padding: 16px 14px !important; border-radius: 14px !important; cursor: default !important;
	background: #fff !important; border: 1.5px solid rgba(15,23,42,.10) !important;
	color: #94A3B8 !important; min-width: 110px !important; transition: all .2s ease !important;
	font-family: 'Inter', sans-serif !important;
	/* Gedimd is de standaard; highlight maakt 'm vol gekleurd. */
	opacity: .55 !important; filter: grayscale(.5) !important;
}
.inr-db-traject-tegel .inr-db-traject-icoon { color: #CBD5E1 !important; display: flex !important; }
.inr-db-traject-naam { font-size: 13px !important; font-weight: 600 !important; color: #64748B !important; text-align: center !important; line-height: 1.25 !important; }

.inr-db-traject-tegel.actief {
	opacity: 1 !important; filter: none !important;
	background: var(--tegel-kleur) !important; border-color: var(--tegel-kleur) !important;
	box-shadow: 0 8px 22px -8px var(--tegel-kleur) !important;
}
.inr-db-traject-tegel.actief .inr-db-traject-icoon { color: #fff !important; }
.inr-db-traject-tegel.actief .inr-db-traject-naam { color: #fff !important; }

/* In highlight-modus zijn de tegels klikbaar. */
.inr-db-traject-bewerk .inr-db-traject-tegel { cursor: pointer !important; }
.inr-db-traject-bewerk .inr-db-traject-tegel:hover { transform: translateY(-2px) !important; opacity: .85 !important; }
.inr-db-traject-bewerk .inr-db-traject-tegel.actief:hover { opacity: 1 !important; }

/* Editor */
.inr-db-traject-editor { margin-top: 20px !important; background: rgba(116,72,253,.04) !important; border: 1px solid rgba(116,72,253,.16) !important; border-radius: 12px !important; padding: 16px !important; }
.inr-db-traject-editor-kop { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 14px !important; }
.inr-db-editor-kolommen { display: flex !important; gap: 12px !important; overflow-x: auto !important; padding-bottom: 8px !important; }
.inr-db-editor-kolom { background: #fff !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 10px !important; padding: 10px !important; min-width: 220px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.inr-db-editor-kolom-kop { display: flex !important; gap: 6px !important; align-items: center !important; }
.inr-db-editor-kolom-kop input { flex: 1 !important; font-weight: 600 !important; font-size: 13px !important; padding: 5px 8px !important; border: 1px solid rgba(15,23,42,.14) !important; border-radius: 7px !important; }
.inr-db-editor-comp { display: flex !important; gap: 6px !important; align-items: center !important; }
.inr-db-editor-comp input[type="text"] { flex: 1 !important; min-width: 0 !important; font-size: 12px !important; padding: 5px 8px !important; border: 1px solid rgba(15,23,42,.14) !important; border-radius: 7px !important; }
.inr-db-editor-comp input[type="color"] { width: 30px !important; height: 30px !important; padding: 0 !important; border: 1px solid rgba(15,23,42,.14) !important; border-radius: 7px !important; background: none !important; cursor: pointer !important; }
.inr-db-editor-comp select { font-size: 12px !important; padding: 5px 6px !important; border: 1px solid rgba(15,23,42,.14) !important; border-radius: 7px !important; max-width: 90px !important; }
.inr-db-editor-x { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; border: none !important; background: rgba(15,23,42,.06) !important; color: #64748B !important; border-radius: 6px !important; cursor: pointer !important; font-size: 15px !important; line-height: 1 !important; }
.inr-db-editor-x:hover { background: rgba(253,76,92,.15) !important; color: #C72D3A !important; }
.inr-db-editor-add-comp { border: 1px dashed rgba(15,23,42,.20) !important; background: none !important; color: #475569 !important; font-size: 12px !important; font-weight: 600 !important; padding: 6px !important; border-radius: 7px !important; cursor: pointer !important; font-family: 'Inter', sans-serif !important; }
.inr-db-editor-add-comp:hover { border-color: #7448FD !important; color: #7448FD !important; }
.inr-db-editor-voet { margin-top: 14px !important; }

/* ── Mobiel menu als PORTAL (sidebar + backdrop hangen aan <body>) ── */
/* De sidebar is uit de dashboard-boom gehaald en aan de body gehangen, zodat
   geen enkele voorouder-stijl (transform/filter van thema of Elementor) hem
   nog in een gevangen stacking-context kan zetten. Daarom sturen we hem hier
   aan via een klasse op de body. */
/* Het mobiele dashboard-menu wordt bij openen naar de <body> verplaatst (als
   .inr-db-sidebar-portal) zodat het over alles heen ligt. Daardoor valt het
   buiten .inr-db-root en mist het de font-regel daar, waardoor het het font van
   de body erft (dat op sommige pagina's Times is). We zetten Inter hier daarom
   expliciet op het verplaatste paneel en al zijn kinderen. */
.inr-db-sidebar-portal, .inr-db-sidebar-portal * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; }

.inr-db-sidebar-portal {
	position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important;
	width: 280px !important; max-width: 85vw !important; height: 100vh !important; height: 100dvh !important; margin: 0 !important;
	border-radius: 0 18px 18px 0 !important;
	transform: translateX(-105%) !important;
	transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
	z-index: 2147483000 !important;
	box-shadow: 0 25px 60px rgba(15,23,42,.30) !important;
	background: #fff !important;
	backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
	overflow-y: auto !important; -webkit-overflow-scrolling: touch !important;
	display: flex !important; flex-direction: column !important;
	padding: 18px 14px !important;
	pointer-events: auto !important;
}
.inr-db-sidebar-portal > * { position: relative !important; z-index: 1 !important; pointer-events: auto !important; }
body.inr-db-menu-open .inr-db-sidebar-portal { transform: translateX(0) !important; }
body.inr-db-menu-open .inr-db-menu-backdrop { opacity: 1 !important; pointer-events: auto !important; }


/* ── Drag & drop in de kaart-editor ── */
.inr-db-sleep-greep {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	width: 22px !important; height: 26px !important; flex: 0 0 22px !important;
	color: #94A3B8 !important; cursor: grab !important;
	touch-action: none !important; /* cruciaal: anders scrollt de pagina bij touch-slepen */
	border-radius: 5px !important;
}
.inr-db-sleep-greep:hover { color: #475569 !important; background: rgba(15,23,42,.05) !important; }
.inr-db-sleep-greep:active { cursor: grabbing !important; }
.inr-db-sleep-kolom { margin-right: 2px !important; }
.inr-db-editor-comps { display: flex !important; flex-direction: column !important; gap: 8px !important; min-height: 8px !important; }
body.inr-db-bezig-slepen { cursor: grabbing !important; -webkit-user-select: none !important; user-select: none !important; }
body.inr-db-bezig-slepen * { cursor: grabbing !important; }
/* Markering waar het gesleepte item terechtkomt. */
.inr-db-editor-kolom.inr-db-drop-hier { outline: 2px dashed #7448FD !important; outline-offset: 2px !important; }
.inr-db-editor-comps.inr-db-drop-hier { outline: 2px dashed #7448FD !important; outline-offset: 2px !important; border-radius: 8px !important; }

/* ── Traject verbindingslijnen ── */
.inr-db-traject-binnen { position: relative !important; }
.inr-db-traject-lijnen { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; z-index: 1 !important; overflow: visible !important; }
.inr-db-traject-binnen .inr-db-traject-rail { position: relative !important; z-index: 2 !important; }
.inr-db-lijn { stroke: #CBD5E1 !important; opacity: .5 !important; }
.inr-db-lijn.actief { stroke: #7448FD !important; opacity: 1 !important; }
/* De pijl-tussenblokken bestaan niet meer; oude marge weghalen. */
.inr-db-traject-rail { gap: 36px !important; }

/* Verbind-modus: tegels klikbaar maken en het startpunt markeren. */
.inr-db-verbind-aan .inr-db-traject-tegel, .inr-db-root .inr-db-traject-binnen .inr-db-traject-tegel { cursor: pointer !important; }
.inr-db-traject-tegel.inr-db-verbind-start { outline: 3px solid #7448FD !important; outline-offset: 2px !important; }

/* ── Verbindingen-lijst (verwijderen) ── */
.inr-db-verb-lijst { margin-top: 16px !important; padding-top: 14px !important; border-top: 1px solid rgba(15,23,42,.08) !important; }
.inr-db-verb-items { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-top: 8px !important; }
.inr-db-verb-item { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 9px !important; padding: 8px 12px !important; }
.inr-db-verb-label { font-size: 13px !important; font-weight: 500 !important; color: #0F172A !important; }
.inr-db-verb-pijl { color: #7448FD !important; font-weight: 700 !important; margin: 0 4px !important; }
.inr-db-verb-weg { flex: 0 0 auto !important; border: none !important; background: rgba(253,76,92,.10) !important; color: #C72D3A !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; padding: 5px 12px !important; border-radius: 7px !important; cursor: pointer !important; }
.inr-db-verb-weg:hover { background: rgba(253,76,92,.18) !important; }
.inr-db-verb-leeg { font-size: 13px !important; font-weight: 300 !important; color: #94A3B8 !important; font-style: italic !important; }

/* ── Foto verwijderen ── */
.inr-db-foto-verwijder-rij { margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid rgba(15,23,42,.08) !important; text-align: center !important; }
.inr-db-foto-verwijder { background: none !important; border: none !important; padding: 4px 8px !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; color: #C72D3A !important; cursor: pointer !important; }
.inr-db-foto-verwijder:hover { text-decoration: underline !important; }

/* ── Traject verbindingen: status per klant ── */
.inr-db-traject-verbstatus { display: flex !important; align-items: center !important; gap: 12px !important; margin: 4px 0 12px !important; flex-wrap: wrap !important; }
.inr-db-verbstatus-badge { font-size: 12px !important; font-weight: 600 !important; padding: 3px 10px !important; border-radius: 999px !important; }
.inr-db-verbstatus-badge.centraal { background: rgba(15,23,42,.06) !important; color: #64748B !important; }
.inr-db-verbstatus-badge.eigen { background: rgba(116,72,253,.12) !important; color: var(--inr-accent-2) !important; }

/* ── Frontend-beheer van planning (nieuw / bewerken / verwijderen) ── */
.inr-db-plan-beheer { margin: 4px 0 18px !important; }
.inr-db-plan-form { margin-top: 12px !important; padding: 18px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 14px !important; box-shadow: 0 4px 18px rgba(15,23,42,.06) !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px 16px !important; }
.inr-db-plan-form-titel { grid-column: 1 / -1 !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 15px !important; color: #0F172A !important; }
.inr-db-plan-veld { display: flex !important; flex-direction: column !important; gap: 5px !important; }
.inr-db-plan-veld label { font-size: 12px !important; font-weight: 600 !important; color: #475569 !important; }
.inr-db-plan-veld input[type="text"], .inr-db-plan-veld input[type="date"], .inr-db-plan-veld input[type="email"], .inr-db-plan-veld input[type="tel"], .inr-db-plan-veld input[type="url"], .inr-db-plan-veld select { width: 100% !important; box-sizing: border-box !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; color: #0F172A !important; -webkit-text-fill-color: #0F172A !important; padding: 9px 11px !important; border: 1px solid rgba(15,23,42,.16) !important; border-radius: 9px !important; background: #fff !important; }
.inr-db-plan-veld-check { flex-direction: row !important; align-items: center !important; grid-column: 1 / -1 !important; }
.inr-db-plan-veld-check label { display: flex !important; align-items: center !important; gap: 8px !important; font-weight: 400 !important; color: #0F172A !important; }
.inr-db-plan-form-knoppen { grid-column: 1 / -1 !important; display: flex !important; gap: 10px !important; margin-top: 4px !important; }

.inr-db-kaart-beheer { display: flex !important; gap: 10px !important; align-items: center !important; margin: 6px 0 10px !important; padding-bottom: 10px !important; border-bottom: 1px dashed rgba(15,23,42,.10) !important; }
.inr-db-mini-knop-rood { color: #C72D3A !important; }
.inr-db-mini-knop-rood:hover { text-decoration: underline !important; }

/* Animaties: nieuwe/gewijzigde kaart licht op, verwijderde kaart verdwijnt. */
.inr-db-kaart-flits { animation: inrFlits 1.2s ease !important; }
@keyframes inrFlits { 0% { box-shadow: 0 0 0 3px rgba(116,72,253,.45); } 100% { box-shadow: 0 0 0 0 rgba(116,72,253,0); } }
.inr-db-kaart-weg { transition: opacity .35s ease, transform .35s ease !important; opacity: 0 !important; transform: translateX(-12px) !important; }

@media (max-width: 600px) {
	.inr-db-plan-form { grid-template-columns: 1fr !important; }
}

/* ── Traject-focusmodus: kaart fullscreen, sidebar + zijpaneel ingeklapt ── */
/* Wordt door het JS aangezet (root.classList) zodra de Traject-tab actief is,
   en weer uit zodra je het menu terughaalt of naar een andere tab gaat. */
.inr-db-root.traject-focus .inr-db-sidebar { display: none !important; }
.inr-db-root.traject-focus .inr-db-zijpaneel { display: none !important; }
.inr-db-root.traject-focus .inr-db-shell {
	grid-template-columns: 1fr !important;
}
.inr-db-root.traject-focus .inr-db-topbar { grid-column: 1 !important; }
.inr-db-root.traject-focus .inr-db-canvas { grid-column: 1 !important; }
/* In focusmodus de menu-knop nadrukkelijk tonen (ook op desktop), in de huisstijl:
   een rustige, lichte pil met icoon + label — geen rauwe knop. */
.inr-db-root.traject-focus .inr-db-menu-toggle {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	height: 40px !important;
	padding: 0 16px 0 13px !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,.7) !important;
	border: 1px solid rgba(15,23,42,.10) !important;
	box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
	cursor: pointer !important;
	transition: background .15s ease, border-color .15s ease !important;
}
.inr-db-root.traject-focus .inr-db-menu-toggle:hover {
	background: #fff !important;
	border-color: rgba(116,72,253,.35) !important;
}
.inr-db-root.traject-focus .inr-db-menu-toggle svg {
	width: 18px !important; height: 18px !important; color: var(--inr-accent-2) !important;
}
.inr-db-menu-terug-label { display: none !important; }
.inr-db-root.traject-focus .inr-db-menu-terug-label {
	display: inline !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13px !important; font-weight: 600 !important;
	color: #0F172A !important; margin: 0 !important;
}

/* ── Toast: duidelijke bevestiging bovenin beeld ── */
.inr-db-toast-houder { position: fixed !important; top: 24px !important; right: 24px !important; z-index: 999999 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; pointer-events: none !important; }
.inr-db-toast {
	display: flex !important; align-items: center !important; gap: 10px !important;
	font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 600 !important;
	color: #0F172A !important;
	background: #fff !important; border: 1px solid rgba(15,23,42,.10) !important;
	border-left: 4px solid #5AC380 !important;
	border-radius: 12px !important; padding: 13px 18px !important;
	box-shadow: 0 8px 30px rgba(15,23,42,.16) !important;
	opacity: 0 !important; transform: translateX(20px) !important;
	transition: opacity .3s ease, transform .3s ease !important;
	min-width: 220px !important; max-width: 340px !important;
}
.inr-db-toast.zichtbaar { opacity: 1 !important; transform: translateX(0) !important; }
.inr-db-toast.fout { border-left-color: #FD4C5C !important; }
.inr-db-toast-icoon {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	width: 24px !important; height: 24px !important; flex-shrink: 0 !important;
	border-radius: 50% !important; color: #fff !important; font-size: 14px !important; font-weight: 700 !important;
	background: #5AC380 !important;
}
.inr-db-toast.fout .inr-db-toast-icoon { background: #FD4C5C !important; }
@media (max-width: 600px) {
	.inr-db-toast-houder { top: 12px !important; right: 12px !important; left: 12px !important; }
	.inr-db-toast { max-width: none !important; }
}

/* ── 1-op-1 gesprekken ── */
.inr-db-gesprek-lijst { display: flex !important; flex-direction: column !important; gap: 14px !important; margin-top: 8px !important; }
.inr-db-gesprek-rij { background: #fff !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 14px !important; padding: 16px 18px !important; box-shadow: 0 2px 10px rgba(15,23,42,.04) !important; }
.inr-db-gesprek-hoofd { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 10px !important; }
.inr-db-gesprek-naam { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 15px !important; color: #0F172A !important; }
.inr-db-gesprek-functie { font-weight: 300 !important; color: #94A3B8 !important; font-size: 13px !important; margin-left: 6px !important; }
.inr-db-gesprek-kaart { background: #F8FAFC !important; border: 1px solid rgba(15,23,42,.07) !important; border-radius: 11px !important; padding: 13px 15px !important; }
.inr-db-gesprek-onderwerp { font-weight: 600 !important; color: #0F172A !important; font-size: 14px !important; }
.inr-db-gesprek-vraag { font-style: italic !important; color: #475569 !important; font-size: 13px !important; margin-top: 5px !important; }
.inr-db-gesprek-datum { font-size: 12px !important; font-weight: 600 !important; color: var(--inr-accent-2) !important; margin-top: 6px !important; }
.inr-db-gesprek-acties { display: flex !important; gap: 10px !important; margin-top: 12px !important; }
.inr-db-gesprek-cooldown { font-size: 13px !important; color: #C2682B !important; background: rgba(253,118,52,.10) !important; border-radius: 9px !important; padding: 8px 12px !important; font-weight: 500 !important; }
.inr-db-gesprek-form { margin-top: 12px !important; padding-top: 12px !important; border-top: 1px dashed rgba(15,23,42,.10) !important; }
.inr-db-gesprek-form-rij { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 12px !important; }
.inr-db-gesprek-form .inr-db-plan-veld { margin-bottom: 10px !important; display: flex !important; flex-direction: column !important; gap: 5px !important; }
.inr-db-gesprek-form .inr-db-plan-veld label { font-size: 12px !important; font-weight: 600 !important; color: #475569 !important; }
.inr-db-gesprek-form input[type="text"], .inr-db-gesprek-form input[type="date"], .inr-db-gesprek-form input[type="time"], .inr-db-gesprek-form textarea, .inr-db-gesprek-form select { font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; color: #0F172A !important; -webkit-text-fill-color: #0F172A !important; padding: 9px 11px !important; border: 1px solid rgba(15,23,42,.16) !important; border-radius: 9px !important; background: #fff !important; }
@media (max-width: 600px) { .inr-db-gesprek-form-rij { grid-template-columns: 1fr !important; } }

/* ── Planning importeren (CSV) ── */
.inr-db-plan-import { margin-top: 12px !important; padding: 18px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 14px !important; box-shadow: 0 4px 18px rgba(15,23,42,.06) !important; max-width: 620px !important; }
.inr-db-import-knoppen { margin: 10px 0 14px !important; }
.inr-db-import-veld { margin-bottom: 14px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.inr-db-import-veld > label { font-size: 12px !important; font-weight: 600 !important; color: #475569 !important; }
.inr-db-import-veld input[type="file"] { font-family: 'Inter', sans-serif !important; font-size: 13px !important; color: #0F172A !important; }
.inr-db-import-radio { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 14px !important; font-weight: 400 !important; color: #0F172A !important; }

/* ── Betrokkenen rechtsboven ── */
.inr-db-topbar-right { display: flex !important; align-items: center !important; gap: 18px !important; }
.inr-db-betrokkenen { position: relative !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.inr-db-betrokkenen-rij { display: flex !important; align-items: center !important; gap: 14px !important; }
.inr-db-betrokkene { display: flex !important; align-items: center !important; gap: 8px !important; }
.inr-db-betrokkene-avatar { width: 34px !important; height: 34px !important; border-radius: 50% !important; overflow: hidden !important; flex-shrink: 0 !important; background: #EEF2F7 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 2px solid #fff !important; box-shadow: 0 1px 4px rgba(15,23,42,.12) !important; }
.inr-db-betrokkene-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.inr-db-betrokkene-initiaal { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 14px !important; color: var(--inr-accent-2) !important; }
.inr-db-betrokkene-tekst { display: flex !important; flex-direction: column !important; line-height: 1.15 !important; }
.inr-db-betrokkene-naam { font-size: 13px !important; font-weight: 600 !important; color: #0F172A !important; }
.inr-db-betrokkene-rol { font-size: 11px !important; font-weight: 400 !important; color: #94A3B8 !important; }
.inr-db-betrokkenen-bewerk { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; border-radius: 8px !important; background: rgba(255,255,255,.7) !important; border: 1px solid rgba(15,23,42,.10) !important; cursor: pointer !important; flex-shrink: 0 !important; }
.inr-db-betrokkenen-bewerk svg { width: 15px !important; height: 15px !important; color: var(--inr-accent-2) !important; }
.inr-db-betrokkenen-bewerk:hover { background: #fff !important; }

/* Bewerkpaneel (zweeft onder de knop) */
.inr-db-betrokkenen-form { position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important; z-index: 2147483600 !important; width: 380px !important; max-width: 90vw !important; background: #fff !important; border: 1px solid rgba(15,23,42,.12) !important; border-radius: 14px !important; box-shadow: 0 12px 40px rgba(15,23,42,.18) !important; padding: 18px !important; }
/* De topbar maakt door zijn backdrop-filter een eigen stacking-context; de
   canvas en het zijpaneel doen dat ook en staan later in de DOM, waardoor ze
   over een absoluut paneel in de topbar heen schilderen. Zolang het paneel open
   is, tillen we de hele topbar boven die buren uit. */
.inr-db-topbar.inr-db-topbar-boven { z-index: 2147483500 !important; }
.inr-db-betrokkene-slot { display: flex !important; gap: 12px !important; padding: 12px 0 !important; border-bottom: 1px solid rgba(15,23,42,.07) !important; }
.inr-db-betrokkene-slot-foto { flex-shrink: 0 !important; }
.inr-db-betrokkene-slot-foto .inr-db-betrokkene-avatar { width: 48px !important; height: 48px !important; }
.inr-db-betrokkene-slot-velden { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.inr-db-betrokkene-slot-velden input[type="text"] { font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 300 !important; color: #0F172A !important; -webkit-text-fill-color: #0F172A !important; padding: 7px 10px !important; border: 1px solid rgba(15,23,42,.16) !important; border-radius: 8px !important; background: #fff !important; }
.inr-db-betrokkene-foto-acties { display: flex !important; gap: 8px !important; margin-top: 2px !important; }

@media (max-width: 768px) {
	.inr-db-betrokkene-tekst { display: none !important; }
	.inr-db-betrokkenen-rij { gap: 4px !important; }
	.inr-db-betrokkene-avatar { margin-left: -8px !important; }
}

/* ── Updates: schakelaar Actief / Archief ── */
.inr-db-updates-schakel { display: inline-flex !important; gap: 4px !important; background: rgba(15,23,42,.05) !important; border-radius: 10px !important; padding: 4px !important; margin: 6px 0 16px !important; }
.inr-db-schakel-knop { font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #64748B !important; background: transparent !important; border: 0 !important; border-radius: 8px !important; padding: 7px 16px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; transition: background .15s ease, color .15s ease !important; }
.inr-db-schakel-knop.actief { background: #fff !important; color: #0F172A !important; box-shadow: 0 1px 3px rgba(15,23,42,.10) !important; }
.inr-db-schakel-telling { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 18px !important; height: 18px !important; padding: 0 5px !important; border-radius: 9px !important; background: #FD7634 !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; }
.inr-db-archief-uitleg { margin-top: 0 !important; }

/* Exportknop rechts in de teamleden-balk */
.inr-db-export-knop { margin-left: auto !important; }

/* ── Changelog ── */
.inr-db-versie-knop { background: transparent !important; border: 0 !important; padding: 2px 0 !important; margin: 0 !important; cursor: pointer !important; font-family: 'Inter', sans-serif !important; font-size: inherit !important; color: inherit !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; }
.inr-db-versie-knop:hover .inr-db-versie-hint { color: var(--inr-accent-2) !important; }
.inr-db-versie-hint { font-size: 11px !important; font-weight: 600 !important; color: #94A3B8 !important; text-decoration: underline !important; text-underline-offset: 2px !important; }

.inr-db-changelog-overlay { position: fixed !important; inset: 0 !important; z-index: 2147483600 !important; display: none !important; align-items: center !important; justify-content: center !important; padding: 24px !important; font-family: 'Inter', sans-serif !important; }
.inr-db-changelog-overlay, .inr-db-changelog-overlay * { box-sizing: border-box !important; }
.inr-db-changelog-overlay.open { display: flex !important; }
.inr-db-changelog-backdrop { position: absolute !important; inset: 0 !important; background: rgba(15,23,42,.42) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; }
.inr-db-changelog-venster { position: relative !important; z-index: 1 !important; width: 520px !important; max-width: 100% !important; max-height: 80vh !important; display: flex !important; flex-direction: column !important; background: #fff !important; border-radius: 18px !important; box-shadow: 0 24px 70px rgba(15,23,42,.30) !important; overflow: hidden !important; }
.inr-db-changelog-venster-kop { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; padding: 22px 24px 16px !important; border-bottom: 1px solid rgba(15,23,42,.08) !important; }
.inr-db-changelog-eyebrow { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #94A3B8 !important; }
.inr-db-changelog-titel { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 20px !important; color: #0F172A !important; margin: 2px 0 0 !important; }
.inr-db-changelog-x { background: transparent !important; border: 0 !important; font-size: 26px !important; line-height: 1 !important; color: #94A3B8 !important; cursor: pointer !important; padding: 0 4px !important; }
.inr-db-changelog-x:hover { color: #0F172A !important; }
.inr-db-changelog-body { padding: 8px 24px 24px !important; overflow-y: auto !important; }
.inr-db-changelog-versie { padding: 16px 0 !important; border-bottom: 1px solid rgba(15,23,42,.06) !important; }
.inr-db-changelog-versie:last-child { border-bottom: 0 !important; }
.inr-db-changelog-kop { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 8px !important; }
.inr-db-changelog-nummer { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 15px !important; color: #0F172A !important; }
.inr-db-changelog-nieuw { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase !important; color: #fff !important; background: var(--inr-accent-2) !important; border-radius: 999px !important; padding: 3px 9px !important; }
.inr-db-changelog-datum { font-size: 12px !important; color: #94A3B8 !important; margin-left: auto !important; }
.inr-db-changelog-punten { margin: 0 !important; padding-left: 0 !important; list-style: none !important; }
.inr-db-changelog-punt { font-size: 14px !important; font-weight: 300 !important; color: #334155 !important; margin: 10px 0 !important; line-height: 1.5 !important; }
.inr-db-changelog-badge { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important; padding: 4px 9px 4px 7px !important; border-radius: 999px !important; margin-right: 8px !important; margin-bottom: 4px !important; color: var(--badge-kleur, #2875FB) !important; background: #F8FAFC !important; border: 1.5px solid var(--badge-kleur, #2875FB) !important; vertical-align: middle !important; white-space: nowrap !important; }
.inr-db-changelog-badge-icoon { display: inline-flex !important; align-items: center !important; color: var(--badge-kleur, #2875FB) !important; }
.inr-db-changelog-punt-tekst { vertical-align: middle !important; }
@media (max-width: 600px) {
	.inr-db-changelog-venster { max-height: 88vh !important; }
}

/* ── Klant-keuzeraster (beheerder) ── */
.inr-db-kiesscherm { position: relative !important; z-index: 1 !important; max-width: 1000px !important; margin: 0 auto !important; padding: 60px 24px !important; }
.inr-db-kiesscherm-kop { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 24px !important; margin-bottom: 36px !important; max-width: 1140px !important; margin-left: auto !important; margin-right: auto !important; text-align: left !important; }
.inr-db-kop-tekst { text-align: left !important; }
.inr-db-kop-rechts { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; flex-shrink: 0 !important; min-width: 200px !important; }
/* Binnen de kop-kolom nemen de pillen de volle kolombreedte en lijnen ze dus
   links én rechts gelijk uit. De weer- en wijzigingen-pil centreren hun inhoud. */
.inr-db-kop-rechts .inr-db-weer,
.inr-db-kop-rechts .inr-db-kies-changelog-knop { justify-content: center !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; }

/* 2x2 raster voor de kop-rechts: profiel + uitloggen boven, weer + versie onder. */
.inr-db-kop-rechts-raster { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; align-items: stretch !important; min-width: 340px !important; }
.inr-db-kop-rechts-raster > * { margin: 0 !important; width: 100% !important; box-sizing: border-box !important; }
.inr-db-kop-rechts-raster .inr-db-weer { opacity: 1 !important; transform: none !important; } /* in het raster meteen zichtbaar uitgelijnd */
/* Jouw profiel-knop: zelfde pil-vorm als de andere, met INR-accent bij hover. */
.inr-db-profiel-knop { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; padding: 8px 16px !important; border-radius: 999px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.07) !important; color: #475569 !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -14px rgba(15,23,42,.16) !important; transition: background .15s ease, color .15s ease, border-color .15s ease !important; }
.inr-db-profiel-knop:hover { background: rgba(116,72,253,.07) !important; border-color: rgba(116,72,253,.32) !important; color: #7448FD !important; }
.inr-db-profiel-knop svg { width: 16px !important; height: 16px !important; flex: 0 0 auto !important; }
/* Profiel-knop in de zijbalk-voet (deelnemer-scherm): INR-paars accent i.p.v.
   het rood van de uitlog-knop ernaast. */
.inr-db-profiel-knop-zij { cursor: pointer !important; }
.inr-db-profiel-knop-zij:hover { background: rgba(116,72,253,.10) !important; color: #7448FD !important; }
@media (max-width: 640px) { .inr-db-kop-rechts-raster { min-width: 0 !important; } }
/* Aanwezigheidsteller (superadmin): hoeveel gebruikers de laatste 15 min actief
   waren. Zelfde pil-vorm als de andere kop-knoppen, met een rustig pulserend
   stipje dat "live" aangeeft. */
.inr-db-aanwezig { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 8px 16px !important; border-radius: 999px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.07) !important; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -14px rgba(15,23,42,.16) !important; font-family: 'Inter', sans-serif !important; }
.inr-db-aanwezig-stip { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #5AC380 !important; flex: 0 0 auto !important; box-shadow: 0 0 0 0 rgba(90,195,128,.5) !important; animation: inr-aanwezig-puls 2s ease-out infinite !important; }
@keyframes inr-aanwezig-puls { 0% { box-shadow: 0 0 0 0 rgba(90,195,128,.5) !important; } 70% { box-shadow: 0 0 0 6px rgba(90,195,128,0) !important; } 100% { box-shadow: 0 0 0 0 rgba(90,195,128,0) !important; } }
.inr-db-aanwezig-aantal { font-size: 14px !important; font-weight: 700 !important; color: #0F172A !important; }
.inr-db-aanwezig-label { font-size: 13px !important; font-weight: 500 !important; color: #94A3B8 !important; }
.inr-db-kiesscherm-eyebrow { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #94A3B8 !important; }
.inr-db-kiesscherm-titel { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 38px !important; color: #0F172A !important; margin: 8px 0 10px !important; letter-spacing: -.025em !important; text-align: left !important; }
.inr-db-kiesscherm-lead { font-size: 15px !important; font-weight: 300 !important; color: #64748B !important; max-width: 540px !important; margin: 0 !important; text-align: left !important; }
/* Weer-element: laadt apart, verschijnt zacht, valt stil weg bij een fout */
.inr-db-weer { display: inline-flex !important; align-items: center !important; gap: 9px !important; box-sizing: border-box !important; padding: 8px 14px !important; border-radius: 999px !important; border: 1px solid rgba(15,23,42,.07) !important; background: #fff !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #0F172A !important; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -14px rgba(15,23,42,.16) !important; opacity: 0 !important; transform: translateY(-4px) !important; transition: opacity .6s ease, transform .6s cubic-bezier(.34,1.56,.64,1) !important; }
.inr-db-weer.inr-in { opacity: 1 !important; transform: translateY(0) !important; }
.inr-db-weer-icoon { display: inline-flex !important; }
.inr-db-weer-icoon svg { width: 20px !important; height: 20px !important; display: block !important; }
.inr-db-weer-temp { font-variant-numeric: tabular-nums !important; color: #0F172A !important; }
.inr-db-weer-plek { color: #94A3B8 !important; font-weight: 500 !important; }
@media (max-width: 700px) {
  .inr-db-kiesscherm-kop { flex-direction: column !important; }
  .inr-db-kop-rechts { flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; width: 100% !important; min-width: 0 !important; }
  .inr-db-kiesscherm-titel { font-size: 30px !important; }
}
.inr-db-klant-raster { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 18px !important; }
.inr-db-klant-kaart { position: relative !important; background: #fff !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 16px !important; padding: 24px 18px 16px !important; box-shadow: 0 2px 12px rgba(15,23,42,.05) !important; transition: transform .15s ease, box-shadow .15s ease !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; }
.inr-db-klant-kaart:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 28px rgba(15,23,42,.12) !important; }
.inr-db-klant-kaart-link { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important; text-decoration: none !important; }
.inr-db-klant-logo { width: 84px !important; height: 84px !important; border-radius: 18px !important; overflow: hidden !important; background: #F1F5F9 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.inr-db-klant-logo img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.inr-db-klant-logo-letter { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 34px !important; color: var(--inr-accent-2) !important; }
.inr-db-klant-naam { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 16px !important; color: #0F172A !important; text-align: center !important; min-height: 2.6em !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.inr-db-klant-logo-potlood { position: absolute !important; top: 12px !important; right: 12px !important; width: 30px !important; height: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; background: rgba(255,255,255,.9) !important; border: 1px solid rgba(15,23,42,.10) !important; cursor: pointer !important; opacity: 0 !important; transition: opacity .15s ease, background .15s ease !important; }
.inr-db-klant-kaart:hover .inr-db-klant-logo-potlood { opacity: 1 !important; }
.inr-db-klant-logo-potlood:hover { background: #fff !important; border-color: rgba(116,72,253,.4) !important; }
.inr-db-klant-logo-potlood svg { width: 15px !important; height: 15px !important; color: var(--inr-accent-2) !important; }
.inr-db-klant-logo-form { margin-top: 12px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.inr-db-klant-logo-form input[type="text"] { font-family: 'Inter', sans-serif !important; font-size: 13px !important; color: #0F172A !important; -webkit-text-fill-color: #0F172A !important; padding: 7px 10px !important; border: 1px solid rgba(15,23,42,.16) !important; border-radius: 8px !important; background: #fff !important; }
.inr-db-klant-logo-acties, .inr-db-klant-logo-form-knoppen { display: flex !important; gap: 8px !important; }

/* Klantlogo linksboven als merk-mark */
.inr-db-brand-mark-logo { overflow: hidden !important; background: #fff !important; padding: 0 !important; }
.inr-db-brand-mark-logo img { width: 100% !important; height: 100% !important; object-fit: contain !important; }

/* Op touch/mobiel het logo-potlood altijd tonen (geen hover). */
@media (max-width: 768px) {
	.inr-db-klant-logo-potlood { opacity: 1 !important; }
}

/* ── Teamlid-beheer (Overzicht) ── */
.inr-db-th-beheer { margin: 4px 0 18px !important; }
.inr-db-th-form { margin-top: 14px !important; padding: 18px !important; background: rgba(116,72,253,.04) !important; border: 1px solid rgba(116,72,253,.16) !important; border-radius: 14px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.inr-db-th-form-titel { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 15px !important; color: #0F172A !important; }
.inr-db-th-form-rij { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; }
.inr-db-th-form-rij .inr-db-plan-veld { flex: 1 1 160px !important; }
.inr-db-th-form-hint { margin: 2px 0 0 !important; font-size: 12px !important; color: #94A3B8 !important; }

/* ── Nieuwe-klant-kaart in het keuzeraster ── */
.inr-db-kiesscherm-leeg { text-align: center !important; color: #64748B !important; font-weight: 300 !important; margin: 0 0 24px !important; }
.inr-db-klant-kaart-nieuw { display: flex !important; align-items: stretch !important; justify-content: center !important; border-style: dashed !important; border-color: rgba(116,72,253,.35) !important; background: rgba(116,72,253,.03) !important; }
.inr-db-klant-nieuw-knop { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; min-height: 150px !important; background: transparent !important; border: 0 !important; cursor: pointer !important; color: var(--inr-accent-2) !important; }
.inr-db-klant-kaart-nieuw.is-open .inr-db-klant-nieuw-knop { display: none !important; }
.inr-db-klant-nieuw-form { display: none !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; padding: 4px !important; }
.inr-db-klant-kaart-nieuw.is-open .inr-db-klant-nieuw-form { display: flex !important; }
.inr-db-klant-nieuw-plus { font-size: 38px !important; font-weight: 300 !important; line-height: 1 !important; width: 64px !important; height: 64px !important; border-radius: 16px !important; background: rgba(116,72,253,.10) !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.inr-db-klant-nieuw-tekst { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 15px !important; }
.inr-db-klant-nieuw-veldrij { display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; }
.inr-db-klant-nieuw-veldrij input[type="text"] { flex: 1 1 auto !important; min-width: 0 !important; }
.inr-db-klant-nieuw-veldrij .inr-db-waarschuwing { flex: 0 0 auto !important; }
.inr-db-waarschuwing { position: relative !important; flex: 0 0 auto !important; width: 34px !important; height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 9px !important; background: rgba(253,205,79,.18) !important; border: 1px solid rgba(253,205,79,.55) !important; cursor: pointer !important; color: #B7791F !important; }
.inr-db-waarschuwing:hover { background: rgba(253,205,79,.30) !important; }
.inr-db-waarschuwing svg { width: 17px !important; height: 17px !important; }
.inr-db-waarschuwing-popup { position: absolute !important; bottom: calc(100% + 10px) !important; right: -6px !important; width: 250px !important; background: #1E293B !important; color: #fff !important; font-family: 'Inter', sans-serif !important; font-size: 12.5px !important; font-weight: 300 !important; line-height: 1.5 !important; text-align: left !important; padding: 12px 13px !important; border-radius: 10px !important; box-shadow: 0 12px 32px rgba(15,23,42,.28) !important; z-index: 30 !important; }
.inr-db-waarschuwing-popup::after { content: '' !important; position: absolute !important; top: 100% !important; right: 14px !important; border: 7px solid transparent !important; border-top-color: #1E293B !important; }
.inr-db-klant-nieuw-form input[type="text"] { font-family: 'Inter', sans-serif !important; font-size: 14px !important; color: #0F172A !important; -webkit-text-fill-color: #0F172A !important; padding: 9px 11px !important; border: 1px solid rgba(15,23,42,.16) !important; border-radius: 9px !important; background: #fff !important; }

/* ── Planning: altijd-zichtbare kerngegevens in het detail ── */
.inr-db-detail-gegevens { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 12px 18px !important; padding: 14px 16px !important; margin-bottom: 14px !important; background: rgba(15,23,42,.025) !important; border: 1px solid rgba(15,23,42,.07) !important; border-radius: 12px !important; }
.inr-db-detail-veld { display: flex !important; flex-direction: column !important; gap: 3px !important; }
.inr-db-detail-label { font-size: 10px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #94A3B8 !important; }
.inr-db-detail-waarde { font-size: 14px !important; font-weight: 400 !important; color: #0F172A !important; }
.inr-db-detail-leeg { color: #CBD5E1 !important; font-style: italic !important; font-weight: 300 !important; }

/* Trainer/coach subtiel in de hoofdregel */
.inr-db-kaart-trainer { display: inline-flex !important; align-items: center !important; gap: 5px !important; margin-top: 4px !important; font-size: 12px !important; font-weight: 500 !important; color: var(--inr-accent-2) !important; }
.inr-db-kaart-trainer::before { content: '' !important; display: inline-block !important; width: 13px !important; height: 13px !important; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B30D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>") !important; background-size: contain !important; background-repeat: no-repeat !important; }

/* ── Refresh-knop in de topbar ── */
.inr-db-refresh-knop { width: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; background: rgba(15,23,42,.04) !important; border: 1px solid rgba(15,23,42,.10) !important; cursor: pointer !important; color: #475569 !important; flex: 0 0 auto !important; transition: background .15s ease, color .15s ease !important; }
.inr-db-refresh-knop:hover { background: rgba(91,48,214,.10) !important; color: var(--inr-accent-2) !important; }
.inr-db-refresh-knop svg { width: 17px !important; height: 17px !important; }
.inr-db-refresh-knop.draait svg { animation: inr-db-draai .6s linear !important; }
@keyframes inr-db-draai { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* "Nu actief"-blok klikbaar maken (springt naar de planning) */
.inr-db-fase-knop { width: 100% !important; text-align: left !important; font-family: 'Inter', sans-serif !important; cursor: pointer !important; transition: background .15s ease, border-color .15s ease, transform .1s ease !important; }
.inr-db-fase-knop:hover { background: rgba(0,123,255,.10) !important; border-color: rgba(0,123,255,.32) !important; }
.inr-db-fase-knop:active { transform: scale(.99) !important; }
.inr-db-fase-spring { margin-top: 6px !important; font-size: 11px !important; font-weight: 600 !important; color: var(--inr-accent) !important; opacity: 0 !important; transition: opacity .15s ease !important; }
.inr-db-fase-knop:hover .inr-db-fase-spring { opacity: 1 !important; }
@media (max-width: 768px) { .inr-db-fase-spring { opacity: 1 !important; } }

/* ── Huisstijl-kiezer (beheerder) ── */
.inr-db-huisstijl { position: relative !important; flex: 0 0 auto !important; }
.inr-db-huisstijl-knop svg { width: 17px !important; height: 17px !important; }
.inr-db-huisstijl-paneel { position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important; width: 290px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 14px !important; box-shadow: 0 18px 50px rgba(15,23,42,.22) !important; padding: 18px !important; z-index: 60 !important; }
.inr-db-huisstijl-titel { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 15px !important; color: #0F172A !important; margin-bottom: 4px !important; }
.inr-db-huisstijl-uitleg { font-size: 12px !important; font-weight: 300 !important; line-height: 1.5 !important; color: #64748B !important; margin: 0 0 14px !important; }
.inr-db-huisstijl-rij { margin-bottom: 12px !important; }
.inr-db-huisstijl-rij label { display: block !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: #475569 !important; margin-bottom: 6px !important; }
.inr-db-huisstijl-veld { display: flex !important; align-items: center !important; gap: 8px !important; }
.inr-db-huisstijl-veld input[type="color"] { width: 38px !important; height: 38px !important; padding: 0 !important; border: 1px solid rgba(15,23,42,.16) !important; border-radius: 9px !important; background: #fff !important; cursor: pointer !important; flex: 0 0 auto !important; }
.inr-db-huisstijl-veld input[type="text"] { flex: 1 1 auto !important; min-width: 0 !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; color: #0F172A !important; -webkit-text-fill-color: #0F172A !important; padding: 9px 11px !important; border: 1px solid rgba(15,23,42,.16) !important; border-radius: 9px !important; background: #fff !important; text-transform: uppercase !important; }
.inr-db-huisstijl-knoppen { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 14px !important; }

/* ── "Loopt uit"-signaal (datum verstreken, nog niet afgerond) ── */
.inr-db-loopt-uit { display: inline-flex !important; align-items: center !important; gap: 5px !important; margin-top: 6px !important; font-size: 11px !important; font-weight: 600 !important; color: #B7791F !important; background: rgba(253,205,79,.18) !important; border: 1px solid rgba(253,205,79,.55) !important; border-radius: 999px !important; padding: 3px 9px !important; }
.inr-db-loopt-uit svg { width: 13px !important; height: 13px !important; }
.inr-db-loopt-uit-blok { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 12px 14px !important; margin-bottom: 14px !important; background: rgba(253,205,79,.12) !important; border: 1px solid rgba(253,205,79,.5) !important; border-radius: 12px !important; }
.inr-db-loopt-uit-tekst { font-size: 13px !important; font-weight: 300 !important; color: #0F172A !important; line-height: 1.5 !important; flex: 1 1 220px !important; }
.inr-db-loopt-uit-tekst strong { font-weight: 600 !important; color: #B7791F !important; }
.inr-db-loopt-uit-hint { font-size: 12px !important; font-weight: 500 !important; color: #B7791F !important; }

/* ── Trainers toewijzen (superadmin, in het keuzeraster) ── */
.inr-db-klant-trainers-knop { position: absolute !important; top: 12px !important; right: 48px !important; width: 30px !important; height: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; background: rgba(255,255,255,.9) !important; border: 1px solid rgba(15,23,42,.10) !important; cursor: pointer !important; opacity: 0 !important; transition: opacity .15s ease, background .15s ease !important; color: #475569 !important; }
.inr-db-klant-kaart:hover .inr-db-klant-trainers-knop { opacity: 1 !important; }
.inr-db-klant-trainers-knop:hover { background: var(--inr-accent-2) !important; color: #fff !important; }
.inr-db-klant-trainers-knop svg { width: 15px !important; height: 15px !important; }
.inr-db-klant-trainers-form { margin-top: 12px !important; padding: 14px !important; background: rgba(15,23,42,.02) !important; border: 1px solid rgba(15,23,42,.08) !important; border-radius: 12px !important; text-align: left !important; }
.inr-db-trainers-titel { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 13px !important; color: #0F172A !important; margin-bottom: 10px !important; }
.inr-db-trainers-leeg { font-size: 12px !important; font-weight: 300 !important; color: #64748B !important; line-height: 1.5 !important; margin-bottom: 10px !important; }
.inr-db-trainer-optie { display: flex !important; align-items: center !important; gap: 9px !important; padding: 6px 0 !important; font-size: 13px !important; font-weight: 400 !important; color: #334155 !important; cursor: pointer !important; }
.inr-db-trainer-optie input[type="checkbox"] { width: 16px !important; height: 16px !important; flex: 0 0 auto !important; accent-color: var(--inr-accent-2) !important; cursor: pointer !important; }

/* ── Klantkaart toont de eigen huisstijlkleur (keuzeraster) ── */
.inr-db-klant-kaart-kleur { border-top: 3px solid var(--inr-accent) !important; }
.inr-db-klant-kaart-kleur .inr-db-klant-logo { background: #F1F5F9 !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {
	.inr-db-klant-kaart-kleur .inr-db-klant-logo {
		background: color-mix(in srgb, var(--inr-accent) 10%, #F1F5F9) !important;
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inr-accent) 22%, transparent) !important;
	}
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.inr-db-klant-kaart-kleur .inr-db-klant-logo-letter {
		background: linear-gradient(135deg, var(--inr-accent), var(--inr-accent-2)) !important;
		-webkit-background-clip: text !important; background-clip: text !important;
		-webkit-text-fill-color: transparent !important;
	}
}
/* Hover-accent in de klantkleur */
.inr-db-klant-kaart-kleur:hover { box-shadow: 0 10px 28px rgba(15,23,42,.14) !important; }

/* ── Ingebouwd login-scherm (op de dashboardpagina) ── */
.inr-db-login-root { display: flex !important; flex-direction: column !important; min-height: 100vh !important; min-height: 100dvh !important; justify-content: center !important; position: relative !important; }
/* Het inlogscherm heeft een eigen donkere sfeerachtergrond (los van het lichte
   dashboard). Deze vult de volledige hoogte én breedte van het venster. */
.inr-db-login-root .inr-db-bg {
	position: absolute !important; inset: 0 !important; border-radius: 0 !important;
	background:
		radial-gradient(1100px 700px at 80% 12%, rgba(0,123,255,.26), transparent 60%),
		radial-gradient(1000px 800px at 6% 92%, rgba(46,86,170,.30), transparent 62%),
		linear-gradient(165deg, #0b1020 0%, #101a33 48%, #0c1326 100%) !important;
}
.inr-db-login { position: relative !important; z-index: 1 !important; min-height: 78vh !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 48px 20px !important; }
.inr-db-login-kaart {
	position: relative !important;
	width: 100% !important; max-width: 408px !important;
	background: linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,.06)) !important;
	backdrop-filter: blur(36px) saturate(150%) !important; -webkit-backdrop-filter: blur(36px) saturate(150%) !important;
	border: 1px solid rgba(255,255,255,.22) !important;
	border-radius: 26px !important;
	padding: 44px 40px 40px !important;
	text-align: center !important;
	overflow: hidden !important;
	box-shadow:
		0 1px 0 rgba(255,255,255,.3) inset,
		0 30px 70px -18px rgba(5,8,20,.55),
		0 12px 28px -12px rgba(5,8,20,.4) !important;
}
/* Zachte kleurige glow achter de inhoud, voor diepte. */
.inr-db-login-glow {
	position: absolute !important; top: -40% !important; left: 50% !important;
	width: 320px !important; height: 320px !important; transform: translateX(-50%) !important;
	background: radial-gradient(circle, color-mix(in srgb, var(--inr-accent) 45%, transparent), transparent 70%) !important;
	filter: blur(30px) !important; opacity: .5 !important; pointer-events: none !important; z-index: 0 !important;
}
@supports not (background: color-mix(in srgb, red 45%, white)) {
	.inr-db-login-glow { background: radial-gradient(circle, rgba(0,123,255,.35), transparent 70%) !important; }
}
.inr-db-login-kaart > *:not(.inr-db-login-glow) { position: relative !important; z-index: 1 !important; }

.inr-db-login-merk { display: flex !important; justify-content: center !important; margin: 0 0 22px !important; }
.inr-db-login-logo { max-width: 132px !important; max-height: 64px !important; width: auto !important; height: auto !important; object-fit: contain !important; background: #fff !important; padding: 14px 18px !important; border-radius: 18px !important; box-shadow: 0 8px 22px -6px rgba(5,8,20,.45), 0 1px 0 rgba(255,255,255,.6) inset !important; }
.inr-db-login-merk .inr-db-brand-mark { width: 56px !important; height: 56px !important; border-radius: 16px !important; }

.inr-db-login-titel { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 27px !important; color: #fff !important; margin: 0 0 6px !important; letter-spacing: -.02em !important; line-height: 1.15 !important; }
.inr-db-login-lead { font-size: 14px !important; font-weight: 300 !important; color: rgba(255,255,255,.7) !important; line-height: 1.5 !important; margin: 0 0 26px !important; }
.inr-db-login-fout { background: rgba(253,76,92,.10) !important; border: 1px solid rgba(253,76,92,.4) !important; color: #C0392B !important; font-size: 13px !important; font-weight: 400 !important; border-radius: 12px !important; padding: 11px 14px !important; margin: 0 0 18px !important; text-align: left !important; }
.inr-db-login-info { background: rgba(90,195,128,.12) !important; border: 1px solid rgba(90,195,128,.5) !important; color: #2E7D4F !important; font-size: 13px !important; font-weight: 400 !important; border-radius: 12px !important; padding: 11px 14px !important; margin: 0 0 18px !important; text-align: left !important; line-height: 1.5 !important; }
.inr-db-login-onder { margin-top: 18px !important; text-align: center !important; }
.inr-db-login-onder .inr-db-login-vergeten { font-size: 13px !important; }

.inr-db-login-form { text-align: left !important; margin: 0 !important; }
.inr-db-login-veld { display: block !important; margin: 0 0 16px !important; padding: 0 !important; }
.inr-db-login-veld > span { display: block !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .05em !important; text-transform: uppercase !important; color: rgba(255,255,255,.62) !important; margin: 0 0 7px !important; padding: 0 !important; line-height: 1.2 !important; }
.inr-db-login-veld input { width: 100% !important; box-sizing: border-box !important; font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 400 !important; color: #0F172A !important; -webkit-text-fill-color: #0F172A !important; margin: 0 !important; padding: 13px 15px !important; border: 1px solid rgba(255,255,255,.28) !important; border-radius: 12px !important; background: rgba(255,255,255,.92) !important; box-shadow: 0 1px 2px rgba(5,8,20,.12) inset !important; transition: border-color .15s ease, box-shadow .15s ease !important; }
.inr-db-login-veld input:focus { outline: none !important; border-color: var(--inr-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--inr-accent) 30%, transparent), 0 1px 2px rgba(5,8,20,.12) inset !important; }
@supports not (background: color-mix(in srgb, red 30%, white)) {
	.inr-db-login-veld input:focus { box-shadow: 0 0 0 3px rgba(0,123,255,.3), 0 1px 2px rgba(5,8,20,.12) inset !important; }
}
.inr-db-login-rij { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 2px 0 22px !important; }
.inr-db-login-onthoud { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; font-weight: 400 !important; color: rgba(255,255,255,.78) !important; cursor: pointer !important; margin: 0 !important; }
.inr-db-login-onthoud input { width: 16px !important; height: 16px !important; margin: 0 !important; accent-color: var(--inr-accent) !important; cursor: pointer !important; }
.inr-db-login-vergeten { font-size: 13px !important; font-weight: 500 !important; color: #8fbaff !important; text-decoration: none !important; }
.inr-db-login-vergeten:hover { text-decoration: underline !important; }
.inr-db-login-knop {
	width: 100% !important; text-align: center !important; border: none !important; cursor: pointer !important;
	font-size: 15px !important; font-weight: 600 !important; padding: 14px 22px !important; border-radius: 13px !important;
	background: linear-gradient(135deg, var(--inr-accent), var(--inr-accent-2)) !important; color: #fff !important;
	box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--inr-accent) 55%, transparent), 0 2px 6px rgba(15,23,42,.12) !important;
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
@supports not (background: color-mix(in srgb, red 55%, white)) {
	.inr-db-login-knop { box-shadow: 0 10px 24px -6px rgba(0,123,255,.5), 0 2px 6px rgba(15,23,42,.12) !important; }
}
.inr-db-login-knop:hover { transform: translateY(-1px) !important; filter: brightness(1.04) !important; }
.inr-db-login-knop:active { transform: translateY(0) !important; }

/* Derde achtergrond-blob voor diepte op het loginscherm. */
.inr-db-login-root .inr-db-blob { opacity: .5 !important; filter: blur(80px) !important; }
.inr-db-login-root .inr-db-blob.b1 { width: 520px !important; height: 520px !important; top: -160px !important; right: 6% !important; background: radial-gradient(circle, rgba(0,123,255,.5), transparent 70%) !important; }
.inr-db-login-root .inr-db-blob.b2 { width: 480px !important; height: 480px !important; bottom: 4% !important; left: 8% !important; background: radial-gradient(circle, rgba(62,107,255,.4), transparent 70%) !important; }
.inr-db-login-root .inr-db-login { min-height: 100vh !important; min-height: 100dvh !important; }

@media (max-width: 480px) {
	.inr-db-login-kaart { padding: 34px 24px 30px !important; border-radius: 22px !important; }
	.inr-db-login-titel { font-size: 24px !important; }
}

/* ── Uitlog-knop (in de zijbalk en in het keuzeraster) ── */
.inr-db-sidebar-foot { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.inr-db-uitlog-knop { display: inline-flex !important; align-items: center !important; gap: 9px !important; padding: 10px 12px !important; border-radius: 10px !important; background: rgba(15,23,42,.04) !important; border: 1px solid rgba(15,23,42,.08) !important; color: #475569 !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; cursor: pointer !important; transition: background .15s ease, color .15s ease, border-color .15s ease !important; }
.inr-db-uitlog-knop:hover { background: rgba(253,76,92,.10) !important; border-color: rgba(253,76,92,.35) !important; color: #C0392B !important; }
.inr-db-uitlog-knop svg { width: 16px !important; height: 16px !important; flex: 0 0 auto !important; }
.inr-db-sidebar-versie { font-size: 11px !important; color: #94A3B8 !important; font-weight: 300 !important; line-height: 1.5 !important; }

/* ── Taalschakelaar (NL / EN) ──
   Volgt exact de pill-stijl van .inr-db-profiel-knop ernaast: wit, volledig rond,
   dezelfde zachte schaduw en dezelfde randkleur. De twee helften zitten erin als een
   segmented control.

   Bewust letters en geen vlag: een vlag is een land en geen taal, en sluit dus altijd
   iemand uit (de Britse vlag de Amerikanen, de Nederlandse de Vlamingen). */
.inr-db-taal {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 4px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.07) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -14px rgba(15,23,42,.16) !important;
  box-sizing: border-box !important;
}
.inr-db-taal-knop {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 5px 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #94A3B8 !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
  transition: background .18s ease, color .18s ease !important;
}
.inr-db-taal-knop:hover { color: #475569 !important; }
/* De actieve helft moet je in één oogopslag zien. Een te zachte tint (zoals eerst)
   is niet te onderscheiden; een hard wit blok in een grijze balk ziet er dan weer uit
   als een weergavefout. Donker op wit is duidelijk en past bij de rest. */
.inr-db-taal-knop.is-actief {
  background: #0F172A !important;
  color: #fff !important;
}
.inr-db-taal-knop.is-bezig { opacity: .5 !important; cursor: default !important; }

/* Variant in de kop. Het raster eromheen zet elk kind op width:100%, dus de pill
   vult de cel; we centreren de inhoud zodat hij niet uitgerekt oogt. */
.inr-db-taal-kop { width: 100% !important; }

/* Variant in de klantkiezer. LET OP: die pills zitten in .inr-db-kiesscherm-hoek, en
   die container doet de positionering al (de losse pills gaan daarbinnen zelfs
   expliciet op static). Onze schakelaar loopt dus gewoon mee in die rij; zou hij zelf
   absoluut gaan staan, dan schuift hij over de knoppen ernaast heen. */
.inr-db-taal-kies {
  background: rgba(255,255,255,.7) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Variant in de zijbalk: daar staan de knoppen onder elkaar. */
.inr-db-taal-zij { display: flex !important; width: 100% !important; }
.inr-db-taal-zij .inr-db-taal-knop { flex: 1 1 0 !important; text-align: center !important; }
/* Variant rechtsboven in het keuzeraster */
.inr-db-uitlog-kies { position: absolute !important; top: 24px !important; right: 24px !important; background: rgba(255,255,255,.7) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; z-index: 5 !important; }
/* Twee knoppen (Jouw profiel + Uitloggen) samen in de hoek van het kiesscherm. */
.inr-db-kiesscherm-hoek { position: absolute !important; top: 24px !important; right: 24px !important; z-index: 5 !important; display: flex !important; gap: 10px !important; }
.inr-db-kiesscherm-hoek .inr-db-uitlog-kies { position: static !important; top: auto !important; right: auto !important; }
.inr-db-profiel-knop-kies { cursor: pointer !important; }
.inr-db-profiel-knop-kies:hover { background: rgba(116,72,253,.10) !important; border-color: rgba(116,72,253,.3) !important; color: #7448FD !important; }
/* Uitloggen in de rechter-kop-kolom: zelfde witte pil-stijl als de weer- en
   wijzigingen-pil, zodat de drie samen één nette set vormen. */
.inr-db-uitlog-kop { align-self: stretch !important; justify-content: center !important; padding: 8px 16px !important; border-radius: 999px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.07) !important; color: #475569 !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -14px rgba(15,23,42,.16) !important; }
.inr-db-uitlog-kop:hover { background: rgba(253,76,92,.06) !important; border-color: rgba(253,76,92,.30) !important; color: #C0392B !important; }
@media (max-width: 600px) {
	.inr-db-uitlog-kies { position: static !important; display: inline-flex !important; margin-bottom: 18px !important; }
	.inr-db-kiesscherm-hoek { position: static !important; top: auto !important; right: auto !important; margin-bottom: 18px !important; }
}

/* ── Tweekoloms inlogscherm: sfeertekst links, kaart rechts ── */
.inr-db-login-split .inr-db-login { max-width: 1060px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: 1.05fr .95fr !important; gap: 56px !important; align-items: center !important; }
.inr-db-login-sfeer { color: #fff !important; max-width: 460px !important; }
.inr-db-login-sfeer-eyebrow { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: rgba(255,255,255,.6) !important; margin: 0 0 16px !important; }
.inr-db-login-sfeer-kop { font-family: 'Inter', sans-serif !important; font-size: 40px !important; line-height: 1.12 !important; font-weight: 600 !important; letter-spacing: -.02em !important; color: #fff !important; margin: 0 0 16px !important; }
.inr-db-login-sfeer-sub { font-size: 17px !important; line-height: 1.6 !important; font-weight: 300 !important; color: rgba(255,255,255,.72) !important; margin: 0 0 30px !important; }
.inr-db-login-punten { display: flex !important; flex-direction: column !important; gap: 13px !important; }
.inr-db-login-punt { display: flex !important; align-items: center !important; gap: 13px !important; font-size: 15px !important; font-weight: 300 !important; color: rgba(255,255,255,.86) !important; }
.inr-db-login-punt-vink { width: 28px !important; height: 28px !important; border-radius: 9px !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, var(--inr-accent), var(--inr-accent-2)) !important; box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--inr-accent) 55%, transparent) !important; }
@supports not (background: color-mix(in srgb, red 55%, white)) {
	.inr-db-login-punt-vink { box-shadow: 0 6px 16px -4px rgba(0,123,255,.55) !important; }
}
.inr-db-login-punt-vink svg { width: 15px !important; height: 15px !important; }
/* Op het tweekoloms-scherm staat de kaart niet langer gecentreerd maar in de rechterkolom. */
.inr-db-login-split .inr-db-login-kaart { margin: 0 !important; }

@media (max-width: 900px) {
	.inr-db-login-split .inr-db-login { grid-template-columns: 1fr !important; gap: 36px !important; max-width: 420px !important; }
	.inr-db-login-sfeer { text-align: center !important; margin: 0 auto !important; }
	.inr-db-login-sfeer-kop { font-size: 32px !important; }
	.inr-db-login-punten { align-items: flex-start !important; max-width: 320px !important; margin: 0 auto !important; text-align: left !important; }
}

/* ── Mail-klant formulier in de planning-kaart ── */
.inr-db-mail-uitleg { font-size: 13px !important; font-weight: 300 !important; color: #64748B !important; line-height: 1.5 !important; margin-bottom: 10px !important; }
.inr-db-mail-iedereen { font-weight: 500 !important; }
.inr-db-mail-ontvangers { margin: 8px 0 4px 0 !important; padding-left: 6px !important; border-left: 2px solid rgba(0,123,255,.18) !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
.inr-db-mail-email { color: #94A3B8 !important; font-size: 12px !important; font-weight: 300 !important; }

/* ── Startdatum bewerken in het tijdlijnblok (beheerder/trainer) ── */
.inr-db-start-potlood { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; margin-left: 6px !important; padding: 0 !important; border: none !important; background: transparent !important; color: var(--inr-accent) !important; cursor: pointer !important; vertical-align: middle !important; border-radius: 6px !important; }
.inr-db-start-potlood:hover { background: rgba(0,123,255,.10) !important; }
.inr-db-start-potlood svg { width: 14px !important; height: 14px !important; }
.inr-db-start-form { display: flex !important; gap: 8px !important; align-items: center !important; margin: 8px 0 12px !important; flex-wrap: wrap !important; }
.inr-db-start-form input[type="date"] { font-family: 'Inter', sans-serif !important; font-size: 14px !important; padding: 8px 10px !important; border: 1px solid rgba(15,23,42,.16) !important; border-radius: 9px !important; color: #0F172A !important; background: #fff !important; }
.inr-db-tijd-leeg { font-size: 13px !important; font-weight: 300 !important; color: #94A3B8 !important; margin: 6px 0 12px !important; }
.inr-db-start-melding { font-size: 13px !important; color: #C0392B !important; margin-top: 8px !important; }

/* ── Groepen-blok (cohorten met eigen looptijd) ── */
.inr-db-groep-lijst { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 14px !important; margin-top: 14px !important; }
.inr-db-groep-kaart { border: 1px solid rgba(15,23,42,.10) !important; border-radius: 14px !important; padding: 16px 18px !important; background: #fff !important; }
.inr-db-groep-kop { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 10px !important; margin-bottom: 8px !important; }
.inr-db-groep-naam { font-weight: 600 !important; font-size: 16px !important; color: #0F172A !important; }
.inr-db-groep-telling { font-size: 12px !important; font-weight: 500 !important; color: var(--inr-accent) !important; background: rgba(0,123,255,.08) !important; padding: 3px 9px !important; border-radius: 999px !important; white-space: nowrap !important; }
.inr-db-groep-looptijd { display: flex !important; flex-direction: column !important; gap: 3px !important; font-size: 13px !important; font-weight: 300 !important; color: #64748B !important; }
.inr-db-groep-looptijd strong { font-weight: 500 !important; color: #334155 !important; }
.inr-db-groep-acties { display: flex !important; gap: 8px !important; margin-top: 12px !important; }
.inr-db-groep-form { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid rgba(15,23,42,.08) !important; }
.inr-db-groep-form label { display: flex !important; flex-direction: column !important; gap: 5px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .03em !important; text-transform: uppercase !important; color: #64748B !important; }
.inr-db-groep-form input { font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; padding: 9px 11px !important; border: 1px solid rgba(15,23,42,.16) !important; border-radius: 9px !important; color: #0F172A !important; background: #fff !important; }
.inr-db-groep-nieuw { margin-top: 16px !important; }
.inr-db-groep-nieuw .inr-db-groep-form { max-width: 360px !important; }
.inr-db-groep-melding { margin-top: 12px !important; font-size: 13px !important; }
.inr-db-groep-melding-fout { color: #C0392B !important; }

/* ── Verdeel-weergave (deelnemers over groepen, bij 2+ groepen) ── */
.inr-db-verdeel { margin-top: 22px !important; padding-top: 20px !important; border-top: 1px solid rgba(15,23,42,.08) !important; }
.inr-db-verdeel-kop { margin-bottom: 14px !important; }
.inr-db-verdeel-titel { font-size: 17px !important; font-weight: 600 !important; color: #0F172A !important; margin: 0 0 4px !important; }
.inr-db-verdeel-uitleg { font-size: 13px !important; font-weight: 300 !important; color: #64748B !important; margin: 0 !important; line-height: 1.5 !important; }
.inr-db-verdeel-bulk { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; background: rgba(0,123,255,.06) !important; border: 1px solid rgba(0,123,255,.18) !important; border-radius: 12px !important; padding: 12px 16px !important; margin-bottom: 16px !important; font-size: 14px !important; color: #334155 !important; }
.inr-db-verdeel-bulk label { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #334155 !important; text-transform: none !important; letter-spacing: normal !important; margin: 0 !important; }
.inr-db-verdeel-bulk select { font-family: 'Inter', sans-serif !important; font-size: 14px !important; padding: 6px 9px !important; border: 1px solid rgba(15,23,42,.16) !important; border-radius: 8px !important; background: #fff !important; }
.inr-db-verdeel-kolommen { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 16px !important; }
.inr-db-verdeel-kolom, .inr-db-verdeel-zonder { border: 1px solid rgba(15,23,42,.10) !important; border-radius: 14px !important; background: #fbfcfe !important; padding: 14px !important; transition: border-color .15s, background .15s !important; }
.inr-db-verdeel-zonder { margin-top: 16px !important; background: #fffdf7 !important; border-color: #f0ead6 !important; }
.inr-db-verdeel-kolom-over { border-color: var(--inr-accent) !important; background: rgba(0,123,255,.05) !important; }
.inr-db-verdeel-kolom-kop { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 12px !important; padding-bottom: 10px !important; border-bottom: 1px solid rgba(15,23,42,.08) !important; }
.inr-db-verdeel-kolom-naam { font-weight: 600 !important; font-size: 15px !important; color: #0F172A !important; }
.inr-db-verdeel-kolom-telling { font-size: 12px !important; font-weight: 600 !important; color: #fff !important; background: var(--inr-accent) !important; min-width: 22px !important; text-align: center !important; padding: 2px 8px !important; border-radius: 999px !important; }
.inr-db-verdeel-droplijst { display: flex !important; flex-direction: column !important; gap: 8px !important; min-height: 40px !important; }
.inr-db-verdeel-item { display: flex !important; align-items: center !important; gap: 10px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 10px !important; padding: 9px 11px !important; cursor: grab !important; }
.inr-db-verdeel-item-sleept { opacity: .5 !important; }
.inr-db-verdeel-check { display: flex !important; align-items: center !important; margin: 0 !important; }
.inr-db-verdeel-naam { flex: 1 !important; font-size: 14px !important; font-weight: 400 !important; color: #0F172A !important; }
.inr-db-verdeel-token { font-size: 12px !important; font-weight: 500 !important; color: #94A3B8 !important; }
.inr-db-verdeel-menu { font-family: 'Inter', sans-serif !important; font-size: 12px !important; padding: 5px 7px !important; border: 1px solid rgba(15,23,42,.14) !important; border-radius: 8px !important; background: #fff !important; max-width: 130px !important; }
.inr-db-verdeel-leeg { font-size: 13px !important; font-weight: 300 !important; color: #94A3B8 !important; text-align: center !important; padding: 10px 0 !important; }
@media (max-width: 640px) {
	.inr-db-verdeel-kolommen { grid-template-columns: 1fr !important; }
	.inr-db-verdeel-item { cursor: default !important; }
}

/* ── Groep-kolom in de tokenhouder-tabel ── */
.inr-db-groep-pill { display: inline-block !important; font-size: 12px !important; font-weight: 500 !important; color: var(--inr-accent) !important; background: rgba(0,123,255,.08) !important; padding: 3px 10px !important; border-radius: 999px !important; white-space: nowrap !important; }
.inr-db-groep-pill-leeg { color: #94A3B8 !important; background: rgba(148,163,184,.12) !important; }

/* ── Groep-label op de planning-kaart ── */
.inr-db-kaart-groep { display: inline-block !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .02em !important; color: var(--inr-accent-2) !important; background: rgba(91,48,214,.08) !important; padding: 2px 9px !important; border-radius: 999px !important; margin-left: 8px !important; vertical-align: middle !important; white-space: nowrap !important; }
.inr-db-kaart-groep-kies { font-family: 'Inter', sans-serif !important; font-size: 13px !important; padding: 5px 8px !important; border: 1px solid rgba(15,23,42,.16) !important; border-radius: 8px !important; background: #fff !important; color: #0F172A !important; }

/* ── Tijdlijn per groep (meerdere groepen onder elkaar) ── */
.inr-db-tijd-groep { padding: 0 !important; border-top: 1px solid rgba(15,23,42,.08) !important; }
.inr-db-tijd-groep:first-of-type { border-top: none !important; }
.inr-db-tijd-groep-kop { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; padding: 14px 2px !important; margin: 0 !important; background: transparent !important; border: none !important; cursor: pointer !important; text-align: left !important; font-family: inherit !important; }
.inr-db-tijd-groep-kop:hover .inr-db-tijd-groep-naam { color: var(--inr-accent-2, #5B30D6) !important; }
.inr-db-tijd-groep-naam { font-weight: 600 !important; font-size: 15px !important; color: #0F172A !important; transition: color .12s ease !important; }
.inr-db-tijd-groep-rechts { display: flex !important; align-items: center !important; gap: 10px !important; }
.inr-db-tijd-groep-aantal { font-size: 11px !important; font-weight: 500 !important; color: #94A3B8 !important; white-space: nowrap !important; }
.inr-db-tijd-groep-pijl { display: inline-flex !important; align-items: center !important; color: #94A3B8 !important; transition: transform .18s ease !important; }
.inr-db-tijd-groep.is-open .inr-db-tijd-groep-pijl { transform: rotate(180deg) !important; }
.inr-db-tijd-groep-body { padding: 2px 2px 14px !important; }

/* ── Concept-items (gekopieerd, nog niet afgerond) — opvallend rood ── */
.inr-db-kaart-concept { border: 2px solid #E4572E !important; box-shadow: 0 0 0 4px rgba(228,87,46,.10) !important; }
.inr-db-concept-banner { display: flex !important; align-items: center !important; gap: 10px !important; background: #FDECEA !important; color: #B23A1C !important; border-radius: 10px !important; padding: 10px 14px !important; margin-bottom: 12px !important; }
.inr-db-concept-banner .inr-db-concept-icoon { flex-shrink: 0 !important; display: inline-flex !important; }
.inr-db-concept-banner svg { width: 20px !important; height: 20px !important; }
.inr-db-concept-tekst { font-size: 13px !important; line-height: 1.45 !important; }
.inr-db-concept-tekst strong { display: inline-block !important; font-weight: 700 !important; letter-spacing: .03em !important; margin-right: 6px !important; }
.inr-db-concept-actie { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; background: #FDECEA !important; border: 1px solid #F5C4B8 !important; border-radius: 10px !important; padding: 12px 16px !important; margin-bottom: 14px !important; }
.inr-db-concept-actie-tekst { font-size: 13px !important; line-height: 1.5 !important; color: #8a3318 !important; flex: 1 1 240px !important; }
.inr-db-concept-actie-tekst strong { display: block !important; color: #B23A1C !important; margin-bottom: 2px !important; }
.inr-db-concept-actie-hint { font-size: 12px !important; font-style: italic !important; color: #b06a55 !important; }

/* ── Programma kopiëren naar groep ── */
.inr-db-kopieer { background: rgba(91,48,214,.05) !important; border: 1px solid rgba(91,48,214,.16) !important; border-radius: 12px !important; padding: 14px 16px !important; margin-bottom: 16px !important; }
.inr-db-kopieer-kop { margin-bottom: 10px !important; }
.inr-db-kopieer-titel { display: block !important; font-weight: 600 !important; font-size: 14px !important; color: #0F172A !important; }
.inr-db-kopieer-uitleg { display: block !important; font-size: 12px !important; font-weight: 300 !important; color: #64748B !important; line-height: 1.5 !important; margin-top: 3px !important; }
.inr-db-kopieer-rij { display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; gap: 10px !important; }
.inr-db-kopieer-rij label { display: flex !important; flex-direction: column !important; gap: 4px !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .03em !important; color: #64748B !important; }
.inr-db-kopieer-rij select { font-family: 'Inter', sans-serif !important; font-size: 14px !important; padding: 8px 10px !important; border: 1px solid rgba(15,23,42,.16) !important; border-radius: 9px !important; background: #fff !important; color: #0F172A !important; }
.inr-db-kopieer-pijl { font-size: 18px !important; color: var(--inr-accent-2) !important; padding-bottom: 8px !important; }

/* ── Import alles (eenmalige volledige import) ── */
.inr-db-importalles { margin: 0 0 4px !important; }
.inr-db-importalles-banner { display: flex !important; align-items: center !important; gap: 16px !important; background: linear-gradient(135deg, rgba(91,48,214,.08), rgba(0,123,255,.08)) !important; border: 1px solid rgba(91,48,214,.18) !important; border-radius: 16px !important; padding: 18px 20px !important; }
.inr-db-importalles-icoon { flex-shrink: 0 !important; width: 44px !important; height: 44px !important; border-radius: 12px !important; background: #fff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 8px rgba(15,23,42,.08) !important; }
.inr-db-importalles-icoon svg { width: 22px !important; height: 22px !important; color: var(--inr-accent-2) !important; }
.inr-db-importalles-tekst { flex: 1 1 auto !important; min-width: 0 !important; }
.inr-db-importalles-tekst strong { display: block !important; font-size: 15px !important; font-weight: 600 !important; color: #0F172A !important; margin-bottom: 2px !important; }
.inr-db-importalles-tekst span { display: block !important; font-size: 13px !important; font-weight: 300 !important; color: #475569 !important; line-height: 1.5 !important; }
.inr-db-importalles-banner .inr-db-knop { flex-shrink: 0 !important; }

.inr-db-importalles-reset { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; margin: 0 0 4px !important; padding: 10px 14px !important; background: rgba(15,23,42,.03) !important; border: 1px dashed rgba(15,23,42,.16) !important; border-radius: 12px !important; font-size: 13px !important; color: #64748B !important; }
.inr-db-importalles-resetknop { background: transparent !important; border: 0 !important; padding: 0 !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: var(--inr-accent-2) !important; cursor: pointer !important; text-decoration: underline !important; text-underline-offset: 2px !important; }

/* Overlay + venster */
.inr-db-importalles-overlay { position: fixed !important; inset: 0 !important; z-index: 2147483600 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 24px !important; font-family: 'Inter', sans-serif !important; }
.inr-db-importalles-overlay[hidden] { display: none !important; }
.inr-db-importalles-backdrop { position: absolute !important; inset: 0 !important; background: rgba(15,23,42,.42) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; }
.inr-db-importalles-venster { position: relative !important; z-index: 1 !important; width: 560px !important; max-width: 100% !important; max-height: 85vh !important; display: flex !important; flex-direction: column !important; background: #fff !important; border-radius: 18px !important; box-shadow: 0 24px 70px rgba(15,23,42,.30) !important; overflow: hidden !important; }
.inr-db-importalles-kop { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; padding: 22px 24px 16px !important; border-bottom: 1px solid rgba(15,23,42,.08) !important; }
.inr-db-importalles-eyebrow { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #94A3B8 !important; }
.inr-db-importalles-titel { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 20px !important; color: #0F172A !important; margin: 2px 0 0 !important; }
.inr-db-importalles-x { background: transparent !important; border: 0 !important; font-size: 26px !important; line-height: 1 !important; color: #94A3B8 !important; cursor: pointer !important; padding: 0 4px !important; }
.inr-db-importalles-x:hover { color: #0F172A !important; }
.inr-db-importalles-body { padding: 20px 24px 24px !important; overflow-y: auto !important; }
.inr-db-importalles-regels { margin: 0 0 18px !important; padding-left: 20px !important; }
.inr-db-importalles-regels li { font-size: 14px !important; font-weight: 300 !important; color: #334155 !important; margin: 7px 0 !important; line-height: 1.5 !important; }
.inr-db-importalles-regels strong { font-weight: 600 !important; color: #B23A1C !important; }
.inr-db-importalles-upload { margin: 16px 0 !important; }
.inr-db-importalles-upload label { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: #475569 !important; margin-bottom: 6px !important; }
.inr-db-importalles-upload input[type="file"] { font-size: 13px !important; }
.inr-db-importalles-knoppen { display: flex !important; gap: 10px !important; justify-content: flex-end !important; margin-top: 16px !important; }
.inr-db-importalles-melding { background: #FDECEA !important; color: #B23A1C !important; border: 1px solid #F5C4B8 !important; border-radius: 9px !important; padding: 10px 14px !important; font-size: 13px !important; line-height: 1.5 !important; margin-top: 14px !important; }
.inr-db-importalles-voorbeeld-uitleg { font-size: 14px !important; color: #334155 !important; margin: 0 0 10px !important; }
.inr-db-importalles-voorbeeld { margin: 0 0 16px !important; padding: 14px 16px 14px 32px !important; background: rgba(0,123,255,.05) !important; border-radius: 12px !important; }
.inr-db-importalles-voorbeeld li { font-size: 14px !important; font-weight: 500 !important; color: #0F172A !important; margin: 5px 0 !important; }
.inr-db-importalles-waarschuwing { font-size: 13px !important; color: #B23A1C !important; background: #FDECEA !important; border-radius: 9px !important; padding: 10px 14px !important; line-height: 1.5 !important; }
@media (max-width: 600px) {
	.inr-db-importalles-banner { flex-direction: column !important; align-items: flex-start !important; }
	.inr-db-importalles-banner .inr-db-knop { width: 100% !important; }
	.inr-db-importalles-venster { max-height: 92vh !important; }
}

/* ── Vrij traject-canvas (Laag 1) ── */
.inr-db-tcanvas-status { font-size: 12px !important; color: #94A3B8 !important; align-self: center !important; }
.inr-db-tcanvas-hint { font-size: 13px !important; color: #64748B !important; background: rgba(0,123,255,.05) !important; border: 1px solid rgba(0,123,255,.14) !important; border-radius: 10px !important; padding: 10px 14px !important; margin: 8px 0 14px !important; }
.inr-db-tcanvas-mobiel { display: none !important; }
.inr-db-tcanvas { position: relative !important; margin-top: 12px !important; display: flex !important; align-items: stretch !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 16px !important; background: #FBFBFD !important; overflow: hidden !important; }
/* Palet links: vaste methode-onderdelen, onuitputtelijk. */
.inr-db-tcanvas-palet { flex: 0 0 168px !important; border-right: 1px solid rgba(15,23,42,.08) !important; background: #fff !important; padding: 14px 12px !important; overflow-y: auto !important; max-height: 520px !important; }
.inr-db-tcanvas-palet-titel { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #94A3B8 !important; margin-bottom: 10px !important; }
.inr-db-tcanvas-palet-item { display: flex !important; align-items: center !important; gap: 8px !important; padding: 9px 10px !important; margin-bottom: 7px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.1) !important; border-left: 4px solid var(--kaart-kleur, #2875FB) !important; border-radius: 0 9px 9px 0 !important; cursor: grab !important; user-select: none !important; transition: box-shadow .12s ease, transform .06s ease !important; }
.inr-db-tcanvas-palet-item:hover { box-shadow: 0 2px 10px rgba(15,23,42,.1) !important; }
.inr-db-tcanvas-palet-item.is-sleep { opacity: .5 !important; }
.inr-db-tcanvas-palet-icoon { flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--kaart-kleur, #2875FB) !important; }
.inr-db-tcanvas-palet-icoon svg { width: 18px !important; height: 18px !important; }
.inr-db-tcanvas-palet-naam { font-size: 13px !important; font-weight: 500 !important; color: #0F172A !important; line-height: 1.3 !important; }
.inr-db-tcanvas-palet-hint { font-size: 11px !important; color: #94A3B8 !important; margin-top: 10px !important; line-height: 1.4 !important; }
/* Het vlak waar je op tekent: vult de rest, met rasterpatroon. */
.inr-db-tcanvas-vlak { position: relative !important; flex: 1 1 auto !important; min-height: 520px !important; min-width: 0 !important; background:
	linear-gradient(rgba(15,23,42,.025) 1px, transparent 1px),
	linear-gradient(90deg, rgba(15,23,42,.025) 1px, transparent 1px) !important;
	background-size: 28px 28px !important; overflow: auto !important; }
.inr-db-tcanvas-vlak.is-droppen { background-color: rgba(0,123,255,.04) !important; }
.inr-db-tcanvas-lijnen { position: absolute !important; left: 0 !important; top: 0 !important; pointer-events: none !important; z-index: 1 !important; overflow: visible !important; }
/* De lijnen-laag laat geen klikken door, behalve op de paden zelf (die zetten
   zelf pointer-events: stroke in het JS, zodat je een lijn kunt aanklikken). */
.inr-db-tcanvas-lijnen path { pointer-events: stroke; }
.inr-db-tcanvas-kaart-stip { position: absolute !important; left: 50% !important; bottom: -7px !important; transform: translateX(-50%) !important; width: 14px !important; height: 14px !important; padding: 0 !important; border: 2px solid var(--kaart-kleur, #2875FB) !important; background: #fff !important; border-radius: 50% !important; cursor: crosshair !important; opacity: 0 !important; transition: opacity .12s ease !important; z-index: 3 !important; box-shadow: 0 1px 4px rgba(15,23,42,.25) !important; }
.inr-db-tcanvas-kaart:hover .inr-db-tcanvas-kaart-stip { opacity: 1 !important; }
.inr-db-tcanvas-kaart.is-doelwit { box-shadow: 0 0 0 3px rgba(91,48,214,.5) !important; }
/* Uitrek-handvat op de rechterrand. */
.inr-db-tcanvas-kaart-rek { position: absolute !important; right: 0 !important; top: 0 !important; width: 8px !important; height: 100% !important; cursor: ew-resize !important; border-radius: 0 16px 16px 0 !important; opacity: 0 !important; background: rgba(255,255,255,.3) !important; transition: opacity .12s ease !important; }
.inr-db-tcanvas-kaart:hover .inr-db-tcanvas-kaart-rek { opacity: 1 !important; }
.inr-db-tcanvas-kaart.is-rek { box-shadow: 0 8px 24px rgba(15,23,42,.16) !important; }
.inr-db-tcanvas-kaart { position: absolute !important; z-index: 2 !important; box-sizing: border-box !important; min-height: 64px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 14px 16px !important; background: var(--kaart-kleur, #2875FB) !important; border: none !important; border-radius: 16px !important; box-shadow: 0 4px 16px rgba(15,23,42,.14) !important; cursor: grab !important; user-select: none !important; text-align: center !important; }
.inr-db-tcanvas.is-beheer .inr-db-tcanvas-kaart:hover { box-shadow: 0 6px 22px rgba(15,23,42,.22) !important; }
.inr-db-tcanvas-kaart.is-sleep { cursor: grabbing !important; box-shadow: 0 10px 28px rgba(15,23,42,.26) !important; opacity: .96 !important; }
.inr-db-tcanvas-kaart-icoon { display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; opacity: .95 !important; }
.inr-db-tcanvas-kaart-icoon svg { width: 24px !important; height: 24px !important; }
.inr-db-tcanvas-kaart-naam { font-size: 14px !important; font-weight: 600 !important; color: #fff !important; line-height: 1.3 !important; }
.inr-db-tcanvas-kaart-x { position: absolute !important; top: 4px !important; right: 6px !important; z-index: 4 !important; width: 20px !important; height: 20px !important; border: 0 !important; background: transparent !important; color: rgba(255,255,255,.7) !important; font-size: 18px !important; line-height: 1 !important; cursor: pointer !important; border-radius: 6px !important; opacity: 0 !important; transition: opacity .12s ease !important; }
.inr-db-tcanvas-kaart:hover .inr-db-tcanvas-kaart-x { opacity: 1 !important; }
.inr-db-tcanvas-kaart-x:hover { background: rgba(255,255,255,.2) !important; color: #fff !important; }
/* Alleen-lezen (mobiel of klant): geen sleep-cursor, toon de melding. */
.inr-db-tcanvas.is-readonly .inr-db-tcanvas-kaart { cursor: default !important; }
.inr-db-tcanvas.is-readonly .inr-db-tcanvas-kaart-x { display: none !important; }
@media (max-width: 900px) {
	.inr-db-tcanvas-mobiel { display: block !important; font-size: 13px !important; color: #8a3318 !important; background: #FDECEA !important; border: 1px solid #F5C4B8 !important; border-radius: 10px !important; padding: 10px 14px !important; margin: 8px 0 12px !important; }
	.inr-db-tcanvas-hint { display: none !important; }
	.inr-db-tcanvas-palet { display: none !important; }
}

/* Kaart-bewerkmenu (naam + icoon kiezen) op het traject-canvas. */
.inr-db-tcanvas-menu { position: absolute !important; z-index: 10 !important; width: 240px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.12) !important; border-radius: 14px !important; box-shadow: 0 12px 40px rgba(15,23,42,.2) !important; padding: 14px !important; }
.inr-db-tcanvas-menu-label { display: block !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #94A3B8 !important; margin: 0 0 6px !important; }
.inr-db-tcanvas-menu-input { width: 100% !important; box-sizing: border-box !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; padding: 8px 10px !important; border: 1px solid rgba(15,23,42,.16) !important; border-radius: 9px !important; color: #0F172A !important; margin-bottom: 12px !important; }
.inr-db-tcanvas-menu-iconen { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 6px !important; margin-bottom: 12px !important; }
.inr-db-tcanvas-menu-icoon { display: inline-flex !important; align-items: center !important; justify-content: center !important; aspect-ratio: 1 !important; padding: 6px !important; background: #F8FAFC !important; border: 1px solid rgba(15,23,42,.1) !important; border-radius: 8px !important; cursor: pointer !important; color: #475569 !important; transition: all .1s ease !important; }
.inr-db-tcanvas-menu-icoon:hover { border-color: var(--inr-accent-2, #5B30D6) !important; color: var(--inr-accent-2, #5B30D6) !important; }
.inr-db-tcanvas-menu-icoon.is-actief { background: rgba(91,48,214,.1) !important; border-color: var(--inr-accent-2, #5B30D6) !important; color: var(--inr-accent-2, #5B30D6) !important; }
.inr-db-tcanvas-menu-icoon svg { width: 18px !important; height: 18px !important; }
.inr-db-tcanvas-menu-knoppen { display: flex !important; justify-content: flex-end !important; }

/* ── Modulair zijpaneel (super admin kan slepen + verbergen) ── */
.inr-db-zijmodules { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.inr-db-zijmodule { position: relative !important; background: #fff !important; border: 1px solid rgba(15,23,42,.08) !important; border-radius: 16px !important; box-shadow: 0 1px 3px rgba(15,23,42,.04) !important; overflow: hidden !important; }
.inr-db-zijmodule .inr-db-module-inhoud > .inr-db-zij-blok { border: none !important; box-shadow: none !important; background: transparent !important; margin: 0 !important; }
/* De super-admin-balk bovenaan elk blok. */
.inr-db-module-bar { display: flex !important; align-items: center !important; gap: 8px !important; padding: 6px 10px !important; border-bottom: 1px solid rgba(15,23,42,.06) !important; background: #FBFBFD !important; }
.inr-db-module-greep { display: inline-flex !important; align-items: center !important; color: #94A3B8 !important; cursor: grab !important; }
.inr-db-module-greep:active { cursor: grabbing !important; }
.inr-db-module-badge { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: #8a3318 !important; background: #FDECEA !important; border: 1px solid #F5C4B8 !important; border-radius: 999px !important; padding: 2px 8px !important; }
.inr-db-module-oog { margin-left: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border: none !important; background: transparent !important; color: #64748B !important; border-radius: 8px !important; cursor: pointer !important; transition: background .12s ease, color .12s ease !important; }
.inr-db-module-oog:hover { background: rgba(15,23,42,.06) !important; color: #0F172A !important; }
.inr-db-module-inhoud { padding: 0 !important; }
.inr-db-zijmodule .inr-db-module-inhoud > * { padding: 18px !important; }
/* Verborgen voor klant: alleen de super admin ziet dit, gedimd. */
.inr-db-zijmodule.is-verborgen { opacity: .55 !important; }
.inr-db-zijmodule.is-verborgen .inr-db-module-bar { background: #FDECEA !important; }
.inr-db-zijmodule .inr-db-module-oog { color: #64748B !important; }
.inr-db-zijmodule.is-verborgen .inr-db-module-oog { color: #B23A1C !important; }
/* Sleep-feedback. */
.inr-db-zijmodule.is-sleep { opacity: .5 !important; box-shadow: 0 10px 28px rgba(15,23,42,.2) !important; }
.inr-db-zijmodule.is-sleepdoel { outline: 2px dashed var(--inr-accent-2, #5B30D6) !important; outline-offset: 2px !important; }

/* ── Modulair menu (super admin: rij met greep + item + oog) ── */
.inr-db-nav-rij { display: flex !important; align-items: center !important; gap: 2px !important; }
.inr-db-nav-rij .inr-db-nav-item { flex: 1 1 auto !important; min-width: 0 !important; }
.inr-db-nav-greep { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; flex-shrink: 0 !important; color: #CBD5E1 !important; cursor: grab !important; opacity: 0 !important; transition: opacity .12s ease, color .12s ease !important; }
.inr-db-nav-rij:hover .inr-db-nav-greep { opacity: 1 !important; }
.inr-db-nav-greep:active { cursor: grabbing !important; color: #94A3B8 !important; }
.inr-db-nav-oog { flex-shrink: 0 !important; width: 26px !important; height: 26px !important; border: none !important; background: transparent !important; color: #94A3B8 !important; border-radius: 7px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; transition: opacity .12s ease, background .12s ease, color .12s ease !important; }
.inr-db-nav-rij:hover .inr-db-nav-oog { opacity: 1 !important; }
.inr-db-nav-oog:hover { background: rgba(15,23,42,.06) !important; color: #0F172A !important; }
.inr-db-nav-rij.is-verborgen .inr-db-nav-item { opacity: .5 !important; }
.inr-db-nav-rij.is-verborgen .inr-db-nav-oog { opacity: 1 !important; color: #B23A1C !important; }
.inr-db-nav-rij.is-sleep { opacity: .5 !important; }
.inr-db-nav-rij.is-sleepdoel { outline: 2px dashed var(--inr-accent-2, #5B30D6) !important; outline-offset: 1px !important; border-radius: 10px !important; }

/* ── Modulair hoofdgebied / Overzicht ── */
.inr-db-overzichtmodules { gap: 16px !important; }
/* De overzicht-blokken zijn voor IEDEREEN (klant én super admin) een lichte
   kaart met ademruimte. De kaart-presentatie + binnenmarge zijn bewust
   losgekoppeld van het sorteerrecht: dat recht bepaalt alleen of de greep/oog-
   balk verschijnt, niet of er lucht om het blok zit. Voorheen hing de hele
   kaart aan [data-sorteerbaar="1"], waardoor de klant geen scheiding kreeg en
   alles tegen elkaar plakte. */
.inr-db-overzichtmodules .inr-db-module-inhoud { padding: 14px 16px !important; }
.inr-db-overzichtmodules .inr-db-module-inhoud > * { padding: 0 !important; }
.inr-db-overzichtmodules .inr-db-zijmodule { background: #fff !important; border: 1px solid rgba(15,23,42,.08) !important; border-radius: 16px !important; overflow: hidden !important; padding: 0 !important; }
/* De eerste divider binnen een blok is overbodig: de kaartrand (of bij super
   admin de greep-balk) levert de scheiding al. Voor iedereen verbergen. */
.inr-db-overzichtmodules .inr-db-zijmodule .inr-db-divider:first-child { display: none !important; }
.inr-db-overzichtmodules .inr-db-zijmodule.is-verborgen { opacity: .55 !important; }

/* ════════════════════════════════════════════════════════════════
   TOOLS-BLOK in het linkerpaneel (v0.80)
   Onder de dashboard-items, gescheiden door een lijn. Drie niveaus:
   Tools (blok) → een tool → de items van die tool. Accordeon: één tool open.
   ════════════════════════════════════════════════════════════════ */
.inr-db-tools-blok { margin-top: 14px !important; padding-top: 12px !important; border-top: 1px solid rgba(15,23,42,.08) !important; }
.inr-db-tools-kop { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; padding: 10px 12px !important; border: none !important; background: transparent !important; border-radius: 10px !important; cursor: pointer !important; text-align: left !important; font-size: 14px !important; font-weight: 600 !important; color: #334155 !important; font-family: inherit !important; transition: all .18s ease !important; }
.inr-db-tools-kop:hover { background: rgba(15,23,42,.04) !important; color: #0F172A !important; }
.inr-db-tools-chevron { margin-left: auto !important; transition: transform .2s ease !important; opacity: .6 !important; display: inline-flex !important; }
.inr-db-tools-blok.open .inr-db-tools-chevron { transform: rotate(90deg) !important; }
.inr-db-tools-inhoud { display: none !important; padding-left: 6px !important; margin-top: 2px !important; }
.inr-db-tools-blok.open .inr-db-tools-inhoud { display: block !important; }

.inr-db-tool-kop { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding: 9px 12px !important; border: none !important; background: transparent !important; border-radius: 9px !important; cursor: pointer !important; text-align: left !important; font-size: 13.5px !important; font-weight: 600 !important; color: #475569 !important; font-family: inherit !important; transition: all .18s ease !important; }
.inr-db-tool-kop:hover { background: rgba(15,23,42,.04) !important; color: #0F172A !important; }
.inr-db-tool-chevron { margin-left: auto !important; transition: transform .2s ease !important; opacity: .5 !important; display: inline-flex !important; }
.inr-db-tool.open .inr-db-tool-chevron { transform: rotate(90deg) !important; }
.inr-db-tool-items { display: none !important; margin: 2px 0 6px 14px !important; padding-left: 8px !important; border-left: 2px solid rgba(0,123,255,.12) !important; }
.inr-db-tool.open .inr-db-tool-items { display: block !important; }

.inr-db-tool-item { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding: 8px 12px !important; border: none !important; background: transparent !important; border-radius: 8px !important; cursor: pointer !important; text-align: left !important; font-size: 13px !important; font-weight: 500 !important; color: #64748B !important; font-family: inherit !important; transition: all .18s ease !important; }
.inr-db-tool-item:hover { background: rgba(15,23,42,.04) !important; color: #0F172A !important; }
.inr-db-tool-item.active { background: rgba(0,123,255,.10) !important; color: var(--inr-accent) !important; font-weight: 600 !important; }

/* ===== Beheerpagina: Tool-toegang (v0.86) ===== */
.inr-tt-wrap { max-width: 640px !important; box-sizing: border-box !important; }
.inr-tt-klantkop { display: flex !important; flex-direction: column !important; gap: 4px !important; margin-bottom: 24px !important; padding: 16px 18px !important; border: 1px solid rgba(0,123,255,.18) !important; border-left: 4px solid var(--inr-accent, #007BFF) !important; border-radius: 12px !important; background: rgba(0,123,255,.05) !important; box-sizing: border-box !important; }
.inr-tt-klantkop-label { font-size: 12.5px !important; font-weight: 600 !important; color: #64748B !important; text-transform: uppercase !important; letter-spacing: .03em !important; }
.inr-tt-klantkop-naam { font-size: 19px !important; font-weight: 700 !important; color: #0F172A !important; line-height: 1.2 !important; }
.inr-tt-tool { border: 1px solid rgba(15,23,42,.10) !important; border-radius: 14px !important; padding: 20px !important; margin-bottom: 16px !important; background: #fff !important; }
.inr-tt-tool-kop { font-size: 16px !important; font-weight: 700 !important; color: #0F172A !important; margin-bottom: 14px !important; }
.inr-tt-standen { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.inr-tt-stand { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 14px !important; color: #1E293B !important; cursor: pointer !important; }
.inr-tt-stand input { width: 17px !important; height: 17px !important; accent-color: var(--inr-accent, #007BFF) !important; cursor: pointer !important; }
.inr-tt-gebruikers { margin-top: 14px !important; padding-top: 14px !important; border-top: 1px dashed rgba(15,23,42,.12) !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.inr-tt-gebruiker { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 14px !important; color: #1E293B !important; cursor: pointer !important; }
.inr-tt-gebruiker input { width: 16px !important; height: 16px !important; accent-color: var(--inr-accent, #007BFF) !important; cursor: pointer !important; }
.inr-tt-leeg { font-size: 13px !important; color: #94A3B8 !important; font-style: italic !important; margin: 0 !important; }
.inr-tt-globaal { margin-top: 36px !important; padding-top: 28px !important; border-top: 1px solid rgba(15,23,42,.10) !important; max-width: 640px !important; }
.inr-tt-globaal-titel { font-size: 17px !important; font-weight: 700 !important; color: #0F172A !important; margin: 0 0 6px !important; }
.inr-tt-globaal-lead { font-size: 14px !important; color: #64748B !important; line-height: 1.55 !important; margin: 0 0 18px !important; }
.inr-tt-globaal-lijst { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.inr-tt-globaal-rij { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 14px !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 11px !important; background: #fff !important; cursor: pointer !important; }
.inr-tt-globaal-rij input { width: 17px !important; height: 17px !important; accent-color: var(--inr-accent, #007BFF) !important; cursor: pointer !important; }
.inr-tt-globaal-naam { flex: 1 !important; font-size: 14px !important; font-weight: 600 !important; color: #0F172A !important; }
.inr-tt-globaal-status { font-size: 12px !important; font-weight: 600 !important; color: #64748B !important; background: #F1F5F9 !important; border-radius: 999px !important; padding: 3px 10px !important; }

/* Tekst binnen de labels expliciet stylen, zodat thema/Elementor-resets op
   generieke span/label niet winnen. */
.inr-tt-stand span,
.inr-tt-gebruiker span { font-size: 14px !important; line-height: 1.4 !important; color: #1E293B !important; background: transparent !important; font-weight: 400 !important; }
.inr-tt-globaal-naam { font-size: 14px !important; line-height: 1.4 !important; color: #0F172A !important; background: transparent !important; }
.inr-tt-globaal-status { font-size: 12px !important; line-height: 1.4 !important; }
.inr-tt-tool-kop { background: transparent !important; }
.inr-tt-label { background: transparent !important; }
.inr-tt-leeg { font-size: 13px !important; line-height: 1.4 !important; background: transparent !important; }

/* Tool-toegang: trainer-tool aan/uit (v0.89) */
.inr-tt-trainer-uitleg { font-size: 13px !important; line-height: 1.55 !important; color: #64748B !important; margin: 0 0 14px !important; background: transparent !important; }
.inr-tt-aanuit { display: flex !important; align-items: center !important; gap: 10px !important; cursor: pointer !important; }
.inr-tt-aanuit input { width: 17px !important; height: 17px !important; accent-color: var(--inr-accent, #007BFF) !important; cursor: pointer !important; }
.inr-tt-aanuit-status { font-size: 14px !important; font-weight: 600 !important; color: #1E293B !important; background: transparent !important; }

/* Planning opnieuw beginnen: gevaar-knop + bevestigings-popup (v0.92) */
.inr-db-knop-gevaar { background: #FEF2F2 !important; color: #DC2626 !important; border: 1px solid rgba(220,38,38,.28) !important; }
.inr-db-knop-gevaar:hover { background: #FEE2E2 !important; border-color: rgba(220,38,38,.45) !important; color: #B91C1C !important; }
.inr-db-knop-gevaar:disabled { opacity: .5 !important; cursor: not-allowed !important; }
.inr-db-wis-overlay { position: fixed !important; inset: 0 !important; z-index: 100000 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; background: rgba(15,23,42,.55) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; }
.inr-db-wis-overlay[hidden] { display: none !important; }
.inr-db-wis-kaart { background: #fff !important; border-radius: 16px !important; box-shadow: 0 24px 60px rgba(15,23,42,.30) !important; padding: 28px 28px 22px !important; width: 440px !important; max-width: calc(100vw - 32px) !important; }
.inr-db-wis-titel { font-size: 20px !important; font-weight: 700 !important; color: #0F172A !important; letter-spacing: -.015em !important; margin: 0 0 10px !important; }
.inr-db-wis-tekst { font-size: 14px !important; line-height: 1.6 !important; color: #475569 !important; margin: 0 0 18px !important; }
.inr-db-wis-label { display: block !important; font-size: 13px !important; line-height: 1.5 !important; color: #334155 !important; margin: 0 0 8px !important; }
.inr-db-wis-label strong { color: #DC2626 !important; }
.inr-db-wis-input { width: 100% !important; padding: 12px 14px !important; border: 1.5px solid rgba(15,23,42,.16) !important; border-radius: 10px !important; font-size: 15px !important; font-family: inherit !important; color: #0F172A !important; outline: none !important; background: #fff !important; }
.inr-db-wis-input:focus { border-color: #DC2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important; }
.inr-db-wis-melding { margin: 10px 0 0 !important; font-size: 13px !important; font-weight: 500 !important; color: #DC2626 !important; }
.inr-db-wis-melding[hidden] { display: none !important; }
.inr-db-wis-knoppen { display: flex !important; justify-content: flex-end !important; gap: 8px !important; margin-top: 20px !important; }

/* Afslag-scherm: keuze tussen een klant en de eigen omgeving (v0.93) */
/* ===== Mijn INR — library-startscherm ===== */
.inr-db-afslag-raster { display: block !important; max-width: 1140px !important; margin: 0 auto !important; }
.inr-db-rij-kop { font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #9AA2B0 !important; margin: 0 0 16px 2px !important; text-align: left !important; }
.inr-db-rij-kop-tools { margin-top: 40px !important; }

/* Werkruimte-rij: hero + tweede kaart */
.inr-db-werk-rij { display: grid !important; grid-template-columns: 1.7fr 1fr !important; gap: 18px !important; margin-bottom: 4px !important; }
/* Heeft de deelnemer maar één keuze, dan vult die hero de volle breedte. */
.inr-db-werk-rij-een { grid-template-columns: 1fr !important; }
/* Vriendelijke lege staat: de deelnemer mag (nog) niets, maar landt netjes op
   zijn thuisbasis met een rustige uitleg in plaats van een kille foutmelding. */
.inr-db-klant-leeg { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 16px !important; max-width: 460px !important; margin: 30px auto 0 !important; padding: 44px 32px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.07) !important; border-radius: 26px !important; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -14px rgba(15,23,42,.16) !important; }
.inr-db-klant-leeg-icoon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 56px !important; height: 56px !important; border-radius: 16px !important; background: rgba(0,123,255,.08) !important; color: #007BFF !important; }
.inr-db-klant-leeg-icoon svg { width: 28px !important; height: 28px !important; }
.inr-db-klant-leeg-tekst { font-size: 15px !important; font-weight: 300 !important; line-height: 1.55 !important; color: #64748B !important; margin: 0 !important; }

/* Hero */
a.inr-db-hero { position: relative !important; overflow: hidden !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; min-height: 280px !important; border-radius: 26px !important; padding: 40px !important; border: 0 !important; text-decoration: none !important; color: #fff !important; cursor: pointer !important; background: linear-gradient(135deg, #0B5FD6, #1576FF 55%, #3C8BFF) !important; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -14px rgba(15,23,42,.16) !important; opacity: 0 !important; transform: translateY(18px) !important; transition: transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .5s cubic-bezier(.22,1,.36,1), opacity .5s ease !important; }
a.inr-db-hero.inr-in { opacity: 1 !important; transform: translateY(0) !important; }
a.inr-db-hero:hover { transform: translateY(-6px) !important; box-shadow: 0 2px 6px rgba(15,23,42,.07), 0 38px 70px -22px rgba(15,23,42,.32) !important; }
.inr-db-hero-bol { position: absolute !important; border-radius: 50% !important; filter: blur(30px) !important; pointer-events: none !important; }
.inr-db-hero-bol.b1 { width: 240px !important; height: 240px !important; top: -60px !important; right: -40px !important; background: radial-gradient(circle, rgba(255,255,255,.40), transparent 65%) !important; animation: inrZweef1 18s ease-in-out infinite !important; }
.inr-db-hero-bol.b2 { width: 200px !important; height: 200px !important; bottom: -70px !important; left: 10% !important; background: radial-gradient(circle, rgba(120,180,255,.55), transparent 65%) !important; animation: inrZweef2 22s ease-in-out infinite !important; }
@keyframes inrZweef1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px, 26px); } }
@keyframes inrZweef2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px, -20px); } }
.inr-db-hero-glyph { position: absolute !important; top: 32px !important; left: 40px !important; opacity: .95 !important; color: #fff !important; }
.inr-db-hero-glyph svg { width: 40px !important; height: 40px !important; }
a.inr-db-hero .inr-db-hero-eyebrow { position: relative !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; opacity: .85 !important; margin-bottom: 10px !important; color: #fff !important; }
.inr-db-hero-titel { position: relative !important; font-family: 'Inter', sans-serif !important; font-size: 31px !important; font-weight: 700 !important; letter-spacing: -.02em !important; margin: 0 0 8px !important; color: #fff !important; text-align: left !important; }
.inr-db-hero-tekst { position: relative !important; font-size: 15.5px !important; font-weight: 300 !important; line-height: 1.5 !important; opacity: .92 !important; margin: 0 !important; max-width: 40ch !important; color: #fff !important; text-align: left !important; }
.inr-db-hero-cta { position: relative !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; margin-top: 18px !important; font-size: 14px !important; font-weight: 600 !important; color: #fff !important; }
.inr-db-hero-cta svg { width: 17px !important; height: 17px !important; transition: transform .4s cubic-bezier(.34,1.56,.64,1) !important; }
.inr-db-hero:hover .inr-db-hero-cta svg { transform: translateX(5px) !important; }

/* Tweede werkruimte-kaart */
.inr-db-werk2 { position: relative !important; overflow: hidden !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; border-radius: 26px !important; padding: 32px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.07) !important; text-decoration: none !important; color: #0B0B0F !important; cursor: pointer !important; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -14px rgba(15,23,42,.16) !important; opacity: 0 !important; transform: translateY(18px) !important; transition: transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .5s cubic-bezier(.22,1,.36,1), opacity .5s ease !important; }
.inr-db-werk2.inr-in { opacity: 1 !important; transform: translateY(0) !important; }
.inr-db-werk2:hover { transform: translateY(-6px) !important; box-shadow: 0 2px 6px rgba(15,23,42,.07), 0 38px 70px -22px rgba(15,23,42,.32) !important; }
.inr-db-werk2-glyph { width: 52px !important; height: 52px !important; border-radius: 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-bottom: auto !important; background: rgba(124,92,246,.12) !important; color: rgb(124,92,246) !important; transition: transform .45s cubic-bezier(.34,1.56,.64,1) !important; }
.inr-db-werk2:hover .inr-db-werk2-glyph { transform: scale(1.08) rotate(-3deg) !important; }
.inr-db-werk2-glyph svg { width: 26px !important; height: 26px !important; }
.inr-db-werk2-titel { font-family: 'Inter', sans-serif !important; font-size: 21px !important; font-weight: 600 !important; letter-spacing: -.01em !important; margin: 18px 0 6px !important; color: #0F172A !important; text-align: left !important; }
.inr-db-werk2-tekst { font-size: 14px !important; font-weight: 300 !important; line-height: 1.5 !important; color: #64748B !important; margin: 0 !important; text-align: left !important; }

/* Instrumenten-rij */
.inr-db-tools-rij { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 18px !important; }

/* Tool-kaart met tint-aura (gebruikt --inr-tint per kaart, fallback blauw) */
.inr-db-afslag-kaart { --inr-tint: 0,123,255; position: relative !important; min-width: 0 !important; max-width: 100% !important; white-space: normal !important; overflow: hidden !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; gap: 12px !important; text-decoration: none !important; background: #fff !important; border: 1px solid rgba(15,23,42,.07) !important; border-radius: 22px !important; padding: 26px !important; cursor: pointer !important; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -14px rgba(15,23,42,.16) !important; opacity: 0 !important; transform: translateY(16px) !important; transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .45s cubic-bezier(.22,1,.36,1), border-color .45s ease, opacity .45s ease !important; }
.inr-db-afslag-kaart.inr-in { opacity: 1 !important; transform: translateY(0) !important; }
.inr-db-afslag-kaart:hover { transform: translateY(-7px) !important; box-shadow: 0 2px 6px rgba(15,23,42,.07), 0 38px 70px -22px rgba(15,23,42,.32) !important; border-color: rgba(var(--inr-tint),.4) !important; }
.inr-db-afslag-kaart::after { content: "" !important; position: absolute !important; top: -50% !important; right: -30% !important; width: 240px !important; height: 240px !important; background: radial-gradient(circle, rgba(var(--inr-tint),.16), transparent 65%) !important; opacity: .7 !important; transition: opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1) !important; pointer-events: none !important; }
.inr-db-afslag-kaart:hover::after { opacity: 1 !important; transform: scale(1.18) translate(-6%, 6%) !important; }
.inr-db-afslag-badge { position: absolute !important; top: 18px !important; right: 18px !important; min-width: 24px !important; height: 24px !important; padding: 0 7px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgb(var(--inr-tint)) !important; color: #fff !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; border-radius: 999px !important; box-shadow: 0 4px 10px -2px rgba(var(--inr-tint),.6) !important; z-index: 2 !important; }
.inr-db-afslag-icoon { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 56px !important; height: 56px !important; border-radius: 16px !important; background: linear-gradient(145deg, rgba(var(--inr-tint),.16), rgba(var(--inr-tint),.07)) !important; color: rgb(var(--inr-tint)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px -8px rgba(var(--inr-tint),.5) !important; margin-bottom: 4px !important; transition: transform .45s cubic-bezier(.34,1.56,.64,1) !important; }
.inr-db-afslag-kaart:hover .inr-db-afslag-icoon { transform: scale(1.08) rotate(-3deg) !important; }
.inr-db-afslag-icoon svg { width: 28px !important; height: 28px !important; }
.inr-db-afslag-titel { position: relative !important; width: 100% !important; box-sizing: border-box !important; white-space: normal !important; overflow-wrap: break-word !important; word-wrap: break-word !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 18px !important; color: #0F172A !important; letter-spacing: -.01em !important; text-align: left !important; }
.inr-db-afslag-tekst { position: relative !important; width: 100% !important; box-sizing: border-box !important; white-space: normal !important; overflow-wrap: break-word !important; word-wrap: break-word !important; font-size: 14px !important; font-weight: 300 !important; line-height: 1.5 !important; color: #64748B !important; text-align: left !important; }
.inr-db-afslag-pijl { position: absolute !important; bottom: 24px !important; right: 24px !important; color: rgb(var(--inr-tint)) !important; opacity: 0 !important; transform: translateX(-6px) !important; transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1) !important; }
.inr-db-afslag-kaart:hover .inr-db-afslag-pijl { opacity: 1 !important; transform: translateX(0) !important; }
.inr-db-afslag-pijl svg { width: 18px !important; height: 18px !important; }

@media (max-width: 980px) {
  .inr-db-werk-rij { grid-template-columns: 1fr !important; }
  /* Instrumenten op tablet: 2 kolommen in plaats van 3 (3 wordt te krap). */
  .inr-db-tools-rij { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 640px) {
  /* Op telefoon: instrumenten netjes onder elkaar, niet in kolommen geprop. */
  .inr-db-tools-rij { grid-template-columns: 1fr !important; }
}

/* ===== Uitnodig-popover bij tokenhouder-rij ===== */
.inr-th-uitnodig-pop { position: absolute !important; top: 100% !important; right: 0 !important; z-index: 50 !important; margin-top: 6px !important; width: 280px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.12) !important; border-radius: 12px !important; box-shadow: 0 12px 32px -8px rgba(15,23,42,.3) !important; padding: 16px !important; text-align: left !important; }
.inr-th-pop-titel { font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: #0F172A !important; margin-bottom: 4px !important; }
.inr-th-pop-sub { font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 300 !important; color: #64748B !important; line-height: 1.45 !important; margin-bottom: 12px !important; }
.inr-th-pop-vink { display: flex !important; align-items: center !important; gap: 8px !important; font-family: 'Inter', sans-serif !important; font-size: 13.5px !important; color: #334155 !important; margin-bottom: 8px !important; cursor: pointer !important; line-height: 1.4 !important; }
.inr-th-pop-vink-tekst { font-family: 'Inter', sans-serif !important; font-size: 13.5px !important; font-weight: 400 !important; color: #334155 !important; line-height: 1.4 !important; text-transform: none !important; letter-spacing: normal !important; }
.inr-th-pop-vink input { width: 16px !important; height: 16px !important; accent-color: #5B30D6 !important; cursor: pointer !important; }
.inr-th-pop-acties { display: flex !important; gap: 8px !important; margin-top: 12px !important; }
.inr-th-pop-acties .inr-db-knop, .inr-th-pop-acties .inr-db-mini-knop { white-space: nowrap !important; padding: 8px 14px !important; }

/* Klant verwijderen-knop op de kaart (alleen superadmin), naast logo & trainers */
.inr-db-klant-verwijder-knop { position: absolute !important; top: 12px !important; right: 84px !important; width: 30px !important; height: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; background: rgba(255,255,255,.9) !important; border: 1px solid rgba(15,23,42,.10) !important; cursor: pointer !important; opacity: 0 !important; transition: opacity .15s ease, background .15s ease !important; color: #C0392B !important; }
.inr-db-klant-kaart:hover .inr-db-klant-verwijder-knop { opacity: 1 !important; }
.inr-db-klant-verwijder-knop:hover { background: #C0392B !important; color: #fff !important; border-color: #C0392B !important; }
.inr-db-klant-verwijder-knop svg { width: 15px !important; height: 15px !important; }
@media (max-width: 768px) { .inr-db-klant-verwijder-knop { opacity: 1 !important; } }

/* Voorbeschouwing in de klant-verwijder bevestiging (dummy-proof overzicht) */
.inr-db-verwijder-overzicht { margin: 4px 0 16px !important; max-height: 280px !important; overflow-y: auto !important; }
.inr-db-vo-laden { font-size: 13px !important; color: #64748B !important; font-style: italic !important; padding: 8px 0 !important; }
.inr-db-vo-blok { border-radius: 10px !important; padding: 12px 14px !important; margin-bottom: 10px !important; }
.inr-db-vo-weg { background: #fdecea !important; border: 1px solid #f5c6cb !important; }
.inr-db-vo-blijft { background: #e8f6ee !important; border: 1px solid #bfe6cd !important; }
.inr-db-vo-blok:not(.inr-db-vo-weg):not(.inr-db-vo-blijft) { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; }
.inr-db-vo-kop { font-size: 12.5px !important; font-weight: 700 !important; color: #0F172A !important; margin-bottom: 8px !important; }
.inr-db-vo-weg .inr-db-vo-kop { color: #B3261E !important; }
.inr-db-vo-blijft .inr-db-vo-kop { color: #1E8A4C !important; }
.inr-db-vo-lijst { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.inr-db-vo-lijst li { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 4px 10px !important; padding: 4px 0 !important; border-top: 1px solid rgba(15,23,42,.06) !important; font-size: 13px !important; }
.inr-db-vo-lijst li:first-child { border-top: 0 !important; }
.inr-db-vo-naam { font-weight: 600 !important; color: #0F172A !important; }
.inr-db-vo-mail { color: #64748B !important; font-size: 12px !important; }
.inr-db-vo-rol { color: #475569 !important; font-size: 12px !important; margin-left: auto !important; }
.inr-db-vo-reden { color: #1E8A4C !important; font-size: 11.5px !important; font-style: italic !important; width: 100% !important; }
.inr-db-vo-chips { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.inr-db-vo-chips li { background: rgba(179,38,30,.08) !important; border-radius: 999px !important; padding: 3px 10px !important; font-size: 12px !important; color: #7a2018 !important; }

/* Uitnodig-popover naar boven openen als er onder te weinig ruimte is (laatste rij) */
.inr-th-uitnodig-pop.inr-th-pop-boven { top: auto !important; bottom: 100% !important; margin-top: 0 !important; margin-bottom: 6px !important; }

/* ════════════════════════════════════════════════════════════════════════
   MAP-THEMA op SHELL-NIVEAU (niveau 2: header + menu + content)

   Wanneer een map een thema heeft, zet de JS de class .inr-leer-thema-actief op
   .inr-db-root (de hele dashboard-shell) plus de CSS-variabelen (achtergrond,
   tekst, accent, ... ). Hieronder laten we de hele shell die kleuren overnemen,
   strikt gescoped onder .inr-db-root.inr-leer-thema-actief. De JS haalt de class
   weg zodra je de map verlaat of naar een andere tab gaat — dan valt alles terug
   naar de normale weergave. We raken NOOIT de pagina buiten .inr-db-root.

   Zachte overgang zodat het in/uit voelt als een vloeiende transformatie.
   ════════════════════════════════════════════════════════════════════════ */

.inr-db-root { transition: background-color .45s ease, color .45s ease !important; }

/* De hele shell + de drie hoofdvlakken (sidebar, topbar, canvas) */
.inr-db-root.inr-leer-thema-actief,
.inr-db-root.inr-leer-thema-actief .inr-db-sidebar,
.inr-db-root.inr-leer-thema-actief .inr-db-topbar,
.inr-db-root.inr-leer-thema-actief .inr-db-canvas {
  background: var(--leer-thema-bg) !important;
  color: var(--leer-thema-tekst) !important;
  /* De glas-blur (backdrop-filter) zou de themakleur vertroebelen; uit voor een
     volle, strakke premium-dekking. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background-color .45s ease, color .45s ease !important;
}
.inr-db-root.inr-leer-thema-actief .inr-db-sidebar { border-right-color: var(--leer-thema-lijn) !important; }
.inr-db-root.inr-leer-thema-actief .inr-db-topbar { border-bottom-color: var(--leer-thema-lijn) !important; }

/* Topbar: eyebrow, titel, knoppen */
.inr-db-root.inr-leer-thema-actief .inr-db-topbar-title { color: var(--leer-thema-tekst) !important; }
.inr-db-root.inr-leer-thema-actief .inr-db-eyebrow { color: var(--leer-thema-accent) !important; }
.inr-db-root.inr-leer-thema-actief .inr-db-refresh-knop,
.inr-db-root.inr-leer-thema-actief .inr-db-menu-toggle,
.inr-db-root.inr-leer-thema-actief .inr-gear-anker {
  background: var(--leer-thema-vlak) !important;
  border-color: var(--leer-thema-lijn) !important;
  color: var(--leer-thema-tekst) !important;
}
.inr-db-root.inr-leer-thema-actief .inr-db-refresh-knop:hover,
.inr-db-root.inr-leer-thema-actief .inr-db-menu-toggle:hover { background: var(--leer-thema-lijn) !important; }
.inr-db-root.inr-leer-thema-actief .inr-db-wissel-knop { background: var(--leer-thema-vlak) !important; border-color: var(--leer-thema-lijn) !important; color: var(--leer-thema-tekst) !important; }

/* Het logo-blok / merk linksboven */
.inr-db-root.inr-leer-thema-actief .inr-db-brand-naam,
.inr-db-root.inr-leer-thema-actief .inr-db-brand-sub { color: var(--leer-thema-tekst) !important; }

/* Menu: labels, items, actief/hover, iconen, tellingen */
.inr-db-root.inr-leer-thema-actief .inr-db-nav-label { color: var(--leer-thema-zacht) !important; }
.inr-db-root.inr-leer-thema-actief .inr-db-nav-item { color: var(--leer-thema-zacht) !important; }
.inr-db-root.inr-leer-thema-actief .inr-db-nav-item:hover:not([disabled]) { background: var(--leer-thema-vlak) !important; color: var(--leer-thema-tekst) !important; }
.inr-db-root.inr-leer-thema-actief .inr-db-nav-item.active {
  background: var(--leer-thema-vlak) !important;
  color: var(--leer-thema-accent) !important;
  box-shadow: inset 0 0 0 1px var(--leer-thema-lijn) !important;
}
.inr-db-root.inr-leer-thema-actief .inr-db-nav-icon { color: var(--leer-thema-tekst) !important; }
.inr-db-root.inr-leer-thema-actief .inr-db-nav-soon { background: var(--leer-thema-vlak) !important; color: var(--leer-thema-accent) !important; }
.inr-db-root.inr-leer-thema-actief .inr-db-sidebar-foot { border-top-color: var(--leer-thema-lijn) !important; color: var(--leer-thema-zacht) !important; }
.inr-db-root.inr-leer-thema-actief .inr-db-sidebar-foot strong { color: var(--leer-thema-tekst) !important; }

/* Het Tools-blok in het menu (zelfde behandeling als nav-items) */
.inr-db-root.inr-leer-thema-actief .inr-db-tools-knop,
.inr-db-root.inr-leer-thema-actief .inr-db-tool-knop { color: var(--leer-thema-zacht) !important; }
.inr-db-root.inr-leer-thema-actief .inr-db-tools-knop:hover,
.inr-db-root.inr-leer-thema-actief .inr-db-tool-knop:hover { background: var(--leer-thema-vlak) !important; color: var(--leer-thema-tekst) !important; }

/* De leeromgeving-boom in het menu */
.inr-db-root.inr-leer-thema-actief .inr-db-leerboom-laden { color: var(--leer-thema-zacht) !important; }

/* Interne trainers-blok (klanten-overzicht, superadmin) */
.inr-trainers-blok { margin-top: 20px !important; }
.inr-trainers-lijst { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-top: 14px !important; }
.inr-trainers-leeg { font-size: 13.5px !important; color: #94A3B8 !important; }
.inr-trainers-rij { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; padding: 12px 16px !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 11px !important; background: #fff !important; }
.inr-trainers-info { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
.inr-trainers-naam { font-weight: 600 !important; font-size: 14.5px !important; color: #0F172A !important; }
.inr-trainers-meta { font-size: 12.5px !important; color: #94A3B8 !important; }
.inr-trainers-schakel { display: inline-flex !important; align-items: center !important; gap: 9px !important; font-size: 13.5px !important; color: #334155 !important; cursor: pointer !important; flex: 0 0 auto !important; }
.inr-trainers-schakel input { width: 17px !important; height: 17px !important; accent-color: #007BFF !important; cursor: pointer !important; }

/* ── Hoofdscherm changelog: knop, per-tegel stip en overlay ───────────────── */
.inr-db-kies-changelog-knop { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 10px auto 0 !important; padding: 8px 16px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.12) !important; border-radius: 99px !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #475569 !important; cursor: pointer !important; transition: all .15s ease !important; }
.inr-db-kies-changelog-knop:hover { border-color: #007BFF !important; color: #007BFF !important; }
.inr-db-kies-changelog-label { cursor: default !important; }
.inr-db-kies-changelog-label:hover { border-color: rgba(15,23,42,.12) !important; color: #475569 !important; }
.inr-db-kies-changelog-knop svg { width: 16px !important; height: 16px !important; }

/* "Nieuw"-stip rechtsboven op een tegel met ongelezen changelog. */
.inr-db-afslag-changelog-stip { position: absolute !important; top: -6px !important; left: -6px !important; width: 16px !important; height: 16px !important; border-radius: 50% !important; background: #FD4C5C !important; border: 3px solid #fff !important; box-shadow: 0 2px 6px rgba(253,76,92,.4) !important; z-index: 3 !important; }

.inr-db-kies-changelog-overlay { position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 24px !important; font-family: 'Inter', sans-serif !important; }
.inr-db-kies-changelog-overlay[hidden] { display: none !important; }
.inr-db-kies-changelog-overlay, .inr-db-kies-changelog-overlay * { box-sizing: border-box !important; }
.inr-db-kies-changelog-backdrop { position: absolute !important; inset: 0 !important; background: rgba(15,23,42,.55) !important; }
.inr-db-kies-changelog-venster { position: relative !important; z-index: 1 !important; width: 560px !important; max-width: 100% !important; max-height: 82vh !important; display: flex !important; flex-direction: column !important; background: #fff !important; border-radius: 18px !important; box-shadow: 0 24px 70px rgba(15,23,42,.30) !important; overflow: hidden !important; }
.inr-db-kies-changelog-kop { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; padding: 22px 24px 16px !important; border-bottom: 1px solid rgba(15,23,42,.08) !important; }
.inr-db-kies-changelog-eyebrow { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #007BFF !important; margin-bottom: 4px !important; }
.inr-db-kies-changelog-titel { font-size: 19px !important; font-weight: 700 !important; color: #0F172A !important; margin: 0 !important; }
.inr-db-kies-changelog-x { background: none !important; border: none !important; font-size: 26px !important; line-height: 1 !important; color: #94a3b8 !important; cursor: pointer !important; padding: 0 4px !important; }
.inr-db-kies-changelog-x:hover { color: #0F172A !important; }
.inr-db-kies-changelog-body { padding: 18px 24px 24px !important; overflow-y: auto !important; }
.inr-db-changelog-leeg { color: #64748B !important; font-size: 14px !important; padding: 20px 0 !important; text-align: center !important; }

/* ===== Preloader: verschijnt één keer vlak na het inloggen ===== */
.inr-db-preloader { position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: radial-gradient(120% 90% at 50% 50%, #1a2742 0%, #0d1526 45%, #060a14 100%) !important; overflow: hidden !important; }
.inr-db-preloader::before { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 900px !important; height: 900px !important; transform: translate(-50%, -50%) !important; background: radial-gradient(circle, rgba(120,170,255,.30) 0%, rgba(80,130,255,.12) 30%, transparent 60%) !important; animation: inrPreAdem 3.4s ease-in-out infinite !important; pointer-events: none !important; }
@keyframes inrPreAdem { 0%, 100% { opacity: .7; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); } }
.inr-db-preloader-merk { position: relative !important; width: clamp(140px, 22vw, 280px) !important; min-height: 140px !important; animation: inrPreOp 2.2s cubic-bezier(.16,1,.3,1) .15s both !important; }
.inr-db-preloader-logo { width: 100% !important; height: auto !important; min-height: 120px !important; display: block !important; filter: drop-shadow(0 0 18px rgba(120,170,255,.55)) drop-shadow(0 0 44px rgba(80,130,255,.40)) drop-shadow(0 0 90px rgba(60,110,255,.22)) !important; animation: inrPreGloed 3.4s ease-in-out infinite !important; }
.inr-db-preloader-logo path { fill: #ffffff !important; }
.inr-db-preloader-tekst { display: block !important; font-family: 'Inter', sans-serif !important; font-weight: 800 !important; font-size: clamp(64px, 14vw, 140px) !important; letter-spacing: .04em !important; color: #fff !important; text-shadow: 0 0 24px rgba(120,170,255,.55), 0 0 60px rgba(80,130,255,.40) !important; }
@keyframes inrPreGloed { 0%, 100% { filter: drop-shadow(0 0 16px rgba(120,170,255,.45)) drop-shadow(0 0 40px rgba(80,130,255,.32)) drop-shadow(0 0 80px rgba(60,110,255,.18)); } 50% { filter: drop-shadow(0 0 24px rgba(120,170,255,.65)) drop-shadow(0 0 60px rgba(80,130,255,.48)) drop-shadow(0 0 110px rgba(60,110,255,.28)); } }
@keyframes inrPreOp { from { opacity: 0; transform: scale(.4); } 60% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
.inr-db-preloader.weg { animation: inrPreWeg .9s cubic-bezier(.7,0,.84,0) forwards !important; }
@keyframes inrPreWeg { to { opacity: 0; transform: scale(1.06); visibility: hidden; } }
.inr-db-preloader.weg .inr-db-preloader-merk { animation: inrPreMerkWeg .7s cubic-bezier(.7,0,.84,0) forwards !important; }
@keyframes inrPreMerkWeg { to { opacity: 0; transform: translateY(-10px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .inr-db-preloader::before, .inr-db-preloader-logo { animation: none !important; }
  .inr-db-preloader-merk { animation: inrPreOp .4s ease forwards !important; }
}

/* ===== INR AI tegel: full-colour pulserende blikvanger ===== */
/* Wijkt bewust af van de rustige witte tegels: een paars-violette gradient met
   een zachte, langzaam pulserende gloed eromheen. Het is een link die in een
   nieuw tabblad de externe ChatGPT-assistent opent. */
.inr-db-cmodel-kaart {
	position: relative !important;
	background: linear-gradient(135deg, #2B2150 0%, #4B2E83 45%, #7C5CF6 100%) !important;
	border: none !important;
	overflow: visible !important;
	isolation: isolate !important;
}
.inr-db-cmodel-kaart::before { display: none !important; }
.inr-db-cmodel-gloed {
	position: absolute !important;
	inset: -4px !important;
	border-radius: inherit !important;
	background: linear-gradient(135deg, #4B2E83, #7C5CF6) !important;
	z-index: -1 !important;
	opacity: .55 !important;
	filter: blur(16px) !important;
	animation: inrCmodelPuls 2.6s ease-in-out infinite !important;
}
@keyframes inrCmodelPuls {
	0%, 100% { opacity: .35 !important; transform: scale(.98) !important; }
	50%      { opacity: .75 !important; transform: scale(1.02) !important; }
}
@media (prefers-reduced-motion: reduce) {
	.inr-db-cmodel-gloed { animation: none !important; opacity: .5 !important; }
}
.inr-db-cmodel-kaart .inr-db-afslag-icoon {
	background: rgba(255,255,255,.16) !important;
	color: #fff !important;
}
.inr-db-cmodel-kaart .inr-db-afslag-titel { color: #fff !important; }
.inr-db-cmodel-kaart .inr-db-afslag-tekst { color: rgba(255,255,255,.82) !important; }
.inr-db-cmodel-let-op {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	margin-top: 12px !important;
	padding: 7px 13px !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,.12) !important;
	border: 1px solid rgba(255,255,255,.20) !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: .01em !important;
	color: rgba(255,255,255,.90) !important;
	text-align: left !important;
	align-self: flex-start !important;
}
.inr-db-cmodel-let-op svg { width: 13px !important; height: 13px !important; flex-shrink: 0 !important; }
.inr-db-cmodel-kaart:hover { transform: translateY(-3px) !important; }
.inr-db-cmodel-kaart:hover .inr-db-cmodel-gloed { opacity: .85 !important; }

/* Versie-melding: verschijnt centraal in beeld wanneer er een nieuwe versie van
   het dashboard is uitgebracht terwijl de pagina openstond. Prominent zodat het
   niet gemist wordt, maar zacht van insteek: de gebruiker kiest zelf wanneer te
   vernieuwen (er is een Later-knop). */
.inr-db-versie-melding { position: fixed !important; inset: 0 !important; z-index: 2147483200 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 24px !important; background: rgba(14,14,18,.55) !important; -webkit-backdrop-filter: blur(3px) !important; backdrop-filter: blur(3px) !important; opacity: 0 !important; transition: opacity .25s ease !important; }
.inr-db-versie-melding.is-zichtbaar { opacity: 1 !important; }
.inr-db-versie-inner { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 20px !important; max-width: 460px !important; width: 100% !important; background: #0E0E12 !important; color: #fff !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 20px !important; padding: 36px 32px !important; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7) !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; transform: scale(.94) !important; transition: transform .25s cubic-bezier(.2,.7,.2,1) !important; }
.inr-db-versie-melding.is-zichtbaar .inr-db-versie-inner { transform: scale(1) !important; }
.inr-db-versie-titel { font-size: 20px !important; font-weight: 600 !important; letter-spacing: -.01em !important; line-height: 1.25 !important; }
.inr-db-versie-tekst { font-size: 15px !important; font-weight: 400 !important; line-height: 1.55 !important; color: rgba(255,255,255,.72) !important; }
.inr-db-versie-knoppen { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; width: 100% !important; margin-top: 4px !important; }
.inr-db-versie-later { background: transparent !important; border: 1px solid rgba(255,255,255,.18) !important; color: rgba(255,255,255,.75) !important; font-size: 15px !important; font-weight: 500 !important; cursor: pointer !important; padding: 12px 22px !important; border-radius: 11px !important; font-family: inherit !important; transition: color .15s ease, background .15s ease, border-color .15s ease !important; }
.inr-db-versie-later:hover { color: #fff !important; background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.3) !important; }
.inr-db-versie-nu { background: #fff !important; border: 1px solid #fff !important; color: #0E0E12 !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; padding: 12px 26px !important; border-radius: 11px !important; font-family: inherit !important; transition: filter .15s ease !important; }
.inr-db-versie-nu:hover { filter: brightness(.92) !important; }
@media (max-width: 480px) { .inr-db-versie-inner { padding: 30px 22px !important; } .inr-db-versie-knoppen { flex-direction: column-reverse !important; } .inr-db-versie-later, .inr-db-versie-nu { width: 100% !important; } }


/* ═══════════════════════════════════════════════════════════════════════════
   ENTREE-SFEER (0.99.644)
   Het openingsscherm (afslag voor beheerder/trainer én de thuisbasis voor de
   deelnemer) krijgt diepte: een levend achtergrondveld waar de kaarten echt
   BOVENOP liggen. Voorheen was de achtergrond bijna wit en de kaarten wit, dus
   er was geen contrast en zweefde er niets.
   Alles hieronder is puur visueel: geen structuur, geen data, geen HTML-
   wijziging. Deze hele sectie kan zonder gevolgen worden verwijderd.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Het veld. Een zacht verloop in de INR-tinten, zodat het scherm een RUIMTE
   wordt in plaats van een blad papier. Alleen op het kiesscherm (de entree),
   niet op de werkschermen: daar telt rust boven sfeer. */
.inr-db-root:has(.inr-db-kiesscherm) {
	background: linear-gradient(168deg, #F7F9FF 0%, #EFF4FF 38%, #F4F1FD 72%, #FBF7FD 100%) !important;
}
.inr-db-root:has(.inr-db-kiesscherm) .inr-db-bg { border-radius: 18px !important; }

/* De blobs mogen weer ademen. Groter, zachter, en met twee TINTEN (blauw en
   paars uit de INR-familie) zodat het veld leeft in plaats van egaal blauw te
   zijn. Dit is het niveau van het inlogscherm, dat al bewezen goed voelt. */
.inr-db-root:has(.inr-db-kiesscherm) .inr-db-blob { filter: blur(90px) !important; opacity: .55 !important; }
.inr-db-root:has(.inr-db-kiesscherm) .inr-db-blob.b1 {
	width: 620px !important; height: 620px !important; top: -180px !important; right: 2% !important;
	background: radial-gradient(circle, rgba(0,123,255,.42), transparent 68%) !important;
}
.inr-db-root:has(.inr-db-kiesscherm) .inr-db-blob.b2 {
	width: 560px !important; height: 560px !important; bottom: -120px !important; left: 4% !important;
	background: radial-gradient(circle, rgba(116,72,253,.34), transparent 68%) !important;
}
/* Een derde, warme gloed rechtsonder geeft het veld een lichtbron en voorkomt
   dat de twee blobs als "twee vlekken" lezen. Puur licht, geen vorm. */
.inr-db-root:has(.inr-db-kiesscherm) .inr-db-bg::after {
	content: '' !important; position: absolute !important;
	width: 460px !important; height: 460px !important; right: 12% !important; bottom: 6% !important;
	border-radius: 50% !important; pointer-events: none !important;
	background: radial-gradient(circle, rgba(253,118,52,.14), transparent 70%) !important;
	filter: blur(90px) !important;
}

/* ── De kaarten liggen nu ECHT op iets ──
   LET OP het onderscheid, dit is wezenlijk:
   - De HERO (naar een klant) is een GEKLEURDE kaart: blauw verloop, witte tekst,
     eigen zwevende bollen. Die heeft zijn eigen identiteit en krijgt GEEN glas
     (dat zou zijn blauw wegnemen en de witte tekst onleesbaar maken). Hij krijgt
     alleen een diepere schaduw, zodat hij mee-zweeft boven het nieuwe veld.
   - De NEUTRALE kaarten (eigen omgeving, tegels) waren dicht wit. Die krijgen een
     glaslaag zodat het veld er subtiel doorheen schemert. Dat geeft de diepte. */
.inr-db-kiesscherm .inr-db-werk2,
.inr-db-kiesscherm .inr-db-kies-tegel {
	background: rgba(255,255,255,.72) !important;
	backdrop-filter: blur(24px) saturate(150%) !important;
	-webkit-backdrop-filter: blur(24px) saturate(150%) !important;
	border: 1px solid rgba(255,255,255,.85) !important;
	box-shadow:
		0 1px 2px rgba(15,23,42,.03),
		0 18px 40px -20px rgba(37,58,124,.28),
		0 40px 80px -40px rgba(37,58,124,.20) !important;
}
/* De hero houdt zijn blauw; alleen de schaduw wordt dieper en kleurt mee, zodat
   ook hij op het veld ligt in plaats van op papier. Achtergrond NIET aanraken. */
.inr-db-kiesscherm a.inr-db-hero {
	box-shadow:
		0 1px 2px rgba(15,23,42,.04),
		0 22px 46px -20px rgba(11,66,160,.42),
		0 46px 90px -44px rgba(11,66,160,.32) !important;
}
/* Bij aanraking komt de kaart naar je toe. Subtiel, maar het bevestigt dat je
   er bent: de kaart licht op, de schaduw verdiept, hij tilt een fractie. */
.inr-db-kiesscherm .inr-db-werk2:hover,
.inr-db-kiesscherm .inr-db-kies-tegel:hover {
	background: rgba(255,255,255,.86) !important;
	transform: translateY(-3px) !important;
	box-shadow:
		0 1px 2px rgba(15,23,42,.04),
		0 26px 50px -20px rgba(37,58,124,.34),
		0 52px 96px -44px rgba(37,58,124,.26) !important;
}
.inr-db-kiesscherm a.inr-db-hero:hover {
	transform: translateY(-3px) !important;
	box-shadow:
		0 1px 2px rgba(15,23,42,.05),
		0 30px 58px -20px rgba(11,66,160,.48),
		0 60px 110px -48px rgba(11,66,160,.38) !important;
}

/* ── Typografie met ritme ──
   De titel mag groter en zelfverzekerder; de eyebrow krijgt de accentkleur in
   plaats van grijs, zodat er een merkteken in de kop zit. */
.inr-db-kiesscherm .inr-db-kiesscherm-eyebrow {
	color: var(--inr-accent) !important;
	opacity: .85 !important;
}
.inr-db-kiesscherm .inr-db-kiesscherm-titel {
	font-size: 44px !important;
	letter-spacing: -.03em !important;
}
.inr-db-kiesscherm .inr-db-kiesscherm-lead {
	color: #5A6478 !important;
	max-width: 60ch !important;
}

/* De kop-knoppen (profiel, uitloggen, weer, teller) krijgen dezelfde glaslaag,
   zodat ze bij het veld horen in plaats van erop geplakt te zijn. */
.inr-db-kiesscherm .inr-db-profiel-knop,
.inr-db-kiesscherm .inr-db-uitlog-kop,
.inr-db-kiesscherm .inr-db-weer,
.inr-db-kiesscherm .inr-db-aanwezig,
.inr-db-kiesscherm .inr-db-kies-changelog-knop {
	background: rgba(255,255,255,.7) !important;
	backdrop-filter: blur(18px) saturate(150%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(150%) !important;
	border: 1px solid rgba(255,255,255,.8) !important;
	box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 12px 26px -16px rgba(37,58,124,.24) !important;
}

/* Respecteer wie minder beweging of doorzichtigheid wil. */
@media (prefers-reduced-transparency: reduce) {
	.inr-db-kiesscherm .inr-db-werk2,
	.inr-db-kiesscherm .inr-db-kies-tegel {
		background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	.inr-db-kiesscherm .inr-db-hero:hover,
	.inr-db-kiesscherm .inr-db-werk2:hover,
	.inr-db-kiesscherm .inr-db-kies-tegel:hover { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   De wisselaar onderaan het scherm

   De omgevingen van het dashboard zijn losse schermen met elk een eigen adres.
   Er was geen vaste plek om daartussen te wisselen: op het startscherm en de
   klantkiezer is er niet eens een menu. Deze balk loopt op elke pagina mee en
   toont de plekken waar je mag komen, met de huidige plek gemarkeerd.

   Inklappen maakt er een bolletje van linksonder, op precies de plek waar de
   gear stond. De gear zelf zit in de balk verwerkt, zodat er niet twee losse
   dingen naast elkaar zweven.
   ══════════════════════════════════════════════════════════════════════════ */

/* De oude losse gear verdwijnt: hij zit nu in de balk. Blijft er om wat voor
   reden dan ook geen balk staan (bijvoorbeeld bij een deelnemer met maar een
   bestemming), dan hoort de gear er wel gewoon te zijn. */
body.inr-ws-aan .inr-cb-gear { display: none !important; }

/* Pantser tegen het thema. De balk hangt in de footer, dus buiten .inr-db-root,
   en erft daardoor het lettertype van de pagina in plaats van dat van het
   dashboard. Hier zetten we het terug, net zoals de gear dat doet. */
.inr-ws, .inr-ws * {
	box-sizing: border-box !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
	margin: 0 !important;
	max-width: none !important;
	text-transform: none !important;
}

.inr-ws {
	position: fixed !important; left: 0 !important; right: 0 !important;
	bottom: 24px !important; z-index: 2147483639 !important;
	display: flex !important; justify-content: center !important;
	pointer-events: none !important;
}
.inr-ws[hidden] { display: none !important; }

/* Staat het uitschuifmenu open, dan gaat de balk weg. Dat menu schuift over de
   volle hoogte van het scherm in, en de balk lag daar overheen: precies over de
   knoppen onderin het menu, die dan niet meer aan te tikken waren.

   Bewust buiten een media-query: het menu kan openstaan tot 768px breed, en de
   balk heeft zijn eigen grens op 640px. Stonden ze niet gelijk, dan bleef het
   probleem bestaan op de breedtes daartussen. */
body.inr-db-menu-open .inr-ws { display: none !important; }

.inr-ws-pil {
	display: inline-flex !important; align-items: center !important; gap: 2px !important;
	padding: 6px !important; border-radius: 999px !important;
	background: rgba(255,255,255,.82) !important;
	backdrop-filter: blur(24px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
	border: 1px solid rgba(255,255,255,.9) !important;
	box-shadow: 0 12px 34px -10px rgba(11,11,15,.30), 0 2px 6px rgba(11,11,15,.08) !important;
	pointer-events: auto !important;
	transition: opacity .26s ease, transform .42s cubic-bezier(.4,0,.2,1) !important;
}

.inr-ws-knop {
	display: inline-flex !important; align-items: center !important; gap: 8px !important;
	height: 40px !important; padding: 0 16px !important;
	border: 0 !important; border-radius: 999px !important; background: transparent !important;
	color: #475569 !important; cursor: pointer !important;
	font-size: 13.5px !important; font-weight: 500 !important; line-height: 1 !important;
	text-decoration: none !important; white-space: nowrap !important;
	transition: background .16s ease, color .16s ease !important;
}
.inr-ws-knop:hover { background: rgba(15,23,42,.06) !important; color: #0F172A !important; }
.inr-ws-knop.is-actief { background: #0B0B0F !important; color: #fff !important; }
.inr-ws-icoon { display: inline-flex !important; flex: 0 0 auto !important; }
.inr-ws-icoon svg { width: 17px !important; height: 17px !important; display: block !important; }

/* De gear en de vouwknop zijn vierkant: alleen een icoon. */
.inr-ws-gear, .inr-ws-vouw { padding: 0 !important; width: 40px !important; justify-content: center !important; }
.inr-ws-scheiding {
	width: 1px !important; height: 22px !important; margin: 0 4px !important;
	background: rgba(15,23,42,.10) !important; flex: 0 0 auto !important;
}

/* Ingeklapt: een bolletje linksonder, precies waar de gear stond. */
.inr-ws-bol {
	display: flex !important; position: fixed !important;
	left: 24px !important; bottom: 24px !important;
	width: 52px !important; height: 52px !important; padding: 0 !important;
	align-items: center !important; justify-content: center !important;
	border: 1px solid rgba(15,23,42,.10) !important; border-radius: 999px !important;
	background: #fff !important; color: #0B0B0F !important; cursor: pointer !important;
	box-shadow: 0 12px 32px -10px rgba(11,11,15,.35), 0 2px 6px rgba(11,11,15,.10) !important;
}
.inr-ws-bol svg { width: 22px !important; height: 22px !important; display: block !important; }
.inr-ws-bol:hover {
	transform: translateY(-2px) !important; color: #7448FD !important;
	box-shadow: 0 18px 42px -12px rgba(11,11,15,.42), 0 3px 8px rgba(11,11,15,.12) !important;
}

/* Het inklappen laten zien in plaats van omschakelen.

   Zonder animatie verdwijnt de balk uit het midden en verschijnt er een bolletje
   linksonder, en dan is niet duidelijk dat dat hetzelfde ding is. Nu krimpt de
   balk naar de hoek toe: hij schuift naar links, wordt kleiner en vervaagt,
   terwijl het bolletje op diezelfde plek opkomt. Zo zie je waar hij heen gaat en
   waar je hem terugvindt.

   De richting rekenen we in JavaScript uit, want hoe ver het naar links is hangt
   af van de breedte van het scherm en van de balk zelf. Die waarden komen binnen
   als --ws-x en --ws-y. */
.inr-ws-pil {
	transform-origin: left center !important;
	will-change: transform, opacity !important;
}
.inr-ws.is-dicht .inr-ws-pil {
	opacity: 0 !important;
	transform: translate(var(--ws-x, -40vw), var(--ws-y, 0)) scale(.28) !important;
	pointer-events: none !important;
}
.inr-ws-bol {
	opacity: 0 !important; transform: scale(.4) !important;
	pointer-events: none !important;
	transition: opacity .2s ease, transform .34s cubic-bezier(.34,1.4,.5,1), color .3s, box-shadow .4s !important;
}
.inr-ws.is-dicht .inr-ws-bol {
	display: flex !important; opacity: 1 !important; transform: scale(1) !important;
	pointer-events: auto !important;
	transition-delay: .12s !important;
}
.inr-ws.is-dicht .inr-ws-bol:hover { transform: translateY(-2px) scale(1) !important; }

/* Bij binnenkomst geen animatie: stond de balk ingeklapt, dan hoort hij er
   meteen zo te staan en niet eerst weg te schuiven. */
.inr-ws.geen-animatie .inr-ws-pil,
.inr-ws.geen-animatie .inr-ws-bol { transition: none !important; }

/* Wie liever geen beweging ziet, krijgt gewoon de omschakeling. */
@media (prefers-reduced-motion: reduce) {
	.inr-ws-pil, .inr-ws-bol { transition: none !important; }
	.inr-ws.is-dicht .inr-ws-pil { transform: none !important; }
}

/* Op een smal scherm: de balk over de volle breedte, labels weg zodat de
   knoppen niet gaan verspringen. */
@media (max-width: 640px) {
	.inr-ws { bottom: 14px !important; padding: 0 12px !important; }
	.inr-ws-pil { width: 100% !important; justify-content: space-around !important; gap: 0 !important; }
	.inr-ws-label { display: none !important; }
	.inr-ws-knop { padding: 0 !important; width: 44px !important; justify-content: center !important; }
	.inr-ws-bol { left: 14px !important; bottom: 14px !important; }

	/* Op een telefoon staat de balk vlak boven de rand van het scherm. De diepe
	   schaduw die op een groot scherm mooi zweeft, wordt daar een donkere vlek
	   onder de balk. Hier houden we het licht: een smalle rand en net genoeg
	   schaduw om de balk los te laten komen van de inhoud erachter. */
	.inr-ws-pil {
		box-shadow: 0 4px 16px -6px rgba(11,11,15,.16), 0 1px 3px rgba(11,11,15,.06) !important;
		background: rgba(255,255,255,.92) !important;
		border-color: rgba(15,23,42,.08) !important;
	}
	.inr-ws-bol {
		box-shadow: 0 4px 16px -6px rgba(11,11,15,.20), 0 1px 3px rgba(11,11,15,.08) !important;
		border-color: rgba(15,23,42,.10) !important;
	}
}


/* ══════════════════════════════════════════════════════════════════════════
   De smalle zijbalk staat bewust ONDERAAN dit bestand.

   Deze regels moeten de gewone zijbalk-stijlen overschrijven. Bij twee regels
   met dezelfde kracht wint in CSS degene die het laatst staat. Toen dit blok
   nog bovenaan stond, won de gewone .inr-db-uitlog-knop van verderop, en
   liepen de knoppen van Profiel en Uitloggen buiten de smalle balk.

   Zet nieuwe menu-smal regels dus ook hier, niet ergens hogerop.
   ══════════════════════════════════════════════════════════════════════════ */

/* Smalle zijbalk.
   Wie in een hoofdstuk zit heeft het menu meestal niet nodig. In smalle stand
   blijven alleen de iconen staan en gaat de vrijgekomen ruimte naar de inhoud.
   De keuze wordt in de browser onthouden, per gebruiker en per apparaat.

   LET OP bij aanpassen: de zijbalk wordt door TWEE kanten gevuld. De vaste
   menu-knoppen van het klantdashboard komen uit frontend.php en heten
   .inr-db-nav-item. De leeromgeving zet daar zijn eigen knoppen neer vanuit
   leeromgeving.js, en die heten .inr-leerb-voortgang-knop (de menu-items) en
   .inr-leerb-rij (de mappen). Beide moeten hier staan, anders zie je in de
   leeromgeving alleen samengedrukte tekst.

   Alles hier is puur weergave: knoppen en hun werking blijven zoals ze zijn,
   we laten alleen de teksten weg. */
.inr-db-root.menu-smal .inr-db-shell { grid-template-columns: 90px 1fr 320px !important; }
.inr-db-root.menu-smal.tool-focus .inr-db-shell { grid-template-columns: 90px 1fr !important; }
.inr-db-root.menu-smal.inr-db-leeromgeving-modus .inr-db-shell,
.inr-db-leeromgeving-modus.menu-smal .inr-db-shell { grid-template-columns: 90px 1fr !important; }
.inr-db-root.menu-smal .inr-db-sidebar {
	padding: 18px 10px !important; align-items: center !important; overflow: hidden !important;
}/* Alle teksten weg. Wat overblijft zijn de iconen. */
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-brand-text,
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-nav-label,
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-nav-item > span:not(.inr-db-nav-icon):not(.inr-db-nav-telling),
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-leerboom,
.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-beheer-toggle,
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-tools-kop > span:not(.inr-db-tools-icon),
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-tools-inhoud,
.inr-db-root.menu-smal .inr-db-sidebar-versie,
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-taal,
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-pen-knop { display: none !important; }/* De vaste menu-knoppen (klantdashboard). */
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-nav-item {
	width: 46px !important; height: 46px !important; padding: 0 !important;
	justify-content: center !important; gap: 0 !important; margin: 0 auto 4px !important;
	position: relative !important;
}.inr-db-root.menu-smal .inr-db-sidebar .inr-db-nav-rij { justify-content: center !important; }.inr-db-root.menu-smal .inr-db-sidebar .inr-db-nav-greep,
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-nav-oog { display: none !important; }
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-nav { width: 100% !important; }
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-brand { justify-content: center !important; margin-bottom: 12px !important; }
/* De menu-knoppen van de leeromgeving (Welkom,
Jouw voortgang,
Certified,
Literatuur,
Onboarding,
Trivia,
Health,
Jouw unieke materiaal). Die komen uit
   leeromgeving.js en hebben hun label als kale tekst achter het icoon staan.
   Daarom verbergen we hier ALLE inhoud en zetten we het icoon terug. */
.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-voortgang-knop {
	width: 46px !important; height: 46px !important; padding: 0 !important;
	justify-content: center !important; gap: 0 !important; margin: 0 auto 4px !important;
	font-size: 0 !important; line-height: 0 !important; overflow: hidden !important;
	position: relative !important; white-space: nowrap !important;
}.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-voortgang-icon {
	font-size: 0 !important; display: flex !important; align-items: center !important;
	justify-content: center !important; margin: 0 !important; flex: 0 0 auto !important;
}
.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-voortgang-icon svg { width: 19px !important; height: 19px !important; }
.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-materiaal-stip { display: none !important; }
/* De mappen: helemaal weg,
want zes identieke mapjes zeggen niets. Ze worden
   vervangen door het enkele knopje hieronder. */
.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-tak,
.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-rij,
.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-leeg,
.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-toevoeg,
.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-import { display: none !important; }/* inr-leerb-mini alleen binnen de zijbalk verbergen: diezelfde klasse wordt ook
   in de hoofdinhoud gebruikt (vragen bewerken),
en daar moet hij blijven. */
.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-mini { display: none !important; }/* Het telletje bij Updates: een stipje rechtsboven op het icoon. */
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-nav-telling {
	position: absolute !important; top: 5px !important; right: 5px !important;
	min-width: 8px !important; width: 8px !important; height: 8px !important;
	padding: 0 !important; font-size: 0 !important; line-height: 0 !important;
	border-radius: 999px !important; overflow: hidden !important;
}.inr-db-root.menu-smal .inr-db-sidebar .inr-db-nav-telling:not(.actief) { display: none !important; }

/* Eén mapje in plaats van de hele boom. Klik = balk weer open. */
.inr-db-leerboom-smal { display: none !important; }
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-leerboom-smal {
	display: flex !important; align-items: center !important; justify-content: center !important;
	width: 46px !important; height: 46px !important; margin: 8px auto !important;
	border: 0 !important; border-radius: 12px !important; cursor: pointer !important;
	background: rgba(116,72,253,.09) !important; color: #7448FD !important; padding: 0 !important;
}
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-leerboom-smal svg { width: 20px !important; height: 20px !important; }
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-leerboom-smal:hover { background: rgba(116,72,253,.17) !important; }
/* Tools: alleen het gereedschapsicoon,
de lijst eronder klapt weg. */
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-tools-kop {
	width: 46px !important; height: 46px !important; padding: 0 !important;
	justify-content: center !important; gap: 0 !important; margin: 0 auto !important;
}.inr-db-root.menu-smal .inr-db-sidebar .inr-db-tools-blok { width: 100% !important; }/* Profiel en uitloggen: alleen het icoon. */
/* LET OP: deze regels moeten binnen .inr-db-sidebar blijven. De klasse
   inr-db-uitlog-knop wordt ook gebruikt op het startscherm en de klantkiezer,
waar helemaal geen zijbalk staat. Zonder die inperking kromp de knop Uitloggen
   daar mee tot een rond icoontje. */
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-uitlog-knop {
	width: 46px !important; height: 46px !important; padding: 0 !important;
	justify-content: center !important; gap: 0 !important; margin: 0 auto 6px !important;
	font-size: 0 !important; overflow: hidden !important;
}
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-uitlog-knop span { display: none !important; }
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-uitlog-knop svg { margin: 0 !important; flex: 0 0 auto !important; }
.inr-db-root.menu-smal .inr-db-sidebar-foot {
	width: 100% !important; align-items: center !important;
	padding-left: 0 !important; padding-right: 0 !important;
}/* De knoppen mogen nooit breder worden dan er ruimte is. Zonder deze grens
   liepen ze buiten de balk zodra de kolom een paar pixels te krap stond. */
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-uitlog-knop,
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-nav-item,
.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-voortgang-knop,
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-leerboom-smal,
.inr-db-root.menu-smal .inr-db-sidebar .inr-db-tools-kop {
	max-width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important;
	align-self: center !important; box-sizing: border-box !important;
}

/* Het knopje om te wisselen. */
.inr-db-smal-knop {
	position: absolute !important; top: 14px !important; right: 12px !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	width: 26px !important; height: 26px !important; padding: 0 !important;
	border: 1px solid rgba(15,23,42,.10) !important; border-radius: 8px !important;
	background: #fff !important; color: #64748B !important; cursor: pointer !important;
	transition: background .15s ease, color .15s ease !important; z-index: 4 !important;
}
.inr-db-smal-knop svg { width: 15px !important; height: 15px !important; }
.inr-db-smal-knop:hover { background: #F1F5F9 !important; color: #0F172A !important; }
/* Het inklap-knopje hangt in de hoek van de zijbalk, dus die moet een eigen
   positie hebben. Alleen op grote schermen: op mobiel staat de zijbalk op
   'fixed' om als paneel in te schuiven, en die regel stond hier eerder zonder
   grens. Daardoor viel het uitschuifmenu terug op 'relative' en schoof het mee
   met de pagina in plaats van vast te staan; het menu kwam dan nooit in beeld. */
@media (min-width: 769px) {
	.inr-db-sidebar { position: relative !important; }
}
.inr-db-root.menu-smal .inr-db-smal-knop {
	position: static !important; margin: 0 auto 10px !important; transform: rotate(180deg) !important;
}

/* Op telefoon en tablet schuift het menu al als paneel in; daar heeft dit geen zin. */
@media (max-width: 1024px) {
	.inr-db-smal-knop { display: none !important; }
}

/* Op telefoon en tablet schuift het menu als paneel in beeld. De smalle stand
   heeft daar geen enkele functie en zit het uitschuifmenu juist in de weg: die
   krimpt de kolom naar 90 pixels terwijl het paneel 280 breed hoort te zijn.
   Daarom zetten we alles wat bij de smalle stand hoort hier volledig uit.

   De grens staat op 768, gelijk aan die van het uitschuifmenu zelf. Stond hij
   hoger of lager, dan zou er een reeks breedtes overblijven waarop de twee
   elkaar alsnog tegenwerken. */
@media (max-width: 768px) {
	.inr-db-root.menu-smal .inr-db-shell { grid-template-columns: 1fr !important; }
	.inr-db-root.menu-smal .inr-db-sidebar {
		width: 280px !important; max-width: 85vw !important;
		padding: 22px 16px !important; align-items: stretch !important;
		overflow-y: auto !important;
	}
	/* Alles weer laten zien wat de smalle stand had weggehaald. */
	.inr-db-root.menu-smal .inr-db-sidebar .inr-db-brand-text,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-db-nav-label,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-db-nav-item > span,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-db-leerboom,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-beheer-toggle,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-db-tools-kop > span,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-db-tools-inhoud,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-db-sidebar-versie,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-db-taal,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-db-pen-knop,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-tak,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-rij,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-leeg,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-toevoeg,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-import { display: revert !important; }
	.inr-db-root.menu-smal .inr-db-sidebar .inr-db-uitlog-knop span { display: inline !important; }
	/* Het losse mapje hoort alleen bij de smalle stand. */
	.inr-db-root.menu-smal .inr-db-sidebar .inr-db-leerboom-smal { display: none !important; }
	/* Knoppen weer op volle breedte met hun tekst ernaast. */
	.inr-db-root.menu-smal .inr-db-sidebar .inr-db-nav-item,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-voortgang-knop,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-db-uitlog-knop,
	.inr-db-root.menu-smal .inr-db-sidebar .inr-db-tools-kop {
		width: auto !important; height: auto !important; margin: 0 0 4px !important;
		padding: 10px 12px !important; justify-content: flex-start !important;
		gap: 10px !important; font-size: revert !important; line-height: revert !important;
	}
	.inr-db-root.menu-smal .inr-db-sidebar .inr-leerb-voortgang-icon { font-size: revert !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Openstaande meldingen: de tellers op het startscherm en de klantkiezer

   Zonder deze tellers moest je elke klant openen om te zien of er iets lag.
   Nu zie je het meteen: op het startscherm het totaal over jouw klanten, en
   op de klantkiezer per klant.
   ══════════════════════════════════════════════════════════════════════════ */
.inr-db-open-badge {
	position: absolute !important; top: 18px !important; right: 18px !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	min-width: 24px !important; height: 24px !important; padding: 0 7px !important;
	border-radius: 999px !important; box-sizing: border-box !important;
	background: #FD4C5C !important; color: #fff !important;
	font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important;
	letter-spacing: 0 !important;
	box-shadow: 0 2px 8px -2px rgba(253,76,92,.55) !important;
	z-index: 3 !important;
}
/* Op een klantkaart in de rechterbovenhoek. De link eronder is een kolom, dus
   naast de naam zetten zou hem eronder duwen; vandaar de hoek. */
.inr-db-open-badge-kaart {
	top: 10px !important; right: 10px !important;
	min-width: 21px !important; height: 21px !important; padding: 0 6px !important;
	font-size: 11px !important;
}
.inr-db-klant-kaart { position: relative !important; }
/* De badge hangt in de hoek van de kaart. Zonder deze regel zou hij zich
   vastzetten op de pagina in plaats van op de kaart. */
.inr-db-hero, .inr-db-werk2 { position: relative !important; }

/* ══════════════════════════════════════════════════════════════════════════
   De uitnodiging om intakes in te plannen

   Stond eerst in het aankondigingspaneel en moest met de hand getypt worden.
   Nu een blok boven de intake-instellingen: vink aan wie hem krijgt, druk op
   de knop, en daarna staat er wie hem wanneer verstuurde.
   ══════════════════════════════════════════════════════════════════════════ */
.inr-db-uitn {
	border: 1px solid rgba(15,23,42,.08) !important; border-radius: 16px !important;
	background: rgba(255,255,255,.7) !important; padding: 18px 20px !important;
	margin-bottom: 18px !important;
}
/* De kop is de knop waarmee je open- en dichtklapt. */
.inr-db-uitn-kop {
	display: flex !important; align-items: center !important; gap: 14px !important;
	width: 100% !important; padding: 0 !important; margin: 0 !important;
	border: 0 !important; background: transparent !important; cursor: pointer !important;
	text-align: left !important; font-family: inherit !important;
}
.inr-db-uitn-kop-tekst { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
.inr-db-uitn-kop strong { font-size: 15px !important; font-weight: 600 !important; color: #0F172A !important; }
.inr-db-uitn-kop span { font-size: 13px !important; font-weight: 300 !important; color: #64748B !important; line-height: 1.5 !important; }
.inr-db-uitn-chev {
	flex: 0 0 auto !important; margin-left: auto !important; color: #94A3B8 !important;
	display: flex !important; align-items: center !important;
	transition: transform .22s ease !important;
}
.inr-db-uitn-chev svg { width: 18px !important; height: 18px !important; }
.inr-db-uitn.is-open .inr-db-uitn-chev { transform: rotate(180deg) !important; }
.inr-db-uitn-body { margin-top: 16px !important; }
.inr-db-uitn-body[hidden] { display: none !important; }

/* Boven de lijst: hoeveel er gekozen zijn, en een knop voor alles aan of uit. */
.inr-db-uitn-regel {
	display: flex !important; align-items: center !important; justify-content: space-between !important;
	gap: 12px !important; margin-bottom: 8px !important; padding: 0 10px !important;
	font-size: 12.5px !important; color: #64748B !important; font-weight: 300 !important;
}
.inr-db-uitn-alles {
	border: 0 !important; background: transparent !important; padding: 4px 8px !important;
	border-radius: 8px !important; cursor: pointer !important;
	font-size: 12.5px !important; font-weight: 500 !important; color: #7448FD !important;
	font-family: inherit !important;
}
.inr-db-uitn-alles:hover { background: rgba(116,72,253,.08) !important; }

/* De lijst zelf krijgt een maximum: bij vijftien accounts wordt hij anders
   langer dan het scherm en verdwijnt de verstuurknop uit beeld. */
.inr-db-uitn-mensen { max-height: 260px !important; overflow-y: auto !important; }

.inr-db-uitn-mensen { display: flex !important; flex-direction: column !important; gap: 2px !important; margin-bottom: 14px !important; }
.inr-db-uitn-persoon {
	display: flex !important; align-items: center !important; gap: 10px !important;
	padding: 6px 10px !important; border-radius: 10px !important; cursor: pointer !important;
	transition: background .15s ease !important;
}
.inr-db-uitn-persoon:hover { background: rgba(15,23,42,.04) !important; }
.inr-db-uitn-persoon input { margin: 0 !important; flex: 0 0 auto !important; }
.inr-db-uitn-naam { font-size: 13.5px !important; font-weight: 500 !important; color: #0F172A !important; }
.inr-db-uitn-mail { font-size: 12px !important; font-weight: 300 !important; color: #94A3B8 !important; margin-left: auto !important; }

.inr-db-uitn-voet { display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap !important; }
.inr-db-uitn-melding { font-size: 13px !important; color: #64748B !important; }
.inr-db-uitn-melding.is-fout { color: #C0392B !important; }
.inr-db-uitn-leeg { font-size: 13px !important; color: #94A3B8 !important; font-weight: 300 !important; }

/* Verstuurd: rustig en definitief, met een vinkje. */
.inr-db-uitn.is-verstuurd { background: rgba(90,195,128,.07) !important; border-color: rgba(90,195,128,.25) !important; }
.inr-db-uitn-klaar { display: flex !important; align-items: center !important; gap: 14px !important; }
.inr-db-uitn-vink {
	flex: 0 0 auto !important; width: 34px !important; height: 34px !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	border-radius: 999px !important; background: rgba(90,195,128,.18) !important; color: #3D9E63 !important;
}
.inr-db-uitn-vink svg { width: 17px !important; height: 17px !important; }
.inr-db-uitn-klaar-tekst { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
.inr-db-uitn-klaar-tekst strong { font-size: 14px !important; font-weight: 600 !important; color: #0F172A !important; }
.inr-db-uitn-klaar-tekst span { font-size: 12.5px !important; font-weight: 300 !important; color: #64748B !important; }
.inr-db-uitn-klaar .inr-db-knop-mini { margin-left: auto !important; flex: 0 0 auto !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Ontdek je leeromgeving: het paneel met de eerste stappen

   Rechtsonder in beeld, tegenover de wisselaar links. Vijf dingen die de moeite
   waard zijn, met een vinkje zodra ze gedaan zijn. Je kunt hem wegleggen, maar
   bij een volgend bezoek staat hij er weer. Pas als alles gedaan is verdwijnt
   hij voorgoed.
   ══════════════════════════════════════════════════════════════════════════ */

/* Pantser tegen het thema: dit hangt in de voettekst, buiten .inr-db-root. */
.inr-es, .inr-es * {
	box-sizing: border-box !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	letter-spacing: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	text-transform: none !important;
}

.inr-es {
	position: fixed !important; right: 24px !important; bottom: 24px !important;
	z-index: 2147483638 !important; pointer-events: none !important;
}
.inr-es[hidden] { display: none !important; }

.inr-es-paneel {
	width: 340px !important; max-width: calc(100vw - 48px) !important;
	padding: 18px !important; border-radius: 20px !important;
	background: rgba(255,255,255,.9) !important;
	backdrop-filter: blur(24px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
	border: 1px solid rgba(255,255,255,.9) !important;
	box-shadow: 0 16px 44px -12px rgba(11,11,15,.28), 0 2px 6px rgba(11,11,15,.07) !important;
	pointer-events: auto !important;
	transition: opacity .26s ease, transform .34s cubic-bezier(.4,0,.2,1) !important;
}

.inr-es-kop { display: flex !important; align-items: flex-start !important; gap: 12px !important; margin-bottom: 12px !important; }
.inr-es-kop-tekst { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
.inr-es-kop strong { font-size: 14.5px !important; font-weight: 600 !important; color: #0F172A !important; line-height: 1.3 !important; }
.inr-es-kop span { font-size: 12px !important; font-weight: 300 !important; color: #64748B !important; }
.inr-es-weg {
	flex: 0 0 auto !important; margin-left: auto !important;
	width: 26px !important; height: 26px !important; padding: 0 !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	border: 0 !important; border-radius: 8px !important; background: transparent !important;
	color: #94A3B8 !important; cursor: pointer !important;
	transition: background .15s ease, color .15s ease !important;
}
.inr-es-weg svg { width: 15px !important; height: 15px !important; }
.inr-es-weg:hover { background: rgba(15,23,42,.06) !important; color: #0F172A !important; }

/* Een dunne balk die volloopt. Zonder cijfers: het gaat om de beweging. */
.inr-es-balk {
	height: 4px !important; border-radius: 999px !important; overflow: hidden !important;
	background: rgba(15,23,42,.08) !important; margin-bottom: 14px !important;
}
.inr-es-balk span {
	display: block !important; height: 100% !important; border-radius: 999px !important;
	background: linear-gradient(90deg, #7448FD, #4F8BFF) !important;
	transition: width .4s cubic-bezier(.4,0,.2,1) !important;
}

.inr-es-lijst { list-style: none !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.inr-es-stap { display: flex !important; align-items: flex-start !important; gap: 10px !important; }
.inr-es-vink {
	flex: 0 0 auto !important; width: 19px !important; height: 19px !important; margin-top: 1px !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	border-radius: 999px !important; border: 1.6px solid rgba(15,23,42,.16) !important;
	color: transparent !important; transition: background .2s ease, border-color .2s ease, color .2s ease !important;
}
.inr-es-vink svg { width: 11px !important; height: 11px !important; }
.inr-es-stap.is-klaar .inr-es-vink { background: #3D9E63 !important; border-color: #3D9E63 !important; color: #fff !important; }
.inr-es-stap-tekst { display: flex !important; flex-direction: column !important; gap: 1px !important; min-width: 0 !important; }
.inr-es-stap-tekst strong { font-size: 13px !important; font-weight: 500 !important; color: #0F172A !important; line-height: 1.35 !important; }
.inr-es-stap-tekst > span { font-size: 11.5px !important; font-weight: 300 !important; color: #94A3B8 !important; line-height: 1.4 !important; }
.inr-es-stap.is-klaar .inr-es-stap-tekst strong { color: #94A3B8 !important; text-decoration: line-through !important; }
.inr-es-stap.is-klaar .inr-es-stap-tekst > span { display: none !important; }

/* Weggelegd: een bolletje rechtsonder, met het aantal dat nog openstaat. */
.inr-es-bol {
	display: flex !important; position: fixed !important;
	right: 24px !important; bottom: 24px !important;
	width: 52px !important; height: 52px !important; padding: 0 !important;
	align-items: center !important; justify-content: center !important;
	border: 1px solid rgba(15,23,42,.10) !important; border-radius: 999px !important;
	background: #fff !important; color: #7448FD !important; cursor: pointer !important;
	box-shadow: 0 12px 32px -10px rgba(11,11,15,.35), 0 2px 6px rgba(11,11,15,.10) !important;
	opacity: 0 !important; transform: scale(.4) !important; pointer-events: none !important;
	transition: opacity .2s ease, transform .34s cubic-bezier(.34,1.4,.5,1) !important;
}
.inr-es-bol svg { width: 22px !important; height: 22px !important; display: block !important; }
.inr-es-bol-teller {
	position: absolute !important; top: -2px !important; right: -2px !important;
	min-width: 20px !important; height: 20px !important; padding: 0 6px !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	border-radius: 999px !important; background: #FD4C5C !important; color: #fff !important;
	font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important;
}
.inr-es.is-weg .inr-es-paneel { opacity: 0 !important; transform: translateY(12px) scale(.94) !important; pointer-events: none !important; }
.inr-es.is-weg .inr-es-bol { opacity: 1 !important; transform: scale(1) !important; pointer-events: auto !important; transition-delay: .1s !important; }
.inr-es-bol:hover { transform: translateY(-2px) scale(1) !important; }

/* Bij het openen van het menu weg, net als de balk linksonder. */
body.inr-db-menu-open .inr-es { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.inr-es-paneel, .inr-es-bol, .inr-es-balk span { transition: none !important; }
}

/* Op een telefoon staat het paneel in de weg: daar begint hij altijd als
   bolletje, net als de wisselaar links. */
@media (max-width: 640px) {
	.inr-es { right: 14px !important; bottom: 14px !important; }
	.inr-es-bol { right: 14px !important; bottom: 14px !important; }
	.inr-es-paneel {
		width: calc(100vw - 28px) !important;
		box-shadow: 0 6px 20px -8px rgba(11,11,15,.20), 0 1px 3px rgba(11,11,15,.06) !important;
		background: rgba(255,255,255,.95) !important;
	}
}

/* Het paneel werkt zichzelf bij zonder dat de pagina herlaadt. Een stap die net
   is afgevinkt krijgt een kort zetje, zodat je ziet dat er iets gebeurde. */
.inr-es-stap.net-gedaan .inr-es-vink { animation: inrEsVink .45s cubic-bezier(.34,1.5,.5,1) !important; }
@keyframes inrEsVink {
	0%   { transform: scale(.6); }
	60%  { transform: scale(1.18); }
	100% { transform: scale(1); }
}

/* Alles gedaan: het paneel schuift weg en komt niet meer terug. */
.inr-es.is-af .inr-es-paneel,
.inr-es.is-af .inr-es-bol {
	opacity: 0 !important;
	transform: translateY(14px) scale(.94) !important;
	pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.inr-es-stap.net-gedaan .inr-es-vink { animation: none !important; }
}