/* ============================================================
   TrouvePro — dashboard-client.css
   ============================================================ */

.dash-main {
  background: var(--gris-clair);
  min-height: calc(100vh - 120px);
  padding: 36px 0 64px;
}

/* ── TOPBAR ──────────────────────────────────────────────── */
.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}
.dash-bienvenue { display: flex; align-items: center; gap: 14px; }
.dash-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dash-nom {
  font-family: var(--font-titre);
  font-size: 20px;
  font-weight: 700;
  color: var(--noir);
}
.dash-sous { font-size: 13px; color: var(--gris-mid); margin-top: 3px; }

/* ── KPI ─────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.kpi-card {
  background: var(--blanc);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 8px;
  transition: box-shadow .2s;
}
.kpi-card:hover { box-shadow: var(--ombre); }
.kpi-icone {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.kpi-val {
  font-family: var(--font-titre);
  font-size: 28px; font-weight: 800;
  color: var(--noir); line-height: 1;
}
.kpi-label { font-size: 12.5px; color: var(--gris-mid); font-weight: 300; }

/* ── CORPS ───────────────────────────────────────────────── */
.dash-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}
.dash-col-side {
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: 16px;
}

/* ── SECTIONS ────────────────────────────────────────────── */
.dash-section {
  background: var(--blanc);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.dash-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.dash-section-titre { font-weight: 600; font-size: 15px; color: var(--noir); }
.lien-action {
  font-size: 13px; color: var(--orange); font-weight: 500;
  transition: opacity .15s;
}
.lien-action:hover { opacity: .75; }
.badge-count {
  background: var(--gris-clair);
  color: var(--gris-mid);
  font-size: 12px; font-weight: 600;
  padding: 2px 9px; border-radius: 50px;
}

/* ── DEMANDE CARD (client) ───────────────────────────────── */
.demande-card {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
  cursor: pointer;
}
.demande-card:last-child { border-bottom: none; }
.demande-card:hover { background: var(--gris-clair); }

.demande-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.demande-desc {
  font-weight: 500; font-size: 14.5px; color: var(--noir);
  flex: 1; line-height: 1.4;
}
.demande-statut {
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 50px;
  flex-shrink: 0; white-space: nowrap;
}
.statut-en-attente { background: #FFF8E1; color: #856404; }
.statut-en-cours   { background: #E3F2FD; color: #1565C0; }
.statut-acceptee   { background: var(--vert-soft); color: var(--vert); }
.statut-terminee   { background: var(--gris-clair); color: var(--gris-mid); }
.statut-annulee    { background: #FFF0EB; color: var(--orange-dark); }

.demande-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--gris-mid); margin-bottom: 12px;
}
.demande-meta span { display: flex; align-items: center; gap: 4px; }

.demande-pro {
  display: flex; align-items: center; gap: 10px;
  background: var(--gris-clair);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: 10px;
}
.pro-mini-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--orange);
  color: #fff; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pro-mini-info { flex: 1; }
.pro-mini-nom  { font-size: 13.5px; font-weight: 500; color: var(--noir); }
.pro-mini-note { font-size: 12px; color: #F5A623; }

.demande-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-chat {
  background: var(--orange);
  color: #fff; border: none;
  border-radius: 50px; padding: 7px 16px;
  font-size: 13px; font-weight: 500;
  font-family: var(--font-corps); cursor: pointer;
  transition: opacity .18s;
}
.btn-chat:hover { opacity: .85; }
.btn-noter {
  background: transparent; color: var(--gris-mid);
  border: 1px solid var(--border);
  border-radius: 50px; padding: 7px 16px;
  font-size: 13px; font-family: var(--font-corps); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-noter:hover { border-color: #F5A623; color: #856404; }
.btn-recontacter {
  background: var(--gris-clair); color: var(--noir);
  border: 1px solid var(--border);
  border-radius: 50px; padding: 7px 16px;
  font-size: 13px; font-family: var(--font-corps); cursor: pointer;
  transition: background .15s;
}
.btn-recontacter:hover { background: #E5E5E3; }

/* ── EMPTY STATE ─────────────────────────────────────────── */
.empty-state {
  padding: 40px 24px; text-align: center;
}
.empty-icone { font-size: 36px; margin-bottom: 12px; }
.empty-titre { font-weight: 500; font-size: 15px; color: var(--noir); margin-bottom: 6px; }
.empty-sous  { font-size: 13px; color: var(--gris-mid); font-weight: 300; line-height: 1.55; max-width: 300px; margin: 0 auto; }
.empty-mini  { padding: 12px 0; text-align: center; }

/* ── FAVORIS ─────────────────────────────────────────────── */
.favori-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: opacity .15s;
}
.favori-row:last-child { border-bottom: none; }
.favori-row:hover { opacity: .75; }
.favori-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--orange); color: #fff;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.favori-info  { flex: 1; }
.favori-nom   { font-size: 13.5px; font-weight: 500; color: var(--noir); }
.favori-meta  { font-size: 12px; color: var(--gris-mid); }
.favori-note  { font-size: 13px; color: #F5A623; font-weight: 500; }

/* ── SOS WIDGET ──────────────────────────────────────────── */
.widget-sos {
  background: var(--noir) !important;
  border-color: transparent !important;
}
.sos-titre {
  font-family: var(--font-titre);
  font-size: 17px; font-weight: 700;
  color: #fff; margin-bottom: 10px;
}
.sos-desc {
  font-size: 13px; color: rgba(255,255,255,.6);
  line-height: 1.55; font-weight: 300; margin-bottom: 18px;
}
.btn-sos {
  display: flex; align-items: center; justify-content: center;
  background: var(--orange); color: #fff;
  border-radius: 50px; padding: 11px 20px;
  font-size: 14px; font-weight: 500;
  transition: opacity .18s;
}
.btn-sos:hover { opacity: .88; }

/* ── WIDGETS ─────────────────────────────────────────────── */
.side-widget {
  background: var(--blanc);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
}
.side-widget-titre {
  font-weight: 600; font-size: 14px;
  color: var(--noir); margin-bottom: 16px;
}
.profil-infos   { display: flex; flex-direction: column; gap: 10px; }
.profil-ligne   { display: flex; align-items: center; gap: 10px; }
.profil-icone   { font-size: 15px; flex-shrink: 0; }
.profil-val     { font-size: 13.5px; color: var(--gris-mid); font-weight: 300; }

/* ── MODAL NOTATION ──────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .2s both;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--blanc);
  border-radius: var(--r-xl);
  padding: 36px;
  width: 100%; max-width: 420px;
  text-align: center;
  animation: fadeUp .25s both;
}
.modal-titre { font-family: var(--font-titre); font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.modal-sous  { font-size: 14px; color: var(--gris-mid); margin-bottom: 24px; }
.etoiles-input {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: 20px;
}
.etoile-btn {
  font-size: 32px; cursor: pointer;
  transition: transform .15s;
  color: var(--border); background: none; border: none;
  line-height: 1;
}
.etoile-btn:hover,
.etoile-btn.active { color: #F5A623; transform: scale(1.15); }
.modal-commentaire {
  width: 100%;
  background: var(--gris-clair);
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 14px; font-family: var(--font-corps);
  color: var(--noir); outline: none;
  resize: none; min-height: 80px;
  transition: border-color .18s;
  margin-bottom: 16px;
}
.modal-commentaire:focus { border-color: var(--orange); background: var(--blanc); }
.modal-actions { display: flex; gap: 10px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .kpi-grid      { grid-template-columns: repeat(2, 1fr); }
  .dash-body     { grid-template-columns: 1fr; }
  .dash-col-side { position: static; }
}
@media (max-width: 560px) {
  .kpi-grid    { grid-template-columns: 1fr 1fr; }
  .dash-topbar { flex-direction: column; align-items: flex-start; }
}