/* Licht, gelikt thema voor de ingelogde appschermen (login, profiel, skills).
   Overschrijft bewust de donkere achtergrond uit skills-base.css - die past bij de
   marketing/landingsopzet, niet bij de werknemer-/werkgeverschermen. Kleuren hergebruiken
   de --sk*-variabelen uit skills-base.css, dus deze css MOET na skills-base.css geladen worden. */

body.app-shell {
	background-color: #f4f6fa;
	min-height: 100vh;
	color: #1f2933;
}

.app-navbar {
	background: #fff;
	border-bottom: 1px solid #e4e7ec;
	padding: 0.85rem 1.5rem;
}
.app-navbar .app-brand {
	font-weight: 700;
	color: var(--skBlue);
	letter-spacing: -0.01em;
	text-decoration: none;
}
.app-navbar .app-user {
	font-size: 0.9rem;
	color: #667085;
}

.app-card {
	background: #fff;
	border: 1px solid #e4e7ec;
	border-radius: 0.9rem;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
}

.app-center-screen {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f4f6fa;
	padding: 1.5rem;
}

.app-content {
	margin: 0 auto;
	padding: 2rem 1.5rem;
}

.btn-blue {
	background-color: var(--skBlue);
	border-color: var(--skBlue);
	color: #fff;
	font-weight: 600;
}
.btn-blue:hover,
.btn-blue:focus {
	background-color: var(--skDarkBlue);
	border-color: var(--skDarkBlue);
	color: #fff;
}

.app-table thead th {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #667085;
	border-bottom-width: 1px;
	font-weight: 600;
}
.app-table td {
	vertical-align: middle;
}
.app-table > :not(caption) > * > * {
	background-color: transparent;
}

.niveau-pill,
.bron-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}
.niveau-beginner { background: #f1f5f9; color: #475569; }
.niveau-basis { background: #eef2ff; color: #4338ca; }
.niveau-gevorderd { background: #e0f2fe; color: #075985; }
.niveau-ervaren { background: #fef3c7; color: #92400e; }
.niveau-expert { background: #dcfce7; color: #166534; }
.bron-pill { background: #f2f4f7; color: #475467; font-weight: 500; }

.btn-icon {
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	flex-shrink: 0;
}

.app-empty-state {
	text-align: center;
	color: #98a2b3;
	padding: 2rem 1rem;
}