/* General Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
}

/* Remove default button styles for sorting buttons */
th button {
    background: none;
    border: none;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    text-align: left;
    padding: 8px;
    color: inherit;
}

/* Sorting Icons */
th[aria-sort="ascending"] button::after {
    content: " ▲";
    color: gray;
}

th[aria-sort="descending"] button::after {
    content: " ▼";
    color: gray;
}

th[aria-sort="none"] button::after {
    content: " ⬍";
    color: gray;
}

/* Responsive Table */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Search Styling */
.dt-input {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    width: 100%;
    max-width: 250px;
}

/* Fix Spacing for "Show Entries" & "Search Bar" */
.d-flex.align-items-center {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Adds space between elements */
}

select.dt-input,
input.dt-input {
    padding: 6px 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Ensure proper spacing between label & dropdown */
#dt-length-0 {
    min-width: 80px;
}

/* Mobile: Stack Dropdown above Search */
@media (max-width: 768px) {
    .d-flex.flex-md-row {
        flex-direction: column;
        align-items: stretch;
    }

    .d-flex.align-items-center {
        justify-content: space-between;
    }
}