/* General Styling for Demo Sections */
.demo-section {
    background-color: #242424; 
    color: #C9FEFF; 
    padding: 40px 20px; 
    border-radius: 10px; 
    margin: 20px auto; 
    max-width: 1200px; 
}

/* Table Styling */
#manualUnitsTable, #totalUnitsTable, #monthlyUnitsTable {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

#manualUnitsTable th, #totalUnitsTable th, #monthlyUnitsTable th,
#manualUnitsTable td, #totalUnitsTable td, #monthlyUnitsTable td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

.copy-sum-container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 10px 0;
    width: 100%;
}

#totalManualUnitsLabel, #totalUnitsSummaryLabel, #monthlyUnitsSummaryLabel {
    text-align: left;
    margin-left: 20px; 
    flex: 1;
}

#totalManualHoursLabel, #totalHoursSummaryLabel, #monthlyHoursSummaryLabel {
    text-align: right;
    margin-right: 20px; 
    flex: 1;
}

input[type="number"] {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f1f1f1;
    color: #333;
    box-sizing: border-box;
}

/* Button Styles */
.centered-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; 
    margin-top: 20px;
}

button {
    background-color: #0e9294;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #085859;
}

.centered-text {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.schedule-image-container {
    display: none;
    text-align: center;
    margin-top: 20px;
}

#scheduleImage {
    max-width: 100%;
    border-radius: 10px;
}

.back-button {
    background-color: #0e9294;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.schedule-details {
    color: #C9FEFF; 
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2em;
    line-height: 1.6;
    text-align: left; 
    margin: 20px auto;
    padding: 10px 20px;
}

.schedule-details p {
    text-align: center; 
    font-weight: bold; 
    font-size: 1.5em;
}

.schedule-details ul {
    list-style-type: none;
    padding: 0;
}

.schedule-details li {
    margin-bottom: 10px;
}

/* General Styling for Total Units Section */
.total-units-container, .monthly-units-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

#totalUnitsLabel, #monthlyUnitsLabel {
    font-size: 1.2em;
    margin-right: 20px;
    color: #C9FEFF;
}

#totalUnitsInput, #monthlyUnitsInput {
    font-size: 1.2em;
    padding: 10px;
    background-color: #333;
    color: #C9FEFF;
    border: none;
    border-radius: 5px;
    text-align: center;
    width: 150px;
}

/* Styling for the first schedule */
.first-schedule {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Date Range Styling */
.date-range-container {
    margin-bottom: 20px;
    text-align: center;
}

#dateRangeLabel {
    font-weight: bold;
    font-size: 1.2em;
    display: block;
    margin-bottom: 25px;
}

.date-entry-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.date-entry-inline {
    display: flex;
    align-items: center;
}

.date-entry-inline label {
    margin-right: 10px;
}

.date-entry-inline input[type="text"] {
    width: auto;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f1f1f1;
    color: #333;
    box-sizing: border-box;
}

/* Frequency Scheduling Container Styling */
.frequency-scheduling-container {
    padding: 20px;
    width: 45%;
    background-color: #242424; /* Background color */
    border-radius: 10px; /* Rounded corners */
    margin-bottom: 20px;
}

.date-range-container {
    text-align: center; /* Center the Date Range label */
    margin-bottom: 20px;
}

.date-entry-row {
    display: flex;
    justify-content: center;
    gap: 20px; /* Add spacing between start and end date */
    margin-top: 10px;
}

.date-entry-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.columns-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-left: 5rem;
    margin-right: 5rem;
}

.day-hour-row, .adjustment-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

 .frequency-scheduling-container h3 {
    color: #C9FEFF; /* Light teal color */
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    text-align: left;
}

.frequency-scheduling-container label {
    color: #C9FEFF;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
}

input[type="text"] {
    width: 50px; /* Width for input fields */
    padding: 5px;
    
    border-radius: 5px;
    border: none;
    text-align: center;
    background-color: #f1f1f1;
    color: #333;
}

/* Ensure all inputs have the same width and box-sizing */
.date-entry-inline input[type="text"], 
#totalUnitsInput, 
#monthlyUnitsInput {
    width: 100%;
    max-width: 200px; /* Ensure all inputs are the same width */
    box-sizing: border-box; /* Ensure padding and borders are included in the width */
    padding: 10px;
    
    text-align: center;
    border-radius: 5px;
}


/* Responsive Design - Media Queries */
@media (max-width: 1200px) {
    .columns-container {
        flex-direction: column;
        align-items: center;
    }

    .date-entry-row, .day-hour-row, .adjustment-row {
        flex-direction: column;
        align-items: center;
    }

    .date-entry-inline, .frequency-scheduling-container input[type="text"] {
        width: 100%;
        max-width: 200px;
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .frequency-scheduling-container, 
    .total-units-container, 
    .monthly-units-container {
        flex-direction: column;
        align-items: center;
        width: 100%; /* Ensure full width alignment */
    }

    .frequency-scheduling-container {
        width: 85%;
    }

    .frequency-scheduling-container input[type="text"] {
        width: 100%;
        margin-left: 0;
        margin-top: 5px;
    }

    #totalUnitsInput, #monthlyUnitsInput {
        width: 100%;
        margin-top: 10px;
        text-align: center;
        max-width: 200px; /* Ensure consistent width */
    }

    #manualUnitsTable, #totalUnitsTable, #monthlyUnitsTable {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        margin: 0 auto; /* Center the tables */
    }

    #manualUnitsTable th, #totalUnitsTable th, #monthlyUnitsTable th,
    #manualUnitsTable td, #totalUnitsTable td, #monthlyUnitsTable td {
        padding: 10px 5px;
        text-align: center;
        font-size: 0.9em;
    }

    .copy-sum-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    #totalManualUnitsLabel, #totalUnitsSummaryLabel, #monthlyUnitsSummaryLabel {
        text-align: center;
        margin-left: 0;
        margin-bottom: 5px;
    }

    #totalManualHoursLabel, #totalHoursSummaryLabel, #monthlyHoursSummaryLabel {
        text-align: center;
        margin-right: 0;
    }
}


@media (max-width: 576px) {
    .columns-container {
        padding: 10px;
    }

    .frequency-scheduling-container {
        padding: 0;
    }

    .frequency-scheduling-container, 
    .total-units-container, 
    .monthly-units-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .date-entry-row, 
    .total-units-container, 
    .monthly-units-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .date-entry-inline, 
    .units-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 10px;
    }

    .date-entry-inline label, 
    .units-container label {
        margin-bottom: 5px;
        text-align: center;
        width: 100%;
    }

    .date-entry-inline input[type="text"], 
    #totalUnitsInput, 
    #monthlyUnitsInput {
        width: 100%;
        max-width: 200px;
        box-sizing: border-box;
        text-align: center;
        margin-top: 5px; 
        border-radius: 5px;
    }

    .centered-button-container button {
        width: 100%;
        max-width: 200px;
        padding: 15px;
        margin-top: 10px;
    }

    #manualUnitsTable, #totalUnitsTable, #monthlyUnitsTable {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.8em; /* Reduce font size for better fit */
        margin: 0 auto; /* Center the table */
    }

    #manualUnitsTable th, #totalUnitsTable th, #monthlyUnitsTable th,
    #manualUnitsTable td, #totalUnitsTable td, #monthlyUnitsTable td {
        padding: 5px 3px; /* Reduce padding to fit content better */
        text-align: center;
    }

    #manualUnitsTable th, #totalUnitsTable th, #monthlyUnitsTable th {
        white-space: normal; /* Allow headers to wrap if necessary */
        font-size: 0.9em; /* Slightly larger font for headers */
    }

    .copy-sum-container {
        flex-direction: column;
        align-items: center; /* Center align the total units and hours */
    }

    #totalManualUnitsLabel, #totalUnitsSummaryLabel, #monthlyUnitsSummaryLabel {
        text-align: center;
        margin-left: 0;
        margin-bottom: 5px;
    }

    #totalManualHoursLabel, #totalHoursSummaryLabel, #monthlyHoursSummaryLabel {
        text-align: center;
        margin-right: 0;
    }
    #manualUnitsTable {
            margin: 0 auto; /* Center the table */
            width: 100%;
            border-collapse: collapse;
            font-size: 0.8em; /* Reduce font size for better fit */
        }
    
}