/* Container for the entire table and search area */
.excel-table-container {
    font-family: Arial, sans-serif;
    max-width: 100%;
    margin: 20px 0;
}

/* Style for the category filter section (Dropdown Row) */
.category-filters {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* FIX: Space between distributes the groups across the full width */
    justify-content: space-between; 
    gap: 10px; /* Increased gap from 5px to 10px in v1.0.28 */
    padding: 10px 0;
    width: 100%;
}

/* Individual Filter Group Wrapper */
.filter-group {
    display: flex;
    align-items: center;
    gap: 10px; /* INCREASED GAP FOR BETTER SPACING */
    /* Set a basis width and allow it to grow to distribute space */
    flex-basis: 22%; 
    flex-grow: 1; 
    min-width: 180px; 
}

/* Search Filter Row (Row 2) */
.search-filter-row {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 0 10px 0;
    width: 100%; /* Ensures this row occupies full width and stacks below the first row */
}

.search-filter-row label {
    font-weight: bold;
    color: #333;
    font-size: 16px;
    white-space: nowrap;
}

#program-search {
    flex-grow: 1;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    min-width: 250px;
}

.category-filters label {
    font-weight: bold;
    color: #333;
    font-size: 16px;
    white-space: nowrap;
}

/* FIX: Force the select box to consume all space within its filter-group */
.filter-group select {
    flex-grow: 1; /* Pushes the select box to fill the rest of the group's width */
    width: 100%; /* Ensures compatibility */
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    background-color: #f9f9f9;
}

/* Main table styling */
.excel-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

/* Table header styling */
.excel-table thead {
    background-color: #b8332a;
    color: #ffffff;
}

/* Table header cell styling */
.excel-table th {
    padding: 15px 20px !important;
    text-align: left !important;
    font-size: 14px;
    font-weight: bold;
    border: none;
    vertical-align: top;
}

/* Table body row styling */
.excel-table tbody tr {
    transition: background-color 0.3s ease;
}

.excel-table tbody tr:nth-child(odd) {
    background-color: #f4f4f4;
}

/* Custom alignment for the Course Fee column (3rd column) */
.excel-table th:nth-child(3),
.excel-table td:nth-child(3) {
    text-align: center !important;
}

/* Custom alignment for the Date column (4th column) */
.excel-table th:nth-child(4),
.excel-table td:nth-child(4) {
    text-align: center !important;
}

/* Custom alignment for the Type column (5th column) */
.excel-table th:nth-child(5),
.excel-table td:nth-child(5) {
    text-align: center !important;
}

/* Custom alignment for the CPD Hours column (6th column) */
.excel-table th:nth-child(6),
.excel-table td:nth-child(6) {
    text-align: center !important;
}

/* Custom alignment for the Mode column (7th column) */
.excel-table th:nth-child(7),
.excel-table td:nth-child(7) {
    text-align: center !important;
}

/* Custom alignment for the Register column (8th column) */
.excel-table th:nth-child(8),
.excel-table td:nth-child(8) {
    text-align: center !important;
}

/* Custom alignment for the Status column (9th column) - Not used in this version */
.excel-table th:nth-child(9),
.excel-table td:nth-child(9) {
    text-align: center !important;
}

/* Styling for hidden rows when a category is selected */
.excel-table tr.hidden {
    display: none;
}

/* Styling for the integrated status block (wrapper) */
.program-details-info { 
    display: block; 
    margin-top: 5px;
    font-weight: bold; 
}

/* Status text coloring */
.status-text {
    white-space: nowrap;
    display: inline;
}

.status-unconfirm {
    background-color: transparent !important;
    color: #ffc107 !important; /* Yellow text */
}

.status-confirm {
    background-color: transparent !important;
    color: #28a745 !important; /* Green text */
}

/* Styling for the new seats text */
.seats-info {
    display: inline;
}

.seats-unavailable {
    color: #b8332a; /* Dark red for unavailable */
}

.seats-available {
    color: green; /* Green for available */
}

.seats-limited {
    color: orange; /* Orange for limited */
}

/* Styling for the Register hyperlink */
.register-link {
    font-weight: bold !important; 
    text-decoration: none;
    color: #b8332a !important; 
}

.register-link:hover {
    text-decoration: underline;
}

/* Strikethrough style for unavailable text */
.strikethrough-text {
    text-decoration: line-through;
    color: #000;
}