/* 
  Fixtures List Page Specific Styles
  Dark theme adjustments for upcoming fixtures and prop bets views
  NOTE: NO INLINE STYLES should be used with these components
*/

/* League section container - increase visual separation */
.card,
.league-section {
  margin-block-start: var(--space-6);  
  border-radius: var(--radius-lg);
  overflow: visible;
}

.prop-cards {
  margin-inline: var(--space-4);
}

/* League header styling */
.league-header,
.card-header {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
}

.league-title {
  color: var(--clr-light-a0);
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
}

.league-icon {
  margin-inline-end: var(--space-2);
}

/* Tables - Override default white headers and fix dark theme */
table,
.table,
.fixtures-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

thead tr,
table thead tr,
.table thead tr {
  background-color: var(--clr-surface-a50) !important;
  border-bottom: 1px solid var(--clr-surface-a30) !important;
}

/* Team display with logo - Fix spacing and alignment */
.flex.items-center {
  gap: var(--space-3);
}

/* Fix text colors for dark theme */
td .flex span,
td span,
.team-name {
  color: var(--clr-light-a0) !important;
}

th.text-right,
td.text-right {
  text-align: right !important;
}

th.text-left,
td.text-left {
  text-align: left !important;
}

th.text-center,
td.text-center {
  text-align: center !important;
}

/* Fix alignment for team-related containers */
.home-team, 
.away-team,
.team-container,
[class*="team-"],
.flex.items-center.justify-end,
.flex.items-center.justify-start {
  gap: var(--space-2);
}

.home-team,
.flex.items-center.justify-end {
  justify-content: flex-end;
}

.away-team,
.flex.items-center.justify-start {
  justify-content: flex-start;
}

/* Consistent card styling for fixtures and prop bets */
.fixture-card,
.prop-bet-card,
.match-card,
.game-card,
.fixtures-container .card,
.prop-bets-container .card,
.fixtures-list .card,
.prop-bets-list .card {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-bg-body);
  border-left: 3px solid var(--color-secondary-light); /* Subtle GREEN secondary color as left border */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-base);
}

/* Prop bet and fixtures cards */
.prop-bets-team-card {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-bg-body);
  border-left: 3px solid var(--color-secondary-light);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Prop bet tables */
.prop-bets-team-card table,
.prop-bet-stats-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.prop-bets-team-card .team-header {
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-gray-850);
  border-bottom: 1px solid var(--color-gray-700);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.prop-bets-team-card .team-name {
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
  color: var(--color-gray-100);
}

/* Dark theme support for all cards */
.dark .fixture-card,
.dark .prop-bet-card,
.dark .match-card,
.dark .game-card,
.dark .prop-bets-team-card,
.dark .fixtures-container .card,
.dark .prop-bets-container .card,
.dark .fixtures-list .card,
.dark .prop-bets-list .card {
  background-color: var(--color-gray-850);
  border-color: var(--color-gray-700);
  border-left-color: var(--color-secondary-light); /* Maintain green secondary color left border in dark mode */
  color: var(--color-bg-body);
}

/* Match time styling */
.match-time,
td.text-center span.font-medium {
  color: var(--clr-light-a0);
  text-align: center;
  font-size: var(--text-sm);
}

/* Increase section spacing */
.section,
section {
  margin-block: var(--space-8);
}

/* Page title and headers */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--clr-light-a0) !important;
}

/* Form group margins */
.form-group {
  margin-bottom: var(--space-4);
}

.form-group.mb-0 {
  margin-bottom: 0 !important;
}

/* Dark theme overrides for form elements */
select,
input,
select.form-control,
.form-control {
  background-color: var(--clr-surface-a20) !important;
  color: var(--clr-light-a0) !important;
  border-color: var(--clr-light-a0) !important;
}

/* Fix row spacing and add alternating row stripes */
table tr,
.table tr {
  border-bottom: 1px solid var(--color-gray-750);
}

/* Alternating row stripes with existing colors */
table tr:nth-child(even),
.table tr:nth-child(even) {
  background-color: var(--color-gray-800); /* Use existing stripe color */
}

table tr:nth-child(odd),
.table tr:nth-child(odd) {
  background-color: var(--color-gray-850); /* Lighter variant for differentiation */
}

table tr:hover,
.table tr:hover {
  background-color: var(--color-gray-750); /* Slightly lighter on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .flex.items-center {
    gap: var(--space-2) !important;
  }
  
  table th,
  .table th,
  table td,
  .table td {
    padding: var(--space-2);
  }
  
  td span,
  .team-name {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}