/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Custom Logo Styles */
.logo-brand {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -0.025em;
  text-decoration: none;
  position: relative;
}

.logo-brand:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

/* Custom Pagy Navigation Styles */
.pagy {
  display: flex;
  font-family: sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: rgb(107 114 128);
  & > :not([hidden]) ~ :not([hidden]) {
    --space-reverse: 0;
    margin-right: calc(0.25rem * var(--space-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--space-reverse)));
  }

  a:not(.gap) {
    display: block;
    text-decoration: none;
    border-radius: 0.5rem;
    background-color: rgb(229 231 235);
    padding: 0.25rem 0.75rem;
    color: inherit;
    &:hover {
      background-color: rgb(209 213 219);
    }
    &:not([href]) { /* disabled links */
      cursor: default;
      background-color: rgb(243 244 246);
      color: rgb(209 213 219);
    }
    &.current {
      background-color: rgb(156 163 175);
      color: rgb(255 255 255);
    }
  }

  label {
    white-space: nowrap;
    display: inline-block;
    border-radius: 0.5rem;
    background-color: rgb(229 231 235);
    padding: 0.125rem 0.75rem;
    input {
      line-height: 1.5rem;
      border-radius: 0.375rem;
      border-style: none;
      background-color: rgb(243 244 246);
    }
  }
}

/* ==========================================
   Tournament Bracket Visualization Styles
   ========================================== */

/* Bracket scroll container */
.bracket-scroll-container {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: oklch(var(--bc) / 0.2) transparent;
}

.bracket-scroll-container::-webkit-scrollbar {
  height: 8px;
}

.bracket-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

.bracket-scroll-container::-webkit-scrollbar-thumb {
  background-color: oklch(var(--bc) / 0.2);
  border-radius: 4px;
}

.bracket-scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: oklch(var(--bc) / 0.3);
}

/* Bracket wrapper */
.bracket-wrapper {
  padding: 1rem 0;
}

/* Individual round column */
.bracket-round {
  display: flex;
  flex-direction: column;
  min-width: 240px;
}

/* Matches container within a round */
.bracket-matches {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 0.5rem;
}

/* Dynamic spacing based on round - later rounds need more spacing */
.bracket-round[data-round="0"] .bracket-matches {
  gap: 1rem;
}

.bracket-round[data-round="1"] .bracket-matches {
  gap: 3.5rem;
}

.bracket-round[data-round="2"] .bracket-matches {
  gap: 8rem;
}

.bracket-round[data-round="3"] .bracket-matches {
  gap: 16rem;
}

.bracket-round[data-round="4"] .bracket-matches {
  gap: 24rem;
}

/* Match wrapper - contains match card and connector */
.bracket-match-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Match card hover effect */
.bracket-match {
  transition: all 0.2s ease;
}

.bracket-match:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -5px oklch(var(--bc) / 0.1), 0 8px 10px -6px oklch(var(--bc) / 0.1);
}

/* Connector elements */
.bracket-connector {
  position: relative;
  width: 32px;
  height: 100%;
  flex-shrink: 0;
}

/* Horizontal connector line from match to merge point */
.bracket-connector-horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 2px;
  background-color: oklch(var(--bc) / 0.2);
  transform: translateY(-50%);
}

/* Vertical connector going down (for even indexed matches) */
.bracket-connector-vertical-down {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 2px;
  height: calc(50% + 0.5rem + 30px);
  background-color: oklch(var(--bc) / 0.2);
}

/* Vertical connector going up (for odd indexed matches) */
.bracket-connector-vertical-up {
  position: absolute;
  bottom: 50%;
  left: 16px;
  width: 2px;
  height: calc(50% + 0.5rem + 30px);
  background-color: oklch(var(--bc) / 0.2);
}

/* Round connector - the merge lines between rounds */
.bracket-round-connector {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 32px;
  min-height: 100%;
  padding: 2rem 0;
}

/* Merge connector element */
.bracket-merge-connector {
  position: relative;
  height: 80px;
  flex: 1;
  display: flex;
  align-items: center;
}

.bracket-merge-connector::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 2px;
  background-color: oklch(var(--bc) / 0.2);
  transform: translateY(-50%);
}

.bracket-merge-connector::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 2px;
  background-color: oklch(var(--bc) / 0.2);
  transform: translateY(-50%);
}

/* Adjusted spacing for round connectors based on round count */
.bracket-round-connector[style*="--match-count: 2"] {
  gap: 2.5rem;
}

.bracket-round-connector[style*="--match-count: 4"] {
  gap: 1rem;
}

.bracket-round-connector[style*="--match-count: 8"] {
  gap: 0.5rem;
}

/* Trophy icon for final */
.bracket-round[data-round]:last-child .bracket-match::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
}

/* Participant row styling */
.bracket-participant {
  min-height: 36px;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .bracket-round {
    min-width: 200px;
  }
  
  .bracket-match {
    width: 180px;
  }
  
  .bracket-connector {
    width: 24px;
  }
  
  .bracket-round-connector {
    width: 24px;
  }
  
  .bracket-connector-horizontal {
    width: 12px;
  }
  
  .bracket-connector-vertical-down,
  .bracket-connector-vertical-up {
    left: 12px;
  }
  
  .bracket-merge-connector::before,
  .bracket-merge-connector::after {
    width: 12px;
  }
}