/* ========= Stats Grid ========= */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.dashboard-container .stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.dashboard-container .stat-card {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-container .stat-card .stat-value {
  font-size: var(--font-size-2xl);
  color: var(--text-primary);
}

.dashboard-container .stat-card .stat-label {
  margin-top: 0;
  font-size: var(--font-size-xs);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.dashboard-container .stat-card.tone-good {
  border-color: rgba(63, 185, 80, 0.45);
  background: rgba(63, 185, 80, 0.08);
}

.dashboard-container .stat-card.tone-good .stat-value {
  color: #7ee787;
}

.dashboard-container .stat-card.tone-warn {
  border-color: rgba(227, 179, 65, 0.45);
  background: rgba(227, 179, 65, 0.08);
}

.dashboard-container .stat-card.tone-warn .stat-value {
  color: #f2cc60;
}

.dashboard-container .stat-card.tone-low,
.dashboard-container .stat-card.tone-bad {
  border-color: rgba(121, 188, 255, 0.45);
  background: rgba(121, 188, 255, 0.08);
}

.dashboard-container .stat-card.tone-low .stat-value,
.dashboard-container .stat-card.tone-bad .stat-value {
  color: #9ecbff;
}

.dashboard-container .stats-grid .stat-card.stat-total-games .stat-value {
  color: #79c0ff;
}

.dashboard-container .stats-grid .stat-card.stat-score .stat-value {
  color: #a5d6ff;
}

.dashboard-container .stats-grid .stat-card.stat-avg-wins .stat-value {
  color: #7ee787;
}

.dashboard-container .stats-grid .stat-card.stat-perfect-win-rate .stat-value {
  color: #67e8f9;
}

/* ========= Filter Panel ========= */
.filter-panel {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-md);  /* Reduced from space-lg for more compact layout */
  margin-bottom: var(--space-lg);
}

@media (min-width: 1025px) {
  .dashboard-container .filter-panel {
    padding: var(--space-sm);
  }
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.filter-header h3 {
  font-size: var(--font-size-md);
  font-weight: 600;
}

.filter-toggle {
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.filter-toggle:hover {
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
}

.filter-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-sm);
}

.filter-body.collapsed {
  display: none;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.filter-group label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.filter-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-muted);
}

.filter-cta-wrap {
  margin-top: var(--space-sm);
}

.filter-add-build-cta {
  min-height: 42px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid rgba(121, 188, 255, 0.75);
  background: linear-gradient(135deg, #58a6ff 0%, #79bbff 55%, #95c9ff 100%);
  color: #0d1117;
  box-shadow: 0 8px 18px rgba(88, 166, 255, 0.35);
}

.filter-add-build-cta:hover {
  background: linear-gradient(135deg, #79bbff 0%, #95c9ff 100%);
  color: #0d1117;
  box-shadow: 0 10px 20px rgba(121, 188, 255, 0.45);
}

/* ========= View Toggle ========= */
.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
}

.view-toggle .btn {
  min-width: 74px;
}

.view-toggle .btn.active {
  background-color: var(--bg-tertiary);
  border-color: #58a6ff;
  color: var(--text-primary);
}

/* ========= Build Cards ========= */
.build-cards-grid {
  display: grid;
  gap: var(--space-md);
}

.build-cards-grid.compact {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  align-items: start;
}

.build-cards-grid.large {
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  align-items: start;
}

.build-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.build-cards-grid.compact .build-card {
  align-self: start;
  min-height: 0;
}

.build-cards-grid.large .build-card {
  align-self: start;
  min-height: 0;
}

.build-cards-grid.compact .build-card-content {
  height: 250px;
  min-height: 250px;
}

.build-card:hover {
  border-color: var(--text-muted);
}

.build-card.outline-diamond,
.build-card.outline-gold,
.build-card.outline-silver,
.build-card.outline-bronze {
  border-top-width: 3px;
}

.build-card.outline-diamond { border-top-color: var(--outline-diamond); }
.build-card.outline-gold { border-top-color: var(--outline-gold); }
.build-card.outline-silver { border-top-color: var(--outline-silver); }
.build-card.outline-bronze { border-top-color: var(--outline-bronze); }

.build-card-content {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) calc(var(--space-md) + 40px) var(--space-sm);
  padding-top: calc(var(--space-md) + 38px);
  position: relative;
  text-align: left;
}

.build-card-topline {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  right: var(--space-md);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.build-score-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-primary);
  background: rgba(13, 17, 23, 0.75);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  letter-spacing: 0.04em;
}

.build-score-tag.score-diamond {
  color: var(--outline-diamond);
  border-color: rgba(0, 229, 255, 0.6);
  background: rgba(0, 229, 255, 0.12);
}

.build-score-tag.score-gold {
  color: var(--outline-gold);
  border-color: rgba(255, 215, 0, 0.6);
  background: rgba(255, 215, 0, 0.12);
}

.build-score-tag.score-silver {
  color: var(--outline-silver);
  border-color: rgba(192, 192, 192, 0.6);
  background: rgba(192, 192, 192, 0.12);
}

.build-score-tag.score-bronze {
  color: var(--outline-bronze);
  border-color: rgba(205, 127, 50, 0.6);
  background: rgba(205, 127, 50, 0.12);
}

.build-card-rank-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.build-card-rank-stack .badge {
  white-space: nowrap;
}

.card-date {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.card-season {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.85;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.build-card-left {
  margin-top: var(--space-sm);
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-start;
  text-align: left;
}

.build-card-character-line {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-sm);
  text-align: left;
}

.char-avatar {
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
  border: 1px solid var(--border-default);
  background-color: var(--bg-input);
}

.char-avatar-sm {
  width: 24px;
  height: 24px;
}

.char-avatar-md {
  width: 28px;
  height: 28px;
}

.card-char-name {
  font-size: var(--font-size-md);
  font-weight: 600;
}

.build-card-text-block {
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: rgba(13, 17, 23, 0.35);
  padding: var(--space-sm);
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  align-items: flex-start;
  text-align: left;
}

.build-card-title-line {
  margin-top: 0;
  width: auto;
  max-width: 100%;
  text-align: left;
}

.card-build-name {
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.25;
}

.card-build-name.is-long {
  font-size: var(--font-size-lg);
}

.card-build-name.is-very-long {
  font-size: var(--font-size-md);
}

.card-comment {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  white-space: normal;
  color: var(--text-secondary);
  font-style: normal;
  font-size: var(--font-size-sm);
  line-height: 1.45;
  font-weight: 500;
  margin-top: 0;
  width: 100%;
  text-align: left;
}

.card-empty-text {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
  text-align: left;
}

.card-actions {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-sm);
  margin-top: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--space-xs);
  padding: 0;
  border: 0;
  background: transparent;
}

.card-actions .btn.btn-sm {
  padding: 4px 10px;
  min-height: 30px;
  line-height: 1.1;
}

.build-cards-grid.compact .card-actions .btn.btn-sm {
  min-height: 28px;
  padding: 3px 8px;
}

.build-cards-grid.compact .card-actions .btn.btn-ghost {
  border-color: transparent;
  color: var(--text-muted);
}

.build-card-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  margin-top: 0;
  background: linear-gradient(180deg, #121722 0%, #0d1117 100%);
  border-top: 1px solid var(--border-muted);
  padding: var(--space-sm);
}

.card-thumb {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  transition: opacity var(--transition-fast);
}

.card-thumb:hover {
  opacity: 0.9;
}

.card-thumb-placeholder {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: rgba(13, 17, 23, 0.5);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
  justify-content: center;
}

.placeholder-title {
  color: var(--text-muted);
}

.placeholder-link {
  color: var(--text-link);
  font-size: var(--font-size-sm);
  text-decoration: underline;
}

.build-cards-grid.compact .build-card-text-block {
  min-height: 78px;
}

.build-cards-grid.compact .build-card-media {
  aspect-ratio: auto;
  height: 260px;
  min-height: 260px;
}

.build-cards-grid.compact .build-card.row-no-screenshot .build-card-media {
  height: 96px;
  min-height: 96px;
  padding: var(--space-xs);
}

.build-cards-grid.compact .build-card.row-no-screenshot .card-thumb-placeholder {
  gap: 2px;
  font-size: var(--font-size-xs);
}

.build-cards-grid.compact .build-card.row-no-screenshot .placeholder-link {
  font-size: var(--font-size-xs);
}

.build-cards-grid.large .build-card-text-block {
  min-height: 92px;
}

.build-cards-grid.compact .card-build-name {
  -webkit-line-clamp: 2;
}

.build-cards-grid.large .card-build-name {
  -webkit-line-clamp: 3;
}

.build-cards-grid.compact .card-comment {
  -webkit-line-clamp: 2;
}

.build-cards-grid.large .card-comment {
  -webkit-line-clamp: 3;
}

.build-cards-grid.large .build-card.no-screenshot .build-card-media {
  aspect-ratio: auto;
  min-height: 160px;
  max-height: 200px;
}

.build-card.outline-diamond .build-card-content {
  background: linear-gradient(180deg, rgba(0,229,255,0.06), rgba(0,0,0,0));
}

.build-card.outline-gold .build-card-content {
  background: linear-gradient(180deg, rgba(255,215,0,0.06), rgba(0,0,0,0));
}

.build-card.outline-silver .build-card-content {
  background: linear-gradient(180deg, rgba(192,192,192,0.06), rgba(0,0,0,0));
}

.build-card.outline-bronze .build-card-content {
  background: linear-gradient(180deg, rgba(205,127,50,0.07), rgba(0,0,0,0));
}

@media (max-width: 768px) {
  .build-cards-grid.compact,
  .build-cards-grid.large {
    grid-template-columns: 1fr;
  }

  .build-card-media {
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
  }

  .build-card-content {
    padding-right: var(--space-sm);
  }

  .build-cards-grid.compact .build-card-content {
    height: auto;
    min-height: 0;
  }
}

@media (min-width: 1025px) {
  .build-cards-grid.large {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .build-cards-grid.large .build-card-content {
    padding: var(--space-lg) var(--space-lg) calc(var(--space-lg) + 44px) var(--space-md);
    padding-top: calc(var(--space-lg) + 40px);
  }

  .build-cards-grid.large .build-card-media {
    aspect-ratio: 16 / 10;
  }
}

/* ========= Core Badge (Dooley) ========= */
.core-badge {
  display: inline-block;
  background-color: rgba(224, 80, 80, 0.2);
  color: var(--char-dooley, #e05050);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ========= Per-Character Stats ========= */
.character-stats {
  margin-top: var(--space-lg);
}

.stats-sections-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.stats-section-card {
  background: rgba(13, 17, 23, 0.35);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.character-stats-header {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.kpi-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  width: 100%;
}

.character-stat-row.kpi-row,
.peak-rank-row.kpi-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  width: fit-content;
  max-width: 100%;
  background: linear-gradient(90deg, rgba(22, 28, 38, 0.85) 0%, rgba(22, 28, 38, 0.45) 100%);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.character-stat-row .char-info.kpi-entity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 0 0 210px;
  min-width: 210px;
  max-width: 210px;
}

.kpi-entity-text {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  min-width: 0;
}

.kpi-entity-text strong {
  font-size: var(--font-size-lg);
  line-height: 1.15;
}

.character-stat-row .stat-values.kpi-metrics,
.peak-rank-row .stat-values.kpi-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  justify-self: start;
  gap: var(--space-xs);
}

.character-stat-row .stat-values.kpi-metrics {
  min-width: 392px;
}

.kpi-metric {
  padding: 6px 10px;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  background: rgba(13, 17, 23, 0.5);
  text-align: left;
  width: 92px;
  min-width: 92px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kpi-metric.is-primary {
  border-color: #58a6ff;
  background: rgba(88, 166, 255, 0.12);
}

.kpi-metric.tone-good {
  border-color: rgba(46, 160, 67, 0.55);
  background: rgba(46, 160, 67, 0.12);
}

.kpi-metric.tone-good .kpi-metric-value {
  color: #7ee787;
}

.kpi-metric.tone-warn {
  border-color: rgba(210, 153, 34, 0.55);
  background: rgba(210, 153, 34, 0.12);
}

.kpi-metric.tone-warn .kpi-metric-value {
  color: #f2cc60;
}

.kpi-metric.tone-low,
.kpi-metric.tone-bad {
  border-color: rgba(121, 188, 255, 0.55);
  background: rgba(121, 188, 255, 0.10);
}

.kpi-metric.tone-low .kpi-metric-value,
.kpi-metric.tone-bad .kpi-metric-value {
  color: #9ecbff;
}

.kpi-metric-value {
  font-weight: 700;
  font-size: var(--font-size-lg);
  line-height: 1.15;
}

.kpi-metric-label {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 0;
  line-height: 1.1;
}

.kpi-metric.peak-rank-metric .kpi-metric-label {
  color: var(--text-secondary);
}

.kpi-metric.peak-rank-metric .kpi-metric-value {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  min-width: 0;
}

.peak-rank-row .stat-values.kpi-metrics {
  display: grid;
  grid-template-columns: 96px 208px 208px;
  column-gap: 14px;
  width: 540px;
  min-width: 540px;
}

.peak-rank-row.kpi-row {
  display: grid;
  grid-template-columns: 72px 540px;
  align-items: center;
  width: 652px;
  min-width: 652px;
  max-width: 652px;
  box-sizing: border-box;
}

.peak-rank-row .char-info.kpi-entity {
  min-width: 72px;
  max-width: 72px;
}

.peak-rank-row .kpi-metric {
  min-width: 0;
}

.peak-rank-row .kpi-metric:not(.peak-rank-metric) {
  width: 96px;
  min-width: 96px;
}

.peak-rank-row .kpi-metric.peak-rank-metric {
  width: 208px;
  min-width: 208px;
}

.kpi-metric.peak-rank-metric .badge {
  font-size: var(--font-size-sm);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  width: 172px;
  min-width: 172px;
  box-sizing: border-box;
  justify-content: center;
}

@media (max-width: 1200px) {
  .character-stat-row.kpi-row,
  .peak-rank-row.kpi-row {
    width: 100%;
    justify-content: space-between;
    align-items: stretch;
  }

  .kpi-entity-text {
    flex-wrap: wrap;
  }

  .character-stat-row .stat-values.kpi-metrics,
  .peak-rank-row .stat-values.kpi-metrics {
    justify-content: flex-start;
  }

  .peak-rank-row .stat-values.kpi-metrics {
    display: flex;
    grid-template-columns: none;
    column-gap: 0;
  }

  .character-stat-row .char-info.kpi-entity {
    flex: 0 1 auto;
    min-width: 150px;
    max-width: 280px;
  }

  .character-stat-row .stat-values.kpi-metrics {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .kpi-metric-value {
    font-size: var(--font-size-lg);
  }
}

/* ========= Peak Rank Display ========= */
.peak-ranks {
  margin-top: var(--space-lg);
}

.peak-rank-row {
  margin-bottom: 0;
}

.peak-rank-season {
  font-weight: 600;
  font-family: var(--font-mono);
}

.stats-collapsible {
  margin-top: var(--space-md);
}

.stats-collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  user-select: none;
}

.stats-collapsible > summary::-webkit-details-marker {
  display: none;
}

.stats-collapsible > summary::before {
  content: ">";
  display: inline-block;
  color: var(--text-muted);
  font-weight: 700;
  transform: rotate(0deg);
  transition: transform var(--transition-fast);
}

.stats-collapsible[open] > summary::before {
  transform: rotate(90deg);
}

.stats-collapsible > .kpi-list {
  margin-top: var(--space-sm);
}

@media (min-width: 1025px) {
  .stats-sections-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .stats-sections-grid .stats-section-wide {
    grid-column: 1 / -1;
  }
}

/* ========= Empty State ========= */
.empty-state {
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  color: var(--text-secondary);
}

.empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.empty-state h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.empty-state p {
  margin-bottom: var(--space-lg);
}