/* OpeningForge Application Styles */

:root {
   --bg-primary: #1e1e1e;
   --bg-secondary: #2d2d2d;
   --bg-tertiary: #3a3a3a;
   --text-primary: #f0f0f0;
   --text-secondary: #b0b0b0;
   --accent-primary: #ff6b35;
   --accent-secondary: #ffa500;
   --border-color: #4a4a4a;
   --success: #4caf50;
   --error: #f44336;
   --warning: #ff9800;
}

/* Main Layout */
.app-container {
   display: flex;
   flex-direction: column;
   height: 100vh;
   background: var(--bg-primary);
}

.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1rem 2rem;
   background: var(--bg-secondary);
   border-bottom: 1px solid var(--border-color);
}

.header-logo {
   display: flex;
   align-items: center;
   gap: 1rem;
}

.header-logo img {
   width: 40px;
   height: 40px;
   border-radius: 8px;
}

.header-title {
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--text-primary);
}

.header-nav {
   display: flex;
   gap: 2rem;
}

.nav-link {
   color: var(--text-secondary);
   text-decoration: none;
   transition: color 0.2s;
}

.nav-link:hover,
.nav-link.active {
   color: var(--accent-primary);
}

/* Main Content Area */
.main-content {
   flex: 1;
   display: flex;
   overflow: hidden;
}

/* Chess Board Container */
.board-section {
   flex: 0 0 600px;
   display: flex;
   flex-direction: column;
   padding: 2rem;
   background: var(--bg-secondary);
}

.board-wrapper {
   width: 560px;
   height: 560px;
   margin: 0 auto;
   border: 2px solid var(--border-color);
   border-radius: 8px;
   overflow: hidden;
}

.board-controls {
   display: flex;
   justify-content: center;
   gap: 1rem;
   margin-top: 1.5rem;
}

.control-btn {
   padding: 0.5rem 1rem;
   background: var(--bg-tertiary);
   color: var(--text-primary);
   border: 1px solid var(--border-color);
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s;
}

.control-btn:hover {
   background: var(--accent-primary);
   border-color: var(--accent-primary);
}

/* Repertoire Section */
.repertoire-section {
   flex: 1;
   display: flex;
   flex-direction: column;
   background: var(--bg-primary);
   border-left: 1px solid var(--border-color);
}

.repertoire-header {
   padding: 1.5rem;
   background: var(--bg-secondary);
   border-bottom: 1px solid var(--border-color);
}

.repertoire-tabs {
   display: flex;
   gap: 1rem;
   margin-bottom: 1rem;
}

.tab-btn {
   padding: 0.5rem 1rem;
   background: transparent;
   color: var(--text-secondary);
   border: 1px solid var(--border-color);
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s;
}

.tab-btn.active {
   background: var(--accent-primary);
   color: var(--text-primary);
   border-color: var(--accent-primary);
}

/* Opening Tree */
.opening-tree {
   flex: 1;
   overflow-y: auto;
   padding: 1rem;
}

.tree-node {
   margin-bottom: 0.5rem;
}

.tree-node-content {
   display: flex;
   align-items: center;
   padding: 0.5rem;
   background: var(--bg-secondary);
   border-radius: 4px;
   cursor: pointer;
   transition: background 0.2s;
}

.tree-node-content:hover {
   background: var(--bg-tertiary);
}

.tree-node-content.selected {
   background: var(--accent-primary);
   color: var(--text-primary);
}

.tree-node-move {
   font-family: 'Courier New', monospace;
   font-weight: 600;
   margin-right: 1rem;
}

.tree-node-annotation {
   color: var(--text-secondary);
   font-size: 0.9rem;
}

.tree-children {
   margin-left: 1.5rem;
   margin-top: 0.25rem;
   border-left: 2px solid var(--border-color);
   padding-left: 0.5rem;
}

/* Move List */
.move-list {
   padding: 1rem;
   background: var(--bg-secondary);
   border-top: 1px solid var(--border-color);
   max-height: 200px;
   overflow-y: auto;
}

.move-pair {
   display: flex;
   margin-bottom: 0.25rem;
}

.move-number {
   width: 3rem;
   color: var(--text-secondary);
}

.move {
   flex: 1;
   font-family: 'Courier New', monospace;
   cursor: pointer;
   padding: 0.125rem 0.25rem;
   border-radius: 2px;
}

.move:hover {
   background: var(--bg-tertiary);
}

.move.current {
   background: var(--accent-primary);
   color: var(--text-primary);
}

/* Training Mode */
.training-panel {
   padding: 1.5rem;
   background: var(--bg-secondary);
   border-radius: 8px;
   margin: 1rem;
}

.training-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
   margin-bottom: 1.5rem;
}

.stat-card {
   padding: 1rem;
   background: var(--bg-tertiary);
   border-radius: 4px;
   text-align: center;
}

.stat-value {
   font-size: 2rem;
   font-weight: 600;
   color: var(--accent-primary);
}

.stat-label {
   color: var(--text-secondary);
   font-size: 0.9rem;
   margin-top: 0.25rem;
}

/* Buttons */
.btn {
   padding: 0.75rem 1.5rem;
   background: var(--accent-primary);
   color: var(--text-primary);
   border: none;
   border-radius: 4px;
   font-size: 1rem;
   cursor: pointer;
   transition: all 0.2s;
}

.btn:hover {
   background: var(--accent-secondary);
   transform: translateY(-1px);
}

.btn-secondary {
   background: var(--bg-tertiary);
   border: 1px solid var(--border-color);
}

.btn-secondary:hover {
   background: var(--bg-secondary);
}

/* Forms */
.form-group {
   margin-bottom: 1.5rem;
}

.form-label {
   display: block;
   margin-bottom: 0.5rem;
   color: var(--text-secondary);
   font-size: 0.9rem;
}

.form-input {
   width: 100%;
   padding: 0.75rem;
   background: var(--bg-tertiary);
   color: var(--text-primary);
   border: 1px solid var(--border-color);
   border-radius: 4px;
   font-size: 1rem;
}

.form-input:focus {
   outline: none;
   border-color: var(--accent-primary);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
   width: 8px;
   height: 8px;
}

::-webkit-scrollbar-track {
   background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
   background: var(--bg-tertiary);
   border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
   background: var(--border-color);
}

/* Responsive Design */
@media (max-width: 1200px) {
   .board-section {
      flex: 0 0 500px;
   }
   .board-wrapper {
      width: 460px;
      height: 460px;
   }
}

@media (max-width: 768px) {
   .main-content {
      flex-direction: column;
   }
   .board-section {
      flex: none;
      padding: 1rem;
   }
   .board-wrapper {
      width: 100%;
      max-width: 400px;
      height: auto;
      aspect-ratio: 1;
   }
   .repertoire-section {
      border-left: none;
      border-top: 1px solid var(--border-color);
   }
}