/*
=====================================================
reference-datatable.css
-----------------------------------------------------
1) Custom Filter Container styling
2) Mobile: disable pointer on "mobile-disable-link"
3) Ensure DataTables "none" class hides homepage col
4) Force 3-col for Themify sub_row
5) Placeholder columns for leftover items
=====================================================
*/

/* Custom Filter Container */
#custom-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-bottom: 1em;
}

#custom-filters .filter-col {
  flex: 1;
  min-width: 200px;
}

/* On mobile, stack the filters vertically */
@media (max-width: 767px) {
  #custom-filters {
     flex-direction: column;
  }
}

/* Hide mobile table + wrapper on desktop */
@media (min-width: 768px) {
   #reference-table-mobile_wrapper {
     display: none !important;
   }
}
 
/* Hide desktop table + wrapper on mobile */
@media (max-width: 767px) {
   #reference-table-desktop_wrapper {
     display: none !important;
   }

   #reference-table-mobile_filter,
   .dataTables_length {
       display: none;
   }

   table.dataTable>tbody>tr.child ul.dtr-details>li {
       padding: 0;
   }
}
 
/* Disable Firma link on mobile */
@media (max-width: 767px) {
   .mobile-disable-link {
     pointer-events: none;
     color: #999;
   }
 
   table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
   table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
       content: "+";
       color: #fff;
       background-color: #4b76aa;
       border: 0.15em solid #fff;
   }
   table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
   table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
       content: "-";
       color: #4b76aa;
       background-color: #fff;
   }
}

/* 2) The 'none' class from DataTables hides the column in the main row.
  The extension automatically shows it in the child row.
*/

/* 3) Force 3 columns in Themify sub row */
.module_subrow.themify_builder_sub_row.tf_w.col_align_top.tb_col_count_3.tb_jfrl301 .sub_column.col3-1 {
   width: 100% !important;
   float: left !important;
   box-sizing: border-box;
   vertical-align: top;
   padding: 10px;
}
 
/* 4) Placeholder columns for leftover items */
.placeholder-column {
   min-height: 1px;
   visibility: hidden;
}

.filter-col input::placeholder{
  color: #000 !important;
}
.filter-col select, .filter-col input {
  width: 100% !important;
  padding: 10px !important;
  border: 1px solid #ccc !important;
  background: #fff !important;
  color: #000 !important;
}