/* ==========================================================
   CARTE — la base
   Utilisée par tout conteneur "carte blanche" du site (hero,
   dashboard, tableaux...). Une seule source de vérité pour
   fond/bordure/rayon/ombre plutôt qu'une redéfinition par
   composant.
========================================================== */

.mpr-card{
    background:var(--mpr-surface);
    border:1px solid var(--mpr-border);
    border-radius:var(--mpr-radius);
    box-shadow:var(--mpr-shadow);
    padding:24px 26px;
}

.mpr-card-lg{
    padding:28px 32px;
}

/* ==========================================================
   OVERLAY DE CHARGEMENT
   Plein écran, avec spinner — utilisé pendant les traitements
   un peu longs (import GPX, export PDF...).
========================================================== */

.mpr-loading-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(255,255,255,.85);
    z-index:200;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
}

.mpr-loading-overlay.is-visible{
    display:flex;
}

.mpr-loading-overlay p{
    font-size:var(--mpr-font-base);
    color:var(--mpr-text-light);
}

.mpr-spinner{
    width:48px;
    height:48px;
    border:4px solid var(--mpr-border);
    border-top-color:var(--mpr-primary);
    border-radius:50%;
    animation:mpr-spin .8s linear infinite;
}

@keyframes mpr-spin{
    to{ transform:rotate(360deg); }
}

.mpr-card-sm{
    padding:16px 18px;
    border-radius:10px;
}

/* ==========================================================
   LISTE — ligne cliquable avec zone de droite
   Ex: mes prédictions, courses de référence, débriefs...
   Réutilisable partout où un ensemble d'éléments se présente
   sous cette forme (nom + détails à gauche, badge/statut à
   droite).
========================================================== */

.mpr-list{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.mpr-list-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 10px;
    border-radius:10px;
    text-decoration:none;
    transition:background .18s ease;
}

.mpr-list-item:hover{
    background:var(--mpr-background);
}

.mpr-list-item-title{
    font-size:var(--mpr-font-base);
    font-weight:var(--mpr-weight-semibold);
    color:var(--mpr-text);
}

.mpr-list-item-title a{
    color:inherit;
    text-decoration:none;
}

.mpr-list-item-title a:hover{
    text-decoration:underline;
}

.mpr-list-item-subtitle{
    font-size:var(--mpr-font-xs);
    color:var(--mpr-text-light);
    margin-top:2px;
}

/* « Mal digéré — <course> (<date>) » sous un produit (sacs de
   nutrition.php, catalogue nutrition_product.php) — noté dans "Mon
   ressenti" d'un débrief, voir getProductIntolerances(). */
.mpr-intolerance-note{
    margin-top:3px;
    font-size:var(--mpr-font-xs);
    font-weight:var(--mpr-weight-semibold);
    color:var(--mpr-danger);
}

.mpr-intolerance-note::before{
    content:"⚠ ";
}

.mpr-list-item-value{
    font-size:var(--mpr-font-sm);
    font-weight:var(--mpr-weight-bold);
    color:var(--mpr-text);
    margin-top:4px;
}

.mpr-list-item-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    text-decoration:none;
    color:inherit;
}

/* .mpr-list-item-right ne rétrécit jamais (flex-shrink:0, volontaire pour
   garder le badge de statut + le bouton d'action lisibles) — sur mobile,
   sans possibilité de passer à la ligne, il était purement et simplement
   poussé hors de l'écran (ex: le bouton "Exclure" de model.php,
   inatteignable). Repéré lors du re-test mobile pré-panel. */
@media (max-width:768px){
    .mpr-list-item{
        flex-wrap:wrap;
        row-gap:8px;
    }

    .mpr-list-item-right{
        width:100%;
        justify-content:flex-end;
    }
}

/* ==========================================================
   TUILE — icône + libellé, en grille
   Ex: accès rapides, futures pages de raccourcis/paramètres.
========================================================== */

.mpr-tile-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.mpr-tile{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:16px;
    border:1px solid var(--mpr-border);
    border-radius:10px;
    text-decoration:none;
    transition:
        border-color .18s ease,
        background .18s ease;
}

.mpr-tile:hover{
    border-color:var(--mpr-primary);
    background:#F7FBF7;
}

.mpr-tile-icon{
    width:34px;
    height:34px;
    border-radius:9px;
    background:#EDF6ED;
    color:var(--mpr-primary);
    display:flex;
    align-items:center;
    justify-content:center;
}

.mpr-tile-icon svg{
    width:17px;
    height:17px;
}

.mpr-tile span{
    font-size:var(--mpr-font-sm);
    font-weight:var(--mpr-weight-semibold);
    color:var(--mpr-text);
}

/* ==========================================================
   BARRE DE PROGRESSION
   Ex: préparation nutrition, avancement du modèle, checklist
   de course. Une seule définition, plusieurs usages.
========================================================== */

.mpr-progress{
    width:100%;
    height:6px;
    background:var(--mpr-border);
    border-radius:999px;
    overflow:hidden;
}

.mpr-progress-fill{
    height:100%;
    background:var(--mpr-primary);
    border-radius:999px;
}

/* ==========================================================
   KPI — indicateur chiffré en grille
   Ex: taux de réussite, erreur moyenne, état du modèle...
========================================================== */

.mpr-kpi-grid{
    display:grid;
    gap:14px;
}

.mpr-kpi{
    background:var(--mpr-surface);
    border:1px solid var(--mpr-border);
    border-radius:var(--mpr-radius);
    padding:18px 20px;
    /* Grid item de .mpr-kpi-grid : sans min-width:0, sa taille minimale
       automatique (min-content) peut forcer toute la grille à déborder
       sur mobile — même famille de bug que .mpr-profile-forms/
       .mpr-course-profile/.mpr-debrief-top-grid ailleurs sur le site.
       Repéré lors du test mobile réel pré-panel (profile.php, section
       "Profil du modèle"). */
    min-width:0;
}

.mpr-kpi-label{
    font-size:var(--mpr-font-xs);
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--mpr-text-light);
    font-weight:var(--mpr-weight-semibold);
    margin-bottom:8px;
}

.mpr-kpi-value{
    font-size:22px;
    font-weight:var(--mpr-weight-bold);
    letter-spacing:-0.02em;
    color:var(--mpr-text);
}

.mpr-kpi-value.warning{
    color:var(--mpr-warning);
}

/* ==========================================================
   MESSAGE D'ALERTE
   Bandeau inline (avertissement/erreur) affiché dans une carte,
   ex: modèle non construit, calibration bloquée...
========================================================== */

.mpr-alert{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    border-radius:10px;
    font-size:var(--mpr-font-sm);
    margin:12px 0;
}

.mpr-alert svg{
    flex-shrink:0;
    width:18px;
    height:18px;
}

.mpr-alert a{
    color:inherit;
    text-decoration:underline;
    font-weight:var(--mpr-weight-semibold);
    white-space:nowrap;
}

.mpr-alert-warning{
    background:#FEF3C7;
    color:#92400E;
}

.mpr-alert-danger{
    background:#FEE2E2;
    color:#991B1B;
}

.mpr-alert-success{
    background:#EDF6ED;
    color:var(--mpr-primary);
}

.mpr-alert-inline-form{
    display:inline;
}

.mpr-alert-action-btn{
    background:none;
    border:none;
    padding:0;
    margin:0;
    font:inherit;
    color:inherit;
    text-decoration:underline;
    font-weight:var(--mpr-weight-semibold);
    cursor:pointer;
    white-space:nowrap;
}

/* ==========================================================
   PASTILLE DE STATUT
   Ex: inclus/exclu du modèle, conformité de segment,
   statut de ravitaillement...
========================================================== */

.mpr-status-pill{
    display:inline-flex;
    align-items:center;
    padding:3px 9px;
    border-radius:999px;
    font-size:var(--mpr-font-xs);
    font-weight:var(--mpr-weight-bold);
}

.mpr-status-pill.success{
    background:#EDF6ED;
    color:var(--mpr-primary);
}

.mpr-status-pill.warning{
    background:#FEF3C7;
    color:#B45309;
}

.mpr-status-pill.danger{
    background:#FEF2F2;
    color:var(--mpr-danger);
}

.mpr-status-pill.muted{
    background:var(--mpr-background);
    color:var(--mpr-text-light);
}

/* Catégorie d'assistance d'un ravito ("Sans assistance" utilise .muted
   ci-dessus) — voir NutritionEngine.php::getRavitoAssistanceTypes(). */
.mpr-status-pill.ravito-avec-assistance{
    background:#EFF6FF;
    color:#3B82F6;
}

.mpr-status-pill.ravito-base-vie{
    background:#F5F3FF;
    color:#8B5CF6;
}

/* ==========================================================
   LIGNE DE STATISTIQUE
   Ex: résumé course/nutrition (libellé à gauche, valeur à
   droite, dans une carte compacte).
========================================================== */

.mpr-stat-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 0;
    border-bottom:1px solid var(--mpr-border);
    font-size:var(--mpr-font-sm);
}

.mpr-stat-row:last-child{
    border-bottom:none;
}

.mpr-stat-row span{
    color:var(--mpr-text-light);
}

.mpr-stat-row strong{
    color:var(--mpr-text);
    font-weight:var(--mpr-weight-bold);
}

.mpr-stat-row strong.success{ color:var(--mpr-primary); }
.mpr-stat-row strong.warning{ color:#B45309; }
.mpr-stat-row strong.danger{ color:var(--mpr-danger); }