body {
    font-family: 'Open Sans', Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--bs-body-color);
    line-height: 1.6;
}

#kt_app_content {
    padding-top: 0px !important;
}

/* App chrome behind Metronic layout (light / dark follows html[data-bs-theme]) */
.app-shell-bg {
    background-color: hsl(0, 0%, 95%);
}

html[data-bs-theme="dark"] .app-shell-bg {
    background-color: hsl(0, 0%, 5%);
}

/* Sticky footer: fill viewport when content is short (no gray band under footer) */
html {
    height: 100%;
}

body#kt_app_body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.flex-root.app-root {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#kt_app_page.app-page {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#kt_app_wrapper.app-wrapper {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

#kt_app_main.app-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

#kt_app_main > .d-flex.flex-column {
    flex: 1 1 auto;
}

#kt_app_footer.app-footer {
    flex-shrink: 0;
    margin-top: auto;
}

/* Customer selector spotlight icon size (matches header mockup) */
.w-45px {
    width: 45px !important;
}

.h-45px {
    height: 45px !important;
}

/* Customer switcher (header dropdown): light + dark */
[data-pp-customer-switcher="1"] .pp-customer-row-card {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] [data-pp-customer-switcher="1"] .pp-customer-row-card.bg-hover-light:hover {
    background-color: var(--bs-gray-800) !important;
}

/* Customer switcher + Vertriebspartner panel: Metronic gray utilities stay “ink” colored; force readable contrast in dark mode */
html[data-bs-theme="dark"] .pp-customer-dropdown .text-gray-900,
html[data-bs-theme="dark"] [data-pp-customer-switcher="1"] .text-gray-900 {
    color: #f5f5f5 !important;
}

html[data-bs-theme="dark"] .pp-customer-dropdown .text-gray-800,
html[data-bs-theme="dark"] [data-pp-customer-switcher="1"] .text-gray-800 {
    color: #e4e6ef !important;
}

html[data-bs-theme="dark"] .pp-customer-dropdown .text-gray-600,
html[data-bs-theme="dark"] [data-pp-customer-switcher="1"] .text-gray-600 {
    color: #a1a5b7 !important;
}

html[data-bs-theme="dark"] .pp-customer-dropdown .text-gray-500,
html[data-bs-theme="dark"] [data-pp-customer-switcher="1"] .text-gray-500 {
    color: #9496a9 !important;
}

html[data-bs-theme="dark"] .pp-customer-dropdown .text-muted,
html[data-bs-theme="dark"] [data-pp-customer-switcher="1"] .text-muted {
    color: #7e8299 !important;
}

html[data-bs-theme="dark"] .pp-customer-dropdown .form-control,
html[data-bs-theme="dark"] .pp-customer-dropdown .form-control-solid,
html[data-bs-theme="dark"] [data-pp-customer-switcher="1"] .form-control,
html[data-bs-theme="dark"] [data-pp-customer-switcher="1"] .form-control-solid {
    color: #f5f5f5 !important;
}

html[data-bs-theme="dark"] .pp-customer-dropdown .form-control::placeholder,
html[data-bs-theme="dark"] .pp-customer-dropdown .form-control-solid::placeholder,
html[data-bs-theme="dark"] [data-pp-customer-switcher="1"] .form-control::placeholder,
html[data-bs-theme="dark"] [data-pp-customer-switcher="1"] .form-control-solid::placeholder {
    color: #7e8299 !important;
    opacity: 1;
}

/* Row list: explicit link/card text (avoids inherited anchor or utility order issues) */
html[data-bs-theme="dark"] .pp-customer-dropdown a.pp-customer-row-card,
html[data-bs-theme="dark"] .pp-customer-dropdown a.pp-customer-row-card .card-body,
html[data-bs-theme="dark"] [data-pp-customer-switcher="1"] a.pp-customer-row-card,
html[data-bs-theme="dark"] [data-pp-customer-switcher="1"] a.pp-customer-row-card .card-body {
    color: #e4e6ef !important;
}

html[data-bs-theme="dark"] .pp-customer-dropdown a.pp-customer-row-card .fw-bold.fs-5,
html[data-bs-theme="dark"] [data-pp-customer-switcher="1"] a.pp-customer-row-card .fw-bold.fs-5 {
    color: #f5f5f5 !important;
}

html[data-bs-theme="dark"] [data-pp-customer-switcher="1"] .pp-customer-section-title {
    color: #d4d6da !important;
}

html[data-bs-theme="dark"] [data-pp-customer-switcher="1"] .pp-customer-spotlight-check {
    background-color: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: none;
}

html[data-bs-theme="dark"] [data-pp-customer-switcher="1"] .pp-customer-empty-title {
    color: var(--bs-gray-100) !important;
}

/* Current partner spotlight (primary): pin icon stays dark on light secondary tile; tile tint on brand */
[data-pp-customer-switcher="1"] a.card.bg-primary .bg-secondary.w-45px {
    background-color: rgba(255, 255, 255, 0.35) !important;
}

[data-pp-customer-switcher="1"] a.card.bg-primary .pp-customer-spotlight-pin {
    color: #ffffff !important;
}

/* Portal admin card (Home): Metronic grays stay ink-colored in dark theme */
html[data-bs-theme="dark"] .portal-admin-card.portal-admin-card--single .text-gray-900,
html[data-bs-theme="dark"] .portal-admin-card.portal-admin-card--single .text-gray-800,
html[data-bs-theme="dark"] .portal-admin-card.portal-admin-card--single a.text-gray-800 {
    color: #f5f5f5 !important;
}

html[data-bs-theme="dark"] .portal-admin-card.portal-admin-card--single .text-body-secondary {
    color: #b5b5c3 !important;
}

html[data-bs-theme="dark"] .portal-admin-card.portal-admin-card--single .text-gray-600,
html[data-bs-theme="dark"] .portal-admin-card.portal-admin-card--single a.text-gray-600 {
    color: #a1a5b7 !important;
}

html[data-bs-theme="dark"] .portal-admin-card.portal-admin-card--single .text-gray-400 {
    color: #7e8299 !important;
}

html[data-bs-theme="dark"] .portal-admin-card.portal-admin-card--single .border-gray-200 {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Dropdown arrow rotation */
.dropdown-arrow {
	transition: transform 0.3s ease;
}

/* When dropdown is shown, rotate arrow up */
.show .dropdown-arrow {
	transform: rotate(180deg);
}

#kt_app_header:has(.menu-sub-dropdown.show) {
	z-index: 110;
}

/* showing status of orders/ stocks/ ... */

.traffic-light {
	width: 70px;
	height: 20px;
	gap: 4px;
}

.traffic-light .light {
	width: 14px;
	height: 14px;
}

/* ---- Pöttinger corporate identity palette (web) ----
   Single source of truth for the brand hex values defined in the CI colour
   sheet (Pastel / Medium / Dark columns). Component rules below should
   reference these tokens instead of hard-coding hex values.
   Note: --pp-primary intentionally mirrors Bootstrap's --bs-primary so we
   stay consistent with the existing Metronic theme token; adjust the SCSS
   $primary variable if the brand green ever needs to change globally. */
:root {
    /* Greens */
    --pp-green-01: #dfe9a7;
    --pp-green-02: #acbb5c;
    --pp-green-03: #2f9f48; /* brand dark green (CI) */

    /* Greys */
    --pp-grey-01: #cbcccc;
    --pp-grey-02: #9a9a9a;
    --pp-grey-03: #5d5d5d; /* hover fill for neutral actions */
    --pp-grey-04: #545353;
    /* Reds */
    --pp-red-01: #cc5a43;
    --pp-red-02: #a03f2c;
    /* Yellows / Oranges / Browns (kept for completeness) */
    --pp-yellow-01: #f7eaa4;
    --pp-yellow-02: #ead740;
    --pp-yellow-03: #c3a83e;
    --pp-orange-01: #eed4b5;
    --pp-orange-02: #e3b455;
    --pp-orange-03: #b07b48;
    --pp-brown-01: #f4e4bc;
    --pp-brown-02: #c2a86e;
    --pp-brown-03: #886f3c;
    /* Blues */
    --pp-blue-01: #dbe0eb;
    --pp-blue-02: #aab5ca;
    --pp-blue-03: #667f96;
    --pp-blue-04: #506175;
}

/* ---- Pöttinger web button system ----
   Matches the brand button spec for web:
   - Open Sans, 14px, weight 600
   - height 40px, padding 0 22px
   - 1px solid border, 3px corner radius
   - Colours come from the CI palette tokens defined above
     (--pp-green-03, --pp-red-01, --pp-grey-03) instead of Bootstrap's
     --bs-primary/--bs-danger so the branded buttons stay on-brand even
     if Metronic's compiled SCSS primary/danger drift from CI.
   - Primary                = outlined CI green (Green 03), fills green on hover
   - Secondary / Light /
     Light-primary          = outlined neutral (Grey 01),   fills CI grey (Grey 03) + white text on hover
   - Danger                 = outlined CI red (Red 01),     fills red on hover
   - .btn-on-dark           = white-on-dark image-overlay button (fills CI green on hover)
   - Disabled               = 40% opacity, no pointer
   Use together with Bootstrap/Metronic variant classes, e.g.
       class="btn-poett btn-primary"
       class="btn-poett btn-secondary"
       class="btn-poett btn-on-dark"
*/
.btn.btn-poett,
.btn-poett {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 22px;
    border-radius: 3px !important;
    border-width: 1px;
    border-style: solid;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    /* Sensible neutral defaults; overridden by variant classes below. */
    color: var(--bs-body-color);
    background-color: transparent;
    border-color: var(--bs-border-color);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-poett i {
    color: currentColor;
    padding-top: 2px;
}

/* Horizontal padding only — keeps 40px height; for tight card-header toolbars on mobile */
.btn-poett.btn-poett-compact-x {
    padding-left: 10px;
    padding-right: 10px;
}

.btn.btn-poett:disabled,
.btn.btn-poett.disabled,
.btn-poett:disabled,
.btn-poett.disabled,
.btn-poett[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* ---- Primary call to action: outlined CI green; fills on hover ---- */
.btn-poett.btn-primary {
    background-color: #fff;
    border-color: var(--pp-green-03);
    color: var(--pp-green-03);
}

.btn-poett.btn-primary:hover,
.btn-poett.btn-primary:focus {
    background-color: var(--pp-green-03);
    border-color: var(--pp-green-03);
    color: #fff;
}

/* ---- Warning / destructive: outlined CI red; fills on hover ---- */
.btn-poett.btn-danger {
    background-color: #fff;
    border-color: var(--pp-red-01);
    color: var(--pp-red-01);
}

.btn-poett.btn-danger:hover,
.btn-poett.btn-danger:focus {
    background-color: var(--pp-red-01);
    border-color: var(--pp-red-01);
    color: #fff;
}

/* ---- Secondary call to action: outlined neutral; fills brand grey on hover ---- */
.btn-poett.btn-secondary {
    background-color: #fff;
    border-color: var(--pp-grey-01);
    color: var(--pp-grey-04);
}

.btn-poett.btn-secondary:hover,
.btn-poett.btn-secondary:focus {
    background-color: var(--pp-grey-03);
    border-color: var(--pp-grey-03);
    color: #fff;
}

/* ---- Light: very subtle outlined neutral (less prominent than secondary).
        Hovers to the same brand grey as .btn-secondary so tertiary actions
        (e.g. "Zurücksetzen") stay visually consistent with "Filter" et al. ---- */
.btn-poett.btn-light {
    background-color: #fff;
    border-color: var(--pp-grey-01);
    color: var(--pp-grey-04);
}

.btn-poett.btn-light:hover,
.btn-poett.btn-light:focus {
    background-color: var(--pp-grey-03);
    border-color: var(--pp-grey-03);
    color: #fff;
}

/* ---- Light-primary: tertiary tinted action (e.g. "Exportieren").
        Matches .btn-light at rest (white bg) and on hover (CI grey + white text)
        so "Exportieren" and "Zurücksetzen" read as the same button family. ---- */
.btn-poett.btn-light-primary {
    background-color: #fff;
    border-color: var(--pp-grey-01);
    color: var(--pp-grey-04);
}

.btn-poett.btn-light-primary:hover,
.btn-poett.btn-light-primary:focus {
    background-color: var(--pp-grey-03);
    border-color: var(--pp-grey-03);
    color: #fff;
}

/* ---- Info: outlined accent; fills on hover ---- */
.btn-poett.btn-info {
    background-color: #fff;
    border-color: var(--bs-info);
    color: var(--bs-info);
}

.btn-poett.btn-info:hover,
.btn-poett.btn-info:focus {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    color: #fff;
}

/* ---- Image / on-dark button: white by default, fills CI green on hover ---- */
.btn-poett.btn-on-dark {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--bs-gray-900);
}

.btn-poett.btn-on-dark:hover,
.btn-poett.btn-on-dark:focus {
    background-color: var(--pp-green-03);
    border-color: var(--pp-green-03);
    color: #fff;
}

	/* Link-style button that adapts to theme */
	.btn-poett.btn-link {
		background: transparent;
		border-color: transparent;
		border-width: 0;
		padding-left: 0;
		padding-right: 0;
		height: auto;
		color: var(--bs-link-color);
	}

		.btn-poett.btn-link:hover,
		.btn-poett.btn-link:focus {
			color: var(--bs-link-hover-color);
			text-decoration: underline;
		}

/* ---- btn-poett: dark theme ---- */
html[data-bs-theme="dark"] .btn-poett.btn-primary,
html[data-bs-theme="dark"] .btn-poett.btn-danger,
html[data-bs-theme="dark"] .btn-poett.btn-info {
    background-color: transparent;
}

html[data-bs-theme="dark"] .btn-poett.btn-secondary,
html[data-bs-theme="dark"] .btn-poett.btn-light,
html[data-bs-theme="dark"] .btn-poett.btn-light-primary {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--bs-gray-300);
}

html[data-bs-theme="dark"] .btn-poett.btn-secondary:hover,
html[data-bs-theme="dark"] .btn-poett.btn-secondary:focus,
html[data-bs-theme="dark"] .btn-poett.btn-light:hover,
html[data-bs-theme="dark"] .btn-poett.btn-light:focus,
html[data-bs-theme="dark"] .btn-poett.btn-light-primary:hover,
html[data-bs-theme="dark"] .btn-poett.btn-light-primary:focus {
    background-color: var(--pp-grey-03);
    border-color: var(--pp-grey-03);
    color: #fff;
}


/* Large card-style CTA (e.g. “Rolle hinzufügen”): not the 40px toolbar height from .btn-poett */
.btn-poett.btn-poett-graphic-tile {
    height: auto;
    min-height: 220px;
    width: 100%;
    padding: 1.75rem 1rem;
    border: none;
    background-color: transparent;
    box-shadow: none;
}

.btn-poett.btn-poett-graphic-tile:hover,
.btn-poett.btn-poett-graphic-tile:focus-visible {
    background-color: var(--bs-gray-100);
}

/* ---- Dashboard list chips: count with progressive severity tint ----
   Used for "Betroffene Maschinen" in the Service card. Neutral at the low end,
   ramping toward the muted CI red (--pp-red-01) at the top of the scale; the
   level class is picked by the view from the count itself. All colours are
   mixed from the CI palette tokens against the card surface, so the ramp works
   in both themes; the tint deliberately stops well short of a full red fill so
   the --pp-red-02 label keeps its contrast. Browsers without color-mix() fall
   back to the neutral base. */
.badge.pp-count-badge {
    min-width: 2.25rem;
    justify-content: center;
    border: 1px solid var(--pp-grey-01);
    background-color: var(--bs-gray-100);
    color: var(--pp-grey-04);
}

.badge.pp-count-badge--2 {
    background-color: color-mix(in srgb, var(--pp-red-01) 8%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--pp-red-01) 25%, var(--bs-body-bg));
}

.badge.pp-count-badge--3 {
    background-color: color-mix(in srgb, var(--pp-red-01) 14%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--pp-red-01) 40%, var(--bs-body-bg));
    color: var(--pp-red-02);
}

.badge.pp-count-badge--4 {
    background-color: color-mix(in srgb, var(--pp-red-01) 20%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--pp-red-01) 55%, var(--bs-body-bg));
    color: var(--pp-red-02);
}

.badge.pp-count-badge--5 {
    background-color: color-mix(in srgb, var(--pp-red-01) 26%, var(--bs-body-bg));
    border-color: var(--pp-red-01);
    color: var(--pp-red-02);
    font-weight: 700;
}

/* Dark theme: the tints sit on a dark surface, so the label switches to the
   lighter CI red (Red 01) to stay legible. */
html[data-bs-theme="dark"] .badge.pp-count-badge {
    color: var(--bs-gray-300);
}

html[data-bs-theme="dark"] .badge.pp-count-badge--3,
html[data-bs-theme="dark"] .badge.pp-count-badge--4,
html[data-bs-theme="dark"] .badge.pp-count-badge--5 {
    color: var(--pp-red-01);
}

/* Sortable table headers: Metronic ships the .table-sort arrow visuals but no
   click affordance, so add it once here for any header using those classes. */
th .table-sort,
th .table-sort-asc,
th .table-sort-desc {
    cursor: pointer;
    user-select: none;
}

th .table-sort:hover,
th .table-sort-asc:hover,
th .table-sort-desc:hover {
    color: var(--bs-gray-900);
}

/* ---- header customasations ---- */

/* Toolbar: consistent vertical spacing on all pages */
.app-toolbar {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
}

/* Header bar: logo/nav use edge space; not locked to content container padding */
@media (max-width: 991.98px) {
	#kt_app_header.app-header {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

#kt_app_header .app-header-logo {
	/* Claim leftover space up to the customer select (override Metronic sidebar-width logo column) */
	width: auto;
	max-width: none;
	flex: 1 1 0;
	min-width: 0;
	padding-left: 0.75rem;
}

#kt_app_header .app-header-wrapper {
	/* Shrink-wrap navbar / customer select so the logo column can grow */
	flex: 0 1 auto;
}

#kt_app_header .app-header-wrapper .app-container.container-fluid {
	padding-left: 0.5rem;
	padding-right: 0.75rem;
}

@media (min-width: 992px) {
	#kt_app_header .app-header-logo {
		padding-left: 1.5rem;
	}

	#kt_app_header .app-header-wrapper .app-container.container-fluid {
		padding-left: 0.75rem;
		padding-right: 1.5rem;
	}
}

#kt_app_header .app-header-menu-toggle {
	width: 2.25rem;
	height: 2.25rem;
	min-width: 2.25rem;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#kt_app_header .page-header {
	min-width: 0;
	flex: 1 1 auto;
	/* Take remaining space between menu toggle and customer select */
	width: 100%;
}

/*
 * Header logo sizing:
 * - width:auto → intrinsic image size (never upscales / stretches)
 * - max-width → share of the logo column (menu → customer select)
 * - Mobile/tablet: 90%; desktop (lg 992px+): 60%
 */
#kt_app_header .page-header .logo {
	display: block;
	margin: 0;
	height: auto;
	width: auto;
	max-width: 90%;
	object-fit: contain;
}

@media (min-width: 992px) {
	#kt_app_header .page-header .logo {
		max-width: 470px;
	}
}

@media (max-width: 768px) {
	#kt_app_header .page-header .logo {
		height: auto;
	}
}

@media (max-width: 480px) {
	#kt_app_header .page-header .logo {
		height: auto;
		margin-bottom: 0;
	}
}

/* Header customer selector trigger — align Keenicon glyphs with label text */
.pp-header-customer-trigger {
	line-height: 1;
}

.pp-header-customer-trigger__icon,
.pp-header-customer-trigger__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
}

.pp-header-customer-trigger__icon {
	color: var(--bs-primary);
}

.pp-header-customer-trigger__chevron {
	color: var(--bs-gray-700);
}

.pp-header-customer-trigger__icon i,
.pp-header-customer-trigger__chevron i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	line-height: 1;
	font-size: inherit;
}

.pp-header-customer-trigger__value {
	min-width: 0;
}

.page-header {
	display: flex;
	align-items: center;
	gap: 15px;
}

.logo {
	height: 29px;
	width: auto;
	max-width: 100%;
	font-size: 2.5em;
	margin: 0;
}

.content {
	padding: 20px;
}

p {
	font-weight: 400;
	margin-bottom: 1em;
}

.light-text {
	font-weight: 300;
	color: #6a6a6a;
}

.regular-text {
	font-weight: 400;
	color: #333;
}

.page-header h1 {
	font-size: 2em;
	font-weight: 300;
	margin-bottom: 0px;
	margin-bottom: -6px;
}

@media (max-width: 768px) {
	.page-header h1 {
		font-size: 2em;
		font-weight: 300;
		margin-bottom: 0px;
	}

	.logo {
		height: 45px;
	}
}

@media (max-width: 480px) {
	.page-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
		padding-left: 5px;
	}

		.page-header h1 {
			font-size: 1.8em;
			text-align: center;
			width: 100%;
			font-weight: 300;
			margin-bottom: 0px;
		}

	.logo {
		height: 40px;
		margin-bottom: 5px;
	}
}




/* ---- menu customasations ---- */

.app-sidebar .menu .menu-item .menu-link {
	transition: color 0.15s ease, background-color 0.15s ease;
}

.app-sidebar .menu .menu-item .menu-link .menu-title {
	color: var(--bs-gray-700);
}

.app-sidebar .menu .menu-item .menu-link .menu-icon i {
	color: var(--bs-gray-600);
}

.app-sidebar .menu .menu-item .menu-link:hover:not(.disabled):not(.active),
.app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active) {
	background-color: white;
}

.app-sidebar .menu .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-title,
.app-sidebar .menu .menu-item.show > .menu-link .menu-title,
.app-sidebar .menu .menu-item.here > .menu-link .menu-title {
	color: var(--bs-gray-900);
}

.app-sidebar .menu .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-icon i,
.app-sidebar .menu .menu-item.show > .menu-link .menu-icon i,
.app-sidebar .menu .menu-item.here > .menu-link .menu-icon i {
	color: var(--bs-gray-800);
}

.app-sidebar .menu .menu-item.show > .menu-link {
	background-color: var(--bs-gray-100);
}

.app-sidebar .menu .menu-item .menu-link.active {
	background-color: var(--bs-primary-light) !important;
}

.app-sidebar .menu .menu-item .menu-link.active .menu-title {
	color: var(--bs-primary);
	font-weight: 600;
}

.app-sidebar .menu .menu-item .menu-link.active .menu-icon i {
	color: var(--bs-primary);
}

.menu-sub-indention .menu-item .menu-item .menu-link.active {
	margin-right: 1rem;
}

/* Custom Height Utilities 1px - 20px */

/* Base (All breakpoints) */
.h-1px {
	height: 1px !important;
}

.h-2px {
	height: 2px !important;
}

.h-3px {
	height: 3px !important;
}

.h-4px {
	height: 4px !important;
}

.h-5px {
	height: 5px !important;
}

.h-6px {
	height: 6px !important;
}

.h-7px {
	height: 7px !important;
}

.h-8px {
	height: 8px !important;
}

.h-9px {
	height: 9px !important;
}

.h-10px {
	height: 10px !important;
}

.h-11px {
	height: 11px !important;
}

.h-12px {
	height: 12px !important;
}

.h-13px {
	height: 13px !important;
}

.h-14px {
	height: 14px !important;
}

.h-15px {
	height: 15px !important;
}

.h-16px {
	height: 16px !important;
}

.h-17px {
	height: 17px !important;
}

.h-18px {
	height: 18px !important;
}

.h-19px {
	height: 19px !important;
}

.h-20px {
	height: 20px !important;
}

/* Small devices (576px and up) */
@media (min-width: 576px) {
	.h-sm-1px {
		height: 1px !important;
	}

	.h-sm-2px {
		height: 2px !important;
	}

	.h-sm-3px {
		height: 3px !important;
	}

	.h-sm-4px {
		height: 4px !important;
	}

	.h-sm-5px {
		height: 5px !important;
	}

	.h-sm-6px {
		height: 6px !important;
	}

	.h-sm-7px {
		height: 7px !important;
	}

	.h-sm-8px {
		height: 8px !important;
	}

	.h-sm-9px {
		height: 9px !important;
	}

	.h-sm-10px {
		height: 10px !important;
	}

	.h-sm-11px {
		height: 11px !important;
	}

	.h-sm-12px {
		height: 12px !important;
	}

	.h-sm-13px {
		height: 13px !important;
	}

	.h-sm-14px {
		height: 14px !important;
	}

	.h-sm-15px {
		height: 15px !important;
	}

	.h-sm-16px {
		height: 16px !important;
	}

	.h-sm-17px {
		height: 17px !important;
	}

	.h-sm-18px {
		height: 18px !important;
	}

	.h-sm-19px {
		height: 19px !important;
	}

	.h-sm-20px {
		height: 20px !important;
	}
}

/* Medium devices (768px and up) */
@media (min-width: 768px) {
	.h-md-1px {
		height: 1px !important;
	}

	.h-md-2px {
		height: 2px !important;
	}

	.h-md-3px {
		height: 3px !important;
	}

	.h-md-4px {
		height: 4px !important;
	}

	.h-md-5px {
		height: 5px !important;
	}

	.h-md-6px {
		height: 6px !important;
	}

	.h-md-7px {
		height: 7px !important;
	}

	.h-md-8px {
		height: 8px !important;
	}

	.h-md-9px {
		height: 9px !important;
	}

	.h-md-10px {
		height: 10px !important;
	}

	.h-md-11px {
		height: 11px !important;
	}

	.h-md-12px {
		height: 12px !important;
	}

	.h-md-13px {
		height: 13px !important;
	}

	.h-md-14px {
		height: 14px !important;
	}

	.h-md-15px {
		height: 15px !important;
	}

	.h-md-16px {
		height: 16px !important;
	}

	.h-md-17px {
		height: 17px !important;
	}

	.h-md-18px {
		height: 18px !important;
	}

	.h-md-19px {
		height: 19px !important;
	}

	.h-md-20px {
		height: 20px !important;
	}
}

/* Large devices (992px and up) */
@media (min-width: 992px) {
	.h-lg-1px {
		height: 1px !important;
	}

	.h-lg-2px {
		height: 2px !important;
	}

	.h-lg-3px {
		height: 3px !important;
	}

	.h-lg-4px {
		height: 4px !important;
	}

	.h-lg-5px {
		height: 5px !important;
	}

	.h-lg-6px {
		height: 6px !important;
	}

	.h-lg-7px {
		height: 7px !important;
	}

	.h-lg-8px {
		height: 8px !important;
	}

	.h-lg-9px {
		height: 9px !important;
	}

	.h-lg-10px {
		height: 10px !important;
	}

	.h-lg-11px {
		height: 11px !important;
	}

	.h-lg-12px {
		height: 12px !important;
	}

	.h-lg-13px {
		height: 13px !important;
	}

	.h-lg-14px {
		height: 14px !important;
	}

	.h-lg-15px {
		height: 15px !important;
	}

	.h-lg-16px {
		height: 16px !important;
	}

	.h-lg-17px {
		height: 17px !important;
	}

	.h-lg-18px {
		height: 18px !important;
	}

	.h-lg-19px {
		height: 19px !important;
	}

	.h-lg-20px {
		height: 20px !important;
	}
}

/* X-Large devices (1200px and up) */
@media (min-width: 1200px) {
	.h-xl-1px {
		height: 1px !important;
	}

	.h-xl-2px {
		height: 2px !important;
	}

	.h-xl-3px {
		height: 3px !important;
	}

	.h-xl-4px {
		height: 4px !important;
	}

	.h-xl-5px {
		height: 5px !important;
	}

	.h-xl-6px {
		height: 6px !important;
	}

	.h-xl-7px {
		height: 7px !important;
	}

	.h-xl-8px {
		height: 8px !important;
	}

	.h-xl-9px {
		height: 9px !important;
	}

	.h-xl-10px {
		height: 10px !important;
	}

	.h-xl-11px {
		height: 11px !important;
	}

	.h-xl-12px {
		height: 12px !important;
	}

	.h-xl-13px {
		height: 13px !important;
	}

	.h-xl-14px {
		height: 14px !important;
	}

	.h-xl-15px {
		height: 15px !important;
	}

	.h-xl-16px {
		height: 16px !important;
	}

	.h-xl-17px {
		height: 17px !important;
	}

	.h-xl-18px {
		height: 18px !important;
	}

	.h-xl-19px {
		height: 19px !important;
	}

	.h-xl-20px {
		height: 20px !important;
	}
}

/* XX-Large devices (1400px and up) */
@media (min-width: 1400px) {
	.h-xxl-1px {
		height: 1px !important;
	}

	.h-xxl-2px {
		height: 2px !important;
	}

	.h-xxl-3px {
		height: 3px !important;
	}

	.h-xxl-4px {
		height: 4px !important;
	}

	.h-xxl-5px {
		height: 5px !important;
	}

	.h-xxl-6px {
		height: 6px !important;
	}

	.h-xxl-7px {
		height: 7px !important;
	}

	.h-xxl-8px {
		height: 8px !important;
	}

	.h-xxl-9px {
		height: 9px !important;
	}

	.h-xxl-10px {
		height: 10px !important;
	}

	.h-xxl-11px {
		height: 11px !important;
	}

	.h-xxl-12px {
		height: 12px !important;
	}

	.h-xxl-13px {
		height: 13px !important;
	}

	.h-xxl-14px {
		height: 14px !important;
	}

	.h-xxl-15px {
		height: 15px !important;
	}

	.h-xxl-16px {
		height: 16px !important;
	}

	.h-xxl-17px {
		height: 17px !important;
	}

	.h-xxl-18px {
		height: 18px !important;
	}

	.h-xxl-19px {
		height: 19px !important;
	}

	.h-xxl-20px {
		height: 20px !important;
	}
}

/* ---- IncHeader Customizations ---- */

.pp-notification-bell-trigger {
    overflow: visible;
}

.pp-notification-bell-dot {
    width: 11px;
    height: 11px;
    box-sizing: border-box;
    border: 2px solid var(--bs-body-bg, #fff);
}

#kundennummerSelect {
	border-radius: 0.475rem 0 0 0.475rem;
	border-right: none;
}

	#kundennummerSelect:focus {
		border-color: #198754;
		box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
		outline: none;
	}

.customer-dropdown-option {
	padding: 0.5rem 1rem;
}

/* Prevent dropdown from closing unexpectedly */
#kundennummerSelect option {
	padding: 8px 12px;
	cursor: pointer;
}

	#kundennummerSelect option:hover {
		background-color: #f8f9fa;
	}

/* Prevent browser autocomplete from interfering */
#kundennummerSelect:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px white inset;
}

/* Home dashboard — 2-column CSS Grid, News pinned top-left, chain fills remaining slots */
.home-dashboard {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	align-items: stretch;
}

@media (max-width: 767.98px) {
	.home-dashboard .card .card-header {
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.5rem;
	}

	.home-dashboard .card .card-header .card-title {
		flex: 1 1 auto;
		min-width: 0;
		margin-top: 0;
		margin-bottom: 0;
	}

	.home-dashboard .card .card-header .card-title.flex-column {
		justify-content: center;
	}

	.home-dashboard .card .card-header .card-toolbar {
		flex: 0 0 auto;
		margin: 0;
		align-self: center;
	}

	.home-dashboard .card .card-header .btn-poett-compact-x {
		gap: 0.375rem;
	}
}

/* Dashboard card tables — horizontal scroll instead of squashed/overlapping columns */
.home-dashboard .card .card-body {
	min-width: 0;
}

.home-dashboard .card .table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	min-width: 0;
}

.home-dashboard .card .table-responsive > .table {
	table-layout: auto;
	width: max-content;
	min-width: 100%;
}

.home-dashboard .card .table-responsive > .table th,
.home-dashboard .card .table-responsive > .table td {
	white-space: nowrap;
}

.home-dashboard .card .table-responsive > .table th {
	width: auto !important;
}

.home-dashboard .card .table-responsive .text-truncate,
.home-dashboard .card .table-responsive .text-truncate span {
	overflow: visible;
	text-overflow: unset;
	white-space: nowrap;
	max-width: none;
}

.home-dashboard__cell {
	min-width: 0;
}

.home-dashboard__cell > * {
	flex: 1 1 auto;
	width: 100%;
}

.home-dashboard__cell--news {
	grid-column: 1;
	grid-row: 1;
}

/* Last striped row is square; clip it to the card radius instead of leaving a flat bottom. */
.pp-news-card {
	overflow: hidden;
}

.pp-news-card tbody tr:last-child > td:first-child {
	border-bottom-left-radius: var(--bs-card-border-radius, 0.625rem);
}

.pp-news-card tbody tr:last-child > td:last-child {
	border-bottom-right-radius: var(--bs-card-border-radius, 0.625rem);
}

/* News card — compact header (Metronic .card-header defaults to min-height: 70px + large pt-*) */
.pp-news-card > .card-header.pp-news-card__header {
	box-sizing: border-box;
	min-height: 0 !important;
	padding-top: 1.75rem !important;
	padding-bottom: 0.75rem !important;
	align-items: center;
}

.pp-news-card > .card-header .card-title {
	margin: 0 !important;
}

.pp-news-card > .card-header .card-label {
	margin: 0 !important;
	line-height: 1.25;
	font-size: 1.15rem;
}

.pp-news-card__count {
	font-size: 0.95em;
}

@media (min-width: 992px) {
	.home-dashboard__cell:not(.home-dashboard__cell--news) {
		grid-row: var(--home-dashboard-row);
		grid-column: var(--home-dashboard-col);
	}

	/* Admin never wider than one column (50% of dashboard) on desktop.
	   `span 1` already does that. An extra max-width would NOT: a percentage on a grid item
	   resolves against its grid AREA - i.e. the single column - so `max-width: calc(50% - …)`
	   squeezed the card to ~25% of the dashboard and left it visibly too narrow on laptop
	   screens. Stretch it across its column instead. */
	.home-dashboard__cell--admin {
		grid-column: var(--home-dashboard-col) / span 1;
		justify-self: stretch;
	}
}

@media (max-width: 991.98px) {
	.home-dashboard {
		grid-template-columns: 1fr;
	}

	.home-dashboard__cell {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
		max-width: none !important;
		justify-self: stretch !important;
	}

	.home-dashboard__cell--news {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
		order: 1;
	}

	.home-dashboard__cell--eo {
		order: 2;
	}

	.home-dashboard__cell--ms {
		order: 3;
	}

	.home-dashboard__cell--sv {
		order: 4;
	}

	.home-dashboard__cell--admin {
		order: 5;
	}
}

/* App toolbar: breadcrumbs on first row, quick links full width below on mobile */
@media (max-width: 991.98px) {
	.app-toolbar-wrapper {
		flex-direction: column;
		align-items: stretch !important;
		gap: 1rem;
	}

	/* Back button + title/breadcrumb sit in one row; that row spans the full width on mobile so
	   the toolbar actions below it keep their own line. */
	.app-toolbar-wrapper .app-toolbar__title-group {
		width: 100%;
		margin-inline-end: 0 !important;
	}

	.app-toolbar-wrapper .page-title {
		width: 100%;
		margin-inline-end: 0 !important;
		min-width: 0;
	}

	.app-toolbar__actions {
		width: 100%;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.app-toolbar-quick-menu {
		width: 100%;
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: stretch !important;
		align-items: stretch !important;
		gap: 0.5rem;
	}

	.app-toolbar-quick-menu > a {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
	}
}

.menu-item .menu-link {	
	padding: 0.65rem 1rem 0.65rem 0.5rem;
    margin-left: 0.5rem;
}

/* Profile / account forms: keep field controls from spanning the full card.
   #kt_account_profile_details is deliberately NOT in this list - that card caps its field COLUMN
   instead (further down), which keeps every row the same width. Capping the controls there made
   the bare e-mail input end ~10px short of the name pair, because a .row adds negative margins. */
#kt_account_language_preferences .form-control,
#kt_account_language_preferences .form-select,
#kt_account_language_preferences .select2-container,
#kt_account_signin_method .form-control,
#kt_account_signin_method .form-select {
	max-width: 40rem;
}

/* User list: the filter bar and the "Kundenhierarchie anzeigen" switch share one row. The filter
   card comes from a shared partial (also used standalone on /Admin/UserManagement) and carries its
   own bottom margin - inside the row that margin would push the two cards' bottom edges out of
   line, so it is neutralised here and the row itself carries the spacing. */
.pp-userlist-filter-row > * > .card {
	margin-bottom: 0 !important;
}

/* Only from lg up, where the row is a ROW: in the stacked (column) layout below lg a flex-basis
   would size the toggle's HEIGHT instead of its width. min-width stops the label from wrapping
   into one word per line on narrow desktops. */
@media (min-width: 992px) {
	.pp-userlist-filter-row > .pp-userlist-hierarchy-toggle {
		flex: 0 0 15%;
		/* Label and switch now sit side by side, so the floor is label + gap + switch + padding.
		   fit-content lets the browser add that up instead of a hard rem value that goes stale the
		   moment the wording or the switch size changes. 15% only takes over on wide viewports. */
		min-width: fit-content;
	}
}

/* Language pickers: centre the hover/active pill inside its dropdown.
   The global ".menu-item .menu-link" rule further up adds margin-left: 0.5rem, which nothing
   compensates for, so every row ends up 6.5px off-centre:
     * login footer menu (#kt_auth_lang_menu) - .menu-item is a flex container and Metronic sizes
       .menu-link to the full content box, so the margin pushed the pill PAST the right gutter
       (measured 16.3px left / 3.3px right).
     * header user menu ([data-pp-language-switcher]) - .menu-item is a block, so the margin is
       taken out of the pill's width instead (measured 16.3px left / 9.8px right).
   Both end up symmetric at 9.75px per side. Dropdown widths are unchanged - only the pill inside
   them moves. Scoped to the language menus on purpose: the margin is deliberate for the side menu,
   where it indents sub-items under their group. */
#kt_auth_lang_menu .menu-item .menu-link,
[data-pp-language-switcher] .menu-item .menu-link {
	margin-left: 0;
}

/* Profile "Persönliche Daten": ONE width for every row.
   Every row is label (col-lg-3) + fields (col-lg-9), so capping the FIELD COLUMN - rather than
   each control - makes all rows end at the same x at any viewport width: the single e-mail input,
   the first/last-name pair, both dial-code + number pairs and the department/position picker.
   Capping the controls instead is what left the e-mail input ~10px longer than the name pair: a
   .row carries negative side margins, so a capped row renders wider than a capped bare input. */
#kt_account_profile_details .row > .col-lg-9 {
	max-width: 44rem;
}

/* Select2 sizes itself with width:"resolve" unless told otherwise, i.e. it snapshots the control's
   pixel width at init time and writes it onto its own container. That is why the Anrede picker and
   the two dial-code pickers ended up a few pixels off their neighbours and stopped tracking the
   column on resize. Let the container follow its column instead; the column caps above still rule.
   !important because the snapshot is an inline style. */
#kt_account_profile_details .select2-container {
	width: 100% !important;
}

/* Department/position picker: its per-select inline cap (22rem each) plus the trailing button
   exceeds the shared column width and would wrap onto a second line. Let the two selects flex
   instead, so the row fills exactly the same width as every other row. !important because the cap
   is inline. Their min-width still forces a wrap on genuinely narrow viewports, which is intended.
   flex-basis: 0 is the part that makes the rows MATCH: .flex-grow-1 only sets flex-grow, so the
   basis stayed "auto" and every select was sized by its own longest option first and only then
   grew - which is why the "Bildungseinrichtung / Kontaktperson Social Media" row came out visibly
   narrower than the row above and the empty picker row below it. */
#kt_account_profile_details #kt_department_position_picker > .fv-row,
#kt_account_profile_details .department-position-row > .fv-row {
	max-width: none !important;
	flex-basis: 0;
}

/* Same reason, for the third column: fa-plus and fa-trash are not the same glyph width, so a
   padding-sized button left the locked rows and the picker row a couple of pixels out of step.
   Fixed square keeps every row's two selects on the same x. */
#kt_account_profile_details #kt_department_position_picker > .flex-shrink-0 > .btn-poett,
#kt_account_profile_details .department-position-row > .flex-shrink-0 > .btn-poett {
	width: 40px;
	padding: 0;
}

/* "Dokumentensprache": each picker holds one short value (a language name plus its 2-letter code)
   - 40rem of select for that reads as an empty bar. Tighter cap; the label column is also one grid
   step narrower (col-lg-3) so the control sits closer to its label. */
#kt_account_language_preferences .form-select,
#kt_account_language_preferences .select2-container {
	max-width: 22rem;
}

/* ... and one width for all three, not three. These pickers are initialised by Metronic's
   KTApp.initSelect2 (the @section Scripts block in IncDocumentLanguageView never renders - a view
   component cannot contribute to a layout section), which passes no width, so Select2 falls back
   to width:"resolve" and freezes each container at whatever it measured for that one control.
   Filling the (capped) column makes the three identical and keeps them responsive. */
#kt_account_language_preferences .select2-container {
	width: 100% !important;
}

/* ---- SweetAlert2 dialogs: Pöttinger buttons everywhere ----
   Dialogs are fired from a dozen places (Admin/Inbox, Admin/Translations, StockList, AdminCodes,
   RoleManagement, permission-management.js, pp-confirm.js) and most of them pass no button classes
   at all, so SweetAlert's own filled buttons showed through. Styling .swal2-styled - the class
   SweetAlert puts on its buttons while buttonsStyling stays true - means every dialog gets the CI
   look without a per-call opt-in, including dialogs added later.
   Confirm = outlined CI green, cancel/deny = outlined CI red (same pair as "Erledigt"/"Löschen"),
   no icons. A call site that needs different semantics - a red confirm for a delete, a neutral
   secondary - still wins by passing buttonsStyling:false with .btn-poett classes, which drops
   .swal2-styled and takes it out of these rules.
   Toasts are excluded: their buttons sit in a 3rem-high strip, not a dialog footer. */
.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	/* SweetAlert spaces its buttons with a per-button margin; the .swal2-actions gap below does it
	   for styled and unstyled dialogs alike, so drop the margin instead of adding to it. */
	margin: 0;
	padding: 0 22px;
	border-radius: 3px !important;
	border: 1px solid transparent;
	box-shadow: none;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 1;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-confirm {
	background-color: #fff;
	border-color: var(--pp-green-03);
	color: var(--pp-green-03);
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-confirm:hover,
.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-confirm:focus {
	background-color: var(--pp-green-03);
	border-color: var(--pp-green-03);
	color: #fff;
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-cancel,
.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-deny {
	background-color: #fff;
	border-color: var(--pp-red-01);
	color: var(--pp-red-01);
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-cancel:hover,
.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-cancel:focus,
.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-deny:hover,
.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-deny:focus {
	background-color: var(--pp-red-01);
	border-color: var(--pp-red-01);
	color: #fff;
}

/* Same as .btn-poett in dark mode: the white fill would be a bright block on a dark dialog. */
html[data-bs-theme="dark"] .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-confirm,
html[data-bs-theme="dark"] .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-cancel,
html[data-bs-theme="dark"] .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled.swal2-deny {
	background-color: transparent;
}

/* buttonsStyling:false (pp-confirm.js and the destructive dialogs) hands the button styling to the
   .btn-poett classes, which also drops SweetAlert's own spacing between the buttons -
   .swal2-actions is a flex container, so one gap restores it for both kinds of dialog. */
.swal2-actions {
	gap: 0.75rem;
}

@media (min-width: 992px) {
	/* "Dokumentensprache": a tight label column instead of 25% of the card, so each picker sits
	   next to its label rather than a third of a wide card away.
	   Sized by CONTENT with a floor, not by a fixed width: the app layout renders at a smaller root
	   font size than the login layout, so a hard rem value that looked right in one place wrapped
	   the labels in the other ("Dokumentensprach / e"). nowrap makes wrapping impossible; min-width
	   keeps all three selects left-aligned with each other as long as the labels stay under it, and
	   a longer translation merely shifts its own row instead of breaking the layout. padding-right
	   is the visible gap to the control.
	   The floor only does that job while EVERY label fits inside it, and 13rem did not: measured in
	   the running app (1280x800, app layout root = 13px), "Dokumentensprache" needs 13.62rem but
	   "1. Alternative Language" needs 15.06rem, so the first row sat at the 13rem floor and the two
	   Alternativsprache rows content-sized past it - the selects started 18px apart. 16rem clears
	   the longest label of both shipped languages (de/en, via ProfileLanguageHelper.Pick) with
	   about 1rem to spare. */
	#kt_account_language_preferences .row > .col-lg-3 {
		flex: 0 0 auto;
		width: auto;
		min-width: 16rem;
		white-space: nowrap;
		padding-right: 1.5rem;
	}

	#kt_account_language_preferences .row > .col-lg-9 {
		flex: 1 1 auto;
		width: auto;
	}
}

/* Profile header meta row (dealer / phone / e-mail).
   The dealer entry has two lines and a larger name, the other two have one line each. Giving the
   icon and the FIRST text line of every item one shared line box makes the icons and the titles
   line up across all three, whatever their font size - the second line (customer number) then
   simply flows underneath. This replaces an mt-1 nudge on the shop icon that only lined up for one
   particular combination of font sizes. */
/* flex-start is load-bearing, not cosmetic: a flex child defaults to align-self: stretch, so on the
   two-line dealer entry the icon box would grow to both lines and centre its glyph between them -
   i.e. below the name it is supposed to sit next to. */
.pp-profile-meta__item {
	align-items: flex-start;
}

.pp-profile-meta__item > i,
.pp-profile-meta__line {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
}

/* Permission filter dropdown: a base row that owns Ausprägungen expands in place. Before, the only
   thing that changed on expand was the counter pill, which picked up Metronic's btn-active-* tint
   and read as a stray green blob at the right edge - the state belongs to the ROW, not to the
   button, so the row carries a flat tint and the counter stays neutral.
   The horizontal padding is compensated by a negative margin so the checkboxes stay flush with the
   group heading above them; only the vertical padding actually adds height. */
.permission-filter-item {
	margin-left: -0.5rem;
	margin-right: -0.5rem;
	padding: 0.375rem 0.5rem;
	border-radius: 0.475rem;
}

.permission-filter-item.is-expanded {
	/* gray-100 rather than a primary tint: this marks "opened", not "selected" - the checkboxes
	   already carry the selection state and two accent colours in one row competed. */
	background-color: var(--bs-gray-100);
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
}

/* Metronic gives .btn a min-height that makes the 20px counter row taller than the label line. */
.permission-filter-item [data-permission-variant-toggle] {
	min-height: 0;
	line-height: 1;
}

.permission-filter-item [data-permission-variant-toggle]:hover .badge {
	background-color: var(--bs-gray-300);
}

/* Role card whose checkbox is locked (always-assigned base role in CreateUser/ReviewUser) -
   a light grey tint marks it as fixed, not editable. Only the background/border are dimmed,
   never opacity, so the checkbox - checked and green from --bs-primary - still reads clearly
   instead of washing out along with the rest of the card. */
.role-card.role-card-locked {
	background-color: var(--bs-gray-100);
	border-color: var(--bs-gray-300);
}

.role-card.role-card-locked .card-body {
	cursor: not-allowed;
}