/* ------------------------------------------------------------------
   Indicateurs de performance et de gestion — Mon GABONIMMO
   Bloc lisible d'un seul regard : occupation, impayés, conversion,
   trésorerie prévisionnelle, puis le détail par bien.
   Mobile d'abord : tout s'empile, rien n'est écrasé.
   ------------------------------------------------------------------ */

/* Lignes de lecture : une icône, une phrase, un chiffre en gras */
.perf-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.perf-line {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: .87rem;
  line-height: 1.45;
  background: var(--bg, #faf7f2);
  border-left: 3px solid var(--line, #e5ded2);
  color: var(--ink, #2b2320);
}

.perf-line .grow { flex: 1 1 auto; min-width: 0; }
.perf-line b { font-weight: 700; }

.perf-line.ok     { border-left-color: #2e7d5b; background: #f0f7f3; }
.perf-line.warn   { border-left-color: #b8860b; background: #fdf7e8; }
.perf-line.danger { border-left-color: #b3402f; background: #fdf1ef; }

.perf-line svg { flex: 0 0 auto; margin-top: 1px; }

/* Tableau du détail par bien */
.perf-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line, #e5ded2);
  border-radius: 12px;
}

.perf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
  min-width: 560px;
}

.perf-table thead th {
  text-align: left;
  padding: 10px 12px;
  background: var(--brand-tint, #f6ece1);
  color: var(--muted, #7b6f66);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.perf-table thead th.num,
.perf-table tbody td.num { text-align: right; white-space: nowrap; }

.perf-table tbody td {
  padding: 11px 12px;
  border-top: 1px solid var(--line, #e5ded2);
  vertical-align: middle;
}

.perf-table tbody tr:hover { background: var(--brand-tint, #f6ece1); }

.perf-bien {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.perf-titre {
  font-weight: 600;
  color: var(--ink, #2b2320);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

/* Sur téléphone : les chiffres restent lisibles, le tableau défile */
@media (max-width: 768px) {
  .perf-line { font-size: .84rem; padding: 10px 12px; gap: 9px; }
  .perf-titre { max-width: 150px; }
  .perf-table { font-size: .8rem; }
  .perf-table thead th,
  .perf-table tbody td { padding: 9px 10px; }
}