/* style-code.css */
* {
    box-sizing: border-box;
}

:root {
    --primary-color: #0A2342; /* Deep Blue */
    --secondary-color: #5F9EA0; /* Cadet Blue/Teal */
    --accent-purple: #6f42c1; /* Example Accent */
    --success-color: #28a745; /* Green */
    --danger-color: #dc3545;  /* Red */
    --text-color: #3a3a3a; /* Darker Gray */
    --text-light: #6c757d; /* Lighter Gray */
    --light-text-color: #FFFFFF;
    --background-color: #FFFFFF;
    --page-background: #f8f9fa; /* Light gray page background */
    --border-color: #dee2e6;
    --card-border-radius: 0.75rem; /* More rounded corners */
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    --font-family: 'Lato', sans-serif;
    --page-width: 100%; /* Changed to 100% for responsive design */
    --page-height: auto; /* Changed to auto for responsive design */
    --page-padding: 40px; /* Adjusted for better scaling */

    /* Sector-specific colors */
    --sales-color: #39b54a;
    --operations-color: #328cae;
    --support-color: #ff36a8;
    --logistics-color: #bc7c46;
    --administration-color: #ffd800;
}

/* Add responsive viewport scaling */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Allow normal scrolling */
    position: relative; /* Remove fixed position */
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--page-background);
    overflow: auto; /* Allow normal scrolling */
    -webkit-overflow-scrolling: touch;
}

/* Make presentation container responsive */
.presentation-container {
    width: 100%; /* Changed from auto */
    min-height: 100%; /* Changed from height: 100% */
    margin: 0; /* Remove margin */
    background-color: transparent; /* Container is transparent */
    box-shadow: none;
    border: none;
    overflow: visible; /* Allow content to be visible */
    position: relative; /* Added for positioning context */
}

/* Add this new grid definition */
.grid-3-5-col {
    grid-template-columns: 3fr 6fr; /* Ratio 3 to 5 */
}

/* Calculator Card Specifics */
.calculator-card h3 {
    /* Adjust title margin if needed */
    margin-bottom: 2px;
}
.calculator-card .subtle {
     margin-bottom: 4px; /* or your preferred value */
}

.calculator-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8em;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0; /* Remove bottom margin to align with chart */
}
.calculator-table th, .calculator-table td {
    border: 1px solid var(--border-color);
    padding: 7.6px 9.5px; /* Reduced by 5% from 8px 10px */
    text-align: left;
    vertical-align: middle;
}
.calculator-table thead th {
    background-color: #f1f3f5; /* Light gray header */
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1em;
    border-bottom-width: 2px;
    border-color: var(--secondary-color);
}
/* Column width adjustments */
.calculator-table th:first-child,
.calculator-table td:first-child {
    width: 45%; /* Increased width for sector column */
}
/* Input column */
.calculator-table td:nth-child(2) {
    width: 18%; /* Slightly reduced width */
}
/* Savings columns */
.calculator-table td:nth-child(3),
.calculator-table td:nth-child(4),
.calculator-table tfoot td:nth-child(3),
.calculator-table tfoot td:nth-child(4) {
     text-align: right;
     font-weight: 700;
     width: 18.5%; /* Slightly reduced width */
}
.calculator-table td:nth-child(3), .calculator-table tfoot td:nth-child(3) { color: var(--success-color); }
.calculator-table td:nth-child(4), .calculator-table tfoot td:nth-child(4) { color: var(--success-color); } /* Changed from accent-purple to success-color */

/* Total row specific styles */
.calculator-table tfoot td {
    font-weight: 700;
    background-color: #f1f3f5; /* MATCHES HEADER BACKGROUND */
    border-top: 2px solid var(--secondary-color);
    border-bottom: 1px solid var(--border-color);

    /* === THE DEFINITIVE HEIGHT FIX === */
    /* This adds extra vertical padding ONLY to the footer cells to force them
       to match the height of the body rows which contain taller slider components. */
    padding-top: 11.5px !important;
    padding-bottom: 11.5px !important;
}
.calculator-table tfoot td:nth-child(2) {
    text-align: right;
    color: var(--primary-color); /* Total expenses color */
}


/* Input field styling */
.calculator-table input[type="number"] {
    width: 90%; /* Fill most of the cell */
    padding: 4.75px 7.6px; /* Reduced by 5% from 5px 8px */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: var(--font-family);
    font-size: 1em; /* Inherit cell font size */
    box-sizing: border-box;
    text-align: right;
    animation: blink-input 2s infinite;
}

@keyframes blink-input {
    0% { border-color: var(--border-color); box-shadow: none; }
    50% { border-color: var(--secondary-color); box-shadow: 0 0 5px rgba(95, 158, 160, 0.5); }
    100% { border-color: var(--border-color); box-shadow: none; }
}

.calculator-table input[type="number"]:focus {
    border-color: var(--secondary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(95, 158, 160, 0.25); /* Subtle focus ring */
    animation: none; /* Stop blinking when focused */
}
/* Hide spinner buttons for cleaner look (optional) */
.calculator-table input[type="number"]::-webkit-outer-spin-button,
.calculator-table input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.calculator-table input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

/* Ensure output spans take space */
.calculator-table span {
    display: inline-block;
    min-width: 80px; /* Increased for larger format */
}

/* PDF adjustments for calculator (inputs won't be interactive in PDF) */
@media print {
    .calculator-table input[type="number"] {
        border: none; /* Remove border for cleaner print */
        background-color: transparent !important;
        box-shadow: none;
        padding: 5px 0; /* Adjust padding */
        width: 100%; /* Allow text to fill if needed */
         /* Appearance: Show value as text */
    }
    .calculator-table thead th {
        background-color: #f1f3f5 !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
     .calculator-table tfoot td {
        background-color: #f8f9fa !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    /* Ensure colors print */
    .calculator-table td:nth-child(3), .calculator-table tfoot td:nth-child(3) { color: var(--success-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .calculator-table td:nth-child(4), .calculator-table tfoot td:nth-child(4) { color: var(--success-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
     .calculator-table tfoot td:nth-child(2) { color: var(--primary-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
}


.comparison-card li {
     /* ... other list styles */
     line-height: 1.4; /* <<< REVERTED: Back to original */
     color: var(--text-light);
}
/* --- Page Structure --- */
.page {
    padding: var(--page-padding);
    background-color: var(--page-background);
    min-height: 100%; /* Changed from height: 100% */
    width: 100%; /* Changed from 100vw */
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible; /* Allow content to be visible */
}

.page-1 {
     page-break-after: always;
}
.page-2 {
    page-break-before: always; /* Ensure it starts on a new page */
}

/* Remove the page footer */
.page-footer {
    display: none; /* Hide the footer completely */
}

/* --- Modern Header --- */
.page-header {
    text-align: left;
    margin-top: -25px; /* Increased from -35px to give more space at top */
    margin-bottom: 10px; /* Reduced by additional 50% from 19px */
    padding-bottom: 3px; /* Reduced by additional 50% from 6px */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative; /* Added for absolute positioning of date */
}

.page-header .report-title {
    font-size: 1.6em; /* Increased for larger format */
    color: var(--primary-color);
    margin: 0; /* Removed margin completely */
    line-height: 1.1; /* Reduced line height for tighter spacing */
    font-weight: 700;
}

.page-header .client-name {
    font-size: 1.3em; /* Increased for larger format */
    color: var(--secondary-color);
    margin: 0 0 2px 0; /* Already reduced */
    line-height: 1.1; /* Reduced line height for tighter spacing */
    font-weight: 400;
}

.page-header .report-info {
    font-size: 1em; /* Increased for larger format */
    color: var(--text-light);
    margin: 0;
    position: absolute;
    right: 20px;
    top: 5px; /* Adjusted absolute position from top */
    padding: 0; /* Remove all padding */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px; /* Fixed 3px gap */
}

.report-date {
    color: var(--text-color);
    font-size: 0.9em;
    margin: 0; /* Remove all margins */
    padding: 0; /* Remove all padding */
    line-height: 1.2; /* Tightened line height */
    height: auto; /* Let content determine height */
}

.executive-summary-title {
    color: var(--primary-color);
    font-size: 1.2em;
    font-weight: 600;
    margin: 0; /* Remove all margins */
    padding: 0; /* Remove all padding */
    line-height: 1.2; /* Tightened line height */
    height: auto; /* Let content determine height */
}

/* Recommendation Icons in Header */
.recommendation-icons {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    height: 16px;
    gap: 6px;
}

.recommendation-icons .recommendation-icon {
    width: 16px;
    height: 16px;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: block;
    opacity: 0;
    transform: scale(0.5);
    animation: iconFadeInScale 0.5s ease-out forwards;
}

.recommendation-icons .recommendation-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
}

.recommendation-icons .recommendation-icon .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.recommendation-icons .recommendation-icon:hover {
    transform: scale(1.2);
}

.recommendation-icons .recommendation-icon:hover .hover-img {
    opacity: 1;
}

.page-header .logo-image {
    max-width: 200px; /* Increased for larger format */
    height: auto;
    margin-right: 19px; /* Already reduced */
    margin-top: 0; /* Ensure no top margin */
    align-self: flex-start; /* Align with the top of the text */
    padding-top: 10px; /* Increased from 5px to give more space at top */
}

.page-header .header-content {
    flex: 1;
}

/* --- Card Styling --- */
.card {
    background-color: var(--background-color);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    padding: 20px 25px; /* Restored to original 20px 25px */
    margin-bottom: 25px; /* Restored to original value */
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
    display: flex; /* Allow vertical flex inside cards */
    flex-direction: column;
}
.card > *:last-child {
    margin-bottom: 0; /* Remove margin from last element */
}

/* --- Grid Layouts --- */
.grid-container {
    display: grid;
    gap: 15px; /* Reduced from 25px */
    align-items: stretch; /* Make items stretch to fill height */
}
.grid-2-col {
    grid-template-columns: repeat(2, 1fr);
}
.grid-3-col {
    grid-template-columns: repeat(3, 1fr);
}
/* Adjust grid gap for specific sections if needed */
.key-opportunities-grid { margin-top: 25px; } /* Restored to original 25px */

/* --- Content Styles --- */
h2 { /* Section Titles */
    color: var(--primary-color);
    font-size: 1.3em; /* Reduced by 30% from 1.6em */
    margin-top: 0; /* Reset top margin for card content */
    margin-bottom: 3px; /* Reduced by additional 50% from 7px */
    font-weight: 700;
}
h3 { /* Card Sub-Titles */
    color: var(--primary-color);
    font-size: 1.3em; /* Increased for larger format */
    margin-top: 0; /* Reset top margin inside card */
    margin-bottom: 2px; /* Reduced by additional 50% from 5px */
    font-weight: 700;
}
p {
    margin-bottom: 0.075em; /* Reduced by additional 50% from 0.15em */
    color: var(--text-color);
    font-size: 1.1em; /* Increased for larger format */
    flex-grow: 1; /* Allow paragraphs to take space */
}
p.subtle {
     color: var(--text-light);
     font-size: 1em; /* Increased for larger format */
}

strong { font-weight: 700; color: var(--primary-color); }
.highlight { color: var(--primary-color); font-weight: 700; }

/* --- Compact Table Style --- */
.compact-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 7px; /* Reduced by 50% from 15px */
    font-size: 1em; /* Increased for larger format */
    border-radius: 8px;
    overflow: hidden;
}
.compact-table th, .compact-table td {
    border: 1px solid var(--border-color);
    padding: 10px 12px; /* Increased for larger format */
    text-align: left;
    vertical-align: middle;
}
.compact-table thead th {
    background-color: #f1f3f5; /* Light gray header */
    color: var(--primary-color);
    font-weight: 700;
    border-bottom-width: 2px;
    border-color: var(--secondary-color);
}
.compact-table td:nth-child(2), .compact-table td:nth-child(3) {
     text-align: right; /* Align numbers right */
     font-weight: 700;
}
 .compact-table td:nth-child(2) { color: var(--success-color); }/* Savings green */
 .compact-table td:nth-child(3) { color: var(--danger-color); } /* Cost red */


/* --- Image Placeholder --- */
.image-placeholder {
    border: 2px dashed var(--border-color);
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-light);
    font-size: 1.2em; /* Increased for larger format */
    font-weight: bold;
    min-height: 200px; /* Increased for larger format */
}

/* --- Comparison Styles (Adapted for Card) --- */
.comparison-card {
     padding: 20px 25px; /* Restored to original 20px 25px */
     /* margin: 0; Ensure no margins at all */
}
.comparison-card h4 {
    margin-top: 0; margin-bottom: 15px; font-weight: 700; font-size: 1.2em; display: flex; align-items: center; /* Increased for larger format */
}
.comparison-card ul { list-style: none; padding-left: 0; margin: 0 0 20px 0; } /* Increased margin for larger format */
.comparison-card li { margin-bottom: 8px; padding-left: 30px; position: relative; font-size: 1.1em; line-height: 1.4; color: var(--text-light); } /* Increased for larger format */
.comparison-card li:last-child { margin-bottom: 0; }
.comparison-card li::before { content: ''; position: absolute; left: 0; top: 1px; font-weight: bold; font-size: 1.2em; line-height: 1; width: 24px; text-align: center; } /* Increased for larger format */
.comparison-card ul.upsides li::before { content: '+'; color: var(--success-color); }
.comparison-card ul.downsides li::before { content: '−'; color: var(--danger-color); }
.comparison-card .upsides h4 { color: var(--success-color); }
.comparison-card .downsides h4 { color: var(--danger-color); }

/* --- CTA Button --- */
 .cta-button {
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--light-text-color);
    padding: 15px 30px; /* Increased for larger format */
    text-decoration: none;
    border-radius: 8px; /* Increased for larger format */
    font-weight: 700;
    font-size: 1.2em; /* Increased for larger format */
    transition: background-color 0.3s ease, box-shadow 0.2s ease;
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Increased for larger format */
    text-align: center;
    margin-top: auto; /* Push button to bottom of card */
}
.cta-button:hover { background-color: #4a7c7e; box-shadow: 0 6px 12px rgba(0,0,0,0.15); } /* Increased for larger format */

.executive-summary .cta-buttons .cta-button {
    margin-top: 0; /* Override general 'margin-top: auto' to prevent sticking to bottom */
}

/* --- PDF Specific Tweaks --- */
@media print {
    body { background-color: var(--background-color); font-size: 9pt; }
    .presentation-container { width: 100%; }
    .page { padding: 25px; background-color: var(--background-color); box-shadow: none; border: none; min-height: 0; }
    .card { box-shadow: none; border: 1px solid #ccc; background-color: var(--background-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .image-placeholder { background-color: #e9ecef !important; border: 1px dashed #aaa !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .compact-table thead th { background-color: #f1f3f5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .compact-table td:nth-child(2) { color: var(--success-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .compact-table td:nth-child(3) { color: var(--danger-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .comparison-card { background-color: var(--background-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .comparison-card ul.upsides li::before, .comparison-card .upsides h4 { color: var(--success-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .comparison-card ul.downsides li::before, .comparison-card .downsides h4 { color: var(--danger-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cta-button { background-color: var(--secondary-color) !important; color: var(--light-text-color) !important; box-shadow: none; border: 1px solid var(--secondary-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
}

/* Add special style for Executive Summary */
.executive-summary {
    display: flex;
    flex-direction: column;
    height: auto; /* Match calculator card height */
    max-height: 100%; /* Stay within container */
    overflow-y: auto; /* Add scrolling if needed */
}

.executive-summary h2 {
    margin-bottom: 10px; /* Fixed margin below heading */
}

.executive-summary p {
    margin: 0 0 15px 0;
    color: #000000; /* Changed to black */
    font-size: 1.0em; /* UPDATED: Now set to 1.0em size */
    line-height: 1.4; /* Restored to original value */
}

.executive-summary p.subtle {
    color: #000000; /* Changed to black */
    font-size: 1.0em; /* UPDATED: Now matches the first paragraph at 1.0em */
    margin-bottom: 10px;
}

.executive-summary p:last-child {
    margin-bottom: 0; /* No margin for last paragraph */
}

.executive-summary .spacer {
    display: none; /* Remove spacer to allow content to fill space */
}

/* Ensure both cards in the grid have equal height */
.grid-3-5-col .card {
    height: auto; /* Allow natural height */
    max-height: 100%; /* Constrain to container */
}

/* Make content area fill available space */
.content-wrapper {
    display: flex;
    flex-direction: column;
}

/* Apply the same spacing approach as the calculator section */
.executive-summary p.subtle {
    margin-bottom: 5px; /* Same as calculator-card .subtle */
}

/* Add style for the 1.x sections container */
.sections-container-1x {
    background-color: #e6f7f8;
    border-radius: 12px;
    padding: 10px 10px 10px 10px !important; /* 10px bottom padding only */
    margin-bottom: 10px;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Configure grid container to properly fit within the green background */
.sections-container-1x .grid-container {
    height: auto; /* Let it size naturally */
    max-height: 100%;
    margin: 0; /* Remove any default margins */
    gap: 15px; /* Match the grid gap from earlier styles */
}

/* Fix card margins to be identical and minimal */
.sections-container-1x .card {
    margin: 0; /* No margins on cards inside sections container */
    height: auto; /* Natural height based on content */
}

/* Adjust horizontal sections to not affect the spacing */
.horizontal-sections {
    margin-top: 10px; /* Small gap between green bg and horizontal sections */
}

.sections-container-1x h1 {
    margin-top: 0;
    margin-bottom: 10px; /* Reduced from 15px */
    font-size: 1.5em;
    color: var(--primary-color);
    font-weight: 700;
}

/* Add style for the second sections container */
.sections-container-2x {
    background-color: rgba(95, 158, 160, 0.45); /* Using --secondary-color with opacity */
    border-radius: 12px;
    padding: 10px; /* Reduced by additional 50% from 20px */
    margin-bottom: 10px; /* Reduced by additional 50% from 20px */
    height: calc(100vh - 400px); /* Fixed height to ensure it stays above bottom */
    overflow: visible; /* Allow content to be visible */
    display: flex;
    flex-direction: column;
}

/* Add style for split calculator card */
.calculator-card {
    display: flex;
    flex-direction: row;
    position: relative;
    height: auto; /* Allow height to adjust based on content */
    max-height: 100%; /* Ensure it doesn't exceed container height */
    overflow: visible; /* Allow content to be visible */
}

.calculator-content {
    flex: 2.5;
    padding-right: 20px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    max-height: 100%; /* Ensure it doesn't exceed container height */
    overflow: visible; /* Allow content to be visible */
}

.calculator-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align to top */
    padding-left: 20px;
    max-height: 100%; /* Ensure it doesn't exceed container height */
    overflow: visible; /* Allow content to be visible */
}

.calculator-image-placeholder {
    width: 100%; /* Reverted back to 100% */
    aspect-ratio: 1 / 1; /* Force 1:1 square ratio */
    background-color: #e9ecef;
    border: 1px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 0.9em;
    margin-bottom: 10px;
    animation: popIn 0.8s ease-out 1.4s both;
}

/* Add styles for chart headers */
.chart-header {
    margin-top: 0;
    margin-bottom: 2.5px; /* Reduced by another 50% from 5px */
    text-align: left; /* Left-bound instead of center */
    color: var(--primary-color);
    animation: fadeIn 0.8s ease-out 1.3s both;
}

.chart-header:nth-of-type(2) {
    animation-delay: 1.6s;
}

.calculator-image-placeholder:nth-of-type(2) {
    animation-delay: 1.5s;
}

/* Add styles for the radar chart */
.radar-chart-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.radar-chart {
    width: 100%;
    height: 100%;
}

.radar-chart-legend {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    font-size: 0.7em;
    color: var(--text-light);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.radar-chart-legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.radar-chart-legend-checkbox {
    margin-right: 5px;
    cursor: pointer;
    width: 12px;
    height: 12px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #ccc;
    border-radius: 2px;
}

.radar-chart-legend-checkbox:checked {
    background-color: currentColor;
}

.radar-chart-legend-label {
    cursor: pointer;
    user-select: none;
}

.radar-chart-legend-item.current-expenses .radar-chart-legend-checkbox {
    color: #0A2342;
}

.radar-chart-legend-item.after-3p .radar-chart-legend-checkbox {
    color: #28a745;
}

.radar-chart-legend-item.after-custom .radar-chart-legend-checkbox {
    color: #5F9EA0;
}

/* Apply chart colors to calculator table columns */
.calculator-table thead th:nth-child(3) {
    color: var(--success-color); /* Green for 3rd Party AI */
}
.calculator-table thead th:nth-child(4) {
    color: var(--secondary-color); /* Teal for Custom AI */
}

/* Reduce spacing in calculator card */
.calculator-card h2 {
    margin-bottom: 2px; /* Reduced spacing below heading */
}

.calculator-card .subtle {
    color: #000000; /* Changed to black */
    font-size: 0.9em;
    margin-bottom: 4px;
}

/* Add styles for the bar chart */
.bar-chart-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bar-chart-tabs {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.bar-chart-tab {
    padding: 5px 10px;
    cursor: pointer;
    text-align: center;
    flex: 1;
    font-size: 0.8em;
    color: var(--text-light);
    border-bottom: 2px solid transparent;
}

.bar-chart-tab.active {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    font-weight: 700;
}

.bar-chart-content {
    width: 100%;
    height: calc(100% - 30px);
    position: relative;
}

.bar-chart-view {
    width: 100%;
    height: 100%;
    display: none;
}

.bar-chart-view.active {
    display: block;
}

.bar-chart {
    width: 100%;
    height: 100%;
}

.bar-chart-legend {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    font-size: 0.7em;
    color: var(--text-light);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.bar-chart-legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.bar-chart-legend-color {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 2px;
}

.bar-chart-legend-item.third-party .bar-chart-legend-color {
    background-color: #4a4a4a;
    opacity: 0.5;
}

.bar-chart-legend-item.custom .bar-chart-legend-color {
    background-color: #4a4a4a;
}

/* Add animation keyframes */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    70% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes blink-input {
    0% { border-color: var(--border-color); box-shadow: none; }
    50% { border-color: var(--secondary-color); box-shadow: 0 0 5px rgba(95, 158, 160, 0.5); }
    100% { border-color: var(--border-color); box-shadow: none; }
}

/* Apply animations to elements */
.page-header {
    animation: fadeIn 1s ease-out;
}

.executive-summary h2 {
    animation: fadeIn 0.8s ease-out 0.3s both;
}

.executive-summary p {
    animation: fadeIn 0.8s ease-out 0.5s both;
}

.executive-summary p:nth-child(2) {
    animation-delay: 0.7s;
}

.executive-summary p:nth-child(3) {
    animation-delay: 0.9s;
}

.calculator-card h2 {
    animation: fadeIn 0.8s ease-out 0.3s both;
}

.calculator-card .subtle {
    animation: fadeIn 0.8s ease-out 0.5s both;
}

.calculator-card .subtle:nth-child(2) {
    animation-delay: 0.7s;
}

.calculator-card .subtle:nth-child(3) {
    animation-delay: 0.9s;
}

.calculator-table {
    animation: popIn 0.8s ease-out 1.1s both;
}

.calculator-table tr {
    animation: slideUp 0.5s ease-out both;
}

.calculator-table tr:nth-child(1) { animation-delay: 1.2s; }
.calculator-table tr:nth-child(2) { animation-delay: 1.3s; }
.calculator-table tr:nth-child(3) { animation-delay: 1.4s; }
.calculator-table tr:nth-child(4) { animation-delay: 1.5s; }
.calculator-table tr:nth-child(5) { animation-delay: 1.6s; }
.calculator-table tr:nth-child(6) { animation-delay: 1.7s; }

.sections-container-2x .card {
    animation: slideUp 0.8s ease-out both;
}

.sections-container-2x .card:nth-child(1) { animation-delay: 2.4s; }
.sections-container-2x .card:nth-child(2) { animation-delay: 2.6s; }
.sections-container-2x .card:nth-child(3) { animation-delay: 2.8s; }
.sections-container-2x .card:nth-child(4) { animation-delay: 3.0s; }
.sections-container-2x .card:nth-child(5) { animation-delay: 3.2s; }

/* Add animation keyframes for bar growth */
@keyframes growBar {
    from { height: 0; }
    to { height: var(--target-height); }
}

/* Add animation keyframes for bar chart fade in */
@keyframes fadeInChart {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Add horizontal sections container styles */
.horizontal-sections {
    display: flex;
    flex-direction: row;
    overflow-x: auto; /* Enable horizontal scrolling */
    gap: 20px;
    padding: 20px;
    margin-top: 20px;
    position: relative;
}

/* Remove scrollbar styles since we're not scrolling */
.horizontal-sections::-webkit-scrollbar {
    display: none;
}

/* Add section card styles */
.section-card {
    flex: 0 0 300px;
    border-radius: var(--card-border-radius);
    background-color: var(--background-color);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    padding: 20px;
    margin-right: 15px;
    height: 200px;
    overflow-y: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.section-card h2 {
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 10px;
}

.section-card p {
    color: var(--text-color);
    margin-bottom: 10px;
}

/* Info button and tooltip styles */
.info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid #000;
    border-radius: 2px;
    margin-left: 8px;
    background: transparent;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    font-size: 12px;
    font-weight: bold;
    color: #000;
}

.tooltip {
    position: absolute;
    visibility: hidden;
    width: 200px;
    background-color: #fff;
    color: var(--text-color);
    text-align: left;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: normal;
    top: -55px;
    right: 236px; /* Moved 250px to the left from 26px */
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: 1px solid var(--border-color);
    z-index: 100;
}

.info-button:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* Chart header with info button positioning */
.chart-header {
    display: flex;
    align-items: center;
    position: relative;
}

/* Recommendation Icons Animation Styles */
@keyframes fadeInIcon {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Base styles for recommendation icons container */
.recommendation-icons {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    height: 16px;
    gap: 6px;
}

/* Base styles for recommendation icons */
.recommendation-icon {
    width: 16px;
    height: 16px;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: block;
}

/* Icon image styles */
.recommendation-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
}

/* Hover image styles */
.recommendation-icon .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Hover effects */
.recommendation-icon:hover {
    transform: scale(1.2);
}

.recommendation-icon:hover .hover-img {
    opacity: 1;
}

/* Animation keyframes */
@keyframes iconFadeInScale {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Apply animation to icons */
.recommendation-icon {
    animation: iconFadeInScale 0.5s ease-out forwards;
}

/* Staggered animation delays for icons */
.recommendation-icon:nth-child(1) { animation-delay: 0.2s; }
.recommendation-icon:nth-child(2) { animation-delay: 0.4s; }
.recommendation-icon:nth-child(3) { animation-delay: 0.6s; }
.recommendation-icon:nth-child(4) { animation-delay: 0.8s; }
.recommendation-icon:nth-child(5) { animation-delay: 1.0s; }
.recommendation-icon:nth-child(6) { animation-delay: 1.2s; }
.recommendation-icon:nth-child(7) { animation-delay: 1.4s; }
.recommendation-icon:nth-child(8) { animation-delay: 1.6s; } /* Added delay for the 8th icon */

/* Label styles */
.recommendation-label {
    opacity: 0;
    animation: fadeInIcon 0.5s ease-out forwards;
}

/* Staggered animation delays for labels */
.recommendation-label:nth-child(1) { animation-delay: 0.3s; }
.recommendation-label:nth-child(2) { animation-delay: 0.5s; }
.recommendation-label:nth-child(3) { animation-delay: 0.7s; }
.recommendation-label:nth-child(4) { animation-delay: 0.9s; }
.recommendation-label:nth-child(5) { animation-delay: 1.1s; }
.recommendation-label:nth-child(6) { animation-delay: 1.3s; }
.recommendation-label:nth-child(7) { animation-delay: 1.5s; }
.recommendation-label:nth-child(8) { animation-delay: 1.7s; }

/* Hover image transitions for all icons */
.recommendation-icon[alt="AI Report"]:hover {
    content: url('images/ai-report-hover.png');
}

.recommendation-icon[alt="Administration"]:hover {
    content: url('images/administration-hover.png');
}

.recommendation-icon[alt="Support"]:hover {
    content: url('images/support-hover.png');
}

.recommendation-icon[alt="Logistics"]:hover {
    content: url('images/logistics-hover.png');
}

.recommendation-icon[alt="Sales"]:hover {
    content: url('images/sales-hover.png');
}

.recommendation-icon[alt="Operations"]:hover {
    content: url('images/operations-hover.png');
}

.recommendation-icon[alt="Conclusion"]:hover {
    content: url('images/conclusio-hover.png');
}

/* Style for the CTA buttons container */
.cta-buttons {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    justify-content: center;
}

/* Style for the CTA buttons */
.cta-button {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.cta-button.primary {
    background-color: var(--sales-color);
    color: white;
    border: 2px solid var(--sales-color);
}

.cta-button.secondary {
    background-color: transparent;
    color: var(--sales-color);
    border: 2px solid var(--sales-color);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Add CSS for the framed * symbol and popup */
.info-asterisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    margin-left: 6px;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-light);
    cursor: pointer;
    position: relative;
    vertical-align: super;
}

.info-asterisk .popup {
    visibility: hidden;
    width: 280px;
    background-color: white;
    color: var(--text-color);
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 9999;
    top: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5;
}

.info-asterisk:hover .popup {
    visibility: visible;
    opacity: 1;
}

.info-asterisk .popup::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent white transparent;
}

/* === Layout for Side-by-Side Sections === */
/* Comment out the grid styles that might be conflicting with the inline styles */
/* 
.sections-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin-bottom: 0;
    width: 100%;
    min-height: 0;
}

.sections-row > .card {
    overflow: auto;
    margin: 0;
}
*/

/* Comment out the .sections-container-1x styles too */
/*
.sections-container-1x {
    background-color: #e6f7f8;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 0;
    height: calc(100vh - 55px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
*/

/* Style for the new text header */
.dynamic-header-title {
    font-size: 1.1em; 
    color: var(--primary-color); 
    font-weight: 600; 
    margin-top: 5px; 
    text-align: right;
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Hide from accessibility tree and layout */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
    pointer-events: none; /* Prevent interaction when hidden */
    width: 100%; /* Ensure it takes full width for text-align */
}

/* Show the title when the first icon in the sibling container is hovered */
/* REMOVED - This selector is incorrect because the title is not a sibling of the icon 
.recommendation-icons .recommendation-icon:first-child:hover ~ .overview-calculator-title {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
*/

/* === Add Keyframes if Missing === */
/* @keyframes fadeIn already exists */

@keyframes slideInFromRight {
    0% {
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* === Add Base Animations === */

/* Apply to cards within page-2 specifically */
.page-2 .card.comparison-card {
    opacity: 0; /* Start hidden */
    animation: slideInFromRight 0.4s ease-out forwards;
}

.comparison-card h4 {
    opacity: 0; /* Start hidden */
    animation: slideInFromRight 0.3s ease-out forwards;
}

.comparison-card li {
    opacity: 0; /* Start hidden */
    animation: slideInFromRight 0.25s ease-out forwards;
}

.ai-solutions-box {
    opacity: 0; /* Start hidden */
    animation: fadeIn 0.4s ease-out forwards;
}

.ai-solutions-box p {
    font-size: 0.9em;
    line-height: 1.4;
    margin-top: -2px; /* Reduce gap between header and content */
    margin-bottom: 3px; /* Add space after the paragraph */
}

/* === Add Specific Delays === */

/* Card Delays */
.page-2 .sections-row > .card.comparison-card:nth-child(1) {
    animation-delay: 0.25s;
}
.page-2 .sections-row > .card.comparison-card:nth-child(2) {
    animation-delay: 0.35s; /* This targets the Admin card, but only its initial slide-in */
}

/* Comparison Heading Delays (within first card) */
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(1) h4 {
    animation-delay: 0.4s;
}
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(2) h4 {
    animation-delay: 0.5s;
}

/* Comparison List Item Delays (within first card) */
/* Third-Party AI Bullet Points */
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(1) .upsides li:nth-child(1) { animation-delay: 0.55s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(1) .upsides li:nth-child(2) { animation-delay: 0.6s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(1) .upsides li:nth-child(3) { animation-delay: 0.65s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(1) .downsides li:nth-child(1) { animation-delay: 0.7s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(1) .downsides li:nth-child(2) { animation-delay: 0.75s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(1) .downsides li:nth-child(3) { animation-delay: 0.8s; }

/* Custom AI Bullet Points */
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(2) .upsides li:nth-child(1) { animation-delay: 0.85s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(2) .upsides li:nth-child(2) { animation-delay: 0.9s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(2) .upsides li:nth-child(3) { animation-delay: 0.95s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(2) .downsides li:nth-child(1) { animation-delay: 1.0s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(2) .downsides li:nth-child(2) { animation-delay: 1.05s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(2) .downsides li:nth-child(3) { animation-delay: 1.1s; }

/* AI Solutions Box Delay (within first card) */
.page-2 .sections-row > .card.comparison-card:nth-child(1) .ai-solutions-box {
    animation-delay: 1.2s;
}

/* === Animations for Second Card (Admin Savings) === */

/* Base Animation Styles (applied via more specific selectors below) */
.page-2 .sections-row > .card.comparison-card:nth-child(2) .administration-header,
.page-2 .sections-row > .card.comparison-card:nth-child(2) > p:nth-of-type(1),
.page-2 .sections-row > .card.comparison-card:nth-child(2) > div:nth-of-type(1),
.page-2 .sections-row > .card.comparison-card:nth-child(2) > p:nth-of-type(2),
.page-2 .sections-row > .card.comparison-card:nth-child(2) .key-applications {
    opacity: 0; /* Start hidden */
}

/* Specific Animations & Delays */
.page-2 .sections-row > .card.comparison-card:nth-child(2) .administration-header {
    animation: slideInFromRight 0.3s ease-out forwards;
    animation-delay: 0.6s; /* Changed from 1.3s */
}

.page-2 .sections-row > .card.comparison-card:nth-child(2) > p:nth-of-type(1) { /* Description Para */
    animation: slideInFromRight 0.3s ease-out forwards;
    animation-delay: 0.6s; /* Changed from 1.35s */
}

.page-2 .sections-row > .card.comparison-card:nth-child(2) > div:nth-of-type(1) { /* Input + Table Container */
    animation: fadeIn 0.4s ease-out forwards; /* Use fadeIn for this block */
    animation-delay: 0.7s; /* Changed from 1.4s */
}

.page-2 .sections-row > .card.comparison-card:nth-child(2) > p:nth-of-type(2) { /* Key Apps Heading */
    animation: slideInFromRight 0.3s ease-out forwards;
    animation-delay: 0.8s; /* Changed from 1.5s */
}

.page-2 .sections-row > .card.comparison-card:nth-child(2) .key-applications {
    animation: slideInFromRight 0.3s ease-out forwards;
    animation-delay: 0.9s; /* Changed from 1.45s */
}


/* NOTE: We are intentionally NOT adding delays for elements within the second card (Admin Savings) */
/* like .roi-section as their animations are handled by JS or excluded */


/* ... rest of the styles ... */

.calculator-header-row th {
    background-color: #f8f9fa;
    border-bottom: 2px solid var(--secondary-color);
    font-weight: 700;
    color: var(--primary-color);
}

.card.executive-summary {
    height: auto !important;
}

.sections-container {
    /* THE FIX: REMOVED the destructive height and overflow rules that were breaking the entire page layout. */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.sections-container-1x {
    flex: 1 1 auto;
    overflow-y: auto !important;
    min-height: 0 !important;
    height: auto !important;
}
.grid-container.grid-3-5-col {
    height: 100%;
    min-height: 0;
}
.card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
.calculator-table {
    display: table;
    max-height: none;
    overflow: visible;
}

.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    height: calc(100vh - 20px);
    overflow-y: auto;
}

.white-frame {
    background-color: white;
    border-radius: 10px;
    padding: 15px 15px 25px 15px; /* Added exactly 5px more to bottom padding (from 20px to 25px) */
    margin-bottom: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.white-frame p {
    margin: 0;
    padding: 0;
    line-height: 1.2;
    font-size: 0.9em;
}

.white-frame h3 {
    margin: 0 0 3px 0;
    padding: 0;
    font-size: 1em;
    font-weight: 600;
    color: #333;
}

.white-frame ul {
    margin: 3px 0;
    padding-left: 15px;
}

.white-frame li {
    margin: 1px 0;
    line-height: 1.2;
}

.white-frame .key-applications {
    margin-top: 3px;
}

.white-frame .key-applications li {
    margin: 1px 0;
    line-height: 1.2;
}

.white-frame .key-applications li strong {
    display: block;
    margin-bottom: 0;
    font-size: 0.85em;
}

.white-frame .key-applications li span {
    font-size: 0.8em;
    line-height: 1.1;
    display: block;
    margin-top: 0;
}

/* Remove all savings table styles since we're using inline styles */
.savings-table {
    width: 100%;
}

/* Force specific column widths for savings table */
/* DISABLED - Using inline styles instead
.savings-table th:first-child,
.savings-table td:first-child {
    width: 24% !important;
    min-width: 24% !important;
    max-width: 24% !important;
    white-space: nowrap !important;
}

.savings-table th:nth-child(2),
.savings-table td:nth-child(2) {
    width: 18% !important;
    min-width: 18% !important;
    max-width: 18% !important;
}

.savings-table th:nth-child(3),
.savings-table td:nth-child(3) {
    width: 22% !important;
    min-width: 22% !important;
    max-width: 22% !important;
}

.savings-table th:nth-child(4),
.savings-table td:nth-child(4) {
    width: 18% !important;
    min-width: 18% !important;
    max-width: 18% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.savings-table th:nth-child(5),
.savings-table td:nth-child(5) {
    width: 22% !important;
    min-width: 22% !important;
    max-width: 22% !important;
}
*/

.savings-table th {
    color: #000 !important;
}

/* Bar Chart Tabs for Sales and Operations */
.bar-chart-tab.sales {
    color: var(--sales-color);
}
.bar-chart-tab.sales.active {
    color: #fff;
    background: var(--sales-color);
    border-bottom: 2px solid var(--sales-color);
}
.bar-chart-tab.operations {
    color: var(--operations-color);
}
.bar-chart-tab.operations.active {
    color: #fff;
    background: var(--operations-color);
    border-bottom: 2px solid var(--operations-color);
}

/* Bar Segment Colors for Nettoeinsparungen (Sales: green, Operations: blue) */
/* SALES */
#sales-netsavings-bar-3p .bar-segment.third-party,
#sales-netsavings-bar-custom .bar-segment.custom {
    background-color: rgba(57,181,74,0.3);
}
#sales-netsavings-bar-3p .bar-segment.third-party.year2,
#sales-netsavings-bar-custom .bar-segment.custom.year2 {
    background-color: rgba(57,181,74,0.6);
}
#sales-netsavings-bar-3p .bar-segment.third-party.year3,
#sales-netsavings-bar-custom .bar-segment.custom.year3 {
    background-color: rgba(57,181,74,1.0);
}
/* OPERATIONS */
#operations-netsavings-bar-3p .bar-segment.third-party,
#operations-netsavings-bar-custom .bar-segment.custom {
    background-color: rgba(50,140,174,0.3);
}
#operations-netsavings-bar-3p .bar-segment.third-party.year2,
#operations-netsavings-bar-custom .bar-segment.custom.year2 {
    background-color: rgba(50,140,174,0.6);
}
#operations-netsavings-bar-3p .bar-segment.third-party.year3,
#operations-netsavings-bar-custom .bar-segment.custom.year3 {
    background-color: rgba(50,140,174,1.0);
}

/* Operations Key Applications Frame */
.operations-key-applications {
    border: 2px solid var(--success-color);
    background: linear-gradient(90deg, var(--success-color) 0%, var(--primary-color) 100%);
    border-radius: 8px;
    padding: 15px;
    color: white;
}

.operations-key-applications h4 {
    color: white;
    margin-bottom: 15px;
}

.operations-key-applications ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.operations-key-applications li {
    color: white;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.operations-key-applications li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: white;
}

/* =====================================================================
   DEFINITIVE MOBILE ROW HEIGHT FIX & LAYOUT CORRECTION
   (Replace your entire existing @media (max-width: 768px) block with this)
 ===================================================================== */
@media (max-width: 768px) {

    /* ---
    THE ACTUAL FIX: Revert the slider container to a horizontal layout
    This makes it behave like the desktop view, immediately reducing row height.
    --- */
    .mobile-section .expense-slider-container {
        display: flex;
        flex-direction: row; /* <<< KEY CHANGE: Forces side-by-side layout */
        align-items: center; /* Vertically centers items in the row */
        justify-content: flex-start; /* Aligns the group to the left of the cell */
        gap: 5px;
        width: 100%;
    }

    /* --- Supporting Fixes for the new horizontal layout --- */
    
    /* 1. Make the slider fill the available space */
    .mobile-section .expense-slider {
        flex: 1 1 auto; /* Allows the slider to grow and shrink */
        width: auto;    /* Let flexbox determine the width */
    }

    /* 2. Make the text value compact and aligned to the right */
    .mobile-section .expense-slider-value-container {
        flex: 0 0 auto; /* Prevent this container from growing */
        width: auto;
        margin: 0;
    }
    .mobile-section .expense-slider-value {
        text-align: right !important; /* Align text to the right */
        font-size: 0.9em !important;
        min-width: 55px; /* Ensure enough space for typical values */
    }

    /* 3. Reset table cell padding to a normal, compact value */
    .mobile-section .calculator-table tbody td {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    /* --- ALL OTHER EXISTING MOBILE STYLES --- */
    .desktop-layout { display: none !important; }
    .mobile-layout { display: block !important; }
    
    /* Hide header on page 2 (mobile only) */
    body.page-2-mobile .page-header {
        display: none !important;
    }
    .mobile-sections-container { position: relative; width: 100%; height: calc(100vh - 120px); overflow: visible; background-color: transparent; border-radius: 12px; margin-bottom: 10px; padding-bottom: 60px; }
    .mobile-section { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transform: translateX(100%); transition: all 0.3s ease-in-out; overflow-y: auto; padding: 15px; box-sizing: border-box; }
    .mobile-section.active { opacity: 1; transform: translateX(0); }
    .mobile-section.prev { transform: translateX(-100%); }
    .mobile-section.next { transform: translateX(100%); }
    .mobile-section .card { margin: 0; padding: 8px; height: auto; min-height: 0; }
    .mobile-navigation-dots { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; display: flex; justify-content: center; align-items: center; padding: 10px 5px; background-color: rgba(255, 255, 255, 0.95); border-top: 1px solid #e0e0e0; gap: 4px; flex-wrap: nowrap; overflow-x: auto; }
    .dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ccc; cursor: pointer; transition: background-color 0.3s ease; margin: 0 4px; }
    .dot.active { background-color: #5F9EA0; }
    .page-header { margin-top: 0 !important; padding: 8px 0 !important; margin-bottom: 5px !important; }
    .header-content { padding: 5px 0 !important; }
    .client-name { margin-bottom: 5px !important; font-size: 1.1em !important; }
    .mobile-navigation-icons { margin-top: 5px !important; margin-bottom: 5px !important; }
    .mobile-report-date { margin-top: 5px !important; margin-bottom: 5px !important; font-size: 0.8em !important; }
    .mobile-section h2 { margin-top: 0 !important; margin-bottom: 8px !important; font-size: 1.3em !important; }
    .mobile-section h3 { margin-top: 0 !important; margin-bottom: 3px !important; font-size: 1.1em !important; }
    .mobile-section p { margin-top: 0 !important; margin-bottom: 10px !important; font-size: 0.9em !important; line-height: 1.4 !important; }
    .mobile-section .calculator-table { font-size: 0.75em; width: 100%; }
    .mobile-section .calculator-table th, .mobile-section .calculator-table td { padding: 4px 6px; white-space: nowrap; }
    .mobile-section .executive-summary p { flex-grow: 0 !important; }
    .mobile-section .cta-buttons.fade-in { display: none !important; }
    .mobile-section .mobile-action-buttons { margin-top: 20px !important; margin-bottom: 20px !important; padding-top: 0 !important; border-top: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; }
    .mobile-section .mobile-action-buttons .cta-button { min-height: auto !important; padding: 18px 15px !important; }
    .mobile-section .recommendation-icons-container { display: flex !important; justify-content: space-between !important; flex-wrap: nowrap !important; width: 100% !important; margin: 10px 0 15px 0 !important; gap: 2px !important; }
    .mobile-section .recommendation-icon-link { display: flex !important; flex-direction: column !important; align-items: center !important; text-decoration: none !important; flex: 1 !important; min-width: 0 !important; max-width: calc(100% / 5) !important; }
    .mobile-section .recommendation-icon { width: 40px !important; height: 40px !important; object-fit: cover !important; border-radius: 6px !important; margin-bottom: 3px !important; }
    .mobile-section .recommendation-label { font-size: 0.7em !important; text-align: center !important; font-weight: bold !important; color: var(--text-color) !important; line-height: 1.1 !important; }
    /* Original slider styling (thumb, track, colors) remains untouched as it works fine */
    .mobile-section .expense-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -7.5px; height: 18px; width: 18px; border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
    .mobile-section .expense-slider::-moz-range-thumb { height: 18px; width: 18px; border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
    .mobile-section .expense-slider::-webkit-slider-runnable-track { height: 3px; background: #e0e0e0; border-radius: 3px; }
    .mobile-section .expense-slider::-moz-range-track { height: 3px; background: #e0e0e0; border-radius: 3px; }
    #admin-expenses-slider-mobile::-webkit-slider-thumb { background-color: var(--administration-color); }
    #service-expenses-slider-mobile::-webkit-slider-thumb { background-color: var(--support-color); }
    #logi-expenses-slider-mobile::-webkit-slider-thumb { background-color: var(--logistics-color); }
    #sales-expenses-slider-mobile::-webkit-slider-thumb { background-color: var(--sales-color); }
    #ops-expenses-slider-mobile::-webkit-slider-thumb { background-color: var(--operations-color); }
    #admin-expenses-slider-mobile::-moz-range-thumb { background-color: var(--administration-color); }
    #service-expenses-slider-mobile::-moz-range-thumb { background-color: var(--support-color); }
    #logi-expenses-slider-mobile::-moz-range-thumb { background-color: var(--logistics-color); }
    #sales-expenses-slider-mobile::-moz-range-thumb { background-color: var(--sales-color); }
    #ops-expenses-slider-mobile::-moz-range-thumb { background-color: var(--operations-color); }
}

/* ===== SMALL MOBILE DEVICES (320px - 480px) ===== */
@media (max-width: 480px) {
    .sections-container-1x {
        padding: 5px !important;
    }
    
    .administration-header h2 {
        font-size: 1em !important;
    }
    
    .administration-description {
        font-size: 0.85em !important;
    }
    
    .savings-table {
        font-size: 0.65em !important;
    }
    
    .savings-table th,
    .savings-table td {
        padding: 4px 2px !important;
        font-size: 0.7em !important;
    }
    
    /* Even more compact column widths for very small screens */
    .savings-table th:first-child,
    .savings-table td:first-child {
        width: 30% !important;
        min-width: 30% !important;
        max-width: 30% !important;
    }
    
    .savings-table th:nth-child(2),
    .savings-table td:nth-child(2) {
        width: 17% !important;
        min-width: 17% !important;
        max-width: 17% !important;
    }
    
    .savings-table th:nth-child(3),
    .savings-table td:nth-child(3) {
        width: 17% !important;
        min-width: 17% !important;
        max-width: 17% !important;
    }
    
    .savings-table th:nth-child(4),
    .savings-table td:nth-child(4) {
        width: 17% !important;
        min-width: 17% !important;
        max-width: 17% !important;
    }
    
    .savings-table th:nth-child(5),
    .savings-table td:nth-child(5) {
        width: 19% !important;
        min-width: 19% !important;
        max-width: 19% !important;
    }
    
    .key-applications {
        padding: 10px !important;
    }
    
    .key-applications .app-title {
        font-size: 0.8em !important;
    }
    
    .roi-section h4 {
        font-size: 0.85em !important;
    }
    
    .chart-value {
        font-size: 0.65em !important;
    }
}

/* ===== LANDSCAPE MOBILE (480px - 768px) ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .sections-row {
        flex-direction: row !important;
        gap: 8px !important;
    }
    
    .card.comparison-card {
        width: 50% !important;
    }
    
    .savings-table {
        font-size: 0.65em !important;
    }
    
    .roi-section {
        flex-direction: row !important;
        gap: 10px !important;
    }
    
    .roi-section > div {
        width: auto !important;
    }
}


/* =====================================================================
   MOBILE-ONLY FIX: Shift "Ausgaben p.A." content left by 15px
   This rule targets all direct child elements within the second column's
   cells and visually shifts them left without affecting the table layout.
   ===================================================================== */
@media (max-width: 768px) {
  /* Apply left shift to all rows with sliders (rows 1-5) */
  .calculator-table tbody tr:nth-child(1) td:nth-child(2) > *,
  .calculator-table tbody tr:nth-child(2) td:nth-child(2) > *,
  .calculator-table tbody tr:nth-child(3) td:nth-child(2) > *,
  .calculator-table tbody tr:nth-child(4) td:nth-child(2) > *,
  .calculator-table tbody tr:nth-child(5) td:nth-child(2) > * {
    position: relative;
    left: -20px;
  }
  
  /* Mobile only: Put value above slider in column 2 */
  .calculator-table td:nth-child(2) .expense-slider-container {
    flex-direction: column-reverse !important;
  }
  
  /* Mobile only: Adjust margins for value text in column 2 */
  .calculator-table td:nth-child(2) .expense-slider-value-container {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
  }
  
  /* Mobile only: Reduce height of slider rows (rows 2-5) */
  .calculator-table tbody tr:nth-child(2) td,
  .calculator-table tbody tr:nth-child(3) td,
  .calculator-table tbody tr:nth-child(4) td,
  .calculator-table tbody tr:nth-child(5) td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}

/* Touch-friendly button interactions */
.touch-device .key-applications .app-title {
    padding: 4px 0 !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
}

/* Global touch target optimization */
.touch-device button,
.touch-device .btn,
.touch-device .action-button {
    min-height: 44px !important;
    min-width: 44px !important;
}

/* Prevent zoom on input focus for iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select, textarea, input[type="text"], input[type="password"], 
    input[type="datetime"], input[type="datetime-local"], 
    input[type="date"], input[type="month"], input[type="time"], 
    input[type="week"], input[type="number"], input[type="email"], 
    input[type="url"], input[type="search"], input[type="tel"], 
    input[type="color"], input[type="range"] {
        font-size: 16px !important;
    }
}

/* ===== MOBILE NAVIGATION ICONS - GLOBAL FIX ===== */
/* Mobile Navigation Icons - Hide on Desktop */
@media (min-width: 769px) {
    .mobile-navigation-icons {
        display: none !important;
    }
    .mobile-report-date {
        display: none !important;
    }
}

/* Mobile Navigation Icons - Show only on Mobile */
@media (max-width: 768px) {
    .report-info .recommendation-icons {
        display: none !important;
    }
    .report-info .report-date {
        display: none !important;
    }
    
    /* Mobile header layout */
    .page-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .header-content {
        width: 100% !important;
        text-align: center !important;
    }
    
    .client-name {
        margin-bottom: 15px !important;
    }
    
    .mobile-navigation-icons {
        display: flex !important;
        justify-content: center !important;
        gap: 6px !important;
        margin-top: 15px !important;
        margin-bottom: 10px !important;
        flex-wrap: wrap !important;
        padding: 0 10px !important;
    }
    
    .mobile-nav-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: rgba(95, 158, 160, 0.1) !important;
        transition: background-color 0.3s ease !important;
    }
    
    .mobile-nav-icon:hover {
        background-color: rgba(95, 158, 160, 0.2) !important;
    }
    
    .mobile-nav-icon img {
        width: 24px !important;
        height: 24px !important;
    }
    
    .mobile-report-date {
        display: block !important;
        font-size: 0.9em !important;
        color: var(--text-light) !important;
        margin-top: 10px !important;
        text-align: center !important;
        font-weight: 500 !important;
    }
    
    /* Hide desktop report-info on mobile */
    .report-info {
        display: none !important;
    }
}

/* style-code.css */
* {
    box-sizing: border-box;
}

:root {
    --primary-color: #0A2342; /* Deep Blue */
    --secondary-color: #5F9EA0; /* Cadet Blue/Teal */
    --accent-purple: #6f42c1; /* Example Accent */
    --success-color: #28a745; /* Green */
    --danger-color: #dc3545;  /* Red */
    --text-color: #3a3a3a; /* Darker Gray */
    --text-light: #6c757d; /* Lighter Gray */
    --light-text-color: #FFFFFF;
    --background-color: #FFFFFF;
    --page-background: #f8f9fa; /* Light gray page background */
    --border-color: #dee2e6;
    --card-border-radius: 0.75rem; /* More rounded corners */
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    --font-family: 'Lato', sans-serif;
    --page-width: 100%; /* Changed to 100% for responsive design */
    --page-height: auto; /* Changed to auto for responsive design */
    --page-padding: 40px; /* Adjusted for better scaling */

    /* Sector-specific colors */
    --sales-color: #39b54a;
    --operations-color: #328cae;
    --support-color: #ff36a8;
    --logistics-color: #bc7c46;
    --administration-color: #ffd800;
}

/* Add responsive viewport scaling */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Allow normal scrolling */
    position: relative; /* Remove fixed position */
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--page-background);
    overflow: auto; /* Allow normal scrolling */
    -webkit-overflow-scrolling: touch;
}

/* Make presentation container responsive */
.presentation-container {
    width: 100%; /* Changed from auto */
    min-height: 100%; /* Changed from height: 100% */
    margin: 0; /* Remove margin */
    background-color: transparent; /* Container is transparent */
    box-shadow: none;
    border: none;
    overflow: visible; /* Allow content to be visible */
    position: relative; /* Added for positioning context */
}

/* Add this new grid definition */
.grid-3-5-col {
    grid-template-columns: 3fr 6fr; /* Ratio 3 to 5 */
}

/* Calculator Card Specifics */
.calculator-card h3 {
    /* Adjust title margin if needed */
    margin-bottom: 2px;
}
.calculator-card .subtle {
     margin-bottom: 4px; /* or your preferred value */
}

.calculator-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8em;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0; /* Remove bottom margin to align with chart */
}
.calculator-table th, .calculator-table td {
    border: 1px solid var(--border-color);
    padding: 7.6px 9.5px; /* Reduced by 5% from 8px 10px */
    text-align: left;
    vertical-align: middle;
}
.calculator-table thead th {
    background-color: #f1f3f5; /* Light gray header */
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1em;
    border-bottom-width: 2px;
    border-color: var(--secondary-color);
}
/* Column width adjustments */
.calculator-table th:first-child,
.calculator-table td:first-child {
    width: 45%; /* Increased width for sector column */
}
/* Input column */
.calculator-table td:nth-child(2) {
    width: 18%; /* Slightly reduced width */
}
/* Savings columns */
.calculator-table td:nth-child(3),
.calculator-table td:nth-child(4),
.calculator-table tfoot td:nth-child(3),
.calculator-table tfoot td:nth-child(4) {
     text-align: right;
     font-weight: 700;
     width: 18.5%; /* Slightly reduced width */
}
.calculator-table td:nth-child(3), .calculator-table tfoot td:nth-child(3) { color: var(--success-color); }
.calculator-table td:nth-child(4), .calculator-table tfoot td:nth-child(4) { color: var(--success-color); } /* Changed from accent-purple to success-color */

/* Total row specific styles */
.calculator-table tfoot td {
    font-weight: 700;
    background-color: #f1f3f5; /* MATCHES HEADER BACKGROUND */
    border-top: 2px solid var(--secondary-color);
    border-bottom: 1px solid var(--border-color);

    /* === THE DEFINITIVE HEIGHT FIX === */
    /* This adds extra vertical padding ONLY to the footer cells to force them
       to match the height of the body rows which contain taller slider components. */
    padding-top: 11.5px !important;
    padding-bottom: 11.5px !important;
}
.calculator-table tfoot td:nth-child(2) {
    text-align: right;
    color: var(--primary-color); /* Total expenses color */
}


/* Input field styling */
.calculator-table input[type="number"] {
    width: 90%; /* Fill most of the cell */
    padding: 4.75px 7.6px; /* Reduced by 5% from 5px 8px */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: var(--font-family);
    font-size: 1em; /* Inherit cell font size */
    box-sizing: border-box;
    text-align: right;
    animation: blink-input 2s infinite;
}

@keyframes blink-input {
    0% { border-color: var(--border-color); box-shadow: none; }
    50% { border-color: var(--secondary-color); box-shadow: 0 0 5px rgba(95, 158, 160, 0.5); }
    100% { border-color: var(--border-color); box-shadow: none; }
}

.calculator-table input[type="number"]:focus {
    border-color: var(--secondary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(95, 158, 160, 0.25); /* Subtle focus ring */
    animation: none; /* Stop blinking when focused */
}
/* Hide spinner buttons for cleaner look (optional) */
.calculator-table input[type="number"]::-webkit-outer-spin-button,
.calculator-table input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.calculator-table input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

/* Ensure output spans take space */
.calculator-table span {
    display: inline-block;
    min-width: 80px; /* Increased for larger format */
}

/* PDF adjustments for calculator (inputs won't be interactive in PDF) */
@media print {
    .calculator-table input[type="number"] {
        border: none; /* Remove border for cleaner print */
        background-color: transparent !important;
        box-shadow: none;
        padding: 5px 0; /* Adjust padding */
        width: 100%; /* Allow text to fill if needed */
         /* Appearance: Show value as text */
    }
    .calculator-table thead th {
        background-color: #f1f3f5 !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
     .calculator-table tfoot td {
        background-color: #f8f9fa !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    /* Ensure colors print */
    .calculator-table td:nth-child(3), .calculator-table tfoot td:nth-child(3) { color: var(--success-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .calculator-table td:nth-child(4), .calculator-table tfoot td:nth-child(4) { color: var(--success-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
     .calculator-table tfoot td:nth-child(2) { color: var(--primary-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
}


.comparison-card li {
     /* ... other list styles */
     line-height: 1.4; /* <<< REVERTED: Back to original */
     color: var(--text-light);
}
/* --- Page Structure --- */
.page {
    padding: var(--page-padding);
    background-color: var(--page-background);
    min-height: 100%; /* Changed from height: 100% */
    width: 100%; /* Changed from 100vw */
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible; /* Allow content to be visible */
}

.page-1 {
     page-break-after: always;
}
.page-2 {
    page-break-before: always; /* Ensure it starts on a new page */
}

/* Remove the page footer */
.page-footer {
    display: none; /* Hide the footer completely */
}

/* --- Modern Header --- */
.page-header {
    text-align: left;
    margin-top: -25px; /* Increased from -35px to give more space at top */
    margin-bottom: 10px; /* Reduced by additional 50% from 19px */
    padding-bottom: 3px; /* Reduced by additional 50% from 6px */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative; /* Added for absolute positioning of date */
}

.page-header .report-title {
    font-size: 1.6em; /* Increased for larger format */
    color: var(--primary-color);
    margin: 0; /* Removed margin completely */
    line-height: 1.1; /* Reduced line height for tighter spacing */
    font-weight: 700;
}

.page-header .client-name {
    font-size: 1.3em; /* Increased for larger format */
    color: var(--secondary-color);
    margin: 0 0 2px 0; /* Already reduced */
    line-height: 1.1; /* Reduced line height for tighter spacing */
    font-weight: 400;
}

.page-header .report-info {
    font-size: 1em; /* Increased for larger format */
    color: var(--text-light);
    margin: 0;
    position: absolute;
    right: 20px;
    top: 5px; /* Adjusted absolute position from top */
    padding: 0; /* Remove all padding */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px; /* Fixed 3px gap */
}

.report-date {
    color: var(--text-color);
    font-size: 0.9em;
    margin: 0; /* Remove all margins */
    padding: 0; /* Remove all padding */
    line-height: 1.2; /* Tightened line height */
    height: auto; /* Let content determine height */
}

.executive-summary-title {
    color: var(--primary-color);
    font-size: 1.2em;
    font-weight: 600;
    margin: 0; /* Remove all margins */
    padding: 0; /* Remove all padding */
    line-height: 1.2; /* Tightened line height */
    height: auto; /* Let content determine height */
}

/* Recommendation Icons in Header */
.recommendation-icons {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    height: 16px;
    gap: 6px;
}

.recommendation-icons .recommendation-icon {
    width: 16px;
    height: 16px;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: block;
    opacity: 0;
    transform: scale(0.5);
    animation: iconFadeInScale 0.5s ease-out forwards;
}

.recommendation-icons .recommendation-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
}

.recommendation-icons .recommendation-icon .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.recommendation-icons .recommendation-icon:hover {
    transform: scale(1.2);
}

.recommendation-icons .recommendation-icon:hover .hover-img {
    opacity: 1;
}

.page-header .logo-image {
    max-width: 200px; /* Increased for larger format */
    height: auto;
    margin-right: 19px; /* Already reduced */
    margin-top: 0; /* Ensure no top margin */
    align-self: flex-start; /* Align with the top of the text */
    padding-top: 10px; /* Increased from 5px to give more space at top */
}

.page-header .header-content {
    flex: 1;
}

/* --- Card Styling --- */
.card {
    background-color: var(--background-color);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    padding: 20px 25px; /* Restored to original 20px 25px */
    margin-bottom: 25px; /* Restored to original value */
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
    display: flex; /* Allow vertical flex inside cards */
    flex-direction: column;
}
.card > *:last-child {
    margin-bottom: 0; /* Remove margin from last element */
}

/* --- Grid Layouts --- */
.grid-container {
    display: grid;
    gap: 15px; /* Reduced from 25px */
    align-items: stretch; /* Make items stretch to fill height */
}
.grid-2-col {
    grid-template-columns: repeat(2, 1fr);
}
.grid-3-col {
    grid-template-columns: repeat(3, 1fr);
}
/* Adjust grid gap for specific sections if needed */
.key-opportunities-grid { margin-top: 25px; } /* Restored to original 25px */

/* --- Content Styles --- */
h2 { /* Section Titles */
    color: var(--primary-color);
    font-size: 1.3em; /* Reduced by 30% from 1.6em */
    margin-top: 0; /* Reset top margin for card content */
    margin-bottom: 3px; /* Reduced by additional 50% from 7px */
    font-weight: 700;
}
h3 { /* Card Sub-Titles */
    color: var(--primary-color);
    font-size: 1.3em; /* Increased for larger format */
    margin-top: 0; /* Reset top margin inside card */
    margin-bottom: 2px; /* Reduced by additional 50% from 5px */
    font-weight: 700;
}
p {
    margin-bottom: 0.075em; /* Reduced by additional 50% from 0.15em */
    color: var(--text-color);
    font-size: 1.1em; /* Increased for larger format */
    flex-grow: 1; /* Allow paragraphs to take space */
}
p.subtle {
     color: var(--text-light);
     font-size: 1em; /* Increased for larger format */
}

strong { font-weight: 700; color: var(--primary-color); }
.highlight { color: var(--primary-color); font-weight: 700; }

/* --- Compact Table Style --- */
.compact-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 7px; /* Reduced by 50% from 15px */
    font-size: 1em; /* Increased for larger format */
    border-radius: 8px;
    overflow: hidden;
}
.compact-table th, .compact-table td {
    border: 1px solid var(--border-color);
    padding: 10px 12px; /* Increased for larger format */
    text-align: left;
    vertical-align: middle;
}
.compact-table thead th {
    background-color: #f1f3f5; /* Light gray header */
    color: var(--primary-color);
    font-weight: 700;
    border-bottom-width: 2px;
    border-color: var(--secondary-color);
}
.compact-table td:nth-child(2), .compact-table td:nth-child(3) {
     text-align: right; /* Align numbers right */
     font-weight: 700;
}
 .compact-table td:nth-child(2) { color: var(--success-color); }/* Savings green */
 .compact-table td:nth-child(3) { color: var(--danger-color); } /* Cost red */


/* --- Image Placeholder --- */
.image-placeholder {
    border: 2px dashed var(--border-color);
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-light);
    font-size: 1.2em; /* Increased for larger format */
    font-weight: bold;
    min-height: 200px; /* Increased for larger format */
}

/* --- Comparison Styles (Adapted for Card) --- */
.comparison-card {
     padding: 20px 25px; /* Restored to original 20px 25px */
     /* margin: 0; Ensure no margins at all */
}
.comparison-card h4 {
    margin-top: 0; margin-bottom: 15px; font-weight: 700; font-size: 1.2em; display: flex; align-items: center; /* Increased for larger format */
}
.comparison-card ul { list-style: none; padding-left: 0; margin: 0 0 20px 0; } /* Increased margin for larger format */
.comparison-card li { margin-bottom: 8px; padding-left: 30px; position: relative; font-size: 1.1em; line-height: 1.4; color: var(--text-light); } /* Increased for larger format */
.comparison-card li:last-child { margin-bottom: 0; }
.comparison-card li::before { content: ''; position: absolute; left: 0; top: 1px; font-weight: bold; font-size: 1.2em; line-height: 1; width: 24px; text-align: center; } /* Increased for larger format */
.comparison-card ul.upsides li::before { content: '+'; color: var(--success-color); }
.comparison-card ul.downsides li::before { content: '−'; color: var(--danger-color); }
.comparison-card .upsides h4 { color: var(--success-color); }
.comparison-card .downsides h4 { color: var(--danger-color); }

/* --- CTA Button --- */
 .cta-button {
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--light-text-color);
    padding: 15px 30px; /* Increased for larger format */
    text-decoration: none;
    border-radius: 8px; /* Increased for larger format */
    font-weight: 700;
    font-size: 1.2em; /* Increased for larger format */
    transition: background-color 0.3s ease, box-shadow 0.2s ease;
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Increased for larger format */
    text-align: center;
    margin-top: auto; /* Push button to bottom of card */
}
.cta-button:hover { background-color: #4a7c7e; box-shadow: 0 6px 12px rgba(0,0,0,0.15); } /* Increased for larger format */

.executive-summary .cta-buttons .cta-button {
    margin-top: 0; /* Override general 'margin-top: auto' to prevent sticking to bottom */
}

/* --- PDF Specific Tweaks --- */
@media print {
    body { background-color: var(--background-color); font-size: 9pt; }
    .presentation-container { width: 100%; }
    .page { padding: 25px; background-color: var(--background-color); box-shadow: none; border: none; min-height: 0; }
    .card { box-shadow: none; border: 1px solid #ccc; background-color: var(--background-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .image-placeholder { background-color: #e9ecef !important; border: 1px dashed #aaa !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .compact-table thead th { background-color: #f1f3f5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .compact-table td:nth-child(2) { color: var(--success-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .compact-table td:nth-child(3) { color: var(--danger-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .comparison-card { background-color: var(--background-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .comparison-card ul.upsides li::before, .comparison-card .upsides h4 { color: var(--success-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .comparison-card ul.downsides li::before, .comparison-card .downsides h4 { color: var(--danger-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cta-button { background-color: var(--secondary-color) !important; color: var(--light-text-color) !important; box-shadow: none; border: 1px solid var(--secondary-color) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
}

/* Add special style for Executive Summary */
.executive-summary {
    display: flex;
    flex-direction: column;
    height: auto; /* Match calculator card height */
    max-height: 100%; /* Stay within container */
    overflow-y: auto; /* Add scrolling if needed */
}

.executive-summary h2 {
    margin-bottom: 10px; /* Fixed margin below heading */
}

.executive-summary p {
    margin: 0 0 15px 0;
    color: #000000; /* Changed to black */
    font-size: 1.0em; /* UPDATED: Now set to 1.0em size */
    line-height: 1.4; /* Restored to original value */
}

.executive-summary p.subtle {
    color: #000000; /* Changed to black */
    font-size: 1.0em; /* UPDATED: Now matches the first paragraph at 1.0em */
    margin-bottom: 10px;
}

.executive-summary p:last-child {
    margin-bottom: 0; /* No margin for last paragraph */
}

.executive-summary .spacer {
    display: none; /* Remove spacer to allow content to fill space */
}

/* Ensure both cards in the grid have equal height */
.grid-3-5-col .card {
    height: auto; /* Allow natural height */
    max-height: 100%; /* Constrain to container */
}

/* Make content area fill available space */
.content-wrapper {
    display: flex;
    flex-direction: column;
}

/* Apply the same spacing approach as the calculator section */
.executive-summary p.subtle {
    margin-bottom: 5px; /* Same as calculator-card .subtle */
}

/* Add style for the 1.x sections container */
.sections-container-1x {
    background-color: #e6f7f8;
    border-radius: 12px;
    padding: 10px 10px 10px 10px !important; /* 10px bottom padding only */
    margin-bottom: 10px;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Configure grid container to properly fit within the green background */
.sections-container-1x .grid-container {
    height: auto; /* Let it size naturally */
    max-height: 100%;
    margin: 0; /* Remove any default margins */
    gap: 15px; /* Match the grid gap from earlier styles */
}

/* Fix card margins to be identical and minimal */
.sections-container-1x .card {
    margin: 0; /* No margins on cards inside sections container */
    height: auto; /* Natural height based on content */
}

/* Adjust horizontal sections to not affect the spacing */
.horizontal-sections {
    margin-top: 10px; /* Small gap between green bg and horizontal sections */
}

.sections-container-1x h1 {
    margin-top: 0;
    margin-bottom: 10px; /* Reduced from 15px */
    font-size: 1.5em;
    color: var(--primary-color);
    font-weight: 700;
}

/* Add style for the second sections container */
.sections-container-2x {
    background-color: rgba(95, 158, 160, 0.45); /* Using --secondary-color with opacity */
    border-radius: 12px;
    padding: 10px; /* Reduced by additional 50% from 20px */
    margin-bottom: 10px; /* Reduced by additional 50% from 20px */
    height: calc(100vh - 400px); /* Fixed height to ensure it stays above bottom */
    overflow: visible; /* Allow content to be visible */
    display: flex;
    flex-direction: column;
}

/* Add style for split calculator card */
.calculator-card {
    display: flex;
    flex-direction: row;
    position: relative;
    height: auto; /* Allow height to adjust based on content */
    max-height: 100%; /* Ensure it doesn't exceed container height */
    overflow: visible; /* Allow content to be visible */
}

.calculator-content {
    flex: 2.5;
    padding-right: 20px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    max-height: 100%; /* Ensure it doesn't exceed container height */
    overflow: visible; /* Allow content to be visible */
}

.calculator-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align to top */
    padding-left: 20px;
    max-height: 100%; /* Ensure it doesn't exceed container height */
    overflow: visible; /* Allow content to be visible */
}

.calculator-image-placeholder {
    width: 100%; /* Reverted back to 100% */
    aspect-ratio: 1 / 1; /* Force 1:1 square ratio */
    background-color: #e9ecef;
    border: 1px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 0.9em;
    margin-bottom: 10px;
    animation: popIn 0.8s ease-out 1.4s both;
}

/* Add styles for chart headers */
.chart-header {
    margin-top: 0;
    margin-bottom: 2.5px; /* Reduced by another 50% from 5px */
    text-align: left; /* Left-bound instead of center */
    color: var(--primary-color);
    animation: fadeIn 0.8s ease-out 1.3s both;
}

.chart-header:nth-of-type(2) {
    animation-delay: 1.6s;
}

.calculator-image-placeholder:nth-of-type(2) {
    animation-delay: 1.5s;
}

/* Add styles for the radar chart */
.radar-chart-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.radar-chart {
    width: 100%;
    height: 100%;
}

.radar-chart-legend {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    font-size: 0.7em;
    color: var(--text-light);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.radar-chart-legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.radar-chart-legend-checkbox {
    margin-right: 5px;
    cursor: pointer;
    width: 12px;
    height: 12px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #ccc;
    border-radius: 2px;
}

.radar-chart-legend-checkbox:checked {
    background-color: currentColor;
}

.radar-chart-legend-label {
    cursor: pointer;
    user-select: none;
}

.radar-chart-legend-item.current-expenses .radar-chart-legend-checkbox {
    color: #0A2342;
}

.radar-chart-legend-item.after-3p .radar-chart-legend-checkbox {
    color: #28a745;
}

.radar-chart-legend-item.after-custom .radar-chart-legend-checkbox {
    color: #5F9EA0;
}

/* Apply chart colors to calculator table columns */
.calculator-table thead th:nth-child(3) {
    color: var(--success-color); /* Green for 3rd Party AI */
}
.calculator-table thead th:nth-child(4) {
    color: var(--secondary-color); /* Teal for Custom AI */
}

/* Reduce spacing in calculator card */
.calculator-card h2 {
    margin-bottom: 2px; /* Reduced spacing below heading */
}

.calculator-card .subtle {
    color: #000000; /* Changed to black */
    font-size: 0.9em;
    margin-bottom: 4px;
}

/* Add styles for the bar chart */
.bar-chart-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bar-chart-tabs {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.bar-chart-tab {
    padding: 5px 10px;
    cursor: pointer;
    text-align: center;
    flex: 1;
    font-size: 0.8em;
    color: var(--text-light);
    border-bottom: 2px solid transparent;
}

.bar-chart-tab.active {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    font-weight: 700;
}

.bar-chart-content {
    width: 100%;
    height: calc(100% - 30px);
    position: relative;
}

.bar-chart-view {
    width: 100%;
    height: 100%;
    display: none;
}

.bar-chart-view.active {
    display: block;
}

.bar-chart {
    width: 100%;
    height: 100%;
}

.bar-chart-legend {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    font-size: 0.7em;
    color: var(--text-light);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.bar-chart-legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.bar-chart-legend-color {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 2px;
}

.bar-chart-legend-item.third-party .bar-chart-legend-color {
    background-color: #4a4a4a;
    opacity: 0.5;
}

.bar-chart-legend-item.custom .bar-chart-legend-color {
    background-color: #4a4a4a;
}

/* Add animation keyframes */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    70% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes blink-input {
    0% { border-color: var(--border-color); box-shadow: none; }
    50% { border-color: var(--secondary-color); box-shadow: 0 0 5px rgba(95, 158, 160, 0.5); }
    100% { border-color: var(--border-color); box-shadow: none; }
}

/* Apply animations to elements */
.page-header {
    animation: fadeIn 1s ease-out;
}

.executive-summary h2 {
    animation: fadeIn 0.8s ease-out 0.3s both;
}

.executive-summary p {
    animation: fadeIn 0.8s ease-out 0.5s both;
}

.executive-summary p:nth-child(2) {
    animation-delay: 0.7s;
}

.executive-summary p:nth-child(3) {
    animation-delay: 0.9s;
}

.calculator-card h2 {
    animation: fadeIn 0.8s ease-out 0.3s both;
}

.calculator-card .subtle {
    animation: fadeIn 0.8s ease-out 0.5s both;
}

.calculator-card .subtle:nth-child(2) {
    animation-delay: 0.7s;
}

.calculator-card .subtle:nth-child(3) {
    animation-delay: 0.9s;
}

.calculator-table {
    animation: popIn 0.8s ease-out 1.1s both;
}

.calculator-table tr {
    animation: slideUp 0.5s ease-out both;
}

.calculator-table tr:nth-child(1) { animation-delay: 1.2s; }
.calculator-table tr:nth-child(2) { animation-delay: 1.3s; }
.calculator-table tr:nth-child(3) { animation-delay: 1.4s; }
.calculator-table tr:nth-child(4) { animation-delay: 1.5s; }
.calculator-table tr:nth-child(5) { animation-delay: 1.6s; }
.calculator-table tr:nth-child(6) { animation-delay: 1.7s; }

.sections-container-2x .card {
    animation: slideUp 0.8s ease-out both;
}

.sections-container-2x .card:nth-child(1) { animation-delay: 2.4s; }
.sections-container-2x .card:nth-child(2) { animation-delay: 2.6s; }
.sections-container-2x .card:nth-child(3) { animation-delay: 2.8s; }
.sections-container-2x .card:nth-child(4) { animation-delay: 3.0s; }
.sections-container-2x .card:nth-child(5) { animation-delay: 3.2s; }

/* Add animation keyframes for bar growth */
@keyframes growBar {
    from { height: 0; }
    to { height: var(--target-height); }
}

/* Add animation keyframes for bar chart fade in */
@keyframes fadeInChart {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Add horizontal sections container styles */
.horizontal-sections {
    display: flex;
    flex-direction: row;
    overflow-x: auto; /* Enable horizontal scrolling */
    gap: 20px;
    padding: 20px;
    margin-top: 20px;
    position: relative;
}

/* Remove scrollbar styles since we're not scrolling */
.horizontal-sections::-webkit-scrollbar {
    display: none;
}

/* Add section card styles */
.section-card {
    flex: 0 0 300px;
    border-radius: var(--card-border-radius);
    background-color: var(--background-color);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    padding: 20px;
    margin-right: 15px;
    height: 200px;
    overflow-y: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.section-card h2 {
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 10px;
}

.section-card p {
    color: var(--text-color);
    margin-bottom: 10px;
}

/* Info button and tooltip styles */
.info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid #000;
    border-radius: 2px;
    margin-left: 8px;
    background: transparent;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    font-size: 12px;
    font-weight: bold;
    color: #000;
}

.tooltip {
    position: absolute;
    visibility: hidden;
    width: 200px;
    background-color: #fff;
    color: var(--text-color);
    text-align: left;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: normal;
    top: -55px;
    right: 236px; /* Moved 250px to the left from 26px */
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: 1px solid var(--border-color);
    z-index: 100;
}

.info-button:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* Chart header with info button positioning */
.chart-header {
    display: flex;
    align-items: center;
    position: relative;
}

/* Recommendation Icons Animation Styles */
@keyframes fadeInIcon {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Base styles for recommendation icons container */
.recommendation-icons {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    height: 16px;
    gap: 6px;
}

/* Base styles for recommendation icons */
.recommendation-icon {
    width: 16px;
    height: 16px;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: block;
}

/* Icon image styles */
.recommendation-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
}

/* Hover image styles */
.recommendation-icon .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Hover effects */
.recommendation-icon:hover {
    transform: scale(1.2);
}

.recommendation-icon:hover .hover-img {
    opacity: 1;
}

/* Animation keyframes */
@keyframes iconFadeInScale {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Apply animation to icons */
.recommendation-icon {
    animation: iconFadeInScale 0.5s ease-out forwards;
}

/* Staggered animation delays for icons */
.recommendation-icon:nth-child(1) { animation-delay: 0.2s; }
.recommendation-icon:nth-child(2) { animation-delay: 0.4s; }
.recommendation-icon:nth-child(3) { animation-delay: 0.6s; }
.recommendation-icon:nth-child(4) { animation-delay: 0.8s; }
.recommendation-icon:nth-child(5) { animation-delay: 1.0s; }
.recommendation-icon:nth-child(6) { animation-delay: 1.2s; }
.recommendation-icon:nth-child(7) { animation-delay: 1.4s; }
.recommendation-icon:nth-child(8) { animation-delay: 1.6s; } /* Added delay for the 8th icon */

/* Label styles */
.recommendation-label {
    opacity: 0;
    animation: fadeInIcon 0.5s ease-out forwards;
}

/* Staggered animation delays for labels */
.recommendation-label:nth-child(1) { animation-delay: 0.3s; }
.recommendation-label:nth-child(2) { animation-delay: 0.5s; }
.recommendation-label:nth-child(3) { animation-delay: 0.7s; }
.recommendation-label:nth-child(4) { animation-delay: 0.9s; }
.recommendation-label:nth-child(5) { animation-delay: 1.1s; }
.recommendation-label:nth-child(6) { animation-delay: 1.3s; }
.recommendation-label:nth-child(7) { animation-delay: 1.5s; }
.recommendation-label:nth-child(8) { animation-delay: 1.7s; }

/* Hover image transitions for all icons */
.recommendation-icon[alt="AI Report"]:hover {
    content: url('images/ai-report-hover.png');
}

.recommendation-icon[alt="Administration"]:hover {
    content: url('images/administration-hover.png');
}

.recommendation-icon[alt="Support"]:hover {
    content: url('images/support-hover.png');
}

.recommendation-icon[alt="Logistics"]:hover {
    content: url('images/logistics-hover.png');
}

.recommendation-icon[alt="Sales"]:hover {
    content: url('images/sales-hover.png');
}

.recommendation-icon[alt="Operations"]:hover {
    content: url('images/operations-hover.png');
}

.recommendation-icon[alt="Conclusion"]:hover {
    content: url('images/conclusio-hover.png');
}

/* Style for the CTA buttons container */
.cta-buttons {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    justify-content: center;
}

/* Style for the CTA buttons */
.cta-button {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.cta-button.primary {
    background-color: var(--sales-color);
    color: white;
    border: 2px solid var(--sales-color);
}

.cta-button.secondary {
    background-color: transparent;
    color: var(--sales-color);
    border: 2px solid var(--sales-color);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Add CSS for the framed * symbol and popup */
.info-asterisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    margin-left: 6px;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-light);
    cursor: pointer;
    position: relative;
    vertical-align: super;
}

.info-asterisk .popup {
    visibility: hidden;
    width: 280px;
    background-color: white;
    color: var(--text-color);
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 9999;
    top: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5;
}

.info-asterisk:hover .popup {
    visibility: visible;
    opacity: 1;
}

.info-asterisk .popup::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent white transparent;
}

/* === Layout for Side-by-Side Sections === */
/* Comment out the grid styles that might be conflicting with the inline styles */
/*
.sections-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin-bottom: 0;
    width: 100%;
    min-height: 0;
}

.sections-row > .card {
    overflow: auto;
    margin: 0;
}
*/

/* Comment out the .sections-container-1x styles too */
/*
.sections-container-1x {
    background-color: #e6f7f8;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 0;
    height: calc(100vh - 55px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
*/

/* Style for the new text header */
.dynamic-header-title {
    font-size: 1.1em;
    color: var(--primary-color);
    font-weight: 600;
    margin-top: 5px;
    text-align: right;
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Hide from accessibility tree and layout */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
    pointer-events: none; /* Prevent interaction when hidden */
    width: 100%; /* Ensure it takes full width for text-align */
}

/* Show the title when the first icon in the sibling container is hovered */
/* REMOVED - This selector is incorrect because the title is not a sibling of the icon
.recommendation-icons .recommendation-icon:first-child:hover ~ .overview-calculator-title {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
*/

/* === Add Keyframes if Missing === */
/* @keyframes fadeIn already exists */

@keyframes slideInFromRight {
    0% {
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* === Add Base Animations === */

/* Apply to cards within page-2 specifically */
.page-2 .card.comparison-card {
    opacity: 0; /* Start hidden */
    animation: slideInFromRight 0.4s ease-out forwards;
}

.comparison-card h4 {
    opacity: 0; /* Start hidden */
    animation: slideInFromRight 0.3s ease-out forwards;
}

.comparison-card li {
    opacity: 0; /* Start hidden */
    animation: slideInFromRight 0.25s ease-out forwards;
}

.ai-solutions-box {
    opacity: 0; /* Start hidden */
    animation: fadeIn 0.4s ease-out forwards;
}

.ai-solutions-box p {
    font-size: 0.9em;
    line-height: 1.4;
    margin-top: -2px; /* Reduce gap between header and content */
    margin-bottom: 3px; /* Add space after the paragraph */
}

/* === Add Specific Delays === */

/* Card Delays */
.page-2 .sections-row > .card.comparison-card:nth-child(1) {
    animation-delay: 0.25s;
}
.page-2 .sections-row > .card.comparison-card:nth-child(2) {
    animation-delay: 0.35s; /* This targets the Admin card, but only its initial slide-in */
}

/* Comparison Heading Delays (within first card) */
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(1) h4 {
    animation-delay: 0.4s;
}
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(2) h4 {
    animation-delay: 0.5s;
}

/* Comparison List Item Delays (within first card) */
/* Third-Party AI Bullet Points */
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(1) .upsides li:nth-child(1) { animation-delay: 0.55s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(1) .upsides li:nth-child(2) { animation-delay: 0.6s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(1) .upsides li:nth-child(3) { animation-delay: 0.65s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(1) .downsides li:nth-child(1) { animation-delay: 0.7s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(1) .downsides li:nth-child(2) { animation-delay: 0.75s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(1) .downsides li:nth-child(3) { animation-delay: 0.8s; }

/* Custom AI Bullet Points */
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(2) .upsides li:nth-child(1) { animation-delay: 0.85s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(2) .upsides li:nth-child(2) { animation-delay: 0.9s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(2) .upsides li:nth-child(3) { animation-delay: 0.95s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(2) .downsides li:nth-child(1) { animation-delay: 1.0s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(2) .downsides li:nth-child(2) { animation-delay: 1.05s; }
.page-2 .sections-row > .card.comparison-card:nth-child(1) .comparison-column:nth-child(2) .downsides li:nth-child(3) { animation-delay: 1.1s; }

/* AI Solutions Box Delay (within first card) */
.page-2 .sections-row > .card.comparison-card:nth-child(1) .ai-solutions-box {
    animation-delay: 1.2s;
}

/* === Animations for Second Card (Admin Savings) === */

/* Base Animation Styles (applied via more specific selectors below) */
.page-2 .sections-row > .card.comparison-card:nth-child(2) .administration-header,
.page-2 .sections-row > .card.comparison-card:nth-child(2) > p:nth-of-type(1),
.page-2 .sections-row > .card.comparison-card:nth-child(2) > div:nth-of-type(1),
.page-2 .sections-row > .card.comparison-card:nth-child(2) > p:nth-of-type(2),
.page-2 .sections-row > .card.comparison-card:nth-child(2) .key-applications {
    opacity: 0; /* Start hidden */
}

/* Specific Animations & Delays */
.page-2 .sections-row > .card.comparison-card:nth-child(2) .administration-header {
    animation: slideInFromRight 0.3s ease-out forwards;
    animation-delay: 0.6s; /* Changed from 1.3s */
}

.page-2 .sections-row > .card.comparison-card:nth-child(2) > p:nth-of-type(1) { /* Description Para */
    animation: slideInFromRight 0.3s ease-out forwards;
    animation-delay: 0.6s; /* Changed from 1.35s */
}

.page-2 .sections-row > .card.comparison-card:nth-child(2) > div:nth-of-type(1) { /* Input + Table Container */
    animation: fadeIn 0.4s ease-out forwards; /* Use fadeIn for this block */
    animation-delay: 0.7s; /* Changed from 1.4s */
}

.page-2 .sections-row > .card.comparison-card:nth-child(2) > p:nth-of-type(2) { /* Key Apps Heading */
    animation: slideInFromRight 0.3s ease-out forwards;
    animation-delay: 0.8s; /* Changed from 1.5s */
}

.page-2 .sections-row > .card.comparison-card:nth-child(2) .key-applications {
    animation: slideInFromRight 0.3s ease-out forwards;
    animation-delay: 0.9s; /* Changed from 1.45s */
}


/* NOTE: We are intentionally NOT adding delays for elements within the second card (Admin Savings) */
/* like .roi-section as their animations are handled by JS or excluded */


/* ... rest of the styles ... */

.calculator-header-row th {
    background-color: #f8f9fa;
    border-bottom: 2px solid var(--secondary-color);
    font-weight: 700;
    color: var(--primary-color);
}

.card.executive-summary {
    height: auto !important;
}

.sections-container {
    /* THE FIX: REMOVED the destructive height and overflow rules that were breaking the entire page layout. */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.sections-container-1x {
    flex: 1 1 auto;
    overflow-y: auto !important;
    min-height: 0 !important;
    height: auto !important;
}
.grid-container.grid-3-5-col {
    height: 100%;
    min-height: 0;
}
.card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
.calculator-table {
    display: table;
    max-height: none;
    overflow: visible;
}

.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    height: calc(100vh - 20px);
    overflow-y: auto;
}

.white-frame {
    background-color: white;
    border-radius: 10px;
    padding: 15px 15px 25px 15px; /* Added exactly 5px more to bottom padding (from 20px to 25px) */
    margin-bottom: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.white-frame p {
    margin: 0;
    padding: 0;
    line-height: 1.2;
    font-size: 0.9em;
}

.white-frame h3 {
    margin: 0 0 3px 0;
    padding: 0;
    font-size: 1em;
    font-weight: 600;
    color: #333;
}

.white-frame ul {
    margin: 3px 0;
    padding-left: 15px;
}

.white-frame li {
    margin: 1px 0;
    line-height: 1.2;
}

.white-frame .key-applications {
    margin-top: 3px;
}

.white-frame .key-applications li {
    margin: 1px 0;
    line-height: 1.2;
}

.white-frame .key-applications li strong {
    display: block;
    margin-bottom: 0;
    font-size: 0.85em;
}

.white-frame .key-applications li span {
    font-size: 0.8em;
    line-height: 1.1;
    display: block;
    margin-top: 0;
}

/* Remove all savings table styles since we're using inline styles */
.savings-table {
    width: 100%;
}

/* Force specific column widths for savings table */
/* DISABLED - Using inline styles instead
.savings-table th:first-child,
.savings-table td:first-child {
    width: 24% !important;
    min-width: 24% !important;
    max-width: 24% !important;
    white-space: nowrap !important;
}

.savings-table th:nth-child(2),
.savings-table td:nth-child(2) {
    width: 18% !important;
    min-width: 18% !important;
    max-width: 18% !important;
}

.savings-table th:nth-child(3),
.savings-table td:nth-child(3) {
    width: 22% !important;
    min-width: 22% !important;
    max-width: 22% !important;
}

.savings-table th:nth-child(4),
.savings-table td:nth-child(4) {
    width: 18% !important;
    min-width: 18% !important;
    max-width: 18% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.savings-table th:nth-child(5),
.savings-table td:nth-child(5) {
    width: 22% !important;
    min-width: 22% !important;
    max-width: 22% !important;
}
*/

.savings-table th {
    color: #000 !important;
}

/* Bar Chart Tabs for Sales and Operations */
.bar-chart-tab.sales {
    color: var(--sales-color);
}
.bar-chart-tab.sales.active {
    color: #fff;
    background: var(--sales-color);
    border-bottom: 2px solid var(--sales-color);
}
.bar-chart-tab.operations {
    color: var(--operations-color);
}
.bar-chart-tab.operations.active {
    color: #fff;
    background: var(--operations-color);
    border-bottom: 2px solid var(--operations-color);
}

/* Bar Segment Colors for Nettoeinsparungen (Sales: green, Operations: blue) */
/* SALES */
#sales-netsavings-bar-3p .bar-segment.third-party,
#sales-netsavings-bar-custom .bar-segment.custom {
    background-color: rgba(57,181,74,0.3);
}
#sales-netsavings-bar-3p .bar-segment.third-party.year2,
#sales-netsavings-bar-custom .bar-segment.custom.year2 {
    background-color: rgba(57,181,74,0.6);
}
#sales-netsavings-bar-3p .bar-segment.third-party.year3,
#sales-netsavings-bar-custom .bar-segment.custom.year3 {
    background-color: rgba(57,181,74,1.0);
}
/* OPERATIONS */
#operations-netsavings-bar-3p .bar-segment.third-party,
#operations-netsavings-bar-custom .bar-segment.custom {
    background-color: rgba(50,140,174,0.3);
}
#operations-netsavings-bar-3p .bar-segment.third-party.year2,
#operations-netsavings-bar-custom .bar-segment.custom.year2 {
    background-color: rgba(50,140,174,0.6);
}
#operations-netsavings-bar-3p .bar-segment.third-party.year3,
#operations-netsavings-bar-custom .bar-segment.custom.year3 {
    background-color: rgba(50,140,174,1.0);
}

/* Operations Key Applications Frame */
.operations-key-applications {
    border: 2px solid var(--success-color);
    background: linear-gradient(90deg, var(--success-color) 0%, var(--primary-color) 100%);
    border-radius: 8px;
    padding: 15px;
    color: white;
}

.operations-key-applications h4 {
    color: white;
    margin-bottom: 15px;
}

.operations-key-applications ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.operations-key-applications li {
    color: white;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.operations-key-applications li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: white;
}

/*
 =====================================================================
    MOBILE RESPONSIVE STYLES (Add this section to the end of your CSS)
 =====================================================================
*/

@media (max-width: 768px) {
    /* General page adjustments */
    body {
        -webkit-text-size-adjust: 100%; /* Prevent font scaling on orientation change */
    }

    .page {
        padding: 10px; /* Reduce page padding */
    }

    /* --- Mobile Header --- */
    .page-header {
        flex-direction: column; /* Stack logo and text */
        align-items: center; /* Center-align header items */
        text-align: center;
        margin-top: 0;
        margin-bottom: 15px;
    }

    .page-header .logo-image {
        margin-right: 0;
        margin-bottom: 10px; /* Space between logo and text */
        align-self: center; /* Center the logo */
        max-width: 150px;
    }

    .page-header .header-content {
        width: 100%;
    }

    .page-header .report-info {
        position: static; /* Remove absolute positioning */
        flex-direction: column;
        align-items: center; /* Center-align info */
        margin-top: 10px;
        width: 100%;
    }

    .page-header .report-title,
    .page-header .client-name {
        font-size: 1.4em;
    }

    /* --- Mobile Grid Layout --- */
    .grid-3-5-col,
    .grid-2-col,
    .grid-3-col {
        grid-template-columns: 1fr; /* Stack grid items in a single column */
        gap: 15px;
    }

    /* --- Mobile Card Adjustments --- */
    .card {
        padding: 15px; /* Reduce card padding */
        margin-bottom: 15px;
    }

    h2 { font-size: 1.2em; }
    h3 { font-size: 1.1em; }
    p { font-size: 1em; }

    /* --- Mobile Calculator Card --- */
    .calculator-card {
        flex-direction: column; /* Stack table and charts vertically */
    }

    .calculator-content {
        padding-right: 0;
        border-right: none;
        margin-bottom: 20px; /* Space between table and charts */
    }

    .calculator-images {
        padding-left: 0;
        flex-direction: column; /* Ensure charts stack */
    }

    /* --- Mobile Calculator Table --- */
    .calculator-table {
        font-size: 0.8em;
    }
    
    /* Make table scrollable if it's too wide */
    .calculator-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .calculator-table th,
    .calculator-table td {
        padding: 6px 8px;
        white-space: nowrap; /* Prevent text wrapping in cells */
    }
    
    .expense-slider-container {
        flex-direction: row; /* Keep slider and value horizontal */
        min-width: 100px; /* Give the slider enough space */
    }

    .expense-slider {
        flex-grow: 1; /* Allow slider to take available space */
    }

    /* --- Recommendation Icons --- */
    .executive-summary div[style*="justify-content: space-between"] {
        justify-content: center !important; /* Center icons */
        gap: 10px;
    }

    .executive-summary div[style*="justify-content: space-between"] a {
        width: 28%; /* Allow 3 icons per row */
    }
    
    /* --- Chart Legends --- */
    .radar-chart-legend, .bar-chart-legend {
        position: static; /* Make legend part of the flow */
        flex-direction: column;
        align-items: flex-start;
        margin-top: 10px;
        gap: 5px;
    }
    
    .bar-chart-tabs {
        font-size: 0.9em;
    }
    
    /* --- CTA Buttons --- */
    .cta-buttons {
        flex-direction: column; /* Stack buttons vertically */
        align-items: center;
        gap: 10px;
    }

    .cta-button {
        width: 100%;
        max-width: 280px; /* Set a max-width for consistency */
    }

    /* --- Mobile Executive Summary Spacing Fix --- */
    .executive-summary p {
        margin-bottom: 12px; /* Reduces the default 15px gap after each paragraph */
    }

    /* Reduce the large gap directly above the action buttons */
    .executive-summary .cta-buttons {
        margin-top: 10px; /* Reduces the default 15px gap above the button container */
    }
}

/* =====================================================================
   ROW HEIGHT REDUCTION FIX
   This overrides previous padding rules to make all calculator rows shorter.
   ===================================================================== */
.calculator-table tbody td,
.calculator-table tfoot td {
    padding-top: 4px !important;    /* Drastically reduced from 10px */
    padding-bottom: 4px !important; /* Drastically reduced from 10px */
}

/* =====================================================================
   DESKTOP LAYOUT OVERRIDE - Fix duplicate content issue
   ===================================================================== */
@media (min-width: 769px) {
    .desktop-layout { display: block !important; }
    .mobile-layout { display: none !important; }
}

/* =====================================================================
   MOBILE PAGINATION & NAVIGATION - Global styles for all pages
   ===================================================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mobile-navigation-dots {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 5px;
    background-color: rgba(255, 255, 255, 0.95);
    border-top: 1px solid #e0e0e0;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.nav-icon {
    width: 26.6px;
    height: 26.6px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.6;
    border: 2px solid transparent;
    flex-shrink: 0;
}

.nav-icon:hover { 
    opacity: 0.8; 
    transform: scale(1.1); 
}

.nav-icon.active { 
    opacity: 1; 
    border-color: var(--secondary-color); 
    transform: scale(1.1); 
}

.nav-arrow {
    width: 22.6px;
    height: 22.6px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.9px;
    font-weight: bold;
    transition: all 0.3s ease;
    user-select: none;
    flex-shrink: 0;
}

.nav-arrow:hover { 
    background-color: var(--secondary-darker); 
    transform: scale(1.1); 
}

.nav-arrow:disabled { 
    background-color: #ccc; 
    cursor: not-allowed; 
    transform: none; 
}

/* Add padding to the page body to prevent content from being hidden behind the fixed footer */
@media (max-width: 767px) {
    .page {
        padding-bottom: 80px !important;
    }
}

/* Hide footer on desktop */
@media (min-width: 768px) {
    .mobile-navigation-dots {
        display: none !important;
    }
}