/* Wrapper zodat de tabel niet full-width is */
	.verlofsaldo-wrapper {
	    max-width: 900px;
	    margin: 0 auto;
	    padding: 20px;
	}
	
	/* Controls */
	.verlofsaldo-controls {
	    display: flex;
	    gap: 12px;
	    margin-bottom: 20px;
	}
	
	#searchInput {
	    flex: 1;
	    padding: 10px 14px;
	    border-radius: 10px;
	    border: 1px solid rgba(255,255,255,0.25);
	    background: rgba(255,255,255,0.15);
	    color: #fff !important;
	    backdrop-filter: blur(6px);
	}
	
	#filterSelect {
	    padding: 10px 14px;
	    border-radius: 10px;
	    background: rgba(255,255,255,0.15);
	    border: 1px solid rgba(255,255,255,0.25);
	    color: #fff !important;
	    backdrop-filter: blur(6px);
	}
	
	#filterSelect option {
	    background: rgba(20,20,20,0.9);
	    color: #fff !important;
	}
	
	/* Tabel */
	.verlofsaldo-table {
	    width: 100%;
	    border-collapse: collapse;
	    background: rgba(255,255,255,0.05);
	    border-radius: 12px;
	    overflow: hidden;
	}
	
	.verlofsaldo-table th,
	.verlofsaldo-table td {
	    padding: 12px 16px;
	    text-align: left;
	    color: #fff;
	}
	
	.verlofsaldo-table th {
	    background: rgba(255,255,255,0.08);
	    font-size: 15px;
	    font-weight: 600;
	}
	
	.verlofsaldo-table tr {
	    transition: background 0.15s ease;
	}
	
	/* Heatmap kleuren per rij */
	.row-green { background-color: #22c55e33; }
	.row-yellow { background-color: #eab30833; }
	.row-orange { background-color: #f9731633; }
	.row-lightred { background-color: #f8717133; }
	.row-red { background-color: #ef444433; }
	
	.verlofsaldo-table tr:hover {
	    background-color: rgba(255,255,255,0.12);
	}