body {
	background-color: var(--third-color)!important;
    overflow: hidden;
}

/* PayLevel restricted elements - hidden until payLevel >= 2 */
.paylevel-restricted {
    display: none !important;
}

.paylevel-unlocked .paylevel-restricted {
    display: flex !important;
}

/* Center iconPd4 when other buttons are hidden (payLevel < 2) */
.pd-icon-container:not(.paylevel-unlocked) {
    justify-content: center !important;
}

.pd-icon-container.paylevel-unlocked {
    justify-content: space-between;
}


footer, header {
    display: none!important;
}

/* For Webkit browsers (Chrome, Safari, Edge) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none!important;
    margin: 0;
}

/* For Firefox */
input[type="number"] {
    -moz-appearance: textfield!important;
}


.projectNotFound {
    text-align: center;
    color: var(--third-color) !important;
    font-weight: 600;
    font-size: 16px;
}

.projectNotFound h2 {
    color: var(--third-color);
    font-weight: 900;
    font-size: 40px;
}

.projectNotFound a {
    color: var(--secondary-color);
    font-size: 20px;
    font-weight: 600;
    background-color: var(--primary-color);
    padding: 5px 10px;
    border-radius: 10px;
    line-height: 60px;
}


/* Desktop (Standard) */
html {
    font-size: 16px!important; /* 1rem = 16px */
}

/* Tablet */
@media (max-width: 768px) {
    html {
        font-size: 14px!important; /* 1rem = 14px */
    }
}

/* Smartphone */
@media (max-width: 480px) {
    html {
        font-size: 12px!important; /* 1rem = 12px */
    }
}

h1 {
    font-size: 30px;
}

h2 {
    font-size: 1.3rem;
}

h3 {
    font-size: 22px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 14px;
}




.header-container {
    background-color: var(--secondary-color)!important;
}

.et_pb_menu_0_tb_header.et_pb_menu ul li a{
	color: var(--primary-color)!important;
}



/*loading page*/

.userEmptyNote {
    margin-left: 5%;
	margin-right: 5%;
	width: 90%;
}

.userEmptyNoteInner {
    max-width: 500px;
    min-width: 300px;
    margin: 100px auto;
    padding: 40px;
    border: 2px solid var(--secondary-color);
    border-radius: 20px;
    color: var(--secondary-color);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    background-color: var(--primary-color);
}


.userEmptyNote button {
    margin: 40px auto 0px auto;
}

/* call div */

div#callDisplay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}


.call-info {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

div#openCallOrganization {
    border: 2px solid var(--secondary-color);
    padding: 5px 10px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    line-height: 20px;
    font-size: 15px;
    font-weight: 600;
    text-transform: capitalize;
}


/* Highlight element by raising its z-index */
.highlighted {
    position: relative; /* Stellt sicher, dass das z-index funktioniert */
    z-index: 10001!important; /* Higher than the tooltip */
	pointer-events: none;
}



/* Overlay, wenn es die Klasse 'loading' hat */
/* Vollbild-Overlay */
.loadingOverlay.loading {
    opacity: 1;
}

/* Overlay ohne die 'loading'-Klasse, macht es unsichtbar */
.loadingOverlay {
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--third-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
	/*height: 0px;*/
	transition: opacity 1s ease;
	 z-index: 9999;
}

/* Container for spinner and logo */
.spinnerOverlay-container {
    position: relative;
    width: 200px; /* Adjust container size */
    height: 200px;
    text-align: center;
}

/* Logo style (SVG) */
.logoOverlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    background-image: var(--logo-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Spinner style */
.spinnerOverlay {
    box-sizing: border-box; /* Includes border width in sizing */
    width: 100%; /* Passt die Breite an den Container an */
    height: 100%; /* Matches container height */
    border: 10px solid var(--secondary-color); /* Heller Rand */
    border-top: 10px solid var(--primary-color); /* Spinner top border */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.spinnerOverlay-container{
	opacity: 0;
}

/* Spinner-Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Lade-Statustext unter dem Spinner */
.loading-status-text {
    margin-top: 24px;
    color: var(--primary-color, #4a90d9);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.3px;
    text-align: center;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    min-height: 20px;
}

.buttonStyling {
	 padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	cursor: Pointer;
	transition: 1s;
	display: flex;
    align-items: center;
    justify-content: center;
	border: 2px solid var(--secondary-color);
}


/* ProjectSettings Overlay und Container — Dark Glass Morphism (matches widget design) */
.projectSettingsOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
}

.projectSettingsOverlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.projectSettingsPopupContainer {
    position: fixed;
    top: 70px;
    right: 20px;
    width: 0;
    height: 0;
    background: linear-gradient(165deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.02) 70%, rgba(255,255,255,0.05) 100%);
    background-color: #111118;
    backdrop-filter: blur(50px) saturate(200%);
    -webkit-backdrop-filter: blur(50px) saturate(200%);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.1);
    z-index: 99999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.projectSettingsPopupContainer.active {
    width: 90vw;
    height: 90vh;
    top: 5vh;
    right: 5vw;
    padding: 20px;
    opacity: 1;
    pointer-events: all;
}

/* Close Button */
.projectSettingsCloseBtn, .closeButton {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 18px;
    cursor: pointer;
    color: rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
    line-height: 1;
}

.projectSettingsCloseBtn:hover, .closeButton:hover {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
}

/* Tab Container und Navigation */
.projectSettingsTabContainer {
    display: flex;
    height: 100%;
}

.projectSettingsTabContainer h2, .projectSettingsTabContainer h3, .projectSettingsTabContainer h4 {
    color: rgba(255,255,255,0.95);
}

.projectSettingsTabNav {
    width: 200px;
    padding: 16px 12px;
    border-right: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    border-radius: 20px 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.projectSettingsTabBtn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
    border-bottom: none;
    letter-spacing: 0.02em;
}

.projectSettingsTabBtn:hover {
    background: rgba(48,209,88,0.1);
    color: #30d158;
    border-bottom-color: transparent;
}

.projectSettingsTabBtn.active {
    background: rgba(48,209,88,0.15);
    color: #30d158;
    font-weight: 600;
    box-shadow: none;
    border-bottom-color: transparent;
}

/* Tab Content Area */
.projectSettingsTabContent {
    flex: 1;
    padding: 30px 40px;
    overflow-y: auto;
    border-radius: 0 20px 20px 0;
    position: relative;
}

/* Custom scrollbar for dark theme */
.projectSettingsTabContent::-webkit-scrollbar {
    width: 6px;
}
.projectSettingsTabContent::-webkit-scrollbar-track {
    background: transparent;
}
.projectSettingsTabContent::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.12));
    border-radius: 3px;
}

.projectSettingsTabPane {
    opacity: 0;
    transform: translateX(20px);
    position: absolute;
    width: calc(100% - 80px);
    transition: all 0.3s ease-in-out;
    top: 0px;
    display: none;
}

.projectSettingsTabPane.active {
    opacity: 1;
    transform: translateX(0);
    position: relative;
    display: block;
}

.projectSettingsTabPane h2 {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}




















/* Form Container und Sections */
.projectSettingsFormContainer {
    max-width: 100%;
    margin: 0 auto;
}

.projectSettingsFormSection {
    position: relative;
    margin-bottom: 40px;
}

/* Typography */
h2 {
    font-size: 1.8em;
    margin: 0 0 20px 0;
    color: #333;
    font-weight: 600;
}

h3 {
    font-size: 1.3em!important;
    color: #4CAF50!important;
    font-weight: 500!important;
    padding-bottom: 5px!important;
}

/* Form Elements */
.projectSettingsInput,
.projectSettingsSelect {
    width: 100%;
    height: 48px;
    padding: 12px 16px!important;
    margin-bottom: 25px!important;
    border: none!important;
    border-bottom: 2px solid #ccc!important;
    background: transparent!important;
    box-sizing: border-box;
    font-size: 14px;
    transition: border-color 0.3s ease;
    padding-bottom: 0px !important;
}

.projectSettingsInput:focus,
.projectSettingsSelect:focus {
    border-color: #4CAF50;
    outline: none;
}

.projectSettingsSelect {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23555" stroke-width="2" width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg>');
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.projectSettingsSelectSmall {
    width: 200px !important;
}

/* Upload Elements */
.projectSettingsUpload {
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    margin-bottom: 25px;
    border: 2px dashed var(--border-color);
    border-radius: 6px;
    background: #fafafa;
    cursor: pointer;
    font-size: 14px;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.projectSettingsUpload:hover {
    border-color: #4CAF50;
    background: #f0f5f0;
}

.projectSettingsUploadContainer {
    flex: 1;
    margin-bottom: 20px;
}

.projectSettingsUploadContainer label {
    display: block;
    margin-bottom: 8px;
    color: #666;
    font-size: 14px;
}

.projectSettingsUploadPreview {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.projectSettingsUploadPreview img {
    max-width: 120px;
    max-height: 120px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.projectSettingsUploadPreview span {
    font-size: 14px;
    color: #666;
    padding: 5px 10px;
    background: #f5f5f5;
    border-radius: 4px;
}

/* Layout Elements */
.projectSettingsFormGrid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.projectSettingsFormColumn {
    flex: 1;
    min-width: 280px;
}

.projectSettingsFormRow {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.projectSettingsFormGroup {
    flex: 1;
}

.projectSettingsFormGroup label {
    display: block;
    margin-bottom: 8px;
    color: #666;
    font-size: 14px;
}

.projectSettingsFullWidth {
    width: 100%;
    margin-top: 25px;
}

.projectSettingsSuggestions {
    position: absolute;
    background: white;
    width: 100%;
    max-height: 200px;
    overflow-y: scroll !important;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 9999;
}

.projectSettingsSuggestions li {
    background: white;
    padding: 10px 15px;
    margin: 0;
    list-style: none !important;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.projectSettingsSuggestions li:hover {
    background-color: #f5f5f5;
}

.projectSettingsSuggestions li:last-child {
    border-bottom: none;
}

/* Selbst wenn ein anderes Styling die Liste beeinflusst,
   this will override it */
.projectSettingsSuggestions[id^="projectSettingsSuggestions"] li {
    list-style: none !important;
    display: block !important;
    width: 100% !important;
}

/* Hidden Elements */
input[type="hidden"] {
    display: none;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .projectSettingsFormRow {
        gap: 15px;
    }

    .projectSettingsTabNav {
        width: 180px;
    }
}

@media (max-width: 768px) {
    .projectSettingsTabContainer {
        flex-direction: column;
    }

    .projectSettingsTabNav {
        width: 100%;
        padding: 10px;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
    }

    .projectSettingsTabBtn {
        padding: 10px 15px;
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .projectSettingsTabBtn.active {
        border-left: none;
        border-bottom-color: #4CAF50;
    }

    .projectSettingsFormRow {
        flex-direction: column;
        gap: 0;
    }

    .projectSettingsSelectSmall {
        width: 100% !important;
    }

    .projectSettingsPopupContainer.active {
        width: 95vw;
        height: 95vh;
        top: 2.5vh;
        right: 2.5vw;
        padding: 15px;
    }

    .projectSettingsTabContent {
        padding: 20px 15px;
    }

    .projectSettingsSuggestions {
        width: calc(100% - 30px);
    }
}








/* Bildvorschau */
.current-logo img {
    display: block;
    margin: 0 auto 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Platzhaltertext */
::placeholder {
    color: #aaa;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 600px) {
    #organizationSettingsForm {
        padding: 15px;
    }

    #saveOrganizationSettings {
        font-size: 14px;
        padding: 10px;
    }
}

#companyBoxHeaderLogo {
    background-image: var(--logo-url);
    height: 50px;
    background-repeat: no-repeat;
    background-size: contain;
}

#companyBoxHeader{
	margin-bottom: 30px;
}


#newContactForm {
    overflow: hidden;
    transition: 0.5s ease-out;
    width: 100%;
    float: right;
    background: var(--primary-color);
    border-radius: 10px;
    color: var(--secondary-color);
    margin-bottom: 10px;
    /* max-height: 0px; */
    position: relative;
    font-size: 12px;
	height: 0px;
	transition: 1s;
	opacity: 0;
}

#newContactForm.active{
	padding: 20px 0px;
    margin: 20px 0px;
	height: auto;
	opacity: 1;
}

#newContactButton {
        fill: var(--secondary-color);
    float: right;
    background-color: var(--primary-color);
    width: 2rem;
    height: 2rem;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
	border-radius: 50%;
	position: relative;
	border: none;
    margin-top: -5px;
}

#newContactButton.iconToolTip::after, #resendInvitation.iconToolTip::after{
	background-color: var(--secondary-color);
	color: var(--primary-color);
	transform: translateX(-50%);
    left: -60px;
	position: absolute;
    text-align: center;
    top: -30px;
}

.spinnerResendEmail{
    width: 20px!important;
    height: 20px!important;
}


.organizationViewFullHeight {
    min-height: 100vh;
    min-width: 200px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 150px;
}

.rightHeaderContainer {
    margin-bottom: 20px;
    width: 90%;
    margin: 50px auto;
    height: 50px;
}

#testPeriodContainer {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

button#newAnalysisButton {
    float: right;
}




#organizationContainerOwned.active{
    opacity: 0;
    height: 0px;
	display: none;
}

#organizationContainerNotOwned.active{
    opacity: 0;
    height: 0px;
	display: none;
}

#showOwnCompaniesButton.active{
	transform: rotate(90deg);
}

#showNotOwnCompaniesButton.active{
	transform: rotate(90deg);
}





.showCompaniesButton svg {
    width: 20px;
    height: 20px;
}

.organizatinOwnedDivider{
	width: 100%;
}

.showCompaniesButton {
    float: right;
}

.organizationTeamHeader {
    float: left;
}




.analysis-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: -9;
	display: flex;
	opacity: 0;
	pointer-events: none;
	transition: 1s;
}

.analysis-overlay.active{
	z-index: 1000;
	opacity: 1;
	pointer-events: all;
}

.analysis-popup {
    background: var(--primary-color);
    width: 80vw;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 1001;
	border-radius: 20px;
}

.analysis-popup .analysis-close-btn {
    position: absolute;
    top: -30px;
    right: -30px;
    background: transparent;
    color: var(--secondary-color);
    border: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 600;
}

.analysis-popup .analysis-close-btn:hover {
    background: var(--primary-color);
}








.organizationViewContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    overflow:auto;
    position: relative;
}


div#paginationOrganization {
    position: absolute;
    right: 0;
    top: 30px;
}







input#searchField {
    width: 40%;
    border-radius: 20px;
    line-height: 40px;
    padding-left: 20px;
    min-width: 200px;
}

p#noResultsMessage {
    width: 100%;
    margin-top: 20px;
}



/*filter and sort*/

div#sortContainerHeader {
    display: flex;
    gap: 5px;
    background: none;
    box-shadow: none;
}


.sortContainerItem {
    display: flex; /* Nebeneinander anordnen */
    align-items: center; /* Vertikale Zentrierung */
    gap: 5px; /* Abstand zwischen Name und Pfeilen */
}

.sortContainerHeader.grid .sortContainerItem {
    min-width: 10px!important;
    margin: 0px!important;
}

.sortContainerHeader.grid {
    justify-content: space-between;
    padding: 10px 30px;
}

.sortContainerHeader.grid #indexSortItemContainer {
    display: none;
}
.sortContainerHeader.grid #buttonSortItemContainer {
    display: none;
}

svg#filterIcon {
    width: 15px;
    pointer-events: none;
}

.sort-title {
    font-size: 16px; /* Title font size */
    font-weight: bold; /* Fettgedruckter Titel */
}

div#iconsSortItemContainer {
    margin-left: auto;
    max-width: none;
}

div#buttonSortItemContainer {
    width: 130px!important;
    margin-right: 0px;
}

#dateSortItemContainer {
    margin-left: 10px;
    min-width: 70px !important;
}



.arrow {
    font-size: 10px; /* Arrow size */
    color: gray; /* Standardfarbe der Pfeile */
    cursor: pointer; /* Change cursor */
    user-select: none; /* Verhindert Textauswahl */
}

.arrow.active {
    color: var(--secondary-color);
}

/* Optional: Hover-Effekt */
.arrow:hover {
    color: darkgray; /* Hover-Farbe */
    transform: scale(1.1); /* Scale up on hover */
}

.dateSort-popup, .followUpSort-popup {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff; /* Heller Hintergrund */
    padding: 30px 20px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15); /* Stronger shadow for modern look */
    border-radius: 8px; /* Abgerundete Kanten */
    z-index: 1000;
    min-width: 300px;
    max-width: 500px;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

.dateSort-popup .close-popup {
    position: absolute;
    right: 15px;
    top: 15px;
    background: none;
    border: none;
    font-size: 30px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: color 0.3s ease;
    line-height: 15px;
}

.dateSort-popup .close-popup:hover {
    color: #f44336; /* Rot beim Hover */
}

.dateSort-popup label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #555;
}

.dateSort-popup input[type="date"], .followUpSort-popup input[type="date"] {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    transition: border-color 0.3s ease;
}

.dateSort-popup input[type="date"]:focus, .followUpSort-popup input[type="date"]:focus {
    border-color: #007bff; /* Fokusfarbe */
    outline: none;
}

.dateSort-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.dateSort-filters button {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.dateSort-filters button:hover {
    background-color: #0056b3; /* Dunkleres Blau beim Hover */
}

.dateSort-popup .reset-filter {
    margin-top: 15px;
    text-align: center;
}

.dateSort-popup .reset-filter button, .followUpSort-popup .reset-filter button {
    background-color: #f44336; /* Red styling for reset */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.dateSort-popup .reset-filter button:hover, .followUpSort-popup .reset-filter button:hover {
    background-color: #d32f2f; /* Dunkleres Rot beim Hover */
}


.iconSort-popup {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid var(--border-color);
    padding: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 1000;
    min-width: 300px;
    max-width: 400px;
}

.iconSort-popup .close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 30px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
}

.iconSort-popup .close-popup:hover {
    color: #f44336;
}

.sortCheckbox-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sortCheckbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sortCheckbox-input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.sortCheckbox label {
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.ownerSort-popup {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid var(--border-color);
    padding: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 1000;
    min-width: 300px;
    max-width: 400px;
}

.ownerSort-popup .close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
}

.ownerSort-popup .close-popup:hover {
    color: #f44336;
}

.sortCheckbox-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}







/* Toggle area styling */
.viewToggle {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-left: auto;
}

.viewToggle button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.viewToggle button:hover {
    background-color: #0056b3;
}

#iconList, #iconGrid {
    width: 20px;
    fill: var(--primary-color);
}

#iconList.activeIcon, #iconGrid.activeIcon {
    fill: var(--secondary-color);
}





/* General organization container (view-independent) */
.organizationsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Abstand zwischen den Organisationen */
    width: 100%;
}

/* Listenansicht: Elemente nebeneinander */
.organizationsContainer.list .singleorganizationContainer {
    display: flex; /* Inhalte nebeneinander */
    flex-direction: row; /* Horizontal anordnen */
    align-items: center; /* Vertikale Zentrierung */
    gap: 5px; /* Abstand zwischen Feldern */
    color: var(--primary-color);
}

/* Kachelansicht: Elemente untereinander */
.organizationsContainer.grid .singleorganizationContainer {
    display: flex; /* Inhalte untereinander */
    flex-direction: column; /* Vertikale Anordnung */
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 200px;
    max-width: 600px;
    height: auto;
    width: unset;
    position: relative;
    padding-bottom: 40px;
}

.organizationStatusIconContainer {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.organizationStatusIcon {
    width: 20px;
    fill:#b1b1b1;
    position: relative;
}
.iconNumberCount {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 10px;
    line-height: 10px;
}

.organizationStatusIcon svg {
    vertical-align: middle;
}

.organization-field.organizationDate {
    margin-left: 10px;
    min-width: 70px !important;
}

.organizationsContainer.grid .organization-field{
    margin: auto;
    text-align: center;
}

.organizationsContainer.grid .projects-popup-toggle{
    margin: auto;
    margin-top: 20px;
}

.organization-field a {
    color: var(--primary-color-70);
}

.organizationsContainer.grid .organization-field.organizationDate {
    position: absolute;
    right: 10px;
}

.organizationsContainer.grid .organization-field.organizationIndex {
    margin: 0px !important;
}

.organizationsContainer.grid .organization-field.organizationName {
    font-size: 1.2rem;
    margin-top: 30px;
}

div#organizationIconContainer {
    min-width: 260px !important;
    overflow: inherit;
}


    /* Organization fields (shared by both views) */
.organization-field {
    flex-shrink: 0;
    margin-right: 10px;
    text-align: left;
    white-space: nowrap;
    font-size: 0.9rem;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.organizationFollowUp.followUp {
    color: red;
}

.chat-date-input.followUp{
    color: red;
}

/* Projects button (same in both views) */
.toggleProjectsButton {
    padding: 8px 12px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: flex-start; /* Links ausgerichtet */
}


/* Project container (hidden by default) */
.singleorganizationProjects {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background-color: #e9ecef;
    border-radius: 5px;
}

/* Popup-Hintergrund */
.projects-popup-container {
   position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.projects-popup-inner-content {
    min-width: 400px;
    max-height: calc(100% - 80px);
    height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Popup-Inhalt */
.projects-popup-content {
    position: relative;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    min-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    width: 90vw;
}

.projects-popup-content.followUp{
    border: 5px solid red;
}

div#projectsPopupHeader {
    height: 100%;
    flex: 1;
    overflow: auto;
    display: flex;
    gap: 40px;
    padding: 40px;
    padding-bottom: 20px;
}

div#projectsPopupHeaderGradient {
    width: 100%;
    height: 20px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    position: relative;
    z-index: 1;
}

div#projectsPopupContainer {
    position: relative;
    z-index: 0;
    padding-top: 20px;
    margin-top: -20px;
    min-width: 200px;
    height: auto;
    flex: 0 1 auto;
    max-height: 30vh;
    min-height: 200px;
    overflow: auto;
}

/* Close button */
.projects-popup-close {
    position: absolute;
    top: 5px;
    right: 5px;
    background: transparent;
    border: none;
    font-size: 30px;
    cursor: pointer;
    font-weight: bold;
    color: #333;
}

/* Dynamischer Projekte-Container */
#projectsPopupContainerInner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: calc(100% - 40px);
    margin: auto;
    margin-bottom: 40px;
}

/* oranization crm container */

.chat-display {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    overflow-y: auto;
}

.chat-message {
    margin: 20px 0;
    padding: 10px;
    border-radius: 10px;
    background-color: #444444; /* Nachrichten-Hintergrund */
    position: relative;
}

.chat-message.sent {
    background-color: #dedcdc;
    margin-left: auto;
    width: 90%;
}

#message-0 {
    background-color: #4e4d4d;
    color: var(--third-color);
}

div#message-text-0 {
    -webkit-line-clamp: none;
    margin: 5px;
}

.chat-message-meta {
    position: absolute;
    font-size: 12px;
    width: 100%;
}

span.chat-message-name {
    position: absolute;
    left: -40px;
    top: -10px;
    font-weight: 600;
    background-color: darkgray;
    color: white;
    border-radius: 50%;
    padding: 5px;
    cursor: default;
    width: 25px;
    height: 25px;
    line-height: 16px;
    text-align: center;
}

span.chat-message-datetime {
    position: absolute;
    right: 10px;
    top: -33px;
    font-weight: 400;
}

.chat-input.placeholder {
    color: #aaa; /* Placeholder-Farbe */
}

button.toggle-more {
    background: transparent;
    border: none;
    font-weight: 300;
}

.message-type-icons-chat {
    display: flex;
    gap: 5px;
    position: absolute;
    left: 0px;
    top: -9px;
}

span.chat-message-icon {
    width: 15px;
    height: 15px;
    fill: #c4c0c0;
}

.chat-message-icon.active {
    fill: black;
}

.chat-message-container.blurred {
    filter: blur(2px);
    position: relative;
}

.delete-chat-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.delete-chat-icon svg {
    width: 24px;
    height: 24px;
}






.chat-message-text {
    margin: 5px;
    /*display: -webkit-box; /* Flex layout for multi-line truncation */
    display: flex;
    -webkit-box-orient: vertical; /* Textfluss vertikal anordnen */
    overflow: hidden; /* Text, der nicht passt, ausblenden */
    text-overflow: ellipsis; /* Drei Punkte am Ende anzeigen */
    -webkit-line-clamp: 2; /* Maximale Anzahl der sichtbaren Zeilen */
    cursor: pointer; /* Zeigt, dass der Text interaktiv ist */
    transition: all 0.3s ease; /* Smooth transitions */
    padding: 5px;
    padding-top: 10px;
}

.chat-message-text p {
    padding: 1px;
}

.chat-message-text.expanded {
    -webkit-line-clamp: unset; /* Hebt die Begrenzung der Zeilen auf */
    display: block; /* Allows display of any number of lines */
    overflow: visible;
}

.edit-message-icon {
    width: 40px;
    height: 40px;
    fill: var(--third-color);
}

.save-icon {
    width: 20px;
    height: 20px;
}

.delete-icon {
    width: 40px;
    height: 40px;
    fill: #f95c5c;
}

.more-icon {
    width: 20px;
    height: 20px;
}

.action-icons {
    opacity: 0;
    transition: 0.5s;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #0000009e;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    gap: 25%;
    align-items: center;
    pointer-events: none;
}

.action-icons.active {
    opacity: 1;
    pointer-events: all;
}

.show-more-option-icons {
    position: absolute;
    right: 10px;
    top: 5px;
}


/* Popup-Container */
.chat-popup-container {
    width: calc(60% - 30px);
    margin-left: auto;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding-right: 10px;
}

div#chatInputContainer {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 10px;
    margin-bottom: 10px;
}

/* Oberste Zeile mit dem Eingabefeld */
.input-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.chat-input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-size: 14px;
    padding: 10px;
    resize: none; /* Prevent manual resizing */
    max-height: 200px; /* Maximum height */
    overflow-y: auto; /* Scrollbar on overflow */
    border-radius: 10px;
}

/* Placeholder-Stil */
.chat-input::placeholder {
    color: #aaaaaa;
}

/* Untere Zeile mit den Icons und dem Senden-Button */
.icon-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-type-icons {
    display: flex;
    gap: 10px;
}

.message-type-icons .icon, .icon-chat-datepicker {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    fill: lightgrey;
}

.message-type-icons .icon svg, .icon-chat-datepicker svg {
    width: 25px;
    height: 25px;
}

.date-picker-container {
    display: flex;
    gap: 10px;
    margin: auto;
}

.date-picker-container input#chat-date-input {
    border: none;
    font-size: 14px;
    text-align: center;
    /* Safari: force consistent dimensions to prevent layout shift */
    -webkit-appearance: none;
    appearance: none;
    min-height: 36px;
    line-height: normal;
    box-sizing: border-box;
}

/* Safari renders the datetime-edit pseudo with a different baseline; normalize it */
.date-picker-container input#chat-date-input::-webkit-datetime-edit {
    padding: 0;
    line-height: normal;
}

.date-picker-container input#chat-date-input::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    display: none; /* Versteckt das Standardsymbol */
}


.message-type-icons .icon.active {
    fill: var(--primary-color);
}

.message-type-icons .icon:hover {
    fill: var(--primary-color);
}

#aiSvgIcon {
    width: 30px;
    height: 30px;
    margin-left: auto;
    margin-top: 15px;
    margin-right: 10px;
    fill: lightgray;
}

#aiSvgIcon.active{
    fill: var(--primary-color);
}

/* Senden-Button */
.send-message-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    fill: white;
    position: relative;
}

.send-message-button svg{
    width: 40px;
    height: 40px;
}

.send-message-button:hover {
    background-color: var(--secondary-color);
    transform: scale(1.1);
}

/* Spinner mit `::after` erzeugen */
.send-message-button::after {
    content: '';
    position: absolute;
    top: 50%; /* Zentriere den Spinner vertikal */
    left: 50%; /* Zentriere den Spinner horizontal */
    width: 24px; /* Spinner-Breite */
    height: 24px; /* Spinner height */
    border: 3px solid rgba(255, 255, 255, 0.5); /* Halbtransparenter Rahmen */
    border-top-color: #fff; /* Spinner front color */
    border-radius: 50%; /* Macht den Spinner rund */
    transform: translate(-50%, -50%) scale(0); /* Spinner verstecken */
    transition: transform 0.3s ease; /* Animation beim Erscheinen */
    z-index: 1; /* Overlays button content */
    animation: none; /* No animation by default */
}

/* Aktiviert den Spinner */
.send-message-button.loading::after {
    transform: translate(-50%, -50%) scale(1); /* Spinner anzeigen */
    animation: spinSendButton 1s linear infinite; /* Rotation starten */
}

/* Spinner-Animation */
@keyframes spinSendButton {
    from {
        transform: translate(-50%, -50%) rotate(0deg); /* Initialer Zustand */
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg); /* Endzustand */
    }
}

/* Button-Inhalt bei aktiviertem Spinner ausblenden */
.send-message-button.loading {
    fill: transparent; /* Text unsichtbar machen */
}



/* project popup left side informations*/
.projects-popup-details {
    max-width: 40%;
    float: left;
    position: relative;
    overflow-y: auto;
    flex: 1;
}

div#projectPopupDetailsMap {
    height: 25vh;
    width: 98%;
}

input#projects-popup-organization-name {
    font-size: 20px;
    font-weight: 600;
}

input#projects-popup-organization-address {
    font-size: 14px;
    margin-top: 0px;
}

.projects-popup-details h2 {
    font-size: 16px;
}

div#projectPopupDetailsContact {
    margin-top: 30px;
    overflow-y: auto;
    position: relative;
}



/* Felder */
.projects-popup-field-group,
.projects-popup-field-group-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.projects-popup-field-group label {
    min-width: 80px;
    font-weight: bold;
}

.projects-popup-input {
    background-color: #ffffff;
    border: none!important;
    border-radius: 5px;
    color: #333;
    width: 100%;
    max-width: 300px;
    cursor: pointer;
}

.projects-popup-input:focus,
.projects-popup-input-active {
    outline: 2px solid #4caf50;
    cursor: text;
    background-color: #ffffff;
}


/* raing*/

div#organizationRatingContainer {
    display: flex;
    justify-content: center;
    margin-left: auto;
}

.ratingIcon {
    width: 20px;
    fill: lightgray;
}

.ratingIcon.active{
    fill: var(--primary-color);
}


/* Allgemeiner Container */
.projects-popup-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(100% - 50px);
    padding: 3px 0px;
    position: relative;
    height: 40px;
}

.projects-popup-contact.blurred{
    filter: blur(5px);
    pointer-events: none;
}

.projects-popup-contact.blurredSave{
    filter: blur(5px);
    pointer-events: none;
}

/* Zeilen */
.projects-popup-contact-row {
    display: flex;
    gap: 20px; /* Abstand zwischen den Feldern */
    justify-content: space-between;
    align-items: center;
    height: 40px;
}

/* Felder */
.projects-popup-contact-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px; /* Abstand zwischen Label und Input */
    position: relative;
}

.projects-popup-input:focus {
    border-color: #4caf50;
    outline: none;
    background-color: #ffffff;
}

/* Phone and email buttons */
.projects-popup-contact-button {
    padding: 0px;
    background-color: var(--primary-color);
    fill: var(--third-color);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 25px;
    transition: background-color 0.3s ease;
    margin: auto;
    height: 25px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

button.projects-popup-contact-button svg {
    fill: var(--third-color);
    height: 15px;
    width: 15px;
}

.projects-popup-contact-button:hover {
    background-color: #45a049;
}

/* Popup field (input overlay) */
.projects-popup-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: auto;
    width: 300px;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    transform: translate(-50%, -50%);
}
div#phone-popup {
    width: 200px;
}

.projects-popup-contact-action {
    position: absolute;
    top: 0;
    right: -40px;
    display: flex;
    gap: 5px;
    height: 40px;
}

/* Input-Feld im Popup */
.projects-popup-overlay input {
    flex: 1;
    padding: 5px 10px !important;
    font-size: 14px;
    border: none;
    border-bottom: 2px solid #ddd;
    outline: none;
    transition: border-color 0.3s ease;
    height: 40px;
    max-width: calc(100% - 40px);
    border-radius: 20px;
}

.projects-popup-overlay input:focus {
    border-color: #4caf50;
}

/* Icon-Button im Popup */
.projects-popup-icon-button {
    background-color: var(--primary-color);
    fill: var(--third-color);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    position: absolute;
    right: 0;
    top: 0;
}

.projects-popup-icon-button:hover {
    background-color: #45a049;
}

.projects-popup-address-container {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.projects-popup-input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 14px;
}

.address-suggestions {
    position: absolute;
    top: 100%; /* Direkt unter dem Input-Feld */
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 200px; /* Max dropdown height */
    overflow-y: auto; /* Scrollbar for long lists */
    z-index: 1000;
    display: none; /* Hidden by default */
    list-style: none;
    margin: 0;
    padding: 0;
}

.address-suggestions li {
    padding: 10px;
    cursor: pointer;
}

.address-suggestions li:hover {
    background-color: #f0f0f0;
}

ul#address-suggestions {
    list-style: none;
    width: 90%;
    background: var(--third-color);
}










/*prject List*/

div#singleProjectsContainer {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Container for each organization */
.singleorganizationContainer {
    display: flex; /* Flexbox aktivieren */
    flex-direction: row; /* Inhalte nebeneinander */
    align-items: center; /* Vertikale Zentrierung */
    gap: 15px; /* Abstand zwischen den Spalten */
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    min-width: 100%;
    flex: 0 0 auto;
}

.organizationB2B {
    border: 1px solid red;
}
.organizationB2BWaiting {
    border: 1px solid var(--primary-color);
}


.projects-popup-toggle {
    padding: 5px 10px;
    font-size: 14px;
    width: 130px;
}



.project-row {
    display: flex;
    flex-direction: row; /* Zeilenlayout */
    align-items: center; /* Vertikale Zentrierung */
    justify-content: space-between; /* Abstand zwischen den Feldern */
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.project-field {
    flex: 1; /* Equal width for all fields */
    padding: 0 10px;
    text-align: left;
    white-space: nowrap; /* Kein Zeilenumbruch */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ellipsis on overflow */
}

.project-button {
    flex-shrink: 0; /* Button stays fixed */
    padding: 8px 12px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
}

.project-button:hover {
    background-color: white;
    color: #28a745;
}

#project-index {
    max-width: 40px;
}

#project-size, #project-timeStamp {
    max-width: 100px;
}

.organizationName {
    font-weight: 600;
}




.singleorganizationProjects {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
}



.projectLocked{
	opacity: 0.5;
}

.creationDateOverview {
    position: absolute;
    bottom: 0px;
    right: 10px;
    font-size: 10px;
}

.creationDateProjectOverview {
    position: absolute;
    bottom: 20px;
    font-size: 0.7rem;
}

.singleorganizationContainer h2 {
    text-align: left;
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary-color);
    padding: 0px;
}

.singleorganizationContainer p {
    font-size: 1rem;
    font-weight: 500;
    padding: 0px;
    text-align: left;
}



.singleorganizationProject {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 6rem;
    min-width: 6rem;
    max-width: 6rem;
    border-radius: 50%;
    height: 6rem;
	width: 6rem;
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.3), inset -20px -20px 40px rgba(255, 255, 255, 0.2);
	background: var(--third-color);
    transition: box-shadow 0.3s ease, transform 0.5s ease;
	margin-left: auto;
    margin-right: auto;
	position: relative;
}



.circular-chart {
    position: absolute;
    margin: 10px auto;
    max-width: 100%;
    max-height: 250px;
}

.circular-chart.deleted {
	border: 2px solid red;
    border-radius: 50%;
}
.circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 3.8;
}

.circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke: var(--secondary-color); /* Farbe der Border */
    transition: stroke-dasharray 0.3s ease;
}

.percentage {
    fill: #666;
    font-size: 0.5em;
    text-anchor: middle;
    alignment-baseline: middle;
}



.singleorganizationProject:hover {
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4), 
                inset -2px -2px 4px rgba(255, 255, 255, 0.2);
    transform: scale(0.9);
	cursor: pointer;
}

.singleorganizationProject:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.singleorganizationProject.active {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    z-index: 100;
}

.cirlceContainer {
    font-weight: 600;
    font-size: 0.8rem;
}



/* Analyse*/

.newArea {
    position: absolute;
    z-index: 999;
    bottom: 30px;
    animation: pulse 1.5s infinite;
}

.aiIcon {
    width: 100%;
    height: 100%;
    transition: all 1s ease-in-out;
    transform: scale(var(--scale, 1));
    filter: brightness(var(--brightness, 1));
    opacity: 0.7;
}

#energyExpertsCopyright {
    position: absolute;
    z-index: 999999;
    bottom: 0;
    font-weight: 600;
    font-size: 0.5rem;
    height: 1rem;
}

#energyExpertsCopyrightLogo {
    background-image: url(/wp-content/plugins/energyExperts/assets/media/energyExpertsLogo.png);
    width: 1rem;
    height: 0.5rem;
    float: right;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 0.5rem ;
}

.mapboxgl-ctrl-attrib-inner {
    font-size: 0.4rem;
    height: 1rem;
}

a.mapboxgl-ctrl-logo{
    height: 1rem;
    width: 4rem;
}

.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl {
    float: left;
    margin: 0 0 5px 5px;
}




.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
	position: fixed;
    z-index: 1;
}

.popup-content-inner {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    overflow: auto;
    left: 0;
}
.popup-content-inner.expanded {
	/*padding: 40px;*/
}

.popup-content {
    background: var(--primary-color);
    transition: transform 0.5s ease, width 0.5s ease, height 0.5s ease, border-radius 0.5s ease, padding 0.5s ease;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
	color: var(--secondary-color);
    padding: 40px;
}

.popup-overlay.resizeMap {
    visibility: visible;
    opacity: 0;
}
.popup-overlay.resizeMap .popup-content {
    transform: scale(1);
}

.popup-overlay.active .popup-content {
    transform: scale(1);
    z-index: 99;
}


.previewKwhKwp {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -10px;
    color: black;
    font-weight: 600;
}

.previewAlignment {
    float: left;
    padding-left: 10px;
	width: 33%;
}
.previewCity {
    text-align: center;
    padding-right: 10px;
    float: right;
    width: 33%;
}

.previewDate {
    text-align: right;
    padding-right: 10px;
	float: right;
	width: 33%;
}

.previewSize {
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    margin-top: 10px;
}
.previewTitle {
    width: 100%;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
	    padding-top: 50px;
}

.previewProjectButtonContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.openProjectButton {
    text-align: center;
    border: 2px solid var(--secondary-color);
    display: inline-block;
    padding: 5px 10px;
    min-width: 100px;
    max-width: 80%;
    margin-top: 2vw;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border-radius: 10px;
	text-transform: uppercase;
    font-weight: 800;
    font-size: 16px;
}



#mapContainerEntry {
	z-index: 0;
    position: relative;
    width: 100%;
	height: 50%;
    overflow: hidden;
}
#grid-connection-overview-container.active {
    display: none;
}
#mapContainerEntry.expanded {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#mapContainerEntry.expanded::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: radial-gradient(circle, transparent 10%, rgba(255, 255, 255, 1) 90%);*/
    pointer-events: none; /* Stellen Sie sicher, dass das Overlay keine Mausereignisse blockiert */
    transition: 2s;
}

#mapContainerEntry.expanded.active::after {
    opacity: 0;
}

#mapContainerEntry.expanded.black-overlay::after {
    background: radial-gradient(circle, transparent 40%, rgb(16 36 72) 70%);
}

#mapContainerEntry.expanded.black-overlay.active::after {
    background: none;
}

#customTablePopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 60vh;
    background-color: var(--third-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    padding: 20px;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

#customTablePopup.hidden {
    display: none;
}

#customTablePopupContent {
    flex: 1;
    overflow: auto;
}

#customTablePopupOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

#customTablePopupOverlay.hidden {
    display: none;
}

#closeTablePopup {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
}

#closeTablePopup svg {
    fill: #000;
    width: 30px;
    height: 30px;
}


#mapEntry {
    width: 100%;
    height: 100%;
    clip-path: ellipse(50% 100% at 50% 100%);
}
#mapEntry.expanded {
    clip-path: none;
    transition: 0.5s ease;
}



#turnTiltContainer{
	opacity: 0;
	z-index: -1;
	transition: 0.5s;
}

#turnTiltContainer.visible{
	opacity: 1;
	z-index: 1;
}


#iconTilt, #iconTurn {
    position: absolute;
    top: 50%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transform: translate(0px, -50%);
}

#iconTilt {
    left: 60px;
}
#iconTilt::after {
    top: 20vh;
}

#iconTurn {
    right: calc(50% - 20vw);
    top: 150px;
}
#iconTurn::after {
    top: -7px;
    left: calc(20vw + 80px);
}

.slider-container-tilt-turn {
    position: relative;
    height: 30px;
}

#iconTilt .slider-container-tilt-turn {
    width: 30px;
    height: 30vh;
}
#iconTurn .slider-container-tilt-turn {
    width: 40vw;
    height: 20px;
}

.slider-background-tilt-turn {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--secondary-color);
    z-index: -1;
    top: 50%;
    transform: translateY(-50%);
	border-radius: 5px;
}

#iconTilt .slider-background-tilt-turn {
    width: 4px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
#iconTurn .slider-background-tilt-turn {
    margin-top: 6px;
}


input#turnSlider {
    width: 100%;
    height: 4px;
    background-color: var(--secondary-color);
}

.slider-container-tilt-turn input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 24px;
            width: 24px;
            background: var(--primary-color);
            cursor: pointer;
            position: relative;
            z-index: 3;
        }

        .slider-container-tilt-turn input[type=range]::-moz-range-thumb {
            height: 24px;
            width: 24px;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            z-index: 3;
        }

       .slider-container-tilt-turn input[type=range]::-ms-thumb {
            height: 24px;
            width: 24px;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            z-index: 3;
        }



input#tiltSlider {
    transform: rotate(90deg);
    width: 30vh;
    position: absolute;
    left: -15vh;
    top: calc(30vh - 140px);
    height: 4px;
    background-color: var(--secondary-color);
}

.mapControls {
    position: absolute;
    opacity: 0;
    transform: translate(0, -50%);
    top: 50%;
    right: 10px;
    z-index: -5;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: flex;
    fill: var(--header-color-light);
    stroke: var(--header-color-light);
    padding: 20px 10px;
    background: rgb(0 9 18 / 60%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 10px;
}


/* Legend Layer Contaier */

#layerLegendContainer {
    display: none; /* Initial versteckt */
    position: fixed;
    bottom: 20px;
    right: 90px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    z-index: 1000;
    max-width: 200px;
    min-width: 200px;
}

.legend-section {
    display: none; /* Initial versteckt */
}

.legend-section:not(:last-child) {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.legend-header {
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
    font-size: 14px;
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.legend-text {
    color: #4b5563;
    line-height: 1.4;
    font-size: 12px;
}

/* Responsive Anpassung */
@media (max-width: 768px) {
    #layerLegendContainer {
        bottom: 15px;
        right: 15px;
        padding: 14px;
        max-width: 220px;
        min-width: 180px;
    }

    .legend-text {
        font-size: 11px;
    }
}


#mapControlsTopRight.visible {
	opacity: 1;
	z-index: 1;
	
}

.mapBlueprintContainer{
    position: relative;
}

.blueprintMapPopup {
    position: absolute;
    right: 60px;
    top: -50%;
    z-index: -1;
    background: var(--primary-color);
    padding: 20px 10px;
    border-radius: 10px;
    opacity: 0;
}

.blueprintMapPopup.active{
    opacity: 1;
    z-index: 1;
}

.blueprintMapIcon {
    width: 30px;
    height: 30px;
    fill: var(--secondary-color);
    stroke: var(--secondary-color);
    transition: 0.5s;
}

.blueprintMapIcon:hover {
    transform: scale(1.1);
}

.blueprintMapIcon.active {
    fill: var(--third-color);
    stroke: var(--third-color);
}


#areaDiv {
    position: absolute;
    top: 200px;
    left: 50%;
	transform: translateX(-50%);
    background-color: var(--primary-color);
    padding: 10px 20px;
	opacity: 0;
	z-index: -1;
	font-weight: 700;
    font-size: 25px;
    color: var(--secondary-color);
    border-radius: 5px;
    box-shadow: 0 20px 30px rgb(0 0 0 / 21%);
	pointer-events: none;
}

#areaDiv.active {
    opacity: 1;
	z-index: 0;
}

.distanceDivFixed, .distanceDivVar{
	color: #000000;
	font-weight: 700;
}

.distanceDivFixed {
    background: #ffffff;
    padding: 5px;
    border-radius: 5px;
}

.distanceDivVar {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #333;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: bold;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.closeMeassureIcon {
    cursor: pointer;
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    right: 2px;
    top: -5px;
    line-height: 16px;
    color: #ff4444;
}

.closeMeassureIcon:hover {
    color: #cc0000;
    transform: scale(1.1);
}

/* ============================================================================
   AutoCAD-Style Dimension Tool Styles
   ============================================================================ */

/* Auto-Dimension Button */
.autoDimensionBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.autoDimensionBtn svg {
    width: 100%;
    height: 100%;
}

.autoDimensionBtn:hover {
    opacity: 0.8;
}

/* Dimension Label */
.dimension-label {
    pointer-events: auto;
    cursor: grab;
    user-select: none;
    transform-origin: center center;
    z-index: 100;
}

.dimension-label:active {
    cursor: grabbing;
}

.dimension-label-content {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e74c3c;
    border-radius: 3px;
    padding: 2px 8px;
    padding-right: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    position: relative;
}

.dimension-text {
    margin: 0 4px;
}

/* Delete button (X) */
.dimension-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    border-radius: 2px;
    line-height: 1;
}

.dimension-delete-btn:hover {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

/* Arrow indicators on label */
.dimension-arrow-left,
.dimension-arrow-right {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
}

.dimension-arrow-left {
    border-width: 4px 6px 4px 0;
    border-color: transparent #e74c3c transparent transparent;
}

.dimension-arrow-right {
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #e74c3c;
}

/* Selected dimension state - BLUE */
.dimension-label.selected .dimension-label-content {
    border-color: #2980b9;
    background: rgba(41, 128, 185, 0.1);
    box-shadow: 0 0 0 2px rgba(41, 128, 185, 0.3);
}

/* Hover effect for dimension labels */
.dimension-label:hover .dimension-label-content {
    background: rgba(245, 245, 245, 0.98);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Context menu for dimensions */
.dimension-context-menu {
    position: fixed;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    min-width: 120px;
}

.dimension-context-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dimension-context-menu-item:hover {
    background: #f5f5f5;
}

.dimension-context-menu-item.delete {
    color: #cc0000;
}

.dimension-context-menu-item.delete:hover {
    background: #fff0f0;
}

/* Crosshair cursor when dimension tool is active */
body.dimension-tool-active #mapContainerEntry,
body.dimension-tool-active #mapContainerEntry .mapboxgl-canvas-container,
body.dimension-tool-active #mapContainerEntry .mapboxgl-canvas {
    cursor: crosshair !important;
}

body.dimension-tool-active .dimension-label,
body.dimension-tool-active .dimension-label *,
body.dimension-tool-active .dimension-delete-btn {
    cursor: pointer !important;
}

/* ================================
   Dimension Panel Tiles (Sidebar)
   ================================ */

.dimension-tile {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
}

.dimension-tile:hover {
    border-color: #c0c0c0;
    background: #fafafa;
}

.dimension-tile.dimension-hidden {
    opacity: 0.5;
    background: #f5f5f5;
}

.dimension-tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dimension-tile-distance {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    flex: 1;
}

.dimension-tile-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dimension-tile-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    color: #666;
    transition: all 0.2s ease;
}

.dimension-tile-actions button:hover {
    background: #f0f0f0;
    color: #333;
}

.dimension-tile-actions button svg {
    fill: currentColor;
}

.dimension-visibility-toggle.hidden svg {
    opacity: 0.5;
}

/* Rotate toggle button - shows if dimension will be deleted on rotation */
.dimension-rotate-toggle {
    opacity: 0.4;
}

.dimension-rotate-toggle.active {
    opacity: 1;
    color: #e67e22 !important;
    background: rgba(230, 126, 34, 0.1) !important;
}

.dimension-rotate-toggle:hover {
    color: #e67e22 !important;
    background: rgba(230, 126, 34, 0.1) !important;
}

.dimension-delete-panel-btn:hover {
    color: #e74c3c !important;
    background: rgba(231, 76, 60, 0.1) !important;
}

.dimension-locate-btn:hover {
    color: #2980b9 !important;
    background: rgba(41, 128, 185, 0.1) !important;
}

/* Toggle all visibility button in header - round style like obstacles */
.dimension-toggle-all-visibility {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: linear-gradient(135deg, var(--polygoneDraw-primary, #667eea), var(--polygoneDraw-primary-dark, #5a67d8));
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.dimension-toggle-all-visibility:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.dimension-toggle-all-visibility svg {
    fill: #fff;
    width: 14px;
    height: 14px;
}

/* Row Number buttons and tiles - round style like obstacles */
.rownumber-toggle-all-visibility,
.rownumber-add-all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: linear-gradient(135deg, var(--polygoneDraw-primary, #667eea), var(--polygoneDraw-primary-dark, #5a67d8));
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.rownumber-toggle-all-visibility:hover,
.rownumber-add-all:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.rownumber-toggle-all-visibility svg,
.rownumber-add-all svg {
    fill: #fff;
    width: 14px;
    height: 14px;
}

/* Row number tiles */
.rownumber-tile {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
}

.rownumber-tile:hover {
    border-color: #c0c0c0;
    background: #fafafa;
}

.rownumber-tile.rownumber-hidden {
    opacity: 0.5;
    background: #f5f5f5;
}

.rownumber-tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rownumber-tile-name {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    flex: 1;
}

.rownumber-tile-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rownumber-tile-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    color: #666;
    transition: all 0.2s ease;
}

.rownumber-tile-actions button:hover {
    background: #f0f0f0;
    color: #333;
}

.rownumber-tile-actions button svg {
    fill: currentColor;
}

/* Row number marker on map */
.rownumber-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #3498db;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #2c3e50;
    cursor: move;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    user-select: none;
    min-width: 24px;
    text-align: center;
}

.rownumber-marker:hover {
    border-color: #2980b9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.rownumber-marker.selected {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

#iconTiltTurn {
	transition: 0.5s;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
}


 #resizeMap {
            margin-top: 30px;
        }
        .resizeMapIcon {
            width: 1rem;
            height: 1rem;
            cursor: pointer;
            margin-bottom: 20px;
        }


.mapSettingIcons {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 20px;
    transition: 0.5s;
    position: relative;
}

.mapSettingIcons:hover{
    transform: scale(1.2);
}

.mapSettingIcons.active{
    fill: var(--third-color);
    stroke: var(--third-color);
}

.mapSettingIcons.active{
    fill: rgb(49 255 0);
    stroke: rgb(49 255 0);
}

.mapSettingIcons.loading{
    animation: infraPulse 1s ease-in-out infinite;
    pointer-events: none;
}

@keyframes infraPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* map Popup*/

/* ============================================================================
   POLYGON HOVER POPUP STYLES - Jony Ive Design
   ============================================================================ */

#polyPopup-container {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    transform: translate(-50%, -100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform-origin: bottom center;
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.15));
}

#polyPopup-container.polyPopup-visible {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
}

#polyPopup-container.polyPopup-hidden {
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.8);
}

.polyPopup-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 16px;
    min-width: 180px;
    position: relative;
    box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.08),
            0 1px 2px rgba(0, 0, 0, 0.02);
}

.polyPopup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.polyPopup-color-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.polyPopup-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.polyPopup-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.polyPopup-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.polyPopup-stat-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.polyPopup-stat-value {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}

.polyPopup-arrow {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
    border-left: none;
    transform: translateX(-50%) rotate(45deg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.polygon-visibility-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    position: absolute;
    top: 10px;
    right: 35px;
}

.polygon-visibility-toggle:hover {
    opacity: 0.7;
}

.polygon-visibility-toggle svg {
    fill: currentColor;
}

.polygon-visibility-toggle.hidden svg {
    opacity: 0.5;
    text-decoration: line-through;
}

.polygon-card.polygon-hidden {
    opacity: 0.7;
}

.polygon-card.polygon-hidden .polygon-name {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Optional styles for hidden polygons */
.polygon-hidden .polygon-specs,
.polygon-hidden .hardware-section {
    opacity: 0.5;
}

/* Smooth entrance animation */
@keyframes polyPopup-fadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -100%) scale(0.8) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -100%) scale(1) translateY(0);
    }
}

#polyPopup-container.polyPopup-animate-in {
    animation: polyPopup-fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .polyPopup-content {
        background: rgba(28, 28, 30, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .polyPopup-title {
        color: #f5f5f7;
    }

    .polyPopup-stat-label {
        color: #98989d;
    }

    .polyPopup-stat-value {
        color: #f5f5f7;
    }

    .polyPopup-arrow {
        background: rgba(28, 28, 30, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-top: none;
        border-left: none;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .polyPopup-content {
        min-width: 160px;
        padding: 14px;
        border-radius: 14px;
    }

    .polyPopup-title {
        font-size: 13px;
    }

    .polyPopup-stat-value {
        font-size: 14px;
    }

    .polyPopup-stats {
        gap: 12px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .polyPopup-content {
        background: rgba(255, 255, 255, 1);
        border: 2px solid #000;
    }

    .polyPopup-title {
        color: #000;
    }

    .polyPopup-stat-value {
        color: #000;
    }

    .polyPopup-stat-label {
        color: #666;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #polyPopup-container {
        transition: opacity 0.2s ease;
    }

    #polyPopup-container.polyPopup-animate-in {
        animation: none;
    }

    @keyframes polyPopup-fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
}

/*hardware popup*/
.mapHardwarePopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mapHardwarePopup.active {
    opacity: 1;
    visibility: visible;
}

/* Container for the actual dialog */
.mapHardwareDialog {
    width: 80%;
    max-width: 900px;
    max-height: 80vh;
    background: rgb(0 9 18 / 60%);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header Section */
.mapHardwareHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    position: relative;
}

.mapHardwareHeader h2 {
    margin: 0;
    font-size: 1.5rem;
    color:var(--header-color-light);
    font-weight: 500;
    padding: 0;
}

/* Close button */
.mapHardwareClose {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    color: #666;
    transition: color 0.2s ease, transform 0.2s ease;
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

.mapHardwareClose:hover {
    color: #333;
    transform: scale(1.1);
    background-color: rgba(0, 0, 0, 0.05);
}

.mapHardwareClose:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.4);
}

/* Content Layout */
.mapHardwareContainer {
    flex: 1;
    overflow: hidden;
}

.mapHardwareContent {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* Left Sidebar Tabs */
.mapHardwareTabs {
    width: 220px;
    border-right: 1px solid #eee;
    overflow-y: auto;
}

.mapHardwareTab {
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #eee;
    position: relative;
    font-weight: 400;
    color: var(--header-color-light);
}

.mapHardwareTab:hover {
    background-color: rgba(0, 0, 0, 0.53);
}

.mapHardwareTab.active {
    background-color: var(--primary-color, #3498db);
    color: white;
    font-weight: 500;
}

/* Right Content Panel */
.mapHardwareDetails {
    flex: 1;
    padding: 25px;
    overflow-y: auto;
    position: relative;
}

/* Company Logo */
.mapHardwareLogo {
    position: absolute;
    top: 20px;
    right: 45px;
    width: 120px;
    height: 60px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
}

/* Hardware Image Background */
.mapHardwareImage {
    height: 250px;
    margin-bottom: 25px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    background-size: contain;
    background-repeat: no-repeat;
}

.mapHardwareImage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(241, 241, 241, 0) 40%, rgb(255 255 255 / 90%) 80%, rgb(255 255 255) 100%);
}

/* Title */
.mapHardwareTitle {
    font-size: 1.75rem;
    margin-bottom: 25px;
    color: #333;
    font-weight: 500;
    margin-top: -50px;
}

/* Dropdowns */
.mapHardwareDropdown {
    margin-bottom: 20px;
    position: relative;
}

.mapHardwareDropdown label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--header-color-light);
}

.mapHardwareDropdown select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: white;
    appearance: none;
    font-size: 14px;
    color: #333;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mapHardwareDropdown select:focus {
    outline: none;
    border-color: var(--primary-color, #3498db);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.mapHardwareArrow {
    position: absolute;
    right: 15px;
    top: 65%;
    pointer-events: none;
    color: #666;
}

/* Fixed Value Containers */
.mapHardwareValue {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
}

.mapHardwareValue label {
    font-weight: 500;
    margin-right: 10px;
    min-width: 150px;
    color: var(--header-color-light);
}

.mapHardwareValueText {
    color: var(--header-color-light);
    font-weight: 400;
}

/* PDF Button */
.mapHardwarePdf {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 25px;
    background-color: var(--primary-color, #3498db);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-align: center;
    font-weight: 500;
    border: none;
    cursor: pointer;
}

.mapHardwarePdf:hover {
    background-color: var(--primary-color-dark, #2980b9);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Animation Classes */
.mapHardwareFadeIn {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.mapHardwareFadeOut {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .mapHardwareDialog {
        width: 95%;
        max-height: 90vh;
    }

    .mapHardwareContent {
        flex-direction: column;
    }

    .mapHardwareTabs {
        width: 100%;
        height: auto;
        display: flex;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid #eee;
        color: var(--header-color-light);
    }

    .mapHardwareTab {
        white-space: nowrap;
        border-bottom: none;
        border-right: 1px solid #eee;
    }

    .mapHardwareLogo {
        position: relative;
        top: 0;
        right: 0;
        margin-bottom: 15px;
    }
}




#analyse-container{
	position: absolute;
	top: 0;
	min-height: 100vh;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	left: 0px;
	display: none;
}

#analyse-container.visible{
	opacity: 1;
	display: unset;
}


.pd-container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 50%);
    transition: 1s;
    z-index: -1;
    opacity: 0;
    left: 0;
}

.pd-container.active {
    opacity: 1;
    z-index: 1;
    transition: 1s;
}

#grid-connection-container {
    background: none;

}

.pdDetailsContainer {
    width: 100%;
    height: 100%;
}

.tabHeader {
    font-size: 26px;
    color: var(--header-color-light);
    text-transform: uppercase;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%, 0%);
}


.grid-connection-button-Box {
    background-color: var(--secondary-color);
	color: var(--primary-color);
    border-radius: 10px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
    width: 350px;
    height: 70px;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
	position: relative;
	transition: 0.5s;
}


.grid-connection-button-Box::before {
    content: '';
    background-image: url(/wp-content/plugins/energyExperts/assets/media/lock.png);
    background-size: 30px;
    border-radius: 10px;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #00000063;
    background-position: center;
}



        .slider-container {
			opacity: 1;
			transition: 0.5s;
            position: absolute;
			width: 80vw;
			z-index: -1;
        }
#time-slider-container.active, #month-slider-container.active {
	z-index: 2;
}

#time-slider-container{
	left: 10vw;
	top: 60px;
}

#month-slider-container{
	left: 10vw;
	bottom: 6rem;
}

        .slider-container input[type=range] {
            -webkit-appearance: none;
            background: transparent;
            position: absolute;
            z-index: 1;
			width: 100%;

        }

        .slider-container input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 1rem;
            width: 1rem;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            z-index: 3;
        }

        .slider-container input[type=range]::-moz-range-thumb {
            height: 1rem;
            width: 1rem;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            z-index: 3;
        }

       .slider-container input[type=range]::-ms-thumb {
            height: 1rem;
            width: 1rem;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            z-index: 3;
        }

       .slider-container input[type=range]::-webkit-slider-runnable-track {
            height: 8px;
            background: transparent;
            cursor: pointer;
            border-radius: 5px;
        }

       .slider-container input[type=range]::-moz-range-track {
            height: 8px;
            background: transparent;
            cursor: pointer;
            border-radius: 5px;
        }

       .slider-container input[type=range]::-ms-track {
            height: 8px;
            background: transparent;
            cursor: pointer;
            border-radius: 5px;
            border-color: transparent;
            color: transparent;
        }

       .slider-container input[type=range]::-ms-fill-lower {
            background: transparent;
        }

       .slider-container input[type=range]::-ms-fill-upper {
            background: transparent;
        }

        .tick-container {
           
			height: 0.5rem;
			margin-top: 5px;
        }

		.timeMonthLabel {
			display: block;
    		margin-top: 0.3rem;
			width: 100%;
    		text-align: center;
			color: #8a8585;
    		font-weight: 700;
            font-size: 0.7rem;
		}

        .tick {
            position: absolute;
            width: 0.03rem;
            height: 0.5rem;
            background: var(--primary-color);
            opacity: 0.8;
        }

        .tick-label {
            position: absolute;
            top: -30px;
            width: 1rem;
            text-align: center;
            transform: translateX(-50%);
            font-size: 0.8rem;
            color: black;
        }

        .tick-container .tick.active {
            background: var(--primary-color);
        }

        .tick-container .tick-label.active {
            color: var(--primary-color);
        }

        .selected-value {
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.8rem;
            color: var(--primary-color);
            white-space: nowrap;
            z-index: 3;
        }
        /* header navigation*/

#projectSettingContainer {
    position: absolute;
    right: 0;
    top: 0;
    height: 30px;
    pointer-events: all;
    display: block;
}

.profileIcon {
    height: 37px;
    width: 37px;
    padding: 7px;
    fill: var(--primary-color);
    position: relative;
    margin: 10px;
}

svg#progress-profile-ring {
    width: 37px;
    height: 37px;
}

.topNavigationBar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 160px;
    pointer-events: none;
    z-index: 2;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.pulse {
    animation: pulse 3s infinite ease-in-out;
}

/*PD SLider*/

#pd-slider-container {
    position: absolute;
    width: 100vw;
    top: 30px;
    padding: 0% 5%;
}

/* Flexbox container for icons (evenly distributed) */
.pd-icon-container {
    display: flex;
    justify-content: space-between; /* Evenly distributed across full width */
    align-items: center; /* Zentriert die Icons vertikal */
    width: 100%; /* Stellt sicher, dass der Container die gesamte Breite nutzt */
    padding: 10px; /* Optionaler Innenabstand */
    box-sizing: border-box; /* Innenabstand wird in die Breite einberechnet */
}

/* Icon container element styling */
.iconBoxPd {
    position: relative;
    flex: 1;
    max-width: 80px;
    justify-content: center;
    display: flex;
    pointer-events: all;
}

/* EE-internal-only: hidden for non-EE users (class set server-side via PHP) */
.iconBoxPd.ee-internal-only {
    display: none !important;
}

/* Button container styling */
.iconButtonPd {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    margin: 0 auto; /* Zentriert den Button horizontal innerhalb des iconBoxPd */
    fill: var(--header-color-light);
    stroke: var(--header-color-light);
    flex-basis: content;
}

/* Default icon styling (round background) */
.iconPd {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: var(--primary-color);
    transition: all 0.3s ease;
    z-index: 1;
    box-shadow: 0 0 15px #bababa;
    background: rgb(0 9 18 / 60%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    position: relative;
    padding: 10px;
}


#iconPdButtonPd4 {
    transform: scale(1.3);
}

#dashboardIconSvg {
    width: 60px;
    height: 60px;
    border-radius: 0px;
    background: transparent;
    margin-bottom: 10px;
    box-shadow: unset;
}

.progress-ring {
    position: absolute;
    width: 60px;
    height: 60px;
    transform: rotate(-90deg);
    top: 0px;
    left: 0px;
}

.progress-background {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 5;
}

.progress-bar {
    fill: none;
    stroke: var(--secondary-color);
    stroke-width: 5;
    stroke-linecap: round;
    /* Bug-Fix: Werte auf den tatsaechlichen Umfang angeglichen (2 * pi * 28 = 175.93).
       Vorher 188.5 (= 2*pi*30) passte nicht zum SVG-Radius r=28 -> Ring erschien beim Initial-Paint fast voll. */
    stroke-dasharray: 175.93;
    stroke-dashoffset: 175.93;
    transition: stroke-dashoffset 0.3s ease-in-out;
}


/* Icon styling (SVG) */
.headerIcon {
    width: 24px;
    height: 24px;
}

/* Pill view (hidden by default, pill-shaped background) */
.pillViewPd {
    position: absolute;
    top: 50%; /* Zentriert vertikal */
    left: 50%; /* Zentriert horizontal */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-color);
    border-radius: 20px;
    color: var(--primary-color);
    fill: var(--primary-color);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0); /* Zentriert und skaliert von 0 */
    transition: all 0.3s ease;
    padding: 0px 20px; /* Horizontal and vertical padding */
    min-width: 80px; /* Min width for pill view, adjustable */
    white-space: nowrap; /* Verhindert Zeilenumbruch im Text */
    transform-origin: center center; /* Verankerung der Transformation in der Mitte */
    height: 40px;
}

/* Hover-Effekt: Icon ausblenden, Pillen-Ansicht einblenden mit Plop-Animation aus der Mitte */
.iconButtonPd:hover .iconPd {
    opacity: 0;
    transform: scale(0.8);
}

.iconButtonPd:hover .pillViewPd {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* Centered, normal scale */
}

/* Return animation: hide pill view, show icon */
.iconButtonPd:not(:hover) .pillViewPd {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0); /* Zentriert und skaliert auf 0 */
}

.iconButtonPd:not(:hover) .iconPd {
    opacity: 1;
    transform: scale(1);
}
.iconButtonPd.clicked .iconPd, .iconButtonPd.clicked .pillViewPd{
    background-color: var(--primary-color);
    color: var(--secondary-color);
    fill: var(--secondary-color);
    stroke: var(--secondary-color);
}

#iconPdButtonPd4:hover .iconPd {
    opacity: 1;
}





#address p{
	line-height: 30px;
}

#connectionsContainer .detailBoxOneItem {
    margin-bottom: 10px;
}

#iconMail {
    margin-right: 50px;
}

#iconPhone {
    margin-right: 24px;
}

#resendInvitation svg {
    width: 15px;
    height: 15px;
    fill: var(--secondary-color);
}

.editIcon {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    right: 0px;
    background-color: var(--primary-color);
    border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	fill: var(--secondary-color);
	stroke: var(--secondary-color);
}

#connectionDetail1 span.detailBoxOneLabelSub {
    width: 60px;
}



.detailBoxOneItemSubContainerDetails {
    display: flex;
    flex-direction: column;
	 margin-top: 20px;
}

.detailBoxOneItemSubContainer {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Optional: Abstand zwischen den Zeilen */
	flex-wrap: wrap;
	width: 100%;
    min-height: 20px;
}

#addressDisplay {
    position: relative;
}


.contactDetailBoxItemSubContainer {
    position: relative;
    margin-bottom: 15px;
}

.contactDetailBoxInput {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 12px;
    box-sizing: border-box;
}

.contactDetailBoxInput::placeholder {
    color: #aaa;
    font-size: 14px;
}

.contactDetailBoxInput:focus {
    border-color: #007bff;
    outline: none;
}

.disabled-email {
    background-color: #e0e0e0 !important;
    cursor: not-allowed;
    opacity: 0.5;
}

.tooltip-container {
    position: relative;
    display: inline-block;
	width: 100%;
}

.tooltip-text {
    visibility: hidden;
    width: 100px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    border: 2px solid var(--secondary-color);
    position: absolute;
    z-index: 1;
    bottom: 115%; /* Position above the tooltip container */
    left: 50%;
    margin-left: -50px; /* Zentrieren */
    
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.contactSaveButton {
    font-size: 12px;
    margin-left: auto;
    margin-right: 10px;
    padding: 5px 10px;
}

.salutationForm {
    padding: 0px;
    margin-left: 10px;
	width: calc(100% - 20px) !important;
	margin-top: 10px;
}

.contactDetailBoxItemSubContainer {
    position: relative;
    margin-bottom: 15px;
    width: calc(50% - 20px);
    float: left;
    margin-left: 10px;
	margin-right: 10px;
}

.contactDetailBoxItemSubContainer input {
    width: 100%;
}



.iconDetailBoxOneSub {
            position: absolute;
            right: 0px;
            cursor: pointer;
            width: 20px;
            height: 20px;
            background-size: 10px;
			background-repeat: no-repeat;
			background-position: center;
			background-color: var(--primary-color);
			border-radius: 50%;
			transition: 0.5s;
			display: flex;
			justify-content: center;
			align-items: center;
			fill: var(--secondary-color);
        }

.iconDetailBoxOneSub svg {
    pointer-events: none;
}

 .detailBox {
    opacity: 0;
    transition: 0.5s ease-out;
    width: 100%;
    float: right;
    background: var(--primary-color);
    border-radius: 10px;
    color: var(--secondary-color);
    margin-bottom: 10px;
    max-height: 0px;
    position: relative;
    font-size: 12px;
     overflow: auto;
}


        .detailBox.open {
            opacity: 1;
            max-height: 500px;
			padding: 10px 5px;
        }


.detailBoxOneLabelSub {
    min-width: 150px; /* Diese Breite kannst du anpassen */
    text-align: left;
    font-weight: bold; /* Optional: Um das Label hervorzuheben */
    padding-right: 10px; /* Abstand zwischen Label und Value */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

.detailBoxOneLabelSubSub {
    margin-left: 10px;
}

.disclaimerSub {
    color: var(--third-color);
    font-weight: 300;
    font-size: 10px;
}

.detailBoxOneValueSub {
	color: var(--third-color);
    font-size: 0.7rem;
    min-width: 80px;
    width: calc(20px + 30%);
}

.detailBoxOneValueSub a {
    color: inherit; /* Optional: Um die Linkfarbe beizubehalten */
    text-decoration: none; /* Optional: Entfernt die Unterstreichung bei Links */
}

@media (max-width: 768px) {
    .detailBoxOneItemSubContainer {
        flex-direction: column; /* Bei kleineren Bildschirmen Labels und Werte untereinander anordnen */
        align-items: flex-start;
    }

    .detailBoxOneLabelSub {
        padding-right: 0;
    }

    .detailBoxOneValueSub {
        width: 100%;
    }
	
	#connectionDetail1 span.detailBoxOneLabelSub {
    width: 100%;
}
}







.boxHeader {
    font-size: 1rem;
    font-weight: bolder;
    margin-top: 30px;
    margin-bottom: 0px;
    color: var(--primary-color);
	text-transform: uppercase;
}

.boxHeader svg {
    fill: var(--primary-color);
}


.organizationIcon{
	z-index: 1;
    position: absolute;
    top: 10px;
    left: 50px;
    width: 1.8rem;
    height: 1.8rem;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
	fill: var(--primary-color);
	opacity: 1;
	transition: 0.5s;

}

.organizationIcon.active{
	opacity: 0;
}

/*delete Popup styling*/

div#deleteProjectButton {
    left: 10px;
}

#deleteProjectButton svg {
    width: 80%;
}

.deleteEntryOverlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999999;
            justify-content: center;
            align-items: center;
        }

        .deleteEntryContent {
            background: var(--third-color);
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .deleteEntryButton, .cancelEntryButton {
            margin: 10px;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .deleteEntryButton, .cancelEntryButton {
            background-color: #ccc;
            color: black;
        }


.generalorganizationDetails {
    padding: 20px 20px 20px 40px;
}


.detailBoxOneItemSubContainer a {
    color: rgb(255 255 255);
    font-weight: 600;
}


/*edit values*/

/* Input field in readonly state (looks like a <p> tag) */
.read-only-input {
  border: none!important;
  background: none!important;
  cursor: pointer; /* Verhindert, dass das Input-Feld bearbeitet werden kann */
	padding: 5px;
}

/* Entfernt die Fokussier-Border */
.read-only-input:focus {
  outline: none;
}

/* Input field in active state (looks like a standard input) */
.read-only-input.active {
  border: 1px solid var(--primary-color)!important; /* Add visible border */
  background: var(--third-color)!important;
  pointer-events: auto; /* Enable editing in active state */
	color: var(--primary-color) !important;
}

#saveValueButton {
    position: sticky;
    bottom: 0px;
    width: 100%;
    height: 50px;
    background-color: var(--secondary-color);
    border: none;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 22px;
}




#projectTitleInput{
	text-align: center;
	width: calc(100% - 50px);
}

.darkStyleInputContainer {
    color: var(--third-color) !important;
    font-size: 0.7rem;
    min-width: 80px;
    width: calc(20px + 30%);
}

.listContainer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out; /* Transition timing and easing */
}

.listContainer.active {
    max-height: 500px; /* Set to height large enough for content */
}

.workCostsDropDownIcon {
    width: 10px;
    height: 10px;
    fill: var(--third-color);
    margin-left: 5px;
}

.inputContainerDiv {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 5px;
    margin-bottom: 5px;
}

.inputContainerDivInput {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--secondary-color);
}

.editSplit1 {
    width: 100%;
}

.editSplit2 {
    width: 100%;
}

.editSplit3 {
    width: 100%;
}

/*map planning*/

.mapPlanningContainer {
    position: absolute;
    top: -120px;
    left: calc(10% + 112px);
    transform: translateX(-50%);
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease, z-index 0s ease 0.3s;
	display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
	pointer-events: none;
}

.mapPlanningContainer.active {
    opacity: 1;
    z-index: 10;
    transition: opacity 0.3s ease;
	pointer-events: all;
}


.mapPlanningItem {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mapPlanningIcon {
    position: relative;
    width: 5rem;;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-value {
    position: absolute;
    font-size: 0.8rem;
    background: var(--secondary-color);
	color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
}
.center-value svg {
    width: 2rem;
    height: 2rem;
}


.buttonPlanningBackground{
	background-color: var(--primary-color);
	border-radius: 50%;
	width: 5rem;
	height: 5rem;
	transition: 0.5s;
}




/* Container-Styling */
#grid-connection-overview-container {
    opacity: 0;
    padding: 20px;
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    width: calc(95% - 200px);
    position: absolute;
    bottom: 100px;
    left: calc(5% + 150px);
    background-color: var(--third-color);
    transition: 0.5s;
}

/* Heading */
.grid-header {
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-align: left;
}

/* Flexbox for rows */
.grid-row {
    display: flex;
    flex-wrap: wrap; /* Nebeneinander oder Umbruch bei Platzmangel */
    gap: 10px; /* Abstand zwischen den Elementen */
}

.grid-item {
    min-width: 200px; /* Mindestbreite */
    flex: 1; /* Flexlayout */
    display: flex; /* Flex layout for vertical text arrangement */
    flex-direction: column; /* Elemente untereinander anordnen */
    justify-content: center; /* Vertikale Zentrierung der Inhalte */
    align-items: center; /* Horizontale Zentrierung */
    text-align: center; /* Textzentrierung */
    padding: 10px;
    border: 1px solid var(--border-color); /* Rahmen */
    border-radius: 5px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten */
}

/* Styling der Beschriftung */
.grid-label {
    font-weight: bold; /* Bold for labels */
    margin-bottom: 5px; /* Abstand zur zweiten Zeile */
    font-size: 0.8rem;
    color: #555;
}

/* Styling der Werte */
.grid-value {
    font-size: 1rem; /* Larger text for values */
    color: #333;
}


/* ============================================================================
   E8 PDF BAUANTRAG WIDGET - Modern Glassmorphism Design
   ============================================================================ */

#grid-connection-pdf-container {
    opacity: 0;
    padding: 28px;
    border-radius: 20px;
    width: calc(90% - 180px);
    max-width: 580px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: rgba(20, 20, 28, 0.85);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.5),
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    overflow: hidden;
    height: auto;
    max-height: calc(100vh - 140px);
}

#grid-connection-pdf-container.active {
    pointer-events: all;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    z-index: 99999;
}

/* Container Header Styling */
.gridPdfFormHeader {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gridPdfFormHeader h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 12px;
}

.gridPdfFormHeader h3::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    border-radius: 2px;
}

/* Form Container */
#e8pdf-form-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Fortschrittsanzeige - Modern */
#e8pdf-progress-container {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

#e8pdf-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    width: 0;
    border-radius: 100px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 20px rgba(var(--secondary-color-rgb, 76, 175, 80), 0.4);
}

/* Form Section - Glassmorphism Card */
.e8pdf-form-section {
    max-width: 100%;
    margin: 0;
    padding: 24px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    height: calc(100vh - 420px);
    min-height: 300px;
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom Scrollbar for Form Section */
.e8pdf-form-section::-webkit-scrollbar {
    width: 6px;
}

.e8pdf-form-section::-webkit-scrollbar-track {
    background: transparent;
}

.e8pdf-form-section::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

.e8pdf-form-section::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Section Header */
.e8pdf-section-header {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 20px;
    text-align: left;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.e8pdf-section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
}

/* Form Row - Grid Layout */
.e8pdf-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Form Field */
.e8pdf-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.e8pdf-form-field label {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Modern Input Styling */
.e8pdf-form-field input,
.e8pdf-form-input {
    padding: 14px 16px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px;
    font-size: 0.95rem;
    color: #ffffff !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.e8pdf-form-field input::placeholder,
.e8pdf-form-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.e8pdf-form-field input:hover,
.e8pdf-form-input:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.e8pdf-form-field input:focus,
.e8pdf-form-input:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--secondary-color-rgb, 76, 175, 80), 0.15),
                0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Checkbox Field */
.e8pdf-checkbox-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.e8pdf-checkbox-field:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Modern Checkbox */
.e8pdf-checkbox,
.e8pdf-checkbox-field input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.e8pdf-checkbox:checked,
.e8pdf-checkbox-field input[type="checkbox"]:checked {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.e8pdf-checkbox:checked::after,
.e8pdf-checkbox-field input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.e8pdf-checkbox-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

/* Owner Fields Container */
#e8pdf-ownerFields {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Navigation Container */
#e8pdf-form-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 0;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
}

/* Navigation Buttons - Modern Style */
.e8pdf-navigation-button {
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
}

/* Back button */
#e8pdf-prev-btn {
    margin-right: auto;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#e8pdf-prev-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(-2px);
}

#e8pdf-prev-btn::before {
    content: '\2190';
    font-size: 1.1em;
}

/* Weiter/Submit Button */
#e8pdf-next-btn {
    margin-left: auto;
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    color: #ffffff;
    min-width: 140px;
    position: relative;
    box-shadow: 0 4px 20px rgba(var(--secondary-color-rgb, 76, 175, 80), 0.3);
}

#e8pdf-next-btn:hover {
    transform: translateX(2px);
    box-shadow: 0 6px 28px rgba(var(--secondary-color-rgb, 76, 175, 80), 0.4);
}

#e8pdf-next-btn::after {
    content: '\2192';
    font-size: 1.1em;
    margin-left: 4px;
}

.e8pdf-navigation-button:disabled {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.3) !important;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    #grid-connection-pdf-container {
        width: calc(100% - 32px);
        max-width: none;
        padding: 20px;
        border-radius: 16px;
    }

    .e8pdf-form-row {
        grid-template-columns: 1fr;
    }

    .e8pdf-form-section {
        padding: 16px;
        height: auto;
        max-height: calc(100vh - 320px);
    }

    .e8pdf-navigation-button {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    #e8pdf-next-btn {
        min-width: 120px;
    }
}




/* spinner css*/

.spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: inherit;
    z-index: 10;
    background: rgba(15, 23, 42, 0.6);
}

.spinner-active > *:not(.spinner-overlay) {
    filter: blur(6px);
    opacity: 1;
}

.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-text {
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    margin-top: 50px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.interactions-disabled {
    pointer-events: none;
    user-select: none;
}

.interactions-disabled::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: rgba(0, 0, 0, 0.1);*/
    z-index: 9999;
}

/* Seiten-Overlay (optional mit disablePage = true) */
.interactions-disabled {
    overflow: hidden;
    cursor: wait;
}

.interactions-disabled button,
.interactions-disabled input,
.interactions-disabled select,
.interactions-disabled textarea,
.interactions-disabled a,
.interactions-disabled [tabindex] {
    pointer-events: none !important;
    cursor: not-allowed;
}

.interactions-disabled::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    background: transparent;
    cursor: wait;
}




@media (max-width: 600px) {
    .tab[title]:hover:after {
        max-width: calc(100vw - 20px); /* Begrenze die maximale Breite des Tooltips */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tab[title]:hover:after {
        left: auto;
        right: 10px;
        transform: none;
    }

    .tab[title]:hover:before {
        left: auto;
        right: 10px;
        transform: none;
    }
}


/*finance tab*/

.yieldGraphs-canvas {
    max-height: 40vh;
    height: 40vh;
    width: 100%;
}

.yieldGraphs-tab {
    cursor: pointer;
    padding: 10px 15px;
    background-color: #f0f0f0;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.yieldGraphs-tab.yieldGraphs-active {
    background-color: var(--primary-color);
    color: white;
}

.yieldGraphs-chartlockIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.yieldGraphs-levelOnePaymentButton {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 4px;
    cursor: pointer;
}


.yieldGraphs-container {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    min-height: 40vh;
}


.yieldInformationContainer {
    background-color: #00000042;
    border-radius: 16px;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 10px;
}

.yieldInformationHeader {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 20px;
}

.yieldInformationRow {
    color: #fff;
    display: flex;
    gap: 20px;
    width: 100%;
}

.yieldInformationRow.bolt{
    font-weight: 700;
}

.yieldInformationLabel {
    width: 150px;
}

.yieldInformationLabel {
    width: 150px;
}

.yieldInformationValue {
    width: 150px;
    text-align: right;
    padding: 2px 4px;
}

.topTabView-container {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.topTabView-buttons {
    display: flex;
    background-color: rgb(0 9 18 / 85%);
    z-index: 2;
    position: absolute;
    width: 100%;
    backdrop-filter: blur(10px);
}

.topTabView-button {
    padding: 15px 25px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    transition: all 0.3s ease;
    position: relative;
}

.topTabView-button:hover {
    color: var(--secondary-color-50);
}

.topTabView-button.topTabView-active {
    color: var(--secondary-color);
}

.topTabView-button.topTabView-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
}

.topTabView-content {
    padding: 20px;
    display: none;
    height: calc(100% - 0px);
    overflow-y: auto;
    padding-top: 50px;
}

.topTabView-content h3 {
    margin-top: 20px;
}

.topTabView-content.topTabView-active {
    display: block;
}

.topTabView-graph-placeholder {
    height: 200px;
    background-color: #f9f9f9;
    border: 1px dashed var(--border-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    margin-bottom: 15px;
}

/* Finance chart specific styles */
#financeGraphs {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.finance-graph-placeholder {
    height: 200px;
    background-color: #f9f9f9;
    border: 1px dashed var(--border-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
}


#financeGraphs{
    width: 100%;
}

.processModule-container {
    display: flex;
    width: 100%;
    min-height: 400px;
    padding: 5%;
    height: 100%;
}

/* Prozessschritte links */
.processModule-steps {
    width: 280px;
    padding-right: 40px;
    position: relative;
    overflow-y: auto;
}

/* Vertical line for process flow */
.processModule-steps::before {
    content: '';
    position: absolute;
    top: 20px; /* Beginnt in der Mitte des ersten Kreises */
    height: var(--gray-line-end, 20px); /* Dynamisch berechnet, um exakt beim letzten Kreis zu enden */
    left: 40px;
    width: 1px;
    background-color: #E0E0E0;
    z-index: 0;
}

/* Farbige Linie bis zu aktuellem Punkt */
.processModule-steps::after {
    content: '';
    position: absolute;
    top: 20px; /* Beginnt in der Mitte des ersten Kreises */
    height: var(--active-line-end, 0);
    left: 40px;
    width: 1px;
    background-color: var(--primary-color);
    z-index: 0;
    transition: height 0.3s ease;
}

/* Einzelner Prozessschritt */
.processModule-step {
    display: flex;
    align-items: center;
    margin-bottom: 40px; /* Fester Abstand zwischen Schritten */
    position: relative;
    cursor: pointer;
    z-index: 1;
    transition: transform 0.2s ease;
    padding-left: 40px;
    min-height: 44px; /* Minimum height for consistent spacing */
}

.processModule-step:hover {
    transform: scale(1.05);
}

/* Der letzte Schritt hat keinen Abstand nach unten */
.processModule-step:last-child {
    margin-bottom: 0;
}

/* Circle with white shadow background */
.processModule-step-circle-bg {
    position: absolute;
    width: 34px;
    height: 34px;
    left: 40px;
    border-radius: 50%;
    background-color: white;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

/* Circle for the process step */
.processModule-step-circle {
    position: absolute;
    width: 34px;
    height: 34px;
    left: 40px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    z-index: 2;
    color: #666;
    font-weight: 500;
    font-size: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

/* Aktiver und abgeschlossener Schritt */
.processModule-step.active .processModule-step-circle {
    background-color: #000000b5;
    color: #eeeeee;
    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.3);
}

.processModule-step.completed .processModule-step-circle {
    background-color: var(--primary-color);
    color: var(--secondary-color);;
}

/* Checkmark for completed steps */
.processModule-step-check {
    display: none;
    color: var(--header-color-light);
}

.processModule-step.completed .processModule-step-check {
    display: block;
}

.processModule-step.completed .processModule-step-number {
    display: none;
}

/* Container for title and info button */
.processModule-step-content {
    margin-left: 30px;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Erlaubt Umbruch bei langen Titeln */
}

/* Titel des Schritts */
.processModule-step-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--header-color-light);
    transition: all 0.3s ease;
    line-height: 1.4;
}

.processModule-step.active .processModule-step-title {
    color: var(--header-color-light);
    font-weight: 600;
}

/* Titel-Container im Panel */
.processModule-panel-title-container {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.processModule-panel-title-container h2 {
    margin: 0;
    color: var(--header-color-light);
    font-size: 22px;
    font-weight: 600;
}

/* Info button for explanation - now in panel */
.processModule-step-info {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #F5F5F5;
    border: 1px solid var(--border-color);
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.processModule-step-info:hover {
    background-color: var(--secondary-color);;
    color: #555;
}

/* Inhaltsbereich rechts */
.processModule-content {
    flex: 1;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Content panel */
.processModule-panel {
    display: none;
    animation: processModuleFadeIn 0.4s ease;
    flex: 1;
}

.processModule-panel.active {
    display: block;
}

.processModule-panel h2 {
    color: var(--header-color-light);
    font-size: 22px;
    font-weight: 600;
    padding: 0px;
}

.processModule-panel p {
    line-height: 1.7;
    color: var(--header-color-light);
    margin-bottom: 20px;
    font-size: 15px;
}

@keyframes processModuleFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Navigation */
.processModule-navigation {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Navigation Buttons */
.processModule-button {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.processModule-back-button {
    background-color: #f5f5f5;
    color: #666;
}

.processModule-back-button:hover {
    background-color: #e8e8e8;
    transform: scale(1.05);
}

.processModule-next-button {
    background-color: #00000059;
    color: white;
    margin-left: auto;
}

.processModule-next-button:hover {
    background-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 5px rgba(79, 70, 229, 0.3);
    transform: scale(1.05);
    color: black;
}

.processModule-complete-button {
    background-color: var(--secondary-color);;
    color: white;
    margin-left: auto;
}

.processModule-complete-button:hover {
    background-color: var(--primary-color);;
    box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
    transform: scale(1.05);
}

/* Popup-Stil */
.processModule-explanation-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(3px);
    z-index: 99999990;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.processModule-explanation-popup.active {
    opacity: 1;
}

.processModule-popup-content {
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.processModule-explanation-popup.active .processModule-popup-content {
    transform: translateY(0);
}

.processModule-close-popup {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.processModule-close-popup:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #555;
}

#processModule-popup-title {
    margin-top: 0;
    color: #111;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
}

#processModule-popup-text {
    line-height: 1.7;
    color: #444;
    font-size: 15px;
}

.processModule-container-collapsed {
    width: 90%;
    margin: 20px;
}

.next-step-header {
    padding: 10px 0;
    color: #333;
}

.next-step-header h3 {
    margin: 0;
    font-size: 30px;
    font-weight: 300;
    padding: 0;
    font-variant: all-petite-caps;
    color: #ffffff;
}

.next-step-content {
    border-top: 1px solid #ffffff;
    padding-top: 20px;
}

.next-step-content h4 {
    color: var(--header-color-light);
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    padding: 0px;
}

.next-step-content p {
    color: var(--header-color-light);
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.next-step-container {
    width: calc(100% - 100px);
    float: left;
}



.next-step-button {
    display: block;
    background-color: #00000061;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
    font-weight: 600;
    float: right;
    position: absolute;
    right: 20px;
    bottom: 20px;
}


.next-step-button:hover {
    background-color: rgba(255, 254, 254, 0.38);
    color: #000000;
}

/* finance chart*/

.financeChart-container {
    width: 100%;
    margin: 0 auto;
}

/* Box styles */
.financeChart-box {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.financeChart-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #d3d3d3;
}

.financeChart-header p {
    font-size: 18px;
    font-weight: 500;
    margin-left: 10px;
}

.financeChart-logo {
    width: 24px;
    height: 24px;
    background-color: var(--financeChart-primary-color);
    border-radius: 50%;
}

.financeChart-chart-container {
    margin-top: 30px;
}

/* Toggle buttons */
.financeChart-toggle-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.financeChart-tab-container {
    position: relative;
    display: flex;
    align-items: center;
}

.financeChart-tab:hover + .financeChart-info-button {
    opacity: 1;
}

.financeChart-tab {
    padding: 6px 20px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2sease;
    background-color: var(--primary-color);
    color: var(--third-color);
}

.financeChart-tab.active {
    background-color: var(--secondary-color);
    color: var(--third-color);
}

.financeChart-info-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #fffcfc;
    font-size: 10px;
    cursor: pointer;
    transition: background-color 0.2sease;
    position: absolute;
    right: 3px;
    top: 3px;
    border: 1px solid;
    opacity: 0;
}

.financeChart-info-button:hover {
    transform: scale(1.05);
    opacity: 1;
}

/* Popup styles */
.financeChart-explanation-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.financeChart-explanation-popup.active {
    opacity: 1;
}

.financeChart-popup-content {
    background-color: white;
    border-radius: 8px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.financeChart-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.financeChart-popup-title {
    font-size: 18px;
    font-weight: 500;
}

.financeChart-popup-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #888;
}

.financeChart-popup-text {
    color: #555;
    line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .financeChart-toggle-buttons {
        justify-content: center;
    }

    .financeChart-tab {
        padding: 5px 10px;
        font-size: 11px;
    }
}

/* Chart lock styling for premium features */
.financeChart-chartlockIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.financeChart-levelOnePaymentButton {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: var(--financeChart-primary-color);
    color: white;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}




/*task form*/
/* Global Form Styles */
.ee-form-container {
    max-width: 100%;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
}

.ee-form-section {
    background: rgba(255,255,255,0.04);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.08);
}

/* Typography */
.ee-form-container h2 {
    font-size: 1.8em;
    margin: 0 0 20px 0;
    color: rgba(255,255,255,0.95);
    font-weight: 600;
}

.ee-form-container h3,
.ee-form-section h3 {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    margin-bottom: 12px;
    padding-left: 12px;
    border-left: 3px solid #30d158;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Form Elements */
.ee-form-input {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: #ffffff !important;
    background: rgba(255,255,255,0.06) !important;
    background-color: rgba(255,255,255,0.06) !important;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
    height: auto !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.ee-form-input:focus {
    border-color: rgba(10,132,255,0.5) !important;
    background: rgba(255,255,255,0.08) !important;
    box-shadow: 0 0 0 3px rgba(10,132,255,0.15) !important;
    outline: none !important;
}
.ee-form-input::placeholder {
    color: rgba(255,255,255,0.35) !important;
    opacity: 1 !important;
}

.ee-form-select {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: #ffffff !important;
    background: rgba(255,255,255,0.06) !important;
    background-color: rgba(255,255,255,0.06) !important;
    cursor: pointer !important;
    transition: border-color 0.2s, background 0.2s !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    height: auto !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.ee-form-select:focus {
    border-color: rgba(10,132,255,0.5) !important;
    background: rgba(255,255,255,0.08) !important;
    box-shadow: 0 0 0 3px rgba(10,132,255,0.15) !important;
    outline: none !important;
}
.ee-form-select option {
    background: #1a1a24;
    color: #ffffff;
}

.ee-form-select-small {
    width: 200px !important;
}

/* Form Layout */
.ee-form-grid {
    display: flex;
    gap: 0px 10%;
    flex-wrap: wrap;
    align-items: flex-start;
}

.ee-form-column {
    flex: 1;
    min-width: 280px;
}

.ee-form-row {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.ee-form-group {
    flex: 1;
    margin-bottom: 16px;
    min-width: 40%;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.ee-form-group label {
    display: block;
    margin-bottom: 6px;
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.ee-form-full-width {
    min-width: 100%;
    grid-column: span 2;
}

/* Address Search with Mapbox */
.ee-form-geocoder {
    width: 100%;
}

.mapboxgl-ctrl-geocoder {
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: 1px solid var(--border-color) !important;
}

/* Suggestions */
.ee-form-suggestions {
    position: absolute;
    background: white;
    max-height: 200px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 9999;
    display: none;
}

.ee-form-suggestions li {
    background: white;
    padding: 10px 15px;
    margin: 0;
    list-style: none !important;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    display: block;
    max-width: 100%;
    box-sizing: border-box;
    color: #444;
}

.ee-form-suggestions li:hover {
    background-color: #f5f5f5;
}

.ee-form-suggestions li:last-child {
    border-bottom: none;
}

/* Required fields */
.ee-form-required {
    color: #e53e3e;
    margin-left: 3px;
}

/* Contact list styles */
.ee-form-contact-item {
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}

.ee-form-contact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ee-form-contact-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--header-color-light);
}

.ee-form-contact-delete-btn {
    border: none;
    background: transparent;
    color: #ff5252;
    font-size: 20px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.ee-form-contact-delete-btn:hover {
    color: #ff0000;
}

.ee-form-actions {
    margin-top: 10px;
    text-align: left;
}

.ee-form-button {
    background: linear-gradient(135deg, #0a84ff, #5e5ce6);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}

.ee-form-button:hover {
    box-shadow: 0 4px 16px rgba(10,132,255,0.4);
    transform: translateY(-1px);
}

/* Area list styles */
.ee-form-flaeche-item {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    background: rgba(255,255,255,0.04);
}

.ee-form-flaeche-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ee-form-flaeche-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.ee-form-flaeche-delete-btn {
    border: none;
    background: transparent;
    color: #ff5252;
    font-size: 20px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.ee-form-flaeche-delete-btn:hover {
    color: #ff0000;
}


/* Responsive Design */
@media (max-width: 768px) {
    .ee-form-grid,
    .ee-form-row {
        flex-direction: column;
        gap: 0;
    }

    .ee-form-column {
        width: 100%;
    }

    .ee-form-select-small {
        width: 100% !important;
    }
}

/* FinanceDashboard */
@keyframes neonPulse {
    from { text-shadow: 0 0 15px #00ccff; }
    to { text-shadow: 0 0 30px #00ffcc, 0 0 50px #00ccff; }
}

#finance-dashboard-chart {
    width: 100%;
    height: 100%;
    max-height: 90%;
    max-width: 90%;
    margin: auto;
}

.financeDashboard-header {
    margin: 0;
    font-size: 30px;
    font-weight: 300;
    padding: 0;
    font-variant: all-petite-caps;
    color: #ffffff;
    text-align: center;
    margin-top: 20px;
}

.financeDashboard-moreButton {
    width: 100px;
    margin-left: auto;
    text-align: center;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    margin-top: -20px;
    transition: 0.5s;
}

.financeDashboard-moreButton:hover {
    transform: scale(1.05);
}

/* finance overview */

/* Finance overview styling */
.finance-overview {
    font-family: Arial, sans-serif;
    border-radius: 12px;
    padding: 30px;
    color: #0f172a;
    margin: 0 auto;
}

.finance-section {
    background-color: white;
    border-radius: 16px;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    position: relative;
}


/* edit single value without slider*/

/* Inline Edit Styles */
.inline-edit-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: -20px;
}

.inline-edit-value {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.inline-edit-value:hover {
    background-color: rgba(92, 92, 92, 0.08);
}

.inline-edit-input {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    width: 70px;
    text-align: right;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* .dashboardView-plant-name .inline-edit-input moved to ee-widget-styles.css */

.inline-edit-input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 2px rgba(92, 92, 92, 0.15);
}

.inline-edit-icon {
    cursor: pointer;
    width: 12px;
    height: 12px;
    opacity: 0.5;
    transition: opacity 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.inline-edit-icon:hover {
    opacity: 0.8;
}


.inline-edit-icon.save-icon {
    color: var(--secondary-color);
    opacity: 0.7;
}

.inline-edit-icon.save-icon:hover {
    opacity: 1;
}


/* Responsive Anpassungen */
@media (max-width: 768px) {
    .inline-edit-input {
        width: 60px;
        font-size: 14px;
    }

    .inline-edit-icon {
        width: 14px;
        height: 14px;
    }
}




/* finance-section loading*/

/* Loading States */
.financeLoading.financeLoading-active {
    pointer-events: none;
    user-select: none;
    position: relative;
}

.financeLoading.financeLoading-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0;
    animation: financeLoading-fadeInOverlay 0.4s ease-out forwards;
    background: inherit;
}

/* Moderner rotierender und pulsierender Ring */
.financeLoading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0;
    animation: financeLoading-fadeInSpinner 0.4s ease-out 0.2s forwards;
}

.financeLoading-modernRing {
    width: 60px;
    height: 60px;
    position: absolute;
    animation: financeLoading-breathingPulse 4s ease-in-out infinite;
}

.financeLoading-ringElement {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-radius: 50%;
    animation: financeLoading-breathingRotate 3s linear infinite;
}

/* Beruhigender Asteroid-Ring mit Schweif */
.financeLoading-ringElement::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(43, 62, 75, 0.1) 80deg,
            rgba(63, 161, 77, 0.4) 120deg,
            rgb(63, 161, 77) 150deg,
            rgb(63, 161, 77) 180deg,
            rgb(63, 161, 77) 210deg,
            rgba(63, 161, 77, 0.6) 240deg,
            rgba(63, 161, 77, 0.3) 280deg,
            rgba(43, 62, 75, 0.1) 320deg,
            transparent 360deg
    );
    mask: radial-gradient(circle, transparent 58%, black 62%);
    -webkit-mask: radial-gradient(circle, transparent 58%, black 62%);
    animation: financeLoading-breathingColorShift 4s ease-in-out infinite;
}

/* Sanft pulsierende Kugel */
.financeLoading-ringElement::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(63, 161, 77, 1) 0%, rgb(160 161 162) 100%);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(63, 161, 77, 0.6);
    animation:
            financeLoading-gentleMove 3s linear infinite,
            financeLoading-gentleKugelPulse 4s ease-in-out infinite;
}

/* Beruhigende Atem-Animationen */
@keyframes financeLoading-breathingRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes financeLoading-breathingPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        filter: drop-shadow(0 0 8px rgba(63, 161, 77, 0.3));
    }
    50% {
        transform: translate(-50%, -50%) scale(1.08);
        filter: drop-shadow(0 0 16px rgba(63, 161, 77, 0.5));
    }
}

@keyframes financeLoading-breathingColorShift {
    0%, 100% {
        filter: hue-rotate(0deg) saturate(1) brightness(1);
    }
    25% {
        filter: hue-rotate(15deg) saturate(1.1) brightness(1.05);
    }
    50% {
        filter: hue-rotate(0deg) saturate(0.9) brightness(0.95);
    }
    75% {
        filter: hue-rotate(-15deg) saturate(1.1) brightness(1.05);
    }
}

@keyframes financeLoading-gentleMove {
    0% {
        transform: rotate(0deg) translateX(25px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(25px) rotate(-360deg);
    }
}

@keyframes financeLoading-gentleKugelPulse {
    0%, 100% {
        transform: rotate(0deg) translateX(25px) rotate(0deg) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: rotate(180deg) translateX(25px) rotate(-180deg) scale(1.2);
        opacity: 1;
    }
}

@keyframes financeLoading-fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 0.8; }
}

@keyframes financeLoading-fadeInSpinner {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes financeLoading-fadeOutSpinner {
    from {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}



.finance-section-header {
    margin-bottom: 20px;
    position: relative;
    padding-left: 18px;
}

.finance-section-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 100%;
    background: linear-gradient(to right, var(--secondary-color), var(--secondary-color));
    border-radius: 4px;
}

.finance-section-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    color: #0f172a;
    padding: 0px;
}

.finance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(400px, calc((100% / 2)) - 20px), 1fr));
    gap: 20px;
}





/* Finance Hardware styles moved to ee-widget-styles.css */

/* Wirtschaftlichkeits-Metriken moved to ee-widget-styles.css */




/* Info-Zeilen */
.finance-info-row {
    border-bottom: 1px solid #ffffff54;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: auto;
    margin-bottom: 10px;
}

.finance-info-label {
    font-size: 16px;
    color: #64748b;
}

.finance-info-label-bold {
    font-weight: bold;
}

.finance-info-value {
    font-size: 16px;
    color: #0f172a;
    text-align: right;
}

.finance-info-value-bold {
    font-weight: bold;
}

/* Eingabegruppen */
.finance-input-group {
    display: flex;
    min-width: 100%;
    justify-content: space-between;
    position: relative;
}

.finance-input-group-wide {
    flex: 1;
}

.finance-input-group-full {
    grid-column: 1 / span 2;
}

.finance-edit-button {
    width: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #64748b;
    font-size: 18px;
    position: absolute;
    right: -5px;
    top: 5px;
}

/* Header mit Button */
.finance-header-with-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* Annuity section */
.finance-annuity-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(400px, calc((100% / 2)) - 20px), 1fr));
    gap: 20px;
}

.finance-annuity-left {
    flex: 1;
    margin-right: 10px;
    margin-left: 10px;
}

.finance-annuity-sum {
    margin-top: 30px;
    margin-right: 10px;
    margin-left: 10px;
}

.finance-financing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}


/* slider*/

.financeCapitalSlider-container {
    width: 100%;
    padding: 0px;
    position: relative;
}

.financeCapitalSlider-track {
    height: 8px;
    border-radius: 4px;
    position: relative;
    margin: 20px 0 20px;
    background-color: #eaeaea;
}

.financeCapitalSlider-fill {
    position: absolute;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
    width: 51%;
}

.financeCapitalSlider-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--secondary-color);
    border-radius: 50%;
    top: 50%;
    left: 51%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    box-shadow: 0 0 15px var(--secondary-color-50);
    z-index: 2;
}

.financeCapitalSlider-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.financeCapitalSlider-caption {
    position: absolute;
    top: -30px;
    font-size: 16px;
    white-space: nowrap;
    width: auto;
    text-align: center;
}




.finance-bar {
    height: 40px;
    border-radius: 6px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.finance-bar-segment {
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 25px;
}

.finance-bar-interest {
    background-color: var(--primary-color-70);
    border-radius: 6px 0 0 6px;
    left: 0;
}

.finance-bar-repayment {
    background-color: var(--primary-color);
    border-radius: 0 6px 6px 0;
}

.finance-bar-interest-other {
    background-color: #008000a1;
    border-radius: 6px 0 0 6px;
    left: 0;
}

.finance-bar-repayment-other {
    background-color: green;
    border-radius: 0 6px 6px 0;
}

.finance-bar-label {
    left: 5px;
    top: -50px;
    color: black;
    font-size: 14px;
    z-index: 1;
}

/* Pop-up Dialog */
/* Investment cost dialog styles */
.finance-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.finance-dialog {
    background-color: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}


.finance-dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.finance-dialog-button {
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.finance-dialog-button.cancel {
    border: 1px solid #ffffff54;
    background-color: white;
    color: #64748b;
}

.finance-dialog-button.cancel:hover {
    background-color: #f1f5f9;
}

.finance-dialog-button.save {
    border: none;
    background-color: var(--primary-color);
    color: white;
}

.finance-dialog-button.save:hover {
    background-color: var(--primary-color);
}

.finance-dialog-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ffffff54;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    margin-bottom: 24px;
}

.finance-dialog h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #1e293b;
    font-family: Arial, sans-serif;
    font-size: 20px;
}

/* Investment details header */
.investment-details-header {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1.5fr 0.5fr;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}

.header-cell {
    font-size: 14px;
    color: #64748b;
    padding-left: 10px;
}

/* Additional investment detail styles */
.investment-details-dialog {
    width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

.investment-details-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.investment-detail-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1.5fr 0.5fr;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.investment-detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: 14px;
    color: #ebebeb;
    padding: 10px 15px;
    min-width: 200px;
}

.detail-value {
    font-size: 14px;
    color: var(--header-color-light);
    text-align: right;
    padding: 10px;
    min-width: calc(100% - 200px);
}

.detail-edit {
    color: #64748b;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
}

.detail-edit:hover {
    color: var(--primary-color);
}

.total-row {
    background-color: rgba(59, 130, 246, 0.08);
    font-weight: bold;
    border-radius: 6px;
}

.total-row .detail-label,
.total-row .detail-value {
    font-weight: bold;
}

/* 'Show acquisition costs' button styles */
.finance-detail-button {
    background-color: #f1f5f9;
    border: 1px solid #ffffff54;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
}

.finance-detail-button:hover {
    background-color: #e2e8f0;
}

.finance-detail-button svg {
    margin-right: 5px;
    height: 16px;
    width: 16px;
}

/* finance user Content*/

.tabUserContent {
    color: #333;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

.financial-summary {
    margin-bottom: 15px;
    border-bottom: 1px solid #d3d3d3;
}


.summary-details {
    padding: 0;
}


.documents-header {
    padding: 10px 15px;
    background-color: var(--header-color-light);
    color: #000000;
    font-size: 18px;
    font-weight: 500;
}


.documents-list {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.document-item {
    flex: 1 0 calc(50% - 10px);
    min-width: 120px;
    border: 1px solid #ffffff54;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.document-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.document-preview {
    height: 70px;
    background-color: #00000075;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ffffff54;
}

.document-preview svg {
    width: 40px;
    height: 40px;
}

.document-info {
    padding: 8px;
}

.document-name {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--header-color-light);
}

.document-type {
    font-size: 11px;
    color: #e3e3e3
}

.empty-state {
    padding: 15px;
    text-align: center;
    color: #e3e3e3
}

.document-download {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}


/* Tab Left Dashboard Styles */
.tabLeftDashboard-wrapper {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: auto;
}

.tabLeftDashboard-headline {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 16px 0;
    color: #333;
}

.tabLeftDashboard-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
}

.tabLeftDashboard-label {
    flex: 0 0 60%;
    font-weight: bold;
    color: #555;
}

.tabLeftDashboard-value {
    flex: 0 0 40%;
    text-align: right;
    color: #333;
}






/* table popup
 */

.side-panel {
    position: fixed;
    left: -390px;
    top: 120px;
    width: 390px;
    height: calc(100% - 170px);
    z-index: 1000;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}

.configurationPanel-container {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background: rgb(0 9 18 / 60%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    margin-right: 30px;
    border-radius: 20px;
    padding-top: 0px;
    height: calc(100% - 80px);
    margin-top: 95px;
}

.side-panel.open {
    left: 30px;
}

.side-panel.collapsed {
    left: -360px;
}

.panel-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 60px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 0 4px 4px 0;
    border-left: none;
    font-size: 25px;
}

.panel-content {
    height: 100%;
}

.plantGapLayoutContainer{
    position: relative;
    height: 400px;
    background: #fcfcfcad;
    border-radius: 20px;
}

.plantTableImage {
    background-image: url(/wp-content/plugins/energyExperts/assets/media/solarTable.png);
    width: 50px;
    height: 95px;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}

.plantGapContainerInner {
    position: absolute;
}

.plantGapContainerInner.left .plantTableImage {
    background-size: contain;
    background-repeat: no-repeat;
}

.plantGapContainerInner.right .plantTableImage {
    background-size: contain;
    background-repeat: no-repeat;
}

.plantGapContainerInner.middle .plantTableImage {
    background:url(/wp-content/plugins/energyExperts/assets/media/solarTable.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.plantTableMoveRow {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    border-radius: 50%;
    cursor: pointer;
    transition: .5s;
}

#plantTableMoveRowLeft, #plantTableMoveRowRight{
    background: #fff url(/wp-content/plugins/energyExperts/assets/media/drag-left-right.svg) center no-repeat;
    background-size: 25px;
}

#plantTableMoveRowUp, #plantTableMoveRowDown{
    background: #fff url(/wp-content/plugins/energyExperts/assets/media/drag-up-down.svg) center no-repeat;
    background-size: 25px;
}

.plantTableMoveRow:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.plantGapContainerInner.left {
    left: 90px;
    transform: translate(-50%, -50%);
    top: 50%;
}

.plantGapContainerInner.middle {
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}

#plantTableImageMiddleTop {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translate(-50%, -50%);
}

#plantTableImageMiddleMiddle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#plantTableImageMiddleBottom {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.plantGapContainerInner.right {
    transform: translate(-50%, -50%);
    top: 50%;
    right: 40px;
}

#plantTableLeftRowTop, #plantTableLeftRowBottom, #plantTableRightRowTop, #plantTableRightRowBottom{
    margin-top: 5px;
    margin-bottom: 5px;
}

.meterDisplay {
    position: absolute;
    background-color: #00000080;
    width: 50px;
    color: white;
    font-size: 12px;
    text-align: center;
    margin-left: 1px;
    z-index: 2;
    border-radius: 5px;
}

#meterDisplay_up {
    transform: translate(-50%, 0px);
    left: 50%;
    top: 10px;
}

#meterDisplay_down {
    transform: translate(-50%, 0px);
    left: 50%;
    bottom: 10px;
}

#meterDisplay_right {
    transform: translate(0px, -50%);
    top: 50%;
    right: -10px;
}

#meterDisplay_left {
    transform: translate(0px, -50%);
    top: 50%;
    left: -10px;
}

/* Clickable Meter Display */
.ee-meter-clickable {
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.ee-meter-clickable:hover {
    background-color: #000000cc;
}
.ee-meter-input {
    width: 100%;
    background: transparent;
    color: white;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.6);
    font-size: 12px;
    text-align: center;
    padding: 0;
    margin: 0;
    outline: none;
    -moz-appearance: textfield;
    box-sizing: border-box;
}
.ee-meter-input::-webkit-outer-spin-button,
.ee-meter-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/*sidepanel Health*/

.constructionHealthPanel-container {
    position: absolute;
    top: 0;
    width: calc(100% - 30px);
    left: 0;
    z-index: 9;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

/* KPI Dashboard Styles - Option B: Integrated Minimalism */
.constructionHealthPanel-kpi-integrated {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    background: rgb(0 9 18 / 60%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    padding: 20px;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
}

.constructionHealthPanel-kpi-item {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.constructionHealthPanel-kpi-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.constructionHealthPanel-kpi-circle svg {
    width: 32px;
    height: 32px;
    transform: rotate(-90deg);
}

.constructionHealthPanel-kpi-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 3;
}

.constructionHealthPanel-kpi-circle-progress {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.8s ease;
}

.constructionHealthPanel-kpi-text {
    min-width: 0;
    flex: 1;
}

.constructionHealthPanel-kpi-value {
    font-size: 12px;
    font-weight: 700;
    color: white;
    line-height: 1.1;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.constructionHealthPanel-kpi-label {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* KWh Mini Pill */
.constructionHealthPanel-kwh-mini {
    background: rgba(255, 255, 255, 0.3);
    padding: 8px 10px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    flex-shrink: 0;
}

.constructionHealthPanel-kwh-value {
    font-size: 11px;
    font-weight: 600;
    color: white;
    display: block;
    line-height: 1;
    margin-bottom: 1px;
}

.constructionHealthPanel-kwh-label {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.3px;
    line-height: 1;
}

/* Color scheme for KPIs */
.constructionHealthPanel-kpi-item.constructionHealthPanel-roi .constructionHealthPanel-kpi-circle-progress {
    stroke: #34c759;
}

.constructionHealthPanel-kpi-item.constructionHealthPanel-mwp .constructionHealthPanel-kpi-circle-progress {
    stroke: #007aff;
}

.constructionHealthPanel-kpi-item.constructionHealthPanel-ha .constructionHealthPanel-kpi-circle-progress {
    stroke: #ff9500;
}

/* Responsive adjustments */
@media (max-width: 380px) {
    .constructionHealthPanel-kpi-value {
        font-size: 12px;
    }
    .constructionHealthPanel-kpi-label {
        font-size: 9px;
    }
    .constructionHealthPanel-kpi-circle {
        width: 28px;
        height: 28px;
    }
    .constructionHealthPanel-kpi-circle svg {
        width: 28px;
        height: 28px;
    }
    .constructionHealthPanel-kwh-value {
        font-size: 10px;
    }
    .constructionHealthPanel-kwh-label {
        font-size: 7px;
    }
}



/* ===== DesignSperre ===== */
.ee-design-lock-section {
    margin-bottom: 0;
    padding-bottom: 10px;
    margin-top: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ee-design-lock-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 90%;
    margin: 0 auto;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    background: rgba(40, 167, 69, 0.25);
    color: #7dff9f;
    border: 1px solid rgba(40, 167, 69, 0.5);
}

.ee-design-lock-btn.locked {
    background: rgba(220, 53, 69, 0.25);
    color: #ff8a95;
    border: 1px solid rgba(220, 53, 69, 0.5);
}

.ee-design-lock-btn:hover {
    opacity: 0.85;
}

.ee-design-lock-banner {
    margin: 8px auto 0;
    width: 90%;
    padding: 6px 10px;
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.4);
    border-radius: 6px;
    color: #ff8a95;
    font-size: 12px;
    text-align: center;
}

.ee-design-lock-banner.readonly {
    color: #ffcc80;
    background: rgba(255, 152, 0, 0.12);
    border-color: rgba(255, 152, 0, 0.35);
}

/* Wenn Design gesperrt: GESAMTE Einstellungsbox sperren — alle Sections unterhalb des Lock-Buttons */
.configurationPanel-container.design-locked .design-locked-content {
    opacity: 0.45;
    cursor: not-allowed;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

/* Transparent overlay over the entire locked area — blocks ALL mouse interactions */
.configurationPanel-container.design-locked .design-locked-content::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 999;
    cursor: not-allowed;
    background: transparent;
    pointer-events: auto;
}

/* Explicitly lock inputs, sliders, buttons (keyboard fallback via inert; CSS as additional layer) */
.configurationPanel-container.design-locked .design-locked-content input,
.configurationPanel-container.design-locked .design-locked-content button,
.configurationPanel-container.design-locked .design-locked-content select,
.configurationPanel-container.design-locked .design-locked-content textarea,
.configurationPanel-container.design-locked .design-locked-content .plantTableMoveRow {
    pointer-events: none;
    cursor: not-allowed;
}
/* Persistent banner for non-EE users (indicates design is locked) */
.ee-design-lock-global-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    background: rgba(180, 40, 40, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
/* ===== /DesignSperre ===== */

.panel-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    margin-top: 20px;
}

.panel-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* NorthArrow: positioned relative to spacing section */
.panel-section-abstaende {
    position: relative;
}

.plantGapLayoutNorthArrow {
    position: absolute;
    width: 30px;
    height: 30px;
    right: calc(10% + 10px);
    z-index: 1;
    top: 50px;
}

.panel-section h3 {
    font-size: 16px;
    margin: 0 0 15px 5%;
    color: var(--header-color-light);
    padding: 0px;
    width: 90%;
}

.panel-section h4 {
    font-size: 12px;
    margin: 0 0 8px 0;
    color: #0f172a;
    padding: 0px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.info-item {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-left: 5%;
}

.info-item span {
    font-size: 12px;
    color: var(--header-color-light);
    margin-bottom: 3px;
}

.info-item strong {
    font-size: 14px;
    color: var(--header-color-light);
}

.panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.panel-Background{
    background: #fcfcfcad;
    border-radius: 20px;
    border: 0.5px solid #00000012;
    width: 90%;
    margin: auto;
}

.panel-actions button {
    flex: 1;
    min-width: 120px;
    padding: 8px 12px;
    background-color: #353f98;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.2s;
}

.panel-actions button:hover {
    background-color: #2a317c;
}

.headland-visual {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.headland-outer {
    width: 180px;
    height: 180px;
    background-color: #6a4a3499;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}

.headland-inner {
    background-color: #fafafa;
    background-image: url(/wp-content/plugins/energyExperts/assets/media/solarTables.png);
    transition: all 0.3s ease, transform 0.3s ease;
    position: absolute;
    border-radius: 20px;
    background-size: contain;
}

.headland-controls {
    text-align: center;
}

.headland-slider-container {
    width: 100%;
    padding: 0 5%;
}

.headland-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #ddd;
    outline: none;
    opacity: 0.8;
    transition: opacity 0.2s;
    cursor: pointer;
}

.headland-slider:hover {
    opacity: 1;
}

.headland-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--secondary-color);
    cursor: pointer;
}

.headland-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
    border: none;
}

.headland-value {
    margin-top: 10px;
    font-weight: bold;
    color: var(--header-color-light);
}

/*polygone drawing*/


:root {
    --polygoneDraw-primary: var(--primary-color);
    --polygoneDraw-primary-dark: var(--primary-color);
    --polygoneDraw-success: #28a745;
    --polygoneDraw-success-dark: #218838;
    --polygoneDraw-danger: #dc3545;
    --polygoneDraw-danger-dark: #c82333;
    --polygoneDraw-warning: #ffc107;
    --polygoneDraw-info: #17a2b8;
    --polygoneDraw-secondary: #6c757d;
    --polygoneDraw-light: #f8f9fa;
    --polygoneDraw-dark: #343a40;

    --polygoneDraw-border: #e1e5e9;
    --polygoneDraw-border-hover: var(--secondary-color);
    --polygoneDraw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --polygoneDraw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --polygoneDraw-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);

    --polygoneDraw-radius-sm: 4px;
    --polygoneDraw-radius-md: 8px;
    --polygoneDraw-radius-lg: 12px;

    --polygoneDraw-transition: all 0.2s ease;
    --polygoneDraw-transition-fast: all 0.1s ease;
}


.polygoneDraw-types-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.polygoneDraw-type-section {

    padding: 15px;
}


.polygoneDraw-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.polygoneDraw-type-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--header-color-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.polygoneDraw-type-header h4::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, var(--polygoneDraw-primary), var(--polygoneDraw-info));
    border-radius: 1px;
}

.polygoneDraw-add-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--polygoneDraw-primary), var(--polygoneDraw-primary-dark));
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--polygoneDraw-transition);
    box-shadow: var(--polygoneDraw-shadow-sm);
    position: relative;
    overflow: hidden;
}

.polygoneDraw-add-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.polygoneDraw-add-btn:hover {
    background: linear-gradient(135deg, var(--polygoneDraw-primary-dark), var(--secondary-color));
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px var(--secondary-color-50);
}

.polygoneDraw-add-btn:hover::before {
    left: 100%;
}

.polygoneDraw-add-btn:active {
    transform: translateY(0) scale(1);
    box-shadow: var(--polygoneDraw-shadow-sm);
}

.scan-obstacle-btn{
    margin-left: auto;
    margin-right: 10px;
    fill: white;
    stroke: white;
}

.scan-obstacle-btn svg {
    pointer-events: none;
}

/* Toggle button for visibility controls (e.g., dimension rings eye icon) */
.polygoneDraw-toggle-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--polygoneDraw-primary), var(--polygoneDraw-primary-dark));
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--polygoneDraw-transition);
    box-shadow: var(--polygoneDraw-shadow-sm);
    position: relative;
    overflow: hidden;
    margin-left: auto;
    margin-right: 10px;
    fill: white;
    stroke: white;
}

.polygoneDraw-toggle-btn:hover {
    background: linear-gradient(135deg, var(--polygoneDraw-primary-dark), var(--secondary-color));
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px var(--secondary-color-50);
}

.polygoneDraw-toggle-btn:active {
    transform: translateY(0) scale(1);
    box-shadow: var(--polygoneDraw-shadow-sm);
}

.polygoneDraw-toggle-btn svg {
    pointer-events: none;
}




/* ============================================================================
   POLYGON TILES
   ============================================================================ */

.polygoneDraw-tiles {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 50px;
    max-height: none;
    overflow-y: auto;
    padding: 0px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.polygoneDraw-tiles::-webkit-scrollbar {
    width: 4px;
}

.polygoneDraw-tiles::-webkit-scrollbar-track {
    background: transparent;
}

.polygoneDraw-tiles::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

.polygoneDraw-empty-state {
    padding: 40px 20px;
    text-align: center;
    font-size: 15px;
    color: #86868b;
    font-weight: 400;
}

/* ============================================================================
   POLYGON CARD - REFINED
   ============================================================================ */

.polygon-card {
    background: rgb(224 224 224 / 60%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: all 0.2s ease;
}

.polygon-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--polygon-color, #d1d1d6);
    opacity: 0.8;
}

.polygon-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* ============================================================================
   HEADER SECTION
   ============================================================================ */

.polygon-header {
    padding: 16px 16px 12px 16px;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.color-picker {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    appearance: none;
    background: transparent;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.color-picker:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.15);
}

.color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
    border: none;
    border-radius: 50%;
}

.color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.title-edit {
    border: none!important;
    background: transparent!important;
    font-size: 17px;
    font-weight: 600;
    color: #ededed !important;
    letter-spacing: -0.022em;
    width: calc(100% - 50px);
    padding: 0!important;
    outline: none;
    font-family: inherit;
    line-height: 1.3;
}

.title-edit:focus {
    background: rgba(0, 122, 255, 0.04);
    border-radius: 6px;
    padding: 4px 6px;
}

/* ============================================================================
   SPECS SECTION
   ============================================================================ */

.polygon-specs {
    padding: 0 16px 16px 16px;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    min-height: 32px;
}

.spec-label {
    font-size: 15px;
    font-weight: 400;
    color: #e0e0e0;
    flex: 1;
}

.spec-value {
    font-size: 15px;
    font-weight: 500;
    color: #e0e0e0;
    font-feature-settings: 'tnum';
    letter-spacing: -0.01em;
    width: 60px;
    padding: 0px 6px;
}

/* Input fields in spec-value (for cadastral parcel properties) */
input.spec-value {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    width: 100%;
    max-width: 150px;
    padding: 4px 8px;
    font-size: 13px;
    transition: all 0.2s ease;
}

input.spec-value:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
}

input.spec-value:focus {
    outline: none;
    border-color: var(--polygoneDraw-primary, #4A90D9);
    background: rgba(255, 255, 255, 0.15);
}

input.spec-value::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

.spec-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.spec-input {
    border: none;
    background: rgba(0, 0, 0, 0.2);
    font-size: 15px;
    font-weight: 500;
    color: #e0e0e0;
    font-feature-settings: 'tnum';
    letter-spacing: -0.01em;
    width: 60px;
    text-align: left;
    outline: none;
    font-family: inherit;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.spec-input:focus {
    background: rgba(0, 122, 255, 0.06);
    box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.2);
}

.spec-unit {
    font-size: 15px;
    font-weight: 400;
    color: #cfcfcf;
    min-width: 40px;
}

/* ============================================================================
   HARDWARE SECTION - SYSTEM COMPONENTS (revised)
   ============================================================================ */

.hardware-section {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.015);
}

/* Abschnitts-Header */
.hardware-section-header {
    padding: 10px 16px 4px;
    font-size: 10px;
    font-weight: 600;
    color: #aeaeb2;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Flat grid — all items directly visible, no expand needed */
.hardware-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px 12px 10px;
}

.hardware-item {
    text-align: center;
    padding: 8px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    border: 1px solid rgba(0, 0, 0, 0.04);
    min-width: 0;
}

.hardware-item:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 122, 255, 0.18);
    transform: translateY(-1px);
}

.hardware-icon {
    font-size: 14px;
    margin-bottom: 2px;
    color: #34c759;
}

.hardware-value {
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
    font-feature-settings: 'tnum';
    line-height: 1;
    margin-bottom: 2px;
}

.hardware-text {
    font-size: 10px;
    font-weight: 500;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CAPEX/kWp Leiste am unteren Rand */
.hardware-capex-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(0, 122, 255, 0.04);
}

.hardware-capex-label {
    font-size: 11px;
    font-weight: 600;
    color: #0071e3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hardware-capex-value {
    font-size: 13px;
    font-weight: 700;
    color: #0071e3;
    font-feature-settings: 'tnum';
}

/* Legacy classes kept (do not remove — may still be referenced) */
.hardware-compact {
    display: flex;
    padding: 12px 16px;
    gap: 16px;
}

.expand-toggle { display: none; }
.hardware-expandable { display: none; }

/* ============================================================================
   ACTION BUTTONS - MINIMAL
   ============================================================================ */

.polygon-actions {
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    gap: 8px;
}

.btn-edit,
.btn-delete {
    flex: 1;
    height: 36px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    letter-spacing: -0.01em;
}

.btn-edit {
    background: #1d1d1f;
    color: #ffffff;
}

.btn-edit:hover {
    background: #2c2c2e;
    transform: translateY(-1px);
}

.btn-delete {
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.btn-delete:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}


.btn-save {
    background-color: #28a745 !important; /* Green */
    color: white !important;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 400px) {
    .polygon-card {
        border-radius: 10px;
    }

    .polygon-header,
    .polygon-specs,
    .polygon-actions {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hardware-compact,
    .hardware-grid {
        padding-left: 12px;
        padding-right: 12px;
    }
}
















/* ============================================================================
   POPUP OVERLAY & MODAL
   ============================================================================ */
.polygoneDraw-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(8px);
    animation: polygoneDraw-fadeIn 0.3s ease;
}

@keyframes polygoneDraw-fadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

.polygoneDraw-popup-content {
    background: white;
    border-radius: var(--polygoneDraw-radius-lg);
    width: 450px;
    max-width: 95vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--polygoneDraw-shadow-lg);
    animation: polygoneDraw-slideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 3px solid var(--polygoneDraw-primary);
}



.polygoneDraw-dropdown {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
}

.polygoneDraw-dropdown:focus {
    border-color: #007cba;
    outline: none;
    box-shadow: 0 0 0 1px #007cba;
}

.polygoneDraw-placement-info {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 12px;
    margin-top: 10px;
}

.polygoneDraw-placement-info .polygoneDraw-help-text {
    margin: 0;
    font-size: 13px;
    color: #495057;
    line-height: 1.4;
}

.polygoneDraw-draw-button:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

.polygoneDraw-dimensions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

@media (max-width: 600px) {
    .polygoneDraw-dimensions-grid {
        grid-template-columns: 1fr;
    }
}

@keyframes polygoneDraw-slideIn {
    from {
        transform: translateY(-50px) scale(0.8);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.polygoneDraw-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 2px solid var(--polygoneDraw-border);
    background: linear-gradient(135deg, var(--polygoneDraw-light), #e9ecef);
}

.polygoneDraw-popup-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--polygoneDraw-dark);
    display: flex;
    align-items: center;
}

.polygoneDraw-popup-header h3::before {
    content: '\270F';
    margin-right: 10px;
    font-size: 18px;
}

.polygoneDraw-popup-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--polygoneDraw-secondary);
    padding: 5px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--polygoneDraw-transition);
}

.polygoneDraw-popup-close:hover {
    background: rgba(220, 53, 69, 0.1);
    color: var(--polygoneDraw-danger);
    transform: rotate(180deg) scale(1.1);
}

.polygoneDraw-popup-body {
    padding: 25px;
    max-height: 60vh;
    overflow-y: auto;
}

/* ============================================================================
   FORM ELEMENTS
   ============================================================================ */
.polygoneDraw-form-group {
    margin-bottom: 20px;
    position: relative;
}

.polygoneDraw-form-group:last-child {
    margin-bottom: 0;
}

.polygoneDraw-form-group label,
.polygoneDraw-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--polygoneDraw-dark);
    font-size: 14px;
    position: relative;
}

.polygoneDraw-form-group input,
.polygoneDraw-input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--polygoneDraw-border);
    border-radius: var(--polygoneDraw-radius-md);
    font-size: 14px;
    box-sizing: border-box;
    transition: var(--polygoneDraw-transition);
    background: white;
    font-family: inherit;
}

.polygoneDraw-form-group input:focus,
.polygoneDraw-input:focus {
    outline: none;
    border-color: var(--polygoneDraw-primary);
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
    background: linear-gradient(135deg, #ffffff, #f0f8ff);
    transform: translateY(-1px);
}

.polygoneDraw-form-group input:hover:not(:focus),
.polygoneDraw-input:hover:not(:focus) {
    border-color: var(--polygoneDraw-border-hover);
    box-shadow: var(--polygoneDraw-shadow-sm);
}

.polygoneDraw-form-group input[type="color"] {
    height: 50px;
    padding: 5px;
    cursor: pointer;
}

.polygoneDraw-form-group input[type="number"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a.5.5 0 0 1 .5.5v7H14a.5.5 0 0 1 0 1H8.5v7a.5.5 0 0 1-1 0V8.5H1a.5.5 0 0 1 0-1h6.5V.5A.5.5 0 0 1 8 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

/* Direction Toggle for Dimension Rings */
.polygoneDraw-direction-toggle {
    display: flex;
    gap: 8px;
}

.polygoneDraw-dir-btn {
    flex: 1;
    padding: 10px 16px;
    background: var(--polygoneDraw-bg);
    border: 1px solid var(--polygoneDraw-border);
    border-radius: var(--polygoneDraw-radius-md);
    color: var(--polygoneDraw-text-muted);
    cursor: pointer;
    transition: var(--polygoneDraw-transition);
    font-size: 14px;
    font-weight: 500;
}

.polygoneDraw-dir-btn:hover {
    border-color: var(--polygoneDraw-primary);
    color: var(--polygoneDraw-primary);
}

.polygoneDraw-dir-btn.active {
    background: linear-gradient(135deg, var(--polygoneDraw-primary), #0056b3);
    border-color: var(--polygoneDraw-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

/* Dimension Ring Section */
.polygoneDraw-dimensionRing-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--polygoneDraw-border);
}

/* Cadastral parcel section */
.polygoneDraw-flurstueck-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--polygoneDraw-border);
}

/* Input Method Toggle (Zeichnen/Upload) */
.polygoneDraw-input-method-toggle {
    display: flex;
    gap: 8px;
}

.polygoneDraw-method-btn {
    flex: 1;
    padding: 10px 16px;
    background: var(--polygoneDraw-bg);
    border: 1px solid var(--polygoneDraw-border);
    border-radius: var(--polygoneDraw-radius-md);
    color: var(--polygoneDraw-text-muted);
    cursor: pointer;
    transition: var(--polygoneDraw-transition);
    font-size: 14px;
    font-weight: 500;
}

.polygoneDraw-method-btn:hover {
    border-color: var(--polygoneDraw-primary);
    color: var(--polygoneDraw-primary);
}

.polygoneDraw-method-btn.active {
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    border-color: #4CAF50;
    color: white;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

/* Form Row for side-by-side fields */
.polygoneDraw-form-row {
    display: flex;
    gap: 12px;
}

.polygoneDraw-form-row .polygoneDraw-form-group {
    flex: 1;
}

/* Upload Area */
.polygoneDraw-upload-section {
    margin-top: 12px;
}

.polygoneDraw-upload-area {
    border: 2px dashed var(--polygoneDraw-border);
    border-radius: var(--polygoneDraw-radius-md);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: var(--polygoneDraw-transition);
    background: var(--polygoneDraw-bg);
}

.polygoneDraw-upload-area:hover {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.05);
}

.polygoneDraw-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--polygoneDraw-text-muted);
}

.polygoneDraw-upload-content svg {
    color: var(--polygoneDraw-text-muted);
}

.polygoneDraw-upload-area:hover .polygoneDraw-upload-content svg {
    color: #4CAF50;
}

/* Cadastral parcel fields */
.polygoneDraw-flurstueck-fields {
    margin-top: 12px;
}

#polygoneDraw-type-display,
.polygoneDraw-type-display {
    font-weight: 700;
    color: var(--polygoneDraw-primary);
    padding: 14px 18px;
    background: linear-gradient(135deg, #e7f3ff, #cce7ff);
    border-radius: var(--polygoneDraw-radius-md);
    display: inline-block;
    border: 2px solid var(--polygoneDraw-border-hover);
    font-size: 14px;
    min-width: 80px;
    text-align: center;
    box-shadow: inset 0 1px 3px rgba(0, 123, 255, 0.1);
}

/* ============================================================================
   POPUP FOOTER & BUTTONS
   ============================================================================ */
.polygoneDraw-popup-footer {
    padding: 20px 25px;
    border-top: 2px solid var(--polygoneDraw-border);
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.polygoneDraw-draw-button,
.polygoneDraw-cancel-button {
    border: none;
    padding: 12px 24px;
    border-radius: var(--polygoneDraw-radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: var(--polygoneDraw-transition);
    min-width: 120px;
    position: relative;
    overflow: hidden;
}

.polygoneDraw-draw-button {
    background: linear-gradient(135deg, var(--polygoneDraw-success), #20c997);
    color: white;
    box-shadow: var(--polygoneDraw-shadow-sm);
}

.polygoneDraw-draw-button:hover {
    background: linear-gradient(135deg, var(--polygoneDraw-success-dark), #1e7e34);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.polygoneDraw-cancel-button {
    background: linear-gradient(135deg, var(--polygoneDraw-secondary), #5a6268);
    color: white;
    box-shadow: var(--polygoneDraw-shadow-sm);
}

.polygoneDraw-cancel-button:hover {
    background: linear-gradient(135deg, #5a6268, #495057);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
}

.polygoneDraw-draw-button:active,
.polygoneDraw-cancel-button:active {
    transform: translateY(0);
    box-shadow: var(--polygoneDraw-shadow-sm);
}

/* ============================================================================
   INFO PANELS
   ============================================================================ */
.polygoneDraw-drawing-info,
.polygoneDraw-editing-info {
    position: fixed;
    top: 20px;
    background: white;
    border-radius: var(--polygoneDraw-radius-lg);
    padding: 20px;
    box-shadow: var(--polygoneDraw-shadow-lg);
    z-index: 9999;
    min-width: 300px;
    max-width: 400px;
    border: 3px solid var(--polygoneDraw-primary);
}

.polygoneDraw-drawing-info {
    right: 20px;
    border-color: var(--polygoneDraw-primary);
    animation: polygoneDraw-slideInRight 0.4s ease;
}

.polygoneDraw-editing-info {
    left: 20px;
    border-color: var(--polygoneDraw-success);
    animation: polygoneDraw-slideInLeft 0.4s ease;
}

@keyframes polygoneDraw-slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes polygoneDraw-slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.polygoneDraw-drawing-info-content,
.polygoneDraw-editing-info-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
    line-height: 1.4;
}

.polygoneDraw-drawing-info-content > div:first-child,
.polygoneDraw-editing-info-content > div:first-child {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 16px;
    text-align: center;
    padding: 10px;
    border-radius: var(--polygoneDraw-radius-md);
}

.polygoneDraw-drawing-info-content > div:first-child {
    color: var(--polygoneDraw-primary);
    background: linear-gradient(135deg, #e7f3ff, #cce7ff);
}

.polygoneDraw-editing-info-content > div:first-child {
    color: var(--polygoneDraw-success);
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
}

.polygoneDraw-drawing-info-content > div,
.polygoneDraw-editing-info-content > div {
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.polygoneDraw-cancel-draw-btn,
.polygoneDraw-stop-edit-btn {
    margin-top: 15px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--polygoneDraw-radius-md);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: var(--polygoneDraw-transition);
    width: 100%;
}

.polygoneDraw-cancel-draw-btn {
    background: linear-gradient(135deg, var(--polygoneDraw-danger), #e85d75);
    color: white;
    box-shadow: var(--polygoneDraw-shadow-sm);
}

.polygoneDraw-cancel-draw-btn:hover {
    background: linear-gradient(135deg, var(--polygoneDraw-danger-dark), #a71e2a);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.polygoneDraw-stop-edit-btn {
    background: linear-gradient(135deg, var(--polygoneDraw-success), #20c997);
    color: white;
    box-shadow: var(--polygoneDraw-shadow-sm);
}

.polygoneDraw-stop-edit-btn:hover {
    background: linear-gradient(135deg, var(--polygoneDraw-success-dark), #1e7e34);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}


/* ============================================================================
   LOADING & STATES
   ============================================================================ */
.polygoneDraw-loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.polygoneDraw-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid var(--polygoneDraw-light);
    border-top: 3px solid var(--polygoneDraw-primary);
    border-radius: 50%;
    animation: polygoneDraw-spin 1s linear infinite;
    z-index: 10;
}

@keyframes polygoneDraw-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.polygoneDraw-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.polygoneDraw-error {
    border-color: var(--polygoneDraw-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}

.polygoneDraw-success {
    border-color: var(--polygoneDraw-success) !important;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1) !important;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */
.polygoneDraw-hidden {
    display: none !important;
}

.polygoneDraw-invisible {
    visibility: hidden;
}

.polygoneDraw-no-scroll {
    overflow: hidden;
}

.polygoneDraw-text-center {
    text-align: center;
}

.polygoneDraw-text-left {
    text-align: left;
}

.polygoneDraw-text-right {
    text-align: right;
}

.polygoneDraw-mb-0 { margin-bottom: 0 !important; }
.polygoneDraw-mb-1 { margin-bottom: 5px !important; }
.polygoneDraw-mb-2 { margin-bottom: 10px !important; }
.polygoneDraw-mb-3 { margin-bottom: 15px !important; }

.polygoneDraw-mt-0 { margin-top: 0 !important; }
.polygoneDraw-mt-1 { margin-top: 5px !important; }
.polygoneDraw-mt-2 { margin-top: 10px !important; }
.polygoneDraw-mt-3 { margin-top: 15px !important; }

/* ============================================================================
   ANIMATIONS & KEYFRAMES
   ============================================================================ */
@keyframes polygoneDraw-bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        transform: translate3d(0, -15px, 0);
    }
    70% {
        transform: translate3d(0, -8px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

@keyframes polygoneDraw-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes polygoneDraw-shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.polygoneDraw-bounce {
    animation: polygoneDraw-bounce 1s ease-in-out;
}

.polygoneDraw-pulse {
    animation: polygoneDraw-pulse 2s infinite;
}

.polygoneDraw-shake {
    animation: polygoneDraw-shake 0.5s ease-in-out;
}



/* ============================================================================
   CUSTOM SCROLLBARS FOR ALL ELEMENTS
   ============================================================================ */
.polygoneDraw-popup-body::-webkit-scrollbar,
.polygoneDraw-tiles::-webkit-scrollbar {
    width: 8px;
}

.polygoneDraw-popup-body::-webkit-scrollbar-track,
.polygoneDraw-tiles::-webkit-scrollbar-track {
    background: var(--polygoneDraw-light);
    border-radius: 4px;
}

.polygoneDraw-popup-body::-webkit-scrollbar-thumb,
.polygoneDraw-tiles::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--polygoneDraw-primary), var(--polygoneDraw-primary-dark));
    border-radius: 4px;
    border: 1px solid var(--polygoneDraw-border);
}

.polygoneDraw-popup-body::-webkit-scrollbar-thumb:hover,
.polygoneDraw-tiles::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--polygoneDraw-primary-dark), #004085);
}

/* ============================================================================
   FINAL POLISH & MICRO-INTERACTIONS
   ============================================================================ */
.polygoneDraw-tile-name-input:invalid {
    border-color: var(--polygoneDraw-danger);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.polygoneDraw-tile-name-input:valid {
    border-color: var(--polygoneDraw-success);
}

.polygoneDraw-form-group input:required:invalid {
    border-color: var(--polygoneDraw-danger);
}

.polygoneDraw-form-group input:required:valid {
    border-color: var(--polygoneDraw-success);
}


/* Enhanced focus indicators for better accessibility */
.polygoneDraw-tile:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
    border-color: var(--polygoneDraw-primary);
}

/* Smooth transitions for all interactive elements */
* {
    -webkit-tap-highlight-color: transparent;
}

.polygoneDraw-tile *,
.polygoneDraw-popup *,
.polygoneDraw-add-btn,
.polygoneDraw-drawing-info *,
.polygoneDraw-editing-info * {
    transition: var(--polygoneDraw-transition);
}


.drawing-info-panel, .editing-info-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border: 2px solid var(--primary-color, #007bff);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    max-width: 300px;
    font-family: inherit;
}

.drawing-info-panel .info-content h3,
.editing-info-panel .info-content h3 {
    margin: 0 0 10px 0;
    color: var(--primary-color, #007bff);
    font-size: 16px;
}

.drawing-info-panel .info-content p,
.editing-info-panel .info-content p {
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.4;
}

.drawing-info-panel button,
.editing-info-panel button {
    background: var(--primary-color, #007bff);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
}

.drawing-info-panel button:hover,
.editing-info-panel button:hover {
    opacity: 0.9;
}
/* Basis Polygon Tile */
.polygon-tile {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 0.5px solid #00000012;
}

/* Hauptbereich des Tiles */
.polygon-tile .tile-main {
    margin-bottom: 10px;
}

/* Container for name and color side by side */
.polygon-tile .tile-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* Name Input */
.polygon-tile .polygon-name {
    border: none;
    background: none;
    font-size: 16px;
    font-weight: 600;
}

.polygon-tile .polygon-name:focus {
    outline: none;
    border-bottom: 1px solid #6e6e6e;
}

/* Farb-Input */


.polygon-color {
    width: 15px;
    height: 15px;

    /* Rund machen */
    border-radius: 50%;

    /* Kein sichtbarer Rahmen */
    border: none;
    outline: none;

    /* Optional: shadow for better visibility */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 0;

    /* Entfernt den Standard-Hintergrund auf manchen Browsern */
    background: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* For Webkit browsers (Chrome, Safari) */
.polygon-color::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%;
}
.polygon-color::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

/* For Firefox */
.polygon-color::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}


/* Info-Bereich */
.polygon-tile .tile-info {
    flex: 1;
}

/* Meta-Informationen untereinander */
.polygon-tile .tile-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #666;
}

/* Height container with input */
.polygon-tile .tile-height-container {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.polygon-tile .polygon-height {
    width: 50px;
    padding: 0px;
    border: none;
    background: none;
}

.polygon-tile .polygon-height:focus {
        outline: none;
        border-bottom: 1px solid #6e6e6e;
}

.polygon-tile .polygon-maxmwp{
    width: 50px;
    padding: 0px;
    border: none;
    background: none;
}

.polygon-tile .polygon-maxmwp:focus {
    outline: none;
    border-bottom: 1px solid #6e6e6e;
}

.reset-maxmwp-btn {
    background: none;
    border: none;
    width: 15px;
    height: 15px;
    padding: 0px;
    fill: var(--third-color);
    position: absolute;
    right: 2px;
    cursor: pointer;
}

/* Dimensionen Info */
.polygon-tile .tile-dimensions {
    font-size: 12px;
    color: #888;
    font-weight: 500;
}


/* Action Buttons */
.polygon-tile .tile-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

    .polygon-tile .tile-actions button {
        padding: 5px 20px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.8);
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.2s ease;
        color: #e9e5e5;
        border: none;
    }

button.polygoneDraw-tile-delete {
    background-color: #c6c6c6 !important;
    color: black !important;
}


.polygon-tile .polygoneDraw-tile-edit:hover {
    transform: scale(1.05);
}

.polygon-tile .polygoneDraw-tile-delete:hover {
    transform: scale(1.05);
}

/* Dashboard ansicht */

/* Solar Dashboard CSS - Complete */
#heroViewPdf{
    padding-bottom: 0px;
}

/* PDF Button */
.dashboardPdf-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(100% + 44px);
    height: 48px;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: var(--header-color-light);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: none;
    overflow: hidden;
    outline: none;
    margin-left: -22px;
    margin-bottom: -2px;
}


.dashboardPdf-button:active {
    transform: translateY(-1px);
    transition: all 0.1s ease;
}

.download-files-button-dashboard-wrapper {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

/* Enhanced loading state */
.dashboardPdf-button.processing {
    cursor: not-allowed;
}


.dashboardPdf-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.dashboardPdf-content:hover {
    transform: scale(1.05);
}

.dashboardPdf-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.dashboardPdf-text {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: all 0.3s ease;
}

/* Minimal progress circle */
.dashboardPdf-progress-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    margin-left: -9px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dashboardPdf-progress-circle.visible {
    opacity: 1;
}

.dashboardPdf-progress-circle svg {
    width: 18px;
    height: 18px;
    transform: rotate(-90deg);
}

.dashboardPdf-progress-circle-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.08);
    stroke-width: 2;
}

.dashboardPdf-progress-circle-fill {
    fill: none;
    stroke: #3fa14d;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 50.27;
    stroke-dashoffset: 50.27;
    transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Prominenter Fortschrittsbalken */
.dashboardPdf-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #3fa14d, #00d4aa);
    width: 0%;
    transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    box-shadow: 0 0 8px rgba(63, 161, 77, 0.3);
    border-radius: 0px 0px 50px 50px;
}

.dashboardPdf-progress-bar.visible {
    opacity: 1;
}

/* Animierter Glanz-Effekt auf dem Fortschrittsbalken */
.dashboardPdf-progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%);
    animation: progress-shine 2s ease-in-out infinite;
    border-radius: inherit;
}

@keyframes progress-shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Detaillierte Fortschrittsphasen mit 2s Mindestdauer */
.dashboardPdf-button.phase-1 .dashboardPdf-content {
    opacity: 0.7;
}

.dashboardPdf-button.phase-2 .dashboardPdf-content {
    opacity: 0.7;
}

.dashboardPdf-button.phase-3 .dashboardPdf-content {
    opacity: 0.7;
}

.dashboardPdf-button.phase-4 .dashboardPdf-content {
    opacity: 0.7;
}

/* Precise progress bar - each phase 2s */
.dashboardPdf-button.phase-1 .dashboardPdf-progress-bar {
    width: 25%;
}

.dashboardPdf-button.phase-2 .dashboardPdf-progress-bar {
    width: 50%;
}

.dashboardPdf-button.phase-3 .dashboardPdf-progress-bar {
    width: 75%;
}

.dashboardPdf-button.phase-4 .dashboardPdf-progress-bar {
    width: 95%;
}

/* Precise progress circle - synced with bar */
.dashboardPdf-button.phase-1 .dashboardPdf-progress-circle-fill {
    stroke-dashoffset: 37.7; /* 25% */
}

.dashboardPdf-button.phase-2 .dashboardPdf-progress-circle-fill {
    stroke-dashoffset: 25.1; /* 50% */
}

.dashboardPdf-button.phase-3 .dashboardPdf-progress-circle-fill {
    stroke-dashoffset: 12.6; /* 75% */
}

.dashboardPdf-button.phase-4 .dashboardPdf-progress-circle-fill {
    stroke-dashoffset: 2.5; /* 95% */
}

/* Success state */
.dashboardPdf-button.success {
    color: var(--header-color-light);
}


.dashboardPdf-button.success .dashboardPdf-content {
    opacity: 1;
}

.dashboardPdf-button.success .dashboardPdf-progress-bar {
    opacity: 0;
    width: 100%;
}

.dashboardPdf-button.success .dashboardPdf-progress-circle {
    opacity: 0;
}

.dashboardPdf-button.success .dashboardPdf-progress-circle-fill {
    stroke-dashoffset: 0;
}

.dashboardPdf-button.success .dashboardPdf-icon {
    opacity: 1;
}

/* Dashboard View Styles moved to ee-widget-styles.css */













/* ============================================================================
   AZIMUTH-FELD STYLING
   ============================================================================ */


.polygon-azimuth:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Special styling for rotation/azimuth field */
.spec-row:has(.polygon-azimuth) .spec-label::after {
    content: " \2316";
    opacity: 0.6;
}

/* ============================================================================
   RESPONSIVE ANPASSUNGEN
   ============================================================================ */

@media (max-width: 768px) {
    .map-click-info {
        left: 20px;
        right: 20px;
        transform: none;
        top: 10px;
    }

    .map-click-info .info-content {
        flex-direction: row;
        text-align: left;
    }

    .map-click-info .info-text {
        font-size: 14px;
    }
}


/* Drag-Info Styling */
.drag-info {
    position: fixed;
    bottom: 120px;
    right: 20px;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.drag-info.active {
    opacity: 1;
    transform: translateY(0);
}

.drag-info .info-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drag-info .info-icon {
    font-size: 16px;
}

.drag-info .info-text {
    font-weight: 500;
}

.drag-info .info-hint {
    font-size: 12px;
    opacity: 0.8;
    margin-left: 24px;
    margin-top: 4px;
}


/* Finance Table Styles - Jony Ive Design */
.financeTable-container {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 30px;
}

.financeTable-header {
    padding: 20px 30px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.financeTable-title {
    font-size: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.financeTable-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* CENTRAL PV-REVENUE REFERENCE YEAR selector (feature/bilanz-central-refyear) */
.ee-refyear-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}
.ee-refyear-select {
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    cursor: pointer;
    appearance: auto;
}
.ee-refyear-prognosis-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(255, 184, 0, 0.16);
    border: 1px solid rgba(255, 184, 0, 0.4);
    border-radius: 999px;
    color: #ffb800;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
/* Second ref-year selector inside the Energieausbeute widget controls bar.
   Mirrors the Bilanz selector look; aligns inline within the flex controls. */
.ee-energie-refyear-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
}

.financeTable-toggle {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    font-family: inherit;
}

.financeTable-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
}

.financeTable-toggle.active {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.financeTable-wrapper{
    overflow: scroll;
}

.financeTable {
    width: 100%;
    border-collapse: collapse;
    min-width: 1200px;
    font-size: 13px;
    border: none!important;
    margin: 0px!important;
}

.financeTable thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #0a0a0a;
}

.financeTable thead tr {
    background: rgba(255, 255, 255, 0.08);
}

.financeTable th {
    padding: 16px 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7)!important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    position: relative;
    white-space: nowrap;
}

.financeTable th:first-child,
.financeTable-sticky {
    text-align: left !important;
    position: sticky;
    left: 0;
    z-index: 9;
    background: #0a0a0a;
    min-width: 200px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.financeTable-year {
    font-size: 11px;
    opacity: 0.5;
}

/* Retrospektive Ist+Prognose-Kurve: Quellen-Badges pro Jahr (Konzept v3 §4) */
.ee-source-badge {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.3px;
    white-space: nowrap;
    cursor: help;
}
.ee-source-badge.ee-src-real {
    background: rgba(46, 204, 113, 0.18);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.45);
}
.ee-source-badge.ee-src-mixed {
    background: rgba(241, 196, 15, 0.18);
    color: #f1c40f;
    border: 1px solid rgba(241, 196, 15, 0.45);
}
.ee-source-badge.ee-src-forecast {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
    border: 1px dashed rgba(52, 152, 219, 0.5);
}

.financeTable tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.financeTable tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.financeTable td {
    padding: 14px 12px;
    color: rgba(255, 255, 255, 0.9);
}

.financeTable-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
    min-width: 200px;
}

.financeTable-value.positive {
    color: #4ade80;
}

.financeTable-value.negative {
    color: #f87171;
}

.financeTable-change {
    display: block;
    font-size: 10px;
    margin-top: 2px;
    opacity: 0.7;
}

.financeTable-change.positive {
    color: #4ade80;
}

.financeTable-change.negative {
    color: #f87171;
}

/* Section Rows */
.financeTable-section td {
    background: rgba(255, 255, 255, 0.02);
    font-weight: 600;
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Cashflow Rows */
.financeTable-cashflow {
    background: rgba(79, 70, 229, 0.05);
}

.financeTable-total {
    background: rgba(255, 255, 255, 0.05);
    font-weight: 600;
}

.financeTable-total td {
    color: #fff;
    border-top: 2px solid rgba(255, 255, 255, 0.15);
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Scrollbar Styling */
.financeTable-wrapper::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.financeTable-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.financeTable-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.financeTable-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Error & No Data States */
.financeTable-nodata,
.financeTable-error {
    padding: 40px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.financeTable-error {
    color: #f87171;
}

/* Responsive */
@media (max-width: 768px) {
    .financeTable-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .financeTable th,
    .financeTable td {
        padding: 10px 8px;
        font-size: 12px;
    }

    .financeTable-sticky {
        min-width: 150px;
    }
}

.financeTable-expandable {
    cursor: pointer;
    user-select: none;
}

.financeTable-expand-icon {
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.3s ease;
}

.financeTable-detail {
    background: rgba(255, 255, 255, 0.02);
}

.financeTable-detail-indicator {
    opacity: 0.5;
    margin-right: 6px;
}

.financeTable-controls {
    display: flex;
    gap: 10px;
}



/* Minimalistischer Threshold Bar */
.metric-threshold-visual {
    position: relative;
    padding: 30px 0 40px 0;
}

.metric-threshold-gradient-bar {
    position: relative;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg,
    #ef4444 0%,
    #f87171 15%,
    #fb923c 30%,
    #fbbf24 45%,
    #fde047 60%,
    #a3e635 75%,
    #4ade80 90%,
    #22c55e 100%
    );
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.metric-threshold-position {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: left 0.3s ease;
}

.metric-threshold-marker {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 3px solid #1a1a1a;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.metric-threshold-current-value {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: #2d2d2d;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #4a4a4a;
    white-space: nowrap;
    font-weight: 600;
    font-size: 13px;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* For inverted metrics (where lower is better) */
.metric-threshold-visual.inverted .metric-threshold-gradient-bar {
    background: linear-gradient(90deg,
    #22c55e 0%,
    #4ade80 10%,
    #a3e635 25%,
    #fde047 40%,
    #fbbf24 55%,
    #fb923c 70%,
    #f87171 85%,
    #ef4444 100%
    );
}

/* Default gradient for "higher is better": red left (low), green right (high) */
.metric-threshold-gradient-bar {
    position: relative;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg,
    #ef4444 0%,
    #f87171 10%,
    #fb923c 25%,
    #fbbf24 40%,
    #fde047 55%,
    #a3e635 70%,
    #4ade80 85%,
    #22c55e 100%
    );
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Inverted gradient for "lower is better": green left (low), red right (high) */
.metric-threshold-visual.inverted .metric-threshold-gradient-bar {
    background: linear-gradient(90deg,
    #22c55e 0%,
    #4ade80 15%,
    #a3e635 30%,
    #fde047 45%,
    #fbbf24 60%,
    #fb923c 75%,
    #f87171 90%,
    #ef4444 100%
    );
}



/* Finance PDF Modal */

.finance-pdf-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left:auto;
}

.finance-pdf-button:hover {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-color));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.finance-pdf-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.finance-pdf-icon {
    fill: currentColor;
}

.finance-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

.finance-modal-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Container */
.finance-modal {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Modal Header */
.finance-modal-header {
    padding: 24px 30px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 16px 16px 0 0;
}

.finance-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.modal-icon {
    color: var(--secondary-color);
}

.finance-modal-close {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.finance-modal-close:hover {
    background: #f3f4f6;
    color: #1f2937;
}

/* Modal Body */
.finance-modal-body {
    padding: 30px;
    overflow-y: auto;
    flex: 1;
}

.finance-modal-description {
    color: #6b7280;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.6;
}

.required-note {
    display: block;
    color: #ef4444;
    font-size: 12px;
    margin-top: 8px;
    font-style: italic;
}

/* Sections */
.finance-modal-section {
    margin-bottom: 32px;
    background: #f9fafb;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.finance-modal-section:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: var(--secondary-color);
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title svg {
    color: var(--secondary-color);
}

/* Checkbox Group */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Custom Checkbox */
.finance-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 12px 16px;
    border-radius: 8px;
    transition: all 0.2s;
    background: white;
    border: 1px solid transparent;
    position: relative;
}

.finance-checkbox:hover:not(.disabled) {
    background: #f0f9ff;
    border-color: var(--secondary-color);
}

.finance-checkbox.disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.finance-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    margin-right: 12px;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
}

.finance-checkbox input[type="checkbox"]:checked ~ .checkbox-custom {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.finance-checkbox input[type="checkbox"]:checked ~ .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 6px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.finance-checkbox input[type="checkbox"]:disabled ~ .checkbox-custom {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.checkbox-label {
    font-size: 14px;
    color: #374151;
    flex: 1;
}

.required {
    color: #ef4444;
    font-weight: 600;
    margin-left: 4px;
}

/* Modal Footer */
.finance-modal-footer {
    padding: 20px 30px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: #f9fafb;
    border-radius: 0 0 16px 16px;
}

/* Buttons */
.btn-secondary {
    padding: 10px 20px;
    background: white;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #374151;
}

.btn-primary {
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px var(--secondary-color-50);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-color));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--secondary-color-50);
}

.btn-primary:active {
    transform: translateY(0);
}

.ee-only-button {
    color: #efcc00 !important;
    border: solid 1px #efcc00;
}

/* ============================================================================
   CUSTOMER MODE - Module Restrictions for paylevel 2 non-EE users
   ============================================================================ */

/* Hide EE-only tabs for non-EE users (customers with paylevel >= 2) */
body:not(.is-ee-user) .ee-only-tab {
    display: none !important;
}

/* Hide EE-only tab content when tab is hidden */
body:not(.is-ee-user) .ee-only-tab-content {
    display: none !important;
}

/* DXF Export Widget: Hide Layer, Export, Versions tabs for non-EE users */
body:not(.is-ee-user) .ee-dxf-container .ee-module-tab[data-tab="layers"],
body:not(.is-ee-user) .ee-dxf-container .ee-module-tab[data-tab="export"],
body:not(.is-ee-user) .ee-dxf-container .ee-module-tab[data-tab="versions"] {
    display: none !important;
}

/* Bauantrag Widget: Hide Anschreiben, Bauantrag, Versions tabs for non-EE users */
body:not(.is-ee-user) .ee-building-permit-fullscreen .ee-module-tab[data-tab="cover-letter"],
body:not(.is-ee-user) .ee-building-permit-fullscreen .ee-module-tab[data-tab="application"],
body:not(.is-ee-user) .ee-building-permit-fullscreen .ee-module-tab[data-tab="versions"] {
    display: none !important;
}

/* Hide export buttons for non-EE users (customers with paylevel >= 2 can view but not export) */
body:not(.is-ee-user) .ee-export-button,
body:not(.is-ee-user) .ee-pdf-export,
body:not(.is-ee-user) .ee-dxf-export,
body:not(.is-ee-user) .ee-layer-selector,
body:not(.is-ee-user) .ee-download-btn,
body:not(.is-ee-user) .stromlaufplan-export-btn,
body:not(.is-ee-user) .e1e8-export-btn {
    display: none !important;
}

/* Request button - visible by default for non-EE users, hidden for EE users */
.ee-request-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--primary-color, #efcc00) 0%, var(--primary-color-70, #d4b600) 100%);
    color: #1a1a2e;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ee-request-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 204, 0, 0.3);
}

.ee-request-btn svg {
    width: 18px;
    height: 18px;
}

/* Hide request button for EE users */
body.is-ee-user .ee-request-btn {
    display: none !important;
}

/* Customer Documents Section */
.ee-customer-documents {
    margin-top: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ee-customer-documents-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ee-customer-documents-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ee-customer-documents-header h4 svg {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

/* Documents section hint */
.ee-documents-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    margin-left: 8px;
}

/* Documents section base styling - all sections as separate boxes */
.ee-documents-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
}

/* External documents section styling (visible to customers - green tint) */
.ee-documents-external {
    background: rgba(100, 200, 100, 0.05);
    border: 1px solid rgba(100, 200, 100, 0.15);
}

.ee-documents-external .ee-customer-documents-header h4 {
    color: rgba(180, 230, 180, 0.95);
}

.ee-documents-external .ee-documents-hint {
    color: rgba(100, 200, 100, 0.6);
}

/* Internal documents section styling (EE only - red tint) */
.ee-documents-internal {
    background: rgba(255, 100, 100, 0.05);
    border: 1px solid rgba(255, 100, 100, 0.15);
}

.ee-documents-internal .ee-customer-documents-header h4 {
    color: rgba(255, 180, 180, 0.95);
}

.ee-documents-internal .ee-documents-hint {
    color: rgba(255, 100, 100, 0.6);
}

/* Customer uploads section styling (blue tint) */
.ee-documents-from-customer {
    background: rgba(100, 150, 255, 0.05);
    border: 1px solid rgba(100, 150, 255, 0.15);
}

.ee-documents-from-customer .ee-customer-documents-header h4 {
    color: rgba(180, 200, 255, 0.95);
}

/* Documents from EE for customer view */
.ee-documents-from-ee {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Upload button - only visible for EE users */
.ee-document-upload-btn {
    display: none;
    padding: 6px 12px;
    background: rgba(239, 204, 0, 0.1);
    border: 1px solid rgba(239, 204, 0, 0.3);
    border-radius: 6px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.is-ee-user .ee-document-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Customer upload button - visible for customers in their section */
.ee-documents-from-customer .ee-document-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ee-document-upload-btn:hover {
    background: rgba(239, 204, 0, 0.2);
}

.ee-document-upload-btn svg {
    width: 14px;
    height: 14px;
}

/* Document list — boxed grid so files sit side-by-side */
.ee-document-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.ee-document-list-empty {
    grid-column: 1 / -1;
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

.ee-document-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    transition: background 0.2s ease;
    cursor: pointer;
}

.ee-document-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.ee-document-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 204, 0, 0.1);
    border-radius: 6px;
    color: var(--primary-color, #efcc00);
}

.ee-document-icon svg {
    width: 18px;
    height: 18px;
}

.ee-document-info {
    flex: 1;
    min-width: 0;
}

.ee-document-name {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ee-document-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.ee-document-actions {
    display: flex;
    gap: 6px;
}

.ee-document-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ee-document-action-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

.ee-document-action-btn.download:hover {
    border-color: rgba(74, 222, 128, 0.5);
    color: #4ade80;
}

.ee-document-action-btn.delete {
    display: none;
}

body.is-ee-user .ee-document-action-btn.delete {
    display: flex;
}

/* Customers can see delete button for their own uploads */
.ee-documents-from-customer .ee-document-action-btn.delete {
    display: flex;
}

.ee-document-action-btn.delete:hover {
    border-color: rgba(248, 113, 113, 0.5);
    color: #f87171;
}

.ee-document-action-btn.preview:hover {
    border-color: rgba(239, 204, 0, 0.5);
    color: var(--primary-color, #efcc00);
}

.ee-document-action-btn svg {
    width: 16px;
    height: 16px;
}

/* Toggle visibility button */
.ee-document-action-btn.toggle-visibility {
    display: none;
}

body.is-ee-user .ee-document-action-btn.toggle-visibility {
    display: flex;
}

.ee-document-action-btn.toggle-visibility.is-internal {
    border-color: rgba(255, 100, 100, 0.3);
    color: rgba(255, 150, 150, 0.8);
}

.ee-document-action-btn.toggle-visibility.is-internal:hover {
    border-color: rgba(100, 255, 100, 0.5);
    color: #90ee90;
}

.ee-document-action-btn.toggle-visibility.is-external {
    border-color: rgba(100, 255, 100, 0.3);
    color: rgba(150, 255, 150, 0.8);
}

.ee-document-action-btn.toggle-visibility.is-external:hover {
    border-color: rgba(255, 100, 100, 0.5);
    color: #f87171;
}

/* ========================================================================== */
/* CATEGORY DOCUMENTS WIDGET */
/* Preview styles moved to ee-widget-styles.css */
/* ========================================================================== */

/* Fullscreen styles */
.ee-category-docs-fullscreen {
    padding: 20px;
}

.ee-category-docs-header h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.ee-category-docs-header p {
    margin: 0 0 24px 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

/* Sections */
.ee-category-docs-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.ee-category-docs-section:last-child {
    margin-bottom: 0;
}

.ee-category-docs-external {
    background: rgba(100, 200, 100, 0.05);
    border-color: rgba(100, 200, 100, 0.15);
}

.ee-category-docs-internal {
    background: rgba(255, 100, 100, 0.05);
    border-color: rgba(255, 100, 100, 0.15);
}

.ee-category-docs-customer {
    background: rgba(100, 150, 255, 0.05);
    border-color: rgba(100, 150, 255, 0.15);
}

.ee-category-docs-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ee-category-docs-section-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ee-category-docs-section-header h4 svg {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.ee-category-docs-external .ee-category-docs-section-header h4 {
    color: rgba(180, 230, 180, 0.95);
}

.ee-category-docs-internal .ee-category-docs-section-header h4 {
    color: rgba(255, 180, 180, 0.95);
}

.ee-category-docs-customer .ee-category-docs-section-header h4 {
    color: rgba(180, 200, 255, 0.95);
}

.ee-category-docs-section-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    flex: 1;
}

/* Upload button */
.ee-category-docs-upload-btn {
    padding: 6px 12px;
    background: rgba(239, 204, 0, 0.1);
    border: 1px solid rgba(239, 204, 0, 0.3);
    border-radius: 6px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.ee-category-docs-upload-btn:hover {
    background: rgba(239, 204, 0, 0.2);
}

.ee-category-docs-upload-btn svg {
    width: 14px;
    height: 14px;
}

/* Document list — boxed grid so files sit side-by-side */
.ee-category-docs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.ee-category-docs-loading,
.ee-category-docs-empty {
    grid-column: 1 / -1;
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

/* Document item */
.ee-category-docs-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    transition: background 0.2s ease;
    cursor: pointer;
}

.ee-category-docs-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.ee-category-docs-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 204, 0, 0.1);
    border-radius: 6px;
    color: var(--primary-color, #efcc00);
}

.ee-category-docs-item-icon svg {
    width: 18px;
    height: 18px;
}

.ee-category-docs-item-info {
    flex: 1;
    min-width: 0;
}

.ee-category-docs-item-name {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ee-category-docs-item-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.ee-category-docs-item-module {
    color: var(--primary-color, #efcc00);
    font-weight: 500;
}

/* Action buttons */
.ee-category-docs-item-actions {
    display: flex;
    gap: 6px;
}

.ee-category-docs-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ee-category-docs-action-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

.ee-category-docs-action-btn.preview:hover {
    border-color: rgba(239, 204, 0, 0.5);
    color: var(--primary-color, #efcc00);
}

.ee-category-docs-action-btn.download:hover {
    border-color: rgba(74, 222, 128, 0.5);
    color: #4ade80;
}

.ee-category-docs-action-btn.delete:hover {
    border-color: rgba(248, 113, 113, 0.5);
    color: #f87171;
}

.ee-category-docs-action-btn.toggle-visibility.is-internal {
    border-color: rgba(255, 100, 100, 0.3);
    color: rgba(255, 150, 150, 0.8);
}

.ee-category-docs-action-btn.toggle-visibility.is-internal:hover {
    border-color: rgba(100, 255, 100, 0.5);
    color: #90ee90;
}

.ee-category-docs-action-btn.toggle-visibility.is-external {
    border-color: rgba(100, 255, 100, 0.3);
    color: rgba(150, 255, 150, 0.8);
}

.ee-category-docs-action-btn.toggle-visibility.is-external:hover {
    border-color: rgba(255, 100, 100, 0.5);
    color: #f87171;
}

.ee-category-docs-action-btn svg {
    width: 16px;
    height: 16px;
}

/* Upload Modal */
.ee-category-upload-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.ee-category-upload-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ee-category-upload-modal {
    background: rgba(20, 30, 50, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 90%;
    max-width: 450px;
    overflow: hidden;
}

.ee-category-upload-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ee-category-upload-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.ee-category-upload-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color 0.2s ease;
}

.ee-category-upload-modal-close:hover {
    color: #f87171;
}

.ee-category-upload-modal-close svg {
    width: 20px;
    height: 20px;
}

.ee-category-upload-modal-body {
    padding: 20px;
}

.ee-category-upload-dropzone {
    border: 2px dashed rgba(239, 204, 0, 0.3);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ee-category-upload-dropzone:hover,
.ee-category-upload-dropzone.dragover {
    border-color: var(--primary-color, #efcc00);
    background: rgba(239, 204, 0, 0.05);
}

.ee-category-upload-dropzone-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    color: var(--primary-color, #efcc00);
}

.ee-category-upload-dropzone-icon svg {
    width: 100%;
    height: 100%;
}

.ee-category-upload-dropzone-text {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 4px;
}

.ee-category-upload-dropzone-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.ee-category-upload-file-input {
    display: none;
}

.ee-category-upload-progress {
    margin-top: 16px;
    display: none;
}

.ee-category-upload-progress.active {
    display: block;
}

.ee-category-upload-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.ee-category-upload-progress-fill {
    height: 100%;
    background: var(--primary-color, #efcc00);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.ee-category-upload-progress-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-top: 8px;
}

/* ========================================================================== */
/* DOCUMENT PREVIEW POPUP */
/* ========================================================================== */

.ee-document-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.ee-document-preview-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ee-document-preview-modal {
    background: rgba(20, 30, 50, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ee-document-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.ee-document-preview-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    padding-right: 16px;
}

.ee-document-preview-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ee-document-preview-close:hover {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.3);
    color: #f87171;
}

.ee-document-preview-close svg {
    width: 20px;
    height: 20px;
}

.ee-document-preview-content {
    flex: 1;
    min-height: 300px;
    max-height: calc(90vh - 140px);
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
}

.ee-document-preview-loading,
.ee-document-preview-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.ee-document-preview-error {
    color: #f87171;
}

.ee-document-preview-image {
    max-width: 100%;
    max-height: calc(90vh - 180px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.ee-document-preview-pdf {
    width: 100%;
    height: calc(90vh - 180px);
    min-height: 400px;
    border: none;
    border-radius: 8px;
    background: #fff;
}

.ee-document-preview-no-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
}

.ee-document-preview-no-preview-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.3);
}

.ee-document-preview-no-preview-icon svg {
    width: 100%;
    height: 100%;
}

.ee-document-preview-no-preview-text {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.ee-document-preview-no-preview-hint {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

.ee-document-preview-actions {
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.ee-document-preview-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 8px;
    color: #4ade80;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ee-document-preview-download:hover {
    background: rgba(74, 222, 128, 0.2);
    border-color: rgba(74, 222, 128, 0.5);
}

.ee-document-preview-download svg {
    width: 18px;
    height: 18px;
}

/* Request Popup */
.ee-request-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.ee-request-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ee-request-popup {
    width: 90%;
    max-width: 480px;
    background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.ee-request-popup-overlay.active .ee-request-popup {
    transform: scale(1) translateY(0);
}

.ee-request-popup-header {
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
}

.ee-request-popup-header-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 204, 0, 0.1);
    border-radius: 12px;
    color: var(--secondary-color, #efcc00);
}

.ee-request-popup-header-icon svg {
    width: 24px;
    height: 24px;
}

.ee-request-popup-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.ee-request-popup-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.ee-request-popup-body {
    padding: 24px;
}

.ee-request-popup-message {
    padding: 16px;
    background: rgba(239, 204, 0, 0.1);
    border-radius: 8px;
    border-left: 3px solid var(--primary-color, #efcc00);
    margin-bottom: 20px;
}

.ee-request-popup-message p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

.ee-request-popup-form-group {
    margin-bottom: 16px;
}

.ee-request-popup-form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.ee-request-popup-form-group textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.ee-request-popup-form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color, #efcc00);
    color: white;
}

.ee-request-popup-form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.ee-request-popup-footer {
    padding: 16px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.ee-request-popup-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ee-request-popup-btn.cancel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

.ee-request-popup-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

.ee-request-popup-btn.confirm {
    background: linear-gradient(135deg, var(--primary-color, #efcc00) 0%, var(--primary-color-70, #d4b600) 100%);
    border: none;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ee-request-popup-btn.confirm svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ee-request-popup-btn.confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 204, 0, 0.3);
}

.ee-request-popup-btn.confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Document Upload Modal */
.ee-upload-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.ee-upload-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ee-upload-modal {
    width: 90%;
    max-width: 400px;
    background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ee-upload-modal-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ee-upload-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.ee-upload-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.ee-upload-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.ee-upload-modal-body {
    padding: 20px;
}

.ee-upload-dropzone {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.ee-upload-dropzone:hover,
.ee-upload-dropzone.dragover {
    border-color: var(--primary-color, #efcc00);
    background: rgba(239, 204, 0, 0.05);
}

.ee-upload-dropzone-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 204, 0, 0.1);
    border-radius: 12px;
    color: #ffffff;
}

.ee-upload-dropzone-icon svg {
    width: 24px;
    height: 24px;
}

.ee-upload-dropzone-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.ee-upload-dropzone-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.ee-upload-file-input {
    display: none;
}

.ee-upload-progress {
    margin-top: 16px;
    display: none;
}

.ee-upload-progress.active {
    display: block;
}

.ee-upload-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.ee-upload-progress-fill {
    height: 100%;
    background: var(--primary-color, #efcc00);
    width: 0%;
    transition: width 0.3s ease;
}

.ee-upload-progress-text {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

/* ============================================================================
   MODULE TABS - Tab navigation for module popups (E1/E8, Stromlaufplan, etc.)
   ============================================================================ */

.ee-module-tab {
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ee-module-tab:hover {
    color: rgba(255, 255, 255, 0.9);
}

.ee-module-tab.active {
    color: var(--primary-color, #efcc00);
}

.ee-module-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color, #efcc00);
    border-radius: 1px 1px 0 0;
}

.ee-module-tab svg {
    width: 16px;
    height: 16px;
}

.ee-module-tab-content {
    display: none;
}

.ee-module-tab-content.active {
    display: block;
}

/* Documents count badge in tab */
.ee-module-tab-badge {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.ee-module-tab.active .ee-module-tab-badge {
    background: rgba(239, 204, 0, 0.2);
    color: var(--primary-color, #efcc00);
}


/* Fixed Action Bar */
.ee-module-fixed-actions {
    position: fixed;
    bottom: 24px;
    left: 24px;
    right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10001;
    pointer-events: none;
}

.ee-module-fixed-actions-left,
.ee-module-fixed-actions-right {
    display: flex;
    gap: 12px;
    pointer-events: auto;
}

.ee-module-fixed-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.ee-module-fixed-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ee-module-save-btn {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ee-module-save-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.ee-module-version-btn {
    background: rgba(59, 130, 246, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.ee-module-version-btn:hover {
    background: rgba(59, 130, 246, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.3);
}

.ee-module-pdf-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.ee-module-pdf-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
}

.ee-module-pdf-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .ee-module-fixed-actions {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    .ee-module-fixed-btn {
        padding: 12px 16px;
        font-size: 13px;
    }

    .ee-module-fixed-btn span {
        display: none;
    }
}

/* Loading State */
.finance-modal.loading .btn-primary {
    position: relative;
    color: transparent;
}

.finance-modal.loading .btn-primary::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    margin: auto;
    border: 2px solid transparent;
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s linear infinite;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 640px) {
    .finance-modal {
        width: 95%;
        max-height: 90vh;
    }

    .finance-modal-header {
        padding: 20px;
    }

    .finance-modal-body {
        padding: 20px;
    }

    .finance-modal-section {
        padding: 16px;
    }

    .finance-modal-title {
        font-size: 18px;
    }

    .section-title {
        font-size: 15px;
    }
}

.finance-success-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: white;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10000;
    animation: slideInUp 0.3s ease;
}

@keyframes slideInUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.finance-success-toast.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

.pricing-mode-toggle {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #ddd;
    display: flex;
    gap: 0;
    background: #9e9e9e;
    border-radius: 8px;
    padding: 4px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.toggle-btn {
    flex: 1;
    padding: 10px 32px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 6px;
    min-width: 120px;
}

.toggle-btn.active {
    background: #4CAF50;
    color: #fff;
}

.toggle-btn:not(.active) {
    color: #333;
}

.toggle-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.2);
}

.inline-edit-value.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.inline-edit-icon.disabled {
    opacity: 0.3;
}

/* Dashboard View Tasks & Notes Widget Wrappers */
.dashboard-widget-wrapper {
    margin-bottom: 20px;
}

/* Dashboard widgets use full width */
.dashboard-widget-wrapper .ee-widget-grid {
    display: block;
}

/* Fixed 400px height for dashboard widgets */
.dashboard-widget-wrapper .ee-widget {
    height: 400px;
    width: 100%;
}

.dashboard-widget-wrapper .ee-widget-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dashboard-widget-wrapper .ee-widget-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dashboard-widget-wrapper .ee-widget-preview {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ============================================================================
   CADASTRAL PARCEL LAYER STYLES
   ============================================================================ */

/* Control Button */
#iconFlurstuecke {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    margin-bottom: 10px;
}

#iconFlurstuecke svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    transition: opacity 0.3s ease;
}

#iconFlurstuecke:hover {
    transform: scale(1.1);
}

#iconFlurstuecke.active {
    background: rgba(255, 152, 0, 0.2);
    border-radius: 4px;
}

#iconFlurstuecke.active svg {
    fill: #FF9800;
}

#iconFlurstuecke .loading-spinner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 152, 0, 0.3);
    border-top-color: #FF9800;
    border-radius: 50%;
    animation: flurstueck-spin 0.8s linear infinite;
}

@keyframes flurstueck-spin {
    to { transform: rotate(360deg); }
}

/* Popup Styles */
.flurstueck-popup .mapboxgl-popup-content {
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    min-width: 240px;
}

.flurstueck-popup .mapboxgl-popup-close-button {
    font-size: 20px;
    padding: 4px 8px;
    color: #666;
    right: 4px;
    top: 4px;
}

.flurstueck-popup .mapboxgl-popup-close-button:hover {
    color: #333;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.flurstueck-popup-header {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    color: white;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.flurstueck-popup-body {
    padding: 12px 16px;
    background: #fff;
}

.flurstueck-popup-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}

.flurstueck-popup-row:last-child {
    border-bottom: none;
}

.flurstueck-popup-row .label {
    color: #666;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 12px;
}

.flurstueck-popup-row .value {
    color: #333;
    font-weight: 400;
    text-align: right;
    word-break: break-word;
}

/* Notification */
.flurstueck-notification {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* ============================================================================
   FORM LOCK STYLES
   For locking module forms after customer submits a request
   ============================================================================ */

.ee-module-locked {
    position: relative;
}

.ee-form-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 26, 46, 0.85);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 8px;
}

.ee-form-lock-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    padding: 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ee-form-lock-message svg {
    color: var(--primary-color, #efcc00);
    opacity: 0.8;
}

.ee-form-lock-message span {
    font-size: 14px;
    max-width: 280px;
    line-height: 1.5;
}

/* Disabled form elements styling */
.ee-form-locked {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* EE Unlock Button */
.ee-unlock-btn {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.is-ee-user .ee-unlock-btn {
    display: inline-flex;
}

.ee-unlock-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.ee-unlock-btn svg {
    width: 16px;
    height: 16px;
}

/* Form status indicator */
.ee-form-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.ee-form-status-indicator.status-draft {
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
}

.ee-form-status-indicator.status-submitted {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.ee-form-status-indicator.status-released {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

/* ================================================
   MOBILE RESPONSIVE STYLES - PROJECT VIEW
   ================================================ */

/* Tablet Anpassungen (768px - 1024px) */
@media (max-width: 1024px) {
    .projectSettingsPopupContainer.active {
        width: 95vw;
        height: 95vh;
        top: 2.5vh;
        right: 2.5vw;
    }

    .mapHardwareDialog {
        width: 95vw;
        max-width: 95vw;
    }

    .pd-icon-container {
        gap: 8px;
    }

    .iconButtonPd {
        width: 45px;
        height: 45px;
    }

    .iconButtonPd svg {
        width: 22px;
        height: 22px;
    }
}

/* Mobile Anpassungen (< 768px) */
@media (max-width: 768px) {
    /* Body class for mobile read-only */
    body.ee-mobile-readonly {
        overflow-x: hidden;
    }

    /* Hauptcontainer */
    .energyExpertsProjectView {
        padding-top: 56px !important;
        padding-bottom: 64px !important;
    }

    .projectViewFullHeight {
        height: calc(100vh - 120px) !important;
        min-height: auto !important;
    }

    /* Map Container */
    #mapContainerEntry {
        position: relative !important;
        height: 55vh !important;
        min-height: 250px !important;
        max-height: 400px !important;
    }

    #mapContainer,
    #map {
        height: 100% !important;
    }

    /* Icon Toolbar verstecken */
    .pd-icon-container {
        display: none !important;
    }

    /* Drawing Tools verstecken */
    .mapboxgl-ctrl-group,
    .mapbox-gl-draw_ctrl-draw-btn,
    .mapboxgl-ctrl-top-right,
    .draw-controls,
    .polygon-controls,
    .circular-slider,
    #centerValueSlider {
        display: none !important;
    }

    /* Hardware Popup als Bottom-Sheet */
    .mapHardwarePopup {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1001;
    }

    .mapHardwarePopup.active,
    #mapHardwarePopup[style*="display: flex"],
    #mapHardwarePopup[style*="display: block"] {
        transform: translateY(0);
    }

    .mapHardwareDialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 75vh !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
    }

    .mapHardwareHeader {
        padding: 16px !important;
        border-bottom: 1px solid #e0e0e0;
    }

    .mapHardwareHeader h2 {
        font-size: 16px !important;
        margin: 0 !important;
    }

    /* Hardware Tabs horizontal scrollen */
    .mapHardwareTabs {
        flex-direction: row !important;
        overflow-x: auto !important;
        padding: 12px !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid #e0e0e0;
    }

    .mapHardwareTab {
        flex-shrink: 0 !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        border-radius: 20px !important;
        background: #f5f5f5;
        min-width: auto !important;
    }

    .mapHardwareTab.active {
        background: var(--secondary-color);
        color: #fff;
    }

    .mapHardwareDetails {
        padding: 16px !important;
        max-height: calc(75vh - 150px) !important;
        overflow-y: auto !important;
    }

    /* Content Bereich - Bearbeitungs-Buttons verstecken */
    .mapHardwareDetails .action-btn.edit,
    .mapHardwareDetails .edit-hardware-btn,
    .mapHardwareDetails .delete-hardware-btn,
    .mapHardwareDetails .save-btn,
    .polygon-edit-controls {
        display: none !important;
    }

    /* Project Settings als Fullscreen */
    .projectSettingsOverlay.active {
        background: rgba(0, 0, 0, 0.6);
    }

    .projectSettingsPopupContainer.active {
        width: 100vw !important;
        height: 100vh !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    .projectSettingsTabContainer {
        flex-direction: column !important;
        height: 100% !important;
    }

    .projectSettingsTabNav {
        width: 100% !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        padding: 12px 8px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        gap: 8px !important;
        flex-shrink: 0;
        -webkit-overflow-scrolling: touch;
    }

    .projectSettingsTabBtn {
        flex-shrink: 0 !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        border-radius: 20px !important;
        border-bottom: none !important;
    }

    .projectSettingsTabBtn.active {
        background: rgba(76, 175, 80, 0.2);
        border-bottom: none !important;
    }

    .projectSettingsTabContent {
        flex: 1;
        padding: 16px !important;
        overflow-y: auto;
        padding-bottom: 80px !important;
    }

    .projectSettingsTabPane {
        width: 100% !important;
    }

    .projectSettingsCloseBtn {
        top: 12px !important;
        right: 12px !important;
        font-size: 24px !important;
        z-index: 10;
    }

    /* Form Elemente */
    .ee-form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .ee-form-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ee-form-input,
    .ee-form-select,
    .ee-form-textarea,
    .projectSettingsInput,
    .projectSettingsSelect {
        font-size: 16px !important; /* Verhindert Zoom auf iOS */
        padding: 14px 12px !important;
        width: 100% !important;
    }

    .ee-form-select-small {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Tasks & Notes Popup */
    .tasks-notes-popup {
        width: 100vw !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    /* Finance Chart */
    .financeChart-container {
        padding: 12px !important;
    }

    .financeChart-toggle-buttons {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .financeChart-tab {
        padding: 8px 12px !important;
        font-size: 11px !important;
    }

    /* Process Module */
    .processModule-container {
        padding: 12px !important;
    }

    .processModule-step {
        padding: 12px !important;
    }

    /* Bottom sheet handle for popups */
    .mapHardwareDialog::before,
    .projectSettingsPopupContainer.active::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        margin: 8px auto 0 auto;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
    #mapContainerEntry {
        height: 45vh !important;
        min-height: 200px !important;
    }

    .mapHardwareDialog {
        max-height: 80vh !important;
    }

    .mapHardwareTab {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .projectSettingsTabBtn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    h2 {
        font-size: 1.2rem !important;
    }

    h3 {
        font-size: 1rem !important;
    }

    .ee-form-section h3 {
        font-size: 14px !important;
    }
}

/* EE Internal Badge */
.ee-internal-badge {
    display: inline-block;
    background: rgba(255,159,10,0.15);
    color: #ff9f0a;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    margin-left: 8px;
    vertical-align: middle;
    border: 1px solid rgba(255,159,10,0.3);
}
.ee-form-hint {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    margin: 0 0 16px;
    line-height: 1.4;
}

/* Override Dialog */
.ee-override-dialog {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
}
.ee-override-dialog-content {
    background: linear-gradient(165deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
    background-color: #1a1a24;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 24px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.ee-override-dialog-content h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
}
.ee-override-dialog-content p {
    margin: 0 0 20px;
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
}
.ee-override-dialog-actions {
    display: flex;
    gap: 10px;
}
.ee-override-btn-global,
.ee-override-btn-local {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.ee-override-btn-global {
    background: linear-gradient(135deg, #30d158, #34c759);
    color: #fff;
}
.ee-override-btn-global:hover { box-shadow: 0 4px 16px rgba(48,209,88,0.4); }
.ee-override-btn-local {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
}
.ee-override-btn-local:hover { background: rgba(255,255,255,0.12); }

/* Override Indicator */
.ee-override-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    z-index: 2;
}
.ee-override-indicator:hover { opacity: 1; }

/* AI Assist Button — inline next to label */
.ee-ai-label-btn {
    display: inline-block;
    margin-left: 8px;
    background: linear-gradient(135deg, rgba(10,132,255,0.2), rgba(90,200,250,0.15));
    border: 1px solid rgba(10,132,255,0.3);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    padding: 3px 8px;
    line-height: 1.3;
    color: #5ac8fa;
    letter-spacing: 0.02em;
    vertical-align: middle;
}
.ee-ai-label-btn:hover {
    background: linear-gradient(135deg, rgba(10,132,255,0.35), rgba(90,200,250,0.25));
    box-shadow: 0 2px 8px rgba(10,132,255,0.3);
    color: #fff;
}
.ee-ai-label-btn:disabled { cursor: wait; opacity: 0.4; }

/* Legacy AI button (absolute positioned) — fallback */
.ee-ai-assist-btn {
    display: none; /* replaced by ee-ai-label-btn */
}

/* AI Header Button — same size/style as close button, positioned left of it */
#projectSettingsAiBtn {
    position: absolute !important;
    top: 16px !important;
    right: 56px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.1) !important;
    background: rgba(255,255,255,0.08) !important;
    background-color: rgba(255,255,255,0.08) !important;
    background-image: none !important;
    color: rgba(255,255,255,0.65) !important;
    transition: all 0.2s !important;
    padding: 0 !important;
    line-height: 1 !important;
    margin: 0 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    float: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-align: center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    overflow: visible !important;
}
#projectSettingsAiBtn:hover {
    background: rgba(255,255,255,0.15) !important;
    background-color: rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.9) !important;
}
#projectSettingsAiBtn:disabled {
    cursor: wait !important;
    opacity: 0.4 !important;
}
#projectSettingsAiBtn.ee-ai-running {
    background: rgba(10,132,255,0.15) !important;
    background-color: rgba(10,132,255,0.15) !important;
    border-color: rgba(10,132,255,0.3) !important;
    color: #5ac8fa !important;
    animation: ee-ai-pulse 1.2s ease-in-out infinite;
}
#projectSettingsAiBtn svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    pointer-events: none;
}
@keyframes ee-ai-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(10,132,255,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(10,132,255,0); }
}

/* ================================================================
   Divi theme override protection
   Divi 5 uses CSS-module class names (.divi-style_xxx) with very high
   specificity. We use the element ID #projectSettingsPopupContainer
   which beats any class-based selector. Double-ID for nuclear option.
   ================================================================ */
#projectSettingsPopupContainer input,
#projectSettingsPopupContainer input[type="text"],
#projectSettingsPopupContainer input[type="date"],
#projectSettingsPopupContainer input[type="url"],
#projectSettingsPopupContainer input[type="email"],
#projectSettingsPopupContainer input[type="number"],
#projectSettingsPopupContainer input[type="file"],
#projectSettingsPopupContainer select,
#projectSettingsPopupContainer textarea,
#projectSettingsPopupContainer .ee-form-input,
#projectSettingsPopupContainer .ee-form-select {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    border-right: 1px solid rgba(255,255,255,0.1) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    border-left: 1px solid rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.1) !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: #ffffff !important;
    background: rgba(255,255,255,0.06) !important;
    background-color: rgba(255,255,255,0.06) !important;
    background-image: none !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-indent: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    outline: none !important;
    float: none !important;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
}
#projectSettingsPopupContainer input:focus,
#projectSettingsPopupContainer select:focus,
#projectSettingsPopupContainer textarea:focus {
    border: 1px solid rgba(10,132,255,0.5) !important;
    border-color: rgba(10,132,255,0.5) !important;
    background: rgba(255,255,255,0.08) !important;
    background-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 0 0 3px rgba(10,132,255,0.15) !important;
    outline: none !important;
}
#projectSettingsPopupContainer input::placeholder,
#projectSettingsPopupContainer textarea::placeholder {
    color: rgba(255,255,255,0.35) !important;
    opacity: 1 !important;
}
#projectSettingsPopupContainer label {
    color: rgba(255,255,255,0.7) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 4px !important;
    display: block !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
#projectSettingsPopupContainer .ee-form-select-small {
    width: auto !important;
    min-width: 100px !important;
}
#projectSettingsPopupContainer .ee-form-row {
    display: flex !important;
    gap: 12px !important;
}
#projectSettingsPopupContainer .ee-form-group {
    flex: 1 !important;
    margin-bottom: 12px !important;
}
#projectSettingsPopupContainer h2,
#projectSettingsPopupContainer h3,
#projectSettingsPopupContainer h4 {
    color: rgba(255,255,255,0.95) !important;
    padding: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
#projectSettingsPopupContainer .ee-form-button {
    background: rgba(10,132,255,0.2) !important;
    border: 1px solid rgba(10,132,255,0.3) !important;
    color: #5ac8fa !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    transition: all 0.2s !important;
}
#projectSettingsPopupContainer .ee-form-button:hover {
    background: rgba(10,132,255,0.3) !important;
    color: #fff !important;
}
/* Section headings with colored left border */
#projectSettingsPopupContainer .ee-form-section h3 {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

/* Read-only spec input for actual power display */
.spec-readonly {
    background: transparent;
    border: none;
    color: var(--ee-text-primary, #fff);
    font-weight: 600;
    pointer-events: none;
    user-select: text;
}

/* ==========================================================================
   Phase Residence — Phasen-Historie Table + Reentry Dialog
   ========================================================================== */

.ee-phase-residence-wrapper {
    overflow-x: auto;
    margin-top: 12px;
}

.ee-phase-residence-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.4;
}

.ee-phase-residence-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ee-text-secondary, #999);
    border-bottom: 2px solid var(--ee-border-color, #333);
    white-space: nowrap;
}

.ee-phase-residence-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--ee-border-color, #2a2a2a);
    vertical-align: middle;
}

.ee-phase-residence-table tr.ee-pr-unvisited {
    opacity: 0.35;
}

.ee-phase-residence-table tr.ee-pr-active {
    background: rgba(76, 175, 80, 0.08);
}

.ee-phase-residence-table tr.ee-pr-active td:first-child {
    border-left: 3px solid #4caf50;
}

.ee-phase-residence-table tr.ee-pr-negative {
    background: rgba(244, 67, 54, 0.08);
}

.ee-phase-residence-table tr.ee-pr-negative td:first-child {
    border-left: 3px solid #f44336;
}

.ee-pr-outcome-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.ee-pr-outcome-badge.positive {
    background: rgba(76, 175, 80, 0.15);
    color: #66bb6a;
}

.ee-pr-outcome-badge.negative {
    background: rgba(244, 67, 54, 0.15);
    color: #ef5350;
    text-transform: uppercase;
}

.ee-pr-active-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(76, 175, 80, 0.15);
    color: #66bb6a;
    animation: ee-pr-pulse 2s ease-in-out infinite;
}

@keyframes ee-pr-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.ee-pr-date-input {
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    font-size: 13px;
    padding: 2px 4px;
    min-width: 115px;
    width: 115px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
}

.ee-pr-date-input:hover {
    border-color: var(--ee-border-color, #444);
}

.ee-pr-date-input:focus {
    border-color: var(--ee-accent-color, #2196f3);
    outline: none;
}

.ee-pr-outcome-select {
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
}

.ee-pr-outcome-select:hover {
    border-color: var(--ee-border-color, #444);
}

.ee-pr-outcome-select:focus {
    border-color: var(--ee-accent-color, #2196f3);
    outline: none;
}

/* Reentry Dialog */
.ee-phase-reentry-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ee-phase-reentry-dialog {
    background: var(--ee-bg-secondary, #1e1e1e);
    border: 1px solid var(--ee-border-color, #333);
    border-radius: 12px;
    padding: 28px 32px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.ee-phase-reentry-dialog h3 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ee-text-primary, #fff);
}

.ee-phase-reentry-dialog p {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--ee-text-secondary, #aaa);
    line-height: 1.5;
}

.ee-reentry-options {
    margin: 16px 0;
}

.ee-reentry-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--ee-text-primary, #fff);
}

.ee-reentry-option input[type="radio"] {
    accent-color: var(--ee-accent-color, #2196f3);
}

.ee-reentry-date-input {
    margin-left: 24px;
    margin-top: 4px;
}

.ee-reentry-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.ee-reentry-actions button {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}

.ee-reentry-btn-cancel {
    background: var(--ee-bg-tertiary, #333);
    color: var(--ee-text-primary, #fff);
}

.ee-reentry-btn-cancel:hover {
    background: var(--ee-bg-hover, #444);
}

.ee-reentry-btn-confirm {
    background: var(--ee-accent-color, #2196f3);
    color: #fff;
}

.ee-reentry-btn-confirm:hover {
    background: #1976d2;
}

/* ============================================================================
   NEARBY PROJECTS POPUP
   ============================================================================ */
.nearby-project-popup {
    font-size: 13px;
    line-height: 1.4;
    min-width: 200px;
    max-width: 300px;
}
.nearby-project-popup-header {
    font-weight: 600;
    padding: 6px 10px;
    margin: -10px -10px 8px -10px;
    border-radius: 4px 4px 0 0;
    color: #fff;
    font-size: 12px;
}
.nearby-project-popup-header.own {
    background-color: #22c55e;
}
.nearby-project-popup-header.other {
    background-color: #ef4444;
}

/* Individual owner block (multiple per popup possible) */
.nearby-project-popup-owner {
    padding: 4px 0;
    border-bottom: 1px solid #eee;
}
.nearby-project-popup-owner:last-child {
    border-bottom: none;
}
.nearby-project-popup-row {
    padding: 2px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.nearby-project-popup-row.small {
    font-size: 11px;
    color: #888;
    padding-left: 4px;
}
.nearby-project-popup-row strong {
    color: #333;
}

/* Eigen/Fremd Badge */
.nearby-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.nearby-badge.own {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}
.nearby-badge.other {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* ============================================================================
   NEARBY COMPANY FILTER PANEL
   ============================================================================ */
.nearby-company-panel {
    position: absolute;
    top: 120px;
    right: 100px;
    z-index: 5;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    width: 220px;
    max-height: 50vh;
    overflow-y: auto;
    font-size: 13px;
    scrollbar-width: thin;
}
.nearby-company-panel::-webkit-scrollbar {
    width: 4px;
}
.nearby-company-panel::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}
.nearby-company-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 12px;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    border-radius: 8px 8px 0 0;
}
.nearby-company-panel-collapse {
    cursor: pointer;
    color: #9ca3af;
    font-size: 16px;
    line-height: 1;
    user-select: none;
    transition: transform 0.2s;
}
.nearby-company-panel-collapse:hover {
    color: #6b7280;
}
.nearby-company-panel.collapsed .nearby-company-panel-collapse {
    transform: rotate(180deg);
}
.nearby-company-panel.collapsed .nearby-company-panel-body {
    display: none;
}
.nearby-company-panel-body {
    padding: 4px 0;
}
.nearby-radius-section {
    padding: 8px 12px 6px;
    border-bottom: 1px solid #e5e7eb;
}
.nearby-radius-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nearby-radius-row input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.nearby-radius-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #374151;
    border-radius: 50%;
    cursor: pointer;
}
.nearby-radius-row input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #374151;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}
.nearby-radius-value {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    color: #374151;
    font-weight: 500;
    white-space: nowrap;
}
.nearby-radius-value input[type="number"] {
    width: 42px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 12px;
    text-align: center;
    color: #374151;
    -moz-appearance: textfield;
}
.nearby-radius-value input[type="number"]::-webkit-outer-spin-button,
.nearby-radius-value input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.nearby-radius-value input[type="number"]:focus {
    outline: none;
    border-color: #22c55e;
}
.nearby-company-entry {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.nearby-company-entry:hover {
    background: #f9fafb;
}
.nearby-company-entry.own-company {
    background: rgba(34, 197, 94, 0.06);
    border-left: 3px solid #22c55e;
    padding-left: 9px;
}
.nearby-company-entry input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: currentColor;
}
.nearby-company-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}
.nearby-company-info {
    flex: 1;
    min-width: 0;
}
.nearby-company-name {
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    font-size: 12px;
}
.nearby-company-stats {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 1px;
}
.nearby-company-panel-footer {
    padding: 8px 12px;
    border-top: 1px solid #e5e7eb;
    font-size: 11px;
    color: #6b7280;
    text-align: center;
    position: sticky;
    bottom: 0;
    background: #fff;
    border-radius: 0 0 8px 8px;
}

/* ============================================================
   MaStR-Umkreis-Layer (Marktstammdatenregister) — Filter-Panel
   ============================================================ */
.mastr-panel {
    position: absolute;
    top: 110px;
    right: 90px;
    z-index: 1200;
    width: 260px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    font-size: 13px;
    color: #1f2937;
    overflow: hidden;
}
.mastr-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-weight: 600;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
}
.mastr-panel-close {
    cursor: pointer;
    color: #6b7280;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
}
.mastr-panel-close:hover { color: #111827; }
.mastr-panel-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.mastr-field { display: flex; flex-direction: column; gap: 6px; }
.mastr-field > span { font-weight: 500; color: #374151; }
.mastr-field input[type="range"] { width: 100%; accent-color: #2563eb; }
.mastr-types { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.mastr-types label { display: flex; align-items: center; gap: 5px; font-weight: 400; cursor: pointer; }
.mastr-row { flex-direction: row; align-items: center; justify-content: space-between; }
.mastr-inputs { display: flex; align-items: center; gap: 6px; }
.mastr-inputs input {
    width: 64px;
    padding: 4px 6px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
}
.mastr-field select {
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}
.mastr-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #374151;
}
.mastr-c { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mastr-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.mastr-plz-hint {
    font-size: 11.5px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 6px 8px;
    line-height: 1.35;
}

/* Hover/Click-Popup der MaStR-Anlagen */
.mastr-pop { font-size: 12.5px; color: #1f2937; min-width: 180px; }
.mastr-pop-head { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 2px; }
.mastr-pop-name { font-weight: 600; margin-bottom: 6px; color: #111827; }
.mastr-pop-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 1px 0;
}
.mastr-pop-row > span:first-child { color: #6b7280; }
.mastr-pop-row > span:last-child { text-align: right; font-weight: 500; }

/* --- MaStR Projekt-Match: dezentes Icon im Hero + Popup --- */
/* Kleines, positives Pin-Icon oben links im heroViewPdf */
.mastr-hero-icon {
    position: absolute;
    top: 12px;
    left: 14px;
    z-index: 6;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    backdrop-filter: blur(2px);
    transition: background 0.15s ease;
}
.mastr-hero-icon:hover { background: rgba(255, 255, 255, 0.26); }
.mastr-hero-icon svg { width: 17px; height: 17px; display: block; }
.mastr-hero-icon-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1.5px #fff;
}
/* Popup mit Treffern – Stil wie .mastr-panel */
.mastr-match-banner {
    position: fixed;
    top: 110px;
    right: 90px;
    z-index: 100000;
    width: 300px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    font-size: 13px;
    color: #1f2937;
    overflow: hidden;
}
.mastr-match-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 12px;
    max-height: 320px;
    overflow-y: auto;
}
.mastr-match-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 8px 10px;
}
.mastr-match-info { display: flex; flex-direction: column; gap: 1px; color: #374151; }
.mastr-match-info strong { color: #111827; font-size: 13px; }
.mastr-match-info span { font-size: 12px; color: #6b7280; }
.mastr-match-nr { font-size: 11px !important; color: #9ca3af !important; }

/* Kopfzeile: Name links, Aktionen rechts */
.mastr-match-row-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.mastr-match-row-head strong { color: #111827; font-size: 13px; line-height: 1.3; }

/* Detail-Block: Label/Wert-Paare */
.mastr-match-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 6px;
    border-top: 1px solid #d9f5e1;
}
.mastr-match-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
}
.mastr-match-meta-label { color: #6b7280; flex: 0 0 auto; }
.mastr-match-sub { color: #9ca3af; font-size: 11px; }
.mastr-match-meta-val {
    color: #111827;
    text-align: right;
    word-break: break-word;
}
.mastr-match-meta-status {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.mastr-status-open { background: #dbeafe; color: #1d4ed8; }
.mastr-status-confirmed { background: #dcfce7; color: #15803d; }
.mastr-status-rejected { background: #fee2e2; color: #b91c1c; }
.mastr-match-resolve {
    flex: 0 0 auto;
    background: #15803d;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.mastr-match-resolve:hover { background: #166534; }
.mastr-match-resolve:disabled { opacity: 0.6; cursor: default; }
/* Zuordnen / Ablehnen */
.mastr-match-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.mastr-match-confirm,
.mastr-match-reject {
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.mastr-match-confirm { background: #15803d; color: #fff; }
.mastr-match-confirm:hover { background: #166534; }
.mastr-match-reject { background: #fff; color: #6b7280; border: 1px solid #d1d5db; }
.mastr-match-reject:hover { background: #f3f4f6; color: #374151; }
.mastr-match-confirm:disabled,
.mastr-match-reject:disabled { opacity: 0.6; cursor: default; }

/* Zugeordnete Treffer: Badge + Aufheben-Button */
.mastr-match-row.is-confirmed { background: #f0fdf4; border-color: #bbf7d0; }
.mastr-match-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.mastr-match-reopen {
    border: 1px solid #d1d5db;
    border-radius: 5px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 500;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
}
.mastr-match-reopen:hover { background: #f3f4f6; color: #374151; }
.mastr-match-reopen:disabled { opacity: 0.6; cursor: default; }