/**
 * ==========================================================================
 * DATATABLES CUSTOMIZATIONS
 * ==========================================================================
 * 
 * Custom styles for DataTables jQuery plugin.
 * Moved from css/custom-dataTable.css during 2026-02-05 reorganization.
 * 
 * @package Verimus
 * @since 2.0.0
 * ==========================================================================
 */

table.dataTable input.dt-select-checkbox {
  border: solid 1px var(--grayscale-400) !important;
  border-radius: 5.5px !important;
  top: -2px;
}

.dark-mode table.dataTable input.dt-select-checkbox {
  border: solid 1px var(--white) !important;
}

table.dataTable tbody tr td {
  padding: var(--spacing-3) 0.5rem;
}

.bottom .custom-bottom-wrapper .right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.bottom .custom-bottom-wrapper .right .dt-length {
  display: flex;
  align-items: center;
}

.bottom .custom-bottom-wrapper .right .dt-info {
  padding: 0;
}

.dt-length .form-select.form-select-sm {
  line-height: 1;
  padding: 9px 15px 9px 9px;
  border-radius: 8px;
  font-size: var(--font-size-sm);
  background-position: right center;
  background-size: 24px 16px;
  width: 100%;
  --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22chevron-up%22%3E%3Cpath%20id%3D%22Vector%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.52876%205.52851C7.78911%205.26816%208.21122%205.26816%208.47157%205.52851L12.4716%209.52851C12.7319%209.78886%2012.7319%2010.211%2012.4716%2010.4713C12.2112%2010.7317%2011.7891%2010.7317%2011.5288%2010.4713L8.00016%206.94273L4.47157%2010.4713C4.21122%2010.7317%203.78911%2010.7317%203.52876%2010.4713C3.26841%2010.211%203.26841%209.78886%203.52876%209.52851L7.52876%205.52851Z%22%20fill%3D%22%23171717%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.dark-mode .dt-length .form-select.form-select-sm {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22chevron-up%22%3E%3Cpath%20id%3D%22Vector%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.52876%205.52851C7.78911%205.26816%208.21122%205.26816%208.47157%205.52851L12.4716%209.52851C12.7319%209.78886%2012.7319%2010.211%2012.4716%2010.4713C12.2112%2010.7317%2011.7891%2010.7317%2011.5288%2010.4713L8.00016%206.94273L4.47157%2010.4713C4.21122%2010.7317%203.78911%2010.7317%203.52876%2010.4713C3.26841%2010.211%203.26841%209.78886%203.52876%209.52851L7.52876%205.52851Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

table.dataTable input.dt-select-checkbox:checked {
  border-color: var(--main) !important;
  background-color: var(--main) !important;
  color: var(--white);
  box-shadow: 0 0 0 .25rem rgb(255 128 48 / 49%);
}

.dark-mode .table>thead>tr {
  background-color: unset;
}

.table>thead>tr {
  background-color: var(--grayscale-100);

  overflow: hidden !important;
}

.dt-scroll-head {
  border-radius: var(--radius-input) !important;
}

#documents-table_wrapper .dt-scroll-head {
  background-color: var(--grayscale-100);
}

.table>thead>tr>th {
  background-color: var(--white-100) !important;
  border-bottom: 0;
  color: var(--grayscale-900);
  font-weight: var(--font-weight-extrabold);
  padding: var(--spacing-3) var(--spacing-4) !important;
}

.dark-mode .table>thead>tr>th {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-secondary);
}

table.dataTable th,
table.dataTable td {
  padding: var(--spacing-3) var(--spacing-4) !important;
  vertical-align: middle;
}

table.dataTable tr {
  border-top: 0;
}

table.table.dataTable {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

table.table.dataTable>tbody>tr.selected>*,
table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1).selected>* {
  box-shadow: none;
  color: var(--grayscale-900);
}

table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
  box-shadow: none;
}

table.dataTable input.dt-select-checkbox {
  height: 16px;
  width: 16px;
}

table.dataTable input.dt-select-checkbox:checked {
  background: url('../../images/v.svg');
}

table.dataTable input.dt-select-checkbox:checked:after {
  display: none;
}

div.dt-container div.dt-paging ul.pagination li {
  width: 32px;
  height: 32px;
  margin-bottom: 0;
}

div.dt-container div.dt-paging ul.pagination {
  display: flex;
}

div.dt-container div.dt-paging ul.pagination li:first-child {
  margin-right: var(--spacing-5);
}

div.dt-container div.dt-paging ul.pagination li:last-child {
  margin-left: var(--spacing-5);
}

div.dt-container div.dt-paging ul.pagination li a {
  border-radius: var(--radius-input);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  border-color: transparent;
  outline: none;
  box-shadow: none;
}

div.dt-container div.dt-paging ul.pagination li:first-child a,
div.dt-container div.dt-paging ul.pagination li:last-child a {
  border-color: var(--grayscale-200);
}

div.dt-container div.dt-paging ul.pagination li.disabled a {
  background-color: unset;
}

div.dt-container div.dt-paging ul.pagination li.disabled {
  display: none;
}

div.dt-container div.dt-paging ul.pagination li a.previous,
div.dt-container div.dt-paging ul.pagination li a.next {
  text-indent: -9999px;
  text-overflow: clip;
  position: relative;
  overflow: hidden;
}

div.dt-container div.dt-paging ul.pagination li a.previous:after,
div.dt-container div.dt-paging ul.pagination li a.next:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22chevron-up%22%3E%3Cpath%20id%3D%22Vector%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.52876%205.52851C7.78911%205.26816%208.21122%205.26816%208.47157%205.52851L12.4716%209.52851C12.7319%209.78886%2012.7319%2010.211%2012.4716%2010.4713C12.2112%2010.7317%2011.7891%2010.7317%2011.5288%2010.4713L8.00016%206.94273L4.47157%2010.4713C4.21122%2010.7317%203.78911%2010.7317%203.52876%2010.4713C3.26841%2010.211%203.26841%209.78886%203.52876%209.52851L7.52876%205.52851Z%22%20fill%3D%22%23171717%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(-90deg);
}

div.dt-container div.dt-paging ul.pagination li a.next:after {
  transform: rotate(90deg);
}

div.dt-container div.dt-paging ul.pagination li.active a {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

table.dataTable input.dt-select-checkbox:indeterminate::after {
  display: none;
}

/* Hide dt-mobile column on desktop (>= 992px) */
@media screen and (min-width: 1024px) {

  .dt-mobile,
  td.dt-mobile,
  th.dt-mobile,
  table .dt-mobile,
  .dataTable .dt-mobile,
  #documents-table .dt-mobile,
  #templates-table .dt-mobile,
  #employees-table .dt-mobile {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }
}

.dataTable [data-dt-column]:last-child {
  display: none;
}

/* Hide DataTables Responsive expand controls on documents table */
#documents-table td.dtr-control::before,
#documents-table th.dtr-control::before,
#documents-table .dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control::before {
  display: none !important;
  content: none !important;
}

/* Remove responsive collapsed state styling */
#documents-table.dtr-inline.collapsed>tbody>tr>td.dtr-control,
#documents-table.dtr-inline.collapsed>tbody>tr>th.dtr-control {
  padding-left: 0.5rem !important;
  cursor: default !important;
}

div.dt-container div.dt-paging ul.pagination .page-item .page-link {
  font-weight: var(--font-weight-semibold);
}

table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
  text-align: left;
}

table#templates-table tbody td.template-category {
  text-align: center;
}

.dt-table-wrap .dt-container .bottom .right .dt-length select {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.dt-table-wrap .dt-container .bottom .right .dt-length select:hover {
  cursor: pointer;
}

.td-action .actions-wrap {
  width: 52px;
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 1024px) {
  table#templates-table td.template-document {
    font-size: var(--font-size-xs);
  }

  table#templates-table td.template-document .tag-div .separator {
    display: none;
  }
}

@media screen and (max-width: 767px) {

  /* Mobile Card Design for DataTables */
  .dataTable tbody tr {
    display: block;
    background: var(--white);
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-xs);
    width: 100%;
  }

  .dark-mode .dataTable tbody tr {
    background: var(--grayscale-800, #1f1f1f);
    border-color: var(--gray-700) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  .dataTable td {
    border: none;
    padding: 0;
  }

  .template-contaier {
    padding: 1.5rem 0;
  }

  .upload-document {
    margin-bottom: 1rem;
  }

  .training {
    border-right: 0 !important;
  }

  table.dataTable>tbody>tr>.dt-select {
    vertical-align: top;
    width: 15%;
  }

  /* Show dt-mobile on mobile only */
  .dt-mobile {
    display: block !important;
    padding: 0 !important;
  }

  /* Mobile card field styling */
  .dataTable .dt-mobile>div {
    padding: var(--spacing-2-5) 0;
    border-bottom: 1px solid var(--gray-100);
  }

  .dark-mode .dataTable .dt-mobile>div {
    border-bottom-color: var(--gray-700);
  }

  .dataTable .dt-mobile>div:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .dataTable .dt-mobile>div:first-child {
    padding-top: 0;
  }

  .dataTable .dt-mobile .td-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: var(--spacing-1);
  }

  .dark-mode .dataTable .dt-mobile .td-label {
    color: var(--text-secondary);
  }

  .dataTable .dt-mobile .td-action {
    gap: 0.5rem;
  }

  .dataTable .dt-mobile .td-action .td-action-item {
    gap: 1.5rem;
    margin-top: var(--spacing-2);
  }

  .dataTable .dt-mobile .td-action .td-action-item a,
  .dataTable .dt-mobile .td-action .td-action-item span {
    padding: var(--spacing-2);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;
  }

  .dark-mode .dataTable .dt-mobile .td-action .td-action-item a,
  .dark-mode .dataTable .dt-mobile .td-action .td-action-item span {
    background: var(--gray-700);
  }

  .dataTable .dt-mobile .td-action .td-action-item a:hover,
  .dataTable .dt-mobile .td-action .td-action-item span:hover {
    background: var(--gray-100);
  }

  .dark-mode .dataTable .dt-mobile .td-action .td-action-item a:hover,
  .dark-mode .dataTable .dt-mobile .td-action .td-action-item span:hover {
    background: var(--gray-600);
  }

  .dataTable thead {
    display: none;
  }

  .dataTable [data-dt-column]:not(:last-child) {
    display: none;
  }

  .dataTable tbody tr td:not(.dt-mobile):not(:first-child) {
    display: none;
  }

  div.dt-scroll-body {
    border-bottom-color: transparent !important;
  }

  .dt-table-wrap .dt-container .bottom .right {
    display: none;
  }

  /* Mobile card tag styling - unified tag system */
  .dataTable .dt-mobile .tag-div {
    display: inline-flex;
    align-items: center;
    margin-top: var(--spacing-1);
    padding: var(--tag-padding-y) var(--tag-padding-x);
    border-radius: var(--tag-border-radius);
    font-size: var(--tag-font-size);
  }

  .dataTable .dt-mobile .td-tags {
    font-size: var(--tag-font-size);
    border-radius: var(--tag-border-radius);
    padding: var(--tag-padding-y) var(--tag-padding-x);
  }

  /* Mobile avatar styling */
  .dataTable .dt-mobile .td-avatar-name img,
  .dataTable .dt-mobile .td-employee-name img {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    margin-right: var(--spacing-2);
  }
}

/* DESKTOP: Ensure desktop table structure is visible in grouped view */
@media screen and (min-width: 1024px) {
  #documents-accordion .dataTable thead {
    display: table-header-group !important;
  }

  #documents-accordion .dataTable thead tr {
    display: table-row !important;
  }

  #documents-accordion .dataTable thead tr th:not(.dt-mobile) {
    display: table-cell !important;
  }

  #documents-accordion .dataTable tbody tr {
    display: table-row !important;
  }

  #documents-accordion .dataTable tbody tr td:not(.dt-mobile) {
    display: table-cell !important;
  }

  /* Force hide dt-mobile on desktop - final override */
  .dt-mobile,
  td.dt-mobile,
  th.dt-mobile,
  table .dt-mobile,
  .dataTable .dt-mobile,
  #documents-table .dt-mobile,
  #templates-table .dt-mobile,
  #employees-table .dt-mobile,
  .employees-table .dt-mobile {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }
}

/* ==========================================================================
   Table Header Full Width
   ========================================================================== */
#documents-table thead tr th,
.v-table thead tr th,
table.dataTable thead tr th {
  white-space: nowrap;
}

/* Ensure table header spans full width and is above action icons */
#documents-table thead,
.v-table thead,
table.dataTable thead {
  width: 100%;
}

#documents-table thead tr,
.v-table thead tr,
table.dataTable thead tr {
  display: table-row;
  width: 100%;
}

/* ==========================================================================
   Action Buttons - No Border, Larger, Grey
   ========================================================================== */
.td-action a,
.td-action-wrap a,
.td-action .action-btn,
.td-action-wrap .action-btn {
  border: none !important;
  background: transparent !important;
  padding: var(--spacing-2) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base) ease;
}

.td-action a:not(.v-action) svg,
.td-action-wrap a:not(.v-action) svg,
.td-action .action-btn svg,
.td-action-wrap .action-btn svg {
  width: 28px !important;
  height: 28px !important;
}

.td-action a svg path,
.td-action-wrap a svg path,
.td-action .action-btn svg path,
.td-action-wrap .action-btn svg path {
  transition: all 0.2s ease;
}

.td-action a:hover svg path,
.td-action-wrap a:hover svg path,
.td-action .action-btn:hover svg path,
.td-action-wrap .action-btn:hover svg path {}

/* Ensure icon wrappers don't add borders */
.td-action .icon-verimus,
.td-action .icon-verimus-2,
.td-action-wrap .icon-verimus,
.td-action-wrap .icon-verimus-2 {
  border: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dark mode support for action buttons */
.dark-mode .td-action a svg path,
.dark-mode .td-action-wrap a svg path,
.dark-mode .td-action .action-btn svg path,
.dark-mode .td-action-wrap .action-btn svg path {}

.dark-mode .td-action a:hover svg path,
.dark-mode .td-action-wrap a:hover svg path,
.dark-mode .td-action .action-btn:hover svg path,
.dark-mode .td-action-wrap .action-btn:hover svg path {}

#groups-table_wrapper th.td-checkbox .dt-column-order {
  display: none !important;
}

th.no-sort .dt-column-order {
  display: none !important;
}