/* =============================================================================
   Recruiter Dashboard — recruiter.css
   Single source of truth. Replaces recruiter.css + both on-page <style> blocks.

   Structure:
     1.  Design tokens (CSS variables)
     2.  Base / utilities
     3.  Dashboard container + ambient background
     4.  Filter form (left panel)
     5.  Results table
     6.  Pagination
     7.  Modal — shell + chrome
     8.  Modal — user header + avatar
     9.  Modal — tabs
     10. Modal — profile content table
     11. Modal — notes
     12. Modal — status + flags
     13. Modal — CV tab (download, accordion, no-CV)
     14. Modal — quality score
     15. Modal — add-candidate variant
     16. Status dots, indicators, traffic lights
     17. Autocomplete suggestions
     18. Form controls — circular checkboxes (specific fields)
     19. Animations, motion, accessibility
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Brand palette */
  --rd-blue:        #005994;
  --rd-blue-deep:   #004472;
  --rd-blue-soft:   #0073aa;
  --rd-lime:        #BFD12F;
  --rd-lime-soft:   #d4e26b;
  --rd-orange:      #ED7004;
  --rd-magenta:     #D0004E;
  --rd-purple:      #682E57;

  /* Ink + neutrals */
  --rd-ink:         #1a2230;
  --rd-ink-soft:    #4a5568;
  --rd-muted:       #8a94a3;
  --rd-line:        rgba(0, 89, 148, 0.08);

  /* Glass + surface tokens */
  --rd-glass-bg:        rgba(255, 255, 255, 0.62);
  --rd-glass-bg-strong: rgba(255, 255, 255, 0.78);
  --rd-glass-border:    rgba(255, 255, 255, 0.85);
  --rd-blur:            10px;
  --rd-blur-strong:     16px;

  /* Shadows — soft, layered */
  --rd-shadow-sm: 0 1px 2px rgba(15, 30, 50, 0.04), 0 1px 3px rgba(15, 30, 50, 0.03);
  --rd-shadow-md: 0 2px 6px rgba(15, 30, 50, 0.05), 0 8px 24px rgba(15, 30, 50, 0.06);
  --rd-shadow-lg: 0 6px 20px rgba(15, 30, 50, 0.08), 0 24px 60px rgba(15, 30, 50, 0.10);
  --rd-ring-blue: 0 0 0 3px rgba(0, 89, 148, 0.14);
  --rd-ring-lime: 0 0 0 3px rgba(191, 209, 47, 0.28);

  /* Motion */
  --rd-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rd-dur:  180ms;
}


/* -----------------------------------------------------------------------------
   2. BASE / UTILITIES
   -------------------------------------------------------------------------- */

[x-cloak] { display: none !important; }

/* Reset any external zebra striping on tables inside the dashboard.
   NOTE: .connect-recruiter__profiles uses separated rows (pill style),
   so it gets its own collapse mode below. */
.connect-recruiter__container table,
.connect-recruiter__modal table {
  margin: 0;
  width: 100%;
}

.connect-recruiter__modal table,
.connect-recruiter__container form table {
  border-collapse: collapse;
}

/* Kill any host-page zebra striping on .connect-recruiter rows */
.connect-recruiter__container table tbody > tr:nth-child(odd) > td,
.connect-recruiter__container table tbody > tr:nth-child(odd) > th,
.connect-recruiter__container table tbody > tr:nth-child(even) > td,
.connect-recruiter__container table tbody > tr:nth-child(even) > th {
  background-color: transparent;
}


/* -----------------------------------------------------------------------------
   3. DASHBOARD CONTAINER + AMBIENT BACKGROUND
   -------------------------------------------------------------------------- */

.connect-recruiter__container {
  font-family: "Figtree", sans-serif;
  display: flex;
  height: 70vh;
  align-items: flex-start;
  position: relative;
  isolation: isolate;
  color: var(--rd-ink);
}



/* Loading pill */
.connect-recruiter__container p {
  display: inline-block;
  font-weight: 400;
  color: var(--rd-blue);
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: rgba(0, 89, 148, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.connect-recruiter__filters { width: 100%; }

.connect-recruiter__actions-wrapper {
  width: 30%;
  max-width: 400px;
  min-width: 300px;
  padding-right: 2vw;
}


/* -----------------------------------------------------------------------------
   4. FILTER FORM (left panel)
   -------------------------------------------------------------------------- */

.connect-recruiter__container form {
  background: var(--rd-glass-bg);
  -webkit-backdrop-filter: blur(var(--rd-blur)) saturate(1.4);
  backdrop-filter: blur(var(--rd-blur)) saturate(1.4);
  border: 1px solid var(--rd-glass-border);
  border-radius: 16px;
  padding: 1.5vw;
  width: 100%;
  margin-right: 3vw;
  flex-shrink: 0;
  overflow-y: auto;
  height: auto;
  align-self: flex-start;
  box-shadow: var(--rd-shadow-md);
  transition: box-shadow var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__container form:hover {
  box-shadow: var(--rd-shadow-lg);
}

.connect-recruiter__container form input,
.connect-recruiter__container form select,
.connect-recruiter__container form textarea {
  margin-bottom: 0.8rem;
}

.connect-recruiter__container form p { margin-bottom: 0; }

/* Inputs / selects */
.connect-recruiter__container input[type="text"],
.connect-recruiter__container select {
  border-radius: 12px;
  border: 1px solid rgba(0, 89, 148, 0.12);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--rd-shadow-sm);
  transition: border-color var(--rd-dur) var(--rd-ease),
              box-shadow   var(--rd-dur) var(--rd-ease),
              background-color var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__container input[type="text"]:hover,
.connect-recruiter__container select:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 89, 148, 0.22);
}

.connect-recruiter__container input[type="text"]:focus,
.connect-recruiter__container select:focus {
  outline: none;
  border-color: var(--rd-blue);
  background: #fff;
  box-shadow: var(--rd-ring-blue);
}

/* Custom select chevron */
.connect-recruiter__container form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.5rem;
  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  line-height: 1.1rem;
}

/* Submit button */
.connect-recruiter__container button[type="submit"] {
  padding: 10px;
  background: linear-gradient(180deg, var(--rd-lime) 0%, #b1c422 100%);
  color: var(--rd-blue-deep);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  width: 100%;
  font-weight: 600;
  margin-top: 15px;
  letter-spacing: 0.01em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 6px 18px rgba(191, 209, 47, 0.35);
  transition: transform var(--rd-dur) var(--rd-ease),
              box-shadow var(--rd-dur) var(--rd-ease),
              background var(--rd-dur) var(--rd-ease),
              color      var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__container button[type="submit"]:hover {
  background: linear-gradient(180deg, var(--rd-blue-soft) 0%, var(--rd-blue) 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 10px 24px rgba(0, 89, 148, 0.30);
}

.connect-recruiter__container button[type="submit"]:active {
  transform: translateY(0);
}

/* Count pill */
.connect-recruiter__count {
  display: inline-block;
  background: rgba(0, 89, 148, 0.08);
  color: var(--rd-blue);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  margin-top: 1rem;
  font-size: 0.85rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Location + radius combo — joined fields with lime accent */
.connect-recruiter__location-input-wrapper {
  display: flex;
  gap: 0;
  width: 100%;
  align-items: stretch;
}

.connect-recruiter__location-input-wrapper input[type="text"] {
  width: 70%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: 1.5px solid rgba(191, 209, 47, 0.85);
  border-right: none;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.connect-recruiter__location-input-wrapper select#radius {
  width: 30%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: 1.5px solid rgba(191, 209, 47, 0.85);
  border-left: none;
  padding: 0.75rem 1rem;
  font-size: 0.6rem;
  box-sizing: border-box;
  background: rgba(247, 250, 218, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: center;
  font-weight: 600;
  color: var(--rd-lime);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.connect-recruiter__location-input-wrapper input[type="text"]:focus,
.connect-recruiter__location-input-wrapper select#radius:focus {
  border-color: var(--rd-lime);
  box-shadow: var(--rd-ring-lime);
}

/* Boolean filter group */
.connect-recruiter__boolean-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
}


/* -----------------------------------------------------------------------------
   5. RESULTS TABLE
   -------------------------------------------------------------------------- */

/* .connect-recruiter__profiles IS the <table> element.
   To get vertical scroll on a table, we set display: block. But that
   breaks the table's own layout, so we restore it on thead and each tr,
   each rendering as its own full-width table with fixed column widths. */
.connect-recruiter__profiles {
  display: block;
  max-height: 75vh;
  overflow-y: auto;
  width: 100%;
  position: relative;
  margin: 0;
}

.connect-recruiter__profiles thead {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.connect-recruiter__profiles tbody {
  display: block;
  width: 100%;
}

.connect-recruiter__profiles tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 8px;
}

/* Fade-out at bottom of the scrollable list */
.connect-recruiter__profiles::after {
  content: "";
  position: sticky;
  bottom: 0;
  height: 3rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 30%, #fff 100%);
  display: block;
  z-index: 5;
}

/* Sticky header */
.connect-recruiter__profiles thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, var(--rd-blue) 0%, var(--rd-blue-deep) 100%);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 89, 148, 0.18);
  margin-bottom: 12px;
}

.connect-recruiter__profiles thead th {
  background: transparent;
}

.connect-recruiter__profiles th {
  padding: 0.5rem;
  font-weight: 700;
  color: #fff;
  background-color: transparent;
  text-align: left;
  white-space: nowrap;
  border: none;
  border-bottom: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Body rows — pill-like with subtle glass.
   Each tr is display: table (set above) which means border-radius +
   border + box-shadow all apply directly to the row. */
.connect-recruiter__profiles tbody tr {
  background: var(--rd-glass-bg-strong);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: none;
  border-radius: 10px;
  box-shadow: var(--rd-shadow-sm);
  transition: transform var(--rd-dur) var(--rd-ease),
              box-shadow var(--rd-dur) var(--rd-ease),
              background var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__profiles tbody tr:hover {
  background: #ffffff;
  box-shadow: var(--rd-shadow-md);
  transform: translateY(-1px);
}

.connect-recruiter__profiles td {
  padding: 1rem 0.6rem;
  border: none;
  text-align: left;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  vertical-align: middle;
}

.connect-recruiter__profiles tbody td {
  font-size: 0.7rem;
  line-height: 1.5em;
  font-weight: 500;
  color: #23282f;
}

/* Column widths (shared th + td) */
.connect-recruiter__profiles th:nth-child(1),
.connect-recruiter__profiles td:nth-child(1) { width: 15%; text-align: center; }
.connect-recruiter__profiles th:nth-child(2),
.connect-recruiter__profiles td:nth-child(2) { width: 20%; }
.connect-recruiter__profiles th:nth-child(3),
.connect-recruiter__profiles td:nth-child(3) { width: 20%; }
.connect-recruiter__profiles th:nth-child(4),
.connect-recruiter__profiles td:nth-child(4) { width: 20%; }
.connect-recruiter__profiles th:nth-child(5),
.connect-recruiter__profiles td:nth-child(5) { width: 5%; }
.connect-recruiter__profiles th:nth-child(6),
.connect-recruiter__profiles td:nth-child(6) { width: 10%; text-align: center; }
.connect-recruiter__profiles th:nth-child(7),
.connect-recruiter__profiles td:nth-child(7) { width: 13%; text-align: center; }

/* Row "view profile" round button */
.connect-recruiter__profiles button {
  width: 30px;
  height: 30px;
  background: rgba(0, 89, 148, 0.10);
  color: var(--rd-blue);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  position: relative;
  transition: background var(--rd-dur) var(--rd-ease),
              transform  var(--rd-dur) var(--rd-ease),
              box-shadow var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__profiles button::before {
  content: "\f002"; /* fa-magnifying-glass */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.9rem;
  font-style: normal;
  color: white;
  line-height: 1;
}

.connect-recruiter__profiles button:hover {
  background: linear-gradient(180deg, var(--rd-orange) 0%, #c95d00 100%);
  transform: scale(1.08);
  box-shadow: 0 6px 14px rgba(237, 112, 4, 0.32);
}


/* -----------------------------------------------------------------------------
   6. PAGINATION
   -------------------------------------------------------------------------- */

.connect-recruiter__pagination {
  text-align: center;
  margin-top: 1rem;
  position: absolute;
  bottom: -95px;
  right: 0;
  z-index: 1000;
}

.connect-recruiter__pagination a {
  display: inline-block;
  margin: 0 0.25rem;
  padding: 5px;
  border: 1px solid var(--rd-line);
  border-radius: 10px;
  background: var(--rd-glass-bg-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #333;
  font-size: 0.8rem;
  font-family: "Figtree", sans-serif;
  font-weight: 500;
  box-shadow: var(--rd-shadow-sm);
  transition: all var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__pagination a:hover {
  background: #fff;
  border-color: rgba(0, 89, 148, 0.20);
  color: #000;
  transform: translateY(-1px);
  box-shadow: var(--rd-shadow-md);
}

.connect-recruiter__pagination a.active {
  background: linear-gradient(180deg, var(--rd-blue-soft) 0%, var(--rd-blue) 100%);
  border-color: transparent;
  color: #fff;
  font-weight: bold;
  cursor: default;
  box-shadow: 0 6px 14px rgba(0, 89, 148, 0.30);
}

.connect-recruiter__pagination-info {
  font-size: 0.9rem;
  color: var(--rd-blue);
  font-weight: 600;
}


/* -----------------------------------------------------------------------------
   7. MODAL — shell + chrome
   -------------------------------------------------------------------------- */

.connect-recruiter__modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(12, 13, 14, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 1.5rem;
  font-family: "Figtree", sans-serif;
}

.connect-recruiter__modal > div {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: 20px;
  width: 96vw;
  min-width: 800px;
  height: 93vh;
  max-height: 900px;
  max-width: 1500px;
  overflow-y: auto;
  position: relative;
  animation: modalFadeIn 0.3s ease-out;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    var(--rd-shadow-lg);
}



.connect-recruiter__modal > div > * { position: relative; z-index: 1; }

/* Section title pill (purple) */
.connect-recruiter__modal h2 {
  font-size: 1rem;
  font-weight: 600;
  padding: 5px 25px 5px 25px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #7c3a68 0%, var(--rd-purple) 100%);
  margin-left: -3rem;
  margin-bottom: 0;
  box-shadow: 0 6px 16px rgba(104, 46, 87, 0.28);
  letter-spacing: 0.01em;
}

.connect-recruiter__modal h3 {
  font-family: "Figtree", sans-serif;
}

/* Modal paragraph treatment (used as a small "chip" label) */
.connect-recruiter__modal p {
  font-weight: 600;
  padding: 9px 25px;
  border-radius: 999px;
  color: var(--rd-purple);
  margin-bottom: 0;
}

/* Close button (X) */
.connect-recruiter__modal button.close-popup {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(180deg, var(--rd-blue-soft) 0%, var(--rd-blue) 100%);
  color: transparent;
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0, 89, 148, 0.25);
  transition: transform var(--rd-dur) var(--rd-ease),
              box-shadow var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__modal button.close-popup::before {
  font-family: "Font Awesome 6 Free";
  content: "\f00d";
  font-weight: 900;
  font-size: 1.1rem;
  color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.connect-recruiter__modal button.close-popup span,
.connect-recruiter__modal button.close-popup .button-text {
  display: none;
}

.connect-recruiter__modal button.close-popup:hover {
  transform: rotate(90deg) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 89, 148, 0.35);
}

/* Save notes button (small primary) */
.connect-recruiter__modal button.save-notes {
  background: linear-gradient(180deg, var(--rd-blue-soft) 0%, var(--rd-blue) 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 1.2rem;
  font-family: "Figtree", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-shadow: 0 4px 12px rgba(0, 89, 148, 0.22);
  transition: transform var(--rd-dur) var(--rd-ease),
              box-shadow var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__modal button.save-notes:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 89, 148, 0.30);
}

/* Modal content layout (table left, notes right) */
.connect-recruiter__content {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: flex-start;
}


/* -----------------------------------------------------------------------------
   8. MODAL — user header + avatar
   -------------------------------------------------------------------------- */

.connect-recruiter__user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.connect-recruiter__user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.connect-recruiter__user-info h2,
.connect-recruiter__user-info p { margin: 0; }

/* Avatar */
.connect-avatar__container {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #f2f2f2;
  position: relative;
  flex-shrink: 0;
  z-index: 100;
}

.connect-avatar__container::before {
  content: "\f007"; /* fa-user */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 2rem;
  color: #999;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.connect-avatar__container img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  object-position: center;
  box-shadow:
    0 0 0 2px rgba(104, 46, 87, 0.85),
    0 6px 16px rgba(104, 46, 87, 0.25);
}

.connect-avatar__container + h2 {
  display: flex;
  flex-direction: column;
}


/* -----------------------------------------------------------------------------
   9. MODAL — tabs
   -------------------------------------------------------------------------- */

.connect-recruiter__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px dotted #e0e0e0;
  margin-bottom: 30px;
  width: 100%;
}

.connect-recruiter__tab {
  background: rgba(0, 89, 148, 0.11);
  color: #333;
  border: none;
  border-radius: 8px 8px 0 0;
  padding: 8px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  gap: 8px;
  transition: all var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__tab::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
}

.connect-recruiter__tab:nth-child(1)::before { content: "\f007"; } /* Profile — user */
.connect-recruiter__tab:nth-child(2)::before { content: "\f15c"; } /* CV — file */
.connect-recruiter__tab:nth-child(3)::before { content: "\f201"; } /* Score — chart */

.connect-recruiter__tab:hover {
  background: rgba(0, 89, 148, 0.14);
  color: var(--rd-blue);
  transform: translateY(-1px);
}

.connect-recruiter__tab.active,
.connect-recruiter__tab.connect-recruiter__tab_active {
  background: linear-gradient(180deg, var(--rd-blue-soft) 0%, var(--rd-blue) 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 89, 148, 0.25);
}

.connect-recruiter__tab-content {
  display: flex;
  width: 100%;
  gap: 30px;
  animation: fadeIn 0.3s ease;
}


/* -----------------------------------------------------------------------------
   10. MODAL — profile content table
   -------------------------------------------------------------------------- */

.connect-recruiter__content table {
  width: 50%;
  border-collapse: separate;
  border-spacing: 0 4px;
}

.connect-recruiter__content th,
.connect-recruiter__content td {
  border: none !important;
  padding: 0.3rem 1rem;
  text-align: left;
  vertical-align: middle;
  line-height: 1.4rem;
  font-family: "Figtree", sans-serif;
  font-weight: 400;
}

/* Left column — labels.
   !important needed: host-page table cell rules out-specificity this otherwise. */
.connect-recruiter__content th {
  width: 35%;
  background-color: rgba(0, 89, 148, 0.08) !important;
  color: var(--rd-blue);
  font-weight: 600;
  border-radius: 6px 0 0 6px;
}

/* Right column — values */
.connect-recruiter__content td {
  background-color: rgba(255, 255, 255, 0.85) !important;
  color: #333;
  border-radius: 0 6px 6px 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Belt-and-braces: kill any host-page tr borders that might survive rerenders */
.connect-recruiter__content tr {
  border: none !important;
  background: transparent !important;
}

/* Location chip */
.connect-recruiter__modal--user-profile p[x-text="selected.location"] {
  background: #ebebeb;
  min-height: 43px;
  min-width: 100px;
  padding-top: 11px;
  padding-bottom: 0;
}

/* CV download link inside profile table */
.connect-recruiter__content a[href*="cv-download"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-family: "Figtree", sans-serif;
  font-size: 1rem;
  transition: color var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__content a[href*="cv-download"]::before {
  content: "\f019"; /* fa-download */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.7rem;
}



/* -----------------------------------------------------------------------------
   11. MODAL — notes
   -------------------------------------------------------------------------- */

.connect-recruiter__notes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 50%;
  height: 100%;
}

.connect-recruiter__notes textarea {
  flex: 1;
  width: 100%;
  padding: 1rem;
  border: 1.5px solid rgba(0, 89, 148, 0.55);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: "Figtree", sans-serif;
  font-size: 1rem;
  color: var(--rd-blue);
  font-weight: 500;
  resize: vertical;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  min-height: 190px;
  max-height: 150px;
  box-sizing: border-box;
  margin-bottom: 8px;
  transition: border-color var(--rd-dur) var(--rd-ease),
              box-shadow   var(--rd-dur) var(--rd-ease),
              background   var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__notes textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--rd-lime);
  box-shadow: var(--rd-ring-lime);
}

/* Notes list */
.connect-recruiter__notes-list {
  max-height: 250px;
  overflow-y: auto;
  margin-bottom: 12px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: none;
}

.connect-recruiter__note {
  padding: 10px 12px;
  border: 1px solid var(--rd-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background var(--rd-dur) var(--rd-ease),
              border-color var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__note:hover {
  background: #fff;
  border-color: rgba(0, 89, 148, 0.16);
}

.connect-recruiter__note-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  margin-bottom: 4px;
}

.connect-recruiter__note-meta span {
  color: var(--rd-purple);
  font-weight: 400;
}

/* Body text inside notes (modal scope wins over generic modal p) */
.connect-recruiter__modal .connect-recruiter__note p {
  font-size: 0.9rem;
  font-weight: 400;
  color: #6b7280;
  background: transparent;
  padding: 0;
  margin: 0;
  white-space: pre-wrap;
}

.connect-recruiter__notes-empty {
  padding: 12px;
  color: #999;
  margin: 0;
  background: #f3f3f3;
  border-radius: 10px;
}

/* Save status indicator (spinner → tick) */
.notes-status {
  font-size: 0;
  position: relative;
}

.notes-status.saving::before {
  content: "\f110"; /* fa-spinner */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1rem;
  display: inline-block;
  animation: spin 1s linear infinite;
  transform-origin: center;
}

.notes-status.done::before {
  content: "\f058"; /* fa-circle-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1rem;
  color: var(--rd-lime);
}

.save-notes {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.save-notes:hover { color: var(--rd-blue-soft); }


/* -----------------------------------------------------------------------------
   12. MODAL — status pill + flags
   -------------------------------------------------------------------------- */

.connect-recruiter__status {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 5px 5px 5px 20px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rd-line);
  border-radius: 999px;
  box-shadow: var(--rd-shadow-sm);
}

.connect-recruiter__status h3 { font-size: 1rem; }

.connect-recruiter__status-options {
  display: flex;
  flex-direction: row;
  gap: 14px;
}

.connect-recruiter__status label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  margin-top: 3px;
}

.connect-recruiter__status .save-notes { margin-left: 4px; }

/* Row state tints when a user is flagged */
.user_status--do_not_contact { background: rgba(208, 0, 78, 0.17); }
.user_status--hired          { background: rgba(191, 209, 47, 0.26); }

/* Inline flag pills inside the row */
.flag--do_not_contact,
.flag--hired {
  padding: 5px;
  border-radius: 20px;
  color: white;
  font-size: 0.6rem;
  font-weight: 900;
  margin-top: 5px;
  display: inline-block;
  width: 100%;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.flag--do_not_contact { background: var(--rd-magenta); }
.flag--hired          { background: var(--rd-lime); }


/* -----------------------------------------------------------------------------
   13. MODAL — CV tab (download, accordion, no-CV)
   -------------------------------------------------------------------------- */

.connect-recruiter__cv-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: var(--rd-shadow-sm);
}

.cv-processing-info {
  font-size: 13px;
  color: #666;
}

/* CV data wrapper */
.connect-recruiter__cv-data { width: 100%; }

/* Accordion */
.connect-recruiter__accordion-item {
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--rd-glass-bg-strong);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--rd-shadow-sm);
  transition: box-shadow var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__accordion-item:hover {
  box-shadow: var(--rd-shadow-md);
}

.connect-recruiter__accordion-header {
  width: 100%;
  background: transparent;
  border: none;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #333!important;
  transition: all var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__accordion-header:hover {
  background: rgba(0, 89, 148, 0.04);
}

.connect-recruiter__accordion-header.active {
  background-color: rgba(0, 89, 148, 0.06);
  color: var(--rd-blue);
}

.connect-recruiter__accordion-header:focus,
.connect-recruiter__accordion-header:focus-visible,
.connect-recruiter__accordion-header:active {
  background: transparent !important;
  outline: none;
  box-shadow: none !important;
}

/* When the accordion is open AND focused, keep the open state visible */
.connect-recruiter__accordion-header.active:focus,
.connect-recruiter__accordion-header.active:focus-visible,
.connect-recruiter__accordion-header.active:active {
  background-color: rgba(0, 89, 148, 0.06) !important;
  outline: none;
  box-shadow: none !important;
}

.accordion-icon {
  font-size: 30px;
  font-weight: bold;
  color: var(--rd-blue);
  transition: transform var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__accordion-header.active .accordion-icon {
  color: var(--rd-lime);
}

.connect-recruiter__accordion-content {
  padding: 20px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}

.connect-recruiter__accordion-content table { width: 100%; }

.connect-recruiter__accordion-content table th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 600;
  color: #666;
  width: 120px;
}

.connect-recruiter__accordion-content table td {
  padding: 8px 12px;
  color: #333;
}

.cv-text-content {
  line-height: 1.6;
  color: #333;
  font-size: 14px;
}

/* No-CV state */
.connect-recruiter__no-cv {
  text-align: center;
  padding: 40px 0;
  color: #666;
  width: 100%;
  gap: 1vw;
  display: flex;
}

.connect-recruiter__no-cv p {
  margin-bottom: 16px;
  font-size: 15px;
}

.connect-recruiter__no-cv .button {
  display: inline-block;
  padding: 10px 20px;
  background: var(--rd-blue);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: background var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__no-cv .button:hover {
  background: var(--rd-lime);
}


/* -----------------------------------------------------------------------------
   14. MODAL — quality score
   -------------------------------------------------------------------------- */

.connect-recruiter__quality-score {
  margin-bottom: 0;
  padding: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(249, 250, 251, 0.7) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rd-line);
  border-radius: 16px;
  width: 100%;
  box-shadow: var(--rd-shadow-sm);
}

.connect-recruiter__quality-score h3 {
  margin: 0 0 12px 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.quality-score__overall {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.quality-score__overall .quality_score {
  font-size: 18px;
  padding: 4px 12px;
}

.quality-score__label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.quality-score__breakdown {
  width: 100%;
  font-size: 16px;
}

.quality-score__breakdown th {
  text-align: left;
  padding: 16px 20px;
  font-weight: 500;
  color: #374151;
  width: 160px;
}

.quality-score__breakdown td {
  padding: 16px 20px;
}

.quality-score__justification {
  display: block;
  font-size: 0.9rem;
  color: #6b7280;
  font-style: italic;
  line-height: 1.2;
}

.quality-score__no-cv {
  font-size: 0.8rem;
  line-height: 1.2;
  background: #fff;
  border: 1px solid #ffe08a;
  padding: 1rem;
  border-radius: 14px;
  margin: 8px 0 0 0;
}

/* Score badges */
.quality_score {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  min-width: 28px;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.quality_score--high   { background-color: #dcfce7; color: #166534; }
.quality_score--medium { background-color: #fef9c3; color: #854d0e; }
.quality_score--low    { background-color: #fee2e2; color: #991b1b; }
.quality_score--none   { background-color: #f3f4f6; color: #9ca3af; }

.quality-score__breakdown,
table.quality-score__breakdown,
.connect-recruiter__quality-score table.quality-score__breakdown {
  width: 100% !important;
  table-layout: auto;
}

/* -----------------------------------------------------------------------------
   15. MODAL — add-candidate variant
   -------------------------------------------------------------------------- */

.connect-recruiter__container .connect-recruiter__add-candidate,
button.connect-recruiter__add-candidate,
a.connect-recruiter__add-candidate {
  position: relative;
  width: 100%;
  padding: 10px 20px;
  margin-top: 20px;
  background: transparent;
  color: var(--rd-purple);
  border: 2px solid var(--rd-purple);
  border-radius: 999px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--rd-shadow-sm);
  transition: all var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__container .connect-recruiter__add-candidate:hover,
button.connect-recruiter__add-candidate:hover,
a.connect-recruiter__add-candidate:hover {
  background: var(--rd-purple);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(104, 46, 87, 0.25);
}

.connect-recruiter__modal--add-candidate > div {
  width: 50vw;
  padding: 20px;
  border-radius: 3vw;
}

.connect-recruiter__modal--add-candidate form {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(var(--rd-blur));
  backdrop-filter: blur(var(--rd-blur));
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  margin-top: 20px;
  flex-shrink: 0;
  overflow-y: auto;
  height: auto;
  align-self: flex-start;
  box-shadow: var(--rd-shadow-sm);
}

.connect-recruiter__modal--add-candidate h2 {
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 25px 12px 20px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #7c3a68 0%, var(--rd-purple) 100%);
  margin-left: 0;
}

.connect-recruiter__modal--add-candidate form label {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.connect-recruiter__modal--add-candidate form input,
.connect-recruiter__modal--add-candidate form select,
.connect-recruiter__modal--add-candidate form textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(0, 89, 148, 0.12);
  border-radius: 20px;
  font-size: 16px;
  line-height: 1.4;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.85);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-height: 58px;
  transition: border-color var(--rd-dur) var(--rd-ease),
              box-shadow   var(--rd-dur) var(--rd-ease),
              background   var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__modal--add-candidate form input:focus,
.connect-recruiter__modal--add-candidate form select:focus,
.connect-recruiter__modal--add-candidate form textarea:focus {
  background: #fff;
  border-color: var(--rd-purple);
  box-shadow: 0 0 0 3px rgba(104, 46, 87, 0.18);
  outline: none;
}

/* Secondary action button (close inside add-candidate modal) */
.connect-recruiter__modal--add-candidate button[type="button"] {
  background: transparent;
  border: 2px solid #fff;
  color: #f7f7f7;
  padding: 6px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  position: absolute;
  top: 36px;
  right: 26px;
  transition: all var(--rd-dur) var(--rd-ease);
}

.connect-recruiter__modal--add-candidate button[type="button"]:hover {
  background: #fff;
  color: var(--rd-purple);
  border-color: var(--rd-purple);
}


/* -----------------------------------------------------------------------------
   16. STATUS DOTS, INDICATORS, TRAFFIC LIGHTS
   -------------------------------------------------------------------------- */

/* Work status dot in rows */
.work_status {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: #e5e5e5;
  border-radius: 50%;
  margin-top: 8px;
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, 0.08);
}

.work_status--yes   { background-color: var(--rd-lime);    box-shadow: 0 0 0 2px #fff, 0 0 8px rgba(191, 209, 47, 0.55); }
.work_status--maybe { background-color: var(--rd-orange);  box-shadow: 0 0 0 2px #fff, 0 0 8px rgba(237, 112, 4, 0.55); }
.work_status--no    { background-color: var(--rd-magenta); box-shadow: 0 0 0 2px #fff, 0 0 8px rgba(208, 0, 78, 0.55); }

/* CV present icon */
.cv_present--yes::before {
  content: "\f15c"; /* fa-file-alt */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--rd-lime);
  font-size: 1.2rem;
}

/* CV pipeline traffic lights (in tabs) */
.cv-status-light {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 4px;
  box-shadow: 0 0 0 2px #fff, 0 0 6px currentColor;
}

.cv-status-light--completed  { background-color: var(--rd-lime); color: rgba(191, 209, 47, 0.6); }
.cv-status-light--pending    { background-color: #f59e0b; color: rgba(245, 158, 11, 0.6); }
.cv-status-light--processing { background-color: #f59e0b; color: rgba(245, 158, 11, 0.6); animation: pulse 2s infinite; }
.cv-status-light--failed     { background-color: #ef4444; color: rgba(239, 68, 68, 0.6); }


/* -----------------------------------------------------------------------------
   17. AUTOCOMPLETE SUGGESTIONS
   -------------------------------------------------------------------------- */

.autocomplete-suggestions {
  position: absolute;
  background: var(--rd-glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--rd-blur)) saturate(1.4);
  backdrop-filter: blur(var(--rd-blur)) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  max-height: 200px;
  overflow: hidden auto;
  margin-top: 4px;
  width: 25rem;
  z-index: 1000;
  box-shadow: var(--rd-shadow-lg);
}

.autocomplete-suggestion {
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--rd-line);
  font-size: 1rem;
  color: #444;
  transition: background var(--rd-dur) var(--rd-ease),
              color      var(--rd-dur) var(--rd-ease),
              padding-left var(--rd-dur) var(--rd-ease);
}

.autocomplete-suggestion:hover {
  background: rgba(0, 89, 148, 0.06);
  color: var(--rd-blue);
  padding-left: 16px;
}


/* -----------------------------------------------------------------------------
   18. FORM CONTROLS — circular checkboxes (specific named fields)
   -------------------------------------------------------------------------- */

label:has(input[type="checkbox"][name="do_not_contact"]),
label:has(input[type="checkbox"][name="hired"]),
label:has(input[type="checkbox"][x-model="doNotContact"]),
label:has(input[type="checkbox"][x-model="hired"]),
label:has(input[type="checkbox"][name="uk_driving_licence"]) {
  display: block;
  margin-bottom: 0;
  cursor: pointer;
  font-size: 14px;
  font-family: "Figtree", sans-serif;
  font-weight: 600;
}

input[type="checkbox"][name="do_not_contact"],
input[type="checkbox"][name="hired"],
input[type="checkbox"][x-model="doNotContact"],
input[type="checkbox"][x-model="hired"],
input[type="checkbox"][name="uk_driving_licence"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--rd-blue);
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin-right: 5px;
  margin-bottom: 3px;
  cursor: pointer;
  transition: background-color var(--rd-dur) var(--rd-ease);
}

input[type="checkbox"][name="do_not_contact"]:checked,
input[type="checkbox"][name="hired"]:checked,
input[type="checkbox"][x-model="doNotContact"]:checked,
input[type="checkbox"][x-model="hired"]:checked,
input[type="checkbox"][name="uk_driving_licence"]:checked {
  background-color: var(--rd-lime);
}


/* -----------------------------------------------------------------------------
   19. ANIMATIONS, MOTION, ACCESSIBILITY
   -------------------------------------------------------------------------- */

@keyframes modalFadeIn {
  0%   { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

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

/* Auto-hiding themed scrollbars.
   Default state: thumb is transparent, so no visible scrollbar.
   On hover (or scroll, in supporting browsers): thumb fades in.
   Firefox uses scrollbar-color (no hide-on-idle, but transparent is close). */

/* Scrollable areas — reserve gutter so layout doesn't jump when bar appears */
.connect-recruiter__profiles,
.connect-recruiter__container form,
.connect-recruiter__notes-list,
.connect-recruiter__modal > div,
.autocomplete-suggestions {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 200ms ease;
}

/* Firefox: show thumb on hover */
.connect-recruiter__profiles:hover,
.connect-recruiter__container form:hover,
.connect-recruiter__notes-list:hover,
.connect-recruiter__modal > div:hover,
.autocomplete-suggestions:hover {
  scrollbar-color: rgba(0, 89, 148, 0.25) transparent;
}

/* WebKit / Blink (Chrome, Safari, Edge) */
.connect-recruiter__profiles::-webkit-scrollbar,
.connect-recruiter__container form::-webkit-scrollbar,
.connect-recruiter__notes-list::-webkit-scrollbar,
.connect-recruiter__modal > div::-webkit-scrollbar,
.autocomplete-suggestions::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.connect-recruiter__profiles::-webkit-scrollbar-track,
.connect-recruiter__container form::-webkit-scrollbar-track,
.connect-recruiter__notes-list::-webkit-scrollbar-track,
.connect-recruiter__modal > div::-webkit-scrollbar-track,
.autocomplete-suggestions::-webkit-scrollbar-track {
  background: transparent;
}

/* Thumb invisible by default */
.connect-recruiter__profiles::-webkit-scrollbar-thumb,
.connect-recruiter__container form::-webkit-scrollbar-thumb,
.connect-recruiter__notes-list::-webkit-scrollbar-thumb,
.connect-recruiter__modal > div::-webkit-scrollbar-thumb,
.autocomplete-suggestions::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  transition: background 200ms ease;
}

/* Thumb fades in when the user hovers the scrollable area */
.connect-recruiter__profiles:hover::-webkit-scrollbar-thumb,
.connect-recruiter__container form:hover::-webkit-scrollbar-thumb,
.connect-recruiter__notes-list:hover::-webkit-scrollbar-thumb,
.connect-recruiter__modal > div:hover::-webkit-scrollbar-thumb,
.autocomplete-suggestions:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 89, 148, 0.25);
}

/* Stronger when hovering the thumb itself */
.connect-recruiter__profiles::-webkit-scrollbar-thumb:hover,
.connect-recruiter__container form::-webkit-scrollbar-thumb:hover,
.connect-recruiter__notes-list::-webkit-scrollbar-thumb:hover,
.connect-recruiter__modal > div::-webkit-scrollbar-thumb:hover,
.autocomplete-suggestions::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 89, 148, 0.45);
}

/* Text selection */
.connect-recruiter__container ::selection,
.connect-recruiter__modal ::selection {
  background: rgba(191, 209, 47, 0.45);
  color: var(--rd-blue-deep);
}

/* Honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .connect-recruiter__container *,
  .connect-recruiter__modal * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* Fallback for browsers without backdrop-filter (older Firefox).
   Translucent surfaces flip to solid white so contrast stays correct. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .connect-recruiter__container form,
  .connect-recruiter__profiles tbody tr,
  .connect-recruiter__modal,
  .connect-recruiter__modal > div,
  .connect-recruiter__pagination a,
  .autocomplete-suggestions,
  .connect-recruiter__accordion-item,
  .connect-recruiter__quality-score,
  .connect-recruiter__cv-download,
  .connect-recruiter__notes textarea,
  .connect-recruiter__note,
  .connect-recruiter__status,
  .connect-recruiter__location-input-wrapper select#radius,
  .connect-recruiter__content td,
  .connect-recruiter__modal--add-candidate form,
  .connect-recruiter__modal--add-candidate form input,
  .connect-recruiter__modal--add-candidate form select,
  .connect-recruiter__modal--add-candidate form textarea {
    background: #ffffff !important;
  }
}