/* 
6/6/25
========================================
MDB-Datatable 
========================================
*/
.modal-dialog-scrollable .modal-content {
  max-height: 80vh !important;
  overflow-y: scroll !important;
  overflow-x: scroll !important;
}
.modal-body {
  overflow-y: scroll !important;
  overflow-x: scroll !important;
  height: 100% !important;
}
.datatable {
  --mdb-datatable-hover-bg: hsl(138, 45%, 16%);
  --mdb-datatable-font-size: 18px;
  --mdb-datatable-hover-color: #ffffff;
  --mdb-datatable-hover-tbody-tr-transition: #304753 0.2s ease-in;
  --mdb-datatable-hover-border: 3px solid #0ed3e9;
  width: 100%;
  position: relative;
}
/* Base table cell styles */
.datatable .datatable-body td {
  white-space: normal;
  overflow: visible;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
  position: relative;
  z-index: 1;
}
/* Hover styles */
.datatable.datatable-hover .datatable-body tr:hover td {
  color: var(--mdb-datatable-hover-color);
  border: var(--mdb-datatable-hover-border);
  background-color: var(--mdb-datatable-hover-bg);
  transition: var(--mdb-datatable-hover-tbody-tr-transition);
  position: relative;
  z-index: 2;
  outline: var(--mdb-datatable-hover-border);
  outline-offset: -3px;
}
/* Override the border: none for specific tables */
#vendor-datatable .datatable-body td, 
#client-datatable-interpretation .datatable-body td,
#client-datatable-translation .datatable-body td,
#lausd-datatable .datatable-body td,
#lausd-datatable-interpretation .datatable-body td, 
#lausd-datatable-translation .datatable-body td,
#admin-datatable .datatable-body td,
#admin-datatable-interpretation .datatable-body td, 
#admin-datatable-translation .datatable-body td,
#sped_admin-datatable-translation .datatable-body td,
#sped_admin-datatable-interpretation .datatable-body td {
  white-space: normal;
  overflow: visible;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
  position: relative;
  z-index: 1;
}
/* hide the first column in the tables */
#client-datatable-interpretation .datatable-body tr td:nth-child(1),
#client-datatable-interpretation .datatable-body td:nth-child(1),
#client-datatable-translation .datatable-body tr td:nth-child(1),
#client-datatable-translation .datatable-body td:nth-child(1),
#lausd-datatable .datatable-body tr td:nth-child(1),
#lausd-datatable .datatable-body td:nth-child(1),
#lausd-datatable-interpretation .datatable-body tr td:nth-child(1),
#lausd-datatable-interpretation .datatable-body td:nth-child(1),
#lausd-datatable-translation .datatable-body tr td:nth-child(1),
#lausd-datatable-translation .datatable-body td:nth-child(1),
#admin-datatable .datatable-body tr td:nth-child(1),
#admin-datatable .datatable-body td:nth-child(1),
#admin-datatable-interpretation .datatable-body tr td:nth-child(1),
#admin-datatable-interpretation .datatable-body td:nth-child(1),
#admin-datatable-translation .datatable-body tr td:nth-child(1),
#admin-datatable-translation .datatable-body td:nth-child(1),
#vendor-datatable .datatable-body tr td:nth-child(1),
#vendor-datatable .datatable-body td:nth-child(1),
#sped_admin-datatable-translation .datatable-body tr td:nth-child(1),
#sped_admin-datatable-translation .datatable-body td:nth-child(1),
#sped_admin-datatable-interpretation .datatable-body tr td:nth-child(1),
#sped_admin-datatable-interpretation .datatable-body td:nth-child(1){
  display: none; /* Hide the entire first column */
}
/* hide the first column's header icons */
#client-datatable-interpretation .datatable-header th:first-child .datatable-sort-icon,
#client-datatable-translation .datatable-header th:first-child .datatable-sort-icon,
#lausd-datatable .datatable-header th:first-child .datatable-sort-icon,
#lausd-datatable-interpretation .datatable-header th:first-child .datatable-sort-icon,
#lausd-datatable-translation .datatable-header th:first-child .datatable-sort-icon,
#admin-datatable .datatable-header th:first-child .datatable-sort-icon,
#admin-datatable-interpretation .datatable-header th:first-child .datatable-sort-icon,
#admin-datatable-translation .datatable-header th:first-child .datatable-sort-icon {
  display: none; /* Use display: none to remove icons completely */
}
/* hide the first column's header icons */
#vendor-datatable .datatable-header th:nth-child(1) .datatable-sort-icon,
#sped_admin-datatable-translation .datatable-header th:nth-child(1) .datatable-sort-icon,
#sped_admin-datatable-interpretation .datatable-header th:nth-child(1) .datatable-sort-icon,
#vendor-datatable .datatable-header th:nth-child(2) .datatable-sort-icon,
#sped_admin-datatable-translation .datatable-header th:nth-child(2) .datatable-sort-icon,
#sped_admin-datatable-interpretation .datatable-header th:nth-child(2) .datatable-sort-icon,
#vendor-datatable .datatable-header th:nth-child(3) .datatable-sort-icon,
#sped_admin-datatable-translation .datatable-header th:nth-child(3) .datatable-sort-icon,
#sped_admin-datatable-interpretation .datatable-header th:nth-child(3) .datatable-sort-icon  {
  display: none; 
}
/* ensure the status button and bid amount input are visible and properly positioned */
#vendor-datatable .datatable-body tr td:nth-child(2),
#client-datatable-interpretation .datatable-body tr td:nth-child(2),
#client-datatable-translation .datatable-body tr td:nth-child(2),
#lausd-datatable .datatable-body tr td:nth-child(2),
#lausd-datatable-interpretation .datatable-body tr td:nth-child(2),
#lausd-datatable-translation .datatable-body tr td:nth-child(2),
#admin-datatable .datatable-body tr td:nth-child(2),
#admin-datatable-interpretation .datatable-body tr td:nth-child(2),
#admin-datatable-translation .datatable-body tr td:nth-child(2),
#sped_admin-datatable-translation  .datatable-body tr td:nth-child(2),
#sped_admin-datatable-interpretation  .datatable-body tr td:nth-child(2) {
  position: relative;
}
/* status-bid-container */
#sped_admin-datatable-interpretation .datatable-body tr td:nth-child(2) .status-bid-container,
#sped_admin-datatable-translation .datatable-body tr td:nth-child(2) .status-bid-container,
#vendor-datatable .datatable-body tr td:nth-child(2) .status-bid-container{
  display: flex;
  flex-direction: column; 
  align-items: flex-start; 
  padding-top: 10px;
  padding-bottom: 10px;
}
@media (max-width: 576px) {
  #vendor-datatable .datatable-body tr,
  #client-datatable-interpretation .datatable-body tr,
  #client-datatable-translation .datatable-body tr,
  #lausd-datatable .datatable-body tr,
  #lausd-datatable-interpretation .datatable-body tr,
  #lausd-datatable-translation .datatable-body tr,
  #admin-datatable .datatable-body tr,
  #admin-datatable-interpretation .datatable-body tr,
  #admin-datatable-translation .datatable-body tr,
  #sped_admin-datatable-translation .datatable-body tr,
  #sped_admin-datatable-interpretation .datatable-body tr {
    display: flex;
    flex-direction: column;
  }

  #vendor-datatable .datatable-body tr td:nth-child(2),
  #vendor-datatable .datatable-body tr td:nth-child(3),
  #client-datatable-interpretation .datatable-body tr td:nth-child(2),
  #client-datatable-interpretation .datatable-body tr td:nth-child(3),
  #client-datatable-translation .datatable-body tr td:nth-child(2),
  #client-datatable-translation .datatable-body tr td:nth-child(3),
  #lausd-datatable .datatable-body tr td:nth-child(2),
  #lausd-datatable .datatable-body tr td:nth-child(3),
  #lausd-datatable-interpretation .datatable-body tr td:nth-child(2),
  #lausd-datatable-interpretation .datatable-body tr td:nth-child(3),
  #lausd-datatable-translation .datatable-body tr td:nth-child(2),
  #lausd-datatable-translation .datatable-body tr td:nth-child(3),
  #admin-datatable .datatable-body tr td:nth-child(2),
  #admin-datatable .datatable-body tr td:nth-child(3),
  #admin-datatable-interpretation .datatable-body tr td:nth-child(2),
  #admin-datatable-interpretation .datatable-body tr td:nth-child(3),
  #admin-datatable-translation .datatable-body tr td:nth-child(2),
  #admin-datatable-translation .datatable-body tr td:nth-child(3),
  #sped_admin-datatable-translation .datatable-body tr td:nth-child(2),
  #sped_admin-datatable-translation .datatable-body tr td:nth-child(3),
  #sped_admin-datatable-interpretation .datatable-body tr td:nth-child(2),
  #sped_admin-datatable-interpretation .datatable-body tr td:nth-child(3) {
    width: 100%;
    max-width: none;
  }

  #vendor-datatable .datatable-body tr td:nth-child(2),
  #client-datatable-interpretation .datatable-body tr td:nth-child(2),
  #client-datatable-translation .datatable-body tr td:nth-child(2),
  #lausd-datatable .datatable-body tr td:nth-child(2),
  #lausd-datatable-interpretation .datatable-body tr td:nth-child(2),
  #lausd-datatable-translation .datatable-body tr td:nth-child(2),
  #admin-datatable .datatable-body tr td:nth-child(2),
  #admin-datatable-interpretation .datatable-body tr td:nth-child(2),
  #admin-datatable-translation .datatable-body tr td:nth-child(2),
  #sped_admin-datatable-translation .datatable-body tr td:nth-child(2),
  #sped_admin-datatable-interpretation .datatable-body tr td:nth-child(2) {
    order: 2; /* Move actions column below */
  }

  #vendor-datatable .datatable-body tr td:nth-child(3),
  #client-datatable-interpretation .datatable-body tr td:nth-child(3),
  #client-datatable-translation .datatable-body tr td:nth-child(3),
  #lausd-datatable .datatable-body tr td:nth-child(3),
  #lausd-datatable-interpretation .datatable-body tr td:nth-child(3),
  #lausd-datatable-translation .datatable-body tr td:nth-child(3),
  #admin-datatable .datatable-body tr td:nth-child(3),
  #admin-datatable-interpretation .datatable-body tr td:nth-child(3),
  #admin-datatable-translation .datatable-body tr td:nth-child(3),
  #sped_admin-datatable-translation .datatable-body tr td:nth-child(3),
  #sped_admin-datatable-interpretation .datatable-body tr td:nth-child(3) {
    order: 1; /* Move meetingDetailsColOne column above */
    margin-bottom: 10px; /* Add margin below meetingDetailsColOne */
  }
}
/* 
========================================
end of MDB-Datatable
========================================
*/


/* 
========================================
Availability-Form 
========================================
*/
/* select element specific styling */
#availabilityForm_lausd .form-select,
#availabilityForm_admin .form-select,
#availabilityForm_client .form-select,
#availabilityForm_vendor .form-select {
  display: block !important;
  width: 100% !important;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #333 !important;
  background-color: #fff !important;
  border: 1px solid #2d94f5 !important;
  border-radius: 15px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}
/* remove any duplicate select styling */
#availabilityForm_lausd .form-outline .form-select + .form-select,
#availabilityForm_admin .form-outline .form-select + .form-select,
#availabilityForm_client .form-outline .form-select + .form-select,
#availabilityForm_vendor .form-outline .form-select + .form-select {
  display: none !important;
}
/* select focus state */
#availabilityForm_lausd .form-select:focus,
#availabilityForm_admin .form-select:focus,
#availabilityForm_client .form-select:focus,
#availabilityForm_vendor .form-select:focus {
  border-color: #2d94f5 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.2rem rgba(45, 148, 245, 0.25) !important;
}
/* form input and select styling for availability form */
#availabilityForm_lausd .form-outline,
#availabilityForm_admin .form-outline,
#availabilityForm_client .form-outline,
#availabilityForm_vendor .form-outline {
  position: relative;
  margin-bottom: 1.5rem;
}
#availabilityForm_lausd .form-select,
#availabilityForm_lausd input[type="date"],
#availabilityForm_lausd input[type="time"],
#availabilityForm_lausd textarea,
#availabilityForm_admin .form-select,
#availabilityForm_admin input[type="date"],
#availabilityForm_admin input[type="time"],
#availabilityForm_admin textarea,
#availabilityForm_client .form-select,
#availabilityForm_client input[type="date"],
#availabilityForm_client input[type="time"],
#availabilityForm_client textarea,
#availabilityForm_vendor .form-select,
#availabilityForm_vendor input[type="date"],
#availabilityForm_vendor input[type="time"],
#availabilityForm_vendor textarea {
  background-color: white !important;
  color: #333 !important;
  font-weight: normal !important;
  border: 1px solid #2d94f5;
  border-radius: 15px;
  padding: 10px 15px;
  height: 50px;
  width: 100%;
  font-size: 16px;
}
/* label styling to prevent overlap */
#availabilityForm_lausd .form-label,
#availabilityForm_admin .form-label,
#availabilityForm_client .form-label,
#availabilityForm_vendor .form-label {
  position: absolute;
  top: -19px; /* Move label above the input */
  left: 5px;
  color: #2d94f5;
  font-weight: normal;
  font-size: 14px;
  background-color: transparent;
  padding: 0 5px;
  margin: 0;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
}
/* ensure select options are visible */
#availabilityForm_lausd .form-select option,
#availabilityForm_admin .form-select option,
#availabilityForm_client .form-select option,
#availabilityForm_vendor .form-select option {
  background-color: white;
  color: #333;
  padding: 10px;
}
/* radio button group spacing */
#availabilityForm_lausd .form-check,
#availabilityForm_admin .form-check,
#availabilityForm_client .form-check,
#availabilityForm_vendor .form-check {
  margin-bottom: 1rem;
  padding-left: 10px;
}
/* textarea specific styling */
#availabilityForm_lausd textarea.form-control,
#availabilityForm_admin textarea.form-control,
#availabilityForm_client textarea.form-control,
#availabilityForm_vendor textarea.form-control {
  min-height: 100px;
  resize: vertical;
}
/* 
========================================
end of Availability-Form
========================================
*/


/* 
========================================
glossary
========================================
*/
/* hide the actions column */
#table_advanced_search_public th:nth-child(5),
#table_advanced_search_public td:nth-child(5),
#table_advanced_search_lausd th:nth-child(5),
#table_advanced_search_lausd td:nth-child(5),
#table_advanced_search_vendor th:nth-child(5),
#table_advanced_search_vendor td:nth-child(5),
#table_advanced_search_admin th:nth-child(5),
#table_advanced_search_admin td:nth-child(5),
#table_advanced_search_sped_admin th:nth-child(5),
#table_advanced_search_sped_admin td:nth-child(5),
#table_advanced_search_client th:nth-child(5),
#table_advanced_search_client td:nth-child(5) {
display: none;
}

/*  glossary-wrapping */
.wrap-text { white-space: normal; }

/* [NEW] Mobile solution - hide complex table and show custom mobile view */
@media (max-width: 600px) {
  /* Hide the original MDB table on mobile */
  #table_advanced_search_public,
  #table_advanced_search_client,
  #table_advanced_search_lausd,
  #table_advanced_search_vendor,
  #table_advanced_search_admin {
    display: none !important;
  }
  
  /* Show mobile view instead */
  .mobile-glossary-view {
    display: none !important; /* [MODIFIED] Initially hidden until content loads */
    width: 100% !important;
    padding: 10px !important;
    background-color: #ffffff !important; /* [MODIFIED] Removed debug styling */
    /* border: 2px solid red !important; */ /* [REMOVED] Debug border */
    min-height: 100px !important;
  }
  
  /* [NEW] Show mobile view when content is loaded */
  .mobile-glossary-view.loaded {
    display: block !important;
  }
  
  /* Force mobile view containers to be visible */
  #mobile_view_public,
  #mobile_view_client,
  #mobile_view_lausd,
  #mobile_view_vendor,
  #mobile_view_admin {
    /* [REMOVED] Forcing display - let parent control visibility */
    width: 100% !important;
  }
}

/* Desktop - hide mobile view */
@media (min-width: 601px) {
  .mobile-glossary-view {
    display: none !important;
  }
}

/* Mobile glossary card styles */
.mobile-glossary-card {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 100%;
  box-sizing: border-box;
}

.mobile-glossary-field {
  margin-bottom: 10px;
  width: 100%;
}

.mobile-glossary-label {
  font-weight: bold;
  color: #495057;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 5px;
  display: block;
}

.mobile-glossary-value {
  color: #212529;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  cursor: pointer;
  width: 100%;
  display: block;
}

.mobile-glossary-value:hover {
  background-color: #e9ecef;
  padding: 2px 4px;
  border-radius: 3px;
}

/* 
========================================
end of glossary
========================================
*/