/* PrJ/public/assets/css/views/player-season-overlay.css
   Player Season Overlay – cleaned + organized + px->relative (px only kept where <= 3px or for 1px borders)
*/

/* =========================
   1) Container
   ========================= */

.player-season-container.preview-container{
  display:flex;
  flex-direction:column;
  gap:1rem;
  position:relative;
}

/* =========================
   2) Header row (Rank | Name | Rank)
   ========================= */

.player-season-container .player-season-header-row{
  display:grid;
  grid-template-columns: minmax(5.5rem, 1fr) minmax(10rem, 2fr) minmax(5.5rem, 1fr);
  gap:.75rem;
  align-items:stretch;
}

.player-season-container .player-season-header-card{
  border:1px solid var(--border-color-light);
  border-radius:var(--radius-md);
  background:var(--bg-secondary);
  padding:.6rem .7rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.player-season-container .player-season-header-card.header-rank{
  text-align:center;
  align-items:center;
}

.player-season-container .header-rank-label{
  font-size:var(--font-size-xs);
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.player-season-container .header-rank-value{
  font-size:var(--font-size-xxxl);
  font-weight:800;
  color:var(--text-primary);
  line-height:1.1;
  margin-top:.15rem;
}

/* Name card: no background/border */
.player-season-container .player-season-header-card.header-main{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  text-align:center;
  align-items:center;
}

.player-season-container .player-season-header-card.header-main h3{
  margin:0;
  font-size:var(--font-size-xxxl);
  font-weight:700;
  color:var(--text-primary);
}

.player-season-container .player-season-header-card.header-main .date-week-line{
  margin:.15rem 0 0 0;
  font-size:var(--font-size-lg);
  color:var(--text-secondary);
  text-align:center;
}

@media (max-width:26rem){
  .player-season-container .player-season-header-row{ gap:.5rem; }
  .player-season-container .player-season-header-card{ padding:.5rem .55rem; }
  .player-season-container .header-rank-value{ font-size:var(--font-size-xxxl); }
}

/* =========================
   3) KPI Grid
   ========================= */

.player-season-container .kpi-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.75rem;
}

@media (min-width:22rem){
  .player-season-container .kpi-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

.player-season-container .kpi-item{
  border:1px solid var(--border-color-light);
  border-radius:var(--radius-md);
  background:var(--bg-secondary);
  padding:.5rem .6rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.15rem;
}

.player-season-container .kpi-label{
  font-size:var(--font-size-xs);
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.player-season-container .kpi-value{
  font-size:var(--font-size-xl);
  color:var(--text-primary);
  font-weight:800;
}

/* WL% donut KPI */
.player-season-container .kpi-item.kpi-donut{ align-items:stretch; }

.player-season-container .kpi-donut-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}

.player-season-container .kpi-donut-pct{
  font-size:var(--font-size-lg);
  font-weight:800;
  color:var(--text-primary);
  white-space:nowrap;
}

.player-season-container .kpi-donut-wrap{
  width:3.2em;
  height:3.2em;
  position:relative;
  flex-shrink:0;
}

/* =========================
   4) Section Titles
   ========================= */

.player-season-container .overlay-section-title{
  font-size:1rem;
  font-weight:700;
  text-align:center;
  margin:0 0 .75rem 0;
  padding-bottom:.5rem;
  border-bottom:2px solid var(--brand-orange);
  color:var(--text-primary);
}

/* =========================
   5) By GameKind table
   ========================= */

.player-season-container .player-stats-table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--font-size-small);
}

.player-season-container .player-stats-table th,
.player-season-container .player-stats-table td{
  /* 4px -> 0.25rem, 3px stays px (your rule: only >3px convert) */
  padding:0.25rem 3px;
  text-align:left;
  border-bottom:1px solid var(--border-color-light);
  vertical-align:top;
}

.player-season-container .player-stats-table th{
  background-color:var(--bg-primary);
  color:var(--text-secondary);
  font-weight:500;
  text-transform:uppercase;
}

.player-season-container .player-stats-table tbody tr:nth-child(even){
  background-color:var(--table-row-even);
}

.player-season-container .col-type-numeric-short{
  text-align:center;
  white-space:nowrap;
}

/* used in progress area (range label / tip) */
.player-season-container .cell-sub{
  font-size:var(--font-size-xs);
  margin-top:.15rem;
  color:var(--text-secondary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:32rem;
}

@media (max-width:26rem){
  .player-season-container .cell-sub{ white-space:normal; }
}

/* =========================
   6) Progress legend
   ========================= */

.player-season-container .ps-legend{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  margin:-.25rem 0 .35rem 0;
  color:var(--text-secondary);
  font-size:var(--font-size-xs);

  /* ✅ kein Slider/Scroll mehr */
  flex-wrap:nowrap;
  overflow:hidden;
  overflow-x:hidden;
  -webkit-overflow-scrolling:auto;

  /* optional, aber sinnvoll: kein Umbruch, lieber abschneiden */
  white-space:nowrap;

  /* optional: Fade rechts, damit Abschneiden "absichtlich" aussieht */
  position:relative;
}

.player-season-container .ps-legend::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:2.2rem;
  height:100%;
  pointer-events:none;
  background:linear-gradient(to right, rgba(0,0,0,0), var(--bg-secondary));
}

.player-season-container .ps-legend-item{
  display:flex;
  align-items:center;
  gap:.45rem;
  white-space:nowrap;
  flex:0 0 auto;
  min-width:0; /* wichtig, damit "abschneiden" möglich ist */
}

.player-season-container .ps-legend-line{
  width:1.6rem;
  height:.22rem;
  border-radius:999px;
  display:inline-block;
}

.ps-legend-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.3rem;
  height:1.15rem;
  padding:0 .45rem;
  border-radius:999px;
  border:1px solid var(--border-color-light);
  color:var(--text-primary);
  font-weight:700;
  font-size:.75rem;
  line-height:1;
  background:transparent;
  transform: translateY(-1px);
}


/* =========================
   7) All Games (match cards)
   ========================= */

.ps-allgames{
  display:flex;
  flex-direction:column;
  gap:0.75rem; /* 12px -> 0.75rem */
}

.ps-match-card{
  border:1px solid var(--border-color-light);
  background: var(--bg-secondary);
  border-radius:0.75rem; /* 12px -> 0.75rem */
  overflow:hidden;
}

.ps-match-header{
  display:flex;
  align-items:center;
  gap:0.625rem;           /* 10px -> 0.625rem */
  padding:0.625rem 0.75rem; /* 10px 12px -> 0.625rem 0.75rem */
  background: rgba(255,255,255,0.04);
  border-bottom:1px solid var(--border-color-light);
}

.ps-match-wk{
  font-weight:800;
  opacity:.95;
  min-width:2.4rem;
}

.ps-match-title{
  font-weight:800;
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ps-match-body{
  display:flex;
  flex-direction:column;
}

/* HOME/AWAY badge */
.ps-ag-side{
  margin-left:0.375rem;  /* 6px -> 0.375rem */
  padding:0.125rem 0.4375rem; /* 2px 7px -> 0.125rem 0.4375rem */
  font-size:.7rem;
}

/* =========================
   8) Game rows (inside match card)
   ========================= */

.ps-game-row{
  padding:0.1rem 0.75rem; /* 9px 12px -> 0.5625rem 0.75rem */
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0.75rem; /* 12px -> 0.75rem */
}

.ps-game-left{
  min-width:0;
  flex:1;
}

.ps-game-head{
  display:flex;
  align-items:baseline;
  gap:0.375rem; /* 6px -> 0.375rem */
  flex-wrap:wrap;
}

.ps-game-kind{
  font-size:.95rem;
  font-weight:700;
  opacity:.95;
}

.ps-game-dot{
  opacity:.65;
  font-weight:800;
}

/* Players coloring */
.ps-player-secondary{
  color: var(--text-secondary);
  font-weight:700;
}

.ps-vs-primary{
  color: var(--text-primary);
  font-weight:800;
}

/* Excluded line */
.ps-game-excl{
  font-size:.82rem;
  margin-top:0.125rem; /* 2px -> 0.125rem */
  opacity:.85;
}

.ps-game-sev{
  font-size:.82rem;
  margin-top:0.125rem;
  opacity:.85;
}

/* Right side: W/L + Points in one row */
.ps-game-right{
  display:flex;
  align-items:baseline;
  gap:.55rem;
  white-space:nowrap;
}

/* W/L: plain text */
.ps-res{
  font-weight:900;
  background:none !important;
  border:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  min-width:0 !important;
  height:auto !important;
  line-height:1 !important;
}

.ps-res.ps-res-lg{
  font-size:1.15rem;
  font-weight:800;
  line-height:1;
}

.ps-res.win{ color: var(--status-success); }
.ps-res.loss{ color: var(--status-error); }

.ps-pts{
  font-weight:800;
  line-height:1;
}

/* Optional: visually dim excluded rows */
.ps-game-row.is-excluded{
  opacity:.9;
}
.ps-opp-mini{
  font-size: 0.85em;
  font-weight: 600;
  margin-left: .35em;
  white-space: nowrap;
  opacity: .9;
}
.ps-opp-btn-gap{ display:inline-block; width:.25em; }