/* Extracted common styles from calculator HTML files */
:root {
    --swept-blue: #3592FF;
    --swept-dark-blue: #2e72d9;
    --swept-light-blue: #e5f0ff;
    --swept-green: #00C79F;
    --swept-dark: #37383F;
    --swept-light-gray: #F5F5F7;
    --swept-gray: #E0E0E0;
    --swept-red: #FF647C;
    --swept-orange: #FFA26B;
    --swept-purple: #6B66FF; /* Added purple for consistency */
}
 .calculator-page * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
 .calculator-page {
    color: var(--swept-dark);
    line-height: 1.6;
    background-color: #f8f9fa;
    padding: 20px;
}

.calculator-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.calculator-container > .calculator-header {
    background-color: var(--swept-dark-blue) !important;
    color: white;
    padding: 20px;
    text-align: center;
}

.calculator-header h2 {
    margin-bottom: 10px;
    font-weight: 600;
}

.calculator-header p {
    opacity: 0.9;
    font-size: 16px;
}

.calculator-body {
    padding: 30px;
}

.section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--swept-gray);
}

.section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.section-icon {
    width: 36px;
    height: 36px;
    background-color: var(--swept-light-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: var(--swept-dark-blue);
}

.section-title {
    font-size: 18px;
    font-weight: 600;
}

/* Style for input group titles */
.input-group-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--swept-dark); /* Use the dark (black) variable */
    display: flex; /* Added for potential icon alignment */
    align-items: center; /* Added for potential icon alignment */
}
.input-group {
    margin-bottom: 25px;
}

.input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
}

.input-field {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.input-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.input-field input, .input-field select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: border 0.3s;
}

.input-field input:focus, .input-field select:focus {
    border-color: var(--swept-blue);
    outline: none;
}

.tooltip-icon {
    cursor: help; /* Indicate interactivity */
    display: inline-flex; /* Align icon properly */
    align-items: center;
    vertical-align: middle; /* Align with text */
    color: var(--swept-blue); /* Keep theme color */
    margin-left: 5px; /* Keep existing margin */
}

.tooltip {
    /* Base styles for positioning and appearance */
    position: absolute;
    z-index: 1070; /* High z-index to appear above most elements */
    display: block;
    font-size: 0.875rem; /* 14px */
    line-height: 1.4;
    background-color: var(--swept-dark); /* Dark background using theme variable */
    color: #fff; /* Light text */
    padding: 0.4rem 0.8rem; /* Padding (~6px 13px) */
    border-radius: 0.25rem; /* Rounded corners (4px) */
    max-width: 220px; /* Max width */
    word-wrap: break-word; /* Wrap long text */
    
    /* Hiding styles */
    visibility: hidden;
    opacity: 0;
    pointer-events: none; /* Prevent interaction when hidden */
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    
    /* Positioning relative to icon - adjust as needed */
    top: 100%;
    left: 0;
    margin-top: 5px; /* Small gap */
}

.tooltip.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto; /* Allow interaction if needed when shown */
}

/* Removed .tooltip:after pseudo-element */

.input-prefix {
    position: absolute;
    left: 15px;
    top: 39px;
    font-size: 16px;
    color: #555;
    z-index: 1;
}

.input-suffix {
    position: absolute;
    right: 15px;
    top: 39px;
    font-size: 16px;
    color: #555;
    z-index: 1;
}

.prefix-padding {
    padding-left: 30px !important;
}

.suffix-padding {
    padding-right: 45px !important; /* Applied fix */
}

.service-item {
    background-color: var(--swept-light-gray);
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.service-name {
    flex: 2;
    min-width: 150px;
    font-weight: 500;
}

.service-frequency, .service-time {
    flex: 1;
    min-width: 100px;
    position: relative; /* Added for absolute positioning of suffix */
}

.service-frequency select, .service-time input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

.service-time input {
    padding-right: 30px;
}

.service-item .input-suffix {
    top: 9px;
    right: 10px;
}

.checkbox-group {
    margin-bottom: 15px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
}

.checkbox-label input {
    margin-right: 10px;
    width: 18px;
    height: 18px;
}

.results-container {
    background-color: var(--swept-light-blue);
    padding: 25px;
    border-radius: 8px;
    margin-top: 25px;
}

.results-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.result-item {
    flex: 1;
    min-width: 200px;
}

.result-label {
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 500;
}

.result-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--swept-dark-blue);
}

/* Apply border-top only to the total row */

.note {
    background-color: #fff4de;
    border-left: 4px solid #ffc107;
    padding: 15px;
    margin-top: 25px;
    font-size: 14px;
    border-radius: 4px;
}

.cta-button {
    display: inline-block;
    background-color: var(--swept-dark-blue);
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 25px;
    transition: background-color 0.3s;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.cta-button:hover {
    background-color: var(--swept-dark-blue);
}

.add-button {
    background-color: var(--swept-dark-blue);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

/* Active state for scenario/type buttons */
.scenario-button.active,
.building-type-btn.active,
.space-btn.active {
    background-color: var(--swept-dark-blue);
    color: white;
}

.add-button svg {
    margin-right: 5px;
}

.remove-button {
    background-color: transparent;
    color: var(--swept-red);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
}

.remove-button:hover {
    background-color: rgba(255, 100, 124, 0.1);
}

/* Tab Styles */
.tabs {
    display: flex;
    margin-bottom: 25px; /* Keep margin for spacing below tabs */
    /* Removed border-bottom */
}

.tab {
    padding: 10px 20px;
    cursor: pointer;
    background-color: var(--swept-light-gray); /* Inactive background */
    color: var(--swept-dark); /* Default text color */
    border-radius: 5px 5px 0 0; /* Rounded top corners */
    margin-right: 5px; /* Space between tabs */
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    /* Removed border-bottom */
}

.tab:hover:not(.active) { /* Apply hover only if not active */
    background-color: var(--swept-gray); /* Slightly darker on hover */
}

.tab.active {
    background-color: var(--swept-dark-blue); /* Active background */
    color: white; /* Active text color */
    /* Removed border-bottom-color */
    /* font-weight: 600; /* Optional: make active tab bolder */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .calculator-body {
        padding: 20px;
    }

    .service-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .service-name, .service-frequency, .service-time {
        width: 100%;
    }

    .input-field input {
        text-align: right;
    }

    .prefix-padding {
        padding-left: 35px !important;
    }

}
/* == Accordion Styles (Unified Pattern) == */
.insight-card {
    background-color: white;
    border: 1px solid var(--swept-gray);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
}

.insight-header {
    background-color: var(--swept-light-gray);
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.insight-title {
    font-weight: 600;
    color: var(--swept-dark-blue);
    display: flex;
    align-items: center;
}

.insight-icon {
    margin-right: 10px;
    color: var(--swept-blue);
}

.insight-expand-icon {
    transition: transform 0.3s;
}

.insight-expand-icon.expanded {
    transform: rotate(180deg);
}

.insight-body {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.3s ease;
}

.insight-body.expanded {
    padding: 20px;
    max-height: 2000px; /* Adjust as needed for max content height */
}

.insight-content p {
    margin-bottom: 15px;
}

.insight-content ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

.insight-content li {
    margin-bottom: 8px;
}
/* Nested Accordion (Tactic) Styles */
.tactic-card {
    background-color: #ffffff; /* White background for nested items */
    border: 1px solid #eee; /* Lighter border */
    border-radius: 6px;
    margin-top: 10px; /* Space above nested item */
    margin-bottom: 10px; /* Space below nested item */
    overflow: hidden;
}

.tactic-title {
    background-color: #f9f9f9; /* Slightly different background for nested header */
    padding: 10px 15px; /* Smaller padding */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500; /* Slightly less bold */
    font-size: 15px; /* Slightly smaller font */
    border-bottom: 1px solid #eee; /* Separator line */
    transition: border-radius 0.3s; /* Smooth transition for border-radius */
}

/* Remove bottom border radius when expanded */
.tactic-title.expanded {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.tactic-expand-icon {
    transition: transform 0.3s;
    color: var(--swept-blue); /* Match icon color */
}

.tactic-expand-icon.expanded {
    transform: rotate(180deg); /* Rotate icon when expanded */
}

.tactic-body {
    padding: 0 15px; /* Horizontal padding only when collapsed */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease; /* Smooth transition - Removed padding transition */
    background-color: #ffffff; /* Ensure white background */
    font-size: 14px; /* Slightly smaller font for content */
}

.tactic-body.expanded {
    padding: 15px; /* Add padding back when expanded */
    max-height: 1500px; /* Increased max-height significantly */
    border-top: none; /* Ensure no top border conflicts */
}

.tactic-body p {
    margin-bottom: 10px; /* Space between paragraphs */
}

.tactic-body p:last-child {
    margin-bottom: 0; /* No margin on last paragraph */
}

/* == Tag Styles (Used within Accordion Header) == */
.tag {
    display: inline-block;
    background-color: var(--swept-light-blue);
    color: var(--swept-dark-blue);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
}

.tag-featured {
    background-color: var(--swept-light-blue);
    color: var(--swept-dark-blue);
}

.tag-new {
    background-color: #e1f5ea;
    color: var(--swept-green);
}

.tag-popular {
    background-color: #ffefd9;
    color: var(--swept-orange);
}
/* Override for Labor Efficiency Calculator's inline tactic-card hover */
.tactic-card:hover {
    background-color: inherit; /* Use the base background color defined elsewhere */
}
/* Table styles */
.bid-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
}

.bid-table th, .bid-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--swept-gray);
}

.bid-table th {
    background-color: var(--swept-light-gray);
    font-weight: 600;
}

.bid-table td.text-right {
    text-align: right;
}

.bid-table tr.total-row {
    font-weight: 600;
    background-color: var(--swept-light-blue);
}
/* Restored Breakdown Styles (for Summary/Analysis) */
.breakdown-body {
    padding: 20px;
    background-color: #f8f9fa; 
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--swept-gray);
}

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

.breakdown-label {
    font-weight: 500;
}

.breakdown-value {
    font-weight: 600;
    color: var(--swept-dark-blue); 
}

.breakdown-total .breakdown-label,
.breakdown-total .breakdown-value {
    font-weight: 700;
    font-size: 1.1em;
    color: var(--swept-dark); 
} 
        /* Specific styles for Client Retention Calculator can remain here if any */
/* Slider Styles */
        .slider-container {
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .slider-container label {
            display: block;
            margin-bottom: 10px;
            font-weight: 500;
        }
        .slider {
            width: 100%;
            cursor: pointer;
            height: 8px;
            background: var(--swept-gray);
            border-radius: 5px;
            appearance: none; /* Override default look */
            -webkit-appearance: none;
        }
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            background: var(--swept-blue);
            border-radius: 50%;
            cursor: pointer;
        }
        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: var(--swept-blue);
            border-radius: 50%;
            cursor: pointer;
            border: none;
        }
        .slider-labels {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }

        /* Chart Styles */
        .chart-container {
            position: relative;
            height: 250px; /* Adjust height as needed */
            margin-top: 30px;
            margin-bottom: 15px;
            border-bottom: 1px solid var(--swept-gray);
        }
        .chart-axis {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: var(--swept-gray);
        }
        .chart-bar {
            position: absolute;
            bottom: 0;
            width: 80px; /* Adjust width as needed */
            min-height: 20px; /* Added minimum height for visibility */
            text-align: center;
            transition: height 0.5s ease-out;
            /* display: flex; */ /* Removed: No longer needed for internal content */
            /* flex-direction: column; */ /* Removed */
            /* justify-content: flex-end; */ /* Removed */
            /* align-items: center; */ /* Removed */
            /* padding-bottom: 10px; */ /* Removed */
        }
        .chart-bar.current {
            background-color: var(--swept-blue); /* Use solid color */
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        .chart-bar.improved {
            background-color: var(--swept-green); /* Use solid color */
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        /* Removed internal .chart-label and .chart-value styles as they are now external */

        /* New styles for external labels and values */
        .chart-category-label {
            position: absolute;
            bottom: -25px; /* Position below the axis line (adjust as needed) */
            width: 120px; /* Increased width for better fit */
            text-align: center;
            font-size: 12px;
            color: #555;
            font-weight: 500;
            pointer-events: none; /* Prevent interference */
        }
        .chart-value-label {
            position: absolute;
            width: 80px; /* Match bar width */
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            color: var(--swept-dark-blue); /* Default color */
            transition: bottom 0.5s ease-out; /* Match bar animation */
            pointer-events: none; /* Prevent interference */
        }
        .chart-value-label.improved {
             color: #007a60; /* Darker green for improved value */
        }


        /* Legend Styles */
        .legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 50px; /* Increased space above legend */
            margin-bottom: 30px;
            font-size: 14px;
        }
        .legend-item {
            display: flex;
            align-items: center;
        }
        .legend-color {
            width: 15px;
            height: 15px;
            border-radius: 3px;
            margin-right: 8px;
/* --- Debugging & Overrides --- */
        /* Force breakdown row layout for this page */
        .breakdown-row {
            display: flex !important;
            justify-content: space-between !important;
            align-items: baseline !important; /* Align text nicely */
            padding-bottom: 10px !important;
            margin-bottom: 10px !important;
        }
        .breakdown-row.breakdown-total {
             border-top: 2px solid var(--swept-dark-blue) !important;
             margin-top: 15px !important;
             padding-top: 15px !important;
        }
        /* Debug chart visibility */
        .chart-container {
             border: 2px solid red !important; /* Temporary debug border */
        }
        .chart-bar {
             border: 1px solid lime !important; /* Temporary debug border */
        }
        }