/**
 * Infra-Monitoring — composants premium réutilisables (thème clair Carbon)
 * ========================================================================
 * Librairie de présentation experte pour les dashboards de la section
 * Infrastructure (disponibilité, monitoring, backups, sécurité, stockage…).
 * Consommée via assets/js/infra-monitoring.js (window.InfraMon).
 * Reprend les primitives éprouvées de la page Temp-Baie, généralisées :
 *   cartes d'entité à jauge de seuils, panneau de diagnostic, KPI à état,
 *   badges de statut, référence de norme. Palette Carbon, AA, reduced-motion.
 */

/* ===== Grille de cartes d'entité (apps, serveurs, lignes, backups…) ===== */
.im-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.im-card { position:relative; background:#ffffff; border:1px solid #e0e0e0; border-radius:10px; padding:1.1rem 1.15rem; box-shadow:0 1px 2px rgba(16,22,26,.06); overflow:hidden; transition:box-shadow .15s ease, transform .15s ease; }
.im-card::before { content:""; position:absolute; top:0; bottom:0; left:0; width:4px; background:#c6c6c6; }
.im-card.im-ok::before   { background:#0e6027; }
.im-card.im-warn::before { background:#8a6500; }
.im-card.im-crit::before { background:#da1e28; }
.im-card.im-info::before { background:#0f62fe; }
.im-card.im-off { opacity:.72; }
.im-card:hover { box-shadow:0 8px 24px rgba(16,22,26,.10); transform:translateY(-2px); }
.im-card__head { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-bottom:.55rem; }
.im-card__name { font-weight:600; color:#161616; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.im-card__sub { font-size:.7rem; color:#6f6f6f; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.im-card__value { font-size:1.9rem; font-weight:700; color:#161616; line-height:1; font-variant-numeric:tabular-nums; }
.im-card__value small { font-size:.9rem; color:#525252; font-weight:600; }
.im-card__foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.7rem; flex-wrap:wrap; }
.im-card__tags { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.im-card__meta { font-size:.74rem; color:#6f6f6f; white-space:nowrap; }

/* ===== Jauge de seuils (valeur positionnée dans des zones colorées) ===== */
.im-gauge { margin:.55rem 0 .2rem; }
.im-gauge__label { display:flex; align-items:center; gap:.3rem; font-size:.66rem; font-weight:600; color:#525252; text-transform:uppercase; letter-spacing:.02em; margin-bottom:.28rem; }
.im-gauge__track { position:relative; height:8px; border-radius:999px; background:#e0e0e0; }
.im-gauge__marker { position:absolute; top:50%; width:3px; height:15px; transform:translate(-50%,-50%); background:#161616; border-radius:2px; box-shadow:0 0 0 2px #ffffff; }
.im-gauge__scale { display:flex; justify-content:space-between; font-size:.64rem; color:#6f6f6f; margin-top:.35rem; }
.im-gauge__opt { color:#0e6027; font-weight:600; }
.im-segbar { display:flex; height:8px; border-radius:999px; overflow:hidden; background:#e0e0e0; }
.im-segbar span { display:block; height:100%; }

/* ===== Badges de statut / niveau ===== */
.im-badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .55rem; border-radius:999px; font-size:.74rem; font-weight:600; }
.im-badge--ok   { background:#defbe6; color:#0e6027; }
.im-badge--warn { background:#fcf4d6; color:#8a6500; }
.im-badge--crit { background:#fff1f1; color:#a2191f; }
.im-badge--info { background:#edf5ff; color:#0043ce; }
.im-badge--muted{ background:#f4f4f4; color:#6f6f6f; }

/* ===== Pastilles de statut global (en-tête) ===== */
.im-pills { display:flex; gap:.4rem; flex-wrap:wrap; }
.im-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .65rem; border-radius:999px; font-size:.78rem; font-weight:600; }
.im-pill--ok   { background:#defbe6; color:#0e6027; }
.im-pill--warn { background:#fcf4d6; color:#8a6500; }
.im-pill--crit { background:#fff1f1; color:#a2191f; }
.im-pill--info { background:#edf5ff; color:#0043ce; }
.im-pill .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }

/* ===== Bandeau de référence de norme (type ASHRAE / SLA) ===== */
.im-ref { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin:0 0 1.5rem; padding:.55rem .85rem; background:#edf5ff; border:1px solid #a6c8ff; border-radius:8px; color:#0043ce; font-size:.82rem; line-height:1.4; }
.im-ref > i { color:#0f62fe; }
.im-ref strong { color:#161616; }
.im-ref b { color:#161616; }

/* ===== KPI à barre d'accent d'état ===== */
.im-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.im-kpi { position:relative; background:#ffffff; border:1px solid #e0e0e0; border-radius:12px; padding:1.4rem 1.5rem 1.4rem 1.7rem; display:flex; align-items:center; gap:1.1rem; overflow:hidden; transition:box-shadow .15s ease, transform .15s ease; }
.im-kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:#c6c6c6; }
.im-kpi.im-ok::before   { background:#0e6027; }
.im-kpi.im-warn::before { background:#8a6500; }
.im-kpi.im-crit::before { background:#da1e28; }
.im-kpi.im-info::before { background:#0f62fe; }
.im-kpi:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(16,22,26,.10); }
.im-kpi__icon { width:44px; height:44px; border-radius:10px; display:grid; place-items:center; font-size:1.4rem; background:#f4f4f4; color:#525252; flex:0 0 auto; }
.im-kpi__l { font-size:.72rem; color:#525252; font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin:0 0 .35rem; }
.im-kpi__v { font-size:2rem; font-weight:700; color:#161616; margin:0; line-height:1; font-variant-numeric:tabular-nums; }

/* ===== Panneau de diagnostic ===== */
.im-diag { border:1px solid #e0e0e0; border-left:4px solid #6f6f6f; border-radius:12px; padding:1.25rem 1.4rem; margin:0 0 1.5rem; background:#ffffff; box-shadow:0 1px 2px rgba(16,22,26,.06); }
.im-diag.im-ok   { border-left-color:#0e6027; }
.im-diag.im-warn { border-left-color:#8a6500; }
.im-diag.im-crit { border-left-color:#da1e28; }
.im-diag__head { display:flex; align-items:center; gap:.85rem; margin-bottom:1rem; }
.im-diag__badge { width:42px; height:42px; border-radius:10px; display:grid; place-items:center; font-size:1.2rem; flex:0 0 auto; }
.im-diag.im-ok   .im-diag__badge { background:#defbe6; color:#0e6027; }
.im-diag.im-warn .im-diag__badge { background:#fcf4d6; color:#8a6500; }
.im-diag.im-crit .im-diag__badge { background:#fff1f1; color:#da1e28; }
.im-diag__head h3 { margin:0; font-size:1.05rem; color:#161616; font-weight:600; }
.im-diag__head p { margin:.1rem 0 0; font-size:.85rem; color:#525252; font-weight:600; }
.im-diag__readout { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.6rem; margin-bottom:1rem; }
.im-ro { border:1px solid #e0e0e0; border-radius:8px; padding:.55rem .7rem; background:#f4f4f4; }
.im-ro__n { display:block; font-size:.7rem; font-weight:600; color:#525252; text-transform:uppercase; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.im-ro__v { font-size:1.05rem; font-weight:700; color:#161616; font-variant-numeric:tabular-nums; }
.im-ro__m { display:block; font-size:.72rem; color:#6f6f6f; margin-top:.1rem; }
.im-diag__none { display:flex; align-items:center; gap:.5rem; color:#0e6027; font-weight:600; font-size:.9rem; background:#defbe6; border:1px solid #a7f0ba; border-radius:8px; padding:.7rem .85rem; }
.im-diag__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.im-item { border:1px solid #e0e0e0; border-left-width:4px; border-radius:8px; padding:.7rem .85rem; background:#fff; }
.im-item.im-warn { border-left-color:#f1c21b; background:#fcf4d6; }
.im-item.im-crit { border-left-color:#da1e28; background:#fff1f1; }
.im-item__head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; color:#161616; font-size:.92rem; margin-bottom:.35rem; }
.im-sev { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.12rem .45rem; border-radius:999px; }
.im-sev--warn { background:#f1c21b; color:#161616; }
.im-sev--crit { background:#da1e28; color:#ffffff; }
.im-item__detail { display:flex; flex-direction:column; gap:.2rem; font-size:.82rem; color:#525252; }
.im-item__detail i { margin-right:.25rem; }
.im-item__cause i { color:#6f6f6f; }
.im-item__reco i { color:#0f62fe; }

/* ===== Bouton d'export de rapport ===== */
.im-report-btn { display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .9rem; border:1px solid #0f62fe; border-radius:999px; background:#0f62fe; color:#fff; font-size:.82rem; font-weight:600; cursor:pointer; transition:background .15s, box-shadow .15s; }
.im-report-btn:hover { background:#0353e9; box-shadow:0 2px 6px rgba(16,22,26,.14); }
.im-report-btn:disabled { opacity:.65; cursor:default; }
.im-report-btn:focus-visible { outline:2px solid #0f62fe; outline-offset:2px; }

@media (prefers-reduced-motion: reduce) {
    .im-card, .im-kpi { transition:none !important; }
    .im-card:hover, .im-kpi:hover { transform:none !important; }
}