/**
 * Padeler Torneos — Stylesheet for custom requirements:
 * 1. Print stylesheet (@media print) — fixture & standings only, paper-optimized.
 * 2. TV Mode (.tv-mode) — fullscreen, high-contrast, large text for club TVs.
 * 3. Toast notifications & score inputs normalization.
 */

/* ==========================================================================
   1. Print Stylesheet
   ========================================================================== */
@media print {
  /* Hide non-tournament content */
  header,
  footer,
  #setup-card,
  #action-bar,
  #seo-content,
  #subtle-cta,
  #torneo-toast,
  .no-print,
  .shiny-cta,
  .category-bar,
  button,
  .mobile-menu-drawer,
  #menuToggle,
  .bg-ambient-layer {
    display: none !important;
  }

  /* Reset layout for physical paper / PDF */
  html,
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  #tournament-app {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  .print-only-header {
    display: block !important;
    margin-bottom: 14pt;
    padding-bottom: 8pt;
    border-bottom: 2pt solid #000;
  }

  .print-title {
    font-size: 18pt !important;
    font-weight: 800 !important;
    color: #000000 !important;
    margin: 0 0 4pt 0 !important;
  }

  .print-meta {
    font-size: 9.5pt !important;
    color: #333333 !important;
  }

  /* Fixture & rounds in print */
  .torneo-round-card {
    page-break-inside: avoid;
    break-inside: avoid;
    background: #ffffff !important;
    border: 1pt solid #cccccc !important;
    border-radius: 4pt !important;
    padding: 8pt !important;
    margin-bottom: 10pt !important;
    color: #000000 !important;
    box-shadow: none !important;
  }

  .torneo-round-card * {
    color: #000000 !important;
  }

  .torneo-match-row {
    border-bottom: 0.5pt solid #e5e5e5;
    padding: 4pt 0 !important;
  }

  .torneo-match-row:last-child {
    border-bottom: none;
  }

  /* Score inputs in print behave like static text */
  .torneo-score-input {
    border: 1pt solid #999999 !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 10pt !important;
    font-weight: 700 !important;
    width: 24pt !important;
    height: 18pt !important;
    text-align: center !important;
  }

  /* Standings table in print */
  #standings-card {
    page-break-inside: avoid;
    break-inside: avoid;
    background: #ffffff !important;
    border: 1pt solid #cccccc !important;
    padding: 8pt !important;
    margin-top: 14pt !important;
  }

  .torneo-table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  .torneo-table th,
  .torneo-table td {
    border: 0.5pt solid #cccccc !important;
    padding: 4pt 6pt !important;
    color: #000000 !important;
    font-size: 9.5pt !important;
    text-align: center !important;
  }

  .torneo-table th {
    background: #f0f0f0 !important;
    font-weight: 700 !important;
  }

  .torneo-table td:nth-child(2) {
    text-align: left !important;
    font-weight: 600 !important;
  }
}

/* ==========================================================================
   2. TV Mode (.tv-mode)
   ========================================================================== */
body.tv-mode {
  background-color: #0C0C0E !important;
  overflow-y: auto !important;
}

body.tv-mode header,
body.tv-mode footer,
body.tv-mode #setup-card,
body.tv-mode #seo-content,
body.tv-mode #subtle-cta,
body.tv-mode #action-bar-normal,
body.tv-mode .tv-hidden {
  display: none !important;
}

body.tv-mode #tournament-app {
  max-width: 96% !important;
  width: 96% !important;
  margin: 0 auto !important;
  padding: 2rem 0 !important;
}

body.tv-mode .tv-exit-btn {
  display: inline-flex !important;
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 99999;
  background: #18181B;
  border: 1px solid rgba(163, 230, 53, 0.4);
  color: #A3E635;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.6rem 1.4rem;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(163, 230, 53, 0.2);
  transition: all 0.2s ease;
}

body.tv-mode .tv-exit-btn:hover {
  background: #A3E635;
  color: #0C0C0E;
  transform: scale(1.04);
}

body.tv-mode .tv-grid-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 1024px) {
  body.tv-mode .tv-grid-layout {
    grid-template-columns: 1fr;
  }
}

body.tv-mode .tv-round-card {
  font-size: 1.2rem;
  padding: 1.25rem;
}

body.tv-mode .tv-score-input {
  width: 3.5rem !important;
  height: 2.75rem !important;
  font-size: 1.25rem !important;
}

body.tv-mode .torneo-table th,
body.tv-mode .torneo-table td {
  padding: 0.75rem 0.85rem !important;
  font-size: 1.1rem !important;
}

/* ==========================================================================
   3. Toast Notification
   ========================================================================== */
#torneo-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%, 120%);
  background: #18181B;
  border: 1px solid rgba(163, 230, 53, 0.5);
  color: #F9F9F9;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.9), 0 0 30px rgba(163, 230, 53, 0.25);
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 999999;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#torneo-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ==========================================================================
   4. Form & Input Normalization
   ========================================================================== */
.torneo-score-input::-webkit-outer-spin-button,
.torneo-score-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.torneo-score-input[type="number"] {
  -moz-appearance: textfield;
}

/* Details summary chevron rotation */
details > summary::-webkit-details-marker {
  display: none;
}