/* Shared styles for partidas list and partida detail */
:root{--pc-ava-size:36px;--pc-ava-radius:8px}
.player-link, .pm-player-link { display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; }
.mini-ava, .pm-head-ava { width:var(--pc-ava-size); height:var(--pc-ava-size); border-radius:var(--pc-ava-radius); overflow:hidden; flex:0 0 var(--pc-ava-size); background:var(--muted-bg, #f3f4f6); display:flex; align-items:center; justify-content:center; }
.mini-ava img, .pm-head-ava img { width:100%; height:100%; object-fit:cover; display:block; }
.mini-nick, .pm-player-name { display:inline-block; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.level-emoji-inline { display:inline-flex; align-items:center; justify-content:center; font-size:0.95rem; line-height:1; margin-right:6px; }
.player-time, .player-percent { font-weight:700; color:var(--muted); margin-left:auto; font-size:0.9rem; }
.cell.player { min-width:160px; }

/* compact row tuning */
.player-row, .pm-player-row { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; }
.player-row .meta, .pm-player-row .meta { margin-left:auto; display:flex; gap:8px; align-items:center; }

@media (max-width:520px){
  :root{--pc-ava-size:32px}
  .cell.player { min-width:120px; }
  .player-time, .player-percent { font-size:0.85rem }
}

/* Gentle theme-aware defaults */
body.theme-dark .player-row, body.theme-dark .pm-player-row { background:transparent }

/* Styles moved from partidas.ejs */
.matches-toolbar .filters{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.matches-toolbar .filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.matches-toolbar .filter-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.results-chip{padding:2px 4px;font-size:12px;background:transparent;border:0;color:rgba(0,0,0,0.6);border-radius:0}
.results-chip strong{font-weight:600}

/* Dark theme: ensure contrast */
body:not(.theme-light) .results-chip{ color: rgba(255,255,255,0.78); }
body:not(.theme-light) .results-chip strong{ color: rgba(255,255,255,0.95); font-weight:800; }
.panel-actions{display:flex;align-items:center}

/* Styles moved from partida-detail.ejs (modal/header/scoreboard/etc) */
/* Modal overflow fixes: constrain sheet height and force internal scrolling */
.sbb-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1200; }
.sbb-modal__sheet { width: min(1100px, 96%); max-width: 1100px; max-height: calc(100vh - 72px); overflow: hidden; box-sizing: border-box; border-radius: 12px; }
.sbb-modal__head { padding: 12px 18px; border-bottom: 1px solid rgba(0,0,0,0.06); background: var(--panel); display:flex; align-items:center; justify-content:space-between; gap:12px; }
/* Dark-theme fixes: keep header dark and readable. */
.theme-dark .sbb-modal__head,
html.theme-dark .sbb-modal__head,
body.theme-dark .sbb-modal__head,
.dark .sbb-modal__head,
html.dark .sbb-modal__head,
body.dark .sbb-modal__head,
.is-dark .sbb-modal__head,
html.is-dark .sbb-modal__head,
body.is-dark .sbb-modal__head,
[data-theme="dark"] .sbb-modal__head,
html[data-theme="dark"] .sbb-modal__head,
body[data-theme="dark"] .sbb-modal__head {
  background: #07111a !important;
  border-bottom-color: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.95) !important;
}

@media (prefers-color-scheme: dark) {
  .sbb-modal__head {
    background: #07111a !important;
    border-bottom-color: rgba(255,255,255,0.04) !important;
    color: rgba(255,255,255,0.95) !important;
  }
  .sbb-modal__head .pm-head-ava { background: rgba(255,255,255,0.03) !important; }
  .sbb-modal__head .scoreboard-compact { background: rgba(0,0,0,0.3) !important; color: #fff !important; }
  .sbb-modal__head .ghost { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
}

.sbb-modal__head.pm-dark {
  background: #07111a !important;
  border-bottom-color: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.95) !important;
}

.theme-dark .pm-head-ava, html.theme-dark .pm-head-ava, body.theme-dark .pm-head-ava,
.dark .pm-head-ava, html.dark .pm-head-ava, body.dark .pm-head-ava,
.is-dark .pm-head-ava, html.is-dark .pm-head-ava, body.is-dark .pm-head-ava,
[data-theme="dark"] .pm-head-ava, html[data-theme="dark"] .pm-head-ava, body[data-theme="dark"] .pm-head-ava {
  background: rgba(255,255,255,0.03) !important;
}

.theme-dark .pm-teams, .theme-dark .pm-team, .theme-dark .pm-score,
html.theme-dark .pm-teams, html.theme-dark .pm-team, html.theme-dark .pm-score,
body.theme-dark .pm-teams, body.theme-dark .pm-team, body.theme-dark .pm-score,
.dark .pm-teams, .dark .pm-team, .dark .pm-score,
html.dark .pm-teams, html.dark .pm-team, html.dark .pm-score,
body.dark .pm-teams, body.dark .pm-team, body.dark .pm-score,
.is-dark .pm-teams, .is-dark .pm-team, .is-dark .pm-score,
html.is-dark .pm-teams, html.is-dark .pm-team, html.is-dark .pm-score,
body.is-dark .pm-teams, body.is-dark .pm-team, body.is-dark .pm-score,
[data-theme="dark"] .pm-teams, [data-theme="dark"] .pm-team, [data-theme="dark"] .pm-score,
html[data-theme="dark"] .pm-teams, html[data-theme="dark"] .pm-team, html[data-theme="dark"] .pm-score,
body[data-theme="dark"] .pm-teams, body[data-theme="dark"] .pm-team, body[data-theme="dark"] .pm-score {
  color: rgba(255,255,255,0.9) !important;
}

/* Metric value visibility */
.pm-metric .m-value { font-weight:700; color: var(--muted-strong); }
.theme-dark .pm-metric .m-value, html.theme-dark .pm-metric .m-value, body.theme-dark .pm-metric .m-value,
.dark .pm-metric .m-value, html.dark .pm-metric .m-value, body.dark .pm-metric .m-value,
.is-dark .pm-metric .m-value, html.is-dark .pm-metric .m-value, body.is-dark .pm-metric .m-value,
[data-theme="dark"] .pm-metric .m-value, html[data-theme="dark"] .pm-metric .m-value, body[data-theme="dark"] .pm-metric .m-value {
  color: #cfe7ff !important;
}
.sbb-modal__body { padding: 14px 18px; overflow-y: auto; overflow-x: hidden; max-height: calc(100vh - 160px); box-sizing: border-box; }

/* MVP chip (inline next to player name) */
.chip-mvp { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:0.78rem; font-weight:600; background:linear-gradient(90deg,#ffd86b,#ffb86b); color:#07202a; margin-left:8px; }
.chip-mvp .fa-solid { font-size:0.78rem; }

/* Pior chip (inline next to player name) */
.chip-worst { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:0.78rem; font-weight:900; background:var(--hot); border:0; color:#fff; margin-left:8px; letter-spacing:0.2px; }

/* Header: avatar + title (fixed while body scrolls) */
.pm-headleft { display:flex; align-items:center; gap:12px; min-width:0; flex:0 0 auto; padding-left:18px; }
.pm-head-ava { width:72px; height:72px; border-radius:10px; overflow:hidden; background:var(--muted-bg); display:flex; align-items:center; justify-content:center; flex:0 0 72px; }
.pm-head-ava img { width:100%; height:100%; object-fit:cover; display:block; }
.pm-headleft h3 { margin:0; font-size:1.15rem; line-height:1.1; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.pm-headcenter { flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-width:0; margin-left:0; }
/* compact single-line teams/score */
.pm-teams { display:flex; align-items:center; gap:8px; font-weight:600; color:var(--muted-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.92rem; }
.pm-team { padding:2px 6px; border-radius:6px; background:transparent; font-size:0.92rem; color:var(--muted-strong); }
.pm-score { font-size:0.98rem; font-weight:700; min-width:64px; text-align:center; }

/* Make metric grid responsive and prevent long content from forcing horizontal scroll */
.pm-grid { display: grid; gap: 12px; width: 100%; box-sizing: border-box; grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Responsive fallback: allow more columns to flow, use smaller min to fit mobile */
@media (max-width: 1100px) {
  .pm-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
/* On narrow viewports prefer two columns for readability and compact cards */
@media (max-width: 720px) {
  /* Mobile: single column, metrics rendered in column-major order by JS */
  .pm-grid { grid-template-columns: repeat(1, 1fr); gap: 10px; }
  .pm-metric { padding: 10px; border-radius: 12px; }
}
/* Very small screens: single column */
@media (max-width: 420px) {
  .pm-grid { grid-template-columns: repeat(1, 1fr); }
}
.pm-metric { box-sizing: border-box; min-width: 0; overflow: hidden; }
.pm-metric .m-top { display:flex; align-items:center; gap:12px; justify-content:space-between; }
  .pm-metric .m-top > div:nth-child(2) { flex:1; min-width:0; }
  .pm-metric .m-value { white-space:nowrap; margin-left:12px; }
  .pm-headdate { flex:0 0 auto; font-size:0.82rem; color:var(--muted); padding-left:12px; padding-right:6px; }
.pm-metric .m-label { white-space:normal; word-break:break-word; overflow:visible; }
.pm-metric .m-top { display:flex; align-items:center; gap:10px; }
.pm-metric .m-top > div:nth-child(2) { flex:1; min-width:0; }
.pm-metric .m-value { margin-left:12px; flex:0 0 auto; align-self:center; white-space:nowrap; }
.pm-metric .m-sub { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:0.86rem; color:var(--muted); }

/* Ensure images never exceed container width */
.mini-ava img, .pm-player img { max-width:100%; height:auto; display:block; }

/* Misc scroll niceties */
.sbb-modal__body::-webkit-scrollbar { height: 8px; }
.sbb-modal__body { -webkit-overflow-scrolling: touch; }
    
/* Compact centered scoreboard tuned to the provided design */
.scoreboard-compact { display:inline-flex; align-items:center; gap:14px; padding:6px 12px; border-radius:12px; background:transparent; color:inherit; font-weight:800; box-shadow: none; border: none; }
/* adapt to light/dark themes for readability */
body.theme-light .scoreboard-compact,
.theme-light .scoreboard-compact {
  background: transparent; /* remove gray fill on light backgrounds */
  color: #07111a;
  border: 1px solid rgba(0,0,0,0.06); /* subtle outline to separate from bg */
}
body.theme-dark .scoreboard-compact,
.theme-dark .scoreboard-compact,
html.theme-dark .scoreboard-compact,
.dark .scoreboard-compact {
  background: rgba(0,0,0,0.5);
  color: #ffffff;
}
.scoreboard-compact .team-swatch { width:28px; height:22px; border-radius:6px; flex:0 0 28px; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18); display:inline-block; }
.scoreboard-compact .team-swatch.red { background:#ef7b70; }
.scoreboard-compact .team-swatch.blue { background:#4f9bff; }
.scoreboard-compact .score { display:flex; align-items:center; gap:10px; font-weight:900; color:inherit; }
.scoreboard-compact .score .num { font-size:1.1rem; line-height:1; min-width:18px; text-align:center; color: inherit; }
.scoreboard-compact .score .sep { display:inline-block; font-size:1.1rem; color:inherit; padding:0 8px; opacity:0.95; }
/* tighter look similar to attachment: thin padding, subtle rounded container */
.scoreboard-compact .team-label { font-size:0.95rem; font-weight:700; margin:6px 0 0 0; max-width:160px; white-space:normal; text-align:center; overflow:hidden; text-overflow:ellipsis; }
.scoreboard-compact .team-wrap { display:flex; align-items:center; gap:8px; min-width:80px; }
.scoreboard-compact .team-wrap { flex-direction:column; justify-content:center; text-align:center; }
/* allow long team names to wrap to two lines */
.scoreboard-compact .team-label { display:block; word-break:break-word; }
/* stack swatch above label */
.scoreboard-compact .team-wrap { flex-direction:column; justify-content:center; text-align:center; }
.scoreboard-compact .team-wrap .team-label { margin:6px 0 0 0; display:block; }
@media (max-width:520px){ .scoreboard-compact { padding:5px 8px; gap:8px; } .scoreboard-compact .score .num{ font-size:1rem; } .scoreboard-compact .team-swatch{ width:20px; height:16px; } .scoreboard-compact .team-label{ font-size:0.85rem; } }
/* matches-hero header-dark: dark background matching modal header */
.matches-hero.header-dark { background: #07111a; color: rgba(255,255,255,0.95); }
.matches-hero.header-dark .matches-hero-inner { color: inherit; }
.matches-hero.header-dark .md-score .scoreboard-compact { background: rgba(255,255,255,0.03); color: #fff; border: 1px solid rgba(255,255,255,0.04); }
.matches-hero.header-dark .md-sub, .matches-hero.header-dark .kicker, .matches-hero.header-dark .md-actions .chipx { color: rgba(255,255,255,0.85); }
.matches-hero.header-dark .chipx { background: rgba(255,255,255,0.04); color: #fff; border: 1px solid rgba(255,255,255,0.04); }
/* Modal-specific smaller scoreboard and responsive tweaks */
.sbb-modal__head .scoreboard-compact { padding:6px 8px; }
.sbb-modal__head .scoreboard-compact .score .num { font-size:0.95rem; }
.sbb-modal__head .scoreboard-compact .team-swatch { width:22px; height:18px; }
@media (max-width:520px){
  .sbb-modal__head { padding:10px 12px; }
  .sbb-modal__head .scoreboard-compact { padding:4px 6px; gap:6px; }
  .sbb-modal__head .scoreboard-compact .team-label { display:none; }
  .sbb-modal__head .scoreboard-compact .team-swatch { width:18px; height:14px; }
  .sbb-modal__head .scoreboard-compact .score .num { font-size:0.9rem; }
  .pm-head-ava { width:56px; height:56px; }
  .pm-player-name { font-size:1rem; }
  .pm-headcenter { justify-content:flex-end; }
}
/* Modal header player centering and stats */
.pm-player-link{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.pm-head-ava { width:84px; height:84px; border-radius:12px; flex:0 0 84px; }
.pm-head-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.pm-player-name{ font-weight:800; font-size:1.05rem; max-width:320px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-player-stats{ display:flex; gap:16px; align-items:center; font-size:0.95rem; color:var(--muted); }
.pm-player-stats strong{ font-weight:700; color:inherit; margin-right:6px; }
@media (max-width:760px){ .pm-head-ava{ width:64px; height:64px; } .pm-player-name{ max-width:160px; } .pm-player-stats{ gap:10px; font-size:0.9rem } }
/* Small screens: stack header to avoid overlap and keep scoreboard compact on a separate row */
@media (max-width:520px){
  .sbb-modal__head { flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:8px; }
  /* keep avatar+name and close button on first row */
  .pm-headleft { order:1; padding:6px 12px; padding-left:12px; display:flex; align-items:center; gap:10px; flex:0 0 auto; }
  #pmClose { order:1; flex:0 0 auto; margin-left:auto; }
  /* scoreboard moves to second row full width and is centered */
  .pm-headcenter { order:2; flex-basis:100%; display:flex; justify-content:center; padding:0 12px 6px 12px; margin-left:0; }
  .pm-head-ava { width:56px; height:56px; }
  .pm-player-name { font-size:1rem; max-width:160px; }
  .sbb-modal__head .scoreboard-compact { width:auto; justify-content:center; }
  .sbb-modal__head .scoreboard-compact .team-label { display:block; }
  .sbb-modal__head .scoreboard-compact .score .num { font-size:0.9rem; padding:0 4px; }
}