body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #1c1c1c;
    color: #eaeaea;
}

h1, h2, h3 {
    color: #ffffff;
}

.main-container {
    display: grid;
    grid-template-columns: 300px 1fr 300px; /* Fixed sidebar widths */
    gap: 20px;
    height: 100vh;
}

/* Sidebar Styling */
.sidebar, .right-sidebar {
    padding: 20px;
    background: #2c3e50;
    overflow-y: auto;
}

.sidebar {
    border-right: 2px solid #34495e;
}

.right-sidebar {
    border-left: 2px solid #34495e;
}

.collapsible-section {
    margin-bottom: 20px;
}

button {
    display: block;
    margin: 10px 0;
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    button:hover {
        background-color: #0056b3;
    }

/* Main Content Styling */
.main-content {
    padding: 20px;
    background-color: #1e1e1e;
    border-radius: 8px;
    overflow-y: auto;
}

canvas {
    background: #34495e;
    border-radius: 8px;
    margin-top: 20px;
}

/* Modal Styling */
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 90%;
    max-width: 600px;
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

    .modal-header h2 {
        margin: 0;
        font-size: 18px;
        color: #333;
    }

    .modal-header button {
        background: none;
        border: none;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
        color: #333;
    }

        .modal-header button:hover {
            color: #007bff;
        }

.modal-body {
    max-height: 400px;
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none; /* Hidden by default */
}

/* Dynamic List Item Styling */
.dynamic-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

    .dynamic-list-item input[type="text"],
    .dynamic-list-item input[type="number"] {
        flex: 1;
        padding: 5px;
        font-size: 14px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .dynamic-list-item button.remove-btn {
        background-color: #dc3545;
        color: white;
        padding: 5px 10px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

        .dynamic-list-item button.remove-btn:hover {
            background-color: #a71d2a;
        }

/* Area Summary Styling */
.area-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

    .area-summary div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .area-summary button {
        background-color: #007bff;
        color: white;
        padding: 5px 10px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        .area-summary button:hover {
            background-color: #0056b3;
        }

/* Scrollbars for smaller screens */
@media screen and (max-width: 768px) {
    .main-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto; /* Stacks sections vertically */
    }

    .sidebar, .right-sidebar {
        grid-column: 1 / 2; /* Take full width */
        padding: 10px;
    }

    .main-content {
        grid-column: 1 / 2; /* Take full width */
        padding: 15px;
    }

    .modal {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        overflow-y: auto;
        border-radius: 0;
    }

    .modal-body {
        max-height: none;
    }
}

/* Accordion Container */
.accordion {
    border-top: none; /* Remove the top border if you want a cleaner look */
}

/* Individual Accordion Item */
.accordion-item {
    border: none; /* Remove bottom border */
    margin-bottom: 10px; /* Add spacing between items */
    border-radius: 6px; /* Slightly rounded corners */
    overflow: hidden; /* Keeps the radius for content too */
    background: #2c3e50; /* Matches your sidebar background or any other color */
    transition: box-shadow 0.3s ease;
}

    .accordion-item:hover {
        /* Subtle shadow on hover */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

/* Header Button */
.accordion-header {
    background: #34495e; /* Slightly lighter than the sidebar background */
    color: #ffffff;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    outline: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease;
    border-radius: 6px; /* Matches container corners */
}

    /* Change background on hover or active state */
    .accordion-header:hover {
        background: #3b5165;
    }

    .accordion-header.active {
        background: #3b5165;
    }

/* Icon Styling */
.accordion-icon {
    transition: transform 0.3s ease;
    margin-left: 10px; /* Add some space between text and icon */
    font-size: 20px; /* Slightly bigger icon */
    color: #999; /* Softer color when closed */
}

.accordion-item.active .accordion-icon {
    transform: rotate(90deg); /* A 90-degree rotation is a common approach for a “chevron” or arrow icon */
    color: #fff; /* Highlighted color when expanded */
}

/* Content Area */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    background: #2c3e50;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 15px;
    border-radius: 0 0 6px 6px; /* Maintain corner rounding on the bottom */
}

.accordion-item.active .accordion-content {
    max-height: 500px; /* or another value that comfortably fits your content */
    padding: 15px; /* Add some padding around the content */
}

/* Labels and Inputs inside the content */
.accordion-content label {
    display: block;
    margin: 12px 0 5px;
    font-weight: bold;
    color: #eaeaea; /* Maintain contrast on dark background */
}

.accordion-content input {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #444;
    background: #1c1c1c;
    color: #fff;
    padding: 5px;
}

.chart-container {
    height: 400px; /* fixed instead of max-height */
    width: 100%;
    position: relative;
    overflow: auto; /* if you want a scrollbar inside the container */
}


#monthlyHeatLossChart {
    width: 100%;
    /* If you need a fallback fixed height:
    height: 400px; 
    */
}

.results-table-container {
    margin-top: 20px;
    overflow-x: auto; /* If you want horizontal scroll for narrow screens */
}

.heatloss-results-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    background-color: #2c3e50; /* match your sidebar if you like, or keep it lighter */
    color: #eaeaea;
    border: 1px solid #444;
}

    .heatloss-results-table thead {
        background-color: #34495e; /* a bit lighter than #2c3e50 */
    }

    .heatloss-results-table th,
    .heatloss-results-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #444;
    }

    .heatloss-results-table tr:hover {
        background-color: #3b5165; /* subtle hover highlight */
    }

    .heatloss-results-table th {
        font-weight: bold;
        color: #fff;
    }

/* Total Volume Container */
.total-volume-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px; /* Optional: space above the total volume section */
}

    /* Styling the label */
    .total-volume-container label {
        font-weight: bold;
        margin-right: 5px;
    }

    /* Styling the input */
    .total-volume-container input[type="number"] {
        width: 100px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    /* Styling the checkbox label */
    .total-volume-container label input[type="checkbox"] {
        margin-right: 5px;
    }

/* Responsive adjustments */
@media (max-width: 600px) {
    .total-volume-container {
        flex-direction: column;
        align-items: flex-start;
    }

        .total-volume-container input[type="number"] {
            width: 100%;
        }
}

/* Energy Cost Container */
.energy-cost-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

    /* Styling Labels */
    .energy-cost-container label,
    .energy-input label {
        font-weight: bold;
    }

    /* Styling Select and Input Fields */
    .energy-cost-container select,
    .energy-input input {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

/* Responsive Adjustments */
@media (max-width: 600px) {
    .energy-cost-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .energy-input {
        width: 100%;
    }
}

.energy-input {
    width: 100%; /* Ensure container spans full width */
}

    .energy-input .input-group {
        display: flex;
        flex-direction: column; /* Stack label and input vertically */
        margin-bottom: 1rem; /* Add spacing between input groups */
    }

        .energy-input .input-group label {
            margin-bottom: 0.5rem; /* Space between label and input */
            font-weight: bold; /* Optional for better readability */
        }

        .energy-input .input-group input {
            width: 100%; /* Input spans full container width */
            padding: 0.5rem; /* Add padding for better usability */
            border: 1px solid #ccc; /* Standard input styling */
            border-radius: 4px; /* Rounded corners */
            font-size: 1rem; /* Make text more readable */
            box-sizing: border-box; /* Include padding and border in width calculation */
        }