/* ===== Grille des matchs responsive ===== */
.vmix-matches {
  background:#0f1115; color:#eaeaea;
  border:1px solid #1d2230; border-radius:14px; padding:14px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* Toolbar */
.vmix-matches__toolbar{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.vmix-matches__toolbar .left{ display:flex; gap:8px; flex-wrap:wrap; }
.vmix-matches__toolbar .right{ display:flex; gap:8px; }
.vmix-matches input[type="text"], .vmix-matches select{
  background:#151820; border:1px solid #2a2e3a; color:#fff; border-radius:8px; padding:8px 10px; min-height:38px;
}
.vmix-matches .btn{ background:#c62828; color:#000; border:none; border-radius:10px; padding:8px 12px; font-weight:800; cursor:pointer; }
.vmix-matches .btn.ghost{ background:#1a1d26; color:#cbd2e0; }

/* ===== Tableau (desktop) ===== */
.vmix-table-wrap{ position:relative; overflow:auto; border-radius:10px; border:1px solid #1d2230; }
.vmix-table.matches{
  width:100%;
  border-collapse:separate; border-spacing:0;
  min-width: 900px;             /* ← garde une largeur confortable */
}
.vmix-table.matches thead th{
  position:sticky; top:0;
  background:#161a23; color:#eaeaea; z-index:1;
  text-align:left; padding:10px; border-bottom:1px solid #1d2230; font-weight:700; white-space:nowrap;
}
.vmix-table.matches tbody td{
  padding:10px; border-bottom:1px solid #1d2230; vertical-align:middle;
  white-space:nowrap;            /* ← pas de retour à la ligne */
}
.vmix-table.matches tbody tr:hover{ background:#12151c; }
.vmix-table.matches th[data-sort]{ cursor:pointer; }
.vmix-table.matches th[data-sort]:after{ content:"⇅"; opacity:.4; margin-left:6px; font-size:.9em; }
.vmix-table.matches th[data-sort].asc:after{ content:"▲"; opacity:.9; }
.vmix-table.matches th[data-sort].desc:after{ content:"▼"; opacity:.9; }
.vmix-table .loading{ text-align:center; color:#9aa3b2; }

/* Colonne Sets : tronque proprement si trop long (scroll existe si besoin) */
.vmix-table.matches .col-sets{
  max-width: 420px;              /* largeur max lisible */
  overflow: hidden;
  text-overflow: ellipsis;       /* … si ça dépasse */
}

/* Badges */
.badge-win{ background:#14361f; color:#b7ffcd; border:1px solid #1c6b2e; padding:2px 8px; border-radius:999px; font-weight:800; }
.pill-court{
  display:inline-block; padding:2px 8px; border-radius:999px; margin-right:6px;
  background:#1a1d26; color:#9fb3ff; border:1px solid #2a3350; font-weight:700; font-size:.8em;
}

/* Pager */
.vmix-pager{ display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-top:12px; }
.vmix-pager .btn{ padding:6px 10px; border-radius:8px; }
#vmxPage{ opacity:.85; }

/* ===== Cartes (mobile / viewport compact) ===== */
#vmxBodyCards{ display:none; }

@media (max-width:900px){        /* ← bascule plus tôt en cartes */
  .vmix-table-wrap { display:none; }
  #vmxBodyCards{ display:grid; gap:10px; }

  .vmix-card {
    background:#151820; border:1px solid #2a2e3a; border-radius:10px;
    padding:10px 12px; display:flex; flex-direction:column; gap:4px;
  }
  .vmix-card-header { display:flex; justify-content:space-between; align-items:center; }
  .vmix-card-header .pill-court { font-size:.8em; padding:2px 6px; }
  .vmix-card-teams { display:flex; flex-direction:column; gap:2px; }
  .vmix-card-team { display:flex; justify-content:flex-start; align-items:center; gap:6px; }
  .vmix-card-team .name{ display:inline-flex; align-items:center; gap:6px; }
  .vmix-card-team .name .badge-win{
    margin-left:6px; padding:2px 6px; border-radius:6px;
    background:#16a34a; color:#fff; border:none; font-weight:700; font-size:.85em;
  }
  .vmix-card-sets { font-size:.9em; color:#9ea7bb; margin-top:2px; }
}

/* Ultra compact */
@media (max-width:380px){
  .vmix-matches input[type="text"], .vmix-matches select{ padding:6px 8px; min-height:34px; }
  .vmix-matches .btn{ padding:6px 10px; }
}
#vmxExport { display:none !important; }
/* ===== Mobile/responsive fixes for matches table ===== */

.vmix-table-wrap{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;    /* allow horizontal scroll if needed on tiny screens */
  -webkit-overflow-scrolling: touch;
}

.vmix-table.matches{
  width: 100%;
  min-width: 520px;    /* give columns some breathing room, but allow wrap to scroll */
  border-collapse: collapse;
}

.vmix-table.matches th,
.vmix-table.matches td{
  padding: 10px 12px;
  white-space: nowrap; /* keep set strings on one line; wrapper can scroll horizontally */
}

@media (max-width: 420px){
  .vmix-table.matches{
    min-width: 460px;  /* a bit narrower for very small phones */
  }
}

/* ensure the wrapper blocks don't clip the table */
.vmix-matches,
.vmix-matches .vmix-table-wrap{
  overflow: visible;
}

/* on mobile, tighten the toolbar paddings */
@media (max-width: 480px){
  .vmix-matches__toolbar{
    gap: 10px;
  }
  .vmix-matches__toolbar .left{
    gap: 8px;
  }
  .vmix-matches__toolbar input,
  .vmix-matches__toolbar select{
    width: 100%;
  }
}