/* =========================================================================
 * Vellinga KMS — klantportaal CSS (ENIGE bestand voor WEBPORTAL_CSS_URL)
 * Upload dit bestand als "Aangepaste CSS URL" in Setup -> WebPortaal.
 * releases/ en vellinga_portal.css (import) zijn niet nodig op de server.
 * build: vp-portal 1.2.27 (2026-06-03) — native main.container 1300px i.p.v. eldy 1130px
 * ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&family=Space+Grotesk:wght@500;600;700&display=swap");

/* ---------- Early paint (script zet data-vp-theme vóór dit bestand laadt) ---------- */
html[data-vp-theme="bold"],
html[data-vp-theme="bold"] body,
html[data-vp-theme="bold"] body[data-controller],
html[data-vp-theme="bold"] body[data-controller] main.container,
html[data-vp-theme="bold"] .vellinga-portal-v2 {
	background: #1a1c20 !important;
	color: #f3f4f6 !important;
}
html[data-vp-theme="tint"],
html[data-vp-theme="tint"] body,
html[data-vp-theme="tint"] body[data-controller],
html[data-vp-theme="tint"] body[data-controller] main.container,
html[data-vp-theme="tint"] .vellinga-portal-v2 {
	background: #eef1f8 !important;
	color: #1e3a5f !important;
}

/* ---------- Theme tokens (alleen via html[data-vp-theme]; geen kale .vellinga-portal-v2 = bold) ----------
 * Wrapper krijgt thema via html + JS (vellinga_portal_skin_attrs levert geen data-vp-theme meer). */
html[data-vp-theme="bold"] .vellinga-portal-v2,
.vellinga-portal-v2[data-vp-theme="bold"],
.vellinga-portal-v2 .vp-theme-switch[data-vp-theme="bold"],
#vp-theme-switch[data-vp-theme="bold"],
.vp-theme-switch[data-vp-theme="bold"] {
	--vp-accent: #ff2d4a;
	--vp-accent-hover: #e61e3a;
	--vp-accent-soft: #2a1a1d;
	--vp-accent-mid: #5a2730;
	--vp-bg: #1a1c20;
	--vp-surface: #242730;
	--vp-surface-2: #2b2f3a;
	--vp-text: #f3f4f6;
	--vp-text-mid: #b4b9c4;
	--vp-text-soft: #707784;
	--vp-line: #353a44;
	--vp-field: #2b2f3a;
	--vp-dot-ready: #34d058;
	--vp-dot-glow: rgba(52, 208, 88, 0.2);
	--vp-warn: #f59e0b;
	--vp-warn-soft: #3a2e15;
	--vp-dark-btn: #ff2d4a;
	--vp-dark-btn-hover: #e61e3a;
	--vp-font-head: "Space Grotesk", system-ui, sans-serif;
	--vp-head-size: 2.0625rem;
}

.vellinga-portal-v2[data-vp-theme="tint"],
html[data-vp-theme="tint"] .vellinga-portal-v2,
.vellinga-portal-v2 .vp-theme-switch[data-vp-theme="tint"],
#vp-theme-switch[data-vp-theme="tint"],
.vp-theme-switch[data-vp-theme="tint"] {
	--vp-accent: #c8102e;
	--vp-accent-hover: #a80d26;
	--vp-accent-soft: #f9e8eb;
	--vp-accent-mid: #e8a0ab;
	--vp-bg: #eef1f8;
	--vp-surface: #fff;
	--vp-surface-2: #f6f8fc;
	--vp-text: #1e3a5f;
	--vp-text-mid: #45597a;
	--vp-text-soft: #8a93a8;
	--vp-line: #e0e5f0;
	--vp-field: #eef1f8;
	--vp-dot-ready: #16a34a;
	--vp-dot-glow: rgba(22, 163, 74, 0.15);
	--vp-warn: #d97706;
	--vp-warn-soft: #fef3c7;
	--vp-dark-btn: #1e3a5f;
	--vp-dark-btn-hover: #16314f;
	--vp-font-head: "DM Serif Display", Georgia, serif;
	--vp-head-size: 2.125rem;
}

/* Bridge legacy vars inside v2 */
.vellinga-portal-v2 {
	--vellinga-red: var(--vp-accent);
	--vellinga-red-dark: var(--vp-accent-hover);
	--vellinga-red-hover: var(--vp-accent-hover);
	--vellinga-bg: var(--vp-bg);
	--vellinga-surface: var(--vp-surface);
	--vellinga-text: var(--vp-text);
	--vellinga-text-muted: var(--vp-text-mid);
	--vellinga-border: var(--vp-line);
	--vellinga-border-soft: var(--vp-line);
	--vellinga-thead-bg: var(--vp-surface-2);
	--vellinga-row-hover: var(--vp-surface-2);
	--vellinga-ok: var(--vp-dot-ready);
	--vellinga-radius: 8px;
	--vellinga-radius-lg: 14px;
	--vellinga-font-heading: "DM Sans", system-ui, sans-serif;
	--vellinga-font-body: "DM Sans", system-ui, sans-serif;
	font-family: "DM Sans", var(--vellinga-font-body);
	color: var(--vp-text);
}

.vellinga-portal-v2 {
	background-color: var(--vp-bg);
	transition: background 0.25s ease, color 0.25s ease;
}

.vellinga-portal-v2 .vp-page-header {
	margin-bottom: 1.5rem;
}

.vellinga-portal-v2 .vp-page-header h1,
.vellinga-portal-v2 h1.page-title {
	font-family: var(--vp-font-head);
	font-size: var(--vp-head-size);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 0.4rem;
	color: var(--vp-text);
}

.vellinga-portal-v2 .vp-page-header p,
.vellinga-portal-v2 > main > p.opacitymedium,
.vellinga-portal-v2 .vp-intro {
	font-size: 0.9375rem;
	color: var(--vp-text-soft);
	max-width: 60ch;
	line-height: 1.5;
	margin-bottom: 1rem;
}

/* Cards */
.vellinga-portal-v2 .vp-card {
	background: var(--vp-surface);
	border: 1px solid var(--vp-line);
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 1.25rem;
}

.vellinga-portal-v2 .vp-card-header {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--vp-line);
}

.vellinga-portal-v2 .vp-card-title {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.vellinga-portal-v2 .vp-card-sub {
	font-size: 0.8125rem;
	color: var(--vp-text-mid);
	margin-top: 0.35rem;
	line-height: 1.45;
}

html[data-vp-theme="bold"] .vellinga-portal-v2 .vp-page-header p,
html[data-vp-theme="bold"] .vellinga-portal-v2 > main > p.opacitymedium,
html[data-vp-theme="bold"] .vellinga-portal-v2 .vp-intro,
html[data-vp-theme="bold"] .vellinga-portal-v2 .vp-card-sub {
	color: var(--vp-text-mid);
}

/* Shell: main + sticky cart */
.vellinga-portal-v2 .vp-shell {
	display: grid;
	grid-template-columns: 1fr 21.25rem;
	gap: 1.75rem;
	align-items: start;
}

.vellinga-portal-v2 .vp-cart {
	background: var(--vp-surface);
	border: 1px solid var(--vp-line);
	border-radius: 14px;
	position: sticky;
	top: 4.75rem;
	max-height: calc(100vh - 6.25rem);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: var(--vp-text);
}

.vellinga-portal-v2 .vp-cart-header {
	padding: 1.1rem 1.25rem;
	border-bottom: 1px solid var(--vp-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.vellinga-portal-v2 .vp-cart-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--vp-text);
}

.vellinga-portal-v2 .vp-cart-count {
	background: var(--vp-accent);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	min-width: 1.25rem;
	height: 1.25rem;
	border-radius: 10px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 0.35rem;
	transition: transform 0.2s;
}

.vellinga-portal-v2 .vp-cart-count-bump {
	transform: scale(1.3);
}

.vellinga-portal-v2 .vp-cart-items {
	overflow-y: auto;
	flex: 1;
	min-height: 4rem;
}

.vellinga-portal-v2 .vp-cart-item {
	padding: 0.8rem 1.25rem;
	border-bottom: 1px solid var(--vp-line);
}

.vellinga-portal-v2 .vp-ci-name {
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--vp-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vellinga-portal-v2 .vp-ci-meta {
	font-size: 0.75rem;
	color: var(--vp-text-soft);
	margin-top: 0.2rem;
}

.vellinga-portal-v2 .vp-cart-medew-ack {
	margin: 0.75rem 0 0.65rem;
	padding: 0.65rem 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--vp-text);
	background: var(--vp-warn-soft);
	border: 1px solid var(--vp-warn);
	border-radius: 8px;
	box-sizing: border-box;
	width: 100%;
}

.vellinga-portal-v2 .vp-cart-medew-warn {
	margin: 0 0 0.5rem;
	padding: 0;
	font-size: inherit;
	font-weight: 600;
	line-height: 1.45;
	color: var(--vp-text);
}

.vellinga-portal-v2 .vp-cart-medew-ack-lbl {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	cursor: pointer;
	color: var(--vp-text);
	font-size: inherit;
	line-height: 1.45;
	background: transparent;
}

.vellinga-portal-v2 .vp-cart-medew-ack-lbl input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	min-width: 1.25rem;
	min-height: 1.25rem;
	margin: 0;
	padding: 0;
	border: 2px solid var(--vp-warn);
	border-radius: 4px;
	background-color: var(--vp-surface);
	background-image: none;
	cursor: pointer;
	box-sizing: border-box;
	vertical-align: middle;
	opacity: 1;
	visibility: visible;
}

.vellinga-portal-v2 .vp-cart-medew-ack-lbl input[type="checkbox"]:checked {
	background-color: var(--vp-warn);
	border-color: var(--vp-warn);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.2 8.4 11 1.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.7rem;
}

.vellinga-portal-v2 .vp-cart-medew-ack:hover {
	background: var(--vp-warn-soft);
	color: var(--vp-text);
}

.vellinga-portal-v2 .vp-cart-medew-ack-lbl:hover {
	background: transparent;
	color: var(--vp-text);
}

.vellinga-portal-v2 .vp-cart-note {
	padding: 0.5rem 1.25rem 0;
}

.vellinga-portal-v2 .vp-cart-note label {
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--vp-text-soft);
	display: block;
	margin-bottom: 0.35rem;
}

.vellinga-portal-v2 .vp-cart-footer {
	padding: 1.1rem 1.25rem;
	border-top: 1px solid var(--vp-line);
	background: var(--vp-surface-2);
}

.vellinga-portal-v2 .vp-cart-summary {
	display: flex;
	justify-content: space-between;
	font-size: 0.8125rem;
	margin-bottom: 0.35rem;
}

.vellinga-portal-v2 .vp-cart-summary .lbl {
	color: var(--vp-text-soft);
}

.vellinga-portal-v2 .vp-cart-summary .val {
	font-weight: 600;
	color: var(--vp-text);
}

.vellinga-portal-v2 .vp-btn-checkout,
.vellinga-portal-v2 #cr-portal-review-btn,
.vellinga-portal-v2 .vp-cart-footer .button.button-primary {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100%;
	margin: 0 !important;
	background: var(--vp-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 0.85rem 1rem !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	line-height: 1.2 !important;
	text-align: center !important;
	cursor: pointer;
	transition: background 0.15s;
	box-sizing: border-box !important;
}

.vellinga-portal-v2 .vp-btn-checkout:hover,
.vellinga-portal-v2 #cr-portal-review-btn:hover {
	background: var(--vp-accent-hover) !important;
}

.vellinga-portal-v2 .vp-empty-state {
	padding: 2rem 1.25rem;
	text-align: center;
	color: var(--vp-text-soft);
}

.vellinga-portal-v2 .vp-empty-ico {
	font-size: 2rem;
	opacity: 0.35;
	margin-bottom: 0.5rem;
}

.vellinga-portal-v2 .vp-empty-title {
	font-size: 0.84rem;
	font-weight: 500;
	color: var(--vp-text-mid);
}

/* Herbestellen: spring-knop alleen smal scherm (desktop heeft cart sticky rechts) */
.clothingreorder-portal-skin .vp-cr-jump-order {
	display: none;
}

/* Order chips (drafts) */
.vellinga-portal-v2 .vp-order-chips {
	display: flex !important;
	flex-flow: row wrap !important;
	align-items: center !important;
	gap: 0.45rem 0.5rem !important;
	margin-bottom: 0.75rem;
	width: 100%;
}

.vellinga-portal-v2 details.cr-draft {
	background: var(--vp-surface);
	border: 1px solid var(--vp-line);
	border-radius: 9px;
	padding: 0.55rem 0.95rem;
	margin-bottom: 0.5rem;
}

.vellinga-portal-v2 details.cr-draft summary .link {
	color: var(--vp-accent);
	font-weight: 600;
}

/* Search bar */
.vellinga-portal-v2 .vp-search-bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--vp-surface);
	border: 1px solid var(--vp-line);
	border-radius: 10px;
	padding: 0.6rem 0.9rem;
	margin-bottom: 1rem;
}

.vellinga-portal-v2 .vp-search-bar input {
	border: none;
	background: transparent;
	outline: none;
	font-family: inherit;
	font-size: 0.84rem;
	color: var(--vp-text);
	width: 100%;
}

/* Tables → row aesthetic */
.vellinga-portal-v2 table.cr-portal-grid-table {
	border-collapse: collapse;
	background: var(--vp-surface);
	border: 1px solid var(--vp-line);
	border-radius: 14px;
	overflow: hidden;
}

.vellinga-portal-v2 table.cr-portal-grid-table thead {
	background: var(--vp-surface-2);
}

.vellinga-portal-v2 table.cr-portal-grid-table thead th {
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vp-text-soft);
	border-bottom: 1px solid var(--vp-line);
}

.vellinga-portal-v2 table.cr-portal-grid-table tbody tr:hover {
	background: var(--vp-surface-2);
}

.vellinga-portal-v2 table.cr-portal-grid-table tbody td {
	color: var(--vp-text);
}

.vellinga-portal-v2 table.cr-portal-grid-table tbody td .opacitymedium,
.vellinga-portal-v2 table.cr-portal-grid-table tbody td .cr-product-ref {
	color: var(--vp-text-soft);
}

.vellinga-portal-v2 table.cr-portal-grid-table tbody tr {
	background: var(--vp-surface);
}

.vellinga-portal-v2 td[data-col="note"],
.vellinga-portal-v2 th[data-col="note"],
.vellinga-portal-v2 col.cr-col-note {
	display: none !important;
}

.vellinga-portal-v2 .vp-status-dot {
	display: none !important;
}

.vellinga-portal-v2 td[data-col="row-status"] .cr-line-status-badge {
	font-size: 0.65rem;
}

/* cr-cat-addline: neutrale knop uit vellinga_portal.css (+ regel) */

.vellinga-portal-v2 .cr-row-action-wrap {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.35rem;
	width: 100%;
}

.vellinga-portal-v2 .vp-qty-input {
	display: inline-flex;
	align-items: stretch;
	justify-content: center;
	border: 1px solid var(--vp-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--vp-field);
	max-width: 6.25rem;
	width: 100%;
	vertical-align: middle;
	box-sizing: border-box;
}

.vellinga-portal-v2 .vp-qty-input button {
	width: 26px;
	min-width: 26px;
	flex: 0 0 26px;
	align-self: stretch;
	height: 100%;
	min-height: 100%;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	color: var(--vp-text) !important;
	pointer-events: auto;
	position: relative;
	z-index: 3;
	padding: 0 !important;
	font-size: 1rem !important;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.vellinga-portal-v2 .vp-qty-input button:hover {
	background: var(--vp-line);
}

.vellinga-portal-v2 .vp-qty-input input {
	flex: 1 1 auto;
	text-align: center !important;
	border: none;
	background: transparent;
	min-width: 2rem;
	max-width: 3rem;
	width: 100%;
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--vp-text);
	-moz-appearance: textfield;
	appearance: textfield;
	padding: 0 !important;
	line-height: 1.2;
}

.vellinga-portal-v2 .vp-qty-input input::-webkit-outer-spin-button,
.vellinga-portal-v2 .vp-qty-input input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.vellinga-portal-v2 select,
.vellinga-portal-v2 input[type="text"],
.vellinga-portal-v2 input[type="number"],
.vellinga-portal-v2 textarea {
	border: 1px solid var(--vp-line) !important;
	border-radius: 8px !important;
	background: var(--vp-field) !important;
	color: var(--vp-text) !important;
}

.vellinga-portal-v2 select:focus,
.vellinga-portal-v2 input:focus,
.vellinga-portal-v2 textarea:focus {
	border-color: var(--vp-accent-mid) !important;
	outline: none;
}

.vellinga-portal-v2 details.cr-section {
	border: 1px solid var(--vp-line);
	border-radius: 14px;
	background: var(--vp-surface);
	padding: 0.5rem 1rem 1rem;
	margin-bottom: 1.25rem;
}

.vellinga-portal-v2 details.cr-section > summary.cr-section-summary {
	font-family: var(--vp-font-head);
	font-size: calc(var(--vp-head-size) - 0.5rem);
	font-weight: 400;
}

/* Hide bottom dock — cart sidebar replaces it */
.vellinga-portal-v2 .cr-portal-actions.cr-portal-actions--dock,
#cr-portal-actions-dock.cr-portal-actions--dock {
	display: none !important;
}

.vellinga-portal-v2 textarea#note_order {
	min-height: 3.4rem;
	width: 100%;
	box-sizing: border-box;
}

/* Gecentreerde kaartbreedte (mockup) */
.vellinga-portal-v2 {
	--vp-card-width: 54rem;
}

/* Medewerkers — compacte tabel in panel */
.medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-panel {
	width: 100%;
	max-width: var(--vp-card-width);
	margin: 0 auto;
}

.medewerkers-portal-skin.vellinga-portal-v2 .medewerkers-portal-toolbar .button,
.vellinga-portal-v2 [data-vp-medew-add] {
	background: var(--vp-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 0.4rem 0.75rem !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
}

.medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-toolbar-side {
	flex: 1 1 18rem;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.75rem 1.25rem;
	min-width: 0;
}

.medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-toolbar-meta {
	flex: 1 1 14rem;
	min-width: 12rem;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--vp-text-mid);
}

.medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-meta-line {
	margin: 0 0 0.35rem;
	color: var(--vp-text-mid) !important;
}

.medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-meta-company {
	color: var(--vp-text);
}

.medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-toolbar .vp-search-bar {
	margin-bottom: 0;
	padding: 0.3rem 0.6rem;
	flex: 0 1 16rem;
	min-width: 10rem;
	max-width: 20rem;
}

.medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-toolbar .vp-search-bar input {
	font-size: 0.8125rem;
}

.vellinga-portal-v2 .vp-mw-head,
.vellinga-portal-v2 .vp-mw-row {
	display: grid;
	grid-template-columns: 26px minmax(7rem, 1.25fr) minmax(3.5rem, 0.65fr) minmax(5rem, 1fr) 3.75rem;
	gap: 0.35rem 0.55rem;
	align-items: center;
	padding-left: 0.7rem;
	padding-right: 0.7rem;
}

.vellinga-portal-v2 .vp-mw-panel--readonly .vp-mw-head,
.vellinga-portal-v2 .vp-mw-panel--readonly .vp-mw-row {
	grid-template-columns: 26px minmax(7rem, 1.25fr) minmax(3.5rem, 0.65fr) minmax(5rem, 1fr);
}

.vellinga-portal-v2 .vp-mw-head {
	padding-top: 0.45rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--vp-line);
	background: var(--vp-surface-2);
}

.vellinga-portal-v2 .vp-mw-h {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vp-text-soft);
	line-height: 1.2;
}

.vellinga-portal-v2 .vp-mw-h-action {
	text-align: right;
}

.vellinga-portal-v2 .vp-mw-row {
	padding-top: 0.28rem;
	padding-bottom: 0.28rem;
	min-height: 0;
	border-bottom: 1px solid var(--vp-line);
	cursor: pointer;
	transition: background 0.12s;
}

.vellinga-portal-v2 .vp-mw-row:hover {
	background: var(--vp-surface-2);
}

.vellinga-portal-v2 .vp-mw-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--vp-accent-soft);
	color: var(--vp-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.625rem;
	font-weight: 600;
	flex-shrink: 0;
}

.vellinga-portal-v2 .vp-mw-name {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
}

.vellinga-portal-v2 .vp-mw-sub {
	font-size: 0.6875rem;
	color: var(--vp-text-soft);
	margin-top: 1px;
	line-height: 1.2;
}

.vellinga-portal-v2 .vp-mw-col-titel {
	font-size: 0.75rem;
	color: var(--vp-text-mid);
	line-height: 1.2;
}

.vellinga-portal-v2 .vp-mw-col-func {
	font-size: 0.75rem;
	color: var(--vp-text-mid);
	line-height: 1.2;
}

.vellinga-portal-v2 .vp-mw-col-func.empty {
	color: var(--vp-text-soft);
	font-style: italic;
}

.vellinga-portal-v2 .vp-mw-edit {
	justify-self: end;
	background: transparent;
	border: 1px solid var(--vp-line);
	border-radius: 6px;
	padding: 0.15rem 0.4rem;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--vp-text-mid);
	cursor: pointer;
	white-space: nowrap;
}

.vellinga-portal-v2 .vp-mw-list {
	background: var(--vp-surface);
	border: 1px solid var(--vp-line);
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
}

.vellinga-portal-v2 .medewerkers-portal-addblock,
.vellinga-portal-v2 tr.medewerkers-portal-editrow {
	display: none !important;
}

/* Slide-over */
.vellinga-portal-v2 #vp-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s;
	z-index: 10400;
}

.vellinga-portal-v2 #vp-overlay.open {
	opacity: 1;
	pointer-events: auto;
}

.vellinga-portal-v2 #vp-slideover {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 26.25rem;
	max-width: 90vw;
	background: var(--vp-surface);
	border-left: 1px solid var(--vp-line);
	transform: translateX(100%);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 10450;
	display: flex;
	flex-direction: column;
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
}

.vellinga-portal-v2 #vp-slideover.open {
	transform: none;
}

.vellinga-portal-v2 .vp-so-header {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--vp-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.vellinga-portal-v2 .vp-so-body {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.vellinga-portal-v2 .vp-so-footer {
	padding: 1.25rem 1.5rem;
	border-top: 1px solid var(--vp-line);
	display: flex;
	gap: 0.6rem;
	background: var(--vp-surface-2);
}

.vellinga-portal-v2 .vp-so-footer .button {
	flex: 1;
	justify-content: center;
	background: var(--vp-accent) !important;
	color: #fff !important;
	border-color: var(--vp-accent) !important;
}

.vellinga-portal-v2 .vp-so-footer .button.button-cancel,
.vellinga-portal-v2 .vp-so-footer a.buttonrefused {
	background: var(--vp-surface-2) !important;
	color: var(--vp-text) !important;
	border-color: var(--vp-line) !important;
}

/* Inmeet — gecentreerde kaart (mockup, niet volle breedte) */
.inmeetscheduler-portal-skin.vellinga-portal-v2 .vp-inmeet-form {
	width: 100%;
	max-width: var(--vp-card-width);
	margin: 0 auto;
}

.vellinga-portal-v2 .vp-inmeet-card {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	background: var(--vp-surface);
	border: 1px solid var(--vp-line);
	border-radius: 10px;
	overflow: hidden;
}

.vellinga-portal-v2 .vp-inmeet-section {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--vp-line);
}

.vellinga-portal-v2 .vp-inmeet-section:last-child {
	border-bottom: none;
}

.vellinga-portal-v2 .vp-inmeet-label {
	font-size: 0.8125rem;
	font-weight: 600;
	margin: 0 0 0.3rem;
	line-height: 1.3;
	color: var(--vp-text);
}

.inmeetscheduler-portal-skin.vellinga-portal-v2 .vp-inmeet-section p.opacitymedium.small,
.inmeetscheduler-portal-skin.vellinga-portal-v2 .vp-inmeet-section .im-slot-grid-hint,
.inmeetscheduler-portal-skin.vellinga-portal-v2 .vp-inmeet-form p {
	margin: 0.2rem 0 0 !important;
	font-size: 0.75rem !important;
	line-height: 1.35;
	color: var(--vp-text-mid) !important;
}

.inmeetscheduler-portal-skin.vellinga-portal-v2 .im-portal-intro {
	color: var(--vp-text-mid) !important;
}

.vellinga-portal-v2 .vp-daypart-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.35rem;
	width: 100%;
}

.vellinga-portal-v2 .vp-daypart-day {
	background: var(--vp-field);
	border: 1px solid var(--vp-line);
	border-radius: 9px;
	padding: 0.55rem 0.4rem;
	min-width: 0;
}

.vellinga-portal-v2 .vp-daypart-dayname {
	font-size: 0.6875rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
	text-align: center;
	line-height: 1.2;
	color: var(--vp-text);
}

.vellinga-portal-v2 .vp-daypart-opts {
	display: flex;
	flex-direction: row;
	gap: 0.3rem;
}

.vellinga-portal-v2 .vp-inmeet-details-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem 1.5rem;
	margin-top: 0.5rem;
}

.vellinga-portal-v2 .vp-inmeet-details-nb {
	flex: 0 0 auto;
}

.vellinga-portal-v2 .vp-inmeet-details-measures {
	flex: 1 1 14rem;
	min-width: 12rem;
}

.vellinga-portal-v2 .vp-inmeet-details-measures .vp-seg {
	margin-top: 0.25rem;
}

.vellinga-portal-v2 .vp-draft-chip-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 0.25rem;
	border: 1px solid var(--vp-line);
	background: var(--vp-surface);
	border-radius: 8px;
	padding: 0.4rem 0.65rem;
	font-size: 0.8125rem;
	cursor: pointer;
	color: var(--vp-text);
	width: auto !important;
	max-width: 100%;
	flex: 0 1 auto !important;
	margin: 0 !important;
	white-space: nowrap;
	pointer-events: auto;
	position: relative;
	z-index: 2;
}

.vellinga-portal-v2 .vp-draft-chip-btn:hover {
	border-color: var(--vp-accent);
}

.vellinga-portal-v2 .vp-draft-src {
	display: none !important;
}

/* PROV concept-order popup — overlay + themakaart */
#vp-draft-overlay.vp-draft-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	pointer-events: auto;
	background: rgba(30, 58, 95, 0.32);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

html[data-vp-theme="bold"] #vp-draft-overlay.vp-draft-overlay {
	background: rgba(0, 0, 0, 0.58);
}

#vp-draft-overlay.vp-draft-overlay[hidden] {
	display: none !important;
}

dialog#vp-draft-popover.vp-draft-popover,
.vellinga-portal-v2 dialog#vp-draft-popover.vp-draft-popover,
#vp-draft-popover.vp-draft-popover {
	box-sizing: border-box;
	width: min(92vw, 40rem) !important;
	max-width: min(92vw, 40rem) !important;
	min-width: 0;
	margin: auto;
	padding: 0 !important;
	border: none;
	background: transparent;
	color: var(--vp-text, #1e3a5f);
	box-shadow: none;
	overflow: visible;
}

html[data-vp-theme="bold"] dialog#vp-draft-popover.vp-draft-popover,
html[data-vp-theme="bold"] #vp-draft-popover.vp-draft-popover {
	color: var(--vp-text, #f3f4f6);
}

dialog#vp-draft-popover.vp-draft-popover:not([open]),
.vellinga-portal-v2 dialog#vp-draft-popover.vp-draft-popover:not([open]) {
	display: none !important;
}

dialog#vp-draft-popover.vp-draft-popover::backdrop,
.vellinga-portal-v2 dialog#vp-draft-popover.vp-draft-popover::backdrop {
	background: transparent;
}

#vp-draft-popover .vp-draft-popover-panel,
.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-panel {
	display: flex;
	flex-direction: column;
	max-height: min(88vh, 34rem);
	overflow: hidden;
	background: var(--vp-surface, #fff);
	border: 1px solid var(--vp-line, #e0e5f0);
	border-radius: 14px;
	box-shadow:
		0 24px 64px rgba(15, 23, 42, 0.18),
		0 4px 16px rgba(15, 23, 42, 0.08);
}

body.vp-draft-popover-open {
	overflow: hidden;
}

/* Legacy non-dialog fallback */
.vellinga-portal-v2 div.vp-draft-popover:not([hidden]) {
	display: block !important;
	position: fixed;
	z-index: 10550;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(92vw, 40rem);
	max-width: min(92vw, 40rem);
	max-height: min(88vh, 34rem);
	overflow: hidden;
	padding: 0;
	background: var(--vp-surface);
	border: 1px solid var(--vp-line);
	border-radius: 12px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}

.vellinga-portal-v2 div.vp-draft-popover[hidden] {
	display: none !important;
}

#vp-draft-popover .vp-draft-popover-head,
.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--vp-line, #e0e5f0);
	background: var(--vp-surface-2, #f8f9fb);
	position: sticky;
	top: 0;
}

#vp-draft-popover .vp-draft-popover-title,
.vellinga-portal-v2 .vp-draft-popover-title {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--vp-text, #1e3a5f);
	line-height: 1.35;
}

#vp-draft-popover .vp-draft-popover-close,
.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-close {
	flex: 0 0 2rem !important;
	flex-shrink: 0;
	width: 2rem !important;
	height: 2rem !important;
	min-width: 2rem !important;
	max-width: 2rem !important;
	border: none !important;
	border-radius: 8px;
	background: transparent !important;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	color: var(--vp-text-mid, #5c6370) !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none !important;
}

#vp-draft-popover .vp-draft-popover-close:hover,
.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-close:hover {
	background: var(--vp-line, rgba(0, 0, 0, 0.06)) !important;
	color: var(--vp-text, #1a1d23) !important;
}

#vp-draft-popover .vp-draft-popover-body,
.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body {
	padding: 0.75rem 1rem 1rem;
	font-size: 0.8125rem;
	max-height: min(72vh, 26rem);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--vp-surface, #fff);
	color: var(--vp-text, #1e3a5f);
}

#vp-draft-popover .vp-draft-popover-foot,
.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-foot {
	flex-shrink: 0;
}

#vp-draft-popover .vp-draft-withdraw,
.vellinga-portal-v2 #vp-draft-popover .vp-draft-withdraw {
	margin-top: 0;
	padding: 0.75rem 1rem 1rem;
	border-top: 1px solid var(--vp-line, rgba(0, 0, 0, 0.08));
	text-align: right;
}

#vp-draft-popover .vp-draft-withdraw-btn,
.vellinga-portal-v2 #vp-draft-popover .vp-draft-withdraw-btn {
	font-size: 0.8125rem;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--vp-danger-border, rgba(185, 28, 28, 0.35)) !important;
	background: var(--vp-danger-bg, rgba(185, 28, 28, 0.08)) !important;
	color: var(--vp-danger-text, #991b1b) !important;
	border-radius: var(--vp-radius-sm, 0.375rem);
	cursor: pointer;
}

#vp-draft-popover .vp-draft-withdraw-btn:hover,
.vellinga-portal-v2 #vp-draft-popover .vp-draft-withdraw-btn:hover {
	background: var(--vp-danger-bg-hover, rgba(185, 28, 28, 0.14)) !important;
	color: var(--vp-danger-text, #991b1b) !important;
}

.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body table {
	font-size: 0.8125rem;
	width: 100%;
	border-collapse: collapse;
}

.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body .liste_titre td,
.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body tr.liste_titre td {
	background: var(--vp-surface-2, #f3f4f6);
	font-weight: 600;
}

/* PROV/draft-popup: gestapelde regels (product bovenaan) */
#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines,
.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body table.cr-draft-lines,
dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines {
	display: block;
	width: 100%;
	border: none;
	color: var(--vp-text, #1e3a5f);
}

#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines thead,
#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tr.liste_titre,
.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body table.cr-draft-lines thead,
.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tr.liste_titre,
dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines thead,
dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tr.liste_titre {
	display: none !important;
}

#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tbody,
.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tbody,
dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tbody {
	display: block;
}

#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tbody > tr,
#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines > tr:not(.liste_titre),
.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tbody > tr,
.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tbody tr:not(.liste_titre),
.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body table.cr-draft-lines > tr:not(.liste_titre),
dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tbody > tr,
dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines > tr:not(.liste_titre) {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"product product"
		"medew medew"
		"qty price";
	gap: 0.25rem 0.65rem;
	margin: 0 0 0.65rem;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--vp-line, #e0e5f0);
	border-radius: 10px;
	background: var(--vp-surface-2, #f8f9fb);
	color: var(--vp-text, #1e3a5f);
}

#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td,
.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td,
dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td {
	display: block !important;
	width: auto !important;
	padding: 0.2rem 0 !important;
	border: none !important;
	text-align: left !important;
	white-space: normal;
	color: var(--vp-text, #1e3a5f) !important;
	background: transparent !important;
}

.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td[data-col="product"],
dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td[data-col="product"] {
	grid-area: product;
	padding-bottom: 0.35rem !important;
	margin-bottom: 0.15rem;
	border-bottom: 1px solid var(--vp-line, #e0e5f0) !important;
}

.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td[data-col="product"]::before,
dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td[data-col="product"]::before {
	display: none !important;
	content: none !important;
}

#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td[data-col="product"] .cr-product-name,
dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td[data-col="product"] .cr-product-name {
	font-size: 1rem;
	color: var(--vp-text, #1e3a5f) !important;
}

#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines .cr-product-label,
#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines .cr-product-ref,
dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines .cr-product-ref {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.75rem;
	color: var(--vp-text-soft, #8a93a8) !important;
}

.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td[data-col="medew"],
dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td[data-col="medew"] {
	grid-area: medew;
}

.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td[data-col="qty"],
dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td[data-col="qty"] {
	grid-area: qty;
}

.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td[data-col="price"],
dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td[data-col="price"] {
	grid-area: price;
	text-align: right !important;
}

.vellinga-portal-v2 #vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td:not([data-col="product"])::before,
dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td:not([data-col="product"])::before {
	content: attr(data-label);
	display: block;
	font-weight: 600;
	font-size: 0.72rem;
	line-height: 1.3;
	color: var(--vp-text-soft, #6b7280);
	margin-bottom: 0.15rem;
}

/* Concept-popup desktop: tabel i.p.v. kaart-grid */
@media (min-width: 48rem) {
	#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines,
	dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines {
		display: table !important;
		width: 100%;
		border-collapse: collapse;
	}

	#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines thead,
	dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines thead {
		display: table-header-group !important;
	}

	#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tbody,
	dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tbody {
		display: table-row-group !important;
	}

	#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tr.liste_titre,
	dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tr.liste_titre {
		display: table-row !important;
		background: var(--vp-surface-2) !important;
		color: var(--vp-text) !important;
	}

	#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tr.liste_titre th,
	dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tr.liste_titre th {
		display: table-cell !important;
		padding: 0.45rem 0.65rem !important;
		font-weight: 600;
		font-size: 0.75rem;
		color: var(--vp-text) !important;
		border-bottom: 1px solid var(--vp-line) !important;
		background: var(--vp-surface-2) !important;
	}

	#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tbody > tr,
	dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tbody > tr {
		display: table-row !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		border-radius: 0 !important;
		background: transparent !important;
	}

	#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tbody > tr:hover,
	dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tbody > tr:hover {
		background: var(--vp-surface-2) !important;
	}

	#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td,
	dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td {
		display: table-cell !important;
		padding: 0.5rem 0.65rem !important;
		border-bottom: 1px solid var(--vp-line) !important;
		vertical-align: top;
	}

	#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td::before,
	dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td::before {
		display: none !important;
		content: none !important;
	}

	#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td[data-col="product"],
	dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines td[data-col="product"] {
		border-bottom: 1px solid var(--vp-line) !important;
		margin-bottom: 0 !important;
		padding-bottom: 0.5rem !important;
	}

	#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines .cr-product-ref,
	dialog#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines .cr-product-ref {
		display: block;
		margin-top: 0.15rem;
	}
}

.vellinga-portal-v2 .vp-date-picker {
	min-width: 7.5rem;
}

.vellinga-portal-v2 .vp-dp-chip {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--vp-line);
	background: var(--vp-surface);
	border-radius: 6px;
	padding: 0.38rem 0.2rem;
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--vp-text-mid);
	cursor: pointer;
	text-align: center;
	user-select: none;
	line-height: 1.15;
}

.vellinga-portal-v2 .vp-dp-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.vellinga-portal-v2 .vp-dp-chip.sel {
	background: var(--vp-accent);
	color: #fff;
	border-color: var(--vp-accent);
}

.vellinga-portal-v2 .vp-seg {
	display: flex;
	gap: 0.5rem;
}

.vellinga-portal-v2 .vp-seg-btn {
	flex: 1;
	border: 1px solid var(--vp-line);
	background: var(--vp-field);
	border-radius: 8px;
	padding: 0.45rem 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--vp-text-mid);
	cursor: pointer;
	text-align: center;
}

.vellinga-portal-v2 .vp-seg-btn.sel {
	background: var(--vp-accent-soft);
	border-color: var(--vp-accent);
	color: var(--vp-accent);
}

.vellinga-portal-v2 .im-portal-form-table,
.vellinga-portal-v2 .vp-inmeet-form > br {
	display: none;
}

.vellinga-portal-v2 .vp-stepper-big {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--vp-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--vp-field);
}

.vellinga-portal-v2 .vp-stepper-big button {
	width: 32px;
	height: 32px;
	border: none !important;
	background: transparent !important;
	font-size: 1rem;
	cursor: pointer;
	color: var(--vp-text-mid) !important;
	box-shadow: none !important;
}

.vellinga-portal-v2 .vp-stepper-big input {
	width: 2.5rem;
	text-align: center;
	border: none;
	background: transparent;
	font-size: 0.875rem;
	font-weight: 600;
}

.inmeetscheduler-portal-skin.vellinga-portal-v2 .im-portal-details-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--vp-text);
}

/* Formulier-labels overal volledig contrast (core kleurt <label> anders dof) */
.vellinga-portal-v2 .medewerkers-portal-lbl,
.vellinga-portal-v2 .vp-so-body label,
.vellinga-portal-v2 .medewerkers-portal-field label,
.vellinga-portal-v2 .vp-inmeet-card label,
.clothingreorder-portal-skin.vellinga-portal-v2 form label {
	color: var(--vp-text);
}

.vellinga-portal-v2 .vp-inmeet-textarea,
.vellinga-portal-v2 .inmeet-textarea {
	min-height: 4.5rem;
	padding: 0.45rem 0.6rem;
	font-size: 0.8125rem;
	line-height: 1.35;
}

.vellinga-portal-v2 .vp-inmeet-footer.im-portal-submit {
	padding: 0.65rem 1rem 0.85rem;
}

.vellinga-portal-v2 .vp-inmeet-footer.im-portal-submit .button,
.vellinga-portal-v2 .vp-inmeet-footer.im-portal-submit input[type="submit"],
.inmeetscheduler-portal-skin.vellinga-portal-v2 .im-portal-submit input.button {
	width: 100%;
	background: var(--vp-accent) !important;
	color: #fff !important;
	border-color: var(--vp-accent) !important;
	border-radius: 8px !important;
	padding: 0.55rem 0.75rem !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
}

/* Nav (embedded webportal) */
body:has(.vellinga-portal-v2) .public-portal-header,
body:has(.vellinga-portal-v2) .header-nav {
	background: var(--vp-surface) !important;
	border-bottom: 1px solid var(--vp-line) !important;
}

body:has(.vellinga-portal-v2) .public-portal-header a.active {
	color: var(--vp-accent) !important;
	border-bottom-color: var(--vp-accent) !important;
}

/* Responsive (zelfde breakpoint als vellinga_portal.css stack-grid: 75rem) */
@media (max-width: 75rem) {
	.vellinga-portal-v2 .vp-shell {
		grid-template-columns: 1fr;
	}

	.vellinga-portal-v2 .vp-section-head {
		align-items: flex-start;
	}

	.vellinga-portal-v2 .vp-section-head-right.vp-filter-row {
		flex-wrap: wrap;
		width: 100%;
		justify-content: flex-start;
	}

	.vellinga-portal-v2 .vp-filter-row .vp-search-bar {
		flex: 1 1 100%;
		max-width: none;
	}

	.vellinga-portal-v2 .vp-cart {
		position: static;
		max-height: none;
		margin-top: 1.5rem;
	}

	/* Herbestellen: compacte spring-knop naar bestelling (paneel blijft onderaan in flow) */
	.clothingreorder-portal-skin .vp-cr-jump-order {
		display: inline-flex;
		position: fixed;
		right: max(0.75rem, env(safe-area-inset-right));
		bottom: max(1rem, env(safe-area-inset-bottom));
		z-index: 40;
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		min-height: 2.75rem;
		padding: 0.55rem 1rem;
		border: none;
		border-radius: 999px;
		background: var(--vp-accent);
		color: #fff;
		font-size: 0.875rem;
		font-weight: 600;
		line-height: 1.2;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
		cursor: pointer;
		transition: opacity 0.2s, transform 0.2s, background 0.15s;
	}

	.clothingreorder-portal-skin .vp-cr-jump-order:hover {
		background: var(--vp-accent-hover);
	}

	.clothingreorder-portal-skin .vp-cr-jump-order.is-hidden {
		opacity: 0;
		pointer-events: none;
		transform: translateY(0.5rem);
	}

	.clothingreorder-portal-skin .vp-cr-jump-order__badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.35rem;
		height: 1.35rem;
		padding: 0 0.35rem;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.25);
		font-size: 0.75rem;
		font-weight: 700;
	}

	.clothingreorder-portal-skin .vp-cr-jump-order__badge:empty,
	.clothingreorder-portal-skin .vp-cr-jump-order__badge[data-count="0"] {
		display: none;
	}

	.vellinga-portal-v2 #vp-slideover {
		width: 100%;
		max-width: 100%;
		border-left: none;
	}

	.vellinga-portal-v2 .vp-daypart-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vellinga-portal-v2 .vp-mw-head {
		display: none;
	}

	.vellinga-portal-v2 .vp-mw-row {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "av name edit" "av titel edit" "av func edit";
		padding-top: 0.4rem;
		padding-bottom: 0.4rem;
	}

	.vellinga-portal-v2 .vp-mw-avatar {
		grid-area: av;
	}

	.vellinga-portal-v2 .vp-mw-name-wrap {
		grid-area: name;
	}

	.vellinga-portal-v2 .vp-mw-col-titel {
		grid-area: titel;
	}

	.vellinga-portal-v2 .vp-mw-col-func {
		grid-area: func;
	}

	.vellinga-portal-v2 .vp-mw-edit {
		grid-area: edit;
		align-self: start;
		margin-top: 0.1rem;
		min-height: 2.75rem;
		min-width: 2.75rem;
		padding: 0.5rem 0.85rem;
		box-sizing: border-box;
	}

	.medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-panel {
		max-width: none;
		padding: 0 0.15rem;
	}

	.medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-toolbar,
	.medewerkers-portal-skin.vellinga-portal-v2 .medewerkers-portal-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 0.55rem;
	}

	.medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-toolbar .button,
	.medewerkers-portal-skin.vellinga-portal-v2 [data-vp-medew-add] {
		width: 100%;
		justify-content: center;
		min-height: 2.5rem;
	}

	.medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-toolbar-side {
		flex: 1 1 100%;
		flex-direction: column;
		gap: 0.5rem;
	}

	.medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-toolbar .vp-search-bar {
		flex: 1 1 100%;
		max-width: none;
		width: 100%;
	}

	.medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-toolbar-meta {
		font-size: 0.8125rem;
	}

	.medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-list {
		border: none;
		background: transparent;
		border-radius: 0;
	}

	.vellinga-portal-v2 .vp-mw-row {
		grid-template-areas:
			"av name edit"
			"av titel edit"
			"av func edit";
		grid-template-columns: 2.5rem 1fr auto;
		gap: 0.2rem 0.65rem;
		padding: 0.65rem 0.75rem;
		margin-bottom: 0.5rem;
		border: 1px solid var(--vp-line);
		border-radius: 12px;
		background: var(--vp-surface);
		border-bottom-width: 1px;
	}

	.vellinga-portal-v2 .vp-mw-row:last-child {
		margin-bottom: 0;
	}

	.vellinga-portal-v2 .vp-mw-avatar {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 0.75rem;
	}

	.vellinga-portal-v2 .vp-mw-name {
		font-size: 0.9375rem;
	}

	.vellinga-portal-v2 .vp-mw-col-titel,
	.vellinga-portal-v2 .vp-mw-col-func {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.15rem 0.35rem;
		font-size: 0.8125rem;
		padding-left: 0;
		min-width: 0;
	}

	.vellinga-portal-v2 .vp-mw-col-titel {
		grid-area: titel;
	}

	.vellinga-portal-v2 .vp-mw-col-func {
		grid-area: func;
	}

	/* Lege titel/functie: rij weglaten op mobiel (geen kaal label) */
	.vellinga-portal-v2 .vp-mw-col-titel.vp-mw-empty,
	.vellinga-portal-v2 .vp-mw-col-func.vp-mw-empty {
		display: none;
	}

	.vellinga-portal-v2 .vp-mw-col-titel::before,
	.vellinga-portal-v2 .vp-mw-col-func::before {
		display: inline;
		font-size: 0.625rem;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--vp-text-soft);
	}

	.vellinga-portal-v2 .vp-mw-col-titel::before {
		content: attr(data-vp-label) ": ";
	}

	.vellinga-portal-v2 .vp-mw-col-func::before {
		content: attr(data-vp-label) ": ";
	}

	.vellinga-portal-v2 .vp-mw-col-func.empty {
		font-style: italic;
	}
}

/* ---------- Fase 2.1: switcher, badges, compact, historie-toolbar ---------- */

.vellinga-portal-v2 .vp-theme-switch {
	position: sticky;
	bottom: 0.75rem;
	margin: 1rem auto 0;
	width: fit-content;
	max-width: 100%;
	z-index: 20;
}

.vp-theme-switch {
	position: fixed;
	bottom: 1.1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10500;
	background: var(--vp-surface);
	border: 1px solid var(--vp-line);
	border-radius: 14px;
	padding: 0.45rem;
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
	justify-content: center;
	max-width: calc(100vw - 1.5rem);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Globale module-switcher (vellingaportaal): rechtsonder, alle portaalpagina's */
.vp-theme-switch.vp-theme-switch--overlay,
#vp-theme-switch.vp-theme-switch--overlay {
	left: auto;
	right: max(1rem, env(safe-area-inset-right, 0px));
	bottom: max(1.1rem, env(safe-area-inset-bottom, 0px));
	transform: none;
}

/* Themaswitcher in topmenu (vellingaportaal): naast user/logout (DOM vóór ul.logout) */
nav.primary-top-nav .vp-theme-nav {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0 0.35rem;
	flex-shrink: 0;
}

/* Desktop: core nav.css zet margin-left:auto alleen op .logout → switcher bleef midden in menu */
@media (min-width: 37rem) {
	nav.primary-top-nav .vp-theme-nav {
		margin-left: auto;
	}

	nav.primary-top-nav ul.logout {
		margin-left: 0;
	}
}

nav.primary-top-nav .vp-theme-nav-item {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.vp-theme-switch.vp-theme-switch--nav,
#vp-theme-switch.vp-theme-switch--nav {
	position: static;
	left: auto;
	right: auto;
	bottom: auto;
	transform: none;
	z-index: auto;
	background: transparent;
	border: none;
	border-radius: 10px;
	padding: 0.15rem;
	box-shadow: none;
	max-width: none;
	flex-wrap: nowrap;
}

.vp-theme-switch--nav .vp-theme-btn {
	padding: 0.35rem 0.55rem;
	font-size: 0.72rem;
	white-space: nowrap;
}

.vp-theme-switch--nav .vp-theme-btn-label {
	line-height: 1.2;
}

@media (max-width: 62rem) {
	.vp-theme-switch--nav .vp-theme-btn-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.vp-theme-switch--nav .vp-theme-btn {
		padding: 0.4rem;
		min-width: 2.75rem;
		min-height: 2.75rem;
		justify-content: center;
	}

	.vp-theme-switch--nav .vp-theme-swatch {
		width: 14px;
		height: 14px;
	}
}

@media (max-width: 26rem) {
	nav.primary-top-nav .vp-theme-nav {
		padding: 0 0.15rem;
	}

	.vp-theme-switch--nav {
		gap: 0.2rem;
	}
}

/* Footer: custom moduleversies (demo/debug) — buiten .vellinga-portal-v2, volgt body/html-thema */
.vp-portal-module-versions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.35rem 0.75rem;
	padding: 0.65rem 1rem max(0.65rem, env(safe-area-inset-bottom, 0px));
	font-size: 0.72rem;
	line-height: 1.35;
	color: var(--vp-text-mid);
	background: var(--vp-bg);
	border-top: 1px solid var(--vp-line);
}

html[data-vp-theme="bold"] .vp-portal-module-versions,
body[data-vp-theme="bold"] .vp-portal-module-versions,
body[data-controller][data-vp-theme="bold"] .vp-portal-module-versions,
body.vellinga-portal-themed[data-vp-theme="bold"] .vp-portal-module-versions {
	background: var(--vp-bg) !important;
	color: var(--vp-text-mid) !important;
	border-top-color: var(--vp-line) !important;
}

html[data-vp-theme="tint"] .vp-portal-module-versions,
body[data-vp-theme="tint"] .vp-portal-module-versions,
body[data-controller][data-vp-theme="tint"] .vp-portal-module-versions,
body.vellinga-portal-themed[data-vp-theme="tint"] .vp-portal-module-versions {
	background: var(--vp-bg) !important;
	color: var(--vp-text-mid) !important;
	border-top-color: var(--vp-line) !important;
}

.vp-portal-module-version {
	display: inline-block;
	white-space: nowrap;
}

.vp-theme-btn {
	border: 1px solid var(--vp-line);
	background: var(--vp-field);
	color: var(--vp-text-mid);
	border-radius: 9px;
	padding: 0.45rem 0.75rem;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	box-sizing: border-box;
	transition: 0.15s;
}

/* Stepper +/- touch targets (smal scherm; desktop = compact in .clothingreorder-portal-skin) */
@media (max-width: 75rem) {
	.vellinga-portal-v2 .vp-qty-input button.vp-qty-dec,
	.vellinga-portal-v2 .vp-qty-input button.vp-qty-inc {
		min-width: 2.75rem;
		min-height: 2.75rem;
		box-sizing: border-box;
	}
}

.vp-theme-btn:hover {
	border-color: var(--vp-accent-mid);
}

.vp-theme-btn.active {
	background: var(--vp-accent);
	color: #fff;
	border-color: var(--vp-accent);
}

.vp-theme-swatch {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.12);
	flex-shrink: 0;
}

.vp-sw-warm {
	background: linear-gradient(135deg, #fff 50%, #c8102e 50%);
}

.vp-sw-dark {
	background: linear-gradient(135deg, #1c1f26 50%, #ef2d44 50%);
}

.vp-sw-tint {
	background: linear-gradient(135deg, #eef1f8 50%, #1e3a5f 50%);
}

.vp-sw-bold {
	background: linear-gradient(135deg, #1a1c20 50%, #ff2d4a 50%);
}

body.bodyforpublicportal,body[data-controller] main.container {
	padding-top: 0.75rem !important;
	padding-bottom: 1.25rem !important;
}

/* Portaal: breder dan Dolibarr/eldy ~1130px — native lijsten (Offertes/Orders/Facturen) */
body.bodyforpublicportal[data-vp-theme]:not(:has(.vellinga-portal-v2)) main.container,
body[data-controller][data-vp-theme]:not(:has(.vellinga-portal-v2)) main.container,
body.vellinga-portal-themed[data-vp-theme]:not(:has(.vellinga-portal-v2)) main.container {
	max-width: min(95%, 81.25rem) !important; /* 1300px */
	width: 100% !important;
	box-sizing: border-box;
}

body.bodyforpublicportal[data-vp-theme]:not(:has(.vellinga-portal-v2)) .hero-header .container,
body[data-controller][data-vp-theme]:not(:has(.vellinga-portal-v2)) .hero-header .container {
	max-width: min(95%, 81.25rem) !important;
	width: 100% !important;
	box-sizing: border-box;
}

/* Custom modules: nog breder op grote schermen (demodoli: min(95%, 1800px)) */
body.bodyforpublicportal[data-vp-theme]:has(.vellinga-portal-v2) main.container,
body[data-controller][data-vp-theme]:has(.vellinga-portal-v2) main.container {
	max-width: min(95%, 112.5rem) !important;
	width: 100% !important;
	box-sizing: border-box;
}

/*
 * Hero: nav is position:fixed (style.css.php, ~100px padding in core).
 * Eén offset: nav-hoogte + kleine marge — niet 6.25rem + core (dubbele kilimeter).
 */
body.bodyforpublicportal,body[data-controller] {
	--vp-portal-nav-h: 3.5rem;
	--vp-portal-hero-gap: 0.35rem;
}

body.bodyforpublicportal,body[data-controller]:has(.vellinga-portal-v2) .hero-header,
body.bodyforpublicportal,body[data-controller] .hero-header {
	padding-top: calc(var(--vp-portal-nav-h) + var(--vp-portal-hero-gap, 0.35rem)) !important;
	padding-bottom: 1.25rem !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 1.25rem !important;
	min-height: 0 !important;
	overflow: visible !important;
}

body.bodyforpublicportal,body[data-controller] .hero-header .container {
	padding-top: 0;
}

body.bodyforpublicportal,body[data-controller]:has(.vellinga-portal-v2) .hero-header__title,
body.bodyforpublicportal,body[data-controller] .hero-header__title {
	font-size: clamp(1.875rem, 4vw, 2.125rem) !important;
	line-height: 1.25 !important;
	margin: 0 0 0.5rem !important;
	padding: 0 !important;
	overflow: visible !important;
}

body.bodyforpublicportal,body[data-controller] .hero-header__desc:empty {
	display: none;
}

body.bodyforpublicportal,body[data-controller]:has(.vellinga-portal-v2) .hero-header__desc {
	font-size: 1rem;
	line-height: 1.5;
	max-width: 72ch;
}

.medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-toolbar,
.medewerkers-portal-skin.vellinga-portal-v2 .medewerkers-portal-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 0.75rem;
}

.inmeetscheduler-portal-skin.vellinga-portal-v2 .vp-inmeet-card {
	margin-top: 0;
}

.inmeetscheduler-portal-skin.vellinga-portal-v2 .im-portal-section-title,
.inmeetscheduler-portal-skin.vellinga-portal-v2 #im-portal-requests-search {
	width: 100%;
	max-width: var(--vp-card-width);
	margin-left: auto;
	margin-right: auto;
}

.inmeetscheduler-portal-skin.vellinga-portal-v2 .im-portal-section-title {
	text-align: left;
	margin: 0.75rem auto 0.35rem;
	font-size: 0.9375rem;
}

.inmeetscheduler-portal-skin.vellinga-portal-v2 .im-portal-tablewrap {
	width: 100%;
	max-width: var(--vp-card-width);
	margin: 0 auto;
}

.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests th,
.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests td {
	padding: 0.3rem 0.45rem !important;
	font-size: 0.8125rem;
	vertical-align: middle;
}

.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests thead tr[role="search-row"] input,
.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests thead tr[role="search-row"] select {
	font-size: 0.8125rem;
	min-height: 1.75rem;
}

.medewerkers-portal-skin.vellinga-portal-v2,
.inmeetscheduler-portal-skin.vellinga-portal-v2 {
	box-sizing: border-box;
}

@media (max-width: 30rem) {
	.vellinga-portal-v2 .vp-daypart-grid {
		grid-template-columns: 1fr;
	}
}

.vellinga-portal-v2 details.cr-section {
	margin-bottom: 0.85rem;
	padding: 0.35rem 0.85rem 0.75rem;
}

.vellinga-portal-v2 details.cr-section > summary.cr-section-summary {
	font-size: 1.15rem;
	margin-bottom: 0.25rem;
}

/* vp-order-chips: see block ~304 */

.vellinga-portal-v2 details.cr-draft.vp-draft-chip {
	display: inline-block;
	margin: 0;
	padding: 0.45rem 0.8rem;
}

.vellinga-portal-v2 .vp-search-row-hidden {
	display: none !important;
}

/* Sectiekop: uitleg links, zoek/datums rechts (mockup) */
.vellinga-portal-v2 .vp-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 0.75rem;
	margin-bottom: 0.5rem;
}

.vellinga-portal-v2 .vp-section-head-left {
	flex: 1 1 16rem;
	min-width: 12rem;
	max-width: 42rem;
}

.vellinga-portal-v2 .vp-section-head-left .vp-card-sub {
	margin: 0;
}

.vellinga-portal-v2 .vp-section-head-right.vp-filter-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.4rem;
	flex: 1 1 auto;
	min-width: 0;
}

.vellinga-portal-v2 .vp-filter-row .vp-search-bar {
	flex: 1 1 10rem;
	min-width: 9rem;
	max-width: 18rem;
	margin: 0;
}

.vellinga-portal-v2 .vp-filter-clear.btn-filter-icon,
.vellinga-portal-v2 .vp-filter-row .btn-filter-icon.btn-remove-search-filters-icon {
	flex: 0 0 2.25rem;
	width: 2.25rem;
	height: 2.25rem;
	min-width: 2.25rem;
	min-height: 2.25rem;
	padding: 0;
	margin: 0;
	opacity: 1;
	transform: none;
	align-self: center;
	background: var(--vp-surface) !important;
	border: 1px solid var(--vp-line) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
}

.vellinga-portal-v2 .vp-filter-clear.btn-filter-icon:hover,
.vellinga-portal-v2 .vp-filter-row .btn-filter-icon.btn-remove-search-filters-icon:hover {
	background: var(--vp-surface-2) !important;
	border-color: var(--vp-text-soft) !important;
}

.vellinga-portal-v2 .vp-filter-row .vp-date-range {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.35rem;
}

.vellinga-portal-v2 .vp-filter-row .vp-date-picker {
	min-height: 2.35rem;
	height: 2.35rem;
	box-sizing: border-box;
}

/* AUTO: portaal-shell uit vellinga_portal.css — vereist als WEBPORTAL_CSS_URL alleen v2 is */
:root {
	/* Merkkleuren */
	--vellinga-red:        #C51818;
	--vellinga-red-dark:   #9E0F0F;
	--vellinga-red-hover:  #B01515;

	/* Neutralen */
	--vellinga-bg:         #F6F6F6;
	--vellinga-surface:    #FFFFFF;
	--vellinga-text:       #1A1A1A;
	--vellinga-text-muted: #54595F;
	--vellinga-border:     #E2E2E2;
	--vellinga-border-soft:#EFEFEF;
	--vellinga-thead-bg:   #F0F0F0;
	--vellinga-thead-text: #1A1A1A;
	--vellinga-row-hover:  #FAFAFA;

	/* Status */
	--vellinga-ok:         #1E8E3E;
	--vellinga-warn:       #C97A00;
	--vellinga-warn-bg:    #FFF6E5;
	--vellinga-err:        var(--vellinga-red);
	--vellinga-err-bg:     #FDECEC;

	/* Vorm */
	--vellinga-radius:     6px;
	--vellinga-radius-lg:  10px;
	--vellinga-shadow:     0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
	--vellinga-shadow-hover: 0 4px 8px rgba(0,0,0,0.08), 0 12px 24px rgba(0,0,0,0.06);
	--vellinga-portal-stack-bp: 75rem;
	--vellinga-portal-stack-bp-wide: 75rem;

	/* Typografie */
	--vellinga-font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--vellinga-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* ---------- Basis ---------- */

body,
body.bodyforpublicportallogin,
body.bodyforpublicportal,body[data-controller],
.webportal-page,
.webportal-content {
	font-family: var(--vellinga-font-body);
	color: var(--vellinga-text);
	background-color: var(--vellinga-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5,
.titre, .fichetitle {
	font-family: var(--vellinga-font-heading);
	font-weight: 700;
	color: var(--vellinga-text);
	letter-spacing: -0.01em;
}

a {
	color: var(--vellinga-red);
	text-decoration: none;
}
a:hover, a:focus {
	color: var(--vellinga-red-dark);
	text-decoration: underline;
}

hr {
	border: 0;
	border-top: 1px solid var(--vellinga-border);
}

/* ---------- Topnavigatie (rustig, geen rode hover-tekst) ---------- */

.header-portal,
.header-nav,
.navigation,
.topnav,
.public-portal-header {
	background: var(--vellinga-surface);
	border-bottom: 1px solid var(--vellinga-border);
}

.header-nav a,
.navigation a,
.topnav a,
.public-portal-header a {
	color: var(--vellinga-text);
	font-family: var(--vellinga-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.header-nav a:hover,
.navigation a:hover,
.topnav a:hover,
.public-portal-header a:hover {
	color: var(--vellinga-text);
	text-decoration: none;
	border-bottom-color: var(--vellinga-text-muted);
}
.header-nav a.active,
.navigation a.active,
.public-portal-header a.active {
	color: var(--vellinga-text);
	border-bottom-color: var(--vellinga-red);
}

/* ---------- Welkom-banner (de enige opvallend rode plek) ---------- */

.welcomebanner,
.portal-welcome,
.home-welcome,
.home-page__welcome {
	background: linear-gradient(135deg, var(--vellinga-red) 0%, var(--vellinga-red-dark) 100%);
	color: var(--vellinga-surface);
	padding: 1rem 1.25rem;
	border-radius: var(--vellinga-radius);
	box-shadow: var(--vellinga-shadow);
	font-family: var(--vellinga-font-heading);
	font-weight: 600;
}
.welcomebanner h1,
.welcomebanner h2,
.portal-welcome h1,
.portal-welcome h2 {
	color: var(--vellinga-surface);
	margin: 0;
}

/* ---------- Home-tegels ---------- */

.home-links-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1rem;
}

.home-links-card {
	background: var(--vellinga-surface);
	border: 1px solid var(--vellinga-border);
	border-radius: var(--vellinga-radius-lg);
	box-shadow: var(--vellinga-shadow);
	padding: 1.25rem 1rem;
	min-height: 7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.home-links-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--vellinga-shadow-hover);
	border-color: var(--vellinga-border);
}

.home-links-card__link {
	color: var(--vellinga-text);
	font-family: var(--vellinga-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	text-align: center;
	text-decoration: none;
	word-break: break-word;
	hyphens: auto;
	line-height: 1.3;
}
.home-links-card:hover .home-links-card__link {
	color: var(--vellinga-text);
}

/* ---------- Hero banner (native webportal) ---------- */

.hero-header {
	background: var(--vellinga-surface);
	border-bottom: 1px solid var(--vellinga-border-soft);
	margin-bottom: 1.25rem;
}

.hero-header__title {
	font-family: var(--vellinga-font-heading);
	font-weight: 700;
	font-size: 1.75rem;
	color: var(--vellinga-text);
	margin: 0 0 0.35rem;
}

.hero-header__desc {
	color: var(--vellinga-text-muted);
	font-size: 1rem;
	margin: 0;
}

main.container table[role="grid"] thead th a,
main.container table[role="grid"] thead th a:hover {
	color: var(--vellinga-red);
	font-weight: 600;
	text-decoration: none;
}

main.container table[role="grid"] thead th a:hover {
	color: var(--vellinga-red-dark);
	text-decoration: underline;
}
/* ---------- Tabellen (één stijl voor alle modules) ---------- */

/* Generieke Dolibarr-tabellen (table.liste, .tagtable). Module-eigen tabellen
 * (medewerkers-portal-list, im-slot-grid, clothingreorder catalog/list)
 * stylen zichzelf via dezelfde CSS-vars in hun eigen stijlblok. */

.tagtable,
table.liste,
table.noborder,
.div-table-responsive table {
	background: var(--vellinga-surface);
	border-radius: var(--vellinga-radius);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	border: 1px solid var(--vellinga-border-soft);
}

table.liste tr.liste_titre,
table.liste tr.liste_titre_filter,
.tagtr.liste_titre {
	background: var(--vellinga-thead-bg);
	color: var(--vellinga-thead-text);
	font-family: var(--vellinga-font-heading);
	font-weight: 600;
}
table.liste tr.liste_titre a,
table.liste tr.liste_titre .a-link,
.tagtr.liste_titre a {
	color: var(--vellinga-thead-text);
}

table.liste tbody tr {
	border-bottom: 1px solid var(--vellinga-border-soft);
}
table.liste tbody tr:hover,
.tagtr:hover {
	background: var(--vellinga-row-hover, var(--vp-surface-2));
}

#vp-draft-popover .vp-draft-popover-body table.liste tbody tr:hover,
#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tbody > tr:hover {
	background: var(--vp-surface-2) !important;
}

#vp-draft-popover .vp-draft-popover-body table.cr-draft-lines tbody > tr:hover td,
#vp-draft-popover .vp-draft-popover-body table.liste tbody tr:hover td {
	background: transparent !important;
	color: var(--vp-text) !important;
}
table.liste td,
.tagtd {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--vellinga-border-soft);
}

/* Inmeet (en andere table.liste in v2-skin): geen witte Dolibarr-zebrastrepen */
.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests tr.liste_titre,
.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests tr.liste_titre_filter,
.vellinga-portal-v2 table.liste tr.liste_titre,
.vellinga-portal-v2 table.liste tr.liste_titre_filter {
	background: var(--vp-surface-2) !important;
	color: var(--vp-text) !important;
}

.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests tr.liste_titre a,
.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests tr.liste_titre .im-portal-sort-link,
.vellinga-portal-v2 table.liste tr.liste_titre a {
	color: var(--vp-accent) !important;
}

.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests tbody tr.oddeven,
.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests tbody tr.im-portal-reqrow {
	background: var(--vp-surface) !important;
	color: var(--vp-text) !important;
}

.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests tbody tr.oddeven:nth-child(even),
.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests tbody tr.im-portal-reqrow:nth-child(even) {
	background: var(--vp-surface-2) !important;
}

.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests tbody tr.oddeven td,
.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests tbody tr.im-portal-reqrow td {
	background: inherit !important;
	color: var(--vp-text) !important;
	border-bottom-color: var(--vp-line) !important;
}

.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests tbody tr.oddeven:hover,
.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests tbody tr.im-portal-reqrow:hover {
	background: var(--vp-field) !important;
}

.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests thead tr[role="search-row"] input,
.inmeetscheduler-portal-skin.vellinga-portal-v2 #webportal-inmeet-requests thead tr[role="search-row"] select {
	background: var(--vp-field) !important;
	color: var(--vp-text) !important;
	border-color: var(--vp-line) !important;
}

/* Native webportal grids (embedded custom modules + core lists) */
main.container table[role="grid"],
.clothingreorder-portal-skin table[role="grid"],
.medewerkers-portal-skin table[role="grid"],
.inmeetscheduler-portal-skin table[role="grid"] {
	background: var(--vellinga-surface);
	border: 1px solid var(--vellinga-border-soft);
	border-radius: var(--vellinga-radius);
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	margin-bottom: 0.5rem;
}

main.container table[role="grid"] thead tr[role="search-row"] td,
.clothingreorder-portal-skin table[role="grid"] thead tr[role="search-row"] td,
.medewerkers-portal-skin table[role="grid"] thead tr[role="search-row"] td,
.inmeetscheduler-portal-skin table[role="grid"] thead tr[role="search-row"] td {
	padding: 0.35rem 0.25rem;
	vertical-align: middle;
}

main.container table[role="grid"] thead tr[role="search-row"] input,
main.container table[role="grid"] thead tr[role="search-row"] select,
.clothingreorder-portal-skin table[role="grid"] thead input[type="text"],
.clothingreorder-portal-skin table[role="grid"] thead input[type="date"],
.medewerkers-portal-skin table[role="grid"] thead input[type="text"],
.inmeetscheduler-portal-skin table[role="grid"] thead input[type="text"] {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

main.container table[role="grid"] thead th,
main.container table[role="grid"] thead th a {
	font-family: var(--vellinga-font-heading);
	font-weight: 600;
}

/* jNotify: native Dolibarr — compact toast rechtsboven (niet over menu) */
.jnotify-container {
	top: max(4.25rem, calc(3.5rem + env(safe-area-inset-top))) !important;
	right: max(0.75rem, env(safe-area-inset-right)) !important;
	left: auto !important;
	bottom: auto !important;
	transform: none !important;
	width: auto !important;
	max-width: min(20rem, calc(100vw - 1.5rem)) !important;
	z-index: 100000 !important;
}

.jnotify-container .jnotify-notification {
	position: relative !important;
	display: block !important;
	width: auto !important;
	max-width: min(20rem, calc(100vw - 1.5rem)) !important;
	margin: 0 0 0.45rem 0 !important;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.jnotify-container .jnotify-notification .jnotify-message {
	padding: 0.55rem 1.75rem 0.55rem 0.75rem !important;
	text-align: left !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	font-family: var(--vellinga-font-body, Arial, Helvetica, sans-serif) !important;
}

.jnotify-container .jnotify-notification-error .jnotify-background {
	background-color: #f8d3dc !important;
	opacity: 1 !important;
}

.jnotify-container .jnotify-notification-error .jnotify-message,
.jnotify-container .jnotify-notification-error a.jnotify-close {
	color: #8a1f3a !important;
}

.jnotify-container .jnotify-notification-warning .jnotify-background {
	background-color: #fff7d1 !important;
	opacity: 1 !important;
}

.jnotify-container .jnotify-notification-warning .jnotify-message,
.jnotify-container .jnotify-notification-warning a.jnotify-close {
	color: #9a7b1a !important;
}

.jnotify-container .jnotify-notification-success .jnotify-background {
	background-color: #d6f5dd !important;
	opacity: 1 !important;
}

.jnotify-container .jnotify-notification-success .jnotify-message,
.jnotify-container .jnotify-notification-success a.jnotify-close {
	color: #1c6b34 !important;
}

.jnotify-container a.jnotify-close {
	top: 0.35rem !important;
	right: 0.5rem !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	padding: 0 0.25rem !important;
	text-decoration: none !important;
}

/* Fallback toast when jnotify is not loaded (same position as jNotify) */
.vellinga-portal-flash-fallback {
	position: fixed;
	top: max(4.25rem, calc(3.5rem + env(safe-area-inset-top)));
	right: max(0.75rem, env(safe-area-inset-right));
	left: auto;
	transform: none;
	max-width: min(20rem, calc(100vw - 1.5rem));
	z-index: 100000;
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	padding: 0.55rem 0.75rem;
	text-align: left;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
	font-family: var(--vellinga-font-body, Arial, Helvetica, sans-serif);
}

.vellinga-portal-flash-fallback-success {
	background-color: #d6f5dd;
	color: #1c6b34;
}

.vellinga-portal-flash-fallback-warning {
	background-color: #fff7d1;
	color: #9a7b1a;
}

.vellinga-portal-flash-fallback-error {
	background-color: #f8d3dc;
	color: #8a1f3a;
}

/* ClothingReorder embedded (vellinga replaces iframe inline CSS) */
.clothingreorder-portal-skin h3.marginbottom2 {
	font-size: 1.05rem;
	font-weight: 600;
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
}

/* Grid-tabellen: colgroup + één tbody = uitgelijnde kolommen */
.clothingreorder-portal-skin table.cr-portal-grid-table {
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
}

.clothingreorder-portal-skin.vellinga-portal-v2 .cr-section-body,
.clothingreorder-portal-skin.vellinga-portal-v2 .cr-section-body figure,
.clothingreorder-portal-skin.vellinga-portal-v2 table.cr-portal-grid-table {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

.clothingreorder-portal-skin table.cr-portal-grid-table th,
.clothingreorder-portal-skin table.cr-portal-grid-table td {
	vertical-align: middle;
	padding: 0.45rem 0.5rem;
	box-sizing: border-box;
}

.clothingreorder-portal-skin table.cr-portal-grid-table thead th {
	vertical-align: bottom;
	padding-bottom: 0.55rem;
}

/* Catalogus kolommen */
.clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-photo {
	width: 4.75rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-actions {
	width: 6.5rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-qty {
	width: 8.5rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-size {
	width: 7.25rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-product {
	width: auto;
	min-width: 9rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-status {
	width: 11.5rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-medew {
	width: 12rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-note {
	width: 10%;
}

.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="product"],
.clothingreorder-portal-skin #webportal-clothingreorder-catalog th[data-col="product"] {
	overflow: hidden;
}

.clothingreorder-portal-skin .cr-product-label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.12rem;
	line-height: 1.25;
	max-width: 100%;
	white-space: normal;
	overflow: visible;
	text-overflow: unset;
}

.clothingreorder-portal-skin .cr-product-name {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--vp-text, var(--vellinga-text));
}

.clothingreorder-portal-skin .cr-product-ref {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--vp-text-soft, var(--vellinga-text-muted));
	word-break: break-word;
}

.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="product"],
.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="product"] {
	vertical-align: middle;
}

.clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="size"] select,
.clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="size"] input {
	max-width: 100%;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	font-size: 0.8125rem;
}

.clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="qty"] {
	width: 1%;
	white-space: nowrap;
	overflow: hidden;
}

.clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="size"] {
	overflow: hidden;
}

.clothingreorder-portal-skin table.cr-portal-grid-table tbody td[data-col="size"],
.clothingreorder-portal-skin table.cr-portal-grid-table tbody td[data-col="qty"] {
	vertical-align: middle;
}

/* Maat/aantal: wrapper in markup (.vp-cr-cell-align), td blijft table-cell */
.clothingreorder-portal-skin .vp-cr-cell-align {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	height: 2.35rem;
	min-height: 2.35rem;
	max-height: 2.35rem;
	box-sizing: border-box;
	vertical-align: middle;
}

.clothingreorder-portal-skin .vp-cr-cell-align--end {
	justify-content: flex-end;
	width: 100%;
}

.clothingreorder-portal-skin .vp-cr-cell-align input[type="hidden"] {
	position: absolute;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.clothingreorder-portal-skin .vp-cr-cell-align select {
	height: 2.35rem;
	min-height: 2.35rem;
	max-height: 2.35rem;
	margin: 0;
	flex: 0 1 auto;
	box-sizing: border-box;
}

/* Qty-stepper: breed genoeg voor cijfer; +/- compact (geen portal-button-pill) */
.clothingreorder-portal-skin .vp-qty-input {
	min-width: 6.75rem;
	max-width: 8.25rem;
	width: auto;
}

.clothingreorder-portal-skin .vp-cr-cell-align .vp-qty-input {
	display: inline-flex;
	align-items: stretch;
	height: 2.35rem;
	min-height: 2.35rem;
	max-height: 2.35rem;
	margin: 0;
	flex: 0 0 auto;
	vertical-align: middle;
}

.clothingreorder-portal-skin .vp-qty-input button.vp-qty-dec,
.clothingreorder-portal-skin .vp-qty-input button.vp-qty-inc {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: stretch;
	width: 1.75rem !important;
	min-width: 1.75rem !important;
	max-width: 1.75rem !important;
	flex: 0 0 1.75rem !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--vp-text, var(--vellinga-text, #1a1a1a)) !important;
	line-height: 1 !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
	box-sizing: border-box !important;
	cursor: pointer;
}

.clothingreorder-portal-skin .vp-qty-input button.vp-qty-dec:hover,
.clothingreorder-portal-skin .vp-qty-input button.vp-qty-inc:hover {
	background: var(--vp-line, rgba(0, 0, 0, 0.08)) !important;
}

.clothingreorder-portal-skin .vp-qty-input input.clothingreorder-qty-input {
	flex: 1 1 2.5rem !important;
	min-width: 2.25rem !important;
	width: auto !important;
	max-width: none !important;
	height: 100% !important;
	min-height: 0 !important;
	text-align: center !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	padding: 0 0.15rem !important;
}

.clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="qty"] .vp-qty-input {
	margin-left: auto;
	max-width: 100%;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

@media (min-width: 48rem) {
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="qty"] .vp-qty-input {
		min-width: 0;
		max-width: 100%;
		width: 100%;
		margin-left: 0;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="size"] .vp-cr-cell-align {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
}

.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="row-status"] .cr-line-status-badge {
	max-width: 100%;
	width: 100%;
	text-align: center;
}

/* Historie kolommen — lege row-actions-kolom niet tonen (reserveert anders ~3rem) */
.clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-actions,
.clothingreorder-portal-skin #webportal-clothingreorder-list thead th[data-col="row-actions"],
.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="row-actions"] {
	display: none !important;
	width: 0 !important;
	max-width: 0 !important;
	padding: 0 !important;
	border: none !important;
	overflow: hidden !important;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-actions {
	width: 0 !important;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-medew {
	width: 12rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-customer {
	width: 9rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="line_medew"] select,
.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="line_medew"] select,
.clothingreorder-portal-skin td[data-col="line_medew"] .select2-container {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	box-sizing: border-box;
}

.clothingreorder-portal-skin td[data-col="line_medew"] select {
	padding: 0.45rem 0.5rem !important;
	line-height: 1.35 !important;
	min-height: 2.5rem;
	white-space: normal;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-product {
	width: auto;
	min-width: 9rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-size {
	width: 5.75rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-date {
	width: 6.5rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-qtylast {
	width: 5.5rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-qty {
	width: 6.75rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-note {
	width: 12%;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-status {
	width: 9rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="product"],
.clothingreorder-portal-skin #webportal-clothingreorder-list th[data-col="product"] {
	overflow: hidden;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="row-status"] .cr-line-status-badge {
	max-width: 100%;
	width: 100%;
	text-align: center;
}

.clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="qty"],
.clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="qty_last"],
.clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="date"],
.clothingreorder-portal-skin table.cr-portal-grid-table th.right {
	text-align: right;
}

.clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="photo"] {
	text-align: center;
}

.clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="row-actions"] {
	text-align: center;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	overflow: hidden;
}

.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="row-actions"] {
	overflow: hidden;
	max-width: 6.5rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="row-actions"] .cr-row-action-wrap {
	justify-content: center;
}

.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="qty"] {
	overflow: visible;
}

.clothingreorder-portal-skin table.cr-portal-grid-table td[data-col="row-status"] {
	text-align: right;
}

.clothingreorder-portal-skin table.cr-portal-grid-table td input,
.clothingreorder-portal-skin table.cr-portal-grid-table td select {
	max-width: 100%;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* Uniforme rij-hoogte: invoervelden (niet de qty-stepper binnen .vp-qty-input) */
.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td input[type="text"],
.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td select,
.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td input[type="number"]:not(.vp-qty-input input),
.clothingreorder-portal-skin #webportal-clothingreorder-list tbody td input[type="text"],
.clothingreorder-portal-skin #webportal-clothingreorder-list tbody td select,
.clothingreorder-portal-skin #webportal-clothingreorder-list tbody td input[type="number"]:not(.vp-qty-input input) {
	height: 2.35rem;
	min-height: 2.35rem;
	line-height: 1.3;
	padding: 0.3rem 0.5rem;
	box-sizing: border-box;
	vertical-align: middle;
}

.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="photo"] .cr-cat-thumb-img {
	margin: 0 auto;
}

/* Desktop: Herbestellen-tabel (≥48rem tablet landscape; medew/inmeet blijft 75rem) */
@media (min-width: 48rem) {
	.clothingreorder-portal-skin table.cr-portal-grid-table,
	.clothingreorder-portal-skin table.vellinga-portal-stack-grid {
		display: table !important;
		table-layout: fixed !important;
		width: 100% !important;
	}

	.clothingreorder-portal-skin table.cr-portal-grid-table thead,
	.clothingreorder-portal-skin table.vellinga-portal-stack-grid thead {
		display: table-header-group !important;
	}

	.clothingreorder-portal-skin table.cr-portal-grid-table tbody,
	.clothingreorder-portal-skin table.vellinga-portal-stack-grid tbody {
		display: table-row-group !important;
	}

	.clothingreorder-portal-skin table.cr-portal-grid-table tr,
	.clothingreorder-portal-skin table.vellinga-portal-stack-grid tr,
	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr:not(.vp-row-hidden),
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow:not(.vp-row-hidden) {
		display: table-row !important;
		flex-flow: unset !important;
		flex-direction: unset !important;
		align-items: unset !important;
	}

	.clothingreorder-portal-skin table.cr-portal-grid-table th,
	.clothingreorder-portal-skin table.cr-portal-grid-table td,
	.clothingreorder-portal-skin table.vellinga-portal-stack-grid th,
	.clothingreorder-portal-skin table.vellinga-portal-stack-grid td {
		display: table-cell !important;
		flex: none !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog col.cr-col-product,
	.clothingreorder-portal-skin #webportal-clothingreorder-list col.cr-col-product {
		width: auto !important;
		min-width: 9rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list thead th[data-col="line_medew"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog th[data-col="line_medew"],
	.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="line_medew"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="line_medew"] {
		width: 12rem !important;
		min-width: 12rem !important;
	}
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="product"] {
		width: auto !important;
		min-width: 9rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog th[data-col="row-status"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="row-status"] {
		width: 11.5rem !important;
		min-width: 9rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list th[data-col="customer"],
	.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="customer"] {
		width: 9rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog th[data-col="product"],
	.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="product"] {
		width: auto !important;
		min-width: 9rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list th[data-col="row-status"],
	.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="row-status"] {
		width: 9rem !important;
	}

	.clothingreorder-portal-skin table.cr-portal-grid-table tbody tr td::before,
	.clothingreorder-portal-skin table.vellinga-portal-stack-grid tbody tr td::before {
		display: none !important;
		content: none !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog th[data-col="photo"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="photo"] {
		width: 4.75rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog th[data-col="size"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="size"] {
		width: 7.25rem !important;
		min-width: 7.25rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog th[data-col="qty"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="qty"] {
		width: 8.5rem !important;
		min-width: 8.5rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog th[data-col="row-actions"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="row-actions"] {
		width: 6.5rem !important;
		min-width: 6.5rem !important;
		max-width: 6.5rem !important;
		overflow: hidden !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog th[data-col="row-status"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="row-status"] {
		width: 11.5rem !important;
		min-width: 9rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list th[data-col="line_medew"],
	.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="line_medew"] {
		width: 12rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list th[data-col="row-actions"],
	.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="row-actions"] {
		display: none !important;
		width: 0 !important;
		padding: 0 !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list th[data-col="size"],
	.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="size"] {
		width: 5.75rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list th[data-col="date"],
	.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="date"] {
		width: 6.5rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list th[data-col="qty_last"],
	.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="qty_last"] {
		width: 5.5rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list th[data-col="qty"],
	.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="qty"] {
		width: 6.75rem !important;
	}
}

/* Desktop: Medewerkers + Inmeet-tabel (≥75rem) */
@media (min-width: 75.0625rem) {
	.medewerkers-portal-skin table.medewerkers-portal-grid,
	.medewerkers-portal-skin table.vellinga-portal-stack-grid,
	.inmeetscheduler-portal-skin table.im-portal-requests-grid,
	.inmeetscheduler-portal-skin table.vellinga-portal-stack-grid {
		display: table !important;
	}

	.medewerkers-portal-skin table.medewerkers-portal-grid thead,
	.medewerkers-portal-skin table.vellinga-portal-stack-grid thead,
	.inmeetscheduler-portal-skin table.im-portal-requests-grid thead,
	.inmeetscheduler-portal-skin table.vellinga-portal-stack-grid thead {
		display: table-header-group !important;
	}

	.medewerkers-portal-skin table.medewerkers-portal-grid tbody,
	.medewerkers-portal-skin table.vellinga-portal-stack-grid tbody,
	.inmeetscheduler-portal-skin table.im-portal-requests-grid tbody,
	.inmeetscheduler-portal-skin table.vellinga-portal-stack-grid tbody {
		display: table-row-group !important;
	}

	.medewerkers-portal-skin table.medewerkers-portal-grid tr,
	.medewerkers-portal-skin table.vellinga-portal-stack-grid tr,
	.inmeetscheduler-portal-skin table.im-portal-requests-grid tr,
	.inmeetscheduler-portal-skin table.vellinga-portal-stack-grid tr {
		display: table-row !important;
	}

	.medewerkers-portal-skin table.medewerkers-portal-grid th,
	.medewerkers-portal-skin table.medewerkers-portal-grid td,
	.medewerkers-portal-skin table.vellinga-portal-stack-grid th,
	.medewerkers-portal-skin table.vellinga-portal-stack-grid td,
	.inmeetscheduler-portal-skin table.im-portal-requests-grid th,
	.inmeetscheduler-portal-skin table.im-portal-requests-grid td,
	.inmeetscheduler-portal-skin table.vellinga-portal-stack-grid th,
	.inmeetscheduler-portal-skin table.vellinga-portal-stack-grid td {
		display: table-cell !important;
	}

	.medewerkers-portal-skin table.medewerkers-portal-grid tbody tr td::before,
	.medewerkers-portal-skin table.vellinga-portal-stack-grid tbody tr td::before,
	.inmeetscheduler-portal-skin table.im-portal-requests-grid tbody tr td::before,
	.inmeetscheduler-portal-skin table.vellinga-portal-stack-grid tbody tr td::before {
		display: none !important;
		content: none !important;
	}
}
/* Regelstatus: expliciete Dolibarr-kleuren (portaal-theme overschrijft anders alles groen) */
.clothingreorder-portal-skin .cr-line-status-badge.badge {
	display: inline-block;
	box-sizing: border-box;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.3;
	padding: 0.25em 0.5em;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	vertical-align: middle;
	border-radius: 4px;
	color: #fff !important;
}

.clothingreorder-portal-skin .cr-line-status-badge.cr-line-badge-ok {
	background-color: #55a430 !important;
	border: 1px solid #4a9230 !important;
	color: #fff !important;
}

.clothingreorder-portal-skin .cr-line-status-badge.cr-line-badge-warn {
	background-color: #bc9526 !important;
	border: 1px solid #a68322 !important;
	color: #fff !important;
}

.clothingreorder-portal-skin .cr-line-status-badge.cr-line-badge-error {
	background-color: #c44d4d !important;
	border: 1px solid #a83f3f !important;
	color: #fff !important;
}

.clothingreorder-portal-skin button.cr-cat-addline,
.clothingreorder-portal-skin button.cr-cat-clearfilters {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: auto;
	width: auto;
	height: auto;
	min-height: 1.65rem;
	padding: 0.3rem 0.55rem;
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	border: 1px solid var(--vellinga-border);
	border-radius: var(--vellinga-radius);
	background: var(--vellinga-bg);
	color: inherit;
	cursor: pointer;
	box-sizing: border-box;
}

.clothingreorder-portal-skin button.cr-cat-addline:hover,
.clothingreorder-portal-skin button.cr-cat-clearfilters:hover {
	background: var(--vellinga-row-hover);
}

.clothingreorder-portal-skin button.cr-cat-addline:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.clothingreorder-portal-skin .cr-cat-thumb-img {
	width: 4.25rem;
	height: 4.25rem;
	object-fit: contain;
}

.clothingreorder-portal-skin details.cr-section {
	margin-bottom: 0.75rem;
	border: 1px solid var(--vellinga-border-soft);
	border-radius: var(--vellinga-radius);
	padding: 0.35rem 0.6rem 0.65rem;
	background: var(--vellinga-surface);
}

.clothingreorder-portal-skin details.cr-draft {
	margin-bottom: 0.5rem;
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--vellinga-border-soft);
}

.clothingreorder-portal-skin details.cr-draft > summary {
	cursor: pointer;
	font-weight: 600;
	list-style-position: outside;
}

.clothingreorder-portal-skin details.cr-draft > summary .link {
	color: var(--vellinga-red);
	text-decoration: underline;
}

.clothingreorder-portal-skin details.cr-section > summary.cr-section-summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 1.05rem;
	padding: 0.25rem 0;
}

.clothingreorder-portal-skin .cr-portal-actions {
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

.clothingreorder-portal-skin .cr-portal-actions .button,
.clothingreorder-portal-skin .cr-portal-actions input[type="button"] {
	width: 100%;
	max-width: 22rem;
	min-height: 2.75rem;
	background: var(--vp-accent) !important;
	color: #fff !important;
	border-color: var(--vp-accent) !important;
}

/* Vaste bestelknop onderin (mobiel + desktop) */
.clothingreorder-portal-skin form.clothingreorder-portal-form {
	padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}

.clothingreorder-portal-skin .cr-portal-actions.cr-portal-actions--dock,
#cr-portal-actions-dock.cr-portal-actions--dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1200;
	margin: 0;
	padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
	background: var(--vellinga-surface);
	border-top: 1px solid var(--vellinga-border);
	box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.clothingreorder-portal-skin .cr-portal-actions--dock.cr-portal-actions--hidden,
#cr-portal-actions-dock.cr-portal-actions--hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(0.35rem);
}

.clothingreorder-portal-skin .cr-portal-actions-inner,
#cr-portal-actions-dock .cr-portal-actions-inner {
	width: 100%;
	max-width: 28rem;
}

.clothingreorder-portal-skin .cr-portal-actions--dock #cr-portal-review-btn,
#cr-portal-actions-dock #cr-portal-review-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100%;
	max-width: none;
	min-height: 2.85rem;
	font-size: 1rem;
	font-weight: 600;
	text-align: center !important;
	background: var(--vellinga-red);
	color: var(--vellinga-surface) !important;
	-webkit-text-fill-color: var(--vellinga-surface);
	border-color: var(--vellinga-red);
}

.clothingreorder-portal-skin .cr-portal-actions--dock #cr-portal-review-btn:hover,
#cr-portal-actions-dock #cr-portal-review-btn:hover {
	background: var(--vellinga-red-hover);
	border-color: var(--vellinga-red-hover);
}

@media (min-width: 48rem) {
	.clothingreorder-portal-skin .cr-portal-actions.cr-portal-actions--dock,
	#cr-portal-actions-dock.cr-portal-actions--dock {
		left: 50%;
		right: auto;
		width: min(32rem, calc(100vw - 2rem));
		transform: translateX(-50%);
		border-radius: var(--vellinga-radius-lg) var(--vellinga-radius-lg) 0 0;
	}

	.clothingreorder-portal-skin .cr-portal-actions--dock.cr-portal-actions--hidden,
	#cr-portal-actions-dock.cr-portal-actions--hidden {
		transform: translateX(-50%) translateY(0.35rem);
	}
}

.clothingreorder-portal-skin #webportal-clothingreorder-list thead input[type="text"],
.clothingreorder-portal-skin #webportal-clothingreorder-catalog thead .cr-cat-search-input {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list thead td[data-col="date"] input[type="date"] {
	display: block;
	width: 100%;
	max-width: 11rem;
	box-sizing: border-box;
	margin: 0 0 0.25rem;
	font-size: 0.9rem;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list thead td[data-col="date"] input[type="date"]:last-child {
	margin-bottom: 0;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="size"] select,
.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="size"] select,
.clothingreorder-portal-skin #webportal-clothingreorder-catalog .cr-cat-input-medew,
.clothingreorder-portal-skin #webportal-clothingreorder-catalog .cr-cat-input-note,
.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="note"] input {
	max-width: 100%;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.clothingreorder-portal-skin a.cr-cat-thumb,
.clothingreorder-portal-skin button.cr-cat-thumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(0, 90, 180, 0.12);
}

.clothingreorder-portal-skin select.cr-input-error,
.clothingreorder-portal-skin input.cr-input-error {
	border-color: var(--vellinga-red) !important;
	box-shadow: 0 0 0 2px rgba(197, 24, 24, 0.2) !important;
	background-color: var(--vellinga-err-bg);
}

.clothingreorder-portal-skin .cr-inline-hint {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.82rem;
	color: var(--vellinga-red-dark);
	line-height: 1.3;
}
/* Smal scherm + touch: kaartweergave gestapeld (Herbestellen, Medewerkers, Inmeet) */
@media (max-width: 75rem), ((hover: none) and (pointer: coarse)) {
	main.container .clothingreorder-portal-skin,
	.clothingreorder-portal-skin,
	main.container .medewerkers-portal-skin,
	.medewerkers-portal-skin,
	main.container .inmeetscheduler-portal-skin,
	.inmeetscheduler-portal-skin {
		padding-left: max(0.35rem, env(safe-area-inset-left));
		padding-right: max(0.35rem, env(safe-area-inset-right));
	}

	.clothingreorder-portal-skin details.cr-section > summary.cr-section-summary {
		padding: 0.45rem 0.15rem;
		min-height: 2.75rem;
		box-sizing: border-box;
	}

	.clothingreorder-portal-skin details.cr-draft > summary {
		padding: 0.35rem 0;
		min-height: 2.5rem;
	}

	main.container .div-table-responsive,
	main.container .div-table-responsive-no-min,
	.clothingreorder-portal-skin .cr-section-body,
	.medewerkers-portal-skin .medewerkers-portal-list-wrap,
	.medewerkers-portal-skin .div-table-responsive-no-min,
	.inmeetscheduler-portal-skin .im-portal-tablewrap,
	.inmeetscheduler-portal-skin .div-table-responsive-no-min {
		overflow-x: visible !important;
		width: 100%;
		max-width: 100%;
	}

	main.container .div-table-responsive table.vellinga-portal-stack-grid,
	main.container .div-table-responsive-no-min table.vellinga-portal-stack-grid {
		min-width: 0 !important;
	}

	.clothingreorder-portal-skin table.cr-portal-grid-table,
	.clothingreorder-portal-skin table.vellinga-portal-stack-grid,
	.medewerkers-portal-skin table.vellinga-portal-stack-grid,
	.inmeetscheduler-portal-skin table.vellinga-portal-stack-grid {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		table-layout: auto !important;
		border: none;
		background: transparent;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog,
	.medewerkers-portal-skin #webportal-medewerkers-list,
	.inmeetscheduler-portal-skin #webportal-inmeet-requests {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		border: none;
		background: transparent;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list thead,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog thead,
	.medewerkers-portal-skin #webportal-medewerkers-list thead,
	.inmeetscheduler-portal-skin #webportal-inmeet-requests thead {
		display: block !important;
		width: 100%;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list thead tr[role="search-row"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog thead tr.cr-cat-search-row,
	.medewerkers-portal-skin #webportal-medewerkers-list thead tr[role="search-row"],
	.inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr[role="search-row"] {
		display: flex !important;
		flex-wrap: wrap;
		gap: 0.5rem;
		align-items: flex-end;
		padding: 0.5rem 0.35rem;
		margin: 0 0 0.5rem;
		border-radius: var(--vellinga-radius);
		background: var(--vellinga-bg);
		border: 1px solid var(--vellinga-border-soft);
		box-sizing: border-box;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list thead tr[role="search-row"] > td.cr-search-skip,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog thead tr.cr-cat-search-row > td.cr-search-skip,
	.inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr[role="search-row"] > td[data-col="planned"],
	.inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr[role="search-row"] > td[data-col="datec"],
	.inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr[role="search-row"] > td[data-col="slots"],
	.inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr[role="search-row"] > td[data-col="nb"] {
		display: none !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list thead tr[role="search-row"] > td,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog thead tr.cr-cat-search-row > td,
	.medewerkers-portal-skin #webportal-medewerkers-list thead tr[role="search-row"] > td,
	.inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr[role="search-row"] > td {
		display: block !important;
		flex: 1 1 100%;
		min-width: 0;
		box-sizing: border-box;
		padding: 0.25rem 0;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list thead tr[role="search-row"] > td[data-col="row-actions"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog thead tr.cr-cat-search-row > td[data-col="row-actions"] {
		flex: 0 0 auto;
		align-self: flex-start;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list thead tr:not([role="search-row"]),
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog thead tr:not(.cr-cat-search-row),
	.medewerkers-portal-skin #webportal-medewerkers-list thead tr:not([role="search-row"]),
	.inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr:not([role="search-row"]) {
		display: none !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody,
	.medewerkers-portal-skin #webportal-medewerkers-list tbody,
	.inmeetscheduler-portal-skin #webportal-inmeet-requests tbody {
		display: block !important;
		width: 100%;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow,
	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-datarow,
	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-datarow,
	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr.oddeven[data-medew-lastname],
	.inmeetscheduler-portal-skin #webportal-inmeet-requests tbody tr.im-portal-reqrow {
		display: flex !important;
		flex-direction: column;
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
		margin: 0 0 0.85rem;
		padding: 0.65rem 0.75rem;
		border: 1px solid var(--vellinga-border-soft);
		border-radius: var(--vellinga-radius-lg);
		background: var(--vellinga-surface);
		box-shadow: var(--vellinga-shadow);
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow.cr-cat-followup {
		margin-top: -0.45rem;
		padding-top: 0.45rem;
		border-top: 1px dashed var(--vellinga-border);
		border-radius: 0 0 var(--vellinga-radius-lg) var(--vellinga-radius-lg);
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td,
	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-datarow td,
	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr.oddeven[data-medew-lastname] td,
	.inmeetscheduler-portal-skin #webportal-inmeet-requests tbody tr.im-portal-reqrow td {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		gap: 0.35rem;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		padding: 0.55rem 0;
		border: none;
		border-bottom: 1px solid var(--vellinga-border-soft);
		box-sizing: border-box;
		vertical-align: top;
		white-space: normal;
		text-align: left !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td:last-child,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td:last-child,
	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-datarow td:last-child,
	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr.oddeven[data-medew-lastname] td:last-child,
	.inmeetscheduler-portal-skin #webportal-inmeet-requests tbody tr.im-portal-reqrow td:last-child {
		border-bottom: none;
	}

	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-editrow {
		display: block !important;
		width: 100%;
		margin: 0 0 0.85rem;
		padding: 0;
		border: none;
		background: transparent;
		box-shadow: none;
	}

	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-editrow > td {
		display: block !important;
		width: 100% !important;
		padding: 0.65rem 0.75rem;
		border: 1px solid var(--vellinga-border-soft);
		border-radius: var(--vellinga-radius-lg);
		background: var(--vellinga-surface);
		box-shadow: var(--vellinga-shadow);
	}

	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-editrow > td::before {
		display: none !important;
		content: none !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="row-actions"] {
		display: none !important;
	}

	.clothingreorder-portal-skin.vellinga-portal-v2 .vp-main {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		width: 100%;
	}

	.clothingreorder-portal-skin.vellinga-portal-v2 .cr-section-history {
		order: -2;
	}

	.clothingreorder-portal-skin.vellinga-portal-v2 .cr-section-catalog {
		order: -1;
	}

	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr:not(.vp-row-hidden),
	.inmeetscheduler-portal-skin #webportal-inmeet-requests tbody tr:not(.vp-row-hidden) {
		display: flex !important;
	}

	.medewerkers-portal-skin .medewerkers-portal-toolbar,
	.medewerkers-portal-skin .vp-mw-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}

	.medewerkers-portal-skin .medewerkers-portal-toolbar .button,
	.medewerkers-portal-skin [data-vp-medew-add] {
		width: 100%;
		box-sizing: border-box;
	}

	.medewerkers-portal-skin .vp-mw-row {
		width: 100%;
		box-sizing: border-box;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="row-actions"] {
		display: flex !important;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td::before,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td::before,
	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-datarow td::before,
	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr.oddeven[data-medew-lastname] td::before,
	.inmeetscheduler-portal-skin #webportal-inmeet-requests tbody tr.im-portal-reqrow td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.2rem;
		font-weight: 600;
		font-size: 0.78rem;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		line-height: 1.3;
		color: var(--vellinga-text-muted);
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-label=""]::before,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-label=""]::before,
	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr td[data-label=""]::before {
		display: none;
	}

	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-datarow td[data-col="action"],
	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr td[data-col="action"] {
		order: -30;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: stretch;
		padding-top: 0;
		padding-bottom: 0.65rem;
		margin-bottom: 0.35rem;
		border-bottom: 1px solid var(--vellinga-border-soft);
	}

	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-datarow td[data-col="action"]::before {
		flex: 1 1 auto;
	}

	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr.medewerkers-portal-datarow td[data-col="lastname"] {
		order: -25;
		font-size: 1.05rem;
		font-weight: 600;
	}

	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr td[data-col="action"] .button,
	.medewerkers-portal-skin #webportal-medewerkers-list tbody tr td[data-col="action"] .medewerkers-portal-btn-edit {
		width: 100%;
		max-width: 100%;
		text-align: center;
		box-sizing: border-box;
		min-height: 2.75rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="row-status"] {
		order: unset;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--vellinga-border-soft);
		padding-top: 0.35rem;
		padding-bottom: 0.65rem;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="row-status"]::before,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="row-status"]::before {
		flex: 1 1 auto;
	}

	.clothingreorder-portal-skin .cr-line-status-badge.badge {
		max-width: none;
		flex: 0 1 auto;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td input,
	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td select,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td input,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td select,
	.medewerkers-portal-skin #webportal-medewerkers-list thead tr[role="search-row"] input,
	.inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr[role="search-row"] input {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 2.75rem;
		font-size: 1rem;
		box-sizing: border-box;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list input.clothingreorder-qty-input,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog .clothingreorder-qty-input {
		text-align: center !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="product"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="product"] {
		word-break: break-word;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog,
	.clothingreorder-portal-skin #webportal-clothingreorder-list {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		table-layout: auto !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog colgroup,
	.clothingreorder-portal-skin #webportal-clothingreorder-list colgroup {
		display: none !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow:not(.vp-row-hidden),
	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr:not(.vp-row-hidden) {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Mobiel (<48rem): maat+aantal en +regel+status elk op één rij (50/50) */
	@media (max-width: 47.9375rem) {
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow:not(.vp-row-hidden),
	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr:not(.vp-row-hidden) {
		flex-flow: row wrap !important;
		column-gap: 0.6rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="size"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="qty"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="row-actions"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="row-status"],
	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="size"],
	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="qty"],
	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="date"],
	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="qty_last"] {
		width: auto !important;
		max-width: calc(50% - 0.3rem) !important;
		flex: 1 1 calc(50% - 0.3rem) !important;
		min-width: 0 !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="row-actions"] {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		padding-top: 0.35rem !important;
		padding-bottom: 0.35rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="row-actions"] .cr-cat-addline {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 2.35rem !important;
		padding: 0.35rem 0.45rem !important;
		font-size: 0.75rem !important;
		white-space: nowrap !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="row-status"] {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-end !important;
		padding-top: 0.35rem !important;
		padding-bottom: 0.35rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="row-status"] .cr-line-status-badge {
		font-size: 0.72rem !important;
		padding: 0.25rem 0.35rem !important;
		line-height: 1.2 !important;
		white-space: normal !important;
		text-align: center !important;
	}
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="size"] {
		order: 3 !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="qty"] {
		order: 4 !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="date"] {
		order: 5 !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="qty_last"] {
		order: 6 !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="row-status"] {
		order: 7 !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow.cr-cat-followup td[data-col="photo"] {
		display: none !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td,
	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td {
		display: block !important;
		width: auto !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
		align-items: stretch !important;
		border-bottom: 1px solid var(--vellinga-border-soft) !important;
		padding: 0.55rem 0 !important;
		box-sizing: border-box !important;
		text-align: left !important;
		white-space: normal !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="row-actions"] {
		display: none !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td:last-child,
	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td:last-child {
		border-bottom: none !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="customer"]:empty {
		display: none !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="product"] {
		order: -1;
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-top: 0.15rem !important;
		padding-bottom: 0.5rem !important;
		border-bottom: 1px solid var(--vellinga-border-soft) !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="product"]::before,
	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="product"] .cr-product-label::before {
		display: none !important;
		content: none !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="product"] .cr-product-name {
		font-size: 1.05rem;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="customer"] {
		grid-area: customer;
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="line_medew"] {
		grid-area: medew;
		order: 0 !important;
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="size"] {
		grid-area: size;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="date"] {
		grid-area: date;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="qty_last"] {
		grid-area: qtylast;
		text-align: left !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="qty"] {
		grid-area: qty;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="qty"] .vp-qty-input {
		margin-left: 0;
		max-width: none;
		width: 100%;
		min-width: 0;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="qty"] .vp-qty-input button.vp-qty-dec,
	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="qty"] .vp-qty-input button.vp-qty-inc,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="qty"] .vp-qty-input button.vp-qty-dec,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="qty"] .vp-qty-input button.vp-qty-inc {
		min-width: 2.75rem !important;
		max-width: 2.75rem !important;
		width: 2.75rem !important;
		flex: 0 0 2.75rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="qty"] .vp-qty-input input.clothingreorder-qty-input,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="qty"] .vp-qty-input input.clothingreorder-qty-input {
		flex: 1 1 3rem !important;
		min-width: 2.75rem !important;
		font-size: 1rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="row-status"] {
		grid-area: status;
		order: 7 !important;
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding-top: 0.35rem !important;
		border-top: 1px solid var(--vellinga-border-soft) !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="row-status"] {
		grid-area: status;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="photo"] {
		grid-area: photo;
		order: -2 !important;
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		text-align: center;
		padding-bottom: 0.25rem;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="photo"]::before {
		display: none !important;
		content: none !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="product"] {
		order: -1;
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-bottom: 0.5rem !important;
		border-bottom: 1px solid var(--vellinga-border-soft) !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="product"]::before {
		display: none !important;
		content: none !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="product"] .cr-product-name {
		font-size: 1rem;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="line_medew"] {
		grid-area: medew;
		order: 0 !important;
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="size"] {
		grid-area: size;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="qty"] {
		align-self: stretch;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="qty"] .vp-qty-input {
		margin-left: 0;
		max-width: none;
		width: 100%;
		min-width: 0;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="row-actions"] {
		grid-area: actions;
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="row-actions"] .cr-cat-addline {
		width: 100%;
		justify-content: center;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="size"] select,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td[data-col="size"] input {
		max-width: none;
		width: 100% !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog .cr-cat-thumb-img {
		width: min(100%, 7rem);
		height: auto;
		aspect-ratio: 1;
	}

	.clothingreorder-portal-skin button.cr-cat-addline,
	.clothingreorder-portal-skin button.cr-cat-clearfilters,
	.clothingreorder-portal-skin .btn-filter-icon {
		min-width: 2.75rem;
		min-height: 2.75rem;
	}

	.clothingreorder-portal-skin .cr-row-action-wrap {
		min-height: 2.75rem;
		justify-content: flex-end;
	}

	.clothingreorder-portal-skin details.cr-draft table.cr-draft-lines {
		display: block;
		width: 100%;
		overflow-x: visible;
	}

	#cr-order-confirm-dialog .cr-order-summary-table,
	.clothingreorder-portal-skin .cr-order-summary-table {
		display: table !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.clothingreorder-portal-skin .cr-portal-actions .button,
	.clothingreorder-portal-skin .cr-portal-actions input[type="button"] {
		max-width: none;
		width: 100%;
	}

	#cr-order-confirm-dialog .cr-order-dialog-actions,
	.clothingreorder-portal-skin .cr-order-dialog-actions {
		display: flex;
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 0.5rem;
	}

	#cr-order-confirm-dialog .cr-order-dialog-actions .button,
	#cr-order-confirm-dialog .cr-order-dialog-actions button,
	.clothingreorder-portal-skin .cr-order-dialog-actions .button,
	.clothingreorder-portal-skin .cr-order-dialog-actions button {
		width: 100%;
		min-height: 2.85rem;
	}

	#cr-order-confirm-dialog .cr-order-dialog-inner,
	.clothingreorder-portal-skin .cr-order-dialog-inner {
		padding: 0.85rem;
	}

	.jnotify-container,
	.vellinga-portal-flash-fallback,
	.clothingreorder-portal-skin .cr-portal-toast-error {
		top: max(3.75rem, calc(3rem + env(safe-area-inset-top))) !important;
		right: max(0.5rem, env(safe-area-inset-right)) !important;
		left: auto !important;
		transform: none !important;
		max-width: calc(100vw - 1rem) !important;
	}

	.medewerkers-portal-skin .medewerkers-portal-editfields {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.medewerkers-portal-skin .medewerkers-portal-field {
		width: 100%;
		min-width: 0;
	}

	.medewerkers-portal-skin .medewerkers-portal-field .flat,
	.medewerkers-portal-skin .medewerkers-portal-field select {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.medewerkers-portal-skin .medewerkers-portal-actions--below {
		display: flex;
		flex-direction: column-reverse;
		gap: 0.5rem;
	}

	.medewerkers-portal-skin .medewerkers-portal-actions--below .button,
	.medewerkers-portal-skin .medewerkers-portal-actions--below a.buttonrefused {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}

	.inmeetscheduler-portal-skin .im-portal-form table.border {
		display: block !important;
		width: 100% !important;
	}

	.inmeetscheduler-portal-skin .im-portal-form table.border tbody,
	.inmeetscheduler-portal-skin .im-portal-form table.border tr,
	.inmeetscheduler-portal-skin .im-portal-form table.border td {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box;
	}

	.inmeetscheduler-portal-skin .im-portal-form table.border td.titlefield {
		font-weight: 600;
		padding-bottom: 0.25rem;
	}

	.inmeetscheduler-portal-skin table.im-slot-grid {
		display: block !important;
		width: 100% !important;
	}

	.inmeetscheduler-portal-skin table.im-slot-grid thead {
		display: none !important;
	}

	.inmeetscheduler-portal-skin table.im-slot-grid tbody {
		display: block !important;
		width: 100%;
	}

	.inmeetscheduler-portal-skin table.im-slot-grid tbody tr {
		display: block !important;
		margin: 0 0 0.65rem;
		padding: 0.5rem 0.65rem;
		border: 1px solid var(--vellinga-border-soft);
		border-radius: var(--vellinga-radius);
		background: var(--vellinga-surface);
	}

	.inmeetscheduler-portal-skin table.im-slot-grid tbody tr th.im-slot-day {
		display: block !important;
		width: 100% !important;
		padding: 0 0 0.45rem;
		margin: 0 0 0.35rem;
		border: none;
		border-bottom: 1px solid var(--vellinga-border-soft);
		background: transparent;
		text-align: left;
	}

	.inmeetscheduler-portal-skin table.im-slot-grid tbody tr td.im-slot-cell {
		display: flex !important;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100% !important;
		padding: 0.45rem 0;
		border: none;
		border-bottom: 1px solid var(--vellinga-border-soft);
		text-align: left;
	}

	.inmeetscheduler-portal-skin table.im-slot-grid tbody tr td.im-slot-cell:last-child {
		border-bottom: none;
	}

	.inmeetscheduler-portal-skin table.im-slot-grid tbody tr td.im-slot-cell::before {
		content: attr(data-label);
		font-weight: 600;
		font-size: 0.85rem;
		color: var(--vellinga-text-muted);
		margin-right: 0.5rem;
		flex: 1 1 auto;
	}

	.inmeetscheduler-portal-skin .im-portal-details-row {
		flex-direction: column;
		align-items: stretch;
	}

	.inmeetscheduler-portal-skin .im-portal-details-measures {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.inmeetscheduler-portal-skin .im-portal-submit .button,
	.inmeetscheduler-portal-skin .vp-inmeet-footer .button {
		width: 100%;
		box-sizing: border-box;
	}

	.inmeetscheduler-portal-skin .vp-inmeet-form,
	.inmeetscheduler-portal-skin .vp-inmeet-card,
	.inmeetscheduler-portal-skin .im-portal-tablewrap,
	.inmeetscheduler-portal-skin #im-portal-requests-search {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr.liste_titre_filter {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.inmeetscheduler-portal-skin #webportal-inmeet-requests thead tr.liste_titre_filter > td {
		width: 100% !important;
		flex: 1 1 100% !important;
	}

	.inmeetscheduler-portal-skin #webportal-inmeet-requests tbody tr.oddeven td[colspan] {
		display: block !important;
		width: 100% !important;
	}

	.vellinga-portal-v2 .vp-shell {
		display: flex !important;
		flex-direction: column !important;
		gap: 1rem;
	}

	.vellinga-portal-v2 .vp-cart {
		order: 10;
		width: 100%;
	}

	.cr-cat-gallery-panel {
		min-height: min(58dvh, 24rem);
		padding: 3rem 0.75rem 2.5rem;
	}

	.cr-cat-gallery-img {
		max-height: min(78dvh, 34rem);
	}
}

/* Herbestellen ≥48rem: tabel (wint van touch/coarse stack-grid hierboven) */
@media (min-width: 48rem) {
	.clothingreorder-portal-skin #webportal-clothingreorder-list,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog,
	.clothingreorder-portal-skin table.cr-portal-grid-table {
		display: table !important;
		table-layout: fixed !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list colgroup,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog colgroup {
		display: table-column-group !important;
	}

	.clothingreorder-portal-skin table.cr-portal-grid-table thead,
	.clothingreorder-portal-skin #webportal-clothingreorder-list thead,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog thead {
		display: table-header-group !important;
	}

	.clothingreorder-portal-skin table.cr-portal-grid-table tbody,
	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody {
		display: table-row-group !important;
	}

	.clothingreorder-portal-skin table.cr-portal-grid-table tr,
	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr:not(.vp-row-hidden),
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow:not(.vp-row-hidden) {
		display: table-row !important;
		flex-flow: unset !important;
		flex-direction: unset !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		box-shadow: none !important;
		background: transparent !important;
		align-items: unset !important;
	}

	.clothingreorder-portal-skin table.cr-portal-grid-table th,
	.clothingreorder-portal-skin table.cr-portal-grid-table td,
	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr:not(.vp-row-hidden) td,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow:not(.vp-row-hidden) td {
		display: table-cell !important;
		flex: none !important;
		width: auto !important;
		max-width: none !important;
		order: unset !important;
		padding: 0.45rem 0.5rem !important;
		border-bottom: 1px solid var(--vellinga-border-soft) !important;
		flex-direction: unset !important;
		flex-wrap: unset !important;
		align-items: unset !important;
		justify-content: unset !important;
		white-space: normal !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow:not(.vp-row-hidden) td[data-col="row-actions"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow:not(.vp-row-hidden) td[data-col="row-status"] {
		display: table-cell !important;
	}

	.clothingreorder-portal-skin table.cr-portal-grid-table tbody tr td::before,
	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td::before,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow td::before {
		display: none !important;
		content: none !important;
	}

	.clothingreorder-portal-skin table.cr-portal-grid-table thead tr,
	.clothingreorder-portal-skin #webportal-clothingreorder-list thead tr,
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog thead tr {
		display: table-row !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="row-actions"] {
		display: none !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog th[data-col="line_medew"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="line_medew"],
	.clothingreorder-portal-skin #webportal-clothingreorder-list th[data-col="line_medew"],
	.clothingreorder-portal-skin #webportal-clothingreorder-list td[data-col="line_medew"] {
		width: 12rem !important;
		min-width: 12rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog th[data-col="row-actions"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="row-actions"] {
		width: 6.5rem !important;
		min-width: 6.5rem !important;
		max-width: 6.5rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog th[data-col="qty"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="qty"] {
		width: 8.5rem !important;
		min-width: 8.5rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog th[data-col="size"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="size"] {
		width: 7.25rem !important;
		min-width: 7.25rem !important;
	}

	.clothingreorder-portal-skin #webportal-clothingreorder-catalog th[data-col="row-status"],
	.clothingreorder-portal-skin #webportal-clothingreorder-catalog td[data-col="row-status"] {
		width: 11.5rem !important;
		min-width: 9rem !important;
	}
}

/* Medewerkers embedded list */
.medewerkers-portal-skin .medewerkers-portal-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.medewerkers-portal-skin #webportal-medewerkers-list tbody td {
	vertical-align: middle;
}

/* Inmeetscheduler embedded */
.inmeetscheduler-portal-skin .im-portal-title,
.inmeetscheduler-portal-skin .im-portal-company,
.inmeetscheduler-portal-skin .im-portal-intro {
	text-align: center;
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
}

.inmeetscheduler-portal-skin .im-portal-section-title {
	text-align: center;
	width: 100%;
	margin: 1.5rem 0 0.75rem;
}

.inmeetscheduler-portal-skin .im-slot-wrap {
	margin: 0.35rem auto 0.75rem;
	max-width: 36rem;
}

.inmeetscheduler-portal-skin table.im-slot-grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.inmeetscheduler-portal-skin table.im-slot-grid .im-slot-th,
.inmeetscheduler-portal-skin table.im-slot-grid td,
.inmeetscheduler-portal-skin table.im-slot-grid .im-slot-day {
	padding: 0.5rem 0.4rem;
	vertical-align: middle;
	border: 1px solid var(--vellinga-border-soft);
}

.inmeetscheduler-portal-skin table.im-slot-grid .im-slot-th {
	background: var(--vellinga-thead-bg);
	font-weight: 600;
	text-align: center;
}

.inmeetscheduler-portal-skin table.im-slot-grid td.im-slot-cell {
	text-align: center;
}

.inmeetscheduler-portal-skin .im-portal-details-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem 1.75rem;
}

.inmeetscheduler-portal-skin .im-portal-submit {
	margin-top: 1rem;
}

.inmeetscheduler-portal-skin #webportal-inmeet-requests tbody tr.im-portal-reqrow-hasnote {
	cursor: help;
}

/* Gefilterde rijen (stack-grid kaartweergave (<75rem)) */
.clothingreorder-portal-skin.vellinga-portal-v2 #webportal-clothingreorder-list tbody tr.vp-row-hidden,
.clothingreorder-portal-skin.vellinga-portal-v2 #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow.vp-row-hidden {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	overflow: hidden !important;
}

.vellinga-portal-v2 .vp-date-range {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: var(--vp-field);
	border: 1px solid var(--vp-line);
	border-radius: 8px;
	padding: 0.3rem 0.5rem;
}

.vellinga-portal-v2 .vp-date-range input[type="date"] {
	border: none !important;
	background: transparent !important;
	padding: 0.15rem 0.2rem !important;
	font-size: 0.78rem !important;
	width: auto;
	min-width: 7.5rem;
}

.vellinga-portal-v2 .vp-date-sep {
	color: var(--vp-text-soft);
	font-size: 0.8rem;
}

/* Regelstatus: groen / goud / rood (niet Dolibarr-blauw) */
.vellinga-portal-v2 .cr-line-status-badge.badge,
.vellinga-portal-v2 .clothingreorder-portal-skin .cr-line-status-badge.badge {
	color: #fff !important;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	border-radius: 6px !important;
	padding: 0.2em 0.45em !important;
	max-width: 100%;
}

.vellinga-portal-v2 .cr-line-status-badge.cr-line-badge-ok,
.vellinga-portal-v2 .badge.cr-line-badge-ok {
	background-color: #16a34a !important;
	border: 1px solid #15803d !important;
	color: #fff !important;
}

.vellinga-portal-v2 .cr-line-status-badge.cr-line-badge-warn,
.vellinga-portal-v2 .badge.cr-line-badge-warn {
	background-color: #d97706 !important;
	border: 1px solid #b45309 !important;
	color: #fff !important;
}

.vellinga-portal-v2 .cr-line-status-badge.cr-line-badge-error,
.vellinga-portal-v2 .badge.cr-line-badge-error {
	background-color: #c8102e !important;
	border: 1px solid #a80d26 !important;
	color: #fff !important;
}

.vellinga-portal-v2 td[data-col="row-status"] {
	min-width: 6.5rem;
}

.vellinga-portal-v2 td[data-col="row-status"] .cr-line-status-badge[hidden] {
	display: none !important;
}

/* Winkelwagen-count rood accent */
.vellinga-portal-v2 .vp-cart-count {
	background: var(--vp-accent) !important;
}

/* Assortiment: productfoto — neutrale achtergrond (geen accent/rood vlak) */
.clothingreorder-portal-skin.vellinga-portal-v2 a.cr-cat-thumb,
.clothingreorder-portal-skin.vellinga-portal-v2 button.cr-cat-thumb {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	color: inherit !important;
	-webkit-text-fill-color: unset !important;
}

.clothingreorder-portal-skin.vellinga-portal-v2 td[data-col="photo"] {
	background: transparent !important;
}

.clothingreorder-portal-skin.vellinga-portal-v2 #webportal-clothingreorder-catalog .cr-cat-thumb-img {
	display: block !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0;
	object-fit: contain;
	object-position: center;
}

/* Productfoto-popup (dialog staat op document.body) */
dialog.cr-cat-gallery-dialog,
#cr-cat-gallery-dlg.cr-cat-gallery-dialog {
	box-sizing: border-box;
	width: min(92vw, 38rem) !important;
	max-width: min(92vw, 38rem) !important;
	padding: 0 !important;
	margin: auto;
	border: none;
	border-radius: 14px;
	background: var(--vp-surface, #fff) !important;
	overflow: hidden;
}

dialog.cr-cat-gallery-dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.cr-cat-gallery-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	max-height: min(88vh, 32rem);
	padding: 2.75rem 3.5rem 3.5rem;
	background: var(--vp-surface, #fff) !important;
}

.cr-cat-gallery-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: min(80vw, 32rem);
	max-height: min(62vh, 26rem);
	min-height: 8rem;
}

.cr-cat-gallery-img {
	display: block;
	max-width: 100% !important;
	max-height: min(62vh, 26rem) !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
	background: var(--vp-surface-2, #f6f8fc);
	border-radius: 8px;
}

.cr-cat-gallery-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2.1rem;
	padding: 0 1rem;
	text-align: center;
	pointer-events: none;
}

.cr-cat-gallery-product {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--vp-text, #1a1a1a);
	line-height: 1.3;
}

.cr-cat-gallery-size {
	margin-top: 0.2rem;
	font-size: 0.8rem;
	color: var(--vp-text-mid, #555);
}

.cr-cat-gallery-size-lbl {
	font-weight: 600;
}

.cr-cat-gallery-counter {
	position: absolute;
	bottom: 0.45rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.75rem;
	color: var(--vp-text-soft, #888);
}

.cr-cat-gallery-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 3;
	width: 2.5rem;
	height: 2.5rem;
	min-width: 44px;
	min-height: 44px;
	border: 1px solid var(--vp-line, #ccc);
	border-radius: 50%;
	background: var(--vp-surface, #fff);
	color: var(--vp-text, #222);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.cr-cat-gallery-close:hover {
	background: var(--vp-surface-2, #f6f8fc);
	border-color: var(--vp-text-mid, #666);
}

.cr-cat-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 2.75rem;
	height: 2.75rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid var(--vp-line, #ccc);
	border-radius: 50%;
	background: var(--vp-surface, #fff);
	color: var(--vp-text, #222);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cr-cat-gallery-nav-ico {
	font-size: 1.25rem;
	line-height: 1;
	font-weight: 700;
}

.cr-cat-gallery-nav:hover:not(:disabled):not([hidden]) {
	background: var(--vp-accent, #c8102e);
	border-color: var(--vp-accent, #c8102e);
	color: #fff;
}

.cr-cat-gallery-nav:focus-visible {
	outline: 2px solid var(--vp-accent, #c8102e);
	outline-offset: 2px;
}

.cr-cat-gallery-nav:disabled,
.cr-cat-gallery-nav[hidden] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.cr-cat-gallery-prev {
	left: 0.65rem;
}

.cr-cat-gallery-next {
	right: 0.65rem;
}

/* --------------------------------------------------------------------------
   Toasts (jNotify + Dolibarr div.ok) — compact rechtsboven
   -------------------------------------------------------------------------- */
body.bodyforpublicportal,body[data-controller] div.ok,
body.bodyforpublicportal,body[data-controller] .ok,
body.bodyforpublicportal,body[data-controller] div.warning,
body.bodyforpublicportal,body[data-controller] .warning,
body.bodyforpublicportal,body[data-controller] div.error,
body.bodyforpublicportal,body[data-controller] .error,
body.bodyforpublicportal,body[data-controller] div.info,
body.bodyforpublicportal,body[data-controller] .infos {
	position: fixed !important;
	top: max(4.25rem, calc(3.5rem + env(safe-area-inset-top))) !important;
	right: max(0.75rem, env(safe-area-inset-right)) !important;
	left: auto !important;
	bottom: auto !important;
	width: auto !important;
	max-width: min(20rem, calc(100vw - 1.5rem)) !important;
	margin: 0 !important;
	padding: 0.55rem 0.75rem !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	text-align: left !important;
	z-index: 100001 !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
}

body.bodyforpublicportal,body[data-controller] div.ok,
body.bodyforpublicportal,body[data-controller] .ok {
	background: #d6f5dd !important;
	color: #1c6b34 !important;
	border-left: 3px solid #2e9b52 !important;
}

body.bodyforpublicportal,body[data-controller] div.warning,
body.bodyforpublicportal,body[data-controller] .warning {
	background: #fff7d1 !important;
	color: #9a7b1a !important;
}

body.bodyforpublicportal,body[data-controller] div.error,
body.bodyforpublicportal,body[data-controller] .error {
	background: #f8d3dc !important;
	color: #8a1f3a !important;
}

.jnotify-container {
	top: max(4.25rem, calc(3.5rem + env(safe-area-inset-top))) !important;
	right: max(0.75rem, env(safe-area-inset-right)) !important;
	left: auto !important;
	bottom: auto !important;
	transform: none !important;
	width: auto !important;
	max-width: min(20rem, calc(100vw - 1.5rem)) !important;
	z-index: 100000 !important;
}

.jnotify-container .jnotify-notification {
	position: relative !important;
	display: block !important;
	width: auto !important;
	max-width: min(20rem, calc(100vw - 1.5rem)) !important;
	margin: 0 0 0.45rem 0 !important;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.jnotify-container .jnotify-notification .jnotify-message {
	padding: 0.55rem 1.75rem 0.55rem 0.75rem !important;
	text-align: left !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}

.jnotify-container .jnotify-notification-success .jnotify-background {
	background-color: #d6f5dd !important;
	opacity: 1 !important;
}

.jnotify-container .jnotify-notification-success .jnotify-message,
.jnotify-container .jnotify-notification-success a.jnotify-close {
	color: #1c6b34 !important;
}

.jnotify-container .jnotify-notification-error .jnotify-background {
	background-color: #f8d3dc !important;
	opacity: 1 !important;
}

.jnotify-container .jnotify-notification-error .jnotify-message,
.jnotify-container .jnotify-notification-error a.jnotify-close {
	color: #8a1f3a !important;
}

.jnotify-container .jnotify-notification-warning .jnotify-background {
	background-color: #fff7d1 !important;
	opacity: 1 !important;
}

.jnotify-container .jnotify-notification-warning .jnotify-message,
.jnotify-container .jnotify-notification-warning a.jnotify-close {
	color: #9a7b1a !important;
}

.vellinga-portal-flash-fallback {
	position: fixed;
	top: max(4.25rem, calc(3.5rem + env(safe-area-inset-top)));
	right: max(0.75rem, env(safe-area-inset-right));
	left: auto;
	max-width: min(20rem, calc(100vw - 1.5rem));
	z-index: 100000;
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	padding: 0.55rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
}

.vellinga-portal-flash-fallback-success {
	background-color: #d6f5dd;
	color: #1c6b34;
}

.vellinga-portal-flash-fallback-warning {
	background-color: #fff7d1;
	color: #9a7b1a;
}

.vellinga-portal-flash-fallback-error {
	background-color: #f8d3dc;
	color: #8a1f3a;
}

/* ---------- Fixes: foto, filters, popups x2 (2026-06) ---------- */


/* Geen accentvlak op thumb (bold/tint: link-styling van thema) */
.clothingreorder-portal-skin.vellinga-portal-v2 a.cr-cat-thumb,
.clothingreorder-portal-skin.vellinga-portal-v2 button.cr-cat-thumb,
.clothingreorder-portal-skin.vellinga-portal-v2 td[data-col="photo"] a,
.clothingreorder-portal-skin.vellinga-portal-v2 td[data-col="photo"] button {
	display: inline-block !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	height: auto !important;
	color: inherit !important;
	-webkit-text-fill-color: unset !important;
	text-decoration: none !important;
	appearance: none !important;
}

.clothingreorder-portal-skin.vellinga-portal-v2 td[data-col="photo"] {
	background: transparent !important;
	background-color: transparent !important;
}

.clothingreorder-portal-skin.vellinga-portal-v2 .cr-cat-thumb-img,
.clothingreorder-portal-skin.vellinga-portal-v2 #webportal-clothingreorder-catalog .cr-cat-thumb-img {
	display: block !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	object-fit: contain !important;
}

.clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr.vp-row-hidden,
.clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow.vp-row-hidden {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	overflow: hidden !important;
}

/* PROV popup: keep card size in bold theme (no fullscreen panel) */
dialog#vp-draft-popover.vp-draft-popover,
.vellinga-portal-v2 dialog#vp-draft-popover.vp-draft-popover {
	width: min(92vw, 42rem) !important;
	max-width: min(92vw, 42rem) !important;
	max-height: min(88vh, 36rem) !important;
}

html[data-vp-theme="bold"] dialog#vp-draft-popover .vp-draft-popover-title,
html[data-vp-theme="bold"] .vellinga-portal-v2 dialog#vp-draft-popover .vp-draft-popover-title {
	font-size: 1rem !important;
}

html[data-vp-theme="bold"] dialog#vp-draft-popover .vp-draft-popover-body,
html[data-vp-theme="bold"] .vellinga-portal-v2 dialog#vp-draft-popover .vp-draft-popover-body {
	font-size: 0.9375rem !important;
	max-height: min(72vh, 28rem) !important;
}

html[data-vp-theme="bold"] dialog#vp-draft-popover .vp-draft-popover-body table,
html[data-vp-theme="bold"] .vellinga-portal-v2 dialog#vp-draft-popover .vp-draft-popover-body table {
	font-size: 0.875rem !important;
}

.vp-order-chips,
.vellinga-portal-v2 .vp-order-chips {
	position: relative;
	z-index: 5;
}

.vp-draft-chip-btn,
.vellinga-portal-v2 .vp-draft-chip-btn {
	pointer-events: auto !important;
	cursor: pointer !important;
	position: relative;
	z-index: 6;
}

/* Succes-/foutmeldingen (jNotify + div.ok) — groter, rechtsboven */
body.bodyforpublicportal,body[data-controller] div.ok,
body.bodyforpublicportal,body[data-controller] .ok,
body.bodyforpublicportal,body[data-controller] div.warning,
body.bodyforpublicportal,body[data-controller] .warning,
body.bodyforpublicportal,body[data-controller] div.error,
body.bodyforpublicportal,body[data-controller] .error,
body.bodyforpublicportal,body[data-controller] .infos,
body.bodyforpublicportal,body[data-controller] div.info {
	max-width: min(32rem, calc(100vw - 1.5rem)) !important;
	padding: 1rem 1.35rem !important;
	font-size: 1.125rem !important;
	line-height: 1.45 !important;
	font-weight: 600 !important;
}

.jnotify-container {
	top: max(4.25rem, calc(3.5rem + env(safe-area-inset-top))) !important;
	right: max(0.75rem, env(safe-area-inset-right)) !important;
	left: auto !important;
	bottom: auto !important;
	width: auto !important;
	max-width: min(32rem, calc(100vw - 1.5rem)) !important;
	z-index: 100001 !important;
}

.jnotify-container .jnotify-notification {
	max-width: min(32rem, calc(100vw - 1.5rem)) !important;
	margin-bottom: 0.75rem !important;
	border-radius: 10px !important;
}

.jnotify-container .jnotify-notification .jnotify-message {
	padding: 1rem 3rem 1rem 1rem !important;
	font-size: 1.125rem !important;
	line-height: 1.45 !important;
	font-weight: 600 !important;
}

.jnotify-container .jnotify-notification-success .jnotify-message,
.jnotify-container .jnotify-notification-mesgs .jnotify-message,
.jnotify-container .jnotify-notification-ok .jnotify-message,
.jnotify-container .jnotify-notification:not(.jnotify-notification-error):not(.jnotify-notification-warning) .jnotify-message {
	color: #1c6b34 !important;
}

.jnotify-container .jnotify-notification-success .jnotify-background,
.jnotify-container .jnotify-notification-mesgs .jnotify-background,
.jnotify-container .jnotify-notification-ok .jnotify-background,
.jnotify-container .jnotify-notification:not(.jnotify-notification-error):not(.jnotify-notification-warning) .jnotify-background {
	background-color: #d6f5dd !important;
	opacity: 1 !important;
}

body.bodyforpublicportal,body[data-controller][data-vp-theme="bold"] .jnotify-container .jnotify-notification-success .jnotify-background,
body.bodyforpublicportal,body[data-controller][data-vp-theme="bold"] .jnotify-container .jnotify-notification-mesgs .jnotify-background,
body.bodyforpublicportal,body[data-controller][data-vp-theme="bold"] .jnotify-container .jnotify-notification:not(.jnotify-notification-error):not(.jnotify-notification-warning) .jnotify-background {
	background-color: #1e3d28 !important;
}

body.bodyforpublicportal,body[data-controller][data-vp-theme="bold"] .jnotify-container .jnotify-notification-success .jnotify-message,
body.bodyforpublicportal,body[data-controller][data-vp-theme="bold"] .jnotify-container .jnotify-notification-mesgs .jnotify-message,
body.bodyforpublicportal,body[data-controller][data-vp-theme="bold"] .jnotify-container .jnotify-notification:not(.jnotify-notification-error):not(.jnotify-notification-warning) .jnotify-message {
	color: #7ddea0 !important;
}

.jnotify-container a.jnotify-close {
	font-size: 2.5rem !important;
	top: 0.7rem !important;
	right: 0.9rem !important;
}

.vellinga-portal-flash-fallback {
	max-width: min(40rem, calc(100vw - 1.5rem));
	padding: 1.1rem 1.5rem;
	font-size: 1.625rem;
	line-height: 1.4;
}

.clothingreorder-portal-skin .cr-portal-toast-error {
	max-width: min(40rem, calc(100vw - 1.5rem)) !important;
	padding: 1.1rem 1.5rem !important;
	font-size: 1.625rem !important;
}

/* ---------- Native webportaal-shell (nav, hero, body) = zelfde thema als module ---------- */

/*
 * Native pagina's zonder .vellinga-portal-v2 (Verkooporders, Offertes, …) — default bold.
 * Na switcher: .vellinga-portal-themed + [data-vp-theme] (ook zonder volledige v2-skin).
 */
html body[data-controller]:not(:has(.vellinga-portal-v2)):not(.vellinga-portal-themed),
html body[data-controller][data-vp-theme="bold"]:not(.vellinga-portal-themed),
html body[data-controller]:not([data-vp-theme]):not(.vellinga-portal-themed) {
	--vp-accent: #ff2d4a;
	--vp-accent-hover: #e61e3a;
	--vp-accent-soft: #2a1a1d;
	--vp-accent-mid: #5a2730;
	--vp-bg: #1a1c20;
	--vp-surface: #242730;
	--vp-surface-2: #2b2f3a;
	--vp-text: #f3f4f6;
	--vp-text-mid: #b4b9c4;
	--vp-text-soft: #707784;
	--vp-line: #353a44;
	--vp-field: #2b2f3a;
	--vellinga-bg: #1a1c20;
	--vellinga-surface: #242730;
	--vellinga-surface-2: #2b2f3a;
	--vellinga-text: #f3f4f6;
	--vellinga-text-muted: #b4b9c4;
	--vellinga-border: #353a44;
	--vellinga-thead-bg: #2b2f3a;
	--vellinga-thead-text: #f3f4f6;
	--vellinga-row-hover: #2b2f3a;
	--vellinga-red: #ff2d4a;
	background-color: var(--vp-bg) !important;
	color: var(--vp-text) !important;
}

html body[data-controller]:not(:has(.vellinga-portal-v2)) nav.primary-top-nav,
html body[data-controller]:not(:has(.vellinga-portal-v2)) .primary-top-nav {
	background: var(--vp-surface) !important;
	border-bottom: 1px solid var(--vp-line) !important;
	color: var(--vp-text) !important;
}

html body[data-controller]:not(:has(.vellinga-portal-v2)) .primary-top-nav a,
html body[data-controller]:not(:has(.vellinga-portal-v2)) .primary-top-nav .nav-link {
	color: var(--vp-text) !important;
}

html body[data-controller]:not(:has(.vellinga-portal-v2)) .primary-top-nav .nav-item.active .nav-link,
html body[data-controller]:not(:has(.vellinga-portal-v2)) .primary-top-nav li.active .nav-link {
	color: var(--vp-accent) !important;
	border-bottom-color: var(--vp-accent) !important;
}

html body[data-controller]:not(:has(.vellinga-portal-v2)) .hero-header {
	background: var(--vp-surface) !important;
	border-bottom: 1px solid var(--vp-line) !important;
	padding-top: calc(var(--vp-portal-nav-h, 3.5rem) + 1rem) !important;
	padding-bottom: 1.25rem !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 1.25rem !important;
	min-height: 0 !important;
	overflow: visible !important;
}

html body[data-controller]:not(:has(.vellinga-portal-v2)) .hero-header__title {
	color: var(--vp-text) !important;
	font-size: clamp(1.875rem, 4vw, 2.125rem) !important;
	line-height: 1.2 !important;
}

html body[data-controller]:not(:has(.vellinga-portal-v2)) .hero-header__desc {
	color: var(--vp-text-mid) !important;
}

html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container table.liste tbody tr.oddeven,
html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container table[role="grid"] tbody tr {
	background: var(--vp-surface) !important;
	color: var(--vp-text) !important;
}

html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container table.liste tbody tr.oddeven:nth-child(even) td,
html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container table[role="grid"] tbody tr:nth-child(even) td {
	background: var(--vp-surface-2) !important;
}

html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container table.liste tr.liste_titre,
html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container table.liste tr.liste_titre_filter {
	background: var(--vp-surface-2) !important;
	color: var(--vp-text) !important;
}

html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container table.liste tr.liste_titre a {
	color: var(--vp-text) !important;
}

html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container table.liste tr.liste_titre a:hover {
	color: var(--vp-accent) !important;
}

/* Native lijsten — PDF download (eldy #0a1464 onleesbaar op donkere rij) */
body[data-controller][data-vp-theme] main.container .btn-download-link,
body[data-controller][data-vp-theme] main.container a.btn-download-link[role="downloadlink"],
body[data-controller][data-vp-theme] main.container a[role="downloadlink"].btn-download-link,
html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container .btn-download-link,
html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container a[role="downloadlink"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.35rem !important;
	padding: 0.32rem 0.6rem !important;
	min-height: 1.75rem !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: 0.8125rem !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	color: var(--vp-accent) !important;
	background: var(--vp-accent-soft, rgba(255, 45, 74, 0.14)) !important;
	border: 1px solid var(--vp-accent-mid, rgba(255, 45, 74, 0.45)) !important;
	box-shadow: none !important;
}

body[data-controller][data-vp-theme] main.container .btn-download-link:hover,
body[data-controller][data-vp-theme] main.container a.btn-download-link[role="downloadlink"]:hover,
html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container .btn-download-link:hover,
html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container a[role="downloadlink"]:hover {
	color: #fff !important;
	background: var(--vp-accent) !important;
	border-color: var(--vp-accent) !important;
}

body[data-controller][data-vp-theme] main.container .btn-download-link .fa,
body[data-controller][data-vp-theme] main.container .btn-download-link .fas,
body[data-controller][data-vp-theme] main.container .btn-download-link .far,
body[data-controller][data-vp-theme] main.container a[role="downloadlink"] .fa,
html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container .btn-download-link .fa,
html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container a[role="downloadlink"] .fa {
	color: inherit !important;
}

body[data-controller][data-vp-theme] main.container table[role="grid"] td[data-col="download_link"],
body[data-controller][data-vp-theme] main.container table[id^="webportal-"] td[data-col="download_link"],
html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container table[role="grid"] td[data-col="download_link"],
html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container table[id^="webportal-"] td[data-col="download_link"] {
	min-width: 5.5rem !important;
	text-align: center !important;
	vertical-align: middle !important;
}

html[data-vp-theme="bold"],
body.bodyforpublicportal,body[data-controller][data-vp-theme="bold"],
body.bodyforpublicportal,body[data-controller].vellinga-portal-themed[data-vp-theme="bold"],
body.vellinga-portal-themed[data-vp-theme="bold"]:not(:has(.vellinga-portal-v2)) {
	--vp-accent: #ff2d4a;
	--vp-accent-hover: #e61e3a;
	--vp-accent-soft: #2a1a1d;
	--vp-accent-mid: #5a2730;
	--vp-bg: #1a1c20;
	--vp-surface: #242730;
	--vp-surface-2: #2b2f3a;
	--vp-field: #2b2f3a;
	--vp-text: #f3f4f6;
	--vp-text-mid: #b4b9c4;
	--vp-line: #353a44;
	--vellinga-bg: #1a1c20;
	--vellinga-surface: #242730;
	--vellinga-text: #f3f4f6;
	--vellinga-text-muted: #b4b9c4;
	--vellinga-border: #353a44;
	--vellinga-red: #ff2d4a;
	background-color: var(--vp-bg) !important;
	color: var(--vp-text) !important;
}

html[data-vp-theme="tint"],
body.bodyforpublicportal,body[data-controller][data-vp-theme="tint"],
body.bodyforpublicportal,body[data-controller].vellinga-portal-themed[data-vp-theme="tint"],
body.vellinga-portal-themed[data-vp-theme="tint"]:not(:has(.vellinga-portal-v2)) {
	--vp-accent: #c8102e;
	--vp-accent-hover: #a80d26;
	--vp-accent-soft: #f9e8eb;
	--vp-accent-mid: #e8a0ab;
	--vp-bg: #eef1f8;
	--vp-surface: #fff;
	--vp-surface-2: #f8f9fb;
	--vp-field: #fff;
	--vp-text: #1e3a5f;
	--vp-text-mid: #45597a;
	--vp-line: #e0e5f0;
	--vellinga-bg: #eef1f8;
	--vellinga-surface: #fff;
	--vellinga-text: #1e3a5f;
	--vellinga-text-muted: #45597a;
	--vellinga-border: #e0e5f0;
	--vellinga-red: #c8102e;
	background-color: var(--vp-bg) !important;
	color: var(--vp-text) !important;
}

body.bodyforpublicportal,body[data-controller][data-vp-theme] .public-portal-header,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .header-portal,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .header-nav,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .navigation,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .topnav,
body.bodyforpublicportal,body[data-controller][data-vp-theme] nav.primary-top-nav,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .primary-top-nav {
	background: var(--vp-surface) !important;
	border-bottom: 1px solid var(--vp-line) !important;
	color: var(--vp-text) !important;
}

body.bodyforpublicportal,body[data-controller][data-vp-theme] .public-portal-header a,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .header-nav a,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .navigation a,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .topnav a,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .primary-top-nav a,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .primary-top-nav .nav-link,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .primary-top-nav .menu-entries a {
	color: var(--vp-text) !important;
	font-weight: 600;
	text-decoration: none !important;
	border-bottom: 2px solid transparent;
}

body.bodyforpublicportal,body[data-controller][data-vp-theme] .public-portal-header a:hover,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .header-nav a:hover,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .navigation a:hover,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .topnav a:hover,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .primary-top-nav a:hover,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .primary-top-nav .nav-link:hover {
	color: var(--vp-text) !important;
	border-bottom-color: var(--vp-text-mid) !important;
}

body.bodyforpublicportal,body[data-controller][data-vp-theme] .public-portal-header a.active,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .header-nav a.active,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .navigation a.active,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .topnav a.active,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .primary-top-nav .nav-item.active .nav-link,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .primary-top-nav .nav-link.active,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .primary-top-nav li.active .nav-link {
	color: var(--vp-accent) !important;
	border-bottom-color: var(--vp-accent) !important;
}

body.bodyforpublicportal,body[data-controller][data-vp-theme] .primary-top-nav .brand__logo-link,
body.bodyforpublicportal,body[data-controller][data-vp-theme] .primary-top-nav .logout .nav-link {
	color: var(--vp-text) !important;
}

body.bodyforpublicportal,body[data-controller][data-vp-theme] .hero-header {
	background: var(--vp-surface) !important;
	border-bottom: 1px solid var(--vp-line) !important;
	color: var(--vp-text) !important;
	padding-top: calc(var(--vp-portal-nav-h, 3.5rem) + 1rem) !important;
	padding-bottom: 1.25rem !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 1.25rem !important;
	min-height: 0 !important;
	overflow: visible !important;
}

body.bodyforpublicportal,body[data-controller][data-vp-theme] .hero-header__title {
	color: var(--vp-text) !important;
}

body.bodyforpublicportal,body[data-controller][data-vp-theme] .hero-header__desc {
	color: var(--vp-text-mid) !important;
}

body.bodyforpublicportal,body[data-controller][data-vp-theme] main.container,
body.vellinga-portal-themed[data-vp-theme]:not(:has(.vellinga-portal-v2)) main.container {
	background: var(--vp-bg) !important;
	color: var(--vp-text) !important;
}

/* Native core-lijsten: table[role=grid] (Verkooporders/Offertes/Facturen) */
body.bodyforpublicportal[data-vp-theme] main.container table[role="grid"],
body.bodyforpublicportal[data-vp-theme] main.container table[id^="webportal-"],
body[data-controller][data-vp-theme] main.container table[role="grid"],
body[data-controller][data-vp-theme] main.container table[id^="webportal-"],
body.vellinga-portal-themed[data-vp-theme]:not(:has(.vellinga-portal-v2)) main.container table[role="grid"],
body.vellinga-portal-themed[data-vp-theme]:not(:has(.vellinga-portal-v2)) main.container table[id^="webportal-"] {
	background: var(--vp-surface) !important;
	border: 1px solid var(--vp-line) !important;
	color: var(--vp-text) !important;
}

body[data-controller][data-vp-theme] main.container table[role="grid"] thead th,
body[data-controller][data-vp-theme] main.container table[role="grid"] thead td,
body[data-controller][data-vp-theme] main.container table[role="grid"] thead tr[role="search-row"] td,
body[data-controller][data-vp-theme] main.container table[id^="webportal-"] thead th,
body[data-controller][data-vp-theme] main.container table[id^="webportal-"] thead td,
body.vellinga-portal-themed[data-vp-theme]:not(:has(.vellinga-portal-v2)) main.container table[role="grid"] thead th,
body.vellinga-portal-themed[data-vp-theme]:not(:has(.vellinga-portal-v2)) main.container table[role="grid"] thead td {
	background: var(--vp-surface-2) !important;
	color: var(--vp-text) !important;
	border-color: var(--vp-line) !important;
}

body[data-controller][data-vp-theme] main.container table[role="grid"] thead th a,
body[data-controller][data-vp-theme] main.container table[id^="webportal-"] thead th a {
	color: var(--vp-text) !important;
}

body[data-controller][data-vp-theme] main.container table[role="grid"] thead th a:hover,
body[data-controller][data-vp-theme] main.container table[id^="webportal-"] thead th a:hover {
	color: var(--vp-accent) !important;
}

body[data-controller][data-vp-theme] main.container table[role="grid"] tbody td,
body[data-controller][data-vp-theme] main.container table[role="grid"] tbody tr,
body[data-controller][data-vp-theme] main.container table[id^="webportal-"] tbody td,
body[data-controller][data-vp-theme] main.container table[id^="webportal-"] tbody tr,
body.vellinga-portal-themed[data-vp-theme]:not(:has(.vellinga-portal-v2)) main.container table[role="grid"] tbody td,
body.vellinga-portal-themed[data-vp-theme]:not(:has(.vellinga-portal-v2)) main.container table[id^="webportal-"] tbody td {
	background: var(--vp-surface) !important;
	color: var(--vp-text) !important;
	border-color: var(--vp-line) !important;
}

body[data-controller][data-vp-theme] main.container table[role="grid"] tbody tr:nth-child(even) td,
body[data-controller][data-vp-theme] main.container table[id^="webportal-"] tbody tr:nth-child(even) td,
body.vellinga-portal-themed[data-vp-theme]:not(:has(.vellinga-portal-v2)) main.container table[role="grid"] tbody tr:nth-child(even) td {
	background: var(--vp-surface-2) !important;
}

body[data-controller][data-vp-theme] main.container table[role="grid"] thead input,
body[data-controller][data-vp-theme] main.container table[role="grid"] thead select,
body[data-controller][data-vp-theme] main.container table[id^="webportal-"] thead input,
body[data-controller][data-vp-theme] main.container table[id^="webportal-"] thead select {
	background: var(--vp-field, var(--vp-surface-2)) !important;
	color: var(--vp-text) !important;
	border-color: var(--vp-line) !important;
}

html[data-vp-theme="bold"] {
	background: #1a1c20 !important;
	min-height: 100%;
}

html[data-vp-theme="tint"] {
	background: #eef1f8 !important;
	min-height: 100%;
}

/* Zichtbare flash (groen/geel/rood) — altijd groot, rechtsboven */
.vellinga-portal-flash-banner {
	position: fixed;
	top: max(4.25rem, calc(3.5rem + env(safe-area-inset-top)));
	right: max(0.75rem, env(safe-area-inset-right));
	left: auto;
	z-index: 100003;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto;
	max-width: min(32rem, calc(100vw - 1.5rem));
	padding: 1rem 1.35rem;
	border-radius: 10px;
	font-size: 1.125rem;
	line-height: 1.45;
	font-weight: 600;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

.vellinga-portal-flash-banner-success {
	background: #d6f5dd;
	color: #1c6b34;
	border: 1px solid #9ed4ad;
}

.vellinga-portal-flash-banner-warning {
	background: #fff7d1;
	color: #9a7b1a;
	border: 1px solid #e8d68a;
}

.vellinga-portal-flash-banner-error {
	background: #f8d3dc;
	color: #8a1f3a;
	border: 1px solid #e8a8b8;
}

body.bodyforpublicportal,body[data-controller][data-vp-theme="bold"] .vellinga-portal-flash-banner-success {
	background: #1e3d28;
	color: #7ddea0;
	border-color: #2d5c3a;
}

/* ── 1.2.10: legacy D22 pico-nav — switcher rechts, menu horizontaal ── */
html[data-vp-theme] nav.primary-top-nav {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.25rem 0.5rem;
}

html[data-vp-theme] nav.primary-top-nav > .brand {
	flex-shrink: 0;
}

html[data-vp-theme] nav.primary-top-nav .menu-entries,
html[data-vp-theme] nav.primary-top-nav ul.menu-entries {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

html[data-vp-theme] nav.primary-top-nav .vp-theme-nav {
	margin-left: auto !important;
	flex-shrink: 0;
	order: 90;
}

html[data-vp-theme] nav.primary-top-nav ul.logout {
	margin-left: 0 !important;
	order: 91;
}

/* Herbestellen — assortiment/historie secties (contrast bold) */
html[data-vp-theme="bold"] .vellinga-portal-v2.clothingreorder-portal-skin details.cr-section {
	background: var(--vp-surface-2);
	border-color: var(--vp-line);
}

html[data-vp-theme="bold"] .vellinga-portal-v2.clothingreorder-portal-skin details.cr-section > summary.cr-section-summary {
	color: var(--vp-text);
	font-weight: 600;
}

html[data-vp-theme="bold"] .vellinga-portal-v2.clothingreorder-portal-skin .cr-section-history > summary.cr-section-summary {
	border-left: 3px solid var(--vp-accent-mid);
	padding-left: 0.5rem;
}

html[data-vp-theme="bold"] .vellinga-portal-v2.clothingreorder-portal-skin .cr-section-catalog > summary.cr-section-summary {
	border-left: 3px solid var(--vp-accent);
	padding-left: 0.5rem;
}

html[data-vp-theme="bold"] .vellinga-portal-v2.clothingreorder-portal-skin details.cr-section .opacitymedium,
html[data-vp-theme="bold"] .vellinga-portal-v2.clothingreorder-portal-skin details.cr-section .cr-section-body > p {
	color: var(--vp-text-mid) !important;
}

html[data-vp-theme="tint"] .vellinga-portal-v2.clothingreorder-portal-skin details.cr-section {
	background: var(--vp-surface);
	border-color: var(--vp-line);
}

html[data-vp-theme="tint"] .vellinga-portal-v2.clothingreorder-portal-skin details.cr-section > summary.cr-section-summary {
	color: var(--vp-text);
}

/* Winkelwagen — eldy zet div-kleur op #000; expliciet thema (bold + tint) */
html[data-vp-theme] .vellinga-portal-v2 .vp-cart,
html[data-vp-theme] .vellinga-portal-v2 .vp-cart-title,
html[data-vp-theme] .vellinga-portal-v2 .vp-ci-name,
html[data-vp-theme] .vellinga-portal-v2 .vp-cart-summary .val,
html[data-vp-theme] .vellinga-portal-v2 .vp-cart-medew-ack,
html[data-vp-theme] .vellinga-portal-v2 .vp-cart-medew-warn,
html[data-vp-theme] .vellinga-portal-v2 .vp-cart-medew-ack-lbl {
	color: var(--vp-text) !important;
}

html[data-vp-theme] .vellinga-portal-v2 .vp-cart-medew-ack-lbl input[type="checkbox"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
	flex: 0 0 1.25rem !important;
	width: 1.25rem !important;
	height: 1.25rem !important;
	min-width: 1.25rem !important;
	min-height: 1.25rem !important;
	margin: 0 !important;
	border: 2px solid var(--vp-warn) !important;
	border-radius: 4px !important;
	background-color: var(--vp-surface) !important;
	background-image: none !important;
	cursor: pointer !important;
}

html[data-vp-theme] .vellinga-portal-v2 .vp-cart-medew-ack-lbl input[type="checkbox"]:checked {
	background-color: var(--vp-warn) !important;
	border-color: var(--vp-warn) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.2 8.4 11 1.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 0.7rem !important;
}

html[data-vp-theme] .vellinga-portal-v2 .vp-cart-medew-ack:hover {
	background: var(--vp-warn-soft) !important;
	color: var(--vp-text) !important;
}

html[data-vp-theme] .vellinga-portal-v2 .vp-cart-medew-ack-lbl:hover {
	background: transparent !important;
	color: var(--vp-text) !important;
}

html[data-vp-theme] .vellinga-portal-v2 .vp-cart-medew-ack-lbl {
	background: transparent !important;
}

html[data-vp-theme] .vellinga-portal-v2 .vp-ci-meta,
html[data-vp-theme] .vellinga-portal-v2 .vp-cart-summary .lbl,
html[data-vp-theme] .vellinga-portal-v2 .vp-cart-note label {
	color: var(--vp-text-soft) !important;
}

/* Native welkom — tegels/kaarten op donker thema */
html[data-vp-theme="bold"] body[data-controller]:not(:has(.vellinga-portal-v2)) main.container .box,
html[data-vp-theme="bold"] body[data-controller]:not(:has(.vellinga-portal-v2)) main.container .boxstats,
html[data-vp-theme="bold"] body[data-controller]:not(:has(.vellinga-portal-v2)) main.container .fichecenter .box {
	background: var(--vp-surface, #242730) !important;
	border-color: var(--vp-line, #353a44) !important;
	color: var(--vp-text, #f3f4f6) !important;
}

html[data-vp-theme="bold"] body[data-controller]:not(:has(.vellinga-portal-v2)) main.container .box a,
html[data-vp-theme="bold"] body[data-controller]:not(:has(.vellinga-portal-v2)) main.container .boxstats a {
	color: var(--vp-accent-mid, #8eb8e8) !important;
}

/* Native welkom — home-links-tegels (eldy a{color:#0a1464} wint zonder !important) */
html[data-vp-theme] body[data-controller]:not(:has(.vellinga-portal-v2)) main.container .home-links-card,
html[data-vp-theme] body.vellinga-portal-themed:not(:has(.vellinga-portal-v2)) main.container .home-links-card {
	background: var(--vp-surface) !important;
	border-color: var(--vp-line) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

html[data-vp-theme] body[data-controller]:not(:has(.vellinga-portal-v2)) main.container .home-links-card__link,
html[data-vp-theme] body.vellinga-portal-themed:not(:has(.vellinga-portal-v2)) main.container .home-links-card__link,
html[data-vp-theme] body[data-controller]:not(:has(.vellinga-portal-v2)) main.container .home-links-card a,
html[data-vp-theme] body.vellinga-portal-themed:not(:has(.vellinga-portal-v2)) main.container .home-links-card a {
	color: var(--vp-text) !important;
	text-decoration: none !important;
}

html[data-vp-theme] body[data-controller]:not(:has(.vellinga-portal-v2)) main.container .home-links-card:hover .home-links-card__link,
html[data-vp-theme] body.vellinga-portal-themed:not(:has(.vellinga-portal-v2)) main.container .home-links-card:hover .home-links-card__link {
	color: var(--vp-accent-mid, #8eb8e8) !important;
}

/* Native lijsten — kolomkop sort-links: leesbaar wit, accent alleen hover */
body[data-controller][data-vp-theme] main.container table[role="grid"] thead th a,
body[data-controller][data-vp-theme] main.container table[id^="webportal-"] thead th a,
body.vellinga-portal-themed[data-vp-theme]:not(:has(.vellinga-portal-v2)) main.container table[role="grid"] thead th a {
	color: var(--vp-text) !important;
}

body[data-controller][data-vp-theme] main.container table[role="grid"] thead th a:hover,
body[data-controller][data-vp-theme] main.container table[id^="webportal-"] thead th a:hover,
body.vellinga-portal-themed[data-vp-theme]:not(:has(.vellinga-portal-v2)) main.container table[role="grid"] thead th a:hover {
	color: var(--vp-accent) !important;
}

html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container table.liste tr.liste_titre a {
	color: var(--vp-text) !important;
}

html body[data-controller]:not(:has(.vellinga-portal-v2)) main.container table.liste tr.liste_titre a:hover {
	color: var(--vp-accent) !important;
}

/* Eldy D22 — laatste cascade-laag binnen portal.css (custom pagina's) */
html[data-vp-theme] .vellinga-portal-v2 .opacitymedium,
html[data-vp-theme] .vellinga-portal-v2 .opacitymedium.small,
html[data-vp-theme] .medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-meta-line,
html[data-vp-theme] .medewerkers-portal-skin.vellinga-portal-v2 .vp-mw-toolbar-meta p,
html[data-vp-theme] .inmeetscheduler-portal-skin.vellinga-portal-v2 .vp-inmeet-form p,
html[data-vp-theme] .inmeetscheduler-portal-skin.vellinga-portal-v2 .im-portal-intro {
	color: var(--vp-text-mid) !important;
}

html[data-vp-theme] .vellinga-portal-v2 .vp-mw-edit {
	color: var(--vp-text-mid) !important;
	background: transparent !important;
	border-color: var(--vp-line) !important;
}

html[data-vp-theme] .vellinga-portal-v2 .vp-inmeet-footer.im-portal-submit .button,
html[data-vp-theme] .vellinga-portal-v2 .vp-inmeet-footer.im-portal-submit input[type="submit"],
html[data-vp-theme] .inmeetscheduler-portal-skin.vellinga-portal-v2 .im-portal-submit input.button,
html[data-vp-theme] .vellinga-portal-v2 .vp-so-footer .button,
html[data-vp-theme] .medewerkers-portal-skin.vellinga-portal-v2 .medewerkers-portal-toolbar .button,
html[data-vp-theme] .clothingreorder-portal-skin.vellinga-portal-v2 .cr-portal-actions .button,
html[data-vp-theme] .clothingreorder-portal-skin.vellinga-portal-v2 .cr-portal-actions input[type="button"] {
	background: var(--vp-accent) !important;
	color: #fff !important;
	border-color: var(--vp-accent) !important;
}

html[data-vp-theme] .vellinga-portal-v2 .vp-so-footer .button.button-cancel,
html[data-vp-theme] .vellinga-portal-v2 .vp-so-footer a.buttonrefused {
	background: var(--vp-surface-2) !important;
	color: var(--vp-text) !important;
	border-color: var(--vp-line) !important;
}

html[data-vp-theme] .vellinga-portal-v2 .vp-stepper-big button,
html[data-vp-theme] .vellinga-portal-v2 .vp-qty-input button {
	background: transparent !important;
	color: var(--vp-text-mid) !important;
	border: none !important;
	box-shadow: none !important;
}

/* Herbestellen ≥48rem: tabel herstellen (vervangt oude eldy-shield display:block ≤75rem) */
@media (min-width: 48rem) {
	html[data-vp-theme] .clothingreorder-portal-skin #webportal-clothingreorder-list,
	html[data-vp-theme] .clothingreorder-portal-skin #webportal-clothingreorder-catalog {
		display: table !important;
		width: 100% !important;
		table-layout: fixed !important;
	}

	html[data-vp-theme] .clothingreorder-portal-skin #webportal-clothingreorder-list colgroup,
	html[data-vp-theme] .clothingreorder-portal-skin #webportal-clothingreorder-catalog colgroup {
		display: table-column-group !important;
	}

	html[data-vp-theme] .clothingreorder-portal-skin #webportal-clothingreorder-list thead,
	html[data-vp-theme] .clothingreorder-portal-skin #webportal-clothingreorder-catalog thead {
		display: table-header-group !important;
	}

	html[data-vp-theme] .clothingreorder-portal-skin #webportal-clothingreorder-list tbody,
	html[data-vp-theme] .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody {
		display: table-row-group !important;
	}

	html[data-vp-theme] .clothingreorder-portal-skin #webportal-clothingreorder-list thead tr,
	html[data-vp-theme] .clothingreorder-portal-skin #webportal-clothingreorder-catalog thead tr {
		display: table-row !important;
	}

	html[data-vp-theme] .clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr:not(.vp-row-hidden),
	html[data-vp-theme] .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow:not(.vp-row-hidden) {
		display: table-row !important;
		flex-flow: unset !important;
		flex-direction: unset !important;
		align-items: unset !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		box-shadow: none !important;
		background: transparent !important;
		width: auto !important;
		max-width: none !important;
	}

	html[data-vp-theme] .clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr:not(.vp-row-hidden) td,
	html[data-vp-theme] .clothingreorder-portal-skin #webportal-clothingreorder-catalog tbody tr.cr-cat-datarow:not(.vp-row-hidden) td {
		display: table-cell !important;
		flex: none !important;
		width: auto !important;
		max-width: none !important;
		order: unset !important;
		flex-direction: unset !important;
		flex-wrap: unset !important;
		align-items: unset !important;
	}

	html[data-vp-theme] .clothingreorder-portal-skin #webportal-clothingreorder-list tbody tr td[data-col="row-actions"] {
		display: none !important;
	}

	html[data-vp-theme] .clothingreorder-portal-skin .cr-section-body,
	html[data-vp-theme] .clothingreorder-portal-skin .div-table-responsive,
	html[data-vp-theme] .clothingreorder-portal-skin .div-table-responsive-no-min {
		width: 100% !important;
		max-width: 100% !important;
	}
}