/* ══════════════════════════════════════════════════════════════════════
   components.css — reusable UI pieces used by BOTH the Scraper tab's
   Matched Profiles and the Shortlist Tracker: modal, popover, section
   headers, status badges, profile photo, the shared match/shortlist card
   layout, the filter-bar controls, pagination, and a few CSS-only
   overrides for colours the JS files write inline.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Custom confirm modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30,24,20,0.32);
  backdrop-filter: blur(2px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}
body.dark .modal-overlay { background: rgba(0,0,0,0.55); }
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 28px 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 16px 40px rgba(40,25,20,0.08);
  animation: slideUp 0.35s var(--ease);
}
.modal-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 8px;
}
.modal-msg   { font-size: 0.86rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 22px; }
.modal-msg b { color: var(--text); font-weight: 600; }
.modal-box select, .modal-box textarea, .modal-box input[type=text] { margin: 8px 0 18px; }
.modal-btns  { display: flex; gap: 8px; justify-content: flex-end; }
.modal-box.modal-wide { max-width: 480px; }
.modal-box textarea { min-height: 96px; }

/* Session-limit dialog list */
.limit-list { margin: 4px 0 18px; }
.limit-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 0.86rem;
}
.limit-empty { padding: 12px; text-align: center; color: var(--text-muted); font-size: 0.86rem; }

/* ── Floating popover (e.g. New Session label) ── */
.floating-popover {
  position: absolute;
  z-index: var(--z-modal);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(40,25,20,0.08);
  padding: 14px;
  min-width: 270px;
  animation: slideUp 0.25s var(--ease);
}
.floating-popover-title { font-size: 0.8rem; font-weight: 600; color: var(--text-label); margin-bottom: 8px; }
.fp-optional { font-weight: 400; color: var(--text-muted); }
.floating-popover input[type=text] { margin-bottom: 10px; }
.floating-popover-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* ── Shared section header (Matched Profiles, Shortlist Tracker, etc.) ── */
.section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--stat-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.section-title > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.section-title .i { color: var(--text-muted); }
.section-title .title-serif {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.section-meta {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.section-desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  max-width: 68ch;
  margin: -4px 0 18px;
  line-height: 1.6;
}
.subtle { font-size: 0.78rem; color: var(--text-muted); }
.hint   { font-size: 0.76rem; color: var(--text-muted); line-height: 1.5; }

.no-matches {
  text-align: center;
  color: var(--text-muted);
  padding: 56px 16px;
  font-size: 0.88rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

/* ── Profile status badges (pastel pills) ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.badge-selected  { background: var(--ok-bg);   color: var(--ok-text); }
.badge-rejected  { background: var(--bad-bg);  color: var(--bad-text); }
.badge-score     {
  background: var(--surface-2);
  color: var(--highlight);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.72rem;
}
.badge-info   { background: var(--info-bg);  color: var(--info-text); }
.badge-warn   { background: var(--warn-bg);  color: var(--warn-text); }
.badge-idle   { background: var(--idle-bg);  color: var(--idle-text); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge .i { width: 11px; height: 11px; stroke-width: 2.4; vertical-align: 0; }
.badge-score .i { color: var(--gold); }

/* ── Profile photo thumbnail (matched + shortlist cards) ── */
.profile-photo-wrap {
  width: 56px; height: 56px;
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--stat-border);
}
.profile-photo { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* Placeholder: the JS writes an emoji here — hidden, a neutral silhouette is drawn instead */
.profile-photo-placeholder {
  width: 100%; height: 100%;
  align-items: center; justify-content: center;
  font-size: 0;
  color: var(--border-strong);
}
/* No photo? The box shrinks — an empty grey rectangle shouldn't dominate
   the card. (Browsers without :has() simply keep the full-size box.) */
.mc-photo-box:has(.profile-photo-placeholder[style*="flex"]) {
  width: 56px;
  height: 72px;
  background: transparent;
  border-style: dashed;
}
.profile-photo-placeholder::before {
  content: '';
  width: 42%; height: 42%;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5c1.4-3.6 4.2-5.5 7.5-5.5s6.1 1.9 7.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5c1.4-3.6 4.2-5.5 7.5-5.5s6.1 1.9 7.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Loading placeholders (shown while a list is being fetched) ── */
.skel-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 16px;
}
.skel-line {
  height: 10px;
  border-radius: 3px;
  background: var(--surface-2);
  margin-bottom: 10px;
  animation: skelPulse 1.4s ease-in-out infinite;
}
.skel-line.w40 { width: 40%; }
.skel-line.w70 { width: 70%; }
.skel-line.w55 { width: 55%; }
.skel-line.tall { height: 68px; margin-top: 14px; }
.skel-card .skel-line:nth-child(2) { animation-delay: 0.1s; }
.skel-card .skel-line:nth-child(3) { animation-delay: 0.2s; }
.skel-card .skel-line:nth-child(4) { animation-delay: 0.3s; }
@keyframes skelPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ── Match/Shortlist card ── */
.match-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 16px 14px;
  background: var(--surface);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.match-card:hover { box-shadow: var(--hover-shadow); border-color: var(--border-strong); }

.match-card .mid     {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--highlight);
  font-size: 0.86rem;
  letter-spacing: -0.01em;
}
.match-card .mname   { font-size: 0.9rem; margin: 3px 0; color: var(--text); }
.match-card .mfields { font-size: 0.78rem; color: var(--text-muted); margin: 6px 0; line-height: 1.7; }
.match-card .mactions { display: flex; gap: 8px; margin-top: 10px; }

.profile-actions select,
.profile-actions input[type=text] {
  width: auto;
  padding: 4px 8px;
  font-size: 0.78rem;
}

/* ── Card top row (checkbox + photo + name + actions) ── */
.match-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 4px;
}
.match-card-top .bulk-check,
.match-card-top .sl-bulk-check { margin-top: 6px; flex-shrink: 0; }
.match-card-headtext { flex: 1; min-width: 0; }
.fav-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; color: var(--gold); padding: 2px 4px; line-height: 1;
  border-radius: 4px;
  transition: transform 0.15s, background 0.2s;
}
.fav-btn .i { width: 17px; height: 17px; vertical-align: -3px; }
.fav-btn.on .i { fill: currentColor; }
.fav-btn:hover { background: var(--surface-2); }
.fav-btn:active { transform: scale(0.9); }
.notes-line {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 0.76rem; color: var(--text-muted);
  margin-top: 8px; padding: 6px 9px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  line-height: 1.5;
}
.notes-line .i { margin-top: 2px; }
.mc-status { margin-top: 10px; }
.mc-site { font-size: 0.68rem; color: var(--text-muted); font-weight: 400; }
.need-score { color: var(--warn-text); display: inline-flex; vertical-align: -2px; }
.need-score .i { width: 12px; height: 12px; }
.mf-actions-select { font-size: 0.78rem; padding: 6px 8px; }

/* ── Card v2 layout ── */
.mc-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.mc-id-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 0;
}
.mc-id-check input[type=checkbox] { margin: 0; }
.mc-topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mc-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.mc-fields {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.75;
}
.mc-fields div { overflow-wrap: break-word; }
.mc-fields b { color: var(--text-muted); font-weight: 500; }
.mc-dob { color: var(--text-muted); font-size: 0.72rem; font-family: var(--font-mono); }
.mc-photo-box {
  width: 96px;
  height: 128px;
  border-radius: var(--radius);
  flex-shrink: 0;
}
.mc-footer {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--stat-border);
}
.match-card > .mc-footer { margin-top: auto; }
.match-card > :nth-last-child(2) { margin-bottom: 12px; }
.mc-footer .btn { white-space: nowrap; flex-shrink: 0; }
/* Remove sits apart from the others so it is harder to hit by mistake */
.mc-footer .btn-remove { margin-left: auto; padding-inline: 8px; }
.mc-footer .btn-remove .i { width: 15px; height: 15px; }
.mc-footer-wrap { flex-wrap: wrap; }
.mc-footer .mf-actions-select { flex: 1; min-width: 0; max-width: 160px; }

/* Shortlist card stage labels */
.sl-stage-grid label { color: var(--text-muted); font-weight: 500; }

/* ── Matched-profiles/Shortlist collapsible sub-sections (Filters / Bulk actions) ── */
.mf-collapse-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-label);
  padding: 10px 0;
  border-top: 1px solid var(--stat-border);
  user-select: none;
  transition: color 0.2s;
}
.mf-collapse-head:hover { color: var(--text); }
.mf-collapse-head > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.mf-collapse-head:first-of-type { border-top: none; }
.mf-collapse-body { padding-bottom: 6px; }
.mf-collapse-body.collapsed { display: none; }

/* ── Bulk action bar ── */
.bulk-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--stat-border);
  border-radius: var(--radius);
}
.bulk-bar > label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 500; color: var(--text-label); margin: 0;
}
.bulk-count { font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: auto; }
#slBulkStageButtons { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Inline checkbox label (Favorites only) ── */
.check-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: var(--text-label);
  margin: 0; font-weight: 500; white-space: nowrap; cursor: pointer;
}

/* ── Shared filter-bar grids ── */
.mf-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.mf-grid-text {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.mf-grid3 select,
.mf-grid-text input[type=text] { font-size: 0.82rem; }

/* ── Flexible filter row (search + field picker + variable value inputs) ── */
.mf-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}
.mf-filter-row input[type=text],
.mf-filter-row input[type=date],
.mf-filter-row select { font-size: 0.82rem; }
.mf-filter-row input[type=text]#search_query,
.mf-filter-row input[type=text]#sl_search {
  flex: 1 1 200px;
  min-width: 160px;
  width: auto;
}
.mf-filter-row select#filter_field,
.mf-filter-row select#sl_filter_field,
.mf-filter-row select#sl_filter_site {
  flex: 0 0 auto;
  width: auto;
  min-width: 140px;
}
#filter_value_container, #sl_filter_value_container {
  display: flex;
  gap: 6px;
  flex: 1 1 220px;
  min-width: 200px;
}
#filter_value_container:empty, #sl_filter_value_container:empty { display: none; }
#filter_value_container input, #filter_value_container select,
#sl_filter_value_container input, #sl_filter_value_container select {
  flex: 1;
  min-width: 90px;
}

/* ── List footer: pagination + per-row / per-page ── */
.list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  flex-wrap: wrap;
  gap: 10px;
}
.pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.list-controls {
  font-size: 0.78rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 14px;
}
.list-controls > span { display: flex; align-items: center; gap: 6px; }
.list-controls select { width: auto; padding: 4px 6px; font-size: 0.8rem; }

.pg-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.pg-btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); }
.pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pg-btn.active { background: var(--text); border-color: var(--text); color: var(--surface); }
.pg-nav { font-family: var(--font-sans); font-size: 0.95rem; }
.pg-gap { padding: 0 4px; color: var(--text-muted); }
.pg-info { margin-left: 6px; font-size: 0.76rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Age filter "from – to" separator */
.range-sep { align-self: center; color: var(--text-muted); font-size: 0.8rem; }