/* =========================================
  PARTIDAS (Premium UI) — APP_NAME
   Theme-aware: body.theme-light (claro) e o resto (escuro)
   Requer: ui-kit.css / premium.css
========================================= */

:root{
  --p-radius: var(--radius, 18px);
  --p-max: 1100px;
  --p-gold: var(--gold, #facc15);
}

/* wrapper */
.sbb-wrap{
  max-width: var(--p-max);
  margin: 22px auto 50px;
  padding: 0 18px;
}

/* =========================================================
   HERO
========================================================= */
.matches-hero{
  position: relative;
  border-radius: calc(var(--p-radius) + 6px);
  overflow: hidden;
  isolation: isolate;
}

/* fundo “glow” */
.matches-hero-bg{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 320px at 15% 10%, rgba(250,204,21,0.18), transparent 55%),
    radial-gradient(900px 380px at 88% 18%, rgba(59,130,246,0.18), transparent 55%),
    radial-gradient(800px 320px at 50% 120%, rgba(99,102,241,0.16), transparent 55%);
  pointer-events:none;
  z-index: 0;
}

/* overlay varia por tema */
.matches-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 1;
}

/* conteúdo acima */
.matches-hero-inner{
  position: relative;
  z-index: 2;
  padding: 20px;
  display: grid;
  grid-template-columns: 1.25fr;
  gap: 16px;
}

.matches-hero-title .kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 8px;
}

.k-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--p-gold), rgba(250,204,21,.2));
}

/* =========================================================
   STATS
========================================================= */
.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}

.stat{
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 120px;
}

.stat-label{
  display:block;
  font-size: 12px;
}

.stat-value{
  display:block;
  margin-top: 2px;
  font-weight: 800;
  font-size: 18px;
}

/* =========================================================
   TOOLBAR / SEARCH
========================================================= */
.matches-toolbar{
  margin-top: 10px;
  padding-top: 14px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.search{
  display:flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

.search-field{
  flex: 1;
  min-width: 260px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 0 12px;
  border-radius: 14px;
}

.search-field input{
  flex:1;
  border:0;
  outline:none;
  background: transparent;
  font-size: 14px;
  padding: 12px 0;
}

.search-field .clear{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  text-decoration:none;
}

.btn.btn-primary{
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
  cursor: pointer;
}

.filters{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  font-size: 13px;
}

.chipx{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 999px;
  text-decoration:none;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}

.chipx:hover{ transform: translateY(-1px); }

/* =========================================================
   PANEL + HEADER
========================================================= */
.matches-panel{
  margin-top: 16px;
  border-radius: calc(var(--p-radius) + 6px);
  overflow: hidden;
}

.panel-head{
  padding: 16px 18px;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.panel-head h2{
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.panel-head .sub{
  margin-top: 6px;
  font-size: 13px;
}

.pill-mini{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  text-decoration:none;
}

.pill-mini--x{ cursor:pointer; }
.pill-mini--x .fa-xmark{ opacity: .75; }
.pill-mini--x:hover .fa-xmark{ opacity: 1; }

.badge-soft{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 13px;
}

/* =========================================================
   GRID CARDS (lista real)
========================================================= */
.matches-grid{
  padding: 16px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.match-card{
  position: relative;
  display:block;
  text-decoration:none;
  border-radius: 18px;
  overflow:hidden;
  transition: transform .16s ease, border-color .16s ease, filter .16s ease;
}

.match-card:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
}

.mc-top{
  padding: 14px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.mc-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  box-shadow: 0 14px 30px rgba(2,6,23,.20);
}

.mc-title{ flex:1; min-width: 0; }

.mc-id{
  display:flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.id-label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}

.id-value{
  font-weight: 900;
  font-size: 14px;
  overflow:hidden;
  text-overflow: ellipsis;
}

.mc-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
}

.meta-item{
  display:inline-flex;
  gap: 8px;
  align-items:center;
}

.meta-pill{
  padding: 5px 9px;
  border-radius: 999px;
}

.mc-cta{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.mc-bottom{
  padding: 12px 14px 14px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items:center;
  font-size: 12px;
}

/* Players block and actions alignment for consistent markup */
.mc-players{ flex: 1; }
.mc-players .team{ font-size:13px; color:var(--p-muted); margin:0 0 6px 0; }
.mc-players .team:last-child{ margin-bottom:0 }
.mc-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:6px }
.mc-cta{ width:38px; height:38px; border-radius:14px; display:grid; place-items:center }

/* Team swatch + label (used also in partida-detail) */
.mc-players .team{ display:flex; align-items:center; gap:10px; }
.mc-players .team .team-wrap{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; }
.mc-players .team-swatch{ width:18px; height:12px; border-radius:4px; display:inline-block; flex:0 0 18px; }
.mc-players .team-swatch.red{ background: var(--team-red, #ef4444); }
.mc-players .team-swatch.blue{ background: var(--team-blue, #3b82f6); }
.mc-players .team-label{ font-weight:700; font-size:13px; color:var(--p-muted); }
.mc-players .team-players{ margin-left:8px; color:var(--p-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.mc-glow{
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 0 0, rgba(250,204,21,0.20), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(59,130,246,0.18), transparent 55%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events:none;
}

.match-card:hover .mc-glow{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   PAGER
========================================================= */
.pager{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content: center;
  padding: 16px;
  flex-wrap: wrap;
}

.pg-btn{
  display:inline-flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  user-select:none;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}

.pg-btn:hover{ transform: translateY(-1px); }

.pg-btn.disabled{
  pointer-events:none;
  opacity: .45;
}

.pg-mid{ font-size: 13px; }

/* =========================================================
   EMPTY
========================================================= */
.empty{
  padding: 26px 18px;
  text-align:center;
}

.empty-ico{
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  border-radius: 18px;
  display:grid;
  place-items:center;
}

.empty h3{ margin: 10px 0 0; letter-spacing: -0.01em; }
.empty p{ margin: 8px auto 0; max-width: 56ch; font-size: 13px; line-height: 1.5; }
.empty-actions{ display:flex; justify-content:center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.empty-actions a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  text-decoration:none;
  white-space:nowrap;
}

/* =========================================================
   THEME: DARK (qualquer coisa que NÃO seja theme-light)
========================================================= */
body:not(.theme-light) .matches-hero{
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 60px rgba(2,6,23,.45);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

body:not(.theme-light) .matches-hero::after{
  background: linear-gradient(180deg, rgba(3,6,18,.70), rgba(3,6,18,.52));
}

body:not(.theme-light) .matches-hero-bg{
  opacity: .55;
  filter: blur(2px) saturate(.95);
}

body:not(.theme-light) .matches-hero-title .kicker{ color: rgba(226,232,240,.78); }
body:not(.theme-light) .matches-hero-title h1{ color: rgba(255,255,255,.96); text-shadow: 0 2px 16px rgba(0,0,0,.55); }
body:not(.theme-light) .matches-hero-title p{ color: rgba(226,232,240,.82); }

body:not(.theme-light) .stat{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(2,6,23,.36);
  backdrop-filter: blur(8px);
}
body:not(.theme-light) .stat-label{ color: rgba(226,232,240,.70); }
body:not(.theme-light) .stat-value{ color: rgba(255,255,255,.94); }

body:not(.theme-light) .matches-toolbar{ border-top: 1px solid rgba(255,255,255,0.08); }
body:not(.theme-light) .search-field{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(2,6,23,.44);
}
body:not(.theme-light) .search-field i{ color: rgba(226,232,240,.78); }
body:not(.theme-light) .search-field input{ color: rgba(255,255,255,.92); }
body:not(.theme-light) .search-field input::placeholder{ color: rgba(226,232,240,.55); }
body:not(.theme-light) .search-field .clear{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: rgba(226,232,240,.88);
}
body:not(.theme-light) .search-field .clear:hover{ background: rgba(255,255,255,0.05); }

body:not(.theme-light) .filters{ color: rgba(226,232,240,.72); }
body:not(.theme-light) .chipx{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(2,6,23,.38);
  color: rgba(226,232,240,.88);
}
body:not(.theme-light) .chipx:hover{ border-color: rgba(250,204,21,.24); background: rgba(2,6,23,.55); }

body:not(.theme-light) .matches-panel{
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  box-shadow: 0 16px 50px rgba(2,6,23,.35);
}
body:not(.theme-light) .panel-head{
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(520px 160px at 10% 0%, rgba(250,204,21,0.12), transparent 65%),
    rgba(255,255,255,0.02);
}
body:not(.theme-light) .panel-head h2{ color: rgba(255,255,255,.92); }
body:not(.theme-light) .panel-head .sub{ color: rgba(226,232,240,.72); }
body:not(.theme-light) .pill-mini{
  border: 1px solid rgba(250,204,21,0.18);
  background: rgba(250,204,21,0.10);
  color: rgba(226,232,240,.90);
}
body:not(.theme-light) .badge-soft{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(2,6,23,.34);
  color: rgba(226,232,240,.86);
}

body:not(.theme-light) .match-card{
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(500px 160px at 20% 0%, rgba(250,204,21,0.10), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
}
body:not(.theme-light) .match-card:hover{ border-color: rgba(250,204,21,0.22); }
body:not(.theme-light) .mc-icon{
  border: 1px solid rgba(250,204,21,0.18);
  background: rgba(250,204,21,0.10);
  color: rgba(226,232,240,.92);
}
body:not(.theme-light) .id-label{ color: rgba(226,232,240,.70); }
body:not(.theme-light) .id-value{ color: rgba(255,255,255,.92); }
body:not(.theme-light) .mc-meta{ color: rgba(226,232,240,.70); }
body:not(.theme-light) .meta-pill{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(2,6,23,.28);
  color: rgba(226,232,240,.84);
}
/* Use colors from ui-kit for .mc-cta in dark theme (no overrides here) */
body:not(.theme-light) .mc-bottom{
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(226,232,240,.80);
}

body:not(.theme-light) .pager{
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
body:not(.theme-light) .pg-btn{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(2,6,23,.30);
  color: rgba(226,232,240,.88);
}
body:not(.theme-light) .pg-btn:hover{
  border-color: rgba(250,204,21,.22);
  background: rgba(2,6,23,.48);
}
body:not(.theme-light) .pg-mid{ color: rgba(226,232,240,.72); }

body:not(.theme-light) .empty-ico{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(2,6,23,.32);
  color: rgba(226,232,240,.90);
}
body:not(.theme-light) .empty h3{ color: rgba(255,255,255,.92); }
body:not(.theme-light) .empty p{ color: rgba(226,232,240,.72); }

/* =========================================================
   THEME: LIGHT (body.theme-light)
========================================================= */
body.theme-light .matches-hero{
  border: 1px solid rgba(15,23,42,0.12);
  background: linear-gradient(180deg, #ffffff, #f6f7fb);
  box-shadow: 0 18px 50px rgba(15,23,42,.10);
}

body.theme-light .matches-hero::after{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}

body.theme-light .matches-hero-bg{
  opacity: .24;
  filter: blur(2px) saturate(.85);
}

body.theme-light .matches-hero-title .kicker{ color: rgba(71,85,105,.88); }
body.theme-light .matches-hero-title h1{ color: #0f172a; text-shadow: none; }
body.theme-light .matches-hero-title p{ color: rgba(71,85,105,.92); }

body.theme-light .stat{
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.92);
}
body.theme-light .stat-label{ color: rgba(71,85,105,.86); }
body.theme-light .stat-value{ color: #0f172a; }

body.theme-light .matches-toolbar{ border-top: 1px solid rgba(15,23,42,0.10); }
body.theme-light .search-field{
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.94);
}
body.theme-light .search-field i{ color: rgba(15,23,42,.55); }
body.theme-light .search-field input{ color: #0f172a; }
body.theme-light .search-field input::placeholder{ color: rgba(71,85,105,.65); }
body.theme-light .search-field .clear{
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.03);
  color: rgba(15,23,42,.70);
}
body.theme-light .search-field .clear:hover{ background: rgba(15,23,42,0.06); }

body.theme-light .filters{ color: rgba(71,85,105,.88); }
body.theme-light .chipx{
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.92);
  color: rgba(15,23,42,.92);
}
body.theme-light .chipx:hover{
  border-color: rgba(250,204,21,.35);
  background: rgba(255,255,255,1);
}

body.theme-light .matches-panel{
  border: 1px solid rgba(15,23,42,0.12);
  background: linear-gradient(180deg, #ffffff, #f7f8fc);
  box-shadow: 0 18px 50px rgba(15,23,42,.10);
}
body.theme-light .panel-head{
  border-bottom: 1px solid rgba(15,23,42,0.10);
  background:
    radial-gradient(520px 160px at 10% 0%, rgba(250,204,21,0.18), transparent 65%),
    rgba(255,255,255,0.70);
}
body.theme-light .panel-head h2{ color: #0f172a; }
body.theme-light .panel-head .sub{ color: rgba(71,85,105,.92); }
body.theme-light .pill-mini{
  border: 1px solid rgba(250,204,21,0.35);
  background: rgba(250,204,21,0.18);
  color: rgba(15,23,42,.92);
}
body.theme-light .badge-soft{
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.92);
  color: rgba(15,23,42,.82);
}

body.theme-light .match-card{
  border: 1px solid rgba(15,23,42,0.12);
  background:
    radial-gradient(520px 160px at 20% 0%, rgba(250,204,21,0.16), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.90));
}
body.theme-light .match-card:hover{ border-color: rgba(250,204,21,0.40); }
body.theme-light .mc-icon{
  border: 1px solid rgba(250,204,21,0.35);
  background: rgba(250,204,21,0.18);
  color: rgba(15,23,42,.86);
}
body.theme-light .id-label{ color: rgba(71,85,105,.86); }
body.theme-light .id-value{ color: #0f172a; }
body.theme-light .mc-meta{ color: rgba(71,85,105,.90); }
body.theme-light .meta-pill{
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.03);
  color: rgba(15,23,42,.78);
}
/* Use colors from ui-kit for .mc-cta in light theme (no overrides here) */
body.theme-light .mc-bottom{
  border-top: 1px solid rgba(15,23,42,0.10);
  color: rgba(71,85,105,.92);
}

body.theme-light .pager{
  border-top: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.70);
}
body.theme-light .pg-btn{
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.92);
  color: rgba(15,23,42,.85);
}
body.theme-light .pg-btn:hover{
  border-color: rgba(250,204,21,0.40);
  background: rgba(255,255,255,1);
}
body.theme-light .pg-mid{ color: rgba(71,85,105,.90); }

body.theme-light .empty-ico{
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.92);
  color: rgba(15,23,42,.80);
}
body.theme-light .empty h3{ color: #0f172a; }
body.theme-light .empty p{ color: rgba(71,85,105,.92); }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px){
  .matches-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .matches-hero-title h1{ font-size: 28px; }
  .search{ gap: 8px; }
  .btn.btn-primary{ width: 100%; justify-content:center; }
}

/* ====== Scouts styling ====== */
.tabpane[data-pane="scouts"] .glass-card{
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 14px;
}

.tabpane[data-pane="scouts"] .scout-player{
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
  margin-bottom: 12px;
}

.tabpane[data-pane="scouts"] .scout-name{
  font-weight: 800;
  color: var(--p-ink, #e8eefc);
  margin-bottom: 8px;
}

.tabpane[data-pane="scouts"] .scout-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.tabpane[data-pane="scouts"] .scout-metric{
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  padding: 8px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  min-height:56px;
  transition: transform .14s ease, box-shadow .14s ease;
}

.tabpane[data-pane="scouts"] .scout-meta{
  font-size:12px;
  color: var(--p-muted, rgba(226,232,240,0.72));
  display:flex;
  gap:6px;
  align-items:center;
}

.tabpane[data-pane="scouts"] .scout-index{
  background: rgba(0,0,0,0.12);
  padding: 2px 6px;
  border-radius:6px;
  font-weight:700;
  color:var(--p-ink, #e8eefc);
}

.tabpane[data-pane="scouts"] .scout-value{
  font-weight:900;
  font-size:16px;
  color: var(--p-ink, #e8eefc);
}

.tabpane[data-pane="scouts"] .scout-metric:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(2,6,23,0.18);
}

@media (max-width: 720px){
  .tabpane[data-pane="scouts"] .scout-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Two-column team layout for scouts */
.tabpane[data-pane="scouts"] .sc-columns {
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.tabpane[data-pane="scouts"] .sc-col {
  flex:1 1 50%;
  min-width:0;
}
.tabpane[data-pane="scouts"] .sc-col--red .sc-team-header { color: var(--team-red, #ef4444); }
.tabpane[data-pane="scouts"] .sc-col--blue .sc-team-header { color: var(--team-blue, #3b82f6); }
.tabpane[data-pane="scouts"] .sc-team-header {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  font-weight:800;
}
.tabpane[data-pane="scouts"] .sc-row {
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:10px;
  background: rgba(255,255,255,0.01);
  border:1px solid rgba(255,255,255,0.02);
}
.tabpane[data-pane="scouts"] .sc-row + .sc-row { margin-top:10px; }
.tabpane[data-pane="scouts"] .sc-row .cell { display:flex; align-items:center; gap:8px; }
.tabpane[data-pane="scouts"] .sc-row .cell.mdp { min-width:56px; text-align:right; font-weight:900; }
@media (max-width:720px){
  .tabpane[data-pane="scouts"] .sc-columns { flex-direction:column; }
}