html {  }
body { background-color: black; color: lightblue; overflow: hidden; margin: 0; font-size: 12px; padding: 0; }
a,h1,h2,h3,h4,th,hr { color: cyan; margin: 0; }
hr { border-color: #001; }
a { cursor: pointer; text-decoration: none; }
table,th,td { border-width: 0px; vertical-align: top; font-size: 12px; }
td,th { text-align: left; }
th,code,input,select { background-color: #112; }
input,select { color: lightblue; padding-left: 5px; padding-right: 5px; border-radius: 8px; }
ul { margin: 0; }
li { margin-left: -28px; }
button { background-color: black; color: lightblue; padding-left: 15px; padding-right: 15px; border-radius: 8px; cursor: pointer; }

.right { text-align: right; }
.point { cursor: pointer; }
.help { cursor: help; }
.oddCol { color: gray; }
.border { border-width: 1px; }

#divMain { width: 100%; table-layout: fixed; }
#mainTable { width: 100%; }
#mainTableMenu { width: 10%; }
#mainTablePage { position: relative; top: 3px; width: 80%; border-width: 3px; border-style: outset; border-color: #446; overflow: hidden; }
#mainTableRight { width: 10%; }
#popwin { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); display: none; text-align: center; }
#inpopwin { position: relative; top: 10%; background-color: rgba(0, 0, 0, 1); display: inline-block; border-style: outset; border-width: 0.1px; border-color: #001; }
#divGame { position: absolute; top: 0; width: 100%; background-color: rgba(0, 0, 0, 0.99); display: none; text-align: center; }
#divMainPage { width: 100%; overflow: hidden; }

#logoff,#linkReload,#sluitCanvas { position: fixed; right: 5px; top: 3px; font-size: 12px; }
#versieNum,#consoleLogOpslag { position: fixed; right: 0; bottom: 0; font-size: 8px; }
#pageEnd { font-size: 6px; color: #001; text-align: center; margin-top: 44px; }
#divRegister, #divLogin, #divRecover { background-color: #003; display: block !important; box-sizing: border-box; padding: 5px; border-radius: 8px; }

/* De hoofd-container die de formulieren positioneert */
.auth-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 220px) !important;
    gap: 25px;
    width: 100% !important;
}

.auth-grid > div {
	min-width: 0;
	width: 100%;
	position: relative; /* Voorkomt absolute overlap van kinderen */
}

/* Zorg dat de interne tabellen van de formulieren netjes 100% breed worden */
.auth-grid form {
	width: 100%;
	display: block;
}

/* barcodeLijst */
	/* De UL container */
	#ulBarcodeLijst {
		padding: 0; /* Forceert het weghalen van de browser-inspring */
		margin: 0;
	}

	/* Een individuele rij */
	.barcode-item {
		align-items: center;
		padding: 3px 10px; /* Iets minder hoogte aangezien de tekst kleiner is */
		border-bottom: 1px solid #111122; /* Subtiele scheidingslijn die past bij het blauw */
		background: #000011; /* Jouw diepblauwe/zwarte kleur */
		cursor: pointer;
	}

	/* Linkerkant: Alles op 1 regel */
	.product-info {
		overflow: hidden; /* Voorkomt dat te lange namen de boel oprekken */
	}

	.product-name {
		font-weight: 600;
		color: #e0e0e0;
		font-size: 10px; /* Jouw gewenste kleine formaat */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; /* Plakt netjes '...' als de naam te lang is */
	}

	.barcode-number {
		font-size: 8px; /* Gelijk aan de normale tekst */
		color: #777; /* Iets lichter grijs voor het contrast */
		white-space: nowrap;
	}

	/* Rechterkant: Voorraad badge (Ook compact gemaakt voor 10px stijl) */
	.stock-info {
		text-align: right;
	}
	
	.stock-badge {
		background-color: rgba(76, 175, 80, 0.15);
		color: #81c784;
		padding: 2px 6px;
		border-radius: 4px;
		font-size: 10px; /* Gelijk getrokken met de rest */
		font-weight: 500;
		border: 1px solid rgba(76, 175, 80, 0.3);
		white-space: nowrap;
	}

	/* Styling wanneer een product is uitverkocht */
	.barcode-item.out-of-stock .stock-badge {
		background-color: rgba(244, 67, 54, 0.15);
		color: #e57373;
		border: 1px solid rgba(244, 67, 54, 0.3);
	}

	.barcode-item.out-of-stock .product-name {
		color: #444; /* Lekker donker zodat je direct ziet wat op is */
	}







	#barcode-font {
		font-family: 'Libre Barcode 128', sans-serif;
		font-size: 8px;
		color: #ffffff; /* Werkt ook in dark mode */
	}