/**
 * Custom CSS overrides for Lichess PGN Viewer
 * Fixes board colors and styling to match ChessPlaybook theme
 * Updated: 2025-10-26
 * Now supports dynamic color themes via CSS variables
 */

/* CSS Variables for board colors (set dynamically via JS) */
:root {
  --board-light-square: #f0d9b5;
  --board-dark-square: #b58863;
  --board-last-move: rgba(155, 199, 0, 0.41);
  --board-selected: rgba(20, 85, 166, 0.5);
  --board-pattern: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+CiAgPGcgaWQ9ImEiPgogICAgPGcgaWQ9ImIiPgogICAgICA8ZyBpZD0iYyI+CiAgICAgICAgPGcgaWQ9ImQiPgogICAgICAgICAgPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iI2YwZDliNSIvPgogICAgICAgICAgPHVzZSB4PSIxIiB5PSIxIiBocmVmPSIjZSIvPgogICAgICAgICAgPHJlY3QgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgaWQ9ImUiIGZpbGw9IiNiNTg4NjMiLz4KICAgICAgICAgIDx1c2UgeD0iMSIgeT0iLTEiIGhyZWY9IiNlIi8+CiAgICAgICAgPC9nPgogICAgICAgIDx1c2UgeD0iMiIgaHJlZj0iI2QiLz4KICAgICAgPC9nPgogICAgICA8dXNlIHg9IjQiIGhyZWY9IiNjIi8+CiAgICA8L2c+CiAgICA8dXNlIHk9IjIiIGhyZWY9IiNiIi8+CiAgPC9nPgogIDx1c2UgeT0iNCIgaHJlZj0iI2EiLz4KPC9zdmc+");
}

/* Override the board background - uses CSS variables for dynamic theming */
cg-board,
.lpv cg-board {
  background-color: var(--board-light-square) !important;
  background-image: var(--board-pattern) !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
}

/* Highlighted squares - use CSS variables */
.lpv cg-board square.last-move {
  background-color: var(--board-last-move) !important;
}

.lpv cg-board square.selected {
  background-color: var(--board-selected) !important;
}

/* Navigation buttons - ensure they're visible and clickable */
.lpv .lpv__controls {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0rem !important;
  padding: 0.75rem !important;
  background-color: #1e293b !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Target the actual button class used by lichess viewer */
.lpv .lpv__controls .lpv__fbt {
  background-color: #475569 !important;
  color: #f1f5f9 !important;
  border: none !important;
  border-left: 1px solid #334155 !important;
  border-radius: 0 !important;
  padding: 0.75rem 1.25rem !important;
  cursor: pointer !important;
  font-size: 1.2rem !important;
  transition: all 0.2s !important;
  pointer-events: auto !important;
  min-width: 3rem !important;
  min-height: 3rem !important;
  flex: 1 1 auto !important;
  position: relative !important;
  z-index: 11 !important;
  text-indent: 0 !important;
  overflow: visible !important;
}

/* Add text content via CSS for visibility - this helps debugging */
.lpv .lpv__controls .lpv__fbt::after {
  content: attr(title) !important;
  position: absolute;
  font-size: 10px;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}

.lpv .lpv__controls .lpv__fbt:first-child {
  border-left: none !important;
}

.lpv .lpv__controls .lpv__fbt:hover:not(.disabled):not([disabled]) {
  background-color: #64748b !important;
  color: #fff !important;
}

.lpv .lpv__controls .lpv__fbt:active {
  background-color: #334155 !important;
  transform: scale(0.95) !important;
}

.lpv .lpv__controls .lpv__fbt.disabled,
.lpv .lpv__controls .lpv__fbt[disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Menu button styling */
.lpv .lpv__controls__menu {
  flex: 0 1 auto !important;
  width: auto !important;
  padding: 0.75rem 1rem !important;
}

/* Ensure controls are not covered by other elements */
.lpv__controls * {
  pointer-events: auto !important;
}

/* Move list styling */
.lpv .lpv__moves {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  padding: 1rem !important;
}

.lpv .lpv__moves move {
  color: #f1f5f9 !important;
}

.lpv .lpv__moves move.active {
  background-color: #475569 !important;
  color: #fbbf24 !important;
}

.lpv .lpv__moves move:hover {
  background-color: #334155 !important;
}

/* Player names */
.lpv .lpv__player {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  padding: 0.5rem !important;
  border-bottom: 1px solid #475569 !important;
}

/* Main container sizing - responsive for mobile */
.lpv {
  max-width: 100% !important;
  width: 100% !important;
}

/* Larger screens: limit board size for better proportions */
@media (min-width: 640px) {
  .lpv {
    max-width: 500px !important;
    width: 500px !important;
  }
}

/* Ensure pieces are visible */
.lpv piece {
  opacity: 1 !important;
}

/* PGN text area styling */
.lpv .lpv__pane--pgn {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

.lpv textarea {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
  border: 1px solid #475569 !important;
}