/* =============================================
   Invitation Dashboard — Styles
   ============================================= */

/* ── Header ───────────────────────────────── */
.inv-header          { border-radius: 12px 12px 0 0; }
.inv-header-title    { font-weight: 600; font-size: 15px; color: #1a1a2e; }
.badge-count {
  background: #4f46e5;
  color: #fff;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 600;
}

/* ── Search & filters ─────────────────────── */
.inv-search-wrap   { position: relative; }
.inv-search-icon   { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 14px; }
.inv-search-input  {
  border: 1.5px solid #e5e7eb;
  border-radius: 20px;
  padding: 5px 12px 5px 30px;
  font-size: 13px;
  outline: none;
  transition: border-color .2s;
  width: 180px;
}
.inv-search-input:focus { border-color: #4f46e5; }

.inv-select {
  border: 1.5px solid #e5e7eb;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 13px;
  outline: none;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s;
}
.inv-select:focus { border-color: #4f46e5; }

/* ── Liste ────────────────────────────────── */
.inv-list { display: flex; flex-direction: column; gap: 12px; }

/* ── Card ─────────────────────────────────── */
.inv-card {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  transition: box-shadow .2s, transform .15s, opacity .3s;
  overflow: hidden;
}
.inv-card:hover {
  box-shadow: 0 4px 18px rgba(79,70,229,.12);
  transform: translateY(-2px);
}
.inv-card-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}

/* ── Avatar ───────────────────────────────── */
.inv-avatar-wrap { position: relative; flex-shrink: 0; }
.inv-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #e0e7ff;
}
.inv-status-dot {
  position: absolute; bottom: 2px; right: 2px;
  width: 11px; height: 11px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid #fff;
}

/* ── Body ─────────────────────────────────── */
.inv-card-body   { flex: 1; min-width: 0; }
.inv-card-top    { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 3px; }

.inv-pseudo {
  font-weight: 700;
  font-size: 14px;
  color: #4f46e5;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s;
}
.inv-pseudo:hover { color: #3730a3; text-decoration: underline; }

.inv-tribu-name  { font-size: 12px; color: #6b7280; margin-bottom: 3px; font-weight: 500; }
.inv-content     { font-size: 13px; color: #374151; margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.inv-date        { font-size: 11px; color: #9ca3af; margin: 0; }

/* ── Badges type ──────────────────────────── */
.inv-type-badge  { font-size: 11px; font-weight: 600; border-radius: 20px; padding: 2px 9px; }
.inv-badge-tribu     { background: #e0e7ff; color: #4338ca; }
.inv-badge-quartier  { background: #d1fae5; color: #065f46; }
.inv-badge-event     { background: #fef3c7; color: #92400e; }
.inv-badge-friend    { background: #fce7f3; color: #9d174d; }
.inv-badge-member    { background: #f0fdf4; color: #166534; }
.inv-badge-other     { background: #f3f4f6; color: #374151; }

/* ── Badge relance ────────────────────────── */
.inv-relance-badge { font-size: 11px; color: #d97706; background: #fffbeb; border-radius: 20px; padding: 2px 8px; border: 1px solid #fde68a; }

/* ── Actions ──────────────────────────────── */
.inv-card-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.inv-btn {
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .1s;
  white-space: nowrap;
}
.inv-btn:active       { transform: scale(.96); }
.inv-btn-accept       { background: #d1fae5; color: #065f46; }
.inv-btn-accept:hover { background: #a7f3d0; }
.inv-btn-reject       { background: #fee2e2; color: #991b1b; }
.inv-btn-reject:hover { background: #fecaca; }

/* ── État accepté / rejeté (animation sortie) */
.inv-card-accepted { opacity: 0; border-color: #22c55e; background: #f0fdf4; transform: translateX(20px); }
.inv-card-rejected { opacity: 0; border-color: #ef4444; background: #fef2f2; transform: translateX(-20px); }

/* ── Empty state ──────────────────────────── */
.inv-empty { text-align: center; padding: 40px 20px; color: #9ca3af; }
.inv-empty-icon { font-size: 40px; margin-bottom: 8px; }
.inv-empty p    { font-size: 14px; margin: 0; }

/* ── Pagination ───────────────────────────── */
.inv-pagination  { border-top: 1px solid #f3f4f6; padding-top: 12px !important; }
.inv-pag-info    { font-size: 13px; color: #6b7280; }
.inv-pag-current { font-size: 13px; font-weight: 600; color: #374151; padding: 4px 8px; }
.inv-pag-btn {
  background: #f3f4f6;
  border: none;
  border-radius: 8px;
  width: 30px; height: 30px;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s;
}
.inv-pag-btn:hover:not(:disabled)  { background: #e0e7ff; color: #4f46e5; }
.inv-pag-btn:disabled { opacity: .4; cursor: default; }

/* ── Responsive ───────────────────────────── */
@media (max-width: 576px) {
  .inv-card-inner   { flex-wrap: wrap; }
  .inv-card-actions { flex-direction: row; width: 100%; }
  .inv-btn          { flex: 1; text-align: center; }
  .inv-content      { max-width: 100%; }
}