body {
    font-size: .875rem;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100; /* Behind the navbar */
    padding: 48px 0 0; /* Height of navbar */
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.nav-link {
    font-weight: 500;
    color: #333;
}

.nav-link .feather {
    margin-right: 4px;
    color: #727272;
}

.nav-link.active {
    color: #007bff;
}

.nav-link:hover .feather,
.nav-link.active .feather {
    color: inherit;
}

.page-title {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

/* Make sure content is not under the fixed sidebar */
main {
    padding-top: 20px; /* Adjust as needed */
}

/* Styling for DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.3em 0.8em;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #007bff;
    color: white !important; /* Important to override default styles */
    border-color: #007bff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #e9ecef;
    border-color: #dee2e6;
    color: #0056b3 !important; /* Ensure text color changes on hover */
}

/* Ensure flash messages have enough contrast and padding if not fully covered by Bootstrap */
.alert {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
    border-radius: 0.375rem; /* Tailwind's rounded-md */
}

.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.alert-info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}

/* DataTables specific styling enhancements */
.dataTables_wrapper .row {
    margin-bottom: 0.75rem; /* Add some space between control rows and table/pagination */
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 0.5rem; /* Space below length/filter before table or pagination */
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 0.75em;
    text-align: center; /* Ensure pagination is centered */
}

.dataTables_wrapper .dataTables_paginate ul.pagination {
    justify-content: center !important; /* Force center alignment for Bootstrap 5 pagination */
    display: flex !important; /* Ensure flex properties apply */
    flex-wrap: wrap; /* Allow wrapping if absolutely necessary, though less likely with server-side */
    margin-bottom: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.3rem 0.6rem; 
    margin: 2px; 
    border-radius: 0.25rem;
    line-height: 1.5; 
}

/* Remove the horizontal scroll hack as it's not needed for server-side pagination appearance */
/* 
.dataTables_wrapper .dataTables_paginate {
    overflow-x: auto; 
    white-space: nowrap; 
    text-align: left; 
}
.dataTables_wrapper .dataTables_paginate ul.pagination {
    justify-content: flex-start; 
    display: inline-flex; 
}
*/

/* Styling for the ellipsis button itself if DataTables generates one */
.dataTables_wrapper .dataTables_paginate .ellipsis {
    padding: 0.3rem 0.6rem;
    margin: 2px;
    border: 1px solid transparent; /* Match button border or remove if not needed */
}

/* Overriding Bootstrap styles that might prevent DataTables from hiding elements for ellipses */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default !important;
    color: #6c757d !important; /* Default disabled color */
    background-color: transparent !important;
    border-color: transparent !important;
}

/* When DataTables hides page numbers for ellipses, it might add a class like dt-button-disabled or similar */
/* We need to ensure these actually hide if DataTables relies on CSS for it with Bootstrap */
/* This is speculative, as DataTables usually handles this via JS, but good to be aware */

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #007bff !important; 
    color: white !important; 
    border-color: #007bff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #e9ecef;
    border-color: #dee2e6;
    color: #0056b3 !important;
}

.dataTables_length select,
.dataTables_filter input {
    max-width: 200px; 
    display: inline-block; 
    width: auto; 
    margin-bottom: 0.5rem;
}

.table-responsive {
    overflow-x: auto; 
}

.content-wrapper-card {
    background-color: #ffffff;
    border-radius: 0.5rem;
    padding: 1.5rem; 
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.07);
    overflow-x: hidden; 
}

.table th {
    font-weight: 600; /* Slightly bolder table headers */
    color: #495057;
}

/* General card styling if not using the .content-wrapper-card from base.html directly */
.card {
    border: 1px solid #e0e0e0; /* Softer border for cards */
    box-shadow: 0 2px 4px rgba(0,0,0,0.04); /* Softer shadow */
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}
.btn-primary:hover {
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

/* Remove conflicting old sidebar styles if any */
/* .sidebar { ... } - old styles are now in base.html or handled by inline styles */
/* main { ... } - old padding/margin for main content is now handled by .main-content in base.html */