/* =========================================================
   Surfmateriaal Inventaris — frontend stijlen
   ========================================================= */

:root {
	--svi-accent:        rgb(253, 39, 39);
	--svi-accent-hover:  rgb(220, 30, 30);
	--svi-accent-light:  rgba(253, 39, 39, 0.08);
	--svi-accent-ring:   rgba(253, 39, 39, 0.2);

	/* Categorie-kleuren */
	--svi-mast:          #2980b9;
	--svi-giek:          #16a085;
	--svi-mastverlenger: #1abc9c;
	--svi-zeil:          #e67e22;
	--svi-board:         #8e44ad;
	--svi-baseplate:     #795548;
	--svi-trapeze:       #e91e63;
	--svi-wetsuit:       #1565c0;
	--svi-schoentje:     #2e7d32;

	--svi-radius: 10px;
	--svi-shadow: 0 2px 12px rgba(0,0,0,.09);
}

/* ---- Filter-balk ----------------------------------------- */
.svi-inventaris { max-width: 1200px; margin: 0 auto; padding: 0 8px; }

.svi-filter-balk {
	background: #f8f9fa;
	border: 1px solid #e3e8ee;
	border-radius: var(--svi-radius);
	padding: 16px 20px;
	margin-bottom: 20px;
}

/* Filterbalk: zoek + dropdowns op één rij */
.svi-filter-hoofd-rij {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	flex-wrap: nowrap;
	min-width: 0;
}

.svi-zoekbalk-wrap {
	position: relative;
	flex: 1 1 200px;
	min-width: 160px;
}

.svi-zoek {
	width: 100%;
	padding: 9px 34px 9px 12px;
	border: 1px solid #cdd5df;
	border-radius: 8px;
	font-size: 14px;
	box-sizing: border-box;
	transition: border-color .15s;
	height: 38px;
}

.svi-zoek:focus {
	outline: none;
	border-color: var(--svi-accent);
	box-shadow: 0 0 0 3px var(--svi-accent-ring);
}

.svi-zoek-wis {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	color: #888;
	line-height: 1;
	padding: 0;
}

.svi-filter-select {
	padding: 0 8px;
	border: 1px solid #cdd5df;
	border-radius: 7px;
	font-size: 13px;
	background: #fff;
	cursor: pointer;
	height: 38px;
	flex: 0 0 auto;
	max-width: 130px;
	min-width: 80px;
}

.svi-btn-reset {
	padding: 0 12px;
	border: 1px solid #cdd5df;
	border-radius: 7px;
	background: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: #888;
	height: 38px;
	flex-shrink: 0;
}

.svi-btn-reset:hover { border-color: var(--svi-accent); color: var(--svi-accent); }

/* Category pills */
.svi-cat-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.svi-cat-pill {
	padding: 5px 14px;
	border-radius: 20px;
	border: 1.5px solid #cdd5df;
	background: #fff;
	font-size: 13px;
	cursor: pointer;
	transition: all .15s;
	font-weight: 500;
}

.svi-cat-pill:hover  { border-color: var(--svi-accent); color: var(--svi-accent); }
.svi-cat-pill.active { background: var(--svi-accent); border-color: var(--svi-accent); color: #fff; }

/* Teller */
.svi-teller { color: #888; font-size: 13px; margin: 0 0 12px; }

/* ---- Item-grid ------------------------------------------- */
.svi-item-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.svi-leeg { color: #888; font-style: italic; }
.svi-kaart.svi-verborgen { display: none !important; }

/* ---- Kaart ----------------------------------------------- */
.svi-kaart {
	background: #fff;
	border-radius: var(--svi-radius);
	box-shadow: var(--svi-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s, transform .2s;
}

.svi-kaart:hover {
	box-shadow: 0 6px 24px rgba(0,0,0,.14);
	transform: translateY(-2px);
}

.svi-status-afwezig { opacity: .7; }
.svi-status-kapot   { opacity: .75; }

/* Foto-sectie */
.svi-kaart-foto {
	position: relative;
	width: 100%;
	padding-top: 58%;
	background: #f0f4f8;
	overflow: hidden;
}

.svi-kaart-foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
	box-sizing: border-box;
}

.svi-kaart-foto-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.svi-cat-icon { font-size: 28px; font-weight: 700; color: #c5ced8; letter-spacing: 1px; }

/* Status-badges over foto */
.svi-foto-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 700;
}

.svi-foto-badge--afwezig { background: #fff3cd; color: #b07d00; }
.svi-foto-badge--kapot   { background: #fde8e8; color: #c0392b; }

/* Categorie chip */
.svi-foto-cat {
	position: absolute;
	bottom: 8px;
	left: 8px;
	padding: 3px 10px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.svi-cat--mast          { background: var(--svi-mast); }
.svi-cat--giek          { background: var(--svi-giek); }
.svi-cat--mastverlenger { background: var(--svi-mastverlenger); }
.svi-cat--zeil          { background: var(--svi-zeil); }
.svi-cat--board         { background: var(--svi-board); }
.svi-cat--baseplate     { background: var(--svi-baseplate); }
.svi-cat--trapeze       { background: var(--svi-trapeze); }
.svi-cat--wetsuit       { background: var(--svi-wetsuit); }
.svi-cat--schoentje     { background: var(--svi-schoentje); }

/* Kaart body */
.svi-kaart-body { padding: 14px 16px 10px; flex: 1; }

.svi-kaart-merk {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #888;
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: .4px;
}

.svi-merk-logo { width: 20px; height: 20px; object-fit: contain; border-radius: 3px; }

.svi-kaart-titel { font-size: 15px; font-weight: 600; margin: 0 0 6px; line-height: 1.3; color: #1a1a2e; }
.svi-kaart-locatie { font-size: 13px; color: #666; margin: 0 0 4px; }
.svi-kaart-opm {
	font-size: 12px; color: #999; margin: 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.svi-kaart-afwezig-info {
	font-size: 12px; color: #b07d00; background: #fff9e6;
	border-radius: 6px; padding: 4px 8px; margin: 6px 0 0;
}

/* Kaart acties */
.svi-kaart-acties {
	padding: 10px 12px 12px;
	display: flex;
	gap: 6px;
	flex-wrap: nowrap;
}

.svi-btn-paklijst,
.svi-btn-terugbrengen,
.svi-btn-kapot-melden {
	flex: 1;
	padding: 7px 8px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: background .15s;
	white-space: nowrap;
	text-align: center;
}

.svi-btn-paklijst            { background: var(--svi-accent-light); color: var(--svi-accent); }
.svi-btn-paklijst:hover      { background: rgba(253,39,39,.14); }
.svi-btn-paklijst.toegevoegd { background: #e8f8ee; color: #27ae60; }

.svi-btn-terugbrengen       { background: #e8f8ee; color: #27ae60; }
.svi-btn-terugbrengen:hover { background: #d0f0dd; }

.svi-btn-kapot-melden       { background: #fde8e8; color: #c0392b; }
.svi-btn-kapot-melden:hover { background: #fbd4d4; }

/* Toast */
.svi-toast {
	position: fixed;
	bottom: 24px; right: 24px;
	background: #1a1a2e;
	color: #fff;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 14px;
	z-index: 99999;
	box-shadow: 0 4px 16px rgba(0,0,0,.25);
	max-width: 320px;
}

/* ---- Topbar boven inventaris ----------------------------- */
.svi-inventaris-topbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
}

.svi-btn-schademelding-nieuw {
	padding: 8px 16px;
	background: #fff;
	border: 1.5px solid #cdd5df;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	color: #555;
	transition: border-color .15s, color .15s;
}

.svi-btn-schademelding-nieuw:hover {
	border-color: var(--svi-accent);
	color: var(--svi-accent);
}

/* ---- Item detail popup ----------------------------------- */
.svi-detail-popup {
	background: #fff;
	border-radius: 14px;
	max-width: 580px;
	width: 100%;
	max-height: 92vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0,0,0,.3);
	position: relative;
}

.svi-detail-sluit {
	position: absolute;
	top: 12px;
	right: 14px;
	background: rgba(0,0,0,.45);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
}

.svi-detail-sluit:hover { background: rgba(0,0,0,.7); }

/* Foto sectie */
.svi-detail-foto-wrap {
	position: relative;
	width: 100%;
	background: #f0f4f8;
	border-radius: 14px 14px 0 0;
	overflow: hidden;
	min-height: 200px;
	max-height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.svi-detail-foto-wrap img {
	width: 100%;
	max-height: 340px;
	object-fit: contain;
	display: block;
}

.svi-detail-foto-placeholder {
	color: #aaa;
	font-size: 14px;
	padding: 48px 0;
}

/* Foto navigatie */
.svi-detail-foto-nav {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(0,0,0,.5);
	border-radius: 20px;
	padding: 5px 14px;
	color: #fff;
	font-size: 13px;
}

.svi-foto-nav-btn {
	background: none;
	border: none;
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

.svi-foto-nav-btn:hover { color: var(--svi-accent); }

/* Badges */
.svi-detail-badges {
	display: flex;
	gap: 8px;
	padding: 12px 20px 0;
	flex-wrap: wrap;
}

.svi-detail-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 700;
}

.svi-detail-badge--ok     { background: #e8f8ee; color: #27ae60; }
.svi-detail-badge--kapot  { background: #fde8e8; color: #c0392b; }
.svi-detail-badge--afwezig { background: #fff3cd; color: #b07d00; }

/* Body */
.svi-detail-body { padding: 8px 20px 16px; flex: 1; }

.svi-detail-merk {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: .4px;
	margin-bottom: 6px;
}

.svi-detail-logo {
	width: 24px;
	height: 24px;
	object-fit: contain;
	border-radius: 4px;
}

.svi-detail-naam {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 8px;
	color: #1a1a2e;
	line-height: 1.3;
}

.svi-detail-locatie { font-size: 14px; color: #666; margin: 0 0 6px; }

.svi-detail-opm { font-size: 14px; color: #888; margin: 0 0 10px; }

/* Technische velden in detail popup */
#svi-detail-velden .svi-detail-velden {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
	margin: 10px 0 0;
	font-size: 13px;
}

#svi-detail-velden .svi-detail-velden dt {
	color: #999;
	font-weight: 600;
	white-space: nowrap;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .4px;
	padding-top: 2px;
}

#svi-detail-velden .svi-detail-velden dd {
	margin: 0;
	color: #1a1a2e;
	font-weight: 500;
}

.svi-detail-schade-blok {
	background: #fef5f5;
	border: 1px solid #fad7d7;
	border-radius: 8px;
	padding: 12px 14px;
	margin-top: 10px;
}

.svi-detail-schade-blok h4 { margin: 0 0 6px; font-size: 13px; color: #c0392b; text-transform: uppercase; letter-spacing: .4px; }
.svi-detail-schade-blok p  { margin: 0 0 4px; font-size: 14px; }

.svi-detail-schade-meta { font-size: 12px !important; color: #999 !important; }

/* Footer */
.svi-detail-footer {
	padding: 12px 20px 16px;
	border-top: 1px solid #eee;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* Handmatige schade velden */
.svi-schade-velden select,
.svi-schade-velden input[type="text"] {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #cdd5df;
	border-radius: 8px;
	font-size: 14px;
	margin-bottom: 12px;
	box-sizing: border-box;
	font-family: inherit;
}

.svi-schade-velden select:focus,
.svi-schade-velden input[type="text"]:focus {
	outline: none;
	border-color: var(--svi-accent);
	box-shadow: 0 0 0 3px var(--svi-accent-ring);
}

.svi-schade-velden label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 5px;
}

/* ---- Schade-modal ---------------------------------------- */
.svi-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.svi-modal {
	background: #fff;
	border-radius: 12px;
	max-width: 560px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

.svi-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px 14px;
	border-bottom: 1px solid #eee;
}

.svi-modal-header h2 { margin: 0; font-size: 18px; }

.svi-modal-sluit {
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #999;
	padding: 0 4px;
}

.svi-modal-sluit:hover { color: #333; }

.svi-modal-body { padding: 16px 20px; flex: 1; }

.svi-modal-hint {
	font-size: 13px;
	color: #666;
	margin: 0 0 12px;
}

/* Foto met klikpunt */
.svi-schade-foto-wrap {
	position: relative;
	cursor: crosshair;
	border-radius: 8px;
	overflow: hidden;
	background: #f0f4f8;
	margin-bottom: 14px;
	border: 2px dashed #cdd5df;
}

.svi-schade-foto-wrap img {
	width: 100%;
	display: block;
	user-select: none;
}

.svi-schade-foto-placeholder {
	min-height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #aaa;
	font-size: 14px;
}

.svi-schade-marker {
	position: absolute;
	width: 26px;
	height: 26px;
	background: var(--svi-accent);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	border: 2.5px solid #fff;
	box-shadow: 0 0 0 1.5px var(--svi-accent), 0 3px 10px rgba(0,0,0,.3);
	pointer-events: none;
}

.svi-schade-velden label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
}

.svi-schade-velden textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #cdd5df;
	border-radius: 8px;
	font-size: 14px;
	resize: vertical;
	box-sizing: border-box;
	font-family: inherit;
}

.svi-schade-velden textarea:focus {
	outline: none;
	border-color: var(--svi-accent);
	box-shadow: 0 0 0 3px var(--svi-accent-ring);
}

.svi-modal-footer {
	padding: 14px 20px 18px;
	border-top: 1px solid #eee;
	display: flex;
	gap: 10px;
}

/* ---- Paklijst-widget ------------------------------------- */
.svi-paklijst-widget { max-width: 900px; margin: 0 auto; }

.svi-pl-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid #e3e8ee;
	margin-bottom: 24px;
}

.svi-pl-tab {
	padding: 10px 20px;
	border: none;
	background: none;
	font-size: 15px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	color: #666;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 8px;
}

.svi-pl-tab.active { color: var(--svi-accent); border-bottom-color: var(--svi-accent); }

.svi-pl-teller {
	background: var(--svi-accent);
	color: #fff;
	border-radius: 12px;
	padding: 2px 8px;
	font-size: 12px;
	font-weight: 700;
}

.svi-pl-teller--oranje { background: #e67e22; }

.svi-pl-leeg   { text-align: center; padding: 48px 24px; color: #888; }
.svi-pl-hint   { color: #666; font-size: 14px; margin-bottom: 16px; }
.svi-pl-login-hint { font-size: 13px; color: #888; margin: 0; }

.svi-pl-groep { margin-bottom: 24px; }

.svi-pl-groep-titel {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: #888;
	margin: 0 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid #eee;
}

.svi-pl-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #f8f9fa;
	margin-bottom: 6px;
}

.svi-pl-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

.svi-pl-item-naam    { flex: 1; font-size: 14px; font-weight: 500; }
.svi-pl-item-merk    { font-size: 12px; color: #888; }

.svi-pl-item-locatie {
	font-size: 12px; color: #666;
	background: #e9ecef;
	border-radius: 10px;
	padding: 2px 8px;
}

.svi-pl-item-verwijder {
	background: none; border: none;
	color: #bbb; font-size: 18px;
	cursor: pointer; padding: 0 4px; line-height: 1;
}

.svi-pl-item-verwijder:hover { color: var(--svi-accent); }

.svi-pl-acties {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

.svi-btn-primair, .svi-btn-accent, .svi-btn-licht {
	padding: 10px 20px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: background .15s;
}

.svi-btn-primair       { background: var(--svi-accent); color: #fff; }
.svi-btn-primair:hover { background: var(--svi-accent-hover); }

.svi-btn-accent        { background: #27ae60; color: #fff; }
.svi-btn-accent:hover  { background: #229954; }

.svi-btn-licht         { background: #f1f3f5; color: #555; border: 1px solid #ddd; }
.svi-btn-licht:hover   { background: #e9ecef; }

.svi-pl-meegenomen-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #fffbf0;
	border: 1px solid #ffe8a0;
	margin-bottom: 6px;
}

.svi-pl-meegenomen-datum { font-size: 11px; color: #aaa; white-space: nowrap; }

/* ====================================================================
   Overschrijf WordPress/Elementor paarse hover- en focus-stijlen
   ==================================================================== */

/* Focus en focus-visible — alle interactieve elementen in de widget */
.svi-inventaris *:focus,
.svi-inventaris *:focus-visible,
.svi-modal-overlay *:focus,
.svi-modal-overlay *:focus-visible {
	outline: 2px solid var(--svi-accent) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px var(--svi-accent-ring) !important;
}

/* Inputs/selects: geen dubbele outline, alleen border-highlight */
.svi-inventaris input:focus,
.svi-inventaris input:focus-visible,
.svi-inventaris select:focus,
.svi-inventaris select:focus-visible,
.svi-inventaris textarea:focus,
.svi-inventaris textarea:focus-visible,
.svi-modal-overlay input:focus,
.svi-modal-overlay select:focus,
.svi-modal-overlay textarea:focus {
	outline: none !important;
	border-color: var(--svi-accent) !important;
	box-shadow: 0 0 0 3px var(--svi-accent-ring) !important;
}

/* Buttons hover: rode outline, nooit paars */
.svi-inventaris button:hover,
.svi-modal-overlay button:hover {
	outline: none !important;
	border-color: var(--svi-accent) !important;
}

/* Cat pills */
.svi-cat-pill:hover {
	border-color: var(--svi-accent) !important;
	color: var(--svi-accent) !important;
	background: var(--svi-accent-light) !important;
}
.svi-cat-pill.active,
.svi-cat-pill.active:hover {
	background: var(--svi-accent) !important;
	border-color: var(--svi-accent) !important;
	color: #fff !important;
}

/* Primaire knoppen */
.svi-btn-primair,
.svi-btn-primair:hover {
	background: var(--svi-accent) !important;
	border-color: var(--svi-accent) !important;
	color: #fff !important;
}
.svi-btn-primair:hover { background: var(--svi-accent-hover) !important; }

/* Paklijst-knoppen */
.svi-btn-paklijst {
	background: var(--svi-accent-light) !important;
	color: var(--svi-accent) !important;
	border: none !important;
}
.svi-btn-paklijst.svi-in-paklijst,
.svi-btn-paklijst.svi-in-paklijst:hover {
	background: #e8f8ee !important;
	color: #27ae60 !important;
}

.svi-btn-kapot-melden {
	background: #fde8e8 !important;
	color: #c0392b !important;
	border: none !important;
}

/* Overige elementen */
.svi-pl-teller { background: var(--svi-accent) !important; }
.svi-pl-tab.active {
	color: var(--svi-accent) !important;
	border-bottom-color: var(--svi-accent) !important;
}

/* ---- Geïntegreerd paklijst-paneel ------------------------ */
.svi-paklijst-paneel {
	margin-top: 40px;
	background: #fff;
	border: 1.5px solid #e3e8ee;
	border-radius: var(--svi-radius);
	box-shadow: var(--svi-shadow);
	overflow: hidden;
}

.svi-paklijst-paneel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 16px 20px;
	background: #f8f9fa;
	border-bottom: 1px solid #e3e8ee;
}

.svi-paklijst-paneel-titel {
	display: flex;
	align-items: center;
	gap: 10px;
}

.svi-paklijst-titel-tekst {
	font-size: 17px;
	font-weight: 700;
	color: #1a1a2e;
}

.svi-paklijst-paneel-acties {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.svi-pl-groepen { padding: 16px 20px 4px; }

/* Items in het paneel — compact card grid */
.svi-paklijst-paneel .svi-pl-groep { margin-bottom: 20px; }

.svi-paklijst-paneel .svi-pl-groep-count {
	font-weight: 400;
	color: #aaa;
}

.svi-paklijst-paneel .svi-pl-groep ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
	gap: 8px;
}

/* Compact kaartje */
.svi-paklijst-paneel .svi-pl-item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 10px 10px 8px;
	position: relative;
}

.svi-pl-item-hoofd {
	display: flex;
	align-items: flex-start;
	gap: 4px;
}

.svi-pl-item-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.svi-pl-item-naam {
	font-size: 13px;
	font-weight: 700;
	color: #1a1a2e;
	line-height: 1.3;
	word-break: break-word;
}

.svi-pl-item-merk {
	font-size: 11px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: .3px;
}

.svi-pl-item-loc {
	font-size: 11px;
	color: #999;
}

.svi-pl-verwijder {
	background: none;
	border: none;
	color: #ccc;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	margin-top: -2px;
}

.svi-pl-verwijder:hover { color: var(--svi-accent) !important; border: none !important; }

/* Compatibiliteitswaarschuwingen */
.svi-pl-waarschuwingen {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}

.svi-pl-waarschuwing {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: #fff8e1;
	border: 1px solid #ffe082;
	color: #7d5a00;
	border-radius: 10px;
	padding: 2px 7px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
}

/* Meegenomen sectie */
.svi-pl-meegenomen-blok {
	border-top: 1px solid #eee;
	padding: 16px 20px;
}

.svi-pl-meegenomen-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.svi-pl-meegenomen-header h4 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #1a1a2e;
}

.svi-pl-check-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #555;
	cursor: pointer;
	white-space: nowrap;
}

.svi-pl-check-label input { cursor: pointer; }

.svi-pl-meegenomen-toon {
	display: block;
	width: 100%;
	text-align: center;
	padding: 10px;
	font-size: 13px;
	border-top: 1px solid #eee;
	background: none;
	border-left: none;
	border-right: none;
	border-bottom: none;
	color: #888;
	cursor: pointer;
}

.svi-pl-meegenomen-toon:hover { color: var(--svi-accent); background: var(--svi-accent-light); }

.svi-btn-klein { padding: 6px 12px; font-size: 12px; }

/* In-paklijst toestand */
.svi-btn-paklijst.svi-in-paklijst {
	background: #e8f8ee !important;
	color: #27ae60 !important;
}

/* ---- Badges (gebruikt in detail popup en paklijst) ------- */
.svi-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 700;
}

.svi-badge-cat     { background: #e9ecef; color: #555; }
.svi-badge-ok      { background: #e8f8ee; color: #27ae60; }
.svi-badge-kapot   { background: #fde8e8; color: #c0392b; }
.svi-badge-afwezig { background: #fff3cd; color: #b07d00; }

/* ---- Responsief ------------------------------------------ */
@media ( max-width: 640px ) {
	.svi-item-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.svi-filter-hoofd-rij { flex-wrap: wrap; }
	.svi-filter-select { flex: 1 1 80px; max-width: none; font-size: 12px; }
	.svi-paklijst-paneel .svi-pl-groep ul { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
	.svi-toast { left: 12px; right: 12px; bottom: 12px; }
	.svi-modal { max-height: 95vh; }
}

@media ( max-width: 420px ) {
	.svi-item-grid { grid-template-columns: 1fr; }
}

/* Login-prompt */
.svi-login-vereist {
	text-align: center;
	padding: 48px 24px;
	color: #555;
}
.svi-login-vereist p { margin-bottom: 16px; font-size: 16px; }

/* Schademelding widget */
.svi-schademelding-widget { display: inline-block; }

/* Bestandsveld in modals */
.svi-schade-velden input[type="file"] {
	display: block;
	width: 100%;
	font-size: 13px;
	color: #555;
	margin-top: 4px;
}