/**
 * EnergyExperts Widget System - Apple-Style Design
 * Modern, minimalistic, futuristic UI
 */

/* ============================================================================
   CSS VARIABLES - Design Tokens
   ============================================================================ */

:root {
    /* Colors - Liquid Glass (Ultra Transparent) */
    --ee-bg-primary: #0a0a0f;
    --ee-bg-secondary: #111118;
    --ee-bg-tertiary: #1a1a24;
    --ee-bg-card: rgba(255, 255, 255, 0.06);
    --ee-bg-card-hover: rgba(255, 255, 255, 0.10);
    --ee-bg-glass: rgba(255, 255, 255, 0.08);

    /* Liquid Glass Effects */
    --ee-glass-highlight: rgba(255, 255, 255, 0.25);
    --ee-glass-border: rgba(255, 255, 255, 0.15);
    --ee-glass-blur: 50px;
    --ee-glass-blur-heavy: 80px;

    /* Text Colors - HIGH CONTRAST */
    --ee-text-primary: #ffffff;
    --ee-text-secondary: rgba(255, 255, 255, 0.85);
    --ee-text-tertiary: rgba(255, 255, 255, 0.65);
    --ee-text-muted: rgba(255, 255, 255, 0.45);

    /* Accent Colors - Apple Style */
    --ee-accent-one: var(--secondary-color);
    --ee-accent-green: var(--secondary-color);
    --ee-accent-orange: #FF9500;
    --ee-accent-red: #FF3B30;
    --ee-accent-purple: #AF52DE;
    --ee-accent-teal: #5AC8FA;
    --ee-accent-pink: #FF2D55;

    /* Status Colors */
    --ee-status-success: #30d158;
    --ee-status-warning: #ff9f0a;
    --ee-status-error: #ff453a;
    --ee-status-info: #0a84ff;

    /* Borders */
    --ee-border-subtle: rgba(255, 255, 255, 0.06);
    --ee-border-light: rgba(255, 255, 255, 0.1);
    --ee-border-medium: rgba(255, 255, 255, 0.15);

    /* Shadows */
    --ee-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --ee-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --ee-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --ee-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4);
    --ee-shadow-glow: 0 0 40px rgba(10, 132, 255, 0.15);

    /* Spacing */
    --ee-space-xs: 4px;
    --ee-space-sm: 8px;
    --ee-space-md: 16px;
    --ee-space-lg: 14px;
    --ee-space-xl: 32px;
    --ee-space-2xl: 48px;

    /* Border Radius */
    --ee-radius-sm: 8px;
    --ee-radius-md: 12px;
    --ee-radius-lg: 16px;
    --ee-radius-xl: 20px;
    --ee-radius-2xl: 24px;
    --ee-radius-full: 9999px;

    /* Transitions */
    --ee-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --ee-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --ee-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --ee-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Typography */
    --ee-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    --ee-font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* Grid - Flexible Layout */
    --ee-grid-columns: 3;
    --ee-grid-gap: 16px;

    /* Widget Heights - Flexible, only min-height (no max restriction) */
    --ee-widget-min-height: 180px;
    --ee-row-height: minmax(var(--ee-widget-min-height), auto);

    /* Container max height */
    --ee-container-max-height: 100vh;

    --ee-box-background-color: rgba(0, 0, 0, 0.4);
}

/* Light mode support */
@media (prefers-color-scheme: light) {
    :root.ee-light-mode {
        --ee-bg-primary: #f5f5f7;
        --ee-bg-secondary: #ffffff;
        --ee-bg-tertiary: #fafafa;
        --ee-bg-card: rgba(0, 0, 0, 0.02);
        --ee-bg-card-hover: rgba(0, 0, 0, 0.04);
        --ee-bg-glass: rgba(255, 255, 255, 0.7);

        --ee-text-primary: #1d1d1f;
        --ee-text-secondary: rgba(0, 0, 0, 0.6);
        --ee-text-tertiary: rgba(0, 0, 0, 0.4);

        --ee-border-subtle: rgba(0, 0, 0, 0.04);
        --ee-border-light: rgba(0, 0, 0, 0.08);
        --ee-border-medium: rgba(0, 0, 0, 0.12);
    }
}


/* ============================================================================
   WIDGET GRID CONTAINER
   ============================================================================ */

.ee-widget-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--ee-grid-columns), 1fr);
    /* Flexible rows - min-height only, can grow as needed */
    grid-auto-rows: minmax(var(--ee-widget-min-height), auto);
    /* Dense packing - automatically fills gaps with smaller widgets */
    grid-auto-flow: dense;
    gap: var(--ee-grid-gap);
    padding: var(--ee-space-lg);
    /* Container height constraints */
    max-height: var(--ee-container-max-height);
    box-sizing: border-box;
    position: relative;
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
    /* Widgets stay together at top, empty space only at bottom */
    align-content: start;
    /* Smooth scrolling */
    scroll-behavior: smooth;
    /* Ensure visibility */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hidden state - overrides display: grid when widgets need to be hidden */
.ee-widget-grid.ee-widgets-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Custom scrollbar for widget grid */
.ee-widget-grid::-webkit-scrollbar {
    width: 6px;
}

.ee-widget-grid::-webkit-scrollbar-track {
    background: transparent;
}

.ee-widget-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.ee-widget-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Finance specific widget grid */
.ee-finance-widget-grid {
    background: transparent !important;
    border-radius: var(--ee-radius-lg);
    width: 100%;
}

/* Responsive grid */
@media (max-width: 1400px) {
    .ee-widget-grid {
        --ee-grid-columns: 3;
    }
}

@media (max-width: 1200px) {
    .ee-widget-grid {
        --ee-grid-columns: 2;
    }
}

@media (max-width: 768px) {
    .ee-widget-grid {
        --ee-grid-columns: 1;
        padding: var(--ee-space-md);
    }
}

/* Large displays - more columns possible */
@media (min-width: 1800px) {
    .ee-widget-grid {
        --ee-grid-columns: 4;
    }
}

@media (min-width: 2200px) {
    .ee-widget-grid {
        --ee-grid-columns: 5;
    }
}


/* ============================================================================
   WIDGET BASE STYLES
   ============================================================================ */

.ee-widget {
    position: relative;
    border-radius: var(--ee-radius-xl);

    /* LIQUID GLASS: Ultra-transparent with strong blur */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.08) 100%
    );
    backdrop-filter: blur(var(--ee-glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--ee-glass-blur)) saturate(180%);

    overflow: hidden;
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease-out,
        border-color 0.2s ease,
        background 0.3s ease;
    z-index: 10;
}

.ee-widget:hover {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.12) 100%
    );
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.1),
        0 20px 60px rgba(0, 0, 0, 0.08),
        0 0 80px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 var(--ee-glass-highlight),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.15);
}

.ee-widget.expandable {
    cursor: pointer;
    /* Ensure widget is clickable */
    pointer-events: auto !important;
}

.ee-widget.expandable:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.12),
        0 24px 80px rgba(0, 0, 0, 0.1),
        0 0 100px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 var(--ee-glass-highlight),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.2);
}

.ee-widget.expandable:active {
    transform: translateY(-2px) scale(1.01);
    transition-duration: 0.1s;
}

/* Ensure all widget parts are clickable */
.ee-widget-inner,
.ee-widget-body,
.ee-widget-preview {
    pointer-events: auto;
}

/* Width classes */
.ee-widget.ee-w-1 { grid-column: span 1; }
.ee-widget.ee-w-2 { grid-column: span 2; }
.ee-widget.ee-w-3 { grid-column: span 3; }

/* Height classes - Fixed height for proper scrolling inside widgets */
.ee-widget.ee-h-1 {
    grid-row: span 1;
    height: var(--ee-widget-min-height) * 2;
}

.ee-widget.ee-h-2 {
    grid-row: span 2;
    height: calc(var(--ee-widget-min-height) * 2 + var(--ee-grid-gap));
}

.ee-widget.ee-h-3 {
    grid-row: span 3;
    height: calc(var(--ee-widget-min-height) * 3 + var(--ee-grid-gap) * 2);
}

.ee-widget.ee-h-4 {
    grid-row: span 4;
    height: calc(var(--ee-widget-min-height) * 4 + var(--ee-grid-gap) * 3);
}

/* Extra height classes for larger displays */
.ee-widget.ee-h-5 {
    grid-row: span 5;
    height: calc(var(--ee-widget-min-height) * 5 + var(--ee-grid-gap) * 4);
}

.ee-widget.ee-h-6 {
    grid-row: span 6;
    height: calc(var(--ee-widget-min-height) * 6 + var(--ee-grid-gap) * 5);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .ee-widget.ee-w-3 { grid-column: span 2; }
}

@media (max-width: 768px) {
    .ee-widget.ee-w-1,
    .ee-widget.ee-w-2,
    .ee-widget.ee-w-3 {
        grid-column: span 1;
    }

    /* Mobile: Reduce height spans but keep proportional min-heights */
    .ee-widget.ee-h-1 {
        grid-row: span 1;
        min-height: var(--ee-widget-min-height);
    }

    /* Tasks/Notes widgets (ee-h-2) keep larger min-height on mobile for better UX */
    .ee-widget.ee-h-2 {
        grid-row: span 1;
        min-height: calc(var(--ee-widget-min-height) * 1.5);
    }

    .ee-widget.ee-h-3,
    .ee-widget.ee-h-4,
    .ee-widget.ee-h-5,
    .ee-widget.ee-h-6 {
        grid-row: span 1;
        min-height: var(--ee-widget-min-height);
    }
}

/* Hidden state */
.ee-widget.hidden {
    display: none;
}

/* Loading state */
.ee-widget.loading .ee-widget-loader {
    opacity: 1;
    visibility: visible;
}

.ee-widget.loading .ee-widget-preview {
    opacity: 0.3;
    pointer-events: none;
}


/* ============================================================================
   WIDGET INNER STRUCTURE
   ============================================================================ */

.ee-widget-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--ee-space-lg);
    padding-top: 30px;
}

.ee-widget-header {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    flex-shrink: 0;
    width: calc(100% - var(--ee-space-lg) - var(--ee-space-lg));
    top: 10px;
}

.ee-widget-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: rgb(0 170 255 / 50%);
    color: #efefef;
    font-size: 10px;
}

.ee-widget-icon svg {
    width: 16px;
    height: 16px;
}

.ee-widget-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

.ee-widget-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--ee-text-tertiary);
    border-radius: var(--ee-radius-sm);
    cursor: pointer;
    opacity: 1;
    transition: all var(--ee-transition-fast);
}

.ee-widget-expand:hover {
    background: var(--ee-bg-glass);
    color: var(--ee-text-primary);
}

.ee-widget-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 20px;
}

/* Scrollbar for widget body */
.ee-widget-body::-webkit-scrollbar {
    width: 4px;
}

.ee-widget-body::-webkit-scrollbar-track {
    background: transparent;
}

.ee-widget-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.ee-widget-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

.ee-widget-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollbar for widget preview */
.ee-widget-preview::-webkit-scrollbar {
    width: 4px;
}

.ee-widget-preview::-webkit-scrollbar-track {
    background: transparent;
}

.ee-widget-preview::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.ee-widget-preview::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}


/* ============================================================================
   WIDGET LOADER
   ============================================================================ */

.ee-widget-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ee-bg-card);
    opacity: 0;
    visibility: hidden;
    transition: all var(--ee-transition-normal);
    z-index: 10;
}

.ee-widget-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--ee-border-light);
    border-top-color: var(--ee-accent-one);
    border-radius: 50%;
    animation: ee-spin 0.8s linear infinite;
}

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


/* ============================================================================
   FULLSCREEN OVERLAY - Map visible at edges
   ============================================================================ */

.ee-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px;
}

.ee-fullscreen-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ee-fullscreen-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;

    /* LIQUID GLASS - Deep transparent */
    background: linear-gradient(
        180deg,
        rgba(30, 35, 50, 0) 0%,
        rgba(20, 25, 40, 0.5) 100%
    );
    backdrop-filter: blur(var(--ee-glass-blur-heavy)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--ee-glass-blur-heavy)) saturate(140%);

    border-radius: var(--ee-radius-2xl);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.3),
        0 50px 100px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 var(--ee-glass-highlight),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);

    overflow: hidden;
    transform: scale(0.96) translateY(24px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ee-fullscreen-overlay.active .ee-fullscreen-container {
    transform: scale(1) translateY(0);
}

.ee-fullscreen-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 32px;
    flex-shrink: 0;
}

.ee-fullscreen-back,
.ee-fullscreen-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border-radius: var(--ee-radius-md);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.ee-fullscreen-back:hover,
.ee-fullscreen-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.ee-fullscreen-close:hover {
    background: rgba(255, 59, 48, 0.2);
    color: var(--ee-accent-red);
    border-color: rgba(255, 59, 48, 0.3);
}

.ee-fullscreen-close:active {
    transform: scale(0.95);
}

.ee-fullscreen-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 100%);
    border-radius: 12px;
    color: white;
    box-shadow: 0 4px 15px rgba(10, 132, 255, 0.3);
}

.ee-fullscreen-icon svg {
    width: 24px;
    height: 24px;
}

.ee-fullscreen-title {
    flex: 1;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.02em;
}

.ee-fullscreen-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0px 28px;
}

/* Scrollbar for fullscreen content */
.ee-fullscreen-content::-webkit-scrollbar {
    width: 8px;
}

.ee-fullscreen-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.ee-fullscreen-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.ee-fullscreen-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Hide back button (removed from HTML) */
.ee-fullscreen-back {
    display: none !important;
}

/* Prevent body scroll when fullscreen is open */
body.ee-widget-fullscreen-open {
    overflow: hidden;
}

/* Fullscreen wrapper for original content */
.ee-finance-fullscreen-wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.ee-fullscreen-original-content {
    width: 100%;
    min-height: 100%;
    /* Reset any hiding */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================================================
   MODERN FULLSCREEN CONTENT DESIGN
   ============================================================================ */

/* Unified card style for all content sections */
.ee-fullscreen-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top-color: rgba(255, 255, 255, 0.12);
    border-radius: var(--ee-radius-lg);
    padding: 24px;
    margin-bottom: 20px;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ee-fullscreen-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.ee-fullscreen-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ee-fullscreen-card-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.2), rgba(94, 92, 230, 0.2));
    border-radius: 10px;
    color: #5ac8fa;
}

.ee-fullscreen-card-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

/* Modern scrollbar for fullscreen */
.ee-fullscreen-content::-webkit-scrollbar {
    width: 6px;
}

.ee-fullscreen-content::-webkit-scrollbar-track {
    background: transparent;
}

.ee-fullscreen-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.ee-fullscreen-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ============================================================================
   TABS COMPONENT
   ============================================================================ */

.ee-tab {
    padding: var(--ee-space-sm) var(--ee-space-lg);
    border: none;
    background: transparent;
    color: var(--ee-text-tertiary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--ee-radius-full);
    transition: all var(--ee-transition-fast);
}

.ee-tab:hover {
    color: var(--ee-text-secondary);
    background: var(--ee-bg-glass);
}

.ee-tab.active {
    color: var(--ee-text-primary);
    background: var(--ee-bg-card-hover);
}

.ee-tab-content {
    display: none;
}

.ee-tab-content.active {
    display: block;
    animation: ee-fadeIn var(--ee-transition-normal);
}

@keyframes ee-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================================
   METRIC WIDGET STYLES
   ============================================================================ */

.ee-metric-widget {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.ee-metric-label {
    font-size: 13px;
    color: var(--ee-text-tertiary);
    margin-bottom: var(--ee-space-xs);
}

.ee-metric-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--ee-text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.ee-metric-unit {
    font-size: 18px;
    font-weight: 500;
    color: var(--ee-text-tertiary);
    margin-left: 4px;
}

.ee-metric-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    margin-top: var(--ee-space-sm);
    padding: 4px 10px;
    border-radius: var(--ee-radius-full);
    background: var(--ee-bg-glass);
}

.ee-metric-change.positive {
    color: var(--ee-status-success);
}

.ee-metric-change.negative {
    color: var(--ee-status-error);
}

.ee-metric-change.neutral {
    color: var(--ee-text-tertiary);
}


/* ============================================================================
   FINANCE WIDGET STYLES
   ============================================================================ */

.ee-finance-widget {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ee-finance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ee-space-md);
    margin-bottom: var(--ee-space-lg);
}

.ee-finance-metric {
    text-align: center;
    padding: var(--ee-space-md);
    background: var(--ee-bg-glass);
    border-radius: var(--ee-radius-md);
}

.ee-finance-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--ee-text-primary);
    line-height: 1.2;
}

.ee-finance-value small {
    font-size: 14px;
    font-weight: 500;
    color: var(--ee-text-tertiary);
}

.ee-finance-label {
    display: block;
    font-size: 11px;
    color: var(--ee-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.ee-finance-npv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ee-space-md);
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.1), rgba(191, 90, 242, 0.1));
    border-radius: var(--ee-radius-md);
    border: 1px solid var(--ee-border-subtle);
}

.ee-finance-npv-label {
    font-size: 13px;
    color: var(--ee-text-secondary);
}

.ee-finance-npv-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--ee-accent-green);
}

/* Finance Fullscreen */
.ee-finance-fullscreen {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ee-finance-tabs {
    display: flex;
    gap: var(--ee-space-sm);
    margin-bottom: var(--ee-space-xl);
    padding-bottom: var(--ee-space-md);
    border-bottom: 1px solid var(--ee-border-subtle);
}

.ee-finance-content {
    flex: 1;
    overflow: auto;
}


/* ============================================================================
   GRID CONNECTION WIDGET STYLES
   ============================================================================ */

.ee-grid-widget {
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-md);
    height: 100%;
}

.ee-grid-status {
    display: inline-flex;
    align-items: center;
    gap: var(--ee-space-sm);
    font-size: 13px;
    font-weight: 500;
}

.ee-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: ee-pulse 2s infinite;
}

.ee-grid-status.success .ee-status-dot {
    background: var(--ee-status-success);
    box-shadow: 0 0 8px var(--ee-status-success);
}

.ee-grid-status.warning .ee-status-dot {
    background: var(--ee-status-warning);
    box-shadow: 0 0 8px var(--ee-status-warning);
}

.ee-grid-status.neutral .ee-status-dot {
    background: var(--ee-text-tertiary);
}

@keyframes ee-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.ee-grid-metrics {
    display: flex;
    gap: var(--ee-space-lg);
}

.ee-grid-metric {
    display: flex;
    flex-direction: column;
}

.ee-grid-metric-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--ee-text-primary);
}

.ee-grid-metric-label {
    font-size: 12px;
    color: var(--ee-text-tertiary);
}

.ee-grid-operator {
    font-size: 13px;
    color: var(--ee-text-secondary);
    padding-top: var(--ee-space-sm);
    border-top: 1px solid var(--ee-border-subtle);
}

/* Grid Fullscreen */
.ee-grid-fullscreen {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ee-grid-tabs {
    display: flex;
    gap: var(--ee-space-sm);
    margin-bottom: var(--ee-space-xl);
}

.ee-grid-content {
    flex: 1;
    overflow: auto;
}


/* ============================================================================
   PERMIT WIDGET STYLES
   ============================================================================ */

.ee-permit-widget {
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-md);
    height: 100%;
}

.ee-permit-progress {
    display: flex;
    align-items: center;
    gap: var(--ee-space-md);
}

.ee-permit-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--ee-bg-glass);
    border-radius: var(--ee-radius-full);
    overflow: hidden;
}

.ee-permit-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ee-accent-one), var(--ee-accent-teal));
    border-radius: var(--ee-radius-full);
    transition: width var(--ee-transition-slow);
}

.ee-permit-progress-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--ee-text-secondary);
    white-space: nowrap;
}

.ee-permit-current {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ee-permit-current-label {
    font-size: 12px;
    color: var(--ee-text-tertiary);
}

.ee-permit-current-step {
    font-size: 14px;
    font-weight: 500;
    color: var(--ee-text-primary);
}

.ee-permit-complete {
    color: var(--ee-status-success);
    font-size: 14px;
    font-weight: 500;
}


/* ============================================================================
   CONSTRUCTION WIDGET STYLES
   ============================================================================ */

.ee-construction-widget {
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-md);
    height: 100%;
}

.ee-construction-phase {
    display: flex;
    align-items: center;
    gap: var(--ee-space-sm);
}

.ee-construction-phase-label {
    font-size: 13px;
    color: var(--ee-text-tertiary);
}

.ee-construction-phase-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--ee-accent-one);
}

.ee-construction-progress {
    display: flex;
    align-items: center;
    gap: var(--ee-space-md);
}

.ee-construction-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--ee-bg-glass);
    border-radius: var(--ee-radius-full);
    overflow: hidden;
}

.ee-construction-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ee-accent-orange), var(--ee-accent-green));
    border-radius: var(--ee-radius-full);
    transition: width var(--ee-transition-slow);
}

.ee-construction-progress-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--ee-text-primary);
    min-width: 45px;
}

.ee-construction-dates {
    display: flex;
    gap: var(--ee-space-lg);
    font-size: 12px;
    color: var(--ee-text-tertiary);
}


/* ============================================================================
   OPERATION WIDGET STYLES
   ============================================================================ */

.ee-operation-widget {
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-md);
    height: 100%;
}

.ee-operation-status {
    display: inline-flex;
    align-items: center;
    gap: var(--ee-space-sm);
    font-size: 14px;
    font-weight: 500;
}

.ee-status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ee-operation-status.success .ee-status-indicator {
    background: var(--ee-status-success);
    box-shadow: 0 0 12px var(--ee-status-success);
    animation: ee-pulse 2s infinite;
}

.ee-operation-status.warning .ee-status-indicator {
    background: var(--ee-status-warning);
    box-shadow: 0 0 12px var(--ee-status-warning);
    animation: ee-pulse 1s infinite;
}

.ee-operation-status.error .ee-status-indicator {
    background: var(--ee-status-error);
    box-shadow: 0 0 12px var(--ee-status-error);
    animation: ee-pulse 0.5s infinite;
}

.ee-operation-stats {
    display: flex;
    gap: var(--ee-space-xl);
}

.ee-operation-stat {
    display: flex;
    flex-direction: column;
}

.ee-operation-stat-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--ee-text-primary);
}

.ee-operation-stat-label {
    font-size: 12px;
    color: var(--ee-text-tertiary);
}


/* ============================================================================
   DASHBOARD WIDGET STYLES
   ============================================================================ */

.ee-dashboard-widget {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
}

.dashboard-widget-wrapper {
    padding: 0;
    background: rgb(0 9 18 / 60%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
}

.widget-dashboard-tasks, .widget-dashboard-notes {
    backdrop-filter: none;
}

.widget-dashboard-tasks:hover, .widget-dashboard-notes:hover {
    transform: none!important;
    box-shadow: none!important;
}

.ee-dashboard-hero {
    margin-bottom: var(--ee-space-lg);
}

.ee-dashboard-hero-value {
    font-size: 48px;
    font-weight: 700;
    color: var(--ee-text-primary);
    line-height: 1;
    letter-spacing: -0.03em;
}

.ee-dashboard-hero-value small {
    font-size: 20px;
    font-weight: 500;
    color: var(--ee-text-tertiary);
    margin-left: 4px;
}

.ee-dashboard-hero-label {
    font-size: 14px;
    color: var(--ee-text-secondary);
    margin-top: var(--ee-space-sm);
}

.ee-dashboard-stats {
    display: flex;
    gap: var(--ee-space-xl);
}

.ee-dashboard-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ee-dashboard-stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--ee-accent-one);
}

.ee-dashboard-stat-label {
    font-size: 12px;
    color: var(--ee-text-tertiary);
}


/* ============================================================================
   NOTES WIDGET STYLES
   ============================================================================ */

.ee-notes-widget {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ee-notes-preview {
    flex: 1;
    font-size: 14px;
    color: var(--ee-text-secondary);
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.ee-notes-updated {
    font-size: 12px;
    color: var(--ee-text-tertiary);
    margin-top: var(--ee-space-md);
    padding-top: var(--ee-space-sm);
    border-top: 1px solid var(--ee-border-subtle);
}

/* Notes Fullscreen */
.ee-notes-fullscreen {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ee-notes-toolbar {
    display: flex;
    align-items: center;
    gap: var(--ee-space-sm);
    padding: var(--ee-space-md);
    background: var(--ee-bg-glass);
    border-radius: var(--ee-radius-md);
    margin-bottom: var(--ee-space-md);
}

.ee-notes-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--ee-text-secondary);
    border-radius: var(--ee-radius-sm);
    cursor: pointer;
    transition: all var(--ee-transition-fast);
}

.ee-notes-btn:hover {
    background: var(--ee-bg-card-hover);
    color: var(--ee-text-primary);
}

.ee-notes-spacer {
    flex: 1;
}

.ee-notes-save-btn {
    padding: var(--ee-space-sm) var(--ee-space-lg);
    border: none;
    background: var(--ee-accent-one);
    color: white;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--ee-radius-full);
    cursor: pointer;
    transition: all var(--ee-transition-fast);
}

.ee-notes-save-btn:hover {
    background: #0077ed;
    transform: scale(1.02);
}

.ee-notes-editor {
    flex: 1;
    width: 100%;
    padding: var(--ee-space-lg);
    border: 1px solid var(--ee-border-light);
    border-radius: var(--ee-radius-lg);
    background: var(--ee-bg-card);
    color: var(--ee-text-primary);
    font-family: var(--ee-font-family);
    font-size: 15px;
    line-height: 1.7;
    resize: none;
    outline: none;
    transition: border-color var(--ee-transition-fast);
}

.ee-notes-editor:focus {
    border-color: var(--ee-accent-one);
}

.ee-notes-editor::placeholder {
    color: var(--ee-text-tertiary);
}


/* ============================================================================
   CHART STYLES
   ============================================================================ */

.ee-chart-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 120px;
}

.ee-chart-placeholder {
    width: 100%;
    height: 100%;
}

.ee-chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ee-text-tertiary);
    font-size: 13px;
}

.ee-chart-fullscreen {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ee-chart-container {
    flex: 1;
    min-height: 400px;
}

.ee-chart-controls {
    padding: var(--ee-space-md) 0;
}

.ee-chart-timerange {
    display: flex;
    gap: var(--ee-space-sm);
    justify-content: center;
}

.ee-chart-btn {
    padding: var(--ee-space-sm) var(--ee-space-md);
    border: none;
    background: var(--ee-bg-glass);
    color: var(--ee-text-secondary);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--ee-radius-sm);
    cursor: pointer;
    transition: all var(--ee-transition-fast);
}

.ee-chart-btn:hover {
    background: var(--ee-bg-card-hover);
}

.ee-chart-btn.active {
    background: var(--ee-accent-one);
    color: white;
}


/* ============================================================================
   PLACEHOLDER STYLES
   ============================================================================ */

.ee-widget-placeholder,
.ee-fullscreen-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 100px;
    color: var(--ee-text-tertiary);
    font-size: 14px;
}


/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.ee-text-primary { color: var(--ee-text-primary); }
.ee-text-secondary { color: var(--ee-text-secondary); }
.ee-text-tertiary { color: var(--ee-text-tertiary); }

.ee-text-success { color: var(--ee-status-success); }
.ee-text-warning { color: var(--ee-status-warning); }
.ee-text-error { color: var(--ee-status-error); }

.ee-bg-glass { background: var(--ee-bg-glass); }
.ee-bg-card { background: var(--ee-bg-card); }

.ee-rounded-sm { border-radius: var(--ee-radius-sm); }
.ee-rounded-md { border-radius: var(--ee-radius-md); }
.ee-rounded-lg { border-radius: var(--ee-radius-lg); }
.ee-rounded-full { border-radius: var(--ee-radius-full); }


/* ============================================================================
   SCROLLBAR STYLING
   ============================================================================ */

.ee-widget-grid::-webkit-scrollbar,
.ee-fullscreen-content::-webkit-scrollbar,
.ee-tab-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.ee-widget-grid::-webkit-scrollbar-track,
.ee-fullscreen-content::-webkit-scrollbar-track,
.ee-tab-content::-webkit-scrollbar-track {
    background: transparent;
}

.ee-widget-grid::-webkit-scrollbar-thumb,
.ee-fullscreen-content::-webkit-scrollbar-thumb,
.ee-tab-content::-webkit-scrollbar-thumb {
    background: var(--ee-border-medium);
    border-radius: var(--ee-radius-full);
}

.ee-widget-grid::-webkit-scrollbar-thumb:hover,
.ee-fullscreen-content::-webkit-scrollbar-thumb:hover,
.ee-tab-content::-webkit-scrollbar-thumb:hover {
    background: var(--ee-text-tertiary);
}


/* ============================================================================
   ANIMATION CLASSES
   ============================================================================ */

.ee-animate-in {
    animation: ee-slideIn var(--ee-transition-normal) forwards;
}

@keyframes ee-slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ee-animate-pulse {
    animation: ee-pulse 2s infinite;
}

.ee-animate-glow {
    animation: ee-glow 2s infinite alternate;
}

@keyframes ee-glow {
    from {
        box-shadow: 0 0 20px rgba(10, 132, 255, 0.2);
    }
    to {
        box-shadow: 0 0 30px rgba(10, 132, 255, 0.4);
    }
}


/* ============================================================================
   FINANCE WIDGET GRID
   ============================================================================ */

.ee-finance-widget-grid {
    padding: var(--ee-space-lg);
    height: 100%;
    overflow-y: auto;
}


/* ============================================================================
   FINANCE KPI WIDGET
   ============================================================================ */

.ee-finance-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ee-space-md);
    height: 100%;
}

.ee-kpi-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--ee-space-md);
    /* HIGH CONTRAST: Solid background */
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ee-radius-md);
    text-align: center;
    transition: all var(--ee-transition-fast);
}

.ee-kpi-card:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.ee-kpi-card.highlight {
    background: linear-gradient(135deg, rgba(48, 209, 88, 0.2), rgba(10, 132, 255, 0.2));
    border: 1px solid rgba(48, 209, 88, 0.4);
}

.ee-kpi-value {
    font-size: 28px;
    font-weight: 700;
    /* HIGH CONTRAST: Pure white */
    color: #ffffff;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ee-kpi-unit {
    font-size: 14px;
    font-weight: 500;
    /* HIGH CONTRAST: Brighter */
    color: rgba(255, 255, 255, 0.8);
    margin-left: 2px;
}

.ee-kpi-label {
    font-size: 12px;
    font-weight: 600;
    /* HIGH CONTRAST: Brighter */
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.ee-kpi-trend {
    font-size: 11px;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: var(--ee-radius-full);
    display: inline-block;
}

.ee-kpi-trend.positive {
    color: var(--ee-status-success);
    background: rgba(48, 209, 88, 0.1);
}

.ee-kpi-trend.negative {
    color: var(--ee-status-error);
    background: rgba(255, 69, 58, 0.1);
}

.ee-kpi-trend.neutral {
    color: var(--ee-text-tertiary);
    background: var(--ee-bg-glass);
}


/* ============================================================================
   FINANCE ENERGY WIDGET
   ============================================================================ */

.ee-energy-widget {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--ee-space-md);
}

.ee-energy-mode {
    display: flex;
    gap: var(--ee-space-sm);
}

.ee-mode-indicator {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--ee-radius-full);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ee-mode-indicator.active {
    background: var(--ee-accent-one);
    color: white;
}

.ee-energy-main {
    text-align: center;
    padding: var(--ee-space-md) 0;
}

.ee-energy-value {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ee-energy-unit {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-left: 4px;
}

.ee-energy-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 4px;
}

.ee-energy-stats {
    display: flex;
    justify-content: center;
    gap: var(--ee-space-xl);
}

.ee-energy-stat {
    text-align: center;
}

.ee-stat-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #5ac8fa;
}

.ee-stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}

.ee-energy-chart-mini {
    flex: 1;
    min-height: 50px;
    margin-top: auto;
}


/* ============================================================================
   FINANCE BILANZ WIDGET
   ============================================================================ */

.ee-bilanz-widget {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--ee-space-md);
}

.ee-bilanz-summary {
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-sm);
}

.ee-bilanz-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ee-space-sm) var(--ee-space-md);
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--ee-radius-sm);
}

.ee-bilanz-row.highlight {
    background: linear-gradient(135deg, rgba(48, 209, 88, 0.2), rgba(10, 132, 255, 0.15));
    border: 1px solid rgba(48, 209, 88, 0.3);
}

.ee-bilanz-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.ee-bilanz-value {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.ee-bilanz-value.positive {
    color: var(--ee-status-success);
}

.ee-bilanz-value.negative {
    color: var(--ee-status-error);
}

.ee-bilanz-chart-mini {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--ee-space-md);
}

.ee-mini-bars {
    display: flex;
    align-items: flex-end;
    gap: var(--ee-space-md);
    height: 100%;
    width: 100%;
}

.ee-mini-bar {
    flex: 1;
    background: linear-gradient(180deg, var(--ee-accent-one), rgba(10, 132, 255, 0.3));
    border-radius: var(--ee-radius-sm) var(--ee-radius-sm) 0 0;
    position: relative;
    min-height: 20px;
    transition: all var(--ee-transition-fast);
}

.ee-mini-bar:hover {
    filter: brightness(1.2);
}

.ee-mini-bar.negative {
    background: linear-gradient(180deg, var(--ee-status-error), rgba(255, 69, 58, 0.3));
}

.ee-mini-bar.highlight {
    background: linear-gradient(180deg, var(--ee-status-success), rgba(48, 209, 88, 0.3));
}

.ee-mini-bar span {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--ee-text-tertiary);
    white-space: nowrap;
    margin-bottom: 4px;
}


/* ============================================================================
   WIND & TEMP WIDGETS
   ============================================================================ */

.ee-wind-widget,
.ee-temp-widget {
    display: flex;
    align-items: center;
    gap: var(--ee-space-md);
    height: 100%;
}

.ee-wind-icon,
.ee-temp-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--ee-radius-md);
    flex-shrink: 0;
}

.ee-wind-icon svg,
.ee-temp-icon svg {
    width: 28px;
    height: 28px;
    color: var(--ee-accent-teal);
}

.ee-temp-icon svg {
    color: var(--ee-accent-orange);
}

.ee-wind-data,
.ee-temp-data {
    flex: 1;
}

.ee-wind-main,
.ee-temp-main {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.ee-wind-value,
.ee-temp-value {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ee-wind-unit,
.ee-temp-unit {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

.ee-wind-label,
.ee-temp-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.ee-wind-secondary {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.ee-temp-range {
    display: flex;
    align-items: center;
    gap: var(--ee-space-sm);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

.ee-temp-bar {
    flex: 1;
    height: 4px;
    background: linear-gradient(90deg, var(--ee-accent-one), var(--ee-accent-orange), var(--ee-status-error));
    border-radius: var(--ee-radius-full);
    max-width: 60px;
}


/* ============================================================================
   DOCS WIDGET
   ============================================================================ */

.ee-docs-widget {
    display: flex;
    align-items: center;
    gap: var(--ee-space-md);
    height: 100%;
}

.ee-docs-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.2), rgba(191, 90, 242, 0.2));
    border-radius: var(--ee-radius-md);
}

.ee-docs-icon svg {
    width: 24px;
    height: 24px;
    color: var(--ee-accent-one);
}

.ee-docs-info {
    flex: 1;
}

.ee-docs-title {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.ee-docs-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.ee-docs-action {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--ee-radius-full);
}

.ee-docs-arrow {
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    transition: transform var(--ee-transition-fast);
}

.ee-widget:hover .ee-docs-arrow {
    transform: translateX(3px);
    color: var(--ee-accent-one);
}


/* ============================================================================
   FLOATING WIDGETS OVER MAP
   ============================================================================ */

.ee-floating-widgets {
    position: absolute !important;
    top: 0px;
    left: 0;
    right: 0;
    padding: 20px;
    background: transparent !important;
    pointer-events: none;
    z-index: 50;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 120px;
}

/* Custom scrollbar for widget container */
.ee-floating-widgets::-webkit-scrollbar {
    width: 6px;
}

.ee-floating-widgets::-webkit-scrollbar-track {
    background: transparent;
}

.ee-floating-widgets::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.ee-floating-widgets::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.ee-floating-widgets .ee-widget {
    pointer-events: auto;
    /* Glass morphism effect - floating look */
    background: rgba(15, 20, 30, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.ee-floating-widgets .ee-widget:hover {
    background:rgba(15, 20, 30, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.2);
}


/* ============================================================================
   NEW 7-WIDGET STYLES
   ============================================================================ */

/* Anlagenkomponenten Widget */
.ee-anlagen-preview {
    height: 100%;
}

.ee-anlagen-grid {
    display: grid;
    /* Auto-fit: automatically adjusts columns based on available width */
    /* Min 100px per item, will show 2x2 when narrow */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    height: 100%;
}

/* When widget is only 1/3 width (1 column), force 2x2 layout */
.ee-widget.ee-w-1 .ee-anlagen-grid {
    grid-template-columns: repeat(2, 1fr);
}

.ee-anlagen-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--ee-box-background-color);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.ee-anlagen-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.ee-anlagen-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 132, 255, 0.15);
    border-radius: 8px;
}

.ee-anlagen-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ee-anlagen-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ee-anlagen-value {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

/* Darlehensrechner Widget */
.ee-darlehen-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.ee-darlehen-bar {
    display: flex;
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.ee-darlehen-segment {
    transition: width 0.5s ease;
}

.ee-darlehen-segment.bank {
    background: linear-gradient(90deg, #0a84ff, #5ac8fa);
}

.ee-darlehen-segment.eigen {
    background: linear-gradient(90deg, #30d158, #34c759);
}

.ee-darlehen-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.ee-legend-item {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ee-legend-item::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.ee-legend-item.bank::before {
    background: #0a84ff;
}

.ee-legend-item.eigen::before {
    background: #30d158;
}

.ee-darlehen-kpi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--ee-box-background-color);
    border-radius: 10px;
    margin-top: auto;
}

.ee-darlehen-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.ee-darlehen-value {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

/* Darlehensrechner Fullscreen */
.ee-darlehen-fullscreen {
    padding: 0;
}

.ee-darlehen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ee-darlehen-grid .ee-invest-card.wide {
    grid-column: span 3;
}

.ee-darlehen-visual {
    margin: 16px 0;
}

.ee-darlehen-bar-large {
    display: flex;
    height: 40px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ee-darlehen-bar-large .ee-darlehen-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
}

.ee-segment-label {
    font-size: 13px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@media (max-width: 900px) {
    .ee-darlehen-grid {
        grid-template-columns: 1fr;
    }

    .ee-darlehen-grid .ee-invest-card.wide {
        grid-column: span 1;
    }
}

/* Investition Widget */
.ee-invest-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.ee-invest-section {
    padding: 12px;
    background: var(--ee-box-background-color);
    border-radius: 10px;
}

.ee-invest-title {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px 0;
}

.ee-invest-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.ee-invest-row.small {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.ee-invest-row.positive .ee-invest-value {
    color: #30d158;
}

.ee-invest-row.negative .ee-invest-value {
    color: #ff453a;
}

.ee-invest-row.highlight {
    padding: 10px 12px;
    margin: 8px -12px -12px;
    background: linear-gradient(90deg, rgba(48, 209, 88, 0.15), rgba(10, 132, 255, 0.1));
    border-radius: 0 0 10px 10px;
    font-weight: 600;
}

.ee-invest-value {
    font-weight: 600;
    color: #ffffff;
}

.ee-invest-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 0;
}

/* Bilanz Widget */
.ee-bilanz-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}


.ee-bilanz-section-title {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.ee-bilanz-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ee-bilanz-kpis.four-cols {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.ee-bilanz-kpi {
    text-align: center;
    padding: 10px 6px;
    background: var(--ee-box-background-color);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.ee-bilanz-kpis.four-cols .ee-bilanz-kpi {
    padding: 8px 4px;
}

.ee-bilanz-kpi:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.02);
}

.ee-bilanz-kpi.positive {
    background: rgba(48, 209, 88, 0.15);
    border: 1px solid rgba(48, 209, 88, 0.3);
}

.ee-bilanz-kpi.positive .ee-bilanz-kpi-value {
    color: #30d158;
}

.ee-bilanz-kpi.negative {
    background: rgba(255, 69, 58, 0.15);
    border: 1px solid rgba(255, 69, 58, 0.3);
}

.ee-bilanz-kpi.negative .ee-bilanz-kpi-value {
    color: #ff453a;
}

.ee-bilanz-kpi-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    margin-top: 6px;
}

.ee-bilanz-kpis.four-cols .ee-bilanz-kpi-value {
    font-size: 16px;
}

.ee-bilanz-kpi-value small {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

.ee-bilanz-kpis.four-cols .ee-bilanz-kpi-value small {
    font-size: 10px;
}

.ee-bilanz-kpi-label {
    display: block;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

.ee-bilanz-kpis.four-cols .ee-bilanz-kpi-label {
    font-size: 12px;
}

.ee-bilanz-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ee-bilanz-npv-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ee-bilanz-npv-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

.ee-bilanz-npv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.12), rgba(191, 90, 242, 0.08));
    border: 1px solid rgba(10, 132, 255, 0.25);
    border-radius: 12px;
}

.ee-bilanz-npv-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ee-bilanz-npv-value {
    font-size: 16px;
    font-weight: 700;
    margin-top: 2px;
}

.ee-bilanz-npv-value.positive {
    color: #30d158;
}

.ee-bilanz-npv-value.negative {
    color: #ff453a;
}

.ee-bilanz-lcoe {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(255, 159, 10, 0.12), rgba(255, 214, 10, 0.08));
    border: 1px solid rgba(255, 159, 10, 0.25);
    border-radius: 8px;
}

.ee-bilanz-lcoe-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.ee-bilanz-lcoe-value {
    font-size: 18px;
    font-weight: 700;
    color: #ff9f0a;
}

.ee-bilanz-lcoe-value small {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

.ee-bilanz-hint {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: auto;
}

/* Energie Widget */
.ee-energie-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    height: 100%;
}

/* Old span-based mode indicator (deprecated) */
.ee-energie-mode {
    display: none;
}

/* New interactive button-based mode toggle */
.ee-energie-mode-toggle {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--ee-box-background-color);
    border-radius: 20px;
    margin-bottom: 8px;
}

.ee-energie-mode-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ee-energie-mode-btn:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.08);
}

.ee-energie-mode-btn.active {
    background: linear-gradient(135deg, #0a84ff, #5e5ce6);
    color: white;
    box-shadow: 0 2px 8px rgba(10, 132, 255, 0.3);
}

.ee-energie-main {
    margin: 8px 0;
}

.ee-energie-value {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
}

.ee-energie-unit {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 4px;
}

/* Energie Widget Compact */
.ee-energie-preview.compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 6px;
}

.ee-energie-preview.compact .ee-energie-mode-toggle {
    margin-bottom: 4px;
}

.ee-energie-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    width: 100%;
}

.ee-energie-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    background: var(--ee-box-background-color);
    border-radius: 10px;
    min-width: 80px;
    flex: 1;
    max-width: 120px;
}

.ee-energie-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #30d158;
    line-height: 1.2;
}

.ee-energie-stat-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

/* Klima Widget (Wind + Temp combined) */
.ee-klima-preview {
    height: 100%;
    display: flex;
    align-items: center;
}

.ee-klima-row {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.ee-klima-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.ee-klima-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(90, 200, 250, 0.15);
    border-radius: 8px;
    color: #5ac8fa;
}

.ee-klima-icon.temp {
    background: rgba(255, 149, 0, 0.15);
    color: #ff9500;
}

.ee-klima-icon svg {
    width: 20px;
    height: 20px;
}

.ee-klima-data {
    display: flex;
    flex-direction: column;
}

.ee-klima-value {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.ee-klima-value small {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 2px;
}

.ee-klima-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 2px;
}

.ee-klima-range {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.ee-klima-range-value {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.ee-klima-range-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Wind Widget */
/* Wind Widget Compact */
.ee-wind-preview.compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 4px;
}

.ee-wind-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.ee-wind-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px;
    background: var(--ee-box-background-color);
    border-radius: 8px;
    min-width: 48px;
    flex: 1;
}

.ee-wind-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #64d2ff;
    line-height: 1.2;
}

.ee-wind-stat-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 2px;
}

/* Temp Widget Compact */
.ee-temp-preview.compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 4px;
}

.ee-temp-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.ee-temp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px;
    background: var(--ee-box-background-color);
    border-radius: 8px;
    min-width: 48px;
    flex: 1;
}

.ee-temp-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #ff9f0a;
    line-height: 1.2;
}

.ee-temp-stat-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 2px;
}

/* Fullscreen specific content wrapper */
.ee-fullscreen-specific {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0;
    background: transparent;
}

.ee-fullscreen-specific.ee-chart-fullscreen {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
}

/* ============================================================================
   FULLSCREEN CONTENT - UNIFIED MODERN DESIGN
   ============================================================================ */

/* Base containers - modern card style */
.ee-fullscreen-specific #financeGraphs {
    display: block !important;
    width: 100%;
    min-height: 350px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.ee-fullscreen-specific #yieldGraphContainer,
.ee-fullscreen-specific #windGraphContainer,
.ee-fullscreen-specific #tempGraphContainer {
    display: block !important;
    width: 100%;
    flex: 1;
    min-height: 300px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px;
}

/* ============================================
   NON-EE USER: Hide energy chart elements
   ============================================ */
.ee-fullscreen-specific .energy-chart-controls,
.ee-fullscreen-specific #energyChartCheckboxes,
.ee-fullscreen-specific #energyChartHeaderStats,
.ee-fullscreen-specific #pvStatsContainer,
.ee-fullscreen-specific #dayAheadStatsContainer,
.ee-fullscreen-specific #batteryStatsContainer {
    display: none !important;
}

/* ============================================
   EE USER ONLY: Show and style energy chart elements
   ============================================ */

/* Energy chart controls - sleek toolbar */
body.is-ee-user .ee-fullscreen-specific .energy-chart-controls {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 14px 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Checkbox container - pill style */
body.is-ee-user .ee-fullscreen-specific #energyChartCheckboxes {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
}

/* Header stats - horizontal stats bar */
body.is-ee-user .ee-fullscreen-specific #energyChartHeaderStats {
    display: flex !important;
    flex-wrap: wrap;
    gap: 24px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.22) 0%, rgba(94, 92, 230, 0.5) 100%);
    border: 1px solid rgba(10, 132, 255, 0.15);
    border-radius: 14px;
}

/* Stats containers - unified card design */
body.is-ee-user .ee-fullscreen-specific #pvStatsContainer,
body.is-ee-user .ee-fullscreen-specific #dayAheadStatsContainer,
body.is-ee-user .ee-fullscreen-specific #batteryStatsContainer {
    display: block !important;
    padding: 20px 24px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}

/* Hide Day Ahead stats in static pricing mode */
body.is-ee-user .ee-fullscreen-specific.static-mode #dayAheadStatsContainer {
    display: none !important;
}

/* Hide Battery stats when no battery is configured */
body.is-ee-user .ee-fullscreen-specific.no-battery #batteryStatsContainer {
    display: none !important;
}

/* Stats container headers with accent color */
.ee-fullscreen-specific #pvStatsContainer h4,
.ee-fullscreen-specific #dayAheadStatsContainer h4,
.ee-fullscreen-specific #batteryStatsContainer h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #5ac8fa;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ee-fullscreen-specific #pvStatsContainer h4::before {
    content: '☀️';
    font-size: 16px;
}

.ee-fullscreen-specific #dayAheadStatsContainer h4::before {
    content: '📊';
    font-size: 16px;
}

.ee-fullscreen-specific #batteryStatsContainer h4::before {
    content: '🔋';
    font-size: 16px;
}

/* Stats grid - modern card grid */
.ee-fullscreen-specific .energy-stats-grid,
.ee-fullscreen-specific .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.ee-fullscreen-specific .energy-stat-item,
.ee-fullscreen-specific .stat-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.2s ease;
}

.ee-fullscreen-specific .energy-stat-item:hover,
.ee-fullscreen-specific .stat-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.ee-fullscreen-specific .energy-stat-value,
.ee-fullscreen-specific .stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    display: block;
    line-height: 1.2;
}

.ee-fullscreen-specific .energy-stat-label,
.ee-fullscreen-specific .stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

/* Chart containers in fullscreen */
.ee-fullscreen-specific canvas {
    max-width: 100%;
    height: auto !important;
}

/* Finance grid in fullscreen - 2 column layout */
.ee-fullscreen-specific .finance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Finance sections - unified card style */
.ee-fullscreen-specific .finance-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.2s ease;
}

.ee-fullscreen-specific .finance-section:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.ee-fullscreen-specific .finance-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #5ac8fa;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Anlagen tiles in fullscreen - responsive grid */
.ee-fullscreen-specific .financeMainCategory-main-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

/* Anlagen tile cards */
.ee-fullscreen-specific .financeMainCategory-main-tiles-grid > * {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: all 0.2s ease;
}

.ee-fullscreen-specific .financeMainCategory-main-tiles-grid > *:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    border-color: rgba(10, 132, 255, 0.3);
}

/* ============================================================================
   EXTENDED DARLEHENSRECHNER STYLES
   ============================================================================ */

/* Extended Grid Layout */
.ee-darlehen-extended-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    height: 100%;
}

.ee-darlehen-sliders {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* Global Saving Overlay - covers fullscreen content */
.ee-global-saving-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 0;
}

.ee-global-saving-overlay .ee-saving-content {
    padding: 16px 28px;
    font-size: 15px;
    background: rgba(10, 132, 255, 0.25);
    border: 1px solid rgba(10, 132, 255, 0.5);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.ee-global-saving-overlay .ee-saving-spinner {
    width: 20px;
    height: 20px;
    border-width: 3px;
}

/* Shared saving content styles */
.ee-saving-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(10, 132, 255, 0.2);
    border: 1px solid rgba(10, 132, 255, 0.4);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #5ac8fa;
}

.ee-saving-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(90, 200, 250, 0.3);
    border-top-color: #5ac8fa;
    border-radius: 50%;
    animation: ee-spin 0.8s linear infinite;
}

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

/* Disabled slider state */
.ee-modern-slider:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Fullscreen content needs relative positioning for overlay */
.ee-fullscreen-content {
    position: relative;
}

.ee-darlehen-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
}

/* Section Titles */
.ee-section-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ee-slider-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 16px;
}

.ee-slider-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Modern Slider Card */
.ee-modern-slider-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    transition: all 0.2s ease;
}

.ee-modern-slider-card.compact {
    padding: 12px 16px;
}

.ee-modern-slider-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

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

.ee-slider-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.ee-slider-value-box {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(10, 132, 255, 0.15);
    border: 1px solid rgba(10, 132, 255, 0.3);
    border-radius: 10px;
    padding: 8px 14px;
    min-width: 85px;
    justify-content: center;
}

.ee-slider-value-box.accent-green {
    background: rgba(48, 209, 88, 0.15);
    border-color: rgba(48, 209, 88, 0.3);
}

.ee-slider-value-box.accent-orange {
    background: rgba(255, 159, 10, 0.15);
    border-color: rgba(255, 159, 10, 0.3);
}

.ee-slider-value-box.accent-blue {
    background: rgba(10, 132, 255, 0.15);
    border-color: rgba(10, 132, 255, 0.3);
}

.ee-slider-value-box.accent-purple {
    background: rgba(175, 82, 222, 0.15);
    border-color: rgba(175, 82, 222, 0.3);
}

.ee-slider-value-box.small {
    padding: 6px 10px;
    min-width: 65px;
}

.ee-slider-value {
    font-size: 16px;
    font-weight: 700;
    color: #5ac8fa;
}

.ee-slider-value-box.small .ee-slider-value {
    font-size: 14px;
}

.ee-slider-value-box.accent-green .ee-slider-value {
    color: #30d158;
}

.ee-slider-value-box.accent-orange .ee-slider-value {
    color: #ff9f0a;
}

.ee-slider-value-box.accent-purple .ee-slider-value {
    color: #af52de;
}

.ee-slider-unit {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

/* Slider Track */
.ee-slider-wrapper {
    position: relative;
    height: 22px;
    margin: 12px 0;
    display: flex;
    align-items: center;
}

.ee-modern-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 3;
}

.ee-modern-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #ffffff, #e8e8e8);
    border: 3px solid #0a84ff;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.15s ease;
}

.ee-modern-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.4);
}

.ee-modern-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.ee-modern-slider.green::-webkit-slider-thumb {
    border-color: #30d158;
}

.ee-modern-slider.orange::-webkit-slider-thumb {
    border-color: #ff9f0a;
}

.ee-modern-slider.purple::-webkit-slider-thumb {
    border-color: #af52de;
}

.ee-modern-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #ffffff, #e8e8e8);
    border: 3px solid #0a84ff;
    border-radius: 50%;
    cursor: grab;
}

.ee-modern-slider::-moz-range-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Track Fill */
.ee-slider-track-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 8px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #0a84ff, #5ac8fa);
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
    transition: width 0.05s ease-out;
}

.ee-slider-track-fill.green {
    background: linear-gradient(90deg, #30d158, #34c759);
}

.ee-slider-track-fill.orange {
    background: linear-gradient(90deg, #ff9f0a, #ffcc00);
}

.ee-slider-track-fill.purple {
    background: linear-gradient(90deg, #af52de, #bf5af2);
}

.ee-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 8px;
}

/* KPI Grid */
.ee-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ee-kpi-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}

.ee-kpi-card.main {
    grid-column: span 3;
    background: rgba(10, 132, 255, 0.4);
    border-color: rgba(10, 132, 255, 0.2);
}

.ee-kpi-card.highlight {
    background: rgba(48, 209, 88, 0.2);
    border-color: rgba(48, 209, 88, 0.2);
}

.ee-kpi-label {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 6px;
}

.ee-kpi-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

.ee-kpi-card.main .ee-kpi-value {
    font-size: 22px;
    color: #85d4f7;
}

.ee-kpi-card.highlight .ee-kpi-value {
    color: #30d158;
}

.ee-kpi-sub {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 4px;
}

/* Payment Schedule */
.ee-payment-schedule {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    padding: 16px;
}

.ee-schedule-table {
    margin-top: 12px;
}

.ee-schedule-header {
    display: grid;
    grid-template-columns: 50px 1fr 1fr 1fr 1fr;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

.ee-schedule-body {
    margin-top: 8px;
}

.ee-schedule-row {
    display: grid;
    grid-template-columns: 50px 1fr 1fr 1fr 1fr;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ee-schedule-row:last-child {
    border-bottom: none;
}

.ee-schedule-row span:first-child {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

/* Nachrang Schedule Styling */
.ee-schedule-table.nachrang .ee-schedule-header {
    background: linear-gradient(90deg, rgba(255, 159, 10, 0.15), rgba(255, 204, 0, 0.1));
    border-left: 3px solid #ff9f0a;
}

.ee-schedule-row.nachrang {
    border-left: 3px solid transparent;
    background: linear-gradient(90deg, rgba(255, 159, 10, 0.03), transparent);
}

.ee-schedule-row.nachrang:hover {
    background: linear-gradient(90deg, rgba(255, 159, 10, 0.08), rgba(255, 204, 0, 0.04));
}

.ee-schedule-row.empty {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    text-align: center;
}

.ee-schedule-row.empty span {
    grid-column: 1 / -1;
}

/* Payment Schedule spacing */
.ee-payment-schedule + .ee-payment-schedule {
    margin-top: 16px;
}

/* Scrollable schedule body for many years */
.ee-schedule-body {
    max-height: 300px;
    overflow-y: auto;
}

/* Summary row styling */
.ee-schedule-row.summary {
    background: rgba(10, 132, 255, 0.1);
    border-top: 2px solid rgba(10, 132, 255, 0.3);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    position: sticky;
    bottom: 0;
}

.ee-schedule-row.nachrang.summary {
    background: rgba(255, 159, 10, 0.1);
    border-top: 2px solid rgba(255, 159, 10, 0.3);
}

/* Financing Visual Bar */
.ee-financing-visual {
    margin-top: auto;
}

.ee-stacked-bar {
    display: flex;
    height: 36px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}

.ee-bar-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    transition: width 0.3s ease;
}

.ee-bar-segment.bank {
    background: linear-gradient(90deg, #0a84ff, #5ac8fa);
}

.ee-bar-segment.other {
    background: linear-gradient(90deg, #ff9f0a, #ffcc00);
}

/* Responsive */
@media (max-width: 900px) {
    .ee-darlehen-extended-grid {
        grid-template-columns: 1fr;
    }

    .ee-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ee-kpi-card.main {
        grid-column: span 2;
    }

    .ee-slider-row {
        grid-template-columns: 1fr;
    }
}

/* Result Panel */
.ee-darlehen-result-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ee-result-visual {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

/* Donut Chart */
.ee-donut-chart {
    position: relative;
    width: 160px;
    height: 160px;
}

.ee-donut-chart svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.ee-donut-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 12;
}

.ee-donut-segment {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dasharray 0.4s ease;
}

.ee-donut-segment.bank {
    stroke: url(#donutGradient);
    stroke: #0a84ff;
}

.ee-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.ee-donut-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.ee-donut-label {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

/* Result Details */
.ee-result-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ee-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.ee-result-row.highlight {
    background: rgba(10, 132, 255, 0.1);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 4px;
}

.ee-result-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.ee-result-value {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.ee-result-row.highlight .ee-result-value {
    color: #5ac8fa;
    font-size: 16px;
}

.ee-result-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 4px 0;
}

/* Responsive */
@media (max-width: 900px) {
    .ee-darlehen-modern-grid {
        grid-template-columns: 1fr;
    }

    .ee-darlehen-result-panel {
        order: -1;
    }

    .ee-donut-chart {
        width: 140px;
        height: 140px;
    }
}

/* Input fields in fullscreen */
.ee-fullscreen-specific input[type="text"],
.ee-fullscreen-specific input[type="number"],
.ee-fullscreen-specific select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 14px;
    color: #ffffff;
    font-size: 14px;
    transition: all 0.2s ease;
}

.ee-fullscreen-specific input[type="text"]:focus,
.ee-fullscreen-specific input[type="number"]:focus,
.ee-fullscreen-specific select:focus {
    border-color: rgba(10, 132, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}

/* Buttons in fullscreen */
.ee-fullscreen-specific button,
.ee-fullscreen-specific .btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ee-fullscreen-specific button:hover,
.ee-fullscreen-specific .btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.ee-fullscreen-specific button.active,
.ee-fullscreen-specific .btn.active {
    background: linear-gradient(135deg, #0a84ff, #5e5ce6);
    border-color: transparent;
    color: #ffffff;
}

/* Tables in fullscreen */
.ee-fullscreen-specific table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.ee-fullscreen-specific table th {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ee-fullscreen-specific table th:first-child {
    border-radius: 12px 0 0 0;
}

.ee-fullscreen-specific table th:last-child {
    border-radius: 0 12px 0 0;
}

.ee-fullscreen-specific table td {
    padding: 12px 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ee-fullscreen-specific table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.ee-fullscreen-specific table tr:last-child td {
    border-bottom: none;
}

.ee-fullscreen-specific table tr:last-child td:first-child {
    border-radius: 0 0 0 12px;
}

.ee-fullscreen-specific table tr:last-child td:last-child {
    border-radius: 0 0 12px 0;
}


/* ============================================================================
   INVESTITION WIDGET FULLSCREEN - Modern Boxed Layout
   ============================================================================ */

.ee-invest-fullscreen {
    padding: 0 !important;
}

.ee-invest-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding-bottom: 20px;
}

.ee-invest-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

.ee-invest-card:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 0, 0, 0.5);
}

.ee-invest-card.result {
    background: linear-gradient(135deg, rgba(48, 209, 88, 0.2) 0%, rgba(10, 132, 255, 0.2) 100%);
    border-color: rgba(48, 209, 88, 0.2);
}

.ee-invest-card.result.negative {
    background: linear-gradient(135deg, rgba(255, 69, 58, 0.2) 0%, rgba(255, 159, 10, 0.2) 100%);
    border-color: rgba(255, 69, 58, 0.2);
}

.ee-invest-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
}

.ee-invest-card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    font-size: 20px;
    color: #fff;
}

.ee-invest-card-icon.positive {
    background: rgba(48, 209, 88, 0.5);
}

.ee-invest-card-icon.negative {
    background: rgba(255, 69, 58, 0.5);
}

.ee-invest-card-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.ee-invest-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ee-invest-kpi-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    margin-bottom: 12px;
}

.ee-invest-kpi-row.highlight {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.12) 0%, rgba(94, 92, 230, 0.08) 100%);
    border: 1px solid rgba(10, 132, 255, 0.2);
}

.ee-invest-kpi-row.highlight.positive {
    background: linear-gradient(135deg, rgba(48, 209, 88, 0.12) 0%, rgba(52, 199, 89, 0.08) 100%);
    border-color: rgba(48, 209, 88, 0.25);
}

.ee-invest-kpi-row.highlight.negative {
    background: linear-gradient(135deg, rgba(255, 69, 58, 0.12) 0%, rgba(255, 159, 10, 0.08) 100%);
    border-color: rgba(255, 69, 58, 0.25);
}

.ee-invest-kpi-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.ee-invest-kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.ee-invest-kpi-value.small {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
}

.ee-invest-kpi-value.positive {
    color: #30d158;
}

.ee-invest-kpi-value.negative {
    color: #ff453a;
}

.ee-invest-breakdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

.ee-invest-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.2s ease;
}

.ee-invest-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(4px);
}

.ee-invest-item-icon {
    font-size: 18px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.ee-invest-item-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ee-invest-item-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}

.ee-invest-item-value {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

/* Result card specific */
.ee-invest-result-main {
    text-align: center;
    padding: 24px 0;
    margin-bottom: 20px;
}

.ee-invest-result-value {
    display: block;
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 8px;
}

.ee-invest-result-value.positive {
    color: #30d158;
    text-shadow: 0 0 30px rgba(48, 209, 88, 0.4);
}

.ee-invest-result-value.negative {
    color: #ff453a;
    text-shadow: 0 0 30px rgba(255, 69, 58, 0.4);
}

.ee-invest-result-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ee-invest-result-summary {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 16px 20px;
}

.ee-invest-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

.ee-invest-summary-row span.positive {
    color: #30d158;
    font-weight: 600;
}

.ee-invest-summary-row span.negative {
    color: #ff453a;
    font-weight: 600;
}

.ee-invest-summary-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

.ee-invest-summary-row.total {
    font-weight: 700;
    font-size: 15px;
    color: #ffffff;
}

/* Responsive */
@media (max-width: 900px) {
    .ee-invest-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================================
   FULLSCREEN SPECIFIC STYLES
   ============================================================================ */

.ee-finance-kpi-fullscreen,
.ee-energy-fullscreen,
.ee-bilanz-fullscreen,
.ee-wind-fullscreen,
.ee-temp-fullscreen,
.ee-docs-fullscreen {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ee-kpi-section {
    margin-bottom: var(--ee-space-xl);
}

.ee-kpi-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ee-text-primary);
    margin-bottom: var(--ee-space-md);
}

.ee-energy-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ee-space-md);
    background: var(--ee-bg-glass);
    border-radius: var(--ee-radius-md);
    margin-bottom: var(--ee-space-lg);
}

.ee-view-selector,
.ee-mode-toggle {
    display: flex;
    gap: var(--ee-space-xs);
}

.ee-view-btn,
.ee-mode-btn {
    padding: var(--ee-space-sm) var(--ee-space-md);
    border: none;
    background: transparent;
    color: var(--ee-text-tertiary);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--ee-radius-sm);
    cursor: pointer;
    transition: all var(--ee-transition-fast);
}

.ee-view-btn:hover,
.ee-mode-btn:hover {
    background: var(--ee-bg-card-hover);
    color: var(--ee-text-secondary);
}

.ee-view-btn.active,
.ee-mode-btn.active {
    background: var(--ee-accent-one);
    color: white;
}

.ee-energy-chart-full,
.ee-wind-chart-container,
.ee-temp-chart-container {
    flex: 1;
    min-height: 300px;
    background: var(--ee-bg-card);
    border-radius: var(--ee-radius-lg);
    padding: var(--ee-space-lg);
}

.ee-bilanz-tabs {
    display: flex;
    gap: var(--ee-space-sm);
    margin-bottom: var(--ee-space-lg);
}

.ee-bilanz-content {
    flex: 1;
    overflow: auto;
}

.ee-docs-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--ee-space-lg);
    margin-bottom: var(--ee-space-xl);
}

.ee-doc-card {
    display: flex;
    align-items: center;
    gap: var(--ee-space-md);
    padding: var(--ee-space-lg);
    background: var(--ee-bg-card);
    border: 1px solid var(--ee-border-subtle);
    border-radius: var(--ee-radius-lg);
    cursor: pointer;
    transition: all var(--ee-transition-fast);
}

.ee-doc-card:hover {
    background: var(--ee-bg-card-hover);
    border-color: var(--ee-accent-one);
    transform: translateY(-2px);
}

.ee-doc-card .ee-doc-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ee-bg-glass);
    border-radius: var(--ee-radius-md);
}

.ee-doc-card .ee-doc-icon svg {
    width: 24px;
    height: 24px;
    color: var(--ee-accent-one);
}

.ee-doc-card .ee-doc-info h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--ee-text-primary);
    margin: 0 0 4px 0;
}

.ee-doc-card .ee-doc-info p {
    font-size: 13px;
    color: var(--ee-text-tertiary);
    margin: 0;
}


/* ============================================================================
   WIND & TEMP KPIs - Preview und Fullscreen Statistiken
   ============================================================================ */

/* Preview KPIs - kleine Karten unter Hauptwert */
.ee-wind-kpis,
.ee-temp-kpis {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
    width: 100%;
}

.ee-wind-kpi,
.ee-temp-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    min-width: 55px;
    transition: all 0.2s ease;
}

.ee-wind-kpi:hover,
.ee-temp-kpi:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.ee-wind-kpi-value,
.ee-temp-kpi-value {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.ee-wind-kpi-value {
    color: #64d2ff;
}

.ee-temp-kpi-value {
    color: #ff9f0a;
}

.ee-wind-kpi-label,
.ee-temp-kpi-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 2px;
}

/* Fullscreen Statistik-Grid */
.ee-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.ee-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 16px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: all 0.2s ease;
}

.ee-stat-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-3px);
}

.ee-stat-card.hot {
    background: linear-gradient(135deg, rgba(255, 69, 58, 0.1) 0%, rgba(255, 159, 10, 0.08) 100%);
    border-color: rgba(255, 69, 58, 0.2);
}

.ee-stat-card.cold {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.1) 0%, rgba(100, 210, 255, 0.08) 100%);
    border-color: rgba(10, 132, 255, 0.2);
}

.ee-stat-icon {
    font-size: 22px;
    margin-bottom: 8px;
    opacity: 0.85;
}

.ee-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.ee-stat-card.hot .ee-stat-value {
    color: #ff9f0a;
}

.ee-stat-card.cold .ee-stat-value {
    color: #64d2ff;
}

.ee-stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 6px;
}

/* Responsive */
@media (max-width: 600px) {
    .ee-wind-row,
    .ee-temp-row {
        gap: 4px;
    }

    .ee-wind-stat,
    .ee-temp-stat {
        padding: 4px 6px;
        min-width: 40px;
    }

    .ee-wind-stat-value,
    .ee-temp-stat-value {
        font-size: 14px;
    }

    .ee-wind-stat-label,
    .ee-temp-stat-label {
        font-size: 8px;
    }

    .ee-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .ee-stat-card {
        padding: 14px 12px;
    }

    .ee-stat-value {
        font-size: 17px;
    }
}


/* ============================================================================
   FINANCE HARDWARE BASE STYLES
   (Moved from ee-project-styles.css for proper organization)
   ============================================================================ */

/* finance Hardware*/

.financeMainCategory-main-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(170px, calc((100% / 4)) - 60px), 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.financeMainCategory-main-category {
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.financeMainCategory-main-category:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.financeMainCategory-main-category.active {
    border-color: #4caf50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
}

.financeMainCategory-category-indicator {
    text-align: center;
}

.financeMainCategory-indicator-icon {
    display: inline-block;
    font-size: 14px;
    color: #b4b4b4;
    transition: transform 0.3s ease;
}

.financeMainCategory-indicator-icon.active {
    color: var(--secondary-color);
}

/* Animation für ausklappbare Inhalte */
#financeMainCategory-details-container {
    transition: max-height 0.4s ease-in-out;
    overflow: hidden;
}



/* Kachel-Raster */
.financeMainCategory-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

/* Einzelne Kachel */
.financeMainCategory-tile {
    background-color: rgb(0, 9, 18);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.financeMainCategory-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Kachel-Header */
.financeMainCategory-tile-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 9, 18, 1) 50%, rgba(0, 9, 18, 0) 100%);
    width: 100%;
    color: white;
    font-weight: 600;
    justify-content: center;
    font-size: 18px;
}


/* Titel in der Kachel */
.financeMainCategory-tile-header .financeHardware-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
    text-align: left;
    color: #212529;
}

/* Bild-Container */
.financeMainCategory-image-bg {
    width: 100%;
    height: 250px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 0.3s ease; /* Optional: für Hover-Effekte */
}



/* Kachel-Inhalt */
.financeMainCategory-tile-content {
    padding: 1rem;
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%);
    padding-bottom: 5px;
}

/* Spezifikationen */
.financeMainCategory-specs {
    display: grid;
    gap: 0.8rem;
}

.financeMainCategory-spec-item {
    display: flex;
    flex-direction: column;
    color: white;
}

.financeMainCategory-spec-value {
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
}




/* Hauptstil für die Finance Hardware Komponente */
.finance-hardware {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #212529;
    margin: 0 auto;
    margin-bottom: 20px;
    background-color: rgba(0,0,0,0.2);
    padding: 20px;
    border-radius: 20px;
}

/* Kachel-Raster */
.financeHardware-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.5rem;
}

/* Einzelne Kachel */
.financeHardware-tile {
    background-color: rgb(244, 242, 238);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    height: 250px;
}

.financeHardware-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Kachel-Header */
.financeHardware-tile-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    position: absolute;
    background: linear-gradient(180deg, rgba(244, 242, 238, 1) 50%, rgba(244, 242, 238, 0) 100%);
    width: 100%;
    justify-content: center;
    z-index: 1;
}

/* Logo */
.financeHardware-logo {
    width: 40px;
    height: 40px;
    margin-right: 0.8rem;
    display: flex
;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Titel in der Kachel */
.financeHardware-tile-header .financeHardware-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
    text-align: left;
    color: #212529;
}

/* Bild-Container */
.financeHardware-image-bg {
    width: 100%;
    height: 250px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease; /* Optional: für Hover-Effekte */
}

.financeHardware-image-bg[style*="url('')"]::before {
    content: "📦";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: #ccc;
}



/* Kachel-Inhalt */
.financeHardware-tile-content {
    padding: 1rem;
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%);
}

/* Spezifikationen */
.financeHardware-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.financeHardware-spec-item {
    display: flex;
    flex-direction: column;
}

.financeHardware-spec-label {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.2rem;
    text-align: center;
}

.financeHardware-spec-value {
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
}

/* Editierbare Felder */
/*.financeHardware-editable {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
}

.financeHardware-price-input {
    width: calc(100% - 30px);
    padding: 0.25rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
}


.financeHardware-edit-btn, .financeHardware-save-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    margin-left: 10px;
}

.financeHardware-edit-btn:hover,
.financeHardware-save-btn:hover {
    background-color: #f1f3f5;
}


.financeHardware-edit-icon,
.financeHardware-save-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.financeHardware-edit-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E");
}

.financeHardware-save-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d6efd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'%3E%3C/path%3E%3Cpolyline points='17 21 17 13 7 13 7 21'%3E%3C/polyline%3E%3Cpolyline points='7 3 7 8 15 8'%3E%3C/polyline%3E%3C/svg%3E");
}


/* slider*/

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

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

/* Zusätzlich für alle Browser */
input[type="number"] {
    appearance: none;
}

/* Styles für den Slider */
.financeHardware-slider-container {
    display: none; /* temp setting*/
    width: calc(100% - 2rem);
    margin: 8px 0;
    padding: 5px 0;
    position: absolute;
    bottom: 40px;
}

.financeHardware-slider-track {
    height: 4px;
    background-color: rgba(200, 200, 200, 0.3);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.financeHardware-slider-fill {
    position: absolute;
    height: 100%;
    background: linear-gradient(90deg, #4fb34f, #81d281);
    border-radius: 2px;
    width: 50%; /* Wird per JavaScript aktualisiert */
}

.financeHardware-slider-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    top: 50%;
    left: 50%; /* Wird per JavaScript aktualisiert */
    transform: translate(-50%, -50%);
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s;
}

.financeHardware-slider-handle:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

.financeHardware-slider-handle:active {
    transform: translate(-50%, -50%) scale(1.3);
}

/* Gesamtpreis-Bereich */
.financeHardware-price-total {
    display: flex;
    justify-content: center;
    align-items: center;
}

.financeHardware-total-value {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--secondary-color);
}

.financeHardware-price-input {
    text-align: center;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    max-width: 100px;
    min-width: 30px;
    border-radius: 20px;
    background-color: #f1f1f1;
}

.hardwareConfigurationInput {
    text-align: center;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    width: 100px;
    border-radius: 20px;
    background-color: #00000036;
    margin-left: 5px;
    color: white;
}


/* ============================================================================
   FINANCE HARDWARE TILES - Liquid Glass Override
   ============================================================================ */

/* Grid Container */
.ee-fullscreen-content .financeHardware-tiles-grid,
.ee-fullscreen-specific .financeHardware-tiles-grid,
.ee-widget .financeHardware-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--ee-space-md);
}

/* Tile Base - Liquid Glass */
.ee-fullscreen-content .financeHardware-tile,
.ee-fullscreen-specific .financeHardware-tile,
.ee-widget .financeHardware-tile {
    background: #eee9e3;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top-color: rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--ee-radius-lg) !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    overflow: hidden;
    height: 350px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ee-fullscreen-content .financeHardware-tile:hover,
.ee-fullscreen-specific .financeHardware-tile:hover,
.ee-widget .financeHardware-tile:hover {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.06) 100%
    ) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-4px) scale(1.01) !important;
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 0 60px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Tile Header */
.ee-fullscreen-content .financeHardware-tile-header,
.ee-fullscreen-specific .financeHardware-tile-header,
.ee-widget .financeHardware-tile-header {
    background: linear-gradient(
        180deg,
        rgba(30, 35, 50, 0.9) 0%,
        rgba(30, 35, 50, 0.5) 100%
    ) !important;
    padding: var(--ee-space-md) !important;
}

/* Title Text */
.ee-fullscreen-content .financeHardware-title,
.ee-fullscreen-specific .financeHardware-title,
.ee-widget .financeHardware-title {
    color: var(--ee-text-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Tile Content Area */
.ee-fullscreen-content .financeHardware-tile-content,
.ee-fullscreen-specific .financeHardware-tile-content,
.ee-widget .financeHardware-tile-content {
    background: linear-gradient(180deg, rgb(20 25 40 / 80%) 0%, rgba(20, 25, 40, 0.95) 100%) !important;
    padding: var(--ee-space-md) !important;
}

/* Spec Labels */
.ee-fullscreen-content .financeHardware-spec-label,
.ee-fullscreen-specific .financeHardware-spec-label,
.ee-widget .financeHardware-spec-label {
    color: var(--ee-text-muted) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Spec Values - High Contrast */
.ee-fullscreen-content .financeHardware-spec-value,
.ee-fullscreen-specific .financeHardware-spec-value,
.ee-widget .financeHardware-spec-value {
    color: var(--ee-text-primary) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Specs Grid */
.ee-fullscreen-content .financeHardware-specs,
.ee-fullscreen-specific .financeHardware-specs,
.ee-widget .financeHardware-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ee-space-sm);
}

/* Spec Item */
.ee-fullscreen-content .financeHardware-spec-item,
.ee-fullscreen-specific .financeHardware-spec-item,
.ee-widget .financeHardware-spec-item {
    background: rgba(255, 255, 255, 0.04);
    padding: var(--ee-space-sm);
    border-radius: var(--ee-radius-sm);
    text-align: center;
}

/* Image Background */
.ee-fullscreen-content .financeHardware-image-bg,
.ee-fullscreen-specific .financeHardware-image-bg,
.ee-widget .financeHardware-image-bg {
    opacity: 0.8;
    filter: brightness(0.9) contrast(1.1);
}

/* Input Fields in Tiles */
.ee-fullscreen-content .financeHardware-tile input,
.ee-fullscreen-specific .financeHardware-tile input,
.ee-widget .financeHardware-tile input,
.ee-fullscreen-content .financeHardware-tile select,
.ee-fullscreen-specific .financeHardware-tile select,
.ee-widget .financeHardware-tile select,
.ee-fullscreen-specific .financeHardware-price-input,
.ee-fullscreen-specific .universal-input {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--ee-text-primary) !important;
    border-radius: var(--ee-radius-sm) !important;
    padding: 8px 12px !important;
}

.ee-fullscreen-content .financeHardware-tile input:focus,
.ee-fullscreen-specific .financeHardware-tile input:focus,
.ee-widget .financeHardware-tile input:focus,
.ee-fullscreen-content .financeHardware-tile select:focus,
.ee-fullscreen-specific .financeHardware-tile select:focus,
.ee-widget .financeHardware-tile select:focus,
.ee-fullscreen-specific .financeHardware-price-input:focus,
.ee-fullscreen-specific .universal-input:focus {
    border-color: var(--ee-accent-one) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2) !important;
    outline: none !important;
}

/* Slider Container */
.ee-fullscreen-content .financeHardware-slider-container,
.ee-fullscreen-specific .financeHardware-slider-container,
.ee-widget .financeHardware-slider-container {
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: var(--ee-radius-sm) !important;
    padding: var(--ee-space-sm) !important;
    margin-top: var(--ee-space-sm) !important;
}


/* ============================================================================
   WIRTSCHAFTLICHKEITS-METRIKEN (Finance Key Metrics)
   (Moved from ee-project-styles.css for proper organization)
   ============================================================================ */

/* Scrollbarer Container für Finance-Bereich */
.finance-overview {
    position: relative;
    overflow: visible;
}

/* Metrics layout */
.finance-key-metrics {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5%;
    width: calc(100% + 100px);
    margin-bottom: 30px;
    margin-top: -50px;
    margin-left: -50px;
    padding: 0 5%;
}

.metric-card {
    flex: 1;
    background: rgb(0 9 18 / 85%);
    border-radius: 12px;
    padding: 10px 24px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    animation: fadeIn 0.5s forwards;
    animation-delay: calc(var(--i) * 0.1s);
    width: 144px;
    height: 200px;
}

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

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.3);
}

.metric-ring-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 16px;
}

.metric-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.metric-ring-bg {
    border: 6px solid rgba(50, 50, 50, 0.4);
}

.metric-ring-progress {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    color: transparent;
}

/* Farben für die verschiedenen Metriken */
.metric-roi .metric-ring-progress {
    color: #30d158;
}

.metric-irr .metric-ring-progress {
    color: #0a84ff;
}

.metric-amort .metric-ring-progress {
    color: #ff9f0a;
}

.metric-lcoe .metric-ring-progress {
    color: #5e5ce6;
}

.metric-value-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgb(0,9,18);
    border-radius: 50%;
    margin: 5%;
}

.metric-value {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-top: 20px;
}

.metric-label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.metric-trend {
    font-size: 13px;
    margin-top: 5px;
    height: 13px;
}

.trend-up {
    color: #30d158;
}

.trend-down {
    color: #ff9f0a;
}

/* Mini header */
.finance-mini-header {
    position: sticky;
    top: 1px;
    left: 0;
    right: 0;
    height: 50px;
    background: rgba(0,9,18,.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    visibility: hidden;
    width: calc(100% + 102px);
    margin-left: -50px;
}

.finance-mini-header.visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mini-metrics-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    padding: 0 70px;
}

.mini-metric {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mini-ring-container {
    position: relative;
    width: 36px;
    height: 36px;
}

.mini-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.mini-ring-bg {
    border: 3px solid rgba(50, 50, 50, 0.4);
}

.mini-ring-progress {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    color: transparent;
}

.mini-ring-center-bg {
    width: 80%;
    height: 80%;
    background-color: rgb(37 44 53);
    border-radius: 50%;
    margin: 10%;
}

/* Farben für die Mini-Versionen */
.mini-roi .mini-ring-progress {
    color: #30d158;
}

.mini-irr .mini-ring-progress {
    color: #0a84ff;
}

.mini-amort .mini-ring-progress {
    color: #ff9f0a;
}

.mini-lcoe .mini-ring-progress {
    color: #5e5ce6;
}

.mini-value-container {
    display: flex;
    flex-direction: column;
}

.mini-value {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    transition: 0.5s;
}

.mini-value.blurred{
    filter: blur(3px);
}

.mini-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .finance-key-metrics {
        flex-wrap: wrap;
        gap: 12px;
    }

    .metric-card {
        flex: 1 0 calc(50% - 12px);
        padding: 16px;
    }

    .metric-ring-container {
        width: 90px;
        height: 90px;
    }

    .metric-value {
        font-size: 20px;
    }

    .mini-metrics-container {
        overflow-x: auto;
        width: 100%;
        justify-content: flex-start;
        padding: 0 16px;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .metric-card {
        flex: 1 0 100%;
    }
}


/* ============================================================================
   BILANZ WIDGET STYLES
   (Moved from ee-project-styles.css for proper organization)
   ============================================================================ */

.bilanz-metrics-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 40px;
}

.bilanz-metrics-header h3 {
   font-size: 28px;
   font-weight: 500;
   background: linear-gradient(135deg, #fff, #a0a0a0);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   letter-spacing: -0.5px;
   margin: 0;
    padding: 0;
    line-height: 40px;
}

.bilanz-metrics-legend {
   display: flex;
   gap: 24px;
}

.bilanz-legend-item {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   opacity: 0.7;
}

.bilanz-legend-item.bilanz-excellent {
   color: #22c55e;
}

.bilanz-legend-item.bilanz-good {
   color: #fbbf24;
}

.bilanz-legend-item.bilanz-warning {
   color: #fb923c;
}

.bilanz-legend-item.bilanz-critical {
   color: #ef4444;
}


.bilanz-legend-item::before {
   content: '';
   width: 12px;
   height: 12px;
   border-radius: 3px;
}

.bilanz-legend-item.bilanz-excellent::before { background: #22c55e; }
.bilanz-legend-item.bilanz-good::before { background: #fbbf24; }
.bilanz-legend-item.bilanz-warning::before { background: #fb923c; }
.bilanz-legend-item.bilanz-critical::before { background: #ef4444; }

/* Primäre Metriken */
.bilanz-metrics-primary {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 24px;
   margin-bottom: 40px;
}

.bilanz-metric-card {
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 16px;
   padding: 28px;
   position: relative;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
}

.bilanz-metric-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transform: translateX(-100%);
   animation: bilanz-shimmer 3s infinite;
}

@keyframes bilanz-shimmer {
   100% { transform: translateX(100%); }
}

.bilanz-metric-card:hover {
   transform: translateY(-4px);
   background: rgba(255, 255, 255, 0.05);
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.bilanz-metric-card.bilanz-large { min-height: 180px; }
.bilanz-metric-card.bilanz-excellent {
   background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.1));
   border: 1px solid rgba(34, 197, 94, 0.3);
}

.bilanz-metric-card.bilanz-good {
   background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(251, 191, 36, 0.1));
   border: 1px solid rgba(251, 191, 36, 0.3);
}

.bilanz-metric-card.bilanz-warning {
   background: linear-gradient(135deg, rgba(251, 146, 60, 0.3), rgba(251, 146, 60, 0.1));
   border: 1px solid rgba(251, 146, 60, 0.3);
}

.bilanz-metric-card.bilanz-critical {
   background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.1));
   border: 1px solid rgba(239, 68, 68, 0.3);
}

.bilanz-metric-icon {
   position: absolute;
   top: 28px;
   right: 28px;
   opacity: 0.1;
}

.bilanz-metric-icon svg {
   width: 48px;
   height: 48px;
   fill: currentColor;
}

.bilanz-metric-content {
   position: relative;
   z-index: 1;
}

.bilanz-metric-value {
   font-size: 42px;
   font-weight: 600;
   line-height: 1;
   margin-bottom: 12px;
   letter-spacing: -1px;
   color: #fff;
}

.bilanz-metric-label {
   font-size: 15px;
   font-weight: 500;
   opacity: 0.9;
   margin-bottom: 6px;
   color: rgba(255, 255, 255, 0.9);
}

.bilanz-metric-subtitle {
   font-size: 13px;
   opacity: 0.5;
}

.bilanz-metric-trend {
   position: absolute;
   top: 28px;
   right: 28px;
   padding: 6px 12px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 20px;
   font-size: 13px;
   font-weight: 500;
}

.bilanz-metric-trend.bilanz-up { color: #4ade80; }
.bilanz-metric-trend.bilanz-down { color: #f87171; }

.bilanz-metric-sparkline {
   margin-top: 20px;
   height: 40px;
}

.bilanz-sparkline {
   width: 100%;
   height: 100%;
}

.bilanz-sparkline polyline {
   fill: none;
   stroke: #60a5fa;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.bilanz-sparkline .bilanz-threshold {
   stroke: rgba(255, 255, 255, 0.2);
   stroke-width: 1;
   stroke-dasharray: 4 2;
}

.bilanz-metric-progress {
   margin-top: 20px;
}

.bilanz-progress-bar {
   height: 6px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 3px;
   overflow: hidden;
}

.bilanz-progress-fill {
   height: 100%;
   background: linear-gradient(90deg, #4ade80, #60a5fa);
   border-radius: 3px;
   transition: width 0.5s ease;
}

/* Sekundäre Metriken - Anpassung für Dark Theme */
.bilanz-metrics-secondary {
   margin-bottom: 32px;
}

.bilanz-metric-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 20px;
}

.bilanz-metric-item {
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 12px;
   padding: 20px;
   transition: all 0.3s ease;
   position: relative;
}

.bilanz-metric-item:hover {
   background: rgba(255, 255, 255, 0.04);
   border-color: rgba(255, 255, 255, 0.15);
   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
   transform: translateY(-2px);
}

.bilanz-metric-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
}

.bilanz-metric-title {
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   opacity: 0.6;
   color: rgba(255, 255, 255, 0.8);
}

.bilanz-metric-info {
   cursor: help;
   opacity: 0.4;
   transition: opacity 0.2s;
   color: rgba(255, 255, 255, 0.4);
   font-size: 14px;
   position: relative;
}

.bilanz-metric-info:hover {
   opacity: 0.8;
}

/* Tooltip für Info-Icons */
.bilanz-metric-info[data-tooltip]:hover::after {
   content: attr(data-tooltip);
   position: absolute;
   bottom: 100%;
   right: 0;
   background: #1f2937;
   color: white;
   padding: 6px 10px;
   border-radius: 6px;
   font-size: 12px;
   white-space: nowrap;
   z-index: 1000;
   margin-bottom: 5px;
   box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.bilanz-metric-info[data-tooltip]:hover::before {
   content: "";
   position: absolute;
   bottom: 100%;
   right: 10px;
   margin-bottom: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: #1f2937 transparent transparent transparent;
}

.bilanz-metric-item .bilanz-metric-value {
   font-size: 24px;
   font-weight: 600;
   margin-bottom: 8px;
   color: #fff;
}

.bilanz-metric-formula {
   font-size: 11px;
   opacity: 0.4;
   font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
   color: rgba(255, 255, 255, 1);
}

/* Berechnungsdetails */
.bilanz-metrics-details {
   margin-top: 32px;
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 12px;
   overflow: hidden;
}

.bilanz-metrics-details summary {
   padding: 20px;
   cursor: pointer;
   font-weight: 500;
   display: flex;
   align-items: center;
   gap: 12px;
   transition: background 0.3s ease;
   list-style: none;
   color: rgba(255, 255, 255, 0.9);
}

.bilanz-metrics-details summary::-webkit-details-marker {
   display: none;
}

.bilanz-metrics-details summary:hover {
   background: rgba(255, 255, 255, 0.03);
}

.bilanz-metrics-details summary::before {
   content: '▶';
   transition: transform 0.3s ease;
}

.bilanz-metrics-details[open] summary::before {
   transform: rotate(90deg);
}

.bilanz-calculation-grid {
   padding: 24px;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 20px;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bilanz-calc-item {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.bilanz-calc-item code {
   background: rgba(79, 70, 229, 0.1);
   border: 1px solid rgba(79, 70, 229, 0.2);
   padding: 8px 12px;
   border-radius: 6px;
   font-size: 12px;
   color: #a5b4fc;
   font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
}

.bilanz-calc-item span {
   font-size: 12px;
   opacity: 0.6;
   color: rgba(255, 255, 255, 0.6);
}

/* Tab-Navigation für erweiterte Metriken */
.bilanz-advanced-metrics {
   margin-top: 32px;
   background: rgba(0, 0, 0, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   padding: 24px;
}



.bilanz-tabs {
   display: flex;
   gap: 4px;
   margin-bottom: 24px;
}

.bilanz-tab {
   padding: 10px 20px;
   background: none;
   border: none;
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.6);
   border-bottom: 2px solid transparent;
   margin-bottom: -2px;
   transition: all 0.2s;
   white-space: nowrap;
}

.bilanz-tab:hover {
   color: rgba(255, 255, 255, 0.9);
   background: rgba(255, 255, 255, 0.05);
}

.bilanz-tab.active {
   color: var(--secondary-color);
   border-bottom-color: var(--secondary-color);
   background: transparent;
}

.bilanz-tab-content {
   display: none;
   animation: fadeIn 0.3s ease-in;
}

.bilanz-tab-content.active {
   display: block;
}

/* Sensitivitäts-Ergebnisse */
.sensitivity-results {
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 8px;
   padding: 20px;
   margin-top: 20px;
}

.sensitivity-results h4 {
   font-size: 14px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.9);
   margin-bottom: 16px;
}

.sensitivity-result-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sensitivity-result-item:last-child {
   border-bottom: none;
}

.sensitivity-label {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.6);
}

.sensitivity-value {
   font-size: 14px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.9);
}

.sensitivity-value.good { color: #4ade80; }
.sensitivity-value.warning { color: #fbbf24; }
.sensitivity-value.critical { color: #f87171; }

/* Max CAPEX Highlight Box */
.max-capex-highlight {
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
   border: 2px solid rgba(59, 130, 246, 0.3);
   border-radius: 12px;
   padding: 24px;
   margin-bottom: 24px;
}

.max-capex-highlight h5 {
   font-size: 16px;
   font-weight: 600;
   color: #60a5fa;
   margin-bottom: 16px;
}

.max-capex-result {
   display: flex;
   align-items: baseline;
   gap: 12px;
   margin-bottom: 8px;
}

.max-capex-label {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.6);
}

.max-capex-value {
   font-size: 28px;
   font-weight: 700;
   color: #60a5fa;
}

.max-capex-conditions {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.5);
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Calculated Badge */
.calculated-badge {
   display: inline-block;
   background: #4ade80;
   color: #0a0a0a;
   font-size: 10px;
   padding: 2px 6px;
   border-radius: 4px;
   margin-left: 8px;
   font-weight: 600;
   text-transform: uppercase;
}

/* Loading Animation */
.calculation-loading {
   display: inline-block;
   width: 14px;
   height: 14px;
   border: 2px solid rgba(255, 255, 255, 0.2);
   border-top-color: #60a5fa;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
   margin-left: 8px;
}

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

/* Responsive Design for Bilanz */
@media (max-width: 768px) {
   .bilanz-metrics-container {
       padding: 24px;
   }

   .bilanz-metrics-primary {
       grid-template-columns: 1fr;
   }

   .bilanz-metric-grid {
       grid-template-columns: 1fr;
   }

   .bilanz-metric-card .bilanz-metric-value {
       font-size: 32px;
   }

   .bilanz-tabs {
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
   }

   .bilanz-tab {
       font-size: 12px;
       padding: 6px 12px;
   }

   .bilanz-calculation-grid {
       grid-template-columns: 1fr;
   }
}

/* IRR-Rechner Dark Theme Styling */
.bilanz-irr-calculator {
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.03));
   border: 1px solid rgba(59, 130, 246, 0.2);
   border-radius: 16px;
   padding: 28px;
   margin-bottom: 32px;
}

.bilanz-irr-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24px;
}

.bilanz-irr-header h4 {
   font-size: 18px;
   font-weight: 600;
   color: var(--secondary-color);
   margin: 0;
}

.bilanz-irr-tariff {
   background: rgba(255, 255, 255, 0.1);
   padding: 6px 12px;
   border-radius: 20px;
   font-size: 13px;
   color: rgba(255, 255, 255, 0.8);
}

.bilanz-irr-slider-container {
   margin-bottom: 32px;
}

.bilanz-irr-slider-label {
   display: flex;
   justify-content: space-between;
   margin-bottom: 16px;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.7);
}

.bilanz-irr-slider-value {
   font-size: 24px;
   font-weight: 700;
   color: var(--secondary-color);
}

.bilanz-irr-slider-wrapper {
   position: relative;
}

.bilanz-irr-slider {
   width: 100%;
   height: 6px;
   border-radius: 3px;
   background: rgba(255, 255, 255, 0.1);
   outline: none;
   -webkit-appearance: none;
}

.bilanz-irr-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: var(--secondary-color);
   cursor: pointer;
   box-shadow: 0 2px 8px var(--secondary-color-50);
}

.bilanz-irr-slider-marks {
   display: flex;
   justify-content: space-between;
   margin-top: 8px;
   font-size: 11px;
   color: rgba(255, 255, 255, 0.4);
}

.bilanz-irr-results {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 16px;
}

.bilanz-irr-result-card {
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   padding: 20px;
   text-align: center;
}

.bilanz-irr-result-card.positive {
   border-color: rgba(74, 222, 128, 0.3);
   background: rgba(74, 222, 128, 0.05);
}

.bilanz-irr-result-card.negative {
   border-color: rgba(248, 113, 113, 0.3);
   background: rgba(248, 113, 113, 0.05);
}

.bilanz-irr-result-label {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.6);
   margin-bottom: 8px;
}

.bilanz-irr-result-value {
   font-size: 20px;
   font-weight: 700;
   color: #fff;
}

.bilanz-irr-result-card.positive .bilanz-irr-result-value {
   color: #4ade80;
}

.bilanz-irr-result-card.negative .bilanz-irr-result-value {
   color: #f87171;
}

/* Info-Icon Styling (oben rechts positioniert) */
.bilanz-metric-item .bilanz-metric-info {
   position: absolute;
   top: 12px;
   right: 12px;
   cursor: pointer;
   color: #fff;
   font-size: 16px;
   width: 20px;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.8);
   transition: all 0.2s;
}

.bilanz-metric-item .bilanz-metric-info:hover {
   background: rgba(96, 165, 250, 0.1);
   color: var(--secondary-color);
}

/* Farbcodierung der Werte */
.metric-value-excellent {
   color: #22c55e !important;
}

.metric-value-good {
   color: #fbbf24 !important;
}

.metric-value-warning {
   color: #fb923c !important;
}

.metric-value-critical {
   color: #ef4444 !important;
}

/* Metric Popup Styles */
.metric-popup-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   z-index: 9999;
   animation: fadeIn 0.3s ease;
}

.metric-popup-overlay.active {
   display: flex;
   justify-content: center;
   align-items: center;
}

.metric-popup {
   background: #1a1a1a;
   border-radius: 12px;
   padding: 30px;
   max-width: 600px;
   width: 90%;
   max-height: 80vh;
   overflow-y: auto;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
   animation: slideUp 0.3s ease;
}

.metric-popup-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
   border-bottom: 1px solid #333;
   padding-bottom: 15px;
}

.metric-popup-title {
   font-size: 24px;
   font-weight: bold;
   color: #fff;
   margin: 0;
}

.metric-popup-close {
   background: none;
   border: none;
   color: #999;
   font-size: 28px;
   cursor: pointer;
   padding: 0;
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: color 0.2s;
}

.metric-popup-close:hover {
   color: #fff;
}

.metric-popup-value {
   display: flex;
   align-items: center;
   gap: 15px;
   margin-bottom: 25px;
   font-size: 32px;
   font-weight: bold;
   color: #4ade80;
}

.popup-value-excellent {
   color: #22c55e !important;
}

.popup-value-good {
   color: #fbbf24 !important;
}

.popup-value-warning {
   color: #fb923c !important;
}

.popup-value-critical {
   color: #ef4444 !important;
}

.popup-value-neutral {
   color: #999 !important;
}

.metric-status-badge {
   padding: 5px 12px;
   border-radius: 20px;
   font-size: 14px;
   font-weight: normal;
}

.metric-status-badge.excellent {
   background: #22c55e;
   color: #fff;
}

.metric-status-badge.good {
   background: #fbbf24;
   color: #000;
}

.metric-status-badge.warning {
   background: #fb923c;
   color: #000;
}

.metric-status-badge.critical {
   background: #ef4444;
   color: #fff;
}

.metric-status-badge.neutral {
   background: #6b7280;
   color: #fff;
}

.metric-popup-section {
   margin-bottom: 25px;
}

.metric-popup-section h4 {
   color: #999;
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 10px;
}

.metric-popup-section p {
   color: #ccc;
   line-height: 1.6;
   margin: 0;
}

.metric-formula-box {
   background: #0d0d0d;
   padding: 15px;
   border-radius: 8px;
   font-family: 'Courier New', monospace;
   color: #4ade80;
   border: 1px solid #333;
}

.metric-thresholds {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.metric-threshold-item {
   display: flex;
   justify-content: space-between;
   padding: 10px;
   background: #0d0d0d;
   border-radius: 6px;
   border: 1px solid #333;
}

.metric-threshold-item span:first-child {
   color: #999;
}

.metric-threshold-item span:last-child {
   font-weight: bold;
}

/* Animations */
@keyframes slideUp {
   from {
       transform: translateY(20px);
       opacity: 0;
   }
   to {
       transform: translateY(0);
       opacity: 1;
   }
}

/* Info Button Styles - positioned variant */
button.bilanz-metric-info,
span.bilanz-metric-info {
   position: absolute;
   top: 5px;
   right: 5px;
   background: rgba(0, 0, 0, 0.8);
   border: none;
   color: #fff;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   font-size: 12px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
   z-index: 10;
    padding: 0px;
}

button.bilanz-metric-info:hover,
span.bilanz-metric-info:hover {
   background: rgba(74, 222, 128, 0.2);
   border-color: #4ade80;
   color: #4ade80;
   transform: scale(1.1);
}


/* ============================================================================
   PRODUCT POPUP STYLES - Johnny Ive Design
   (Moved from ee-project-styles.css for proper organization)
   ============================================================================ */

/* Plus-Button Styles */
.productPopup-add-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 350px;
    border: 2px dashed #e0e0e0;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.productPopup-add-btn:hover {
    border-color: var(--secondary-color);
    background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--secondary-color-50);
}

.productPopup-plus-icon {
    font-size: 48px;
    color: var(--secondary-color);
    font-weight: 300;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.productPopup-add-btn:hover .productPopup-plus-icon {
    transform: rotate(90deg);
    color: var(--secondary-color-50);
}

.productPopup-add-text {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    text-align: center;
}

/* Delete-Button Styles */
.productPopup-delete-btn {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 32px;
    height: 32px;
    color: rgb(164 13 4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: all 0.3s ease;
}

.financeHardware-tile:hover .productPopup-delete-btn {
    opacity: 1;
}

.productPopup-delete-btn:hover {
    transform: rotate(90deg);
}

/* Popup Overlay */
.productPopup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: productPopup-fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes productPopup-fadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(10px);
    }
}

@keyframes productPopup-fadeOut {
    from {
        opacity: 1;
        backdrop-filter: blur(10px);
    }
    to {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

/* Popup Container */
.productPopup-container {
    background: white;
    border-radius: 20px;
    width: 90vw;
    max-width: 900px;
    height: 80vh;
    max-height: 600px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: productPopup-slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

@keyframes productPopup-slideIn {
    from {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Popup Header */
.productPopup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.productPopup-header h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #1d1d1f;
}

.productPopup-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.productPopup-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

/* Popup Content */
.productPopup-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.productPopup-left {
    width: 40%;
    border-right: 1px solid #f0f0f0;
    background: #fafafa;
}

.productPopup-right {
    width: 60%;
    display: flex;
    flex-direction: column;
}

/* Product List */
.productPopup-list {
    height: 100%;
    overflow-y: auto;
    padding: 16px 0;
}

.productPopup-item {
    padding: 16px 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--secondary-color-50);
    background: white;
    margin: 0 16px 8px;
    border-radius: 12px;
}

.productPopup-item:hover {
    background: var(--secondary-color-50);
    transform: translateX(4px);
}

.productPopup-item.productPopup-selected {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-color) 100%);
    color: white;
    box-shadow: 0 4px 15px var(--secondary-color-50);
}

.productPopup-item-name {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
}

.productPopup-item-price {
    font-size: 14px;
    opacity: 0.8;
}

/* Product Preview */
.productPopup-preview {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.productPopup-preview-content {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
}

.productPopup-preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    font-size: 18px;
    text-align: center;
}

.productPopup-preview-image {
    width: 100%;
    height: 200px;
    background: #f5f5f7;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
}


.productPopup-preview-image:has(img[src=""]):before,
.productPopup-preview-image:has(img:not([src])):before {
    content: "📦";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: #ccc;
}


.productPopup-preview-details h4 {
    margin: 0 0 16px 0;
    font-size: 24px;
    font-weight: 700;
    color: #1d1d1f;
}

.productPopup-preview-unit {
    font-size: 16px;
    color: #666;
    margin-bottom: 8px;
}

.productPopup-preview-price {
    font-size: 20px;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 16px;
}

.productPopup-preview-description {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

/* Popup Actions */
.productPopup-actions {
    padding: 24px 32px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}

.productPopup-add-button {
    width: 100%;
    padding: 16px 24px;
    background: #ccc;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: not-allowed;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.productPopup-add-button.productPopup-enabled {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-color) 100%);
    cursor: pointer;
    box-shadow: 0 4px 15px var(--secondary-color-50);
}

.productPopup-add-button.productPopup-enabled:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--secondary-color-50);
}

.productPopup-add-button.productPopup-enabled:active {
    transform: translateY(0);
}

/* Button Lade-Zustand */
.productPopup-add-button.productPopup-loading {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

/* Spinner Animation */
.productPopup-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: productPopup-spin 1s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

@keyframes productPopup-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Alternative: Punkte-Animation */
.productPopup-spinner-dots {
    display: inline-block;
    margin-right: 8px;
}

.productPopup-spinner-dots:after {
    content: '';
    animation: productPopup-dots 1.5s steps(4, end) infinite;
}

@keyframes productPopup-dots {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.';
    }
    60% {
        content: '..';
    }
    80%, 100% {
        content: '...';
    }
}

/* Custom Scrollbar für Product List */
.productPopup-list::-webkit-scrollbar {
    width: 6px;
}

.productPopup-list::-webkit-scrollbar-track {
    background: transparent;
}

.productPopup-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.productPopup-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .productPopup-container {
        width: 95vw;
        height: 90vh;
        border-radius: 16px;
    }

    .productPopup-content {
        flex-direction: column;
    }

    .productPopup-left,
    .productPopup-right {
        width: 100%;
    }

    .productPopup-left {
        height: 40%;
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
    }

    .productPopup-right {
        height: 60%;
    }

    .productPopup-header {
        padding: 16px 20px;
    }

    .productPopup-header h3 {
        font-size: 20px;
    }

    .productPopup-preview-content {
        padding: 20px;
    }

    .productPopup-actions {
        padding: 16px 20px;
    }

    .productPopup-preview-image {
        height: 150px;
        margin-bottom: 16px;
    }


    .productPopup-plus-icon {
        font-size: 36px;
        margin-bottom: 8px;
    }

    .productPopup-add-text {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .productPopup-container {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

    .productPopup-header {
        padding: 12px 16px;
    }

    .productPopup-header h3 {
        font-size: 18px;
    }

    .productPopup-preview-content {
        padding: 16px;
    }

    .productPopup-actions {
        padding: 12px 16px;
    }

    .productPopup-item {
        margin: 0 8px 6px;
        padding: 12px 16px;
    }

    .productPopup-item-name {
        font-size: 14px;
    }

    .productPopup-item-price {
        font-size: 12px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .productPopup-container {
        background: #1c1c1e;
        color: white;
    }

    .productPopup-header {
        background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
        border-bottom-color: #3a3a3c;
    }

    .productPopup-header h3 {
        color: white;
    }

    .productPopup-left {
        background: #2c2c2e;
        border-right-color: #3a3a3c;
    }

    .productPopup-item {
        background: #1c1c1e;
        border-bottom-color: #3a3a3c;
    }

    .productPopup-item:hover {
        background: #2c2c2e;
    }

    .productPopup-actions {
        background: #2c2c2e;
        border-top-color: #3a3a3c;
    }

    .productPopup-preview-image {
        background: #2c2c2e;
    }

    .productPopup-preview-details h4 {
        color: white;
    }

    .productPopup-preview-unit,
    .productPopup-preview-description {
        color: #a1a1a6;
    }

    .productPopup-close {
        color: #a1a1a6;
    }

    .productPopup-close:hover {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }
}

/* ============================================================================
   STATIC MODE - Hide elements when in static pricing mode
   ============================================================================ */

/* Hide Day Ahead stats in static mode */
.static-mode #dayAheadStatsContainer,
body.static-mode #dayAheadStatsContainer {
    display: none !important;
}

/* Hide Marktprämie checkbox in static mode */
.static-mode #energyChartMarktpraemieLabel,
body.static-mode #energyChartMarktpraemieLabel {
    display: none !important;
}

/* Hide Marktprämie checkbox label in static mode */
.static-mode .energy-chart-checkbox-label:has(#energyChartMarktpraemie),
body.static-mode .energy-chart-checkbox-label:has(#energyChartMarktpraemie) {
    display: none !important;
}

/* ========================================
   ENERGY CHART CONTROLS (moved from project-styles)
   ======================================== */

.energy-chart-controls {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    margin-top: 10px;
}

.energy-chart-view-selector {
    display: flex;
    gap: 8px;
    padding: 4px;
    border-radius: 10px;
}

.energy-chart-view-btn {
    padding: 4px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.energy-chart-view-btn:hover {
    color: #111827;
}

.energy-chart-view-btn.active {
    background: #ffffff;
    color: #3fa14d;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.energy-chart-navigation {
    display: flex;
    align-items: center;
    gap: 12px;
}

.energy-chart-nav-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6b7280;
}

.energy-chart-nav-btn:hover {
    background: #f9fafb;
    border-color: #3fa14d;
    color: #3fa14d;
}

.energy-chart-nav-btn:active {
    transform: scale(0.95);
}

.energy-chart-date-display {
    min-width: 100px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--header-color-light);
}

.energy-chart-date-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    transition: all 0.2s ease;
}

.energy-chart-date-picker:hover {
    border-color: #3fa14d;
    background: #f9fafb;
}

.energy-chart-date-picker svg {
    color: #6b7280;
}

.energy-chart-datepicker-input {
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    cursor: pointer;
    outline: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.energy-chart-datepicker-input:hover {
    background: #f3f4f6;
}

.energy-chart-datepicker-input:focus {
    background: #f3f4f6;
}

/* ========================================
   CHART CONTAINER
   ======================================== */

.yieldGraphs-container {
    position: relative;
    height: 450px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

#topTabView-tab-3.static-mode {
    background: linear-gradient(to bottom, rgb(238 0 0 / 40%), transparent);
}

/* Unified saving/loading animation - matches widget system */
.yieldGraphs-container.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 10;
    border-radius: 8px;
}

.yieldGraphs-container.loading::after {
    content: 'Speichern...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 16px 28px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Spinner animation for loading state */
@keyframes yieldGraphsSpinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#yieldGraphContainerCanvas {
    width: 100% !important;
    height: 100% !important;
}

.energy-chart-header-stats {
    text-align: center;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.energy-chart-header-stats .stat-value {
    font-size: 28px;
    color: rgb(245, 158, 11);
    margin: 0 8px;
}

.energy-chart-header-stats .stat-sublabel {
    color: white;
    font-size: 14px;
    margin-top: 5px;
}

.energy-chart-header-stats .stat-label {
    font-size: 22px;
    color: var(--header-color-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

/* ========================================
   MODE SWITCH (Börse/Statisch)
   ======================================== */

.energy-chart-mode-switch {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mode-switch-label {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.mode-switch-toggle {
    position: relative;
    width: 160px;
    height: 36px;
    background: #f3f4f6;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 3px;
    transition: all 0.3s ease;
}

.mode-switch-slider {
    position: absolute;
    width: 78px;
    height: 30px;
    background: linear-gradient(135deg, #3fa14d, #2d7a3a);
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    left: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.mode-switch-toggle.static-active .mode-switch-slider {
    left: calc(100% - 81px);
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.mode-switch-option {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    z-index: 1;
    transition: color 0.3s ease;
    user-select: none;
}

.mode-switch-option.active {
    color: #ffffff;
}

/* ========================================
   CHECKBOXES
   ======================================== */

.energy-chart-checkboxes {
    display: flex;
    gap: 24px;
    padding: 12px 0;
    align-items: center;
}

.energy-chart-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: #f3f4f6;
}

.energy-chart-checkbox-label:hover {
    background: #e5e7eb;
}

.energy-chart-checkbox-label.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f9fafb;
}

.energy-chart-checkbox-label.disabled:hover {
    background: #f9fafb;
}

.energy-chart-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: rgb(245, 158, 11);
}

.energy-chart-checkbox-label.disabled input[type="checkbox"] {
    cursor: not-allowed;
}

.energy-chart-checkbox-label span {
    user-select: none;
}

/* ========================================
   EXPORT BUTTON
   ======================================== */

.energy-chart-export-btn {
    display: flex !important;
    visibility: visible !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: #f3f4f6;
    border: solid 1px #efcc00;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.energy-chart-export-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.energy-chart-export-btn svg {
    stroke: #efcc00;
}

/* ========================================
   PROGNOSIS WARNING
   ======================================== */

.energy-chart-prognosis-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 8px;
    font-size: 14px;
    color: #f59e0b;
    font-weight: 500;
    animation: fadeIn 0.3s ease;
    margin-left: auto;
}

.energy-chart-prognosis-warning svg {
    flex-shrink: 0;
    stroke: #f59e0b;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ========================================
   STATISTIK CONTAINER (generisch)
   ======================================== */

.stats-container {
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    display: none;
}

#dayAheadStatsContainer {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Hide Day Ahead stats in static mode */
.static-mode #dayAheadStatsContainer,
body.static-mode #dayAheadStatsContainer {
    display: none !important;
}

/* Hide Marktprämie checkbox in static mode */
.static-mode #energyChartMarktpraemieLabel,
body.static-mode #energyChartMarktpraemieLabel {
    display: none !important;
}

#pvStatsContainer {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.3);
}

#batteryStatsContainer {
    background: linear-gradient(135deg, rgba(59, 246, 246, 0.1), rgba(59, 246, 246, 0.05));
    border: 1px solid rgba(59, 246, 246, 0.3);
}

.stats-header {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#dayAheadStatsContainer .stats-header {
    color: rgb(34, 197, 94);
}

#pvStatsContainer .stats-header {
    color: rgb(245, 158, 11);
}

#batteryStatsContainer .stats-header {
    color: rgb(59, 246, 246);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.stat-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.stat-item.full-width {
    grid-column: 1 / -1;
}

.stat-item.negative-highlight {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.stat-item.negative-highlight:hover {
    background: rgba(239, 68, 68, 0.25);
}

.stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
}

#dayAheadStatsContainer .stat-value {
    color: rgb(34, 197, 94);
}

#pvStatsContainer .stat-value {
    color: rgb(245, 158, 11);
}

#batteryStatsContainer .stat-value {
    color: rgb(59, 246, 246);
}

.stat-value.negative {
    color: rgb(239, 68, 68);
}

.stat-value.positive {
    color: rgb(34, 197, 94);
}

.stat-value.profit {
    color: rgb(34, 197, 94);
    font-size: 22px;
}

.stat-value.premium {
    color: rgb(245, 158, 11);
}



/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .energy-chart-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .energy-chart-view-selector {
        justify-content: center;
    }

    .energy-chart-navigation {
        justify-content: center;
    }

    .energy-chart-date-display {
        font-size: 13px;
        min-width: 180px;
    }

    .energy-chart-checkboxes {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .energy-chart-mode-switch {
        width: 100%;
        justify-content: space-between;
    }

    .energy-chart-controls {
        gap: 12px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-value {
        font-size: 18px;
    }

    .stat-value.profit {
        font-size: 20px;
    }
}


/* ========================================
   PERMIT WIDGET DASHBOARD
   ======================================== */

#permit-widget-container {
    position: relative;
    z-index: 10;
}

/* ========================================
   HARDWARE DETAILS WIDGET - Preview
   ======================================== */

.ee-hardware-preview {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ee-hardware-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.ee-hardware-preview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: background 0.2s ease;
}

.ee-hardware-preview-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.ee-hardware-preview-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.ee-hardware-preview-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========================================
   HARDWARE DETAILS WIDGET - Fullscreen
   ======================================== */

.ee-hardware-fullscreen {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ee-hardware-section {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 24px;
}

.ee-hardware-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ee-hardware-section-title svg {
    width: 24px;
    height: 24px;
    color: #3b82f6;
}

/* Settings Grid */
.ee-hardware-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.ee-hardware-setting-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}

.ee-hardware-setting-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.ee-hardware-setting-icon {
    font-size: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 12px;
}

.ee-hardware-setting-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ee-hardware-setting-value {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.ee-hardware-setting-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Components Grid */
.ee-hardware-components-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.ee-hardware-product-card {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.ee-hardware-product-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.ee-hardware-product-card.empty {
    opacity: 0.5;
}

.ee-hardware-product-card.empty:hover {
    transform: none;
    box-shadow: none;
}

.ee-hardware-product-image {
    width: 100px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
    flex-shrink: 0;
}

.ee-hardware-product-image svg {
    width: 40px;
    height: 40px;
    color: rgba(255, 255, 255, 0.5);
}

.ee-hardware-product-icon {
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
}

.ee-hardware-product-icon svg {
    width: 28px;
    height: 28px;
    color: rgba(255, 255, 255, 0.4);
}

.ee-hardware-product-info {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.ee-hardware-product-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.ee-hardware-product-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.ee-hardware-product-subtitle {
    font-size: 13px;
    color: #3b82f6;
    font-weight: 500;
}

/* ========================================
   RESPONSIVE - Hardware Widget
   ======================================== */

@media (max-width: 1024px) {
    .ee-hardware-settings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ee-hardware-components-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .ee-hardware-settings-grid {
        grid-template-columns: 1fr;
    }
    
    .ee-hardware-preview-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .ee-hardware-fullscreen {
        padding: 16px;
    }
    
    .ee-hardware-section {
        padding: 16px;
    }
    
    .ee-hardware-product-image {
        width: 80px;
    }
}


/* ============================================================================
   DXF EXPORT WIDGET STYLES
   ============================================================================ */

/* Preview Style */
.ee-dxf-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    height: 100%;
    gap: 12px;
}

.ee-dxf-preview-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--ee-radius-lg);
    padding: 10px;
}

.ee-dxf-preview-icon svg {
    color: var(--secondary-color);
}

.ee-dxf-preview-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ee-dxf-preview-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ee-text-primary);
}

.ee-dxf-preview-subtitle {
    font-size: 12px;
    color: var(--ee-text-tertiary);
}

/* Fullscreen Style */
.ee-dxf-fullscreen {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
}

.ee-dxf-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--ee-text-primary);
    margin: 0 0 8px 0;
}

.ee-dxf-header p {
    font-size: 14px;
    color: var(--ee-text-secondary);
    margin: 0;
}

.ee-dxf-layers-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ee-dxf-select-all {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--ee-radius-md);
    border: 1px solid var(--ee-border-light);
}

.ee-dxf-layers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    overflow-y: auto;
    flex: 1;
}

.ee-dxf-layer-card {
    background: var(--ee-bg-card);
    border-radius: var(--ee-radius-md);
    border: 1px solid var(--ee-border-subtle);
    transition: all var(--ee-transition-fast);
    overflow: hidden;
}

.ee-dxf-layer-card:hover {
    background: var(--ee-bg-card-hover);
    border-color: var(--ee-border-light);
}

.ee-dxf-layer-card:has(input:checked) {
    border-color: var(--ee-accent-one);
    background: rgba(0, 122, 255, 0.1);
}

.ee-dxf-checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0px;
    cursor: pointer;
    user-select: none;
    color: #ffffff;
}

.ee-dxf-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ee-dxf-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--ee-border-medium);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--ee-transition-fast);
}

.ee-dxf-checkbox-label input:checked + .ee-dxf-checkbox-custom {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.ee-dxf-checkbox-label input:checked + .ee-dxf-checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.ee-dxf-layer-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.ee-dxf-layer-icon {
    font-size: 24px;
    line-height: 1;
}

.ee-dxf-layer-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ee-dxf-layer-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ee-text-primary);
}

.ee-dxf-layer-desc {
    font-size: 12px;
    color: var(--ee-text-tertiary);
}

.ee-dxf-actions {
    display: flex;
    justify-content: center;
    padding-top: 16px;
    border-top: 1px solid var(--ee-border-subtle);
}

.ee-dxf-export-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    color: white;
    border: none;
    border-radius: var(--ee-radius-md);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ee-transition-fast);
}

.ee-dxf-export-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 122, 255, 0.4);
}

.ee-dxf-export-btn:active:not(:disabled) {
    transform: translateY(0);
}

.ee-dxf-export-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.ee-dxf-export-btn svg {
    width: 20px;
    height: 20px;
}

/* Spinner Animation */
.ee-spinner {
    animation: ee-spin 1s linear infinite;
}

@keyframes ee-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .ee-dxf-layers-grid {
        grid-template-columns: 1fr;
    }
    
    .ee-dxf-fullscreen {
        padding: 16px;
    }
}

/* ============================================================================
   DXF EXPORT WIDGET - ADDITIONAL STYLES (Sections & Items)
   ============================================================================ */

.ee-dxf-sections-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    overflow-y: auto;
    flex: 1;
    padding-right: 8px;
}

/* Two-column layout on wider screens */
@media (min-width: 768px) {
    .ee-dxf-sections-container {
        grid-template-columns: repeat(2, 1fr);
        align-content: start;
    }

    /* Special section (PV System) spans full width */
    .ee-dxf-special-section {
        grid-column: 1 / -1;
    }
}

.ee-dxf-section {
    background: var(--ee-bg-card);
    border-radius: var(--ee-radius-md);
    border: 1px solid var(--ee-border-subtle);
    overflow: hidden;
}

.ee-dxf-special-section {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(34, 197, 94, 0.1));
    border-color: rgba(59, 130, 246, 0.3);
}

.ee-dxf-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--ee-border-subtle);
}

.ee-dxf-section-toggle {
    width: 100%;
}

.ee-dxf-section-icon {
    font-size: 18px;
}

.ee-dxf-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ee-text-primary);
    flex: 1;
}

.ee-dxf-section-count {
    font-size: 12px;
    color: var(--ee-text-tertiary);
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
}

.ee-dxf-section-items {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ee-dxf-item {
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--ee-radius-sm);
    transition: all var(--ee-transition-fast);
}

.ee-dxf-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.ee-dxf-item:has(input:checked) {
    background: rgba(59, 130, 246, 0.1);
}

.ee-dxf-item .ee-dxf-checkbox-label {
    padding: 8px 12px;
}

.ee-dxf-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.ee-dxf-item-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.ee-dxf-item-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.ee-dxf-item-name {
    font-size: 13px;
    color: var(--ee-text-secondary);
    flex: 1;
}

.ee-dxf-item-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--ee-accent-one);
    color: white;
    border-radius: 4px;
    text-transform: uppercase;
}

.ee-dxf-empty {
    padding: 16px;
    text-align: center;
    color: var(--ee-text-muted);
    font-size: 13px;
    font-style: italic;
}

/* Section checkbox styling */
.ee-dxf-section-checkbox {
    margin-right: 4px;
}

/* DXF Export Options */
.ee-dxf-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ee-border-subtle);
}

.ee-dxf-option-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ee-dxf-option-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ee-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ee-dxf-select {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ee-text-primary);
    background: var(--ee-bg-card);
    border: 1px solid var(--ee-border-light);
    border-radius: var(--ee-radius-md);
    cursor: pointer;
    transition: all var(--ee-transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.ee-dxf-select:hover {
    border-color: var(--secondary-color);
    background-color: rgba(255, 255, 255, 0.05);
}

.ee-dxf-select:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

.ee-dxf-option-hint {
    font-size: 11px;
    color: var(--ee-text-muted);
    margin: 0;
    padding-left: 28px;
}

/* Export button centered */
.ee-dxf-export-btn {
    align-self: center;
    margin-top: 8px;
}


/* ============================================================================
   DXF EXPORT WIDGET - NEW MODERN DESIGN (Tabs + Form)
   ============================================================================ */

/* Container */
.ee-dxf-container {
    display: flex;
    flex-direction: column;
    height: calc(100% - 30px);
    background: rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
    border-radius: var(--ee-tn-radius-lg);
}

/* Tab Navigation */
.ee-dxf-tabs {
    display: flex;
    gap: 4px;
    padding: 16px 20px 0;
    border-bottom: 1px solid var(--ee-border-subtle);
}

.ee-dxf-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ee-text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -1px;
}

.ee-dxf-tab:hover {
    color: var(--ee-text-primary);
    background: rgba(255, 255, 255, 0.03);
}

.ee-dxf-tab.active {
    color: var(--secondary-color);
    border-bottom-color: var(--secondary-color);
}

.ee-dxf-tab svg {
    opacity: 0.7;
}

.ee-dxf-tab.active svg {
    opacity: 1;
}

/* Tab Content */
.ee-dxf-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.ee-dxf-panel {
    display: none;
    height: 100%;
    overflow-y: auto;
}

.ee-dxf-panel.active {
    display: block;
}

/* Form Styles */
.ee-dxf-form {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 560px) {
    .ee-dxf-form {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ee-dxf-form-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--ee-border-subtle);
}

/* Full width sections */
.ee-dxf-form-section.ee-dxf-form-section-wide {
    grid-column: 1 / -1;
}

.ee-dxf-form-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ee-border-subtle);
}

.ee-dxf-form-header svg {
    color: var(--secondary-color);
}

.ee-dxf-form-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ee-text-primary);
}

.ee-dxf-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.ee-dxf-form-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.ee-dxf-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ee-dxf-field-wide {
    grid-column: span 2;
}

.ee-dxf-field label {
    font-size: 11px;
    font-weight: 500;
    color: var(--ee-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ee-dxf-field input {
    background: rgba(255, 255, 255, 0.06)!important;
    border: 1px solid rgba(255, 255, 255, 0.1)!important;
    border-radius: 8px!important;
    padding: 10px 12px!important;
    font-size: 14px!important;
    color: var(--ee-text-primary)!important;
    transition: all 0.2s ease!important ;
}

.ee-dxf-field input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.ee-dxf-field input:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.ee-dxf-field input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

/* Layer Panel */
.ee-dxf-layers {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ee-dxf-layers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ee-dxf-toggle-all {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ee-text-secondary);
    cursor: pointer;
}

.ee-dxf-toggle-all input {
    accent-color: var(--secondary-color);
    width: 16px;
    height: 16px;
}

.ee-dxf-layers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.ee-dxf-layer-group {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid var(--ee-border-subtle);
}

.ee-dxf-layer-primary {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(34, 197, 94, 0.05));
    border-color: rgba(59, 130, 246, 0.2);
}


.ee-dxf-layer-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ee-text-primary);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ee-border-subtle);
}

.ee-dxf-layer-icon {
    font-size: 16px;
}

.ee-dxf-group-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex: 1;
}

.ee-dxf-group-toggle input {
    accent-color: var(--secondary-color);
}

.ee-dxf-group-count {
    font-size: 11px;
    color: var(--ee-text-muted);
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto;
}

.ee-dxf-layer-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ee-dxf-layer-primary .ee-dxf-layer-items {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.ee-dxf-layer-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ee-text-secondary);
    transition: all 0.15s ease;
}

.ee-dxf-layer-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.ee-dxf-layer-item:has(input:checked) {
    color: var(--ee-text-primary);
}

.ee-dxf-layer-item input {
    accent-color: var(--secondary-color);
}

.ee-dxf-layer-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ee-dxf-layer-icon-small {
    font-size: 14px;
    width: 18px;
    text-align: center;
}

/* Export Options Panel */
.ee-dxf-export-options {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 auto;
}

.ee-dxf-option-card {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid var(--ee-border-subtle);
    overflow: hidden;
}

.ee-dxf-option-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--ee-border-subtle);
    font-size: 14px;
    font-weight: 600;
    color: var(--ee-text-primary);
}

.ee-dxf-option-header svg {
    color: var(--secondary-color);
}

.ee-dxf-option-body {
    padding: 12px 16px;
}

/* Radio Group */
.ee-dxf-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ee-dxf-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ee-dxf-radio:hover {
    background: rgba(255, 255, 255, 0.05);
}

.ee-dxf-radio:has(input:checked) {
    background: rgba(0, 122, 255, 0.1);
}

.ee-dxf-radio input {
    display: none;
}

.ee-dxf-radio-mark {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.ee-dxf-radio input:checked + .ee-dxf-radio-mark {
    border-color: var(--secondary-color);
}

.ee-dxf-radio input:checked + .ee-dxf-radio-mark::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--secondary-color);
    border-radius: 50%;
}

.ee-dxf-radio-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ee-dxf-radio-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--ee-text-primary);
}

.ee-dxf-radio-desc {
    font-size: 12px;
    color: var(--ee-text-muted);
}

/* Switch Option */
.ee-dxf-switch-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    cursor: pointer;
    border-bottom: 1px solid var(--ee-border-subtle);
}

.ee-dxf-switch-option:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ee-dxf-switch-option:first-child {
    padding-top: 0;
}

.ee-dxf-switch-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ee-dxf-switch-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--ee-text-primary);
}

.ee-dxf-switch-desc {
    font-size: 12px;
    color: var(--ee-text-muted);
}

/* Toggle Switch */
.ee-dxf-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.ee-dxf-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ee-dxf-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    transition: all 0.2s ease;
}

.ee-dxf-switch-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.ee-dxf-switch input:checked + .ee-dxf-switch-slider {
    background: var(--secondary-color);
}

.ee-dxf-switch input:checked + .ee-dxf-switch-slider::before {
    transform: translateX(20px);
}

/* URL Input Field */
.ee-dxf-url-input {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ee-dxf-input-field {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 13px;
    color: var(--ee-text-primary);
    transition: all 0.2s ease;
}

.ee-dxf-input-field::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
}

.ee-dxf-input-field:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.ee-dxf-input-field:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.ee-dxf-input-hint {
    font-size: 11px;
    color: var(--ee-text-muted);
    margin: 0;
}

/* URL Grid for Cross Sections */
.ee-dxf-url-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 500px) {
    .ee-dxf-url-grid {
        grid-template-columns: 1fr;
    }
}

.ee-dxf-url-input label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--ee-text-tertiary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Flurkarte Settings */
.ee-dxf-flurkarte-settings {
    margin-top: 12px;
}

.ee-dxf-flurkarte-settings .ee-dxf-url-grid {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 500px) {
    .ee-dxf-flurkarte-settings .ee-dxf-url-grid {
        grid-template-columns: 1fr;
    }
}

.ee-dxf-flurkarte-settings input[type="number"] {
    text-align: center;
}

/* Export Button (updated) */
.ee-dxf-export-options .ee-dxf-export-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    margin-top: 8px;
    background: linear-gradient(135deg, var(--secondary-color), #0056b3);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ee-dxf-export-options .ee-dxf-export-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 122, 255, 0.4);
}

.ee-dxf-export-options .ee-dxf-export-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Spinner animation */
.ee-dxf-export-btn .ee-spinner {
    animation: spin 1s linear infinite;
}

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

/* === DXF Versions Tab === */
.ee-dxf-versions {
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-lg);
    padding: var(--ee-space-md);
}

.ee-dxf-upload-section,
.ee-dxf-files-section {
    background: var(--ee-bg-secondary);
    border-radius: var(--ee-radius-lg);
    padding: var(--ee-space-md);
}

.ee-dxf-upload-header,
.ee-dxf-files-header {
    display: flex;
    align-items: center;
    gap: var(--ee-space-sm);
    margin-bottom: var(--ee-space-md);
    font-weight: 600;
    color: var(--ee-text-primary);
}

.ee-dxf-upload-header svg,
.ee-dxf-files-header svg {
    color: var(--ee-accent-blue);
}

.ee-dxf-upload-area {
    border: 2px dashed var(--ee-border);
    border-radius: var(--ee-radius-md);
    padding: var(--ee-space-xl);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--ee-bg-primary);
}

.ee-dxf-upload-area:hover,
.ee-dxf-upload-area.dragover {
    border-color: var(--ee-accent-blue);
    background: rgba(0, 122, 255, 0.05);
}

.ee-dxf-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ee-space-sm);
}

.ee-dxf-upload-content svg {
    color: var(--ee-text-tertiary);
}

.ee-dxf-upload-content p {
    margin: 0;
    color: var(--ee-text-secondary);
}

.ee-dxf-upload-hint {
    font-size: 12px;
    color: var(--ee-text-tertiary);
}

.ee-dxf-files-list {
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-sm);
}

.ee-dxf-files-loading,
.ee-dxf-files-empty,
.ee-dxf-files-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ee-space-sm);
    padding: var(--ee-space-xl);
    color: var(--ee-text-tertiary);
    text-align: center;
}

.ee-dxf-file-item {
    display: flex;
    align-items: center;
    gap: var(--ee-space-md);
    padding: var(--ee-space-sm) var(--ee-space-md);
    background: var(--ee-bg-primary);
    border-radius: var(--ee-radius-md);
    border: 1px solid var(--ee-border-subtle);
}

.ee-dxf-file-icon {
    color: var(--ee-accent-blue);
    flex-shrink: 0;
}

.ee-dxf-file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ee-dxf-file-name {
    font-weight: 500;
    color: var(--ee-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ee-dxf-file-meta {
    font-size: 12px;
    color: var(--ee-text-tertiary);
}

.ee-dxf-file-actions {
    display: flex;
    gap: var(--ee-space-xs);
}

.ee-dxf-file-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ee-radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.ee-dxf-file-download {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.ee-dxf-file-download:hover {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.ee-dxf-file-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.ee-dxf-file-delete:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Responsive */
@media (max-width: 600px) {
    .ee-dxf-tabs {
        padding: 12px 16px 0;
    }

    .ee-dxf-tab {
        padding: 10px 14px;
        font-size: 13px;
    }

    .ee-dxf-tab span {
        display: none;
    }

    .ee-dxf-form {
        padding: 16px;
        grid-template-columns: 1fr;
    }

    .ee-dxf-form-grid {
        grid-template-columns: 1fr;
    }

    .ee-dxf-options-grid {
        grid-template-columns: 1fr;
    }

    .ee-dxf-field-wide {
        grid-column: span 1;
    }

    .ee-dxf-layers-grid {
        grid-template-columns: 1fr;
    }

    .ee-dxf-layer-primary .ee-dxf-layer-items {
        flex-direction: column;
    }
}


/* ============================================================================
   DXF EXPORT - MODERN TOGGLE ROWS & TWO-COLUMN LAYOUT
   ============================================================================ */

/* Toggle Row */
.ee-dxf-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ee-dxf-toggle-row:last-of-type {
    border-bottom: none;
}

/* Scale Input Row */
.ee-dxf-scale-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ee-dxf-scale-input {
    width: 90px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--ee-text-primary);
    font-size: 14px;
    text-align: right;
    transition: all 0.2s ease;
}

.ee-dxf-scale-input:hover {
    border-color: rgba(255, 255, 255, 0.25);
}

.ee-dxf-scale-input:focus {
    outline: none;
    border-color: var(--primary-color, #22c55e);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

/* Hide spinner buttons for number input */
.ee-dxf-scale-input::-webkit-outer-spin-button,
.ee-dxf-scale-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ee-dxf-scale-input[type=number] {
    -moz-appearance: textfield;
}

.ee-dxf-toggle-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ee-text-primary);
}

/* Modern Toggle Switch */
.ee-dxf-toggle {
    position: relative;
    width: 48px;
    height: 26px;
    display: inline-block;
}

.ee-dxf-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ee-dxf-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 26px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ee-dxf-toggle-slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ee-dxf-toggle input:checked + .ee-dxf-toggle-slider {
    background: linear-gradient(135deg, var(--secondary-color), #0056b3);
}

.ee-dxf-toggle input:checked + .ee-dxf-toggle-slider::before {
    transform: translateX(22px);
}

.ee-dxf-toggle input:focus + .ee-dxf-toggle-slider {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

/* Option Card */
.ee-dxf-option-card {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: all 0.2s ease;
}

.ee-dxf-option-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.ee-dxf-option-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ee-dxf-option-header svg {
    color: var(--secondary-color);
    flex-shrink: 0;
}

.ee-dxf-option-header span {
    font-size: 14px;
    font-weight: 600;
    color: var(--ee-text-primary);
}

.ee-dxf-option-body {
    padding: 12px 16px;
}

/* Two Column Options Layout */
.ee-dxf-options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 560px) {
    .ee-dxf-options-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Export Options Section */
.ee-dxf-export-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Modern Select Dropdown */
.ee-dxf-select-modern {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ee-text-primary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.ee-dxf-select-modern:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background-color: rgba(255, 255, 255, 0.08);
}

.ee-dxf-select-modern:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.ee-dxf-select-modern option {
    background: #1a1a2e;
    color: white;
    padding: 10px;
}

/* Option Group */
.ee-dxf-option-group-modern {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ee-dxf-option-group-modern label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ee-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hint Text */
.ee-dxf-input-hint {
    font-size: 12px;
    color: var(--ee-text-muted);
    margin: 8px 0 0 0;
    opacity: 0.8;
}


/* ========================================
   CONSTRUCTION & OPERATION WIDGET DASHBOARDS
   ======================================== */

#construction-widget-container,
#operation-widget-container {
    position: relative;
    z-index: 10;
}


/* ========================================
   CONSTRUCTION INFO WIDGET - Preview
   ======================================== */

.ee-construction-info-preview {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 8px 0;
}

.ee-construction-info-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ee-construction-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: background 0.2s ease;
}

.ee-construction-info-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.ee-construction-info-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.ee-construction-info-value {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}


/* ========================================
   CONSTRUCTION INFO WIDGET - Fullscreen
   ======================================== */

.ee-construction-info-fullscreen {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ee-construction-info-section {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 24px;
}

.ee-construction-info-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ee-construction-info-section-title svg {
    width: 24px;
    height: 24px;
    color: #3b82f6;
}

.ee-construction-info-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.ee-construction-info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}

.ee-construction-info-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.ee-construction-info-card-icon {
    font-size: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 12px;
    flex-shrink: 0;
}

.ee-construction-info-card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ee-construction-info-card-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ee-construction-info-card-value {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    word-break: break-word;
}


/* ========================================
   RESPONSIVE - Construction Info Widget
   ======================================== */

@media (max-width: 768px) {
    .ee-construction-info-details-grid {
        grid-template-columns: 1fr;
    }

    .ee-construction-info-card {
        padding: 14px;
    }

    .ee-construction-info-card-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .ee-construction-info-card-value {
        font-size: 15px;
    }
}


/* ========================================
   HIDDEN CONTAINERS FOR WIDGET FULLSCREEN
   ======================================== */

/* Hide containers by default when inside finance-container */
#finance-container > .ee-hidden-container {
    display: none !important;
}

/* Show containers when moved into fullscreen */
.ee-fullscreen-content .ee-hidden-container,
.ee-fullscreen-specific .ee-hidden-container,
#energie-fullscreen-content .ee-hidden-container,
#bilanz-fullscreen-content .ee-hidden-container,
#wind-fullscreen-content .ee-hidden-container,
#temp-fullscreen-content .ee-hidden-container {
    display: block !important;
}

/* Energy chart controls should be flex for row layout */
.ee-fullscreen-content .energy-chart-controls,
.ee-fullscreen-specific .energy-chart-controls,
#energie-fullscreen-content .energy-chart-controls {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* Energy chart checkboxes should be flex for row layout */
.ee-fullscreen-content .energy-chart-checkboxes,
.ee-fullscreen-specific .energy-chart-checkboxes,
#energie-fullscreen-content .energy-chart-checkboxes {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

/* Ensure chart containers show properly in fullscreen */
.ee-fullscreen-content .yieldGraphs-container,
.ee-fullscreen-content .stats-container,
.ee-fullscreen-content .energy-chart-header-stats,
.ee-fullscreen-content .yieldInformationContainer,
#energie-fullscreen-content .yieldGraphs-container,
#energie-fullscreen-content .stats-container,
#energie-fullscreen-content .energy-chart-header-stats,
#energie-fullscreen-content .yieldInformationContainer {
    display: block !important;
}


/* ============================================================================
   NETWORK FEEDIN WIDGET STYLES - Netzeinspeispunkt
   ============================================================================ */

/* Grid Route Widget */
.ee-grid-route-widget {
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-lg);
    height: 100%;
}

.ee-grid-route-actions {
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-md);
}

.ee-grid-route-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ee-space-xs);
    padding: var(--ee-space-md) var(--ee-space-lg);
    background: var(--ee-bg-glass);
    border: 1px solid var(--ee-border-subtle);
    border-radius: var(--ee-radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.ee-grid-route-btn:hover {
    background: var(--ee-bg-hover);
    border-color: var(--ee-primary);
}

.ee-grid-route-btn.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--ee-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ee-grid-route-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.ee-grid-route-btn-icon {
    width: 24px;
    height: 24px;
    color: var(--ee-primary);
}

.ee-grid-route-btn-icon svg {
    width: 100%;
    height: 100%;
}

.ee-grid-route-btn-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--ee-text-primary);
}

.ee-grid-route-btn-desc {
    font-size: 12px;
    color: var(--ee-text-secondary);
    line-height: 1.4;
}

.ee-grid-route-status {
    margin-top: auto;
    padding-top: var(--ee-space-md);
}

.ee-grid-route-status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ee-grid-route-status-label {
    font-size: 12px;
    color: var(--ee-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ee-grid-route-status-value {
    font-size: 13px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--ee-radius-full);
}

.ee-grid-route-status-ready {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.ee-grid-route-status-editing {
    background: rgba(59, 130, 246, 0.15);
    color: var(--ee-primary);
}

.ee-grid-route-status-loading {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.ee-grid-route-status-success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.ee-grid-route-status-error {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}


/* Grid Info Widget */
.ee-grid-info-widget {
    height: 100%;
}

.ee-grid-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ee-space-md);
}

.ee-grid-info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ee-space-sm);
    padding: var(--ee-space-md);
    background: rgba(0,0,0,0.2);
    border-radius: var(--ee-radius-lg);
    border: 1px solid var(--ee-border-subtle);
}

.ee-grid-info-item.ee-grid-info-full {
    grid-column: span 2;
}

.ee-grid-info-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--ee-primary);
    opacity: 0.8;
}

.ee-grid-info-icon svg {
    width: 100%;
    height: 100%;
}

.ee-grid-info-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ee-grid-info-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--ee-text-primary);
    line-height: 1.3;
    word-break: break-word;
}

.ee-grid-info-label {
    font-size: 11px;
    color: var(--ee-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* E1/E8 Generator Widget */
.ee-generator-widget {
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-md);
    height: 100%;
}

.ee-generator-header {
    display: flex;
    align-items: center;
    gap: var(--ee-space-md);
}

.ee-generator-icon {
    width: 40px;
    height: 40px;
    padding: var(--ee-space-sm);
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--ee-radius-lg);
    color: var(--ee-primary);
}

.ee-generator-icon svg {
    width: 100%;
    height: 100%;
}

.ee-generator-title h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--ee-text-primary);
    margin: 0;
}

.ee-generator-title p {
    font-size: 12px;
    color: var(--ee-text-secondary);
    margin: 2px 0 0 0;
}

.ee-generator-description {
    font-size: 13px;
    color: var(--ee-text-secondary);
    line-height: 1.5;
}

.ee-generator-actions {
    margin-top: auto;
}

.ee-generator-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ee-space-sm);
    width: 100%;
    padding: var(--ee-space-md) var(--ee-space-lg);
    border: none;
    border-radius: var(--ee-radius-lg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ee-generator-btn-primary {
    background: rgba(0, 0, 0, 0.6);
    color: white;
}

.ee-generator-btn-primary:hover {
    transform: translateY(-2px);
}

.ee-generator-btn-icon {
    width: 18px;
    height: 18px;
}

.ee-generator-btn-icon svg {
    width: 100%;
    height: 100%;
}

.ee-generator-info {
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-sm);
    padding-top: var(--ee-space-md);
    border-top: 1px solid var(--ee-border-subtle);
}

.ee-generator-info-item {
    display: flex;
    align-items: center;
    gap: var(--ee-space-sm);
}

.ee-generator-info-label {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: var(--ee-radius-sm);
    color: var(--ee-primary);
    width: 65px;
    text-align: center;
}

.ee-generator-info-desc {
    font-size: 12px;
    color: var(--ee-text-secondary);
}


/* Network Feedin Widget Container - inherits from .ee-floating-widgets */
/* The container already gets .ee-floating-widgets class which provides:
   - position: absolute
   - z-index: 50
   - pointer-events: none
   - proper padding/overflow
*/

/* Ensure widgets are displayed when grid-connection-container is active */
#grid-connection-container.active #network-feedin-widget-container {
    display: grid;
}

/* Responsive adjustments for network feedin widgets */
@media (max-width: 1200px) {
    .ee-grid-info-grid {
        grid-template-columns: 1fr;
    }

    .ee-grid-info-item.ee-grid-info-full {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .ee-grid-route-actions {
        flex-direction: column;
    }
}

/* ============================================================================
   GRID ROUTE FINISH BUTTON (Fertig)
   ============================================================================ */

.ee-grid-route-finish-overlay {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.ee-grid-route-finish-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.4);
    transition: all 0.3s ease;
}

.ee-grid-route-finish-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 40px rgba(16, 185, 129, 0.5);
}

.ee-grid-route-finish-btn svg {
    stroke: currentColor;
}

/* ============================================================================
   GRID INFO FULLSCREEN STYLES
   ============================================================================ */

.ee-grid-info-fullscreen {
    padding: 20px;
}

.ee-grid-info-section {
    margin-bottom: 32px;
}

.ee-grid-info-section:last-child {
    margin-bottom: 0;
}

.ee-grid-info-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ee-text-secondary, rgba(255, 255, 255, 0.6));
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ee-grid-info-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.ee-grid-info-detail-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ee-grid-info-detail-item.ee-grid-info-detail-full {
    grid-column: 1 / -1;
}

.ee-grid-info-detail-label {
    font-size: 12px;
    color: var(--ee-text-secondary, rgba(255, 255, 255, 0.6));
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ee-grid-info-detail-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--ee-text-primary, #fff);
}

.ee-grid-info-detail-value.ee-grid-info-highlight-value {
    color: #10b981;
    font-size: 24px;
}

/* ============================================================================
   E1/E8 POPUP CONTENT STYLES
   ============================================================================ */

.ee-e1e8-popup-content {
    padding: 20px;
    min-height: 400px;
}

.ee-e1e8-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--ee-text-secondary, rgba(255, 255, 255, 0.6));
}

.ee-loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--ee-text-secondary, rgba(255, 255, 255, 0.6));
    font-size: 14px;
}

/* ============================================================================
   E1/E8 FORM STYLES
   ============================================================================ */

.ee-e1e8-form {
    padding: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.ee-e1e8-section {
    margin-bottom: 32px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ee-e1e8-section:last-of-type {
    margin-bottom: 24px;
}

.ee-e1e8-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ee-e1e8-section-header svg {
    color: #10b981;
    flex-shrink: 0;
}

.ee-e1e8-section-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ee-text-primary, #fff);
}

.ee-e1e8-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.ee-e1e8-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ee-e1e8-field-small {
    max-width: 120px;
}

.ee-e1e8-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ee-text-secondary, rgba(255, 255, 255, 0.6));
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ee-e1e8-field input,
.ee-e1e8-field input[type="text"],
.ee-e1e8-field input[type="email"],
.ee-e1e8-field input[type="tel"] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    color: var(--ee-text-primary, #fff) !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: 1.4 !important;
}

.ee-e1e8-field input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.ee-e1e8-field input:focus {
    outline: none !important;
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

.ee-e1e8-field input:hover:not(:focus) {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Checkbox Styling */
.ee-e1e8-checkbox-row {
    margin-bottom: 16px;
}

.ee-e1e8-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--ee-text-primary, #fff);
}

.ee-e1e8-checkbox input[type="checkbox"] {
    display: none;
}

.ee-e1e8-checkbox-mark {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ee-e1e8-checkbox input:checked + .ee-e1e8-checkbox-mark {
    background: #10b981;
    border-color: #10b981;
}

.ee-e1e8-checkbox input:checked + .ee-e1e8-checkbox-mark::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.ee-e1e8-checkbox:hover .ee-e1e8-checkbox-mark {
    border-color: rgba(255, 255, 255, 0.5);
}

/* Owner fields animation */
.ee-e1e8-owner-fields {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Submit Button */
.ee-e1e8-actions {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.ee-e1e8-submit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
}

.ee-e1e8-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
}

.ee-e1e8-submit:active:not(:disabled) {
    transform: translateY(0);
}

.ee-e1e8-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.ee-e1e8-submit svg {
    flex-shrink: 0;
}

/* Spinner for loading state */
.ee-e1e8-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Responsive */
@media (max-width: 600px) {
    .ee-e1e8-form {
        padding: 16px;
    }

    .ee-e1e8-section {
        padding: 16px;
    }

    .ee-e1e8-grid {
        grid-template-columns: 1fr;
    }

    .ee-e1e8-field-small {
        max-width: none;
    }

    .ee-e1e8-submit {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   STROMLAUFPLAN WIDGET - Fixed Overlay Buttons
   ============================================================================ */

/* Preview wrapper */
.ee-stromlaufplan-preview-wrapper {
    overflow: auto;
    max-height: calc(100vh - 120px);
    padding-bottom: 80px; /* Space for fixed buttons */
}

.ee-stromlaufplan-preview-svg {
    background: #fff;
    border-radius: 8px;
    overflow: auto;
    min-height: 400px;
}

.ee-stromlaufplan-preview-svg svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Fixed overlay buttons */
.ee-stromlaufplan-fixed-btn {
    position: fixed;
    bottom: 24px;
    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;
    z-index: 10001;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.ee-stromlaufplan-fixed-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Back button - bottom left */
.ee-stromlaufplan-back-btn {
    left: 24px;
    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-stromlaufplan-back-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* PDF button - bottom right */
.ee-stromlaufplan-pdf-btn {
    right: 24px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.ee-stromlaufplan-pdf-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
}

.ee-stromlaufplan-pdf-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .ee-stromlaufplan-fixed-btn {
        padding: 12px 18px;
        font-size: 14px;
    }

    .ee-stromlaufplan-back-btn {
        left: 16px;
    }

    .ee-stromlaufplan-pdf-btn {
        right: 16px;
    }

    .ee-stromlaufplan-back-btn span {
        display: none; /* Show only icon on mobile */
    }
}


/* ============================================================================
   BUILDING PERMIT WIDGET STYLES - Bauantrag für Agri-PV
   ============================================================================ */

/* Preview Styles */
.ee-building-permit-preview {
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-md);
    padding: var(--ee-space-sm);
}

.ee-building-permit-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ee-space-sm);
}

.ee-permit-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--ee-radius-full);
    font-size: 12px;
    font-weight: 600;
}

.ee-permit-badge svg {
    width: 14px;
    height: 14px;
}

.ee-permit-badge-exists {
    background: rgba(52, 199, 89, 0.15);
    color: var(--ee-accent-green);
    border: 1px solid rgba(52, 199, 89, 0.3);
}

.ee-permit-badge-new {
    background: rgba(0, 122, 255, 0.15);
    color: var(--ee-accent-one);
    border: 1px solid rgba(0, 122, 255, 0.3);
}

.ee-permit-date {
    font-size: 11px;
    color: var(--ee-text-tertiary);
}

/* PDF Badge in preview status */
.ee-permit-preview-pdf-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border-radius: var(--ee-radius-full);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.ee-permit-preview-pdf-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
    color: white;
}

.ee-permit-preview-pdf-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.ee-building-permit-info {
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-xs);
}

.ee-permit-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.ee-permit-info-label {
    font-size: 12px;
    color: var(--ee-text-tertiary);
}

.ee-permit-info-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--ee-text-primary);
    text-align: right;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Document Status in Preview */
.ee-permit-docs-status {
    display: flex;
    gap: var(--ee-space-sm);
    padding: var(--ee-space-sm) 0;
    border-top: 1px solid var(--ee-border-subtle);
    margin-top: var(--ee-space-xs);
}

.ee-permit-doc-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ee-text-muted);
    padding: 4px 8px;
    background: var(--ee-bg-card);
    border-radius: var(--ee-radius-sm);
    border: 1px solid var(--ee-border-subtle);
}

.ee-permit-doc-item.ready {
    color: var(--ee-accent-green);
    background: rgba(52, 199, 89, 0.1);
    border-color: rgba(52, 199, 89, 0.3);
}

.ee-permit-doc-item svg {
    flex-shrink: 0;
}

/* Anlagentyp Badge */
.ee-permit-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ee-accent-one);
    padding: 6px 10px;
    background: rgba(0, 122, 255, 0.1);
    border-radius: var(--ee-radius-full);
    border: 1px solid rgba(0, 122, 255, 0.2);
    margin-top: var(--ee-space-xs);
}

.ee-permit-type-badge svg {
    color: var(--ee-accent-one);
}

/* Fullscreen Styles */
.ee-building-permit-fullscreen {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--ee-space-md);
}

/* Tabs */
.ee-permit-tabs {
    display: flex;
    gap: var(--ee-space-xs);
    padding: var(--ee-space-sm);
    background: var(--ee-bg-glass);
    border-radius: var(--ee-radius-lg);
    border: 1px solid var(--ee-border-subtle);
    overflow-x: auto;
}

.ee-permit-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--ee-text-secondary);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--ee-radius-md);
    cursor: pointer;
    transition: all var(--ee-transition-fast);
    white-space: nowrap;
}

.ee-permit-tab:hover {
    background: var(--ee-bg-card-hover);
    color: var(--ee-text-primary);
}

.ee-permit-tab.active {
    background: var(--ee-accent-one);
    color: white;
}
.ee-permit-tab svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Tab Contents */
.ee-permit-tab-contents {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.ee-permit-tab-content {
    display: none;
    height: 100%;
}

.ee-permit-tab-content.active {
    display: block;
}

/* Form Container */
.ee-permit-form-container {
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-lg);
    padding: var(--ee-space-sm);
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.ee-permit-section {
    background: var(--ee-bg-glass);
    border-radius: var(--ee-radius-lg);
    border: 1px solid var(--ee-border-subtle);
    padding: var(--ee-space-lg);
}

.ee-permit-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ee-text-primary);
    margin-bottom: var(--ee-space-md);
    padding-bottom: var(--ee-space-sm);
    border-bottom: 1px solid var(--ee-border-subtle);
    flex-wrap: wrap;
}

.ee-permit-section-title svg {
    width: 20px;
    height: 20px;
    color: var(--ee-accent-one);
}

/* AI Search Button in Section Title */
.ee-permit-ai-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.15), rgba(88, 86, 214, 0.15));
    border: 1px solid rgba(0, 122, 255, 0.3);
    border-radius: var(--ee-radius-full);
    color: var(--ee-accent-one);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ee-transition-fast);
}

.ee-permit-ai-search-btn:hover {
    background: linear-gradient(135deg, var(--ee-accent-one), var(--primary-color));
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.ee-permit-ai-search-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ee-permit-ai-search-btn svg {
    width: 14px;
    height: 14px;
    color: inherit;
}

.ee-permit-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ee-space-md);
}

.ee-permit-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ee-permit-form-group-full {
    grid-column: 1 / -1;
}

.ee-permit-form-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ee-text-secondary);
}

.ee-permit-form-group input,
.ee-permit-form-group textarea,
.ee-permit-form-group select {
    padding: 10px 14px!important;
    background: var(--ee-bg-card)!important;
    border: 1px solid var(--ee-border-light)!important;
    border-radius: var(--ee-radius-md)!important;
    color: var(--ee-text-primary)!important;
    font-size: 14px!important;
    font-family: inherit!important;
    transition: all var(--ee-transition-fast)!important;
}

.ee-permit-form-group input:focus,
.ee-permit-form-group textarea:focus,
.ee-permit-form-group select:focus {
    outline: none;
    border-color: var(--ee-accent-one);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.ee-permit-form-group input::placeholder,
.ee-permit-form-group textarea::placeholder {
    color: var(--ee-text-muted);
}

.ee-permit-form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* Editor Styles */
.ee-permit-editor-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--ee-space-md);
    padding: var(--ee-space-sm);
}

.ee-permit-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ee-space-md);
    padding: var(--ee-space-sm) var(--ee-space-md);
    background: var(--ee-bg-glass);
    border-radius: var(--ee-radius-lg);
    border: 1px solid var(--ee-border-subtle);
}

.ee-permit-generate-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--ee-accent-one), var(--primary-color));
    border: none;
    border-radius: var(--ee-radius-md);
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ee-transition-fast);
}

.ee-permit-generate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 122, 255, 0.3);
}

.ee-permit-generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ee-permit-generate-btn svg {
    width: 18px;
    height: 18px;
}

.ee-permit-editor-info {
    font-size: 12px;
    color: var(--ee-text-tertiary);
}

.ee-permit-editor-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--ee-radius-lg);
    border: 1px solid var(--ee-border-subtle);
}

.ee-permit-editor {
    width: 100%;
    height: 100%;
    min-height: 300px;
    padding: var(--ee-space-lg);
    background: var(--ee-bg-card);
    color: var(--ee-text-primary);
    font-size: 14px;
    line-height: 1.7;
    overflow-y: auto;
    outline: none;
}

.ee-permit-editor-large {
    min-height: 400px;
}

.ee-permit-editor:empty:before {
    content: attr(placeholder);
    color: var(--ee-text-muted);
    pointer-events: none;
}

.ee-permit-editor p {
    margin-bottom: 1em;
}

.ee-permit-editor strong {
    font-weight: 600;
}

.ee-permit-generating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 200px;
    color: var(--ee-text-secondary);
    font-size: 14px;
}

.ee-permit-error {
    padding: var(--ee-space-md);
    background: rgba(255, 59, 48, 0.1);
    border-radius: var(--ee-radius-md);
    color: var(--ee-accent-red);
    font-size: 13px;
}

/* Versions Tab */
.ee-permit-versions-container {
    padding: var(--ee-space-md);
}

.ee-permit-versions-header {
    margin-bottom: var(--ee-space-lg);
}

.ee-permit-versions-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ee-text-primary);
    margin-bottom: 4px;
}

.ee-permit-versions-header p {
    font-size: 13px;
    color: var(--ee-text-tertiary);
}

.ee-permit-versions-list {
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-sm);
}

/* Current version display */
.ee-permit-version-current {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, rgba(94, 92, 230, 0.1) 100%);
    border: 1px solid var(--ee-accent-one);
    border-radius: var(--ee-radius-md);
    padding: var(--ee-space-md);
    margin-bottom: var(--ee-space-sm);
}

.ee-permit-version-current-header {
    display: flex;
    align-items: center;
    gap: var(--ee-space-sm);
    margin-bottom: var(--ee-space-xs);
}

.ee-permit-version-current-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--ee-accent-one);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--ee-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ee-permit-version-current-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ee-space-md);
}

.ee-permit-version-current-info .ee-permit-version-date,
.ee-permit-version-current-info .ee-permit-version-status {
    font-size: 12px;
    color: var(--ee-text-secondary);
}

.ee-permit-versions-divider {
    display: flex;
    align-items: center;
    gap: var(--ee-space-sm);
    margin: var(--ee-space-md) 0;
    color: var(--ee-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ee-permit-versions-divider::before,
.ee-permit-versions-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ee-border-subtle);
}

.ee-permit-version-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ee-space-md);
    background: var(--ee-bg-glass);
    border-radius: var(--ee-radius-md);
    border: 1px solid var(--ee-border-subtle);
    transition: all var(--ee-transition-fast);
}

.ee-permit-version-item:hover {
    background: var(--ee-bg-card-hover);
    border-color: var(--ee-border-light);
}

.ee-permit-version-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ee-space-sm);
}

.ee-permit-version-number {
    font-weight: 600;
    color: var(--ee-text-primary);
    font-size: 14px;
}

.ee-permit-version-date {
    font-size: 12px;
    color: var(--ee-text-tertiary);
}

.ee-permit-version-user {
    font-size: 12px;
    color: var(--ee-text-secondary);
    padding: 2px 8px;
    background: var(--ee-bg-card);
    border-radius: var(--ee-radius-sm);
}

.ee-permit-version-note {
    font-size: 12px;
    color: var(--ee-text-muted);
    font-style: italic;
}

.ee-permit-version-restore {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--ee-bg-card);
    border: 1px solid var(--ee-border-light);
    border-radius: var(--ee-radius-md);
    color: var(--ee-text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--ee-transition-fast);
}

.ee-permit-version-restore:hover {
    background: var(--ee-accent-one);
    border-color: var(--ee-accent-one);
    color: white;
}

.ee-permit-version-restore svg {
    width: 14px;
    height: 14px;
}

.ee-permit-versions-empty,
.ee-permit-versions-error,
.ee-permit-versions-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: var(--ee-space-xl);
    color: var(--ee-text-tertiary);
    font-size: 13px;
    text-align: center;
}

/* Action Bar */
.ee-permit-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ee-space-md);
    padding: var(--ee-space-md);
    background: var(--ee-bg-glass);
    border-radius: var(--ee-radius-lg);
    border: 1px solid var(--ee-border-subtle);
    margin-top: auto;
}

.ee-permit-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: var(--ee-radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ee-transition-fast);
}

.ee-permit-btn svg {
    width: 18px;
    height: 18px;
}

.ee-permit-btn-secondary {
    background: var(--ee-bg-card);
    border: 1px solid var(--ee-border-light);
    color: var(--ee-text-secondary);
}

.ee-permit-btn-secondary:hover {
    background: var(--ee-bg-card-hover);
    color: var(--ee-text-primary);
}

.ee-permit-btn-primary {
    background: linear-gradient(135deg, var(--ee-accent-green), #28a745);
    color: white;
}

.ee-permit-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(52, 199, 89, 0.3);
}

.ee-permit-btn-version {
    background: var(--ee-bg-card);
    border: 1px solid var(--ee-accent-one);
    color: var(--ee-accent-one);
}

.ee-permit-btn-version:hover {
    background: var(--ee-accent-one);
    color: white;
}

.ee-permit-btn-export {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.ee-permit-btn-export:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

.ee-permit-btn-download {
    background: var(--ee-bg-card);
    border: 1px solid var(--ee-accent-green);
    color: var(--ee-accent-green);
    padding: var(--ee-space-sm);
    text-decoration: none;
}

.ee-permit-btn-download:hover {
    background: var(--ee-accent-green);
    color: white;
}

/* Primary download button - prominent green */
.ee-permit-btn-download-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--ee-space-xs);
}

.ee-permit-btn-download-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
    color: white;
}

/* Secondary button - subtle style */
.ee-permit-btn-secondary {
    background: var(--ee-bg-card);
    border: 1px solid var(--ee-border);
    color: var(--ee-text-secondary);
}

.ee-permit-btn-secondary:hover {
    background: var(--ee-bg-card-hover);
    border-color: var(--ee-accent-blue);
    color: var(--ee-accent-blue);
}

.ee-permit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ee-permit-btn-group {
    display: flex;
    gap: var(--ee-space-sm);
}

/* PDF Download link in versions */
.ee-permit-version-current-pdf {
    margin-top: var(--ee-space-md);
    padding-top: var(--ee-space-md);
    border-top: 1px solid var(--ee-border);
}

.ee-permit-pdf-download-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ee-space-sm);
    padding: var(--ee-space-sm) var(--ee-space-md);
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border-radius: var(--ee-radius-md);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.ee-permit-pdf-download-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
    color: white;
}

.ee-permit-pdf-download-link svg {
    flex-shrink: 0;
}

.ee-permit-pdf-filename {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Preview PDF Button */
.ee-permit-preview-pdf {
    margin-top: var(--ee-space-sm);
    padding-top: var(--ee-space-sm);
    border-top: 1px dashed var(--ee-border);
}

.ee-permit-preview-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ee-space-xs);
    padding: 6px 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border-radius: var(--ee-radius-sm);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
}

.ee-permit-preview-pdf-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    color: white;
}

.ee-permit-preview-pdf-btn svg {
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .ee-permit-tabs {
        flex-wrap: nowrap;
        padding: var(--ee-space-xs);
    }

    .ee-permit-tab {
        padding: 8px 12px;
        font-size: 12px;
    }

    .ee-permit-tab span {
        display: none;
    }

    .ee-permit-form-grid {
        grid-template-columns: 1fr;
    }

    .ee-permit-action-bar {
        flex-direction: column;
    }

    .ee-permit-btn-group {
        width: 100%;
    }

    .ee-permit-btn {
        flex: 1;
        justify-content: center;
    }
}

/* Version Action Buttons */
.ee-permit-version-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ee-permit-version-preview,
.ee-permit-version-delete,
.ee-permit-version-pdf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--ee-bg-card);
    border: 1px solid var(--ee-border-light);
    border-radius: var(--ee-radius-md);
    color: var(--ee-text-secondary);
    cursor: pointer;
    transition: all var(--ee-transition-fast);
    text-decoration: none;
}

.ee-permit-version-preview:hover {
    background: var(--ee-accent-one);
    border-color: var(--ee-accent-one);
    color: white;
}

.ee-permit-version-delete:hover {
    background: var(--ee-accent-red);
    border-color: var(--ee-accent-red);
    color: white;
}

.ee-permit-version-pdf {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #059669;
    color: white;
}

.ee-permit-version-pdf:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    color: white;
}

.ee-permit-version-preview svg,
.ee-permit-version-delete svg,
.ee-permit-version-restore svg,
.ee-permit-version-pdf svg {
    width: 16px;
    height: 16px;
}

/* Version Preview Modal */
.ee-permit-version-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ee-space-lg);
}

.ee-permit-version-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.ee-permit-version-modal-content {
    position: relative;
    width: 100%;
    max-width: 800px;
    max-height: 80vh;
    background: var(--ee-bg-card);
    border-radius: var(--ee-radius-xl);
    border: 1px solid var(--ee-border-subtle);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ee-permit-version-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ee-space-md) var(--ee-space-lg);
    border-bottom: 1px solid var(--ee-border-subtle);
    background: var(--ee-bg-glass);
}

.ee-permit-version-modal-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ee-text-primary);
    margin: 0;
}

.ee-permit-version-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--ee-text-tertiary);
    cursor: pointer;
    border-radius: var(--ee-radius-md);
    transition: all var(--ee-transition-fast);
}

.ee-permit-version-modal-close:hover {
    background: var(--ee-bg-card-hover);
    color: var(--ee-text-primary);
}

.ee-permit-version-modal-body {
    flex: 1;
    padding: var(--ee-space-lg);
    overflow-y: auto;
    min-height: 200px;
    max-height: 50vh;
}

.ee-permit-version-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ee-space-sm);
    padding: var(--ee-space-md) var(--ee-space-lg);
    border-top: 1px solid var(--ee-border-subtle);
    background: var(--ee-bg-glass);
}

/* Version Preview Content */
.ee-permit-preview-content {
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-lg);
}

.ee-permit-preview-section h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--ee-accent-one);
    margin-bottom: var(--ee-space-sm);
    padding-bottom: var(--ee-space-xs);
    border-bottom: 1px solid var(--ee-border-subtle);
}

.ee-permit-preview-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ee-text-primary);
    background: var(--ee-bg-glass);
    padding: var(--ee-space-md);
    border-radius: var(--ee-radius-md);
    max-height: 200px;
    overflow-y: auto;
}

.ee-permit-preview-text em {
    color: var(--ee-text-muted);
    font-style: italic;
}

.ee-permit-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ee-space-md);
    font-size: 12px;
    color: var(--ee-text-tertiary);
    padding-top: var(--ee-space-sm);
    border-top: 1px solid var(--ee-border-subtle);
}

/* Refresh Icons for Auto-fillable Fields */
.ee-permit-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.ee-permit-label-row label {
    margin-bottom: 0;
}

.ee-permit-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--ee-text-muted);
    cursor: pointer;
    border-radius: var(--ee-radius-sm);
    transition: all var(--ee-transition-fast);
    flex-shrink: 0;
}

.ee-permit-refresh-btn:hover {
    color: var(--ee-accent-one);
    background: rgba(0, 122, 255, 0.1);
    transform: rotate(45deg);
}

.ee-permit-refresh-btn:active {
    transform: rotate(180deg);
}

.ee-permit-refresh-btn svg {
    width: 14px;
    height: 14px;
}

.ee-permit-refresh-btn.refreshing {
    animation: ee-spin 1s linear infinite;
}

@keyframes ee-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Button spinner for AI search loading */
.ee-btn-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--ee-accent-one);
    border-radius: 50%;
    border-top-color: transparent;
    animation: ee-spin 0.8s linear infinite;
}