/* Vialog Mitarbeiterportal – Frontend */

.vmp-portal {
	--vmp-cols: 3;
	--vmp-cols-t: 2;
	--vmp-cols-m: 1;
	--vmp-gap: 24px;
	--vmp-title-size: 26px;
	--vmp-h-size: 20px;
	--vmp-sub-size: 15px;
	--vmp-btn-size: 15px;
	--vmp-btn-bg: #17253F;
	--vmp-btn-color: #fff;
	--vmp-h-color: #17253F;
	--vmp-card-bg: #fff;
	--vmp-radius: 8px;
	--vmp-ratio: 16/9;
	--vmp-fit: cover;
	--vmp-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .08);
	box-sizing: border-box;
	width: 100%;
	max-width: var(--vmp-max-width, 1200px);
	margin-left: auto !important;
	margin-right: auto !important;
	padding: var(--vmp-space-top, 60px) var(--vmp-side, 20px) var(--vmp-space-bottom, 80px);
}

@media (max-width: 767px) {
	.vmp-portal { padding-top: var(--vmp-space-top-m, 30px); }
}

.vmp-portal__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 12px 24px;
	margin: 0 0 24px;
	font-size: 14px;
}

.vmp-portal__bar.has-greeting { justify-content: space-between; align-items: center; margin-bottom: 28px; }

.vmp-portal__account {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-left: auto;
}

.vmp-portal__user { opacity: .75; }

/* Abmelden als Button in Markenfarbe. */
.vmp-portal .vmp-logout--button,
.vmp-portal .vmp-manage {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: calc(var(--vmp-radius, 8px) * .75);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: filter .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

.vmp-portal .vmp-logout--button {
	background: var(--vmp-btn-bg, #17253F);
	color: var(--vmp-btn-color, #fff);
	box-shadow: 0 2px 8px rgba(23, 37, 63, .18);
}

.vmp-portal .vmp-logout--button:hover,
.vmp-portal .vmp-logout--button:focus {
	filter: brightness(1.2);
	color: var(--vmp-btn-color, #fff);
	transform: translateY(-1px);
}

.vmp-portal .vmp-logout--button svg { width: 16px; height: 16px; }

/* „Lohn & Provision verwalten“ (nur Superadmins) als Rahmen-Button. */
.vmp-portal .vmp-manage {
	color: var(--vmp-btn-bg, #17253F);
	box-shadow: inset 0 0 0 2px var(--vmp-btn-bg, #17253F);
}

.vmp-portal .vmp-manage:hover,
.vmp-portal .vmp-manage:focus {
	background: var(--vmp-btn-bg, #17253F);
	color: var(--vmp-btn-color, #fff);
}

.vmp-greeting { min-width: 0; }

.vmp-portal .vmp-greeting__title {
	margin: 0;
	font-size: calc(var(--vmp-title-size, 26px) + 6px);
	line-height: 1.2;
	font-weight: 600;
	color: var(--vmp-h-color, #17253F);
}


@media (max-width: 600px) {
	.vmp-portal .vmp-greeting__title { font-size: calc(var(--vmp-title-size, 26px) - 2px); }
	.vmp-portal__bar.has-greeting { align-items: flex-start; }
}

.vmp-section + .vmp-section { margin-top: calc(var(--vmp-gap) * 2); }

.vmp-section__title {
	font-size: var(--vmp-title-size);
	color: var(--vmp-h-color);
	margin: 0 0 8px;
	line-height: 1.25;
}

.vmp-section__desc { margin: 0 0 16px; }
.vmp-section__desc p:last-child { margin-bottom: 0; }
.vmp-section__title + .vmp-grid { margin-top: 16px; }

.vmp-grid {
	display: grid;
	grid-template-columns: repeat(var(--vmp-cols), minmax(0, 1fr));
	gap: var(--vmp-gap);
}

@media (max-width: 1024px) {
	.vmp-grid { grid-template-columns: repeat(var(--vmp-cols-t), minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.vmp-grid { grid-template-columns: repeat(var(--vmp-cols-m), minmax(0, 1fr)); }
}

.vmp-card {
	display: flex;
	flex-direction: column;
	background: var(--vmp-card-bg);
	border-radius: var(--vmp-radius);
	box-shadow: var(--vmp-shadow);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}

.vmp-card:hover { transform: translateY(-2px); }
.vmp-card--disabled { opacity: .6; }
.vmp-card--disabled:hover { transform: none; }

.vmp-card__media {
	display: block;
	aspect-ratio: var(--vmp-ratio);
	background: #f2f4f7;
	overflow: hidden;
}

.vmp-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--vmp-fit);
	transition: transform .35s ease;
}

.vmp-card:hover .vmp-card__media img { transform: scale(1.03); }

.vmp-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
	text-align: center;
}

.vmp-card__title {
	font-size: var(--vmp-h-size);
	color: var(--vmp-h-color);
	line-height: 1.3;
	margin: 0 0 8px;
	overflow-wrap: break-word;
	hyphens: auto;
}

.vmp-card__sub {
	font-size: var(--vmp-sub-size);
	margin: 0 0 12px;
	opacity: .8;
}

.vmp-card__hint {
	font-size: 13px;
	margin: 0 0 12px;
	color: #8a5a00;
}

.vmp-card__actions { margin-top: auto; padding-top: 8px; }

.vmp-portal .vmp-btn,
.vmp-auth .vmp-btn {
	display: inline-block;
	background: var(--vmp-btn-bg, #17253F);
	color: var(--vmp-btn-color, #fff);
	font-size: var(--vmp-btn-size, 15px);
	font-weight: 600;
	line-height: 1.2;
	padding: .85em 1.6em;
	border: 0;
	border-radius: calc(var(--vmp-radius, 8px) * .75);
	text-decoration: none;
	cursor: pointer;
	transition: filter .2s ease;
}

.vmp-portal .vmp-btn:hover,
.vmp-portal .vmp-btn:focus,
.vmp-auth .vmp-btn:hover,
.vmp-auth .vmp-btn:focus {
	filter: brightness(1.15);
	color: var(--vmp-btn-color, #fff);
}

.vmp-btn.is-disabled { cursor: not-allowed; filter: grayscale(1); opacity: .6; }

.vmp-empty { padding: 24px; text-align: center; opacity: .7; }

/* Login-Formulare */

.vmp-auth {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--vmp-login-width, 440px) + 2 * var(--vmp-side, 20px));
	margin-left: auto !important;
	margin-right: auto !important;
	padding: var(--vmp-space-top, 60px) var(--vmp-side, 20px) var(--vmp-space-bottom, 80px);
}

/* Login-Formular innerhalb der Portalseite: Abstände nicht doppeln. */
@media (max-width: 767px) {
	.vmp-auth { padding-top: var(--vmp-space-top-m, 30px); }
}

.vmp-portal .vmp-auth { margin: 0 auto; padding: 0; }

.vmp-auth__box {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 10px 30px rgba(0, 0, 0, .08);
	padding: 32px;
}

.vmp-auth__title { margin: 0 0 20px; font-size: 24px; color: #17253F; }

.vmp-field { margin: 0 0 16px; }
.vmp-field label { display: block; font-weight: 600; margin: 0 0 6px; font-size: 14px; }

.vmp-field input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #ccd3de;
	border-radius: 6px;
	font-size: 16px;
	background: #fff;
}

.vmp-field input:focus { outline: 2px solid #17253F; outline-offset: 1px; border-color: transparent; }

.vmp-check { margin: 0 0 20px; font-size: 14px; }

.vmp-auth__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
}

.vmp-link, .vmp-logout { font-size: 14px; }

.vmp-notice {
	border-radius: 6px;
	padding: 12px 16px;
	margin: 0 0 16px;
	font-size: 15px;
	border-left: 4px solid;
}

.vmp-notice--error { background: #fdf0f0; border-color: #c62828; color: #7a1c1c; }
.vmp-notice--success { background: #eef8f0; border-color: #2e7d32; color: #1d4d20; }
.vmp-notice--info { background: #eef3fb; border-color: #17253F; color: #17253F; }