/* ---------------------------------------------------------------------------
   Admin-schil: zijbalk links, inhoud rechts. Vervangt de oude blauwe kop met de
   glanzende knoppenbalk.

   Kleuren uit de blauwfamilie van het logo (#6B93D1), dezelfde als op de website.
   Geen oranje in de interface: dat blijft in het logo. Groen alleen als "gelukt".
   --------------------------------------------------------------------------- */
:root {
	--of-zijbalk: 216px;
	--of-navy: #1b3253;
	--of-navy-hover: #24406a;
	--of-actief: #2f5fa0;
	--of-zijtekst: #d6e2f3;
	--of-zijmuted: #8fa6c8;
	--of-blauw: #2f5fa0;
	--of-achtergrond: #f4f6f9;
	--of-rand: #e3e8ef;
}

body {
	background: var(--of-achtergrond);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Zijbalk --------------------------------------------------------------- */
.of-sidebar {
	position: fixed;
	top: 0; bottom: 0; left: 0;
	width: var(--of-zijbalk);
	display: flex;
	flex-direction: column;
	background: var(--of-navy);
	color: var(--of-zijtekst);
	overflow-y: auto;
	z-index: 1040;   /* boven de pagina, onder Bootstrap-modals (1050) */
}
.of-brand { display: block; padding: 16px 18px 10px; }
.of-brand img { display: block; width: 150px; height: auto; }

.of-nav { flex: 1 1 auto; padding: 0 10px 12px; }
.of-nav-group { margin-top: 12px; }
.of-nav-kop {
	padding: 0 10px 4px;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--of-zijmuted);
}
.of-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 10px;
	margin: 1px 0;
	border-radius: 6px;
	font-size: 13px;
	line-height: 20px;
	color: var(--of-zijtekst);
	text-decoration: none;
}
.of-nav-item .fa { width: 16px; text-align: center; font-size: 13px; opacity: .85; }
.of-nav-item:hover, .of-nav-item:focus { background: var(--of-navy-hover); color: #fff; text-decoration: none; }
.of-nav-item.active { background: var(--of-actief); color: #fff; }
.of-nav-item.active .fa { opacity: 1; }
.of-nav-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Teller (ongelezen mail, concept-meldingen, open orders): rustig pilletje. */
.of-nav-item .nav-count {
	flex: 0 0 auto;
	min-width: 20px;
	padding: 0 6px;
	border-radius: 10px;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	color: #fff;
	background: rgba(255, 255, 255, .16);
}
.of-nav-item.active .nav-count { background: rgba(255, 255, 255, .24); }

.of-sidebar-voet {
	padding: 10px 12px 12px 20px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: 12px;
}
/* Naam links, uitloggen als icoonknop rechts op dezelfde regel. */
.of-gebruiker { display: flex; align-items: center; gap: 8px; color: var(--of-zijtekst); }
.of-gebruiker-naam { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-gebruiker-naam .fa { width: 14px; margin-right: 6px; text-align: center; }
.of-uitloggen {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 6px;
	color: var(--of-zijmuted);
}
.of-uitloggen:hover, .of-uitloggen:focus { background: var(--of-navy-hover); color: #fff; text-decoration: none; }

/* --- Inhoud ---------------------------------------------------------------- */
#of-main { margin-left: var(--of-zijbalk); min-width: 0; }
#content {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px 28px 48px;
}

/* --- Telefoon: zijbalk schuift in, met een smalle balk bovenin ------------- */
.of-topbar { display: none; }
.of-scrim { display: none; }

@media (max-width: 899px) {
	.of-topbar {
		display: flex;
		align-items: center;
		gap: 12px;
		position: sticky;
		top: 0;
		z-index: 1030;
		height: 52px;
		padding: 0 12px;
		background: var(--of-navy);
	}
	.of-topbar img { display: block; width: 116px; height: auto; }
	.of-menu-knop {
		width: 36px; height: 36px;
		border: 0; border-radius: 6px;
		background: transparent;
		color: #fff;
		font-size: 18px;
	}
	.of-menu-knop:hover, .of-menu-knop:focus { background: var(--of-navy-hover); }
	.of-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
	body.of-nav-open .of-sidebar { transform: none; }
	body.of-nav-open .of-scrim {
		display: block;
		position: fixed; inset: 0;
		z-index: 1035;
		background: rgba(10, 22, 38, .45);
	}
	#of-main { margin-left: 0; }
	/* Admin is gebouwd voor een breed scherm: wat niet past, scrollt hier horizontaal
	   in plaats van de hele pagina op te rekken. */
	#content { padding: 14px 12px 40px; overflow-x: auto; }
}

@media print {
	.of-sidebar, .of-topbar, .of-scrim { display: none !important; }
	#of-main { margin-left: 0; }
	body { background: #fff; }
}

/* --- Inloggen: geen zijbalk, kleurlogo boven het formulier ----------------- */
body.of-login #content { max-width: 560px; padding-top: 48px; }
.of-login-logo { display: block; width: 220px; height: auto; margin: 0 auto 24px; }

/* ---------------------------------------------------------------------------
   Plat in plaats van glanzend. bootstrap-theme (verlopen op knoppen en panelkoppen)
   laden we niet meer; dit zijn de paar aanvullingen op kaal Bootstrap 3.
   --------------------------------------------------------------------------- */
.panel { border-color: var(--of-rand); border-radius: 8px; box-shadow: none; }
.panel-default > .panel-heading {
	background: #fff;
	border-color: var(--of-rand);
	border-radius: 8px 8px 0 0;
	color: #1e2833;
	font-weight: 500;
}
.breadcrumb { background: transparent; padding: 2px 0 10px; margin-bottom: 10px; }
.btn-primary { background-color: var(--of-blauw); border-color: #29548e; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary.active, .open > .dropdown-toggle.btn-primary { background-color: var(--of-navy); border-color: var(--of-navy); }