/* --- Bouton Analyser dans la liste des matchs --- */
.bcmi-analyze-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .75rem;
  font-size:.9rem;
  line-height:1;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  cursor:pointer;
  transition:transform .06s ease, box-shadow .15s ease, background .2s ease;
  white-space: nowrap;
}
.bcmi-analyze-btn:hover{
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  transform:translateY(-1px);
}
.bcmi-analyze-btn:active{ transform:translateY(0); }
.bcmi-analyze-btn svg{ width:16px; height:16px; }

/* --- Modale --- */
/* Backdrop plein écran */
#bcmi-modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  z-index:9997;
}

/* Fenêtre modale */
#bcmi-modal{
  position:fixed;
  left:50%; transform:translateX(-50%);
  top:4vh;
  width:min(980px,92vw);
  max-height:92vh;
  background:#fff; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
  overflow:hidden;
  z-index:9998;
}

/* Header sticky : reste visible, avec bouton fermer accessible */
#bcmi-modal header{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px;
  background:#fff; border-bottom:1px solid #eee;
  font-weight:600;
}
#bcmi-modal .bcmi-close{
  appearance:none; border:0; border-radius:8px;
  padding:6px 10px; cursor:pointer;
  background:#e11d48; color:#fff; font-weight:700;
}
#bcmi-modal .bcmi-close:hover{ filter:brightness(.95); }

/* Corps scrollable */
#bcmi-modal .bcmi-body{
  padding:14px 16px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* Quand le modal est ouvert, on bloque le scroll de la page */
html.bcmi-locked,
body.bcmi-locked{
  overflow:hidden !important;
}

#bcmi-modal .bcmi-muted{ color:#666; font-size:.95rem; }
#bcmi-modal pre{
  white-space:pre-wrap;
  word-break:break-word;
  background:#fafafa;
  border:1px solid #eee;
  padding:10px; border-radius:8px;
  max-height:50vh; overflow:auto;
}

/* --- Bleu pour “Charger les matchs” --- */
.bcmi-primary{
  background:#1677ff !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 2px 0 rgba(5, 102, 245, .2) !important;
}
.bcmi-primary:hover{ filter:brightness(1.05); }

/* Cartes */
.bcmi-card{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px 14px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  margin:10px 0;
}
.bcmi-card.bcmi-accent{ border-color:#011AD3; }
.bcmi-card-title{
  font-weight:600; margin-bottom:8px;
}
.bcmi-list{ margin:0; padding-left:18px; }
.bcmi-list li{ margin:6px 0; }
.bcmi-sources{ margin:0; padding-left:18px; }
.bcmi-sources li{ margin:6px 0; }
.bcmi-muted{ color:#6b7280; }

/* Grille responsive 2 colonnes */
.bcmi-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width: 720px){
  .bcmi-grid{ grid-template-columns:1fr 1fr; }
}

/* Tables scrollables + indicateur scroll */
.bcmi-scroll-x{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
}

/* petit gradient + flèche pour suggérer le scroll sur mobile */
.bcmi-scroll-x::after{
  content:"⇢";
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  font-size:1rem;
  color:#9ca3af;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
}
@media (max-width: 768px){
  .bcmi-scroll-x::after{
    opacity:1;
  }
}

/* tableau interne */
.bcmi-table{
  width:100%;
  border-collapse:collapse;
  min-width:420px; /* force un peu le scroll sur petit écran */
}
.bcmi-table th,
.bcmi-table td{
  padding:6px 8px;
  border-bottom:1px solid #e5e7eb;
  font-size:.9rem;
  white-space:nowrap;
}
.bcmi-table th{
  text-align:left;
  background:#f9fafb;
  font-weight:600;
}
.bcmi-hl{
  background:#eff6ff;
}

/* Bouton "Rafraîchir (sans cache)" dans la modale */
.bcmi-force-btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-bottom:10px;
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  font-size:.85rem;
  cursor:pointer;
}
.bcmi-force-btn:hover{
  background:#eef2ff;
}

/* Listes cliquables du batch */
.bcmi-click-list{
  list-style:none;
  margin:0;
  padding:0;
}
.bcmi-click-list li{
  padding:6px 8px;
  border-radius:8px;
  cursor:pointer;
}
.bcmi-click-list li:hover{
  background:#f3f4f6;
}
.bcmi-badge{
  display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  border-radius:999px;
  font-size:.75rem;
  background:#e5e7eb;
}

/* =========================
   Mobile modal improvements
   ========================= */
@media (max-width: 768px) {
  #bcmi-modal-backdrop{
    background: rgba(0,0,0,.45);
  }

  #bcmi-modal{
    width: 95vw !important;
    height: 90vh !important;
    max-width: none;
    margin: 0;
    top: 5vh !important;
    left: 2.5vw !important;
    transform: none !important;
    display: flex;
    flex-direction: column;
  }

  #bcmi-modal header{
    flex: 0 0 auto;
    padding: 10px 14px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    border-bottom: 1px solid #eee;
  }

  #bcmi-modal .bcmi-close{
    width: 36px; height: 36px;
    line-height: 36px;
    font-size: 18px;
  }

  #bcmi-modal .bcmi-body{
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 16px;
  }

  .bcmi-grid{
    grid-template-columns:1fr;   /* cartes empilées */
    gap:10px;
  }

  .bcmi-card{
    padding:12px;
    margin:8px 0;
  }

  .bcmi-card-title{ font-size:1rem; }

  .bcmi-sources li a{
    word-break:break-word;
  }

  /* bouton Analyser plus confortable dans les cellules serrées */
  .bcmi-analyze-btn{
    padding:.4rem .65rem;
    font-size:.85rem;
  }
}