.search-icon-inline{
  position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none; 
    z-index: 2;
}
#alphalist td {
    border-bottom:1px solid rgba(0, 0, 0, .08);
    padding:10px 0px 10px 0px;
    
}
@media(max-width: 767px){
    .discovery-flex-container .table-responsive{
        border:0px;
    }
}
#resetFilter{
    background: transparent;
    font-size: .9rem;
    margin-top: 0px;
    color: #0B54A8 !important;
    font-weight: 600;
}

.filter-sidebar-panel .lead-paragraph{
    margin-top:0px;
}
.section-title-label{
    margin-bottom:10px;
}
/* ================================================================
     1. BASE CONTAINER & FLEX SIDEBAR LAYOUT
     ================================================================ */
  .discovery-flex-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 30px !important;
    margin-top: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .filter-sidebar-panel {
    width: 300px !important;
    min-width: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    box-sizing: border-box !important;
  }

  .main-table-panel {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .filter-section-card {
    background-color: #fafbfc !important;
    border: 1px solid #e5e7eb !important;
    border-radius: .25rem;
    padding: 18px !important;
    box-sizing: border-box !important;
  }

  .section-title-label {
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding-bottom: 6px !important;
  }
 
 @media (max-width:767px){
  .section-title-label {
      display:flex;
  }
 }
  .pills-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .filter-pill {
    background-color: #ffffff !important;
    color: #000 !important;
    padding: 8px;
    border-radius: 5px;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    border: 1px solid #d1d5db !important;
    transition: all 0.2s ease-in-out !important;
    user-select: none !important;
    display: inline-block !important;
  }

  .filter-pill:hover {
    background-color: #f3f4f6 !important;
    border-color: #9ca3af !important;
  }

  .filter-pill.active {
    background-color: #ba0c2f !important; 
    color: #ffffff !important;
    border-color: #ba0c2f !important;
  }

  .filter-select-element {
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
  }

  #data {
    margin-bottom: 10px !important;
  }

  /* ================================================================
     2. FORCE HIDE THE INJECTED EXTRA BOXES
     ================================================================ */
  /* Hides DataTables default "Show entries" selection container dropdown row */
  .dataTables_length, 
  .main-table-panel label[for^="DataTables_Table"],
  .main-table-panel .dataTables_filter {
    display: none !important;
  }

  /* ================================================================
     3. NATIVE PAGINATION TEXT & UNDERLINE STYLING HOOKS
     ================================================================ */
  .dataTables_info {
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    color: var(--black-80);
    font-weight: bold !important;
    float: left !important;
    margin-top: 20px !important;
  }

  .dataTables_paginate {
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    float: right !important;
    margin-top: 20px !important;
    user-select: none !important;
  }

  /* Plain styling for the standard navigation buttons text */
  .dataTables_paginate .paginate_button {
    background: transparent !important;
    border: none !important;
    color: #1a365d !important; /* Rich blue link tint */
    font-weight: bold !important;
    padding: 0 10px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
  }

  .dataTables_paginate .paginate_button:hover {
    text-decoration: underline !important;
    background: transparent !important;
  }

  /* The clean horizontal crimson active state marker block line underneath */
  .dataTables_paginate .paginate_button.current,
  .dataTables_paginate .paginate_button.current:hover {
    color: #000000 !important;
    background: transparent !important;
    border: none !important;
    padding-bottom: 2px !important;
  }

 /* Accessible Disabled Pagination Controls Overrides */
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover,
.dataTables_paginate .paginate_button.disabled:focus {
  color: #595959 !important; /* Darkened gray to achieve 4.5:1 WCAG AA contrast */
  background: transparent !important;
  border: none !important;
  cursor: not-allowed !important;
  text-decoration: none !important;
  opacity: 0.7; /* Optional: Uses opacity to maintain the visually "disabled" look while satisfying color scanners */
}

  @media(max-width: 900px) {
    .discovery-flex-container { flex-direction: column !important; }
    .filter-sidebar-panel { width: 100% !important; min-width: 100% !important; }
  }
  
 .filter-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.toggle-icon {
  font-size: 12px;
  color: #5d666f;
  transition: transform 0.2s ease;
}

.filter-collapse-toggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(180deg);
  color: #ba0c2f;
}

#interest-pills {
 /* overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;*/
}

#interest-pills.is-open {
  max-height: 500px;
  padding-top: 10px;
}

@media (min-width: 768px) {
  .filter-collapse-toggle {
    cursor: default;
    pointer-events: none;
  }
  .toggle-icon {
    display: none;
  }
  #interest-pills {
    max-height: none;
    overflow: visible;
    padding-top: 10px;
  }
}

.active-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #d9d8d6;
}

.active-filters-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.active-filters-label {
  font-size: 12px;
  color: #5d666f;
}

.filter-chip {
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 2px;
  background:#ba0c2f;
  color: #fff;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chip-remove {
  cursor: pointer;
  font-style: normal;
}

.clear-filters-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  color: #ba0c2f;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.clear-filters-btn::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solid style requires 900 */
  content: "\f00d";  /* xmark / times glyph */
  margin-left: 6px;
  font-size: 11px;
  vertical-align: middle;
}
.results-count-row {
  margin-top: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #5d666f;
}
/* ================================================================
   MOBILE VISUAL ORDER: search → filters → active filters → table
   The search bar lives inside .main-table-panel in the HTML (so it
   stays semantically part of the right column), but on mobile it
   needs to appear ABOVE the filter sidebar visually. Flexbox 'order'
   only reorders direct siblings, and the search bar is nested one
   level deeper than .filter-sidebar-panel — so plain flex order
   can't reach it. Grid + display:contents can: display:contents
   removes .main-table-panel's own box but keeps its children
   (search-bar-wrapper, #active-filters, #alphalist) participating
   in the grid individually, each placed by its own grid-area.
 
   NOTE: adjust the 768px breakpoint below to match whatever
   breakpoint .discovery-flex-container already uses elsewhere on
   the site, if it differs from this value.
   ================================================================ */
@media (max-width: 767px) {
  .discovery-flex-container {
    display: grid;
    grid-template-areas:
      "search"
      "filters"
      "activefilters"
      "table";
    gap: 16px;
  }
 
  .main-table-panel {
    display: contents;
  }
 
  .search-bar-wrapper {
    grid-area: search;
    margin-bottom: 0;
  }
 
  .filter-sidebar-panel {
    grid-area: filters;
  }
 
  #active-filters {
    grid-area: activefilters;
  }
 
  #alphalist {
    grid-area: table;
  }
}