/* ==========================================================================
   AMERICANO PADEL — STYLES & MOBILE-FIRST COMPONENTS
   ========================================================================== */

/* Header Navigation & Badges */
.header-left { display: flex; align-items: center; gap: 0.5rem; }
.header-nav-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.12);
  padding: 0.2rem 0.4rem;
  border-radius: 20px;
}
.header-nav-links .nav-link {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 14px;
  transition: all 0.2s ease;
}
.header-nav-links .nav-link.active,
.header-nav-links .nav-link:hover {
  background: #fff;
  color: var(--green-dark, #0d4f3c);
}
.header-right { display: flex; align-items: center; gap: 0.5rem; }
.role-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.role-badge.role-admin { background: #d4a017; color: #1a1a1a; }
.role-badge.role-player { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* Status Badges */
.am-status-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.am-status-badge.status-setup { background: #e0e7e4; color: #3c4f46; }
.am-status-badge.status-rotations { background: #e8f5f0; color: #1a7a5e; border: 1px solid #1a7a5e; }
.am-status-badge.status-finals { background: #fdf5e2; color: #b2850e; border: 1px solid #d4a017; }
.am-status-badge.status-completed { background: #d4a017; color: #fff; font-weight: 800; }

/* Tournaments List */
.am-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.am-list-header h1 { margin: 0; }
.am-list-header .subtitle { margin: 0; }
.am-tournaments-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 600px) {
  .am-tournaments-grid { grid-template-columns: repeat(2, 1fr); }
}
.am-tournament-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-left: 4px solid var(--green, #1a7a5e);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.am-tournament-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(13, 79, 60, 0.15);
}
.am-tournament-card .card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.am-tournament-card .tournament-date {
  font-size: 0.8rem;
  color: var(--muted, #5c6b66);
}
.am-tournament-card .tournament-title {
  margin: 0.2rem 0;
  font-size: 1.15rem;
  color: var(--green-dark, #0d4f3c);
}
.am-tournament-card .tournament-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted, #5c6b66);
}
.am-tournament-card .card-arrow {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green, #1a7a5e);
}

/* New Tournament Form */
.am-new-form { display: flex; flex-direction: column; gap: 1.5rem; }
.am-form-section {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.am-form-section legend {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green-dark, #0d4f3c);
  margin-bottom: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--border, #d8e3de);
  width: 100%;
}
.form-group { display: flex; flex-direction: column; gap: 0.3rem; }
.form-group label { font-size: 0.9rem; font-weight: 600; }
.form-group input, .form-group select {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border, #d8e3de);
  border-radius: 8px;
  font-size: 1rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 500px) {
  .form-row { grid-template-columns: 1fr; }
}
.form-hint { font-size: 0.75rem; color: var(--muted, #5c6b66); }

/* Player count radio selector pills */
.player-count-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 600px) {
  .player-count-selector { grid-template-columns: repeat(4, 1fr); }
}
.radio-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
  border: 2px solid var(--border, #d8e3de);
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  transition: all 0.2s ease;
  text-align: center;
}
.radio-pill input { display: none; }
.radio-pill strong { font-size: 0.95rem; color: var(--text, #1a1a1a); }
.radio-pill span { font-size: 0.75rem; color: var(--muted, #5c6b66); margin-top: 0.2rem; }
.radio-pill.active {
  border-color: var(--green, #1a7a5e);
  background: var(--green-light, #e8f5f0);
}
.radio-pill.active strong { color: var(--green-dark, #0d4f3c); }

/* Players Inputs Grid */
.players-inputs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
@media (min-width: 600px) {
  .players-inputs-grid { grid-template-columns: 1fr 1fr; }
}
.player-input-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  background: #f8faf9;
  border: 1px solid var(--border, #d8e3de);
  border-radius: 8px;
}
.player-slot-num {
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  background: var(--green, #1a7a5e);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.player-field-name { flex: 1; min-width: 0; }
.player-field-name input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border, #d8e3de);
  border-radius: 6px;
  font-size: 0.9rem;
}
.player-field-level { width: 85px; flex-shrink: 0; }
.player-field-level input {
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--border, #d8e3de);
  border-radius: 6px;
  font-size: 0.9rem;
  text-align: center;
}
.player-field-name label, .player-field-level label {
  font-size: 0.7rem;
  color: var(--muted, #5c6b66);
  display: block;
  margin-bottom: 2px;
}

/* Tournament Detail Page */
.am-tournament-header { margin-bottom: 1rem; }
.header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.btn-danger-ghost { color: var(--error, #c0392b); }
.btn-danger-ghost:hover { background: #fde8e8; }
.am-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.am-title-row h1 { margin: 0; font-size: 1.35rem; }
.am-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  font-size: 0.82rem;
  color: var(--muted, #5c6b66);
}

/* Champion Banner */
.champion-banner {
  background: linear-gradient(135deg, #fff9e6 0%, #ffeed0 100%);
  border: 2px solid #d4a017;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--radius, 12px);
  margin-bottom: 1rem;
}
.trophy-icon { font-size: 2.5rem; line-height: 1; }
.champion-info h3 { margin: 0; color: #b2850e; font-size: 0.95rem; text-transform: uppercase; }
.champion-names { font-size: 1.25rem; font-weight: 800; color: #1a1a1a; margin: 0.2rem 0; }
.champion-sub { font-size: 0.8rem; color: #66521a; }

/* Tabs Badges */
.tab-badge {
  display: inline-block;
  font-size: 0.7rem;
  background: #c0392b;
  color: #fff;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  margin-left: 0.25rem;
}
.tab-badge.badge-gold { background: #d4a017; color: #1a1a1a; font-weight: 800; }

/* Rotations View */
.am-action-card { text-align: center; padding: 2rem 1rem; }
.am-callout-finals {
  background: #fff9e6;
  border: 1px solid #d4a017;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}
.am-callout-finals h4 { margin: 0 0 0.25rem; color: #b2850e; }
.am-callout-finals p { margin: 0; font-size: 0.85rem; }

.am-rotations-list { display: flex; flex-direction: column; gap: 1.25rem; }
.am-rotation-card { padding: 1rem; }
.am-rotation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border, #d8e3de);
  padding-bottom: 0.6rem;
  margin-bottom: 0.75rem;
}
.am-rotation-header h2 { margin: 0; font-size: 1.1rem; color: var(--green-dark, #0d4f3c); }
.am-rotation-status { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.am-rotation-status.status-completed { color: var(--green, #1a7a5e); }
.am-rotation-status.status-ongoing { color: #d4a017; }

/* Match Cards */
.am-matches-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 650px) {
  .am-matches-grid { grid-template-columns: repeat(2, 1fr); }
}
.am-match-card {
  background: #fbfdfc;
  border: 1px solid var(--border, #d8e3de);
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.am-match-card.is-played { border-left: 4px solid var(--green, #1a7a5e); }
.am-match-card.is-pending { border-left: 4px solid #d8e3de; }

.am-match-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.court-tag {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  background: #e8f0ec;
  color: var(--green-dark, #0d4f3c);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}
.score-pill {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--green-dark, #0d4f3c);
}
.score-pill.pill-pending {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted, #5c6b66);
}

.am-teams-box {
  background: #fff;
  border: 1px solid #edf2f0;
  border-radius: 8px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.am-pair-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
}
.am-pair-row.is-winner {
  background: var(--green-light, #e8f5f0);
  color: var(--green-dark, #0d4f3c);
  font-weight: 700;
}
.am-pair-row.is-loser { opacity: 0.75; }
.pair-names { font-size: 0.9rem; }
.pair-levels { display: flex; align-items: center; gap: 0.4rem; }
.badge-level {
  font-size: 0.7rem;
  background: #f0f4f2;
  color: var(--muted, #5c6b66);
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
}
.pair-score {
  font-size: 1.1rem;
  font-weight: 800;
  min-width: 24px;
  text-align: right;
}
.pair-score.score-winner { color: var(--green, #1a7a5e); }
.am-vs-divider {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #adbdb7;
  letter-spacing: 1px;
}

/* Quick Score Form */
.am-match-actions { margin-top: 0.25rem; }
.score-details summary {
  list-style: none;
  cursor: pointer;
}
.score-details summary::-webkit-details-marker { display: none; }
.quick-score-form {
  background: #fff;
  padding: 0.6rem;
  border: 1px solid var(--border, #d8e3de);
  border-radius: 8px;
  margin-top: 0.4rem;
}
.score-inputs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.score-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.score-field label {
  font-size: 0.75rem;
  color: var(--muted, #5c6b66);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.score-field input {
  padding: 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  border: 1px solid var(--border, #d8e3de);
  border-radius: 6px;
}
.score-sep {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--muted, #5c6b66);
  margin-top: 1rem;
}
.played-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Ranking Table & Section */
.ranking-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.ranking-header-bar h2 { margin: 0; }
.am-ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.am-ranking-table th {
  background: #f4f8f6;
  color: var(--green-dark, #0d4f3c);
  font-weight: 700;
  padding: 0.6rem 0.5rem;
  text-align: left;
  border-bottom: 2px solid var(--border, #d8e3de);
}
.am-ranking-table td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid #edf2f0;
}
.col-rank { width: 32px; text-align: center; }
.col-pts, .col-conceded, .col-diff, .col-played { text-align: center; }
.col-level { text-align: center; color: var(--muted, #5c6b66); }

.rank-badge {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  background: #e0e8e4;
  color: #333;
}
.rank-badge.rank-1 { background: #d4a017; color: #fff; }
.rank-badge.rank-2 { background: #9da8a3; color: #fff; }
.rank-badge.rank-3 { background: #b87a4c; color: #fff; }

.am-tag {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  margin-left: 0.3rem;
  text-transform: uppercase;
}
.tag-gold { background: #fff3cc; color: #996e00; border: 1px solid #d4a017; }
.tag-silver { background: #eef2f0; color: #5a6b65; border: 1px solid #bdc9c4; }

.am-rank-grande td { background: #fffdf5; }
.am-rank-petite td { background: #fafcfb; }

.text-positive { color: var(--green, #1a7a5e); font-weight: 700; }
.text-negative { color: var(--error, #c0392b); }

.am-ranking-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 0.85rem;
  font-size: 0.78rem;
  color: var(--muted, #5c6b66);
}
.legend-item { display: flex; align-items: center; gap: 0.35rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-dot.dot-grande { background: #d4a017; }
.legend-dot.dot-petite { background: #9da8a3; }

/* Finals Section */
.finals-rules-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}
@media (min-width: 600px) {
  .finals-rules-preview { grid-template-columns: 1fr 1fr; }
}
.rule-box {
  padding: 0.85rem;
  border-radius: 8px;
  background: #fff;
}
.rule-box.gold-border { border-left: 4px solid #d4a017; background: #fffcf2; }
.rule-box.silver-border { border-left: 4px solid #9da8a3; background: #f9fbfb; }
.rule-box h4 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.rule-box p { margin: 0; font-size: 0.85rem; color: var(--muted, #5c6b66); }

.finals-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.am-final-card {
  padding: 1.25rem;
  position: relative;
}
.am-final-card.card-grande {
  border: 2px solid #d4a017;
  background: #fffdf8;
}
.am-final-card.card-petite {
  border: 2px solid #9da8a3;
  background: #fcfdfe;
}
.final-badge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tag-gold-big {
  background: #d4a017;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.tag-silver-big {
  background: #7d8a85;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.final-sub {
  font-size: 0.85rem;
  color: var(--muted, #5c6b66);
  margin: 0.4rem 0 0.8rem;
}
.final-teams-box {
  padding: 0.75rem;
}
.final-winner-ribbon {
  margin-top: 0.85rem;
  background: #fff3cc;
  color: #7a5800;
  padding: 0.6rem;
  text-align: center;
  border-radius: 8px;
  font-size: 0.95rem;
  border: 1px dashed #d4a017;
}
.final-winner-ribbon.ribbon-silver {
  background: #eef2f0;
  color: #3b4d47;
  border-color: #9da8a3;
}
.btn-gold {
  background: #d4a017;
  color: #fff;
  font-weight: 700;
  border: none;
}
.btn-gold:hover { background: #b8860b; }

/* Dedicated Ranking Standalone View */
.am-ranking-standalone .ranking-title-box { margin-bottom: 0.5rem; }
.am-ranking-standalone .refresh-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.am-rules-reminder {
  font-size: 0.85rem;
  background: #fbfdfc;
}
.am-rules-reminder h4 { margin: 0 0 0.4rem; color: var(--green-dark, #0d4f3c); }
.am-rules-reminder ol { margin: 0; padding-left: 1.25rem; }
.am-rules-reminder li { margin-bottom: 0.25rem; }

/* Utilities */
.font-weight-bold { font-weight: 700; }
.text-success { color: var(--green, #1a7a5e); }
.text-muted { color: var(--muted, #5c6b66); }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }