/* DataTables.net Style Overrides */
.datatable-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 1rem;
}

.projects-table table {
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_filter {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important; /* Align to the right */
    float: none !important;
    text-align: left !important;
    flex-grow: 1; /* Allow the filter to take up available space */
}

.dataTables_wrapper .dataTables_filter input {
    margin-right: 0.5rem !important;
    display: inline-block !important;
}

.dataTables_wrapper .projects-filter-container {
    margin-left: 10px;
}

.dataTables_wrapper .new-project-btn-container {
    margin-left: 10px;
}

.dataTables_paginate {
    float: right !important;
    padding-top: 0.5em;
}

.dataTables_info {
    float: left !important;
    padding-top: 0.85em;
}

/* Correct border-bottom for DataTables.net */
.dataTable th {
    padding: 0.75rem 0.75rem;
    vertical-align: middle;
    border-top: 1px solid #e0e5ec;
    border-right: 0;
}

.dataTable td:last-child, .dataTable th:last-child {
    border-right: 1px solid #e0e5ec;
}

.dataTable td:first-child, .dataTable th:first-child {
    border-left: 1px solid #e0e5ec;
}

.dataTable > thead > tr > th {
    cursor: pointer;
    border-bottom-width: 1px;
}

.dataTable thead tr th {
    position: relative;
}

.dataTable thead tr th:after,
.dataTable thead tr th:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    right: 10px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0.2;
}

.dataTable thead tr th.sorting:before, .dataTable thead tr th.sorting:after {
    content: "" !important;
}

.dataTable thead tr th.sorting_disabled {
    cursor: default;
}

.dataTable thead tr th.sorting_disabled:before,
.dataTable thead tr th.sorting_disabled:after {
    display: none;
}

.dataTable thead tr th:before {
    border-top: 4px solid #000;
    bottom: 12px;
}

.dataTable thead tr th:after {
    border-bottom: 4px solid #000;
    border-top: 4px solid transparent;
    top: 5px;
}

.dataTable thead tr th.sorting_asc:after {
    opacity: 0.6;
}

.dataTable thead tr th.sorting_desc:before {
    opacity: 0.6;
}

table.dataTable thead>tr>th.sorting:after {
    margin-top: 5px;
}

.projects-table input.form-control {
    width: 280px;
    height: 44px;
}

button#project-status-filter-btn {
    width: 40px;
    border: none !important;
    padding-top: 0;
    padding-bottom: 0;
}

#project-status-filter-btn i {
    border-radius: 20px;
    border: 1px solid #c8c8c8;
    padding: 10px;
    font-size: 1.2em;
    color: #9c9c9c;
}

.projects-filter-container .dropdown-menu {
    width: 220px;
    overflow-y: auto;
}

/* Style the "All" filter option */
.projects-filter-container .list-group-item:first-child {
    border-bottom: 2px solid #dee2e6;
}

/* Kanban Status Badge - clickable status badges */
.kanban-status-badge.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.kanban-status-badge.clickable:hover {
    opacity: 0.85;
    transform: scale(1.02);
}


.kanban-status-badge.clickable:hover::after {
    opacity: 0.7;
}

/* Assign Status Modal */
#assignStatusModal .status-options .form-check {
    padding: 8px 12px 8px 32px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

#assignStatusModal .status-options .form-check:hover {
    background-color: #f8f9fa;
}

#assignStatusModal .status-options .form-check-input:checked + .form-check-label .badge {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0d6efd;
}