.page-section#orders .section-header {
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Push title to left, buttons to right */
    align-items: center; /* Vertically align items */
    margin-bottom: 25px; /* Space below the header */
    border-bottom: 1px solid #e9ecef; /* Separator line */
    padding-bottom: 15px; /* Padding below the title/buttons */
}

.page-section#orders .section-header div {
    display: flex; /* Use flexbox for button alignment */
    gap: 10px; /* Space between buttons */
}

/* General styling for buttons within the section header */
.page-section#orders .section-header button {
    padding: 10px 18px; /* Comfortable padding */
    border-radius: 5px; /* Rounded corners for buttons */
    font-weight: 500; /* Medium font weight */
    transition: background-color 0.2s ease, transform 0.2s ease; /* Smooth transitions */
    border: none; /* Remove default border */
}

/* Primary button (Download All JSON) */
.page-section#orders .section-header button#downloadAllBillsJsonBtn {
    background-color: #007bff; /* Bootstrap primary blue */
    color: white; /* White text */
}

.page-section#orders .section-header button#downloadAllBillsJsonBtn:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Secondary button (Reset) */
.page-section#orders .section-header button#resetBillsBtn {
    background-color: #6c757d; /* Bootstrap secondary gray */
    color: white; /* White text */
}

.page-section#orders .section-header button#resetBillsBtn:hover {
    background-color: #5a6268; /* Darker gray on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Container for the table itself */
.table-container {
    overflow-x: auto; /* Enable horizontal scrolling for small screens */
}

/* Styling for the main table */
.page-section#orders table {
    width: 100%; /* Full width */
    border-collapse: separate; /* Use separate borders for spacing */
    border-spacing: 0 15px; /* Vertical spacing between rows */
    margin-top: -15px; /* Adjust for border-spacing top */
    background-color: #ffffff; /* White background for the table */
    border-radius: 8px; /* Rounded corners for the table */
}

/* Table header */
.page-section#orders table thead tr {
    background-color: #e9ecef; /* Light gray background for header row */
    border-radius: 8px 8px 0 0; /* Rounded top corners */
}

.page-section#orders table thead th {
    padding: 15px 12px; /* Padding for header cells */
    text-align: left; /* Align text to the left */
    font-weight: 600; /* Semibold font weight */
    color: #495057; /* Darker text for header */
    font-size: 0.95em; /* Slightly smaller font size */
    text-transform: uppercase; /* Uppercase text */
}

/* Styling for the table body rows */
.page-section#orders table tbody tr {
    background-color: #ffffff; /* White background for data rows */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Shadow for each row */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effects */
}

/* Hover effect for table rows */
.page-section#orders table tbody tr:hover {
    transform: translateY(-4px); /* Lift effect on hover */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); /* More prominent shadow on hover */
}

/* Data cells */
.page-section#orders table td {
    padding: 15px 12px; /* Padding for data cells */
    vertical-align: middle; /* Vertically center content */
    font-size: 0.9em; /* Standard font size for data */
    color: #212529; /* Standard text color */
}

/* Styling for the status select dropdown */
.page-section#orders table td select.status-select {
    padding: 8px 12px; /* Comfortable padding for select */
    border-radius: 4px; /* Rounded corners */
    border: 1px solid #ced4da; /* Light gray border */
    background-color: #ffffff; /* White background */
    font-size: 0.85em; /* Slightly smaller font for options */
    cursor: pointer; /* Indicate it's clickable */
    transition: border-color 0.2s ease;
}

.page-section#orders table td select.status-select:focus {
    border-color: #80bdff; /* Highlight border on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add a subtle focus ring */
}

/* Styling for the action buttons within cells (like JSON download) */
.page-section#orders table td button {
    padding: 6px 12px; /* Smaller padding for action buttons */
    font-size: 0.85em; /* Smaller font size */
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.page-section#orders table td button.download-single-json-btn i {
    margin-right: 5px; /* Space between icon and text */
}

/* Styling for an empty table message */
.page-section#orders table td.text-center {
    text-align: center; /* Center align text */
    font-style: italic; /* Italic text */
    color: #6c757d; /* Muted gray text */
    padding: 30px 0; /* More padding for empty state */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .page-section#orders .section-header {
        flex-direction: column; /* Stack header items vertically on smaller screens */
        align-items: flex-start; /* Align to the left */
    }

    .page-section#orders .section-header h2 {
        margin-bottom: 15px; /* Add space below title */
        font-size: 1.6em;
    }

    .page-section#orders .section-header div {
        width: 100%; /* Buttons take full width */
        justify-content: flex-start; /* Align buttons to the start */
    }

    .page-section#orders table thead th,
    .page-section#orders table td {
        padding: 10px 8px; /* Reduce padding for smaller screens */
        font-size: 0.8em;
    }
    
    .page-section#orders table td select.status-select,
    .page-section#orders table td button {
        font-size: 0.8em;
        padding: 6px 8px;
    }
}

@media (max-width: 576px) {
    .page-section#orders table thead th,
    .page-section#orders table td {
        font-size: 0.75em; /* Further reduce font size for very small screens */
        padding: 8px 5px;
    }
    .page-section#orders .section-header h2 {
        font-size: 1.4em;
    }
    .page-section#orders .section-header button {
        padding: 8px 12px;
    }
}