/* DataTable styles moved from custom.css */

/* datatables */
.dataTables_wrapper {
  padding-bottom: 5px;
}
.datatable {
    width: 100% !important;
}
.table.datatable {
    box-sizing: border-box;
    border-collapse: collapse;
}
table.dataTable {
  margin-top: 0px !important;
}
.table-bordered {
  border: 0px;
}
table.dataTable thead {
  background: #f2f2f2 !important;
}
table.dataTable thead th {
  background-color: #f2f2f2 !important;
  border-top: 0px;
  border-bottom: 1px solid #dee2e6;
}
table.dataTable tfoot th, 
table.dataTable tfoot td {
  border-top: 1px solid #dee2e6;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none;
}
table.dataTable thead th, 
table.dataTable thead td,
table.dataTable tbody th, 
table.dataTable tbody td,
table.dataTable tfoot th,
table.dataTable tfoot td {
  padding: 5px;
  border-left: none;
  border-right: none;
  vertical-align: middle !important;
}
table.dataTable tbody td.select-checkbox::before,
table.dataTable tbody td.select-checkbox::after,
table.dataTable tbody th.select-checkbox::before,
table.dataTable tbody th.select-checkbox::after {
    top: 50%;
}
.table-striped tbody tr:nth-of-type(odd) {
  background: #fff !important;
}
.table-striped tbody tr:nth-of-type(even) {
  background: #fff !important;
}
.datatable-SavedForm td .btn-info {
    display: none;
}
.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 1px solid #dee2e6;
}
.dt-bootstrap4 .dt-buttons a.btn-danger{
    display: none;
}
.dt-bootstrap4 th.select-checkbox,
.dt-bootstrap4 td.select-checkbox {
    display: none;
}
/* Legacy paginate selector kept for compatibility */
.dataTables_paginate .pagination .page-link {
  border: none;
  border-radius: 6px;
  margin-left: 2px;
}
.dataTables_paginate .pagination .active .page-link {
  background: var(--primary-color);
  color: white;
}
.dataTables_paginate .pagination .disabled .page-link {
  color: #dee2e6;
  cursor: not-allowed;
}
div.dt-buttons {
  padding-top: 0.85rem;
  padding-left: 5px;
}
table.dataTable tbody tr {
    background-color: #fff !important;
}
table.dataTable td span.label:before, .prefix-dot { /* Add dot before status text */
  top: 6px;
  width: 15px;
  height: 15px;
  content:"\2022";
  font-size: 30px;
  margin-top: -15px;
  margin-left: -5px;
  position: relative;
  display: inline-block;
}
table.dataTable td span.label {
  font-weight: normal;
}

/* datatable */
.attendance-table{
    overflow-x: auto;
}
.pull-right{
    float: right !important; 
}

.pull-left{
    float: left !important; 
}
.green-cell, .yellow-cell {
    background-color: yellow;
    float: left;
    display: list-item;
    list-style: none;
    border-radius: 4px;
    padding: 3px 1px;
}
.green-cell {
    background-color: transparent;
    font-weight: bold;
}
.leave-type-full-day {
    width: 100%;
}
.leave-block > * {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px;
}
.purple-color{
    color: var(--primary-color);
}
.pending-status {
    background: yellow;
}
.attendance-table th,
.attendance-table th *,
.attendance-table td,
.attendance-table td *  {
    font-size: 14px
}

div.dataTables_scrollBody.tiny-scrollbar{
  /* max-height: 40pc; - Old Style
     height: auto;
     overflow: scroll; */
  overflow-y: hidden !important;
}
/* width */
.datatable-tiny-scroll::-webkit-scrollbar,
.dt-scroll::-webkit-scrollbar,
.dataTables_scrollBody::-webkit-scrollbar,
.dt-scroll-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* Track */
.datatable-tiny-scroll::-webkit-scrollbar-track,
.dt-scroll::-webkit-scrollbar-track,
.dataTables_scrollBody::-webkit-scrollbar-track,
.dt-scroll-body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #e8eaf6; 
  background: #f1f1f1;
  border-radius: 10px;
}
 
/* Handle */
.datatable-tiny-scroll::-webkit-scrollbar-thumb,
.dt-scroll::-webkit-scrollbar-thumb,
.dataTables_scrollBody::-webkit-scrollbar-thumb,
.dt-scroll-body::-webkit-scrollbar-thumb {
  background: var(--primary-color) !important; 
  border-radius: 10px;
}

/* Handle on hover */
.datatable-tiny-scroll::-webkit-scrollbar-thumb:hover,
.dt-scroll::-webkit-scrollbar-thumb:hover,
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
.dt-scroll-body::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color) !important; 
}

/* Firefox only - scrollbar-color (Chrome uses ::-webkit-scrollbar above) */
@-moz-document url-prefix() {
  .dt-scroll,
  .dataTables_scrollBody,
  .dt-scroll-body {
    scrollbar-color: var(--primary-color) #e8eaf6;
    scrollbar-width: thin;
  }
}

.datatable thead tr th{
  display: none;
}

.datatable-CustomFormField tbody tr,.datatable-VisitPurpose tbody tr, .datatable-FeedbackTypes tbody tr,
.datatable-TaskTypes tbody tr ,.datatable-LeadSources tbody tr, .datatable-leadStages tbody tr, .datatable-Industry tbody tr,
.datatable-Territories tbody tr,.datatable-Product tbody tr,.datatable-PaymentMode tbody tr,.datatable-LeaveCategory tbody tr,
.datatable-ExpenseCategory tbody tr,.datatable-leadCampaigns tbody tr, .datatable-CustomFormFields tbody tr,
 .datatable-CustomFormSections tbody tr, .datatable-Catalog tbody tr, .datatable-feedback-types tbody tr,
.datatable-ProductCategory tbody tr {
  cursor: move;
}
.selected {
  background-color: #666;
  color: #fff;
}

.datatable-CustomFormField th, .datatable-CustomFormField td {
  width: 200px;
  padding: 5px;
  border: 1px solid #ccc;
}

.datatable-VisitPurpose th, .datatable-VisitPurpose td,.datatable-FeedbackTypes th ,.datatable-FeedbackTypes td,.datatable-TaskTypes th ,.datatable-TaskTypes td, .datatable-LeadSources th , .datatable-LeadSources td, .datatable-leadStages th,.datatable-leadStages td,.datatable-Industry td,.datatable-Industry th,.datatable-Territories td,.datatable-Territories th,.datatable-Product td,.datatable-Product th, .datatable-PaymentMode td ,.datatable-PaymentMode td,.datatable-LeaveCategory td ,.datatable-LeaveCategory th,.datatable-ExpenseCategory td ,.datatable-ExpenseCategory th,.datatable-leadCampaigns th,
.datatable-feedback-types th ,.datatable-feedback-types td {
  width: 600px;
  padding: 5px;
  border: 1px solid #ccc;
}
span.dt-header-filter {
    float: right;
    margin-bottom: 0.5rem;
}
.dt-header-filter.dropdown-toggle::after {
    content: "\f0b0";
    font-family: "Font Awesome 5 Free";
    border: none;
    padding-right: 0.5rem;
}
.filter-column .dropdown-menu{
  min-width: 250px !important;
}
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after{
  display: none;
  content: '';
}

thead input {
    width: 100%;
}
.datatable thead>tr>th.searchbar-th {
    padding: 0 !important;
    background: #fff;
    position: relative;
    text-align: left;
    padding: 5px;
    /*border: 1px solid #eee;*/
    background:#f2f2f2 !important; 
}
.datatable tr>th.searchbar-th .form-control-box,
.datatable tr>th.searchbar-th span.select2-selection.select2-selection--single,
.searchbar-th .dateRange {
    border: 2px solid #eee;
    height: 30px;
    padding: 0 3px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    line-height: 25px;
    font-weight: bold;
    color: #999;
    font-family: 'Font Awesome 5 Free','Abel', sans-serif;
    overflow: hidden;
}
.datatable tr>th.searchbar-th span.select2-selection.select2-selection--single .select2-selection__rendered{
  color: #999;
}
.datatable tr>th.searchbar-th .date-range i.fa.fa-calendar{
  margin-top: 5px;
  margin-right: 5px;
}
.datatable tr>th.searchbar-th .select2-container--default .select2-selection--single .select2-selection__arrow b{
      margin-top: -5px;
}
.datatable tr>th.searchbar-th  .select2-container .select2-selection--single .select2-selection__rendered{
    margin-top: 0 !important;
    color: #999;
}
.datatable tr>th.searchbar-th .form-control-box::placeholder{
    line-height: 28px;
    font-weight: bold;
    color: #999;
 } 

table.dataTable th,
table.dataTable td{
  font-size: 14px;
} 

/* Global Datatable Column Sizing Utilities */
table.dataTable th.dt-img-col,
table.dataTable td.dt-img-col {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  text-align: center !important;
  vertical-align: middle !important;
}
table.dataTable td.dt-img-col img {
  max-width: 50px !important;
  max-height: 50px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}
table.dataTable td.dt-img-col img.rounded-circle,
table.dataTable td.dt-img-col .rounded-circle img {
  border-radius: 50% !important;
}

table.dataTable th.dt-tight-col,
table.dataTable td.dt-tight-col {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

table.dataTable th.dt-narrow-col,
table.dataTable td.dt-narrow-col {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

table.dataTable th.dt-actions-col,
table.dataTable td.dt-actions-col {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  text-align: right !important;
  vertical-align: middle !important;
}

td .action-div {
    text-align: right;
    margin: auto;
    min-width: 60px !important;
    width: auto;
}

.list-action-icon {
  position: relative !important;
  top: -3px;
}

.action-div.not-have{
  min-height: 90px;
  height: auto;
}

.action-dropdown .data-table-action-menu .dropdown-item{
  margin: 2px;
}
.data-table-action-menu.show{
  display: block;
  /*position: inherit !important*/
}
.action-dropdown .data-table-action-menu{
  padding: 0.2rem 0.1rem;
  min-width: max-content;
  width: auto;
  max-width: calc(100vw - 24px);
  white-space: nowrap;
  overflow: hidden;
}
.action-dropdown .data-table-action-menu.dropdown-fixed-to-viewport{
  position: fixed !important;
  transform: none !important;
  z-index: 1060;
}
.action-btn{
    font-weight: 900;
    color: var(--primary-color) !important;
    font-size: 14px;
    margin: 0.9rem;
    cursor: pointer;
}
.action-btn.dropdown-toggle::after{
  display: none;
}
.data-table-action-menu .dropdown-item.btn-xs{
  color: var(--primary-color);
  padding: 0.5rem;
  margin: 0;  
  font-size: 14px;
  cursor: pointer;
  
}  
.data-table-action-menu .dropdown-item.btn-xs:hover{
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/*Datatable */

table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before{
  display: none;
}
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after{
  color: var(--primary-color);     
  font-weight: 900;
  font-family: fantasy;
  right: 1.3em;
  bottom: 0.7em;
}

.dataTables_scrollBody {
    position: static !important;
}
/* Keep wrapper as positioning context for the absolute loader overlay */
.dataTables_wrapper,
.dt-container {
    position: relative !important;
}

.ajaxTable.datatable{
  display: none;
}

.datatable .label-green,
.dashboard .label-success {
    background-color: #cbf4c9 !important;
    color: #0e6245 !important;
    font-weight: 700;
}
.datatable .label-yellow,
.dashboard .label-warning {
    background-color: #fff2d9 !important;
    color: #674d1b !important;
    font-weight: 700;
}
.datatable .label-red,
.dashboard .label-danger {
    background-color: #fed7d2 !important;
    color: #5a0a00 !important;
    font-weight: 700;
}

.datatable .badge-primary,
.datatable .label-blue,
.dashboard .label-info {
    background-color: #e8eaf6 !important;
    color: var(--primary-color) !important;
    font-weight: 700;
}
.attendance-table th,
.datatable th {
  color:  rgba(0, 0, 0, 0.54);
}
#orderDiv .datatable th{
  color: black;
}

.remove-card-b-m,
.report-div,
.card.datatable-tiny-scroll {
  margin-bottom:0 !important;
}

/* Completely remove the button's built-in processing spinner */
div.dt-buttons .btn.processing::after,
.dt-buttons .btn.processing::after,
.buttons-excel.processing::after,
.buttons-html5.processing::after {
    display: none !important;
    content: none !important;
}
div.dt-buttons .btn.processing,
.dt-buttons .btn.processing,
.buttons-excel.processing,
.buttons-html5.processing {
    color: #fff !important;
}

/* Remove bottom margin from DataTables footer row */
div.dt-container > div.row {
    margin-bottom: 0 !important;
}

/* Center all footer elements vertically (top-to-bottom), Download All left, pagination right */
.dt-container .row .col-12,
.dataTables_wrapper .row .col-12 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    min-height: 50px !important;
}

.dt-container .float-left,
.dataTables_wrapper .float-left {
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dt-container .float-right,
.dataTables_wrapper .float-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    float: none !important;
    width: auto !important;
    margin-right: 5px !important;
}

/* Reset all padding-top, margins, and line-heights that could disrupt vertical flex centering */
div.dt-container div.dt-buttons,
div.dataTables_wrapper div.dt-buttons,
.dt-container .dt-buttons,
.dataTables_wrapper .dt-buttons,
div.dt-container div.dt-info,
div.dataTables_wrapper div.dataTables_info,
.dt-container .dt-info,
.dataTables_wrapper .dataTables_info,
div.dt-container div.dt-length,
div.dataTables_wrapper div.dataTables_length,
.dt-container .dt-length,
.dataTables_wrapper .dataTables_length,
div.dt-container div.dt-paging,
div.dataTables_wrapper div.dataTables_paginate,
.dt-container .dt-paging,
.dataTables_wrapper .dataTables_paginate {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: normal !important;
    align-self: center !important;
}

div.dt-container div.dt-info,
div.dt-container div.dt-length,
div.dt-container div.dt-paging,
div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_paginate {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    align-self: center !important;
}

/* Set silver color for "Showing X to Y of Z entries" */
div.dt-container div.dt-info,
div.dataTables_wrapper div.dataTables_info {
    color: #999999 !important; /* Silver / muted color */
    font-size: 0.875rem !important;
}

div.dt-container div.dt-length select,
div.dataTables_wrapper div.dataTables_length select {
    margin: 0 !important;
}

/* =====================================================
   DataTable Pagination — exact match to reference UI
   < 1 [2] 3 4 5 ... 18 >

   IMPORTANT — DataTables 2.x Bootstrap 5 rendering notes:
   - Current page  → li.dt-paging-button.page-item.active
   - Inactive nums → li.dt-paging-button.page-item.disabled  (NOT active)
   - Disabled nav  → li.dt-paging-button.page-item.disabled (first/last child)
   - Ellipsis      → li.dt-paging-button.page-item.disabled.ellipsis
   So we MUST override Bootstrap's default .disabled gray-out for
   .dt-paging-button items so that page numbers 2,3,4... stay visible.
   ===================================================== */

/* The pagination container */
.dt-container .pagination,
.dataTables_wrapper .pagination {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Page items */
.dt-container .pagination .page-item,
.dataTables_wrapper .pagination .page-item {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ALL page-links — base style applied to every item including .disabled numbered pages */
.dt-container .pagination .dt-paging-button .page-link,
.dataTables_wrapper .pagination .dt-paging-button .page-link,
.dt-container .pagination .page-item .page-link,
.dataTables_wrapper .pagination .page-item .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--primary-color) !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    padding: 0 10px !important;
    margin: 0 !important;
    min-width: 25px !important;
    height: 36px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    transition: opacity 0.15s ease !important;
    margin: 0 2px !important;
}

/* Hover on inactive number pages */
.dt-container .pagination .dt-paging-button:not(.active) .page-link:hover,
.dataTables_wrapper .pagination .dt-paging-button:not(.active) .page-link:hover {
    opacity: 0.7 !important;
    color: #0056b3 !important;
    background-color: #e9ecef !important;
    border-radius: 5px !important;
    padding: 0 10px !important;
}

/* Active (current) page — solid blue rounded box */
.dt-container .pagination .page-item.active .page-link,
.dataTables_wrapper .pagination .page-item.active .page-link {
    background: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    min-width: 30px !important;
    height: 35px !important;
    padding: 0 8px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    border: none !important;
    cursor: default !important;
}

/* Hide first (<<) and last (>>) page buttons */
.dt-container .pagination .page-item:first-child,
.dt-container .pagination .page-item:last-child,
.dataTables_wrapper .pagination .page-item:first-child,
.dataTables_wrapper .pagination .page-item:last-child,
.dt-container .pagination li.first,
.dt-container .pagination li.last,
.dataTables_wrapper .pagination li.first,
.dataTables_wrapper .pagination li.last {
    display: none !important;
}

/* Disabled ARROWS at boundary (prev when on page 1, next when on last page)
   DT2 BS5: 'previous'/'next' class is on the inner <button class="page-link">,
   not on the <li>. The <li> only gets 'dt-paging-button page-item disabled'.
   So we target: disabled <li> containing a .previous or .next button. */
.dt-container .pagination .dt-paging-button.page-item.disabled .page-link.previous,
.dt-container .pagination .dt-paging-button.page-item.disabled .page-link.next,
.dataTables_wrapper .pagination .dt-paging-button.page-item.disabled .page-link.previous,
.dataTables_wrapper .pagination .dt-paging-button.page-item.disabled .page-link.next,
/* Also cover data-dt-idx attribute targeting */
.dt-container .pagination .page-item.disabled .page-link[data-dt-idx="previous"],
.dt-container .pagination .page-item.disabled .page-link[data-dt-idx="next"],
.dataTables_wrapper .pagination .page-item.disabled .page-link[data-dt-idx="previous"],
.dataTables_wrapper .pagination .page-item.disabled .page-link[data-dt-idx="next"],
/* Fallback: 2nd and 2nd-to-last visible li (after « » are hidden) */
.dt-container .pagination .dt-paging-button.page-item.disabled:nth-child(2) .page-link,
.dt-container .pagination .dt-paging-button.page-item.disabled:nth-last-child(2) .page-link,
.dataTables_wrapper .pagination .dt-paging-button.page-item.disabled:nth-child(2) .page-link,
.dataTables_wrapper .pagination .dt-paging-button.page-item.disabled:nth-last-child(2) .page-link {
    color: #cbd5e1 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.5 !important;
}

/* Ellipsis (...) — non-interactive gray dots */
.dt-container .pagination .ellipsis .page-link,
.dataTables_wrapper .pagination .ellipsis .page-link {
    color: #a0aec0 !important;
    cursor: default !important;
    pointer-events: none !important;
    background: transparent !important;
    border: none !important;
}

/* Remove focus ring */
.dt-container .pagination .page-item .page-link:focus,
.dataTables_wrapper .pagination .page-item .page-link:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
}
.dt-container .pagination .page-item.active .page-link:focus,
.dataTables_wrapper .pagination .page-item.active .page-link:focus {
    outline: none !important;
    box-shadow: none !important;
    background: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
}

/* Remove DataTable header hover effect (DT2 uses outline for hover) */
table.dataTable thead th:hover,
table.dataTable thead td:hover,
.table.table-hover thead tr:hover th,
.table.table-hover thead tr:hover td,
table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover,
table.dataTable thead > tr > td.dt-orderable-asc:hover,
table.dataTable thead > tr > td.dt-orderable-desc:hover {
    background-color: #f2f2f2 !important;
    background: #f2f2f2 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* DataTable sorting arrows - purple color */
table.dataTable thead > tr > th div.dt-column-header,
table.dataTable thead > tr > td div.dt-column-header {
    align-items: center !important;
    gap: 0.35rem;
}

table.dataTable thead > tr > th.dt-type-numeric div.dt-column-header,
table.dataTable thead > tr > td.dt-type-numeric div.dt-column-header {
    flex-direction: row !important;
    justify-content: flex-start !important;
}

table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order:before,
table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-desc .dt-column-order:after,
table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order:before,
table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order:after {
    color: var(--primary-color) !important;
}
/* Active sorting arrow - full opacity purple */
table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order:before,
table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order:after {
    opacity: 1 !important;
    color: var(--primary-color) !important;
}

/* Force white background on normal DataTable rows - no stripes */
/* DataTables 2.x uses box-shadow: inset 0 0 0 9999px rgba() for stripes, so we must reset box-shadow too */
table.dataTable.table.table-striped > tbody > tr:not(:hover),
table.dataTable.table.table-striped > tbody > tr:not(:hover) > *,
.table-striped > tbody > tr:not(:hover),
.table-striped > tbody > tr:not(:hover) > *,
table.dataTable > tbody > tr:not(:hover),
table.dataTable > tbody > tr:not(:hover) > td,
table.dataTable > tbody > tr:not(:hover) > th {
    background-color: #fff !important;
    background: #fff !important;
    box-shadow: none !important;
    --bs-table-accent-bg: #fff !important;
    --bs-table-striped-bg: #fff !important;
    --bs-table-hover-bg: #fff !important;
    --dt-row-stripe: 255, 255, 255 !important;
    --dt-row-hover: 255, 255, 255 !important;
}

table.dataTable.table > tbody > tr:hover,
table.dataTable.table > tbody > tr:hover > *,
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > * {
    background-color: #f7f7f7 !important;
    background: #f7f7f7 !important;
    box-shadow: none !important;
    --bs-table-accent-bg: #f7f7f7 !important;
    --bs-table-striped-bg: #f7f7f7 !important;
    --bs-table-hover-bg: #f7f7f7 !important;
    --dt-row-stripe: 247, 247, 247 !important;
    --dt-row-hover: 247, 247, 247 !important;
}

/* DataTable modal */
.datatable-common-modal .modal-header {
    background-color: var(--primary-color);
    color: white;
}

.datatable-common-modal .modal-header * {
    color: white;
}

.datatable-common-modal .modal-footer {
    border-top: none;
}

/* =====================================================
   DataTable Processing / Loading Indicator
   - Centered overlay over the table
   - Auto-hides when DataTables sets display:none
   - Thick ring, 70% blue arc coverage
   ===================================================== */

/* Hide all default dot/text child elements from DT2 */
div.dt-processing > div,
div.dataTables_processing > div,
div.dt-processing > div:last-child,
div.dataTables_processing > div:last-child,
div.dt-processing > div:last-child div,
div.dataTables_processing > div:last-child div,
.dt-processing > div > div,
.dataTables_processing > div > div {
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Processing container:
   - DO NOT use display:flex !important — DataTables uses display:none to hide it,
     and !important would prevent that. Let DT control visibility.
   - Position absolutely so it overlays the centre of the table area.
*/
div.dt-processing,
div.dataTables_processing {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 100 !important;
  /* Center the spinner inside */
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Completely suppress any text (Loading.../Processing...) */
  font-size: 0 !important;
  color: transparent !important;
}

/* When DT shows it, use flex to centre the ::before spinner */
div.dt-processing[style*="display: block"],
div.dt-processing[style*="display:block"],
div.dataTables_processing[style*="display: block"],
div.dataTables_processing[style*="display:block"] {
  display: flex !important;
}

/* Circular ring spinner via ::before — thick ring, ~70% blue arc */
div.dt-processing::before,
div.dataTables_processing::before {
  content: '' !important;
  display: block !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  /* Track ring: light blue, full circle */
  border: 15px solid rgba(45, 62, 180, 0.15) !important;
  /* Blue arc: top + right + most of bottom = ~70% coverage */
  border-top-color: var(--primary-color) !important;
  border-right-color: var(--primary-color) !important;
  border-bottom-color: var(--primary-color) !important;
  /* Last ~30% stays as the light track — achieved via left border */
  border-left-color: rgba(45, 62, 180, 0.15) !important;
  animation: dt-spin 2s linear infinite !important;
  flex-shrink: 0 !important;
}

@keyframes dt-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Other loader elements keep their styles unchanged */
.loader-demo-box,
.dots-loader,
.jumping-dots-loader {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.jumping-dots-loader span {
  background-color: var(--primary-color) !important;
}

table.dataTable {
    border-color: #dee2e6 !important;
}

table.dataTable td,
table.dataTable th {
    border-color: #dee2e6 !important;
}

/* Prevent overlapping of header texts and sorting arrows */
table.dataTable thead th,
table.dataTable thead td {
    white-space: nowrap !important;
    position: relative !important;
}

/* Ensure sortable headers have enough padding-right for absolute sorting arrows */
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc,
table.dataTable thead th.dt-ordering-asc,
table.dataTable thead th.dt-ordering-desc,
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    padding-right: 28px !important;
}

/* Flex layout inside the header container to keep text and arrows inline */
table.dataTable thead th div.dt-column-header,
table.dataTable thead td div.dt-column-header {
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    width: 100% !important;
    gap: 6px !important;
}

table.dataTable thead th .dt-column-title,
table.dataTable thead td .dt-column-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
}

table.dataTable thead th .dt-column-order,
table.dataTable thead td .dt-column-order {
    display: inline-flex !important;
    align-items: center !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
}
.buttons-excel,
.buttons-excel *{
    background: var(--primary-color)!important;
    border-color: var(--primary-color)!important;
    color:#fff!important;
}

.dt-text-wrap {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100px;
    display: inline-block;
}