/* =============================================================================
 * admin-cockpit.css — Cockpit du tableau de bord — 2026-08-03
 *
 * Bandeau « A traiter aujourd'hui » et rappels de la console.
 * S'exprime UNIQUEMENT avec les jetons du theme metallique sombre
 * (admin-metallic-dark.css) : aucune couleur en dur, aucune classe
 * Bootstrap claire, pour que l'ensemble reste coherent en sombre.
 * ============================================================================= */

/* ---------- Bandeau « A traiter aujourd'hui » ---------- */
.mt-todo {
    background: var(--mt-surf-panel, linear-gradient(180deg, #151c28 0%, #0a101a 100%));
    border: 1px solid var(--mt-line, rgba(255, 255, 255, .06));
    border-radius: 14px;
    padding: 18px 20px 20px;
    margin-bottom: 24px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px rgba(0, 0, 0, .35);
}

.mt-todo__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mt-line, rgba(255, 255, 255, .06));
}

.mt-todo__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--mt-text-0, #f1f5f9);
}
.mt-todo__title i { color: var(--mt-copper-300, #d9966b); margin-right: 6px; }

.mt-todo__meta {
    font-size: .74rem;
    color: var(--mt-text-3, #64748b);
}

/* ---------- Grille de tuiles ---------- */
.mt-todo__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 1200px) { .mt-todo__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .mt-todo__grid { grid-template-columns: 1fr; } }

.mt-tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 15px 16px 13px;
    border-radius: 11px;
    background: var(--mt-surf-card, linear-gradient(180deg, #1b2230 0%, #10151f 100%));
    border: 1px solid var(--mt-line, rgba(255, 255, 255, .06));
    border-left: 3px solid var(--mt-chrome-500, #5a6474);
    text-decoration: none;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.mt-tile:hover,
.mt-tile:focus-visible {
    transform: translateY(-2px);
    text-decoration: none;
    border-color: var(--mt-chrome-400, #7b8594);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
.mt-tile:focus-visible {
    outline: 2px solid var(--mt-electric, #7dd3fc);
    outline-offset: 2px;
}

.mt-tile__label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--mt-text-3, #64748b);
}
.mt-tile__value {
    font-size: 1.85rem;
    font-weight: 650;
    line-height: 1.1;
    color: var(--mt-text-0, #f1f5f9);
}
.mt-tile__value small {
    font-size: .8rem;
    font-weight: 400;
    color: var(--mt-text-2, #94a3b8);
    margin-left: 4px;
}
.mt-tile__sub {
    font-size: .8rem;
    color: var(--mt-text-2, #94a3b8);
}
.mt-tile__cta {
    margin-top: 8px;
    font-size: .78rem;
    color: var(--mt-electric, #7dd3fc);
    opacity: .85;
}
.mt-tile:hover .mt-tile__cta { opacity: 1; }

/* Accent de gauche selon la nature de la tuile.
   On ne colorie pas le fond : sur un theme sombre, un liseré suffit
   a hierarchiser sans agresser l'oeil. */
.mt-tile.is-action { border-left-color: var(--mt-copper-500, #b8733a); }
.mt-tile.is-gain   { border-left-color: #3f9d6d; }
.mt-tile.is-alerte { border-left-color: #b4453c; }
.mt-tile.is-ok     { border-left-color: #3f9d6d; }

/* ---------- Note d'anomalie ---------- */
.mt-todo__note {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 9px;
    background: var(--mt-surf-inset, linear-gradient(180deg, #0e141e 0%, #151d2a 100%));
    border: 1px solid var(--mt-line, rgba(255, 255, 255, .06));
    border-left: 3px solid var(--mt-copper-500, #b8733a);
    font-size: .82rem;
    color: var(--mt-text-2, #94a3b8);
    text-decoration: none;
}
.mt-todo__note:hover { color: var(--mt-text-1, #cbd5e1); text-decoration: none; }
.mt-todo__note i { color: var(--mt-copper-300, #d9966b); }
.mt-todo__note strong { color: var(--mt-electric, #7dd3fc); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
    .mt-tile { transition: none; }
    .mt-tile:hover { transform: none; }
}

/* ---------- Barre d'outils du tableau de bord ---------- */
/* Remplace une bande pleine largeur qui ne portait qu'un bouton. */
.mt-outils {
    display: flex;
    justify-content: flex-end;
    margin: -18px 0 8px;
}
.mt-outils .btn {
    background: var(--mt-surf-btn, rgba(255, 255, 255, .06));
    border: 1px solid var(--mt-line, rgba(255, 255, 255, .06));
    color: var(--mt-text-2, #94a3b8);
    font-size: .82rem;
    padding: .35rem .8rem;
}
.mt-outils .btn:hover {
    background: var(--mt-surf-btn-hover, rgba(255, 255, 255, .1));
    color: var(--mt-text-0, #f1f5f9);
}

/* ---------- Bloc « Top produits » sans vente ---------- */
/* Quand il n'y a rien a montrer, il cede la place aux alertes plutot que
   d'occuper la moitie de l'ecran pour afficher « Aucune vente recente ». */
#admKpiDashboard.kpi-inactif .col-lg-7 { display: none; }
#admKpiDashboard.kpi-inactif .col-lg-5 { flex: 0 0 100%; max-width: 100%; }
#admKpiDashboard.kpi-inactif #admKpiAlerts { column-count: 2; column-gap: 14px; }
@media (max-width: 900px) {
    #admKpiDashboard.kpi-inactif #admKpiAlerts { column-count: 1; }
}

/* =============================================================================
 * Fiabilite des catalogues fournisseurs — 2026-08-12
 *
 * Repond a deux questions que la console ne traitait pas : a quand remonte la
 * derniere synchronisation de chaque fournisseur, et peut-on se fier aux
 * donnees qui en sortent. Meme grammaire visuelle que .mt-todo, uniquement
 * avec les jetons --mt-*.
 * ============================================================================= */
.mt-sante {
    background: var(--mt-surf-panel, linear-gradient(180deg, #151c28 0%, #0a101a 100%));
    border: 1px solid var(--mt-line, rgba(255, 255, 255, .06));
    border-radius: 14px;
    padding: 18px 20px 14px;
    margin-bottom: 24px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px rgba(0, 0, 0, .35);
}

.mt-sante__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mt-line, rgba(255, 255, 255, .06));
}

.mt-sante__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--mt-text-0, #f1f5f9);
}
.mt-sante__title i { color: var(--mt-copper-300, #d9966b); margin-right: 6px; }

/* ---------- Indice de confiance ---------- */
.mt-sante__indice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--mt-line, rgba(255, 255, 255, .08));
    background: var(--mt-surf-1, rgba(255, 255, 255, .03));
}
.mt-sante__indice-valeur {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.mt-sante__indice-valeur small { font-size: .9rem; font-weight: 600; margin-left: 1px; }
.mt-sante__indice-label {
    font-size: .78rem;
    line-height: 1.3;
    color: var(--mt-text-2, #94a3b8);
}
.mt-sante__indice-label small { font-size: .72rem; opacity: .8; }

.mt-sante__indice--ok        { border-color: rgba(52, 199, 89, .35); }
.mt-sante__indice--ok        .mt-sante__indice-valeur { color: #4ade80; }
.mt-sante__indice--attention { border-color: rgba(255, 179, 64, .35); }
.mt-sante__indice--attention .mt-sante__indice-valeur { color: #fbbf24; }
.mt-sante__indice--critique  { border-color: rgba(255, 99, 99, .38); }
.mt-sante__indice--critique  .mt-sante__indice-valeur { color: #f87171; }

/* ---------- Tableau ---------- */
/* Le tableau defile horizontalement plutot que de faire deborder la page :
   six colonnes ne tiennent pas sur un ecran etroit. */
.mt-sante__wrap { overflow-x: auto; }

.mt-sante__table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: .84rem;
}
.mt-sante__table thead th {
    text-align: left;
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--mt-text-2, #94a3b8);
    padding: 6px 10px;
    border-bottom: 1px solid var(--mt-line, rgba(255, 255, 255, .08));
    white-space: nowrap;
}
.mt-sante__table tbody th,
.mt-sante__table tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--mt-line, rgba(255, 255, 255, .05));
    color: var(--mt-text-1, #cbd5e1);
    vertical-align: top;
}
.mt-sante__table tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--mt-text-0, #f1f5f9);
    white-space: nowrap;
}
.mt-sante__table tbody tr:last-child th,
.mt-sante__table tbody tr:last-child td { border-bottom: 0; }
.mt-sante__table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Liseré de gauche : l'état se lit avant même de parcourir la ligne. */
.mt-sante__table tbody tr.is-attention th { box-shadow: inset 3px 0 0 #fbbf24; }
.mt-sante__table tbody tr.is-critique  th { box-shadow: inset 3px 0 0 #f87171; }
.mt-sante__table tbody tr.is-ok        th { box-shadow: inset 3px 0 0 rgba(74, 222, 128, .5); }

.mt-sante__scraper,
.mt-sante__age,
.mt-sante__motif {
    display: block;
    font-size: .72rem;
    font-weight: 400;
    color: var(--mt-text-2, #94a3b8);
    margin-top: 2px;
}
.mt-sante__jamais { color: #f87171; font-weight: 600; }

/* ---------- Pastilles d'etat ---------- */
/* Fond translucide + texte clair : contraste conforme AA sur le fond sombre,
   sans reprendre les .badge Bootstrap qui sont concus pour un fond clair. */
.mt-sante__badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}
.mt-sante__badge--ok        { background: rgba(52, 199, 89, .16);  color: #6ee7a0; border-color: rgba(52, 199, 89, .35); }
.mt-sante__badge--attention { background: rgba(255, 179, 64, .16); color: #fcd34d; border-color: rgba(255, 179, 64, .35); }
.mt-sante__badge--critique  { background: rgba(255, 99, 99, .16);  color: #fca5a5; border-color: rgba(255, 99, 99, .38); }

/* ---------- Pied ---------- */
.mt-sante__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--mt-line, rgba(255, 255, 255, .06));
    font-size: .74rem;
    color: var(--mt-text-2, #94a3b8);
}
.mt-sante__foot a { color: var(--mt-copper-300, #d9966b); text-decoration: none; font-weight: 600; }
.mt-sante__foot a:hover { text-decoration: underline; }

/* ---------- Dernier audit automatique des collectes (2026-08-19) ---------- */
.mt-audit {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: .78rem;
    line-height: 1.45;
}
.mt-audit i { font-size: 1rem; margin-top: 1px; flex: 0 0 auto; }
.mt-audit__corps { display: flex; flex-direction: column; gap: 2px; }
.mt-audit__titre { font-weight: 600; }
.mt-audit__titre small { font-weight: 400; opacity: .75; }
.mt-audit__detail { color: var(--mt-text-2, #94a3b8); }
.mt-audit__detail em { display: block; margin-top: 3px; opacity: .85; }
.mt-audit--ok        { background: rgba(52, 199, 89, .10);  border-color: rgba(52, 199, 89, .28);  color: #6ee7a0; }
.mt-audit--attention { background: rgba(255, 179, 64, .10); border-color: rgba(255, 179, 64, .30); color: #fcd34d; }
.mt-audit--critique  { background: rgba(255, 99, 99, .10);  border-color: rgba(255, 99, 99, .32);  color: #fca5a5; }

@media (max-width: 640px) {
    .mt-audit { flex-direction: column; }
}

@media (max-width: 640px) {
    .mt-sante__head { flex-direction: column; align-items: flex-start; }
    .mt-sante__indice { width: 100%; }
}