/* ============================================
   PV-Energie-Planer - App Interface
   Apple-inspired Minimal Design
   ============================================ */

/* Calculator Mode Toggle (Privat/Gewerbe) – Sidebar */
.calculator-mode-toggle {
    display: flex;
    background: var(--color-gray-200);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.calculator-mode-toggle .mode-btn {
    flex: 1;
    padding: 10px 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--color-gray-500);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1;
    text-align: center;
    letter-spacing: -0.01em;
}
.calculator-mode-toggle .mode-btn.active {
    background: var(--color-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.35);
}
.calculator-mode-toggle .mode-btn:not(.active):hover {
    color: var(--color-gray-700);
    background: rgba(0,0,0,0.04);
}

/* CSS Variables */
:root {
    /* Colors */
    --color-white: #ffffff;
    --color-black: #1d1d1f;
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f7;
    --color-gray-200: #e8e8ed;
    --color-gray-300: #d2d2d7;
    --color-gray-400: #aeaeb2;
    --color-gray-500: #8e8e93;
    --color-gray-600: #636366;
    --color-gray-700: #48484a;
    --color-accent: #FF9500;
    --color-accent-light: #FFE8CC;
    --color-primary: #007AFF;
    
    /* Semantic */
    --color-bg: var(--color-white);
    --color-bg-secondary: var(--color-gray-100);
    --color-text: var(--color-gray-700);
    --color-text-secondary: var(--color-gray-500);
    --color-text-tertiary: var(--color-gray-400);
    --color-border: var(--color-gray-200);
    --color-card-background: var(--color-white);
    
    /* Status Colors */
    --color-success: #34C759;
    --color-warning: #FF9500;
    --color-error: #FF3B30;
    --color-info: #007AFF;
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    
    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Dark Mode - follows system preference */
@media (prefers-color-scheme: dark) {
    :root {
        /* Colors */
        --color-white: #000000;
        --color-black: #f5f5f7;
        --color-gray-50: #1c1c1e;
        --color-gray-100: #2c2c2e;
        --color-gray-200: #3a3a3c;
        --color-gray-300: #48484a;
        --color-gray-400: #636366;
        --color-gray-500: #8e8e93;
        --color-gray-600: #aeaeb2;
        --color-gray-700: #f5f5f7;
        
        /* Semantic */
        --color-bg: #000000;
        --color-bg-secondary: #1c1c1e;
        --color-text: #f5f5f7;
        --color-text-secondary: #a1a1a6;
        --color-text-tertiary: #8e8e93;
        --color-border: #3a3a3c;
        --color-card-background: #1c1c1e;
        
        /* Shadows for dark mode */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    }

    /* Browser-Autofill im Dark Mode überschreiben */
    .input-field:-webkit-autofill,
    .input-field:-webkit-autofill:hover,
    .input-field:-webkit-autofill:focus,
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    select:-webkit-autofill,
    textarea:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px #1c1c1e inset !important;
        -webkit-text-fill-color: #f5f5f7 !important;
        caret-color: #f5f5f7 !important;
        transition: background-color 5000s ease-in-out 0s;
    }
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Maintenance Banner */
.maintenance-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 12px var(--space-lg);
    background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
    color: white;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.maintenance-banner a {
    color: white;
    text-decoration: underline;
    font-weight: 600;
}

.maintenance-banner a:hover {
    opacity: 0.9;
}

.maintenance-banner svg {
    flex-shrink: 0;
}

/* App Layout */
.app-layout {
    display: flex;
    min-height: calc(100vh - 48px);
    background: var(--color-bg-secondary);
}
.app-layout.has-global-nav { margin-top: 52px; }
.app-layout.has-global-nav .app-sidebar { top: 52px; }

/* Sidebar */
.app-sidebar {
    width: 260px;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 110;
}

.sidebar-header {
    padding: 27px var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text);
    font-weight: 600;
    font-size: 16px;
}

.sidebar-logo .logo-icon {
    width: 24px;
    height: 24px;
}

.sidebar-nav {
    flex: 1;
    padding: var(--space-md);
    overflow-y: auto;
}

.nav-section {
    margin-bottom: var(--space-lg);
}

.nav-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-tertiary);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-xs);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 10px var(--space-md);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.nav-item:hover {
    background: var(--color-gray-100);
    color: var(--color-text);
    opacity: 1;
}

.nav-item.active {
    background: var(--color-black);
    color: var(--color-white);
}

.nav-item svg {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.nav-item.active svg {
    opacity: 1;
}

.sidebar-footer {
    padding: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.sidebar-lang-switcher {
    margin-bottom: var(--space-sm);
}
.sidebar-lang-switcher .nav-lang-select {
    width: 100%;
    font-size: 0.65rem;
    padding: 3px 6px;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    position: relative;
    z-index: 100;
}

.user-menu:hover {
    background: var(--color-gray-100);
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: var(--color-gray-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-plan {
    font-size: 11px;
    color: var(--color-text-tertiary);
}

.user-plan.pro {
    color: var(--color-accent);
}

/* Main Content */
.app-main {
    flex: 1;
    margin-left: 260px;
    display: flex;
    flex-direction: column;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-xl);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 74px;
}

.app-header h1 {
    font-size: 20px;
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.header-actions .btn {
    white-space: nowrap;
}

.app-content {
    flex: 1;
    padding: var(--space-xl);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--color-bg);
    min-width: 0;
}

.tab-content {
    background: var(--color-bg);
}

/* Cards */
.card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden; /* Prevent content overflow */
    position: relative;
    z-index: 1;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.card-title {
    font-size: 15px;
    font-weight: 600;
}

.card-body {
    padding: var(--space-lg);
}

/* Form Elements in App */
.input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.input-group:last-child {
    margin-bottom: 0;
}

.input-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.input-field {
    padding: 10px 14px;
    background: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 15px;
    font-family: var(--font-sans);
    transition: all var(--transition-fast);
}

.input-field:focus {
    outline: none;
    background: var(--color-white);
    border-color: var(--color-primary);
}

.input-hint {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.input-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-template-rows: auto auto auto;
    gap: var(--space-sm) var(--space-md);
}

.input-row .input-group {
    min-width: 0;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: var(--space-sm);
}

.input-row .input-group .input-label {
    align-self: end;
}

/* Slider */
.slider-group {
    margin-bottom: var(--space-lg);
}

.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.slider-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.slider-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: var(--color-gray-200);
    border-radius: 2px;
    outline: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--color-black);
    border-radius: 50%;
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

/* Toggle */
.toggle-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
}

.toggle-group:last-child {
    border-bottom: none;
}

.toggle-label {
    font-size: 14px;
    color: var(--color-text);
}

.toggle {
    position: relative;
    width: 44px;
    height: 26px;
}

.toggle input {
    display: none;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--color-gray-300);
    border-radius: 13px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: var(--color-white);
    border-radius: 50%;
    transition: transform var(--transition-fast);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.toggle input:checked + .toggle-slider {
    background: var(--color-accent);
}

.toggle input:checked + .toggle-slider::before {
    transform: translateX(18px);
}

/* Tabs */
.tabs {
    display: flex;
    gap: var(--space-xs);
    padding: 4px;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.tab {
    flex: 1;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tab:hover {
    color: var(--color-text);
}

.tab.active {
    background: var(--color-white);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    position: relative;
    z-index: 1;
}

/* Variante: alle Karten untereinander statt nebeneinander */
.stats-grid.stats-grid-stack {
    grid-template-columns: 1fr;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.stat-card {
    padding: var(--space-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.stat-card-label {
    font-size: 12px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.stat-card-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.02em;
}

.stat-card-unit {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-left: 4px;
}

.stat-card-change {
    font-size: 12px;
    margin-top: var(--space-xs);
}

.stat-card-change.positive {
    color: var(--color-accent);
}

.stat-card-change.negative {
    color: #ff3b30;
}

/* Energy Flow Bars */
.energy-flow-bars {
    padding: var(--space-lg) 0;
}

.energy-bar-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.energy-bar-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
}

.energy-bar-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.energy-bar-track {
    width: 100%;
    height: 10px;
    background: var(--color-border);
    border-radius: 5px;
    margin-bottom: var(--space-md);
    overflow: hidden;
}

.energy-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.6s ease;
}

/* Chart Container */
.chart-container {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    max-width: 100%;
    overflow: hidden;
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.chart-title {
    font-size: 15px;
    font-weight: 600;
}

.chart-legend {
    display: flex;
    gap: var(--space-lg);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 12px;
    color: var(--color-text-secondary);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.chart-canvas {
    width: 100%;
    max-width: 100%;
    height: 300px;
    background: var(--color-bg);
}

/* Ensure all canvas elements have white background */
canvas {
    background: var(--color-bg);
}

.chart-subtitle {
    font-size: 13px;
    color: var(--color-text-tertiary);
    margin-top: var(--space-xs);
}

.chart-controls {
    display: flex;
    gap: var(--space-sm);
}

.chart-controls .input-field.compact {
    padding: var(--space-xs) var(--space-sm);
    font-size: 13px;
    min-width: 100px;
}

.break-even-chart-wrapper {
    position: relative;
    width: 100%;
    height: 375px;
    margin: var(--space-lg) 0;
}

.break-even-chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

.chart-legend.centered {
    justify-content: center;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-md);
}

.legend-line {
    width: 20px;
    height: 2px;
    background: var(--color-text-tertiary);
    border-style: dashed;
}

/* Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.data-table th {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-table td {
    font-size: 14px;
    color: var(--color-text);
}

.data-table tbody tr:hover {
    background: var(--color-gray-50);
}

/* Upgrade Banner */
.upgrade-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-100);
    color: var(--color-text);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    border: 1px solid var(--color-border);
}

.upgrade-banner-content h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.upgrade-banner-content p {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.upgrade-banner .btn {
    background: var(--color-black);
    color: var(--color-white);
    padding: 8px 16px;
    font-size: 13px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--space-3xl);
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-lg);
    background: var(--color-gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-text-tertiary);
}

/* Preview Container for non-subscribers */
.preview-container {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-lg);
}

.preview-container:last-child {
    margin-bottom: 0;
}

.preview-image {
    width: 100%;
    height: auto;
    display: block;
}

.preview-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.95));
    pointer-events: none;
}

.empty-state h3 {
    font-size: 17px;
    margin-bottom: var(--space-sm);
}

.empty-state p {
    color: var(--color-text-secondary);
    font-size: 14px;
    margin-bottom: var(--space-lg);
}

/* Loading */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-gray-200);
    border-top-color: var(--color-black);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Bouncing dots loader */
.dot-loader { display: inline-flex; gap: 2px; }
.dot-loader span {
    display: inline-block;
    font-weight: 700;
    font-size: 1.2em;
    animation: dotBounce 1.4s infinite ease-in-out both;
}
.dot-loader span:nth-child(1) { animation-delay: 0s; }
.dot-loader span:nth-child(2) { animation-delay: 0.16s; }
.dot-loader span:nth-child(3) { animation-delay: 0.32s; }
@keyframes dotBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: .4; }
    40% { transform: translateY(-5px); opacity: 1; }
}

/* Orientation Grid */
.orientation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.orientation-card {
    padding: var(--space-md);
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.orientation-card:hover {
    border-color: var(--color-gray-300);
}

.orientation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.orientation-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.orientation-factor {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-tertiary);
    padding: 2px 8px;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
}

.orientation-factor.optimal {
    background: rgba(52, 199, 89, 0.1);
    color: var(--color-accent);
}

.orientation-inputs {
    display: flex;
    gap: var(--space-sm);
}

.orientation-inputs .input-group {
    flex: 1;
    margin-bottom: 0;
}

.input-group.compact .input-label {
    font-size: 11px;
    margin-bottom: 4px;
}

.input-group.compact .input-field {
    padding: 8px 10px;
    font-size: 14px;
}

.compass-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.compass-image {
    width: 150px;
    height: 150px;
    object-fit: contain;
    border-radius: 50%;
}

.compass-svg {
    width: 80px;
    height: 80px;
}

.compass-label {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-top: var(--space-sm);
}

.orientation-legend {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.orientation-legend .legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 12px;
    color: var(--color-text-secondary);
}

.orientation-legend .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-dot.optimal {
    background: var(--color-accent);
}

.legend-dot.good {
    background: #a3e635;
}

.legend-dot.medium {
    background: #fbbf24;
}

.legend-dot.low {
    background: var(--color-gray-400);
}

/* Card Subtitle */
.card-subtitle {
    font-size: 13px;
    color: var(--color-text-tertiary);
    font-weight: 400;
}

/* Toggle improvements */
.toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-hint {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

/* Conditional Settings */
.conditional-settings {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

/* ============================================
   Consumption Profile Cards
   ============================================ */
.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    background: var(--color-bg-secondary);
    user-select: none;
}

.profile-card:hover {
    border-color: var(--color-primary);
    background: var(--color-white);
}

.profile-card.selected {
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 245, 158, 11), 0.15);
}

.profile-card-icon {
    color: var(--color-text-secondary);
    line-height: 0;
}

.profile-card.selected .profile-card-icon {
    color: var(--color-primary);
}

.profile-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.profile-card-desc {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.3;
}

.profile-card-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    margin-top: 2px;
}

.profile-card-badge.high {
    background: #dcfce7;
    color: #166534;
}

.profile-card-badge.medium {
    background: #fef9c3;
    color: #854d0e;
}

.profile-card-badge.low {
    background: #fee2e2;
    color: #991b1b;
}

@media (max-width: 600px) {
    #consumption-profile-grid,
    #consumption-profile-grid-private {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   Consumption Categories
   ============================================ */
.consumption-category {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    overflow: hidden;
    transition: all var(--transition-fast);
}

.consumption-category:hover {
    border-color: var(--color-gray-300);
}

.consumption-category.expanded {
    border-color: var(--color-gray-400);
}

.category-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    background: var(--color-bg);
    transition: background var(--transition-fast);
}

.category-header:hover {
    background: var(--color-gray-50);
}

.category-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.category-icon.house {
    background: rgba(0, 122, 255, 0.1);
    color: #007aff;
}

.category-icon.heatpump {
    background: rgba(255, 149, 0, 0.1);
    color: #ff9500;
}

.category-icon.ev {
    background: rgba(52, 199, 89, 0.1);
    color: #34c759;
}

.category-icon.other {
    background: rgba(175, 82, 222, 0.1);
    color: #af52de;
}

.category-info {
    flex: 1;
    min-width: 0;
}

.category-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.category-desc {
    display: block;
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.category-input {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Tool Link Button neben Kategorien */
.tool-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
    margin-left: auto;
    margin-right: 8px;
    flex-shrink: 0;
}

.tool-link-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    transform: scale(1.05);
}

.tool-link-btn svg {
    width: 16px;
    height: 16px;
}

.input-label-inline {
    font-size: 12px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.input-unit {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.stepper-input {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.stepper-btn {
    width: 32px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 18px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.stepper-btn:hover {
    background: var(--color-gray-200);
    color: var(--color-text);
}

.stepper-btn:active {
    background: var(--color-gray-300);
}

.stepper-input .input-field {
    width: 80px;
    text-align: center;
    border: none;
    background: transparent;
    padding: 8px 4px;
    font-size: 15px;
    font-weight: 500;
}

.stepper-input .input-field:focus {
    background: var(--color-white);
}

.expand-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast);
}

.expand-btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

.consumption-category.expanded .expand-btn svg {
    transform: rotate(180deg);
}

.category-details {
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-border);
}

.details-content {
    padding: var(--space-lg);
}

.details-info {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    font-size: 13px;
    border-top: 1px solid var(--color-border);
}

.breakdown-row:first-of-type {
    border-top: none;
}

.breakdown-row span:first-child {
    color: var(--color-text-secondary);
}

.breakdown-row span:last-child {
    font-weight: 500;
    color: var(--color-text);
}

/* Charging Mode Section */
.charging-mode-section {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.section-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.charging-modes {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.charging-mode-option {
    cursor: pointer;
}

.charging-mode-option input {
    display: none;
}

.mode-content {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.charging-mode-option input:checked + .mode-content {
    border-color: var(--color-accent);
    background: rgba(52, 199, 89, 0.05);
}

.mode-content svg {
    width: 24px;
    height: 24px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.charging-mode-option input:checked + .mode-content svg {
    color: var(--color-accent);
}

.mode-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}

.mode-desc {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-left: auto;
}

/* PV Charging Info */
.pv-charging-info {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: rgba(0, 122, 255, 0.05);
    border: 1px solid rgba(0, 122, 255, 0.2);
    border-radius: var(--radius-md);
}

.info-box {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.info-box svg {
    width: 20px;
    height: 20px;
    color: #007aff;
    flex-shrink: 0;
}

.info-box strong {
    display: block;
    font-size: 13px;
    color: var(--color-text);
    margin-bottom: 4px;
}

.info-box p {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin: 0;
}

.charging-specs {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.spec-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 12px;
}

.spec-row span:first-child {
    color: var(--color-text-secondary);
}

.spec-row strong {
    color: var(--color-text);
}

.spec-note {
    color: var(--color-text-tertiary);
}

.seasonal-note {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin: 0;
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(0, 122, 255, 0.2);
}

/* Fuel Savings */
.fuel-savings-section {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.toggle-group.compact {
    padding: var(--space-sm) 0;
}

.input-row.compact {
    gap: var(--space-sm);
}

.input-row.compact .input-group {
    margin-bottom: var(--space-sm);
}

.fuel-savings-result {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(52, 199, 89, 0.1);
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
}

.fuel-savings-result svg {
    width: 18px;
    height: 18px;
    color: var(--color-accent);
}

.fuel-savings-result span {
    font-size: 13px;
    color: var(--color-accent);
}

.fuel-savings-result strong {
    font-weight: 600;
}

/* Consumption Distribution */
.consumption-bar-chart {
    display: flex;
    height: 32px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--space-lg);
}

.bar-segment {
    transition: width var(--transition-base);
}

.bar-segment.house { background: #007aff; }
.bar-segment.heatpump { background: #ff9500; }
.bar-segment.ev { background: #34c759; }
.bar-segment.other { background: #af52de; }

.consumption-legend {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.consumption-legend .legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 13px;
}

.consumption-legend .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.consumption-legend .legend-dot.house { background: #007aff; }
.consumption-legend .legend-dot.heatpump { background: #ff9500; }
.consumption-legend .legend-dot.ev { background: #34c759; }
.consumption-legend .legend-dot.other { background: #af52de; }

.legend-value {
    margin-left: auto;
    font-weight: 500;
    color: var(--color-text);
}

/* Percentage Cards */
.percentage-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-md);
}

.percentage-card {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-align: center;
}

.percentage-card.house { background: rgba(0, 122, 255, 0.1); }
.percentage-card.heatpump { background: rgba(255, 149, 0, 0.1); }
.percentage-card.ev { background: rgba(52, 199, 89, 0.1); }
.percentage-card.other { background: rgba(175, 82, 222, 0.1); }

.percentage-label {
    display: block;
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
}

.percentage-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
}

.percentage-card.house .percentage-value { color: #007aff; }
.percentage-card.heatpump .percentage-value { color: #ff9500; }
.percentage-card.ev .percentage-value { color: #34c759; }
.percentage-card.other .percentage-value { color: #af52de; }

.percentage-kwh {
    display: block;
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-top: var(--space-xs);
}

/* Stats Grid Variants */
.stats-grid.three-col {
    grid-template-columns: repeat(3, 1fr);
}

/* Summary Card */
.summary-card {
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-gray-50) 100%);
    border-color: var(--color-accent);
}

/* ============================================
   Chart Toggles
   ============================================ */
.chart-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-lg);
}

.chart-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.chart-toggle:hover {
    color: var(--color-text);
}

.chart-toggle input {
    display: none;
}

.toggle-indicator {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid currentColor;
    position: relative;
    transition: all var(--transition-fast);
}

.chart-toggle input:checked + .toggle-indicator {
    border-color: transparent;
}

.chart-toggle input:checked + .toggle-indicator::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: white;
}

.toggle-indicator.pv-yield { background: #ff9500; border-color: #ff9500; }
.toggle-indicator.grid-import { background: #ff3b30; border-color: #ff3b30; }
.toggle-indicator.grid-export { background: #ffcc00; border-color: #ffcc00; }
.toggle-indicator.battery-discharge { background: #34c759; border-color: #34c759; }
.toggle-indicator.battery-charge { background: #30d158; border-color: #30d158; }
.toggle-indicator.consumption { background: #007aff; border-color: #007aff; }

.chart-toggle input:not(:checked) + .toggle-indicator {
    background: transparent !important;
}

/* ============================================
   Orientation Yield Bars
   ============================================ */
.orientation-yield-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.yield-bar-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.yield-bar-label {
    width: 60px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
}

.yield-bar-container {
    flex: 1;
    height: 24px;
    background: var(--color-gray-100);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.yield-bar {
    height: 100%;
    background: var(--color-accent);
    border-radius: var(--radius-sm);
    transition: width var(--transition-base);
}

.yield-bar-value {
    width: 80px;
    text-align: right;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* ============================================
   System Comparison - Detailed View
   ============================================ */
.system-comparison-detailed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.comparison-card {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.comparison-card.no-pv {
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
}

.comparison-card.pv-only {
    background: rgba(255, 149, 0, 0.03);
    border: 1px solid rgba(255, 149, 0, 0.15);
}

.comparison-card.pv-storage {
    background: rgba(52, 199, 89, 0.03);
    border: 1px solid rgba(52, 199, 89, 0.15);
}

.comparison-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

.comparison-bar-container {
    width: 80px;
    height: 180px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 6px;
}

.stacked-bar {
    width: 80px;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: 2px;
}

.bar-segment {
    width: 100%;
    border-radius: 6px;
    transition: height 0.3s ease;
}

.bar-segment.direct {
    background: #3b82f6;
    opacity: 0.8;
}

.bar-segment.battery {
    background: #4ade80;
    opacity: 0.8;
}

.bar-segment.grid {
    background: #ef4444;
    opacity: 0.8;
}

.bar-labels {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.bar-label-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.bar-label-item .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.bar-label-item .dot.blue {
    background: #3b82f6;
}

.bar-label-item .dot.green {
    background: #4ade80;
}

.bar-label-item .dot.red {
    background: #ef4444;
}

.bar-label-item span:last-child {
    font-size: 10px;
    font-weight: 500;
}

.bar-label-item:nth-child(1) span:last-child {
    color: #3b82f6;
}

.bar-label-item:nth-child(2) span:last-child {
    color: #22c55e;
}

.bar-label-item:nth-child(3) span:last-child {
    color: #ef4444;
}

.consumption-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    width: 100%;
}

.consumption-total .total-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.consumption-total .total-label {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.consumption-total .total-note {
    font-size: 10px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}

.comparison-card.no-pv .total-note {
    color: #ef4444;
}

.comparison-metrics {
    width: 100%;
    text-align: left;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
}

.metric-label {
    color: var(--color-text-secondary);
}

.metric-value {
    font-weight: 500;
    color: var(--color-text);
}

.metric-value.negative {
    color: #ef4444;
}

.metric-value.positive {
    color: #f97316;
}

.metric-value.success {
    color: #22c55e;
}

.comparison-legend {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.comparison-legend .legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 12px;
    color: var(--color-text-secondary);
}

.comparison-legend .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Legacy system comparison (keep for backwards compatibility) */
.system-comparison {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.comparison-column {
    padding: var(--space-lg);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    text-align: center;
}

.comparison-column.highlight {
    background: rgba(52, 199, 89, 0.1);
    border: 1px solid rgba(52, 199, 89, 0.3);
}

.comparison-column.highlight-alt {
    background: rgba(0, 122, 255, 0.1);
    border: 1px solid rgba(0, 122, 255, 0.3);
}

.comparison-header {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

.comparison-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

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

.comparison-savings {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-accent);
}

/* ============================================
   Yields Table
   ============================================ */
.header-controls {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.total-yield-badge {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-accent);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(52, 199, 89, 0.1);
    border-radius: var(--radius-sm);
}

.yields-table-wrapper {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.yields-table {
    width: 100%;
    border-collapse: collapse;
}

.yields-table th,
.yields-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: right;
    border-bottom: 1px solid var(--color-border);
}

.yields-table th {
    position: sticky;
    top: 0;
    background: var(--color-gray-100);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.yields-table th:first-child,
.yields-table td:first-child {
    text-align: left;
}

.yields-table td {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.yields-table tbody tr:hover {
    background: var(--color-gray-50);
}

.yields-table tbody tr.early-years td:first-child {
    color: var(--color-accent);
}

.yields-table tbody tr.late-years td {
    color: var(--color-text-tertiary);
}

.yields-table tfoot {
    background: var(--color-gray-50);
}

.yields-table tfoot td {
    font-weight: 600;
    border-top: 2px solid var(--color-border);
}

.yields-table .cumulative {
    color: #007aff;
}

.yields-table .revenue {
    color: var(--color-accent);
}

.yields-table .empty-message {
    text-align: center;
    color: var(--color-text-tertiary);
    padding: var(--space-xl);
}

.table-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: rgba(52, 199, 89, 0.05);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--color-text-secondary);
}

.table-info svg {
    width: 16px;
    height: 16px;
    color: var(--color-accent);
    flex-shrink: 0;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-right: var(--space-md);
}

.mobile-menu-toggle span {
    width: 20px;
    height: 2px;
    background: var(--color-text);
    border-radius: 1px;
    transition: all var(--transition-fast);
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Sidebar Overlay for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
}

.sidebar-overlay.active {
    display: block;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
    .mobile-menu-toggle {
        display: flex;
    }
    
    .app-sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        z-index: 60;
    }
    
    .app-sidebar.open {
        transform: translateX(0);
    }
    
    .app-main {
        margin-left: 0;
    }
    
    .system-comparison {
        grid-template-columns: 1fr;
    }
    
    .system-comparison-detailed {
        grid-template-columns: 1fr;
    }

    /* Round icon-only buttons on tablet/narrow desktop (all header action buttons) */
    .header-actions .btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        gap: 0 !important;
    }

    .header-actions .btn svg {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }

    .header-actions {
        gap: var(--space-sm);
    }
}

@media (max-width: 768px) {
    .app-header h1 {
        font-size: 16px;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid.three-col {
        grid-template-columns: 1fr;
    }
    
    .input-row {
        grid-template-columns: 1fr;
    }
    
    .category-header {
        flex-wrap: wrap;
    }
    
    .category-input {
        width: 100%;
        margin-top: var(--space-sm);
    }
    
    .chart-toggles {
        gap: var(--space-sm);
    }
    
    .chart-toggle {
        font-size: 11px;
    }
    
    .consumption-legend {
        grid-template-columns: 1fr;
    }
    
    /* Fix orientation grid on mobile */
    .orientation-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        width: 100%;
        max-width: 100%;
    }
    
    .orientation-card {
        padding: 6px;
        min-width: 0;
        overflow: hidden;
    }
    
    .orientation-header {
        margin-bottom: 4px;
    }
    
    .orientation-label {
        font-size: 11px;
    }
    
    .orientation-factor {
        display: none;
    }
    
    .orientation-inputs {
        gap: 2px;
    }
    
    .orientation-card .input-row {
        flex-direction: row;
        gap: 2px;
    }
    
    .orientation-card .input-group {
        flex: 1;
        min-width: 0;
    }
    
    .orientation-card .input-group input,
    .orientation-inputs .input-group .input-field {
        width: 100%;
        min-width: 0;
        padding: 4px 2px;
        font-size: 12px;
        text-align: center;
    }
    
    .orientation-card .input-label,
    .orientation-inputs .input-group .input-label {
        font-size: 9px;
    }
    
    .orientation-card h4 {
        font-size: 11px;
    }
    
    .compass-center {
        padding: 4px;
    }
    
    .compass-svg {
        width: 50px;
        height: 50px;
    }
    
    .compass-image {
        width: 80px;
        height: 80px;
    }
    
    /* Ensure app content doesn't overflow */
    .app-content {
        padding: var(--space-sm);
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .card {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .card-body {
        max-width: 100%;
        overflow-x: hidden;
        padding: var(--space-sm);
    }
    
    /* Fix card title on mobile */
    .card-title {
        font-size: 16px;
    }
    
    /* Fix module settings card */
    .module-settings .input-group .input-field {
        width: 100%;
    }
    
    /* Override min-width constraints on mobile */
    .input-row .input-group {
        min-width: 0;
        flex: 1;
    }
    
    .input-field {
        min-width: 0;
    }
    
    /* Ensure all containers respect viewport width */
    .app-main,
    .app-content,
    .tab-content,
    .card,
    .card-body {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* ============================================
   Battery Storage Configuration
   ============================================ */

/* Battery Size Section */
.battery-size-section {
    margin-bottom: var(--space-lg);
}

.battery-size-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.battery-size-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-accent);
}

.slider-container {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.slider-label {
    font-size: 12px;
    color: var(--color-text-tertiary);
    min-width: 24px;
}

.slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 3px;
    outline: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--color-accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform var(--transition-fast);
}

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--color-accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.optimum-hint {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    font-size: 13px;
    color: var(--color-primary);
}

.optimum-hint svg {
    color: var(--color-primary);
}

.optimum-hint strong {
    font-weight: 600;
}

/* Optimum Section */
.optimum-section {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.optimum-details {
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}

.optimum-warning {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 13px;
    color: var(--color-warning);
    margin-bottom: var(--space-md);
}

.optimum-warning svg {
    flex-shrink: 0;
}

.calculation-info {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
}

.info-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.calculation-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.calculation-list li {
    padding: var(--space-xs) 0;
}

.calculation-list span {
    color: var(--color-primary);
    font-weight: 500;
}

/* Investment Costs */
.cost-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.cost-row .input-group {
    flex: 1;
}

.cost-display {
    text-align: right;
}

.cost-label {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-accent);
}

.total-investment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.total-label {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.total-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-accent);
}

.price-info {
    display: flex;
    gap: var(--space-sm);
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.price-info svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.price-ranges {
    line-height: 1.6;
}

.price-ranges span {
    display: block;
    margin-bottom: var(--space-xs);
}

.price-note {
    font-style: italic;
    margin-top: var(--space-xs);
}

/* Degradation Table */
.degradation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
    font-size: 14px;
    color: var(--color-text-secondary);
}

.degradation-rate {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-primary);
}

.degradation-table tbody tr:nth-child(1) td:nth-child(3) {
    color: var(--color-accent);
    font-weight: 600;
}

.degradation-table tbody tr td:nth-child(3) {
    color: var(--color-warning);
}

.degradation-table tbody tr td:nth-child(4) {
    color: var(--color-red);
}

.degradation-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--color-text-secondary);
}

.degradation-info svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

/* Conditional Settings */
.conditional-settings {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

/* Button Accent */
.btn-accent {
    background: var(--color-primary);
    color: white;
    border: none;
}

.btn-accent:hover {
    background: #0066d6;
}

/* ============================================
   Monthly Yield Chart (Module Tab)
   ============================================ */
.monthly-yield-chart-container {
    width: 100%;
    min-height: 180px;
    background: var(--color-bg);
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
}

/* HTML-based bar chart (similar to iOS implementation) */
.monthly-bars-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 150px;
    gap: 4px;
    padding: 0 4px;
}

.monthly-bar-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.monthly-bar-value {
    font-size: 10px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.monthly-bar-wrapper {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.monthly-bar {
    width: 80%;
    max-width: 40px;
    min-width: 8px;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}

.monthly-bar-label {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-align: center;
}

.monthly-chart-summary {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-gray-200);
    font-size: 13px;
    color: var(--color-text-secondary);
}

.chart-empty-message {
    text-align: center;
    color: var(--color-text-tertiary);
    padding: 40px;
    font-size: 14px;
}

.chart-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    color: #8e8e93;
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

.chart-placeholder p {
    margin: 0;
    line-height: 1.5;
}

/* Loading-Skeleton: pulsierende Bars / pulsierende Werte */
@keyframes pv-skeleton-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}
.pv-loading-pulse {
    animation: pv-skeleton-pulse 1.2s ease-in-out infinite;
}
.pv-skeleton-bar {
    background: linear-gradient(90deg, var(--color-gray-200) 0%, var(--color-gray-300) 50%, var(--color-gray-200) 100%);
    background-size: 200% 100%;
    animation: pv-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px 4px 0 0;
}
@keyframes pv-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.pv-loading-overlay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary);
    font-size: 0.85em;
}
.pv-loading-overlay::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: pv-loading-spin 0.8s linear infinite;
}
@keyframes pv-loading-spin {
    to { transform: rotate(360deg); }
}

.yield-summary {
    display: flex;
    gap: var(--space-lg);
    font-size: 13px;
    color: var(--color-text-secondary);
}

.yield-summary strong {
    color: var(--color-primary);
    font-weight: 600;
}

/* Yield Overview Grid */
.yield-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.yield-overview-item {
    text-align: center;
    padding: var(--space-lg);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.yield-overview-label {
    display: block;
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
}

.yield-overview-value {
    display: block;
    font-size: 32px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.yield-overview-value.primary {
    color: var(--color-primary);
}

.yield-overview-value.info {
    color: var(--color-info);
}

.yield-overview-unit {
    display: block;
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-top: var(--space-xs);
}

/* Feed-in Section */
.feed-in-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.feed-in-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-100);
    border-radius: var(--radius-lg);
}

.toggle-main-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
}

.ios-toggle {
    position: relative;
    width: 51px;
    height: 31px;
}

.ios-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ios-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e9e9eb;
    transition: .4s;
    border-radius: 34px;
}

.ios-toggle-slider:before {
    position: absolute;
    content: "";
    height: 27px;
    width: 27px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.ios-toggle input:checked + .ios-toggle-slider {
    background-color: #34c759;
}

.ios-toggle input:checked + .ios-toggle-slider:before {
    transform: translateX(20px);
}

.feed-in-rates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.rate-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

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

.rate-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.rate-input-wrapper input {
    padding: 10px 14px;
    background: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 15px;
    font-family: var(--font-sans);
    transition: all var(--transition-fast);
    width: 100%;
}

.rate-input-wrapper input:focus {
    outline: none;
    background: var(--color-white);
    border-color: var(--color-gray-300);
}

/* Feed-in Toggle */
.feed-in-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.toggle-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-label span:first-child {
    font-weight: 500;
    color: var(--color-text);
}

.toggle-hint {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

/* Card Title Row */
.card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.toggle-with-subtitle {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.toggle-with-subtitle .card-subtitle {
    margin-top: 4px;
    display: block;
    text-align: right;
}

.year-range-toggle {
    display: flex;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    padding: 4px;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
    gap: 4px;
}

.year-btn {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    border-radius: calc(var(--radius-md) - 2px);
    flex: 1;
}

.year-btn.active {
    background: var(--color-white);
    color: var(--color-black);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.year-btn:hover:not(.active) {
    color: var(--color-text);
}

/* Toggle Row Inline */
.toggle-row-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

/* Small iOS Toggle */
.ios-toggle.small {
    width: 44px;
    height: 24px;
}

.ios-toggle.small .ios-toggle-slider:before {
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
}

.ios-toggle.small input:checked + .ios-toggle-slider:before {
    transform: translateX(20px);
}

/* Rate Unit */
.rate-unit {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-left: var(--space-xs);
}

/* Info Hint */
.info-hint {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.info-hint svg {
    flex-shrink: 0;
}

/* Data Table Styles */
.data-table-container {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.data-table-scroll {
    max-height: 400px;
    overflow-y: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead {
    position: sticky;
    top: 0;
    background: var(--color-gray-50);
    z-index: 1;
}

.data-table th {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.data-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-gray-100);
    font-variant-numeric: tabular-nums;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tfoot {
    background: var(--color-gray-50);
    font-weight: 600;
}

.data-table tfoot td {
    border-top: 2px solid var(--color-border);
    border-bottom: none;
}

.table-hint {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.table-hint svg {
    color: var(--color-success);
    flex-shrink: 0;
}

/* Yearly Yields Table Colors */
.year-early {
    color: var(--color-success);
}

.year-mid {
    color: var(--color-text);
}

.year-late {
    color: var(--color-text-secondary);
}

.revenue-eeg {
    color: var(--color-success);
}

.revenue-market {
    color: var(--color-warning);
}

/* ============================================
   Cashflow Table (Economics Tab)
   ============================================ */
.cashflow-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    max-height: 450px;
}

.cashflow-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12px;
}

.cashflow-table thead {
    position: sticky;
    top: 0;
    background: var(--color-gray-50);
    z-index: 1;
}

.cashflow-table th {
    padding: var(--space-sm) var(--space-sm);
    text-align: right;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cashflow-table th:first-child {
    text-align: center;
}

.cashflow-table td {
    padding: var(--space-xs) var(--space-sm);
    text-align: right;
    border-bottom: 1px solid var(--color-gray-100);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cashflow-table td:first-child {
    text-align: center;
    font-weight: 500;
}

.cashflow-table tbody tr:nth-child(even) {
    background: var(--color-gray-50);
}

.cashflow-table tbody tr:hover {
    background: rgba(52, 199, 89, 0.05);
}

/* Cashflow Colors */
.cashflow-price {
    color: var(--color-text-secondary);
}

.cashflow-cost {
    color: var(--color-warning) !important;
}

.cashflow-savings-positive,
td.cashflow-savings-positive {
    color: var(--color-success) !important;
}

.cashflow-savings-negative,
td.cashflow-savings-negative {
    color: var(--color-error) !important;
}

.cashflow-feed-in {
    color: var(--color-primary) !important;
}

.cashflow-feed-in-market {
    color: var(--color-warning) !important;
}

.cashflow-operating,
td.cashflow-operating {
    color: var(--color-error) !important;
}

.cashflow-cumulative-positive,
td.cashflow-cumulative-positive {
    color: var(--color-success) !important;
    font-weight: 500;
}

.cashflow-cumulative-negative,
td.cashflow-cumulative-negative {
    color: var(--color-error) !important;
    font-weight: 500;
}

/* Financing Tab Styles */
.investment-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.investment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-sm);
}

.investment-row.total {
    background: var(--color-gray-100);
    font-weight: 600;
    margin-top: var(--space-xs);
}

.investment-row.disabled {
    opacity: 0.4;
    text-decoration: line-through;
}

.investment-label {
    color: var(--color-text-secondary);
}

.investment-row.total .investment-label {
    color: var(--color-text);
}

.investment-value {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.toggle-row {
    display: flex;
    align-items: center;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}

.toggle-label input[type="checkbox"] {
    width: 44px;
    height: 24px;
    appearance: none;
    background: var(--color-gray-300);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.toggle-label input[type="checkbox"]:checked {
    background: var(--color-success);
}

.toggle-label input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--color-bg);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform var(--transition-fast);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-label input[type="checkbox"]:checked::before {
    transform: translateX(20px);
}

.toggle-text {
    color: var(--color-text-secondary);
    font-size: 14px;
}

.input-field.readonly {
    background: var(--color-gray-100);
    color: var(--color-text);
    font-weight: 500;
    cursor: default;
}

/* Financing Cashflow Colors */
.fin-interest {
    color: var(--color-warning);
}

.fin-principal {
    color: var(--color-primary);
}

.fin-payment {
    color: var(--color-text);
    font-weight: 500;
}

.fin-cashflow-positive {
    color: var(--color-success);
    font-weight: 500;
}

.fin-cashflow-negative {
    color: var(--color-error);
    font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .yield-overview-grid {
        grid-template-columns: 1fr;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    .yield-summary {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .card-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
}

/* ============================================
   Projects Management Styles
   ============================================ */

/* Navigation Badge */
.nav-badge {
    background: var(--color-primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto;
}

/* Projects Header */
.projects-subtabs {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-lg);
    background: var(--color-gray-50, #f5f5f5);
    border-radius: var(--radius-md);
    padding: 3px;
    width: fit-content;
}

.projects-subtab {
    padding: 8px 20px;
    background: none;
    border: none;
    border-radius: calc(var(--radius-md) - 2px);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
}

.projects-subtab:hover {
    color: var(--color-text);
}

.projects-subtab.active {
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.customer-project-card {
    position: relative;
}

.customer-project-card .project-card-customer {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-top: var(--space-xs);
}

.customer-project-card .project-card-status {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.customer-project-card .project-card-status.status-new {
    background: var(--color-info-bg, #e8f4fd);
    color: var(--color-info, #1976d2);
}

.customer-project-card .project-card-status.status-read {
    background: var(--color-warning-bg, #fff8e1);
    color: var(--color-warning, #f57c00);
}

.customer-project-card .project-card-status.status-replied {
    background: var(--color-success-bg, #e8f5e9);
    color: var(--color-success, #388e3c);
}

.customer-project-card .project-card-status.status-in_progress {
    background: var(--color-warning-bg, #fff8e1);
    color: var(--color-warning, #f57c00);
}

.customer-project-card .project-card-status.status-completed {
    background: var(--color-success-bg, #e8f5e9);
    color: var(--color-success, #388e3c);
}

.projects-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.projects-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.projects-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.search-box {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    min-width: 250px;
}

.search-box svg {
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    width: 100%;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 14px;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.project-limit-info {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-md);
}

.projects-loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xxl);
    color: var(--color-text-secondary);
}

.projects-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Project Card */
.project-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.project-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.project-card.archived {
    opacity: 0.6;
    background: var(--color-gray-50);
}

.project-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-sm);
}

.project-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    word-break: break-word;
}

.project-card-menu {
    position: relative;
}

.project-card-menu-btn {
    background: transparent;
    border: none;
    padding: var(--space-xs);
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
}

.project-card-menu-btn:hover {
    background: var(--color-gray-100);
}

.project-card-menu-btn svg {
    width: 20px;
    height: 20px;
}

.project-card-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    z-index: 100;
    display: none;
}

.project-card-dropdown.show {
    display: block;
}

.project-card-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: 14px;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.15s;
}

.project-card-dropdown-item:hover {
    background: var(--color-gray-50);
}

.project-card-dropdown-item svg {
    width: 16px;
    height: 16px;
}

.project-card-dropdown-item.danger {
    color: var(--color-error);
}

.project-card-dropdown-item.danger:hover {
    background: rgba(255, 59, 48, 0.1);
}

.project-card-description {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.project-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 4px 8px;
    background: var(--color-gray-100);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
}

.project-meta-tag svg {
    width: 12px;
    height: 12px;
}

.project-meta-tag.highlight {
    background: rgba(0, 122, 255, 0.1);
    color: var(--color-primary);
}

.project-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-gray-100);
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.project-card-date {
    display: flex;
    align-items: center;
    gap: 4px;
}

.project-card-date svg {
    width: 14px;
    height: 14px;
}

/* Projects Empty State */
.projects-empty {
    text-align: center;
    padding: var(--space-xxl);
    color: var(--color-text-secondary);
}

.projects-empty svg {
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-md);
    color: var(--color-gray-300);
}

.projects-empty h3 {
    font-size: 18px;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.projects-empty p {
    margin-bottom: var(--space-lg);
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-md);
}

.modal {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
}

.modal.modal-small {
    max-width: 400px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.modal-close {
    background: transparent;
    border: none;
    padding: var(--space-xs);
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
}

.modal-close:hover {
    background: var(--color-gray-100);
}

.modal-close svg {
    width: 20px;
    height: 20px;
}

.modal-body {
    padding: var(--space-lg);
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary, var(--color-gray-50));
}

/* Form Groups in Modal */
.form-group {
    margin-bottom: var(--space-md);
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #d2d2d7);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 14px;
    color: var(--color-text, #1d1d1f);
    transition: border-color 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-group textarea {
    resize: vertical;
    min-height: 60px;
}

/* Form Row for side-by-side inputs */
.form-row {
    display: flex;
    gap: var(--space-md);
}

.form-row .form-group {
    flex: 1;
    margin-bottom: var(--space-sm);
}

/* Customer Data Section */
.customer-data-section {
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-top: var(--space-md);
    border: 1px solid var(--color-border);
}

.customer-data-section h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.customer-data-section .form-group {
    margin-bottom: var(--space-sm);
}

.customer-data-section .form-group input {
    background: var(--color-bg);
}

/* Project Summary in Modal */
.project-summary {
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-top: var(--space-md);
}

.project-summary h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: var(--space-xs) 0;
}

.summary-row span:first-child {
    color: var(--color-text-secondary);
}

.summary-row span:last-child {
    font-weight: 500;
    color: var(--color-text);
}

/* Danger Button */
.btn-danger {
    background: var(--color-error);
    color: white;
    border: none;
}

.btn-danger:hover {
    background: #E5342B;
}

.text-muted {
    color: var(--color-text-secondary);
    font-size: 13px;
}

/* Economics KPI Grid - Two Column Layout */
.economics-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.economics-kpi-column {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.economics-kpi-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.economics-kpi-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stats-grid.compact {
    gap: var(--space-sm);
    margin-bottom: 0;
}

.stat-card.mini {
    padding: var(--space-md);
    background: var(--color-surface);
}

.stat-card.mini .stat-card-label {
    font-size: 11px;
    margin-bottom: 4px;
}

.stat-card.mini .stat-card-value {
    font-size: 22px;
}

.stat-card.mini .stat-card-unit {
    font-size: 12px;
}

@media (max-width: 768px) {
    .economics-kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-card.mini .stat-card-value {
        font-size: 18px;
    }
}

/* Economics Investment Grid - Two Column Layout */
.economics-investment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.economics-investment-column {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.economics-investment-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.economics-investment-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.economics-investment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border-light, rgba(0,0,0,0.05));
}

.economics-investment-row:last-child {
    border-bottom: none;
}

.economics-investment-row.total {
    background: var(--color-bg);
    margin: var(--space-xs) calc(-1 * var(--space-md));
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border-bottom: none;
}

.economics-investment-label {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.economics-investment-row.total .economics-investment-label {
    font-weight: 600;
    color: var(--color-text);
}

.economics-investment-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.economics-investment-row.total .economics-investment-value {
    font-size: 16px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .economics-investment-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsive Projects */
@media (max-width: 768px) {
    .projects-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .projects-header-left,
    .projects-header-right {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-box {
        min-width: 100%;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Quote Request Modal Styles ───────────── */
.modal--wide {
    max-width: 700px;
}

.quote-summary {
    margin-bottom: var(--space-md);
}

.quote-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.quote-summary-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-gray-50);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.quote-summary-label {
    color: var(--color-text-secondary);
}

.quote-requests-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.quote-request-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.quote-request-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
    font-weight: 500;
}

.quote-request-card-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.inbox-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

.inbox-status-badge--active {
    background: rgba(52, 199, 89, 0.15);
    color: var(--color-accent);
}

.inbox-status-badge--closed {
    background: var(--color-gray-100);
    color: var(--color-text-secondary);
}

.inbox-status-badge--expired {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.inbox-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #e53e3e;
    color: #fff;
    border-radius: 9px;
    font-size: 0.6875rem;
    font-weight: 600;
    margin-left: 4px;
}

.quote-replied-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--space-sm);
}

.quote-replied-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    color: var(--color-text);
    text-align: left;
    transition: border-color 0.15s ease;
}

.quote-replied-item:hover {
    border-color: var(--color-accent);
}

.quote-installer-contact {
    padding: var(--space-md);
    background: rgba(52, 199, 89, 0.06);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
    font-size: 0.875rem;
    line-height: 1.6;
}

.quote-installer-contact a {
    color: var(--color-accent);
    text-decoration: none;
}

.inbox-messages {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.inbox-msg {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    max-width: 85%;
}

.inbox-msg--customer {
    background: rgba(52, 199, 89, 0.08);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.inbox-msg--installer {
    background: var(--color-gray-50);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.inbox-msg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--space-xs);
    font-size: 0.75rem;
}

.inbox-msg-sender {
    font-weight: 600;
}

.inbox-msg-time {
    color: var(--color-text-tertiary);
}

.inbox-msg-body {
    font-size: 0.9375rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ── BOM / Kalkulation ──────────────────────────────────────────── */

.bom-toolbar {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    margin-bottom: var(--space-md);
}

.bom-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 0;
    margin-bottom: var(--space-md);
}

.bom-section legend {
    cursor: pointer;
    user-select: none;
    padding: var(--space-sm) var(--space-md);
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    margin: 0;
}

.bom-section-toggle {
    transition: transform 0.2s;
    display: inline-block;
}

.bom-section.collapsed .bom-section-toggle {
    transform: rotate(-90deg);
}

.bom-section.collapsed .bom-section-body {
    display: none;
}

.bom-section-body {
    padding: 0 var(--space-md) var(--space-md);
}

.bom-subtotal {
    margin-left: auto;
    font-weight: 700;
    color: var(--color-primary);
    font-size: 0.9rem;
}

.bom-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.bom-table th {
    text-align: left;
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 2px solid var(--color-border);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.bom-table td {
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.bom-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: var(--color-bg);
    color: var(--color-text);
}

.bom-input:focus {
    border-color: var(--color-primary);
    outline: none;
}

.bom-input[type="number"] {
    width: 80px;
    text-align: right;
}

.bom-row-total,
.labor-row-total {
    text-align: right;
    font-weight: 500;
    white-space: nowrap;
    min-width: 90px;
}

.bom-remove-btn {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    line-height: 1;
}

.bom-remove-btn:hover {
    background: var(--color-danger, #ff3b30);
    color: #fff;
}

.bom-add-btn {
    display: inline-block;
    margin-top: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: none;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    cursor: pointer;
    font-size: 0.85rem;
}

.bom-add-btn:hover {
    background: var(--color-bg-secondary, #f5f5f5);
    border-color: var(--color-primary);
}

.bom-defaults-btn {
    font-size: 0.85rem;
}

.bom-subtotal-line {
    text-align: right;
    padding: var(--space-sm) 0;
    font-size: 0.95rem;
}

/* Kalkulation Summary */

.calc-summary {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-top: var(--space-md);
}

.calc-summary h3 {
    margin: 0 0 var(--space-md) 0;
    font-size: 1.1rem;
}

.calc-group {
    margin-bottom: var(--space-sm);
}

.calc-group-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.calc-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    font-size: 0.9rem;
}

.calc-line.calc-bold {
    font-weight: 600;
}

.calc-divider {
    border-top: 1px solid var(--color-border);
    margin: var(--space-sm) 0;
}

.calc-divider-double {
    border-top-width: 3px;
    margin: var(--space-md) 0;
}

.calc-total {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    padding: var(--space-sm) 0;
}

.calc-input-inline {
    width: 50px;
    padding: 2px 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    text-align: right;
    background: var(--color-bg);
    color: var(--color-text);
    margin: 0 4px;
}

.calc-input-inline:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* BOM responsive */
@media (max-width: 768px) {
    .bom-table {
        font-size: 0.8rem;
    }
    .bom-input[type="number"] {
        width: 60px;
    }
    .bom-toolbar {
        flex-wrap: wrap;
    }
    .calc-summary {
        padding: var(--space-md);
    }
}

/* ============================================
   Mode Tabs (Privat / Gewerbe Toggle)
   ============================================ */
.mode-tabs {
    display: flex;
    gap: 2px;
    background: var(--color-gray-200);
    border-radius: var(--radius-sm);
    padding: 2px;
    margin: 0 var(--space-md);
}

.mode-tab {
    flex: 1;
    padding: 6px 12px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-sans);
    text-align: center;
}

.mode-tab:hover {
    color: var(--color-text);
}

.mode-tab.active {
    background: var(--color-bg);
    color: var(--color-black);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ── Tooltip ── */
.tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
    margin-left: 4px;
}

.tooltip-wrap .tooltip-icon {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--color-text-tertiary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.tooltip-wrap:hover .tooltip-icon {
    opacity: 1;
}

.tooltip-wrap .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-bg-tertiary, #333);
    color: var(--color-text-on-dark, #fff);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: 260px;
    z-index: 100;
    pointer-events: none;
    transition: opacity 0.15s, visibility 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.tooltip-wrap .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--color-bg-tertiary, #333);
}

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

/* ============================================
   Angebot (Offer) Tab Styles
   ============================================ */

.offer-customer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.offer-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-bg-secondary, #f8f9fa);
    border-radius: 12px;
    border: 1px solid var(--color-border, #e5e7eb);
    transition: border-color 0.2s;
}

.offer-field:hover {
    border-color: var(--color-primary, #3b82f6);
}

.offer-field-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg, #fff);
    border-radius: 10px;
    color: var(--color-text-secondary, #6b7280);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.offer-field-content {
    flex: 1;
    min-width: 0;
}

.offer-field-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary, #6b7280);
    margin-bottom: 2px;
}

.offer-field-value {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text, #111);
    padding: 0;
    outline: none;
    cursor: default;
}

.offer-field-value::placeholder {
    color: var(--color-text-tertiary, #9ca3af);
}

/* Cost Table */
.offer-cost-table {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.offer-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 0.95rem;
}

.offer-cost-value {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.offer-cost-subtotal {
    border-top: 1px solid var(--color-border, #e5e7eb);
    margin-top: 4px;
    padding-top: 12px;
}

.offer-cost-total {
    border-top: 2px solid var(--color-text, #111);
    margin-top: 8px;
    padding-top: 16px;
    padding-bottom: 4px;
}

.offer-total-label {
    font-size: 1.1rem;
    font-weight: 700;
}

.offer-total-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.offer-total-input {
    width: 150px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary, #3b82f6);
    text-align: right;
    padding: 6px 10px;
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    background: var(--color-bg-secondary, #f8f9fa);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.offer-total-input:focus {
    border-color: var(--color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.offer-total-currency {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary, #3b82f6);
}

/* Textarea */
.offer-textarea {
    width: 100%;
    resize: vertical;
    min-height: 100px;
    font-size: 0.95rem;
    line-height: 1.6;
    border-radius: 10px;
    padding: 14px 16px;
}

.offer-input-group .form-input {
    border-radius: 10px;
    padding: 10px 14px;
}

/* Actions */
.offer-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: var(--space-md);
}

.btn-lg {
    padding: 12px 24px;
    font-size: 0.95rem;
    border-radius: 12px;
}

/* Offer Options */
.offer-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.offer-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    padding: 8px 0;
}

.offer-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary, #3b82f6);
    cursor: pointer;
}

/* Offer Confirm Modal */
.offer-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: offerModalFadeIn 0.2s ease;
}

@keyframes offerModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.offer-modal-dialog {
    background: var(--color-bg, #fff);
    border-radius: 16px;
    padding: 28px 32px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    animation: offerModalSlideUp 0.25s ease;
}

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

.offer-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary-light, #eff6ff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .offer-customer-grid {
        grid-template-columns: 1fr;
    }
    .offer-actions {
        flex-direction: column;
    }
    .offer-actions .btn {
        width: 100%;
    }
}

/* ============================================
   Right Status Panel
   ============================================ */
.status-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 240px;
    background: var(--color-bg);
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    z-index: 110;
    transition: transform var(--transition-base);
}

.status-panel.collapsed {
    transform: translateX(100%);
}

.status-panel-toggle {
    position: absolute;
    left: -36px;
    top: 72px;
    width: 36px;
    height: 36px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast), background var(--transition-fast);
    padding: 0;
}

.status-panel-toggle:hover {
    color: var(--color-accent);
    background: var(--color-bg-secondary);
}

/* Adjust main content when panel is open */
.app-layout:has(.status-panel:not(.collapsed)) .app-main {
    margin-right: 240px;
}

.status-panel-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding: 20px 16px;
}

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

.status-panel-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.status-type-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: var(--color-gray-200);
    color: var(--color-text-secondary);
}

.status-type-badge.privat {
    background: #e0f2fe;
    color: #0369a1;
}

.status-type-badge.gewerbe {
    background: var(--color-accent-light);
    color: #9a3412;
}

.status-panel-project {
    padding: 10px 12px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.status-project-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-customer-name {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-customer-name:empty {
    display: none;
}

/* Checklist */
.status-checklist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.status-item:hover {
    background: var(--color-bg-secondary);
}

.status-item.active {
    background: var(--color-bg-secondary);
}

.status-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--color-gray-300);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.status-item.done .status-check {
    background: var(--color-success);
    border-color: var(--color-success);
}

.status-item.done .status-check::after {
    content: '';
    display: block;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}

.status-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
}

.status-item.done .status-label {
    color: var(--color-text-secondary);
}

/* Progress bar */
.status-panel-progress {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.status-progress-bar {
    height: 6px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 6px;
}

.status-progress-fill {
    height: 100%;
    background: var(--color-success);
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
    width: 0%;
}

.status-progress-text {
    font-size: 11px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* Responsive: overlay drawer on small screens */
@media (max-width: 1024px) {
    .status-panel {
        width: 260px;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        z-index: 200;
    }
    .status-panel.collapsed {
        transform: translateX(100%);
        box-shadow: none;
    }
    .app-layout:has(.status-panel:not(.collapsed)) .app-main {
        margin-right: 0;
    }
    .status-panel-toggle {
        z-index: 201;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .status-type-badge.privat {
        background: rgba(3, 105, 161, 0.2);
        color: #38bdf8;
    }
    .status-type-badge.gewerbe {
        background: rgba(255, 149, 0, 0.2);
        color: #FF9500;
    }
}

/* ============================================
   Funnel Stepper & Navigation
   ============================================ */

/* Stepper Container */
.funnel-stepper { padding: 12px 20px; border-bottom: 1px solid var(--border-color); background: var(--bg-primary); }
.funnel-stepper-inner { display: flex; align-items: center; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto; }
.funnel-stepper-mobile { display: none; }

/* Step Item */
.funnel-step { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: all 0.15s; white-space: nowrap; }
.funnel-step:hover:not(.disabled) { background: var(--bg-secondary); }
.funnel-step-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--bg-secondary); color: var(--text-secondary); border: 2px solid var(--border-color); flex-shrink: 0; }
.funnel-step-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }

/* Step States */
.funnel-step.active .funnel-step-num { background: #007AFF; color: #fff; border-color: #007AFF; }
.funnel-step.active .funnel-step-label { color: var(--text-primary); font-weight: 600; }
.funnel-step.completed .funnel-step-num { background: #34C759; color: #fff; border-color: #34C759; }
.funnel-step.completed .funnel-step-label { color: var(--text-secondary); }
.funnel-step.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.funnel-step.locked .funnel-step-num { background: var(--bg-secondary); color: var(--text-tertiary); }

/* Step Connecting Lines */
.funnel-step-line { flex: 1; height: 2px; background: var(--border-color); min-width: 12px; max-width: 40px; }
.funnel-step-line.completed { background: #34C759; }

/* View Toggle: Geführt / Profi */
.view-toggle { display: inline-flex; background: var(--color-gray-100, #f3f4f6); border-radius: 8px; padding: 3px; gap: 2px; }
.view-toggle-btn { padding: 6px 14px; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; background: transparent; color: var(--color-text-secondary); transition: all .15s; }
.view-toggle-btn.active { background: var(--color-white, #fff); color: var(--color-text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
@media (prefers-color-scheme: dark) {
    .view-toggle { background: #2c2c2e; }
    .view-toggle-btn.active { background: #3a3a3c; color: #f5f5f7; }
}

/* Navigation Buttons — sticky am unteren Rand */
.funnel-nav-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-primary); border-top: 1px solid var(--border-color); z-index: 102; box-shadow: 0 -2px 12px rgba(0,0,0,0.08); }
.funnel-mode .app-content { padding-bottom: 180px !important; }
body.funnel-active footer { margin-bottom: 60px !important; bottom: 10px !important; }
.funnel-btn { padding: 12px 28px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; }
.funnel-btn-next { background: #007AFF; color: #fff; border: 1.5px solid #007AFF; }
.funnel-btn-next:hover:not(.disabled) { background: #0056CC; border-color: #0056CC; }
.funnel-btn-next.disabled { opacity: 0.35; cursor: not-allowed; }
.funnel-btn-back { background: #fff; color: #007AFF; border: 1.5px solid #007AFF; }
.funnel-btn-back:hover { background: rgba(0, 122, 255, 0.08); }

/* Registration Gate */
.funnel-register-gate { background: linear-gradient(135deg, #f0f5ff, #e0e7ff); border: 1px solid #c7d2fe; border-radius: 16px; padding: 32px; text-align: center; margin: 24px 0; }
.funnel-register-gate h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px; color: #1e293b; }
.funnel-register-gate p { color: #4338ca; margin: 0 0 20px; font-size: 0.95rem; }
.funnel-register-gate .funnel-gate-btn { display: inline-block; background: #007AFF; color: #fff; padding: 14px 32px; border-radius: 12px; font-weight: 700; font-size: 16px; text-decoration: none; transition: background 0.15s; }
.funnel-register-gate .funnel-gate-btn:hover { background: #0056CC; }
.funnel-register-gate .funnel-gate-sub { margin-top: 10px; font-size: 13px; color: #6366f1; }

/* Sidebar Funnel States */
.nav-item.funnel-disabled { opacity: 0.3; pointer-events: none; }
.nav-item.funnel-hidden { display: none !important; }
.nav-item.funnel-locked { opacity: 0.5; }

/* Funnel: Sidebar weg, volle Breite */
.funnel-mode .app-sidebar { display: none !important; }
.funnel-mode .app-main { margin-left: 0 !important; }
.funnel-mode .app-content { margin-left: 0 !important; max-width: 100% !important; width: 100% !important; }
.funnel-mode .app-layout { background: var(--color-bg); }
.funnel-mode #quote-request-btn,
.funnel-mode #quote-request-btn + span,
.funnel-mode #save-project-btn,
.funnel-mode #export-pdf-btn { display: none !important; }
.funnel-mode .tab-content .card { max-width: 900px; margin-left: auto; margin-right: auto; }
.funnel-mode .input-field { text-align: right; }
.funnel-mode .toggle-group, .funnel-mode .toggle-info { text-align: left; padding-left: 0; margin-left: 0; }
.funnel-mode .stat-card { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px !important; }
.funnel-mode .stat-card-label { text-align: left; font-size: 13px; margin-bottom: 0 !important; color: var(--color-text-secondary) !important; text-transform: none !important; letter-spacing: 0 !important; }
.funnel-mode .stat-card-value { text-align: right; font-size: 15px !important; font-weight: 600 !important; margin: 0 !important; color: var(--color-text) !important; }
.funnel-mode .tab-content .card:has(.cashflow-table) { max-width: 100%; }
.funnel-mode #tab-results .card { max-width: 100%; }
.funnel-mode #tab-economics .card { max-width: 100%; }

/* Mobile */
@media (max-width: 1024px) {
    .funnel-stepper-inner { display: none; }
    .funnel-stepper-mobile { display: block; text-align: center; }
    .funnel-mobile-label { font-size: 13px; font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 6px; }
    .funnel-mobile-bar { height: 4px; background: var(--border-color); border-radius: 2px; overflow: hidden; }
    .funnel-mobile-fill { height: 100%; background: #007AFF; border-radius: 2px; transition: width 0.3s; }
    .funnel-nav-bar { padding: 10px 16px; }
    .funnel-btn { padding: 10px 20px; font-size: 14px; }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .funnel-register-gate { background: linear-gradient(135deg, #1e1b4b, #312e81); border-color: #4338ca; }
    .funnel-register-gate h3 { color: #fff; }
    .funnel-register-gate p { color: #c7d2fe; }
}