/* ════════════════════════════════════════════════════════════════
   IT'S RUGBY — ARBITRE PAGE CSS
   Template-specific styles for the arbitre page
   ════════════════════════════════════════════════════════════════ */

/* ── ARBITRE-SPECIFIC STYLES ─────────────────────── */

/* Arbitre status layout */
#arbitre-status { display:flex; flex-wrap:wrap; gap:10px; }

/* Cartons dans l'historique des matchs (ex-styles inline du JS) */
.arb-card { display:inline-block; margin-left:3px; padding:1px 5px; font-size:9px; font-weight:900; color:#fff; vertical-align:middle; white-space:nowrap; }
.arb-card--cj { background:var(--yellow); }
.arb-card--cr { background:var(--red); }

/* Colonnes cartons du tableau de stats (ex-styles inline du JS) */
.data-table td.dt-cj { color:var(--yellow); font-weight:900; }
.data-table td.dt-cr { color:var(--red); font-weight:900; }

/* Bloc paywall en fin de liste d'historique */
.its-pw.arb-pw-inline { margin-top:8px; }

/* PALMARES (arbitre-specific variants) */
.palm-tag.silver { background:#e8ecef; color:#495057; border:1px solid #ced4da; }
.palm-tag.finalist { background:#e0e7ff; color:#3730a3; border:1px solid #a5b4fc; }

/* VERIFIED BADGE → itsrugby-common.css */

/* ITS Ads → itsrugby-common.css */

/* ── RESPONSIVE ─────────────────────── */

/* Hamburger : masque par defaut (desktop) */
.nav-hamburger { display:none; }

/* ── TABLETTE ≤1024px ── */
@media(max-width:1024px){
  .stat-kpi-grid,#stats-grid { grid-template-columns:repeat(3,1fr); }
}

/* ── MOBILE ≤768px ── */
@media(max-width:768px){

  /* Base */
  body { overflow-x:hidden; }
  .container { padding-left:14px; padding-right:14px; }

  /* Sections */
  .section { padding:18px 0; overflow:hidden; }
  .two-col { grid-template-columns:1fr; }

  /* KPI stats */
  .stat-kpi-grid,#stats-grid { grid-template-columns:repeat(2,1fr); }
  .stat-kpi { padding:10px; }
  .stat-kpi-val { font-size:20px; }
  .stat-kpi-lbl { font-size:9px; }

  /* Sous-onglets : scroll horizontal */
  .ps-tabs { display:flex;border:1px solid var(--border);background:var(--white);overflow-x:auto;margin-bottom:0; }
  .ps-tabs::-webkit-scrollbar { display:none; }
  .ps-tab { padding:9px 18px;font-size:12px;font-weight:700;color:var(--muted);background:var(--white);border:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;flex-shrink:0;cursor:pointer;transition:all .15s; }

  /* Filtres mobile */
  .inline-filters {
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:6px;
    padding:8px 0 12px;
    border-bottom:2px solid var(--border);
    margin-bottom:14px;
    overflow:hidden;
    max-width:100%;
  }
  .inline-filters-lbl { display:none; }
  .inline-filters .if-dd-wrap { display:none; }
  .filter-reset-btn {
    flex-shrink:0;
    margin-left:auto;
    font-size:9px;
    padding:4px 10px;
    height:30px;
    white-space:nowrap;
  }
  .mobile-filter-select {
    display:block;
    height:30px;
    padding:0 6px;
    font-size:11px;
    font-weight:700;
    color:var(--teal);
    border:1px solid var(--border);
    background:var(--white);
    cursor:pointer;
    border-radius:0;
    flex-shrink:0;
    max-width:140px;
    min-width:100px;
  }
  .mobile-filter-select:focus { outline:none; border-color:var(--teal); background:var(--sage-lt); }

  /* Tables */
  .tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .data-table { min-width:480px; font-size:11px; }
  .data-table th { padding:8px 10px; font-size:10px; }
  .data-table td { padding:8px 10px; }

  /* Match history rows */
  .mh-row { grid-template-columns:58px 1fr auto; font-size:11px; padding:8px 10px; gap:8px; }

  /* Media grid */
  .media-grid { grid-template-columns:1fr 1fr; }

  /* Nav-interne : masquée en mobile (cf. itsrugby-common.css) */
}

/* Selects mobiles : caches sur desktop */
.mobile-filter-select { display:none; }

/* Habillage → itsrugby-common.css */

/* ≤680 px : .data-table passe en liste de lignes (itsrugby-common.css). Le
   min-width:480px posé plus haut pour la version tableau (≤768) forçait alors des
   lignes de 480 px dans un écran de 360 → défilement latéral, chiffres coupés. */
@media (max-width:680px){
  .data-table:not(.data-table--compact) { min-width:0; }
}