/* ── Suivi Médical (Design Premium) ───────────────────────────── */

/* Conteneur de la zone graphique */
.medical-chart-card {
    background: var(--surface);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
}

/* Hauteur maîtrisée et responsive pour le graphique Chart.js */
.medical-main-chart .chart-wrapper {
    height: 18rem !important;
    width: 100%;
    position: relative;
}
@media (min-width: 768px) {
    .medical-main-chart .chart-wrapper {
        height: 22rem !important;
    }
}

.medical-main-chart .chart-wrapper canvas {
    height: 100% !important;
    width: 100% !important;
}

/* Liste des statistiques médicales dans les cartes */
.record-stats-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex-grow: 1;
}

.record-stat-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Couleurs Premium spécifiques issues de ton Design System */
.highlight-weight {
    color: #ec4899; /* Rose vif accordé à la couleur du trait de ton dataset Poids */
    font-weight: 700;
}

.highlight-height {
    color: #3b82f6; /* Bleu vif accordé à la couleur du trait de ton dataset Taille */
    font-weight: 700;
}

/* Harmonisation globale de la grille des fiches (médicales & activités) */
.cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}