@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============================================================================
   Advanced System - Licentiebeheer | modern dark dashboard theme
   Eén stylesheet die elke pagina van het portaal aanstuurt. Overschrijft
   Bootstrap 4 (dat ervoor wordt ingeladen).
   ============================================================================ */

:root {
	--bg-0: #080b14;
	--bg-1: #0d1320;
	--surface: rgba(20, 27, 45, 0.72);
	--surface-solid: #141b2d;
	--surface-2: #0f1726;
	--border: rgba(255, 255, 255, 0.07);
	--border-strong: rgba(255, 255, 255, 0.13);
	--text: #e7eaf3;
	--text-muted: #8b95ab;
	--accent: #6366f1;
	--accent-2: #3b82f6;
	--accent-3: #06b6d4;
	--accent-grad: linear-gradient(135deg, #6366f1 0%, #3b82f6 50%, #06b6d4 100%);
	--success: #22c55e;
	--warning: #f59e0b;
	--danger: #ef4444;
	--shadow-lg: 0 18px 48px -12px rgba(0, 0, 0, 0.6);
	--shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
	--radius: 16px;
	--radius-sm: 11px;
}

* {
	scrollbar-width: thin;
	scrollbar-color: #2a3550 transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #283450; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #36456a; background-clip: padding-box; }

html { scroll-behavior: smooth; }

body {
	background:
		radial-gradient(900px 600px at 12% -5%, rgba(99, 102, 241, 0.16), transparent 60%),
		radial-gradient(800px 600px at 100% 0%, rgba(6, 182, 212, 0.12), transparent 55%),
		linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
	background-attachment: fixed;
	color: var(--text);
	font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
	font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.02em; }

a { color: var(--accent-2); text-decoration: none; transition: color .15s ease; }
a:hover { color: #7cc0ff; text-decoration: none; }

::selection { background: rgba(99, 102, 241, 0.35); color: #fff; }

/* ---------------------------------------------------------------- Navbar -- */
.navbar-as {
	background: rgba(10, 14, 24, 0.72);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--border);
	padding: 0.7rem 1.4rem;
	position: sticky;
	top: 0;
	z-index: 1030;
}

.navbar-as .navbar-brand {
	font-weight: 900;
	letter-spacing: 0.5px;
	font-size: 1.15rem;
	background: var(--accent-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	display: flex;
	align-items: center;
	gap: 0.55rem;
}
.navbar-as .navbar-brand i { -webkit-text-fill-color: #6c8cff; }

.navbar-as .nav-link {
	color: var(--text-muted) !important;
	font-weight: 500;
	font-size: 0.92rem;
	padding: 0.5rem 0.95rem !important;
	border-radius: 10px;
	margin: 0 0.1rem;
	transition: all .18s ease;
	position: relative;
}
.navbar-as .nav-link:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.05);
}
.navbar-as .nav-link.active {
	color: #fff !important;
	background: rgba(99, 102, 241, 0.16);
	box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.35);
}
.navbar-as .nav-link.active i { color: #8aa6ff; }

.navbar-toggler {
	border: 1px solid var(--border-strong);
	border-radius: 10px;
	padding: 0.35rem 0.6rem;
}
.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(231,234,243,0.85)' stroke-width='2.2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ----------------------------------------------------------------- Cards -- */
.card-as {
	background: var(--surface);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	animation: fadeUp .45s ease both;
}

.card-as .card-header {
	background: transparent;
	border-bottom: 1px solid var(--border);
	font-weight: 700;
	font-size: 0.98rem;
	letter-spacing: -0.01em;
	padding: 1.05rem 1.35rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.card-as .card-header i { color: var(--accent-2); }

.card-as .card-body { padding: 1.35rem; }

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------- Login -- */
.login-card {
	max-width: 410px;
	margin: 9vh auto;
	border-radius: 20px;
	position: relative;
}
.login-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 20px;
	padding: 1px;
	background: linear-gradient(135deg, rgba(99,102,241,.6), rgba(6,182,212,.25), transparent);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.login-card .card-header {
	justify-content: center;
	text-align: center;
	font-size: 1.35rem;
	font-weight: 900;
	letter-spacing: 1px;
	border-bottom: 1px solid var(--border);
	padding-top: 1.6rem;
	background: var(--accent-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.login-card .card-header i { -webkit-text-fill-color: #6c8cff; margin-right: .4rem; }

/* ----------------------------------------------------------------- Forms -- */
label { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; letter-spacing: 0.01em; }

.form-control-as,
.form-control {
	background: var(--surface-2);
	border: 1px solid var(--border-strong);
	color: var(--text);
	border-radius: var(--radius-sm);
	padding: 0.6rem 0.85rem;
	height: auto;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-control-as::placeholder, .form-control::placeholder { color: #5d6783; }
.form-control-as:focus,
.form-control:focus {
	background: var(--surface-2);
	border-color: var(--accent);
	color: #fff;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22);
	outline: none;
}
select.form-control-as option { background: var(--surface-solid); color: var(--text); }
.form-control-sm { padding: 0.35rem 0.6rem; font-size: 0.85rem; border-radius: 9px; }
.form-text { font-size: 0.78rem; }
.text-muted { color: var(--text-muted) !important; }

/* --------------------------------------------------------------- Buttons -- */
.btn {
	border-radius: var(--radius-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.55rem 1.05rem;
	transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 0.32rem 0.7rem; font-size: 0.8rem; border-radius: 9px; }

.btn-as {
	background: var(--accent-grad);
	background-size: 160% 160%;
	border: none;
	color: #fff;
	box-shadow: 0 8px 20px -8px rgba(59, 130, 246, 0.65);
}
.btn-as:hover {
	color: #fff;
	background-position: 100% 0;
	box-shadow: 0 12px 26px -8px rgba(59, 130, 246, 0.8);
	transform: translateY(-1px);
}

.btn-outline-light {
	border: 1px solid var(--border-strong);
	color: var(--text);
	background: rgba(255, 255, 255, 0.02);
}
.btn-outline-light:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.25);
	color: #fff;
}

.btn-warning { background: linear-gradient(135deg, #f59e0b, #d97706); border: none; color: #1a1205; font-weight: 700; }
.btn-warning:hover { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1205; transform: translateY(-1px); }
.btn-success { background: linear-gradient(135deg, #22c55e, #16a34a); border: none; color: #04210f; font-weight: 700; }
.btn-success:hover { background: linear-gradient(135deg, #4ade80, #22c55e); color: #04210f; transform: translateY(-1px); }

.btn-outline-warning { border: 1px solid rgba(245, 158, 11, 0.5); color: #fbbf24; background: rgba(245, 158, 11, 0.06); }
.btn-outline-warning:hover { background: rgba(245, 158, 11, 0.16); color: #fde68a; border-color: rgba(245,158,11,.8); }
.btn-outline-info { border: 1px solid rgba(6, 182, 212, 0.5); color: #5fd5e6; background: rgba(6, 182, 212, 0.06); }
.btn-outline-info:hover { background: rgba(6, 182, 212, 0.16); color: #a5eef7; border-color: rgba(6,182,212,.8); }
.btn-outline-danger { border: 1px solid rgba(239, 68, 68, 0.5); color: #f87171; background: rgba(239, 68, 68, 0.06); }
.btn-outline-danger:hover { background: rgba(239, 68, 68, 0.16); color: #fca5a5; border-color: rgba(239,68,68,.8); }

/* ---------------------------------------------------------------- Badges -- */
.badge {
	font-weight: 600;
	font-size: 0.72rem;
	padding: 0.4em 0.7em;
	border-radius: 999px;
	letter-spacing: 0.02em;
	vertical-align: middle;
}
.badge-actief { background: rgba(34, 197, 94, 0.16); color: #4ade80; box-shadow: inset 0 0 0 1px rgba(34,197,94,.3); }
.badge-gepauzeerd { background: rgba(245, 158, 11, 0.16); color: #fbbf24; box-shadow: inset 0 0 0 1px rgba(245,158,11,.3); }
.badge-opgezegd { background: rgba(239, 68, 68, 0.16); color: #f87171; box-shadow: inset 0 0 0 1px rgba(239,68,68,.3); }
.badge-secondary { background: rgba(139, 149, 171, 0.15); color: #aab3c7; box-shadow: inset 0 0 0 1px rgba(139,149,171,.25); }

/* ---------------------------------------------------------------- Tables -- */
.table-as { color: var(--text); margin-bottom: 0; }
.table-as thead th {
	border: none;
	border-bottom: 1px solid var(--border);
	color: var(--text-muted);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	padding: 0.95rem 1.1rem;
	background: rgba(255, 255, 255, 0.015);
}
.table-as tbody td {
	border-top: 1px solid var(--border);
	padding: 0.85rem 1.1rem;
	vertical-align: middle;
	font-size: 0.9rem;
}
.table-as tbody tr { transition: background .14s ease; }
.table-as tbody tr:hover { background: rgba(99, 102, 241, 0.06); }

/* ------------------------------------------------------------ Stat cards -- */
.stat-card {
	background: var(--surface);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.4rem 1.5rem;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	animation: fadeUp .45s ease both;
}
.stat-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--accent-grad);
	opacity: 0.9;
}
.stat-card:hover {
	transform: translateY(-3px);
	border-color: var(--border-strong);
	box-shadow: var(--shadow-lg);
}
.stat-card .stat-value {
	font-size: 2.1rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	background: var(--accent-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
/* Inline-gekleurde stat-values (groen/oranje/rood) houden hun eigen kleur */
.stat-card .stat-value[style*="color"] { -webkit-text-fill-color: initial; background: none; }
.stat-card .stat-label {
	color: var(--text-muted);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	margin-top: 0.35rem;
}
.stat-card .stat-icon {
	position: absolute;
	right: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2.6rem;
	color: rgba(255, 255, 255, 0.06);
	transition: color .2s ease;
}
.stat-card:hover .stat-icon { color: rgba(124, 150, 255, 0.18); }

/* Pagina-koppen */
.page-head { margin: 0.4rem 0 1.4rem; }
.page-head h4, .page-head h1 { margin: 0; font-weight: 800; letter-spacing: -0.02em; }
.page-head .sub { color: var(--text-muted); font-size: 0.88rem; margin-top: 0.2rem; }

/* ---------------------------------------------------------------- Alerts -- */
.alert { border: none; border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; font-size: 0.9rem; border-left: 3px solid transparent; }
.alert-success { background: rgba(34, 197, 94, 0.12); color: #86efac; border-left-color: var(--success); }
.alert-danger { background: rgba(239, 68, 68, 0.12); color: #fca5a5; border-left-color: var(--danger); }
.alert-warning { background: rgba(245, 158, 11, 0.12); color: #fcd34d; border-left-color: var(--warning); }
.alert-info { background: rgba(59, 130, 246, 0.12); color: #93c5fd; border-left-color: var(--accent-2); }
.alert code { background: rgba(255,255,255,.08); color: #cbd5e1; padding: .1rem .35rem; border-radius: 5px; }

/* ------------------------------------------------------------ Utilities --- */
.text-warning { color: #fbbf24 !important; }
.text-success { color: #4ade80 !important; }
.text-danger { color: #f87171 !important; }
code { color: #93c5fd; }
hr { border-color: var(--border) !important; }
.container, .container-fluid { padding-top: 0.5rem; }
.container-fluid { padding-left: 2rem; padding-right: 2rem; }

/* Healthcheck-indicator op het overzicht */
.healthcheck { font-size: 0.82rem; font-weight: 600; white-space: nowrap; }

/* Horizontaal scrollbare tabel-wrapper (brede tabellen op smalle schermen) */
.table-responsive { -webkit-overflow-scrolling: touch; }
.table-as { min-width: 100%; }

/* ============================================================================
   Mobiel / tablet - o.a. iPhone (Safari). Zorgt dat brede tabellen netjes
   scrollen, knoppen genoeg tapruimte houden en iOS niet inzoomt bij focus.
   ============================================================================ */
@media (max-width: 991.98px) {
	.navbar-as { padding: 0.6rem 1rem; }
	.navbar-as .navbar-collapse {
		margin-top: 0.6rem;
		padding-top: 0.4rem;
		border-top: 1px solid var(--border);
	}
	.navbar-as .nav-link { margin: 0.12rem 0; padding: 0.65rem 0.85rem !important; }
}

@media (max-width: 768px) {
	.container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
	.card-as .card-body { padding: 1.05rem; }
	.card-as .card-header { padding: 0.9rem 1.05rem; flex-wrap: wrap; gap: 0.6rem; }
	.card-as .card-header .form-inline { width: 100%; }
	.card-as .card-header .form-inline .form-control { width: 100%; }

	.page-head h4, .page-head h1 { font-size: 1.2rem; }
	.stat-card { padding: 1.15rem 1.2rem; }
	.stat-card .stat-value { font-size: 1.75rem; }
	.stat-card .stat-icon { font-size: 2.1rem; right: 0.9rem; }

	/* Geef de rij-acties wat verticale lucht als ze afbreken */
	.table-as td .btn { margin-bottom: 0.25rem; }

	/* iOS Safari zoomt in zodra een veld < 16px is - forceer 16px op mobiel */
	.form-control, .form-control-as, .form-control-sm,
	input, select, textarea { font-size: 16px; }
}

@media (max-width: 480px) {
	.container, .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }
	.stat-card .stat-value { font-size: 1.55rem; }
	.btn { padding: 0.55rem 0.9rem; }
	.navbar-as .navbar-brand { font-size: 1.02rem; }
	/* De "// Licentiebeheer"-subtitel verbergen op heel smalle schermen */
	.navbar-as .navbar-brand span { display: none; }
}

/* ----------------------------------------------------------------------------
   Tabel -> kaarten op mobiel. In plaats van horizontaal scrollen (waarbij
   kolommen bubeeld vallen) wordt elke rij een kaartje met label + waarde
   onder elkaar. Werkt via data-label="..."-attributen op elke <td>.
   ---------------------------------------------------------------------------- */
@media (max-width: 820px) {
	.table-stack { min-width: 0; }
	.table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }

	.table-stack tr {
		background: var(--surface-2);
		border: 1px solid var(--border);
		border-radius: 14px;
		margin-bottom: 0.85rem;
		padding: 0.35rem 0.15rem;
	}
	.table-stack tr:hover { background: var(--surface-2); }
	/* Lege-staat rij (colspan) niet als kaart opmaken */
	.table-stack tr td[colspan] { text-align: center; }

	.table-stack td {
		border: none !important;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		padding: 0.55rem 1rem;
		text-align: right;
		font-size: 0.92rem;
	}
	.table-stack td::before {
		content: attr(data-label);
		font-size: 0.68rem;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--text-muted);
		font-weight: 700;
		text-align: left;
		flex-shrink: 0;
	}
	.table-stack td[colspan]::before { content: none; }

	/* Form-velden in de cel vullen de beschikbare ruimte */
	.table-stack td > .form-control,
	.table-stack td > select,
	.table-stack td > input { flex: 1; min-width: 0; }

	/* Acties-cel: knoppen onder elkaar, volle breedte */
	.table-stack td.acties { flex-direction: column; align-items: stretch; text-align: left; }
	.table-stack td.acties::before { margin-bottom: 0.4rem; }
	.table-stack td.acties .btn { width: 100%; margin: 0.18rem 0; }
}