/* ─── MSS PLANNING — Rechercher un remplaçant ────────────────────────── */

.rr-page-body {
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding: 20px 24px 40px;
}

.rr-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 1100px;
  margin-bottom: 20px;
}
.rr-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.rr-filter-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-2); }
.rr-checkbox { flex-direction: row !important; align-items: center; gap: 6px !important; }

.rr-slots { width: 100%; max-width: 1100px; display: flex; flex-direction: column; gap: 12px; }

.rr-slot-card {
  border: 1px solid rgba(26,35,126,.10);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.rr-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-2);
}
.rr-slot-info { display: flex; flex-direction: column; gap: 2px; }
.rr-slot-info-top { display: flex; align-items: center; gap: 12px; }
.rr-slot-meta { font-size: 12px; color: var(--text-3); }
.rr-slot-status { display: flex; align-items: center; gap: 8px; }
.rr-toggle-hs { display: flex; align-items: center; gap: 6px; flex-shrink: 0; cursor: pointer; }
.rr-toggle-hs .toggle-label { font-size: 12px; color: var(--text-3); cursor: pointer; }

.rr-slot-body { padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.rr-slot-empty, .rr-slot-note { font-size: 13px; color: var(--text-3); margin: 4px 0; }

.rr-candidat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 6px;
}
.rr-candidat-row:hover { background: var(--surface-2); }
.rr-candidat-nom { min-width: 160px; font-weight: 600; }
.rr-candidat-badges { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.rr-candidat-actions { display: flex; gap: 6px; white-space: nowrap; }

.rr-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.rr-badge.ok     { background: #e3f2e3; color: #2e7d32; }
.rr-badge.warn   { background: #fff3e0; color: #e65100; }
.rr-badge.danger { background: #fdecea; color: #c62828; }
.rr-badge.muted  { background: var(--surface-2); color: var(--text-3); }