/* Custom CSS for FBA Calculator */

:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --info-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

/* Dark mode styles - comprehensive */
body.dark {
    background: #000000;
    color: #ffffff;
}

/* Ensure text visibility in dark mode */
.dark .text-gray-500 {
    color: #9ca3af !important;
}

.dark .text-gray-600 {
    color: #9ca3af !important;
}

.dark .text-gray-700 {
    color: #d1d5db !important;
}

.dark .text-gray-800 {
    color: #e5e7eb !important;
}

.dark .text-gray-900 {
    color: #f3f4f6 !important;
}

/* Fix checkbox and radio button styles */
input[type="checkbox"],
input[type="radio"] {
    background-color: white;
    border-color: #d1d5db;
}

.dark input[type="checkbox"],
.dark input[type="radio"] {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

.dark input[type="checkbox"]:checked,
.dark input[type="radio"]:checked {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

/* Fix slider track colors for light mode */
body:not(.dark) .slider-track-wrapper {
    background: linear-gradient(to right, #e5e7eb 0%, #d1d5db 100%);
}

body:not(.dark) .slider-track-fill {
    background: linear-gradient(to right, #8b5cf6 0%, #a855f7 100%);
}

/* Fix slider thumb for light mode */
body:not(.dark) .custom-slider::-webkit-slider-thumb {
    background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
    border: 1px solid #d1d5db;
}

body:not(.dark) .custom-slider::-moz-range-thumb {
    background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
    border: 1px solid #d1d5db;
}

/* Result values with color coding in dark mode */
body.dark .result-positive {
    color: #10b981 !important;
    font-weight: 600;
}

body.dark .result-negative {
    color: #ef4444 !important;
    font-weight: 600;
}

/* Logo visibility in both modes */
body.dark #header img {
    filter: brightness(1.2) contrast(1.1);
    background: transparent !important;
}

body.light #header img {
    filter: brightness(0.9) contrast(1.2);
    background: transparent !important;
}

/* Canvas anti-aliasing for smooth charts */
canvas {
    image-rendering: optimizeQuality;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    shape-rendering: geometricPrecision;
}

/* Beautiful Custom Slider Design */
.slider-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    background: transparent;
}

.slider-track-wrapper {
    flex: 1;
    position: relative;
    height: 14px;
    display: flex;
    align-items: center;
}

/* Base track styling */
.slider-track-wrapper::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0.05) 0%, 
        rgba(0, 0, 0, 0) 50%, 
        rgba(255, 255, 255, 0.05) 100%);
}

body.dark .slider-track-wrapper::before {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 
                inset 0 -1px 2px rgba(255, 255, 255, 0.05);
}

body.light .slider-track-wrapper::before,
body:not(.dark) .slider-track-wrapper::before {
    background: linear-gradient(135deg, #f3f4f6 0%, #ffffff 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Filled portion of the track */
.slider-track-fill {
    position: absolute;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%);
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4),
                inset 0 1px 2px rgba(255, 255, 255, 0.2);
    transition: width 0.1s ease-out;
    pointer-events: none;
}

body.dark .slider-track-fill {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4),
                0 2px 8px rgba(168, 85, 247, 0.3),
                inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

/* Custom slider input */
.custom-slider {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    width: 100%;
    height: 14px;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}

.custom-slider:focus {
    outline: none;
}

/* Slider thumb styling */
.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2),
                0 8px 16px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(168, 85, 247, 0.2),
                inset 0 1px 2px rgba(255, 255, 255, 0.9);
    cursor: grab;
    transition: all 0.2s ease;
    position: relative;
    z-index: 3;
}

body.dark .custom-slider::-webkit-slider-thumb {
    background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4),
                0 8px 20px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(168, 85, 247, 0.3),
                0 0 20px rgba(168, 85, 247, 0.2),
                inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.custom-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2),
                0 12px 24px rgba(0, 0, 0, 0.2),
                0 0 0 2px rgba(168, 85, 247, 0.3),
                0 0 20px rgba(168, 85, 247, 0.3);
}

.custom-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.05);
}

/* Firefox */
.custom-slider::-moz-range-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2),
                0 8px 16px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(168, 85, 247, 0.2),
                inset 0 1px 2px rgba(255, 255, 255, 0.9);
    cursor: grab;
    transition: all 0.2s ease;
    border: none;
}

body.dark .custom-slider::-moz-range-thumb {
    background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4),
                0 8px 20px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(168, 85, 247, 0.3),
                0 0 20px rgba(168, 85, 247, 0.2),
                inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.custom-slider::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2),
                0 12px 24px rgba(0, 0, 0, 0.2),
                0 0 0 2px rgba(168, 85, 247, 0.3),
                0 0 20px rgba(168, 85, 247, 0.3);
}

.custom-slider::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.05);
}

/* Value display */
.slider-value-display {
    position: relative;
    min-width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3),
                inset 0 1px 2px rgba(255, 255, 255, 0.2);
    padding: 0 12px;
}

body.dark .slider-value-display {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4),
                0 0 24px rgba(168, 85, 247, 0.2),
                inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.slider-value-text {
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Add subtle animation on value change */
@keyframes valueChange {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.slider-value-display:has(.slider-value-text:not(:empty)) {
    animation: valueChange 0.2s ease-out;
}

body.dark #header {
    background: rgba(0, 0, 0, 0.95);
    border-color: #1a1a1a;
}

body.dark #app-title {
    color: #ffffff;
}

body.dark #theme-toggle,
body.dark #mobile-menu-btn {
    color: #9ca3af;
}

body.dark #theme-toggle:hover,
body.dark #mobile-menu-btn:hover {
    background: #1a1a1a;
}

body.dark #tab-navigation {
    background: rgba(0, 0, 0, 0.5);
    border-color: #1a1a1a;
}

body.dark .tab-btn {
    color: #9ca3af;
}

body.dark .tab-btn:hover {
    color: #ffffff;
}

body.dark .tab-btn.active {
    background: var(--info-gradient);
    color: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.3);
}

body.dark #warnings-container,
body.dark #kpi-dashboard,
body.dark #current-step-header,
body.dark #input-fields-container,
body.dark #cashflow-tab > div,
body.dark #analysis-tab > div,
body.dark #results-section > div {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    border-color: rgba(26, 26, 26, 0.5);
}

body.dark .footer-info {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4));
}

body.dark input,
body.dark select,
body.dark textarea {
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: #1a1a1a;
    color: #ffffff !important;
}

body.dark input::placeholder,
body.dark textarea::placeholder {
    color: #9ca3af !important;
}

/* Fix for number inputs in dark mode */
body.dark input[type="number"] {
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

body.dark input[type="text"] {
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

/* Fix select dropdown in dark mode */
body.dark select option {
    background: #1a1a1a;
    color: #ffffff;
}

body.dark .action-btn-secondary {
    background: #374151;
    color: #ffffff;
}

body.dark .action-btn-secondary:hover {
    background: #4b5563;
}

body.dark .action-btn-danger {
    background: rgba(127, 29, 29, 0.2);
    color: #f87171;
    border: 1px solid rgba(127, 29, 29, 0.5);
}

body.dark .action-btn-danger:hover {
    background: rgba(127, 29, 29, 0.3);
}

/* Light mode styles - comprehensive fixes */
body.light {
    background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 50%, #f8f9fa 100%);
    color: #1f2937 !important;
}

/* Ensure all text is readable in light mode */
body:not(.dark) h1, 
body:not(.dark) h2, 
body:not(.dark) h3, 
body:not(.dark) h4, 
body:not(.dark) h5, 
body:not(.dark) h6 {
    color: #111827 !important;
}

/* Be selective with text colors to not break gradients and special elements */
body:not(.dark) p:not([class*="text-"]),
body:not(.dark) span:not([class*="text-"]):not([class*="bg-gradient"]),
body:not(.dark) label {
    color: #374151;
}

/* KPI specific fixes for light mode */
body:not(.dark) #margin-display,
body:not(.dark) #profit-display,
body:not(.dark) #roi-display,
body:not(.dark) #breakeven-display {
    color: #111827 !important;
}

/* Input fields in light mode */
body:not(.dark) input,
body:not(.dark) select,
body:not(.dark) textarea {
    color: #111827 !important;
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
}

body:not(.dark) input::placeholder,
body:not(.dark) textarea::placeholder {
    color: #9ca3af !important;
}

/* Fix ROI circle and text visibility in light mode */
body.light #kostenstrukturChart-container .w-\[88px\] {
    background: linear-gradient(135deg, #374151, #1f2937) !important;
}

/* ROI value number */
body.light #center-roi-value {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    font-weight: 300;
}

/* Percentage sign */
body.light .text-\[17px\] {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ROI label */
body.light .text-\[8\.5px\] {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Alternative selectors for better targeting */
body.light #kostenstrukturChart-container span[id="center-roi-value"] {
    color: #ffffff !important;
}

body.light #kostenstrukturChart-container p:contains("ROI"),
body.light #kostenstrukturChart-container .uppercase {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.light #header {
    background: rgba(255, 255, 255, 0.95);
    border-color: #e5e7eb;
}

body.light #app-title {
    color: #1f2937;
    font-weight: 700;
}

body.light #theme-toggle,
body.light #mobile-menu-btn {
    color: #4b5563;
}

body.light #theme-toggle:hover,
body.light #mobile-menu-btn:hover {
    background: #f3f4f6;
}

body.light #tab-navigation {
    background: #ffffff;
    border-color: #e5e7eb;
}

body.light .tab-btn {
    color: #4b5563;
}

body.light .tab-btn:hover {
    color: #1f2937;
}

body.light .tab-btn.active {
    background: var(--info-gradient);
    color: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.3);
}

body.light #warnings-container,
body.light #kpi-dashboard,
body.light #current-step-header,
body.light #input-fields-container,
body.light #cashflow-tab > div,
body.light #analysis-tab > div,
body.light #results-section > div {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-color: rgba(229, 231, 235, 0.8);
}

/* Ensure all text in light mode is visible */
body.light p, 
body.light span:not(.text-white):not(.roi-value),
body.light div:not(.bg-gradient-to-r) {
    color: inherit;
}

body.light .text-gray-400 {
    color: #6b7280 !important;
}

body.light .text-gray-600 {
    color: #4b5563 !important;
}

/* Labels in light mode should be clearly visible */
body.light label {
    color: #1f2937 !important;
    font-weight: 500;
}

/* Result values with color coding */
body.light .result-positive {
    color: #10b981 !important;
    font-weight: 600;
}

body.light .result-negative {
    color: #ef4444 !important;
    font-weight: 600;
}

body.light #kpi-margin,
body.light #kpi-profit {
    /* Keep their special colors */
}

body.light .footer-info {
    background: linear-gradient(to right, #f9fafb, #f3f4f6);
}

body.light input,
body.light select,
body.light textarea {
    background: rgba(255, 255, 255, 0.9);
    border-color: #d1d5db;
    color: #1f2937;
}

body.light input::placeholder,
body.light textarea::placeholder {
    color: #9ca3af;
}

body.light .action-btn-secondary {
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #374151 !important;
}

body.light .action-btn-secondary:hover {
    background: #f9fafb;
}

body.light .action-btn-danger {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

body.light .action-btn-danger:hover {
    background: #fee2e2;
}

/* Ensure all text elements in light mode are properly colored */
body.light button {
    color: inherit;
}

body.light #prev-btn,
body.light #next-btn {
    color: #374151 !important;
}

body.light #prev-btn span,
body.light #next-btn span {
    color: #374151 !important;
}
body.light .text-gray-300 {
    color: #6b7280 !important;
}

body.light .text-gray-500 {
    color: #6b7280 !important;
}

body.light .text-gray-700 {
    color: #374151 !important;
}

body.light .text-gray-900 {
    color: #111827 !important;
}

/* Button text in light mode */
body.light button:not(.tab-btn):not(.text-white) {
    color: #1f2937 !important;
}

/* Span and div text that should be dark in light mode */
body.light span:not([class*="text-"]):not(.roi-value) {
    color: #374151 !important;
}

/* Paragraph text in light mode */
body.light p:not([class*="text-"]) {
    color: #4b5563 !important;
}

/* Strong and bold text in light mode */
body.light strong,
body.light b {
    color: #111827 !important;
}

/* Links in light mode */
body.light a:not(.tab-btn) {
    color: #3b82f6 !important;
}

body.light a:hover:not(.tab-btn) {
    color: #2563eb !important;
}

/* ROI Progress Ring Animation */
@keyframes roiRingFill {
    from {
        stroke-dashoffset: 226;
    }
}

#roi-progress-ring {
    animation: roiRingFill 1s ease-out forwards;
    filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.4));
}

/* Chart container fixes */
canvas {
    max-width: 100%;
    height: auto !important;
    position: relative;
    z-index: 10;
}

/* Chart.js tooltip z-index fix */
.chartjs-tooltip {
    z-index: 9999 !important;
    position: absolute !important;
}

#kostenstrukturChart {
    position: relative;
    z-index: 20;
}

#cashflowChart {
    height: 280px !important;
    margin-top: 10px;
}

#kostenstrukturChart {
    height: 200px !important;
    width: 200px !important;
    margin: 0 auto;
    filter: drop-shadow(0 4px 20px rgba(6, 182, 212, 0.15));
}

#miniKostenChart {
    max-height: 65px !important;
    max-width: 65px !important;
}

/* Chart animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.chart-container {
    animation: fadeIn 0.5s ease-out;
}

/* Glassmorphism for chart overlays */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Step gradients */
.step-gradient-1 {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

.step-gradient-2 {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
}

.step-gradient-3 {
    background: linear-gradient(135deg, #34d399, #10b981);
}

.step-gradient-4 {
    background: linear-gradient(135deg, #fb923c, #f97316);
}

.step-gradient-5 {
    background: linear-gradient(135deg, #f472b6, #ec4899);
}

/* Better visibility for labels in dark mode */
body.dark label {
    color: #e5e7eb !important;
}

/* Better visibility for labels in light mode */
body.light label {
    color: #1f2937 !important;
    font-weight: 500;
}

body.light .text-sm:not(.text-white):not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-yellow"]):not([class*="text-blue"]):not([class*="text-purple"]):not([class*="text-cyan"]):not([class*="text-amber"]):not([class*="text-green"]):not([class*="text-orange"]) {
    color: #374151 !important;
}

body.light .text-xs:not(.text-white) {
    color: #6b7280 !important;
}

body.light h1, body.light h2, body.light h3, body.light h4, body.light h5, body.light h6 {
    color: #111827 !important;
}

body.light #step-title {
    color: #111827 !important;
    font-weight: 600;
}

body.light #step-subtitle {
    color: #6b7280 !important;
}

/* Form label specific styles for light mode */
body.light .form-label,
body.light .input-label,
body.light label[for] {
    color: #111827 !important;
    font-weight: 500;
}

/* Input help text in light mode */
body.light .help-text,
body.light .field-description {
    color: #6b7280 !important;
}

/* Ensure form group labels are visible */
body.light .space-y-6 label,
body.light .space-y-4 label,
body.light .space-y-3 label {
    color: #1f2937 !important;
}

/* Fix tooltip text in light mode */
body.light .cursor-help,
body.light [data-tooltip] {
    color: #4b5563 !important;
}

/* Ensure text in input fields is always visible */
body.dark input:not([type="checkbox"]) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Ensure text in light mode input fields is always visible */
body.light input:not([type="checkbox"]) {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

/* Select dropdown text in light mode */
body.light select {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

/* Textarea text in light mode */
body.light textarea {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

/* Results section - Light mode specific text colors */
body.light #results-section label,
body.light #results-section .text-sm:not(.profit-positive):not(.profit-negative):not(.text-emerald-500):not(.text-red-500):not(.text-purple-500):not(.text-amber-500):not(.text-blue-500),
body.light #results-section span:not(.profit-positive):not(.profit-negative):not(.text-emerald-500):not(.text-red-500):not(.text-purple-500):not(.text-amber-500):not(.text-blue-500) {
    color: #374151 !important;
}

/* Ensure all text in results table is visible in light mode */
body.light #results-section td,
body.light #results-section th,
body.light #results-section h3 {
    color: #1f2937 !important;
}

/* Important metrics section in light mode */
body.light #important-metrics label,
body.light #important-metrics .text-sm {
    color: #4b5563 !important;
}

/* Kostendetails section in light mode */
body.light #kostendetails label,
body.light #kostendetails .text-sm:not(.profit-positive):not(.profit-negative):not(.text-emerald-500):not(.text-red-500):not(.text-purple-500):not(.text-amber-500):not(.text-blue-500) {
    color: #4b5563 !important;
}

/* Profit/Loss color coding */
.profit-positive {
    color: #059669 !important; /* Dunkleres Grün für Light Mode */
    font-weight: 600;
}

.profit-negative {
    color: #dc2626 !important; /* Dunkleres Rot für Light Mode */
    font-weight: 600;
}

body.dark .profit-positive {
    color: #34d399 !important; /* Helleres Grün für Dark Mode */
}

body.dark .profit-negative {
    color: #f87171 !important; /* Helleres Rot für Dark Mode */
}

/* Ensure profit colors work in both themes */
body.light .profit-positive {
    color: #059669 !important;
}

body.light .profit-negative {
    color: #dc2626 !important;
}

/* Fix for Firefox */
body.dark input:-moz-placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

/* Warning types */
.warning-critical {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

body.dark .warning-critical {
    background: rgba(127, 29, 29, 0.2);
    color: #f87171;
}

.warning-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

body.dark .warning-warning {
    background: rgba(120, 53, 15, 0.2);
    color: #fbbf24;
}

.warning-info {
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
}

body.dark .warning-info {
    background: rgba(8, 145, 178, 0.2);
    color: #22d3ee;
}

/* Margin colors */
.margin-good {
    color: #10b981;
}

.margin-warning {
    color: #f59e0b;
}

.margin-critical {
    color: #ef4444;
}

/* Animations */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Smooth ping animation for margin indicator */
@keyframes smoothPing {
    0% {
        transform: scale(1);
        opacity: 0.75;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.animate-ping {
    animation: smoothPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Ensure the dot is vertically centered with the text */
#margin-warning {
    position: relative;
    top: -2px;
}

/* Margin indicator colors */
.margin-indicator-green {
    background-color: rgb(34 197 94);
}

.margin-indicator-yellow {
    background-color: rgb(250 204 21);
}

.margin-indicator-red {
    background-color: rgb(239 68 68);
}

/* Slider styling moved to custom slider section above */

/* Tooltip */
.tooltip {
    position: absolute;
    z-index: 100;
    background: #1f2937;
    color: #ffffff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    max-width: 320px;
    font-size: 14px;
}

body.light .tooltip {
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    #cashflowChart {
        height: 240px !important;
    }
    
    #roi-circle-value {
        font-size: 1rem !important;
    }
    
    #breakeven-marker {
        font-size: 10px !important;
    }
}

/* Print styles - Comprehensive PDF Export with EVERYTHING visible */
@media print {
    /* Reset page margins for better PDF layout */
    @page {
        margin: 15mm;
        size: A4;
    }
    
    /* Base styles for print - FORCE everything visible */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    
    /* Override hiding for main content areas */
    div:not(#theme-toggle):not(#print-button):not(#mobile-menu-btn):not(#prev-btn):not(#next-btn):not(#step-dots):not(.onboarding-overlay) {
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure flex and grid containers display properly */
    .flex:not(#theme-toggle):not(#print-button):not(#mobile-menu-btn):not(#prev-btn):not(#next-btn) {
        display: flex !important;
    }
    
    .grid:not(.hidden) {
        display: grid !important;
    }
    
    .block {
        display: block !important;
    }
    
    .inline-block {
        display: inline-block !important;
    }
    
    .inline {
        display: inline !important;
    }
    
    body {
        background: white !important;
        color: #1f2937 !important;
        font-size: 11pt !important;
        line-height: 1.5 !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    }
    
    /* Show header with branding */
    #header {
        display: flex !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        padding: 20px !important;
        margin-bottom: 20px !important;
        border-radius: 8px !important;
    }
    
    #header * {
        color: white !important;
    }
    
    /* Hide navigation elements but keep content */
    #theme-toggle,
    #print-button,
    #mobile-menu-btn,
    #tab-navigation,
    #prev-btn,
    #next-btn,
    #step-dots,
    .onboarding-overlay {
        display: none !important;
    }
    
    /* Force ALL hidden content to be visible - ONLY IN PRINT MODE */
    .hidden,
    [class*="hidden"],
    #cashflow-tab,
    #analysis-tab,
    #results-section,
    #warnings-container,
    #kpi-dashboard,
    #current-step-header,
    #input-fields-container,
    #step-fields,
    #margin-warning,
    #season-indicator,
    #q4-badge {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
        transform: none !important;
        max-height: none !important;
    }
    
    /* Mobile menu should not show */
    #mobile-menu {
        display: none !important;
    }
    
    /* Grid layouts for results */
    #results-section,
    #analysis-tab {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Show all tab contents with proper spacing */
    #calculator-tab {
        display: block !important;
        page-break-after: always !important;
        padding: 20px 0 !important;
    }
    
    #cashflow-tab {
        display: block !important;
        page-break-before: always !important;
        page-break-after: always !important;
        padding: 20px 0 !important;
    }
    
    #analysis-tab {
        display: block !important;
        page-break-before: always !important;
        padding: 20px 0 !important;
    }
    
    /* Hidden text spans should be visible */
    .hidden.sm\\:inline,
    .hidden.sm\\:block,
    span.hidden {
        display: inline !important;
    }
    
    /* Ensure all sections are visible */
    #warnings-container,
    #kpi-dashboard,
    #current-step-header,
    #input-fields-container,
    #results-section,
    .tab-content {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: #f9fafb !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    /* KPI Dashboard styling */
    #kpi-dashboard {
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
        border: 2px solid #0ea5e9 !important;
    }
    
    /* Ensure charts are visible and sized properly */
    canvas {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid !important;
        margin: 10px auto !important;
    }
    
    #cashflowChart {
        max-height: 400px !important;
    }
    
    #kostenstrukturChart {
        max-height: 300px !important;
        max-width: 300px !important;
    }
    
    #miniKostenChart {
        max-height: 80px !important;
        max-width: 80px !important;
    }
    
    /* Make SVG icons visible */
    svg, [data-lucide] {
        display: inline-block !important;
        width: 20px !important;
        height: 20px !important;
        fill: currentColor !important;
        stroke: currentColor !important;
    }
    
    /* ROI Progress Ring */
    #roi-progress-container {
        display: block !important;
        page-break-inside: avoid !important;
    }
    
    /* Ensure gradients and colors are preserved */
    .bg-gradient-to-r,
    .bg-gradient-to-br,
    .from-emerald-400,
    .to-emerald-600,
    .from-red-400,
    .to-red-600,
    .from-amber-400,
    .to-amber-600,
    .from-purple-400,
    .to-purple-600,
    .from-blue-400,
    .to-blue-600 {
        background-image: var(--tw-gradient-stops) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Form elements styling */
    input, select, textarea {
        background: white !important;
        border: 1px solid #d1d5db !important;
        color: #1f2937 !important;
        padding: 8px !important;
        border-radius: 4px !important;
    }
    
    /* Disabled inputs should be visible */
    input:disabled {
        background: #f3f4f6 !important;
        opacity: 0.7 !important;
    }
    
    /* Slider styling for print */
    .custom-slider {
        display: none !important;
    }
    
    .slider-container {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .slider-value-display {
        display: inline-block !important;
        background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%) !important;
        color: white !important;
        padding: 5px 10px !important;
        border-radius: 6px !important;
    }
    
    /* Replace slider with text value */
    .slider-track-wrapper::after {
        content: attr(data-value) "%" !important;
        display: inline-block !important;
        padding: 5px 10px !important;
        background: #f3f4f6 !important;
        border: 1px solid #d1d5db !important;
        border-radius: 4px !important;
        color: #1f2937 !important;
    }
    
    /* Tables and data display */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        page-break-inside: avoid !important;
    }
    
    th, td {
        border: 1px solid #e5e7eb !important;
        padding: 8px !important;
        text-align: left !important;
    }
    
    th {
        background: #f9fafb !important;
        font-weight: 600 !important;
    }
    
    /* Warning messages */
    #warnings-container .warning-card {
        background: #fef3c7 !important;
        border: 1px solid #fbbf24 !important;
        padding: 10px !important;
        border-radius: 6px !important;
        margin-bottom: 10px !important;
    }
    
    /* Margin indicator dots */
    .margin-indicator-green,
    .margin-indicator-yellow,
    .margin-indicator-red {
        display: inline-block !important;
        width: 12px !important;
        height: 12px !important;
        border-radius: 50% !important;
        margin-right: 5px !important;
    }
    
    .margin-indicator-green {
        background: #10b981 !important;
    }
    
    .margin-indicator-yellow {
        background: #f59e0b !important;
    }
    
    .margin-indicator-red {
        background: #ef4444 !important;
    }
    
    /* Footer */
    .footer-info {
        display: block !important;
        background: #f9fafb !important;
        border-top: 2px solid #e5e7eb !important;
        padding: 15px !important;
        margin-top: 30px !important;
        text-align: center !important;
    }
    
    /* Page breaks */
    .page-break {
        page-break-after: always !important;
    }
    
    .no-break {
        page-break-inside: avoid !important;
    }
    
    /* Ensure all text is black for readability */
    p, span, div, label, h1, h2, h3, h4, h5, h6 {
        color: #1f2937 !important;
    }
    
    /* Special text colors that should be preserved */
    .text-emerald-500, .text-emerald-600, .profit-positive {
        color: #059669 !important;
    }
    
    .text-red-500, .text-red-600, .profit-negative {
        color: #dc2626 !important;
    }
    
    .text-amber-500, .text-amber-600 {
        color: #d97706 !important;
    }
    
    .text-blue-500, .text-blue-600 {
        color: #2563eb !important;
    }
    
    .text-purple-500, .text-purple-600 {
        color: #7c3aed !important;
    }
    
    /* Hide unnecessary UI elements */
    button:not(.print-show) {
        display: none !important;
    }
    
    /* Ensure step fields are all visible */
    #step-fields > div {
        display: block !important;
        margin-bottom: 15px !important;
    }
    
    /* Results section styling */
    #results-section {
        background: white !important;
        border: 2px solid #d1d5db !important;
        padding: 20px !important;
        border-radius: 8px !important;
    }
    
    /* Important metrics section */
    #important-metrics {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin: 15px 0 !important;
    }
    
    #important-metrics > div {
        background: #f0f9ff !important;
        border: 1px solid #0ea5e9 !important;
        padding: 10px !important;
        border-radius: 6px !important;
    }
    
    /* Cost details section */
    #kostendetails {
        margin-top: 20px !important;
        padding-top: 20px !important;
        border-top: 2px solid #e5e7eb !important;
    }
    
    /* Ensure logo is visible */
    #header img {
        display: block !important;
        max-height: 40px !important;
        filter: brightness(0) invert(1) !important;
    }
}

/* Loading animation */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Focus styles */
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
    ring: 2px;
    ring-color: #3b82f6;
    ring-offset: 2px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

body.dark ::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

body.dark ::-webkit-scrollbar-thumb {
    background: #4b5563;
}

body.dark ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}