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-column-fluid {
    flex: 1 0 auto;
}

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

/* 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);
}

/* 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);
}

/* ---- 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-right, chain fills S-curve 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: 2;
	grid-row: 1;
}

/* 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;
	max-height: 75px;
	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 */
	.home-dashboard__cell--admin {
		grid-column: var(--home-dashboard-col) / span 1;
		max-width: calc(50% - 0.75rem);
		justify-self: start;
		width: 100%;
	}
}

@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;
	}

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

	.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;
}