/*
 * Season Calendar (wOBA) — player profile.
 * Mobile-first: single-column toolbar that wraps, time grids scroll
 * horizontally when narrow. Uses Stadium theme tokens with dark fallbacks.
 */

.dc-scal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.dc-scal__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
}
.dc-scal__bar-left,
.dc-scal__bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}
.dc-scal__title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary, #F0F6FC);
  min-width: 8rem;
}
.dc-scal__today,
.dc-scal__view,
.dc-scal__arrow,
.dc-scal__help {
  background: var(--bg-elevated, #161B22);
  border: 1px solid var(--border-default, #30363D);
  color: var(--text-primary, #F0F6FC);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.dc-scal__today { padding: 0.45rem 0.9rem; font-weight: 600; }
.dc-scal__view { padding: 0.45rem 0.6rem; }
.dc-scal__nav { display: inline-flex; gap: 2px; }
.dc-scal__arrow {
  width: 2rem; height: 2rem;
  font-size: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.dc-scal__help {
  width: 2rem; height: 2rem;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.dc-scal__today:hover,
.dc-scal__arrow:hover,
.dc-scal__help:hover { border-color: var(--accent-gold, #f5a623); }

/* Help popover (top-right) */
.dc-scal__helppop {
  position: absolute;
  top: 2.6rem; right: 0;
  z-index: 40;
  max-width: min(22rem, 90vw);
  padding: 0.75rem 0.9rem;
  background: var(--bg-elevated, #161B22);
  border: 1px solid var(--border-default, #30363D);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  color: var(--text-secondary, #C9D1D9);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* ── Legend ──────────────────────────────────────────────────────────── */
.dc-scal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.72rem;
  color: var(--text-secondary, #8B949E);
}
.dc-scal__legend-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.dc-scal__legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ── Month view ──────────────────────────────────────────────────────────
   Google-Calendar style: a bordered 7-column grid, each day a full cell with
   the date number on top and events stacked underneath. Borders are drawn on
   the top/left of the container and the right/bottom of every cell so there
   are no doubled edges. Theme-token driven (works in dark and light). */
.dc-scal__month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--border-default, #30363D);
  border-left: 1px solid var(--border-default, #30363D);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  background: var(--bg-card, #161B22);
}
.dc-scal__dow {
  border-right: 1px solid var(--border-default, #30363D);
  border-bottom: 1px solid var(--border-default, #30363D);
  background: var(--bg-surface, #0D1117);
  color: var(--text-secondary, #8B949E);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.4rem;
  text-align: center;
}
.dc-scal__day {
  border-right: 1px solid var(--border-default, #30363D);
  border-bottom: 1px solid var(--border-default, #30363D);
  background: var(--bg-card, #161B22);
  min-height: 5.6rem;
  padding: 0.3rem 0.3rem 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
/* Days spilling in from the previous/next month read as muted filler. */
.dc-scal__day.is-other {
  background: var(--bg-surface, #0D1117);
  color: var(--text-muted, #6e7681);
}
.dc-scal__day.is-other .dc-scal__daynum { opacity: 0.5; }
/* Date number sits on top of the cell (no circle). */
.dc-scal__daynum {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary, #8B949E);
  text-align: center;
  line-height: 1.3;
}
/* Today: just an accent-coloured number — no surrounding circle. */
.dc-scal__day.is-today {
  background: color-mix(in srgb, var(--accent-gold, #f5a623) 8%, transparent);
}
.dc-scal__day.is-today .dc-scal__daynum {
  color: var(--accent-gold, #f5a623);
  font-weight: 800;
}
.dc-scal__chips { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.dc-scal__chip {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border: none;
  border-left: 3px solid var(--chip, #8b949e);
  background: color-mix(in srgb, var(--chip, #8b949e) 16%, transparent);
  border-radius: 4px;
  padding: 0.12rem 0.35rem;
  font-size: 0.72rem;
  color: var(--text-primary, #F0F6FC);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.dc-scal__chip:hover { filter: brightness(1.2); }
.dc-scal__chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chip, #8b949e); flex-shrink: 0; }
.dc-scal__chip-time { color: var(--text-secondary, #8B949E); }
.dc-scal__chip-woba { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Week / Day view ─────────────────────────────────────────────────── */
.dc-scal__weekscroll { overflow-x: auto; }
.dc-scal__week {
  display: grid;
  grid-template-columns: 3.2rem repeat(var(--days, 7), minmax(5.5rem, 1fr));
  grid-auto-rows: min-content;
  background: var(--bg-card, #161B22);
  border: 1px solid var(--border-subtle, #21262D);
  border-radius: var(--radius-sm, 6px);
  min-width: 0;
}
.dc-scal__wk-corner { border-bottom: 1px solid var(--border-subtle, #21262D); }
.dc-scal__wk-dayhead {
  text-align: center;
  padding: 0.35rem 0.2rem;
  border-bottom: 1px solid var(--border-subtle, #21262D);
  border-left: 1px solid var(--border-subtle, #21262D);
}
.dc-scal__wk-dow { display: block; font-size: 0.65rem; text-transform: uppercase; color: var(--text-secondary, #8B949E); }
.dc-scal__wk-dnum { display: block; font-size: 1.1rem; font-weight: 700; color: var(--text-primary, #F0F6FC); }
.dc-scal__wk-dayhead.is-today .dc-scal__wk-dnum { color: var(--accent-gold, #f5a623); }
.dc-scal__wk-gutter { position: relative; }
.dc-scal__wk-hour {
  font-size: 0.65rem;
  color: var(--text-secondary, #8B949E);
  text-align: right;
  padding-right: 0.35rem;
  transform: translateY(-0.5em);
  box-sizing: border-box;
}
.dc-scal__wk-col {
  position: relative;
  border-left: 1px solid var(--border-subtle, #21262D);
}
.dc-scal__wk-col.is-today { background: color-mix(in srgb, var(--accent-gold, #f5a623) 6%, transparent); }
.dc-scal__wk-line {
  position: absolute; left: 0; right: 0;
  border-top: 1px solid var(--border-subtle, #21262D);
  opacity: 0.5;
}
.dc-scal__wk-event {
  position: absolute;
  left: 3px; right: 3px;
  min-height: 2.2rem;
  border: none;
  border-radius: 5px;
  padding: 0.25rem 0.4rem;
  color: #111;
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.dc-scal__wk-event:hover { filter: brightness(1.08); z-index: 2; }
.dc-scal__wk-ev-time { font-weight: 700; }
.dc-scal__wk-ev-woba { font-weight: 600; }
.dc-scal__wk-ev-teams { display: block; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Year view ───────────────────────────────────────────────────────── */
.dc-scal__year {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3, 12px);
}
.dc-scal__ymonth {
  background: var(--bg-card, #161B22);
  border: 1px solid var(--border-subtle, #21262D);
  border-radius: var(--radius-sm, 6px);
  padding: 0.5rem;
}
.dc-scal__ymonth-name { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.35rem; color: var(--text-primary, #F0F6FC); }
.dc-scal__ymini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.dc-scal__ymini-dow { font-size: 0.6rem; text-align: center; color: var(--text-secondary, #8B949E); }
.dc-scal__ymini-day {
  font-size: 0.62rem;
  text-align: center;
  padding: 0.15rem 0;
  border-radius: 3px;
  color: var(--text-secondary, #C9D1D9);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
}
.dc-scal__ymini-day.is-other { visibility: hidden; }
.dc-scal__ymini-day.is-today { outline: 1.5px solid var(--accent-gold, #f5a623); }
.dc-scal__ymini-day.has-game {
  background: var(--chip, #8b949e);
  color: #111;
  font-weight: 700;
  cursor: pointer;
}
.dc-scal__ymini-day.has-game:hover { filter: brightness(1.15); }

/* ── Tooltip ─────────────────────────────────────────────────────────── */
.dc-scal__tip {
  position: fixed;
  z-index: 9999;
  max-width: 20rem;
  background: var(--bg-elevated, #161B22);
  border: 1px solid var(--border-default, #30363D);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  padding: 0.55rem 0.7rem;
  font-size: 0.78rem;
  color: var(--text-primary, #F0F6FC);
  pointer-events: none;
}
.dc-scal__tip-date { font-weight: 700; margin-bottom: 0.25rem; }
.dc-scal__tip-teams { color: var(--text-secondary, #C9D1D9); margin-bottom: 0.2rem; }
.dc-scal__tip-row { display: flex; align-items: center; gap: 0.35rem; }
.dc-scal__tip-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dc-scal__tip-tier { color: var(--text-secondary, #8B949E); }
.dc-scal__tip-game {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0;
  border-top: 1px solid var(--border-subtle, #21262D);
  margin-top: 0.15rem;
}
.dc-scal__tip-gtime { font-weight: 700; font-variant-numeric: tabular-nums; }
.dc-scal__tip-gwoba { margin-left: auto; font-weight: 600; }

/* ── Light mode ──────────────────────────────────────────────────────── */
body.light-mode .dc-scal__wk-event { color: #fff; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dc-scal__title { font-size: 0.9rem; width: 100%; order: 3; }
  .dc-scal__day { min-height: 3.6rem; }
  .dc-scal__chip-time { display: none; }        /* keep the wOBA + colour on tiny cells */
  .dc-scal__year { grid-template-columns: repeat(2, 1fr); }
  .dc-scal__week { grid-template-columns: 2.6rem repeat(var(--days, 7), minmax(4.2rem, 1fr)); }
}
@media (max-width: 480px) {
  .dc-scal__year { grid-template-columns: 1fr; }
}