/* =========================================================================
   AMMAX Transport — front-end beheeromgeving
   ========================================================================= */

.mgr-page { padding-bottom: var(--sp-20); }

/* ---------- Login ---------- */

.mgr-login { display: grid; place-items: center; padding-block: var(--sp-12); }
.mgr-login__card {
	width: 100%;
	max-width: 420px;
	padding: var(--sp-10);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-surface);
	box-shadow: var(--shadow-sm);
}
.mgr-login__lock {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	border-radius: var(--radius-surface);
	background: var(--brand-soft);
	color: var(--brand);
	margin-bottom: var(--sp-5);
}
.mgr-login__title { font-size: var(--fs-24); }
.mgr-login__text { margin-top: var(--sp-2); color: var(--text-muted); font-size: var(--fs-14); }
.mgr-login__form { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }

/* ---------- Dashboard ---------- */

.mgr { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) { .mgr { grid-template-columns: 248px minmax(0, 1fr); gap: var(--sp-12); align-items: start; } }

.mgr__nav {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-surface);
	padding: var(--sp-5);
}
@media (min-width: 1024px) { .mgr__nav { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } }

.mgr__brand { display: grid; gap: 2px; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-4); }
.mgr__brandmark { font-weight: 800; letter-spacing: -0.03em; font-size: var(--fs-20); color: var(--brand); }
.mgr__brandsub { font-size: var(--fs-13); color: var(--text-muted); }

.mgr__nav ul { display: grid; gap: var(--sp-1); }
.mgr__nav a,
.mgr__navlink {
	display: flex; align-items: center; gap: var(--sp-3);
	min-height: 44px;
	padding: 0 var(--sp-3);
	border-radius: var(--radius-control);
	color: var(--text);
	font-size: var(--fs-14);
	font-weight: 600;
}
.mgr__nav a:hover, .mgr__navlink:hover { background: var(--n-50); text-decoration: none; }
.mgr__nav a.is-active { background: var(--brand); color: #fff; }
.mgr__nav a.is-active:hover { background: var(--brand-hover); color: #fff; }
.mgr__navfoot { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); display: grid; gap: var(--sp-1); }
.mgr__navlink { color: var(--text-muted); font-weight: 500; }

.mgr__main { min-width: 0; }
.mgr__head { margin-bottom: var(--sp-8); }
.mgr__head h1 { font-size: var(--fs-30); }
.mgr__head p { margin-top: var(--sp-2); color: var(--text-muted); }

.mgr-cards { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .mgr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mgr-card {
	display: grid; gap: var(--sp-2); align-content: start;
	padding: var(--sp-6);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-surface);
	color: var(--text);
}
.mgr-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); text-decoration: none; }
.mgr-card svg { color: var(--brand); }
.mgr-card h2 { font-size: var(--fs-18); }
.mgr-card p { font-size: var(--fs-13); color: var(--text-muted); margin: 0; }

/* Tabs en talen */
.mgr-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.mgr-tab {
	display: inline-flex; align-items: center;
	min-height: 40px; padding: 0 var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--radius-control);
	background: #fff;
	color: var(--text);
	font-size: var(--fs-14);
	font-weight: 600;
}
.mgr-tab:hover { background: var(--n-50); text-decoration: none; }
.mgr-tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.mgr-langs { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-8); font-size: var(--fs-13); }
.mgr-langs__label { color: var(--text-muted); }
.mgr-lang {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 36px;
	border: 1px solid var(--line); border-radius: var(--radius-control);
	color: var(--text); font-weight: 700;
}
.mgr-lang:hover { background: var(--n-50); text-decoration: none; }
.mgr-lang.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Formulieren */
.mgr-form {
	display: grid;
	gap: var(--sp-6);
	padding: var(--sp-8);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-surface);
	margin-bottom: var(--sp-10);
}
.mgr-subtitle { font-size: var(--fs-20); margin-bottom: var(--sp-4); }
.mgr-field { display: grid; gap: var(--sp-2); }
.mgr-field__label { font-size: var(--fs-13); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.mgr-field--narrow { max-width: 180px; }
.mgr-default { color: var(--n-400); font-style: italic; }
.mgr-row { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .mgr-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mgr-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .mgr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mgr-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-2); }

/* Afbeeldingen */
.mgr-image { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .mgr-image { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } }
.mgr-image__preview {
	display: grid; place-items: center;
	aspect-ratio: 4 / 3;
	background: var(--n-100);
	border-radius: var(--radius-media);
	overflow: hidden;
}
.mgr-image__preview img { width: 100%; height: 100%; object-fit: cover; }
.mgr-image__empty { display: grid; justify-items: center; gap: var(--sp-2); color: var(--n-500); font-size: var(--fs-13); }
.mgr-image__controls { display: grid; gap: var(--sp-3); justify-items: start; }
.mgr-file { font-size: var(--fs-13); }
.mgr-remove { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); color: var(--error); }

/* Lijsten */
.mgr-list { display: grid; gap: var(--sp-3); }
.mgr-list__item {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-surface);
}
.mgr-list__main { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.mgr-list__actions { display: flex; gap: var(--sp-2); align-items: center; }
.mgr-list__actions form { margin: 0; }
.mgr-empty { color: var(--text-muted); padding: var(--sp-6); background: var(--surface-alt); border-radius: var(--radius-surface); }

.mgr-pill {
	display: inline-flex; align-items: center;
	padding: 2px var(--sp-3);
	border-radius: 999px;
	background: var(--n-100);
	color: var(--text-muted);
	font-size: var(--fs-11);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.mgr-pill.is-on { background: var(--success-soft); color: #12563a; }

/* Repeater (social) */
.mgr-repeater { display: grid; gap: var(--sp-4); }
.mgr-repeater__row {
	display: grid;
	gap: var(--sp-4);
	padding: var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--radius-surface);
	background: var(--n-25);
	position: relative;
}
@media (min-width: 900px) {
	.mgr-repeater__row { grid-template-columns: 1fr 1.6fr 120px 140px 44px; align-items: end; }
}
.mgr-repeater__remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-control);
	color: var(--error);
	cursor: pointer;
}
.mgr-repeater__remove:hover { background: var(--error-soft); }

/* Aanvragen */
.mgr-leads { display: grid; gap: var(--sp-3); }
.mgr-lead {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-surface);
	overflow: hidden;
}
.mgr-lead summary {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
	cursor: pointer;
	font-size: var(--fs-14);
}
.mgr-lead__type { font-weight: 700; color: var(--brand); }
.mgr-lead__title { flex: 1; min-width: 160px; }
.mgr-lead__date { color: var(--text-muted); font-size: var(--fs-13); }
.mgr-lead__data {
	display: grid;
	gap: var(--sp-2) var(--sp-6);
	padding: var(--sp-5);
	border-top: 1px solid var(--line);
	font-size: var(--fs-14);
	margin: 0;
}
@media (min-width: 640px) { .mgr-lead__data { grid-template-columns: 220px minmax(0, 1fr); } }
.mgr-lead__data dt { font-weight: 600; color: var(--text-muted); }
.mgr-lead__data dd { margin: 0; }
.mgr-lead__actions { display: flex; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-5); }
.mgr-lead__actions form { margin: 0; }