:root {
    --app-ink: #264653;
    --app-ink-2: #1d3742;
    --app-orange: #f4a261;
    --app-teal: #2a9d8f;
    --app-red: #e76f51;
    --app-amber: #e9c46a;
    --app-bg: #F3F0EC;
    --app-border: #eae7e2;
    --app-border-soft: #ece9e4;
    --app-shadow: 0 2px 12px rgba(38, 70, 83, .07);
    --app-radius: 14px;
}

body {
    background: var(--app-bg) !important;
}

.content-body {
    padding: 1.4rem 1.5rem !important;
}

/* Fixed top bar (deznav-init sets data-header-position="fixed"): clear
   page headers/cards from under the bar and add professional breathing room. */
body[data-header-position=fixed] .content-body {
    padding-top: calc(var(--dz-header-height) + 1.1rem) !important;
}

.content-body>.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.page-header,
.dashboard-header {
    background: #fff !important;
    color: var(--app-ink) !important;
    border: 1px solid var(--app-border) !important;
    border-left: 4px solid var(--app-orange) !important;
    border-radius: var(--app-radius) !important;
    padding: 1.1rem 1.5rem !important;
    margin-bottom: 1.4rem !important;
    box-shadow: var(--app-shadow) !important;
}

.page-header::before,
.page-header::after,
.dashboard-header::before,
.dashboard-header::after {
    display: none !important;
}

.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4,
.page-header h5,
.dashboard-header h1,
.dashboard-header h2,
.dashboard-header h3,
.dashboard-header h4,
.dashboard-header h5 {
    color: var(--app-ink) !important;
    font-weight: 700 !important;
    font-size: 1.22rem !important;
    margin: 0 !important;
}

.page-header p,
.dashboard-header p {
    color: #8a8680 !important;
    margin: .35rem 0 0 !important;
    font-size: .88rem !important;
}

.page-title-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 1.25rem !important;
}

.page-title-box .breadcrumb {
    background: #fff !important;
    border: 1px solid var(--app-border) !important;
    border-radius: .65rem !important;
    padding: .55rem 1.1rem !important;
    margin: 0 !important;
    box-shadow: 0 1px 6px rgba(38, 70, 83, .06);
}

.page-title-box .breadcrumb-item {
    color: #8a8680 !important;
    font-weight: 500 !important;
}

.page-title-box .breadcrumb-item a {
    color: var(--app-ink) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.page-title-box .breadcrumb-item a i {
    color: var(--app-orange) !important;
    margin-right: .35rem;
}

.page-title-box .breadcrumb-item.active {
    color: var(--app-orange) !important;
    font-weight: 700 !important;
}

.page-title-box .breadcrumb-item + .breadcrumb-item::before {
    color: #c3beb7 !important;
    content: "/" !important;
    font-weight: 600;
}

.cm-content-box,
.et-card,
.table-card {
    background: #fff !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow) !important;
}

.content-body .card {
    background: #fff !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow) !important;
}

.content-title,
.content-title.SlideToolHeader,
.card-header,
.table-header,
.table-header-content,
.et-card-head {
    background: #fff !important;
    border-bottom: 1px solid var(--app-border-soft) !important;
    padding: .95rem 1.4rem !important;
}

.content-title .cpa,
.card-header .card-title,
.card-header h4,
.card-header h5,
.card-header h6,
.table-header h4,
.table-header h5,
.table-header h6,
.table-header-content h4,
.table-header-content h5,
.table-header-content h6,
.et-card-head h6 {
    color: var(--app-ink) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    margin: 0 !important;
}

.content-body .card-body,
.cm-content-body .card-body,
.cm-content-body {
    padding: 1.2rem 1.4rem !important;
}

.table,
.compact-table,
.projects-table,
.reports-table,
.et-table,
.tr-table,
.tk-table,
.pm-table,
.data-table,
.attendance-table,
.notifications-table,
.salary-table,
.departments-table,
.employees-table,
.prx-tbl,
.custom-table,
table.dataTable {
    width: 100% !important;
    border-collapse: collapse;
    margin-bottom: 0;
}

.table thead th,
.table thead th *,
.compact-table thead th,
.projects-table thead th,
.reports-table thead th,
.et-table thead th,
.tr-table thead th,
.tk-table thead th,
.pm-table thead th,
.data-table thead th,
.attendance-table thead th,
.notifications-table thead th,
.salary-table thead th,
.departments-table thead th,
.employees-table thead th,
.prx-tbl thead th,
.custom-table thead th,
table.dataTable thead th,
.table thead.table-light th,
.table thead.table-dark th,
.thead-dark th {
    background: var(--app-ink) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: .78rem !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    border-bottom: 0 !important;
    padding: .88rem 1.05rem !important;
    vertical-align: middle !important;
}

.et-table th {
    text-align: left;
    font-size: .78rem !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: .88rem 1.05rem !important;
    background: var(--app-ink) !important;
    border-bottom: 0 !important;
    white-space: nowrap;
}

.table-responsive .table thead th,
.table-responsive .compact-table thead th,
.table-responsive .projects-table thead th,
.table-responsive .reports-table thead th,
.table-responsive table.dataTable thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}

/* Higher-specificity overrides to beat per-page !important (e.g. DWR, leaves) */
.content-body table.table thead th,
.content-body .table-responsive thead th,
.content-body .table-fixed-container thead th,
.content-body table.compact-table thead th,
.content-body table.projects-table thead th,
.content-body table.reports-table thead th,
.content-body table.et-table thead th,
.content-body table.tk-table thead th,
.content-body table.complaints-table thead th,
.content-body table.dataTable thead th {
    padding: .88rem 1.05rem !important;
    background: var(--app-ink) !important;
    color: #fff !important;
    border-bottom: 0 !important;
}

.content-body table.table tbody td,
.content-body .table-responsive tbody td,
.content-body .table-fixed-container tbody td,
.content-body table.compact-table tbody td,
.content-body table.projects-table tbody td,
.content-body table.reports-table tbody td,
.content-body table.et-table tbody td,
.content-body table.tk-table tbody td,
.content-body table.complaints-table tbody td,
.content-body table.dataTable tbody td {
    padding: .82rem 1.05rem !important;
    border-color: var(--app-border-soft) !important;
}

.content-body table.table-sm tbody td {
    padding: .5rem .7rem !important;
}

.content-body table.table tbody tr:nth-of-type(odd) > *,
.content-body .table-striped tbody tr:nth-of-type(odd) > *,
.content-body table.dataTable tbody tr.odd > * {
    background-color: #faf8f5 !important;
}

.content-body table.table tbody tr:hover > *,
.content-body .table-hover tbody tr:hover > *,
.content-body table.et-table tbody tr:hover,
.content-body table.tk-table tbody tr:hover,
.content-body table.projects-table tbody tr:hover {
    background-color: #fdf0e3 !important;
}

.content-body table.table thead th .table-header-icon,
.content-body table.compact-table thead th .table-header-icon,
.content-body table.projects-table thead th i,
.content-body table.et-table th i,
.content-body table.dataTable thead th i {
    color: #fff !important;
}

.table thead th i,
.compact-table thead th i,
.projects-table thead th i,
.reports-table thead th i,
.et-table th i,
.tr-table thead th i,
.tk-table thead th i,
.pm-table thead th i,
.data-table thead th i,
.attendance-table thead th i,
.notifications-table thead th i,
.salary-table thead th i,
.departments-table thead th i,
.employees-table thead th i,
.prx-tbl thead th i,
.custom-table thead th i,
table.dataTable thead th i {
    color: #fff !important;
    opacity: .92;
    margin-right: .3rem;
}

.table td,
.table th,
.compact-table td,
.projects-table td,
.reports-table td,
.et-table td,
.tr-table td,
.tk-table td,
.pm-table td,
.data-table td,
.attendance-table td,
.notifications-table td,
.salary-table td,
.departments-table td,
.employees-table td,
.prx-tbl td,
.custom-table td,
table.dataTable > tbody > tr > td {
    padding: .82rem 1.05rem !important;
    vertical-align: middle !important;
    border-color: var(--app-border-soft) !important;
    color: #3f3a35;
}

.table-sm td,
.table-sm th {
    padding: .5rem .7rem !important;
}

.table > tbody > tr:nth-of-type(odd) > *,
table.dataTable > tbody > tr.odd > * {
    background-color: #faf8f5 !important;
}

.table-hover > tbody > tr:hover > *,
.table > tbody > tr:hover > *,
.et-table tbody tr:hover,
.tk-table tbody tr:hover,
.projects-table tbody tr:hover,
.reports-table tbody tr:hover {
    background-color: #fdf0e3 !important;
}

.table-bordered > :not(caption) > * {
    border-width: 1px 0;
}

.dataTables_wrapper .dt-buttons {
    margin: .8rem 1.2rem;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    margin: .8rem 1.2rem;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--app-border) !important;
    border-radius: 8px !important;
    padding: .35rem .7rem !important;
    background: #fff !important;
    color: var(--app-ink) !important;
}

.dataTables_wrapper .dataTables_info {
    color: #8a8680 !important;
    font-size: .84rem !important;
}

.content-body .pagination {
    gap: .2rem;
}

.content-body .pagination .page-link {
    color: var(--app-ink) !important;
    border: 1px solid #e3e0db !important;
    border-radius: 8px !important;
    padding: .42rem .8rem !important;
    font-weight: 500;
}

.content-body .pagination .page-item.active .page-link {
    background-color: var(--app-ink) !important;
    border-color: var(--app-ink) !important;
    color: #fff !important;
}

.content-body .pagination .page-item.disabled .page-link {
    color: #b6b1aa !important;
    background: #fff !important;
}

.btn {
    border-radius: 8px !important;
    font-weight: 500;
}

.btn-sm {
    padding: .42rem .85rem !important;
    font-size: .8rem !important;
    border-radius: 7px !important;
}

.search-box {
    background: #fff !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    box-shadow: none !important;
    margin-bottom: 18px !important;
}

.search-box .input-group {
    box-shadow: none !important;
    border-radius: 8px !important;
}

.search-box .form-control {
    border: 1px solid #e3e0db !important;
    border-radius: 8px !important;
}

.search-box .btn {
    border-radius: 8px !important;
}

.form-label {
    color: var(--app-ink) !important;
    font-weight: 500 !important;
    font-size: .9rem;
}

.content-body .form-control,
.content-body .form-select {
    border: 1px solid #e3e0db !important;
    border-radius: 8px !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #e3e0db !important;
    height: 38px !important;
    border-radius: 8px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
}

.tk-hero {
    background: linear-gradient(135deg, var(--app-ink-2) 0%, var(--app-ink) 45%, var(--app-teal) 100%) !important;
    color: #fff !important;
}

.tk-card {
    background: #fff !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow) !important;
}

/* ============================================================
   UNIFIED TABLE-LIST PAGES
   One design language across every list view. Higher-specificity
   + !important so shared CSS beats any per-page <style> block.
   ============================================================ */

/* ---- .table-responsive frames every list table consistently ---- */
.content-body .table-responsive {
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    background: #fff !important;
    box-shadow: var(--app-shadow) !important;
}

/* ---- Section (content-title) headers get an orange accent rail ---- */
.box-primary .content-title,
.filter .content-title,
.filter .content-title.SlideToolHeader {
    border-left: 4px solid var(--app-orange) !important;
    border-bottom: 1px solid var(--app-border-soft) !important;
    background: #fff !important;
}

/* search box embedded in the section header sits flush */
.content-title .search-box {
    margin-bottom: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* defeat white-on-white inline color on titles (e.g. designation) */
.content-title .cpa,
.content-title .cpa span,
.content-title.SlideToolHeader .cpa span,
.card-header .card-title span {
    color: var(--app-ink) !important;
}

/* ---- table headers: ink bar + orange underline everywhere ---- */
.content-body table.table thead tr th,
.content-body table.table thead th,
.content-body table.positions-table thead th,
.content-body table.complaints-table thead th,
.content-body table.dataTable thead tr th,
.content-body thead.thead-dark th,
.content-body thead.thead-dark tr th,
.content-body thead tr th {
    background: var(--app-ink) !important;
    color: #fff !important;
    border-bottom: 0 !important;
    padding: .88rem 1.05rem !important;
    font-size: .78rem !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    text-align: left !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

/* ---- table body cells: one spacing + alignment everywhere ---- */
.content-body table.table tbody tr td,
.content-body table.table tbody td,
.content-body table.positions-table tbody td,
.content-body table.complaints-table tbody td,
.content-body table.dataTable tbody tr td {
    padding: .82rem 1.05rem !important;
    text-align: left !important;
    vertical-align: middle !important;
    border-color: var(--app-border-soft) !important;
    color: #3f3a35;
}

/* ---- badges / status pills ---- */
.badge,
.status-badge {
    font-size: .72rem !important;
    font-weight: 600 !important;
    padding: .42em .85em !important;
    border-radius: 2rem !important;
    line-height: 1 !important;
}

.badge-success,
.badge-teal,
.status-active {
    background-color: var(--app-teal) !important;
    color: #fff !important;
    border: none !important;
}

.badge-danger,
.badge-red,
.status-inactive {
    background-color: var(--app-red) !important;
    color: #fff !important;
    border: none !important;
}

.badge-warning {
    background-color: var(--app-amber) !important;
    color: #4a3f1f !important;
    border: none !important;
}

.badge-info,
.badge-primary,
.badge-secondary {
    background-color: var(--app-ink) !important;
    color: #fff !important;
    border: none !important;
}

/* ---- action buttons: ink / teal / red palette ---- */
.content-body .btn-primary,
.btn-primary {
    background-color: var(--app-ink) !important;
    border-color: var(--app-ink) !important;
    color: #fff !important;
}

.content-body .btn-primary:hover,
.btn-primary:hover {
    background-color: var(--app-ink-2) !important;
    border-color: var(--app-ink-2) !important;
}

.content-body .btn-success,
.btn-success {
    background-color: var(--app-teal) !important;
    border-color: var(--app-teal) !important;
    color: #fff !important;
}

.content-body .btn-success:hover,
.btn-success:hover {
    background-color: #238077 !important;
    border-color: #238077 !important;
}

.content-body .btn-info,
.btn-info {
    background-color: var(--app-teal) !important;
    border-color: var(--app-teal) !important;
    color: #fff !important;
}

.content-body .btn-info:hover,
.btn-info:hover {
    background-color: #238077 !important;
    border-color: #238077 !important;
}

.content-body .btn-danger,
.btn-danger {
    background-color: var(--app-red) !important;
    border-color: var(--app-red) !important;
    color: #fff !important;
}

.content-body .btn-danger:hover,
.btn-danger:hover {
    background-color: #d55b40 !important;
    border-color: #d55b40 !important;
}

.content-body .btn-warning,
.btn-warning {
    background-color: var(--app-amber) !important;
    border-color: var(--app-amber) !important;
    color: #4a3f1f !important;
}

.bg-primary {
    background-color: var(--app-ink) !important;
}

.text-primary {
    color: var(--app-ink) !important;
}

.btn-outline-primary {
    border-color: var(--app-ink) !important;
    color: var(--app-ink) !important;
}

/* ---- modal headers: one ink bar everywhere ---- */
.modal-header,
.modal-header.modal-header-custom,
.modal-header.bg-primary,
.modal-header.bg-info,
.modal-header.bg-success,
.modal-header.bg-danger {
    background: var(--app-ink) !important;
    border-bottom: none !important;
    color: #fff !important;
}

.modal-header .modal-title,
.modal-header .modal-title h5,
.modal-title {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

.modal-content {
    border: none !important;
    border-radius: var(--app-radius) !important;
    box-shadow: 0 12px 40px rgba(29, 55, 66, .18) !important;
}

/* ---- alerts ---- */
.alert {
    border-radius: .75rem !important;
}

/* ============ custom hero-header + stats + toolbar list pages ============ */
.departments-header,
.positions-header,
.complaints-header {
    background: #fff !important;
    border: 1px solid var(--app-border) !important;
    border-left: 4px solid var(--app-orange) !important;
    border-radius: var(--app-radius) !important;
    padding: 1.1rem 1.5rem !important;
    margin-bottom: 1.4rem !important;
    box-shadow: var(--app-shadow) !important;
}

.departments-header h3,
.departments-header h3 *,
.positions-header h3,
.positions-header h3 *,
.complaints-header h3,
.complaints-header h3 * {
    color: var(--app-ink) !important;
    font-weight: 700 !important;
    font-size: 1.22rem !important;
    margin: 0 !important;
}

.departments-header p,
.positions-header p,
.complaints-header p {
    color: #8a8680 !important;
    margin: .35rem 0 0 !important;
}

.departments-header .btn-light,
.positions-header .btn-light,
.complaints-header .btn-light {
    background: var(--app-ink) !important;
    border-color: var(--app-ink) !important;
    color: #fff !important;
}

.departments-header .btn-light:hover,
.positions-header .btn-light:hover,
.complaints-header .btn-light:hover {
    background: var(--app-ink-2) !important;
    border-color: var(--app-ink-2) !important;
}

.dept-stats-grid,
.position-stats-grid,
.stats-grid {
    gap: 1rem !important;
    margin-bottom: 1.4rem !important;
}

.dept-stat-card,
.position-stat-card,
.stat-card {
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow) !important;
}

.dept-stat-card:hover,
.position-stat-card:hover,
.stat-card:hover {
    transform: translateY(-2px) !important;
}

.dept-toolbar,
.positions-toolbar,
.complaints-toolbar {
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow) !important;
    margin-bottom: 1.4rem !important;
}

.dept-toolbar .search-box,
.positions-toolbar .search-box,
.complaints-toolbar .search-box {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.departments-table-container,
.positions-table-container,
.table-container {
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow) !important;
}

/* ============================================================
   TASK PICKER — time-tracker dropdown task lists
   ============================================================ */
.tt-picker {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #e3e0db;
    border-radius: 12px;
    background: #fff;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tt-picker-empty {
    padding: 18px 12px;
    text-align: center;
    color: #9a968f;
    font-size: .82rem;
}

.tt-pick-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 11px;
    border-radius: 9px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background .15s ease, border-color .15s ease;
}

.tt-pick-item:hover {
    background: #f6f3ee;
}

.tt-pick-item.selected {
    background: #fdf0e3;
    border-color: var(--app-orange);
}

.tt-pick-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.tt-pick-name {
    font-weight: 600;
    color: #212529;
    font-size: .85rem;
    line-height: 1.25;
}

.tt-pick-meta {
    color: #7a766f;
    font-size: .72rem;
}

.tt-pick-due {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: .72rem;
}

.tt-pick-due i {
    font-size: .7rem;
}

/* status pills (colored, semantic) */
.tt-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.tt-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.tt-chip-0 { background: rgba(108, 117, 125, .15); color: #5c6166; }
.tt-chip-1 { background: rgba(42, 157, 143, .15); color: #1f7a6f; }
.tt-chip-2 { background: rgba(244, 162, 97, .2); color: #b35f1c; }
.tt-chip-3 { background: rgba(108, 117, 125, .15); color: #5c6166; }
.tt-chip-4 { background: rgba(46, 125, 50, .15); color: #2e7d32; }

/* due date (colored, semantic) */
.tt-due-overdue { color: #d64545 !important; font-weight: 700; }
.tt-due-overdue i { color: #e76f51; }
.tt-due-today { color: #d4701e !important; font-weight: 700; }
.tt-due-today i { color: #f4a261; }
.tt-due-upcoming { color: #1b7a6f !important; }
.tt-due-upcoming i { color: #2a9d8f; }
.tt-due-none { color: #9a968f !important; }
.tt-due-none i { color: #b9b4ac; }

/* used / allocated hours chip in the task pickers */
.tt-hrs-ok { color: #1b7a6f !important; }
.tt-hrs-ok i { color: #2a9d8f; }
.tt-hrs-warn { color: #d4701e !important; font-weight: 700; }
.tt-hrs-warn i { color: #f4a261; }
.tt-hrs-crit { color: #d64545 !important; font-weight: 700; }
.tt-hrs-crit i { color: #e76f51; }
.tt-hrs-none { color: #7a766f !important; }
.tt-hrs-none i { color: #b9b4ac; }

/* ============================================================
   CONSISTENT PRIORITY / DUE / PENDING-WARNING COLORS
   readable amber = Medium/Upcoming/Remark (replaces washed-out
   yellow-on-light text like #e9c46a)
   ============================================================ */
.priority-badge {
    border-radius: 20px !important;
    min-width: 68px !important;
}

.priority-high,
.status-overdue,
.date-overdue,
.task-overdue {
    color: #d64545 !important;
}

.priority-medium,
.date-upcoming,
.status-pending,
.task-pending,
.task-priority-medium {
    color: #b35f1c !important;
}

.priority-low,
.date-ontrack,
.task-priority-low {
    color: #1f7a6f !important;
}

.status-remark-yellow {
    color: #b35f1c !important;
    background-color: #fff7e6 !important;
    border-left-color: #f4a261 !important;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* ---- consistent pagination ---- */
.pagination .page-link {
    color: var(--app-ink) !important;
    border-color: #e3e0db !important;
    font-weight: 600 !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--app-teal) !important;
    border-color: var(--app-teal) !important;
    color: #fff !important;
}

.pagination .page-item.disabled .page-link {
    color: #b0aca5 !important;
    background-color: #f6f3ee !important;
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 .2rem rgba(42, 157, 143, .15) !important;
}

.page-text {
    color: #8a8680;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
   Z-INDEX STACK — popups & dropdowns stay above the sticky
   table headers (they were being hidden beneath thead th)
   ============================================================ */
.dropdown-menu,
.dropdown-menu.show,
.dropdown-menu[data-bs-popper] {
    z-index: 1050 !important;
}

.btn-group.show .dropdown-menu,
.btn-group.show .dropdown-menu.show {
    z-index: 1050 !important;
}

.select2-container--open,
.select2-container--open .select2-dropdown {
    z-index: 1060 !important;
}

.popover {
    z-index: 1070 !important;
}

.modal {
    z-index: 1080 !important;
}

.modal-backdrop {
    z-index: 1075 !important;
}

.tt-overlay,
#ttModal {
    z-index: 1000000 !important;
}