/* Override if inside .wh-table */
.wh-table .wh-opt-dropdown-content {
    position: relative;
    /* or remove position entirely */
}


table tbody tr td {
    vertical-align: top !important;
}

table thead th {
    white-space: nowrap;
}

/* table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
    background-color: #fff;
} */
th:first-child {
    border-top-left-radius: 6px;
    /* Adjust the radius as needed */
}

th:last-child {
    border-top-right-radius: 6px;
    /* Adjust the radius as needed */
}


/* ===========================
   wh-table — Clean Professional Design
   =========================== */

.wh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* Wrapper for rounded corners */
.table-responsive:has(.wh-table),
.cs-table-wrap {
    /* border: 1px solid #dde4f0; */
    /* border-radius: 8px; */
    overflow: hidden;
}

/* thead */
.wh-table thead tr {
    background-color: #f4f7fc;
}

table.wh-table thead th {
    background-color: #f4f7fc;
    color: #0f172a;
    font-family: 'Inter', inherit;
    font-size: 12.5px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
    padding: 9px 14px;
    border-bottom: 2px solid #dde4f0;
    border-right: 1px solid #dde4f0;
    border-top: none;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

table.wh-table thead th:last-child { border-right: none; }

/* S.No (#) and Actions — weight 800 */
table.wh-table thead th:first-child,
table.wh-table thead th:last-child {
    font-weight: 800;
    color: #1d2c48;
}

/* Rounded header corners */
.wh-table thead th:first-child { border-top-left-radius:  8px; }
.wh-table thead th:last-child  { border-top-right-radius: 8px; }

/* tbody cells */
.wh-table td {
    font-size: 12px;
    padding: 10px 14px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f3f7;
    border-right: 1px solid #f0f3f7;
    color: #1e293b;
}

.wh-table td:last-child { border-right: none; }

/* anything in td has span, div */
.wh-table td span,
.wh-table td div {
    font-size: 12px;
}

/* Row hover */
.wh-table tbody tr {
    transition: background 0.12s ease;
}

.wh-table tbody tr:hover {
    background-color: #f5f8ff;
}

/* Remove bottom border on last row */
.wh-table tbody tr:last-child td {
    border-bottom: none;
}

.wh-table .full-row {
    text-align: center;
    width: 100%;
    display: table-cell;
}

/* .thead-blue th {
    background-color: #1264e7 !important;
    color: #ffffff !important;
} */

.wh-table button,
.wh-custom-table button {
    font-size: 11px;
    font-weight: 500;
    background-color: transparent;
    padding: 0.2em 0.45em;
    border-radius: 5px;
}


.table-sm {
    font-size: 0.875rem;
    /* Smaller font for table */
}



.table-scroll-wrapper {
    max-height: 445px;        /* table body height */
    overflow-y: auto;         /* internal vertical scroll */
    overflow-x: auto;         /* horizontal scroll if needed */
}

.table-scroll-wrapper thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: white;        /* important for sticky header */
}

/* Scroll wrapper has thin scrollbar */
.table-scroll-wrapper {
    scrollbar-width: thin;                /* Firefox */
    scrollbar-color: #c0c0c0 #f0f0f0;     /* thumb + track */
}

/* Chrome, Edge, Safari */
.table-scroll-wrapper::-webkit-scrollbar {
    width: 6px;           /* thin width */
    height: 6px;
}

.table-scroll-wrapper::-webkit-scrollbar-track {
    background: #f0f0f0;  /* light background */
    border-radius: 10px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #b5b5b5;  /* thumb color */
    border-radius: 10px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #8e8e8e;  /* darker on hover */
}


.table td {
    word-break: break-all !important;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 1px;
}

/* Sorting icons */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 22px !important; /* <-- Reserve space for icon */
}

th.sortable::after {
    content: "\f0dc"; /* FontAwesome fa-sort */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 6px;         /* keep icon aligned */
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.35;
    pointer-events: none;
}

th.sortable.asc::after {
    content: "\f0de"; /* fa-sort-up */
    opacity: 1;
}

th.sortable.desc::after {
    content: "\f0dd"; /* fa-sort-down */
    opacity: 1;
}



.table td,
.table th {
    padding: 0.35rem 0.65rem; /* top-bottom, left-right */
}




body.dark-only .wh-table thead tr,
body.dark-only table.wh-table thead th {
    background-color: #1a2233;
    color: #e2e8f0;
    border-bottom-color: #2d3748;
}

body.dark-only table.wh-table thead th:first-child,
body.dark-only table.wh-table thead th:last-child {
    color: #f1f5f9;
}

body.dark-only .wh-table tbody tr {
    background-color: #1e2533;
}

body.dark-only .wh-table td {
    color: #cbd5e1;
    border-bottom-color: #2d3748;
}

body.dark-only .wh-table tbody tr:hover {
    background-color: #1a2436;
}

body.dark-only .wh-custom-table thead {
    border-color: #374558;
    background-color: #374558 !important;
}


body.dark-only .modal table.dataTable.display tbody tr.odd {
    border-color: #374558 !important;
    background-color: #374558 !important;
}

body.dark-only .modal table.dataTable.display tbody tr.even {
    border-color: #374558 !important;
    background-color: #374558 !important;
}

body.dark-only .modal table.dataTable.display tbody tr:hover {
    background-color: #1a2a39 !important;
}


/* =====================================================
   SHARED PAGINATION BAR  (.wh-pag-*)
   Used across all pages — loaded via table.css
   ===================================================== */

.wh-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 7px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

/* Record count pill */
.wh-record-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #000;
}

.wh-record-pill i   { color: #1264e7; font-size: 11px; }
.wh-record-pill span{ font-weight: 700; color: #000; }

/* Pagination controls row */
.wh-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Per page label + select */
.wh-per-page {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #000;
    white-space: nowrap;
}

.wh-pag-select {
    height: 26px;
    padding: 0 20px 0 7px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23000' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    transition: border-color .18s;
}
.wh-pag-select:focus { border-color: #1264e7; outline: none; }

/* Connected nav button group */
.wh-pag-group {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.wh-pag-btn {
    width: 28px;
    height: 26px;
    border: none;
    border-right: 1px solid #d1d5db;
    background: transparent;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .18s;
    padding: 0;
    line-height: 1;
}
.wh-pag-btn:last-of-type { border-right: none; }
.wh-pag-btn:hover:not(.disabled) { background: #1264e7; color: #fff; }
.wh-pag-btn.disabled { opacity: .3; pointer-events: none; }

.wh-pag-range {
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    color: #000;
    border-right: 1px solid #d1d5db;
    height: 26px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    background: #f3f4f6;
}

/* Jump-to-page pill */
.wh-pag-jump {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    height: 26px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
}

.wh-pag-jump-label {
    font-size: 11px;
    font-weight: 600;
    color: #000;
    white-space: nowrap;
}
.wh-pag-jump-label strong { color: #000; font-weight: 700; }

.wh-pag-jump-input {
    width: 36px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f3f4f6;
    font-size: 11px;
    font-weight: 600;
    color: #000;
    text-align: center;
    outline: none;
    transition: border-color .18s;
}
.wh-pag-jump-input:focus { border-color: #1264e7; }
.wh-pag-jump-input::-webkit-inner-spin-button,
.wh-pag-jump-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.wh-pag-jump-input[type=number] { -moz-appearance: textfield; }

.wh-pag-go {
    height: 18px;
    padding: 0 8px;
    border: none;
    border-radius: 4px;
    background: #1264e7;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background .18s;
    white-space: nowrap;
}
.wh-pag-go:hover { background: #0f56d0; }

/* Dark mode */
body.dark-only .wh-toolbar       { background: #1e2533; border-color: #2d3748; }
body.dark-only .wh-record-pill   { background: #161e2e; border-color: #2d3748; color: #94a3b8; }
body.dark-only .wh-record-pill span { color: #e2e8f0; }
body.dark-only .wh-pag-select    { background: #161e2e; border-color: #2d3748; color: #e2e8f0; }
body.dark-only .wh-pag-group     { background: #1e2533; border-color: #2d3748; }
body.dark-only .wh-pag-btn       { border-color: #2d3748; color: #94a3b8; }
body.dark-only .wh-pag-range     { background: #161e2e; border-color: #2d3748; color: #e2e8f0; }
body.dark-only .wh-pag-jump      { background: #1e2533; border-color: #2d3748; }
body.dark-only .wh-pag-jump-input{ background: #161e2e; border-color: #2d3748; color: #e2e8f0; }