/* /css/draft-capital.css */

/* Page-specific styles for draft-capital.html */
main {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 2rem;
}

.page-header h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

/* Quick Links */
.quick-links-container {
    text-align: center;
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.quick-link-btn {
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.quick-link-btn:hover {
    background-color: #f8f9fa;
    border-color: #ccc;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Filter controls */
.filter-controls {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 2rem;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.filter-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-group label {
  font-weight: 500;
  font-size: 0.9rem;
}

.filter-group select {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  min-width: 150px;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

/* Season tabs */
.season-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.season-tab {
  background-color: #f8f9fa;
  border: 2px solid #ddd;
  border-radius: 6px;
  padding: 1rem 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.season-tab:hover {
  background-color: #e9ecef;
  border-color: #007bff;
}

.season-tab.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

/* Draft board container */
.draft-board {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: auto; 
  transition: background-color 0.3s, box-shadow 0.3s;
}

.draft-header {
  background-color: #333;
  color: white;
  padding: 1.5rem;
  text-align: center;
}

.draft-header h3 {
  color: white;
  margin: 0;
  font-size: 1.4rem;
}

/* Draft table */
.draft-table {
  width: 100%;
  border-collapse: collapse;
}

.draft-table th {
  background-color: #f8f9fa;
  padding: 1rem 0.5rem;   
  text-align: left;       
  font-weight: bold;      
  border-bottom: 2px solid #ddd;
  font-size: 0.9rem;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.draft-table td {
  padding: 0.8rem 0.5rem;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
  vertical-align: middle;
  transition: border-color 0.3s;
}
.draft-table td a {
  color: #007bff;
  text-decoration: none;
  transition: color 0.3s;
}
.draft-table td a:hover {
  text-decoration: underline;
}

.draft-table tr:hover {
  background-color: #f8f9fa;
}

.pick-description {
  font-weight: bold; 
}

.owner-cell { }

.cell-content-flex { 
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.original-team-cell-traded {
  opacity: 0.6; 
}

.team-logo {
  width: 30px;
  height: 30px;
  border-radius: 2px;
  object-fit: contain; 
}

.status-original {
  color: #28a745;
  font-weight: 500;
}

.forfeited-pick { 
  background-color: #f8d7da;
  opacity: 0.7; 
}

.pick-summary {
  background-color: #f8f9fa;
  padding: 1rem;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.3s, border-color 0.3s;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  text-align: center;
}

.summary-item {
  background-color: white;
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid #ddd;
  transition: background-color 0.3s, border-color 0.3s;
}

.summary-number {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  transition: color 0.3s;
}

.summary-label {
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.3rem;
  transition: color 0.3s;
}

.team-ownership {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.team-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.team-card .team-header {
  background-color: #333;
  color: white;
  padding: 1rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.team-card .team-header h4 { color: white; margin: 0; font-size: 1.1rem; }
.team-picks { padding: 1rem; max-height: 300px; overflow-y: auto; }
.pick-item { padding: 0.5rem; border-bottom: 1px solid #eee; font-size: 0.9rem; transition: border-color 0.3s, color 0.3s; }
.pick-item:last-child { border-bottom: none; }
.pick-item.own { color: #28a745; font-weight: 500; }
.pick-item.acquired { color: #007bff; }
.pick-origin { font-size: 0.8rem; color: #666; margin-left: 1rem; transition: color 0.3s; }

.view-toggle {
  text-align: center;
  margin-bottom: 2rem;
}

.toggle-btn {
  background-color: #f8f9fa;
  border: 2px solid #ddd;
  border-radius: 6px;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  margin: 0 0.5rem;
}

.toggle-btn:hover {
  background-color: #e9ecef;
  border-color: #007bff;
}

.toggle-btn.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

/* Dark Mode Styles */
.dark-mode .quick-link-btn { background-color: #2c2c2c; color: #e0e0e0; border-color: #444; }
.dark-mode .quick-link-btn:hover { background-color: #383838; border-color: #666; }
.dark-mode .filter-controls, .dark-mode .draft-board, .dark-mode .team-card { background-color: #1e1e1e; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.dark-mode .filter-group select { background-color: #2c2c2c; border-color: #444; color: #e0e0e0; }
.dark-mode .season-tab, .dark-mode .toggle-btn { background-color: #2c2c2c; border-color: #444; color: #e0e0e0; }
.dark-mode .season-tab:hover, .dark-mode .toggle-btn:hover { background-color: #383838; border-color: #bb86fc; }
.dark-mode .season-tab.active, .dark-mode .toggle-btn.active { background-color: #bb86fc; border-color: #bb86fc; color: #121212; }
.dark-mode .draft-table th { background-color: #2c2c2c; border-bottom-color: #444; }
.dark-mode .draft-table td { border-bottom-color: #333; }
.dark-mode .draft-table tr:hover { background-color: #2c2c2c; }
.dark-mode .draft-table td a { color: #8ab4f8; }
.dark-mode .draft-table td a:hover { color: #a7c7fa; }
.dark-mode .status-original { color: #66bb6a; }
.dark-mode .forfeited-pick { background-color: #5d1c21; opacity: 0.8; }
.dark-mode .pick-summary { background-color: #2c2c2c; border-bottom-color: #444; }
.dark-mode .summary-item { background-color: #1e1e1e; border-color: #333; }
.dark-mode .summary-number { color: #e0e0e0; }
.dark-mode .summary-label { color: #aaa; }
.dark-mode .pick-item { border-bottom-color: #333; }
.dark-mode .pick-item.own { color: #66bb6a; }
.dark-mode .pick-item.acquired { color: #8ab4f8; }
.dark-mode .pick-origin { color: #aaa; }

@media (max-width: 768px) {
  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-group { width: 100%; }
  .filter-group select { min-width: auto; width: 100%; }
  .season-tabs { flex-direction: column; }
  .season-tab { padding: 0.8rem 1rem; }
  
  .draft-table th, .draft-table td { 
    padding: 0.5rem 0.3rem; 
    font-size: 0.8rem; 
  }

  .draft-table th:nth-child(1), 
  .draft-table td:nth-child(1) { 
    width: 25%; 
    min-width: 80px; 
  }
  .draft-table td:nth-child(1).pick-description { 
       white-space: normal; 
       word-break: break-word; 
  }

  .draft-table th:nth-child(3), 
  .draft-table td:nth-child(3) { 
    display: none; 
  }
  
   .draft-table th:nth-child(2), 
   .draft-table td:nth-child(2) { 
      width: 40%; 
   }
   .draft-table th:nth-child(4), 
   .draft-table td:nth-child(4) { 
      width: 35%; 
   }

  .team-ownership { grid-template-columns: 1fr; }
}